: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); } .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; }