/* The observatory: shared tokens and the base layer. Instruments add their own scoped styles (.obs-k8s, .obs-np, .obs-sky, ...).
   Cohesive with the vehicle (index.html): the night palette, Newsreader for display and reading, Hanken Grotesk for interface,
   Azeret Mono for numbers. */
:root {
  --night: #0e1630;      /* page */
  --space: #04060a;      /* the stages where pictures are drawn: the sky, the trainer's picture, the attention strip; near-black so the stars stand off the page */
  --panel: #121a36;      /* instrument backgrounds */
  --panel2: #17213f;     /* inputs, raised surfaces */
  --line: #26305a;       /* hairlines */
  --line2: #34407a;      /* stronger rules */
  --ink: #ece8df;        /* text */
  --muted: #a3acc4;      /* secondary text */
  --faint: #6f7ea3;      /* tertiary text, labels */
  --gold: #f2d27a;       /* the vehicle, anything you can steer, the desired state */
  --aqua: #7fd3e0;       /* motion, the actual state, machines */
  --lilac: #c9a7f0;      /* arousal, the search, hardness */
  --cobalt: #8fb4ff;     /* links, the live */
  --orange: #f28c5a;     /* heat, warnings, failures */
  --paper: #f4f1e6;      /* light axis, the brightest ink */
  --green: #9fd8a3;      /* checks that pass */
  --font-ui: 'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --font-read: 'Newsreader', Georgia, serif;
  --font-num: 'Azeret Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --measure: 68ch;
  --radius: 14px;
  --radius-s: 6px;
  --gutter: 20px;
}
* { box-sizing: border-box; }
html { color-scheme: dark; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--night); color: var(--ink); font-family: var(--font-ui); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: var(--cobalt); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 3px; border-radius: 3px; }
button, input, select { font: inherit; color: var(--ink); }
button { background: var(--panel2); border: 1px solid var(--line); border-radius: var(--radius-s); padding: 8px 14px; cursor: pointer; }
button:hover { border-color: var(--faint); }
button[disabled] { opacity: 0.4; cursor: default; }
button.primary { border-color: var(--gold); color: var(--gold); }
input[type=text], input[type=number] { background: var(--panel2); border: 1px solid var(--line); border-radius: var(--radius-s); padding: 8px 10px; min-width: 0; }
input[type=range] { accent-color: var(--gold); }
.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Reading column and full-bleed instruments */
.col { max-width: var(--measure); margin: 0 auto; padding: 0 var(--gutter); }
.bleed { max-width: 1180px; margin: 0 auto; padding: 0 var(--gutter); }
p { margin: 0 0 1em; }
.read { font-family: var(--font-read); font-size: 19px; line-height: 1.6; }
.read p { margin-bottom: 1.1em; }
h1, h2, h3 { font-family: var(--font-read); font-weight: 500; margin: 0; letter-spacing: -0.01em; }
h1 { font-size: clamp(40px, 6vw, 72px); line-height: 1.02; }
h2 { font-size: clamp(30px, 4vw, 44px); line-height: 1.1; }
h3 { font-size: 24px; line-height: 1.25; }

/* An instrument: a panel with a one-line explanation for anyone, the mechanism, and the numbers with their source. */
.instrument { background: linear-gradient(180deg, #131c3b 0%, #101838 55%, #0e1533 100%); border: 1px solid #28345f; border-radius: var(--radius); padding: 18px 20px 20px; margin: 28px 0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 14px 36px rgba(0, 0, 0, 0.28); }
.instrument > .forAnyone { font-family: var(--font-read); font-size: 19px; line-height: 1.5; margin: 0 0 14px; max-width: 70ch; }
.instrument > .mechanism { margin: 0; }
.instrument > .numbers { margin: 16px 0 0; padding-top: 12px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; line-height: 1.6; }
.instrument > .numbers .num { color: var(--ink); }
.instrument .source { color: var(--faint); font-family: var(--font-num); font-size: 12px; margin-top: 6px; }
.row { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; }
.note { color: var(--muted); font-size: 14px; }
.err { color: var(--orange); }
.swatch { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: middle; margin-right: 6px; }
@media (max-width: 600px) { .instrument { padding: 14px 14px 16px; border-radius: 10px; } .read { font-size: 18px; } }