:root{--canvas:#eef1f7;--panel:#fff;--ink:#18202e;--ink-soft:#5b6472;--ink-faint:#9aa3b2;--line:#e0e5f0;--brand:#2e5bff;--brand-ink:#1d3fbd;--brand-soft:#e9eeff;--amber:#ffb224;--amber-ink:#8a5a00;--amber-soft:#fff3d6;--good:#12b76a;--bad:#ef4444;--header-bg:#eef1f7d9;--overlay:#eef1f799;--soft-mint:#e3fbf0;--soft-rose:#ffe9e6;--soft-violet:#f0e9ff;--soft-green:#e2f6e9;--radius-lg:20px;--radius:16px;--radius-sm:10px;--shadow:0 12px 34px #18202e14;--shadow-sm:0 4px 14px #18202e0f;--font-display:"Space Grotesk", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;--font-body:"Inter", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;--font-mono:"JetBrains Mono", "SFMono-Regular", Consolas, "Courier New", monospace}[data-theme=dark]{--canvas:#0f1522;--panel:#1a2233;--ink:#e6ecf7;--ink-soft:#aeb9d2;--ink-faint:#7c8aa5;--line:#2a3446;--brand:#5b82ff;--brand-ink:#9db7ff;--brand-soft:#2e5bff2e;--amber:#ffb224;--amber-ink:#f0b429;--amber-soft:#ffb22424;--good:#12b76a;--bad:#ff6b6b;--header-bg:#0f1522d9;--overlay:#0a0e1699;--soft-mint:#3cdcaa29;--soft-rose:#ff786e29;--soft-violet:#a082ff2e;--soft-green:#50dc9629;--shadow:0 12px 34px #00000073;--shadow-sm:0 4px 14px #00000059}[data-kb-style=mono][data-theme=light]{--canvas:#f2f2f4;--panel:#fff;--ink:#26262b;--ink-soft:#62626b;--ink-faint:#9a9aa3;--line:#e1e1e7;--brand:#3f3f47;--brand-ink:#232329;--brand-soft:#ededf1;--amber:#8b8b95;--amber-ink:#55555e;--amber-soft:#f1f1f4;--soft-mint:#eef0ee;--soft-rose:#f2f0f0;--soft-violet:#f0f0f2;--soft-green:#edf1ee;--header-bg:#f2f2f4d9;--overlay:#f2f2f499;--shadow:0 12px 34px #26262b14;--shadow-sm:0 4px 14px #26262b0f}[data-kb-style=mono][data-theme=dark]{--canvas:#141417;--panel:#1e1e23;--ink:#ececf0;--ink-soft:#a7a7b1;--ink-faint:#76767f;--line:#2e2e35;--brand:#b4b4bd;--brand-ink:#eaeaf0;--brand-soft:#7d7d8a2e;--amber:#9b9ba4;--amber-ink:#cfcfd6;--amber-soft:#7d7d8a24;--soft-mint:#a0a0aa24;--soft-rose:#a0a0aa24;--soft-violet:#a0a0aa29;--soft-green:#a0a0aa24;--header-bg:#141417d9;--overlay:#0c0c0e99;--shadow:0 12px 34px #00000073;--shadow-sm:0 4px 14px #00000059}[data-kb-style=vintage]{--canvas:#f6efdd;--panel:#fdf7e8;--ink:#3b2f1d;--ink-soft:#6f6147;--ink-faint:#9b8d70;--line:#e2d3b3;--brand:#8a5a2b;--brand-ink:#6e4318;--brand-soft:#f1e5c8;--amber:#c98a2b;--amber-ink:#8a5a00;--amber-soft:#f6e8c5;--good:#6f9650;--bad:#b04a3a;--header-bg:#f6efddd9;--overlay:#f6efdd99;--soft-mint:#e7efd8;--soft-rose:#f6e0d6;--soft-violet:#efe3cf;--soft-green:#e4ecd4;--shadow:0 12px 34px #3b2f1d1a;--shadow-sm:0 4px 14px #3b2f1d14}[data-kb-style=neon]{--canvas:#080d13;--panel:#101a24;--ink:#d7f4fb;--ink-soft:#7fb6c8;--ink-faint:#46697a;--line:#1a3340;--brand:#00e5ff;--brand-ink:#a8f2ff;--brand-soft:#00e5ff24;--amber:#ff3d8b;--amber-ink:#ff9dc4;--amber-soft:#ff3d8b24;--good:#00e5a8;--bad:#ff5470;--header-bg:#080d13d9;--overlay:#04080c99;--soft-mint:#00e5a824;--soft-rose:#ff547029;--soft-violet:#00e5ff29;--soft-green:#3cffbe24;--shadow:0 12px 34px #00000080;--shadow-sm:0 4px 14px #0006}[data-kb-style=pastel]{--canvas:#f6f2fb;--panel:#fffcf7;--ink:#4b4a63;--ink-soft:#8a88a3;--ink-faint:#b7b5ca;--line:#e7e2f0;--brand:#b18ce8;--brand-ink:#8a63c4;--brand-soft:#f1e9fb;--amber:#f2a7c6;--amber-ink:#b06a8a;--amber-soft:#fdeef4;--good:#7fd6a8;--bad:#ef9aa0;--header-bg:#f6f2fbd9;--overlay:#f6f2fb99;--soft-mint:#e0f6ec;--soft-rose:#fde7ee;--soft-violet:#efe3fb;--soft-green:#e1f4ea;--shadow:0 12px 34px #4b4a6317;--shadow-sm:0 4px 14px #4b4a6312}*,:before,:after{box-sizing:border-box}*{margin:0}html{-webkit-text-size-adjust:100%}body{font-family:var(--font-body);color:var(--ink);background:var(--canvas);-webkit-font-smoothing:antialiased;font-size:16px;line-height:1.55}button{font:inherit;color:inherit;cursor:pointer}a{color:inherit;text-decoration:none}:focus-visible{outline:3px solid var(--brand);outline-offset:2px;border-radius:4px}.container{width:min(1080px,100% - 2.5rem);margin-inline:auto}.site-header{z-index:20;background:var(--header-bg);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);position:sticky;top:0}.site-header .container{align-items:center;gap:.9rem;height:62px;display:flex}.logo{font-family:var(--font-display);letter-spacing:-.02em;flex:none;align-items:center;gap:.4rem;font-size:1.1rem;font-weight:700;display:flex}.logo-mark{object-fit:cover;border-radius:8px;flex:none;width:34px;height:34px;display:block}.nav{scrollbar-width:none;flex-wrap:nowrap;flex:auto;align-items:center;gap:.2rem;min-width:0;margin-left:.5rem;display:flex;overflow-x:auto}.nav::-webkit-scrollbar{display:none}.nav a{white-space:nowrap;color:var(--ink-soft);border-radius:999px;flex:none;align-items:center;gap:.28rem;padding:.4rem .55rem;font-size:.85rem;font-weight:500;transition:color .15s,background .15s;display:inline-flex}.nav-icon{font-size:.95rem;line-height:1}.nav-icon-mobile{text-align:center;width:1.4rem;font-size:1rem}.nav a:hover{color:var(--ink);background:var(--panel)}.nav a.active{color:var(--brand-ink);background:var(--brand-soft)}.nav-spacer{flex:none}.header-actions{align-items:center;gap:.5rem;min-width:0;display:flex}.nav-burger{border:1px solid var(--line);background:var(--panel);width:38px;height:38px;color:var(--ink);border-radius:10px;place-items:center;font-size:1.05rem;line-height:1;display:none}.mobile-nav{display:none}.sound-toggle{border:1px solid var(--line);background:var(--panel);border-radius:999px;place-items:center;width:34px;height:34px;margin-right:.5rem;font-size:.95rem;line-height:1;display:grid}.lang-switch{background:var(--panel);border:1px solid var(--line);border-radius:999px;gap:2px;padding:3px;display:inline-flex}.lang-switch button{color:var(--ink-soft);background:0 0;border:0;border-radius:999px;padding:.3rem .7rem;font-size:.85rem;font-weight:600}.lang-switch button.active{background:var(--ink);color:var(--canvas)}.btn{border:0;border-radius:999px;justify-content:center;align-items:center;gap:.5rem;padding:.75rem 1.5rem;font-size:.95rem;font-weight:600;transition:transform .12s,box-shadow .12s,background .12s;display:inline-flex}.btn:active{transform:translateY(1px)}.btn-primary{background:var(--brand);color:#fff;box-shadow:0 6px 18px #2e5bff52}.btn-primary:hover{background:var(--brand-ink)}.btn-ghost{background:var(--panel);color:var(--ink);border:1px solid var(--line)}.btn-ghost:hover{border-color:var(--ink-faint)}.btn-sm{padding:.45rem 1rem;font-size:.85rem}.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm)}.page{padding:3rem 0 4rem}.page-head{margin-bottom:2rem}.page-head h1{font-family:var(--font-display);letter-spacing:-.03em;font-size:clamp(1.9rem,4vw,2.6rem);line-height:1.1}.page-head p{color:var(--ink-soft);max-width:56ch;margin-top:.5rem}.eyebrow{letter-spacing:.12em;text-transform:uppercase;color:var(--brand);margin-bottom:.6rem;font-size:.78rem;font-weight:700}.hero{padding:4.5rem 0 2.5rem;position:relative;overflow:hidden}.hero:before{content:"";pointer-events:none;background:radial-gradient(circle,#ffb2242e,#0000 65%);border-radius:50%;width:480px;height:480px;position:absolute;top:-140px;right:-120px}.hero:after{content:"";pointer-events:none;background:radial-gradient(circle,#2e5bff24,#0000 65%);border-radius:50%;width:420px;height:420px;position:absolute;bottom:-160px;left:-140px}.hero .container{grid-template-columns:1.1fr .9fr;align-items:center;gap:3rem;display:grid;position:relative}.hero-kicker{color:var(--brand-ink);background:var(--brand-soft);border-radius:999px;align-items:center;gap:.45rem;margin-bottom:1.1rem;padding:.4rem .9rem;font-size:.82rem;font-weight:600;display:inline-flex}.hero-kicker:before{content:"";background:var(--good);border-radius:50%;width:8px;height:8px;box-shadow:0 0 0 3px #12b76a33}.hero h1{font-family:var(--font-display);letter-spacing:-.035em;font-size:clamp(2.4rem,5.5vw,4rem);line-height:1.02}.hero h1 .accent{color:var(--brand)}.hero h1 .typo{white-space:nowrap;position:relative}.hero h1 .typo:after{content:"";background:var(--amber);z-index:-1;border-radius:999px;height:.14em;position:absolute;bottom:.06em;left:0;right:0}.hero-sub{color:var(--ink-soft);max-width:48ch;margin-top:1.1rem;font-size:1.05rem}.hero-actions{flex-wrap:wrap;gap:.75rem;margin-top:1.6rem;display:flex}.hero-stats{gap:2rem;margin-top:2.4rem;display:flex}.hero-stat b{font-family:var(--font-mono);font-size:1.5rem;display:block}.hero-stat span{color:var(--ink-soft);font-size:.85rem}.hero-kb{border-radius:var(--radius-lg);background:#18202e;flex-direction:column;gap:10px;padding:26px;display:flex;transform:rotate(-2deg);box-shadow:0 24px 60px #18202e59}.hero-kb-row{gap:10px;display:flex}.hero-key{height:46px;font-family:var(--font-mono);color:#c7cfe0;cursor:pointer;-webkit-user-select:none;user-select:none;background:#2a3347;border-radius:9px;flex:1;place-items:center;font-size:.95rem;display:grid}.hero-key.press{animation:.16s keypress}.hero-key.focus{background:var(--amber);color:#18202e;animation:3.2s ease-in-out infinite bob;box-shadow:0 0 0 5px #ffb22440}.hero-key.brand{background:var(--brand);color:#fff}.hero-key.space{flex:3.4}@keyframes bob{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}.section-title{font-family:var(--font-display);letter-spacing:-.02em;font-size:clamp(1.5rem,3vw,2rem)}.section-sub{color:var(--ink-soft);max-width:56ch;margin-top:.4rem}.feature-grid{grid-template-columns:repeat(2,1fr);gap:1rem;margin-top:1.6rem;display:grid}.feature-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);align-items:flex-start;gap:1rem;padding:1.4rem;display:flex}.feature-ic{background:var(--brand-soft);border-radius:12px;flex:none;place-items:center;width:44px;height:44px;font-size:1.25rem;display:grid}.feature-card:nth-child(2) .feature-ic{background:var(--amber-soft)}.feature-card:nth-child(3) .feature-ic{background:var(--soft-mint)}.feature-card:nth-child(4) .feature-ic{background:var(--soft-rose)}.feature-card h3{margin-bottom:.2rem;font-size:1rem}.feature-card p{color:var(--ink-soft);font-size:.9rem}.type-strip{gap:.5rem;margin-top:.9rem;display:flex}.course-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem;display:grid}.course-card{padding:1.4rem;transition:transform .15s,box-shadow .15s;display:block}.course-card:hover{box-shadow:var(--shadow);transform:translateY(-3px)}.course-card-top{justify-content:space-between;align-items:center;display:flex}.course-ic{border-radius:14px;place-items:center;width:48px;height:48px;font-size:1.4rem;display:grid}.course-card.type-finger .course-ic{background:var(--amber-soft)}.course-card.type-english .course-ic{background:var(--brand-soft)}.course-card.type-numbers .course-ic{background:var(--soft-rose)}.course-card.type-symbols .course-ic,.course-card.type-code .course-ic{background:var(--soft-violet)}.course-card.type-numpad .course-ic{background:var(--soft-mint)}.course-card.type-vim .course-ic{background:var(--soft-green)}.course-card.type-pinyin .course-ic{background:var(--soft-violet)}.course-card.type-chinese .course-ic{background:var(--soft-rose)}.course-card.type-vocab .course-ic{background:var(--amber-soft)}.custom-card .custom-ic{background:var(--brand-soft)}.course-card h3{margin-top:1rem;font-size:1.15rem}.course-card p{color:var(--ink-soft);margin-top:.35rem;font-size:.9rem}.course-card .meta{color:var(--ink-faint);justify-content:space-between;align-items:center;margin-top:1rem;font-size:.82rem;display:flex}.course-progress{align-items:center;gap:.6rem;margin-top:.9rem;display:flex}.course-progress-track{background:var(--canvas);border-radius:999px;flex:1;height:6px;overflow:hidden}.course-progress-fill{background:linear-gradient(90deg, var(--brand), var(--amber));border-radius:999px;height:100%;transition:width .4s}.course-progress-label{color:var(--ink-faint);white-space:nowrap;font-size:.72rem;font-weight:600}.course-card .go{color:var(--brand);font-weight:600}.achievement-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:.9rem;display:grid}.achievement-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);align-items:flex-start;gap:.85rem;padding:1.1rem;display:flex}.achievement-card.locked{opacity:.55}.achievement-summary{margin-bottom:1.5rem;padding:1.25rem}.achievement-summary-head{justify-content:space-between;align-items:baseline;margin-bottom:.7rem;display:flex}.achievement-summary-head b{font-size:1.05rem}.achievement-total{color:var(--ink-faint);font-weight:600}.achievement-pct{font-family:var(--font-mono);color:var(--brand);font-weight:700}.achievement-track{background:var(--canvas);border-radius:999px;height:8px;overflow:hidden}.achievement-fill{background:linear-gradient(90deg, var(--brand), var(--amber));border-radius:999px;height:100%;transition:width .4s}.achievement-cat{margin-bottom:1.5rem}.achievement-cat-title{align-items:center;gap:.5rem;font-size:1.05rem;display:flex}.achievement-cat-count{color:var(--ink-faint);margin-left:auto;font-size:.8rem;font-weight:600}.achievement-ic{background:var(--brand-soft);border-radius:12px;flex:none;place-items:center;width:42px;height:42px;font-size:1.5rem;display:grid}.achievement-card.locked .achievement-ic{background:var(--canvas);filter:grayscale()}.achievement-card b{font-size:.95rem}.achievement-card p{color:var(--ink-soft);margin-top:.15rem;font-size:.82rem}.session-grid{grid-template-columns:minmax(0,1fr);align-items:start;gap:1.25rem;display:grid}.session-main{min-width:0}.kb-wrap{position:relative}.hand-overlay{z-index:2;pointer-events:none;opacity:.7;filter:drop-shadow(0 4px 8px #18202e1f);position:absolute;top:0;left:0}.hand-overlay svg{width:100%;height:100%;display:block}.hand-overlay .st0{display:none}.hand-overlay .st1{opacity:.33;fill:#e0e1e2;display:inline}.hand-overlay .st2{fill:none;stroke:#808285;stroke-width:2px;stroke-miterlimit:10;display:inline}.hand-overlay .st3{opacity:.5;display:inline}.hand-overlay .st4{fill:#aeb0b2}.hand-overlay .st5{fill:none;stroke:var(--brand);stroke-width:3px;stroke-linecap:round;stroke-miterlimit:10;display:inline}[data-theme=dark] .hand-overlay .st1{fill:#ccd2dc}[data-theme=dark] .hand-overlay .st2{stroke:#0a101c}[data-theme=dark] .hand-overlay .st4{fill:#6c7890}.practice-wrap{grid-template-columns:1fr;align-items:start;gap:1.5rem;display:grid}.practice-panel{padding:1.75rem}.practice-title{font-family:var(--font-display);letter-spacing:-.02em;margin-bottom:.1rem;font-size:1.4rem}.practice-sub{color:var(--ink-soft);margin-bottom:1.25rem;font-size:.85rem}.stats-bar{border-bottom:1px solid var(--line);flex-wrap:wrap;align-items:center;gap:.5rem;margin-bottom:1.5rem;padding-bottom:1rem;display:flex}.stat{background:var(--canvas);border-radius:999px;align-items:baseline;gap:.4rem;padding:.4rem .95rem;display:flex}.stat b{font-family:var(--font-mono);font-size:1.1rem}.stat span{color:var(--ink-soft);text-transform:uppercase;letter-spacing:.05em;font-size:.78rem}.stats-bar .spacer{flex:1}.combo-badge{font-family:var(--font-mono);color:var(--ink);background:var(--amber-soft);border:1px solid var(--amber);border-radius:999px;align-items:center;gap:.3rem;padding:.35rem .8rem;font-size:.85rem;font-weight:700;animation:.18s combo-pop;display:inline-flex}@keyframes combo-pop{0%{opacity:.4;transform:scale(1.4)}to{opacity:1;transform:scale(1)}}.type-area{font-family:var(--font-mono);overflow-wrap:break-word;min-height:7.5rem;font-size:1.45rem;line-height:2}.type-area.with-hints{flex-wrap:wrap;align-items:flex-end;gap:0 1.2rem;display:flex}.type-area.with-hints .word-cell{flex-direction:column;align-items:center;display:inline-flex}.hanzi-block{align-items:flex-start;display:inline-flex}.hanzi-cell{flex-direction:column;align-items:center;display:inline-flex}.syllable-card{border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--panel);box-shadow:var(--shadow-sm);white-space:nowrap;padding:.1em .5em;display:inline-block}.block-hanzi{color:var(--ink-soft);margin-top:.15rem;font-size:1.1rem;line-height:1.45}.word-hint{color:var(--ink-soft);text-overflow:ellipsis;white-space:nowrap;max-width:14ch;margin-bottom:.15rem;font-size:1rem;line-height:1.45;overflow:hidden}.type-area.with-hints .tok-space,.type-area.with-hints .word-gap{width:.9rem}.type-viewport{position:relative;overflow:hidden}.type-scroll{position:relative}.type-viewport .type-area{min-height:0;font-size:1.75rem}.session-progress{align-items:center;gap:.75rem;margin:.75rem 0 1rem;display:flex}.session-progress-track{background:var(--line);border-radius:999px;flex:1;height:6px;overflow:hidden}.session-progress-fill{background:var(--brand);border-radius:999px;height:100%;transition:width .25s}.session-progress-label{font-family:var(--font-mono);color:var(--ink-soft);text-align:right;min-width:3.2ch;font-size:.8rem;font-weight:600}.tok-word{white-space:pre;display:inline-block}.tok-space{white-space:pre;border-radius:4px;transition:background 80ms}.tok-space.correct{background:var(--soft-green)}.tok-space.corrected{background:var(--amber-soft)}.tok-space.wrong{background:#ef44441f}.tok-space.current{box-shadow:inset 0 -4px 0 -1px var(--brand)}.char{color:var(--ink-faint);border-radius:4px;transition:color 80ms,background 80ms}.char.correct{color:var(--ink);background:var(--soft-green)}.char.corrected{color:var(--ink);background:var(--amber-soft)}.char.wrong{color:var(--bad);background:#ef44441f}.char.current{color:var(--brand);box-shadow:inset 0 -4px 0 -1px var(--brand);animation:1.1s step-end infinite caretblink}.char.ghost{color:#0000}@keyframes caretblink{0%,to{box-shadow:inset 0 -4px 0 -1px var(--brand)}50%{box-shadow:inset 0 -4px 0 -1px #0000}}.type-hint{color:var(--ink-soft);align-items:center;gap:.6rem;margin-top:1.1rem;font-size:.85rem;display:flex}.next-key{border:1px solid var(--line);background:var(--panel);min-width:2.5rem;height:2.5rem;font-family:var(--font-mono);color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft);text-transform:uppercase;border-bottom-width:3px;border-radius:9px;place-items:center;padding:0 .6rem;font-size:1.15rem;font-weight:700;display:inline-grid}.type-hint-text{color:var(--ink-soft)}.shift-badge{letter-spacing:.04em;color:var(--amber-ink);background:var(--amber-soft);white-space:nowrap;border:1px solid #ffb22459;border-radius:999px;align-items:center;gap:.2rem;padding:.18rem .55rem;font-size:.72rem;font-weight:700;display:inline-flex}.finger-chip{color:var(--ink);background:var(--canvas);border-radius:999px;align-items:center;gap:.45rem;padding:.3rem .8rem;font-weight:600;display:inline-flex}.finger-dot{background:var(--kc,var(--brand));border-radius:50%;width:10px;height:10px}.kb{-webkit-user-select:none;user-select:none;max-width:640px;margin-top:1.6rem;margin-left:auto;margin-right:auto}.kb-toolbar{justify-content:flex-end;align-items:center;gap:.5rem;margin-top:1.3rem;display:flex}.layout-switch{background:var(--canvas);border:1px solid var(--line);border-radius:999px;gap:2px;padding:3px;display:inline-flex}.layout-switch button{color:var(--ink-soft);background:0 0;border:0;border-radius:999px;padding:.3rem .7rem;font-size:.78rem;font-weight:600}.layout-switch button.active{background:var(--ink);color:var(--canvas)}.kb-row{justify-content:flex-start;gap:7px;margin-bottom:7px;display:flex}.keycap.tab{font-family:var(--font-body);flex:1.5;font-size:.72rem;font-weight:600}.keycap.caps{font-family:var(--font-body);flex:1.8;font-size:.68rem;font-weight:600}.keycap.backspace{font-family:var(--font-body);flex:2;font-size:.62rem;font-weight:600}.keycap.enter{font-family:var(--font-body);flex:2;font-size:.68rem;font-weight:600}.keycap.mod{font-family:var(--font-body);flex:1.2;font-size:.62rem;font-weight:600}.keycap.space{flex:6}.keycap-dual{flex-direction:column;align-items:center;line-height:1.15;display:flex}.keycap-top{opacity:.7;font-size:.55rem}.keycap-main{font-size:1rem;font-weight:700}.keycap{--kc:var(--line);--kb-bg:color-mix(in srgb, var(--kc) 12%, var(--panel));--kb-bd:color-mix(in srgb, var(--kc) 45%, var(--line));min-width:0;height:48px;font-family:var(--font-mono);color:var(--ink-soft);background:var(--kb-bg);border:1px solid var(--kb-bd);box-shadow:0 3px 0 var(--kb-bd);border-radius:10px;flex:1 1 0;place-items:center;font-size:.95rem;font-weight:600;transition:transform .1s,background .1s,box-shadow .1s,color .1s;display:grid;position:relative}.keycap:after{content:"";background:var(--kc);opacity:.65;border-radius:999px;height:4px;position:absolute;bottom:4px;left:8px;right:8px}.finger-lp{--kc:#ff9f43}.finger-lr{--kc:#f368e0}.finger-lm{--kc:#17c0eb}.finger-li{--kc:#1dd1a1}.finger-ri{--kc:#0abde3}.finger-rm{--kc:#a29bfe}.finger-rr{--kc:#fd79a8}.finger-rp{--kc:#fdcb6e}.finger-th{--kc:#6c5ce7}.kb.kb-style-mono .keycap,.numpad.kb-style-mono .numpad-key{--kc:var(--ink-soft);--kb-bg:color-mix(in srgb, var(--ink) 4%, var(--panel));--kb-bd:var(--line)}.kb.kb-style-mono .keycap:after,.numpad.kb-style-mono .numpad-key:after{background:0 0}.kb.kb-style-vintage .keycap,.numpad.kb-style-vintage .numpad-key{--kc:#8a5a2b;--kb-bg:#f3e8d4;--kb-bd:#cdb58a;color:#4a3b22;border-radius:12px;box-shadow:0 3px #b39b6e}.kb.kb-style-vintage .keycap:after,.numpad.kb-style-vintage .numpad-key:after{background:#8a5a2b59}.kb.kb-style-neon .keycap,.numpad.kb-style-neon .numpad-key{--kc:#00e5ff;--kb-bg:#10151d;--kb-bd:#00e5ff;color:#b9ecf5;box-shadow:0 3px #0d5f70,0 0 10px #00e5ff2e}.kb.kb-style-neon .keycap:after,.numpad.kb-style-neon .numpad-key:after{background:#00e5ffb3}.kb.kb-style-pastel .keycap,.numpad.kb-style-pastel .numpad-key{--kb-bg:color-mix(in srgb, var(--kc) 20%, #fff);--kb-bd:color-mix(in srgb, var(--kc) 42%, #dfe0ea);box-shadow:0 3px 0 color-mix(in srgb, var(--kc) 34%, #d9dae4);border-radius:14px}.keycap.is-active{background:var(--kc);color:#18202e;box-shadow:0 5px 0 #18202e40, inset 0 0 0 2px #fff6, 0 0 18px var(--kc);z-index:1;border-color:#0000;transform:translateY(-2px)scale(1.08)}.keycap.is-wrong{background:var(--bad);color:#fff;border-color:#0000;animation:.35s key-wrong}.keycap.is-wrong:after{background:#ffffff80}@keyframes key-wrong{0%{transform:translate(0)}25%{transform:translate(-4px)}50%{transform:translate(4px)}75%{transform:translate(-2px)}to{transform:translate(0)}}.keycap.is-active:after{background:#ffffff8c}.keycap.shift{letter-spacing:.05em;text-transform:uppercase;max-width:none;font-size:.68rem;font-family:var(--font-body);flex:2.4;font-weight:600}.keycap.shift.shift-on{background:var(--amber);color:#18202e;box-shadow:0 5px 0 #18202e40, inset 0 0 0 2px #ffffff59, 0 0 14px var(--amber);border-color:#0000}.keycap.shift.shift-on:after{background:#ffffff80}.keycap.is-pressed{animation:.16s keypress}@keyframes keypress{0%{transform:translateY(0)}45%{transform:translateY(3px)scale(.96)}to{transform:translateY(0)}}.kb-space-label{font-family:var(--font-body);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);font-size:.7rem}.numpad{-webkit-user-select:none;user-select:none;margin-top:1.6rem;flex-direction:column;gap:7px;max-width:260px;margin-inline:auto;display:flex}.numpad-row{gap:7px;display:flex}.numpad-key{--kc:var(--line);--kb-bg:color-mix(in srgb, var(--kc) 12%, var(--panel));--kb-bd:color-mix(in srgb, var(--kc) 45%, var(--line));height:48px;font-family:var(--font-mono);color:var(--ink-soft);background:var(--kb-bg);border:1px solid var(--kb-bd);box-shadow:0 3px 0 var(--kb-bd);border-radius:10px;flex:1;place-items:center;font-size:.95rem;font-weight:600;transition:transform .1s,background .1s,box-shadow .1s;display:grid;position:relative}.numpad-key:after{content:"";background:var(--kc);opacity:.65;border-radius:999px;height:4px;position:absolute;bottom:4px;left:8px;right:8px}.numpad-key.is-active{background:var(--brand);color:var(--canvas);border-color:#0000;transform:translateY(-2px)scale(1.05);box-shadow:0 5px #2e5bff4d}.numpad-key.is-pressed{animation:.16s keypress}.numpad-enter{font-size:.72rem}.kb-toolbar-note{color:var(--ink-soft);font-size:.78rem}.custom-textarea{resize:vertical;width:100%;font-family:var(--font-mono);color:var(--ink);background:var(--canvas);border:1px solid var(--line);border-radius:var(--radius-sm);padding:.9rem 1rem;font-size:.95rem;line-height:1.7}.custom-textarea:focus{outline:2px solid var(--brand);outline-offset:-1px}.custom-actions{flex-wrap:wrap;justify-content:flex-end;gap:.6rem;margin-top:1rem;display:flex}.lesson-list-continue{justify-content:space-between;align-items:center;gap:1.5rem;margin-bottom:1rem;padding:1.1rem 1.4rem;display:flex}.lesson-list-continue .course-progress{flex:1;margin-top:0}.lesson-list{flex-direction:column;gap:.5rem;display:flex}.lesson-card{text-align:left;border-radius:var(--radius);border:1px solid var(--line);background:var(--panel);width:100%;color:var(--ink-soft);cursor:default;align-items:center;gap:.9rem;padding:.85rem 1.1rem;font-size:.95rem;transition:transform .12s,border-color .12s,background .12s;display:flex}.lesson-card.unlocked{cursor:pointer}.lesson-card.unlocked:hover{border-color:var(--brand);background:var(--brand-soft);transform:translateY(-1px)}.lesson-card.done{opacity:.75}.lesson-card.next .lesson-card-title{color:var(--brand-ink);font-weight:600}.lesson-card-num{width:2.2rem;height:2.2rem;font-family:var(--font-mono);background:var(--canvas);color:var(--ink-soft);border-radius:10px;flex:none;place-items:center;font-size:.85rem;font-weight:700;display:grid}.lesson-card.done .lesson-card-num{background:var(--soft-green);color:var(--good)}.lesson-card.next .lesson-card-num{background:var(--brand-soft);color:var(--brand)}.lesson-card-title{text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}.lesson-card-lock{color:var(--ink-faint);flex:none;font-size:.72rem}.lesson-skip{border:1px solid var(--line);background:var(--canvas);color:var(--ink-soft);cursor:pointer;border-radius:999px;flex:none;padding:.3rem .75rem;font-size:.78rem;font-weight:600;transition:background .12s,color .12s,border-color .12s}.lesson-skip:hover{background:var(--amber-soft);color:var(--amber-ink);border-color:#ffb22466}.unlock-banner{text-align:center;border-radius:var(--radius-sm);flex-direction:column;align-items:center;gap:.4rem;margin-bottom:1.1rem;padding:.9rem 1.1rem;display:flex}.unlock-banner.pending{background:var(--brand-soft);border:1px solid var(--brand);color:var(--brand-ink);font-size:.9rem}.unlock-banner.passed{background:var(--soft-green);color:var(--good);border:1px solid #12b76a66}.unlock-banner.failed{color:var(--bad);background:#ef44441a;border:1px solid #ef44444d}.result-overlay{z-index:50;background:var(--overlay);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);place-items:center;display:grid;position:fixed;inset:0}.result-card{background:var(--panel);border-radius:var(--radius-lg);box-shadow:var(--shadow);text-align:center;width:min(440px,100vw - 2rem);padding:2rem 2.25rem;animation:.25s result-pop}@keyframes result-pop{0%{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}.toast-stack{z-index:80;flex-direction:column;gap:.6rem;display:flex;position:fixed;bottom:1.25rem;right:1.25rem}.toast{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);align-items:center;gap:.75rem;min-width:260px;max-width:320px;padding:.8rem .9rem;animation:.3s toast-in;display:flex}@keyframes toast-in{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.toast-ic{flex:none;font-size:1.6rem}.toast-body{flex-direction:column;line-height:1.3;display:flex}.toast-label{text-transform:uppercase;letter-spacing:.08em;color:var(--brand);font-size:.7rem;font-weight:700}.toast-body b{font-size:.95rem}.toast-desc{color:var(--ink-soft);font-size:.8rem}.toast-close{color:var(--ink-faint);background:0 0;border:0;margin-left:auto;padding:.25rem;font-size:1.1rem;line-height:1}.result-card h2{font-family:var(--font-display);letter-spacing:-.02em;font-size:1.6rem}.result-card .sub{color:var(--ink-soft);margin-top:.2rem;font-size:.9rem}.result-stats{grid-template-columns:repeat(2,1fr);gap:.75rem;margin:1.5rem 0;display:grid}.result-stat{background:var(--canvas);border-radius:var(--radius-sm);padding:.9rem}.result-stat b{font-family:var(--font-mono);font-size:1.4rem;display:block}.result-stat span{text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft);font-size:.76rem}.result-actions{flex-flow:column wrap;justify-content:center;align-items:center;gap:.6rem;display:flex}.pass-banner{border-radius:var(--radius-sm);text-align:center;width:100%;margin-bottom:.9rem;padding:.8rem 1rem}.pass-banner.pass{background:var(--soft-green);border:1px solid #12b76a59}.pass-banner.fail{background:#ef44441a;border:1px solid #ef44444d}.pass-verdict{margin-bottom:.4rem;font-size:1.05rem;font-weight:700}.pass-banner.pass .pass-verdict{color:var(--good)}.pass-banner.fail .pass-verdict{color:var(--bad)}.pass-criteria{flex-wrap:wrap;justify-content:center;gap:.5rem;display:flex}.pass-criterion{color:var(--ink-faint);background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:.15rem .5rem;font-size:.8rem;font-weight:600}.pass-criterion.ok{color:var(--good);border-color:#12b76a66}.pass-hint{color:var(--ink-soft);margin-top:.4rem;font-size:.78rem}.result-actions .kbd-hint{color:var(--ink-faint);flex-basis:100%;margin-top:.4rem;font-size:.8rem}.kbd-hint kbd{border:1px solid var(--line);background:var(--canvas);font-family:var(--font-mono);color:var(--ink-soft);border-bottom-width:2px;border-radius:6px;padding:.1rem .45rem;font-size:.72rem;display:inline-block}.speed-panel{padding:1.75rem}.timer-track{background:var(--canvas);border-radius:999px;height:8px;margin-bottom:1.5rem;overflow:hidden}.timer-fill{background:linear-gradient(90deg, var(--brand), var(--amber));border-radius:999px;height:100%;transition:width .2s linear}.race-toggle{flex-wrap:wrap;align-items:center;gap:1rem;margin-bottom:1.25rem;display:flex}.opponent-pick{color:var(--ink-soft);align-items:center;gap:.5rem;font-size:.85rem;display:flex}.race-bars{flex-direction:column;gap:.5rem;margin-bottom:1.5rem;display:flex}.race-row{align-items:center;gap:.8rem;display:flex}.race-label{width:8.5rem;color:var(--ink-soft);flex:none;font-size:.8rem;font-weight:600}.race-track{flex:1;margin-bottom:0}.race-fill{border-radius:999px;height:100%;transition:width .2s linear}.race-fill.you{background:linear-gradient(90deg, var(--brand), var(--amber))}.race-fill.bot{background:var(--ink-faint);opacity:.7}.race-banner{border-radius:999px;margin-bottom:1rem;padding:.45rem 1.1rem;font-size:.95rem;font-weight:700;display:inline-block}.race-banner.win{background:var(--good);color:var(--canvas)}.race-banner.lose{background:var(--bad);color:var(--canvas)}.speed-custom-toggle{border:1px solid var(--line);background:var(--panel);color:var(--ink-soft);border-radius:999px;align-items:center;gap:.4rem;margin-bottom:1rem;padding:.45rem 1rem;font-size:.85rem;font-weight:600;transition:background .12s,color .12s;display:inline-flex}.speed-custom-toggle:hover{background:var(--canvas);color:var(--ink)}.speed-custom-toggle.active{border-color:var(--brand);color:var(--brand-ink);background:var(--brand-soft)}.speed-custom-on{color:var(--good);font-weight:700}.speed-custom-body{margin-bottom:1.25rem}.speed-custom-actions{flex-wrap:wrap;justify-content:flex-end;gap:.6rem;margin-top:.8rem;display:flex}.mode-tabs{background:var(--canvas);border-radius:999px;gap:2px;margin-bottom:1.25rem;padding:3px;display:inline-flex}.mode-tabs button{color:var(--ink-soft);background:0 0;border:0;border-radius:999px;padding:.4rem 1.1rem;font-size:.9rem;font-weight:600}.mode-tabs button.active{background:var(--ink);color:var(--canvas)}.trend{margin-top:.6rem}.trend svg{width:100%;height:auto;display:block}.stat-cards{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem;margin-bottom:1.5rem;display:grid}.big-stat{padding:1.25rem}.big-stat b{font-family:var(--font-mono);letter-spacing:-.02em;font-size:1.9rem;display:block}.big-stat span{color:var(--ink-soft);font-size:.8rem}.duration-bests{grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:.8rem;margin-top:.9rem;display:grid}.duration-best{padding:1rem}.top-errors{flex-wrap:wrap;justify-content:center;gap:.5rem;margin-top:1rem;display:flex}.error-chip{font-family:var(--font-mono);color:var(--ink);background:#ef44441f;border:1px solid #ef444440;border-radius:999px;align-items:center;gap:.35rem;padding:.3rem .8rem;font-size:.82rem;display:inline-flex}.error-chip b{color:var(--bad);font-size:1rem}.history-table{border-collapse:collapse;width:100%;font-size:.9rem}.history-table th{text-align:left;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-faint);border-bottom:1px solid var(--line);padding:.6rem .8rem;font-size:.74rem}.history-table td{border-bottom:1px solid var(--line);font-family:var(--font-mono);padding:.7rem .8rem}.history-table td.nolabel{font-family:var(--font-body)}.badge{border-radius:999px;padding:.18rem .55rem;font-size:.72rem;font-weight:700;display:inline-block}.badge.lesson{background:var(--brand-soft);color:var(--brand-ink)}.badge.timed{background:var(--amber-soft);color:var(--amber-ink)}.empty-state{text-align:center;padding:3.5rem 1rem}.empty-state .big{margin-bottom:.6rem;font-size:2.6rem}.empty-state p{color:var(--ink-soft);margin-bottom:1.3rem}.vim-term{-webkit-user-select:none;user-select:none;background:#0f1522;border-radius:14px;overflow:hidden;box-shadow:0 24px 60px #18202e59}.vt-titlebar{background:#1a2233;border-bottom:1px solid #ffffff0f;align-items:center;gap:.9rem;padding:.7rem 1rem;display:flex}.vt-dots{gap:6px;display:flex}.vt-dots i{background:#ff5f57;border-radius:50%;width:12px;height:12px}.vt-dots i:nth-child(2){background:#febc2e}.vt-dots i:nth-child(3){background:#28c840}.vt-title{font-family:var(--font-mono);color:#7c8aa5;flex:1;font-size:.85rem}.vt-reset{color:#aeb9d2;background:0 0;border:1px solid #ffffff24;border-radius:8px;padding:.3rem .75rem;font-size:.8rem;transition:background .12s,color .12s}.vt-reset:hover{color:#fff;background:#ffffff14}.vt-body{font-family:var(--font-mono);color:#d7e0f0;min-height:240px;padding:1.25rem 1rem;font-size:1.05rem;line-height:1.7}.vt-row{white-space:pre;display:flex}.vt-gutter{text-align:right;color:#4a5670;-webkit-user-select:none;user-select:none;flex:none;width:2.4rem;padding-right:1rem}.vt-line{white-space:pre}.vt-ch.sel{background:#508cff59}.vt-ch.cur{color:#0f1522;background:#7aa2f7;animation:1.06s step-end infinite vt-blink}@keyframes vt-blink{0%,to{color:#0f1522;background:#7aa2f7}50%{color:#d7e0f0;background:0 0}}.vt-input{color:#f0b429}.vt-caret{vertical-align:text-bottom;background:#f0b429;width:.6em;height:1.1em;animation:1.06s step-end infinite vt-blink;display:inline-block}.vt-status{font-family:var(--font-mono);background:#1a2233;border-top:1px solid #ffffff0f;align-items:center;gap:1rem;padding:.5rem 1rem;font-size:.85rem;display:flex}.vt-mode{color:#f0b429;white-space:nowrap;font-weight:600}.vt-pending{color:#9fb0cf;font-weight:400}.vt-msg{color:#28c840;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.vt-msg.err{color:#ff6b6b}.vt-help{color:#5d6b86;text-align:center;background:#0b101c;border-top:1px solid #ffffff0d;padding:.6rem 1rem;font-size:.8rem}.vt-back{margin-top:1.25rem}.practice-main-col{flex-direction:column;gap:1rem;min-width:0;display:flex}.vim-term-link{align-self:flex-start}.nav-icon-btn{border:1px solid var(--line);background:var(--panel);border-radius:999px;place-items:center;width:34px;height:34px;margin-right:.5rem;font-size:.95rem;line-height:1;transition:background .12s,transform .12s;display:grid}.nav-icon-btn:hover{background:var(--canvas);transform:rotate(18deg)}.settings-panel{padding:1.75rem}.settings-row{justify-content:space-between;align-items:center;gap:1.5rem;padding:.9rem 0;display:flex}.settings-row+.settings-row{border-top:1px solid var(--line)}.settings-section{text-transform:uppercase;letter-spacing:.08em;color:var(--ink-faint);margin-bottom:.2rem;font-size:.8rem}.settings-value{color:var(--ink);align-items:center;gap:.5rem;font-size:.92rem;font-weight:500;display:inline-flex}.settings-label{color:var(--ink);font-size:.95rem;font-weight:600}.settings-control{flex:none}.seg-group{background:var(--canvas);border:1px solid var(--line);border-radius:999px;gap:2px;padding:3px;display:inline-flex}.seg-group button{color:var(--ink-soft);background:0 0;border:0;border-radius:999px;padding:.38rem .85rem;font-size:.82rem;font-weight:600;transition:background .12s,color .12s}.seg-group button.active{background:var(--ink);color:var(--canvas)}.toggle{border:1px solid var(--line);background:var(--canvas);border-radius:999px;width:46px;height:26px;transition:background .15s;position:relative}.toggle.on{background:var(--brand);border-color:#0000}.toggle-knob{background:#fff;border-radius:50%;width:20px;height:20px;transition:transform .15s;position:absolute;top:2px;left:2px;box-shadow:0 1px 3px #18202e4d}.toggle.on .toggle-knob{transform:translate(20px)}.modal-overlay{z-index:100;background:var(--overlay);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);justify-content:center;align-items:center;padding:1rem;animation:.25s onboard-fade;display:flex;position:fixed;inset:0}.onboard-card{width:100%;max-width:840px;max-height:calc(100vh - 2rem);padding:2rem 2.2rem 2.2rem;overflow-y:auto}.onboard-head{text-align:center;margin-bottom:1.4rem}.onboard-head .eyebrow{color:var(--brand)}.onboard-head h1{font-family:var(--font-display);margin:.2rem 0 .4rem;font-size:2rem}.onboard-head p{color:var(--ink-soft);margin:0;font-size:.92rem}.onboard-card .settings-panel{padding:.25rem 0}.onboard-start{width:100%;margin-top:1.6rem;padding:.85rem;font-size:1rem}.custom-modal{flex-direction:column;gap:1rem;width:100%;max-width:360px;padding:1.8rem;display:flex}.custom-modal-head h3{font-family:var(--font-display);margin:0 0 .3rem;font-size:1.25rem}.custom-modal-head p{color:var(--ink-soft);margin:0;font-size:.88rem}.custom-modal-input{width:100%;font-family:var(--font-mono);text-align:center;color:var(--ink);background:var(--canvas);border:1px solid var(--line);border-radius:12px;outline:none;padding:.75rem;font-size:1.6rem;font-weight:700}.custom-modal-input:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}.custom-modal-input[type=number]{appearance:textfield}.custom-modal-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.custom-modal-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.custom-modal-actions{gap:.6rem;display:flex}.custom-modal-actions .btn{flex:1}@keyframes onboard-fade{0%{opacity:0}to{opacity:1}}.game-panel{padding:1.5rem}.game-hud{justify-content:space-between;gap:.9rem;margin-bottom:1rem;display:flex}.game-stat{text-align:center;flex:1}.game-stat b{font-family:var(--font-mono);font-size:1.4rem;display:block}.game-stat span{text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft);font-size:.72rem}.game-pause{border:1px solid var(--line);background:var(--canvas);width:40px;height:40px;color:var(--ink-soft);border-radius:10px;font-size:.9rem;transition:background .12s,color .12s}.game-pause:hover{background:var(--brand-soft);color:var(--brand-ink)}.game-field{border-radius:var(--radius-sm);background:var(--canvas);border:1px solid var(--line);height:420px;position:relative;overflow:hidden}.game-word{font-family:var(--font-mono);color:var(--ink-soft);white-space:nowrap;font-size:1.25rem;font-weight:600;position:absolute;transform:translate(-50%)}.game-word.target{color:var(--ink)}.game-word .typed{color:var(--good)}.game-idle,.game-over,.game-paused{text-align:center;background:var(--overlay);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);place-content:center;justify-items:center;gap:.6rem;padding:1rem;display:grid;position:absolute;inset:0}.game-idle .big,.game-over .big,.game-paused .big{font-size:2.6rem}.game-over h2,.game-paused h2{font-family:var(--font-display);font-size:1.5rem}.game-paused-hint{color:var(--ink-faint);font-size:.8rem}.game-over p{color:var(--ink-soft)}.game-new-best{font-weight:700;color:var(--amber)!important}.game-buffer{font-family:var(--font-mono);color:var(--brand);letter-spacing:.08em;font-size:1.4rem;font-weight:700;position:absolute;bottom:.9rem;left:50%;transform:translate(-50%)}.game-combo{text-align:center;font-weight:700;font-family:var(--font-mono);color:var(--amber);margin-top:.8rem;animation:.25s combo-pop}.games-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem;display:grid}.game-card{box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--line) 50%, transparent), var(--shadow-sm);border-color:#0000;flex-direction:column;gap:.4rem;padding:1rem;transition:transform .15s,box-shadow .15s;display:flex}.game-card:hover{box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--line) 60%, transparent), 0 6px 20px #18202e1a;transform:translateY(-2px)}.game-card-top{justify-content:space-between;align-items:center;display:flex}.game-card-top .go{color:var(--brand);font-size:.78rem;font-weight:600}.game-card h3{font-family:var(--font-display);margin:.2rem 0 0;font-size:1.15rem}.game-card p{color:var(--ink-soft);flex:1;margin:0;font-size:.88rem}.game-card-best{color:var(--ink-faint);font-size:.78rem}.game-card-best b{color:var(--ink);font-family:var(--font-mono)}.game-burst{pointer-events:none;font-size:1.6rem;animation:.45s ease-out forwards burst-pop;position:absolute;transform:translate(-50%,-50%)}@keyframes burst-pop{0%{opacity:1;transform:translate(-50%,-50%)scale(.4)}to{opacity:0;transform:translate(-50%,-50%)scale(1.5)}}.game-target{font-family:var(--font-mono);font-weight:600;font-size:min(1.05rem, calc(127px / var(--len,4)));white-space:nowrap;box-sizing:border-box;color:var(--ink-soft);background:var(--panel);border:1px solid var(--line);width:92px;height:92px;box-shadow:var(--shadow-sm);border-radius:50%;flex-direction:row;justify-content:center;align-items:center;gap:1px;padding:0 6px;display:flex;position:absolute;overflow:hidden;transform:translate(-50%,-50%)}.game-target.target{color:var(--ink);border-color:var(--brand)}.game-target .typed{color:var(--good)}.game-target-fuse{background:var(--amber);transform-origin:0;border-radius:99px;width:56px;height:4px;animation-name:fuse-burn;animation-timing-function:linear;animation-fill-mode:forwards;position:absolute;bottom:-7px;left:50%;transform:translate(-50%)scaleX(1)}@keyframes fuse-burn{0%{transform:translate(-50%)scaleX(1)}to{transform:translate(-50%)scaleX(0)}}.zombie-wall{opacity:.6;font-size:2rem;position:absolute;top:50%;right:2%;transform:translateY(-50%)}.game-zombie{flex-direction:column;align-items:center;gap:.1rem;transition:color .1s;display:flex;position:absolute;top:38%;transform:translate(-50%)}.zombie-word{font-family:var(--font-mono);color:var(--ink-soft);background:var(--panel);border:1px solid var(--line);white-space:nowrap;border-radius:8px;padding:.15rem .45rem;font-size:1.05rem;font-weight:700}.game-zombie.target .zombie-word{color:var(--ink);border-color:var(--danger)}.game-zombie .typed{color:var(--good)}.zombie-emoji{filter:saturate(1.1);font-size:1.9rem}.memory-show,.memory-type{text-align:center;place-content:center;justify-items:center;gap:1.2rem;padding:1rem;display:grid;position:absolute;inset:0}.memory-show-label,.memory-type-label{text-transform:uppercase;letter-spacing:.08em;color:var(--ink-faint);font-size:.85rem}.memory-show-words{flex-wrap:wrap;justify-content:center;gap:.6rem;display:flex}.memory-show-word{font-family:var(--font-mono);background:var(--brand-soft);color:var(--brand-ink);border-radius:10px;padding:.35rem .75rem;font-size:1.5rem;font-weight:700;animation:.5s memory-flash}@keyframes memory-flash{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.memory-slots{flex-wrap:wrap;justify-content:center;gap:.45rem;display:flex}.memory-slot{width:2.2rem;height:2.2rem;font-family:var(--font-mono);color:var(--ink-faint);border:2px dashed var(--line);border-radius:8px;place-items:center;font-size:1.2rem;font-weight:700;display:grid}.memory-slot.typed{border-style:solid;border-color:var(--brand);color:var(--brand-ink);background:var(--brand-soft)}.memory-slot.wrong{border-color:var(--danger);color:var(--danger)}.snake-grid{background-image:linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);background-size:4% 5.55556%,4% 5.55556%;position:absolute;inset:0}.snake-seg{background:var(--good);border-radius:4px;width:4%;height:5.55556%;position:absolute;transform:translate(-50%,-50%)}.snake-seg.head{background:var(--brand);border-radius:5px}.snake-food{pointer-events:none;flex-direction:column;align-items:center;gap:.1rem;display:flex;position:absolute;transform:translate(-50%,-50%)}.snake-food-emoji{font-size:1.4rem}.snake-food-word{font-family:var(--font-mono);color:var(--ink-soft);background:var(--panel);border:1px solid var(--line);white-space:nowrap;border-radius:6px;padding:.05rem .3rem;font-size:.82rem;font-weight:700}.snake-food-word .typed{color:var(--good)}.rhythm-field{position:absolute;inset:0}.rhythm-lane{border-left:1px solid var(--line);width:25%;position:absolute;top:0;bottom:0}.rhythm-lane:last-of-type{border-right:1px solid var(--line)}.rhythm-judge{background:var(--amber);opacity:.7;height:3px;position:absolute;top:86%;left:0;right:0}.rhythm-tile{width:22%;height:9%;font-family:var(--font-mono);color:#fff;background:var(--brand);box-shadow:var(--shadow-sm);border-radius:10px;place-items:center;font-size:1.3rem;font-weight:800;display:grid;position:absolute;transform:translate(-50%,-50%)}.rhythm-tile.in-zone{background:var(--good);animation:.16s tile-pulse}@keyframes tile-pulse{50%{transform:translate(-50%,-50%)scale(1.08)}}.rhythm-spark{pointer-events:none;font-size:1.4rem;animation:.4s ease-out forwards spark-up;position:absolute;top:86%;transform:translate(-50%,-50%)}@keyframes spark-up{0%{opacity:1;transform:translate(-50%,-50%)translateY(0)}to{opacity:0;transform:translate(-50%,-50%)translateY(-26px)}}.login-wrap{place-items:center;display:grid}.auth-card{text-align:center;width:min(420px,100%);margin:0 auto;padding:2rem}.auth-card .big{margin-bottom:.4rem;font-size:2.4rem}.auth-title{font-family:var(--font-display);letter-spacing:-.02em;margin-bottom:.3rem;font-size:1.5rem}.auth-tabs{margin:1.1rem 0}.auth-form{text-align:left;flex-direction:column;gap:.9rem;display:flex}.auth-field{color:var(--ink-soft);flex-direction:column;gap:.35rem;font-size:.82rem;font-weight:600;display:flex}.auth-field input{font:inherit;color:var(--ink);background:var(--canvas);border:1px solid var(--line);border-radius:var(--radius-sm);padding:.65rem .85rem;font-weight:400}.auth-field input:focus{outline:2px solid var(--brand);outline-offset:-1px}.auth-pw{display:block;position:relative}.auth-pw input{width:100%}.auth-pw-toggle{cursor:pointer;opacity:.75;background:0 0;border:0;padding:.35rem .5rem;font-size:1rem;position:absolute;top:50%;right:4px;transform:translateY(-50%)}.auth-pw-toggle:hover{opacity:1}.auth-avail{font-size:.78rem;font-style:normal;font-weight:600}.auth-avail.ok{color:var(--good)}.auth-avail.bad{color:var(--bad)}.auth-notice{color:var(--bad);text-align:center;font-size:.85rem}.auth-submit{width:100%;margin-top:.3rem}.auth-divider{color:var(--ink-faint);align-items:center;gap:.8rem;margin:1.2rem 0 .8rem;font-size:.8rem;display:flex}.auth-divider:before,.auth-divider:after{content:"";background:var(--line);flex:1;height:1px}.auth-oauth{justify-content:center;gap:.6rem;display:flex}.auth-oauth .btn{flex:1}.auth-code{color:var(--ink-soft);background:var(--canvas);border-radius:var(--radius-sm);margin:.75rem 0;padding:.5rem .75rem;font-size:.85rem}.auth-code code{font-family:var(--font-mono);color:var(--brand-ink)}.auth-actions{flex-wrap:wrap;justify-content:center;gap:.6rem;margin-top:1rem;display:flex}.user-chip{background:var(--panel);border:1px solid var(--line);cursor:pointer;border-radius:999px;flex:none;align-items:center;margin-right:.25rem;padding:2px;font-size:.85rem;font-weight:600;display:inline-flex}.user-caret{color:var(--ink-faint);font-size:.6rem}.user-menu{position:relative}.user-dropdown{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);min-width:200px;box-shadow:var(--shadow);z-index:30;padding:.5rem;position:absolute;top:calc(100% + 6px);right:0}.user-dropdown-head{border-bottom:1px solid var(--line);flex-direction:column;gap:.1rem;margin-bottom:.4rem;padding:.4rem .6rem .6rem;display:flex}.user-dropdown-head b{font-size:.92rem}.user-dropdown-head span{color:var(--ink-faint);text-overflow:ellipsis;white-space:nowrap;font-size:.75rem;overflow:hidden}.user-dropdown a,.user-dropdown button{text-align:left;border-radius:var(--radius-sm);width:100%;color:var(--ink-soft);cursor:pointer;background:0 0;border:0;align-items:center;gap:.5rem;padding:.55rem .6rem;font-size:.88rem;display:flex}.user-dropdown a:hover,.user-dropdown button:hover{background:var(--canvas);color:var(--ink)}.user-avatar{background:var(--brand);width:26px;height:26px;color:var(--canvas);border-radius:50%;place-items:center;font-size:.8rem;display:grid}.user-name{text-overflow:ellipsis;white-space:nowrap;min-width:0;max-width:18ch;font-weight:600;overflow:hidden}.login-btn{text-decoration:none}.race-room{flex-direction:column;gap:1rem;display:flex}.race-top{justify-content:space-between;align-items:center;gap:1rem;display:flex}.race-code{color:var(--ink-soft);font-size:.95rem;font-weight:600}.race-code b{font-family:var(--font-mono);color:var(--brand-ink)}.race-players{flex-direction:column;gap:.5rem;display:flex}.race-player{align-items:center;gap:.8rem;display:flex}.race-player.me .race-player-name{color:var(--brand-ink);font-weight:700}.race-player-name{width:9rem;color:var(--ink-soft);text-overflow:ellipsis;white-space:nowrap;flex:none;align-items:center;gap:.4rem;font-size:.85rem;display:inline-flex;overflow:hidden}.race-me{color:var(--brand);background:var(--brand-soft);border-radius:999px;padding:.05rem .4rem;font-size:.65rem;font-style:normal;font-weight:700}.race-track{margin-bottom:0}.race-player-meta{text-align:right;width:4rem;font-family:var(--font-mono);color:var(--ink-faint);flex:none;font-size:.8rem}.race-player-meta.ready{color:var(--good);font-weight:700}.race-waiting{text-align:center;padding:2.5rem 1rem}.race-waiting p:first-child{color:var(--ink-soft);margin-bottom:1rem}.race-rooms{text-align:left;border-top:1px solid var(--line);margin-top:1.4rem;padding-top:1.2rem}.race-rooms-head{justify-content:space-between;align-items:center;margin-bottom:.7rem;display:flex}.race-rooms-head h3{color:var(--ink);font-size:.95rem}.race-rooms-warn{color:var(--amber-ink);background:var(--amber-soft);border-radius:var(--radius-sm);border:1px solid #ffb22459;padding:.6rem .8rem;font-size:.85rem}.race-rooms-list{flex-direction:column;gap:.45rem;margin:0;padding:0;list-style:none;display:flex}.race-rooms-list li{border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--canvas);align-items:center;gap:.8rem;padding:.6rem .9rem;display:flex}.race-rooms-code{font-family:var(--font-mono);color:var(--brand-ink);flex:1;font-weight:700}.race-rooms-players{color:var(--ink-soft);font-size:.85rem}.race-chat{padding:1.1rem 1.2rem}.race-chat-title{text-transform:uppercase;letter-spacing:.07em;color:var(--ink-faint);margin-bottom:.6rem;font-size:.85rem}.race-chat-list{flex-direction:column;gap:.3rem;max-height:180px;margin-bottom:.7rem;display:flex;overflow-y:auto}.race-chat-msg{color:var(--ink);align-items:baseline;gap:.5rem;font-size:.88rem;display:flex}.race-chat-msg b{color:var(--ink-soft);flex:none;font-weight:600}.race-chat-msg.me b{color:var(--brand-ink)}.race-chat-msg span{overflow-wrap:anywhere}.race-chat-form{gap:.5rem;display:flex}.race-chat-form input{font:inherit;color:var(--ink);background:var(--canvas);border:1px solid var(--line);border-radius:var(--radius-sm);flex:1;padding:.5rem .8rem}.race-chat-form input:focus{outline:2px solid var(--brand);outline-offset:-1px}.leaderboard-tabs{background:var(--canvas);border:1px solid var(--line);border-radius:999px;flex-wrap:wrap;gap:2px;margin-bottom:1rem;padding:3px;display:flex}.leaderboard-tabs button{color:var(--ink-soft);cursor:pointer;background:0 0;border:0;border-radius:999px;padding:.4rem 1rem;font-size:.88rem;font-weight:600}.leaderboard-tabs button.active{background:var(--ink);color:var(--canvas)}.leaderboard-guest{color:var(--ink-soft);margin-bottom:.75rem;font-size:.88rem}.leaderboard-link{color:var(--brand);font-weight:600}.leaderboard-table td:first-child{width:3rem}.leaderboard-table tr.mine td{background:var(--brand-soft)}.rank{font-family:var(--font-mono);color:var(--ink-soft);font-weight:700}.leaderboard-me{color:var(--brand);background:var(--brand-soft);border-radius:999px;margin-left:.4rem;padding:.05rem .4rem;font-size:.65rem;font-style:normal;font-weight:700}.leaderboard-value{font-family:var(--font-mono);font-size:.95rem}.site-footer{border-top:1px solid var(--line);margin-top:2rem;padding:1.8rem 0 2.4rem}.site-footer .container{color:var(--ink-faint);justify-content:space-between;align-items:center;gap:1rem;font-size:.85rem;display:flex}body{overflow-x:hidden}@media (width<=1500px){.header-actions .sound-toggle{display:none}}@media (width<=1450px){.header-actions .lang-switch{display:none}}@media (width<=900px){.hero .container{grid-template-columns:1fr}.hero-kb{display:none}.practice-wrap,.session-grid{grid-template-columns:1fr}}@media (width<=720px){.nav,.nav-spacer,.header-actions{display:none}.nav-burger{display:grid}.site-header .container{gap:.75rem}.mobile-nav{display:block}.mobile-nav:not(.open){display:none}.mobile-nav.open{background:var(--panel);border-bottom:1px solid var(--line);box-shadow:var(--shadow);z-index:40;max-height:calc(100vh - 62px);position:absolute;top:100%;left:0;right:0;overflow-y:auto}.mobile-links{flex-direction:column;padding:.5rem 1rem 1rem;display:flex}.mobile-links a{border-radius:var(--radius-sm);color:var(--ink-soft);align-items:center;gap:.6rem;padding:.75rem .8rem;font-size:.98rem;font-weight:500;display:flex}.mobile-links a.active{background:var(--brand-soft);color:var(--brand-ink);font-weight:600}.mobile-divider{background:var(--line);height:1px;margin:.4rem 0}.mobile-account{align-items:center;gap:.6rem;display:flex}.mobile-actions{flex-wrap:wrap;align-items:center;gap:.6rem;padding:.6rem .8rem;display:flex}}@media (width<=640px){.logo{font-size:1rem}.feature-grid{grid-template-columns:1fr}.hero{padding-top:2.5rem}.hero-stats{gap:1.2rem}.page-head{padding-top:1.25rem}.page-head h1{font-size:1.6rem}.type-area{font-size:1.15rem}.type-viewport .type-area{font-size:1.35rem}.keycap{border-radius:8px;height:40px;font-size:.78rem}.kb-row{gap:4px}.speed-panel,.settings-panel,.result-card{padding:1.25rem 1.1rem}.result-card{width:min(92vw,440px)}.course-card{padding:1.1rem}.race-player-name,.race-label{width:6.5rem}.race-player-meta{width:3.4rem}.history-table th,.history-table td{padding:.55rem .5rem}.footer .container{text-align:center;flex-direction:column;gap:.2rem}.toast-stack{align-items:stretch;left:.75rem;right:.75rem}.toast{min-width:0;max-width:none}}@media (width<=480px){.game-field{height:340px}.game-hud .game-stat b{font-size:1.1rem}.settings-row{flex-direction:column;align-items:flex-start;gap:.5rem}.type-area.with-hints,.type-area.with-hanzi{font-size:1rem}.word-hint{max-width:10ch}.hero h1{font-size:2rem}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}