/* Shared visual theme: testing logic and page-specific layout stay independent.
   One 1194px work surface; the help grid is (1194 - 48) / 2 = 573px.
   Key geometry and responsive scale are owned by keyboard-core.js. */
:root {
  --bg: #fafaf9;
  --bg-soft: #eeefed;
  --surface: #ffffff;
  --ink: #202321;
  --ink-muted: #606661;
  --line: #e3e6e2;
  --line-strong: #d4d9d3;
  --key: #ffffff;
  --key-front: #d6dbd5;
  --active: #202321;
  --active-ink: #ffffff;
  --accent: #2f7d68;
  --radius: 6px;
}

html { background: var(--bg); }
body::before { content: none; }

.site-nav {
  width: min(100%, 1238px);
  min-height: 64px;
  border: 0;
}
.site-nav__mark { background: var(--ink); }
.site-nav__links { gap: 24px; }
.site-nav__link { display: inline-flex; align-items: center; min-height: 44px; }
.site-nav__link.is-current { border-color: var(--ink); }

body > main { padding-top: 24px; padding-bottom: 24px; }
main h1, main > .text-center h1 {
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -.035em;
  margin-bottom: 12px;
}
.hero-hint { font-size: 15px; line-height: 1.6; }
main > .tabs {
  margin: 20px auto 12px;
  width: 236px;
  background: var(--bg-soft);
  border: 0;
  border-radius: 8px;
  box-shadow: none;
}
.tabs .tab-link { border-radius: 6px; min-height: 44px; font-size: 14px; font-weight: 600; }
.tabs .tab-link.current { background: var(--ink); box-shadow: none; }
.tab-content.current { animation: none; }

.pressed-keys { min-height: 44px; margin-bottom: 8px; }
.pressed-keys__meta { font-size: 12px; font-weight: 500; }
.pressed-keys__item {
  border-radius: 4px;
  background: var(--ink);
  border-color: var(--ink);
  color: var(--active-ink);
  box-shadow: none;
}
.keyboard {
  background: var(--bg-soft);
  border-color: var(--line);
  border-radius: 12px;
  box-shadow: none;
}
.key {
  background: var(--key);
  border-color: var(--line-strong);
  border-bottom-width: 3px;
  box-shadow: none;
  color: var(--ink);
  font-weight: 600;
  transition: transform 70ms ease;
}
.key.is-tested:not(.press) {
  background: #e2eee7;
  border-color: #a4c4b3;
  color: #245742;
}
.key.press {
  background: var(--active);
  border-color: var(--active);
  color: var(--active-ink);
  box-shadow: none;
  transform: translateY(2px);
}

