/* SetupBench design system.
   Dark "Night Arena" is the default; [data-theme="light"] is the "Daylight" theme. Every colour is a token. */
@font-face { font-family: "Sora"; src: url(../fonts/sora.woff2) format("woff2"); font-weight: 100 800; font-display: swap; }
@font-face { font-family: "Onest"; src: url(../fonts/onest.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url(../fonts/jbmono.woff2) format("woff2"); font-weight: 100 800; font-display: swap; }

:root {
  --bg: #0a0d12;
  --surface: #121821;
  --surface-2: #19212c;
  --border: #232d39;
  --border-strong: #34404e;
  --text: #eef2f6;
  --text-2: #c3ccd6;
  --muted: #8d9aa9;
  --accent: #c8f031;
  --accent-ink: #11160a;
  --accent-text: #c8f031;
  --skill: #c8f031;
  --gear: #4cc9f0;
  --blue: #3b82f6;
  --red: #f05252;
  --amber: #f5a524;
  --good: #3ddc97;
  --tt-dim: #66737f;
  --shadow: 0 18px 50px rgba(0, 0, 0, .45);
  --radius: 16px;
  --display: "Sora", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --body: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #f4f6f3;
  --surface: #ffffff;
  --surface-2: #eef1ed;
  --border: #dfe5df;
  --border-strong: #c5cec6;
  --text: #101a15;
  --text-2: #2c3832;
  --muted: #5d6b63;
  --accent: #13a153;
  --accent-ink: #ffffff;
  --accent-text: #0b7f3e;
  --skill: #0d8a45;
  --gear: #2563eb;
  --blue: #2563eb;
  --red: #d92d20;
  --amber: #b45309;
  --good: #0d8a45;
  --tt-dim: #9aa69f;
  --shadow: 0 18px 50px rgba(16, 26, 21, .12);
  color-scheme: light;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent-text); }
img { max-width: 100%; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 16px; top: 8px; background: var(--surface); padding: 8px 12px; z-index: 10; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.ico { width: 22px; height: 22px; flex: none; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid var(--border); }
.header-row { display: flex; align-items: center; gap: 22px; min-height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font: 700 19px var(--display); letter-spacing: -.02em; flex-shrink: 0; }
.brand em { font-style: normal; color: var(--accent-text); }
.logo-mark { width: 30px; height: 30px; flex: none; }
.quick-nav { display: flex; gap: 2px; flex: 1; }
.quick-nav a { color: var(--muted); text-decoration: none; padding: 8px 12px; border-radius: 10px; white-space: nowrap; font-size: 15px; font-weight: 600; }
.quick-nav a:hover, .quick-nav a[aria-current="page"] { color: var(--text); background: var(--surface); }
.theme-toggle { margin-left: auto; display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; }
.theme-toggle:hover { border-color: var(--border-strong); }
.theme-toggle .ico { width: 20px; height: 20px; }
:root[data-theme="light"] .when-dark, :root:not([data-theme="light"]) .when-light { display: none; }
.menu { position: relative; }
.menu summary { list-style: none; cursor: pointer; font-weight: 700; font-size: 15px; height: 42px; display: flex; align-items: center; padding: 0 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); white-space: nowrap; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary::after { content: ""; width: 7px; height: 7px; margin-left: 10px; border: solid var(--muted); border-width: 0 2px 2px 0; transform: translateY(-2px) rotate(45deg); }
.menu[open] summary { border-color: var(--accent); }
.menu-panel { position: absolute; right: 0; top: calc(100% + 10px); z-index: 50; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; width: 560px; padding: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow); }
.menu-group { display: flex; flex-direction: column; gap: 2px; }
.menu-head { margin: 4px 0 6px 10px; font: 600 11.5px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.menu-panel a { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; padding: 6px 10px; border-radius: 10px; font-size: 14.5px; font-weight: 600; }
.menu-panel a:hover, .menu-panel a[aria-current="page"] { background: var(--surface-2); }
@media (max-width: 860px) { .quick-nav { display: none; } }
@media (max-width: 640px) {
  .header-row { gap: 10px; }
  .menu { position: static; }
  .menu-panel { position: absolute; left: 0; right: 0; top: 100%; width: auto; border-radius: 0 0 18px 18px; grid-template-columns: 1fr; max-height: calc(100vh - 70px); overflow-y: auto; }
  .menu summary { padding: 0 12px; }
}
@media (max-width: 380px) {
  .header-row { gap: 8px; }
  .theme-toggle { width: 38px; height: 38px; }
  .menu summary { height: 38px; padding: 0 10px; }
  .menu summary::after { display: none; }
}

/* Typography */
main.wrap { padding: 36px 20px 64px; } /* main also has .wrap, whose padding would otherwise win */
/* Keep content clear of a camera notch on pages that use the whole screen (viewport-fit=cover). */
.wrap, main.wrap { padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); }
h1, h2, h3 { font-family: var(--display); letter-spacing: -.025em; text-wrap: balance; }
h1 { font-size: clamp(30px, 5.4vw, 46px); font-weight: 750; line-height: 1.08; margin: 0 0 10px; display: flex; align-items: center; gap: 14px; }
h2 { font-size: 26px; font-weight: 700; margin: 44px 0 12px; line-height: 1.2; }
h3 { font-size: 19px; font-weight: 700; margin: 28px 0 8px; }
.lede { color: var(--muted); font-size: 18px; margin: 0 0 14px; max-width: 62ch; }
.eyebrow { margin: 0; font: 600 13px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text); }
.crumbs { display: flex; gap: 8px; align-items: center; font-size: 14px; font-weight: 600; color: var(--muted); margin: 0 0 14px; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--text); }

