/* Variant D, Labor: the instrument side pushed forward. Dark ground, monospace headings,
   a luminous spectrum and a stronger measuring grid.
   Loaded after style.css and left unlayered, so every rule here wins over the layered base.
   Forcing the dark scheme lets every light-dark() token of the base resolve to its dark value. */

:root {
  color-scheme: dark;

  --red: oklch(72% 0.18 25);
  --orange: oklch(80% 0.16 60);
  --yellow: oklch(88% 0.16 95);
  --green: oklch(80% 0.18 150);
  --cyan: oklch(82% 0.13 205);
  --blue: oklch(74% 0.15 255);
  --purple: oklch(70% 0.18 300);
  --pink: oklch(76% 0.15 345);
  --ok: var(--green);

  --ink-deep: oklch(15% 0.02 265);
  --bg: oklch(15% 0.02 265);
  --surface: oklch(19% 0.025 265);
  --raised: oklch(22% 0.03 265);
  --text: oklch(95% 0.01 265);
  --text-muted: oklch(76% 0.02 265);
  --rule: oklch(34% 0.04 265);
  --grid: oklch(82% 0.13 205 / 0.08);
  --link: var(--cyan);
  --focus: var(--cyan);
  --warn-bg: oklch(35% 0.08 60);

  --font-display: "JetBrains Mono", ui-monospace, monospace;
  --step-2: clamp(1.6rem, 1.3rem + 1.4vw, 2.4rem);
  --step-3: clamp(2.2rem, 1.6rem + 2.8vw, 3.8rem);
  --radius: 0.4rem;
  --radius-control: 0.3rem;
  --shadow: 0 0 2.5rem oklch(82% 0.13 205 / 0.12);
}

h1, h2, h3 { font-weight: 500; letter-spacing: -0.03em; }
.paren { font-style: normal; color: var(--cyan); }

.hero::before {
  background-size: 2rem 2rem;
  mask-image: radial-gradient(ellipse 80% 80% at 60% 45%, black, transparent);
}

.hero::after {
  content: "";
  position: absolute;
  inset: 10% 0 0 45%;
  z-index: -1;
  background: radial-gradient(closest-side, oklch(70% 0.18 300 / 0.25), transparent), radial-gradient(closest-side at 70% 70%, oklch(82% 0.13 205 / 0.2), transparent);
  filter: blur(3rem);
}

.button {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.95rem;
  &.primary { background: var(--cyan); border-color: var(--cyan); color: var(--bg); }
  &.primary:hover { background: var(--text); border-color: var(--text); color: var(--bg); }
}

.site-nav a { font-family: var(--font-display); }
.site-nav .nav-cta { background: var(--cyan); color: var(--bg); }
.site-nav .nav-cta:hover { background: var(--text); color: var(--bg); }

.abilities li, .method, .path, .shot, .app {
  box-shadow: 0 0 0 1px var(--rule);
  transition: box-shadow 200ms;
}

.abilities li:hover, .method:hover, .shot:hover {
  box-shadow: 0 0 0 1px var(--cyan), 0 0 1.5rem oklch(82% 0.13 205 / 0.25);
}

.method { padding: var(--space-m); border-radius: var(--radius); background: var(--surface); }
.ability-icon { stroke: var(--bg); background: var(--c); }
.state-label { background: var(--cyan); color: var(--bg); }
.steps li::before { background: none; color: var(--cyan); box-shadow: 0 0 0 1px var(--cyan); font-family: var(--font-display); }

.facs-paper { fill: oklch(75% 0.04 80); }

.cta { background: oklch(11% 0.02 265); }
.button.on-dark { background: var(--cyan); color: var(--bg); border-color: var(--cyan); }
.site-footer { background: oklch(11% 0.02 265); border-block-start: 1px solid var(--rule); }

/* The motif as a lit instrument, glowing bands on the dark ground. */
.m-bands { filter: url(#m-glow); }
.m-band { opacity: 1; }
.m-beam { stroke: white; filter: url(#m-glow); }
.m-prism { fill: oklch(100% 0 0 / 0.06); stroke: var(--cyan); }