/* Component rules use the shared palette in both themes. Screen-only keeps printables intact. */
@media screen {
  html[data-theme] body {font-family:var(--font-ui);color:var(--ui-text)}
  html[data-theme] body :is(h1,h2,h3,h4) {font-family:var(--font-ui);text-wrap:balance}
  html[data-theme] body :is(button,input,select) {font-family:var(--font-ui)}
  html[data-theme] body :is(button,a,input,select,textarea,summary):focus-visible {outline:3px solid var(--ui-focus);outline-offset:3px}
  html[data-theme] body :is(.res-page,.legal-page,.pricing-page,.exam-page,.journey-page,.test-page) {font-size:16px}
  html[data-theme] body :is(.res-article section p,.res-article-summary,.res-guide-card p,.res-featured p,.res-faqs p,.res-faqs summary,.legal-article p,.legal-preferences small,.pricing-card p,.pricing-features li,.exam-card p,.auth-form-panel p) {font-size:15px;line-height:1.75}
  html[data-theme] body :is(.res-article section p,.res-guide-card p,.res-featured p,.res-article-summary,.legal-preferences small,.auth-form-panel p) {color:var(--ui-muted)}
  html[data-theme] body :is(.res-article h1,.res-article h2,.res-featured h3,.res-guide-card h3,.pricing-card h2,.legal-article h2,.journey-panel h2) {color:var(--ui-text)}
  html[data-theme] body :is(.res-eyebrow,.legal-eyebrow,.auth-eyebrow,.settings-eyebrow) {letter-spacing:1.2px}
  html[data-theme] body :is(.practice-breadcrumb,.test-breadcrumb,.typing-tests-breadcrumb,.learn-breadcrumb,.exam-breadcrumb,.journey-breadcrumb,.res-breadcrumb,.pricing-breadcrumb,.legal-breadcrumb) {font-size:14px;line-height:1.6;color:var(--ui-muted)}
  html[data-theme] body :is(.practice-breadcrumb,.test-breadcrumb,.typing-tests-breadcrumb,.learn-breadcrumb,.exam-breadcrumb,.journey-breadcrumb,.res-breadcrumb,.pricing-breadcrumb,.legal-breadcrumb) a {color:var(--ui-accent);text-underline-offset:3px}
  html[data-theme] body :is(.practice-breadcrumb,.test-breadcrumb,.typing-tests-breadcrumb,.learn-breadcrumb,.exam-breadcrumb,.journey-breadcrumb,.res-breadcrumb,.pricing-breadcrumb,.legal-breadcrumb) span {color:var(--ui-muted)}
  html[data-theme] body :is(.hero-section,.practice-intro,.stats-hero,.test-hero,.exam-header,.journey-hero,.res-hero,.pricing-hero,.legal-header) p {font-weight:400;max-width:760px}
  html[data-theme] body .home-keyboard-hero .hero-content .hero-description {font-weight:400}
  html[data-theme] body :is(.primary-button,.button-primary,.secondary-button,.button-secondary,.res-button,.legal-button,.pricing-button,.exam-button,.test-button,.auth-submit,.auth-primary,.button,.chip,.danger-link) {min-height:44px;border-radius:6px;padding:10px 16px;font-size:14px;line-height:1.5;display:inline-flex;align-items:center;justify-content:center;gap:8px}
  html[data-theme] body :is(.primary-button,.button-primary,.res-button,.legal-button,.auth-submit,.auth-primary,.pricing-button:where(:not(:disabled)),.exam-button,.button) {background: #245fbd;border-color:#245fbd;color:#fff}
  html[data-theme] body :is(.primary-button,.button-primary,.res-button,.legal-button,.auth-submit,.auth-primary,.pricing-button:where(:not(:disabled)),.exam-button,.button):hover {background:#184d9e;border-color:#184d9e;color:#fff}
  html[data-theme] body :is(.secondary-button,.button-secondary,.legal-secondary,.exam-button-secondary,.chip) {background:var(--ui-surface);border:1px solid var(--ui-line);color:var(--ui-accent)}
  html[data-theme] body :is(.secondary-button,.button-secondary,.legal-secondary,.exam-button-secondary,.chip):hover {background:var(--ui-raised);border-color:var(--ui-accent);color:var(--ui-accent)}
  html[data-theme] body :is(.danger,.danger-link,.exam-danger),html[data-theme] body.exam-window .exam-danger,html[data-theme] body .topbar .account form .text-button {background:var(--ui-danger);border-color:var(--ui-danger);color:#fff;min-height:44px;font-size:14px}
  html[data-theme] body :is(.danger,.danger-link,.exam-danger):hover,html[data-theme] body.exam-window .exam-danger:hover,html[data-theme] body .topbar .account form .text-button:hover {background:var(--ui-danger-hover);border-color:var(--ui-danger-hover);color:#fff}
  html[data-theme] body :is(.auth-input,.auth-form-panel input:not([type=checkbox]),.filters input,.filters select) {min-height:44px;font-size:16px}
  html[data-theme] body .legal-preferences label {padding-block:18px;min-height:48px}
  html[data-theme] body .legal-preferences input[type=checkbox] {width:20px;height:20px;flex:0 0 20px;accent-color:var(--ui-accent)}
  html[data-theme] body .legal-actions {display:flex;flex-wrap:wrap;gap:12px}
  html[data-theme] body .site-footer {background:#1c2a3b}
  html[data-theme] body .site-footer :is(p,a) {font-size:14px;line-height:1.8}
  html[data-theme] body .footer-links a {display:inline-block;padding-block:4px}
  html[data-theme] body .legal-footer-links {gap:12px 20px}
  html[data-theme] body .legal-footer-links a {font-size:13px}
  html[data-theme] body .mobile-menu-button {min-width:44px;min-height:44px;line-height:1}
  html[data-theme] body .mobile-menu.open {max-height:calc(100dvh - 64px);overflow-y:auto;padding:12px 20px 20px}
  html[data-theme] body .mobile-nav-link {min-height:44px;padding-block:10px}
  html[data-theme] body .mobile-auth {display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center}
  html[data-theme] body .mobile-auth>* {flex:0 0 auto;white-space:nowrap}
  html[data-theme] body .mobile-auth .mobile-nav-link {white-space:nowrap;width:auto}
  html[data-theme] body .account-menu>summary {min-height:44px;display:flex;align-items:center}
  html[data-theme] body .res-category-nav a {min-height:44px;display:inline-flex;align-items:center;font-size:14px}
  html[data-theme] body .res-article-contents {background:var(--ui-raised);box-shadow:none}
  html[data-theme] body .res-article-aside {background:var(--ui-surface)}
  html[data-theme] body #site-settings .settings-heading p,html[data-theme] body #site-settings .settings-card-heading small,html[data-theme] body #site-settings label small,html[data-theme] body #site-settings .settings-exam-note,html[data-theme] body #site-settings .settings-status,html[data-theme] body #site-settings .settings-footer {font-size:13px;line-height:1.6}
  html[data-theme] body #site-settings .settings-eyebrow {font-size:12px;letter-spacing:1.2px}
  html[data-theme] body #site-settings select {min-height:44px;font-size:14px}
  html[data-theme] body #site-settings #site-settings-close {width:44px;height:44px;flex-basis:44px}
  html[data-theme] body #site-settings .settings-select-wrap>svg {top:13px}
  html[data-theme] body .sidebar summary,html[data-theme] body .nav-row>a:first-child {font-size:14px;line-height:1.5}
  html[data-theme] body .sidebar summary {padding-block:6px}
  html[data-theme] body .nav-row>a:first-child {padding-block:11px}
  html[data-theme] body .nav-add {min-width:36px;min-height:44px;display:grid;place-items:center}
  html[data-theme] body .metric>span {font-size:14px;color:var(--ui-muted)}
  html[data-theme] body .metric strong {color:var(--ui-text);font-size:30px;margin-bottom:0}
  html[data-theme] body .metric {background:var(--ui-surface);border:1px solid var(--ui-line);border-radius:var(--ui-radius);padding:20px}
  html[data-theme] body .metrics-secondary {margin:20px 0 24px;background:var(--ui-surface);border:1px solid var(--ui-line);border-radius:var(--ui-radius)}
  html[data-theme] body .metrics-secondary>summary {padding:16px 20px;font-size:15px;font-weight:600;cursor:pointer;min-height:48px}
  html[data-theme] body .metrics-secondary .metrics {padding:0 16px 16px;grid-template-columns:repeat(3,minmax(0,1fr))}
  html[data-theme] body .metrics-secondary .metric {padding:16px;background:var(--ui-page);border-top:0}
  html[data-theme] body .metrics-secondary .metric strong {font-size:24px}
  html[data-theme] body .table-wrap td {font-size:14px;line-height:1.6;padding-block:18px}
  html[data-theme] body .table-wrap :is(small,.badge) {font-size:13px;line-height:1.5}
  html[data-theme] body .table-wrap .row-actions {display:flex;gap:8px;flex-wrap:wrap;align-items:center}
  html[data-theme] body .table-wrap .row-actions :is(a,button) {min-height:40px;padding:8px 10px;font-size:13px;border-radius:6px;display:inline-flex;align-items:center}
  html[data-theme] body .table-wrap .row-actions .text-button {border:1px solid var(--ui-line);background:var(--ui-surface);color:var(--ui-accent)}
  html[data-theme] body .table-wrap .row-actions .deactivate-action {color:#9a5a08}
  html[data-theme] body .quick-actions {background:var(--ui-raised);border-color:var(--ui-line);flex-wrap:wrap}
  html[data-theme] body .panel-note,html[data-theme] body .panel-footer {font-size:13px;line-height:1.6}
  html[data-theme="dark"] body :is(.pricing-card,.pricing-free-first,.res-featured,.res-guide-card,.res-reference-panel,.res-article,.res-article-aside,.res-faqs,.res-pack-callout,.legal-article,.legal-preferences,.legal-hub-group,.auth-layout,.auth-form-panel,.metric,.panel,.form-panel,.filters,.table-wrap) {background-color:var(--ui-surface);color:var(--ui-text);border-color:var(--ui-line)}
  html[data-theme="dark"] body :is(.pricing-card header,.pricing-card .pricing-price,.res-card-top) {background-color:transparent}
  html[data-theme="dark"] body :is(.pricing-card h2,.pricing-price strong,.res-section-heading h2,.res-guide-card h3,.res-featured h3,.page-heading h1,.panel h2,.auth-form-panel h1) {color:var(--ui-text)}
  html[data-theme="dark"] body .table-wrap .row-actions .deactivate-action {color:#f4c47e}
  html[data-theme="dark"] body.site-wallpaper {background:var(--ui-page)}
  html[data-theme="dark"] body .site-footer {background:#131d29}
  html[data-theme="dark"] body .site-footer :is(p,a) {color:#c0cddd}
  html[data-theme="light"] body.typing-session {background:#eef2f7}
  html[data-theme="light"] body.typing-session .typing-passage {background:#fff;color:#203047;border-color:#b7c8dc}
  html[data-theme="light"] body.typing-session .typing-workarea textarea {background:#f8fbff;color:#203047;border-color:#7d96b3}
  html[data-theme="light"] body.typing-session :is(.typing-stats,.finger-panel) {background:#e7edf5;border-color:#b7c8dc}
  html[data-theme] body.typing-session .workspace-controls :is(button,a) {min-height:44px;font-size:13px;padding:8px 12px}
  html[data-theme] body.typing-session .typing-stats span,body.typing-session .typing-workarea label,body.typing-session #typing-status {font-size:13px;line-height:1.5}
  html[data-theme] body.typing-session .finger {font-size:11px}
  html[data-theme] body.typing-session .typing-passage,body.typing-session .typing-workarea textarea {font-family:ui-monospace,monospace}
  @media(max-width:600px) {
    html[data-theme] body .res-featured-grid,html[data-theme] body .res-guide-grid,html[data-theme] body .res-download-grid {grid-template-columns:minmax(0,1fr);gap:16px}
    html[data-theme] body .res-featured {padding:22px}
    html[data-theme] body .res-featured h3 {font-size:19px}
    html[data-theme] body .res-article section p {font-size:16px}
    html[data-theme] body .res-featured .res-category-label {font-size:13px}
    html[data-theme] body .legal-actions>* {flex:1 1 100%}
    html[data-theme] body .metrics-secondary .metrics {grid-template-columns:repeat(2,minmax(0,1fr))}
    html[data-theme] body .metric {padding:16px}
    html[data-theme] body .workspace main {padding-inline:16px}
    html[data-theme] body #site-settings .settings-control-row {align-items:flex-start;gap:12px}
    html[data-theme] body #site-settings select {width:104px}
    html[data-theme] body .auth-footer nav {gap:12px 18px}
    html[data-theme] body.typing-session .workspace-controls {gap:5px;width:100%}
    html[data-theme] body.typing-session .workspace-controls :is(button,a) {padding-inline:8px;font-size:13px;flex:1}
    html[data-theme] body.typing-session .hands {gap:8px;padding-top:20px}
    html[data-theme] body.typing-session .finger {font-size:10px;width:30px}
    html[data-theme] body.typing-session .thumb {width:38px}
    html[data-theme] body.typing-session .hand {gap:2px}
  }
  @media(max-height:600px) {
    html[data-theme] body.typing-session .hands {display:none}
    html[data-theme] body.typing-session .finger-panel {padding:4px 8px}
    html[data-theme] body.typing-session .finger-panel p {margin:0;line-height:1.4}
    html[data-theme] body.typing-session .typing-stats {padding-block:4px}
    html[data-theme] body.typing-session .typing-window {padding-block:4px;gap:6px}
  }
  @media(max-width:360px) {
    html[data-theme] body.typing-session .hands {gap:6px}
    html[data-theme] body.typing-session .finger {width:26px;letter-spacing:-.25px}
    html[data-theme] body.typing-session .thumb {width:34px}
    html[data-theme] body.typing-session .typing-stats span {font-size:12px}
    html[data-theme] body #site-settings .settings-heading {padding:20px 16px}
    html[data-theme] body #site-settings .settings-control-row {flex-wrap:wrap}
    html[data-theme] body #site-settings .settings-select-wrap {margin-left:auto}
  }
  @media(prefers-reduced-motion:reduce) {
    html {scroll-behavior:auto}
    html[data-theme] body *,html[data-theme] body *::before,html[data-theme] body *::after {transition:none;animation:none}
  }
}

/* Menu-page intros only: a quiet sage surface, independent of the homepage hero. */
@media screen {
  html[data-theme] body :is(.practice-intro,.stats-hero,.test-hero,.exam-header,.journey-hero,.res-hero,.pricing-hero,.legal-header,.practice-section-heading) {
    --intro-bg:#edf3ef;
    --intro-text:#23382f;
    --intro-muted:#4b6257;
    --intro-accent:#32634d;
    --intro-border:#d1ded5;
    background:var(--intro-bg)!important;
    border-color:var(--intro-border)!important;
    color:var(--intro-text)!important;
  }
  html[data-theme="dark"] body :is(.practice-intro,.stats-hero,.test-hero,.exam-header,.journey-hero,.res-hero,.pricing-hero,.legal-header,.practice-section-heading) {
    --intro-bg:#1c2926;
    --intro-text:#e8f1ec;
    --intro-muted:#b9cbc1;
    --intro-accent:#a5d5b9;
    --intro-border:#3d554b;
  }
  html[data-theme] body :is(.practice-intro,.stats-hero,.test-hero,.exam-header,.journey-hero,.res-hero,.pricing-hero,.legal-header) :is(h1,h2,h3,p,li,span,strong,small) {
    color:var(--intro-text)!important;
  }
  html[data-theme] body :is(.practice-intro,.stats-hero,.test-hero,.exam-header,.journey-hero,.res-hero,.pricing-hero,.legal-header) :is(p,li,small) {
    color:var(--intro-muted)!important;
  }
  html[data-theme] body :is(.practice-intro,.stats-hero,.test-hero,.exam-header,.journey-hero,.res-hero,.pricing-hero,.legal-header) :is(.practice-intro-eyebrow,.stats-eyebrow,.test-eyebrow,.exam-eyebrow,.journey-eyebrow,.res-eyebrow,.pricing-eyebrow,.legal-eyebrow),
  html[data-theme] body :is(.stats-hero-streak,.journey-hero-note) strong {
    color:var(--intro-accent,var(--ui-accent))!important;
  }
  html[data-theme] body .practice-intro .practice-section-heading {background:transparent!important;border-color:transparent!important}
}