/* Ritme · presentation polish. All palette and contrast tokens stay in styles.css. */
.polish-ready .font-menu {
  position:fixed; right:auto; top:var(--font-menu-top,57px); left:var(--font-menu-left,0px);
  max-width:calc(100vw - 24px); animation:polish-menu-in .14s ease both;
}
@keyframes polish-menu-in { from { opacity:0; } to { opacity:1; } }

/* Reserve the existing free-typing options row in every mode. Never move the
   prompt to make room for controls during a mode switch. No new settings row. */
.polish-options-slot { min-height:33px; display:flow-root; }
.language-row { min-height:32px; }
.language-meta > :not([hidden]),#word-activity-wrap:not([hidden]),
#word-options:not([hidden]),#code-tutorial-btn:not([hidden]) {
  animation:polish-context-in .16s var(--ease) both;
}
@keyframes polish-context-in {
  from { opacity:0; transform:translateY(2px); }
  to { opacity:1; transform:none; }
}
.live-metrics { transition:opacity .18s ease; }
.running .live-metrics { transition-delay:.04s; }

/* Use the actual existing keydown/up states, including Shift and numpad.
   No input delay, moving letters, shake, or repeating target pulse. */
.coach-key { transition-duration:.12s,.12s,.07s,.12s; }
.coach-key.kb-down { transform:translateY(1px) scale(.98); }
.coach-key.kb-next::before { animation:polish-target-in .12s ease-out both; }
@keyframes polish-target-in { from { opacity:.35; } to { opacity:1; } }

/* Parent view entry is replaced only for results, not Typing / Progress. */
.polish-ready .results-view:not([hidden]) { animation:none; }
.result-summary { margin:20px 0 0; max-width:78ch; color:var(--ink); font:11px/1.8 var(--mono); }
.result-summary + .benchmark { margin-top:18px; }
#result-wpm { position:relative; width:fit-content; }
.polish-record #result-wpm { animation:polish-record-ink .6s ease both; }
.polish-record #result-wpm::after {
  content:''; position:absolute; left:0; right:0; bottom:-3px; height:1px;
  background:var(--accent); transform-origin:left; animation:polish-record-line .6s var(--ease) both;
}
@keyframes polish-record-ink {
  0%,100% { color:var(--strong); } 25%,70% { color:var(--accent); }
}
@keyframes polish-record-line {
  0% { opacity:0; transform:scaleX(0); }
  30%,70% { opacity:.7; transform:scaleX(1); }
  100% { opacity:0; transform:scaleX(1); }
}
.progress-marker { transform-box:fill-box; transform-origin:center; transition:transform .1s ease; }
.progress-dot:hover .progress-marker { transform:scale(1.25); }
.result-point { fill:var(--net); stroke:var(--bg); stroke-width:1.5px; pointer-events:none; }

/* Two static icons crossfade; the target theme remains accessible via the
   existing button label. No extra requests or icon font. */
.theme-symbol { display:block; width:15px; height:15px; position:relative; }
.theme-symbol svg { position:absolute; inset:0; width:15px; height:15px; transition:opacity .15s ease,transform .15s var(--ease); }
.theme-sun { opacity:0; transform:rotate(-35deg); }
.theme-moon { opacity:1; transform:none; }
[data-theme="dark"] .theme-sun { opacity:1; transform:none; }
[data-theme="dark"] .theme-moon { opacity:0; transform:rotate(35deg); }

/* Native close()/Escape semantics stay synchronous. Supporting browsers keep
   the top-layer paint for 140 ms; older browsers retain the existing entry. */
