:root{--blue:#3d7bff;--red:#f0473a;--edge:#070b16;--card:#0a0e1cdb;--ink:#f4f6f0;--mute:#f4f6f09e;--gold:#ffb23e;--lip:inset 0 -4px 0 #0000004d, inset 0 2px 0 #ffffff1f;--ease:cubic-bezier(.2, 0, 0, 1)}*{box-sizing:border-box}html,body{height:100%;color:var(--ink);-webkit-font-smoothing:antialiased;background:#0b0f1c;margin:0;font:600 15px/1.35 ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;overflow:hidden}canvas#game{display:block;position:fixed;inset:0}#ui{pointer-events:none;position:fixed;inset:0}#ui button,#ui .screen,#ui .menu{pointer-events:auto}.credit{left:50%;bottom:max(14px, env(safe-area-inset-bottom));min-height:40px;color:var(--mute);transition-property:color;transition-duration:.15s;transition-timing-function:var(--ease);align-items:center;gap:8px;padding:0 12px;font-size:13px;text-decoration:none;display:inline-flex;position:fixed;translate:-50%}.credit:hover,.credit:focus-visible{color:var(--ink)}.credit img{outline-offset:-1px;border-radius:50%;outline:1px solid #ffffff24}@media (height<=500px){.credit{left:auto;right:max(4px, env(safe-area-inset-right));bottom:4px;translate:none}}.hidden{display:none!important}.b{appearance:none;cursor:pointer;color:var(--ink);font:inherit;letter-spacing:.01em;min-height:48px;box-shadow:var(--lip), 0 0 0 2px var(--edge);background:#2a3146;border:0;border-radius:2px;justify-content:center;align-items:center;gap:12px;padding:13px 22px 16px;font-size:17px;transition-property:transform,box-shadow,background-color,filter;transition-duration:.12s;display:flex}.b:hover{background:#343c55}.b:active{box-shadow:inset 0 -2px 0 #0000004d, inset 0 2px 0 #ffffff1f, 0 0 0 2px var(--edge);transform:translateY(2px)}.b:focus-visible,.lvl:focus-visible{outline-offset:3px;outline:3px solid #fff}.b[hidden]{display:none}.b:disabled{cursor:default;filter:saturate(.4)brightness(.7)}.b.play{background:var(--blue);text-transform:uppercase;letter-spacing:.04em;color:#fff;text-shadow:0 2px #00000047;min-height:64px;font-size:22px;font-weight:800}.b.play:hover:not(:disabled){filter:brightness(1.08)}.b.small{min-height:44px;padding:10px 14px 13px;font-size:15px}.b.solo{width:100%;margin-top:18px}.b.invite{justify-content:space-between;width:100%;margin:0 0 16px}.b.invite span{color:var(--mute);font:600 14px/1 ui-monospace,monospace}.stack{gap:12px;display:grid}.pair{grid-template-columns:1fr 1fr;gap:12px;display:grid}kbd{color:#fff;min-width:26px;height:26px;text-shadow:none;letter-spacing:0;text-transform:none;background:#00000061;border-radius:3px;place-items:center;padding:0 7px;font:700 12px/1 ui-monospace,monospace;display:inline-grid;box-shadow:inset 0 -2px #0006}kbd.g{background:#1a1c22;border-radius:50%;width:26px;padding:0}kbd.g svg{width:18px;height:18px}.card{background:var(--card);-webkit-backdrop-filter:blur(10px);width:min(560px,100%);box-shadow:0 0 0 2px var(--edge), 0 24px 60px #00000073;border-radius:4px;padding:26px 26px 18px}.card.wide{width:min(760px,100%)}.card.center{text-align:center}.card h2{text-wrap:balance;margin:0 0 18px;font-size:22px;font-weight:800}.foot{color:var(--mute);justify-content:space-between;align-items:center;gap:12px;margin-top:18px;font-size:13px;display:flex}.foot>span{align-items:center;gap:8px;display:inline-flex}.muted{color:var(--mute);font-size:13px}.line{color:var(--mute);margin:0 0 6px}.note{color:#ff7b70;margin:14px 0 0}.logo3d{pointer-events:none;width:100%;height:40vh;transition:height .32s var(--ease), top .32s var(--ease);display:block;position:fixed;top:4vh;left:0;right:0}.menu{z-index:-1;-webkit-backdrop-filter:blur(3px)saturate(.9)brightness(.8);background:radial-gradient(70% 45% at 50% 26%,#0408128c,#0000 75%),linear-gradient(#04081259,#04081226 40%,#040812b3);align-content:start;justify-items:center;padding:0 16px 16px;display:grid;position:absolute;inset:0;overflow-y:auto}.menu-body{justify-items:center;width:100%;display:grid}.menu-body>*{animation:up .26s var(--ease) both}.menu.still .menu-body>*{animation:none}@keyframes up{0%{opacity:0;transform:translateY(8px)}}.title-menu{width:min(360px,100%)}.levels{grid-template-columns:repeat(3,1fr);gap:12px;display:grid}.lvl{appearance:none;text-align:left;cursor:pointer;color:var(--ink);font:inherit;background:#ffffff0f;border:0;border-radius:3px;align-content:start;gap:6px;padding:16px 16px 14px;transition-property:background-color,box-shadow,transform;transition-duration:.14s;display:grid;box-shadow:inset 0 0 0 2px #ffffff14}.lvl b{font-size:19px}.lvl span{color:var(--mute);text-wrap:pretty;font-size:13px;font-weight:500}.lvl i{gap:4px;margin-top:6px;display:flex}.lvl em{opacity:.5;background:currentColor;width:12px;height:12px}.lvl[aria-pressed=true]{box-shadow:inset 0 0 0 3px var(--blue);background:#ffffff1a}.lvl[aria-pressed=true] em{background:var(--blue);opacity:1}.lvl:active{transform:scale(.98)}.lvl:focus-visible{outline:none}.ctls{gap:8px;display:grid}.ctl-h{color:var(--mute);letter-spacing:.14em;text-transform:uppercase;margin:16px 0 8px;padding:0 12px;font-size:11px;font-weight:800}.ctl{background:#ffffff0d;border-radius:3px;grid-template-columns:110px 1fr;align-items:center;gap:14px;padding:8px 12px;display:grid}.ctl .keys{justify-content:flex-start;display:flex}.ctl .keys kbd{min-width:32px;height:32px;font-size:13px}.ctl .keys kbd.g{width:32px}.ctl b{font-size:16px;display:block}.ctl span{color:var(--mute);font-size:13px;font-weight:500}.more{color:var(--mute);grid-template-columns:repeat(2,1fr);gap:8px 16px;margin-top:14px;padding:0 12px;font-size:13px;display:grid}.mini{align-items:center;gap:10px;display:flex}.b.big{text-align:left;flex-direction:column;justify-content:flex-start;align-items:flex-start;gap:2px;padding:16px 20px 19px}.b.big b{font-size:19px}.b.big span,.b.row span{color:var(--mute);font-size:13px;font-weight:500}.b.row{justify-content:space-between}.b.row span{color:var(--ink);font-size:15px}.code{justify-content:center;gap:10px;margin:6px 0 18px;display:flex}.code span{width:64px;height:76px;box-shadow:inset 0 -4px 0 #0000004d, 0 0 0 2px var(--edge);color:var(--ink);background:#ffffff14;border-radius:3px;place-items:center;font:800 38px/1 ui-monospace,monospace;display:grid}.code.dim span{color:var(--mute)}.code .slot{cursor:pointer;transition:box-shadow .12s}.code .slot.cur{box-shadow:inset 0 -4px 0 #0000004d, 0 0 0 2px var(--edge), 0 0 0 5px var(--blue)}.wait{color:var(--mute);align-items:center;gap:10px;margin:0;display:inline-flex}.wait i{background:var(--blue);width:10px;height:10px;animation:.9s steps(2,end) infinite blink}@keyframes blink{50%{opacity:.2}}.rtt{font-variant-numeric:tabular-nums;min-height:1.35em;margin:6px 0 0;font-size:28px;font-weight:800}.score{background:var(--card);box-shadow:0 0 0 2px var(--edge), 0 8px 24px #00000059;border-radius:2px;align-items:stretch;display:flex;position:absolute;top:14px;left:50%;overflow:hidden;transform:translate(-50%)}.score .num{color:#fff;font-variant-numeric:tabular-nums;text-shadow:0 2px #00000047;min-width:46px;box-shadow:var(--lip);place-items:center;padding:0 8px 3px;font-size:26px;font-weight:800;display:grid}.blue{background:var(--blue)}.red{background:var(--red)}.score .mid{text-align:center;align-content:center;min-width:96px;padding:7px 14px 8px;display:grid}.score .clock{font-variant-numeric:tabular-nums;letter-spacing:.04em;font-size:20px;font-weight:700}.golden{color:var(--gold);letter-spacing:.14em;text-transform:uppercase;font-size:10px;font-weight:800}.mute{top:max(14px, env(safe-area-inset-top));right:max(14px, env(safe-area-inset-right));cursor:pointer;width:40px;height:40px;color:var(--ink);background:var(--card);box-shadow:0 0 0 2px var(--edge);opacity:.8;border:0;border-radius:2px;place-items:center;padding:0;transition-property:opacity,background-color;transition-duration:.12s;display:grid;position:absolute}.mute:hover{opacity:1;background:#2a3146}.mute svg{width:20px;height:20px}.mute[aria-pressed=true]{color:var(--mute)}.replay{background:var(--card);box-shadow:0 0 0 2px var(--edge), inset 3px 0 0 var(--red);letter-spacing:.16em;text-transform:uppercase;border-radius:2px;padding:6px 12px;font-size:12px;font-weight:800;position:absolute;top:48px;left:14px}.replay span{letter-spacing:.08em;opacity:.55;margin-left:10px;font-weight:600}.perf{background:var(--card);box-shadow:0 0 0 2px var(--edge);font-variant-numeric:tabular-nums;border-radius:2px;gap:14px;padding:5px 10px;font-size:12px;font-weight:700;display:flex;position:absolute;top:14px;left:14px}.perf small{letter-spacing:.1em;opacity:.55;margin-left:4px;font-size:10px;font-weight:600}.perf .link{opacity:.85}.perf .link b{margin-left:10px}.perf .ping.good{color:#7ee08a}.perf .ping.ok{color:var(--gold)}.perf .ping.bad{color:#ff6b5e}.meter{will-change:transform;background:#080c12cc;border:1px solid #ffffff47;width:84px;height:9px;margin-top:-4px;position:absolute;top:0;left:0}.meter .fill{background:#e9eef3;width:0;position:absolute;top:0;bottom:0;left:0}.meter .band{border:1px solid var(--gold);background:#ffb23e59;display:none;position:absolute;top:-2px;bottom:-2px}.meter .mark{background:#ffffffb3;width:2px;margin-left:-1px;display:none;position:absolute;top:-3px;bottom:-3px}.meter.shoot .band,.meter.shoot .mark{display:block}.meter.perfect .fill{background:var(--gold);box-shadow:0 0 10px var(--gold)}.meter.over .fill{background:#e0584a}.meter .kn{background:#ffffff80;display:none;position:absolute;top:-2px;bottom:-2px}.meter.kn-range .kn{display:block}.meter.pure .fill{box-shadow:0 0 12px #fff, 0 0 4px var(--gold);background:#fff}.edge-arrow{will-change:transform;pointer-events:none;width:30px;height:30px;margin:-15px 0 0 -15px;position:absolute;top:0;left:0}.edge-arrow svg{width:100%;height:100%;display:block}.hint{background:var(--card);max-width:calc(100% - 32px);box-shadow:0 0 0 2px var(--edge), 0 8px 24px #00000059;text-wrap:balance;pointer-events:none;opacity:0;transition-property:opacity,translate;transition-duration:.16s;transition-timing-function:var(--ease);border-radius:2px;align-items:center;gap:18px;padding:8px 14px;font-size:14px;font-weight:700;display:flex;position:absolute;bottom:max(28px,7vh);left:50%;translate:-50% 6px}.hint.on{opacity:1;transition-duration:.24s;translate:-50%}.hint span{align-items:center;gap:8px;display:inline-flex}.screen{background:radial-gradient(#04081259,#040812c7);place-items:center;padding:16px;display:grid;position:absolute;inset:0;overflow-y:auto}.screen>.card{animation:up .26s var(--ease) both}.pause{width:min(360px,100%)}.admin{width:min(560px,100%)}.adm{gap:8px;display:grid}.adm-row{background:#ffffff0d;border-radius:3px;grid-template-columns:1fr auto;align-items:center;gap:14px;padding:8px 8px 8px 14px;display:grid}.adm-label{text-wrap:pretty;font-size:15px}.step{grid-template-columns:44px 92px 44px;align-items:center;gap:8px;display:grid}.step .b.small{min-height:44px;padding:0 0 3px;font-size:20px}.step output{text-align:center;font-variant-numeric:tabular-nums;font-size:17px;font-weight:800}.step output.changed{color:var(--gold)}.adm-note{margin:14px 0 0}.admin .foot .b.small{min-height:40px}@media (width<=640px){.adm-row{grid-template-columns:1fr;gap:6px;padding:10px 10px 10px 12px}.step{grid-template-columns:44px 1fr 44px}}.full-card{text-align:center;width:min(440px,100%)}.full-card .pair{margin-top:20px}.full-card .pair:has(>[hidden]){grid-template-columns:1fr}.full-card .b.play.ask{letter-spacing:.02em;text-wrap:balance;font-size:15px}.full-card .b[aria-disabled=true]{cursor:default;filter:saturate(.4)brightness(.7)}.full-card .b.play.hot{box-shadow:var(--lip), 0 0 0 2px var(--edge), 0 0 0 5px var(--gold);animation:1.2s ease-in-out infinite alternate ask}@keyframes ask{to{box-shadow:var(--lip), 0 0 0 2px var(--edge), 0 0 0 7px #ffb23e59}}.final{width:max-content;box-shadow:0 0 0 2px var(--edge);border-radius:2px;justify-content:center;gap:0;margin:0 auto 10px;display:flex;overflow:hidden}.final b{color:#fff;font-variant-numeric:tabular-nums;text-shadow:0 3px #00000047;min-width:76px;box-shadow:var(--lip);padding:6px 14px 10px;font-size:48px;font-weight:800;line-height:1}.verdict{color:var(--mute);margin:4px 0 16px;font-size:18px;font-weight:800}.verdict.win{color:#fff}.full-card .row{border-top:1px solid #ffffff14;grid-template-columns:1fr auto 1fr;gap:16px;padding:7px 0;display:grid}.full-card .row span{color:var(--mute);font-size:13px}.full-card .row b:first-child{text-align:right}.full-card .row b:last-child{text-align:left}.streak{color:var(--mute);margin-top:12px;font-size:13px}.streak b{color:var(--ink)}@media (width<=640px){.levels{grid-template-columns:1fr}.ctl{grid-template-columns:84px 1fr}.more{grid-template-columns:1fr}.card{padding:20px 18px 14px}.code span{width:56px;height:68px;font-size:32px}}@media (prefers-reduced-motion:reduce){.menu-body>*,.screen>.card,.full-card .b.play.hot{animation:none}}.replay-fx{pointer-events:none;position:fixed;inset:0}.replay-fx .bar{background:var(--edge);height:clamp(28px,9vh,72px);animation:.24s cubic-bezier(.2,.8,.2,1) both bar-in;position:absolute;left:0;right:0}.replay-fx .bar.top{--from:-100%;top:0}.replay-fx .bar.bottom{--from:100%;align-items:center;gap:6px;padding:0 16px;display:flex;bottom:0}.replay-fx .blk{background:var(--blue);width:12px;height:12px}.replay-fx .blk.red{background:var(--red);margin-right:6px}.replay-fx b{letter-spacing:.22em;text-transform:uppercase;font-size:clamp(15px,3.2vh,24px);font-weight:800}.replay-fx span{letter-spacing:.12em;text-transform:uppercase;opacity:.55;margin-left:auto;font-size:11px;font-weight:600}@keyframes bar-in{0%{transform:translateY(var(--from))}}.call{background:var(--edge);box-shadow:0 0 0 2px var(--edge), 0 8px 24px #00000059;pointer-events:none;border-radius:2px;align-items:center;gap:10px;padding:9px 18px 10px 14px;display:flex;position:absolute;top:clamp(70px,16vh,140px);left:50%;transform:translate(-50%)}.call .blk{background:var(--blue);width:12px;height:12px}.call .blk.red{background:var(--red)}.call b{letter-spacing:.22em;text-transform:uppercase;white-space:nowrap;font-size:clamp(15px,3.2vh,24px);font-weight:800}.call.go{animation:call-in .22s var(--ease) both}@keyframes call-in{0%{opacity:0;transform:translate(-50%)scale(1.25)}}.replay-wipe{pointer-events:none;position:fixed;inset:0;overflow:hidden}.replay-wipe i{width:34vw;position:absolute;top:-10%;bottom:-10%;left:0;transform:translate(-160%)skew(-14deg)}.replay-wipe i:first-child{background:var(--blue)}.replay-wipe i:nth-child(2){background:var(--edge);width:46vw}.replay-wipe i:nth-child(3){background:var(--red);width:22vw}.replay-wipe.go i{animation:.46s cubic-bezier(.55,0,.35,1) both wipe}.replay-wipe.go i:nth-child(2){animation-delay:40ms}.replay-wipe.go i:nth-child(3){animation-delay:80ms}@keyframes wipe{0%{transform:translate(-160%)skew(-14deg)}to{transform:translate(110vw)skew(-14deg)}}@media (prefers-reduced-motion:reduce){.replay-wipe.go i,.replay-fx .bar,.call.go{animation:none}}