:root{--bg:#f6f6f3;--surface:#fff;--text:#1d1d1b;--muted:#6b6b66;--border:#deded8;--accent:#2f6b4f;--accent-text:#fff;--danger:#b3261e;--ok-bg:#e3f1e8;--ok-text:#1f5a3c;--busy-bg:#fdf1d8;--busy-text:#7a5300;--fail-bg:#fbe4e2;--fail-text:#8c1d16;--radius:10px;--gutter:16px;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial;--bg:#161715;--surface:#20211f;--text:#ececea;--muted:#a3a39d;--border:#363733;--accent:#6fbf95;--accent-text:#0f1a14;--danger:#f2948c;--ok-bg:#1f3a2b;--ok-text:#a6dcbf;--busy-bg:#3b3020;--busy-text:#f0cf8f;--fail-bg:#43201d;--fail-text:#f6b6b0}}*,:before,:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{background:var(--bg);color:var(--text);margin:0;font:16px/1.5 system-ui,-apple-system,PingFang SC,Noto Sans SC,sans-serif}h1{margin:0;font-size:1.5rem}h2{margin:0;font-size:1.05rem}a{color:var(--accent)}.topbar{padding:10px var(--gutter);padding-top:max(10px, env(safe-area-inset-top));border-bottom:1px solid var(--border);background:var(--surface);align-items:center;gap:12px;display:flex}.brand{font-weight:600}.topbar nav{flex:1;gap:4px;display:flex}.topbar nav a{border-radius:var(--radius);color:var(--muted);padding:6px 10px;text-decoration:none}.topbar nav a[aria-current=page]{color:var(--text);background:var(--bg)}.page{width:100%;max-width:760px;padding:20px var(--gutter) 40px;margin:0 auto}.page.login{max-width:420px;padding-top:15vh}.stack{flex-direction:column;gap:12px;display:flex}.card{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);padding:16px}.field{flex-direction:column;gap:6px;display:flex}.field>span{color:var(--muted);font-size:.9rem}input,select,textarea{border:1px solid var(--border);border-radius:var(--radius);background:var(--bg);width:100%;color:var(--text);font:inherit;padding:10px 12px;font-size:16px}textarea{resize:vertical}.button{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);min-height:44px;color:var(--text);font:inherit;cursor:pointer;justify-content:center;align-items:center;padding:0 16px;text-decoration:none;display:inline-flex}.button.primary{border-color:var(--accent);background:var(--accent);color:var(--accent-text)}.button.danger{color:var(--danger)}.button:disabled,.button.disabled{opacity:.6;cursor:default}.button:focus-within{outline:2px solid var(--accent);outline-offset:2px}.link-button{color:var(--muted);font:inherit;cursor:pointer;background:0 0;border:0}.visually-hidden{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.importers{border-top:1px solid var(--border);flex-wrap:wrap;gap:12px;padding-top:12px;display:flex}.upload progress{width:100%}.materials,.platforms{flex-direction:column;gap:12px;margin:0;padding:0;list-style:none;display:flex}.material{flex-direction:column;gap:8px;display:flex}.material-head,.platform-head{justify-content:space-between;align-items:flex-start;gap:12px;display:flex}.material-title{overflow-wrap:anywhere}.meta{color:var(--muted);gap:12px;margin:0;font-size:.875rem;display:flex}.actions{flex-wrap:wrap;gap:8px;display:flex}.state{background:var(--busy-bg);color:var(--busy-text);border-radius:999px;flex-shrink:0;padding:2px 10px;font-size:.85rem}.platform .state{background:var(--bg);color:var(--muted)}.state.state-ready,.platform .state.state-ready{background:var(--ok-bg);color:var(--ok-text)}.state.state-failed,.platform .state.state-failed{background:var(--fail-bg);color:var(--fail-text)}.platform{border-top:1px solid var(--border);flex-direction:column;gap:8px;padding-top:12px;display:flex}.error{color:var(--danger);overflow-wrap:anywhere;margin:0}.notice,.hint{color:var(--muted);margin:0}.hint{font-size:.9rem}.error.banner{padding:10px var(--gutter);background:var(--fail-bg);color:var(--fail-text)}.new-group,.placement{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.new-group input{flex:220px;min-width:0}.placement{border-top:1px solid var(--border);padding-top:8px}.placement select{flex:160px;min-width:0}.group-head{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;display:flex}.group-head h2{overflow-wrap:anywhere;margin:0;font-size:1.1rem}.group-count{color:var(--muted);font-weight:400}.listen-through{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);flex-direction:column;gap:12px;padding:16px;display:flex}.listen-row{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.listen-seek input[type=range]{min-width:0;min-height:44px;accent-color:var(--accent);flex:200px}.listen-clock{color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}.practice{width:100%;max-width:860px;padding:12px var(--gutter) 32px;flex-direction:column;gap:12px;margin:0 auto;display:flex}.practice-header{align-items:center;gap:12px;min-width:0;display:flex}.practice-header .back{flex-shrink:0;align-items:center;min-height:44px;text-decoration:none;display:inline-flex}.practice-title{text-overflow:ellipsis;white-space:nowrap;min-width:0;font-size:1.1rem;overflow:hidden}.practice-area{flex-direction:column;gap:12px;min-width:0;display:flex}.stage{aspect-ratio:16/9;border-radius:var(--radius);background:#000;width:100%;max-height:45vh;position:relative;overflow:hidden}.stage-video{object-fit:contain;width:100%;height:100%;display:block}.stage-placeholder{color:#d6d6d0;text-align:center;justify-content:center;align-items:center;margin:0;padding:16px;display:flex;position:absolute;inset:0}.stage-start{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.practice-bar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;display:flex}.position{color:var(--muted);font-variant-numeric:tabular-nums}.mode-toggles{flex-wrap:wrap;gap:8px;display:flex}.segmented{display:inline-flex}.segmented .button{border-radius:0;padding:0 12px}.segmented .button+.button{margin-left:-1px}.segmented .button:first-child{border-radius:var(--radius) 0 0 var(--radius)}.segmented .button:last-child{border-radius:0 var(--radius) var(--radius) 0}.practice .button[aria-pressed=true]{border-color:var(--accent);background:var(--ok-bg);color:var(--ok-text)}.letter-boxes{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);padding:14px 12px;position:relative}.letter-boxes:focus-within{outline:2px solid var(--accent);outline-offset:1px}.letter-input{z-index:1;color:#0000;caret-color:#0000;opacity:0;cursor:text;background:0 0;border:0;width:100%;height:100%;padding:0;position:absolute;inset:0}.letter-words{flex-wrap:wrap;gap:12px 16px;min-width:0;font-family:ui-monospace,SF Mono,Menlo,Consolas,monospace;font-size:1.15rem;display:flex}.letter-word{align-items:flex-end;min-width:0;display:inline-flex}.letter-slots{flex-wrap:wrap;gap:3px;display:inline-flex}.letter-slot{border-bottom:2px solid var(--border);justify-content:center;align-items:center;width:1.2em;height:1.7em;font-style:normal;display:inline-flex}.letter-slot.fixed{color:var(--muted);border-bottom-color:#0000}.letter-word.current .letter-slot:not(.fixed){border-bottom-color:var(--accent)}.letter-punct{color:var(--muted)}.free-text{min-height:5rem}.result{flex-direction:column;gap:8px;min-height:3rem;display:flex}.verdict{margin:0;font-weight:600}.verdict.passed{color:var(--ok-text)}.verdict.wrong{color:var(--danger)}.answer{overflow-wrap:anywhere;margin:0;font-size:1.2rem}.tokens{overflow-wrap:anywhere;flex-wrap:wrap;gap:6px 10px;margin:0;font-size:1.1rem;display:flex}.token.wrong,.token.missing,.token.extra{color:var(--danger)}.tokens.masked .token:not(.correct){letter-spacing:1px}.token del{color:var(--muted);margin-right:4px}.controls{flex-direction:column;gap:8px;display:flex}.controls-row{gap:8px;display:flex}.controls-row .button{white-space:nowrap;flex:1 1 0;min-width:0;padding:0 6px}.continue-card{min-height:44px;color:var(--text);flex-wrap:wrap;align-items:baseline;gap:4px 12px;text-decoration:none;display:flex}.continue-label{color:var(--accent);font-weight:600}.continue-title{overflow-wrap:anywhere;flex:1;min-width:0}@media (width<=700px){.practice{padding-bottom:calc(140px + env(safe-area-inset-bottom))}.stage{max-height:28vh}.letter-words{gap:10px 12px;font-size:1rem}.letter-slot{width:1em}.letter-slots{gap:2px}.controls-row{gap:6px}.controls-row .button{padding:0 2px;font-size:15px}.controls{z-index:10;padding:8px var(--gutter) max(8px, env(safe-area-inset-bottom));border-top:1px solid var(--border);background:var(--surface);position:fixed;bottom:0;left:0;right:0}}.practice-alert{flex-wrap:wrap;align-items:center;gap:8px;display:flex}