/* Plug and Check: shared styles. Tool pages add tools/<name>.css; they never
   change this file (docs/plan.md, 4.3).

   Look: a tidy test bench. A pale green-grey bench, white instrument panels,
   dark green ink, and one green that means "works": check marks, lit LEDs,
   primary buttons. Amber warns, red fails. IBM Plex Sans for text and
   headings, Barlow Condensed only for big readings and the wordmark, IBM Plex
   Mono only for measured values and reports. The test is the one bordered
   object on its page; the how-to, the fixes and the FAQ below it read like a
   manual. Every colour is a token; dark mode redefines tokens only.

   States use is-* classes on any component: is-pass, is-warn, is-fail,
   is-wait, plus is-down and is-tested on key caps. .warn alone is the
   warning block. */

/* Fonts are served from this site (no requests to Google): Barlow Condensed,
   IBM Plex Sans (variable) and IBM Plex Mono, latin, latin-ext and vietnamese
   subsets with Google's unicode ranges. SIL OFL 1.1, see fonts/LICENSE-*.txt. */
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/barlow-condensed-500-vietnamese.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/barlow-condensed-500-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/barlow-condensed-500-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/barlow-condensed-600-vietnamese.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/barlow-condensed-600-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/barlow-condensed-600-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/barlow-condensed-700-vietnamese.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/barlow-condensed-700-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/barlow-condensed-700-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/ibm-plex-mono-400-vietnamese.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/ibm-plex-mono-400-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/ibm-plex-mono-400-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/ibm-plex-mono-500-vietnamese.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/ibm-plex-mono-500-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/ibm-plex-mono-500-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/ibm-plex-sans-var-vietnamese.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/ibm-plex-sans-var-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/ibm-plex-sans-var-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/ibm-plex-sans-var-vietnamese.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/ibm-plex-sans-var-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/ibm-plex-sans-var-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/ibm-plex-sans-var-vietnamese.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/ibm-plex-sans-var-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/ibm-plex-sans-var-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --bg: #eef2ee;          /* the bench */
  --panel: #ffffff;       /* instruments, forms, tiles */
  --sunk: #f5f8f5;        /* wells: inputs, report, meter tracks */
  --ink: #18231d;
  --muted: #57675d;
  --line: #d3dbd4;
  --line-strong: #aebbb2;
  --accent: #12773f;      /* pass green: links, primary buttons, checks */
  --accent-ink: #ffffff;  /* text on --accent */
  --accent-soft: #dbefe2;
  --ok: #12773f;
  --ok-soft: #dbefe2;
  --warn: #9a5800;
  --warn-soft: #fbedd5;
  --crit: #b42318;
  --crit-soft: #fbe2de;
  --radius: 14px;         /* panels */
  --radius-sm: 10px;      /* controls, tiles */
  --f-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --f-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f1512; --panel: #172019; --sunk: #121a15; --ink: #e2eae4; --muted: #96a69c; --line: #29352d; --line-strong: #3d4b42;
    --accent: #4cc47f; --accent-ink: #08130d; --accent-soft: #183a27; --ok: #4cc47f; --ok-soft: #183a27;
    --warn: #f0b24c; --warn-soft: #3a2c12; --crit: #f28a7e; --crit-soft: #3f1d19; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0f1512; --panel: #172019; --sunk: #121a15; --ink: #e2eae4; --muted: #96a69c; --line: #29352d; --line-strong: #3d4b42;
  --accent: #4cc47f; --accent-ink: #08130d; --accent-soft: #183a27; --ok: #4cc47f; --ok-soft: #183a27;
  --warn: #f0b24c; --warn-soft: #3a2c12; --crit: #f28a7e; --crit-soft: #3f1d19; color-scheme: dark;
}

