@font-face{font-family:'SK Inter';src:url('/fonts/inter.ttf') format('truetype');font-weight:100 900;font-display:swap}
@font-face{font-family:'SK Manrope';src:url('/fonts/manrope.ttf') format('truetype');font-weight:100 900;font-display:swap}
@font-face{font-family:'SK DM Sans';src:url('/fonts/dmsans.ttf') format('truetype');font-weight:100 900;font-display:swap}
@font-face{font-family:'SK Plus Jakarta Sans';src:url('/fonts/plusjakartasans.ttf') format('truetype');font-weight:100 900;font-display:swap}
@font-face{font-family:'SK Outfit';src:url('/fonts/outfit.ttf') format('truetype');font-weight:100 900;font-display:swap}
@font-face{font-family:'SK Nunito Sans';src:url('/fonts/nunitosans.ttf') format('truetype');font-weight:100 900;font-display:swap}
@font-face{font-family:'SK Rubik';src:url('/fonts/rubik.ttf') format('truetype');font-weight:100 900;font-display:swap}
@font-face{font-family:'SK Source Sans 3';src:url('/fonts/sourcesans3.ttf') format('truetype');font-weight:100 900;font-display:swap}
@font-face{font-family:'SK IBM Plex Sans';src:url('/fonts/ibmplexsans.ttf') format('truetype');font-weight:100 900;font-display:swap}
@font-face{font-family:'SK JetBrains Mono';src:url('/fonts/jetbrainsmono.ttf') format('truetype');font-weight:100 900;font-display:swap}

