:root { color-scheme: light; --bg:#f6f4ed; --paper:#fffef9; --ink:#242d28; --muted:#667168; --line:#d8dbcf; --accent:#254f40; --accent-ink:#fffef7; --soft:#e7eddf; --orange:#a74725; --error:#b23535; --error-bg:#ffe5df; }
@media(prefers-color-scheme:dark) { :root:not([data-theme="light"]) { color-scheme:dark; --bg:#171d1a; --paper:#202823; --ink:#e9ecdf; --muted:#aab6a9; --line:#3c483e; --accent:#c2d7a8; --accent-ink:#1f3024; --soft:#303e32; --orange:#f0a27d; --error:#ffa99d; --error-bg:#58312c; } }
:root[data-theme="dark"] { color-scheme:dark; --bg:#171d1a; --paper:#202823; --ink:#e9ecdf; --muted:#aab6a9; --line:#3c483e; --accent:#c2d7a8; --accent-ink:#1f3024; --soft:#303e32; --orange:#f0a27d; --error:#ffa99d; --error-bg:#58312c; }
* { box-sizing:border-box; } body { margin:0; background:var(--bg); color:var(--ink); font-family:'Apple SD Gothic Neo','Malgun Gothic',sans-serif; line-height:1.6; } button,select,textarea,input { font:inherit; } button,select { cursor:pointer; } button { border:1px solid var(--line); border-radius:5px; background:var(--paper); color:var(--ink); padding:10px 16px; font-weight:600; } button:hover:not(:disabled) { border-color:var(--accent); background:var(--soft); } button:disabled { opacity:.5; cursor:default; } :focus-visible { outline:3px solid var(--orange); outline-offset:3px; } a { color:inherit; text-underline-offset:4px; } h1,h2,h3,p { margin:0; } h2 { font-size:18px; letter-spacing:-.5px; } h3 { font-size:15px; } [hidden] { display:none!important; } .shell { max-width:1280px; padding:0 48px; margin:auto; } .masthead { height:92px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); } .brand { text-decoration:none; font:800 20px ui-monospace,'SFMono-Regular',Consolas,monospace; letter-spacing:-.7px; display:flex; gap:0; align-items:center; } .brand-symbol { color:var(--accent); } .brand-x { font-style:italic; color:var(--accent); } .header-right { display:flex; align-items:center; gap:22px; } .edition,.section-number,.eyebrow { font-size:11px; font-weight:700; letter-spacing:1.4px; color:var(--muted); } .quiet { background:transparent; font-size:12px; padding:6px 10px; } .intro { display:grid; grid-template-columns:1.4fr 1fr; padding:54px 0 46px; align-items:center; gap:40px; } .eyebrow { color:var(--orange); font-size:12px; letter-spacing:1.2px; margin-bottom:15px; } h1 { font-size:45px; font-weight:600; line-height:1.28; letter-spacing:-2.5px; } h1 em { font-style:normal; color:var(--accent); } .lead { color:var(--muted); font-size:15px; margin-top:20px; } .device-note { display:inline-block; font-size:11px; margin-top:18px; padding:4px 10px; border:1px solid var(--line); border-radius:20px; color:var(--muted); } .specimen { text-align:center; border-left:1px solid var(--line); padding:20px 0; } .specimen-label { font-size:11px; color:var(--muted); } .specimen div { font:500 78px Georgia,serif; color:var(--accent); line-height:1.5; letter-spacing:10px; } .specimen i { font-style:normal; color:var(--orange); } .specimen p { font:27px Georgia,serif; color:var(--muted); } .specimen-foot { display:block; font-size:11px; margin-top:22px; color:var(--muted); } .mode-bar { border-block:1px solid var(--line); padding:24px 0; display:flex; justify-content:space-between; align-items:center; gap:20px; } .mode-copy h2 { margin-top:5px; } .mode-actions { display:flex; align-items:center; gap:10px; } button.primary { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); padding:13px 18px; } button.primary:hover:not(:disabled) { background:var(--ink); color:var(--bg); } button.primary span { padding-left:16px; } .secondary { padding:13px; } .duration { font-size:11px; color:var(--muted); display:flex; align-items:center; gap:8px; } select { color:var(--ink); border:1px solid var(--line); border-radius:4px; background:var(--paper); padding:9px 7px; max-width:100%; } .practice-layout { display:grid; grid-template-columns:220px minmax(0,1fr); gap:40px; padding-top:32px; } .settings h2 { margin:5px 0 20px; } #stages { display:grid; gap:5px; } .stage { text-align:left; border:0; background:transparent; font-weight:400; padding:12px 10px; display:flex; gap:12px; align-items:center; } .stage b { font:12px ui-monospace,monospace; color:var(--muted); } .stage[aria-pressed="true"] { background:var(--soft); color:var(--accent); font-weight:700; } .field-label { display:block; color:var(--muted); font-size:11px; margin:20px 0 7px; } #family-select { width:100%; font-size:12px; } .checkbox { font-size:12px; display:flex; align-items:center; gap:5px; margin-top:16px; } input[type="checkbox"] { accent-color:var(--accent); } .small { font-size:11px; color:var(--muted); } .settings .small { margin-top:14px; } .metrics { display:grid; grid-template-columns:repeat(4,1fr); padding:0 0 22px; gap:12px; } .metrics div { border-left:1px solid var(--line); padding-left:18px; } .metrics span { display:block; font-size:11px; color:var(--muted); } .metrics strong { display:block; font:500 24px ui-monospace,'SFMono-Regular',Consolas,monospace; margin-top:4px; letter-spacing:-1px; } .typing-card { background:var(--paper); border:1px solid var(--line); border-radius:6px; padding:24px; } .typing-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; } .typing-heading h2 { font-size:14px; } #progress { font-size:11px; color:var(--muted); white-space:nowrap; } #repeat-note { margin-top:5px; } .code-target { font:20px/1.9 ui-monospace,'SFMono-Regular',Consolas,monospace; padding:25px 0; overflow-wrap:anywhere; white-space:pre-wrap; } .typed { color:var(--accent); } .cursor { background:var(--soft); box-shadow:inset 0 -2px var(--accent); } .wrong { background:var(--error-bg); color:var(--error); } #typing { width:100%; resize:vertical; min-height:90px; border:1px solid var(--line); border-radius:4px; background:var(--bg); color:var(--ink); font:17px/1.65 ui-monospace,'SFMono-Regular',Consolas,monospace; padding:12px; caret-color:var(--accent); } #typing:disabled { opacity:.6; } #warning { color:var(--error); font-size:12px; min-height:22px; margin-top:5px; } .typing-footer { display:flex; gap:10px; align-items:center; justify-content:space-between; } #input-help { font-size:11px; color:var(--muted); } .feedback { padding:16px 0 22px; display:flex; flex-wrap:wrap; gap:6px 12px; border-bottom:1px solid var(--line); font-size:12px; } .feedback span { color:var(--muted); } .results { margin-top:22px; } .result-heading { display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; } .result-heading h2 { font-size:14px; } .empty { font-size:13px; color:var(--muted); padding:22px 0; } .round-row { margin-top:12px; padding:12px 0; border-bottom:1px solid var(--line); font-size:12px; } .round-row p { margin-top:5px; color:var(--muted); overflow-wrap:anywhere; } .badge { display:inline-block; padding:2px 7px; margin-left:7px; background:var(--soft); border-radius:20px; font-size:10px; color:var(--accent); } .weak { display:flex; flex-wrap:wrap; gap:8px; font-size:11px; padding-top:12px; } .weak span { border:1px solid var(--line); border-radius:4px; padding:4px 8px; } #summary { background:var(--soft); padding:16px; margin-top:15px; border-radius:4px; font-size:13px; white-space:pre-line; } .about { border-top:1px solid var(--line); margin-top:48px; padding:30px 0; display:grid; grid-template-columns:1fr 1fr; gap:60px; } .about h2 { font-size:17px; margin-bottom:10px; } .about h3 { margin-bottom:10px; } .about p { font-size:12px; color:var(--muted); max-width:490px; } #support-note { font-size:11px; margin-top:10px; } footer { border-top:1px solid var(--line); padding:22px 0 35px; font-size:11px; color:var(--muted); display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; } footer div { display:flex; flex-wrap:wrap; gap:16px; } footer>p { width:100%; } #mobile-note { display:none; } .skip { position:fixed; top:-60px; background:var(--paper); padding:10px; z-index:10; } .skip:focus { top:0; } .data-tools { border-top:1px solid var(--line); margin-top:30px; padding-top:22px; } .data-tools p { font-size:12px; color:var(--muted); } .data-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; } .data-actions label { border:1px solid var(--line); border-radius:4px; padding:8px 12px; font-size:12px; cursor:pointer; } .file-input { width:1px; height:1px; opacity:0; position:absolute; } .data-tools .small { margin-top:12px; }
@media(min-width:761px) and (max-width:1060px) { .shell { padding:0 24px; } .mode-bar { align-items:flex-start; flex-direction:column; } .practice-layout { grid-template-columns:185px minmax(0,1fr); gap:24px; } }
@media(max-width:760px) { .shell { padding:0 24px; } .masthead { height:72px; } .edition { display:none; } .header-right { gap:0; } .intro { grid-template-columns:1fr; gap:0; padding:38px 0 26px; } h1 { font-size:35px; } .lead { font-size:14px; } .specimen { display:none; } main,.skip { display:none; } #mobile-note { display:block; border-block:1px solid var(--line); padding:22px 0; } #mobile-note strong { font-size:16px; } #mobile-note p { font-size:13px; color:var(--muted); margin-top:10px; } .about { grid-template-columns:1fr; margin-top:28px; gap:24px; } footer { display:block; } footer div { margin:16px 0; } }


.feel-settings { font-size:12px; border-bottom:1px solid var(--line); padding:12px 0; color:var(--muted); } .feel-settings summary { cursor:pointer; width:fit-content; } .feel-controls { display:flex; flex-wrap:wrap; gap:16px; align-items:center; padding:15px 0 8px; } .feel-controls label { display:flex; align-items:center; gap:6px; } .feel-controls select { padding:4px 7px; } .feel-controls input[type="range"] { width:85px; accent-color:var(--accent); } .typing-status { display:flex; align-items:center; gap:14px; } #combo-box { display:flex; align-items:baseline; gap:5px; position:relative; color:var(--accent); white-space:nowrap; } #combo-box>span:first-child { font-size:9px; letter-spacing:1px; } #combo { display:inline-block; min-width:2ch; font:600 25px ui-monospace,monospace; } #combo-word { font-size:10px; min-width:80px; } #combo-box[data-tier="25"],#combo-box[data-tier="100"] { color:var(--orange); } .target-char { display:inline-block; white-space:pre; } .code-target { position:relative; } .motion-cursor { position:absolute; left:0; top:0; width:1ch; height:2px; background:var(--accent); pointer-events:none; transition:transform 90ms cubic-bezier(.2,.8,.2,1); } .cursor.wrong { text-decoration:underline; text-decoration-color:var(--error); text-underline-offset:5px; } .spark { position:absolute; width:4px; height:4px; border-radius:50%; background:var(--orange); left:70%; top:50%; pointer-events:none; } .error-buffer { display:inline; } .badge { animation:badge-appear 200ms ease-out; } @keyframes badge-appear { from { opacity:0; transform:scale(.85); } to { opacity:1; transform:scale(1); } }
:root[data-effects="off"] .motion-cursor { transition:none; } :root[data-effects="off"] .typing-card,:root[data-effects="off"] .badge { animation:none; }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }
@media(max-width:1060px) { .typing-heading { flex-wrap:wrap; } #combo-word { min-width:65px; } }

.combo-ghost { position:absolute; left:40px; top:0; font:600 25px ui-monospace,monospace; pointer-events:none; }

.showcase { margin-top:48px; border-top:1px solid var(--line); padding-top:32px; } .showcase-heading { display:flex; justify-content:space-between; gap:20px; align-items:end; margin-bottom:22px; } .showcase-heading h2 { margin-top:8px; font-size:23px; } .showcase-heading p:last-child { font-size:12px; color:var(--muted); } figure { margin:0; } .showcase-hero { display:grid; grid-template-columns:1.6fr 1fr; border:1px solid var(--line); background:var(--paper); border-radius:6px; overflow:hidden; } .showcase-hero video { width:100%; aspect-ratio:1280/900; object-fit:contain; background:var(--bg); display:block; } .showcase-hero figcaption { padding:32px; display:flex; flex-direction:column; justify-content:center; gap:20px; font-size:17px; } .showcase-hero button { align-self:start; } .feature-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin-top:20px; } .feature-card { border:1px solid var(--line); border-radius:5px; overflow:hidden; background:var(--paper); } .feature-card img { width:100%; height:190px; object-fit:contain; background:var(--bg); display:block; } .feature-card figcaption { padding:18px; } .feature-card p { color:var(--muted); font-size:12px; margin-top:8px; }
@media(max-width:760px) { .showcase { margin-top:28px; } .showcase-heading { display:block; } .showcase-heading h2 { font-size:21px; } .showcase-heading>p { margin-top:12px; } .showcase-hero { grid-template-columns:1fr; } .showcase-hero figcaption { padding:18px; font-size:14px; } .feature-grid { grid-template-columns:1fr; gap:14px; } .feature-card img { height:auto; aspect-ratio:2/1; } }

.stats-tabs { display:flex; gap:6px; margin-top:16px; border-bottom:1px solid var(--line); padding-bottom:8px; } .stats-tabs button { font-size:12px; padding:6px 14px; } .stats-tabs [aria-selected="true"] { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); } .heat-section { margin-top:20px; background:var(--paper); border:1px solid var(--line); border-radius:5px; padding:16px; } .heat-title { display:flex; align-items:center; justify-content:space-between; gap:12px; } .heat-title label { display:flex; align-items:center; gap:8px; font-size:11px; color:var(--muted); } .heat-title select { font-size:11px; padding:5px; } .heat-section p { margin:8px 0 14px; } .heat-scroll { overflow-x:auto; max-width:100%; } #keyboard-map { min-width:640px; padding:8px 0; } .key-row { display:flex; gap:4px; margin-bottom:4px; } .key-row:nth-child(2) { padding-left:12px; } .key-row:nth-child(3) { padding-left:22px; } .key-row:nth-child(4) { padding-left:32px; } .physical-key { flex:1; min-width:30px; display:flex; flex-direction:column; gap:1px; } .heat-cell { --cell-bg:var(--bg); background:var(--cell-bg); color:var(--ink); font:10px/1.4 ui-monospace,monospace; border:1px solid var(--line); border-radius:3px; padding:3px; min-height:22px; } .heat-cell:hover { border-color:var(--accent); } .heat-cell[data-level="1"] { --cell-bg:#e3ead6; } .heat-cell[data-level="2"] { --cell-bg:#c7dcb1; } .heat-cell[data-level="3"] { --cell-bg:#9bbd80; } .heat-cell[data-level="4"] { --cell-bg:#6b9750; color:#162617; } [data-metric="error"] .heat-cell[data-level="2"],[data-metric="interval"] .heat-cell[data-level="2"] { --cell-bg:#f0d6b8; } [data-metric="error"] .heat-cell[data-level="3"],[data-metric="interval"] .heat-cell[data-level="3"] { --cell-bg:#e8b48e; } [data-metric="error"] .heat-cell[data-level="4"],[data-metric="interval"] .heat-cell[data-level="4"] { --cell-bg:#d78b72; color:#3c211a; } .heat-cell[data-sparse="true"] { background-image:repeating-linear-gradient(135deg,transparent 0,transparent 4px,var(--line) 4px,var(--line) 5px); } .heat-cell.focus-key { border-color:var(--accent); border-width:2px; font-weight:700; } .keyboard-edge { flex:1; min-width:35px; display:flex; justify-content:center; align-items:center; background:var(--bg); border:1px solid var(--line); border-radius:3px; color:var(--muted); font-size:9px; } .space-row { padding-left:25%; padding-right:10%; } .space-row .heat-cell:first-child { flex:3; } .space-row .heat-cell:last-child { flex:2; } #calendar-map { display:grid; grid-template-rows:repeat(7,18px); grid-auto-flow:column; grid-template-columns:repeat(12,minmax(14px,1fr)); gap:4px; } #calendar-map .heat-cell { padding:0; min-height:18px; } #family-map table { width:100%; border-collapse:separate; border-spacing:3px; table-layout:fixed; min-width:640px; font-size:10px; } #family-map th:first-child { width:130px; text-align:left; overflow-wrap:anywhere; } #family-map th { color:var(--muted); font-weight:500; } #family-map td { padding:0; } #family-map .heat-cell { width:100%; }
:root[data-theme="dark"] .heat-cell[data-level="1"] { --cell-bg:#344b37; } :root[data-theme="dark"] .heat-cell[data-level="2"] { --cell-bg:#4c6c45; } :root[data-theme="dark"] .heat-cell[data-level="3"] { --cell-bg:#7da069; } :root[data-theme="dark"] .heat-cell[data-level="4"] { --cell-bg:#bad49c; }
@media(prefers-color-scheme:dark) { :root:not([data-theme="light"]) .heat-cell[data-level="1"] { --cell-bg:#344b37; } :root:not([data-theme="light"]) .heat-cell[data-level="2"] { --cell-bg:#4c6c45; } :root:not([data-theme="light"]) .heat-cell[data-level="3"] { --cell-bg:#7da069; } :root:not([data-theme="light"]) .heat-cell[data-level="4"] { --cell-bg:#bad49c; } }

.heat-cell[data-level="3"] { color:#162617; }

#keyboard-map[data-metric="error"] .heat-cell[data-level="1"],#keyboard-map[data-metric="interval"] .heat-cell[data-level="1"] { --cell-bg:#e8e1cf; color:#242d28; }
#keyboard-map[data-metric="error"] .heat-cell[data-level="2"],#keyboard-map[data-metric="interval"] .heat-cell[data-level="2"] { --cell-bg:#e8c9a4; color:#242d28; }
#keyboard-map[data-metric="error"] .heat-cell[data-level="3"],#keyboard-map[data-metric="interval"] .heat-cell[data-level="3"] { --cell-bg:#dca27b; color:#2f211a; }
#keyboard-map[data-metric="error"] .heat-cell[data-level="4"],#keyboard-map[data-metric="interval"] .heat-cell[data-level="4"] { --cell-bg:#c87b65; color:#251611; }
.data-actions label:focus-within { outline:3px solid var(--orange); outline-offset:3px; }

/* Shared tokens, separate introduction and practice surfaces. */
#onboarding { display:block; }
.onboarding-actions { display:flex; flex-wrap:wrap; gap:12px; grid-column:1/-1; }
.onboarding-actions a { display:inline-block; border:1px solid var(--line); border-radius:5px; padding:13px 24px; font-weight:600; text-decoration:none; }
.onboarding-actions .primary { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
.onboarding-actions a:hover { background:var(--ink); color:var(--bg); }
#onboarding .intro { row-gap:18px; }
#onboarding .intro>.small { grid-column:1/-1; }
#onboarding .showcase { margin-top:0; }
.practice-title { font-size:24px; letter-spacing:-1px; padding:26px 0; }

.practice-footer { display:flex; }

.icon { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; vertical-align:middle; }
.icon-button { min-width:40px; min-height:40px; display:inline-flex; align-items:center; justify-content:center; padding:8px; }
a>.icon,button:not(.icon-button)>.icon { margin-right:6px; }
.onboarding-actions a { display:inline-flex; align-items:center; }
/* Continuous low-contrast fever colour, never a flashing full-screen overlay. */
.feel-controls #effect-level { width:140px; } #effect-name { min-width:5em; color:var(--ink); }
.typing-card { position:relative; --fever-tint:color-mix(in srgb,var(--paper) 85%,var(--soft)); transition:box-shadow 350ms; }
.typing-card[data-fever="10"] { box-shadow:0 0 10px color-mix(in srgb,var(--accent) 15%,transparent); }
.typing-card[data-fever="25"] { box-shadow:0 0 18px color-mix(in srgb,var(--accent) 25%,transparent); }
.typing-card[data-fever="50"] { box-shadow:0 0 24px color-mix(in srgb,var(--orange) 30%,transparent); }
.typing-card[data-fever="100"] { box-shadow:0 0 30px color-mix(in srgb,var(--orange) 40%,transparent); }
.typing-card[data-fever]:not([data-fever="0"]) { background:linear-gradient(120deg,var(--paper),var(--fever-tint)); }
:root[data-effects="3"] .motion-cursor { box-shadow:-6px 0 0 color-mix(in srgb,var(--accent) 35%,transparent); }
:root[data-effects="4"] .motion-cursor { box-shadow:-6px 0 0 color-mix(in srgb,var(--accent) 40%,transparent),-12px 0 0 color-mix(in srgb,var(--accent) 18%,transparent); }
.combo-crack { text-decoration:line-through; clip-path:polygon(0 0,100% 0,95% 45%,100% 100%,0 100%,5% 50%); }

.effect-range { position:relative; display:inline-flex; padding-bottom:12px; } .effect-marks { position:absolute; bottom:-2px; left:8px; right:8px; display:flex; justify-content:space-between; font-size:9px; pointer-events:none; }

.typing-surface { position:relative; } .typing-surface #typing { display:block; }
.stroke-layer { position:absolute; inset:0; pointer-events:none; overflow:hidden; border-radius:4px; }
.caret-mirror { position:absolute; top:0; left:0; visibility:hidden; pointer-events:none; white-space:pre-wrap; overflow-wrap:break-word; border-style:solid; border-color:transparent; }
.stroke { position:absolute; display:block; pointer-events:none; font:17px/1.65 ui-monospace,'SFMono-Regular',Consolas,monospace; font-style:normal; }
.stroke-spark { border-radius:50%; background:currentColor; } .stroke-ripple { border:1px solid currentColor; border-radius:50%; } .stroke-glyph { white-space:pre; }
.caret-mirror { height:0; overflow:hidden; }

.showcase-tabs { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.showcase-tabs [role="tab"] { padding:10px 14px; background:var(--paper); color:var(--ink); border:1px solid var(--line); border-radius:4px; }
.showcase-tabs [aria-selected="true"] { border-color:var(--ink); box-shadow:inset 0 -3px var(--ink); font-weight:700; }
.showcase-hero video { aspect-ratio:16/9; }

/* Introduction v2: one container, shrinkable columns, shared spacing. */
.onboarding-page { --section-space:40px; }
.onboarding-page .shell { width:100%; max-width:1280px; padding-inline:clamp(24px,4vw,48px); }
.onboarding-page main,.onboarding-page section,.onboarding-page article,.onboarding-page figure,.onboarding-page figcaption,.onboarding-page nav,.onboarding-page header,.onboarding-page footer,.onboarding-page div { min-width:0; }
.onboarding-page p,.onboarding-page h1,.onboarding-page h2,.onboarding-page h3,.onboarding-page code,.landing-footer { overflow-wrap:anywhere; }
.landing-hero { padding:40px 0; display:grid; gap:16px; }
.hero-wordmark { font:800 clamp(48px,6vw,76px)/1.15 ui-monospace,'SFMono-Regular',Consolas,monospace; letter-spacing:-3px; }
.hero-value { font-size:clamp(21px,2.6vw,30px); font-weight:600; letter-spacing:-.8px; }
.hero-detail { color:var(--muted); font-size:15px; }
.onboarding-page .onboarding-actions { margin-top:8px; }
.onboarding-page .onboarding-actions a { display:inline-flex; align-items:center; gap:8px; padding:12px 20px; }
.onboarding-page .showcase,.landing-section { margin:0; padding:var(--section-space) 0; border-top:1px solid var(--line); }
.onboarding-page .showcase-heading { margin-bottom:20px; align-items:center; }
.onboarding-page .showcase-heading h2,.section-heading h2 { font-size:23px; margin-top:6px; }
.onboarding-page .showcase-hero { grid-template-columns:minmax(0,2fr) minmax(0,1fr); }
.onboarding-page .showcase-hero figcaption { padding:24px; font-size:15px; gap:16px; }
.section-heading { margin-bottom:20px; }
.track-grid,.mode-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.landing-card { display:flex; flex-direction:column; overflow:hidden; padding:20px; border:1px solid var(--line); border-radius:5px; background:var(--paper); }
.track-heading { display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; }
.track-heading h3 { font:700 22px ui-monospace,monospace; }
.availability { display:inline-block; font-size:12px; color:var(--muted); }
.availability.available { color:var(--accent); font-weight:700; }
.track-card code { display:block; font:14px/1.8 ui-monospace,monospace; margin:18px 0 12px; color:var(--accent); }
.track-card p,.mode-grid p,.feel-copy p,.privacy-section p { font-size:14px; line-height:1.8; color:var(--muted); }

.mode-grid h3 { font-size:18px; margin:8px 0; }
.mode-grid p+p,.feel-copy p+p,.privacy-section p+p { margin-top:8px; }
.keyping-definition { margin-top:24px; font-size:14px; }
.keyping-definition strong { color:var(--accent); }
.feel-section,.privacy-section { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); gap:24px; }
.feel-section .section-heading,.privacy-section .section-heading { margin:0; }
.onboarding-page .landing-footer { display:flex; gap:16px; align-items:center; padding:24px 0; font-size:12px; }
.landing-footer div { display:flex; flex-wrap:wrap; gap:12px 20px; margin:0; }
@media(max-width:900px) {
  .onboarding-page .showcase-hero { grid-template-columns:minmax(0,1fr); }
  .track-grid,.mode-grid { gap:14px; }
  .landing-card { padding:16px; }
}
@media(max-width:600px) {
  .onboarding-page { --section-space:28px; }
  .landing-hero { padding:28px 0; gap:14px; }
  .hero-wordmark { letter-spacing:-2px; }
  .track-grid,.mode-grid,.feel-section,.privacy-section { grid-template-columns:minmax(0,1fr); }
  .onboarding-page .showcase-heading { display:block; }
  .onboarding-page .showcase-heading>p { margin-top:10px; }
  .onboarding-page .showcase-hero figcaption { padding:18px; }
  .onboarding-page .landing-footer { align-items:flex-start; }
}

.card-number { font:12px ui-monospace,monospace; color:var(--muted); }
.card-art { display:block; width:180px; max-width:100%; height:100px; margin:12px auto 20px; color:var(--accent); flex-shrink:0; }
.landing-card:has(.card-action):hover { border-color:var(--accent); }
.card-action,.coming { display:flex; justify-content:space-between; gap:12px; margin-top:auto; padding-top:16px; border-top:1px solid var(--line); font-size:14px; font-weight:700; }
.landing-card p:last-of-type { margin-bottom:24px; }
.card-action { color:var(--accent); text-decoration:none; }
.coming { color:var(--muted); }
.status-tape { position:relative; isolation:isolate; display:flex; justify-content:center; align-items:center; min-height:38px; margin:0 0 24px; color:var(--ink); }
.status-tape::before { content:""; position:absolute; z-index:-1; inset:0 -40px; transform:rotate(-2deg); background:repeating-linear-gradient(135deg,var(--ink) 0 10px,var(--soft) 10px 20px); }
.status-tape span { padding:4px 8px; background:var(--paper); font-size:12px; font-weight:900; letter-spacing:.08em; line-height:1.5; text-align:center; }

/* Target and input share a text column; only content growth changes height. */
.code-target,#typing { font:20px/1.6 ui-monospace,'SFMono-Regular',Consolas,monospace; }
.code-target { padding:18px 13px 12px; }
#typing { min-height:58px; max-height:282px; height:58px; resize:none; overflow-y:auto; overflow-wrap:anywhere; }
#input-help { display:block; margin:0 0 8px 13px; }
#warning { margin:8px 13px; }
.stroke { font:20px/1.6 ui-monospace,'SFMono-Regular',Consolas,monospace; }
.input-size-measure { position:absolute; top:0; left:0; width:100%; height:0; overflow:hidden; visibility:hidden; pointer-events:none; }
.input-size-mirror { max-width:100%; white-space:pre-wrap; overflow-wrap:anywhere; }
.typing-card>.field-label { margin:0 13px 8px; }
.typing-footer { flex-wrap:wrap; }

.hero-guide { margin:0; display:grid; gap:12px; max-width:900px; }
.hero-guide>div { display:grid; grid-template-columns:120px minmax(0,1fr); gap:16px; }
.hero-guide dt { color:var(--ink); font-size:13px; font-weight:700; }
.hero-guide dd { margin:0; font-size:14px; line-height:1.7; overflow-wrap:anywhere; }
.hero-guide code { font-family:ui-monospace,'SFMono-Regular',Consolas,monospace; color:var(--accent); }
.hero-example { display:block; margin-top:6px; }
@media(max-width:600px) { .hero-guide>div { grid-template-columns:minmax(0,1fr); gap:4px; } }