/* Base */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--panel); } /* below a short page's footer, and in overscroll, the panel colour continues */
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.55 var(--f-body); }
a { color: var(--accent); text-underline-offset: 3px; }
img, video, canvas { max-width: 100%; }
[hidden] { display: none !important; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 8px; background: var(--panel); padding: 6px 10px; z-index: 10; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
code, kbd { font-family: var(--f-mono); font-size: .9em; }
kbd { padding: 1px 5px; border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 4px; background: var(--panel); }

/* Icons: <svg class="ico" aria-hidden="true"><use href="#i-camera"/></svg> */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico { width: 1.25em; height: 1.25em; flex: none; vertical-align: -0.25em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.logo { width: 30px; height: 30px; flex: none; color: var(--accent); --logo-ink: var(--accent-ink); }

/* Header and footer */
.bar { max-width: 1160px; margin: 0 auto; padding-inline: 20px; }
.site-header { background: var(--panel); border-bottom: 1px solid var(--line); }
.site-header .bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; min-height: 62px; padding-block: 8px; }
.brand { display: inline-flex; align-items: center; gap: 10px; margin-right: auto; color: var(--ink); text-decoration: none; font: 700 24px/1 var(--f-display); letter-spacing: .01em; white-space: nowrap; }
.cats { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.cats::-webkit-scrollbar { display: none; }
.cats a { padding: 7px 10px; border-radius: 8px; color: var(--ink); font-size: 15px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.cats a:hover { background: var(--sunk); }
.cats a[aria-current] { background: var(--accent-soft); color: var(--accent); }
.theme { flex: none; padding: 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: transparent; color: var(--ink); }
.theme:hover { background: var(--sunk); }
@media (max-width: 860px) {
  .cats { order: 3; flex-basis: 100%; margin-inline: -10px; }
}
.site-footer { margin-top: 32px; border-top: 1px solid var(--line); background: var(--panel); font-size: 14px; color: var(--muted); }
.foot { display: flex; flex-wrap: wrap; gap: 24px 40px; padding-block: 32px 20px; }
.foot p { margin: 0; }
.foot-brand { flex: 1 1 240px; max-width: 320px; display: grid; gap: 8px; }
.foot-name { display: flex; align-items: center; gap: 10px; color: var(--ink); font: 700 21px/1 var(--f-display); }
.foot-name .logo { width: 24px; height: 24px; }
.foot-col { flex: 0 1 160px; }
.foot-h { margin-bottom: 8px !important; color: var(--ink); font-weight: 600; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.foot a { color: var(--muted); text-decoration: none; }
.foot a:hover, .foot a[aria-current] { color: var(--accent); text-decoration: underline; }
.foot-legal { margin-block: 0; padding-block: 0 28px; font-size: 13px; }

/* Page frame and type */
.wrap { max-width: 1160px; margin: 0 auto; padding: clamp(20px, 3vw, 36px) 20px 48px; display: grid; gap: 32px; }
.wrap > * { min-width: 0; }
h1 { margin: 0; font: 600 clamp(30px, 4.2vw, 44px)/1.12 var(--f-body); letter-spacing: -.018em; text-wrap: balance; }
h2 { margin: 0; font: 600 clamp(21px, 2.3vw, 25px)/1.25 var(--f-body); letter-spacing: -.01em; text-wrap: balance; }
h3 { margin: 0; font: 600 17px/1.35 var(--f-body); }
.page-head { display: grid; gap: 10px; max-width: 780px; }
.crumb { margin: 0; font-size: 14px; color: var(--muted); }
.crumb a { color: var(--muted); text-decoration: none; }
.crumb a:hover { color: var(--accent); text-decoration: underline; }
.lede { margin: 0; max-width: 66ch; font-size: 18px; color: var(--muted); }
.fine { margin: 0; font-size: 14px; color: var(--muted); }
.card { display: grid; gap: 14px; min-width: 0; padding: clamp(16px, 3vw, 24px); background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }

/* Manual sections under a test: plain text on the bench, a hairline above. */
.doc { display: grid; gap: 14px; max-width: 780px; padding-top: 28px; border-top: 1px solid var(--line); }
.doc p, .doc ul, .doc ol { margin: 0; }
.prose { display: grid; gap: 14px; max-width: 780px; }
.prose p, .prose li { max-width: 72ch; }
.prose p { margin: 0; }
.prose ul, .prose ol { margin: 0; padding-left: 22px; display: grid; gap: 8px; }
.prose h2:not(:first-child) { margin-top: 14px; }
.prose h3 { margin-top: 6px; }

/* Buttons and fields */
button, .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; border: 1px solid var(--accent); border-radius: var(--radius-sm);
  background: var(--accent); color: var(--accent-ink); font: 600 15px/1.2 var(--f-body); text-decoration: none; cursor: pointer; }
button:hover, .btn:hover { background: color-mix(in srgb, var(--accent) 86%, var(--ink)); }
.ghost { background: transparent; color: var(--accent); }
.ghost:hover { background: var(--accent-soft); }
.quiet { border-color: transparent; background: transparent; color: var(--ink); }
.quiet:hover { background: var(--sunk); }
.danger { border-color: var(--crit); background: transparent; color: var(--crit); }
.danger:hover { background: var(--crit-soft); }
.big { padding: 13px 20px; font-size: 16px; }
.sm { padding: 6px 10px; border-radius: 8px; font-size: 14px; }
button:disabled, button:disabled:hover { opacity: .5; cursor: not-allowed; background: transparent; color: var(--muted); border-color: var(--line-strong); }
.btns { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.toolbar { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: end; }
label { display: grid; gap: 4px; font-size: 14px; font-weight: 500; }
label small { font-weight: 400; color: var(--muted); font-size: 13px; }
input, select, textarea { width: 100%; min-width: 0; padding: 9px 11px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--sunk); color: var(--ink); font: 400 15px/1.4 var(--f-body); }
input[type=number], .mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
textarea { min-height: 120px; resize: vertical; }
input[type=checkbox], input[type=radio] { width: 18px; height: 18px; margin: 0; padding: 0; flex: none; accent-color: var(--accent); }
input[type=range] { padding: 0; border: 0; background: transparent; accent-color: var(--accent); }
label.check { display: flex; gap: 8px; align-items: center; font-weight: 400; }
fieldset { min-width: 0; margin: 0; padding: 0; border: 0; display: grid; gap: 10px; }
legend { padding: 0 0 6px; font-weight: 600; }
/* Segmented control: <div class="seg"><button aria-pressed="true">…</button><button aria-pressed="false">…</button></div> */
.seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); overflow: hidden; background: var(--panel); }
.seg button { border: 0; border-radius: 0; padding: 8px 12px; background: transparent; color: var(--ink); font-weight: 500; }
.seg button + button { border-left: 1px solid var(--line-strong); }
.seg button:hover { background: var(--sunk); }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--panel); }

