:root{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:#1f2937;background:#f6f7fb;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}body{margin:0;min-width:320px}button,textarea,input,select{font:inherit}button{cursor:pointer}.app-shell{min-height:100vh;--bg: #f6f7fb;--panel: #ffffff;--ink: #1f2937;--muted: #667085;--line: #d9dee8;--soft: #eef2f7;--accent: #0f766e;--accent-ink: #ffffff;--danger: #b42318;--ok: #067647;background:var(--bg);color:var(--ink)}.app-shell[data-theme=terminal-focus]{--bg: #0d1420;--panel: #121c2c;--ink: #dbeafe;--muted: #92a4bb;--line: #2a3a51;--soft: #17243a;--accent: #22c55e;--accent-ink: #052e16;--danger: #fb7185;--ok: #86efac}.app-shell[data-theme=bright-game]{--bg: #fff7ed;--panel: #ffffff;--ink: #2d1b0f;--muted: #7c5a38;--line: #fed7aa;--soft: #ffedd5;--accent: #f97316;--accent-ink: #ffffff;--danger: #dc2626;--ok: #16a34a}.top-bar{display:grid;grid-template-columns:minmax(180px,1fr) auto auto;gap:18px;align-items:center;padding:22px clamp(16px,4vw,40px);border-bottom:1px solid var(--line)}.brand-kicker,.eyebrow,.card-label,.control-label{margin:0 0 6px;color:var(--muted);font-size:12px;font-weight:700;letter-spacing:0}h1,h2,h3,p{margin-top:0}h1{margin-bottom:0;font-size:clamp(26px,4vw,40px);letter-spacing:0}h2{margin-bottom:8px;font-size:24px;letter-spacing:0}h3{margin-bottom:6px;letter-spacing:0}p{color:var(--muted);line-height:1.6}.main-nav,.theme-switcher{display:flex;gap:8px;flex-wrap:wrap}.main-nav button,.theme-button,.nav-button,.primary-action{border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--ink);min-height:38px;padding:8px 12px}.main-nav button[aria-pressed=true],.theme-button[aria-pressed=true],.nav-button[aria-pressed=true]{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 16%,var(--panel))}.theme-button{display:inline-flex;gap:6px;align-items:center}.theme-button span{display:grid;width:22px;height:22px;place-items:center;border-radius:999px;background:var(--soft);font-weight:800}.practice-grid{display:grid;grid-template-columns:220px minmax(0,1fr) 190px;gap:18px;padding:22px clamp(16px,4vw,40px) 40px}.control-panel,.trainer,.stats-panel,.content-page{border:1px solid var(--line);border-radius:8px;background:var(--panel);box-shadow:0 14px 28px #0f172a0f}.control-panel,.stats-panel{padding:16px;align-self:start}.control-group{display:grid;gap:8px;margin-bottom:18px}.nav-button{display:flex;gap:8px;align-items:center;justify-content:flex-start;width:100%}.nav-button span{display:grid;width:24px;height:24px;place-items:center;border-radius:6px;background:var(--soft);font-size:12px;font-weight:800}.trainer{padding:18px}.trainer-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,300px);gap:16px;align-items:start}.trainer-head select{min-height:40px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--ink);padding:8px 10px}.target-card,.hint-panel{margin-top:16px;border:1px solid var(--line);border-radius:8px;background:var(--soft);padding:16px}.target-text{margin:4px 0 12px;font-size:clamp(28px,6vw,54px);font-weight:800;letter-spacing:0}.source-row{margin-bottom:12px;color:var(--muted);font-size:13px;line-height:1.5}.source-row span{display:block}.expected-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;color:var(--muted)}code{border-radius:6px;background:var(--panel);color:var(--accent);padding:4px 8px;font-weight:800}.input-label{display:block;margin:18px 0 8px;font-weight:700}textarea{width:100%;min-height:120px;resize:vertical;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--ink);padding:14px;font-size:20px;line-height:1.5}textarea:focus,input:focus,button:focus-visible,select:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 35%,transparent);outline-offset:2px}.article-title{font-size:clamp(24px,4vw,36px)}.article-practice{display:grid;gap:14px;margin-top:16px}.article-line{border:1px solid var(--line);border-radius:8px;background:var(--soft);padding:14px}.article-target{display:grid;gap:6px}.article-target span{color:var(--muted);font-size:12px;font-weight:800}.article-target p{margin-bottom:0;color:var(--ink);font-size:20px;font-weight:700}.line-label{margin-top:12px}.line-input{width:100%;min-height:46px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--ink);padding:10px 12px;font-size:18px}.line-evaluation{margin-top:10px}.evaluation-strip{display:flex;gap:6px;flex-wrap:wrap;margin-top:14px}.eval-cell{display:grid;min-width:28px;height:32px;place-items:center;border-radius:6px;background:var(--soft);font-weight:700}.eval-cell[data-status=correct]{background:color-mix(in srgb,var(--ok) 18%,var(--panel));color:var(--ok)}.eval-cell[data-status=wrong],.eval-cell[data-status=extra]{background:color-mix(in srgb,var(--danger) 16%,var(--panel));color:var(--danger)}.hint-panel p{margin-bottom:4px;color:var(--ink)}.hint-panel span{color:var(--muted)}.keyboard{display:grid;gap:8px;margin-top:16px;overflow-x:auto;padding-bottom:4px}.keyboard-row{display:flex;gap:6px;justify-content:center;min-width:740px}.key{display:grid;width:clamp(28px,5vw,44px);min-height:34px;place-items:center;border:1px solid var(--line);border-radius:6px;background:var(--panel);color:var(--ink);font-weight:800;padding:6px}.key[data-has-roots=true]{width:68px;min-height:92px;align-content:start;gap:4px}.key-letter{display:block;color:var(--accent);font-size:18px;line-height:1}.key-roots{display:-webkit-box;overflow:hidden;color:var(--ink);font-size:11px;font-weight:700;line-height:1.25;text-align:center;-webkit-box-orient:vertical;-webkit-line-clamp:4;word-break:break-all}.key[data-active=true]{border-color:var(--accent);background:var(--accent);color:var(--accent-ink)}.key[data-active=true] .key-letter,.key[data-active=true] .key-roots{color:var(--accent-ink)}.stats-panel{display:grid;gap:10px}.stat-card{border:1px solid var(--line);border-radius:8px;background:var(--soft);padding:12px}.stat-card span,.stat-card small{color:var(--muted)}.stat-card strong{display:block;margin-top:4px;font-size:30px;letter-spacing:0}.stat-card.accent strong{color:var(--accent)}.primary-action{border-color:var(--accent);background:var(--accent);color:var(--accent-ink);font-weight:800}.save-message{margin:0;color:var(--ok);font-weight:700}.content-page{margin:22px clamp(16px,4vw,40px) 40px;padding:22px}.page-lead{max-width:900px}.tutorial-stack{display:grid;gap:14px}.tutorial-stack article,.history-item{border:1px solid var(--line);border-radius:8px;background:var(--soft);padding:16px}.tutorial-stack ul,.tutorial-stack ol{margin:0;padding-left:22px;color:var(--muted);line-height:1.7}.tutorial-stack li+li{margin-top:6px}.tutorial-table{display:grid;gap:8px}.tutorial-row{display:grid;grid-template-columns:120px minmax(130px,190px) minmax(0,1fr);gap:12px;align-items:center;border:1px solid var(--line);border-radius:8px;background:var(--panel);padding:10px}.version-table .tutorial-row{grid-template-columns:120px minmax(0,1fr) minmax(0,1fr)}.root-table .tutorial-row{grid-template-columns:58px minmax(160px,1fr) minmax(220px,1.3fr) minmax(160px,1fr)}.tutorial-row span{color:var(--muted);line-height:1.5}.history-list{display:grid;gap:10px}.history-item{display:flex;gap:16px;align-items:center;justify-content:space-between}.history-item h3{margin-bottom:2px}.history-item p{margin-bottom:0}.history-metrics{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;font-weight:800}.history-metrics span{border-radius:999px;background:var(--panel);padding:6px 10px}.empty-state{margin-bottom:0}.app-shell[data-theme=terminal-focus] .control-panel,.app-shell[data-theme=terminal-focus] .trainer,.app-shell[data-theme=terminal-focus] .stats-panel,.app-shell[data-theme=terminal-focus] .content-page{box-shadow:0 0 0 1px #22c55e14,0 18px 34px #0000002e}@media(max-width:1120px){.top-bar,.practice-grid{grid-template-columns:1fr}.control-panel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.control-group{margin-bottom:0}.stats-panel{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:720px){.trainer-head,.control-panel,.stats-panel,.tutorial-row,.version-table .tutorial-row,.root-table .tutorial-row{grid-template-columns:1fr}.main-nav,.theme-switcher{width:100%}.main-nav button,.theme-button{flex:1 1 auto}.history-item{align-items:flex-start;flex-direction:column}}