/* Icon tiles: skill tests use the accent, gear tests the second colour */
.tile { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; flex: none; }
.tile .ico { width: 23px; height: 23px; }
.tile.big { width: 48px; height: 48px; border-radius: 14px; }
.tile.big .ico { width: 26px; height: 26px; }
.tile.small { width: 30px; height: 30px; border-radius: 9px; }
.tile.small .ico { width: 18px; height: 18px; }
.tile.skill { color: var(--skill); background: color-mix(in srgb, var(--skill) 13%, transparent); }
.tile.gear { color: var(--gear); background: color-mix(in srgb, var(--gear) 13%, transparent); }
h1 .tile { width: 52px; height: 52px; }

/* Home */
.hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center; padding: 28px 0 40px; position: relative; isolation: isolate; }
.hero::before { content: ""; position: absolute; inset: -80px min(calc((1120px - 100vw) / 2 - 10px), -10px) auto; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); height: 520px; z-index: -1; pointer-events: none; background: radial-gradient(560px 260px at 72% 38%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 70%), radial-gradient(480px 240px at 18% 12%, color-mix(in srgb, var(--gear) 9%, transparent), transparent 70%); }
.hero h1 { display: block; font-size: clamp(38px, 5.6vw, 60px); line-height: 1.03; letter-spacing: -.04em; margin: 14px 0 18px; }
.hero .lede { font-size: 19px; max-width: 30em; margin-bottom: 26px; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 22px; }
.feats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.feat { display: flex; flex-direction: column; gap: 6px; padding: 20px; border-radius: 20px; background: var(--surface); border: 1px solid var(--border); color: var(--text); text-decoration: none; transition: transform .15s, border-color .15s; }
.feat:hover { transform: translateY(-2px); border-color: var(--accent); }
.feat b { font: 700 18px var(--display); letter-spacing: -.015em; margin-top: 10px; }
.feat small { color: var(--muted); font-size: 14px; line-height: 1.45; flex: 1; }
.feat-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; font: 600 13px var(--mono); color: var(--muted); }
.feat-meta span { display: inline-flex; align-items: center; gap: 6px; }
.feat-meta .ico { width: 15px; height: 15px; }
.feat-go { color: var(--accent-text); }
.home-group { padding-top: 34px; scroll-margin-top: 80px; }
.group-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-bottom: 16px; }
.group-head h2 { margin: 0; }
.group-head p { margin: 0; color: var(--muted); }
.rows { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.row { min-width: 0; display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); color: var(--text); text-decoration: none; transition: border-color .15s; }
.row:hover { border-color: var(--accent); }
.row-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.row-text b { font-weight: 700; font-size: 15.5px; }
.row-text small { color: var(--muted); font-size: 13px; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .go { width: 18px; height: 18px; color: var(--muted); }
.row:hover .go { color: var(--accent-text); }
.points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--border); }
.points h3 { margin: 0 0 6px; font-size: 17px; }
.points p { margin: 0; color: var(--muted); font-size: 15px; }
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 28px; padding-top: 8px; }
  .rows { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .points { grid-template-columns: 1fr; gap: 18px; }
}
@media (max-width: 600px) {
  .rows { grid-template-columns: minmax(0, 1fr); }
  .feats { gap: 10px; }
  .feat { padding: 16px; border-radius: 18px; }
  .feat small { display: none; }
  .hero h1 { font-size: 38px; }
}