/* The test: the one bordered instrument on a test page. */
.tool { display: grid; gap: 18px; min-width: 0; padding: clamp(16px, 3vw, 26px); background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.split { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 24px; align-items: start; }
@media (max-width: 860px) { .split { grid-template-columns: minmax(0, 1fr); } }
/* Grid of equal items: set --min for the narrowest column. */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--min, 220px)), 1fr)); gap: var(--gap, 16px); }
.scroll { overflow-x: auto; }
/* Video and canvas stage; add .mirror to flip a selfie view. */
.stage { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; max-height: 72vh; overflow: hidden; border-radius: var(--radius-sm); background: #0b100d; color: #c8d3cb; }
.stage > video, .stage > canvas, .stage > img { display: block; width: 100%; height: 100%; object-fit: contain; }
.stage > p { margin: 0; padding: 16px; text-align: center; }
.mirror { transform: scaleX(-1); }
.scope { display: block; width: 100%; height: 160px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--sunk); }

/* Readings: <div class="readout"><span class="k">Frame rate</span><span class="v">30<span class="u">fps</span></span></div> */
.readouts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 16px; }
.readout { display: grid; gap: 2px; align-content: start; min-width: 0; }
.readout .k { font-size: 14px; color: var(--muted); }
.readout .v { font: 600 clamp(32px, 5vw, 46px)/1 var(--f-display); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.readout .u { margin-left: 4px; font: 500 15px var(--f-body); color: var(--muted); }
.readout .s { font-size: 14px; color: var(--muted); }
/* Facts: <table class="kv"><tr><th>Sample rate</th><td>48,000 Hz</td></tr></table> */
.kv { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.kv th, .kv td { padding: 8px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.kv th { width: 45%; padding-right: 16px; color: var(--muted); font-weight: 500; font-size: 15px; }
.kv td { font: 400 14px/1.5 var(--f-mono); overflow-wrap: anywhere; }
.kv tr:last-child th, .kv tr:last-child td { border-bottom: 0; }

/* Level meter: <div class="meter" style="--v: .42; --peak: .8"><i></i><b></b></div>
   --v and --peak run from 0 to 1. Add .vu for green, amber and red zones
   that stay put while the level moves. */
.meter { position: relative; height: 14px; overflow: hidden; border: 1px solid var(--line); border-radius: 999px; background: var(--sunk); }
.meter > i { position: absolute; inset: 0 auto 0 0; width: calc(var(--v, 0) * 100%); border-radius: inherit; background: var(--accent); }
.meter > b { position: absolute; top: 0; bottom: 0; left: calc(var(--peak, 0) * 100%); width: 2px; margin-left: -1px; background: var(--ink); }
.meter.vu { background: linear-gradient(90deg, var(--ok) 0 75%, var(--warn) 75% 92%, var(--crit) 92%); }
.meter.vu > i { inset: 0 0 0 auto; width: calc((1 - var(--v, 0)) * 100%); border-radius: 0; background: var(--sunk); }
.meter.tall { height: 22px; }

/* Key caps: <span class="keycap" style="--w: 1.5">Tab</span>; states is-down, is-tested, is-warn, is-fail. */
.keycap { display: inline-grid; place-items: center; width: calc(var(--w, 1) * 2.6em); min-width: 2.6em; height: 2.6em; padding: 0 .4em; overflow: hidden;
  border: 1px solid var(--line-strong); border-bottom-width: 3px; border-radius: 7px; background: var(--panel); color: var(--ink);
  font: 500 12px/1.1 var(--f-mono); text-align: center; white-space: nowrap; user-select: none; }
.keycap.is-tested { border-color: var(--accent); background: var(--accent-soft); }
.keycap.is-down { border-color: var(--accent); border-bottom-width: 1px; background: var(--accent); color: var(--accent-ink); transform: translateY(2px); }
.keycap.is-warn { border-color: var(--warn); background: var(--warn-soft); }
.keycap.is-fail { border-color: var(--crit); background: var(--crit-soft); color: var(--crit); }

/* Status lights and rows: <li class="status-row"><span class="led is-pass"></span>…</li> */
.led { display: inline-block; width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--line-strong); }
.led.is-pass { background: var(--ok); box-shadow: 0 0 0 4px var(--ok-soft); }
.led.is-warn { background: var(--warn); box-shadow: 0 0 0 4px var(--warn-soft); }
.led.is-fail { background: var(--crit); box-shadow: 0 0 0 4px var(--crit-soft); }
.led.is-wait { background: var(--warn); animation: blink 1s steps(2, start) infinite; }
@keyframes blink { to { opacity: .25; } }
.status-list { display: grid; margin: 0; padding: 0; list-style: none; }
.status-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.status-row:last-child { border-bottom: 0; }
.status-row .grow { flex: 1 1 160px; min-width: 0; }

/* Badges: <span class="badge is-pass">Works</span> */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border: 1px solid var(--line); border-radius: 999px; background: var(--sunk); color: var(--muted); font: 600 13px/1.3 var(--f-body); white-space: nowrap; }
.badge.is-pass { border-color: transparent; background: var(--ok-soft); color: var(--ok); }
.badge.is-warn { border-color: transparent; background: var(--warn-soft); color: var(--warn); }
.badge.is-fail { border-color: transparent; background: var(--crit-soft); color: var(--crit); }

/* Browser-support and access messages, written into #support by pnc.js. */
.support { display: grid; gap: 8px; }
.notice { display: flex; gap: 10px; margin: 0; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--sunk); font-size: 15px; }
.notice::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: 8px; border-radius: 50%; background: var(--muted); }
.notice.is-warn, .notice.warn { border-color: color-mix(in srgb, var(--warn) 40%, transparent); background: var(--warn-soft); }
.notice.is-warn::before, .notice.warn::before { background: var(--warn); }
.notice.is-fail { border-color: color-mix(in srgb, var(--crit) 40%, transparent); background: var(--crit-soft); }
.notice.is-fail::before { background: var(--crit); }
.notice.is-pass { border-color: color-mix(in srgb, var(--ok) 40%, transparent); background: var(--ok-soft); }
.notice.is-pass::before { background: var(--ok); }

