:root{--bg:#090b0e;--bg2:#0d1116;--panel:rgba(13,17,22,.74);--line:#1c2530;--line2:#2a3744;--ink:#e9eff5;--dim:#79899a;--faint:#48566580;--cyan:#36e0ff;--cyan-deep:#0a3543;--danger:#ff4d4d;--gold:#ffcf4d;--green:#5dffa0;--violet:#8a7dff;--display:"Chakra Petch",system-ui,sans-serif;--mono:"IBM Plex Mono",ui-monospace,monospace}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%}body{background:radial-gradient(120% 90% at 50% -20%,#16202c 0%,var(--bg) 58%),var(--bg);color:var(--ink);font-family:var(--mono);display:flex;align-items:center;justify-content:center;min-height:100%;overflow:hidden;-webkit-tap-highlight-color:transparent}body:after{content:"";position:fixed;inset:0;pointer-events:none;z-index:50;opacity:.04;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}#wrap{position:fixed;inset:0}canvas{position:fixed;inset:0;width:100vw;height:100vh;display:block;background:#070a0e;touch-action:none}#hud{position:absolute;inset:0;pointer-events:none;padding:16px 18px;display:flex;flex-direction:column;justify-content:space-between;font-variant-numeric:tabular-nums}.row{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}.row.bottom{align-items:flex-end}.mod{position:relative;background:var(--panel);border:1px solid var(--line);padding:7px 12px;backdrop-filter:blur(6px);font-size:12px;line-height:1.35;clip-path:polygon(0 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%)}.mod.time{text-align:right}.modlbl{color:var(--dim);font-size:10px;letter-spacing:.22em;text-transform:uppercase}.modlbl.mt{margin-top:8px}.big{font-family:var(--display);font-weight:700;font-size:28px;letter-spacing:.02em;line-height:1.05}.modsub{margin-top:1px}.mult{color:var(--gold);font-weight:600}.streak{color:var(--cyan);font-weight:600;margin-left:6px}.ready{color:var(--cyan);font-size:10px;letter-spacing:.2em}.bar{height:6px;width:128px;background:#162029;border:1px solid var(--line);overflow:hidden;margin-top:6px}#dashfill{height:100%;width:100%;background:linear-gradient(90deg,var(--violet),var(--cyan))}#chargeWrap{display:flex;gap:3px;margin-top:6px}.seg{width:38px;height:9px;background:#162029;border:1px solid var(--line2)}.seg.on{background:linear-gradient(90deg,#ff9d3c,var(--gold));border-color:var(--gold);box-shadow:0 0 6px #ffcf4d66}.seg.half{background:linear-gradient(90deg,#ff9d3c 0 50%,#162029 50% 100%);border-color:#ff9d3c88}#rank{min-width:138px}.rk{display:flex;justify-content:space-between;gap:10px;font-size:11px;padding:2px 0;color:var(--dim)}.rk b{font-variant-numeric:tabular-nums;color:var(--ink);font-weight:500}.rk.me,.rk.me b{color:var(--cyan)}.swatch{display:inline-block;width:7px;height:7px;margin-right:6px;transform:translateY(-1px)}.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#06080b8c,#06080bdb 70%);backdrop-filter:blur(3px);border-radius:4px;padding:22px}.frame{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center}.tick{position:absolute;width:16px;height:16px;border:0 solid var(--cyan);opacity:.6}.tick.tl{top:6px;left:6px;border-top-width:2px;border-left-width:2px}.tick.tr{top:6px;right:6px;border-top-width:2px;border-right-width:2px}.tick.bl{bottom:6px;left:6px;border-bottom-width:2px;border-left-width:2px}.tick.br{bottom:6px;right:6px;border-bottom-width:2px;border-right-width:2px}.console{width:100%;max-width:520px;max-height:100%;overflow:auto;padding:8px 14px}.console.center{text-align:center}.kicker{font-size:11px;letter-spacing:.42em;color:var(--cyan);text-transform:uppercase;display:flex;align-items:center;gap:10px}.kicker:after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--cyan-deep),transparent)}.wordmark{font-family:var(--display);font-weight:700;font-size:clamp(46px,12vw,90px);letter-spacing:.01em;line-height:.92;margin:10px 0 0;display:flex;align-items:flex-end;gap:0}.wordmark .accent{color:var(--cyan);text-shadow:0 0 30px #36e0ff55}.wordmark .dot{width:.16em;height:.16em;background:var(--danger);margin:0 0 .12em .12em;display:inline-block;box-shadow:0 0 16px var(--danger);animation:blink 1.1s steps(1) infinite}@keyframes blink{50%{opacity:.25}}.rule{height:1px;background:linear-gradient(90deg,var(--cyan),var(--line) 40%,transparent);margin:14px 0}.tagline{font-family:var(--display);font-weight:500;font-size:16px;color:var(--ink);letter-spacing:.01em}.subtitle{font-size:12.5px;color:var(--dim);line-height:1.65;margin-top:8px;max-width:46ch}.subtitle b,.tagline b{color:var(--ink);font-weight:600}.legend{list-style:none;margin:18px 0 4px;border-top:1px solid var(--line)}.legend li{display:grid;grid-template-columns:auto auto 1fr auto;align-items:center;gap:12px;padding:8px 2px;border-bottom:1px solid var(--line);font-size:12px}.legend .idx{color:var(--faint);font-size:10px;letter-spacing:.1em}.legend .lname{font-weight:600;color:var(--ink);letter-spacing:.02em}.legend .ldesc{color:var(--dim);font-size:11px;text-align:right}.glyph{width:12px;height:12px;box-shadow:0 0 10px currentColor}.glyph.shard{color:var(--cyan);background:var(--cyan);border-radius:50%}.glyph.orb{color:var(--gold);background:var(--gold);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}.glyph.cell{color:var(--green);background:var(--green);transform:rotate(45deg)}.glyph.bomb{color:var(--danger);background:transparent;border:2px solid var(--danger);border-radius:50%}.hintrow{display:flex;flex-wrap:wrap;gap:6px 20px;margin:16px 0 4px;font-size:11px;color:var(--dim)}.hintrow em{font-style:normal;letter-spacing:.04em}kbd{font-family:var(--mono);background:#121922;border:1px solid var(--line2);border-bottom-width:2px;padding:3px 8px;font-size:11px;color:var(--ink);letter-spacing:.08em;display:inline-block}.cta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:22px}.btn{cursor:pointer;font-family:var(--display);font-weight:700;letter-spacing:.14em;text-transform:uppercase;border:none;padding:14px 30px;font-size:14px;transition:transform .08s,box-shadow .2s,background .2s;clip-path:polygon(0 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%)}.btn.primary{background:var(--cyan);color:#04141a;box-shadow:0 0 0 1px var(--cyan),0 10px 30px -8px #36e0ff80}.btn.primary:hover{box-shadow:0 0 0 1px var(--cyan),0 14px 40px -8px #36e0ffb0;transform:translateY(-1px)}.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line2);padding:14px 22px}.btn.ghost:hover{border-color:var(--cyan);color:var(--cyan)}.btn:active{transform:translateY(0) scale(.98)}.langpick{margin-left:auto;display:flex;gap:6px}.langpick button{font-family:var(--mono);background:none;border:1px solid var(--line);color:var(--dim);padding:6px 9px;font-size:10px;letter-spacing:.12em;cursor:pointer;text-transform:uppercase}.langpick button.active{color:var(--cyan);border-color:var(--cyan)}.modetoggle{display:inline-flex;border:1px solid var(--line2);margin:18px 0 4px;align-self:flex-start}.modetoggle button{font-family:var(--mono);background:transparent;border:none;color:var(--dim);cursor:pointer;padding:9px 18px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;transition:background .15s,color .15s}.modetoggle button+button{border-left:1px solid var(--line2)}.modetoggle button.active{background:var(--cyan-deep);color:var(--cyan)}.btn.primary.play{display:block;width:100%;margin:14px 0 4px;padding:16px;font-size:16px;letter-spacing:.2em}.navrow{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:16px 0 2px}.navbtn{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;cursor:pointer;color:var(--dim);background:transparent;border:1px solid var(--line);padding:9px 12px;transition:border-color .15s,color .15s}.navbtn:hover{border-color:var(--cyan);color:var(--cyan)}.navbtn .ic{font-size:13px;line-height:1}.navrow .langpick{margin-left:auto}.sectlbl{font-size:11px;letter-spacing:.3em;color:var(--cyan);text-transform:uppercase;margin:6px 0 10px}.sectlbl.mt{margin-top:24px}.hint{font-size:11px;color:var(--dim);margin-bottom:12px}.langrow{display:flex;gap:10px}.langrow .lang-opt{flex:1;font-family:var(--display);font-weight:600;letter-spacing:.06em;cursor:pointer;background:transparent;border:1px solid var(--line2);color:var(--ink);padding:12px;font-size:13px;text-align:left}.langrow .lang-opt.active{border-color:var(--cyan);color:var(--cyan);box-shadow:inset 0 0 0 1px var(--cyan)}.keys-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.keyrow{display:flex;justify-content:space-between;align-items:center;gap:10px;border:1px solid var(--line);padding:9px 12px}.keyrow .kname{font-size:12px;color:var(--dim);letter-spacing:.04em}.keychip{font-family:var(--mono);min-width:54px;text-align:center;background:#121922;border:1px solid var(--line2);border-bottom-width:2px;color:var(--ink);padding:5px 10px;font-size:12px;cursor:pointer;letter-spacing:.06em}.keychip:hover{border-color:var(--cyan);color:var(--cyan)}.keyrow.capturing .keychip{border-color:var(--gold);color:var(--gold);animation:blink .7s steps(1) infinite}.audio-grid{display:flex;flex-direction:column;gap:8px}.audiorow{display:flex;align-items:center;gap:12px;border:1px solid var(--line);padding:9px 12px}.audiorow .aname{flex:0 0 120px;font-size:12px;color:var(--dim);letter-spacing:.04em}.audiorow .aval{flex:0 0 34px;text-align:right;font-family:var(--mono);font-size:12px;color:var(--cyan)}.aslider{flex:1;-webkit-appearance:none;appearance:none;height:4px;background:var(--line2);outline:none;cursor:pointer}.aslider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:var(--cyan);border:none;box-shadow:0 0 6px var(--cyan);cursor:pointer}.aslider::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--cyan);border:none;box-shadow:0 0 6px var(--cyan);cursor:pointer}.acc-row{display:flex;gap:8px;align-items:center;margin-bottom:6px;flex-wrap:wrap}.field{font-family:var(--mono);background:#121922;border:1px solid var(--line2);color:var(--ink);padding:10px 12px;font-size:13px;letter-spacing:.04em;outline:none;flex:1;min-width:0}.field.full{display:block;width:100%;margin-bottom:8px}.field:focus{border-color:var(--cyan)}.acc-row .btn{margin-top:0;padding:10px 16px;font-size:12px}.acc-status{font-family:var(--mono);font-size:12px;color:var(--gold);margin:10px 0;letter-spacing:.03em}.skin-preview{width:54px;height:54px;margin:10px auto 16px;background:var(--c);box-shadow:0 0 26px -2px var(--t)}.skin-preview.shp-circle{border-radius:50%}.skin-preview.shp-square{border-radius:5px}.skin-preview.shp-diamond{clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}.skin-preview.shp-triangle{clip-path:polygon(50% 0,100% 100%,0 100%)}.shape-btn{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;font-size:16px;background:#121922;border:1px solid var(--line2);color:var(--dim);cursor:pointer;padding:0;transition:transform .08s}.shape-btn:hover{color:var(--ink);transform:scale(1.08)}.shape-btn.active{border-color:var(--cyan);color:var(--cyan)}.swatches{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:6px 0}.swatch-btn{width:30px;height:30px;border-radius:50%;background:var(--c);border:2px solid transparent;cursor:pointer;padding:0;box-shadow:0 0 0 1px var(--line2);transition:transform .08s}.swatch-btn:hover{transform:scale(1.12)}.swatch-btn.active{border-color:var(--ink);box-shadow:0 0 0 2px var(--cyan)}.swatch-btn.none{background:#121922;color:var(--dim);font-family:var(--mono);font-size:14px;line-height:1}.lbpage{width:min(96vw,520px);padding:24px}.lb-all{display:inline-block;margin-top:12px;font-family:var(--mono);font-size:12px;color:var(--cyan);text-decoration:none;letter-spacing:.04em}.lb-all:hover{text-decoration:underline}.cta a.btn{text-decoration:none;display:inline-flex;align-items:center;justify-content:center}.result{font-family:var(--display);font-weight:700;font-size:64px;color:var(--gold);margin:8px 0;text-shadow:0 0 36px #ffcf4d44;letter-spacing:.02em}.breakdown{font-size:12px;color:var(--dim);line-height:1.8;letter-spacing:.02em}.lb{margin:16px auto 0;max-width:340px;text-align:left}.lb h3{font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--cyan);margin-bottom:10px;display:flex;align-items:center;gap:10px}.lb h3:after{content:"";flex:1;height:1px;background:var(--line)}.lb-row{display:flex;justify-content:space-between;padding:5px 8px;font-size:12px;color:var(--dim);border-bottom:1px solid #131a22}.lb-row.me{color:var(--cyan);background:#0e1c26}.lb-row span:first-child{color:var(--faint);width:24px}.lb-row b{font-variant-numeric:tabular-nums;color:var(--ink);font-weight:500}.lb-row.me b{color:var(--cyan)}#toast{position:fixed;left:50%;top:58%;transform:translate(-50%);pointer-events:none;z-index:20;font-family:var(--display);font-weight:700;font-size:22px;letter-spacing:.06em;opacity:0;text-shadow:0 2px 16px #000}#oob{position:fixed;left:50%;top:16%;transform:translate(-50%);display:none;pointer-events:none;z-index:30;font-family:var(--display);font-weight:700;font-size:26px;letter-spacing:.12em;color:var(--danger);text-shadow:0 0 18px #ff4d4d99;animation:blink .55s steps(1) infinite}#bombBtn{position:absolute;right:18px;bottom:18px;width:74px;height:74px;z-index:15;background:radial-gradient(circle at 38% 32%,#ff8a4d,var(--danger));color:#1a0606;font-weight:700;font-size:22px;border:2px solid var(--gold);display:none;align-items:center;justify-content:center;pointer-events:auto;box-shadow:0 8px 24px -6px var(--danger);user-select:none;clip-path:polygon(0 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%)}.rise{opacity:0;transform:translateY(14px);animation:rise .6s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:var(--d,0s)}@keyframes rise{to{opacity:1;transform:translateY(0)}}@media(max-width:540px){.wordmark{font-size:clamp(40px,16vw,70px)}.result{font-size:48px}.keys-grid{grid-template-columns:1fr}#bombBtn{display:flex}.console{padding:8px 6px}}@media(prefers-reduced-motion:reduce){.rise{animation:none;opacity:1;transform:none}.wordmark .dot{animation:none}}