:root{--bg: #0f172a;--surface: #111827;--surface-elevated: #1f2937;--surface-muted: #374151;--text: #f8fafc;--text-muted: #cbd5e1;--accent: #38bdf8;--accent-soft: rgba(56, 189, 248, .16);--success: #22c55e;--danger: #ef4444;--warning: #facc15;--border: rgba(148, 163, 184, .16);--shadow: 0 24px 80px rgba(15, 23, 42, .22);--radius: 24px;--radius-sm: 16px;--font-base: "Inter", sans-serif;--font-mono: "JetBrains Mono", monospace;--transition: .18s ease;--gradient: linear-gradient(135deg, #0ea5e9 0%, #22c55e 100%)}[data-theme=light]{--bg: #f8fafc;--surface: #ffffff;--surface-elevated: #f1f5f9;--surface-muted: #e2e8f0;--text: #0f172a;--text-muted: #475569;--accent: #0ea5e9;--accent-soft: rgba(14, 165, 233, .16);--success: #16a34a;--danger: #dc2626;--warning: #ca8a04;--border: rgba(148, 163, 184, .28);--shadow: 0 24px 80px rgba(15, 23, 42, .08);--gradient: linear-gradient(135deg, #0ea5e9 0%, #22c55e 100%)}:root{color-scheme:dark;font-synthesis:none;text-rendering:optimizeLegibility}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-height:100vh;background:radial-gradient(circle at top left,rgba(56,189,248,.12),transparent 26%),radial-gradient(circle at bottom right,rgba(34,197,94,.14),transparent 24%),var(--bg);color:var(--text);font-family:var(--font-base)}img{display:block;max-width:100%}button,input,textarea,select{font:inherit}button{cursor:pointer}.hidden{display:none!important}:root{font-size:16px}body{background-color:var(--bg)}.app-shell{min-height:100vh;padding:8px 28px 28px;display:flex;flex-direction:column;gap:8px}.app-header{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:18px 24px;border-radius:var(--radius);background:linear-gradient(180deg,#ffffff0d,#ffffff08);box-shadow:var(--shadow);border:1px solid var(--border);z-index:50}.brand-panel{display:flex;align-items:center;gap:18px}.brand-logo{width:60px;height:60px;border-radius:10px;object-fit:cover;background-color:#ffffff14}.brand-label{margin:0;font-size:1.15rem;font-weight:700}.brand-subtitle{margin:4px 0 0;color:var(--text-muted)}.header-actions{display:flex;align-items:center;gap:12px}.dropdown{position:relative}.dropdown-menu{position:absolute;right:0;top:44px;background:var(--surface);border:1px solid var(--border);padding:8px;border-radius:8px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:6px;min-width:180px;z-index:40}.dropdown-menu[hidden]{display:none!important}.dropdown-menu a{color:var(--text);padding:6px 10px;border-radius:6px;text-decoration:none}.dropdown-menu a:hover{background:#0ea5e914}.mobile-only{display:none}.mobile-nav{position:fixed;top:0;right:0;bottom:0;left:0;background:#0006;display:flex;flex-direction:column;padding:24px;gap:12px;z-index:60}.mobile-nav.hidden{display:none}@media (max-width:760px){.header-actions a.icon-button{display:none}.mobile-only{display:inline-flex}}.main-grid{display:grid;grid-template-columns:1.8fr 1.2fr;grid-template-rows:auto auto auto;gap:4px;align-items:start}.card-panel,.lesson-panel,.typing-panel,.stats-panel,.keyboard-panel{min-width:0}.card-panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px}.panel-header{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:4px;flex-wrap:wrap;min-width:0}.panel-heading-with-toggle{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0}.panel-header>*,.panel-heading-with-toggle>*{min-width:0}.panel-heading-with-toggle h2{margin:0;font-size:1rem}.panel-heading-with-toggle .icon-button{min-width:36px;min-height:36px;font-size:1rem;padding:0}.lesson-panel .lesson-categories,.lesson-panel .lesson-carousel,.lesson-panel .lesson-controls,.keyboard-panel #keyboard-layout,.keyboard-panel .caps-warning{transition:max-height .32s ease,opacity .32s ease,padding .32s ease,margin .32s ease}.lesson-panel.collapsed .lesson-categories,.lesson-panel.collapsed .lesson-carousel,.lesson-panel.collapsed .lesson-controls{max-height:0;opacity:0;padding:0;margin:0;overflow:hidden}.lesson-panel.collapsed .panel-heading-with-toggle h2{opacity:.8}.keyboard-panel.collapsed #keyboard-layout,.keyboard-panel.collapsed .caps-warning{max-height:0;opacity:0;padding:0;margin:0;overflow:hidden}.keyboard-panel.collapsed .panel-heading-with-toggle h2{opacity:.8}.lesson-controls,.typing-actions,.settings-buttons{display:flex;flex-wrap:wrap;gap:8px}.primary-button,.secondary-button,.icon-button,.settings-option{border:none;border-radius:999px;padding:2px 14px;font-size:.95rem;transition:transform var(--transition),background-color var(--transition),box-shadow var(--transition)}.primary-button{background:var(--gradient);color:#fff;box-shadow:0 16px 30px #0ea5e92e}.secondary-button{background:#94a3b81f;color:var(--text);height:40px}.icon-button,.settings-option{background:#94a3b814;color:var(--text)}.primary-button:hover,.secondary-button:hover,.icon-button:hover,.settings-option:hover{transform:translateY(-1px)}.lesson-panel{grid-column:1 / 3;padding:8px 8px 8px 18px}.lesson-categories{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}.lesson-category{padding:6px 12px;border-radius:999px;background:#38bdf824;color:var(--text);font-size:.86rem;cursor:pointer;transition:transform var(--transition),background-color var(--transition)}.lesson-category.active,.lesson-category:hover{background:linear-gradient(135deg,#0ea5e9,#22c55e);color:#fff}.lesson-carousel{display:flex;gap:10px;overflow-x:auto;padding:12px;border-radius:18px;background:var(--surface);border:1px solid var(--border);scrollbar-width:thin;scrollbar-color:var(--accent) transparent}.lesson-card:hover{transform:translateY(-4px)}.lesson-card.active{border-color:var(--accent);background:linear-gradient(180deg,#0ea5e929,#22c55e1a)}.lesson-card h3{margin:0 0 8px;font-size:.95rem}.lesson-card p{margin:0;color:var(--text-muted);font-size:.85rem}.typing-panel{min-height:560px;display:grid;grid-template-rows:auto 1fr auto}.typing-header{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;min-width:0}.typing-header>*{min-width:0}.typing-chars{display:none;background:var(--surface);border:1px solid var(--border);color:var(--text)}.char-box.current{background:#facc15;color:#111827}.char-box.correct{background:#22c55e;color:#fff}.char-box.wrong{background:#ef4444;color:#fff}.char-box.extra{opacity:.45}.typing-input-wrapper,.custom-lesson-panel{display:grid;gap:14px;margin-top:18px}.typing-input-shell{position:relative;width:100%;min-height:180px;border-radius:22px;border:1px solid var(--border);background:var(--surface-elevated);overflow:hidden}#typing-input,.custom-lesson-panel textarea{width:100%;min-height:180px;border-radius:22px;border:1px solid var(--border);padding:18px;background:transparent;color:var(--text);resize:none;line-height:1.6;font-family:var(--font-mono);font-size:.98rem;position:relative;z-index:1}#typing-input{background:transparent;color:var(--text)}.typing-placeholder-overlay{position:absolute;top:0;right:0;bottom:0;left:0;padding:18px;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;line-height:1.6;font-family:var(--font-mono);font-size:.98rem;color:var(--text-muted);pointer-events:none;z-index:2;opacity:1;transition:opacity var(--transition),transform var(--transition)}.typing-placeholder-overlay .typed{opacity:.8}.typing-placeholder-overlay .typed.correct{color:var(--text)}.typing-placeholder-overlay .typed.wrong{color:var(--danger);background:#ef44441f;border-radius:3px}.typing-placeholder-overlay .pending{opacity:.72}.key-bubble{position:fixed;top:calc(50vh - 26px);min-width:42px;height:42px;padding:0 12px;border-radius:999px;display:grid;place-items:center;font-family:var(--font-mono);font-size:.9rem;font-weight:700;background:linear-gradient(135deg,#22c55ef5,#0ea5e9f2);color:#fff;box-shadow:0 12px 22px #22c55e40;opacity:0;pointer-events:none;z-index:30;transform:translateY(20px) scale(.8)}.key-bubble--left{left:26px}.key-bubble--right{right:26px}.key-bubble.is-visible{animation:key-bubble-rise 1.2s ease-out forwards}@keyframes key-bubble-rise{0%{opacity:0;transform:translateY(24px) scale(.8)}18%{opacity:1}to{opacity:0;transform:translateY(-180px) scale(1.12)}}.typing-input-shell.has-value .typing-placeholder-overlay,.typing-input-shell.is-disabled .typing-placeholder-overlay{opacity:1}#typing-input{position:relative;z-index:1}#typing-input:focus,.custom-lesson-panel textarea:focus{outline:2px solid rgba(14,165,233,.4)}#typing-input:focus{outline:2px solid rgba(14,165,233,.4)}#typing-input::placeholder,.custom-lesson-panel textarea::placeholder{color:var(--text-muted)}.stats-panel{display:grid;grid-template-rows:auto auto;gap:14px;min-height:0}.stats-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.stat-card{border-radius:18px;padding:12px;background:#94a3b814;border:1px solid var(--border);min-height:80px}.stat-card span{color:var(--text-muted)}.stat-card strong{display:block;margin-top:6px;font-size:1.15rem}.progress-bar-wrap{margin-top:12px;height:14px;background:#94a3b81a;border-radius:999px;overflow:hidden}.progress-bar{width:0%;height:100%;border-radius:inherit;background:linear-gradient(90deg,#22c55e,#0ea5e9);transition:width .25s ease}.keyboard-panel{grid-column:1 / 3}.finger-guide{display:grid;gap:10px;margin-top:18px;padding:12px 14px 10px;border-radius:18px;border:1px solid var(--border);background:linear-gradient(180deg,#94a3b80f,#0ea5e90a);box-shadow:inset 0 1px #ffffff0a}.finger-guide-header{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}.finger-guide-header h3{margin:0;font-size:.92rem}.finger-guide-header span{font-size:.78rem;color:var(--text-muted)}.finger-guide-body{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.hand-column{display:grid;gap:6px;justify-items:center}.hand-label{font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted)}.hand-svg{width:min(100%,220px);height:auto;display:block}.hand-shape path{fill:#94a3b81f;stroke:var(--border);stroke-width:1.5;transform:scaleY(.82) translateY(14px);transform-origin:center}.finger{transform-origin:center bottom;transition:transform var(--transition),filter var(--transition),opacity var(--transition);opacity:.75}.finger rect,.finger path,.finger circle{fill:#94a3b847;stroke:#94a3b847;stroke-width:1}.finger.is-active{opacity:1;filter:drop-shadow(0 0 8px rgba(14,165,233,.85));transform:translateY(-3px) scale(1.04)}.finger.is-active rect,.finger.is-active path,.finger.is-active circle{fill:var(--accent);stroke:var(--accent)}.finger-left-pinky.is-active rect,.finger-left-pinky.is-active circle{fill:#f472b6;stroke:#f472b6}.finger-left-ring.is-active rect,.finger-left-ring.is-active circle{fill:#fb7185;stroke:#fb7185}.finger-left-middle.is-active rect,.finger-left-middle.is-active circle{fill:#f59e0b;stroke:#f59e0b}.finger-left-index.is-active rect,.finger-left-index.is-active circle{fill:#22c55e;stroke:#22c55e}.finger-left-thumb.is-active path{fill:#38bdf8;stroke:#38bdf8}.finger-right-pinky.is-active rect,.finger-right-pinky.is-active circle{fill:#f472b6;stroke:#f472b6}.finger-right-ring.is-active rect,.finger-right-ring.is-active circle{fill:#fb7185;stroke:#fb7185}.finger-right-middle.is-active rect,.finger-right-middle.is-active circle{fill:#f59e0b;stroke:#f59e0b}.finger-right-index.is-active rect,.finger-right-index.is-active circle{fill:#22c55e;stroke:#22c55e}.finger-right-thumb.is-active path{fill:#38bdf8;stroke:#38bdf8}.next-key-reading{display:flex;justify-content:center;align-items:center;min-height:34px;border-radius:10px;background:#94a3b814;color:var(--text);font-size:.8rem;font-weight:600}.popup-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0f172ac7;display:grid;place-items:center;z-index:20}.popup-card,.settings-card{width:min(540px,calc(100% - 32px));background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid var(--border);padding:28px}.popup-card{text-align:center}.popup-card h2{margin:0 0 10px}.popup-message{margin:0 0 24px;color:var(--text-muted)}.popup-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:24px}.popup-stats div span{display:block;color:var(--text-muted)}.popup-stats div strong{display:block;margin-top:8px;font-size:1.15rem}.popup-actions{display:flex;justify-content:center;gap:16px}.settings-drawer{position:fixed;top:0;right:0;bottom:0;left:0;background:#0f172aad;display:grid;place-items:center;z-index:20}.settings-header{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:20px}.settings-group{display:grid;gap:10px;margin-bottom:16px}.settings-label{color:var(--text-muted);font-size:.95rem}#font-size-range,#typing-font-select{width:100%;border-radius:16px;border:1px solid var(--border);padding:12px 14px;background:var(--surface-elevated);color:var(--text)}.hidden{display:none}html,body{overflow-x:hidden}.main-grid{display:grid;grid-template-columns:380px minmax(0,1fr);gap:16px;align-items:start}.stats-panel{grid-column:1;grid-row:1}.typing-panel{grid-column:2;grid-row:1;min-height:clamp(420px,60vh,560px)}.lesson-panel{grid-column:1/-1;grid-row:2}.keyboard-panel{grid-column:1/-1;grid-row:3}.lesson-card{flex:0 0 240px}.lesson-categories{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin}.stats-grid{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}.popup-card,.settings-card{max-height:90vh;overflow:auto}.app-footer.site-footer{margin-top:28px;background:linear-gradient(180deg,#ffffff05,#ffffff03);border-top:1px solid var(--border);color:var(--text-muted)}.site-footer .footer-top{padding:28px 24px}.site-footer .footer-container{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:24px;align-items:start}.footer-brand img{width:56px;height:56px;border-radius:8px;object-fit:cover;display:block}.footer-brand h3{margin:8px 0 6px;color:var(--text);font-size:1rem}.footer-brand p{margin:0;font-size:.92rem;color:var(--text-muted);line-height:1.4}.footer-col h4{margin:0 0 8px;font-size:.92rem;color:var(--text)}.footer-links,.footer-resources,.footer-contact{display:grid;gap:8px}.site-footer a{color:var(--text-muted);text-decoration:none;font-size:.95rem}.site-footer a:hover,.site-footer a:focus{color:var(--text);text-decoration:underline}.footer-bottom{border-top:1px solid rgba(148,163,184,.04);padding:12px 24px;font-size:.9rem;display:flex;justify-content:space-between;gap:12px;align-items:center;color:var(--text-muted)}.footer-bottom .legal-links a{margin-left:12px}@media (max-width: 860px){.site-footer .footer-container{grid-template-columns:1fr 1fr}}@media (max-width: 560px){.site-footer .footer-container{grid-template-columns:1fr}.footer-bottom{flex-direction:column;align-items:flex-start;gap:8px}}.site-footer a:focus{outline:3px solid rgba(56,189,248,.18);outline-offset:2px}