/* Constellation figure style: the marketing canvas and ink (web/app/globals.css), the whitepaper's hairlines and gold,
   the docs theme (web/packages/web-theme/tokens.css) for dark. Square corners everywhere. */
:root {
  --canvas: #d8d8d4; --ink: #010101; --ink-2: rgba(1, 1, 1, 0.78); --muted: rgba(1, 1, 1, 0.55);
  --faint: rgba(1, 1, 1, 0.12); --dot: 1, 1, 1;
  --gold: #b08a3e; --gold-fill: rgba(176, 138, 62, 0.12); --bronze: #8f6b48;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --canvas: #000; --ink: #fff; --ink-2: rgba(255, 255, 255, 0.78); --muted: rgba(255, 255, 255, 0.45);
    --faint: rgba(255, 255, 255, 0.12); --dot: 255, 255, 255;
    --gold: #b8a574; --gold-fill: rgba(184, 165, 116, 0.14); --bronze: #a68058;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --canvas: #000; --ink: #fff; --ink-2: rgba(255, 255, 255, 0.78); --muted: rgba(255, 255, 255, 0.45);
  --faint: rgba(255, 255, 255, 0.12); --dot: 255, 255, 255;
  --gold: #b8a574; --gold-fill: rgba(184, 165, 116, 0.14); --bronze: #a68058;
  color-scheme: dark;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--canvas); color: var(--ink); font: 400 15px/1.65 var(--sans); padding-inline: 20px; -webkit-font-smoothing: antialiased; }
:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }

/* Figure: hairline above and below, caption in the whitepaper's form. */
.fig { max-width: 760px; margin: 40px auto; }
.fig .panel { position: relative; border-block: 1px solid var(--faint); padding-block: 20px; }
.fig figcaption { margin-top: 10px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.fig figcaption b { color: var(--ink); font-weight: 600; }

/* Text roles inside figures. */
.cap { font: 500 11px/1.3 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.val { font: 500 15px/1.2 var(--sans); color: var(--ink); font-variant-numeric: tabular-nums; }
.big { font: 600 40px/1 var(--sans); letter-spacing: -0.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.cap .unit { text-transform: none; letter-spacing: 0.04em; }

/* Controls: square, hairline, like the site's buttons. */
.controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 16px; }
.btn { font: 500 11px/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); background: transparent; border: 1px solid var(--ink); border-radius: 0; padding: 10px 14px; cursor: pointer; }
.btn.primary, .btn[aria-pressed="true"] { background: var(--ink); color: var(--canvas); }
.btn:disabled { opacity: 0.3; cursor: default; }
input[type="range"] { -webkit-appearance: none; appearance: none; flex: 1; min-width: 140px; height: 20px; background: transparent; margin: 0; }
input[type="range"]::-webkit-slider-runnable-track { height: 1px; background: var(--ink); }
input[type="range"]::-moz-range-track { height: 1px; background: var(--ink); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 11px; height: 11px; margin-top: -5px; background: var(--ink); border: 0; border-radius: 0; }
input[type="range"]::-moz-range-thumb { width: 11px; height: 11px; background: var(--ink); border: 0; border-radius: 0; }
svg text { font-family: var(--sans); }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }