: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:var(--kp-font); font-size:var(--kp-fs-md); line-height:1.6; } button,select,textarea,input { font:inherit; } button,select { cursor:pointer; } button { border:1px solid var(--line); border-radius:var(--kp-radius); background:var(--paper); color:var(--ink); padding:10px var(--kp-4); 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:var(--kp-fs-lg); letter-spacing:-.5px; } h3 { font-size:var(--kp-fs-md); } [hidden] { display:none!important; } .shell { max-width:1280px; padding:0 var(--kp-12); 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 var(--kp-code-size) var(--kp-mono); 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:var(--kp-fs-xs); font-weight:700; letter-spacing:1.4px; color:var(--muted); } .quiet { background:transparent;   } .intro { display:grid; grid-template-columns:1.4fr 1fr; padding:54px 0 46px; align-items:center; gap:var(--kp-10); } .eyebrow { color:var(--orange); font-size:var(--kp-fs-xs); 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:var(--kp-fs-md); margin-top:20px; } .device-note { display:inline-block; font-size:var(--kp-fs-xs); margin-top:18px; padding:var(--kp-1) 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:var(--kp-fs-xs); 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:var(--kp-fs-xs); margin-top:22px; color:var(--muted); } .mode-bar { border-block:1px solid var(--line); padding:var(--kp-6) 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:var(--kp-2); flex-wrap:wrap; } button.primary { background:var(--accent); border-color:var(--accent); color:var(--accent-ink);  } button.primary:hover:not(:disabled) { background:var(--ink); color:var(--bg); } button.primary span { padding-left:var(--kp-4); } .secondary { padding:13px; } .duration { font-size:var(--kp-fs-sm); color:var(--muted); display:flex; align-items:center; gap:var(--kp-2); } select { color:var(--ink); border:1px solid var(--line); border-radius:var(--kp-1); background:var(--paper); padding:9px 7px; max-width:100%; } .practice-layout { display:grid; grid-template-columns:220px minmax(0,1fr); gap:var(--kp-10); padding-top:var(--kp-8); } .settings h2 { margin:5px 0 20px; } #stages { display:grid; gap:5px; } .stage { text-align:left; justify-content:flex-start; } .stage b { font:var(--kp-fs-sm) var(--kp-mono); color:inherit; }  .field-label { display:block; color:var(--muted); font-size:var(--kp-fs-md); margin:20px 0 7px; } #family-select { width:100%; } .checkbox { font-size:var(--kp-fs-md); display:flex; align-items:center; gap:var(--kp-2); margin-top:16px; } input[type="checkbox"] { accent-color:var(--accent); } .small { font-size:var(--kp-fs-xs); color:var(--muted); } .settings .small { margin-top:14px; } .metrics { display:grid; grid-template-columns:repeat(4,1fr); padding:0 0 22px; gap:var(--kp-3); } .metrics div { border-left:1px solid var(--line); padding-left:18px; } .metrics span { display:block; font-size:var(--kp-fs-xs); color:var(--muted); } .metrics strong { display:block; font:var(--kp-semibold) var(--kp-fs-xl) var(--kp-mono); margin-top:4px; letter-spacing:-1px; } .typing-card { background:var(--paper); border:1px solid var(--line); border-radius:var(--kp-radius-card); padding:var(--kp-6); } .typing-heading { display:flex; align-items:center; justify-content:space-between; gap:var(--kp-3); } .typing-heading h2 { font-size:var(--kp-fs-md); } #progress { font-size:var(--kp-fs-xs); color:var(--muted); white-space:nowrap; } #repeat-note { margin-top:5px; } .code-target { font:var(--kp-code-size)/1.9 var(--kp-mono); 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:var(--kp-1); background:var(--bg); color:var(--ink); font:var(--kp-fs-lg)/1.65 var(--kp-mono); padding:var(--kp-3); caret-color:var(--accent); } #typing:disabled { opacity:.6; } #warning { color:var(--error); font-size:var(--kp-fs-sm); min-height:22px; margin-top:5px; } .typing-footer { display:flex; gap:10px; align-items:center; justify-content:space-between; } #input-help { font-size:var(--kp-fs-sm); color:var(--muted); } .feedback { padding:var(--kp-4) 0 22px; display:flex; flex-wrap:wrap; gap:6px var(--kp-3); border-bottom:1px solid var(--line); font-size:var(--kp-fs-xs); } .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:var(--kp-fs-md); } .empty { font-size:var(--kp-fs-sm); color:var(--muted); padding:22px 0; } .round-row { margin-top:12px; padding:var(--kp-3) 0; border-bottom:1px solid var(--line); font-size:var(--kp-fs-xs); } .round-row p { margin-top:5px; color:var(--muted); overflow-wrap:anywhere; } .badge {   margin-left:7px;     } .weak { display:flex; flex-wrap:wrap; gap:var(--kp-2); font-size:var(--kp-fs-xs); padding-top:var(--kp-3); } .weak span { border:1px solid var(--line); border-radius:var(--kp-1); padding:var(--kp-1) var(--kp-2); } #summary { background:var(--soft); padding:var(--kp-4); margin-top:15px; border-radius:var(--kp-1); font-size:var(--kp-fs-sm); 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:var(--kp-fs-lg); margin-bottom:10px; } .about h3 { margin-bottom:10px; } .about p { font-size:var(--kp-fs-xs); color:var(--muted); max-width:490px; } #support-note { font-size:var(--kp-fs-xs); margin-top:10px; } footer { border-top:1px solid var(--line); padding:22px 0 35px; font-size:var(--kp-fs-xs); color:var(--muted); display:flex; justify-content:space-between; flex-wrap:wrap; gap:var(--kp-3); } footer div { display:flex; flex-wrap:wrap; gap:var(--kp-4); } 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:var(--kp-fs-xs); color:var(--muted); } .data-actions { display:flex; flex-wrap:wrap; gap:var(--kp-2); margin-top:16px; }  .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 var(--kp-6); } .mode-bar { align-items:flex-start; flex-direction:column; } .practice-layout { grid-template-columns:185px minmax(0,1fr); gap:var(--kp-6); } }
@media(max-width:760px) { .shell { padding:0 var(--kp-6); } .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:var(--kp-fs-md); } .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:var(--kp-fs-md); } #mobile-note p { font-size:var(--kp-fs-sm); color:var(--muted); margin-top:10px; } .about { grid-template-columns:1fr; margin-top:28px; gap:var(--kp-6); } footer { display:block; } footer div { margin:16px 0; } }


.feel-settings { font-size:var(--kp-fs-md); border-bottom:1px solid var(--line); padding:var(--kp-3) 0; color:var(--muted); } .feel-settings summary { cursor:pointer; width:fit-content;  padding:var(--kp-3) var(--kp-4);  border-radius:var(--kp-radius);  gap:var(--kp-2) var(--kp-4); } .feel-controls { display:flex; flex-wrap:wrap; gap:var(--kp-4); align-items:center; padding:15px 0 var(--kp-2); } .feel-controls label { display:flex; align-items:center; gap:6px; } .feel-controls select { padding:var(--kp-1) 7px; } .feel-controls input[type="range"] { width:var(--kp-range); 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:var(--kp-fs-2xs); letter-spacing:1px; } #combo { display:inline-block; min-width:2ch; font:600 var(--kp-fs-xl) var(--kp-mono); } #combo-word { font-size:var(--kp-fs-xs); 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:var(--kp-8); } .showcase-heading { display:flex; justify-content:space-between; gap:20px; align-items:end; margin-bottom:22px; } .showcase-heading h2 { margin-top:8px; font-size:var(--kp-fs-xl); } .showcase-heading p:last-child { font-size:var(--kp-fs-xs); 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:var(--kp-radius-card); overflow:hidden; } .showcase-hero video { width:100%; aspect-ratio:1280/900; object-fit:contain; background:var(--bg); display:block; } .showcase-hero figcaption { padding:var(--kp-8); display:flex; flex-direction:column; justify-content:center; gap:20px; font-size:var(--kp-fs-lg); } .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:var(--kp-radius); 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:var(--kp-fs-xs); margin-top:8px; }
@media(max-width:760px) { .showcase { margin-top:28px; } .showcase-heading { display:block; } .showcase-heading h2 { font-size:var(--kp-fs-xl); } .showcase-heading>p { margin-top:12px; } .showcase-hero { grid-template-columns:1fr; } .showcase-hero figcaption { padding:18px; font-size:var(--kp-fs-md); } .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:var(--kp-2); }  .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:var(--kp-radius); padding:var(--kp-4); } .heat-title { display:flex; align-items:center; justify-content:space-between; gap:var(--kp-3); } .heat-title label { display:flex; align-items:center; gap:var(--kp-2); font-size:var(--kp-fs-sm); color:var(--muted); }  .heat-section p { margin:8px 0 14px; } .heat-scroll { overflow-x:auto; max-width:100%; } #keyboard-map { min-width:640px; padding:var(--kp-2) 0; } .key-row { display:flex; gap:var(--kp-1); margin-bottom:4px; } .key-row:nth-child(2) { padding-left:var(--kp-3); } .key-row:nth-child(3) { padding-left:22px; } .key-row:nth-child(4) { padding-left:var(--kp-8); } .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:var(--kp-fs-2xs)/var(--kp-lh) var(--kp-mono); border:1px solid var(--line); border-radius:var(--kp-radius); padding:var(--kp-1); min-width:var(--kp-target); min-height:var(--kp-target); } .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:var(--kp-radius); color:var(--muted); font-size:var(--kp-fs-2xs); } .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,var(--kp-target)); grid-auto-flow:column; grid-template-columns:repeat(12,minmax(var(--kp-target),1fr)); gap:var(--kp-1); } #calendar-map .heat-cell { padding:0; min-height:var(--kp-target); } #family-map table { width:100%; border-collapse:separate; border-spacing:3px; table-layout:fixed; min-width:640px; font-size:var(--kp-fs-2xs); } #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:var(--kp-3); grid-column:1/-1; }
.onboarding-actions a { display:inline-block; border:1px solid var(--line); border-radius:var(--kp-radius); padding:13px var(--kp-6); 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:var(--kp-fs-xl); 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:var(--kp-2); }
a>.icon:not(.kp-icon),button:not(.icon-button)>.icon:not(.kp-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:var(--kp-range); } #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:var(--kp-3); } .effect-marks { position:absolute; bottom:-2px; left:8px; right:8px; display:flex; justify-content:space-between; font-size:var(--kp-fs-2xs); 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:var(--kp-1); }
.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:var(--kp-code-size)/var(--kp-lh) var(--kp-mono); 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:var(--kp-2); margin-bottom:12px; }
.showcase-tabs [role="tab"] {  background:var(--paper); color:var(--ink); border:1px solid var(--line);  }
.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(var(--kp-6),4vw,var(--kp-12)); }
.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:var(--kp-10) 0; display:grid; gap:var(--kp-4); }
.hero-wordmark { font:800 clamp(48px,6vw,76px)/1.15 var(--kp-mono); letter-spacing:-3px; }
.hero-value { font-size:var(--kp-fs-xl); font-weight:600; letter-spacing:-.8px; }
.hero-detail { color:var(--muted); font-size:var(--kp-fs-md); }
.onboarding-page .onboarding-actions { margin-top:8px; }
.onboarding-page .onboarding-actions a { display:inline-flex; align-items:center; gap:var(--kp-2); padding:var(--kp-1) var(--kp-4); }
.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:var(--kp-fs-xl); margin-top:6px; }
.onboarding-page .showcase-hero { grid-template-columns:minmax(0,2fr) minmax(0,1fr); }
.onboarding-page .showcase-hero figcaption { padding:var(--kp-6); font-size:var(--kp-fs-md); gap:var(--kp-4); }
.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;     }
.track-heading { display:flex; flex-wrap:wrap; gap:var(--kp-3); align-items:center; justify-content:space-between; }
.track-heading h3 { font:700 var(--kp-fs-lg) var(--kp-mono); }
.track-card code { display:block; font:var(--kp-fs-md)/1.8 var(--kp-mono); margin:18px 0 12px; color:var(--accent); }
.track-card p,.mode-grid p,.feel-copy p,.privacy-section p { font-size:var(--kp-fs-md); line-height:1.8; color:var(--muted); }

.mode-grid h3 { font-size:var(--kp-fs-lg); 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:var(--kp-fs-md); }
.keyping-definition strong { color:var(--accent); }
.feel-section,.privacy-section { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); gap:var(--kp-6); }
.feel-section .section-heading,.privacy-section .section-heading { margin:0; }
.onboarding-page .landing-footer { display:flex; gap:var(--kp-4); align-items:center; padding:var(--kp-6) 0; font-size:var(--kp-fs-xs); }
.landing-footer div { display:flex; flex-wrap:wrap; gap:var(--kp-3) 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 {  }
}
@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:var(--kp-fs-xs) var(--kp-mono); 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:var(--kp-3); margin-top:auto; padding-top:var(--kp-4); border-top:1px solid var(--line); font-size:var(--kp-fs-md); 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:var(--kp-1) var(--kp-2); background:var(--paper); font-size:var(--kp-fs-xs); 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:var(--kp-code-size)/var(--kp-lh) var(--kp-mono); }
.code-target { padding:18px 13px var(--kp-3); }
#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:var(--kp-code-size)/var(--kp-lh) var(--kp-mono); }
.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; min-height:44px; }
.typing-footer + #input-help { margin-top:var(--kp-2); }

.hero-guide { margin:0; display:grid; gap:var(--kp-3); max-width:900px; }
.hero-guide>div { display:grid; grid-template-columns:120px minmax(0,1fr); gap:var(--kp-4); }
.hero-guide dt { color:var(--ink); font-size:var(--kp-fs-sm); font-weight:700; }
.hero-guide dd { margin:0; font-size:var(--kp-fs-md); line-height:1.7; overflow-wrap:anywhere; }
.hero-guide code { font-family:var(--kp-mono); color:var(--accent); }
.hero-example { display:block; margin-top:6px; }
@media(max-width:600px) { .hero-guide>div { grid-template-columns:minmax(0,1fr); gap:var(--kp-1); } }
/* B: compact track controls and actual LF layout; existing input sizing stays shared. */
.track-controls { display:flex; flex-wrap:wrap; gap:var(--kp-2); font-size:var(--kp-fs-md); }
.track-controls label { display:flex; align-items:center; gap:var(--kp-2); }
.target-char.line-break { display:inline; }
/* C2: isolated WOD surface, shared skill layout stays intact. */
.wod-active #workspace > :not(#data-tools) { display:none; }
#wod-panel { max-width:1000px; margin:24px auto; padding:clamp(var(--kp-4),4vw,var(--kp-12)); border:var(--kp-border) solid var(--line); border-radius:var(--kp-radius-card); }
#wod-panel[hidden] { display:none; }
#wod-panel nav { display:flex; gap:var(--kp-6); flex-wrap:wrap; }
#wod-panel h2 { font-size:var(--kp-code-size); margin:20px 0; }
#wod-panel p { line-height:1.7; overflow-wrap:anywhere; }
#wod-panel button { margin:var(--kp-2) var(--kp-2) var(--kp-2) var(--kp-0); }
#wod-target { white-space:pre-wrap; overflow-wrap:anywhere; font-size:var(--kp-code-size); line-height:var(--kp-lh); padding:var(--kp-4) calc(var(--kp-3) + var(--kp-border)); }
#wod-input, #wod-share { width:100%; box-sizing:border-box; font:var(--kp-code-size)/var(--kp-lh) var(--kp-mono); resize:vertical; }
#wod-hud { font-variant-numeric:tabular-nums; font-weight:700; }
#wod-status { min-height:2em; font-weight:700; }
.wod-entry { display:inline-block; margin-bottom:16px; }
@media(max-width:760px) { #wod-panel { margin:16px 0; } #wod-panel nav { gap:18px; } }

#wod-target .wod-correct { opacity:.55; }
#wod-target .wod-cursor { text-decoration:underline; text-underline-offset:6px; }
/* C1 launch stays isolated from the practice layout. */
#launch-options { display:grid; gap:14px; min-width:0; }
#launch-options fieldset { display:flex; flex-wrap:wrap; gap:10px; border:0; padding:0; margin:0; min-width:0; }
#launch-options legend { font-size:var(--kp-fs-md); color:var(--muted); margin-bottom:10px; }
.launch-chip { display:flex; flex-wrap:nowrap; align-items:center; gap:var(--kp-2); border:1px solid var(--line); border-radius:var(--kp-radius);  background:var(--paper);  overflow:hidden; }
.launch-chip:has(:checked) { border-color:var(--accent); box-shadow:inset 0 -2px var(--accent); }
.launch-chip input { width:var(--kp-check); height:var(--kp-check); margin:var(--kp-0); accent-color:var(--accent); }
.launch-chip:focus-within { outline:3px solid var(--orange); outline-offset:3px; }
.availability-badge { display:inline-block; flex-shrink:0; padding:0 var(--kp-1); border:1px solid var(--muted); border-radius:var(--kp-1); color:var(--muted); font-size:var(--kp-fs-xs); font-weight:600; line-height:1; white-space:nowrap; }
#launch-terminal { font:var(--kp-fs-md)/1.7 var(--kp-mono); color:var(--accent); }
#launch-terminal { margin:0; padding:var(--kp-3); border:1px solid var(--line); background:var(--paper); white-space:pre-wrap; }
#launch-status { min-height:18px; }
.hero-wordmark { font-size:var(--kp-display-brand); letter-spacing:-2px; }
#start-practice[aria-disabled="true"] { background:var(--soft); color:var(--ink); }
#launch-word { text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:7px; }
@media(max-width:600px) {
  .launch-chip { width:calc(50% - 5px); min-width:max-content; gap:var(--kp-2);   }
}

/* Discoverable feel settings, scoped to the existing details panel. */
.feel-settings { padding:var(--kp-3) 0; font-size:var(--kp-fs-md); }
.feel-settings summary { display:flex; align-items:center; flex-wrap:wrap; gap:var(--kp-2) var(--kp-4); width:100%; padding:var(--kp-3) var(--kp-4); border:1px solid var(--line); border-radius:var(--kp-radius); background:var(--soft); color:var(--ink); list-style:none; }
.feel-settings summary::-webkit-details-marker { display:none; }
.feel-settings summary:hover { border-color:var(--accent); }
.feel-settings summary:focus-visible { outline:3px solid var(--orange); outline-offset:3px; }
.feel-title { display:inline-flex; align-items:center; gap:var(--kp-2); font-size:var(--kp-fs-md); font-weight:700; }
.feel-summary { color:var(--ink); font-size:var(--kp-fs-md); overflow-wrap:anywhere; }
.feel-chevron { width:8px; height:8px; margin-left:auto; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); }
.feel-settings[open] .feel-chevron { transform:rotate(225deg); }
.feel-settings .feel-controls { gap:var(--kp-4) var(--kp-6); padding:var(--kp-4) var(--kp-4) var(--kp-3); }
.feel-settings .feel-controls label { font-size:var(--kp-fs-md); flex-wrap:wrap; gap:var(--kp-2); color:var(--ink); }
.feel-settings .feel-controls small,.feel-settings>.small { font-size:var(--kp-fs-sm); color:var(--muted); }
.feel-settings>.small { padding:0 var(--kp-4) 14px; }
.feel-settings.feel-discover summary { animation:feel-discover 900ms ease-out 1; }
@keyframes feel-discover { 50% { box-shadow:0 0 0 3px var(--soft); border-color:var(--accent); } }
@media(prefers-reduced-motion:reduce) { .feel-settings.feel-discover summary { animation:none; } }

/* FX heat lives outside text backgrounds; slow, low-contrast edge glow only. */
:root { --fx-heat-color:var(--accent); --fx-glow:0; }
:root[data-fx-heat="10"] { --fx-heat-color:var(--accent); --fx-glow:12; }
:root[data-fx-heat="25"] { --fx-heat-color:var(--orange); --fx-glow:20; }
:root[data-fx-heat="50"] { --fx-heat-color:#c74e60; --fx-glow:28; }
:root[data-fx-heat="100"] { --fx-heat-color:#ac87de; --fx-glow:36; }
:root[data-extreme="true"]::after { content:""; position:fixed; inset:0; pointer-events:none; z-index:5; box-shadow:inset 0 0 calc(var(--fx-glow)*2px) color-mix(in srgb,var(--fx-heat-color) 12%,transparent); }
:root[data-extreme="true"]:not([data-fx-heat="0"])::after { animation:fx-breathe 3s ease-in-out infinite alternate; }
:root[data-extreme="true"] #typing { border-color:var(--fx-heat-color); transition:border-color 350ms; }
.fx-slam { position:fixed; top:45%; left:50%; z-index:8; pointer-events:none; white-space:nowrap; font:900 clamp(28px,6vw,84px)/1 ui-monospace,monospace; color:var(--ink); background:var(--paper); padding:12px 20px; border:2px solid var(--fx-heat-color); text-shadow:-2px 0 color-mix(in srgb,var(--orange) 35%,transparent),2px 0 color-mix(in srgb,var(--accent) 35%,transparent); }
.spark.fx-radial { position:fixed; top:45%; left:50%; z-index:7; width:7px; height:7px; background:var(--fx-heat-color); }
.fx-shockwave { position:absolute; inset:0; border:3px solid var(--fx-heat-color); border-radius:6px; pointer-events:none; }
@keyframes fx-breathe { from { opacity:.45; } to { opacity:1; } }
@media(prefers-reduced-motion:reduce) { :root[data-extreme]::after { display:none; animation:none; } .fx-slam,.fx-radial,.fx-shockwave { display:none; } }

.fx-vignette { position:fixed; inset:0; pointer-events:none; z-index:4; box-shadow:inset 0 0 80px 12px color-mix(in srgb,var(--accent) 8%,transparent); }
@media(prefers-reduced-motion:reduce) { .fx-vignette { display:none; } }
:root[data-effects="off"] .badge,:root[data-effects="1"] .badge { animation:none; }
:root[data-effects="1"] .motion-cursor { display:none; }

/* WOD equipment display: static light, no flashing or animation. */
.wod-instruments { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap:var(--kp-3) 20px; margin: 16px 0; }
.wod-instruments:has(#wod-timer[hidden]) { display: none; }
#wod-hud { flex: 1 1 320px; }
#wod-timer { --wod-timer-height: 52px; width: 220px; height: var(--wod-timer-height); flex: 0 0 220px; box-sizing: border-box; margin: 0; background: #090c0b; border: 2px solid #4b5650; border-radius: 3px; padding: 4px 8px; box-shadow: inset 0 0 0 3px #181e1a; }
#wod-timer svg { display: block; width: 100%; height: 100%; }
@media(max-width:760px) { #wod-timer { order: -1; } #wod-hud { flex-basis: 100%; } }
.wod-led-label { fill: #52efb8; }
.wod-led-digit { fill: #ff454f; }
.wod-timer-text { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#wod-away-dialog { max-width: min(520px, calc(100% - 32px)); padding:var(--kp-6); background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-radius:var(--kp-radius-card); }
#wod-away-dialog::backdrop { background: rgb(0 0 0 / .6); }
#wod-away-dialog h2 { font-size:var(--kp-fs-xl); margin-top: 0; }
#wod-away-dialog p { margin-bottom: 20px; }
/* WOD result DOM uses shared tokens; canvas share output is independent. */
#wod-result { --wod-result-space: var(--kp-6); --wod-result-radius: var(--kp-radius-card); --wod-result-score: var(--kp-fs-xl); margin-top: var(--wod-result-space); padding:var(--wod-result-space); border: 1px solid var(--line); border-radius:var(--wod-result-radius); background: var(--paper); }
#wod-result-heading { font-size:var(--kp-fs-lg); }
#wod-result #wod-score { font-size: var(--wod-result-score); font-weight: 800; font-variant-numeric: tabular-nums; margin-block: var(--wod-result-space); }
#wod-record-context { color: var(--accent); font-weight: 700; }
#wod-movements { padding-left:var(--wod-result-space); }
.wod-image-tools { margin-block: var(--wod-result-space); }
.wod-image-tools label { display: block; }
#wod-image-preview { display: block; width: min(100%, 240px); height: auto; margin-top: var(--wod-result-space); border: 1px solid var(--line); }
#wod-pattern-link { display: inline-block; padding:10px 0; }

#wod-result #wod-image-size { border: 0; padding:0; margin: 0; }
#wod-result #wod-image-size label { display: inline-flex; align-items: center; gap:var(--kp-2); margin-right: 12px; }

/* Footer version text shares the footer type scale instead of UA small sizing. */
footer small { font-size:var(--kp-fs-xs); }

/* Static syntax colors: typing state selectors retain priority. */
:root {
 --syntax-keyword:#625077;
 --syntax-builtin:#385d70;
 --syntax-string:#765b32;
 --syntax-number:#a74725;
 --syntax-comment:#667168;
 --syntax-name:#242d28;
 --syntax-option:var(--syntax-keyword);
 --syntax-operator:var(--syntax-name);
 --syntax-punct:var(--syntax-name);
 --syntax-space:var(--syntax-name);
}
:root[data-theme="dark"] {
 --syntax-keyword:#c6b3e3;
 --syntax-builtin:#9fc5d4;
 --syntax-string:#e4bc68;
 --syntax-number:#f0a27d;
 --syntax-comment:#aab6a9;
 --syntax-name:#e9ecdf;
}

@media(prefers-color-scheme:dark) {
:root:not([data-theme="light"]) {
 --syntax-keyword:#c6b3e3;
 --syntax-builtin:#9fc5d4;
 --syntax-string:#e4bc68;
 --syntax-number:#f0a27d;
 --syntax-comment:#aab6a9;
 --syntax-name:#e9ecdf;
}
}
#target .target-char[data-syntax="keyword"]:not(.typed):not(.cursor):not(.wrong),
#wod-target > [data-syntax="keyword"]:not(.wod-correct):not(.wod-cursor):not(.wrong) { color:var(--syntax-keyword); }
#target .target-char[data-syntax="builtin"]:not(.typed):not(.cursor):not(.wrong),
#wod-target > [data-syntax="builtin"]:not(.wod-correct):not(.wod-cursor):not(.wrong) { color:var(--syntax-builtin); }
#target .target-char[data-syntax="string"]:not(.typed):not(.cursor):not(.wrong),
#wod-target > [data-syntax="string"]:not(.wod-correct):not(.wod-cursor):not(.wrong) { color:var(--syntax-string); }
#target .target-char[data-syntax="number"]:not(.typed):not(.cursor):not(.wrong),
#wod-target > [data-syntax="number"]:not(.wod-correct):not(.wod-cursor):not(.wrong) { color:var(--syntax-number); }
#target .target-char[data-syntax="comment"]:not(.typed):not(.cursor):not(.wrong),
#wod-target > [data-syntax="comment"]:not(.wod-correct):not(.wod-cursor):not(.wrong) { color:var(--syntax-comment); }
#target .target-char[data-syntax="name"]:not(.typed):not(.cursor):not(.wrong),
#wod-target > [data-syntax="name"]:not(.wod-correct):not(.wod-cursor):not(.wrong) { color:var(--syntax-name); }
#target .target-char[data-syntax="option"]:not(.typed):not(.cursor):not(.wrong),
#wod-target > [data-syntax="option"]:not(.wod-correct):not(.wod-cursor):not(.wrong) { color:var(--syntax-option); }
#target .target-char[data-syntax="operator"]:not(.typed):not(.cursor):not(.wrong),
#wod-target > [data-syntax="operator"]:not(.wod-correct):not(.wod-cursor):not(.wrong) { color:var(--syntax-operator); }
#target .target-char[data-syntax="punct"]:not(.typed):not(.cursor):not(.wrong),
#wod-target > [data-syntax="punct"]:not(.wod-correct):not(.wod-cursor):not(.wrong) { color:var(--syntax-punct); }
#target .target-char[data-syntax="space"]:not(.typed):not(.cursor):not(.wrong),
#wod-target > [data-syntax="space"]:not(.wod-correct):not(.wod-cursor):not(.wrong) { color:var(--syntax-space); }
@media(forced-colors:active) {
  #target .target-char[data-syntax]:not(.typed):not(.cursor):not(.wrong),
  #wod-target > [data-syntax]:not(.wod-correct):not(.wod-cursor):not(.wrong) { color:CanvasText; }
}