:root{font-family:Inter,Avenir,Helvetica,Arial,sans-serif;color-scheme:dark}*{box-sizing:border-box}html,body,#root{margin:0;height:100%}html{background-color:#080a14}body{background-color:#080a14;background-image:radial-gradient(1200px 800px at 50% -10%,#1b2440,#0d1020 55%,#080a14);background-repeat:no-repeat;color:#e8ecf5}.app{max-width:720px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column;gap:22px;padding:22px 24px 30px}.topbar{display:flex;align-items:baseline;justify-content:space-between}.brand{font-size:22px;font-weight:700;letter-spacing:.5px}.brand span{font-size:13px;font-weight:500;opacity:.6;margin-left:8px}.navmenu{position:relative}.navmenu-trigger{display:flex;align-items:center;gap:10px;padding:8px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.1);background:#ffffff0a;color:#e8ecf5;font:inherit;font-size:13px;cursor:pointer;transition:background .15s ease,border-color .15s ease}.navmenu-trigger:hover,.navmenu-trigger.open{background:#ffffff17;border-color:#fff3}.navmenu-current{font-weight:500;letter-spacing:.2px}.navmenu-chev{width:10px;height:6px;opacity:.55;transition:transform .18s ease}.navmenu-trigger.open .navmenu-chev{transform:rotate(180deg)}.navmenu-pop{position:absolute;top:calc(100% + 8px);right:0;z-index:40;min-width:190px;padding:6px;border-radius:14px;border:1px solid rgba(255,255,255,.1);background:#151d33;box-shadow:0 18px 48px #00000080;animation:navmenu-in .14s ease-out}@keyframes navmenu-in{0%{opacity:0;transform:translateY(-4px)}}@media(prefers-reduced-motion:reduce){.navmenu-pop{animation:none}}.navmenu-group+.navmenu-group{margin-top:4px;padding-top:4px;border-top:1px solid rgba(255,255,255,.07)}.navmenu-grouplabel{padding:6px 10px 4px;font-size:10.5px;letter-spacing:1.1px;text-transform:uppercase;opacity:.4}.navmenu-item{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:8px 10px;border:none;border-radius:9px;background:transparent;color:#e8ecf5;font:inherit;font-size:13.5px;text-align:left;cursor:pointer}.navmenu-item:hover{background:#ffffff12}.navmenu-item.on{background:#4a6bff38}.navmenu-tick{font-size:11px;opacity:.8}.levels{display:flex;gap:6px}.lvl{padding:7px 13px;border-radius:999px;border:1px solid rgba(255,255,255,.1);background:transparent;color:#e8ecf5;font-size:12.5px;cursor:pointer;transition:background .15s ease,border-color .15s ease}.lvl:hover{background:#ffffff0f}.lvl.on{background:#4a6bff40;border-color:#4a6bff}.stage{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;min-height:320px;border:1px solid rgba(255,255,255,.07);border-radius:24px;background:#ffffff05}.stage-syllable{font-weight:700;line-height:1;color:#fff;text-shadow:0 8px 40px rgba(0,0,0,.5)}.stage-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center}.chip{font-size:14px;padding:5px 12px;border-radius:999px;background:#ffffff0f;border:1px solid rgba(255,255,255,.08)}.plus{opacity:.4}.buffering{font-size:12px;letter-spacing:1px;text-transform:uppercase;opacity:0;transition:opacity .2s ease}.buffering.on{opacity:.5}.transport{display:flex;gap:12px;justify-content:center;align-items:center}.ctrl{font-size:18px;padding:12px 18px;border-radius:14px;border:1px solid rgba(255,255,255,.1);background:#ffffff0d;color:#e8ecf5;cursor:pointer;transition:background .15s ease,transform .1s ease}.ctrl:hover{background:#ffffff1a}.ctrl:active{transform:scale(.96)}.ctrl.play{min-width:150px;font-weight:600;background:#3556d4;border-color:#4a6bff}.ctrl.play:hover{background:#4a6bff}.scrubber{display:flex;align-items:center;gap:14px}.scrubber input[type=range]{flex:1}.counter{font-variant-numeric:tabular-nums;font-size:13px;opacity:.7;min-width:82px;text-align:right}.settings{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 24px}.setting{display:flex;flex-direction:column;gap:6px}.setting label{font-size:12px;opacity:.65}.segmented{display:flex;gap:6px}.seg{flex:1;padding:8px;border-radius:10px;border:1px solid rgba(255,255,255,.1);background:transparent;color:#e8ecf5;cursor:pointer;font-size:13px}.seg.on{background:#4a6bff40;border-color:#4a6bff}input[type=range]{width:100%;accent-color:#4a6bff}.ctrl:disabled{opacity:.35;cursor:default}.stage.drill{gap:24px}.drill-transport .ctrl{font-size:15px;padding:9px 16px}.drill-transport .ctrl.play{min-width:0}.drill-prompt{display:flex;align-items:center;justify-content:center;min-height:150px}.listen{font-size:54px;line-height:1;padding:26px 34px;border-radius:28px;border:1px solid rgba(255,255,255,.1);background:#ffffff0a;cursor:pointer;transition:background .15s ease,transform .1s ease}.listen:hover{background:#ffffff17}.listen:active{transform:scale(.96)}.drill-answer{display:flex;flex-direction:column;align-items:center;gap:8px}.drill-typed{font-size:15px;letter-spacing:2px;opacity:.55;font-variant-numeric:tabular-nums}.drill-input{width:min(340px,100%);text-align:center;font-size:30px;font-weight:600;letter-spacing:2px;padding:14px 18px;border-radius:16px;border:1px solid rgba(255,255,255,.14);background:#00000040;color:#fff;outline:none;transition:border-color .15s ease,background .15s ease}.drill-input:focus{border-color:#4a6bff;background:#00000059}.drill-input.correct{border-color:#3da35d;background:#3da35d29}.drill-input.shake{border-color:#e0533d;animation:shake .32s cubic-bezier(.36,.07,.19,.97)}@keyframes shake{10%,90%{transform:translate(-2px)}20%,80%{transform:translate(4px)}30%,50%,70%{transform:translate(-7px)}40%,60%{transform:translate(7px)}}@media(prefers-reduced-motion:reduce){.drill-input.shake{animation:none}}.drill-status{font-size:12.5px;letter-spacing:1px;text-transform:uppercase;min-height:30px;display:flex;align-items:center;justify-content:center}.grade{display:flex;gap:5px;text-transform:none;letter-spacing:0}.gseg{font-size:19px;font-weight:600;padding:3px 11px;border-radius:9px;border:1px solid transparent;font-variant-numeric:tabular-nums}.gseg.correct{color:#6ddc92;background:#3da35d24;border-color:#6ddc9266}.gseg.wrong{color:#ff8f7a;background:#e0533d24;border-color:#ff8f7a73}.gseg.missing{color:#ff8f7a;background:transparent;border-color:#ff8f7a73;border-style:dashed}.ok{color:#6ddc92}.bad{color:#ff8f7a}.shown{color:#e0a13d}.stage.vocab{gap:18px;padding:26px 20px}.vocab-meaning{font-size:21px;line-height:1.45;text-align:center;max-width:30ch;color:#e8ecf5}.vocab-answer{display:flex;flex-direction:column;align-items:center;gap:8px;min-height:140px;justify-content:center}.vocab-hanzi{font-weight:600;line-height:1.1;color:#fff;text-shadow:0 8px 40px rgba(0,0,0,.5)}.vocab-placeholder{line-height:1.1;color:#ffffff14;font-weight:600}.vocab-pinyin{font-size:15px;letter-spacing:1px;opacity:.6}.vocab-input{font-size:34px;letter-spacing:4px}.stage.vocab-movie{gap:0;justify-content:center;padding:22px 20px 30px}.vm-center{display:flex;flex-direction:column;align-items:center;gap:12px}.vm-hanzi{font-weight:600;line-height:1.1;color:#fff;text-shadow:0 8px 40px rgba(0,0,0,.5)}.vm-pinyin{font-size:20px;letter-spacing:2px;opacity:.65}.rad-forms{display:flex;align-items:center;justify-content:center;gap:22px}.rad-variants{display:flex;align-items:center;gap:16px;padding-left:22px;border-left:1px solid rgba(255,255,255,.1)}.rad-variant{line-height:1;font-weight:500;color:#ffffff73}.stroke-order{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap}.stroke-cell{position:relative;display:flex;align-items:center;justify-content:center;line-height:1}.stroke-cell svg{display:block;position:relative}.stroke-cell.tzg:before{content:"";position:absolute;inset:var(--tzg-inset, 0);border:1px solid rgba(255,255,255,.1);background-image:repeating-linear-gradient(to bottom,rgba(255,255,255,.07) 0 var(--tzg-dash),transparent 0 calc(var(--tzg-dash) * 2)),repeating-linear-gradient(to right,rgba(255,255,255,.07) 0 var(--tzg-dash),transparent 0 calc(var(--tzg-dash) * 2));background-size:1px 100%,100% 1px;background-position:center;background-repeat:no-repeat;pointer-events:none}.stage{position:relative}.quick-report{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.quick-report .qr{padding:9px 12px;font-size:13px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:#ffffff0a;color:#ffffff8c;cursor:pointer;white-space:nowrap;transition:background .15s ease,color .15s ease,border-color .15s ease}.quick-report .qr:hover{background:#ffffff17;color:#ffffffe6}.quick-report .qr.sent{background:#2f7d4f;border-color:#2f7d4f;color:#fff}.card-flag{position:absolute;right:12px;bottom:12px;width:24px;height:24px;border-radius:50%;border:1px solid rgba(255,255,255,.12);background:transparent;color:#e8ecf5;font-size:12px;opacity:.25;cursor:pointer;transition:opacity .15s ease,background .15s ease}.card-flag:hover{opacity:.9;background:#ffffff14}.modal-backdrop{position:fixed;inset:0;background:#04060eb8;display:flex;align-items:center;justify-content:center;padding:20px;z-index:50}.modal{width:min(420px,100%);display:flex;flex-direction:column;gap:8px;padding:20px;border-radius:18px;border:1px solid rgba(255,255,255,.1);background:#131a2e;box-shadow:0 24px 70px #0000008c}.modal-title{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-size:15px;font-weight:600;margin-bottom:4px}.modal-card{font-size:20px;opacity:.8}.modal-label{font-size:12px;opacity:.6;margin-top:6px}.modal select,.modal textarea{width:100%;padding:9px 11px;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:#00000047;color:#e8ecf5;font:inherit;font-size:14px;resize:vertical}.modal select:focus,.modal textarea:focus{outline:none;border-color:#4a6bff}.modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:12px}.modal-actions .seg{flex:none;padding:8px 16px}.seg.primary{background:#3556d4;border-color:#4a6bff}.modal-result{padding:10px 0 4px;font-size:14px}.hint{text-align:center;font-size:12px;opacity:.45}@media(max-width:520px){.settings{grid-template-columns:1fr}}.ph-hanzi{letter-spacing:2px;text-align:center;max-width:100%}