/* Warning block, for volume and flashing-light warnings:
   <div class="warn" role="note"><svg class="ico" aria-hidden="true"><use href="#i-warn"/></svg><div><p><b>…</b> …</p></div></div> */
.warn { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent); border-radius: var(--radius-sm); background: var(--warn-soft); }
.warn > .ico { margin-top: 2px; color: var(--warn); }
.warn > div { display: grid; gap: 8px; min-width: 0; }
.warn p { margin: 0; }

/* Numbered steps: <ol class="steps"><li>…</li></ol> */
.steps { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.steps > li { position: relative; min-height: 28px; padding: 2px 0 0 42px; counter-increment: step; }
.steps > li::before { content: counter(step); position: absolute; top: 0; left: 0; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent); font: 600 14px/1 var(--f-body); }

/* Troubleshooting */
.fix { display: grid; gap: 10px; padding-top: 18px; border-top: 1px dashed var(--line); }
.troubleshoot > h2 + .fix, .troubleshoot > p + .fix { padding-top: 4px; border-top: 0; }
.os { display: flex; align-items: center; gap: 8px; margin: 4px 0 0 !important; font-weight: 600; }
.os .ico { color: var(--muted); }

/* FAQ */
.faq { display: grid; }
.faq details { padding: 14px 0; border-bottom: 1px solid var(--line); }
.faq details:last-child { border-bottom: 0; }
.faq summary { display: flex; justify-content: space-between; gap: 12px; font-weight: 600; list-style: none; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; color: var(--accent); font: 500 20px/1 var(--f-mono); }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { max-width: 70ch; margin: 8px 0 0; color: var(--muted); }

