/* Shared look for the explorations: an annotated plate in a machine-vision lab notebook.
   B612 (Airbus's cockpit-display face) for UI and data; Newsreader for the reading voice.
   Link fonts in each page:
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=B612:wght@400;700&family=B612+Mono&family=Newsreader:opsz,wght@6..72,400;6..72,600&display=swap"> */
:root {
  --bg: #eceeea;          /* cool plate grey */
  --surface: #f7f8f5;
  --ink: #15181e;
  --muted: #5d6470;
  --rule: #c9cdc7;
  --box: #c4006a;         /* detection-box magenta: what the machine asserts */
  --scan: #007f8c;        /* sensor cyan: what the machine measures */
  --warn: #b25a00;
  --font-display: "Newsreader", "Iowan Old Style", Georgia, serif;
  --font-ui: "B612", "Helvetica Neue", Arial, sans-serif;
  --font-data: "B612 Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --step--1: 0.8125rem; --step-0: 1rem; --step-1: 1.25rem; --step-2: 1.6rem; --step-3: 2.3rem;
  --radius: 2px;
  --gutter: clamp(16px, 4vw, 40px);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #111418; --surface: #191d23; --ink: #e4e7ea; --muted: #98a0aa; --rule: #2c323a;
    --box: #ff4fa0; --scan: #3cc6d4; --warn: #f0a04b; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #111418; --surface: #191d23; --ink: #e4e7ea; --muted: #98a0aa; --rule: #2c323a;
  --box: #ff4fa0; --scan: #3cc6d4; --warn: #f0a04b; color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; padding-inline: var(--gutter); padding-block: 0 48px;
  background: var(--bg); color: var(--ink);
  font: 400 var(--step-0)/1.5 var(--font-ui);
}
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.15; text-wrap: balance; margin: 0; }
h1 { font-size: var(--step-3); } h2 { font-size: var(--step-2); } h3 { font-size: var(--step-1); }
p { max-width: 65ch; }
a { color: var(--scan); text-underline-offset: 2px; }
:focus-visible { outline: 2px solid var(--box); outline-offset: 2px; }
.data, code, kbd { font-family: var(--font-data); font-variant-numeric: tabular-nums; }
.label { font: 700 var(--step--1)/1.2 var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }

/* Site header shared by every exploration page */
.site-head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px;
  padding-block: 14px; border-bottom: 1px solid var(--rule); margin-bottom: 24px;
}
.site-head a { color: var(--muted); text-decoration: none; font-size: var(--step--1); letter-spacing: 0.06em; text-transform: uppercase; }
.site-head a:hover { color: var(--ink); }

/* Machine annotations: a box and its label, as drawn by a detector */
.bbox-label {
  display: inline-block; padding: 1px 6px; background: var(--box); color: #fff;
  font: 400 var(--step--1)/1.4 var(--font-data); border-radius: var(--radius);
}
.measure { color: var(--scan); font-family: var(--font-data); }

button, .button {
  font: 700 var(--step--1)/1 var(--font-ui); letter-spacing: 0.06em; text-transform: uppercase;
  padding: 10px 14px; border: 1px solid var(--ink); background: transparent; color: var(--ink);
  border-radius: var(--radius); cursor: pointer;
}
button:hover, .button:hover { background: var(--ink); color: var(--bg); }
button.primary { background: var(--box); border-color: var(--box); color: #fff; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}