:root{color-scheme:dark;--ink:#dce6df;--quiet:#9fb0ab;--spoken:#e9c79b;--sung:#b9dfe0;--code:#9fdcb4;--deep:#050a0b;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--ink);background:var(--deep);font-synthesis:none}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--deep)}body{overscroll-behavior:none}
button,a{font:inherit;color:inherit;background:none;border:0;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent}button:disabled{opacity:.38;cursor:wait}
button:focus-visible,a:focus-visible,canvas:focus-visible{outline:1px solid var(--sung);outline-offset:4px}[hidden]{display:none!important}
#hangle-water,#hangle-field{position:fixed;inset:0;width:100%;height:100%;display:block}#hangle-field{touch-action:none;outline:none;cursor:crosshair}#hangle-field:focus-visible{outline-offset:-4px}
header{position:fixed;top:max(4.6vh,env(safe-area-inset-top));left:5.4vw;display:flex;align-items:center;gap:28px;font-size:11px;letter-spacing:.14em;text-shadow:0 1px 10px #000}
#hangle-brand{min-height:44px;display:flex;align-items:center;color:var(--ink)}.hangle-name{color:var(--sung);font-size:9px;letter-spacing:.32em}
#hangle-entrance{position:fixed;left:6.2vw;top:21vh;pointer-events:none;transition:opacity 2.4s,transform 3s;text-shadow:0 2px 18px #000}
#hangle-entrance h1{margin:0;font:400 clamp(44px,6.4vw,92px)/1 Georgia,'Times New Roman',serif;letter-spacing:.09em;color:#e7efe9}
.hangle-subtitle{margin:16px 0 0;font-size:11px;letter-spacing:.16em;color:var(--sung)}#hangle-score-line{margin:30px 0 0;max-width:min(78vw,430px);font:italic 16px/1.6 Georgia,'Times New Roman',serif;color:var(--spoken)}
body.entered #hangle-entrance{opacity:0;transform:translateY(-10px)}
#hangle-code{position:fixed;right:4.2vw;top:29vh;width:min(30vw,350px);max-height:44vh;margin:0;padding:0 0 0 14px;list-style:none;overflow:hidden;font-size:10.5px;line-height:1.78;color:var(--code);opacity:.86;pointer-events:none;border-left:1px solid #9fdcb426;text-shadow:0 0 10px #000,0 0 3px #000;display:flex;flex-direction:column;justify-content:flex-end}
#hangle-code li{white-space:pre;overflow:hidden;text-overflow:ellipsis}#hangle-code li[data-kind=half]{color:var(--spoken)}#hangle-code li[data-kind=other]{color:var(--sung)}#hangle-code li:last-child::after{content:'▍';margin-left:2px;opacity:.7;animation:caret 1.1s steps(2) infinite}
@keyframes caret{50%{opacity:0}}body.still #hangle-code li:last-child::after{animation:none}
#hangle-lower-third{position:fixed;left:6.2vw;bottom:15.5vh;max-width:min(62vw,720px);pointer-events:none;border-top:1px solid #b9dfe03a;padding-top:12px;text-shadow:0 1px 14px #000,0 0 4px #000;transition:opacity .6s}
body:not(.entered) #hangle-lower-third{opacity:0}
#hangle-sung{margin:0;min-height:1.3em;font:italic clamp(19px,2.5vw,32px)/1.3 Georgia,'Times New Roman',serif;color:var(--sung)}
#hangle-spoken{margin:8px 0 0;min-height:1.6em;font-size:11px;letter-spacing:.05em;color:var(--spoken);transition:opacity .25s}#hangle-spoken::before{content:'spoken, 2026 — ';color:#e9c79b99}
#hangle-lower-third[data-kind=wait] #hangle-sung{letter-spacing:.02em;color:#f0dcc0}
#hangle-controls{position:fixed;left:5.4vw;right:5.4vw;bottom:max(4.6vh,env(safe-area-inset-bottom));display:flex;align-items:center;gap:clamp(6px,1.4vw,22px);font-size:12px;letter-spacing:.04em;color:var(--quiet);text-shadow:0 1px 8px #000}
#hangle-controls button,#hangle-controls a{min-height:44px;padding:10px 8px}#hangle-controls button:hover,#hangle-controls a:hover{color:var(--ink)}
#hangle-controls .ellipse{min-width:96px;padding:10px 24px;border:1px solid #dce6df88;border-radius:50%;color:var(--ink);letter-spacing:.08em}
#hangle-controls [aria-pressed=true]{color:var(--spoken);text-decoration:underline;text-underline-offset:7px;text-decoration-thickness:1px}
#hangle-help{font-size:17px;min-width:44px}#hangle-leave{margin-left:auto}
.hangle-time{position:fixed;right:5.6vw;bottom:calc(max(4.6vh,env(safe-area-inset-bottom)) + 54px);display:flex;gap:10px;font-size:9px;letter-spacing:.1em;color:var(--quiet)}
.hangle-line{position:fixed;left:5.4vw;right:5.4vw;bottom:max(2.2vh,calc(env(safe-area-inset-bottom) - 8px));height:1px;background:#dce6df24}.hangle-line div{height:1px;width:0;background:#b9dfe0aa}.hangle-line i{position:absolute;top:-3px;width:1px;height:7px;background:#dce6df55}.hangle-line i:nth-of-type(1){left:33.333%}.hangle-line i:nth-of-type(2){left:66.667%}
#hangle-notice{position:fixed;left:6.2vw;bottom:calc(max(4.6vh,env(safe-area-inset-bottom)) + 56px);max-width:min(70vw,520px);margin:0;font-size:11px;line-height:1.7;color:var(--spoken);pointer-events:none;text-shadow:0 1px 10px #000}#hangle-notice:empty{display:none}
#hangle-notes{position:fixed;right:0;top:0;bottom:0;z-index:6;width:min(440px,100vw);overflow:auto;padding:46px 34px 30px;background:#071012f4;border-left:1px solid #b9dfe033;backdrop-filter:blur(16px)}
#hangle-notes h2{margin:0 0 26px;font:400 12px/1.6 ui-monospace,monospace;letter-spacing:.12em;color:var(--sung)}#hangle-notes p{font-size:11px;line-height:1.9;color:#c7d3cf;margin:18px 0}#hangle-notes a{text-decoration:underline;text-underline-offset:4px}
#hangle-notes-close{position:absolute;top:20px;right:24px;font-size:27px;min-width:44px;min-height:44px}#hangle-metrics{display:block;margin-top:24px;padding-top:18px;border-top:1px solid #9fb0ab40;font-size:9px;line-height:1.9;color:#8d9c98}
body.closed canvas{opacity:.4}
.p3r-recording-floating[data-p3r-recording="hangle"]{top:max(4.6vh,env(safe-area-inset-top));right:5.4vw;transform:rotate(1deg);background:#061012e8;border-color:#b9dfe055}
@media(max-width:900px){#hangle-code{width:min(36vw,300px);font-size:9.5px}}
@media(max-width:600px){
 header{left:16px;top:max(12px,env(safe-area-inset-top));gap:14px}.hangle-name{font-size:8px;letter-spacing:.2em}
 #hangle-entrance{left:16px;right:16px;top:30vh}#hangle-score-line{font-size:14px}
 #hangle-code{left:16px;right:16px;top:172px;width:auto;max-height:64px;font-size:9px;line-height:1.65;border-left:0;padding:0}
 #hangle-lower-third{left:16px;right:16px;bottom:154px;max-width:none}#hangle-sung{font-size:20px}#hangle-spoken{font-size:10px}
 #hangle-controls{left:10px;right:10px;bottom:max(12px,env(safe-area-inset-bottom));flex-wrap:wrap;gap:2px 4px;font-size:11px}#hangle-controls button,#hangle-controls a{padding:9px 6px}#hangle-controls .ellipse{min-width:78px;padding:9px 16px}
 .hangle-time{right:16px;bottom:118px}.hangle-line{left:16px;right:16px;bottom:8px}#hangle-notice{left:16px;right:16px;bottom:126px;max-width:none}
 .p3r-recording-floating[data-p3r-recording="hangle"]{top:62px;right:10px}
 #hangle-notes{padding:44px 26px}#hangle-help{font-size:20px}
}
@media(max-width:600px) and (max-height:620px){#hangle-code{max-height:32px;font-size:8.5px}#hangle-entrance{top:34vh}#hangle-entrance h1{font-size:40px}}
@media(max-height:560px) and (min-width:601px){#hangle-code{top:24vh;max-height:36vh}#hangle-lower-third{bottom:19vh}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}