:root{color-scheme:dark;font-family:Inter,system-ui,sans-serif;background:#0b0b0c;color:#fafafa;line-height:1.5;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--panel: #171717;--panel-border: #2B2B2B;--text-soft: #a1a1aa;--accent: #4F9CF9;--accent-strong: #66AFFF;--good: #48e3a4;--bad: #ff7b7b;--shadow: 0 4px 12px rgba(0, 0, 0, .2)}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;background:transparent}button,textarea{font:inherit}button{cursor:pointer}#root{min-height:100vh}.shell{width:min(1180px,calc(100% - 32px));margin:0 auto;padding:40px 0 56px}.hero{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(260px,.8fr);gap:24px;align-items:stretch;margin-bottom:24px}.eyebrow{display:inline-flex;align-items:center;gap:8px;text-transform:uppercase;letter-spacing:.18em;font-size:.72rem;color:var(--accent)}.hero h1{margin:10px 0 14px;font-size:clamp(1.8rem,4vw,3.2rem);line-height:1.1;max-width:25ch}.hero-copy{margin:0;max-width:68ch;color:var(--text-soft);font-size:1.05rem}.hero-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}.hero-links a,.faq-header a{color:#dff7ff;text-decoration:none;border-bottom:1px solid rgba(156,244,255,.35);padding-bottom:2px}.hero-card,.practice-panel,.feature-card,.history-card,.ad-slot{border:1px solid var(--panel-border);background:var(--panel);border-radius:12px}.hero-card{display:grid;gap:16px;align-content:center;padding:24px}.hero-card div{display:flex;justify-content:space-between;align-items:baseline;gap:14px}.stat-label{color:var(--text-soft);font-size:.9rem}.hero-card strong{font-size:1.8rem}.workspace-grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(280px,.9fr);gap:32px}.practice-panel{padding:24px}.panel-header,.action-row,.progress-row,.stat-grid article,.history-list article{display:flex;justify-content:space-between;gap:16px}.panel-header{align-items:start;margin-bottom:16px}.panel-header h2,.feature-card p,.history-card p{margin:6px 0 0}.panel-header p,.mode-note,.feature-card li,.history-list span,.history-list small,.ad-slot p,.empty-state{color:var(--text-soft)}.ghost-button,.primary-button,.mode-button{border:1px solid transparent;border-radius:8px;padding:12px 18px;transition:transform .2s ease,border-color .2s ease,background .2s ease}.ghost-button{background:#ffffff0a;color:#eff6ff}.primary-button{background:var(--accent);color:#fff;font-weight:600}.primary-button:hover{background:var(--accent-strong)}.mode-switcher{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 26px}.mode-button{background:#ffffff0a;color:#dbe7ff}.mode-button.active{border-color:var(--accent);background:#4f9cf926;color:#fff}.mode-note{margin:0 0 14px}.custom-textarea{width:100%;height:200px;background:var(--bg);border:1px solid var(--panel-border);border-radius:8px;color:var(--text);font-family:Fira Code,Courier New,monospace;font-size:1rem;padding:16px;resize:vertical;line-height:1.5}.custom-textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px #4f9cf933}.typing-card{border-radius:12px;padding:20px;background:var(--panel);border:1px solid var(--panel-border)}.progress-row{color:var(--text-soft);font-size:.9rem}.progress-bar{height:8px;border-radius:999px;background:#ffffff0f;margin:12px 0 18px;overflow:hidden}.progress-bar span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--accent),var(--good))}.language-badge{display:inline-flex;align-items:center;gap:6px;background:#ffffff0f;padding:4px 10px;border-radius:6px;font-size:.85rem;font-family:IBM Plex Mono,monospace;color:var(--accent);margin-bottom:16px}.language-badge span{font-size:1rem}@keyframes fadeIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.fade-in{animation:fadeIn .15s ease-out forwards}.prompt-text{margin:0 0 18px;font-family:IBM Plex Mono,monospace;font-size:clamp(1.05rem,1.5vw,1.34rem);line-height:1.9;position:relative}.caret{position:absolute;top:0;left:0;width:2.5px;background-color:var(--accent);border-radius:2px;transition:transform .1s cubic-bezier(.25,1,.5,1),height .1s ease-out;pointer-events:none;z-index:10;box-shadow:0 0 8px var(--accent)}.caret.blinking{animation:caretBlink 1s infinite alternate}@keyframes caretBlink{0%,to{opacity:1}50%{opacity:0}}.prompt-text span{padding:2px 0}.prompt-text span.correct{color:var(--good)}.prompt-text span.wrong{color:var(--bad);text-decoration:underline}.prompt-text span.pending{color:#edf4ffb8}textarea{width:100%;min-height:124px;resize:vertical;border-radius:18px;border:1px solid rgba(255,255,255,.1);background:#ffffff08;color:#f4f8ff;padding:16px;outline:none}textarea:focus{border-color:#71d6ff99;box-shadow:0 0 0 4px #71d6ff1f}.stat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:32px 0 16px}.stat-grid article,.history-list article{flex-direction:column;padding:14px 16px;border-radius:18px;background:#ffffff08}.stat-grid span,.history-list small{font-size:.9rem}.stat-grid strong{font-size:1.6rem}.status-text{color:var(--text-soft);align-self:center}.side-column{display:grid;gap:16px;align-content:start}.seo-summary,.guide-grid,.faq-section{margin-top:32px}.seo-summary{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(240px,.8fr);gap:20px;padding:24px;border-radius:24px;border:1px solid var(--panel-border);background:#0a111fb8;box-shadow:var(--shadow)}.seo-summary h2,.guide-card h2,.faq-section h2{margin:8px 0 10px}.keyword-list{list-style:none;margin:0;padding:0;display:grid;gap:10px;align-content:start}.keyword-list li{padding:12px 14px;border-radius:16px;background:#ffffff0a;border:1px solid rgba(255,255,255,.06)}.guide-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.guide-card,.faq-section{border:1px solid var(--panel-border);background:var(--panel);border-radius:12px;padding:24px}.share-card{display:grid;gap:14px;margin-top:20px;padding:24px;border-radius:12px;border:1px solid var(--panel-border);background:var(--panel)}.share-card p{color:var(--text-soft)}.guide-card p:last-child,.faq-list p{color:var(--text-soft)}.faq-list{display:grid;gap:12px}.faq-list details{border-radius:18px;background:#ffffff0a;border:1px solid rgba(255,255,255,.08);padding:14px 16px}.faq-list summary{cursor:pointer;font-weight:600}.faq-list p{margin:10px 0 0}.feature-card,.history-card,.ad-slot{padding:20px}.feature-card ul{margin:12px 0 0;padding-left:18px;display:grid;gap:10px}.ad-slot{border-style:dashed;min-height:180px}.ad-kicker{display:inline-block;font-size:.72rem;text-transform:uppercase;letter-spacing:.14em;color:var(--accent);margin-bottom:8px}.ad-slot strong{display:block;font-size:1.1rem;margin-bottom:8px}.history-list{display:grid;gap:10px;margin-top:12px}.empty-state{margin-top:12px}@media(max-width:980px){.hero,.workspace-grid,.seo-summary,.guide-grid{grid-template-columns:1fr}.hero-card,.practice-panel,.feature-card,.history-card,.ad-slot{border-radius:20px}}@media(max-width:640px){.shell{width:min(100% - 20px,1180px);padding-top:20px}.practice-panel,.hero-card,.feature-card,.history-card,.ad-slot{padding:18px}.panel-header,.action-row{flex-direction:column;align-items:stretch}}.progress-chart-section{margin-top:32px;padding:24px;border:1px solid var(--panel-border);background:var(--panel);border-radius:12px}.progress-chart-svg{width:100%;height:auto;display:block;margin-top:8px}.trend-badge{padding:6px 14px;border-radius:20px;font-size:.9rem;font-weight:600}.trend-up{background:#48e3a41f;color:var(--good);border:1px solid rgba(72,227,164,.25)}.trend-down{background:#ff7b7b1f;color:var(--bad);border:1px solid rgba(255,123,123,.25)}.achievements-section{margin-top:32px;padding:24px;border:1px solid var(--panel-border);background:var(--panel);border-radius:12px}.achievement-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}.achievement-card{display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 10px;border-radius:12px;border:1px solid var(--panel-border);background:#ffffff08;text-align:center;transition:border-color .3s ease,box-shadow .3s ease}.achievement-card.unlocked{border-color:var(--accent);box-shadow:0 0 16px #4f9cf91f;background:#4f9cf90f}.achievement-card.locked{opacity:.45;filter:saturate(0)}.achievement-icon{font-size:1.8rem;line-height:1}.achievement-card strong{font-size:.85rem}.achievement-card small{font-size:.75rem;color:var(--text-soft)}.xp-bar-container{grid-column:1 / -1;display:flex;flex-direction:column;gap:6px}.xp-bar-header{display:flex;justify-content:space-between;align-items:baseline;font-size:.85rem}.xp-bar-header .level-text{font-weight:700;color:var(--accent);font-size:1rem}.xp-bar-header .xp-text{color:var(--text-soft)}.xp-bar{height:10px;border-radius:999px;background:#ffffff0f;overflow:hidden}.xp-fill{height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--accent),var(--good));transition:width .6s cubic-bezier(.22,1,.36,1)}.streak-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:20px;font-size:.85rem;font-weight:600;color:#fbbf24;background:#fbbf241a;border:1px solid rgba(251,191,36,.25)}.toast-container{position:fixed;top:24px;right:24px;z-index:1000;display:flex;flex-direction:column;gap:8px;pointer-events:none}.toast{padding:14px 20px;border-radius:12px;background:#171717f2;border:1px solid var(--accent);color:#fff;font-weight:600;font-size:.9rem;box-shadow:0 8px 30px #0006,0 0 20px #4f9cf926;animation:toastSlideIn .4s cubic-bezier(.22,1,.36,1) forwards;pointer-events:auto}@keyframes toastSlideIn{0%{opacity:0;transform:translate(40px) scale(.95)}to{opacity:1;transform:translate(0) scale(1)}}.toast-exit{animation:toastSlideOut .3s ease forwards}@keyframes toastSlideOut{to{opacity:0;transform:translate(40px) scale(.95)}}.xp-popup{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);font-size:2rem;font-weight:800;color:var(--accent);pointer-events:none;z-index:999;animation:xpFloat 1.2s ease-out forwards;text-shadow:0 0 20px rgba(79,156,249,.5)}@keyframes xpFloat{0%{opacity:1;transform:translate(-50%,-50%) scale(.8)}50%{opacity:1;transform:translate(-50%,-80%) scale(1.1)}to{opacity:0;transform:translate(-50%,-120%) scale(.9)}}.daily-challenge-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:20px;font-size:.8rem;font-weight:600;color:#a78bfa;background:#a78bfa1a;border:1px solid rgba(167,139,250,.25);margin-bottom:12px}@media(max-width:640px){.achievement-grid{grid-template-columns:repeat(2,1fr)}.toast-container{top:12px;right:12px;left:12px}}.virtual-keyboard-section{margin-top:24px;display:flex;flex-direction:column;align-items:center;gap:20px;animation:fadeIn .25s ease-out forwards}.keyboard-container{width:100%;max-width:680px;background:#ffffff03;border:1px solid var(--panel-border);border-radius:12px;padding:12px;box-shadow:inset 0 1px 1px #ffffff0d}.keyboard-row{display:flex;gap:6px;margin-bottom:6px}.keyboard-row:last-child{margin-bottom:0}.key-cap{height:40px;background:#ffffff08;border:1px solid rgba(255,255,255,.06);border-radius:6px;display:flex;flex-direction:column;justify-content:center;align-items:center;color:var(--text-soft);font-family:IBM Plex Mono,monospace;font-size:.85rem;font-weight:500;-webkit-user-select:none;user-select:none;transition:all .15s cubic-bezier(.2,.8,.2,1);position:relative;overflow:hidden}.key-cap span.shift-label{font-size:.7rem;opacity:.6;line-height:1;margin-bottom:2px}.key-cap.next-key{border-color:var(--accent);background:#4f9cf92e;box-shadow:0 0 12px #4f9cf940;color:#fff;font-weight:700;transform:translateY(-1px)}.key-cap.active-shift{border-color:#4f9cf980;background:#4f9cf90f;color:#ffffffd9}.hands-container{display:flex;justify-content:center;align-items:center}.hands-svg{width:220px;height:auto;overflow:visible}.hands-svg .finger{fill:#ffffff0a;stroke:var(--panel-border);stroke-width:1.5px;transition:fill .2s ease,stroke .2s ease,filter .2s ease}.hands-svg .finger.active{fill:#4f9cf94d;stroke:var(--accent);filter:drop-shadow(0 0 4px rgba(79,156,249,.6))}@media(max-width:640px){.keyboard-container{padding:8px}.key-cap{height:32px;font-size:.7rem;border-radius:4px}.keyboard-row{gap:4px;margin-bottom:4px}}.adaptive-progress-container{margin-bottom:24px;padding:16px;background:#0003;border-radius:12px;border:1px solid var(--panel-border)}.adaptive-keys-row{display:flex;flex-wrap:wrap;gap:8px}.adaptive-key-badge{display:flex;flex-direction:column;align-items:center;justify-content:center;width:40px;height:48px;background:var(--panel);border:1px solid var(--panel-border);border-radius:8px;position:relative;overflow:hidden;transition:all .2s}.adaptive-key-badge.target-key{border-color:var(--accent);box-shadow:0 0 0 2px #4f9cf94d;transform:translateY(-2px)}.key-char{font-size:1.2rem;font-weight:700;color:var(--text-main);margin-bottom:4px}.confidence-bar-bg{width:80%;height:4px;background:#ffffff1a;border-radius:2px;overflow:hidden}.confidence-bar-fill{height:100%;transition:width .5s ease-out,background-color .5s}.prompt-text span.auto-closed{color:var(--accent);opacity:.55;font-weight:500;text-shadow:0 0 4px rgba(79,156,249,.4)}