/* Report: placeholder until pnc.js fills it, then the plain-text result. */
.report-card { display: grid; gap: 12px; max-width: 780px; }
.report-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.report { max-height: 440px; margin: 0; padding: 16px 18px; overflow: auto; border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); background: transparent;
  color: var(--muted); font: 400 14px/1.6 var(--f-mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.report.is-filled { border-style: solid; border-color: var(--line); background: var(--panel); color: var(--ink); }

.local-note { display: flex; gap: 10px; align-items: flex-start; max-width: 780px; margin: 0; color: var(--muted); font-size: 15px; }
.local-note .ico { margin-top: 2px; color: var(--accent); }
.local-note b { color: var(--ink); }

/* Tiles: one test each, on the home page and under related tests. */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 12px; }
.tile { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel); color: var(--ink); text-decoration: none; }
.tile:hover { border-color: var(--accent); }
.socket { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent); }
.socket .ico { width: 23px; height: 23px; }
.tile:hover .socket { background: var(--accent); color: var(--accent-ink); }
.tile-text { display: grid; gap: 2px; min-width: 0; }
.tile-name { font-weight: 600; }
.tile-card { color: var(--muted); font-size: 14px; line-height: 1.45; }
.related { display: grid; gap: 16px; padding-top: 28px; border-top: 1px solid var(--line); }
.guide-links { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.guide-links a { display: inline-flex; gap: 10px; align-items: flex-start; font-weight: 500; }
.guide-links .ico { margin-top: 2px; }
.guide-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; max-width: 780px; padding: 14px 16px; border-radius: var(--radius-sm); background: var(--accent-soft); }
.guide-cta p { flex: 1 1 220px; margin: 0; }
.guide-cta .socket { background: var(--panel); }

