:root {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  --bg: #17191f;
  --panel: #20232b;
  --panel-2: #262a33;
  --text: #d9dde5;
  --sub: #646b78;
  --sub-2: #424854;
  --main: #e3b65f;
  --main-soft: rgba(227, 182, 95, .13);
  --error: #e36c72;
  --error-extra: #7f3d42;
  --shadow: rgba(0,0,0,.32);
  --test-font-size: 34px;
  --radius: 12px;
}
body[data-theme="ocean"] { --bg:#0f1820; --panel:#16232d; --panel-2:#1c2d39; --text:#d6e2e8; --sub:#647986; --sub-2:#344955; --main:#61c5c9; --main-soft:rgba(97,197,201,.13); --error:#ef7d88; --error-extra:#7a4047; --shadow:rgba(0,0,0,.35); }
body[data-theme="paper"] { --bg:#eee9df; --panel:#e4ddd0; --panel-2:#d9d0c1; --text:#3f3a35; --sub:#8b8175; --sub-2:#c0b6a7; --main:#a5643c; --main-soft:rgba(165,100,60,.12); --error:#b94848; --error-extra:#d7aaaa; --shadow:rgba(61,51,40,.14); }
body[data-theme="midnight"] { --bg:#0b0d12; --panel:#11151d; --panel-2:#171c26; --text:#d9e2f2; --sub:#58657b; --sub-2:#273044; --main:#8aa8ff; --main-soft:rgba(138,168,255,.12); --error:#ff7185; --error-extra:#783543; --shadow:rgba(0,0,0,.5); }
* { box-sizing:border-box; }
html, body { margin:0; min-height:100%; background:var(--bg); color:var(--text); }
body { transition:background-color .18s ease, color .18s ease; overflow-x:hidden; }
button, textarea, input { font:inherit; }
button { border:0; color:inherit; background:none; cursor:pointer; }
button:focus-visible, textarea:focus-visible, input:focus-visible { outline:2px solid var(--main); outline-offset:3px; }
.hidden { display:none !important; }
.shell { width:min(1180px, calc(100% - 42px)); margin:0 auto; }
.topbar { height:92px; display:flex; align-items:center; justify-content:space-between; }
.brand { display:flex; align-items:center; gap:11px; padding:6px 0; color:var(--text); }
.brand-mark { width:38px; height:30px; display:flex; align-items:flex-end; gap:4px; padding:5px 6px; border-radius:8px; background:var(--main); box-shadow:0 7px 22px var(--main-soft); }
.brand-mark i { display:block; width:6px; border-radius:2px 2px 1px 1px; background:var(--bg); opacity:.9; }
.brand-mark i:nth-child(1){height:9px}.brand-mark i:nth-child(2){height:17px}.brand-mark i:nth-child(3){height:13px}
.brand-copy { display:flex; align-items:baseline; letter-spacing:-.055em; }
.brand-copy strong { font-size:22px; font-weight:760; }
.brand-copy small { font-size:14px; color:var(--sub); letter-spacing:-.02em; margin-left:2px; }
.top-actions { display:flex; gap:4px; }
.icon-button { width:40px; height:40px; display:grid; place-items:center; border-radius:9px; color:var(--sub); transition:.15s ease; }
.icon-button:hover { color:var(--main); background:var(--main-soft); }
.icon-button svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.main-stage { min-height:calc(100vh - 160px); display:flex; align-items:center; }
.test-screen, .result-screen { width:100%; padding:34px 0 54px; }
.modebar { min-height:48px; width:max-content; max-width:100%; margin:0 auto 54px; display:flex; align-items:center; justify-content:center; gap:11px; padding:8px 12px; background:var(--panel); border-radius:var(--radius); color:var(--sub); box-shadow:0 12px 34px rgba(0,0,0,.07); transition:opacity .18s ease, transform .18s ease; }
.mode-row { display:flex; align-items:center; gap:2px; }
.mode-row button { padding:7px 8px; border-radius:7px; font-size:13px; color:var(--sub); white-space:nowrap; transition:color .12s ease, background .12s ease; }
.mode-row button:hover { color:var(--text); }
.mode-row button.active { color:var(--main); background:var(--main-soft); }
.mode-divider { width:1px; height:20px; background:var(--sub-2); }
.test-screen.running .modebar { opacity:.17; transform:translateY(-4px); pointer-events:none; }
.custom-panel { width:min(800px,100%); margin:-25px auto 34px; padding:14px; background:var(--panel); border-radius:var(--radius); }
.custom-panel textarea { display:block; width:100%; min-height:108px; resize:vertical; border:0; padding:11px 12px; border-radius:9px; background:var(--bg); color:var(--text); line-height:1.5; outline:none; }
.custom-actions { display:flex; justify-content:space-between; align-items:center; padding:10px 2px 0; color:var(--sub); font-size:12px; }
.accent-button { padding:8px 12px; border-radius:7px; color:var(--bg); background:var(--main); font-weight:700; }
.live-row { display:flex; min-height:60px; align-items:flex-end; margin-bottom:9px; }
.progress-primary { display:flex; align-items:baseline; gap:9px; color:var(--main); }
.progress-primary span { font-size:42px; line-height:1; font-weight:650; letter-spacing:-.05em; }
.progress-primary small { color:var(--sub); font-size:12px; }
.live-stats { margin-left:auto; display:flex; gap:20px; color:var(--sub); }
.live-stats > span { display:flex; align-items:baseline; gap:5px; }
.live-stats b { color:var(--text); font-size:18px; font-weight:600; }
.live-stats small { font-size:11px; }
.progress-track { height:2px; width:100%; margin-bottom:25px; background:var(--sub-2); overflow:hidden; border-radius:999px; }
.progress-bar { width:0; height:100%; background:var(--main); transition:width .08s linear; }
.typing-wrap { position:relative; }
.typing-viewport { position:relative; height:208px; overflow:hidden; outline:0; cursor:text; -webkit-tap-highlight-color:transparent; }
.words-canvas { position:relative; display:flex; flex-wrap:wrap; align-content:flex-start; column-gap:.48em; row-gap:0; font-size:var(--test-font-size); line-height:1.58; letter-spacing:.012em; color:var(--sub); user-select:none; will-change:transform; transition:transform .14s cubic-bezier(.22,.8,.35,1); }
.word { display:inline-flex; position:relative; white-space:nowrap; }
.word.current { color:var(--sub); }
.word.error::after { content:''; position:absolute; left:0; right:0; bottom:.08em; height:1px; border-radius:2px; background:var(--error); opacity:.48; transform:scaleX(.92); }
.char { position:relative; color:var(--sub); transition:color .05s linear; }
.char.correct { color:var(--text); }
.char.incorrect { color:var(--error); }
.char.missed { color:var(--error); opacity:.52; }
.char.extra { color:var(--error-extra); }
body.blind-mode .char.incorrect, body.blind-mode .char.extra { color:var(--text); }
body.blind-mode .word:not(.current) .char.incorrect, body.blind-mode .word:not(.current) .char.extra { color:var(--sub); }
body.blind-mode .char.missed { color:var(--sub); opacity:.7; }
.caret-marker { display:inline-block; width:0; height:1em; vertical-align:bottom; }
.floating-caret { position:absolute; z-index:5; top:0; left:0; width:2px; height:calc(var(--test-font-size) * 1.07); border-radius:3px; background:var(--main); transform:translate3d(0,0,0); pointer-events:none; animation:caretBlink 1.05s steps(2,end) infinite; box-shadow:0 0 8px var(--main-soft); }
body.no-smooth-caret .floating-caret { transition:none !important; }
body.no-smooth-line .words-canvas { transition:none !important; }
@keyframes caretBlink { 56%{opacity:.28} }
@keyframes inputErrorNudge { 0%,100%{transform:translateX(0)} 35%{transform:translateX(-3px)} 70%{transform:translateX(3px)} }
.typing-wrap.input-error .typing-viewport { animation:inputErrorNudge .16s ease; }
.typing-wrap.input-error .floating-caret { background:var(--error); box-shadow:0 0 10px color-mix(in srgb, var(--error) 28%, transparent); }
.focus-prompt { position:absolute; inset:0; margin:auto; height:48px; width:max-content; max-width:90%; padding:0 17px; border-radius:9px; background:var(--panel); color:var(--sub); box-shadow:0 10px 32px var(--shadow); }
.typing-wrap.unfocused .typing-viewport { filter:blur(4px); opacity:.45; }
.mobile-input { position:fixed; left:-1000px; top:50%; width:2px; height:2px; opacity:.01; pointer-events:none; }
.test-meta { min-height:28px; margin-top:20px; display:flex; gap:9px; justify-content:center; color:var(--sub); font-size:11px; }
.test-meta span + span::before { content:'•'; margin-right:9px; color:var(--sub-2); }
.result-screen { padding-top:16px; }
.result-layout { display:grid; grid-template-columns:230px 1fr; gap:28px; align-items:stretch; }
.result-hero { display:grid; align-content:center; gap:24px; }
.result-big span, .result-details span { display:block; color:var(--sub); font-size:12px; margin-bottom:3px; }
.result-big strong { display:block; color:var(--main); font-size:64px; line-height:.95; letter-spacing:-.075em; font-weight:650; }
.chart-card { min-height:265px; padding:14px 16px 8px; background:var(--panel); border-radius:14px; }
.chart-card canvas { width:100%; height:230px; display:block; }
.chart-legend { height:22px; display:flex; justify-content:flex-end; gap:16px; align-items:center; font-size:11px; color:var(--sub); }
.chart-legend span::before { content:''; display:inline-block; width:14px; height:2px; margin-right:6px; vertical-align:middle; border-radius:4px; background:var(--main); }
.chart-legend .legend-muted::before { background:var(--sub); }
.result-details { display:grid; grid-template-columns:1.15fr .7fr 1.7fr 1fr .8fr 1fr; gap:18px; margin-top:28px; }
.result-details strong { display:block; font-size:18px; font-weight:600; line-height:1.2; }
.result-details small { display:block; color:var(--sub); margin-top:5px; font-size:9px; line-height:1.4; }
.failed-banner { margin-top:25px; display:flex; gap:11px; align-items:center; justify-content:center; color:var(--error); font-size:13px; }
.failed-banner span { color:var(--sub); }
.result-actions { display:flex; justify-content:center; gap:12px; margin-top:40px; }
.round-action { width:46px; height:42px; border-radius:10px; background:var(--panel); color:var(--sub); font-size:22px; transition:.15s ease; }
.round-action:hover { color:var(--text); transform:translateY(-1px); }
.accent-action { color:var(--bg); background:var(--main); }
.accent-action:hover { color:var(--bg); }
.result-hint { text-align:center; color:var(--sub); font-size:10px; margin:13px 0 0; }
kbd { display:inline-grid; min-width:24px; height:22px; place-items:center; padding:0 6px; margin:0 4px; border-radius:5px; color:var(--sub); background:var(--panel); box-shadow:inset 0 -2px 0 var(--sub-2); font:inherit; font-size:10px; }
.footer { height:68px; display:flex; align-items:center; justify-content:space-between; color:var(--sub); font-size:10px; }
.footer > div { display:flex; align-items:center; gap:7px; }
.footer kbd { margin:0; }
.modal-backdrop { position:fixed; inset:0; z-index:30; background:rgba(0,0,0,.42); backdrop-filter:blur(4px); }
.modal-panel { position:fixed; z-index:31; top:50%; left:50%; width:min(820px, calc(100% - 32px)); max-height:min(78vh,760px); transform:translate(-50%,-50%); overflow:auto; padding:24px; border-radius:16px; background:var(--panel); color:var(--text); box-shadow:0 24px 80px var(--shadow); }
.modal-head { display:flex; align-items:flex-start; justify-content:space-between; padding-bottom:19px; border-bottom:1px solid var(--sub-2); }
.modal-head small { display:block; color:var(--sub); font-size:10px; margin-bottom:4px; }
.modal-head h2 { margin:0; font-size:24px; letter-spacing:-.04em; }
.modal-close { width:36px; height:36px; border-radius:8px; color:var(--sub); font-size:25px; line-height:1; }
.modal-close:hover { color:var(--text); background:var(--panel-2); }
.setting-section { padding:22px 0 3px; }
.setting-section h3 { margin:0 0 8px; color:var(--main); font-size:11px; font-weight:600; text-transform:lowercase; }
.setting-row { min-height:64px; display:flex; align-items:center; justify-content:space-between; gap:22px; border-bottom:1px solid var(--sub-2); }
.setting-row > div:first-child { min-width:0; }
.setting-row strong { display:block; font-size:13px; font-weight:600; }
.setting-row small { display:block; max-width:440px; margin-top:4px; color:var(--sub); font-size:10px; line-height:1.45; }
.segmented { display:flex; padding:4px; border-radius:9px; background:var(--bg); }
.segmented button { padding:7px 8px; border-radius:6px; color:var(--sub); font-size:10px; }
.segmented button.active { background:var(--main); color:var(--bg); }
.switch { position:relative; flex:0 0 auto; width:39px; height:22px; border-radius:99px; background:var(--sub-2); transition:.15s ease; }
.switch i { position:absolute; width:16px; height:16px; top:3px; left:3px; border-radius:50%; background:var(--sub); transition:.15s ease; }
.switch.on { background:var(--main-soft); box-shadow:inset 0 0 0 1px var(--main); }
.switch.on i { transform:translateX(17px); background:var(--main); }
.font-row input[type="range"] { width:180px; accent-color:var(--main); }
.theme-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:9px; padding-top:7px; }
.theme-grid button { padding:10px; border:1px solid transparent; border-radius:10px; background:var(--bg); color:var(--sub); text-align:left; }
.theme-grid button.active { border-color:var(--main); color:var(--text); }
.theme-grid i { height:34px; display:flex; overflow:hidden; margin-bottom:8px; border-radius:6px; background:#17191f; }
.theme-grid i b { flex:1; }
.theme-grid i b:nth-child(1){background:#17191f}.theme-grid i b:nth-child(2){background:#e3b65f}.theme-grid i b:nth-child(3){background:#d9dde5}
.theme-grid [data-theme="ocean"] i b:nth-child(1){background:#0f1820}.theme-grid [data-theme="ocean"] i b:nth-child(2){background:#61c5c9}.theme-grid [data-theme="ocean"] i b:nth-child(3){background:#d6e2e8}
.theme-grid [data-theme="paper"] i b:nth-child(1){background:#eee9df}.theme-grid [data-theme="paper"] i b:nth-child(2){background:#a5643c}.theme-grid [data-theme="paper"] i b:nth-child(3){background:#3f3a35}
.theme-grid [data-theme="midnight"] i b:nth-child(1){background:#0b0d12}.theme-grid [data-theme="midnight"] i b:nth-child(2){background:#8aa8ff}.theme-grid [data-theme="midnight"] i b:nth-child(3){background:#d9e2f2}
.theme-grid span { font-size:10px; }
.stats-summary { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; padding:22px 0; }
.stats-summary > div { padding:15px; border-radius:10px; background:var(--bg); }
.stats-summary span { display:block; color:var(--sub); font-size:10px; margin-bottom:6px; }
.stats-summary strong { font-size:23px; font-weight:600; color:var(--main); }
.history-head { display:flex; align-items:center; justify-content:space-between; margin:3px 0 8px; font-size:12px; }
.history-head button { color:var(--sub); font-size:10px; }
.history-head button:hover { color:var(--error); }
.history-list { border-top:1px solid var(--sub-2); }
.history-item { display:grid; grid-template-columns:.65fr .75fr 1fr 1.35fr; gap:12px; align-items:center; min-height:47px; border-bottom:1px solid var(--sub-2); color:var(--sub); font-size:10px; }
.history-item strong { color:var(--text); font-size:15px; }
.history-item time { text-align:right; }
.history-empty { padding:35px 0; color:var(--sub); font-size:11px; text-align:center; }
.toast { position:fixed; z-index:40; left:50%; bottom:28px; transform:translateX(-50%); padding:10px 14px; border-radius:8px; background:var(--panel-2); color:var(--text); box-shadow:0 10px 36px var(--shadow); font-size:11px; }
@media (max-width:900px) {
  .shell{width:min(100% - 26px,760px)}
  .topbar{height:76px}.main-stage{min-height:calc(100vh - 132px)}
  .modebar{width:100%; flex-wrap:wrap; margin-bottom:38px; gap:7px}.mode-divider.options-divider{display:none}.mode-options{width:100%; justify-content:center}
  .typing-viewport{height:226px}.words-canvas{line-height:1.62}
  .result-layout{grid-template-columns:1fr}.result-hero{grid-template-columns:1fr 1fr; gap:15px}.result-big strong{font-size:54px}.chart-card{min-height:245px}
  .result-details{grid-template-columns:repeat(3,1fr)}
  .theme-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:600px) {
  :root{--test-font-size:28px}
  .shell{width:calc(100% - 22px)}
  .brand-copy strong{font-size:18px}.brand-copy small{font-size:12px}.brand-mark{width:34px;height:28px}
  .topbar{height:68px}.main-stage{min-height:calc(100vh - 118px);align-items:flex-start}.test-screen,.result-screen{padding:31px 0 35px}
  .modebar{margin-bottom:32px;padding:7px 8px}.mode-row button{font-size:11px;padding:6px}.mode-options{display:none}.mode-divider:last-of-type{display:none}
  .live-row{min-height:50px}.progress-primary span{font-size:34px}.live-stats{gap:10px}.live-stats b{font-size:15px}.live-stats small{display:none}
  .typing-viewport{height:226px}.words-canvas{line-height:1.62;column-gap:.42em}
  .result-big strong{font-size:49px}.result-details{grid-template-columns:repeat(2,1fr);gap:15px}.chart-card{padding:10px 9px 6px}.chart-card canvas{height:200px}
  .footer{height:50px}.footer>div:first-child{display:none}
  .modal-panel{width:calc(100% - 18px);max-height:88vh;padding:17px}.setting-row{align-items:flex-start;padding:14px 0}.setting-row{gap:12px}.segmented{flex-wrap:wrap;justify-content:flex-end}.font-row{align-items:center}.font-row input[type="range"]{width:120px}
  .stats-summary{grid-template-columns:repeat(2,1fr)}.history-item{grid-template-columns:.7fr .8fr 1fr}.history-item time{display:none}
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; animation-duration:.001ms!important; animation-iteration-count:1!important; } }


/* v2.1 visual polish based on production testing */
.modebar { margin-bottom:44px; }
.test-screen { padding-top:22px; }
.test-screen:not(.running) .live-stats { opacity:0; transform:translateY(2px); }
.live-stats { transition:opacity .18s ease, transform .18s ease; }
.progress-track { height:1px; opacity:.36; transition:opacity .18s ease; }
.test-screen:not(.running) .progress-track { opacity:.16; }
.typing-viewport { height:196px; }
.words-canvas { line-height:1.54; }
.test-meta { margin-top:15px; }
.test-actions { height:38px; margin-top:5px; display:flex; align-items:center; justify-content:center; }
.test-restart { width:38px; height:34px; display:grid; place-items:center; border-radius:8px; color:var(--sub); font-size:21px; opacity:.6; transition:color .15s ease, background .15s ease, opacity .15s ease, transform .15s ease; }
.test-restart:hover { color:var(--main); background:var(--main-soft); opacity:1; transform:translateY(-1px); }
.test-screen.running .test-restart { opacity:.35; }
.chart-card { background:color-mix(in srgb, var(--panel) 82%, transparent); }
#resultPbNote:not(:empty) { color:var(--main); }
.result-details small#resultPbNote { font-size:9px; }
.result-screen { padding-top:6px; }
.result-actions { margin-top:34px; }
@media (min-width: 901px) and (min-height: 700px) {
  .test-screen { transform:translateY(-12px); }
  .result-screen { transform:translateY(-6px); }
}
@media (max-width: 700px) {
  .modebar { margin-bottom:30px; }
  .typing-viewport { height:180px; }
  .test-actions { margin-top:2px; }
  .test-restart { width:42px; height:38px; }
}


/* v2.2 typing-engine feedback */
.result-details #resultTypeMeta { white-space:normal; max-width:180px; }
.setting-row .segmented { flex-shrink:0; }
@media (max-width:700px) {
  .setting-row .segmented { max-width:48%; justify-content:flex-end; }
  .setting-row .segmented button { padding:7px 6px; }
  .word.error::after { bottom:.02em; }
}

/* v2.3 typing feel + production polish */
.topbar,
.footer { transition:opacity .18s ease; }
body.typing-active .topbar { opacity:.66; }
body.typing-active .footer { opacity:.28; }

@media (min-width:901px) and (min-height:700px) {
  .test-screen { transform:translateY(-30px); }
  .result-screen { transform:translateY(-12px); }
}

.typing-viewport { height:168px; }
.typing-layer {
  position:relative;
  width:100%;
  will-change:transform;
  transition:transform 165ms cubic-bezier(.2,.76,.34,1);
}
.words-canvas {
  transform:none !important;
  transition:none !important;
}
body.no-smooth-line .typing-layer { transition:none !important; }

.word { transition:opacity .08s ease; }
.word.current .char:not(.correct):not(.incorrect):not(.extra) {
  color:color-mix(in srgb, var(--sub) 79%, var(--text) 21%);
}
.word.completed .char.correct {
  color:color-mix(in srgb, var(--text) 90%, var(--sub) 10%);
}
.word.error::after {
  height:2px;
  bottom:.035em;
  opacity:.62;
  transform:scaleX(.96);
}
.word.current.has-error::after {
  content:'';
  position:absolute;
  left:0;
  right:0;
  bottom:.035em;
  height:1px;
  border-radius:2px;
  background:var(--error);
  opacity:.24;
}
.char.extra { text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.12em; }

.floating-caret {
  width:2px;
  box-shadow:0 0 7px color-mix(in srgb, var(--main) 45%, transparent);
  animation:caretBlinkV23 1.05s steps(2,end) infinite;
}
@keyframes caretBlinkV23 { 0%,48%,100%{opacity:1} 62%,88%{opacity:.26} }
.test-screen.running .floating-caret { animation-duration:1.2s; }

.test-actions { height:44px; margin-top:3px; }
.test-restart {
  width:46px;
  height:40px;
  font-size:19px;
  opacity:.48;
}
.test-screen.running .test-restart { opacity:.24; }
.test-restart:focus-visible { opacity:1; }

.footer { opacity:.68; }
.footer > div:last-child { opacity:.78; }

/* Result view: a little denser while giving the pace graph more room. */
.result-layout { grid-template-columns:215px 1fr; gap:24px; }
.chart-card { min-height:282px; padding:15px 17px 8px; }
.chart-card canvas { height:246px; }
.result-details { margin-top:24px; }
.result-actions { margin-top:31px; }
.result-big strong { text-shadow:0 0 24px color-mix(in srgb, var(--main) 8%, transparent); }

@media (max-width:900px) {
  .typing-viewport { height:184px; }
  .result-layout { grid-template-columns:1fr; }
  .chart-card { min-height:252px; }
  .chart-card canvas { height:218px; }
}
@media (max-width:600px) {
  body.typing-active .topbar { opacity:.5; }
  .typing-viewport { height:180px; }
  .test-restart { width:46px; height:40px; }
  .word.error::after, .word.current.has-error::after { bottom:0; }
}


/* v2.4 focus mode + caret/line polish + mobile keyboard + result refinement */
@media (min-width:901px) and (min-height:700px) {
  .test-screen { transform:translateY(-48px); }
  .result-screen { transform:translateY(-18px); }
}

.modebar { margin-bottom:36px; }
.test-screen.running .modebar {
  opacity:.09;
  transform:translateY(-7px) scale(.99);
}
body.typing-active .topbar { opacity:.42; }
body.typing-active .footer { opacity:.16; }
.test-screen.running .live-stats { opacity:.52; }
.test-screen.running .progress-track { opacity:.24; }

/* Keep attention on the active line without hiding useful context. */
.word.line-past { opacity:1; }
.word.line-future { opacity:1; }
body.typing-active .word.line-past { opacity:.38; }
body.typing-active .word.line-future { opacity:.72; }
body.typing-active .word.line-current { opacity:1; }
body.typing-active .word.current .char:not(.correct):not(.incorrect):not(.extra) {
  color:color-mix(in srgb, var(--sub) 67%, var(--text) 33%);
}
.word { transition:opacity .14s ease; }

/* A solid caret while keys are moving, then a calm blink while idle. */
.floating-caret {
  width:2.5px;
  border-radius:3px;
  box-shadow:0 0 8px color-mix(in srgb, var(--main) 52%, transparent);
}
body.caret-active .floating-caret {
  animation:none !important;
  opacity:1 !important;
}

.test-restart { opacity:.62; }
.test-screen.running .test-restart { opacity:.32; }
.test-restart:hover { opacity:1; }

/* Result screen: tighter hierarchy and clearer graph labels. */
.chart-card { box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--sub-2) 45%, transparent); }
.chart-legend { color:color-mix(in srgb, var(--sub) 82%, var(--text) 18%); }
.result-details { margin-top:18px; }
.result-details > div { min-width:0; }
.character-breakdown { cursor:help; }
.character-breakdown strong { letter-spacing:.01em; }
.result-actions { margin-top:28px; }

@media (max-width:700px) {
  .main-stage { min-height:calc(100dvh - 112px); }
  .test-screen { padding-top:20px; }
  .modebar { margin-bottom:22px; }
  .typing-viewport { height:168px; }
  .test-meta { margin-top:10px; }
  .footer { opacity:.48; }

  body.keyboard-open { min-height:var(--visual-viewport-height, 100dvh); }
  body.keyboard-open .topbar {
    height:48px;
    opacity:.22;
  }
  body.keyboard-open .main-stage {
    min-height:0;
    align-items:flex-start;
  }
  body.keyboard-open .test-screen {
    padding-top:2px;
    transform:none;
  }
  body.keyboard-open .modebar {
    margin-bottom:10px;
    opacity:.1;
    transform:scale(.985);
    pointer-events:none;
  }
  body.keyboard-open .live-row { min-height:42px; margin-bottom:3px; }
  body.keyboard-open .progress-primary span { font-size:30px; }
  body.keyboard-open .progress-track { margin-bottom:14px; }
  body.keyboard-open .typing-viewport { height:132px; }
  body.keyboard-open .words-canvas { line-height:1.5; }
  body.keyboard-open .test-meta,
  body.keyboard-open .test-actions,
  body.keyboard-open .footer { display:none; }
}

/* v2.5 soft focus + precision polish + tighter results */
/* Keep context visible while typing instead of fading the chrome almost away. */
.test-screen.running .modebar {
  opacity:.34;
  transform:translateY(-3px) scale(.995);
}
body.typing-active .topbar { opacity:.58; }
body.typing-active .footer { opacity:.22; }
.test-screen.running .live-stats { opacity:.78; }
.test-screen.running .live-stats b {
  color:color-mix(in srgb, var(--text) 90%, var(--sub) 10%);
}
.test-screen.running .live-stats small {
  color:color-mix(in srgb, var(--sub) 84%, var(--text) 16%);
}
.test-screen.running .progress-track { opacity:.30; }

/* Softer line focus: guide the eye without making completed text disappear. */
body.typing-active .word.line-past { opacity:.50; }
body.typing-active .word.line-future { opacity:.78; }
body.typing-active .word.line-current { opacity:1; }

/* Error feedback should be obvious but not visually heavy. */
.word.error::after {
  height:1px;
  bottom:.025em;
  opacity:.36;
  transform:scaleX(.90);
}
.word.current.has-error::after {
  height:1px;
  bottom:.025em;
  opacity:.14;
}
.char.extra {
  text-decoration-thickness:1px;
  text-underline-offset:.14em;
}

/* Slightly firmer caret and larger restart target/visibility. */
.floating-caret {
  width:2.35px;
  box-shadow:0 0 7px color-mix(in srgb, var(--main) 46%, transparent);
}
.test-restart { opacity:.74; }
.test-screen.running .test-restart { opacity:.48; }

/* Result screen: bring the score column closer to the chart and tighten vertical rhythm. */
.result-layout {
  grid-template-columns:190px 1fr;
  gap:18px;
}
.result-hero { gap:20px; }
.result-details { margin-top:16px; gap:16px; }
.result-actions { margin-top:25px; }
.character-breakdown strong {
  letter-spacing:.015em;
  white-space:nowrap;
}

@media (max-width:900px) {
  .result-layout { grid-template-columns:1fr; gap:16px; }
  .result-hero { gap:12px; }
}

@media (max-width:700px) {
  .topbar { height:64px; }
  .test-screen { padding-top:16px; }
  .modebar { margin-bottom:18px; }
  .live-row { min-height:46px; }
  .progress-track { margin-bottom:18px; }
  .typing-viewport { height:164px; }
  .test-meta { margin-top:8px; }
  .test-actions { margin-top:0; }
  .test-screen.running .modebar { opacity:.28; }
  body.typing-active .topbar { opacity:.52; }
  body.typing-active .footer { opacity:.20; }
  .test-screen.running .live-stats { opacity:.84; }

  body.keyboard-open .topbar { height:46px; opacity:.34; }
  body.keyboard-open .modebar { opacity:.20; margin-bottom:8px; }
  body.keyboard-open .live-row { min-height:40px; }
  body.keyboard-open .progress-track { margin-bottom:12px; }
  body.keyboard-open .typing-viewport { height:136px; }
}


/* v2.6 English 1k / 5k / 10k word-set selector */
.test-meta { position:relative; align-items:center; overflow:visible; }
.wordset-picker { position:relative; display:inline-flex; align-items:center; }
.wordset-picker + #difficultyBadge::before {
  content:'•';
  margin-right:9px;
  color:var(--sub-2);
}
.wordset-trigger {
  appearance:none;
  border:0;
  margin:0;
  padding:2px 3px;
  background:transparent;
  color:var(--sub);
  font:inherit;
  line-height:1.35;
  cursor:default;
  border-radius:5px;
  transition:color .14s ease, background .14s ease, opacity .14s ease;
}
.wordset-trigger.selectable { cursor:pointer; }
.wordset-trigger.selectable::after {
  content:'⌄';
  display:inline-block;
  margin-left:5px;
  color:var(--sub-2);
  font-size:9px;
  transform:translateY(-1px);
}
.wordset-trigger.selectable:hover,
.wordset-trigger[aria-expanded="true"] {
  color:var(--text);
  background:color-mix(in srgb, var(--panel) 86%, transparent);
}
.wordset-trigger.loading { opacity:.65; }
.wordset-trigger:disabled { opacity:1; }
.wordset-menu {
  position:absolute;
  left:50%;
  top:calc(100% + 10px);
  z-index:30;
  width:214px;
  padding:6px;
  transform:translateX(-50%);
  background:color-mix(in srgb, var(--panel) 96%, var(--bg) 4%);
  border:1px solid color-mix(in srgb, var(--sub-2) 55%, transparent);
  border-radius:10px;
  box-shadow:0 14px 38px rgba(0,0,0,.24);
}
.wordset-menu::after {
  content:'';
  position:absolute;
  left:50%;
  bottom:100%;
  width:9px;
  height:9px;
  transform:translate(-50%,5px) rotate(45deg);
  background:inherit;
  border-left:1px solid color-mix(in srgb, var(--sub-2) 55%, transparent);
  border-top:1px solid color-mix(in srgb, var(--sub-2) 55%, transparent);
}
.wordset-menu button {
  position:relative;
  z-index:1;
  width:100%;
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:10px;
  padding:9px 10px;
  border:0;
  border-radius:7px;
  background:transparent;
  color:var(--sub);
  text-align:left;
  font:inherit;
  cursor:pointer;
}
.wordset-menu button:hover { background:var(--panel-2); color:var(--text); }
.wordset-menu button.active { color:var(--main); background:color-mix(in srgb, var(--main) 9%, transparent); }
.wordset-menu button strong { font-size:12px; font-weight:600; }
.wordset-menu button small { color:var(--sub-2); font-size:9px; white-space:nowrap; }
.wordset-menu button.active small { color:color-mix(in srgb, var(--main) 58%, var(--sub) 42%); }
.test-screen.running .wordset-picker { pointer-events:none; }

@media (max-width:700px) {
  .wordset-menu { width:205px; top:calc(100% + 8px); }
  .wordset-menu button { padding:8px 9px; }
}


/* v2.7 multilingual language packs + IME/RTL support */
.word { display:inline-block; }
.wordset-menu {
  width:min(540px, calc(100vw - 28px));
  max-height:min(460px, 68vh);
  overflow:auto;
  padding:8px;
  scrollbar-width:thin;
}
.wordset-menu-head {
  position:sticky;
  z-index:3;
  top:-8px;
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:12px;
  margin:-2px -2px 6px;
  padding:9px 10px 8px;
  border-bottom:1px solid var(--sub-2);
  background:color-mix(in srgb, var(--panel) 97%, var(--bg) 3%);
  color:var(--text);
}
.wordset-menu-head strong { font-size:11px; font-weight:650; }
.wordset-menu-head small { color:var(--sub); font-size:9px; }
.wordset-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:3px; }
.wordset-menu .wordset-grid button { min-width:0; }
.wordset-menu button strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wordset-menu button[dir="rtl"] { text-align:right; }
.typing-wrap.rtl-pack .words-canvas { direction:rtl; text-align:right; }
.typing-wrap.rtl-pack .word { direction:rtl; }
.mobile-input {
  left:1px;
  top:1px;
  width:2px;
  height:2px;
  padding:0;
  border:0;
  opacity:.001;
  z-index:10;
  font-size:16px;
  line-height:1;
  color:transparent;
  caret-color:transparent;
  background:transparent;
}
@media (max-width:700px) {
  .wordset-menu { width:min(360px, calc(100vw - 20px)); max-height:min(430px, 66vh); }
  .wordset-grid { grid-template-columns:1fr; }
  .wordset-menu-head { top:-8px; }
}
.wordset-menu { top:auto; bottom:calc(100% + 10px); }
.wordset-menu::after { display:none; }
@media (max-width:700px) {
  .wordset-menu { top:auto; bottom:calc(100% + 8px); }
}


/* v2.9: typing-language selector is independent from site UI language */
.wordset-menu-head small { max-width: 290px; text-align:right; line-height:1.35; }
@media (max-width:700px) {
  .wordset-menu-head { align-items:flex-start; }
  .wordset-menu-head small { max-width:190px; }
}


/* V3.0/V3.1 manual text editor */
.custom-panel { padding:16px; }
.custom-panel-head { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-bottom:11px; }
.custom-panel-head > div { min-width:0; display:grid; gap:3px; }
.custom-panel-head strong { color:var(--text); font-size:13px; font-weight:650; }
.custom-panel-head small { color:var(--sub); font-size:10px; line-height:1.35; }
.custom-panel textarea { min-height:150px; max-height:340px; padding:14px 15px; line-height:1.58; border:1px solid transparent; transition:border-color .14s ease, background .14s ease; }
.custom-panel textarea:focus { border-color:color-mix(in srgb, var(--main) 48%, transparent); }
.custom-actions { gap:16px; }
.custom-actions > span { min-width:0; color:var(--sub); line-height:1.35; }
.accent-button:disabled { opacity:.35; cursor:not-allowed; }
.subtle-button { min-height:32px; padding:0 10px; border-radius:7px; color:var(--sub); font-size:10px; }
.subtle-button:hover { color:var(--text); background:var(--panel-2); }
.custom-recent { margin-top:13px; border-top:1px solid var(--sub-2); padding-top:11px; }
.custom-recent-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:7px; color:var(--sub); font-size:10px; }
.custom-recent-head button { color:var(--sub-2); font-size:9px; }
.custom-recent-head button:hover { color:var(--error); }
.custom-recent-list { display:grid; gap:4px; }
.custom-recent-item { width:100%; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:14px; padding:9px 10px; border-radius:8px; text-align:left; color:var(--sub); background:transparent; }
.custom-recent-item:hover { color:var(--text); background:var(--panel-2); }
.custom-recent-item span { min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.custom-recent-item small { color:var(--sub-2); font-size:9px; white-space:nowrap; }
.custom-line-break { flex-basis:100%; width:0; height:.38em; pointer-events:none; }

@media (max-width:700px) {
  .custom-panel { margin-top:-18px; padding:12px; }
  .custom-panel textarea { min-height:132px; font-size:16px; }
  .custom-actions { align-items:flex-end; }
  .custom-actions > span { font-size:10px; }
  .custom-recent-item { grid-template-columns:1fr; gap:3px; }
}


/* V3.1 — My Text is the primary source; generated words are optional. */
.source-modes { padding-right:1px; }
.source-modes button { font-weight:600; }
.test-screen.editing-source .live-row,
.test-screen.editing-source .progress-track,
.test-screen.editing-source .typing-wrap,
.test-screen.editing-source .test-meta,
.test-screen.editing-source .test-actions,
.test-screen.editing-source .mobile-input { display:none !important; }
.test-screen.editing-source .modebar { margin-bottom:24px; }
.test-screen.editing-source .custom-panel { margin:0 auto 28px; }
.edit-text-button { color:var(--sub); font-size:11px; padding:4px 7px; border-radius:6px; }
.edit-text-button:hover { color:var(--main); background:var(--main-soft); }
.custom-panel-head strong::before { content:'✎'; margin-right:7px; color:var(--main); font-weight:400; }
.custom-panel textarea { font-family:inherit; }
@media (max-width:700px) {
  .source-modes { width:100%; justify-content:center; }
  .test-screen.editing-source .modebar { margin-bottom:16px; }
  .test-screen.editing-source .custom-panel { margin-top:0; }
}


/* =========================================================
   Homepage preview theme rebuild — visual layer only.
   Core typing behavior remains in app.js unchanged.
   ========================================================= */
:root {
  --bg:#f6faf8;
  --panel:#ffffff;
  --panel-2:#fbfdfc;
  --text:#17342b;
  --sub:#71817b;
  --sub-2:#dfe9e4;
  --main:#15945f;
  --main-2:#0d754a;
  --main-soft:#e8f6ef;
  --line:#dfe9e4;
  --error:#e45c52;
  --error-extra:#bc6d68;
  --shadow:0 12px 35px rgba(20,58,45,.07);
  --radius:14px;
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
body[data-theme="ember"] {
  --bg:#f6faf8; --panel:#fff; --panel-2:#fbfdfc; --text:#17342b; --sub:#71817b; --sub-2:#dfe9e4;
  --main:#15945f; --main-2:#0d754a; --main-soft:#e8f6ef; --line:#dfe9e4; --error:#e45c52; --error-extra:#bc6d68; --shadow:0 12px 35px rgba(20,58,45,.07);
}
body[data-theme="ocean"] {
  --bg:#f5fafc; --panel:#fff; --panel-2:#f8fcfe; --text:#183642; --sub:#6f828a; --sub-2:#dbe8ed;
  --main:#1b8ba5; --main-2:#126d82; --main-soft:#e5f5f8; --line:#dbe8ed; --error:#dc5f65; --error-extra:#b76b70; --shadow:0 12px 35px rgba(24,71,85,.07);
}
body[data-theme="paper"] {
  --bg:#faf8f3; --panel:#fff; --panel-2:#fdfbf7; --text:#39382f; --sub:#837e70; --sub-2:#e8e2d8;
  --main:#9b6a37; --main-2:#785126; --main-soft:#f4ecdf; --line:#e8e2d8; --error:#c75454; --error-extra:#b77a72; --shadow:0 12px 35px rgba(66,53,34,.07);
}
body[data-theme="midnight"] {
  --bg:#111915; --panel:#18231e; --panel-2:#1d2a24; --text:#e5eee9; --sub:#8ca198; --sub-2:#2e4138;
  --main:#65c993; --main-2:#8bdcae; --main-soft:rgba(101,201,147,.12); --line:#2e4138; --error:#ef7b7b; --error-extra:#b65d65; --shadow:0 14px 38px rgba(0,0,0,.24);
}
html { scroll-behavior:smooth; }
html, body { background:var(--bg); color:var(--text); }
body { font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
button,textarea,input { font-family:inherit; }
a { color:inherit; text-decoration:none; }
.shell { width:min(1120px,calc(100% - 32px)); margin:0 auto; }

/* Header */
.site-header { height:68px; background:var(--panel); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:25; }
.topbar { height:68px; display:flex; align-items:center; justify-content:flex-start; gap:30px; opacity:1 !important; }
.brand { padding:0; display:flex; align-items:center; color:var(--text); }
.brand-mark { display:none !important; }
.brand-copy { display:flex; align-items:baseline; letter-spacing:-1.2px; }
.brand-copy strong { font-family:Inter,system-ui,sans-serif; font-size:24px; line-height:1; font-weight:900; color:var(--text); }
.brand-copy strong span { color:var(--main); }
.brand-copy small { margin-left:2px; color:var(--sub); font-size:12px; font-weight:750; letter-spacing:-.2px; }
.site-links { display:flex; align-items:center; gap:23px; font-size:13px; font-weight:700; color:var(--sub); }
.site-links a:first-child,.site-links a:hover { color:var(--main); }
.top-actions { margin-left:auto; display:flex; align-items:center; gap:8px; }
.icon-button { width:38px; height:38px; display:grid; place-items:center; border:1px solid var(--line); background:var(--panel); border-radius:10px; color:var(--sub); }
.icon-button:hover { color:var(--main); background:var(--main-soft); }
.icon-button svg { width:18px; height:18px; }
.settings-cta { width:auto; grid-auto-flow:column; gap:7px; padding:0 12px; background:var(--main); border-color:var(--main); color:#fff; font-weight:750; }
.settings-cta:hover { color:#fff; background:var(--main-2); }
.settings-cta span { font-size:12px; }

/* Hero */
.main-stage { min-height:0; display:block; }
.hero { text-align:center; padding:55px 0 28px; }
.kicker { font-size:11px; letter-spacing:1.5px; font-weight:850; color:var(--main); text-transform:uppercase; }
.hero h1 { font-size:46px; line-height:1.08; letter-spacing:-2.4px; margin:12px 0; color:var(--text); }
.hero p { color:var(--sub); font-size:15px; margin:0 auto 25px; max-width:610px; line-height:1.6; }
.hero-buttons { display:flex; justify-content:center; gap:10px; }
.theme-btn { display:inline-flex; align-items:center; justify-content:center; min-height:43px; border-radius:11px; padding:0 20px; font-size:13px; font-weight:800; border:1px solid transparent; cursor:pointer; transition:.18s ease; }
.theme-btn.primary { background:var(--main); color:#fff; box-shadow:0 7px 18px color-mix(in srgb,var(--main) 18%,transparent); }
.theme-btn.primary:hover { background:var(--main-2); transform:translateY(-1px); }
.theme-btn.secondary { background:var(--panel); border-color:var(--line); color:var(--text); }
.theme-btn.secondary:hover { border-color:color-mix(in srgb,var(--main) 32%,var(--line)); }

/* Typing card */
.test-wrap { padding:12px 0 35px; }
.app-shell { width:min(1120px,calc(100% - 32px)); }
.test-screen,.result-screen { transform:none !important; width:100%; margin:0; padding:0; background:var(--panel); border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow); color:var(--text); }
.test-screen { position:relative; overflow:visible; }
.result-screen { overflow:hidden; padding:30px; }
.modebar { min-height:62px; width:100%; max-width:none; margin:0 !important; padding:13px 18px; display:flex; align-items:center; justify-content:flex-start; gap:8px; flex-wrap:wrap; background:var(--panel); border-radius:20px 20px 0 0; border-bottom:1px solid var(--line); box-shadow:none; color:var(--sub); }
.mode-row { gap:4px; }
.mode-row button { padding:8px 10px; border-radius:8px; color:var(--sub); font-size:12px; font-weight:750; }
.mode-row button:hover { color:var(--main-2); background:var(--main-soft); }
.mode-row button.active { color:var(--main-2); background:var(--main-soft); }
.mode-divider { height:22px; background:var(--line); }
.test-screen.running .modebar { opacity:.72; transform:none; pointer-events:none; }
.custom-panel,.test-screen.editing-source .custom-panel { width:auto; margin:28px 34px 30px !important; padding:18px; border:1px solid var(--line); border-radius:14px; background:var(--panel-2); box-shadow:none; }
.custom-panel-head { margin-bottom:12px; }
.custom-panel-head strong { color:var(--text); font-size:13px; }
.custom-panel-head small { color:var(--sub); font-size:11px; }
.custom-panel textarea { min-height:150px; max-height:360px; background:var(--panel); color:var(--text); border:1px solid var(--line); border-radius:11px; padding:14px 15px; font-family:"SFMono-Regular",Consolas,monospace; font-size:15px; line-height:1.65; }
.custom-panel textarea:focus { border-color:color-mix(in srgb,var(--main) 55%,var(--line)); box-shadow:0 0 0 3px var(--main-soft); }
.custom-actions { padding-top:12px; }
.accent-button { min-height:38px; padding:0 14px; border-radius:9px; background:var(--main); color:#fff; }
.accent-button:hover { background:var(--main-2); }
.subtle-button { border:1px solid var(--line); background:var(--panel); border-radius:8px; }
.custom-recent { border-top-color:var(--line); }
.custom-recent-item:hover { background:var(--main-soft); }

.live-row { min-height:70px; margin:0; padding:24px 35px 8px; align-items:flex-end; }
.progress-primary { gap:8px; color:var(--main); }
.progress-primary span { font-size:35px; font-weight:850; letter-spacing:-1.4px; }
.progress-primary small { color:var(--sub); font-size:11px; font-weight:650; }
.live-stats { gap:28px; color:var(--sub); opacity:1 !important; transform:none !important; }
.live-stats > span { display:block; }
.live-stats b { display:block; color:var(--text); font-size:25px; line-height:1.1; font-weight:800; }
.live-stats small { display:block; margin-top:2px; color:var(--sub); font-size:11px; }
.progress-track { width:calc(100% - 70px); height:2px; margin:0 35px 18px; background:var(--line); opacity:1 !important; }
.progress-bar { background:var(--main); }
.typing-wrap { padding:0 35px 22px; }
.typing-viewport { height:150px; }
.words-canvas { font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace; line-height:1.72; color:#89958f; letter-spacing:.1px; }
.word,.char { color:#89958f; }
.char.correct { color:#344e44; }
body[data-theme="midnight"] .char.correct { color:var(--text); }
.char.incorrect,.char.missed { color:var(--error); }
.char.extra { color:var(--error-extra); }
.word.current { color:var(--main); }
.word.error::after { background:var(--error); opacity:.55; }
.floating-caret { width:2px; background:var(--main); box-shadow:none; }
.focus-prompt { background:var(--panel); color:var(--sub); border:1px solid var(--line); box-shadow:var(--shadow); }
.test-meta { min-height:55px; margin:0; padding:12px 64px 12px 18px; display:flex; justify-content:flex-start; align-items:center; gap:9px; border-top:1px solid var(--line); border-radius:0 0 20px 20px; background:var(--panel-2); font-size:11px; color:var(--sub); }
.test-actions { position:absolute; right:16px; bottom:10px; height:36px; margin:0; display:flex; align-items:center; justify-content:center; }
.test-restart { width:38px; height:34px; color:var(--main-2); opacity:1; }
.test-restart:hover { background:var(--main-soft); color:var(--main); }
.test-screen.running .test-restart { opacity:.72; }
.wordset-trigger { color:var(--sub); }
.wordset-trigger.selectable:hover,.wordset-trigger[aria-expanded="true"] { color:var(--main-2); background:var(--main-soft); }
.wordset-menu { background:var(--panel); border:1px solid var(--line); box-shadow:0 16px 40px rgba(20,58,45,.14); }
.wordset-menu-head { background:var(--panel); border-bottom-color:var(--line); }
.wordset-menu button:hover { background:var(--main-soft); }
.wordset-menu button.active { color:var(--main-2); background:var(--main-soft); }
.edit-text-button:hover { color:var(--main); background:var(--main-soft); }

/* Results */
.result-layout { grid-template-columns:200px 1fr; gap:22px; }
.result-big span,.result-details span { color:var(--sub); }
.result-big strong { color:var(--main); }
.chart-card { min-height:260px; padding:16px 18px 8px; background:var(--panel-2); border:1px solid var(--line); border-radius:16px; }
.chart-legend { color:var(--sub); }
.result-details { margin-top:20px; padding-top:20px; border-top:1px solid var(--line); }
.round-action { background:var(--panel-2); color:var(--sub); border:1px solid var(--line); }
.round-action:hover { color:var(--main); border-color:color-mix(in srgb,var(--main) 35%,var(--line)); }
.accent-action { background:var(--main); border-color:var(--main); color:#fff; }
.failed-banner { color:var(--error); }

/* Homepage sections from the provided visual theme */
.theme-section { padding:38px 0; }
.theme-section-head { display:flex; justify-content:space-between; align-items:end; margin-bottom:16px; }
.theme-section-head h2 { margin:0; font-size:23px; letter-spacing:-.7px; color:var(--text); }
.theme-section-head p { margin:5px 0 0; color:var(--sub); font-size:12px; }
.see-link { color:var(--main-2); font-size:12px; font-weight:800; }
.theme-options { display:grid; grid-template-columns:repeat(5,1fr); gap:11px; }
.theme-option { min-width:0; min-height:142px; display:flex; flex-direction:column; align-items:flex-start; padding:18px 15px; background:var(--panel); border:1px solid var(--line); border-radius:14px; color:var(--text); text-align:left; transition:.18s; }
button.theme-option { cursor:pointer; }
button.theme-option:hover { transform:translateY(-3px); box-shadow:var(--shadow); border-color:color-mix(in srgb,var(--main) 28%,var(--line)); }
.theme-option.static { cursor:default; }
.theme-option-icon { width:38px; height:38px; display:grid; place-items:center; margin-bottom:13px; border-radius:11px; background:var(--main-soft); font-size:18px; }
.theme-option strong { font-size:13px; }
.theme-option small { margin-top:5px; color:var(--sub); font-size:11px; line-height:1.45; }
.insight-banner { display:flex; align-items:center; gap:22px; padding:23px; border:1px solid color-mix(in srgb,var(--main) 18%,var(--line)); border-radius:19px; background:linear-gradient(100deg,color-mix(in srgb,var(--main-soft) 76%,var(--panel)),var(--panel-2)); }
.insight-icon { flex:0 0 auto; width:54px; height:54px; display:grid; place-items:center; border-radius:15px; background:var(--panel); font-size:25px; }
.insight-copy { flex:1; }
.insight-copy h3 { margin:0 0 4px; font-size:18px; }
.insight-copy p { margin:0; color:var(--sub); font-size:12px; line-height:1.5; }
.why-section { padding-bottom:58px; }

/* Footer */
.site-footer { margin-top:28px; padding:38px 0 22px; background:#17372c; color:#b9d0c7; }
.footer-grid { display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:35px; }
.footer-logo { color:#fff; font-size:22px; font-weight:900; letter-spacing:-1px; }
.footer-logo span { color:#70c99d; }
.footer-logo small { margin-left:2px; color:#8eb6a6; font-size:11px; }
.footer-about p { max-width:300px; font-size:11px; line-height:1.7; }
.site-footer h4 { margin:0 0 10px; color:#fff; font-size:12px; }
.site-footer a,.site-footer span { display:block; margin:7px 0; color:#a8c1b7; font-size:11px; }
.site-footer a:hover { color:#fff; }
.site-footer kbd { margin-right:6px; background:#274b3e; color:#e4f1eb; border-color:#3b6253; }
.footer-copy { display:flex; justify-content:space-between; margin-top:25px; padding-top:15px; border-top:1px solid rgba(255,255,255,.09); font-size:10px; }
.footer-copy span { margin:0; }

/* Modals / controls */
.modal-backdrop { background:rgba(15,35,27,.35); backdrop-filter:blur(4px); }
.modal-panel { background:var(--panel); color:var(--text); border:1px solid var(--line); border-radius:18px; box-shadow:0 24px 80px rgba(20,58,45,.18); }
.modal-head { border-bottom-color:var(--line); }
.modal-close:hover { background:var(--main-soft); color:var(--main); }
.setting-section h3 { color:var(--main-2); }
.setting-row { border-bottom-color:var(--line); }
.segmented { background:var(--panel-2); border:1px solid var(--line); }
.segmented button.active { background:var(--main); color:#fff; }
.switch { background:var(--line); }
.switch i { background:var(--sub); }
.switch.on { background:var(--main-soft); box-shadow:inset 0 0 0 1px var(--main); }
.switch.on i { background:var(--main); }
.theme-grid button { background:var(--panel-2); border-color:var(--line); }
.theme-grid button.active { border-color:var(--main); }
.theme-grid i { border:1px solid var(--line); }
.theme-grid [data-theme="ember"] i b:nth-child(1){background:#f6faf8}.theme-grid [data-theme="ember"] i b:nth-child(2){background:#15945f}.theme-grid [data-theme="ember"] i b:nth-child(3){background:#17342b}
.theme-grid [data-theme="ocean"] i b:nth-child(1){background:#f5fafc}.theme-grid [data-theme="ocean"] i b:nth-child(2){background:#1b8ba5}.theme-grid [data-theme="ocean"] i b:nth-child(3){background:#183642}
.theme-grid [data-theme="paper"] i b:nth-child(1){background:#faf8f3}.theme-grid [data-theme="paper"] i b:nth-child(2){background:#9b6a37}.theme-grid [data-theme="paper"] i b:nth-child(3){background:#39382f}
.theme-grid [data-theme="midnight"] i b:nth-child(1){background:#111915}.theme-grid [data-theme="midnight"] i b:nth-child(2){background:#65c993}.theme-grid [data-theme="midnight"] i b:nth-child(3){background:#e5eee9}
.stats-summary > div { background:var(--panel-2); border:1px solid var(--line); }
.history-list,.history-item { border-color:var(--line); }
.toast { background:#17372c; color:#fff; box-shadow:0 10px 36px rgba(20,58,45,.22); }

/* Keep the app visible while typing in the new homepage shell. */
body.typing-active .topbar { opacity:1 !important; }
body.typing-active .site-footer { opacity:1 !important; }
body.typing-active .word.line-past { opacity:.58; }
body.typing-active .word.line-future { opacity:.80; }

@media (max-width:900px) {
  .site-links { display:none; }
  .hero h1 { font-size:40px; }
  .theme-options { grid-template-columns:repeat(2,1fr); }
  .result-layout { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:700px) {
  .shell,.app-shell { width:calc(100% - 22px); }
  .site-header,.topbar { height:62px; }
  .brand-copy strong { font-size:20px; }
  .settings-cta span { display:none; }
  .settings-cta { width:38px; padding:0; }
  .hero { padding:38px 0 22px; }
  .hero h1 { font-size:34px; letter-spacing:-1.6px; }
  .hero p { font-size:14px; }
  .hero-buttons { flex-wrap:wrap; }
  .modebar { padding:10px 12px; gap:6px; }
  .mode-row button { padding:7px 8px; font-size:11px; }
  .mode-divider { display:none; }
  .source-modes { width:auto; justify-content:flex-start; }
  .custom-panel,.test-screen.editing-source .custom-panel { margin:18px 14px 20px !important; padding:13px; }
  .custom-panel textarea { min-height:132px; font-size:16px; }
  .live-row { min-height:62px; padding:18px 17px 7px; }
  .progress-primary span { font-size:31px; }
  .live-stats { gap:16px; }
  .live-stats b { font-size:20px; }
  .progress-track { width:calc(100% - 34px); margin:0 17px 14px; }
  .typing-wrap { padding:0 17px 18px; }
  .typing-viewport { height:180px; }
  .test-meta { padding:10px 58px 10px 14px; min-height:52px; }
  .test-actions { right:12px; bottom:9px; }
  .result-screen { padding:20px 16px; }
  .result-details { grid-template-columns:repeat(2,1fr); }
  .theme-section { padding:30px 0; }
  .theme-section-head { align-items:flex-start; gap:10px; }
  .theme-section-head h2 { font-size:21px; }
  .insight-banner { display:block; }
  .insight-icon { margin-bottom:12px; }
  .insight-banner .theme-btn { margin-top:15px; }
  .theme-options { grid-template-columns:1fr 1fr; }
  .footer-grid { grid-template-columns:1fr; gap:22px; }
  .footer-copy { display:block; }
  .footer-copy span + span { margin-top:5px; }
  body.keyboard-open .site-header { display:none; }
  body.keyboard-open .test-screen { margin-top:8px; }
  body.keyboard-open .modebar { opacity:.22; margin-bottom:0 !important; }
  body.keyboard-open .typing-viewport { height:136px; }
  body.keyboard-open .site-footer { display:none; }
}
@media (max-width:480px) {
  .theme-options { grid-template-columns:1fr; }
  .theme-option { min-height:118px; }
}
/* Footer brand must stay on one line despite generic footer span rules. */
.footer-logo span,.footer-logo small { display:inline; margin:0; }


/* =========================================================
   Typing performance patch — visual theme unchanged.
   ========================================================= */
.typing-viewport {
  contain: layout paint;
}
.typing-viewport .char {
  transition: none !important;
}
.typing-viewport .word {
  transition: opacity .06s linear;
}
/* Keep off-screen homepage content from participating in paint work while typing. */
.theme-section,
.site-footer {
  content-visibility: auto;
  contain-intrinsic-size: 1px 520px;
}
@media (prefers-reduced-motion: reduce) {
  .typing-viewport .word { transition: none !important; }
}


/* V4.0 modes: Time / Words / Quote / Story / Zen */
.mode-value-label { display:inline-flex; align-items:center; min-height:30px; padding:0 9px; color:var(--sub); font-size:12px; font-weight:750; white-space:nowrap; }
.zen-finish { min-height:34px; padding:0 11px; border:1px solid var(--line); border-radius:9px; background:var(--panel); color:var(--main-2); font-size:11px; font-weight:800; cursor:pointer; white-space:nowrap; }
.zen-finish:hover:not(:disabled) { background:var(--main-soft); color:var(--main); }
.zen-finish:disabled { opacity:.45; cursor:default; }
.test-actions:has(.zen-finish:not(.hidden)) { gap:7px; }
@media(max-width:760px){
  .primary-modes { width:100%; order:3; overflow-x:auto; scrollbar-width:none; }
  .primary-modes::-webkit-scrollbar { display:none; }
  .primary-modes button { flex:0 0 auto; }
  .zen-finish { min-height:36px; }
}

/* V4.1: Build Your Typing Skills — original typing modes and engine untouched. */
.skills-home { padding:42px 0 58px; }
.skills-intro { margin-bottom:35px; }
.skills-eyebrow { color:#119c69; font-size:12px; font-weight:850; letter-spacing:1.6px; margin:0 0 12px; }
.skills-intro h2 { color:var(--text); font-size:clamp(28px,3.1vw,40px); font-weight:850; letter-spacing:-1.35px; line-height:1.16; margin:0 0 10px; }
.skills-intro h2 span { color:#10996a; }
.skills-subtitle { color:var(--sub); font-size:15px; line-height:1.6; margin:0; }
.skills-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:20px; }
.skills-card { grid-column:span 2; display:flex; align-items:flex-start; min-width:0; min-height:245px; gap:19px; padding:23px 20px; border:1px solid #d9e8e4; border-radius:17px; background:var(--panel); color:var(--text); text-decoration:none; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.skills-card:nth-child(n+4) { grid-column:span 3; min-height:220px; }
.skills-card:hover { transform:translateY(-3px); border-color:#9ed6c2; box-shadow:0 12px 28px rgba(24,84,65,.08); }
.skills-card:focus-visible { outline:3px solid #159b70; outline-offset:3px; }
.skills-art { flex:0 0 33%; max-width:152px; aspect-ratio:1; display:grid; place-items:center; overflow:hidden; border-radius:17px; background:#ebf8f3; }
.skills-art img { display:block; width:100%; height:100%; object-fit:contain; }
.skills-copy { flex:1; min-width:0; min-height:185px; display:flex; flex-direction:column; align-items:flex-start; }
.skills-tag { display:inline-block; margin-bottom:14px; padding:5px 12px; background:#e5f4ee; color:#137855; border-radius:50px; font-size:11px; line-height:1.2; font-weight:800; }
.skills-title { display:block; margin-bottom:9px; color:var(--text); font-size:18px; line-height:1.25; font-weight:800; letter-spacing:-.35px; }
.skills-description { display:block; flex:1; color:var(--sub); font-size:12px; line-height:1.75; }
.skills-cta { display:inline-flex; align-items:center; gap:9px; margin-top:17px; color:#0c9867; font-size:13px; font-weight:850; }
.skills-cta span { font-size:20px; line-height:1; }
.skills-card:hover .skills-cta { color:#067c50; }
@media(max-width:1100px) {
 .skills-grid {gap:14px}
 .skills-card {padding:19px 15px;gap:13px}
 .skills-art {flex-basis:34%;}
 .skills-title {font-size:16px}
 .skills-description {font-size:11px}
}
@media(max-width:860px) {
 .skills-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
 .skills-card,.skills-card:nth-child(n+4) {grid-column:span 1;min-height:210px}
 .skills-card {padding:19px 16px;gap:15px}
 .skills-art {flex:0 0 36%}
 .skills-copy {min-height:177px}
}
@media(max-width:580px) {
 .skills-home {padding:34px 0 40px}
 .skills-intro {margin-bottom:23px}
 .skills-intro h2 {font-size:30px}
 .skills-subtitle {font-size:13px}
 .skills-grid {grid-template-columns:minmax(0,1fr);gap:12px}
 .skills-card,.skills-card:nth-child(n+4) {grid-column:span 1;min-height:175px;padding:17px 15px;gap:15px}
 .skills-art {flex:0 0 120px}
 .skills-copy {min-height:142px}
 .skills-title {font-size:17px}
 .skills-tag {margin-bottom:9px}
 .skills-description {font-size:12px;line-height:1.5}
 .skills-cta {margin-top:12px}
}
@media(max-width:390px) {
 .skills-art {flex-basis:90px;border-radius:12px}
 .skills-card {gap:12px}
 .skills-title {font-size:15px}
 .skills-description {font-size:11px}
}
/* Width alignment fix: keep homepage feature sections on the same content width. */
.skills-home > .shell,
#insights > .shell,
.why-section > .shell {
  width:min(1120px,calc(100% - 32px));
  margin-inline:auto;
}
@media(max-width:700px) {
  .skills-home > .shell,
  #insights > .shell,
  .why-section > .shell {
    width:calc(100% - 22px);
  }
}

/* V4.2 — searchable multilingual typing-language control, inspired by compact
   test-settings selectors; scoped to the homepage (not the other practice pages). */
.modebar .language-toolbar {
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-left:auto;
  min-width:0;
}
.language-toolbar-label {
  font-size:11px;
  font-weight:800;
  color:var(--sub);
  white-space:nowrap;
}
.modebar .wordset-picker { display:block; position:relative; }
.modebar .wordset-trigger {
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  min-height:37px;
  min-width:130px;
  max-width:210px;
  border:1px solid var(--line);
  border-radius:9px;
  background:var(--panel-2);
  padding:7px 12px;
  font-size:12px;
  font-weight:800;
  color:var(--text);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  cursor:pointer;
}
.modebar .wordset-trigger.selectable::after { content:'⌄'; font-size:15px; margin-left:12px; color:var(--main); transform:none; }
.modebar .wordset-trigger:hover,
.modebar .wordset-trigger[aria-expanded="true"] { border-color:var(--main); background:var(--main-soft); color:var(--main-2); }
.modebar .wordset-trigger:disabled { opacity:.6; cursor:not-allowed; }
.modebar .wordset-menu {
  position:absolute;
  top:calc(100% + 12px);
  bottom:auto;
  right:0;
  left:auto;
  width:min(570px,calc(100vw - 28px));
  max-height:min(545px, 75vh);
  padding:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  transform:none;
  border:1px solid var(--line);
  border-radius:17px;
  background:var(--panel);
  box-shadow:0 22px 55px rgba(14,61,45,.18);
  z-index:60;
  color:var(--text);
}
.modebar .wordset-menu::after { display:none; }
.modebar .wordset-menu-head {
  position:static;
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:0;
  padding:18px 19px 13px;
  border:0;
  background:var(--panel);
}
.modebar .wordset-menu-head strong { display:block; font-size:16px; font-weight:850; }
.modebar .wordset-menu-head small { display:block; margin-top:4px; max-width:none; font-size:11px; line-height:1.45; text-align:left; color:var(--sub); }
.wordset-menu-count { flex:none; font-size:11px; font-weight:700; color:var(--main-2); white-space:nowrap; }
.wordset-search-wrap {
  display:flex;
  align-items:center;
  gap:8px;
  margin:0 18px 8px;
  padding:0 10px;
  border:1px solid var(--line);
  border-radius:10px;
  color:var(--sub);
  background:var(--panel-2);
}
.wordset-search-wrap > span { font-size:23px; line-height:1; }
.wordset-search-wrap input {
  min-width:0;
  width:100%;
  height:39px;
  border:0;
  background:transparent;
  color:var(--text);
  outline:0;
  font-size:13px;
  box-shadow:none;
}
.wordset-search-wrap:focus-within { border-color:var(--main); box-shadow:0 0 0 2px var(--main-soft); }
.wordset-search-wrap input::placeholder { color:var(--sub); opacity:.83; }
.wordset-list { min-height:0; overflow:auto; overscroll-behavior:contain; padding:0 15px 9px; scrollbar-width:thin; }
.wordset-group { margin:9px 0 15px; }
.wordset-group h3 { margin:0 0 7px; padding:2px 6px; font-size:10px; letter-spacing:1px; text-transform:uppercase; font-weight:850; color:var(--sub); }
.modebar .wordset-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
.modebar .wordset-menu .wordset-option {
  width:100%;
  display:grid;
  grid-template-columns:36px minmax(0,1fr) auto;
  gap:8px;
  align-items:center;
  min-height:60px;
  padding:9px 10px;
  text-align:left;
  border:1px solid var(--line);
  border-radius:11px;
  color:var(--text);
  background:var(--panel);
  transition:background .12s ease, border-color .12s ease;
}
.modebar .wordset-menu .wordset-option:hover { background:var(--main-soft); border-color:color-mix(in srgb,var(--main) 50%,var(--line)); }
.modebar .wordset-menu .wordset-option.active { background:var(--main-soft); border-color:var(--main); color:var(--text); }
.wordset-option-mark {
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border-radius:9px;
  background:var(--main-soft);
  color:var(--main-2);
  font-size:10px;
  font-weight:850;
  flex:none;
}
.wordset-option-names { min-width:0; display:flex; flex-direction:column; gap:1px; }
.modebar .wordset-menu button .wordset-option-names strong { display:block; min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:var(--text); font-size:13px; font-weight:750; }
.modebar .wordset-menu button .wordset-option-names small { display:block; min-width:0; font-size:10px; color:var(--sub); overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.wordset-option-size { min-width:24px; font-size:11px; color:var(--sub); font-weight:750; text-align:right; }
.modebar .wordset-menu button.active .wordset-option-size { color:var(--main-2); }
.wordset-menu-foot { flex:none; margin:0; padding:12px 19px; border-top:1px solid var(--line); color:var(--sub); font-size:10px; line-height:1.5; background:var(--panel-2); }
.wordset-empty { padding:18px 14px; text-align:center; font-size:12px; color:var(--sub); }
.test-meta .current-language-meta { font-weight:650; }
.test-meta #difficultyBadge::before { content:'•'; margin:0 8px; color:var(--sub-2); }
@media(max-width:1060px) {
  .modebar .language-toolbar { margin-left:0; }
}
@media(max-width:700px) {
  .modebar .language-toolbar { width:100%; justify-content:space-between; padding:7px 2px 1px; }
  .modebar .wordset-trigger { min-width:170px; max-width:min(65vw,265px); }
  .modebar .wordset-menu { width:min(550px,calc(100vw - 26px)); max-height:min(65vh,500px); }
}
@media(max-width:480px) {
  .modebar .wordset-menu { right:-5px; }
  .modebar .wordset-menu .wordset-grid { grid-template-columns:minmax(0,1fr); }
  .modebar .wordset-menu-head { padding:14px 15px 10px; }
  .wordset-search-wrap { margin:0 14px 6px; }
  .wordset-list { padding:0 12px 8px; }
  .wordset-group { margin:7px 0 12px; }
  .wordset-menu-foot { padding:10px 15px; }
}
/* Mobile selector opens in the visible viewport rather than below the test toolbar. */
@media(max-width:700px) {
  .modebar .wordset-menu {
    position:fixed;
    top:75px;
    left:12px;
    right:12px;
    bottom:auto;
    width:calc(100vw - 24px);
    max-height:calc(100dvh - 92px);
    border-radius:16px;
    z-index:110;
  }
}
@media(max-width:390px) {
  .modebar .wordset-menu { left:10px; right:10px; width:calc(100vw - 20px); }
}