/* ── Design tokens ─────────────────────────────────────────────── */
:root{
  color-scheme:dark;
  --bg:#333333; --raise:#3c3a3a; --panel:#383636; --panel2:#4a4744;
  --line:#494646; --line-soft:#3f3c3c;
  --text:#bdb9b9; --muted:#8e8989; --faint:#7b7575; --bright:#e1dddd;
  --accent:#c2a15c; --accent-soft:#a29356;
  --green:#a4bd97; --error:#9b4545;
  --slow-key:#8c1818; --fast-key:#448154;
  --key-top:#666968; --key-bottom:#424645;
  --case-top:#303432; --case-bottom:#202522;
  --page-bg:
    radial-gradient(circle at 1px 1px,#ffffff09 1px,transparent 0) 0 0/24px 24px,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E"),
    radial-gradient(1100px 520px at 78% -12%, #ffffff0a, transparent 60%),
    radial-gradient(900px 500px at -10% 110%, #c2a15c08, transparent 55%),
    var(--bg);
  --radius-s:4px; --radius-m:6px; --radius-l:10px; --radius-case:16px;
  font:15px Arial,Helvetica,sans-serif;
}
body[data-theme="light"]{
  color-scheme:light;
  --bg:#e9e7e2; --raise:#f4f2ee; --panel:#f1efe9; --panel2:#ddd9d1;
  --line:#d3cec5; --line-soft:#ddd8d0;
  --text:#463f38; --muted:#7d746a; --faint:#8a8175; --bright:#28231e;
  --accent:#9a6d22; --accent-soft:#b08c3e;
  --green:#5d7a48; --error:#a2453c;
  --slow-key:#a2453c; --fast-key:#4d7c57;
  --key-top:#dcd8d2; --key-bottom:#b9b4ac;
  --case-top:#cfccc5; --case-bottom:#b3aea5;
  --page-bg:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E"),
    radial-gradient(1100px 520px at 78% -12%, #ffffff80, transparent 60%),
    radial-gradient(900px 500px at -10% 110%, #9a6d2212, transparent 55%),
    var(--bg);
}
body[data-theme="coffee"]{
  --bg:#2d2521; --raise:#38302a; --panel:#352c26; --panel2:#463a31;
  --line:#453a32; --line-soft:#3c322b;
  --text:#cfc3b3; --muted:#948576; --faint:#7d6f61; --bright:#ecdfd0;
  --accent:#cf9250; --accent-soft:#b07f43;
  --green:#a3ac7f; --error:#b05648;
  --key-top:#665850; --key-bottom:#443a33;
  --case-top:#38302b; --case-bottom:#271f1b;
  --page-bg:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.07'/%3E%3C/svg%3E"),
    radial-gradient(1000px 500px at 80% -10%, #cf925014, transparent 60%),
    radial-gradient(800px 480px at 0% 110%, #00000030, transparent 55%),
    var(--bg);
}
body[data-theme="forest"]{
  --bg:#252b25; --raise:#2e352d; --panel:#2c332c; --panel2:#3a453a;
  --line:#3a453a; --line-soft:#333d33;
  --text:#bcc5b3; --muted:#8a947f; --faint:#74806c; --bright:#e2e9d8;
  --accent:#a5b86b; --accent-soft:#8ba05a;
  --green:#93b377; --error:#ad5c50;
  --key-top:#5f6b5c; --key-bottom:#3e473d;
  --case-top:#2f3830; --case-bottom:#202720;
  --page-bg:
    radial-gradient(circle at 1px 1px,#a5b86b10 1px,transparent 0) 0 0/26px 26px,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E"),
    radial-gradient(1000px 500px at 80% -10%, #a5b86b12, transparent 60%),
    radial-gradient(800px 480px at 0% 110%, #00000028, transparent 55%),
    var(--bg);
}
body[data-theme="ocean"]{
  --bg:#232a31; --raise:#2b333c; --panel:#29313a; --panel2:#36424e;
  --line:#37434f; --line-soft:#303b46;
  --text:#b9c4cc; --muted:#87939e; --faint:#72808c; --bright:#dfe8ee;
  --accent:#6fa5c0; --accent-soft:#5c8ca4;
  --green:#7fa88f; --error:#b05c54;
  --key-top:#5b6a76; --key-bottom:#3d4850;
  --case-top:#2c353e; --case-bottom:#1e252c;
  --page-bg:
    repeating-linear-gradient(174deg,transparent 0 42px,#6fa5c00f 42px 44px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E"),
    radial-gradient(1000px 500px at 80% -10%, #6fa5c014, transparent 60%),
    radial-gradient(800px 480px at 0% 110%, #00000030, transparent 55%),
    var(--bg);
}
body[data-theme="graphite"]{
  --bg:#2a2a2c; --raise:#333336; --panel:#303033; --panel2:#414146;
  --line:#444449; --line-soft:#3b3b40;
  --text:#bab8bc; --muted:#8a888e; --faint:#747278; --bright:#e2e0e4;
  --accent:#a09a86; --accent-soft:#8a8574;
  --green:#9aab90; --error:#a8544c;
  --key-top:#626266; --key-bottom:#434347;
  --case-top:#313134; --case-bottom:#222225;
  --page-bg:
    linear-gradient(#44444926 1px,transparent 1px) 0 0/100% 28px,
    linear-gradient(90deg,#44444926 1px,transparent 1px) 0 0/28px 100%,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E"),
    radial-gradient(1000px 500px at 80% -10%, #ffffff08, transparent 60%),
    radial-gradient(800px 480px at 0% 110%, #0000002a, transparent 55%),
    var(--bg);
}

/* ── Base ──────────────────────────────────────────────────────── */
*{box-sizing:border-box}
body{margin:0;background:var(--page-bg);background-attachment:fixed;color:var(--text)}
button,input,select{font:inherit}
button,a{-webkit-tap-highlight-color:transparent}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
button:focus-visible,a:focus-visible,select:focus-visible,.symbol:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
button:hover,a:hover{color:var(--bright)}
[hidden]{display:none!important}
b{font-weight:400}

/* ── Layout ────────────────────────────────────────────────────── */
.layout{max-width:1500px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:48px;padding:48px 32px 36px;min-height:100vh}
main{min-width:0}
.practice{min-height:480px;max-width:1060px;margin:0 auto;display:flex;flex-direction:column}
.sidebar{color:var(--text);font-size:13px;align-self:start;display:flex;flex-direction:column;gap:16px}
main footer{max-width:1060px;margin:28px auto 0;font-size:11px;line-height:1.8;color:var(--faint)}
footer button{background:none;border:0;color:var(--muted);padding:0;font-size:11px;text-decoration:underline;text-underline-offset:2px;flex-shrink:0}

/* ── View modes ────────────────────────────────────────────────── */
body[data-view="compact"] .keyboard-section{display:none}
body[data-view="bare"] .keyboard-section,body[data-view="bare"] .symbol-map,body[data-view="bare"] .metric-line,body[data-view="bare"] .sidebar{display:none}
body[data-view="bare"] .layout{grid-template-columns:minmax(0,1fr);max-width:960px}
body[data-view="bare"] .practice{max-width:860px}

/* ── Toolbar ───────────────────────────────────────────────────── */
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:36px}
.metric-line{display:flex;align-items:baseline;gap:20px;flex-wrap:wrap;font-size:15px}
.metric-line b{font:15px ui-monospace,SFMono-Regular,Consolas,monospace;color:var(--bright);font-weight:400}
.metric-line small{font-size:12px;color:var(--muted)}
.toolbar-right{display:flex;align-items:center;gap:14px}
.tools{display:flex;gap:4px}
.tools button{min-width:36px;height:32px;border:1px solid var(--line);border-radius:var(--radius-s);background:var(--panel);color:var(--muted);font-size:19px;line-height:1}
.tools button:hover{color:var(--bright);background:var(--panel2)}
.view-switch{display:flex;gap:4px}
.view-switch button{padding:7px 12px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-s);color:var(--muted);font-size:12px}
.view-switch button[aria-pressed=true]{background:var(--panel2);color:var(--bright);border-color:var(--accent-soft)}

/* ── Typing area ───────────────────────────────────────────────── */
.typing-area{position:relative;margin:36px 0 0;padding:16px 12px 36px;min-height:130px;cursor:text}
.typing-area #command{font:600 36px/1.65 ui-monospace,SFMono-Regular,Consolas,'Liberation Mono',monospace;letter-spacing:.2px;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--text);min-height:60px}
#command .typed{color:var(--faint)}
#command .current{color:var(--bright);border-bottom:3px solid var(--accent)}
#command .mistake{color:var(--error)}
#command .mistake-space{background:color-mix(in srgb,var(--error) 20%,transparent);box-shadow:inset 0 -2px var(--error)}
#capture{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;opacity:0;cursor:text;caret-color:transparent;font-size:16px}
#capture:focus{outline:0}
.typing-area:focus-within .current{border-bottom-color:var(--accent)}
.focus-state{position:absolute;bottom:6px;left:12px;font-size:12px;color:var(--muted);pointer-events:none}
.typing-area:focus-within .focus-state{visibility:hidden}

/* ── Symbol map ────────────────────────────────────────────────── */
.symbol-map{margin:36px auto 0;max-width:1060px;text-align:center}
#symbol-map{display:flex;justify-content:center;flex-wrap:wrap;gap:4px}
.symbol-row{display:contents}
.symbol{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:30px;padding:0 5px;border:1px solid var(--line);border-radius:var(--radius-s);background:var(--panel);color:var(--faint);font:14px ui-monospace,Consolas,monospace;cursor:help}
.symbol.in-command{color:var(--text);background:var(--panel2)}
.symbol.practiced{background:color-mix(in srgb,var(--fast-key) 26%,var(--panel));border-color:color-mix(in srgb,var(--fast-key) 45%,var(--line));color:var(--text)}
.symbol.trouble{background:color-mix(in srgb,var(--slow-key) 32%,var(--panel));border-color:color-mix(in srgb,var(--slow-key) 50%,var(--line));color:var(--bright)}
.symbol.next{background:var(--accent-soft);border-color:var(--accent);color:var(--bg);box-shadow:inset 0 -2px var(--accent)}
.symbol.guided-focus{outline:2px dashed var(--accent);outline-offset:1px}
.symbol.guided-locked{opacity:.32}
.symbol.space{min-width:76px;font-size:11px}

/* ── Keyboard ──────────────────────────────────────────────────── */
.keyboard-section{margin:36px auto 0;max-width:1140px;width:100%}
.keyboard-display{width:100%;overflow-x:auto;overscroll-behavior:contain;padding:0 2px 12px;scrollbar-color:var(--line) var(--bg);scrollbar-width:thin}
.keyboard-display svg{display:block;width:100%;min-width:760px;height:auto}
.key-face-top{stop-color:var(--key-top)}
.key-face-bottom{stop-color:var(--key-bottom)}
.key-case-top{stop-color:var(--case-top)}
.key-case-bottom{stop-color:var(--case-bottom)}
.keyboard-case{fill:url(#key-case);stroke:color-mix(in srgb,var(--key-top) 55%,var(--line));stroke-width:2}
.keycap-base{fill:color-mix(in srgb,var(--case-bottom) 82%,#000);stroke:var(--case-bottom);stroke-width:1.3}
.keycap-face{fill:var(--finger-color,url(#key-face));stroke:color-mix(in srgb,var(--key-top) 70%,var(--bright));stroke-width:1}
.no-finger-colors .keycap-face{fill:url(#key-face)}
.keycap-legend{fill:var(--bright);font-family:var(--key-font,'SK Inter'),sans-serif;font-size:22px;font-weight:400;pointer-events:none}
.keycap-legend.functional{font-size:12px;letter-spacing:0}
.keycap-secondary{fill:color-mix(in srgb,var(--bright) 78%,transparent);font:10.5px var(--key-font,'SK Inter'),sans-serif;pointer-events:none}
.keycap-inherit{fill:var(--green);font:10px var(--key-font,'SK Inter'),sans-serif}
.keycap-disabled{opacity:.35}
.keycap-homing{fill:var(--bright);opacity:.6}
.keycap-target .keycap-face{stroke:var(--accent)}
.keycap-target .keycap-legend,.keycap-target .keycap-secondary{fill:var(--bright)}
.keycap-shift .keycap-face{stroke:var(--accent-soft)}
.keycap-layer-switch .keycap-face{stroke:var(--green);stroke-dasharray:4 2}
.keycap-heat .keycap-face{fill:color-mix(in srgb,var(--slow-key) var(--heat,40%),var(--finger-color,transparent));stroke:var(--slow-key);stroke-width:1.5}
.keycap-target .keycap-face,.keycap-shift .keycap-face,.keycap-layer-switch .keycap-face{animation:key-breathe 2.4s ease-in-out infinite;stroke-width:3}
@keyframes key-breathe{0%,100%{stroke-opacity:.85;stroke-width:2.8}50%{stroke-opacity:1;stroke-width:4}}
.keyboard-note{text-align:center;font-size:11px;line-height:1.7;color:var(--muted);max-width:860px;margin:0 auto}
.keyboard-empty{padding:32px 10px 12px;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;color:var(--muted);font-size:14px}
.keyboard-empty p{margin:0}
.keyboard-empty .keyboard-switch{width:min(340px,100%)}
.keyboard-empty-note{font-size:11px;color:var(--faint)}
.keyboard-empty-note a{text-decoration:underline;text-underline-offset:2px}
.missing-symbol{margin:10px auto 18px;max-width:800px;padding:12px 16px;border-left:3px solid var(--accent);background:var(--panel);color:var(--bright);font-size:14px;line-height:1.6}
.finger-hint{text-align:center;color:var(--text);font-size:12px;min-height:16px;margin:6px 0 0}
.finger-hint-svg{font-size:20px;font-weight:600;fill:var(--bright);paint-order:stroke;stroke:var(--case-bottom);stroke-width:5px;stroke-linejoin:round;pointer-events:none}

/* ── Hands ─────────────────────────────────────────────────────── */
.hands{max-width:540px;margin:8px auto 0}
.hands svg{display:block;width:100%;height:auto}
.hand-outline{fill:url(#hand-skin);stroke:#c0af9b;stroke-opacity:.55;stroke-width:1.2}
.hand-tendons{fill:none;stroke:#6e5d4e;stroke-width:1.3;opacity:.24;stroke-linecap:round}
.finger-zone{fill:var(--finger-color);fill-opacity:.56;stroke:var(--finger-color);stroke-opacity:.15;stroke-width:1}
.hand-finger.active .finger-zone{fill-opacity:.88;stroke:var(--bright);stroke-opacity:.75;stroke-width:1.6}
.hand-joints{fill:none;stroke:#746450;stroke-opacity:.34;stroke-width:1;stroke-linecap:round}

/* ── Sidebar cards ─────────────────────────────────────────────── */
.card{background:var(--panel);border:1px solid var(--line-soft);border-radius:var(--radius-l);padding:16px}
.card-title{margin:0 0 12px;font-size:11px;font-weight:400;letter-spacing:.4px;color:var(--muted)}
.muted{color:var(--muted);font-size:12px}
.next-symbol{margin:0;font:24px ui-monospace,SFMono-Regular,Consolas,monospace;color:var(--bright)}
#key-location{margin:6px 0 12px;line-height:1.5}
.command-card #hint{margin:0 0 12px;color:var(--text);font-size:14px;line-height:1.6}
#command-breakdown{display:grid;gap:8px;margin:0}
#command-breakdown>div{min-width:0}
#command-breakdown dt{display:inline;margin:0 7px 0 0;color:var(--accent)}
#command-breakdown dd{display:inline;margin:0;color:var(--muted);font-size:12px;line-height:1.5}
#command-breakdown code{font:12px ui-monospace,SFMono-Regular,Consolas,monospace;overflow-wrap:anywhere}
.explanation-note{font-size:12px;color:var(--muted);margin:12px 0 0;line-height:1.5}
.command-warning{border-left:2px solid var(--accent);padding-left:12px;font-size:12px;color:var(--text);margin:12px 0 0;line-height:1.5}
.lesson-card-line{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:8px}
.lesson-card h3{margin:0;font-size:16px;font-weight:400;color:var(--bright)}
.lesson-card b{font:13px ui-monospace,monospace;color:var(--bright)}
.track{height:6px;border-radius:3px;background:var(--line-soft);overflow:hidden}
.track>div{height:100%;width:0;background:var(--accent-soft);border-radius:3px}
.daily-practice b{font:18px ui-monospace,monospace;color:var(--bright)}
.daily-track{height:4px;background:var(--line-soft);margin:10px 0 12px;border-radius:2px;overflow:hidden}
.daily-track>div{height:100%;width:0;background:var(--green);border-radius:2px}
.daily-practice #daily-caption{margin:0 0 8px;color:var(--muted);font-size:12px}
.daily-practice small{color:var(--faint);font-size:10px;line-height:1.5;display:block}
.course-count{font-size:10px;line-height:1.6;color:var(--faint);margin:0 0 10px}
.lesson-search{width:100%;min-width:0;margin-bottom:10px;padding:7px 9px;border:1px solid var(--line);border-radius:var(--radius-s);color:var(--text);background:var(--bg);font-size:12px}
#lessons{max-height:300px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--line) var(--panel);display:flex;flex-direction:column}
.lesson{flex-shrink:0;display:flex;width:100%;align-items:center;gap:8px;border:0;border-radius:var(--radius-s);background:none;color:var(--text);text-align:left;font-size:13px;min-height:34px;padding:6px 8px}
.lesson:hover{background:var(--panel2)}
.lesson.active{background:var(--panel2);color:var(--bright)}
.lesson-num{font:11px ui-monospace,monospace;color:var(--faint)}
.lesson.active .lesson-num{color:var(--muted)}
.lesson-count{margin-left:auto;color:var(--green);font-size:11px}
.keyboard-controls,.appearance-controls{display:flex;flex-direction:column;gap:10px}
.keyboard-switch{display:flex;gap:4px}
.keyboard-switch button{flex:1;padding:8px 10px;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-s);color:var(--text);font-size:12px}
.keyboard-switch button[aria-pressed=true]{background:var(--panel2);color:var(--bright);border-color:var(--accent-soft)}
.field-label{font-size:12px;color:var(--muted)}
.keyboard-card select{width:100%;font:12px Arial,sans-serif;padding:8px 10px;border:1px solid var(--line);border-radius:var(--radius-s);background:var(--bg);color:var(--text)}
.keyboard-card select:disabled{opacity:.5}
.check-label{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--text);cursor:pointer}
.check-label input{accent-color:var(--accent-soft);width:13px;height:13px;margin:0;cursor:pointer}
.keyboard-note-side{font-size:10px;line-height:1.6;color:var(--faint);margin:12px 0 0}
.theme-list{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.theme-list button{display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-s);color:var(--text);font-size:12px;text-align:left}
.theme-list button[aria-pressed=true]{border-color:var(--accent-soft);color:var(--bright);background:var(--panel2)}
.theme-swatch{width:22px;height:22px;border-radius:var(--radius-s);border:1px solid var(--line);flex-shrink:0}

/* ── Brand and foot ────────────────────────────────────────────── */
.brand{display:flex;align-items:center;gap:8px;font-size:18px;color:var(--bright);padding:2px 4px}
.logo{font:30px/1 ui-monospace,monospace;letter-spacing:-4px;color:var(--accent)}
.sidebar-foot{font-size:12px;line-height:1.7;color:var(--faint);padding:0 4px}
.sidebar-foot p{margin:0}
.sidebar-foot small{font-size:10px}
.sidebar-foot .version{margin-top:10px;color:var(--faint)}

/* ── Popup ─────────────────────────────────────────────────────── */
#char-tooltip{position:fixed;z-index:5;width:min(380px,calc(100vw - 16px));max-height:calc(100dvh - 16px);overflow:auto;padding:18px 18px 12px;background:var(--raise);color:var(--text);border:1px solid var(--line);box-shadow:0 5px 18px #0006;line-height:1.4;border-radius:var(--radius-l)}
.popup-close{position:absolute;right:4px;top:3px;border:0;background:transparent;color:var(--muted);font-size:23px;line-height:1;padding:3px 6px}
.popup-header{display:grid;grid-template-columns:44px 1fr;gap:5px 13px;padding-right:8px}
.popup-symbol{grid-row:span 3;display:flex;align-items:center;justify-content:center;min-width:44px;height:44px;background:var(--fast-key);color:var(--bg);font:26px ui-monospace,monospace;border-radius:var(--radius-s)}
.popup-symbol.unpracticed{background:var(--panel2);color:var(--text)}
.popup-symbol.has-errors{background:var(--slow-key);color:var(--bright)}
.popup-metric{font-size:11px}
.popup-metric span{color:var(--muted)}
.popup-metric strong{font:13px ui-monospace,monospace;font-weight:400;color:var(--text)}
.popup-metric small{font:10px ui-monospace,monospace;color:var(--faint);margin-left:4px}
.popup-metric.positive strong,.popup-metric.positive small{color:var(--green)}
.popup-metric.negative strong,.popup-metric.negative small{color:var(--error)}
.popup-summary{font-size:11px;margin:13px 0 8px;color:var(--muted)}
.popup-chart{width:100%;overflow:hidden}
#char-tooltip svg{display:block;width:100%;height:auto}
.chart-grid{fill:none;stroke:var(--line-soft);stroke-width:1}
.chart-axis{fill:none;stroke:var(--line);stroke-width:1}
.chart-line{fill:none;stroke:var(--green);stroke-width:2;stroke-linejoin:round}
.chart-dot{fill:var(--fast-key)}
.chart-label{fill:var(--muted);font:11px ui-monospace,monospace}
.popup-empty{min-height:58px;display:flex;align-items:center;text-align:center;color:var(--faint);font-size:12px;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);margin:12px 0}
.popup-empty p{padding:0 10px;margin:8px 0}
.popup-note{font-size:9px;line-height:1.5;color:var(--faint);margin:10px 0 0}

/* ── Settings screen ───────────────────────────────────────────── */
body[data-screen="settings"] .practice{display:none}
.settings-view{max-width:640px;margin:0 auto;display:flex;flex-direction:column;gap:16px}
.settings-back{margin:0;font-size:13px}
.settings-back a{color:var(--muted)}
.settings-back a:hover{color:var(--bright)}
.settings-title{margin:0;font-size:24px;font-weight:400;color:var(--bright)}
.settings-tabs{display:flex;gap:4px;border-bottom:1px solid var(--line-soft);padding-bottom:10px}
.settings-tab{padding:8px 16px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-s);color:var(--muted);font-size:13px}
.settings-tab[aria-selected=true]{background:var(--panel2);color:var(--bright);border-color:var(--accent-soft)}
#panel-keyboard,#panel-appearance{background:transparent;border:0;padding:0;display:flex;flex-direction:column;gap:16px}
#panel-keyboard>section,#panel-appearance>section{background:var(--panel);border:1px solid var(--line-soft);border-radius:var(--radius-l);padding:16px}
#panel-learning{display:flex;flex-direction:column;gap:14px}
#panel-learning select{width:100%;font:12px Arial,sans-serif;padding:8px 10px;border:1px solid var(--line);border-radius:var(--radius-s);background:var(--bg);color:var(--text)}
#lesson-size{width:100%;accent-color:var(--accent-soft);cursor:pointer}
.theme-hint{margin:0 0 12px;font-size:11px;line-height:1.5}
.view-switch-settings button{padding:9px 16px;font-size:13px}
.settings-link{margin:0;padding:0 4px;font-size:12px}
.settings-link a{color:var(--muted);text-decoration:underline;text-underline-offset:2px}
.settings-link a:hover{color:var(--bright)}

/* ── Perfect-run reward ────────────────────────────────────────── */
.perfect-toast{align-self:center;margin:18px 0 0;padding:8px 18px;border:1px solid var(--accent-soft);border-radius:var(--radius-l);background:var(--panel);color:var(--bright);font-size:13px;animation:toast-in .35s ease-out}
@keyframes toast-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.perfect-toast{animation:none}}

/* ── Practice foot, pause ──────────────────────────────────────── */
.practice-foot{display:flex;justify-content:space-between;gap:18px;font-size:12px;line-height:1.7;color:var(--muted);margin:28px 0 0;flex-wrap:wrap}
.practice-paused .layout{filter:blur(7px);pointer-events:none;user-select:none;opacity:.55}
.pause-overlay{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--bg) 80%,transparent);padding:20px}
.pause-message{text-align:center;line-height:1.7}
.pause-eyebrow{font-size:12px;color:var(--muted);letter-spacing:1.5px}
.pause-message h2{font-size:36px;font-weight:400;letter-spacing:1px;color:var(--bright);margin:10px 0}
.pause-message p{font-size:15px}
.pause-message button{display:block;margin:24px auto 18px;padding:12px 35px;border:1px solid var(--accent-soft);border-radius:var(--radius-s);background:var(--panel2);color:var(--bright);font-size:16px}
.pause-message small{display:block;color:var(--muted);font-size:12px}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ── Responsive ────────────────────────────────────────────────── */
@media(min-width:1700px){.layout{max-width:1720px;gap:64px;grid-template-columns:minmax(0,1fr) 320px;padding-top:64px}.practice{max-width:1260px}.typing-area #command{font-size:40px}.metric-line,.metric-line b{font-size:17px}}
@media(max-width:1200px){.layout{grid-template-columns:minmax(0,1fr) 250px;gap:28px}}
@media(max-width:920px){
.layout{grid-template-columns:minmax(0,1fr);padding:32px 20px}
.sidebar{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}
.brand{grid-column:1/-1}
.sidebar-foot{grid-column:1/-1}
.typing-area #command{font-size:30px}
}
@media(max-width:600px){
.layout{padding:22px 14px}
.sidebar{grid-template-columns:1fr}
.metric-line{gap:12px;font-size:12px}
.metric-line b{font-size:12px}
.view-switch button{padding:7px 8px;font-size:11px}
.typing-area{margin-top:26px;padding:12px 0 32px;min-height:135px}
.typing-area #command{font-size:26px;line-height:1.7}
.focus-state{left:0;font-size:11px}
#symbol-map{gap:3px}
#symbol-map .symbol{min-width:24px;height:26px;font-size:13px}
.symbol.space{min-width:64px!important;font-size:10px!important}
.practice-foot{margin:22px 0 0;gap:10px;font-size:10px}
.keyboard-note{font-size:10px;text-align:left}
.keyboard-empty{font-size:12px;line-height:1.8}
.hands{max-width:400px}
.theme-list{grid-template-columns:1fr}
main footer{font-size:9px}
footer button{font-size:9px}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.keycap-target .keycap-face,.keycap-shift .keycap-face,.keycap-layer-switch .keycap-face{animation:none;stroke-opacity:1;stroke-width:3.2}}