:root{--bg: #0f1216;--surface: #171b21;--surface-2: #1e242c;--line: #2a323d;--text: #e7ecf2;--muted: #94a1b2;--accent: #4ea1ff;--accent-ink: #04121f;--good: #57d38c;--bad: #ff6b6b;--radius: 12px;--pad-key: clamp(56px, 15vw, 84px);--font-scale: 1;color-scheme:dark}:root[data-theme=light]{--bg: #f5f7fa;--surface: #ffffff;--surface-2: #eef1f5;--line: #d7dee7;--text: #14202b;--muted: #5a6b7b;--accent: #1668d6;--accent-ink: #ffffff;--good: #1c9d5b;--bad: #d23b3b;color-scheme:light}:root.big{--font-scale: 1.25}*{box-sizing:border-box}[hidden]{display:none!important}html,body{margin:0;height:100%}body{background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:calc(16px * var(--font-scale));-webkit-font-smoothing:antialiased;overflow:hidden}#app{display:flex;flex-direction:column;height:100%;max-width:720px;margin-inline:auto;padding:clamp(8px,2vw,16px);gap:clamp(8px,1.5vh,16px);background:var(--bg);color:var(--text)}.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.notice{position:fixed;inset-block-start:12px;inset-inline:12px;margin-inline:auto;max-width:480px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius);padding:10px 14px;text-align:center;font-size:.9em;z-index:40}.strip{display:grid;grid-template-columns:auto 1fr auto auto;grid-template-rows:auto minmax(32px,auto);grid-template-areas:"tabs . preset gear" "desc desc durs durs";align-items:center;gap:8px}.strip>.strip-sel{grid-area:preset}.strip>.icon-btn{grid-area:gear}@media(max-width:520px){.strip{grid-template-columns:1fr auto auto;grid-template-rows:auto auto minmax(1em,auto);grid-template-areas:"tabs tabs gear" "preset durs durs" "desc desc desc"}.strip>.strip-sel{min-width:0}.modetab{flex:1}}.modetabs{grid-area:tabs;display:flex;gap:2px;padding:3px;background:var(--surface);border:1px solid var(--line);border-radius:10px}.modetab{background:none;border:0;border-radius:7px;color:var(--muted);font:inherit;font-weight:600;padding:7px 14px;min-height:34px;cursor:pointer}.modetab:hover{color:var(--text)}.modetab.on{background:var(--accent);color:var(--accent-ink)}.mode-desc{grid-area:desc;color:var(--muted);font-size:.9em}.durs{grid-area:durs;justify-self:end;display:flex;gap:4px}.chip{background:none;border:1px solid var(--line);border-radius:999px;color:var(--muted);font:inherit;font-size:.85em;font-variant-numeric:tabular-nums;padding:4px 12px;min-height:32px;cursor:pointer}.chip.on{color:var(--accent);border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent)}.strip-sel,.icon-btn,.op-toggle{background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:10px;padding:8px 10px;font-size:.95em;font-family:inherit;cursor:pointer;min-height:40px}.ops{display:flex;flex-wrap:wrap;gap:4px}.op-toggle{width:40px;padding:8px 0;text-align:center;color:var(--muted);font-size:1.1em}.op-toggle.on{color:var(--accent);border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--surface))}.icon-btn{width:40px;font-size:1.1em}.stage{flex:1;display:flex;min-height:0}.play,.resultscr,.mistakescr{flex:1;display:flex;flex-direction:column;min-height:0}.play{align-items:center;justify-content:safe center;text-align:center;gap:clamp(10px,2vh,20px);overflow-y:auto}@media(max-height:680px){#app{gap:6px}.strip{row-gap:6px}.play{gap:8px}}@media(max-height:560px){.hint,.mode-desc{display:none}.problem{font-size:clamp(1.6rem,8vw,2.6rem)}.play{gap:8px}}.problem{font-size:clamp(2.6rem,12vw,5rem);font-weight:650;font-variant-numeric:tabular-nums;letter-spacing:.01em;line-height:1.05;min-height:1.1em}.answerline{display:inline-flex;align-items:baseline;gap:2px;min-height:1.4em;font-size:clamp(2rem,9vw,3.4rem);font-variant-numeric:tabular-nums;padding:4px 18px;border-radius:var(--radius);border:2px solid var(--line);min-width:3.5ch;justify-content:center;transition:border-color 90ms ease,color 90ms ease}.answerline.tick{animation:tick .14s ease}.answerline.ok{border-color:var(--good);color:var(--good)}.answerline.bad{border-color:var(--bad);color:var(--bad)}@keyframes tick{0%{border-color:var(--accent)}to{border-color:var(--line)}}.answer{min-width:1ch}.caret{width:2px;height:1em;background:var(--accent);animation:blink 1s step-end infinite;align-self:center}.mark{font-size:.8em;margin-inline-start:6px}@keyframes blink{50%{opacity:0}}.hud{display:flex;gap:18px;align-items:center;color:var(--muted);font-variant-numeric:tabular-nums;font-size:1.05em}.timer{font-weight:600;color:var(--text)}.ghost-btn{background:none;border:1px solid var(--line);color:var(--muted);border-radius:8px;padding:4px 10px;cursor:pointer;font-family:inherit}.ghostline{width:min(360px,80%);font-size:.82em;color:var(--muted)}.ghost-track{position:relative;height:4px;background:var(--surface-2);border-radius:2px;margin-bottom:6px}.ghost-you,.ghost-pb{position:absolute;inset-block-start:-3px;width:10px;height:10px;border-radius:50%;transform:translate(-50%);transition:inset-inline-start .12s linear}.ghost-you{background:var(--accent)}.ghost-pb{background:var(--muted);opacity:.7}.liveops{color:var(--muted);font-size:.95em;font-variant-numeric:tabular-nums}.hint{color:var(--muted);font-size:.8em;min-height:1em}:root.touch .hint{display:none}.misscard{background:var(--surface);border:1px solid var(--line);border-inline-start:3px solid var(--accent);border-radius:var(--radius);padding:10px 14px;max-width:460px;text-align:start}.miss-problem{font-weight:600;font-variant-numeric:tabular-nums;margin-bottom:2px}.miss-tip{color:var(--muted);font-size:.92em}.resultscr,.mistakescr{gap:14px;padding:clamp(8px,3vh,28px) 6px;overflow-y:auto}.res-head{font-size:clamp(1.2rem,5vw,1.7rem);font-weight:650;font-variant-numeric:tabular-nums}.res-best{color:var(--good);font-weight:600}.res-grade{color:var(--muted);font-variant-numeric:tabular-nums}.res-ops{display:flex;flex-direction:column;gap:8px;max-width:460px}.op-row{display:grid;grid-template-columns:1.6em 1fr auto;align-items:center;gap:10px}.op-sym{font-size:1.2em;color:var(--accent);text-align:center}.op-bar{height:10px;background:var(--surface-2);border-radius:5px;overflow:hidden}.op-fill{display:block;height:100%;background:var(--accent);border-radius:5px}.op-word{color:var(--muted);font-size:.85em;font-variant-numeric:tabular-nums;white-space:nowrap}.res-insightwrap{max-width:460px}.res-insight{font-size:1.05em}.res-bench{color:var(--muted);font-variant-numeric:tabular-nums}.link-btn{background:none;border:none;color:var(--accent);cursor:pointer;padding:4px 0;font:inherit}.res-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}.btn{background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:10px;padding:10px 16px;font:inherit;cursor:pointer;min-height:44px}.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:600}.mk-head{display:flex;align-items:center;gap:12px}.mk-title{margin:0;font-size:1.2em}.mk-list{display:flex;flex-direction:column;gap:10px;max-width:480px}.mk-item{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:10px 14px}.mk-q{font-weight:600;font-variant-numeric:tabular-nums}.mk-given{color:var(--bad);font-size:.85em}.mk-tip{color:var(--muted);font-size:.9em;margin-top:2px}.padwrap{display:flex;flex-direction:column;gap:8px}.pad-actions{display:flex;gap:8px;width:min(340px,92%)}.pad-actions .btn{flex:1}.numpad{display:flex;flex-direction:column;gap:8px}.pad-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.pad-key{min-height:var(--pad-key);font-size:1.5em;background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:var(--radius);cursor:pointer;font-family:inherit;touch-action:manipulation;user-select:none;transition:background 40ms ease}.pad-key:active{background:var(--accent);color:var(--accent-ink)}.pad-row-b .pad-key[hidden]{display:none}.overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:flex-end;justify-content:center;z-index:50}.panel{background:var(--surface);border:1px solid var(--line);border-radius:16px 16px 0 0;padding:20px;width:100%;max-width:520px;max-height:90vh;overflow-y:auto;display:flex;flex-direction:column;gap:12px}@media(min-width:560px){.overlay{align-items:center}.panel{border-radius:16px}}.panel-title{margin:0}.panel-sub{margin:8px 0 0;font-size:.95em;color:var(--muted)}.set-row,.set-range{display:flex;align-items:center;justify-content:space-between;gap:12px}.set-label{color:var(--text)}.set-pair{display:flex;align-items:center;gap:6px}.set-num{width:64px;background:var(--surface-2);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:8px;font:inherit;text-align:center}.set-dash{color:var(--muted)}.set-check{display:flex;align-items:center;gap:8px;cursor:pointer}.set-hint{color:var(--muted);font-size:.8em}.set-storage{color:var(--bad);font-size:.85em;margin:0}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}:root.focus .answerline.tick{animation:none}