:root{color:#0f172a;background:#f8fafc;font-family:system-ui,Segoe UI,Roboto,Arial,sans-serif;font-size:18px}body{margin:0}.app{box-sizing:border-box;max-width:44rem;min-height:100vh;margin:0 auto;padding:1rem}.app-header{justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1.5rem;display:flex}.brand{flex-direction:column;display:flex}.brand-name{color:#2563eb;font-size:1.8rem;font-weight:700}.tagline{color:#334155;margin:0}.center-text{text-align:center}.panel{background:#fff;border:1px solid #cbd5e1;border-radius:12px;margin-bottom:1rem;padding:1.25rem}.panel.center{text-align:center}.panel.danger{border-color:#b91c1c}.title{color:#1d4ed8;margin:0 0 .5rem;font-size:1.6rem}h2{margin:1rem 0 .25rem;font-size:1.15rem}.big{font-size:1.3rem}.form{flex-direction:column;gap:.9rem;display:flex}label{flex-direction:column;gap:.25rem;font-weight:600;display:flex}label small{color:#475569;font-weight:400}label.check{flex-direction:row;align-items:flex-start;gap:.6rem;margin:.75rem 0;font-weight:400}label.check input{flex:none;width:1.3rem;height:1.3rem;margin-top:.2rem}input:not([type=checkbox]),select{color:inherit;background:#fff;border:2px solid #94a3b8;border-radius:8px;padding:.6rem;font-size:1rem}.pin-input{text-align:center;letter-spacing:.5rem;align-self:center;max-width:10rem;font-size:2rem}button{color:#1d4ed8;cursor:pointer;background:#fff;border:2px solid #2563eb;border-radius:8px;padding:.6rem 1.1rem;font-size:1rem}button.primary{color:#fff;background:#1d4ed8}button.danger-button{color:#b91c1c;border-color:#b91c1c}button:disabled{opacity:.5;cursor:not-allowed}button:focus-visible,input:focus-visible,select:focus-visible{outline-offset:2px;outline:3px solid #f59e0b}.lang-switch{flex:none}.row{flex-wrap:wrap;gap:.6rem;display:flex}.panel.center .row{justify-content:center}.footer-row{margin-top:1rem}.tabs{gap:.5rem;margin:1rem 0;display:flex}.tab.active{color:#fff;background:#1d4ed8}.error{color:#b91c1c;margin:0}.notice{color:#854d0e;background:#fef9c3;border-radius:8px;margin:0;padding:.5rem .75rem}.consent-item p{margin:0}.profile-list,.who-list{flex-direction:column;gap:.75rem;margin:0 0 1rem;padding:0;list-style:none;display:flex}.profile-card{border:1px solid #cbd5e1;border-radius:10px;flex-direction:column;gap:.6rem;padding:.75rem;display:flex}.meta{color:#475569;font-size:.9rem}.who-button{width:100%;padding:1rem;font-size:1.4rem}.mode-box{border:1px solid #cbd5e1;border-radius:10px;margin:0 0 1rem;padding:.5rem .9rem}.mode-box legend{padding:0 .3rem;font-weight:600}.mode-box label.check{margin:.3rem 0}.typing-box{cursor:text;-webkit-user-select:none;user-select:none;background:#f1f5f9;border:3px solid #94a3b8;border-radius:12px;margin:0 0 .5rem;padding:1.25rem}.typing-box:focus{border-color:#2563eb;outline:none}.typing-box:not(:focus) .typing-text{opacity:.6}.typing-text{white-space:pre-wrap;word-break:break-word;margin:0;font-family:ui-monospace,Cascadia Mono,Consolas,monospace;font-size:1.7rem;line-height:2.4rem}.ch{border-radius:3px}.ch.pending{color:#475569}.ch.correct{color:#15803d}.ch.wrong{color:#b91c1c;text-underline-offset:4px;background:#fee2e2;font-weight:700;-webkit-text-decoration:underline wavy #b91c1c;text-decoration:underline wavy #b91c1c;text-decoration-thickness:2px}.ch.cursor{background:#dbeafe;box-shadow:inset 0 -4px #2563eb}.ch.cursor.wrong{background:#fecaca}.stats{grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:.75rem;margin:1rem 0;display:grid}.stats dt{color:#475569;font-size:.85rem}.stats dd{color:#1d4ed8;margin:0;font-size:2rem;font-weight:700}.mistakes{flex-wrap:wrap;justify-content:center;gap:.5rem 1.2rem;padding:0;list-style:none;display:flex}kbd{background:#fff;border:2px solid #94a3b8;border-bottom-width:4px;border-radius:6px;padding:.1rem .5rem;font-family:ui-monospace,Consolas,monospace}:root{--f-l-pinky:#fca5a5;--f-l-ring:#fdba74;--f-l-middle:#fde047;--f-l-index:#86efac;--f-thumb:#d4d4d8;--f-r-index:#67e8f9;--f-r-middle:#93c5fd;--f-r-ring:#c4b5fd;--f-r-pinky:#f9a8d4}.finger-l-pinky{--fc:var(--f-l-pinky)}.finger-l-ring{--fc:var(--f-l-ring)}.finger-l-middle{--fc:var(--f-l-middle)}.finger-l-index{--fc:var(--f-l-index)}.finger-thumb{--fc:var(--f-thumb)}.finger-r-index{--fc:var(--f-r-index)}.finger-r-middle{--fc:var(--f-r-middle)}.finger-r-ring{--fc:var(--f-r-ring)}.finger-r-pinky{--fc:var(--f-r-pinky)}.kb-panel{margin:.75rem 0}.kb-caption{min-height:1.6rem;margin:0 0 .4rem;font-weight:600}.vk{-webkit-user-select:none;user-select:none;flex-direction:column;gap:4px;display:flex}.vk-row{gap:4px;display:flex}.vk-key{box-sizing:border-box;background:color-mix(in srgb, var(--fc) 55%, white);color:#0f172a;border:2px solid #64748b;border-radius:6px;flex-basis:0;justify-content:center;align-items:center;min-width:0;height:2.5rem;font-family:ui-monospace,Consolas,monospace;font-size:.85rem;display:flex;position:relative}.vk-symbol{font-size:.6rem;line-height:1;position:absolute;top:0;right:3px}.vk-key.home:after{content:"";background:#0f172a;border-radius:2px;height:4px;position:absolute;bottom:4px;left:30%;right:30%}.vk-key.active{background:var(--fc);outline-offset:1px;z-index:1;border-color:#0f172a;outline:3px solid #f59e0b;font-weight:700}@media (prefers-reduced-motion:no-preference){.vk-key.active{animation:.9s ease-in-out infinite vk-pulse}}@keyframes vk-pulse{50%{transform:translateY(-3px)}}.vk[data-fade=dim] .vk-key:not(.active){border-color:var(--fc);background:#fff;border-width:3px}.vk[data-fade=dim] .vk-key:not(.active) .vk-label{visibility:hidden}.vk[data-fade=next] .vk-key:not(.active){background:#f8fafc;border-color:#e2e8f0}.vk[data-fade=next] .vk-key:not(.active) .vk-label,.vk[data-fade=next] .vk-key:not(.active) .vk-symbol{visibility:hidden}.vk[data-fade=next] .vk-key.home:not(.active):after{background:#cbd5e1}.hands{width:100%;max-height:11rem;margin:.5rem auto 0;display:block}.hands .palm{fill:#e2e8f0;stroke:#94a3b8;stroke-width:2px}.hand-finger rect{fill:color-mix(in srgb, var(--fc) 45%, white);stroke:#64748b;stroke-width:2px}.hand-finger text{fill:#0f172a;font-size:18px}.hand-finger.main rect{fill:var(--fc);stroke:#0f172a;stroke-width:5px}.hand-finger.shift rect{fill:var(--fc);stroke:#0f172a;stroke-width:3px;stroke-dasharray:7 4}.kb-panel[data-fade=next] .hand-finger.idle rect{fill:#f1f5f9;stroke:#cbd5e1}.kb-panel[data-fade=next] .hand-finger.idle text{visibility:hidden}.header-tools{align-items:center;gap:.6rem;display:flex}label.contrast-switch{flex-direction:row;align-items:center;gap:.4rem;font-weight:400}.stat-bar{align-items:center;gap:.6rem;margin:.3rem 0;display:flex}.stat-bar .name{text-align:left;flex:0 0 9rem}.stat-bar .bar{background:#e2e8f0;border:2px solid #64748b;border-radius:6px;flex:1;height:1rem;overflow:hidden}.stat-bar .fill{background:#b91c1c;height:100%;display:block}.stat-bar .num{text-align:right;flex:0 0 8rem;font-size:.9rem}:root[data-contrast=high]{color:#fff;--f-l-pinky:#ff5252;--f-l-ring:#ff9800;--f-l-middle:#ffeb3b;--f-l-index:#00e676;--f-thumb:#e0e0e0;--f-r-index:#00e5ff;--f-r-middle:#448aff;--f-r-ring:#b388ff;--f-r-pinky:#ff80ab;background:#000}[data-contrast=high] body{background:#000}[data-contrast=high] .brand-name,[data-contrast=high] .title,[data-contrast=high] .stats dd{color:#ffeb3b}[data-contrast=high] .tagline,[data-contrast=high] .meta,[data-contrast=high] label small,[data-contrast=high] .stats dt{color:#fff}[data-contrast=high] .panel,[data-contrast=high] .profile-card,[data-contrast=high] .mode-box{background:#000;border:3px solid #fff}[data-contrast=high] .panel.danger{border-color:#ff6b6b}[data-contrast=high] input:not([type=checkbox]):not([type=radio]),[data-contrast=high] select,[data-contrast=high] button{color:#fff;background:#000;border:3px solid #fff}[data-contrast=high] button.primary,[data-contrast=high] .tab.active{color:#000;background:#ffeb3b;border-color:#fff;font-weight:700}[data-contrast=high] button.danger-button{color:#ff6b6b;border-color:#ff6b6b}[data-contrast=high] button:focus-visible,[data-contrast=high] input:focus-visible,[data-contrast=high] select:focus-visible{outline-offset:3px;outline:4px solid #00e5ff}[data-contrast=high] .error{color:#ff8a80}[data-contrast=high] .notice{color:#ffeb3b;background:#000;border:2px solid #ffeb3b}[data-contrast=high] kbd{color:#fff;background:#000;border-color:#fff}[data-contrast=high] .typing-box{background:#000;border:4px solid #fff}[data-contrast=high] .typing-box:focus{border-color:#00e5ff}[data-contrast=high] .typing-box:not(:focus) .typing-text{opacity:1}[data-contrast=high] .ch.pending{color:#fff}[data-contrast=high] .ch.correct{color:#00ff7f}[data-contrast=high] .ch.wrong{color:#ff8a80;background:#3b0000;text-decoration-color:#ff8a80}[data-contrast=high] .ch.cursor{background:#03c;box-shadow:inset 0 -5px #00e5ff}[data-contrast=high] .ch.cursor.wrong{background:#7a0000}[data-contrast=high] .vk-key{color:#fff;border:2px solid #fff;border-bottom:7px solid var(--fc);background:#000;font-size:.95rem}[data-contrast=high] .vk-symbol{color:var(--fc);font-size:.75rem}[data-contrast=high] .vk-key.home:after{background:#fff}[data-contrast=high] .vk-key.active{color:#000;border-color:#fff;border-bottom-color:var(--fc);background:#ffeb3b;outline:4px solid #fff}[data-contrast=high] .vk-key.active .vk-symbol{color:#000}[data-contrast=high] .vk[data-fade=dim] .vk-key:not(.active){border-width:2px;border-color:#fff;border-bottom:7px solid var(--fc);background:#000}[data-contrast=high] .vk[data-fade=next] .vk-key:not(.active){background:#000;border-color:#777 #777 #444;border-bottom-style:solid;border-bottom-width:7px}[data-contrast=high] .hands .palm{fill:#000;stroke:#fff;stroke-width:3px}[data-contrast=high] .hand-finger rect{fill:#000;stroke:var(--fc);stroke-width:5px}[data-contrast=high] .hand-finger text{fill:var(--fc);font-size:22px}[data-contrast=high] .hand-finger.main rect{fill:var(--fc);stroke:#fff;stroke-width:6px}[data-contrast=high] .hand-finger.main text{fill:#000}[data-contrast=high] .hand-finger.shift rect{fill:#000;stroke:#fff;stroke-width:6px;stroke-dasharray:8 5}[data-contrast=high] .kb-panel[data-fade=next] .hand-finger.idle rect{fill:#000;stroke:#555}[data-contrast=high] .stat-bar .bar{background:#000;border-color:#fff}[data-contrast=high] .stat-bar .fill{background:#ff8a80}.ch.composing{color:#1d4ed8;text-underline-offset:4px;-webkit-text-decoration:underline dotted #1d4ed8;text-decoration:underline dotted #1d4ed8;text-decoration-thickness:2px}[data-contrast=high] .ch.composing{color:#7dd3fc;text-decoration-color:#7dd3fc}.os-ime{margin:.5rem 0;font-size:1.05rem}.prefs-box{text-align:left}.prefs-box .meta{margin:.4rem 0 0;font-weight:600}.timer{color:#b45309;margin:.2rem 0;font-weight:700}.intro-text{font-size:1.05rem;line-height:1.5}.passed{color:#15803d;font-weight:700}.stage-list{flex-direction:column;gap:1rem;margin:1rem 0;display:flex}.stage-card{border:2px solid #94a3b8;border-radius:12px;padding:.75rem 1rem}.stage-card.locked{opacity:.75;border-style:dashed}.stage-card.open{border-color:#2563eb}.stage-card.done{border-color:#15803d}.stage-card header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem;display:flex}.stage-card h2{margin:0}.badge{border:2px solid;border-radius:999px;padding:.15rem .6rem;font-size:.8rem;font-weight:700}.badge.locked{color:#475569}.badge.open{color:#1d4ed8}.badge.done{color:#15803d}.lesson-list{flex-direction:column;gap:.4rem;margin:.5rem 0 0;padding:0;list-style:none;display:flex}.lesson-row{background:#f1f5f9;border-radius:8px;justify-content:space-between;align-items:center;gap:.75rem;padding:.4rem .6rem;display:flex}.lesson-row.locked{color:#64748b}.lesson-row.passed{background:#dcfce7}.meanings{grid-template-columns:repeat(auto-fill,minmax(11rem,1fr));gap:.3rem 1rem;margin:0;display:grid}.meanings>div{gap:.4rem;display:flex}.meanings dt{font-family:ui-monospace,Consolas,monospace;font-weight:700}.meanings dd{color:#475569;margin:0}.placement-prompt{margin:.75rem 0}.placement-prompt p{margin:0 0 .5rem}[data-contrast=high] .timer{color:#ffeb3b}[data-contrast=high] .passed{color:#00ff7f}[data-contrast=high] .stage-card{border-color:#fff}[data-contrast=high] .stage-card.open{border-color:#00e5ff}[data-contrast=high] .stage-card.done{border-color:#00ff7f}[data-contrast=high] .badge.locked{color:#fff}[data-contrast=high] .badge.open{color:#00e5ff}[data-contrast=high] .badge.done{color:#00ff7f}[data-contrast=high] .lesson-row{background:#000;border:2px solid #fff}[data-contrast=high] .lesson-row.locked{color:#fff;border-style:dashed}[data-contrast=high] .lesson-row.passed{border-color:#00ff7f}[data-contrast=high] .meanings dd{color:#fff}.vocab-card{border:2px solid #cbd5e1;border-radius:12px;margin:.5rem 0 1rem;padding:.75rem 1rem}.vocab-card p{margin:.3rem 0}.example{line-height:1.5}.blank{text-align:center;color:#0000;-webkit-user-select:none;user-select:none;border-bottom:3px solid #1d4ed8;min-width:4.5rem;margin:0 .2rem;display:inline-block}.mode-list{flex-direction:column;gap:.75rem;margin:1rem 0;display:flex}.mode-card{border:1px solid #cbd5e1;border-radius:10px;padding:.6rem .8rem}.mode-card p{margin:.4rem 0 0}.result-words,.notebook-list{text-align:left;margin:.5rem 0 1rem;padding:0;list-style:none}.result-words li.ok{color:#15803d}.result-words li.bad{color:#b91c1c}.notebook-row{background:#f1f5f9;border-radius:8px;flex-wrap:wrap;justify-content:space-between;gap:.3rem 1rem;margin-bottom:.3rem;padding:.35rem .6rem;display:flex}.level-prompt{line-height:1.6}[data-contrast=high] .vocab-card,[data-contrast=high] .mode-card{border-color:#fff}[data-contrast=high] .blank{border-bottom-color:#ffeb3b}[data-contrast=high] .result-words li.ok{color:#00ff7f}[data-contrast=high] .result-words li.bad{color:#ff8a80}[data-contrast=high] .notebook-row{background:#000;border:2px solid #fff}.reward-chips{color:#1d4ed8;margin:.2rem 0 .6rem;font-weight:600}.xp-gain{color:#15803d;margin:.4rem 0;font-size:1.4rem;font-weight:700}.reward-top{flex-wrap:wrap;align-items:center;gap:1rem;margin:.5rem 0 1rem;display:flex}.level-badge{background:#dbeafe;border:4px solid #2563eb;border-radius:50%;flex-direction:column;justify-content:center;align-items:center;width:5.5rem;height:5.5rem;display:flex}.level-num{color:#1d4ed8;font-size:2.2rem;font-weight:800;line-height:1}.reward-numbers{flex:10rem}.reward-numbers p{margin:.1rem 0}.coin-box{margin:0}progress{accent-color:#2563eb;width:100%;height:1rem}.quest-list,.badge-grid{margin:.5rem 0 1rem;padding:0;list-style:none}.quest{border:2px solid #cbd5e1;border-radius:10px;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem 1rem;margin-bottom:.5rem;padding:.5rem .75rem;display:flex}.quest.done{background:#dcfce7;border-color:#15803d}.quest-progress{text-align:right;min-width:8rem}.badge-grid{grid-template-columns:repeat(auto-fill,minmax(11rem,1fr));gap:.6rem;display:grid}.badge-card{text-align:center;color:#475569;border:2px dashed #94a3b8;border-radius:12px;flex-direction:column;align-items:center;gap:.2rem;padding:.7rem .5rem;display:flex}.badge-card.earned{color:#0f172a;background:#fef3c7;border:2px solid #f59e0b}.badge-icon{font-size:2rem}[data-contrast=high] .reward-chips{color:#ffeb3b}[data-contrast=high] .xp-gain{color:#00ff7f}[data-contrast=high] .level-badge{background:#000;border-color:#ffeb3b}[data-contrast=high] .level-num{color:#ffeb3b}[data-contrast=high] progress{accent-color:#00e5ff}[data-contrast=high] .quest{border-color:#fff}[data-contrast=high] .quest.done{background:#000;border-color:#00ff7f}[data-contrast=high] .badge-card{color:#fff;border-color:#fff}[data-contrast=high] .badge-card.earned{background:#000;border-color:#ffeb3b}.game-zone,.game-screen{max-width:880px;margin-inline:auto}.game-facts{gap:.25rem;margin:.5rem 0;padding:0;list-style:none;display:grid}.game-cards{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem;margin:1rem 0;display:grid}.game-card{border:2px solid #94a3b8;border-radius:12px;align-content:start;gap:.5rem;padding:1rem;display:grid}.game-card h2{margin:0;font-size:1.15rem}.game-host{width:100%}.game-canvas{aspect-ratio:16/9;background:#0b3d5c;border-radius:12px;width:100%;max-height:70vh;overflow:hidden}.game-canvas canvas{display:block}[data-contrast=high] .game-card{border-color:#fff}[data-contrast=high] .game-canvas{background:#000;border:2px solid #ffeb3b}