:root {
    --bg: #0d1117;
    --surface: #151b24;
    --surface-2: #1a222d;
    --text: #eef2f6;
    --muted: #687384;
    --faint: #353f4d;
    --line: rgba(255,255,255,.075);
    --accent: #f0c75e;
    --accent-rgb: 240,199,94;
    --wrong: #ef6a78;
    --font-size: 34px;
    --radius: 14px;
}

html[data-theme="paper"] { --bg:#ece9e1; --surface:#f6f3eb; --surface-2:#e1ddd3; --text:#292b2f; --muted:#848078; --faint:#c3beb3; --line:rgba(30,30,30,.1); --accent:#176b87; --accent-rgb:23,107,135; --wrong:#c44752; }
html[data-theme="berry"] { --bg:#18111d; --surface:#211629; --surface-2:#2b1d34; --text:#f4edf6; --muted:#8d7995; --faint:#493a51; --line:rgba(255,255,255,.08); --accent:#e58ab5; --accent-rgb:229,138,181; --wrong:#ff6f75; }
html[data-theme="forest"] { --bg:#0c1714; --surface:#12221d; --surface-2:#182d26; --text:#e7f1ec; --muted:#71877e; --faint:#344d43; --line:rgba(255,255,255,.075); --accent:#8ecf8b; --accent-rgb:142,207,139; --wrong:#e87570; }

* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { min-height:100vh; color:var(--text); background:var(--bg); font-family:"Manrope",sans-serif; line-height:1.5; transition:background .3s,color .3s; }
button,input { font:inherit; }
button,a { color:inherit; }
button { cursor:pointer; }
.app-shell { min-height:100vh; }
.app-header,.workspace,.app-footer { width:min(1180px,calc(100% - 48px)); margin-inline:auto; }
.app-header { height:96px; display:flex; align-items:center; justify-content:space-between; }
.brand { display:flex; align-items:center; gap:12px; text-decoration:none; }
.brand-symbol { width:42px; height:42px; padding:8px; display:flex; align-items:flex-end; gap:3px; border-radius:11px; background:var(--accent); }
.brand-symbol i { flex:1; display:block; border-radius:2px; background:var(--bg); }
.brand-symbol i:nth-child(1) { height:48%; }.brand-symbol i:nth-child(2) { height:82%; }.brand-symbol i:nth-child(3) { height:64%; }
.brand-copy { display:flex; flex-direction:column; line-height:1; }
.brand-copy small { color:var(--muted); font:500 9px "DM Mono",monospace; letter-spacing:.14em; }
.brand-copy strong { margin-top:4px; font-size:22px; letter-spacing:-.05em; }
.header-actions { display:flex; align-items:center; gap:3px; }
.icon-btn { min-width:58px; padding:8px 10px; display:flex; flex-direction:column; align-items:center; gap:2px; color:var(--muted); border:0; border-radius:9px; background:transparent; text-decoration:none; transition:color .2s,background .2s; }
.icon-btn span { font-size:18px; }.icon-btn small { font:500 9px "DM Mono",monospace; }.icon-btn:hover,.icon-btn.active { color:var(--accent); background:rgba(var(--accent-rgb),.08); }

.workspace { padding:54px 0 90px; }
.intro { display:flex; align-items:flex-end; justify-content:space-between; gap:30px; }
.overline { margin-bottom:10px; color:var(--accent); font:500 11px "DM Mono",monospace; letter-spacing:.14em; text-transform:uppercase; }
.intro h1 { font-size:clamp(37px,5vw,64px); line-height:1; letter-spacing:-.055em; }
.session-chip { display:flex; align-items:center; gap:9px; color:var(--muted); font:400 11px "DM Mono",monospace; }
.session-chip b { color:var(--text); }.status-dot { width:7px; height:7px; border-radius:50%; background:var(--accent); }

.test-studio { margin-top:60px; min-height:500px; position:relative; }
.mode-bar { width:max-content; max-width:100%; margin:0 auto; padding:6px; display:flex; align-items:center; gap:5px; overflow-x:auto; border:1px solid var(--line); border-radius:12px; background:var(--surface); scrollbar-width:none; }
.mode-bar::-webkit-scrollbar { display:none; }
.mode-group { display:flex; align-items:center; gap:2px; white-space:nowrap; }
.mode-divider { flex:0 0 1px; height:21px; margin:0 5px; background:var(--line); }
.mode-btn,.mode-values button,.quote-levels button { padding:7px 10px; color:var(--muted); border:0; border-radius:7px; background:transparent; font:500 11px "DM Mono",monospace; transition:color .15s,background .15s; }
.mode-btn span { margin-right:4px; }.mode-btn:hover,.mode-values button:hover,.quote-levels button:hover { color:var(--text); }
.mode-btn.active,.mode-values button.active,.quote-levels button.active { color:var(--accent); background:rgba(var(--accent-rgb),.1); }
.mode-values button { min-width:34px; }

.live-row { min-height:95px; margin-top:42px; display:flex; align-items:end; justify-content:space-between; transition:opacity .2s; }
.live-primary { display:flex; align-items:baseline; gap:10px; color:var(--accent); }
.live-primary strong { font:500 52px/1 "DM Mono",monospace; letter-spacing:-.08em; }.live-primary span { color:var(--muted); font:400 11px "DM Mono",monospace; }
.live-stats { display:flex; gap:22px; color:var(--muted); font:400 11px "DM Mono",monospace; }.live-stats b { color:var(--text); font-weight:500; }

.typing-stage { min-height:205px; position:relative; display:flex; align-items:center; outline:0; cursor:text; border: 2px solid var(--line); border-radius: var(--radius); padding: 20px; transition: border-color 0.2s; }
.typing-stage.focused { border-color: var(--accent); }
.words-viewport { width:100%; max-height:174px; overflow:hidden; mask-image:linear-gradient(to bottom,transparent 0,#000 12%,#000 88%,transparent 100%); }
.words { position:relative; display:flex; flex-wrap:wrap; column-gap:.58em; row-gap:.2em; color:var(--faint); font:500 var(--font-size)/1.45 "DM Mono",monospace; letter-spacing:-.035em; transition:transform .18s ease-out,font-size .2s; }
.word { display:inline-flex; white-space:nowrap; }
.letter { position:relative; transition:color .06s; }.letter.correct { color:var(--text); }.letter.incorrect { color:var(--wrong); }.letter.extra { color:var(--wrong); opacity:.7; }
.letter.current::before { content:""; width:2px; height:1.08em; position:absolute; left:-1px; top:.16em; border-radius:2px; background:var(--accent); animation:caretBlink 1s infinite; }
.word.error .letter:not(.correct) { text-decoration:underline; text-decoration-color:var(--wrong); text-underline-offset:5px; }
@keyframes caretBlink { 0%,45% { opacity:1; } 55%,100% { opacity:.2; } }
.typing-capture { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.focus-prompt { position:absolute; inset:0; z-index:5; display:flex; align-items:center; justify-content:center; gap:9px; color:var(--muted); border:0; background:rgba(13,17,23,.76); backdrop-filter:blur(5px); font:400 12px "DM Mono",monospace; transition:opacity .2s; }
html[data-theme="paper"] .focus-prompt { background:rgba(236,233,225,.78); }
.typing-stage.focused .focus-prompt,.typing-stage.started .focus-prompt { opacity:0; pointer-events:none; }
.test-actions { margin-top:26px; display:flex; justify-content:center; align-items:center; gap:24px; color:var(--muted); font:400 10px "DM Mono",monospace; }
.restart-action { padding:9px 13px; color:var(--muted); border:1px solid var(--line); border-radius:8px; background:transparent; font:500 10px "DM Mono",monospace; }.restart-action:hover { color:var(--accent); border-color:rgba(var(--accent-rgb),.3); }
kbd { padding:2px 5px; color:var(--text); border:1px solid var(--line); border-bottom-width:2px; border-radius:4px; background:var(--surface); font:400 9px "DM Mono",monospace; }
.keyboard-trainer { width:100%; margin:35px auto 0; display:grid; grid-template-columns:220px minmax(560px,700px) 220px; align-items:end; justify-content:center; gap:8px; }
.virtual-keyboard { width:100%; padding:20px; border:1px solid var(--line); border-radius:15px; background:var(--surface); }
.keyboard-caption { margin-bottom:13px; display:flex; align-items:center; justify-content:center; gap:8px; color:var(--muted); font:400 9px "DM Mono",monospace; text-transform:uppercase; letter-spacing:.1em; }.keyboard-caption strong { min-width:34px; color:var(--accent); font-size:12px; text-align:left; }
.key-row { display:flex; justify-content:center; gap:7px; margin-bottom:7px; }.key-row-mid { padding-left:18px; }.key-row-low { padding-left:43px; }
.number-row { padding-right:18px; }
.key { width:44px; height:40px; padding:0; display:grid; place-items:center; color:var(--muted); border:1px solid var(--line); border-bottom-width:3px; border-radius:7px; background:var(--bg); font:500 11px "DM Mono",monospace; font-style:normal; text-transform:uppercase; transition:transform .05s,background .08s,color .08s,border-color .08s,box-shadow .08s; }
.key.next { color:var(--accent); border-color:var(--accent); box-shadow:0 0 0 3px rgba(var(--accent-rgb),.1),0 0 18px rgba(var(--accent-rgb),.12); animation:keyGuide 1s infinite; }
.key.active { color:var(--bg); border-color:var(--accent); background:var(--accent); transform:translateY(2px); box-shadow:0 0 20px rgba(var(--accent-rgb),.3); animation:none; }.key-wide { width:75px;font-size:9px; }.key-space { width:280px; }
@keyframes keyGuide { 50% { box-shadow:0 0 0 5px rgba(var(--accent-rgb),.04),0 0 22px rgba(var(--accent-rgb),.18); } }
.hand-guide { width:180px; height:195px; position:relative; color:var(--muted); }
.hand-label { position:absolute; left:0; right:0; bottom:0; text-align:center; font:500 9px "DM Mono",monospace; text-transform:uppercase; letter-spacing:.12em; }
.palm { width:112px; height:105px; position:absolute; left:34px; bottom:26px; border:1px solid var(--line); border-radius:45px 45px 35px 35px; background:linear-gradient(145deg,var(--surface-2),var(--surface)); box-shadow:inset 0 0 25px rgba(255,255,255,.015); }
.finger { width:27px; position:absolute; z-index:2; display:block; border:1px solid var(--line); border-radius:18px 18px 11px 11px; background:var(--surface-2); transform-origin:bottom center; transition:border-color .15s,background .15s,transform .15s; }
.finger b { width:9px; height:9px; position:absolute; left:50%; top:8px; border:2px solid var(--faint); border-radius:50%; background:var(--surface-2); transform:translateX(-50%); transition:.15s; }
.finger small { min-width:60px; position:absolute; left:50%; top:-19px; color:var(--muted); font:400 7px "DM Mono",monospace; text-align:center; transform:translateX(-50%); opacity:.65; }
.finger.next { border-color:rgba(var(--accent-rgb),.55); background:rgba(var(--accent-rgb),.09); }.finger.next b { border-color:var(--accent); background:var(--accent); box-shadow:0 0 0 5px rgba(var(--accent-rgb),.12),0 0 16px var(--accent); animation:fingerDot 1s infinite; }
.finger.pressed { transform:translateY(5px); }.finger.pressed b { border-color:var(--accent); background:var(--accent); box-shadow:0 0 18px var(--accent); }
@keyframes fingerDot { 50% { box-shadow:0 0 0 8px rgba(var(--accent-rgb),0),0 0 20px var(--accent); } }
.left-hand .pinky { height:83px; left:22px; top:46px; transform:rotate(-13deg); }.left-hand .ring { height:108px; left:52px; top:22px; transform:rotate(-5deg); }.left-hand .middle { height:119px; left:82px; top:10px; }.left-hand .index { height:107px; left:112px; top:23px; transform:rotate(5deg); }.left-hand .thumb { width:31px; height:78px; left:134px; top:89px; transform:rotate(52deg); }
.right-hand .index { height:107px; left:41px; top:23px; transform:rotate(-5deg); }.right-hand .middle { height:119px; left:71px; top:10px; }.right-hand .ring { height:108px; left:101px; top:22px; transform:rotate(5deg); }.right-hand .pinky { height:83px; left:131px; top:46px; transform:rotate(13deg); }.right-hand .thumb { width:31px; height:78px; left:15px; top:89px; transform:rotate(-52deg); }
.right-hand .palm { left:34px; }
.left-hand .thumb small,.right-hand .thumb small { top:28px; }
.left-hand .finger.pressed,.left-hand .finger.next.pressed { transform:translateY(5px); }.right-hand .finger.pressed,.right-hand .finger.next.pressed { transform:translateY(5px); }

.lesson-banner { margin-bottom:30px; padding:20px 23px; display:grid; grid-template-columns:110px 1fr auto; align-items:center; gap:20px; border:1px solid rgba(var(--accent-rgb),.22); border-radius:12px; background:rgba(var(--accent-rgb),.055); }.lesson-banner > span { color:var(--accent); font:500 9px "DM Mono",monospace; text-transform:uppercase; letter-spacing:.1em; }.lesson-banner h2 { font-size:17px; }.lesson-banner p { margin-top:3px; color:var(--muted); font-size:11px; }.lesson-banner a { color:var(--accent); font:500 10px "DM Mono",monospace; text-underline-offset:4px; }

.result-panel { margin-top:55px; padding:34px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); }
.result-heading { display:flex; justify-content:space-between; align-items:end; gap:20px; }.result-heading h2 { font-size:28px; letter-spacing:-.04em; }.result-actions { display:flex; gap:8px; }.result-actions button { padding:9px 12px; color:var(--muted); border:1px solid var(--line); border-radius:8px; background:transparent; font:500 10px "DM Mono",monospace; }.result-actions button:hover { color:var(--accent); }
.result-grid { margin-top:28px; display:grid; grid-template-columns:150px 180px 1fr; gap:24px; align-items:stretch; }
.hero-metric { padding:20px; border-radius:11px; background:var(--bg); }.hero-metric span,.hero-metric small { display:block; color:var(--muted); font:400 10px "DM Mono",monospace; }.hero-metric strong { display:block; margin:5px 0; color:var(--accent); font:500 55px/1 "DM Mono",monospace; letter-spacing:-.08em; }.hero-metric.accent-two strong { color:var(--text); font-size:39px; }
.chart-card { min-width:0; padding:12px; border-radius:11px; background:var(--bg); }.chart-card canvas { width:100%; height:100%; min-height:160px; }
.metric-strip { margin-top:20px; display:grid; grid-template-columns:repeat(5,1fr); border-top:1px solid var(--line); }.metric-strip > span { padding:17px 12px 0; }.metric-strip small,.metric-strip b { display:block; font:400 10px "DM Mono",monospace; }.metric-strip small { color:var(--muted); }.metric-strip b { margin-top:3px; color:var(--text); font-size:12px; }

.info-grid { margin-top:120px; display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.info-grid article { min-height:235px; padding:30px; background:var(--bg); }.info-grid article > span { color:var(--accent); font:500 10px "DM Mono",monospace; }.info-grid h2 { margin:45px 0 10px; font-size:18px; letter-spacing:-.025em; }.info-grid p { color:var(--muted); font-size:13px; }
.app-footer { min-height:100px; display:flex; align-items:center; justify-content:space-between; color:var(--muted); border-top:1px solid var(--line); font:400 10px "DM Mono",monospace; }.app-footer a { text-decoration:none; }.app-footer a:hover { color:var(--accent); }

.settings-drawer { width:min(410px,100%); position:fixed; z-index:110; top:0; right:0; bottom:0; padding:30px; overflow-y:auto; border-left:1px solid var(--line); background:var(--surface); transform:translateX(105%); transition:transform .25s ease; box-shadow:-25px 0 70px rgba(0,0,0,.25); }.settings-drawer.open { transform:none; }
.drawer-backdrop { position:fixed; inset:0; z-index:105; background:rgba(0,0,0,.5); backdrop-filter:blur(3px); }.drawer-head { display:flex; justify-content:space-between; align-items:flex-start; padding-bottom:25px; border-bottom:1px solid var(--line); }.drawer-head span,.setting-block > label { color:var(--muted); font:500 10px "DM Mono",monospace; text-transform:uppercase; letter-spacing:.12em; }.drawer-head h2 { margin-top:4px; font-size:23px; }.drawer-head button { color:var(--muted); border:0; background:transparent; font-size:27px; }
.setting-block { padding:25px 0; border-bottom:1px solid var(--line); }.theme-grid { margin-top:14px; display:grid; grid-template-columns:1fr 1fr; gap:8px; }.theme-swatch { padding:10px; display:flex; align-items:center; gap:8px; color:var(--muted); border:1px solid var(--line); border-radius:8px; background:var(--bg); font:500 10px "DM Mono",monospace; }.theme-swatch.active { color:var(--text); border-color:var(--accent); }.theme-swatch i { width:17px; height:17px; border-radius:50%; background:#f0c75e; }.theme-swatch[data-theme="paper"] i { background:#176b87; }.theme-swatch[data-theme="berry"] i { background:#e58ab5; }.theme-swatch[data-theme="forest"] i { background:#8ecf8b; }
.setting-block label { display:flex; justify-content:space-between; }.setting-block input[type="range"] { width:100%; margin-top:18px; accent-color:var(--accent); }
.setting-row { padding:21px 0; display:flex; align-items:center; justify-content:space-between; gap:15px; border-bottom:1px solid var(--line); }.setting-row b,.setting-row span { display:block; }.setting-row b { font-size:13px; }.setting-row span { margin-top:3px; color:var(--muted); font-size:10px; }
.switch { width:39px; height:22px; padding:2px; flex:0 0 auto; border:0; border-radius:20px; background:var(--faint); }.switch i { width:18px; height:18px; display:block; border-radius:50%; background:var(--text); transition:transform .18s; }.switch.active { background:var(--accent); }.switch.active i { transform:translateX(17px); background:var(--bg); }
.toast { position:fixed; z-index:130; left:50%; bottom:30px; padding:10px 15px; color:var(--bg); border-radius:8px; background:var(--accent); font:500 10px "DM Mono",monospace; opacity:0; pointer-events:none; transform:translate(-50%,12px); transition:.2s; }.toast.show { opacity:1; transform:translate(-50%,0); }

/* Public homepage */
.home-nav { display:flex; align-items:center; gap:30px; }
.home-nav a { color:var(--muted); font:500 11px "DM Mono",monospace; text-decoration:none; transition:color .2s; }
.home-nav a:hover { color:var(--text); }
.home-nav .nav-cta { padding:10px 15px; color:var(--bg); border-radius:8px; background:var(--accent); }
.home-theme { position:relative; }
.theme-trigger { height:38px; padding:0 11px; display:flex; align-items:center; gap:7px; color:var(--muted); border:1px solid var(--line); border-radius:8px; background:var(--surface); font:500 10px "DM Mono",monospace; }
.theme-trigger:hover,.theme-trigger[aria-expanded="true"] { color:var(--text); border-color:rgba(var(--accent-rgb),.35); }
.theme-trigger > i,.home-theme-menu button > i { width:11px; height:11px; display:block; flex:0 0 auto; border-radius:50%; background:var(--accent); }
.theme-trigger b { color:var(--muted); font-size:11px; font-weight:400; }
.home-theme-menu { width:165px; position:absolute; z-index:40; top:46px; right:0; padding:6px; border:1px solid var(--line); border-radius:10px; background:var(--surface); box-shadow:0 20px 50px rgba(0,0,0,.25); }
.home-theme-menu button { width:100%; padding:9px; display:grid; grid-template-columns:14px 1fr 14px; align-items:center; gap:8px; color:var(--muted); border:0; border-radius:7px; background:transparent; text-align:left; font:500 10px "DM Mono",monospace; }
.home-theme-menu button:hover { color:var(--text); background:var(--surface-2); }
.home-theme-menu button b { display:none; color:var(--accent); }
.home-theme-menu button.active { color:var(--text); }.home-theme-menu button.active b { display:block; }
.home-theme-menu button[data-theme="midnight"] > i,.theme-midnight { background:#f0c75e!important; }
.home-theme-menu button[data-theme="paper"] > i,.theme-paper { background:#176b87!important; }
.home-theme-menu button[data-theme="berry"] > i,.theme-berry { background:#e58ab5!important; }
.home-theme-menu button[data-theme="forest"] > i,.theme-forest { background:#8ecf8b!important; }
.home-main { width:min(1180px,calc(100% - 48px)); margin:auto; }
.home-hero { min-height:630px; display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:70px; }
.hero-copy h1 { font-size:clamp(49px,6.3vw,82px); line-height:.98; letter-spacing:-.065em; }
.hero-copy h1 em { color:var(--accent); font-style:normal; }
.hero-lead { max-width:590px; margin:27px 0 32px; color:var(--muted); font-size:17px; line-height:1.75; }
.hero-buttons { display:flex; align-items:center; gap:25px; flex-wrap:wrap; }
.primary-link { padding:14px 19px; color:var(--bg); border-radius:9px; background:var(--accent); font:600 12px "DM Mono",monospace; text-decoration:none; }
.text-link { color:var(--text); font:500 11px "DM Mono",monospace; text-underline-offset:5px; }
.hero-points { margin-top:28px; display:flex; gap:22px; flex-wrap:wrap; color:var(--muted); font:400 10px "DM Mono",monospace; }.hero-points b { color:var(--accent); }
.hero-demo { position:relative; padding:25px; border:1px solid var(--line); border-radius:18px; background:var(--surface); transform:rotate(1.5deg); }
.demo-toolbar { display:flex; align-items:center; gap:6px; padding-bottom:18px; border-bottom:1px solid var(--line); }.demo-toolbar > span { width:7px; height:7px; border-radius:50%; background:var(--faint); }.demo-toolbar b { margin-left:auto; color:var(--muted); font:400 9px "DM Mono",monospace; }
.demo-stats { padding:27px 0; display:grid; grid-template-columns:repeat(3,1fr); }.demo-stats div { border-right:1px solid var(--line); text-align:center; }.demo-stats div:last-child { border:0; }.demo-stats strong,.demo-stats small { display:block; }.demo-stats strong { color:var(--accent); font:500 29px "DM Mono",monospace; }.demo-stats small { color:var(--muted); font:400 9px "DM Mono",monospace; }
.hero-demo > p { padding:25px 8px; color:var(--faint); font:500 25px/1.65 "DM Mono",monospace; letter-spacing:-.04em; }.hero-demo > p b { color:var(--text); font-weight:500; }.hero-demo > p i { color:var(--wrong); font-style:normal; }.demo-caret { width:2px; height:1em; display:inline-block; margin-left:2px; vertical-align:-.12em; background:var(--accent); animation:caretBlink 1s infinite; }
.demo-progress { height:3px; overflow:hidden; border-radius:5px; background:var(--faint); }.demo-progress i { width:72%; height:100%; display:block; background:var(--accent); }
.test-catalog { padding:105px 0; border-top:1px solid var(--line); }
.catalog-heading { margin-bottom:42px; display:flex; align-items:end; justify-content:space-between; gap:35px; }.catalog-heading h2,.home-benefits h2 { font-size:clamp(32px,4vw,48px); line-height:1.08; letter-spacing:-.05em; }.catalog-heading > p { max-width:430px; color:var(--muted); font-size:13px; }
.test-card-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:13px; }
.test-card { min-height:280px; padding:23px; position:relative; display:flex; flex-direction:column; color:var(--text); border:1px solid var(--line); border-radius:13px; background:var(--surface); text-decoration:none; transition:transform .2s,border-color .2s,background .2s; }.test-card:hover { transform:translateY(-5px); border-color:rgba(var(--accent-rgb),.3); background:var(--surface-2); }.test-card.featured { background:linear-gradient(145deg,rgba(var(--accent-rgb),.15),var(--surface)); }
.card-number { position:absolute; top:18px; right:18px; color:var(--muted); font:400 9px "DM Mono",monospace; }.card-icon { width:52px; height:52px; display:grid; place-items:center; color:var(--accent); border:1px solid rgba(var(--accent-rgb),.2); border-radius:11px; background:rgba(var(--accent-rgb),.07); font:500 15px "DM Mono",monospace; }.test-card > div { margin-top:auto; }.test-card small { color:var(--accent); font:500 9px "DM Mono",monospace; text-transform:uppercase; letter-spacing:.1em; }.test-card h3 { margin:7px 0; font-size:19px; letter-spacing:-.025em; }.test-card p { max-width:290px; color:var(--muted); font-size:12px; }.card-arrow { position:absolute; right:21px; bottom:20px; color:var(--muted); font-size:18px; }
.home-benefits { padding:105px 0; display:grid; grid-template-columns:.8fr 1.2fr; gap:90px; border-top:1px solid var(--line); }.benefit-list article { padding:22px 0; display:grid; grid-template-columns:65px 1fr 1fr; align-items:start; gap:20px; border-bottom:1px solid var(--line); }.benefit-list article > span { color:var(--accent); font:500 10px "DM Mono",monospace; }.benefit-list h3 { font-size:15px; }.benefit-list p { color:var(--muted); font-size:12px; }
.lesson-card { border-color:rgba(var(--accent-rgb),.28); }

/* Beginner lessons */
.lessons-main { width:min(1100px,calc(100% - 48px)); margin:auto; }.lessons-hero { min-height:470px; padding:80px 0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }.lessons-hero h1 { font-size:clamp(43px,6vw,72px); line-height:1; letter-spacing:-.06em; }.lessons-hero > p:not(.overline) { max-width:650px; margin-top:22px; color:var(--muted); font-size:15px; }
.home-row-preview { margin-top:42px; display:flex; align-items:center; gap:7px; }.home-row-preview span { width:45px; height:43px; position:relative; display:grid; place-items:center; color:var(--muted); border:1px solid var(--line); border-bottom-width:3px; border-radius:7px; background:var(--surface); font:500 12px "DM Mono",monospace; }.home-row-preview b { width:20px; }.home-row-preview .home-key { color:var(--accent); border-color:rgba(var(--accent-rgb),.4); }.home-row-preview i { width:5px; height:2px; position:absolute; bottom:5px; border-radius:2px; background:var(--accent); }
.lesson-list { padding:90px 0 110px; border-top:1px solid var(--line); }.lesson-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }.lesson-grid a { min-height:160px; padding:24px; display:grid; grid-template-columns:45px 1fr auto; align-items:start; gap:18px; color:var(--text); border:1px solid var(--line); border-radius:12px; background:var(--surface); text-decoration:none; transition:transform .2s,border-color .2s; }.lesson-grid a:hover { transform:translateY(-3px); border-color:rgba(var(--accent-rgb),.35); }.lesson-grid a > span { color:var(--accent); font:500 10px "DM Mono",monospace; }.lesson-grid small { color:var(--muted); font:500 9px "DM Mono",monospace; text-transform:uppercase; }.lesson-grid h3 { margin:7px 0; font-size:17px; }.lesson-grid p { color:var(--muted); font-size:11px; }.lesson-grid b { color:var(--muted); }

body.test-running.focus-fade .app-header,body.test-running.focus-fade .intro,body.test-running.focus-fade .mode-bar,body.test-running.focus-fade .test-actions,body.test-running.focus-fade .info-grid,body.test-running.focus-fade .app-footer { opacity:.13; transition:opacity .25s; }
body.test-running.focus-fade .app-header:hover,body.test-running.focus-fade .mode-bar:hover { opacity:1; }
body.focus-mode .app-header,body.focus-mode .intro,body.focus-mode .info-grid,body.focus-mode .app-footer { display:none; }
body.focus-mode .workspace { min-height:100vh; display:grid; align-items:center; padding-block:30px; }.focus-mode .test-studio { margin:0; }
.live-stats-hidden .live-stats { visibility:hidden; }

/* Existing admin pages */
.navbar { min-height:70px; padding:15px max(24px,calc((100vw - 1100px)/2)); display:flex; justify-content:space-between; align-items:center; background:var(--surface); border-bottom:1px solid var(--line); }.navbar h2 { color:var(--accent); }.navbar a { margin-left:20px; text-decoration:none; }.container { width:min(1100px,calc(100% - 40px)); margin:35px auto; }.card { padding:25px; margin-bottom:20px; overflow-x:auto; border:1px solid var(--line); border-radius:12px; background:var(--surface); }table { width:100%; margin-top:15px; border-collapse:collapse; }table th,table td { padding:11px; border:1px solid var(--line); text-align:left; }table th { color:var(--accent); }.form-group { margin-bottom:15px; display:flex; flex-direction:column; gap:6px; }.form-group input,.form-group select,.form-group textarea,.login-box input { width:100%; padding:11px; color:var(--text); border:1px solid var(--line); border-radius:8px; background:var(--bg); }.form-group textarea { min-height:130px; }.card button,.login-box button { padding:10px 18px; color:var(--bg); border:0; border-radius:8px; background:var(--accent); font-weight:700; }.alert { padding:11px 15px; margin-bottom:15px; border-radius:8px; }.alert-success { background:#173b2a; }.alert-error { background:#4d2027; }.actions a { margin-right:10px; color:var(--accent); }.login-box { max-width:410px; margin:90px auto; }.login-box input,.login-box button { margin-bottom:15px; }

@media (max-width:850px) {
    .result-grid { grid-template-columns:1fr 1fr; }.chart-card { grid-column:1/-1; }.info-grid { grid-template-columns:1fr; }.info-grid article { min-height:auto; }.info-grid h2 { margin-top:24px; }.mode-bar { margin-inline:0; }.metric-strip { grid-template-columns:repeat(3,1fr); }
    .home-hero { grid-template-columns:1fr; padding:75px 0; }.hero-demo { max-width:650px; }.test-card-grid { grid-template-columns:repeat(2,1fr); }.home-benefits { grid-template-columns:1fr; gap:40px; }
    .keyboard-trainer { grid-template-columns:1fr; }.hand-guide { display:none; }.virtual-keyboard { width:min(700px,100%); margin:auto; }.lesson-grid { grid-template-columns:1fr; }
}
@media (max-width:620px) {
    .app-header,.workspace,.app-footer { width:min(100% - 28px,1180px); }.app-header { height:80px; }.brand-copy small { display:none; }.header-actions .icon-btn small { display:none; }.icon-btn { min-width:39px; }.workspace { padding-top:35px; }.intro { align-items:flex-start; flex-direction:column; }.intro h1 { font-size:42px; }.test-studio { margin-top:42px; }.mode-bar { width:100%; }.option-toggles { display:none; }.live-row { margin-top:28px; }.live-primary strong { font-size:42px; }.live-stats { gap:10px; flex-direction:column; text-align:right; }.words { font-size:min(var(--font-size),29px); }.typing-stage { min-height:235px; }.words-viewport { max-height:205px; }.test-actions > span { display:none; }.virtual-keyboard { overflow-x:auto; }.key-row { min-width:570px; justify-content:flex-start; }.result-panel { padding:22px 16px; }.result-heading { align-items:flex-start; flex-direction:column; }.result-grid { grid-template-columns:1fr 1fr; gap:10px; }.hero-metric { padding:15px; }.hero-metric strong { font-size:45px; }.hero-metric.accent-two strong { font-size:29px; }.metric-strip { grid-template-columns:1fr 1fr; }.app-footer { padding:25px 0; flex-direction:column; justify-content:center; gap:8px; }.settings-drawer { padding:23px; }.lesson-banner { grid-template-columns:1fr; gap:8px; }.lesson-banner a { margin-top:5px; }
    .home-nav > a:not(.nav-cta) { display:none; }.theme-trigger span,.theme-trigger b { display:none; }.theme-trigger { width:38px; padding:0; justify-content:center; }.home-theme-menu { right:-48px; }.home-main { width:calc(100% - 28px); }.home-hero { min-height:auto; padding:65px 0 90px; gap:55px; }.hero-copy h1 { font-size:48px; }.hero-lead { font-size:15px; }.hero-demo { padding:18px; transform:none; }.hero-demo > p { font-size:19px; }.demo-stats strong { font-size:23px; }.catalog-heading { display:block; }.catalog-heading > p { margin-top:15px; }.test-card-grid { grid-template-columns:1fr; }.test-card { min-height:245px; }.home-benefits { padding:80px 0; }.benefit-list article { grid-template-columns:45px 1fr; }.benefit-list p { grid-column:2; }.home-page .app-footer span:nth-child(2) { display:none; }
    .lessons-main { width:calc(100% - 28px); }.lessons-hero { min-height:420px; padding:60px 0; }.lessons-hero h1 { font-size:47px; }.home-row-preview { max-width:100%; overflow-x:auto; justify-content:flex-start; }.lesson-list { padding:70px 0; }.lesson-grid a { grid-template-columns:35px 1fr auto; padding:20px; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; transition-duration:.01ms!important; } }

/* Typingstest sky: an original light workspace built around the typing surface. */
:root,
html[data-theme="sky"],
html[data-theme="midnight"],
html[data-theme="paper"],
html[data-theme="berry"],
html[data-theme="forest"] {
    --bg:#f7faff;
    --surface:#ffffff;
    --surface-2:#edf4ff;
    --text:#17233b;
    --muted:#72809a;
    --faint:#b9c6d9;
    --line:#dfe8f5;
    --accent:#1677ff;
    --accent-rgb:22,119,255;
    --wrong:#ef476f;
    --radius:18px;
}

body {
    background:
        radial-gradient(circle at 10% 5%,rgba(22,119,255,.08),transparent 24rem),
        radial-gradient(circle at 92% 38%,rgba(93,160,255,.07),transparent 27rem),
        var(--bg);
    letter-spacing:-.01em;
}

.app-shell { display:flex; min-height:100vh; flex-direction:column; }
.app-header,.workspace,.app-footer { width:min(1120px,calc(100% - 56px)); }
.app-header { height:84px; }
.brand-symbol {
    width:38px;
    height:38px;
    border-radius:12px;
    background:linear-gradient(145deg,#1677ff,#65a7ff);
    box-shadow:0 8px 24px rgba(22,119,255,.22);
}
.brand-symbol i { background:#fff; }
.brand-copy small { color:#91a0b7; }
.brand-copy strong { color:#17233b; font-size:21px; }
.icon-btn { min-width:52px; border-radius:12px; }
.icon-btn:hover,.icon-btn.active { color:var(--accent); background:#eaf3ff; }

.workspace { flex:1; padding:38px 0 96px; }
.intro { align-items:center; }
.intro .overline { margin-bottom:8px; }
.intro h1 { font-size:clamp(34px,4.4vw,54px); color:#18243b; }
.session-chip {
    padding:9px 13px;
    border:1px solid var(--line);
    border-radius:999px;
    background:rgba(255,255,255,.72);
    box-shadow:0 8px 30px rgba(48,86,138,.06);
}
.status-dot { box-shadow:0 0 0 4px rgba(var(--accent-rgb),.1); }

.test-studio { margin-top:58px; min-height:470px; }
.mode-bar {
    padding:5px;
    border-color:#d8e5f5;
    border-radius:14px;
    background:rgba(255,255,255,.84);
    box-shadow:0 10px 35px rgba(34,79,137,.07);
    backdrop-filter:blur(12px);
}
.mode-btn,.mode-values button,.quote-levels button { padding:8px 11px; border-radius:9px; }
.mode-btn.active,.mode-values button.active,.quote-levels button.active {
    color:#fff;
    background:var(--accent);
    box-shadow:0 5px 14px rgba(var(--accent-rgb),.2);
}
.mode-divider { background:#e1eaf6; }
.mode-section { display:flex; align-items:center; gap:9px; }
.mode-section-label {
    color:#9aa8bc;
    font:600 8px "DM Mono",monospace;
    letter-spacing:.12em;
    text-transform:uppercase;
}

.live-row { min-height:78px; margin:42px auto 0; max-width:1040px; }
.live-primary strong { color:var(--accent); font-size:48px; }
.live-primary span,.live-stats { color:#8997ad; }
.live-stats { padding-bottom:4px; }
.live-stats b { color:#34425b; }

.typing-stage {
    min-height:230px;
    padding:28px 30px;
    border:0;
    border-radius:20px;
    background:rgba(255,255,255,.48);
    box-shadow:inset 0 0 0 1px rgba(207,222,241,.85),0 18px 60px rgba(55,91,139,.08);
    transition:background .25s,box-shadow .25s,transform .25s;
}
.typing-stage.focused {
    background:rgba(255,255,255,.78);
    box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.28),0 22px 70px rgba(43,91,154,.11);
}
.typing-stage.caps-lock-on {
    box-shadow:inset 0 0 0 1px rgba(239,71,111,.48),0 22px 70px rgba(239,71,111,.12);
}
.caps-lock-warning {
    position:absolute;
    left:50%;
    bottom:18px;
    z-index:5;
    max-width:calc(100% - 32px);
    padding:9px 13px;
    color:#84233a;
    border:1px solid rgba(239,71,111,.28);
    border-radius:10px;
    background:rgba(255,241,244,.96);
    box-shadow:0 10px 30px rgba(132,35,58,.12);
    font:700 12px/1.35 "Manrope",sans-serif;
    text-align:center;
    transform:translateX(-50%);
}
.words-viewport { max-height:176px; mask-image:linear-gradient(to bottom,transparent,#000 10%,#000 90%,transparent); }
.words {
    color:#afbdd0;
    font-weight:500;
    line-height:1.52;
    letter-spacing:-.04em;
    transition:transform .22s cubic-bezier(.2,.8,.2,1),font-size .2s;
    will-change:transform;
}
.letter { transition:color .09s ease; }
.letter.correct { color:#263653; }
.letter.incorrect { color:var(--wrong); }
.letter.current::before { display:none; }
.word.error .letter:not(.correct) { text-decoration-color:rgba(239,71,111,.65); }
.smooth-caret {
    width:3px;
    position:absolute;
    z-index:3;
    left:-1px;
    top:0;
    border-radius:999px;
    background:var(--accent);
    box-shadow:0 0 0 3px rgba(var(--accent-rgb),.08),0 0 14px rgba(var(--accent-rgb),.35);
    pointer-events:none;
    transition:transform 85ms cubic-bezier(.2,.8,.2,1),height 85ms ease;
    animation:skyCaret 1.05s ease-in-out infinite;
    will-change:transform;
}
.smooth-caret.instant { transition:none; }
@keyframes skyCaret { 0%,42%,100% { opacity:1; } 58%,82% { opacity:.28; } }
.practice-actions { display:none; }
.focus-prompt {
    border-radius:20px;
    background:rgba(247,250,255,.72)!important;
    backdrop-filter:blur(8px);
}
.typing-stage.focused .focus-prompt,.typing-stage.started .focus-prompt { opacity:0; }
.test-actions { margin-top:22px; }
.restart-action { border:0; background:#eaf3ff; color:#567092; }
.restart-action:hover { color:var(--accent); background:#deedff; }
kbd { border-color:#d7e2f0; background:#fff; box-shadow:0 2px 0 #d7e2f0; }

.result-panel {
    border-color:#dbe7f5;
    background:rgba(255,255,255,.86);
    box-shadow:0 28px 80px rgba(46,82,130,.1);
}
.hero-metric,.chart-card { background:#f3f7fd; }
.hero-metric.accent-two strong { color:#243550; }
.metric-strip { border-color:#dfe8f5; }
.result-copy { padding:9px 12px; color:var(--muted); border:1px solid var(--line); border-radius:9px; background:#fff; font:500 10px "DM Mono",monospace; }
.result-copy:hover { color:var(--accent); }
body.result-open { overflow:hidden; }
.result-panel:not([hidden]) {
    width:min(880px,calc(100% - 32px));
    max-height:calc(100dvh - 32px);
    margin:0;
    padding:clamp(22px,3vw,34px);
    position:fixed;
    z-index:310;
    inset:50% auto auto 50%;
    display:block;
    overflow-y:auto;
    border:1px solid rgba(207,222,241,.95);
    border-radius:24px;
    background:#fff;
    box-shadow:0 34px 100px rgba(31,65,108,.24);
    transform:translate(-50%,-50%);
    animation:resultPop .24s cubic-bezier(.2,.8,.2,1);
}
body.result-open::before {
    content:"";
    position:fixed;
    z-index:300;
    inset:0;
    background:rgba(31,52,80,.32);
    backdrop-filter:blur(8px);
}
@keyframes resultPop { from { opacity:0; transform:translate(-50%,-46%) scale(.97); } }
.result-panel .result-actions {
    margin-top:26px;
    padding-top:20px;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:10px;
    border-top:1px solid var(--line);
}
.result-panel .result-actions button {
    min-height:46px;
    padding:0 15px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    color:#526884;
    border:1px solid #dce7f4;
    border-radius:12px;
    background:#f5f8fd;
    font:600 11px "DM Mono",monospace;
}
.result-panel .result-actions button:hover { color:var(--accent); border-color:#9bc5ff; background:#edf5ff; }
.result-panel .result-actions .result-next { color:#fff; border-color:var(--accent); background:var(--accent); box-shadow:0 9px 22px rgba(var(--accent-rgb),.22); }
.result-panel .result-actions .result-next:hover { color:#fff; background:#0868ec; }
.result-panel .result-actions .result-exit { color:#d64767; }
.result-panel .result-actions .result-exit:hover { color:#fff; border-color:#ef476f; background:#ef476f; }
.result-panel .result-actions b { font:inherit; }

.keyboard-trainer { margin-top:44px; }
.virtual-keyboard { border-color:#dbe6f3; background:rgba(255,255,255,.76); box-shadow:0 18px 55px rgba(45,82,130,.07); }
.key { border-color:#dbe5f2; color:#72809a; background:#fff; box-shadow:0 3px 0 #dbe5f2; }
.key.next { color:var(--accent); border-color:#7db4ff; }
.key.active { color:#fff; background:var(--accent); box-shadow:none; }
.hand-guide {
    width:220px;
    height:250px;
    filter:drop-shadow(0 18px 20px rgba(58,72,95,.12));
}
.hand-guide > img { width:100%; height:238px; display:block; object-fit:contain; object-position:center bottom; pointer-events:none; }
.hand-guide .hand-label { bottom:-2px; color:#8998ae; }
.hand-guide .finger {
    width:24px;
    height:24px;
    z-index:3;
    border:0;
    border-radius:50%;
    background:transparent;
    transform:none!important;
}
.hand-guide .finger b {
    width:10px;
    height:10px;
    top:7px;
    border:2px solid rgba(255,255,255,.92);
    background:rgba(22,119,255,.3);
    box-shadow:0 2px 8px rgba(40,73,115,.22);
}
.hand-guide .finger small {
    top:-15px;
    padding:2px 5px;
    color:#60718a;
    border-radius:5px;
    background:rgba(255,255,255,.86);
    opacity:0;
    transition:opacity .15s;
}
.hand-guide .finger.next small { opacity:1; }
.hand-guide .finger.next,.hand-guide .finger.pressed { border:0; background:transparent; }
.hand-guide .finger.next b {
    border-color:#fff;
    background:var(--accent);
    box-shadow:0 0 0 6px rgba(var(--accent-rgb),.14),0 0 18px rgba(var(--accent-rgb),.5);
}
.hand-guide .finger.pressed b { background:#0f5fcc; transform:translateX(-50%) scale(.82); }
.left-hand .pinky { left:26px; top:37px; }.left-hand .ring { left:57px; top:10px; }.left-hand .middle { left:90px; top:-3px; }.left-hand .index { left:125px; top:12px; }.left-hand .thumb { left:167px; top:85px; }
.right-hand .thumb { left:28px; top:89px; }.right-hand .index { left:68px; top:13px; }.right-hand .middle { left:104px; top:-2px; }.right-hand .ring { left:138px; top:10px; }.right-hand .pinky { left:168px; top:34px; }

.three-practice-cards { grid-template-columns:repeat(3,minmax(0,1fr)); }

/* Category library */
.practice-library { width:min(1100px,calc(100% - 48px)); margin:auto; }
.library-hero { padding:70px 0 55px; text-align:center; }
.library-back { display:inline-block; margin-bottom:35px; color:var(--muted); font:500 10px "DM Mono",monospace; text-decoration:none; }
.library-hero h1 { margin-top:10px; font-size:clamp(42px,6vw,68px); line-height:1; letter-spacing:-.055em; }
.library-hero > p:not(.overline) { max-width:620px; margin:20px auto 0; color:var(--muted); font-size:15px; }
.library-tabs { margin-top:38px; padding:6px; display:inline-flex; gap:5px; border:1px solid #dbe6f3; border-radius:13px; background:#fff; box-shadow:0 12px 35px rgba(42,85,143,.08); }
.library-tabs a { padding:10px 14px; color:var(--muted); border-radius:8px; font:500 10px "DM Mono",monospace; text-decoration:none; }
.library-tabs a.active { color:#fff; background:var(--accent); }
.practice-items { padding:55px 0 110px; border-top:1px solid var(--line); }
.library-heading { margin-bottom:28px; display:flex; align-items:end; justify-content:space-between; gap:30px; }
.library-heading > div { display:flex; align-items:center; gap:13px; }
.library-heading span { width:36px; height:36px; display:grid; place-items:center; color:var(--accent); border-radius:10px; background:rgba(var(--accent-rgb),.09); font:500 11px "DM Mono",monospace; }
.library-heading h2 { font-size:27px; }
.library-heading > p { max-width:420px; color:var(--muted); font-size:12px; text-align:right; }
.practice-item-grid { display:grid; grid-template-columns:1fr 1fr; gap:13px; }
.practice-item-card { min-height:185px; padding:23px; display:grid; grid-template-columns:48px 1fr; gap:17px; position:relative; color:var(--text); border:1px solid #dce7f4; border-radius:14px; background:rgba(255,255,255,.86); text-decoration:none; transition:.2s; }
.practice-item-card:hover { transform:translateY(-3px); border-color:#8dbdff; box-shadow:0 17px 40px rgba(42,85,143,.1); }
.practice-item-number { color:var(--accent); font:500 11px "DM Mono",monospace; }
.practice-item-card small { color:var(--accent); font:500 9px "DM Mono",monospace; text-transform:uppercase; letter-spacing:.08em; }
.practice-item-card h3 { margin:7px 0; font-size:18px; }
.practice-item-card p { max-width:430px; color:var(--muted); font-size:11px; line-height:1.7; }
.practice-item-card > b { grid-column:2; align-self:end; color:var(--accent); font:600 10px "DM Mono",monospace; }
.practice-item-card > b span { margin-left:5px; }
.library-empty { padding:70px 25px; text-align:center; border:1px dashed #b9cee7; border-radius:16px; background:rgba(255,255,255,.62); }
.library-empty span { color:var(--accent); font:500 10px "DM Mono",monospace; text-transform:uppercase; }
.library-empty h2 { margin:10px 0; font-size:27px; }
.library-empty p { color:var(--muted); font-size:12px; }
.library-empty a { display:inline-block; margin-top:20px; color:#fff; padding:11px 16px; border-radius:9px; background:var(--accent); font:600 10px "DM Mono",monospace; text-decoration:none; }

@media (max-width:760px) {
    .practice-library { width:calc(100% - 28px); }
    .library-tabs { width:100%; display:grid; }
    .practice-item-grid { grid-template-columns:1fr; }
    .library-heading { align-items:flex-start; flex-direction:column; }
    .library-heading > p { text-align:left; }
}

/* Custom typing test */
.custom-practice-main { width:min(1100px,calc(100% - 48px)); min-height:calc(100vh - 180px); margin:auto; padding:75px 0 95px; display:grid; grid-template-columns:.9fr 1.1fr; align-items:center; gap:80px; }
.custom-copy h1 { max-width:500px; margin-top:12px; font-size:clamp(44px,6vw,70px); line-height:.98; letter-spacing:-.06em; }
.custom-copy > p:not(.overline) { max-width:520px; margin-top:22px; color:var(--muted); font-size:14px; line-height:1.8; }
.custom-points { margin-top:35px; display:grid; gap:13px; color:var(--text); font-size:12px; }
.custom-points span { display:flex; align-items:center; gap:12px; }
.custom-points b { width:31px; height:31px; display:grid; place-items:center; color:var(--accent); border-radius:9px; background:rgba(var(--accent-rgb),.09); font:500 9px "DM Mono",monospace; }
.custom-practice-form { padding:30px; border:1px solid #d8e5f4; border-radius:18px; background:rgba(255,255,255,.9); box-shadow:0 28px 75px rgba(48,87,140,.13); }
.custom-form-head { margin-bottom:27px; display:flex; align-items:center; gap:13px; }
.custom-form-head > span { width:48px; height:48px; display:grid; place-items:center; color:#fff; border-radius:12px; background:var(--accent); font:600 15px "DM Mono",monospace; }
.custom-form-head small { color:var(--accent); font:500 9px "DM Mono",monospace; text-transform:uppercase; letter-spacing:.09em; }
.custom-form-head h2 { margin-top:3px; font-size:22px; }
.custom-practice-form > label { margin:17px 0 7px; display:block; font-size:11px; font-weight:700; }
.custom-practice-form > label small { color:var(--muted); font-weight:500; }
.custom-practice-form input,.custom-practice-form textarea { width:100%; padding:13px 14px; color:var(--text); border:1px solid #d9e5f3; border-radius:10px; outline:none; background:#f9fbfe; font:500 12px/1.7 "Manrope",sans-serif; transition:.15s; }
.custom-practice-form textarea { min-height:240px; resize:vertical; }
.custom-practice-form input:focus,.custom-practice-form textarea:focus { border-color:#7eb5ff; box-shadow:0 0 0 4px rgba(var(--accent-rgb),.09); }
.custom-form-foot { margin-top:18px; display:flex; align-items:center; justify-content:space-between; gap:15px; }
.custom-form-foot > span { color:var(--muted); font:500 9px "DM Mono",monospace; }
.custom-form-foot button { padding:13px 17px; color:#fff; border:0; border-radius:9px; background:var(--accent); box-shadow:0 10px 25px rgba(var(--accent-rgb),.22); font:600 10px "DM Mono",monospace; cursor:pointer; }
.custom-form-foot button b { margin-left:7px; }

@media (max-width:820px) {
    .custom-practice-main { width:calc(100% - 28px); padding-top:50px; grid-template-columns:1fr; gap:45px; }
}

@media (max-width:520px) {
    .custom-practice-form { padding:21px 16px; }
    .custom-form-foot { align-items:stretch; flex-direction:column; }
    .custom-form-foot button { width:100%; }
}

/* Content-rich home and interface polish */
.app-header { position:relative; z-index:20; }
.brand-symbol { box-shadow:0 8px 22px rgba(var(--accent-rgb),.2); }
.home-nav a:not(.nav-cta) { position:relative; }
.home-nav a:not(.nav-cta)::after { height:2px; position:absolute; right:0; bottom:-7px; left:0; border-radius:4px; background:var(--accent); content:""; transform:scaleX(0); transition:transform .18s; }
.home-nav a:not(.nav-cta):hover::after { transform:scaleX(1); }
.primary-link,.nav-cta,.custom-form-foot button { transition:transform .18s,box-shadow .18s,background .18s; }
.primary-link:hover,.nav-cta:hover,.custom-form-foot button:hover { transform:translateY(-2px); box-shadow:0 14px 30px rgba(var(--accent-rgb),.28); }
.test-card { overflow:hidden; }
.test-card::before { width:140px; height:140px; position:absolute; top:-80px; left:-70px; border-radius:50%; background:rgba(var(--accent-rgb),.07); content:""; transition:transform .25s; }
.test-card:hover::before { transform:scale(1.25); }
.test-card.featured small,.test-card.featured h3,.test-card.featured p,.test-card.featured .card-number,.test-card.featured .card-arrow { color:#fff; }
.test-card.featured p { opacity:.82; }
.test-card.featured .card-icon { color:#fff; border-color:rgba(255,255,255,.35); background:rgba(255,255,255,.14); }
.seo-guide { padding:105px 0; border-top:1px solid var(--line); }
.seo-guide-heading { max-width:780px; }
.seo-guide-heading h2,.typing-advice h2,.home-faq h2 { margin-top:8px; font-size:clamp(34px,4.7vw,54px); line-height:1.06; letter-spacing:-.055em; }
.seo-guide-heading > p:not(.overline) { max-width:690px; margin-top:20px; color:var(--muted); font-size:14px; line-height:1.75; }
.seo-guide-grid { margin-top:45px; display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.seo-guide-grid article { min-height:245px; padding:25px; border:1px solid #dce7f4; border-radius:15px; background:linear-gradient(155deg,rgba(255,255,255,.96),rgba(244,249,255,.8)); box-shadow:0 16px 45px rgba(42,85,143,.06); }
.seo-guide-grid article > span { color:var(--accent); font:600 10px "DM Mono",monospace; }
.seo-guide-grid h3 { margin:45px 0 11px; font-size:18px; }
.seo-guide-grid p { color:var(--muted); font-size:12px; line-height:1.75; }
.seo-guide-grid a,.advice-copy a { color:var(--accent); font-weight:700; text-underline-offset:3px; }
.seo-card-grid { margin-top:14px; }
.keyword-section { padding:95px 0; display:grid; grid-template-columns:.82fr 1.18fr; gap:70px; border-top:1px solid var(--line); }
.keyword-section h2 { margin-top:8px; font-size:clamp(32px,4.4vw,52px); line-height:1.07; letter-spacing:-.055em; }
.keyword-copy p { color:var(--muted); font-size:14px; line-height:1.85; }
.keyword-copy p + p { margin-top:18px; }
.keyword-section.split { display:block; }
.seo-list-grid { margin-top:38px; display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.seo-list-grid article { min-height:180px; padding:24px; border:1px solid #dce7f4; border-radius:15px; background:rgba(255,255,255,.84); box-shadow:0 15px 42px rgba(42,85,143,.05); }
.seo-list-grid h3 { font-size:18px; }
.seo-list-grid p { margin-top:12px; color:var(--muted); font-size:12px; line-height:1.75; }
.typing-advice { padding:95px 0; display:grid; grid-template-columns:.85fr 1.15fr; gap:80px; border-top:1px solid var(--line); }
.advice-copy { padding-left:35px; border-left:2px solid rgba(var(--accent-rgb),.18); }
.advice-copy p { color:var(--muted); font-size:14px; line-height:1.85; }
.advice-copy p + p { margin-top:18px; }
.home-faq { padding:105px 0; border-top:1px solid var(--line); }
.faq-list { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.faq-list details { padding:19px 21px; border:1px solid #dce7f4; border-radius:13px; background:rgba(255,255,255,.86); }
.faq-list summary { position:relative; padding-right:28px; cursor:pointer; list-style:none; font-size:13px; font-weight:800; }
.faq-list summary::-webkit-details-marker { display:none; }
.faq-list summary::after { position:absolute; top:-2px; right:0; color:var(--accent); font:500 20px "DM Mono",monospace; content:"+"; }
.faq-list details[open] summary::after { content:"-"; }
.faq-list p { margin-top:12px; color:var(--muted); font-size:11px; line-height:1.75; }
.settings-drawer .setting-row { transition:background .15s; }
.settings-drawer .setting-row:hover { background:#f7faff; }
.practice-source-summary { margin-top:75px; padding:28px; display:grid; grid-template-columns:220px 1fr auto; align-items:start; gap:30px; border:1px solid #dce7f4; border-radius:15px; background:rgba(255,255,255,.82); }
.practice-source-summary span { color:var(--accent); font:600 9px "DM Mono",monospace; text-transform:uppercase; }
.practice-source-summary h2 { margin-top:7px; font-size:19px; }
.practice-source-summary p { color:var(--muted); font-size:12px; line-height:1.8; }
.practice-source-summary a { color:var(--accent); font:600 10px "DM Mono",monospace; text-decoration:none; white-space:nowrap; }
body.practice-mode .practice-source-summary { display:none; }

@media (max-width:900px) {
    .seo-guide-grid { grid-template-columns:1fr; }
    .seo-guide-grid article { min-height:190px; }
    .seo-guide-grid h3 { margin-top:28px; }
    .keyword-section { grid-template-columns:1fr; gap:30px; }
    .seo-list-grid { grid-template-columns:1fr 1fr; }
    .typing-advice { grid-template-columns:1fr; gap:35px; }
    .advice-copy { padding-left:0; border-left:0; }
    .practice-source-summary { grid-template-columns:1fr; }
    .practice-source-summary a { white-space:normal; }
}

@media (max-width:650px) {
    .seo-guide,.typing-advice,.home-faq,.keyword-section { padding:75px 0; }
    .faq-list { grid-template-columns:1fr; }
    .seo-list-grid { grid-template-columns:1fr; }
}

.info-grid { margin-top:110px; border-color:#e0e9f5; background:#e0e9f5; box-shadow:0 20px 60px rgba(51,87,135,.06); }
.info-grid article { background:rgba(255,255,255,.86); }
.app-footer { margin-top:auto; border-color:#dfe8f5; }
.app-footer a { color:inherit; text-decoration:none; }
.app-footer a:hover { color:var(--accent); }

/* Static SEO and trust pages */
.content-page-main { width:min(100% - 40px,980px); margin:0 auto; padding:76px 0 95px; }
.content-hero { padding-bottom:48px; border-bottom:1px solid var(--line); }
.content-hero h1 { max-width:820px; margin-top:12px; font-size:clamp(42px,7vw,74px); line-height:.98; letter-spacing:-.065em; }
.content-hero p { max-width:760px; margin-top:22px; color:var(--muted); font-size:16px; line-height:1.8; }
.content-layout { margin-top:48px; display:grid; grid-template-columns:240px 1fr; gap:52px; align-items:start; }
.content-sidebar { position:sticky; top:22px; display:grid; gap:10px; }
.content-sidebar a { padding:11px 13px; color:#53677f; border:1px solid #dce7f4; border-radius:10px; background:rgba(255,255,255,.72); text-decoration:none; font:700 11px "DM Mono",monospace; }
.content-sidebar a:hover { color:var(--accent); border-color:#a9cbfa; background:#fff; }
.content-body section { padding:0 0 34px; }
.content-body section + section { padding-top:34px; border-top:1px solid var(--line); }
.content-body h2 { font-size:30px; letter-spacing:-.035em; }
.content-body h3 { margin-top:22px; font-size:18px; }
.content-body p,.content-body li { color:var(--muted); font-size:14px; line-height:1.85; }
.content-body p { margin-top:14px; }
.content-body ul,.content-body ol { margin:16px 0 0 20px; }
.content-body a { color:var(--accent); font-weight:800; text-underline-offset:3px; }
.contact-panel { margin-top:18px; padding:22px; border:1px solid #dce7f4; border-radius:15px; background:rgba(255,255,255,.84); }
.contact-panel b,.contact-panel span { display:block; }
.contact-panel b { color:#263653; }
.contact-panel span { margin-top:6px; color:var(--muted); font-size:13px; line-height:1.7; }

@media (max-width:900px) {
    .content-layout { grid-template-columns:1fr; gap:30px; }
    .content-sidebar { position:static; grid-template-columns:repeat(2,1fr); }
}

@media (max-width:650px) {
    .content-page-main { width:calc(100% - 28px); padding-top:52px; }
    .content-sidebar { grid-template-columns:1fr; }
}

.settings-drawer { border-color:#dfe8f5; background:#fff; box-shadow:-25px 0 70px rgba(36,67,108,.16); }
.drawer-backdrop { background:rgba(38,64,99,.2); }
.theme-note { margin:24px 0 4px; padding:16px; display:flex; gap:12px; border:1px solid #dbe8f7; border-radius:13px; background:#f4f8fe; }
.theme-note i { width:14px; height:14px; flex:0 0 auto; margin-top:3px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 5px rgba(var(--accent-rgb),.1); }
.theme-note b,.theme-note span { display:block; }
.theme-note b { font-size:13px; }
.theme-note span { margin-top:4px; color:var(--muted); font-size:10px; }
.switch i { background:#fff; }
.switch.active i { background:#fff; }

.home-nav .nav-cta,.primary-link { color:#fff; background:var(--accent); box-shadow:0 9px 24px rgba(var(--accent-rgb),.2); }
.home-hero { min-height:590px; }
.hero-copy h1 { color:#17233b; }
.hero-demo { border-color:#dce8f6; background:rgba(255,255,255,.88); box-shadow:0 30px 90px rgba(48,87,140,.14); }
.test-card,.benefit-list article { border-color:#dce7f4; background:rgba(255,255,255,.8); }
.test-card:hover { border-color:#95c2ff; box-shadow:0 18px 45px rgba(42,85,143,.1); }
.test-card.featured { background:linear-gradient(145deg,#1677ff,#4c98ff); }

body.test-running.focus-fade .app-header,
body.test-running.focus-fade .intro,
body.test-running.focus-fade .mode-bar,
body.test-running.focus-fade .test-actions,
body.test-running.focus-fade .info-grid,
body.test-running.focus-fade .app-footer { opacity:.08; filter:blur(1px); }
body.test-running.focus-fade .typing-stage { transform:translateY(-4px); }

/* Full-viewport practice workspace */
body.practice-mode { overflow:hidden; }
body.practice-mode .test-studio {
    width:100%;
    height:100dvh;
    min-height:0;
    margin:0;
    padding:clamp(14px,2.2vh,24px) clamp(16px,4vw,56px);
    position:fixed;
    z-index:200;
    inset:0;
    display:grid;
    grid-template-rows:auto auto auto minmax(150px,1fr) auto;
    align-items:center;
    gap:clamp(8px,1.5vh,16px);
    overflow:hidden;
    background:
        radial-gradient(circle at 15% 0,rgba(22,119,255,.1),transparent 26rem),
        radial-gradient(circle at 100% 70%,rgba(93,160,255,.08),transparent 30rem),
        #f7faff;
}
body.practice-mode .practice-actions {
    width:min(1080px,100%);
    margin:auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
}
.practice-brand { display:flex; align-items:center; gap:9px; color:#253651; text-decoration:none; font-weight:800; letter-spacing:-.04em; }
.practice-brand span { width:22px; height:22px; display:block; border-radius:7px; background:linear-gradient(145deg,#1677ff,#65a7ff); box-shadow:0 6px 16px rgba(22,119,255,.2); }
.practice-actions > div { display:flex; gap:8px; }
.practice-actions button {
    min-height:38px;
    padding:0 14px;
    display:flex;
    align-items:center;
    gap:7px;
    color:#46617f;
    border:1px solid #d9e5f3;
    border-radius:11px;
    background:rgba(255,255,255,.82);
    font:600 11px "DM Mono",monospace;
    box-shadow:0 8px 24px rgba(50,86,134,.07);
}
.practice-actions button b { font:inherit; }
.practice-actions button:hover { color:var(--accent); border-color:#a9cbfa; background:#fff; }
.practice-actions .practice-exit { color:#d64767; }
.practice-actions .practice-exit:hover { color:#fff; border-color:#ef476f; background:#ef476f; }
.practice-actions #practiceSound[aria-pressed="false"] { color:#8998aa; background:#f3f6fa; box-shadow:none; }
.icon-btn[aria-pressed="false"] { opacity:.62; }
.icon-btn:focus-visible,.practice-actions button:focus-visible,.mode-bar button:focus-visible,.result-actions button:focus-visible { outline:3px solid rgba(var(--accent-rgb),.2); outline-offset:3px; }
body.practice-mode .lesson-banner,
body.practice-mode .test-actions,
body.practice-mode .result-panel { display:none!important; }
body.practice-mode .mode-bar {
    width:max-content;
    max-width:100%;
    margin:auto;
    opacity:1!important;
    filter:none!important;
}
body.practice-mode .live-row {
    width:min(1040px,100%);
    min-height:0;
    margin:0 auto;
    align-items:center;
}
body.practice-mode .live-primary strong { font-size:clamp(32px,5vh,48px); }
body.practice-mode .typing-stage {
    width:min(1080px,100%);
    height:100%;
    min-height:150px;
    max-height:270px;
    margin:auto;
    padding:clamp(16px,2.5vh,28px) clamp(18px,3vw,32px);
    transform:none!important;
}
body.practice-mode .words-viewport { max-height:100%; }
body.practice-mode .words { font-size:clamp(23px,3.2vw,var(--font-size)); line-height:1.48; }
body.practice-mode .keyboard-trainer {
    width:min(1220px,100%);
    margin:0 auto;
    display:grid!important;
    grid-template-columns:220px minmax(540px,760px) 220px;
    gap:0;
    align-self:end;
}
body.practice-mode .hand-guide { width:220px; height:238px; display:block; transform:none; }
body.practice-mode .hand-guide > img { height:228px; }
body.practice-mode .left-hand { justify-self:end; margin-right:-12px; }
body.practice-mode .right-hand { justify-self:start; margin-left:-12px; }
body.practice-mode .virtual-keyboard {
    width:100%;
    padding:clamp(10px,1.7vh,17px);
    overflow:hidden;
}
body.practice-mode .keyboard-caption { margin-bottom:clamp(6px,1vh,11px); }
body.practice-mode .key-row {
    min-width:0;
    margin-bottom:clamp(4px,.75vh,7px);
    gap:clamp(3px,.65vw,7px);
    padding-left:0;
    padding-right:0;
}
body.practice-mode .key {
    width:clamp(25px,4.2vw,44px);
    height:clamp(29px,4.8vh,40px);
    flex:0 1 44px;
}
body.practice-mode .key-wide { width:clamp(48px,8vw,75px); flex-basis:75px; }
body.practice-mode .key-space { width:min(38vw,280px); flex-basis:280px; }

@media (max-height:700px) {
    body.practice-mode .test-studio { padding-block:10px; gap:7px; }
    body.practice-mode .live-stats { display:none; }
    body.practice-mode .typing-stage { max-height:205px; }
    body.practice-mode .keyboard-caption { display:none; }
    body.practice-mode .virtual-keyboard { padding:9px; }
    body.practice-mode .key { height:28px; }
    body.practice-mode .keyboard-trainer { grid-template-columns:175px minmax(520px,700px) 175px; }
    body.practice-mode .hand-guide {
        width:220px;
        height:238px;
        transform:scale(.78);
        transform-origin:center bottom;
    }
    body.practice-mode .hand-guide > img { height:228px; }
}

@media (max-width:850px) {
    .app-header,.workspace,.app-footer { width:min(100% - 32px,1120px); }
    .typing-stage { padding-inline:22px; }
    .keyboard-trainer { grid-template-columns:1fr; }
    .hand-guide { display:none; }
    body.practice-mode .keyboard-trainer { grid-template-columns:1fr; }
    body.practice-mode .hand-guide { display:none; }
}

@media (max-width:620px) {
    .app-header,.workspace,.app-footer { width:calc(100% - 24px); }
    .workspace { padding-top:25px; }
    .intro { gap:18px; }
    .intro h1 { font-size:36px; }
    .session-chip { padding:7px 10px; }
    .test-studio { margin-top:36px; }
    .mode-bar { justify-content:flex-start; }
    .live-row { min-height:68px; }
    .live-primary strong { font-size:38px; }
    .typing-stage { min-height:218px; padding:20px 16px; }
    .words-viewport { max-height:184px; }
    .words { font-size:min(var(--font-size),28px); }
    body.practice-mode .test-studio { padding-inline:10px; }
    body.practice-mode .practice-actions { padding-inline:2px; }
    body.practice-mode .practice-brand { font-size:14px; }
    body.practice-mode .practice-actions button { min-height:34px; padding-inline:10px; }
    body.practice-mode .mode-bar { width:100%; }
    body.practice-mode .option-section,body.practice-mode .mode-divider:nth-of-type(2),body.practice-mode .mode-section-label { display:none; }
    body.practice-mode .live-stats { flex-direction:row; text-align:left; }
    body.practice-mode .typing-stage { min-height:145px; }
    .result-panel:not([hidden]) { width:calc(100% - 20px); max-height:calc(100dvh - 20px); padding:20px 14px; border-radius:18px; }
    .result-panel .result-heading { flex-direction:row; align-items:center; }
    .result-panel .result-grid { grid-template-columns:1fr 1fr; }
    .result-panel .chart-card { display:none; }
    .result-panel .metric-strip { grid-template-columns:repeat(3,1fr); }
    .result-panel .result-actions { grid-template-columns:1fr; }
}