.additional-tests { padding: 16px 0; gap: 8px 16px; }
.additional-tests span { font-size: 12px; color: var(--ink-muted); }
.additional-tests a { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; text-underline-offset: 4px; }
section.page-help {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 36px 48px;
  margin: 40px auto 32px;
  padding: 0;
}
section.page-help .container-limit { width: 100%; margin: 0; padding: 0; }
section.page-help .container-limit:last-child { grid-column: 1 / -1; }
.page-help h2 { margin-bottom: 12px; font-size: 18px; font-weight: 650; letter-spacing: -.025em; line-height: 1.4; }
.page-help .fdesc { font-size: 15px; line-height: 1.8; color: var(--ink-muted); }
.page-help .flist { padding-left: 1.25em; }
.page-help .flist li { margin-bottom: 6px; }
.tool-links { gap: 24px; }
.tool-link-card { background: #f0f2ef; border: 0; border-radius: 8px; padding: 18px 20px; box-shadow: none; }
.tool-link-card:hover { background: #e7ebe5; transform: none; }
.tool-link-card__title { font-size: 15px; font-weight: 600; }
.tool-link-card__title::after { color: inherit; }
.tool-link-card__desc { font-size: 13px; }
.site-footer { padding: 24px 16px 40px; color: var(--ink-muted); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }

/* Other tools use the same quiet surfaces without changing hidden/tab states. */
.test-stage { margin-top: 24px; }
.inspection { border-color: var(--line); border-radius: 8px; background: var(--surface); }
main > .inspection { margin-top: 24px; }
.inspection h2, .container-limit h2 { font-size: 18px; font-weight: 650; line-height: 1.4; }
.inspection h3 { font-size: 16px; line-height: 1.5; }
.container-limit .fdesc { font-size: 15px; color: var(--ink-muted); }
.inspection p, .inspection li { overflow-wrap: anywhere; }
.btn, .time-chip, select, .test-toolbar input { min-height: 40px; border-radius: 6px; font-weight: 500; }
.btn { background: var(--surface); border-color: var(--line-strong); }
.btn:hover { background: var(--bg-soft); transform: none; }
.btn--primary, .btn--primary:hover, .mode-switch button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--active-ink); }
.time-chip.is-active { background: var(--ink); color: var(--active-ink); border-color: var(--ink); }
.stat { background: var(--bg-soft); border: 0; border-radius: 8px; padding: 14px 20px; }
.stat b { font-size: 28px; font-weight: 600; color: var(--ink); }
.stat span { font-size: 12px; font-weight: 500; }
.typing-passage { background: var(--surface); border-radius: 8px; box-shadow: none; }
.typing-passage .ch.done { color: var(--ink-muted); }
.typing-input { background: var(--surface); border-radius: 6px; }
.typing-input:focus { outline: 2px solid var(--ink); outline-offset: 2px; border-color: var(--ink); box-shadow: none; }
.result-card { background: var(--bg-soft); border: 0; border-radius: 8px; }
.result-card__score { color: var(--ink); font-weight: 600; }
.cps-target { background: var(--ink); box-shadow: none; }
.cps-target__count { font-size: 36px; font-weight: 600; }
.cps-target__label { color: var(--active-ink); font-weight: 500; }
.dblclick-target { border-color: var(--line-strong); border-radius: 8px; }
.mouse-test { background: var(--bg-soft); border-radius: 8px; box-shadow: none; }
.mouse-button { background: var(--surface); box-shadow: none; }
.mouse-button.is-active, .mouse-button.is-wheel-up, .mouse-button.is-wheel-down { background: var(--ink); color: var(--active-ink); box-shadow: none; }
.mouse-diagnostic-area { background: var(--bg-soft); border: 1px solid var(--line-strong); border-radius: 8px; }
.mouse-diagnostic-area.is-holding { background: #e2eee7; border-color: var(--accent); }
.mouse-diagnostic-counts > div { background: var(--bg-soft); border: 0; border-radius: 6px; }
.mouse-diagnostic-counts dt { font-size: 13px; color: var(--ink-muted); }
.mouse-diagnostic-counts dd { font-size: 26px; }
details.page-help { margin-top: 32px; padding: 0; }
details.page-help > summary { min-height: 44px; font-size: 14px; color: var(--ink-muted); }
details.page-help .container-limit { margin: 24px 0; padding: 0; }
.test-note { color: var(--ink-muted); }
main a:not(.moagul-banner__link) { color: var(--ink); text-underline-offset: 3px; }

@media (max-width: 760px) {
  .site-nav { padding: 8px 16px; min-height: 60px; gap: 12px; }
  .site-nav__links { gap: 12px; }
  .site-nav__link { font-size: 12px; }
  body > main { padding: 24px 16px; }
  main > .tabs { margin: 20px auto 12px; }
  .keyboard { border-radius: 8px; }
  section.page-help { gap: 28px 24px; margin-top: 32px; }
  .tool-links { gap: 12px; }
  .inspection { padding: 16px; }
  .btn, .time-chip, select, .test-toolbar input { min-height: 44px; }
  .stat { min-width: 84px; padding: 12px; }
  .stat b { font-size: 24px; }
  .typing-passage { padding: 18px; }
}
@media (max-width: 600px) {
  section.page-help { grid-template-columns: minmax(0, 1fr); }
  .page-help h2 { font-size: 17px; }
  .hero-hint { font-size: 14px; }
  .mouse-diagnostic-counts > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  .key, .tabs .tab-link, .tool-link-card { transition: none; }
}