@supports (transition-behavior:allow-discrete) {
  dialog {
    opacity:0; transform:translateY(4px);
    transition:opacity .14s ease,transform .14s var(--ease),display .14s allow-discrete,overlay .14s allow-discrete;
  }
  dialog[open] { animation:none; opacity:1; transform:none; }
  dialog::backdrop {
    opacity:0;
    transition:opacity .14s ease,display .14s allow-discrete,overlay .14s allow-discrete;
  }
  dialog[open]::backdrop { opacity:1; }
  @starting-style {
    dialog[open] { opacity:0; transform:translateY(6px); }
    dialog[open]::backdrop { opacity:0; }
  }
}
@media(max-width:600px) {
  .language-row { min-height:32px; }
  .result-summary { font-size:10px; }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
  .coach-key.kb-down,.progress-dot .progress-marker { transform:none!important; }
  .polish-record #result-wpm::after { display:none; }
}
@media print { .result-summary { color:inherit; } }

/* remove focusoutline from results. */
#results-view:focus {
  outline: none;
}

/* Shared custom scrollbars. Every scroll surface uses the modal baseline:
   paper-toned track, 10px rail and a rounded thumb. */
:where(html, body, dialog, dialog *, .history-scroll, .license-text, .test-info-panel, .custom-select-menu, textarea) {
  scrollbar-width:thin;
  scrollbar-color:var(--muted) var(--bg);
}
:where(html, .history-scroll, .license-text, dialog, .test-info-panel) {
  scrollbar-gutter:stable;
  overscroll-behavior:contain;
}
@supports selector(::-webkit-scrollbar) {
  :where(html, body, dialog, dialog *, .history-scroll, .license-text, .test-info-panel, .custom-select-menu, textarea) {
    scrollbar-width:auto;
    scrollbar-color:auto;
  }
  :where(html, body, dialog, dialog *, .history-scroll, .license-text, .test-info-panel, .custom-select-menu, textarea)::-webkit-scrollbar {
    width:10px; height:10px;
  }
  :where(html, body, dialog, dialog *, .history-scroll, .license-text, .test-info-panel, .custom-select-menu, textarea)::-webkit-scrollbar-track,
  :where(html, body, dialog, dialog *, .history-scroll, .license-text, .test-info-panel, .custom-select-menu, textarea)::-webkit-scrollbar-corner {
    background:var(--bg);
  }
  :where(html, body, dialog, dialog *, .history-scroll, .license-text, .test-info-panel, .custom-select-menu, textarea)::-webkit-scrollbar-thumb {
    background:var(--muted);
    border:3px solid var(--bg);
    border-radius:999px;
    min-height:32px;
    min-width:32px;
    background-clip:padding-box;
  }
  :where(html, body, dialog, dialog *, .history-scroll, .license-text, .test-info-panel, .custom-select-menu, textarea)::-webkit-scrollbar-thumb:hover {
    background:var(--accent);
  }
}
@media (pointer:coarse) {
  @supports selector(::-webkit-scrollbar) {
    :where(html, body, dialog, dialog *, .history-scroll, .license-text, .test-info-panel, .custom-select-menu, textarea)::-webkit-scrollbar {
      width:14px; height:14px;
    }
  }
  :where(html, body, dialog, dialog *, .history-scroll, .license-text, .test-info-panel, .custom-select-menu, textarea) {
    scrollbar-width:auto;
  }
}
@media (forced-colors:active) {
  :where(html, body, dialog, dialog *, .history-scroll, .license-text, .test-info-panel, .custom-select-menu, textarea) {
    scrollbar-color:auto;
    scrollbar-width:auto;
  }
}

/* One shared underline; its geometry is maintained by polish.js. Hide the old
   per-letter cursor only after the enhancement has measured a valid target. */
.polish-caret-ready .char.current::after,
.polish-caret-ready .gap.current::after { visibility:hidden; }
.polish-caret {
  position:absolute; top:0; left:0; display:block; height:2px;
  pointer-events:none; user-select:none;
  transition:transform .08s var(--ease),width .08s var(--ease);
}
.polish-caret::before {
  content:''; position:absolute; inset:0; background:currentColor;
  animation:cursor-breathe 1.15s ease-in-out infinite;
}
.running .polish-caret::before { animation:none; }
@media(prefers-reduced-motion:reduce) {
  .polish-caret { transition:none!important; }
  .polish-caret::before { animation:none!important; }
}
@media print { .polish-caret { display:none; } }

