:root{--bg: #0b0d12;--panel: #141822;--panel-2: #1c2230;--line: #2a3244;--ink: #eef2f8;--dim: #a9b7cf;--accent: #ffd23f;--good: #35d07f;--bad: #ff5c5c;--glyph: #ffffff;--tap: 56px;--radius: 10px;color-scheme:dark;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif}.zh{font-family:Noto Sans TC,Microsoft JhengHei,MS JhengHei,PingFang TC,Heiti TC,"Noto Serif TC",sans-serif;color:var(--glyph);line-height:1}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;overscroll-behavior:none}#root{min-height:100dvh;display:flex;flex-direction:column}.shell{width:100%;max-width:720px;margin:0 auto;padding:16px 16px 32px;flex:1;display:flex;flex-direction:column}.topbar{display:flex;align-items:center;gap:12px;padding:8px 0 16px;border-bottom:1px solid var(--line);margin-bottom:20px}.topbar h1{font-size:15px;margin:0;letter-spacing:.14em;text-transform:uppercase}.topbar .spacer{flex:1}.counter{font-variant-numeric:tabular-nums;font-size:13px;color:var(--dim);letter-spacing:.08em}::selection{background:#ffd23fd9;color:#17181c}.rail{display:flex;gap:3px;height:4px;margin-bottom:20px}.rail span{flex:1;background:var(--line);border-radius:2px;transition:background .16s}.rail span[data-level="2"]{background:#3d4a63}.rail span[data-level="3"]{background:#6b7fa8}.rail span[data-level="4"]{background:var(--accent)}.rail span[data-level="5"]{background:var(--good)}.rail span[data-leech="1"]{background:var(--bad)}button{font:inherit;color:inherit;font-size:16px;border:1px solid var(--line);background:var(--panel);border-radius:var(--radius);padding:14px 18px;cursor:pointer;min-height:var(--tap);transition:border-color .12s,background .12s,transform 60ms}button:hover:not(:disabled){border-color:#46536e}button:active:not(:disabled){transform:translateY(1px)}button:disabled{cursor:default}button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.primary{background:var(--accent);color:#17181c;border-color:var(--accent);font-weight:700;letter-spacing:.04em}.ghost{background:#a082dc24;border-color:#a082dc80;color:var(--ink);font-weight:500}.ghost:hover:not(:disabled){background:#a082dc38;border-color:#a082dcbf}.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:24px}.introduce{display:flex;flex-direction:column;gap:20px;flex:1}.phonetics{display:flex;gap:14px;align-items:baseline;color:var(--dim)}.phonetics .pinyin{font-size:20px;color:var(--ink)}.parts{display:flex;flex-wrap:wrap;gap:8px}.part{display:flex;align-items:baseline;gap:7px;background:var(--panel-2);border:1px solid var(--line);border-radius:8px;padding:7px 11px}.part .zh{font-size:22px}.part small{color:var(--dim);font-size:13px}.mnemonic{color:#cabfe0;line-height:1.6;margin:0;font-size:16px}.label{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin:0 0 10px}.prompt{display:grid;place-items:center;min-height:168px;margin-bottom:24px}.prompt .zh{font-size:128px}.prompt .ask{font-size:34px;font-weight:600;text-align:center}.ask-line{font-size:24px;font-weight:600;line-height:1.3;color:#f7f2ff;text-align:center;margin:0 0 24px}.options{display:grid;grid-template-columns:1fr 1fr;gap:10px}.options button{display:flex;align-items:center;gap:10px;min-height:68px;text-align:left;font-size:17px}.options button .key{font-size:13px;color:var(--dim);font-variant-numeric:tabular-nums;border:1px solid var(--line);border-radius:5px;padding:2px 6px;flex:none}.options button .zh{font-size:34px}.options button[data-state=right]{border-color:var(--good);background:#12291f}.options button[data-state=wrong]{border-color:var(--bad);background:#2b1416}.options button[data-state=missed]{border-color:var(--good)}.verdict{min-height:30px;margin-top:16px;font-size:15px}.verdict[data-ok=true]{color:var(--good)}.verdict[data-ok=false]{color:var(--bad)}.unlock{text-align:center;padding-top:8px}.unlock .num{font-size:76px;font-weight:800;color:var(--accent);font-variant-numeric:tabular-nums;line-height:1}.unlock h2{font-size:20px;margin:12px 0 4px}.unlock .sub{color:#cabfe0;font-size:15px;line-height:1.6;margin:0 0 24px}.wordgrid{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;max-height:45dvh;overflow-y:auto;padding:4px}.word{background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:9px 12px;text-align:center;min-width:84px}.word .zh{font-size:24px;display:block}.word small{color:var(--dim);font-size:13px;display:block;margin-top:4px}.rows{display:flex;flex-direction:column;gap:8px}.row{display:flex;align-items:center;gap:12px;background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:10px 14px}.row .zh{font-size:28px}.row .meta{flex:1;font-size:14px;color:var(--dim)}.row .lvl{font-variant-numeric:tabular-nums;font-size:13px;color:var(--accent);letter-spacing:.1em}.hatch{border-color:var(--bad)}.hatch .label{color:var(--bad)}.stack{display:flex;flex-direction:column;gap:12px;margin-top:auto;padding-top:24px}.muted{color:var(--dim)}.center{text-align:center}@media(max-width:420px){.options{grid-template-columns:1fr}.prompt .zh{font-size:104px}}@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}.slider-row{display:flex;align-items:center;gap:12px;margin-bottom:8px;font-size:14px}.slider-row input[type=range]{flex:1;accent-color:var(--accent);min-height:32px}.tiles-prompt{min-height:150px}.tile-pinyin{text-align:center;color:#cabfe0;font-size:18px;margin-top:8px}.tile-slots{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;min-height:76px;margin-bottom:22px}.tile-tray{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}.tile{width:68px;height:68px;min-height:68px;display:grid;place-items:center;padding:0;border:1px solid var(--line);background:var(--panel);border-radius:var(--radius)}.tile .zh{font-size:36px}.tile.filled{border-color:var(--accent);background:var(--panel-2)}.tile.empty{border-style:dashed;background:transparent;cursor:default;border-color:#333c52}.tile:disabled{opacity:.4}.city{position:relative;flex:1;min-height:0;overflow:hidden;background:var(--sky-top)}.backdrop{position:absolute;inset:0;pointer-events:none}.sky-wash{position:absolute;inset:0;background:radial-gradient(120% 62% at 50% 100%,var(--sky-horizon) 0%,transparent 68%),linear-gradient(to bottom,var(--sky-top) 0%,var(--sky-mid) 52%,var(--sky-horizon) 100%)}.stars{position:absolute;inset:0 0 40%;width:100%;height:60%}.orb{position:absolute;top:calc(8% + var(--depth, 0) * 26px);right:18%;width:54px;height:54px;border-radius:50%;background:radial-gradient(circle at 38% 34%,var(--orb),color-mix(in srgb,var(--orb) 82%,#000) 74%,transparent 76%);box-shadow:0 0 26px 10px color-mix(in srgb,var(--orb-glow) 34%,transparent),0 0 70px 34px color-mix(in srgb,var(--orb-glow) 16%,transparent);opacity:calc(.45 + .55 * var(--glow, 1))}.layer{position:absolute;left:0;width:100%}.far{bottom:26%;height:34%;transform:translateY(calc(var(--depth, 0) * 70px));opacity:.85}.mid{bottom:12%;height:52%;transform:translateY(calc(var(--depth, 0) * 150px))}.near{bottom:0;height:86%;transform:translateY(calc(var(--depth, 0) * 250px))}.haze{position:absolute;left:-10%;width:120%;pointer-events:none;transform:translateY(calc(var(--depth, 0) * 130px))}.haze-far{bottom:24%;height:22%;background:linear-gradient(to top,color-mix(in srgb,var(--haze) 46%,transparent),transparent);filter:blur(9px)}.haze-mid{bottom:8%;height:30%;background:linear-gradient(to top,color-mix(in srgb,var(--haze) 40%,transparent),transparent);filter:blur(14px)}.haze-near{bottom:0;height:34%;background:linear-gradient(to top,color-mix(in srgb,var(--haze) 34%,transparent),transparent);filter:blur(20px)}.flyer{position:absolute;height:2px;width:46px;border-radius:2px;background:linear-gradient(to right,transparent,#ff5c5c);box-shadow:0 0 10px 2px #ff5c5c99;opacity:0}.f1{top:30%;animation:fly 17s linear infinite}.f2{top:46%;animation:fly 23s linear infinite 9s;background:linear-gradient(to left,transparent,#6ee7ff);box-shadow:0 0 10px 2px #6ee7ff80}@keyframes fly{0%{transform:translate(-60px);opacity:0}8%{opacity:.9}70%{opacity:.9}to{transform:translate(440px);opacity:0}}.tower-scroll{position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;z-index:2}.tower-scroll::-webkit-scrollbar{display:none}.tower-inner{display:flex;flex-direction:column;align-items:center;min-height:100%;justify-content:flex-end;padding:40px 0 150px}.crown{display:flex;flex-direction:column;align-items:center}.mast{position:relative;width:2px;height:46px;background:linear-gradient(to bottom,transparent,var(--facade-edge))}.beacon{position:absolute;top:-3px;left:-2.5px;width:7px;height:7px;border-radius:50%;background:#ff5c5c;box-shadow:0 0 12px 4px #ff5c5cbf;animation:blink 2.6s ease-in-out infinite}@keyframes blink{0%,to{opacity:1}50%{opacity:.12}}.crown-cap{width:100%;height:26px;background:var(--facade);border:1px solid var(--facade-edge);border-bottom:none;display:grid;place-items:center;clip-path:polygon(14% 0,86% 0,100% 100%,0 100%)}.crown-label{font-size:9px;letter-spacing:.3em;color:var(--sky-dim)}.crown-sign{width:100%;padding:7px 0;background:var(--facade);border:1px solid var(--facade-edge);border-bottom:none;display:grid;place-items:center}.crown-sign .zh{font-size:19px;color:#ffd6f5;text-shadow:0 0 calc(6px * var(--glow, 1)) #ff2fb9,0 0 calc(18px * var(--glow, 1)) #ff2fb9,0 0 calc(34px * var(--glow, 1)) rgba(255,47,185,.55);opacity:calc(.55 + .45 * var(--glow, 1))}.floor{position:relative;display:flex;align-items:center;gap:6px;padding:0 8px;margin:0;border:none;border-radius:0;min-height:0;transition:filter .14s;background:linear-gradient(to right,color-mix(in srgb,var(--facade-edge) 55%,transparent) 0 1.5px,transparent 1.5px calc(100% - 2.5px),rgba(0,0,0,.5) calc(100% - 2.5px) 100%),linear-gradient(to bottom,rgba(0,0,0,.22),transparent 30%),color-mix(in srgb,var(--facade) calc(var(--shade, 1) * 100%),#000);box-shadow:inset 0 -1px #00000073}.floor:hover:not(:disabled){filter:brightness(1.3)}.floor[data-state=locked]{opacity:.55}.floor[data-state=current]{box-shadow:inset 0 0 0 1px var(--accent),0 0 22px #ffd23f4d;z-index:3}.floor-no{font-size:8px;font-variant-numeric:tabular-nums;color:var(--sky-dim);width:17px;text-align:right;flex:none;opacity:.75}.floor-windows{display:flex;gap:2px;flex:1;height:18px}.mech-band{flex:1;height:16px;background:repeating-linear-gradient(to bottom,#ffffff0d 0 1px,#0006 1px 3px);border-top:1px solid rgba(255,255,255,.05)}.floor[data-mech="1"]{filter:brightness(.82)}.win{flex:1;border-radius:.5px;background-color:rgba(6,4,16,calc(.3 * var(--dim, 1)));background-image:linear-gradient(to bottom,transparent 44%,rgba(0,0,0,.5) 44%,rgba(0,0,0,.5) 56%,transparent 56%)}.win[data-level="1"],.win[data-level="2"]{background-color:rgba(120,150,200,calc(.16 + .26 * var(--glow, 1)))}.win[data-level="3"],.win[data-level="4"]{background-color:color-mix(in srgb,#22e0ff calc(28% + 52% * var(--glow, 1)),transparent);box-shadow:0 0 calc(6px * var(--glow, 1)) rgba(34,224,255,calc(.75 * var(--glow, 1)))}.win[data-level="5"]{background-color:color-mix(in srgb,#ff2fb9 calc(38% + 56% * var(--glow, 1)),transparent);box-shadow:0 0 calc(8px * var(--glow, 1)) rgba(255,47,185,calc(.85 * var(--glow, 1))),0 0 calc(20px * var(--glow, 1)) rgba(255,47,185,calc(.4 * var(--glow, 1)))}.win[data-leech="1"]{background-color:color-mix(in srgb,#ff3b3b calc(34% + 50% * var(--glow, 1)),transparent);box-shadow:0 0 calc(8px * var(--glow, 1)) rgba(255,59,59,calc(.8 * var(--glow, 1)));animation:flicker 3.1s steps(1,end) infinite}@keyframes flicker{0%,44%,48%,78%,82%,to{opacity:1}46%,80%{opacity:.34}}.here{position:absolute;left:-9px;top:50%;width:4px;height:4px;margin-top:-2px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px 2px #ffd23fcc}.tower-base{height:210px;background:linear-gradient(to right,color-mix(in srgb,var(--facade-edge) 45%,transparent) 0 1.5px,transparent 1.5px calc(100% - 2.5px),rgba(0,0,0,.4) calc(100% - 2.5px) 100%),linear-gradient(to bottom,var(--facade) 0%,color-mix(in srgb,var(--facade) 70%,transparent) 46%,transparent 96%)}.rooftop{position:absolute;left:0;right:0;bottom:0;height:176px;z-index:4;pointer-events:none}.rooftop-art{position:absolute;inset:0;width:100%;height:100%}.rooftop-note{position:absolute;left:56px;width:218px;top:96px;height:38px;margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;text-align:center;font-size:12px;line-height:1.35;white-space:nowrap;letter-spacing:.06em;color:#8f9cc0;text-transform:uppercase}.rooftop-note .lit{color:#7fe9ff;text-shadow:0 0 8px rgba(34,224,255,.7)}.rooftop-note .hot{color:#ff8fd8;text-shadow:0 0 8px rgba(255,47,185,.7)}.sheet-backdrop{position:absolute;inset:0;z-index:20;background:#060410bd;display:flex;align-items:flex-end;animation:fade .16s ease-out}@keyframes fade{0%{opacity:0}to{opacity:1}}.sheet{width:100%;background:#120e22;border-top:1px solid #3a2d5c;border-radius:18px 18px 0 0;padding:10px 18px 20px;max-height:82%;overflow-y:auto;box-shadow:0 -18px 50px #0009;animation:rise .2s cubic-bezier(.2,.8,.2,1)}@keyframes rise{0%{transform:translateY(28px)}to{transform:translateY(0)}}.sheet-grip{width:38px;height:4px;border-radius:2px;background:#3a2d5c;margin:0 auto 14px}.sheet-head{display:flex;align-items:center;gap:10px;margin-bottom:14px}.sheet-floor{font-size:14px;letter-spacing:.18em;color:var(--dim)}.sheet-tag{font-size:12px;letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;border-radius:20px;border:1px solid #3a2d5c}.sheet-tag.current{color:var(--accent);border-color:var(--accent)}.sheet-tag.done{color:#22e0ff;border-color:#22e0ff80}.sheet-tag.locked{color:var(--dim)}.sheet-chars{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}.sheet-char{width:44px;padding:6px 0;border-radius:8px;text-align:center;background:#1a1430;border:1px solid #302548}.sheet-char .zh{font-size:22px;display:block}.sheet-char small{font-size:12px;color:var(--dim)}.sheet-char[data-level="3"],.sheet-char[data-level="4"]{border-color:#22e0ff80;box-shadow:inset 0 0 12px #22e0ff1f}.sheet-char[data-level="5"]{border-color:#ff2fb9a6;box-shadow:inset 0 0 14px #ff2fb92e}.sheet-char[data-leech="1"]{border-color:#ff3b3bb3}.sheet-actions{display:flex;flex-direction:column;gap:10px}.sheet-actions button{background:#a082dc1f;border-color:#a082dc6b;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:3px}.sheet-actions .primary{background:var(--accent);border-color:var(--accent)}.btn-sub{font-size:13px;color:#cabfe0;font-weight:400;letter-spacing:0}.primary .btn-sub{color:#17181c9e}.sheet-close{margin-top:14px;width:100%;background:#a082dc24;border-color:#a082dc80;color:var(--ink)}.device-backdrop{min-height:100dvh;display:grid;place-items:center;background:#05040a}.device{position:relative;width:min(100vw,390px);height:min(100dvh,844px);display:flex;flex-direction:column;overflow:hidden;background:var(--bg)}@media(min-width:430px)and (min-height:880px){.device{border-radius:28px;box-shadow:0 0 0 8px #14161d,0 0 0 9px #2a2f3a,0 30px 90px #7828b42e,0 30px 70px #000000d9}.device-backdrop{padding:20px}}.device .shell{flex:1;min-height:0;overflow-y:auto;max-width:none;padding:12px 14px 20px}.device .topbar{margin:0;padding:12px 14px;flex:none;background:var(--bg);position:relative;z-index:5}.tower-bar{border-bottom-color:transparent;background:transparent;position:absolute;top:0;left:0;right:0;z-index:10}.tower-bar h1 .zh{font-size:17px;color:#ffd6f5;text-shadow:0 0 8px #ff2fb9,0 0 20px rgba(255,47,185,.6)}.banner{letter-spacing:.12em!important;text-transform:none!important;flex:none}.tower-bar .counter{color:#9fb8d8}.icon-btn{min-height:0;width:34px;padding:6px 0;font-size:17px;line-height:1;background:#a082dc1f;border-color:#a082dc59;color:var(--ink)}.icon-btn:hover{border-color:#a082dcb3}.back{min-height:0;padding:6px 13px;font-size:17px;line-height:1;background:#a082dc24;border-color:#a082dc66;color:var(--ink)}.back:hover{color:var(--ink)}@media(prefers-reduced-motion:reduce){.flyer,.beacon,.win[data-leech="1"]{animation:none}.flyer{opacity:0}}.landing{display:flex;flex-direction:column}.landing-body{position:relative;z-index:5;flex:1;display:flex;flex-direction:column;justify-content:space-between;align-items:center;padding:72px 26px 46px;text-align:center}.landing-mark{display:flex;flex-direction:column;align-items:center;gap:10px}.landing-glyph{font-size:78px;line-height:1;color:#ffd6f5;text-shadow:0 0 calc(10px * var(--glow, 1)) #ff2fb9,0 0 calc(28px * var(--glow, 1)) #ff2fb9,0 0 calc(62px * var(--glow, 1)) rgba(255,47,185,.5)}.landing-title{margin:4px 0 0;font-size:30px;font-weight:700;letter-spacing:.02em;color:#f4f0ff;text-shadow:0 0 calc(16px * var(--glow, 1)) rgba(120,200,255,.45)}.landing-sub{margin:0;font-size:14px;line-height:1.6;color:#b9a8d8;max-width:250px}.landing-actions{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%}.gis-host{width:280px;height:40px;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:20px}.landing-cta{width:100%;max-width:280px}.landing-fine{margin:0;font-size:14px;line-height:1.65;color:#bcaee0;max-width:290px}.landing-error{margin:0;font-size:14px;line-height:1.6;color:#ff9a9a;max-width:290px}.signout{min-height:0;padding:6px 12px;font-size:12px;letter-spacing:.1em;background:#a082dc1f;border-color:#a082dc59;color:var(--ink)}.signout:hover{color:#ff8a8a;border-color:#ff5c5c66}.lesson-backdrop{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}.lesson-wash{position:absolute;inset:0;background:radial-gradient(120% 55% at 50% 102%,var(--sky-horizon) 0%,transparent 58%),linear-gradient(to bottom,var(--sky-top) 0%,var(--sky-mid) 60%,var(--sky-horizon) 100%)}.lesson-skyline{position:absolute;left:0;bottom:0;width:100%;height:54%;opacity:.5}.lesson-scrim{position:absolute;inset:0;background:rgba(10,7,22,calc(.72 - .24 * var(--glow, 1)))}.lesson-haze{position:absolute;left:-10%;bottom:0;width:120%;height:62%;background:linear-gradient(to top,color-mix(in srgb,var(--haze) 46%,transparent),transparent);filter:blur(22px)}.device .shell{position:relative;z-index:1}.device .topbar{background:transparent}.device .card{background:#140f28cc;border-color:#a082dc47}.device .muted,.device .label,.device .counter,.device .part small,.device .word small,.device .row .meta{color:#b8abd6}.device .row,.device .word,.device .part,.device .options button,.device .tile,.device .sheet-char{background:#140f28cc;border-color:#a082dc47}.device .tile.empty{background:transparent;border-color:#a082dc38}.device .options button[data-state=right]{background:#0f2b1ee0}.device .options button[data-state=wrong]{background:#40161ed9}.hero-row{display:flex;align-items:center;justify-content:center;gap:22px}.hero-glyph{text-align:center}.hero-glyph .pinyin{margin:6px 0 0;font-size:20px;color:var(--ink)}.zhuyin{display:inline-flex;align-items:center;gap:7px;color:#dbcdf5}.zhuyin[data-tone="5"]{flex-direction:column;gap:3px}.zhuyin-stack{display:flex;flex-direction:column;align-items:center;line-height:1.12;color:inherit}.zhuyin-ghost{visibility:hidden;display:inline-flex}.reading-cols{display:inline-grid;grid-auto-flow:column;gap:12px;justify-content:center}.reading-col{display:flex;flex-direction:column;align-items:center;gap:7px}.reading-glyph{line-height:1}.reading-pinyin{color:#cabfe0;white-space:nowrap}.reading-col .zhuyin{color:#c3b6e2}.reading-inline{display:inline-flex;align-items:center;gap:11px;flex-wrap:wrap}.reading-pair{display:inline-flex;align-items:center;gap:4px}.reading-pair .zhuyin{color:#b9a8d8}.reading-pair .reading-pinyin{color:var(--ink)}.introduce .gloss{font-size:24px;font-weight:600;margin:0;color:#fff}.fine{font-size:14px;line-height:1.6;margin:0;color:#cabfe0}.introduce .card.hero{padding:18px 16px;border-color:#ffd23f8c;box-shadow:0 0 26px #ffd23f1f}.hero-controls{display:flex;justify-content:center;margin-top:12px}.replay{min-height:0;padding:5px 14px;font-size:12px;letter-spacing:.12em;border-radius:20px;background:transparent;border-color:#a082dc4d;color:var(--dim)}.teach-banner{display:flex;align-items:center;gap:13px;padding:4px 2px 2px}.teach-tag{flex:none;font-size:15px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#17181c;background:var(--accent);border-radius:6px;padding:6px 13px;box-shadow:0 0 18px #ffd23f59}.teach-title{margin:0;font-size:24px;font-weight:600;line-height:1.25;color:#f7f2ff}.device .card.teach-card{border-color:#ffd23f8c;box-shadow:0 0 26px #ffd23f1f}.opt-body{display:flex;flex-direction:column;align-items:flex-start;gap:8px;flex:1;min-width:0}.opt-gloss{font-size:15px;color:#e4dcf5;padding-top:8px;border-top:1px solid rgba(160,130,220,.16);width:100%}.options button:has(.opt-body){min-height:76px;align-items:flex-start}.options button:has(.opt-body) .key{margin-top:3px}.options[data-span="2"],.options[data-span="3"],.options[data-span="4"]{grid-template-columns:1fr}.usage-note{margin:10px 0 0;padding-top:10px;border-top:1px solid rgba(160,130,220,.22);font-size:14px;line-height:1.55;color:#b8abd6}.device .introduce{gap:12px}.device .introduce .card{padding:15px 17px}.device .introduce .card.hero{padding:14px 16px}.device .stack{padding-top:16px;gap:10px}.device .introduce .label{margin-bottom:7px}.device .introduce .gloss{font-size:23px}.device .shell .stack{position:sticky;bottom:0;z-index:3;margin-top:auto;padding:14px 0 4px;background:linear-gradient(to top,var(--bg) 62%,transparent)}.device .shell:after{content:"";position:sticky;bottom:0;display:block;height:0}.device .shell{scrollbar-width:none;scroll-behavior:auto}.device .shell::-webkit-scrollbar{display:none}.options-screen{display:flex;flex-direction:column;gap:14px}.opt-head{display:flex;align-items:center;gap:12px}.opt-head h2{margin:0;font-size:19px;font-weight:600;letter-spacing:.1em}.opt-head .spacer{flex:1}.opt-saving{font-size:12px;letter-spacing:.12em;color:var(--dim);opacity:0;transition:opacity .16s}.opt-saving[data-on="1"]{opacity:1}.opt-count{font-size:23px;font-weight:600;font-variant-numeric:tabular-nums;min-width:42px;text-align:right}.opt-note{margin:11px 0 0;font-size:13px;line-height:1.5;color:var(--dim)}.opt-note.foot{margin:2px 2px 0}.opt-row{display:flex;align-items:flex-start;gap:12px;width:100%;min-height:0;padding:12px 0;text-align:left;background:transparent;border:none;border-bottom:1px solid rgba(160,130,220,.13);border-radius:0;color:var(--ink)}.opt-row:last-of-type{border-bottom:none}.opt-row:hover:not(:disabled){background:#a082dc0f}.opt-row:disabled{opacity:1;cursor:default}.opt-box{flex:none;width:22px;height:22px;margin-top:1px;border-radius:6px;border:1.5px solid rgba(160,130,220,.5);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:#17181c}.opt-box[data-on="1"]{background:var(--accent);border-color:var(--accent)}.opt-row:disabled .opt-box{box-shadow:0 0 0 3px #ffd23f24}.opt-text{display:flex;flex-direction:column;gap:3px;min-width:0}.opt-title{font-size:15px;color:#efe9ff}.opt-detail{font-size:12.5px;line-height:1.45;color:var(--dim)}.blink-stage{display:grid;place-items:center;min-height:168px;width:100%}.blink-stage>*{grid-area:1 / 1}.blink-cross{color:#c8bee68c}.blink-glyph{opacity:0;transition-property:opacity;transition-timing-function:linear}.blink-glyph[data-on="1"]{opacity:1}.blink-bar{display:flex;align-items:center;gap:12px;margin-top:14px}.blink-ms{font-size:13px;font-variant-numeric:tabular-nums;letter-spacing:.08em;color:var(--dim)}.blink-bar .replay{margin-left:auto}.blink-bar .replay:disabled{opacity:.4}.blink-demo{display:grid;place-items:center;min-height:96px;margin:0 0 6px}.blink-demo-glyph{font-family:Noto Sans TC,sans-serif;font-size:68px;color:#fff;animation:blink-demo 2.4s ease-in-out infinite}@keyframes blink-demo{0%,12%{opacity:0}18%,30%{opacity:1}36%,to{opacity:0}}.blink-lede{margin:0 0 14px;font-size:20px;font-weight:600;text-align:center;color:#f7f2ff}.blink-points{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:9px;font-size:14px;line-height:1.55;color:#cabfe0}.blink-card .slider-row.blink-slider{margin:14px 0 0}.opt-count small{font-size:13px;font-weight:400;color:var(--dim);margin-left:2px}@media(prefers-reduced-motion:reduce){.blink-demo-glyph{animation:none;opacity:1}}.blink-score-row{display:flex;align-items:center;gap:18px;margin:4px 0 2px}.blink-score .num{font-size:40px;font-weight:800;color:var(--accent);font-variant-numeric:tabular-nums;line-height:1}.blink-score .num small{font-size:15px;font-weight:500;color:var(--dim)}.blink-arrow{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:15px;font-variant-numeric:tabular-nums;color:var(--dim)}.blink-arrow span{color:#8f86ab}.options-screen .sec{border:1px solid rgba(160,130,220,.22);border-radius:12px;background:var(--panel);overflow:hidden}.sec-bar{display:flex;align-items:center;gap:10px;width:100%;min-height:0;padding:13px 14px;border:none;border-radius:0;background:transparent;text-align:left;color:var(--ink)}.sec-bar:hover{background:#a082dc12}.sec-bar[aria-expanded=true]{border-bottom:1px solid rgba(160,130,220,.16)}.sec-caret{font-size:12px;color:var(--dim);width:12px;text-align:center;flex:none}.sec-title{font-size:15px;font-weight:600;letter-spacing:.03em}.sec-sum{margin-left:auto;font-size:12px;color:var(--dim);font-variant-numeric:tabular-nums;white-space:nowrap}.sec-body{padding:4px 14px 12px}.fld{padding:12px 0;border-bottom:1px solid rgba(160,130,220,.11)}.fld:last-child{border-bottom:none}.fld-lab{margin:0 0 9px;font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--dim)}.fld[data-off="1"]{opacity:.36}.fld[data-off="1"] input{cursor:default}.blink-explain h3{margin:0 0 12px;font-size:20px}.blink-explain p{margin:0 0 12px;font-size:14px;line-height:1.6;color:#cabfe0}.blink-explain p.muted{font-size:13px}.verdict{min-height:46px;margin-top:16px;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:9px}.v-text{font-size:17px;font-weight:700;letter-spacing:.02em}.verdict[data-ok=true] .v-text{color:var(--good)}.verdict[data-ok=false] .v-text{color:var(--bad);font-weight:500;font-size:15px}.verdict[data-tone=level] .v-text{color:var(--accent)}.v-badge{font-size:11px;font-weight:800;letter-spacing:.14em;border-radius:5px;padding:4px 9px;animation:pop .22s cubic-bezier(.2,1.4,.4,1)}.v-badge.level{background:var(--accent);color:#17181c}.v-badge.mastered{background:#ff5cc8;color:#17181c;box-shadow:0 0 24px #ff5cc880}.v-badge.best{background:#43d9c429;color:#43d9c4;border:1px solid rgba(67,217,196,.5)}.v-streak{font-size:13px;font-weight:700;letter-spacing:.08em;color:var(--accent);animation:pop .22s cubic-bezier(.2,1.4,.4,1)}@keyframes pop{0%{transform:scale(.7);opacity:0}to{transform:scale(1);opacity:1}}.options button{position:relative}.options button[data-state=right]{border-color:#2bff88;background:linear-gradient(#0f2b1e,#133a28);box-shadow:0 0 0 1px #2bff88,0 0 22px #2bff8857}.options button[data-state=right]:after{content:"✓";position:absolute;top:6px;right:8px;width:20px;height:20px;border-radius:50%;background:#2bff88;color:#06210f;font-size:13px;font-weight:800;line-height:20px;text-align:center;box-shadow:0 0 12px #2bff8899;animation:pop .2s cubic-bezier(.2,1.4,.4,1)}.options button:disabled[data-state=missed],.options button:disabled:not([data-state]){opacity:.42}.options button:disabled[data-state=missed]{opacity:.75;border-color:#2bff8873}.mastery-bar{flex:1;min-width:44px;max-width:110px;height:5px;border-radius:3px;background:#a082dc3d;overflow:hidden}.mastery-bar i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,#43d9c4,#ff5cc8);transition:width .26s ease-out}.finish{min-height:0;padding:5px 11px;font-size:11px;letter-spacing:.1em;background:#a082dc24;border-color:#a082dc66;color:var(--ink)}.opt-row .opt-title{font-size:15px;color:#efe9ff}.opt-row{align-items:center}.opt-lock{margin-left:auto;padding-left:10px;flex:none;white-space:nowrap;font-size:11px;color:var(--accent);opacity:.85}.opt-row .opt-title{min-width:0}.opt-actions{position:sticky;bottom:0;z-index:3;display:flex;gap:8px;margin-top:4px;padding:12px 0 6px;background:linear-gradient(to top,var(--bg) 68%,transparent)}.opt-actions button{flex:1;min-height:46px}.opt-actions .primary{flex:1.5}.opt-actions button:disabled{opacity:.4}.confetti{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:40}.confetti i{position:absolute;top:-14px;border-radius:1px;opacity:0;animation-name:confetti-fall;animation-timing-function:cubic-bezier(.25,.6,.5,1);animation-fill-mode:forwards}@keyframes confetti-fall{0%{transform:translateZ(0) rotate(0);opacity:0}8%{opacity:1}85%{opacity:1}to{transform:translate3d(var(--drift, 0),105vh,0) rotate(var(--spin, 180deg));opacity:0}}.perfect-score{color:var(--good);text-shadow:0 0 18px rgba(53,208,127,.55)}.perfect-tag{display:inline-block;margin-top:10px;font-size:12px;font-weight:800;letter-spacing:.16em;color:#17181c;background:var(--good);border-radius:5px;padding:4px 10px}