/* Full screen: pnc.js fullscreen(el) uses the Fullscreen API and falls back
   to .fs-fallback, which fills the window. A .fs overlay is a fixed layer
   for colour screens and patterns. */
.fs { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; background: #000; color: #fff; }
.fs-hint { position: absolute; left: 50%; bottom: max(20px, env(safe-area-inset-bottom)); transform: translateX(-50%); padding: 8px 12px; border-radius: 8px; background: rgba(0, 0, 0, .65); color: #fff; font-size: 14px; white-space: nowrap; }
.fs-fallback { position: fixed !important; inset: 0 !important; z-index: 1000 !important; width: auto !important; height: auto !important; max-width: none !important; margin: 0 !important; border-radius: 0 !important; }
html.fs-lock, html.fs-lock body { overflow: hidden; }

/* Home */
.hero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
@media (max-width: 860px) { .hero { grid-template-columns: minmax(0, 1fr); } }
.hero-text { display: grid; gap: 16px; }
.hero h1 { font-size: clamp(32px, 4.6vw, 52px); }
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.hero-cta p { margin: 0; color: var(--muted); font-size: 15px; }
.bench { display: grid; gap: 4px; padding: 20px 22px; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); }
.bench-title { margin: 0 0 6px; font: 700 28px/1.05 var(--f-display); letter-spacing: .01em; }
.bench-list { display: grid; margin: 0; padding: 0; list-style: none; }
.bench-list li { display: grid; grid-template-columns: 10px 24px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.bench-name { font-weight: 600; }
.bench-val { color: var(--muted); font-size: 14px; text-align: right; }
.bench-list .ico { color: var(--muted); }
.bench-list .led { background: var(--ok); box-shadow: 0 0 0 4px var(--ok-soft); }
.bench-foot { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; color: var(--accent); font-weight: 600; font-size: 15px; }
@media (prefers-reduced-motion: no-preference) {
  .bench-list .led { animation: led-on .35s ease-out backwards; }
  .bench-list li:nth-child(1) .led { animation-delay: .35s; }
  .bench-list li:nth-child(2) .led { animation-delay: .8s; }
  .bench-list li:nth-child(3) .led { animation-delay: 1.25s; }
  .bench-foot { animation: fade-in .4s ease-out 1.7s backwards; }
}
@keyframes led-on { from { background: var(--line-strong); box-shadow: 0 0 0 0 var(--ok-soft); } }
@keyframes fade-in { from { opacity: 0; } }
.sections { display: grid; gap: 36px; }
.section { display: grid; gap: 14px; scroll-margin-top: 16px; }
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; }
.section-head p { margin: 0; color: var(--muted); }
.trust { display: grid; gap: 18px; padding-top: 28px; border-top: 1px solid var(--line); }
.trust-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
.trust-list li { display: flex; gap: 14px; align-items: flex-start; }
.trust-list h3 { margin: 8px 0 4px; }
.trust-list p { margin: 0; color: var(--muted); }
.ask { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; padding: 18px 20px; border: 1px dashed var(--line-strong); border-radius: var(--radius); }
.ask > .ico { width: 28px; height: 28px; color: var(--accent); }
.ask > div { flex: 1 1 260px; }
.ask h2 { font-size: 21px; }
.ask p { margin: 4px 0 0; color: var(--muted); }

/* Feedback form */
.fb-card { max-width: 780px; }
.fb { display: grid; gap: 12px; }
.fb-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: end; }
@media (max-width: 640px) { .fb-row { grid-template-columns: minmax(0, 1fr); } }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.fb-msg { min-height: 1.5em; margin: 0; font-size: 15px; }
.fb-msg.ok { color: var(--ok); }
.fb-msg.err { color: var(--crit); }

.toast { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 1100; transform: translateX(-50%); padding: 9px 14px; border-radius: 8px; background: var(--ink); color: var(--bg); font-size: 14px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
@media print {
  body { background: #fff; }
  .site-header nav, .theme, .site-footer, .skip, .fb-card, .related, .guide-cta, .support, .toast { display: none !important; }
}