/* ========================================================================== 
   RITME / DEWIND — visual layer, 2026-10-05
   Scope: the typing app, never the website or /articles/.
   Original polish.css above remains byte-for-byte intact.
   No @keyframes, animation/transition overrides, font requests or JS changes.
   Typing metrics, caret geometry, code layout, key/finger colours and print
   rules remain owned by styles.css and the existing app/polish runtime.
   ========================================================================== */
@media screen {
  html:has(#test-view) {
    --rt-sans:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",sans-serif;
    --bg:#fbf8f2; --surface:#edf5f2; --panel:var(--bg);
    --ink:#48564e; --strong:#141515; --muted:#626963; --faint:#79827b;
    --line:#d5ddd5; --accent:#16845b; --accent-soft:#e0efe5;
    --typed:#859087; --error:#c34336; --error-bg:#f5e1db;
    --track:#e0e6df; --bar:#16845b;
    --burst:#148c80; --raw:#b16927; --net:#0475a8; --fixed:#986900;
    --select-menu-bg:#fffdf9; --select-menu-ink:#19251e;
    --select-menu-muted:#657269; --select-menu-line:#cad6cc;
    --select-menu-hover:#e8f1e9; --select-menu-hover-ink:#133c2a;
    --select-menu-active:#dcece1; --select-menu-active-ink:#133c2a;
    --select-menu-selected:#edf5ef; --select-menu-check:#16845b;
    --rt-panel:#fffdf9; --rt-panel-tint:#f2f6f1; --rt-line-strong:#bccdc0;
    --rt-nav:rgba(251,248,242,.94); --rt-shadow:0 9px 30px rgba(39,61,46,.045);
    --rt-blue:#0475a8; --rt-gold:#a56f00;
  }
  html[data-theme="dark"]:has(#test-view) {
    --bg:#050506; --surface:#0d1012; --panel:var(--bg);
    --ink:#c0c9c1; --strong:#f6f2ea; --muted:#aaa39a; --faint:#829087;
    --line:#28312d; --accent:#9ff4c1; --accent-soft:#193327;
    --typed:#728179; --error:#ff8373; --error-bg:#39211e;
    --track:#252e29; --bar:#9ff4c1;
    --burst:#66c9b5; --raw:#eaa775; --net:#80d8ff; --fixed:#f4d37a;
    --select-menu-bg:#111917; --select-menu-ink:#f6f2ea;
    --select-menu-muted:#a5b0a7; --select-menu-line:#35463d;
    --select-menu-hover:#1d3025; --select-menu-hover-ink:#d9ffe5;
    --select-menu-active:#254532; --select-menu-active-ink:#edfff3;
    --select-menu-selected:#18281f; --select-menu-check:#9ff4c1;
    --rt-panel:#0d1311; --rt-panel-tint:#0b120e; --rt-line-strong:#3d5145;
    --rt-nav:rgba(13,16,18,.92); --rt-shadow:0 10px 32px rgba(0,0,0,.16);
    --rt-blue:#80d8ff; --rt-gold:#f4d37a;
  }

  /* Existing layout/interaction states stay authoritative. No global site CSS. */
  body:has(#test-view) > .topbar {
    width:calc(100% - 64px); max-width:1180px; height:68px;
    margin:24px auto 0; padding:10px 16px 10px 20px; gap:26px;
    border:0; border-radius:0; background:transparent; box-shadow:none;
  }
  body:has(#test-view) .brand { gap:10px; color:var(--strong); padding:3px 0; letter-spacing:0; }
  body:has(#test-view) .brand-mark { width:31px; height:31px; justify-content:center; border:1px solid var(--line); border-radius:50%; }
  body:has(#test-view) .brand-mark svg { width:18px; height:18px; }
  body:has(#test-view) .brand-wordmark { font:780 27px/1.1 var(--rt-sans); letter-spacing:-.055em; }
  body:has(#test-view) .brand-caption { display:block; margin-left:5px; color:var(--muted); font:600 8px/1.4 var(--mono); letter-spacing:.14em; }
  body:has(#test-view) .view-nav { gap:20px; }
  body:has(#test-view) .view-nav button,
  body:has(#test-view) .education-entry { font:650 10px/1.5 var(--mono); letter-spacing:.03em; min-height:34px; }
  body:has(#test-view) .education-entry { color:var(--muted); }
  body:has(#test-view) .education-entry:hover { color:var(--accent); }
  body:has(#test-view) .nav { padding-left:12px; border-left:1px solid var(--line); gap:4px; }
  body:has(#test-view) .nav .icon-btn { min-width:32px; min-height:32px; border-radius:50%; }
  body:has(#test-view) .nav .icon-btn:hover,
  body:has(#test-view) .nav .icon-btn[aria-expanded="true"] { background:var(--surface); }
  body:has(#test-view) #theme-btn { border:1px solid var(--line); }
  body:has(#test-view) > main { padding-top:48px; padding-bottom:64px; }

  /* Reveal the existing heading; no injected slogans or changed app content. */
  body:has(#test-view) .test-view > .view-intro { order:-1; justify-content:space-between; align-items:flex-end; gap:28px; margin:0 0 30px; }
  body:has(#test-view) .test-view > .view-intro > div:first-child { display:block; }
  body:has(#test-view) .view-intro .eyebrow { display:block; margin:0 0 11px; font:650 9px/1.5 var(--mono); letter-spacing:.15em; text-transform:uppercase; color:var(--accent); }
  body:has(#test-view) .eyebrow-dot { display:inline-block; width:5px; height:5px; margin-right:6px; vertical-align:middle; background:var(--accent); border-radius:50%; }
  body:has(#test-view) h1.view-title { font:780 clamp(30px,4.5vw,49px)/1.04 var(--rt-sans); letter-spacing:-.045em; color:var(--strong); }
  body:has(#test-view) .intro-note { display:block; margin:12px 0 0; max-width:51ch; color:var(--muted); font:400 13px/1.6 var(--rt-sans); }
  body:has(#test-view) .personal-best { justify-content:flex-end; text-align:right; max-width:235px; padding-bottom:4px; }
  body:has(#test-view) .personal-best b { font-weight:700; color:var(--accent); }
  body.running:has(#test-view) .test-view > .view-intro > div:first-child { opacity:.38; }

  /* Controls stay on the page itself: hierarchy through spacing, colour and underline. */
  body:has(#test-view) .control-deck { padding:10px 2px 6px; border:0; border-radius:0; background:transparent; box-shadow:none; }
  body:has(#test-view) .control-group button { color:var(--muted); font-weight:550; background:transparent; }
  body:has(#test-view) .control-group button[aria-pressed="true"] { color:var(--accent); background:transparent; border-radius:0; }
  body:has(#test-view) .mode-group::before { content:""; width:1px; height:16px; top:9px; background:var(--line); }
  body:has(#test-view) .option-toggle[aria-pressed="true"] { color:var(--accent); }
  body:has(#test-view) .test-time-track { background:var(--line); }
  body:has(#test-view) .test-time-fill { background:var(--accent); }
  body:has(#test-view) .typing-stage { margin-top:5px; }
  body:has(#test-view) .live-line { justify-content:space-between; }
  body:has(#test-view) .stage-label { display:block; color:var(--faint); font-size:9px; letter-spacing:.06em; }
  body:has(#test-view) .focus-overlay button { font-family:var(--rt-sans); font-weight:650; font-size:14px; }
  body:has(#test-view) .focus-overlay small { font-family:var(--mono); font-size:10px; font-weight:400; }

  /* Menus/overlays retain their positioning, top-layer and transition rules. */
  body:has(#test-view) :is(.custom-select-menu,.font-menu,.manage-popover) { background:var(--select-menu-bg); color:var(--select-menu-ink); border:1px solid var(--select-menu-line); border-radius:7px; box-shadow:0 16px 38px rgba(0,0,0,.16); }
  body:has(#test-view) .custom-select-option { border-radius:4px; }
  body:has(#test-view) .custom-select-group { font-weight:650; }
  body:has(#test-view) .test-info-panel { background:var(--rt-panel-tint); border-color:var(--line); border-radius:6px; }
  body:has(#test-view) .test-info-heading h2 { font:730 15px/1.4 var(--rt-sans); color:var(--strong); }
  body:has(#test-view) .test-info-panel p { font-family:var(--rt-sans); line-height:1.65; }
  body:has(#test-view) .test-info-panel .test-info-context { font-family:var(--mono); }
  body:has(#test-view) dialog { background:var(--bg); color:var(--ink); border:1px solid var(--rt-line-strong); border-radius:9px; box-shadow:0 25px 100px rgba(0,0,0,.27); }
  body:has(#test-view) dialog::backdrop { background:rgba(5,5,6,.5); }
  body:has(#test-view) .dialog-header { border-color:var(--line); }
  body:has(#test-view) .dialog-header h2 { font:760 22px/1.2 var(--rt-sans); letter-spacing:-.025em; }
  body:has(#test-view) .dialog-body { font-family:var(--rt-sans); font-size:14px; line-height:1.75; }
  body:has(#test-view) .dialog-body h3 { font:720 16px/1.4 var(--rt-sans); color:var(--strong); }
  body:has(#test-view) :is(.license-text,.tutorial-example,.text-input) { font-family:var(--mono); }
  body:has(#test-view) :is(.text-input,.filter-field) { border-color:var(--line); }
  body:has(#test-view) .toast { background:var(--strong); color:var(--bg); border-color:var(--line); border-radius:6px; }

  /* Result and progress typography; chart data, axes and motion remain native. */
  body:has(#test-view) .hero-stats .stat-number { font-family:var(--rt-sans); font-weight:760; letter-spacing:-.045em; }
  body:has(#test-view) .stat-label { color:var(--muted); font-size:10px; letter-spacing:.065em; }
  body:has(#test-view) .secondary-stats .stat-number { color:var(--strong); font-weight:650; }
  body:has(#test-view) .progress-value b { font-family:var(--rt-sans); font-weight:750; letter-spacing:-.035em; font-variant-numeric:tabular-nums; }
  body:has(#test-view) .progress-stats { padding-block:20px; border-block:1px solid var(--line); }
  body:has(#test-view) .progress-chart-card { padding:20px; background:var(--rt-panel); border:1px solid var(--line); border-radius:8px; }
  body:has(#test-view) .chart-title { font:720 16px/1.4 var(--rt-sans); letter-spacing:-.015em; }
  body:has(#test-view) :is(.chart-subtitle,.progress-explanation,.result-summary,.history-note,.result-insight) { font-family:var(--rt-sans); line-height:1.65; }
  body:has(#test-view) .history-heading h2 { font:720 20px/1.3 var(--rt-sans); letter-spacing:-.02em; }
  body:has(#test-view) .history-scroll { border-color:var(--line); }
  body:has(#test-view) tbody tr:hover { background:var(--surface); }
  body:has(#test-view) :is(.primary-button,.again) { border:1px solid var(--rt-line-strong); background:var(--accent-soft); color:var(--accent); border-radius:5px; font-weight:650; }
  body:has(#test-view) :is(.primary-button,.again):hover { background:var(--accent-soft); border-color:var(--accent); }
  body:has(#test-view) .benchmark-level { font-family:var(--rt-sans); font-weight:700; }
  body:has(#test-view) .weak-heading { font:700 13px/1.5 var(--rt-sans); }
  body:has(#test-view) .progress-empty > strong { color:var(--strong); font:720 21px/1.3 var(--rt-sans); }
  body:has(#test-view) .progress-empty p { font-family:var(--rt-sans); font-size:13px; }

  /* Credits and actions stay present. No CSS-generated replacement copy. */
  body:has(#test-view) > .footer { width:calc(100% - 64px); max-width:1180px; padding-bottom:24px; }
  body:has(#test-view) .footer-bottom { padding-top:17px; }
  body:has(#test-view) .footer-origin a { text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:3px; }
  body:has(#test-view) .footer-note { color:var(--muted); }
}
@media screen and (max-width:900px) {
  body:has(#test-view) > .topbar { width:calc(100% - 40px); padding-inline:16px; gap:18px; }
  body:has(#test-view) .brand-caption { display:none; }
  body:has(#test-view) .view-nav { gap:14px; }
  body:has(#test-view) > .footer { width:calc(100% - 48px); }
}
@media screen and (max-width:600px) {
  body:has(#test-view) > .topbar { width:calc(100% - 24px); height:auto; min-height:92px; margin-top:12px; padding:11px 13px 8px; gap:8px 12px; border-radius:0; flex-wrap:wrap; }
  body:has(#test-view) .brand { order:0; margin-right:auto; gap:7px; }
  body:has(#test-view) .brand-mark { display:flex; width:27px; height:27px; }
  body:has(#test-view) .brand-mark svg { width:15px; height:15px; }
  body:has(#test-view) .brand-wordmark { font-size:25px; }
  body:has(#test-view) .nav { order:1; padding-left:0; border-left:0; gap:2px; }
  body:has(#test-view) .nav .icon-btn { min-width:30px; min-height:30px; }
  body:has(#test-view) .view-nav { order:2; width:100%; justify-content:center; gap:24px; padding-top:4px; border-top:1px solid var(--line); }
  body:has(#test-view) .view-nav button,body:has(#test-view) .education-entry { font-size:10px; min-height:30px; }
  body:has(#test-view) > main { padding:30px 20px 46px; }
  body:has(#test-view) .test-view > .view-intro { align-items:flex-start; gap:10px; margin-bottom:22px; flex-direction:column; }
  body:has(#test-view) h1.view-title { font-size:clamp(29px,8.6vw,39px); }
  body:has(#test-view) .intro-note { font-size:12px; margin-top:9px; max-width:40ch; }
  body:has(#test-view) .view-intro .eyebrow { font-size:8px; margin-bottom:8px; }
  body:has(#test-view) .personal-best { max-width:none; justify-content:flex-start; text-align:left; padding-bottom:0; }
  body:has(#test-view) .control-deck { padding:8px 0 4px; border-radius:0; }
  body:has(#test-view) .control-group button { padding-inline:7px; }
  body:has(#test-view) .custom-select[data-select-id="word-activity"] .custom-select-trigger { max-width:130px; }
  body:has(#test-view) .custom-select[data-select-id="language"] .custom-select-trigger { max-width:90px; }
  body:has(#test-view) .view-intro { flex-wrap:wrap; }
  body:has(#test-view) .progress-head-actions { margin-left:0; }
  body:has(#test-view) .progress-stats { padding-block:15px; }
  body:has(#test-view) .progress-chart-card { padding:16px; }
  body:has(#test-view) .progress-value b { font-size:27px; }
  body:has(#test-view) .hero-stats .stat-number { font-size:43px; }
  body:has(#test-view) .stage-label { font-size:8px; }
  body:has(#test-view) .dialog-body { font-size:13px; }
  body:has(#test-view) .dialog-header h2 { font-size:20px; }
  body:has(#test-view) > .footer { width:calc(100% - 40px); }
}
@media screen {
  body:has(#test-view) > .topbar,
  body:has(#test-view) .control-deck {
    background:transparent !important;
    border-color:transparent !important;
    box-shadow:none !important;
  }
}
@media screen and (max-width:360px) {
  body:has(#test-view) > .topbar { padding-inline:10px; }
  body:has(#test-view) .brand-mark { display:none; }
  body:has(#test-view) > main { padding-inline:16px; }
  body:has(#test-view) .custom-select[data-select-id="word-activity"] .custom-select-trigger { max-width:100px; }
  body:has(#test-view) .custom-select[data-select-id="language"] .custom-select-trigger { max-width:79px; }
  body:has(#test-view) .progress-value b { font-size:24px; }
}