/* Tool shell */
.tool { background: var(--surface); border: 1px solid var(--border); border-radius: 22px; padding: 20px; margin: 0 0 20px; box-shadow: 0 1px 0 color-mix(in srgb, var(--text) 4%, transparent) inset; }
.tool-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.tool-bar .spacer { flex: 1; }
.btn { appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font: 700 15px var(--body); padding: 10px 18px; border-radius: 12px; cursor: pointer; text-decoration: none; transition: border-color .15s, filter .15s; }
.btn:hover { border-color: var(--border-strong); }
.btn-primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn-primary:hover { filter: brightness(1.08); border-color: var(--accent); }
.btn:disabled { opacity: .5; cursor: default; }
.seg { display: inline-flex; flex-wrap: wrap; gap: 2px; background: var(--bg); padding: 4px; border-radius: 12px; border: 1px solid var(--border); }
.seg button { appearance: none; border: 0; background: transparent; color: var(--muted); font: 600 14px var(--body); padding: 7px 13px; border-radius: 9px; cursor: pointer; }
.seg button:hover { color: var(--text); }
.seg button[aria-pressed="true"] { background: color-mix(in srgb, var(--accent) 15%, var(--surface)); color: var(--text); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent); }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin: 14px 0 0; }
.stat { background: var(--bg); border: 1px solid var(--border); border-radius: 14px; padding: 12px 16px; }
.stat-label { color: var(--muted); font: 600 11.5px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.stat-value { font: 700 24px/1.3 var(--display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

.banner { border: 1px solid var(--amber); background: rgba(245, 165, 36, .1); color: var(--text); border-radius: 10px; padding: 10px 14px; margin: 0 0 14px; }
.banner[hidden] { display: none; }

/* Big click/tap zones */
.zone { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: 340px; border-radius: 12px; cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: manipulation; overflow: hidden; padding: 20px; -webkit-tap-highlight-color: transparent; }
.zone-title { font-family: var(--display); letter-spacing: -.03em; font-size: clamp(30px, 7vw, 54px); font-weight: 750; line-height: 1.1; font-variant-numeric: tabular-nums; }
.zone-sub { font-size: 17px; margin-top: 10px; opacity: .9; }

/* Coloured and dark play areas keep light text in both themes. */
.rt-zone, .aim-stage, .cam-stage { color: #eef2f6; --text: #eef2f6; --text-2: #c3ccd6; --muted: #a3afbd; --border: #34404e; }
.rt-zone[data-state="idle"], .rt-zone[data-state="result"], .rt-zone[data-state="done"] { background: #1d4ed8; }
.rt-zone[data-state="wait"] { background: #b42318; }
.rt-zone[data-state="go"] { background: #0b7a3b; }
.rt-zone[data-state="early"] { background: #92400e; }
/* Sound mode: the box looks the same while waiting and when the beep plays, so only your ears can react. */
.rt-zone[data-mode="sound"][data-state="wait"], .rt-zone[data-state="go-sound"] { background: #334155; }
.rt-zone[data-mode="choice"][data-state="wait"] { background: #334155; }
.rt-zone[data-state="nogo"] { background: #7e22ce; }
.rt-bars { display: flex; gap: 8px; align-items: flex-end; height: 120px; margin: 14px 0 4px; }
.rt-bar { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; font-size: 12px; font-variant-numeric: tabular-nums; }
.rt-bar span { width: 100%; max-width: 44px; background: var(--blue); border-radius: 6px 6px 2px 2px; }
.rt-bar.best span { background: var(--accent); }
.rt-bar b { order: -1; font-weight: 600; margin-bottom: 4px; }
.rt-bar small { color: var(--muted); margin-top: 4px; }

.cps-zone { background: var(--surface-2); border: 2px dashed var(--border); }
.cps-zone[data-state="running"] { border-color: var(--accent); border-style: solid; }
.cps-zone[data-state="done"] { border-color: var(--blue); border-style: solid; }
.ripple { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--accent); pointer-events: none; animation: ripple .45s ease-out forwards; }
@keyframes ripple { to { transform: scale(5); opacity: 0; } }

.result { margin-top: 16px; padding: 18px; border-radius: 18px; background: var(--bg); border: 1px solid var(--border); }
.result[hidden] { display: none; }
.result-score { font: 750 40px/1.1 var(--display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.result-label { color: var(--accent-text); font-weight: 700; }
.share-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
/* Result cards: a divider above the actions so the buttons read as one footer. */
.result > .share-row, .result > :not(.share-row, .tt-cert) + [id$="-share"] { border-top: 1px solid var(--border); padding-top: 16px; margin-top: 16px; }
.result [id$="-share"] .share-row { margin-top: 8px; }
.result > :not(.share-row, .tt-cert) + [id$="-share"] .share-row { margin-top: 0; }
.share-msg:empty { display: none; }
/* Phones: every control row and result footer becomes an even grid. */
@media (max-width: 600px) {
  /* Short buttons pair up; a long one takes the whole row instead of wrapping onto two lines. */
  .share-row > .btn, .tool-bar > .btn { flex: 1 1 auto; min-width: calc(50% - 5px); white-space: nowrap; justify-content: center; text-align: center; }
  .share-row > .btn.wide { flex-basis: 100%; }
  .hide-sm { display: none; }
  .tool-bar .spacer { display: none; }
  .tool-bar > .seg, .tool-bar > .select, .tool-bar > .muted { flex: 1 1 100%; }
  .tool-bar > .seg button { flex: 1 1 auto; white-space: nowrap; }
  .tool-bar > label.inline { flex: 1 1 calc(50% - 5px); }
  .tool-bar > label.inline:has(input[type="range"], select), .tool-bar > label:not(.inline) { flex: 1 1 100%; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats > .stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.share-msg { color: var(--muted); font-size: 14px; margin-top: 8px; min-height: 1.4em; }

.attempts { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; padding: 0; list-style: none; }
.attempts li { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 4px 10px; font-variant-numeric: tabular-nums; font-size: 14px; }

/* Mouse test */
.mouse-area { display: grid; grid-template-columns: 180px 1fr; gap: 20px; align-items: start; padding: 18px; border-radius: 12px; background: var(--surface-2); border: 2px dashed var(--border); user-select: none; -webkit-user-select: none; cursor: crosshair; min-height: 320px; }
@media (max-width: 640px) { .mouse-area { grid-template-columns: 1fr; justify-items: center; } }
.mouse-svg { width: 160px; height: auto; }
.mouse-svg .part { fill: var(--surface-2); stroke: var(--border-strong); stroke-width: 2; transition: fill .05s; }
.mouse-svg .part.on { fill: var(--accent); }
.mouse-svg .part.bad { fill: var(--red); }
.btn-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: 15px; }
.btn-table th, .btn-table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--border); }
.btn-table th { color: var(--muted); font-weight: 600; font-size: 13px; }
.btn-table td.bad { color: var(--red); font-weight: 700; }
.verdict { margin-top: 12px; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg); }
.verdict.ok { border-color: var(--accent); }
.verdict.bad { border-color: var(--red); }
.log { max-height: 180px; overflow: auto; font: 13px/1.5 var(--mono); background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; margin-top: 12px; }
.log .bad { color: var(--red); }
label.inline { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 14px; }
input[type="range"] { accent-color: var(--accent); min-height: 32px; }
input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--accent); }
label.inline:has(input[type="checkbox"]) { min-height: 32px; cursor: pointer; }

/* Refresh rate */
.hz-big { font-family: var(--display); letter-spacing: -.04em; font-size: clamp(48px, 12vw, 84px); font-weight: 750; line-height: 1; font-variant-numeric: tabular-nums; }
.hz-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 24px; }
.graph { width: 100%; height: 140px; display: block; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; margin-top: 14px; }
.ufo-track { position: relative; height: 72px; background: #000; border-radius: 10px; margin-top: 14px; overflow: hidden; }
.ufo { position: absolute; top: 16px; left: 0; width: 40px; height: 40px; will-change: transform; }

/* Dead pixel */
.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch { width: 44px; height: 44px; border-radius: 10px; border: 2px solid var(--border); cursor: pointer; }
.swatch:hover { border-color: var(--text); }
.dp-stage { position: fixed; inset: 0; z-index: 1000; cursor: none; display: none; }
.dp-stage.open { display: block; }
.dp-hint { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); background: rgba(0, 0, 0, .75); color: #fff; padding: 8px 14px; border-radius: 10px; font-size: 14px; transition: opacity .6s; pointer-events: none; white-space: nowrap; }
.dp-hint.fade { opacity: 0; }
.dp-close { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, .7); color: #fff; font-size: 20px; cursor: pointer; transition: opacity .6s; z-index: 1; }
.dp-close.fade { opacity: 0; }

/* Gamepad */
.gp-empty { text-align: center; padding: 48px 16px; border: 2px dashed var(--border); border-radius: 12px; color: var(--muted); }
.gp-id { font-weight: 700; word-break: break-word; }
.gp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-top: 14px; }
.gp-panel { background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 12px; }
.gp-panel h3, .gp-label { margin: 0 0 8px; font-size: 15px; font-weight: 700; color: var(--muted); }
.gp-sticks { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.gp-stick { text-align: center; font-variant-numeric: tabular-nums; font-size: 13px; color: var(--muted); }
.gp-stick canvas { width: 150px; height: 150px; display: block; }
.gp-buttons { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; }
.gp-btn { position: relative; overflow: hidden; border: 1px solid var(--border); border-radius: 8px; padding: 6px 8px; font-size: 13px; text-align: center; background: var(--surface-2); }
.gp-btn .fill { position: absolute; inset: auto 0 0 0; height: 0; background: var(--accent); opacity: .35; }
.gp-btn.on { border-color: var(--accent); color: var(--accent-text); font-weight: 700; }
.gp-btn span { position: relative; }
.bar { height: 10px; background: var(--surface-2); border-radius: 6px; overflow: hidden; margin: 4px 0 10px; }
.bar > div { height: 100%; width: 0; background: var(--accent); }
.bar.center > div { background: var(--blue); }

/* Article */
.article { max-width: 72ch; margin-top: 48px; padding-top: 8px; }
.article h2:first-child { margin-top: 0; }
.article p, .article li { color: var(--text-2); }
.article a { color: var(--text); text-decoration-line: underline; text-decoration-color: color-mix(in srgb, var(--text) 28%, transparent); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color .15s, text-decoration-color .15s; }
.article a:hover { color: var(--accent-text); text-decoration-color: currentColor; }
/* Home page: the explainer as cards rather than a wall of text */
.home-about { max-width: none; margin-top: 64px; }
.home-about > h2 { margin: 0 0 18px; }
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.duo + .duo { margin-top: 16px; }
.info-card { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 24px 26px; }
.info-card h3 { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; font-size: 19px; }
.info-card p { margin: 0; font-size: 15.5px; line-height: 1.75; }
.faq .info-card { background: transparent; }
.faq .info-card h3 { font-size: 17px; }
@media (max-width: 760px) { .duo { grid-template-columns: 1fr; } .info-card { padding: 20px; } }
.article table { border-collapse: collapse; width: 100%; margin: 12px 0; font-size: 15px; }
.article th, .article td { border-bottom: 1px solid var(--border); padding: 8px 10px; text-align: left; }
.article th { color: var(--muted); }
.faq details { border: 1px solid var(--border); border-radius: 14px; padding: 0 16px; margin: 8px 0; background: var(--surface); }
.faq summary { cursor: pointer; font-weight: 600; padding: 12px 0; }
.faq details p { margin-top: 0; }
.note { border-left: 3px solid var(--amber); padding: 4px 0 4px 14px; color: var(--muted); }

.ad { margin: 24px 0; min-height: 100px; }

/* Footer */
.site-footer { border-top: 1px solid var(--border); background: var(--surface); padding: 40px 0 16px; margin-top: 24px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr .8fr; gap: 28px; }
.footer-grid .brand { margin-bottom: 10px; }
.footer-base { margin-top: 20px; }
.footer-base a { color: var(--text-2); text-decoration-color: color-mix(in srgb, var(--text) 28%, transparent); text-underline-offset: 3px; }
.footer-base a:hover { color: var(--accent-text); }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-brand { font-weight: 700; margin: 0 0 6px; }
.footer-head { margin: 0 0 8px; font: 600 11.5px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.footer-links { list-style: none; margin: 0; padding: 0; font-size: 14px; line-height: 2; }
.footer-links a { color: var(--text); text-decoration: none; }
.footer-links a:hover { color: var(--accent-text); }

@media (prefers-reduced-motion: reduce) {
  .ripple { display: none; }
  .feat, .row { transition: none; }
  html { scroll-behavior: auto; }
}

/* Aim trainer */
.aim-stage { position: relative; height: clamp(380px, 62vh, 580px); border-radius: 12px; overflow: hidden; background: #0a0e13; touch-action: none; user-select: none; -webkit-user-select: none; }
.aim-stage:fullscreen { height: 100vh; border-radius: 0; }
.aim-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: crosshair; display: block; }
.aim-hud { position: absolute; top: 10px; left: 12px; right: 12px; display: flex; flex-wrap: wrap; gap: 6px 18px; pointer-events: none; color: var(--muted); font-size: 14px; font-variant-numeric: tabular-nums; }
.aim-hud b { color: var(--text); font-size: 16px; }
.aim-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 20px; text-align: center; background: rgba(10, 14, 19, .84); }
.aim-overlay[hidden] { display: none; }
.aim-overlay p { max-width: 46ch; margin: 0; font-size: 17px; line-height: 1.5; min-height: 4.5em; display: flex; align-items: center; justify-content: center; } /* room for 3 lines, so Start never moves */
.aim-overlay .btn { font-size: 18px; padding: 12px 28px; }

/* Keyboard tester */
.kb-wrap { overflow-x: auto; padding-bottom: 4px; }
.kb { display: grid; min-width: 720px; container-type: inline-size; aspect-ratio: 23 / 6.5; } /* reserved before the script draws it */
.kb-key { font-family: var(--body); margin: 2px; display: flex; align-items: center; justify-content: center; text-align: center; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-2); color: var(--muted); font-size: clamp(9px, 1.15cqw, 14px); font-weight: 600; line-height: 1.1; overflow: hidden; white-space: nowrap; transition: background .08s; }
.kb-key.done { background: color-mix(in srgb, var(--good) 16%, transparent); border-color: color-mix(in srgb, var(--good) 50%, transparent); color: var(--text); }
.kb-key.bad { background: color-mix(in srgb, var(--red) 32%, transparent); border-color: var(--red); color: var(--text); }
.kb-key.held { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.kb-extra { margin: 10px 0 0; }
.kb-chip { display: inline-block; font: 12px var(--mono); padding: 2px 8px; margin: 2px; border-radius: 6px; border: 1px solid color-mix(in srgb, var(--good) 50%, transparent); background: color-mix(in srgb, var(--good) 16%, transparent); }
.kb-chip.bad { border-color: var(--red); background: color-mix(in srgb, var(--red) 28%, transparent); }
.kb-chip.held { background: var(--accent); color: var(--accent-ink); }
#kb-section:fullscreen { overflow: auto; padding: 24px; border-radius: 0; }

@media (hover: none) and (pointer: coarse) {
  .fine-only { display: none !important; }
}

/* Typing test */
.tt-live { display: flex; gap: 24px; font: 700 20px var(--display); color: var(--accent-text); font-variant-numeric: tabular-nums; margin: 0 0 8px; min-height: 30px; }
.tt-box { --tt-fs: 24px; --tt-lh: 36px; --tt-gap: 6px; position: relative; padding: 16px 20px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); cursor: text; }
@media (max-width: 640px) { .tt-box { --tt-fs: 19px; --tt-lh: 30px; padding: 12px 14px; } }
.tt-box.focused { border-color: var(--accent); }
.tt-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; z-index: 2; border: 0; padding: 0; font-size: 16px; cursor: text; }
.tt-viewport { height: calc(3 * (var(--tt-lh) + var(--tt-gap))); overflow: hidden; }
.tt-words { position: relative; display: flex; flex-wrap: wrap; font: var(--tt-fs) / var(--tt-lh) var(--mono); color: var(--tt-dim); transition: transform .12s ease; user-select: none; -webkit-user-select: none; }
.tt-word { margin: 0 0.6em var(--tt-gap) 0; height: var(--tt-lh); border-bottom: 2px solid transparent; }
.tt-word.error { border-bottom-color: color-mix(in srgb, var(--red) 70%, transparent); }
.tt-word .ok { color: var(--text); }
.tt-word .bad { color: var(--red); }
.tt-word .extra { color: var(--red); opacity: .75; text-decoration: line-through; }
.tt-word .cur { box-shadow: inset 2px 0 0 var(--accent); }
.tt-word .cur-end { box-shadow: inset -2px 0 0 var(--accent); }
.tt-box.focused:not(.running) .cur, .tt-box.focused:not(.running) .cur-end { animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { box-shadow: none; } }
.tt-focus { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: color-mix(in srgb, var(--bg) 80%, transparent); color: var(--text); font-weight: 600; pointer-events: none; }
.tt-box.focused .tt-focus { display: none; }
.tt-caps { color: var(--amber); font-weight: 700; margin: 8px 0 0; }
.tt-chart { width: 100%; height: 180px; display: block; margin-top: 14px; }
.tt-chars { font-size: 18px; }
.tt-misses { margin: 10px 0 0; }
.tt-source { margin: 10px 0 0; font-style: italic; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .tt-words { transition: none; } }

/* Mic and webcam tests */
.select { appearance: auto; background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; font: inherit; font-size: 14px; max-width: 100%; }
.mic-name { font-weight: 700; margin: 14px 0 8px; word-break: break-word; }
.meter { position: relative; height: 22px; border-radius: 8px; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 14%, var(--bg)) 0%, color-mix(in srgb, var(--accent) 14%, var(--bg)) 70%, color-mix(in srgb, var(--amber) 18%, var(--bg)) 70%, color-mix(in srgb, var(--amber) 18%, var(--bg)) 90%, color-mix(in srgb, var(--red) 18%, var(--bg)) 90%); overflow: hidden; border: 1px solid var(--border); }
.meter-fill { position: absolute; inset: 0; background: linear-gradient(90deg, var(--accent) 0%, var(--accent) 70%, var(--amber) 85%, var(--red) 100%); clip-path: inset(0 100% 0 0); }
.meter-peak { position: absolute; top: 0; bottom: 0; width: 3px; margin-left: -1px; background: var(--text); }
.meter.clip { border-color: var(--red); box-shadow: 0 0 0 2px color-mix(in srgb, var(--red) 50%, transparent); }
.meter-scale { display: flex; justify-content: space-between; color: var(--muted); font-size: 12px; margin-top: 4px; font-variant-numeric: tabular-nums; }
#mic-playback audio { width: 100%; margin-top: 12px; }
.cam-stage { position: relative; margin-top: 14px; border-radius: 12px; overflow: hidden; background: #000; aspect-ratio: 16 / 9; }
.cam-stage:fullscreen { border-radius: 0; aspect-ratio: auto; }
.cam-stage video { width: 100%; height: 100%; object-fit: contain; display: block; }
.cam-stage video.mirrored { transform: scaleX(-1); }
.cam-caps { margin-top: 14px; }
.cam-caps th { width: 40%; }
.cam-photo img { width: 100%; max-width: 480px; border-radius: 10px; margin-top: 14px; display: block; }

/* Wide article tables scroll inside themselves on phones instead of widening the page. */
@media (max-width: 640px) {
  .article table { display: block; overflow-x: auto; font-size: 14px; }
  .article th, .article td { padding: 6px 8px; min-width: 90px; }
}
.mouse-area > div { min-width: 0; max-width: 100%; overflow-x: auto; }
@media (max-width: 400px) {
  .tool { padding: 12px; }
  .mouse-area { padding: 10px; }
  .btn-table { font-size: 13px; }
  .btn-table th, .btn-table td { padding: 5px 4px; }
}

/* Refresh rate: verdict, lanes, details */
.hz-unit { font-size: .4em; }
.hz-badge { display: inline-block; vertical-align: middle; font-size: 14px; font-weight: 700; padding: 3px 10px; border-radius: 999px; margin-left: 6px; }
.hz-badge.ok { background: color-mix(in srgb, var(--good) 16%, transparent); color: var(--good); }
.hz-badge.bad { background: color-mix(in srgb, var(--red) 18%, transparent); color: var(--red); }
.hz-row { justify-content: space-between; }
.hz-rated { display: flex; flex-direction: column; gap: 6px; color: var(--muted); font-size: 14px; }
#hz-verdict { margin-top: 12px; }
.ufo-lanes { display: grid; gap: 6px; }
.ufo-lane { position: relative; height: 56px; margin-top: 0; }
.ufo-lane .ufo { top: 8px; }
.ufo-lane::after { content: attr(data-label); position: absolute; right: 10px; top: 6px; font-size: 12px; color: #93a1b3; }
.hz-details { margin-top: 14px; }
.hz-details summary { cursor: pointer; font-weight: 600; color: var(--muted); padding: 8px 0; }

/* Gamepad layout: sticks side by side across the top, raw axes tucked away */
.gp-wide { grid-column: 1 / -1; }
.gp-sticks { justify-content: space-around; }
.gp-stick-name { color: var(--text); font-weight: 600; }
.gp-circ { color: var(--amber); min-height: 1.4em; max-width: 220px; margin: 2px auto 0; }
.gp-raw { margin-top: 14px; }
.gp-raw summary { cursor: pointer; font-weight: 600; color: var(--muted); }

.tt-stat small { font: 600 13px var(--body); color: var(--muted); }

/* Dead pixel: marking, fixer */
.dp-markbtn { position: absolute; top: 12px; right: 64px; height: 44px; padding: 0 16px; border-radius: 22px; border: 0; background: rgba(0, 0, 0, .7); color: #fff; font: 600 15px system-ui, sans-serif; cursor: pointer; transition: opacity .6s; z-index: 1; }
.dp-markbtn[aria-pressed="true"] { background: var(--amber); color: #111; }
.dp-markbtn.fade { opacity: 0; }
.dp-stage.marking { cursor: crosshair; }
.dp-marker { position: absolute; width: 24px; height: 24px; margin: -12px 0 0 -12px; border: 2px solid #f5a524; border-radius: 50%; box-shadow: 0 0 0 2px rgba(0, 0, 0, .6); pointer-events: none; }
.dp-marks { margin-top: 16px; padding: 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); }
.dp-marks ol { margin: 0 0 8px; padding-left: 22px; font-variant-numeric: tabular-nums; }
.dp-fixer { margin-top: 16px; border: 1px solid var(--border); border-radius: 12px; padding: 0 14px 10px; background: var(--bg); }
.dp-fixer summary { cursor: pointer; font-weight: 700; padding: 12px 0; }
.fx-layer { position: fixed; inset: 0; z-index: 1001; pointer-events: none; }
.fx-patch { position: absolute; left: calc(50% - 50px); top: calc(50% - 50px); width: 100px; height: 100px; pointer-events: auto; cursor: move; touch-action: none; outline: 2px solid #555; }
.fx-stop { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); pointer-events: auto; }

.linkish { appearance: none; border: 0; background: none; padding: 0; font: inherit; font-size: 18px; color: var(--accent-text); text-decoration: underline; cursor: pointer; }

/* Webcam: rule-of-thirds grid and recordings */
.cam-gridlines { position: absolute; inset: 0; pointer-events: none; display: none; background:
  linear-gradient(90deg, transparent calc(33.33% - 1px), rgba(255,255,255,.5) calc(33.33% - 1px), rgba(255,255,255,.5) 33.33%, transparent 33.33%, transparent calc(66.66% - 1px), rgba(255,255,255,.5) calc(66.66% - 1px), rgba(255,255,255,.5) 66.66%, transparent 66.66%),
  linear-gradient(transparent calc(33.33% - 1px), rgba(255,255,255,.5) calc(33.33% - 1px), rgba(255,255,255,.5) 33.33%, transparent 33.33%, transparent calc(66.66% - 1px), rgba(255,255,255,.5) calc(66.66% - 1px), rgba(255,255,255,.5) 66.66%, transparent 66.66%); }
.cam-stage.show-grid .cam-gridlines { display: block; }
.cam-photo video { width: 100%; max-width: 480px; border-radius: 10px; margin-top: 14px; display: block; background: #000; }

/* Page template: one-line intro, reassurance line, related tests */
.lede { margin-bottom: 10px; }
.trust { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 22px; padding: 0; font-size: 14px; font-weight: 600; color: var(--muted); }
.trust span { white-space: nowrap; }
.trust span::before { content: "✓ "; color: var(--accent-text); font-weight: 800; }
.related { margin-top: 56px; padding-top: 36px; border-top: 1px solid var(--border); }
.related h2 { font-size: 22px; margin: 0 0 16px; }
.btn-big { font-size: 17px; padding: 13px 24px; border-radius: 14px; }
@media (max-width: 640px) {
  .settings-row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .settings-row::-webkit-scrollbar { display: none; }
  .settings-row .seg { flex-shrink: 0; flex-wrap: nowrap; }
}

.tt-stat { white-space: nowrap; }
@media (max-width: 640px) { .tt-live { gap: 4px 16px; font-size: 18px; flex-wrap: wrap; } }

/* Score history */
.history { margin-top: 16px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 16px; background: var(--bg); }
.history-head { display: flex; justify-content: space-between; align-items: center; }
.history-head .linkish { font-size: 13px; color: var(--muted); }
.history-chart { width: 100%; height: 120px; display: block; margin: 6px 0; }
.history p { margin: 0; }

/* Mouse polling rate */
.poll-zone { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: 300px; padding: 20px; border-radius: 12px; background: var(--surface-2); border: 2px dashed var(--border); cursor: crosshair; touch-action: none; user-select: none; -webkit-user-select: none; }
.poll-zone[data-state="moving"] { border-color: var(--accent); }
.poll-chart { width: 100%; height: 160px; display: block; margin-top: 14px; border-radius: 10px; background: var(--bg); border: 1px solid var(--border); }

/* Webcam resolution scan */
.cam-scan { margin-top: 10px; }
.ok-text { color: var(--good); font-weight: 600; }
.warn-text { color: var(--amber); font-weight: 600; }

/* Refresh rate: ghosting backgrounds and frame skipping check */
.ufo-lanes[data-bg="grey"] .ufo-track { background: #808080; }
.ufo-lanes[data-bg="white"] .ufo-track { background: #f2f2f2; }
.ufo-lanes[data-bg="grey"] .ufo-lane::after, .ufo-lanes[data-bg="white"] .ufo-lane::after { color: #1c2430; }
.hz-details .stats { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 600px) { .hz-details .stats { grid-template-columns: repeat(2, 1fr); } }
.skip-grid { max-width: 520px; display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; margin-top: 10px; padding: 8px; background: #000; border-radius: 10px; }
.skip-grid span { aspect-ratio: 1; background: #161616; border-radius: 3px; }
.skip-grid span.on { background: #fff; }
#hz-note { min-height: 1.6em; } /* the note changes length as the reading settles; keep the lanes still */
@media (max-width: 600px) { #hz-note { min-height: 4.8em; } }

/* Typing: custom text, weak keys, key heatmap, certificate */
.tt-custom { margin-top: 12px; display: grid; gap: 8px; }
.tt-custom-text { width: 100%; resize: vertical; min-height: 72px; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; font: inherit; font-size: 15px; }
.tt-weak-note { margin: 10px 0 0; }
.tt-heat { margin-top: 14px; container-type: inline-size; }
.hm-row { display: flex; gap: 5px; margin-top: 5px; flex-wrap: wrap; }
/* Ten keys always fit the top row, so the key map never wraps on a phone. */
.hm-key { width: min(34px, calc((100cqw - 45px) / 10)); aspect-ratio: 1; display: inline-flex; align-items: center; justify-content: center; border-radius: 7px; font: 600 min(15px, 4cqw) var(--mono); background: var(--surface-2); border: 1px solid var(--border); }
.hm-key.none { opacity: .35; }
.hm-key.l0 { border-color: color-mix(in srgb, var(--good) 50%, transparent); }
.hm-key.l1 { background: color-mix(in srgb, var(--red) 25%, transparent); }
.hm-key.l2 { background: color-mix(in srgb, var(--red) 50%, transparent); }
.hm-key.l3 { background: color-mix(in srgb, var(--red) 85%, transparent); color: #fff; }
.tt-cert { margin-top: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tt-cert-name { background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 10px; padding: 9px 12px; font: inherit; min-width: 0; flex: 1 1 200px; max-width: 320px; }

/* "Other lengths" row linking a test's sibling pages (e.g. 1 / 5 / 10 / 30 / 60 / 100 second CPS) */
.lengths { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 14px 0 0; }
.lengths span { color: var(--muted); font-size: 14px; margin-right: 4px; }
.lengths a { padding: 5px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); font: 600 13.5px var(--body); text-decoration: none; font-variant-numeric: tabular-nums; }
.lengths a:hover { border-color: var(--border-strong); color: var(--text); }
.lengths a[aria-current="page"] { border-color: color-mix(in srgb, var(--accent) 55%, transparent); color: var(--text); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }

/* Sound test: two speakers with a moving dot showing where the sound sits */
.snd-stage { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; margin: 4px 0 6px; padding: 18px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg); }
.snd-spk { --level: 0; display: grid; justify-items: center; gap: 4px; color: var(--muted); font-size: 13px; font-weight: 600; }
.snd-spk svg { width: 54px; height: 54px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: color .08s, filter .08s; }
.snd-spk.right svg { transform: scaleX(-1); }
.snd-spk svg { color: color-mix(in srgb, var(--accent) calc(var(--level) * 100%), var(--muted)); filter: drop-shadow(0 0 calc(var(--level) * 10px) color-mix(in srgb, var(--accent) 60%, transparent)); }
.snd-track { position: relative; height: 6px; border-radius: 99px; background: var(--surface-2); border: 1px solid var(--border); }
.snd-dot { position: absolute; top: 50%; left: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: var(--muted); opacity: .35; transition: opacity .15s; }
.snd-dot.on { background: var(--accent); opacity: 1; box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 60%, transparent); }
.snd-h { font-size: 15px; letter-spacing: 0; margin: 20px 0 8px; color: var(--text-2); }
.snd-note { margin: -4px 0 4px; }
.snd-vol { margin-top: 16px; }
.snd-vol input[type="range"] { width: 160px; }
.snd .btn[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--accent); }
@media (max-width: 600px) { .snd-stage { gap: 10px; padding: 14px; } .snd-spk svg { width: 40px; height: 40px; } }

/* Mouse DPI analyzer */
.dpi-zone { background: var(--surface-2); border: 2px dashed var(--border); min-height: 260px; }
.dpi-zone[data-state="measuring"] { border-style: solid; border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface-2)); cursor: none; }
.dpi-live { margin-top: 14px; font: 600 15px var(--mono); color: var(--muted); }
.dpi-live b { font: 750 34px/1 var(--display); color: var(--text); font-variant-numeric: tabular-nums; margin-right: 6px; }
.dpi-num { width: 96px; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; font: inherit; font-size: 15px; }
.dpi-custom { display: inline-flex; align-items: center; gap: 8px; }
.dpi-custom[hidden] { display: none; }
@media (max-width: 600px) { .dpi-custom { flex: 1 1 100%; } .dpi-num { flex: 1; width: auto; min-width: 0; } #dpi label.inline { min-width: 0; } #dpi .select { flex: 1; min-width: 0; } }

/* F1 start lights: five pods of four lamps, the lower two light red */
.f1-zone { background: #0c1016; color: #eef2f6; --text: #eef2f6; --muted: #a3afbd; border: 1px solid #222b36; justify-content: flex-start; padding-top: 28px; }
.f1-zone[data-state="jump"] { background: #3a1408; }
.f1-gantry { display: flex; gap: clamp(6px, 2vw, 16px); margin-bottom: 22px; }
.f1-pod { display: grid; gap: clamp(4px, 1.2vw, 8px); padding: clamp(6px, 1.6vw, 10px); background: #05070a; border: 1px solid #1c232c; border-radius: 12px; }
.f1-pod i { display: block; width: clamp(26px, 7.5vw, 48px); aspect-ratio: 1; border-radius: 50%; background: #1a1f26; box-shadow: inset 0 2px 6px rgba(0, 0, 0, .6); }
.f1-pod.on i.r { background: radial-gradient(circle at 40% 35%, #ff7a66, #ff1e0e 55%, #b40d03); box-shadow: 0 0 18px rgba(255, 40, 20, .65), inset 0 -2px 4px rgba(0, 0, 0, .3); }
.f1-zone .zone-title { min-height: 1.1em; }

/* eDPI calculator */
.ed-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.ed-form label { display: flex; flex-direction: column; gap: 6px; color: var(--muted); font-size: 14px; }
.ed-form .select, .ed-form .dpi-num { width: 100%; min-width: 0; font-size: 16px; padding: 10px 12px; }
.ed-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 14px 0 10px; }
.ed-panel { background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; }
.ed-h { font-size: 16px; margin: 0 0 10px; }
.ed-table { width: 100%; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }
.ed-table th, .ed-table td { text-align: left; padding: 7px 0; border-bottom: 1px solid var(--border); }
.ed-table th { color: var(--muted); font-weight: 600; font-size: 13px; }
.ed-table td + td, .ed-table th + th { text-align: right; }
.ed-new { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 14px; }
.ed-new .dpi-num { width: 110px; }
.ed-out { margin: 12px 0 0; }
.ed-out b { font: 750 22px var(--display); color: var(--text); }
@media (max-width: 600px) { .ed-form, .ed-grid { grid-template-columns: 1fr; } }