:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#05060c;--fg:#e7eaf6;--dim:#7f86a3;--accent:#5cf2ff;--accent-2:#c77dff;--good:#7cffb2;--warn:#ffb86b;--err:#ff5d73}*{box-sizing:border-box}.sr-only{clip:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}:focus-visible{outline:2px solid var(--accent);outline-offset:3px}html,body{background:radial-gradient(ellipse at 20% 10%, var(--glow-b,#c77dff2e) 0%, transparent 55%), radial-gradient(ellipse at 80% 90%, var(--glow-a,#5cf2ff24) 0%, transparent 60%), radial-gradient(ellipse at 50% 50%, #0c1030 0%, #04050a 75%);width:100%;height:100%;color:var(--fg);margin:0;padding:0;font-family:ui-sans-serif,system-ui,-apple-system,SF Pro Text,Hiragino Sans,Yu Gothic UI,sans-serif;overflow:hidden}#app{width:100vw;height:100dvh;position:relative}canvas#scene{display:block;position:absolute;inset:0}#hud{pointer-events:none;position:absolute;inset:0}kbd{white-space:nowrap;background:#5cf2ff1f;border:1px solid #5cf2ff4d;border-radius:4px;padding:1px 6px;font-family:ui-monospace,monospace;font-size:12px}.panel{-webkit-backdrop-filter:blur(8px);background:linear-gradient(#0a0e20b8,#0709169e);border:1px solid #5cf2ff40;border-radius:12px;padding:12px 14px;font-size:13px;line-height:1.5;position:absolute;box-shadow:0 0 24px #5cf2ff0f,inset 0 1px #ffffff0a}.panel h2{color:var(--accent);letter-spacing:.14em;text-transform:uppercase;margin:0 0 6px;font-size:11px}#play-hud{display:none}#play-hud.show{display:block}#panel-stats{min-width:168px;top:16px;left:16px}.stat-row{justify-content:space-between;gap:18px;display:flex}.stat-row span:last-child{color:var(--accent);font-variant-numeric:tabular-nums;font-family:ui-monospace,monospace}#panel-meta{text-align:right;min-width:168px;top:16px;right:16px}#panel-meta .meta-lang{color:var(--accent);font-size:22px;font-weight:700}#panel-meta .meta-cat{opacity:.7;font-size:12px}#code-wrap{pointer-events:none;width:min(820px,100vw - 48px);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.codepre{white-space:pre-wrap;word-break:break-word;tab-size:2;-webkit-backdrop-filter:blur(10px);background:linear-gradient(#080b1ad1,#050712c7);border:1px solid #5cf2ff38;border-radius:14px;min-height:64px;margin:0;padding:22px 26px;font-family:ui-monospace,SF Mono,Menlo,Consolas,monospace;font-size:clamp(15px,2.4vw,22px);line-height:1.7;position:relative;box-shadow:0 0 60px #5cf2ff14,inset 0 1px #ffffff0a}.codepre .ch{border-radius:2px;transition:color 50ms linear;position:relative}.codepre .ch.pending{color:var(--dim)}.codepre .ch.correct{color:var(--accent)}.codepre .ch.error{color:var(--err);background:#ff5d7338;border-radius:3px}.codepre .ch.current{color:var(--fg);background:#5cf2ff2e;border-radius:3px;box-shadow:0 0 0 1px #5cf2ff99,0 0 16px #5cf2ff59}.codepre .ch.ret{opacity:.4}.codepre.shake,.pill.shake{animation:.16s linear shake}#code-desc{text-align:center;color:#7cffb2b3;min-height:1.2em;margin-top:14px;font-family:ui-monospace,SF Mono,Menlo,Consolas,monospace;font-size:clamp(12px,1.6vw,14px);line-height:1.5}#code-desc:before{content:"// ";color:#7cffb273}#code-desc:empty,.mode-view{display:none}.mode-view.show{display:block}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}#progress{background:#5cf2ff1f;border-radius:999px;width:min(820px,100vw - 48px);height:5px;position:absolute;bottom:64px;left:50%;overflow:hidden;transform:translate(-50%)}#progress-fill{background:linear-gradient(90deg, var(--accent), var(--accent-2));width:0%;height:100%;transition:width 80ms linear;box-shadow:0 0 14px #5cf2ff99}#status-bar{pointer-events:none;gap:6px;display:flex;position:absolute;bottom:16px;left:50%;transform:translate(-50%)}.status-pill{letter-spacing:.16em;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);pointer-events:auto;cursor:pointer;background:#0a0e2099;border-radius:999px;padding:3px 10px;font-family:ui-monospace,monospace;font-size:12px}.status-pill.on{color:var(--accent);border:1px solid #5cf2ff80}.status-pill.off{color:var(--dim);border:1px solid #6c739066}#play-controls{gap:8px;display:flex;position:absolute;top:16px;left:50%;transform:translate(-50%)}.fab{color:var(--accent);letter-spacing:.2em;cursor:pointer;pointer-events:auto;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#0a0e20b3;border:1px solid #5cf2ff59;border-radius:999px;padding:6px 14px;font-size:12px}.fab:hover{background:#5cf2ff26}.fab-glyph-pause:before{content:"Ⅱ";content:"Ⅱ" / ""}.btn{color:var(--accent);border:1px solid var(--accent);letter-spacing:.22em;cursor:pointer;pointer-events:auto;background:0 0;border-radius:8px;padding:12px 30px;font-family:inherit;font-size:15px;transition:background .1s,box-shadow .1s}.btn:hover{background:#5cf2ff1f;box-shadow:0 0 28px #5cf2ff4d}.btn.ghost{color:var(--dim);letter-spacing:.16em;border-color:#6c739080;padding:10px 22px;font-size:13px}.btn.ghost:hover{color:var(--fg);box-shadow:none;background:#ffffff0a}.pillgroup{pointer-events:auto;flex-wrap:wrap;justify-content:center;gap:8px;display:flex}.lang-groups{flex-direction:column;align-items:center;gap:12px;width:100%;max-width:620px;display:flex}.lang-group{flex-direction:column;align-items:center;gap:6px;display:flex}.lang-group-label{letter-spacing:.2em;text-transform:uppercase;color:var(--accent-2);opacity:.9;font-size:10px}.pill{color:var(--fg);letter-spacing:.08em;cursor:pointer;background:#0a0e2099;border:1px solid #5cf2ff4d;border-radius:999px;padding:7px 14px;font-family:inherit;font-size:13px;transition:background .1s}.pill:hover{background:#5cf2ff1f}.pill:disabled{opacity:.35;cursor:not-allowed;text-decoration:line-through}.pill:disabled:hover{background:#0a0e2099}.lang-groups .pill.active:before{content:"✓ "}.setup-note{letter-spacing:.08em;text-transform:none;color:var(--dim);margin-left:6px}.pill.active{border-color:var(--accent);color:var(--accent);background:#5cf2ff38;box-shadow:0 0 16px #5cf2ff40}.pill[data-diff].active{border-color:var(--accent-2);color:var(--accent-2);background:#c77dff33;box-shadow:0 0 16px #c77dff40}.overlay{pointer-events:auto;-webkit-backdrop-filter:blur(6px);text-align:center;background:#02040cb8;flex-direction:column;justify-content:safe center;align-items:center;gap:22px;padding:24px;display:none;position:absolute;inset:0;overflow-y:auto}.overlay.show{display:flex}#start-screen .start-title{color:var(--accent);letter-spacing:.16em;text-shadow:0 0 60px var(--accent), 0 0 120px #5cf2ff59;margin:0;font-size:clamp(40px,8vw,82px);font-weight:900;line-height:1}#start-screen .start-sub{color:var(--accent-2);letter-spacing:.3em;opacity:.9;margin:0;font-size:clamp(13px,2vw,17px)}.setup-block{flex-direction:column;align-items:center;gap:8px;display:flex}.setup-label{letter-spacing:.2em;text-transform:uppercase;color:var(--dim);font-size:11px}.start-hint{color:var(--fg);opacity:.6;letter-spacing:.18em;font-size:12px}.start-cta{-webkit-backdrop-filter:blur(8px);background:linear-gradient(#02040c00 0%,#02040cf0 22%,#02040cf7 100%);flex-direction:column;align-items:center;gap:10px;width:calc(100% + 48px);margin:0 -24px -24px;padding:14px 24px 18px;display:flex;position:sticky;bottom:-24px}.start-cta p{margin:0}.start-cta-row{flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;display:flex}#results .result-rank{color:var(--accent);text-shadow:0 0 50px;margin:0;font-size:clamp(72px,14vw,130px);font-weight:900;line-height:1}#results .result-grid{font-variant-numeric:tabular-nums;grid-template-columns:repeat(2,minmax(120px,1fr));gap:10px 28px;display:grid}#results .result-grid .rv{color:var(--accent);font-family:ui-monospace,monospace;font-size:26px}#results .result-grid .rl{letter-spacing:.16em;text-transform:uppercase;color:var(--dim);font-size:11px}.result-meta{letter-spacing:.06em;color:var(--fg);opacity:.85;font-size:13px}.result-meta .meta-lang{color:var(--accent);font-weight:700}.result-goal{color:var(--good);letter-spacing:.04em;font-size:13px}.result-meta:empty,.result-goal:empty,#result-best:empty{display:none}#mistakes{width:100%;max-width:460px;font-size:13px}#mistakes h2{letter-spacing:.18em;text-transform:uppercase;color:var(--accent-2);margin:0 0 8px;font-size:11px}.miss-row{align-items:center;gap:10px;margin:4px 0;display:flex}.miss-key{color:var(--err);text-align:center;background:#ff5d7329;border:1px solid #ff5d7366;border-radius:4px;min-width:30px;padding:1px 8px;font-family:ui-monospace,monospace}.miss-bar{background:linear-gradient(90deg, var(--err), var(--warn));border-radius:999px;height:8px}.miss-count{color:var(--dim);font-family:ui-monospace,monospace}.result-actions{flex-wrap:wrap;justify-content:center;gap:12px;display:flex}#help-overlay h1{color:var(--accent);letter-spacing:.16em;margin:0;font-size:clamp(26px,5vw,38px)}#help-overlay .help-body{opacity:.9;text-align:left;max-width:560px;font-size:14px;line-height:1.7}#help-overlay .help-body kbd{margin:0 1px}#pause-overlay h1{color:var(--accent);letter-spacing:.3em;text-shadow:0 0 36px var(--accent);margin:0;font-size:clamp(44px,9vw,70px)}#toast{letter-spacing:.16em;color:var(--accent-2);text-shadow:0 0 30px;opacity:0;pointer-events:none;font-size:clamp(26px,6vw,46px);font-weight:800;transition:opacity .2s ease-out,transform .2s ease-out;position:absolute;top:38%;left:50%;transform:translate(-50%,-50%)scale(.9)}#toast.show{opacity:1;transform:translate(-50%,-50%)scale(1)}#key-sink{opacity:0;pointer-events:none;border:0;width:1px;height:1px;padding:0;position:absolute;top:-100px;left:-100px}#mobile-hint{letter-spacing:.12em;color:var(--accent);margin-top:6px;font-size:12px;display:none}#start-error{color:var(--err);text-align:center;max-width:32em;font-size:13px;line-height:1.5}#start-error:empty{display:none}@media (prefers-reduced-motion:reduce){.codepre.shake,.pill.shake{animation:none}#toast{transition:opacity .2s ease-out;transform:translate(-50%,-50%)}#progress-fill{transition:none}}@media (pointer:coarse){.pill,.fab,.status-pill{min-height:40px}.status-pill{padding:3px 14px}.start-hint{display:none}}@media (pointer:coarse),(max-width:720px){#mobile-hint{display:block}#panel-stats,#panel-meta{min-width:0;padding:8px 10px;font-size:12px}#panel-meta .meta-lang{font-size:16px}#play-controls{top:10px}.fab{letter-spacing:0;min-width:40px;padding:6px 10px}.fab .fab-text{display:none}#progress{bottom:80px}#code-wrap{flex-direction:column;justify-content:safe center;width:calc(100vw - 32px);display:flex;top:136px;bottom:96px;transform:translate(-50%)}#code-wrap .codepre{overscroll-behavior:contain;flex:0 auto;min-height:0;padding:14px 16px;overflow-y:auto}#code-desc{flex:none;margin-top:10px}}@media (max-width:420px){#play-controls{flex-direction:column}}