:root{--fg:#f3f5f7;--dim:rgba(243,245,247,.55);--line:rgba(255,255,255,.18);--acc:#ffb36b;--ok:#62e6a6;--bad:#ff6b6b}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:#05070b;color:var(--fg);font-family:Inter,system-ui,sans-serif;overflow:hidden;user-select:none;-webkit-user-select:none;touch-action:none;overscroll-behavior:none}
canvas{position:fixed;inset:0;width:100%;height:100%;display:block}
#hud{position:fixed;inset:0;pointer-events:none}
#top{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:14px 16px 0;gap:10px}
#clock{font-family:'JetBrains Mono',monospace;font-size:14px;letter-spacing:.06em;min-width:118px}
#phaseName{font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--dim);text-align:center;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#mute{pointer-events:auto;min-width:118px;text-align:right;background:none;border:0;color:var(--dim);font:600 9.5px Inter;letter-spacing:.22em;text-transform:uppercase;padding:6px 0;cursor:pointer}
#tl{position:absolute;top:44px;left:18px;right:18px;height:22px;display:flex;justify-content:space-between;align-items:center}
#tl:before{content:"";position:absolute;left:4px;right:4px;top:50%;height:1px;background:var(--line)}
#tl .ms{position:relative;width:9px;height:9px}
#tl .ms i{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:#05070b;transition:all .6s}
#tl .ms.done i{background:#f3f5f7;border-color:#f3f5f7}
#tl .ms.cur i{border-color:var(--acc);background:var(--acc);box-shadow:0 0 0 4px rgba(255,179,107,.15);animation:pulse 1.8s ease-in-out infinite}
#tl .ms span{position:absolute;top:14px;left:50%;transform:translateX(-50%);font-size:8px;letter-spacing:.2em;text-transform:uppercase;color:var(--acc);white-space:nowrap;opacity:0;transition:opacity .5s}
#tl .ms.cur span{opacity:1}
#tl .ms:first-child span{left:0;transform:none}#tl .ms:last-child span{left:auto;right:0;transform:none}
@keyframes pulse{50%{box-shadow:0 0 0 7px rgba(255,179,107,.04)}}
#toast{position:absolute;top:27%;left:0;right:0;text-align:center;opacity:0;transform:translateY(10px);transition:opacity .7s,transform .7s cubic-bezier(.2,.8,.2,1)}
#toast.show{opacity:1;transform:none}
#toast .t1{font-weight:200;font-size:26px;letter-spacing:.32em;text-transform:uppercase;padding-left:.32em}
#toast .t2{margin-top:6px;font-size:11px;letter-spacing:.16em;color:var(--dim);text-transform:uppercase}
#hint{position:absolute;left:0;right:0;bottom:calc(98px + env(safe-area-inset-bottom));text-align:center;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--dim);transition:color .3s}
#hint.warn{color:var(--bad)}#hint.good{color:var(--ok)}
#controls{position:absolute;left:0;right:0;bottom:0;padding:0 16px calc(20px + env(safe-area-inset-bottom));display:flex;align-items:flex-end;justify-content:space-between}
.grp{display:flex;gap:10px}
.btn{pointer-events:auto;border:1px solid var(--line);background:rgba(10,14,20,.42);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--fg);border-radius:999px;height:62px;min-width:62px;padding:0 18px;font:600 12px Inter;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;transition:background .2s,color .2s,transform .15s;touch-action:none}
.btn.on{background:rgba(243,245,247,.92);color:#05070b;transform:scale(.96)}
.btn.arrow{font-size:15px;letter-spacing:0;padding:0}
#main{min-width:150px}
.hide{display:none!important}
#thr{position:absolute;right:16px;bottom:calc(22px + env(safe-area-inset-bottom));width:62px;height:230px;pointer-events:auto;touch-action:none;border:1px solid var(--line);border-radius:31px;background:rgba(10,14,20,.42);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);overflow:hidden;cursor:ns-resize}
#thrFill{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(to top,rgba(255,179,107,.35),rgba(255,179,107,.08))}
#thrKnob{position:absolute;left:7px;right:7px;height:4px;border-radius:2px;background:#f3f5f7;box-shadow:0 0 12px rgba(255,255,255,.5)}
#thrLab{position:absolute;left:0;right:0;top:12px;text-align:center;font:500 12px 'JetBrains Mono';}
#thrCap{position:absolute;left:0;right:0;bottom:12px;text-align:center;font:600 8px Inter;letter-spacing:.2em;color:var(--dim)}
#card{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:22px;background:radial-gradient(ellipse at center,rgba(5,7,11,.25),rgba(5,7,11,.72));transition:opacity .55s;z-index:5}
#card.off{opacity:0;pointer-events:none}
.cin{width:100%;max-width:390px;padding:28px 24px 24px;border:1px solid var(--line);border-radius:24px;background:rgba(12,16,24,.5);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);transition:transform .7s cubic-bezier(.2,.8,.2,1)}
#card.off .cin{transform:translateY(16px) scale(.985)}
.kick{font-size:9.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--acc)}
.cin h1{font-weight:300;font-size:30px;line-height:1.1;margin:10px 0 12px;letter-spacing:-.01em}
.cin h1.big{font-weight:200;font-size:40px;letter-spacing:.34em;margin:14px 0 6px}
.cin p{margin:0;font-size:14px;line-height:1.55;color:rgba(243,245,247,.78);font-weight:300}
.cin .note{margin-top:14px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(243,245,247,.4)}
.btns{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}
.cb{pointer-events:auto;flex:1;min-width:120px;padding:15px 18px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--fg);font:600 11px Inter;letter-spacing:.22em;text-transform:uppercase;cursor:pointer;transition:background .2s,transform .15s}
.cb:active{transform:scale(.97)}
.cb.pri{background:#f3f5f7;color:#05070b;border-color:#f3f5f7}
.res{display:flex;align-items:baseline;gap:8px;padding:10px 14px;margin:0 0 16px;border:1px solid var(--line);border-radius:14px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.res b{margin-left:auto;font:500 18px 'JetBrains Mono';color:var(--fg)}
.rows{margin-top:16px;display:grid;gap:9px}
.row{display:grid;grid-template-columns:1fr 90px 30px;gap:10px;align-items:center;font-size:11px;letter-spacing:.08em;color:rgba(243,245,247,.75)}
.row i{display:block;height:3px;border-radius:2px;background:rgba(255,255,255,.1);overflow:hidden}
.row i b{display:block;height:100%;background:linear-gradient(90deg,#ffb36b,#f3f5f7);width:0;transition:width 1.2s cubic-bezier(.2,.8,.2,1)}
.row em{font:500 11px 'JetBrains Mono';font-style:normal;text-align:right}
.tot{display:flex;align-items:baseline;justify-content:space-between;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.tot span{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.tot b{font:500 26px 'JetBrains Mono'}
#fade{position:fixed;inset:0;background:#05070b;opacity:0;pointer-events:none;transition:opacity .5s;z-index:6}
#fade.on{opacity:1}