/* dhar.win: inside the EUV chamber.
   An EUV scanner fires a red drive laser at tin droplets in a black vacuum; the tin flashes into
   purple plasma, and the light it gives off is bounced by multilayer mirrors with a pale-blue sheen.
   Black, plasma purple, laser red, mirror blue. Up moves are mirror blue, down moves are laser red.
   One family (Archivo) across its width axis: wide for display, condensed for tickers. */

:root {
  /* lights off (default when the system is dark) */
  --room: #0b0910;
  --room-raised: #15121d;
  --room-deep: #201a2c;
  --ink: #f0ebf8;
  --ink-2: #c6bcd9;
  --ink-3: #9488ab;
  --rule: rgba(240, 235, 248, 0.12);
  --rule-strong: rgba(240, 235, 248, 0.42);
  --plasma: #9d7bff;
  --plasma-deep: #5b3fd0;
  --laser: #ff4d63;
  --mirror: #8fd8ff;
  --sc-tools: #5fc8ff; --sc-silicon: #e0a85a; --sc-memory: #7be0a8; --sc-chips: #b79dff; --sc-network: #ff6b7f; --sc-compute: #f2c94c;
  --bj-sweep: #7be0a8; --bj-pass: #5fc8ff; --bj-sub: #ff6b7f; --bj-back: #b79dff; --bj-entry: #e0a85a; --bj-takedown: #f2c94c; --bj-pull: #5fd6c8; --bj-move: #9a94b0; --bj-escape: #d8d2e8;
  --cmp-1: #ffb86b; --cmp-2: #7be0a8; --cmp-3: #ff7ad9;
  --cx-1: #8fd8ff; --cx-2: #9d7bff; --cx-3: #ffb86b; --cx-4: #7be0a8; --cx-5: #ff6b7f; --cx-6: #ff7ad9;
  --up: #8fd8ff;
  --down: #ff6b7e;
  --focus: #8fd8ff;
  --on-plasma: #0b0910;
  --silicon: #17151f;
  --silicon-edge: #3a3150;
  --die: #241f30;
  --die-ink: #ece7f6;
  --die-up: 143, 216, 255;
  --die-down: 255, 77, 99;
  --water-top: #8fd8ff;
  --water-mid: #6d4dff;
  --water-deep: #1a1030;
  --shadow: rgba(0, 0, 0, 0.6);

  --fs-xs: 0.8125rem;
  --fs-s: 0.9375rem;
  --fs-m: 1.0625rem;
  --fs-l: 1.375rem;
  --fs-xl: 1.875rem;
  --fs-2xl: 2.625rem;
  --fs-hero: clamp(2.6rem, 6.4vw, 5.6rem);

  --gutter: 16px;
  --max: 1180px;
  color-scheme: dark;
}

@media (min-width: 720px) {
  :root { --gutter: 32px; }
}

/* lights on */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --room: #f6f4fa;
    --room-raised: #ffffff;
    --room-deep: #ebe6f5;
    --ink: #16111f;
    --ink-2: #463c59;
    --ink-3: #665c7c;
    --rule: rgba(22, 17, 31, 0.13);
    --rule-strong: rgba(22, 17, 31, 0.45);
    --plasma: #5b34d6;
    --plasma-deep: #3d1fb0;
    --laser: #d21f3c;
    --mirror: #2a9fd8;
    --sc-tools: #1f8fd0; --sc-silicon: #b8731a; --sc-memory: #1f9a5a; --sc-chips: #6a3fd6; --sc-network: #d21f3c; --sc-compute: #b8860b;
    --bj-sweep: #0f8a4f; --bj-pass: #1f8fd0; --bj-sub: #d21f3c; --bj-back: #6a3fd6; --bj-entry: #b8731a; --bj-takedown: #b8860b; --bj-pull: #0f8f86; --bj-move: #6f6590; --bj-escape: #4a4460;
    --cmp-1: #c45d00; --cmp-2: #0f8a4f; --cmp-3: #c2187f;
    --cx-1: #2a9fd8; --cx-2: #5b34d6; --cx-3: #c45d00; --cx-4: #0f8a4f; --cx-5: #d21f3c; --cx-6: #c2187f;
    --up: #0a6896;
    --down: #c21d3a;
    --focus: #5b34d6;
    --on-plasma: #ffffff;
    --silicon-edge: #8a7fae;
    --water-top: #6cc8f5;
    --water-mid: #7a5cf0;
    --water-deep: #2b1a5c;
    --shadow: rgba(40, 20, 80, 0.35);
    color-scheme: light;
  }
}
:root[data-theme="light"] {
  --room: #f6f4fa;
  --sc-tools: #1f8fd0; --sc-silicon: #b8731a; --sc-memory: #1f9a5a; --sc-chips: #6a3fd6; --sc-network: #d21f3c; --sc-compute: #b8860b;
  --bj-sweep: #0f8a4f; --bj-pass: #1f8fd0; --bj-sub: #d21f3c; --bj-back: #6a3fd6; --bj-entry: #b8731a; --bj-takedown: #b8860b; --bj-pull: #0f8f86; --bj-move: #6f6590; --bj-escape: #4a4460;
  --cmp-1: #c45d00; --cmp-2: #0f8a4f; --cmp-3: #c2187f;
  --cx-1: #2a9fd8; --cx-2: #5b34d6; --cx-3: #c45d00; --cx-4: #0f8a4f; --cx-5: #d21f3c; --cx-6: #c2187f;
  --room-raised: #ffffff;
  --room-deep: #ebe6f5;
  --ink: #16111f;
  --ink-2: #463c59;
  --ink-3: #665c7c;
  --rule: rgba(22, 17, 31, 0.13);
  --rule-strong: rgba(22, 17, 31, 0.45);
  --plasma: #5b34d6;
  --plasma-deep: #3d1fb0;
  --laser: #d21f3c;
  --mirror: #2a9fd8;
  --up: #0a6896;
  --down: #c21d3a;
  --focus: #5b34d6;
  --on-plasma: #ffffff;
  --silicon-edge: #8a7fae;
  --water-top: #6cc8f5;
  --water-mid: #7a5cf0;
  --water-deep: #2b1a5c;
  --shadow: rgba(40, 20, 80, 0.35);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--room);
  color: var(--ink);
  font-family: "Archivo", "Helvetica Neue", Arial, sans-serif;
  font-size: var(--fs-m);
  font-weight: 420;
  font-stretch: 100%;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration-color: var(--rule-strong); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--plasma); text-decoration-thickness: 2px; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  background: var(--ink);
  color: var(--room);
  padding: 8px 12px;
  z-index: 10;
}
.skip:focus { top: 8px; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

/* ------------------------------------------------------------------ header */
.site-head {
  padding-top: 20px;
  padding-bottom: 14px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 28px;
  border-bottom: 2px solid var(--ink);
}
.wordmark {
  font-stretch: 125%;
  font-weight: 860;
  font-size: var(--fs-xl);
  letter-spacing: -0.03em;
  line-height: 1;
  text-decoration: none;
  color: var(--ink);
  margin-right: auto;
}
.wordmark .dot { color: var(--laser); }
.nav { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: var(--fs-s); font-weight: 600; }
.nav a { text-decoration: none; padding: 4px 0; border-bottom: 2px solid transparent; }
.nav a:hover { border-bottom-color: var(--rule-strong); }
.nav a[aria-current="page"] { border-bottom-color: var(--plasma); }
/* lights on/off, in the header so it's never a scroll away */
.lights {
  align-self: center; width: 30px; height: 30px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1.5px solid var(--rule-strong); background: none; color: var(--ink); display: grid; place-items: center;
}
.lights:hover { border-color: var(--plasma); }
.lights:focus-visible { outline: 3px solid var(--mirror); outline-offset: 2px; }
.lights-bulb { width: 12px; height: 12px; border-radius: 50%; border: 2px solid currentColor; box-sizing: border-box; transition: background-color 0.25s ease, box-shadow 0.25s ease; }
:root[data-theme="light"] .lights-bulb { background: #f2c94c; border-color: #d99a1c; box-shadow: 0 0 0 3px rgba(242, 201, 76, 0.35); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .lights-bulb { background: #f2c94c; border-color: #d99a1c; box-shadow: 0 0 0 3px rgba(242, 201, 76, 0.35); } }
.to-top-fab {
  position: fixed; right: 18px; bottom: 18px; z-index: 20; width: 44px; height: 44px; border-radius: 50%;
  border: 1.5px solid var(--rule-strong); background: var(--room-raised); color: var(--ink); font: 700 20px "Archivo", sans-serif;
  cursor: pointer; opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity 0.25s ease, transform 0.25s ease;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}
.to-top-fab.is-on { opacity: 1; transform: none; pointer-events: auto; }
.to-top-fab:hover { border-color: var(--plasma); }
.to-top-fab:focus-visible { outline: 3px solid var(--mirror); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .to-top-fab { transition: none; } }
@media print { .to-top-fab, .lights { display: none; } }
.rss-link { font-weight: 650; white-space: nowrap; }
.show-more { margin: 26px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: var(--fs-s); }
.more-button {
  font: inherit; font-weight: 700; color: var(--ink); background: var(--room-raised); cursor: pointer;
  border: 1.5px solid var(--rule-strong); border-radius: 999px; padding: 8px 18px;
}
.more-button:hover { border-color: var(--plasma); }
.more-button:focus-visible { outline: 3px solid var(--mirror); outline-offset: 2px; }

.status {
  flex-basis: 100%;
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--ink-2);
  display: flex;
  flex-wrap: wrap;
  gap: 2px 16px;
}
.status .dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  background: var(--ink-3);
  vertical-align: 1px;
}
.status .dot.is-open { background: var(--mirror); box-shadow: 0 0 0 3px rgba(var(--die-up), 0.25); }

/* ------------------------------------------------------------------ shared type */
h1, h2, h3, h4 { margin: 0; line-height: 1.1; }
.page-title {
  font-stretch: 118%;
  font-weight: 820;
  font-size: var(--fs-2xl);
  letter-spacing: -0.025em;
  margin: 40px 0 10px;
}
.page-lede { max-width: 62ch; margin: 0 0 28px; color: var(--ink-2); font-size: var(--fs-m); }
.section-title { font-stretch: 110%; font-weight: 760; font-size: var(--fs-l); letter-spacing: -0.01em; margin: 0 0 14px; }

.up { color: var(--up); }
.down { color: var(--down); }
.muted { color: var(--ink-3); }
.ticker { font-stretch: 72%; font-weight: 700; letter-spacing: 0.01em; }
.emoji { font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; font-style: normal; line-height: 1; }

.notice {
  margin: 16px 0 0;
  padding: 10px 14px;
  background: var(--room-raised);
  border-left: 4px solid var(--laser);
  font-size: var(--fs-s);
}

/* company logo tile: the company's own site icon on white, or a monogram when it's too small */
.logo {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--rule);
}
.logo img { width: 72%; height: 72%; object-fit: contain; display: block; }
.logo.is-mono {
  background: linear-gradient(140deg, var(--plasma-deep), var(--plasma));
  color: #fff;
  font-stretch: 75%;
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}
.logo.is-sm { width: 28px; height: 28px; border-radius: 7px; }
.logo.is-sm.is-mono { font-size: 0.7rem; }
.logo.is-lg { width: 56px; height: 56px; border-radius: 14px; }
.logo.is-lg.is-mono { font-size: 1.2rem; }

/* ------------------------------------------------------------------ home hero */
.hero { display: grid; gap: 28px; padding: 36px 0 44px; border-bottom: 2px solid var(--ink); }
@media (min-width: 900px) {
  .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 520px); align-items: start; gap: 28px 48px; padding-top: 52px; }
  .hero-copy { grid-column: 1; grid-row: 1; }
  .wafer-wrap { grid-column: 2; grid-row: 1 / span 2; }
  .readout { grid-column: 1; grid-row: 2; align-self: start; }
}
.mood-line { font-stretch: 112%; font-weight: 820; font-size: var(--fs-hero); letter-spacing: -0.03em; line-height: 0.98; max-width: 11ch; }
.mood-line .emoji { display: inline-block; font-size: 0.92em; vertical-align: -0.06em; }
.mood-detail { margin: 22px 0 0; max-width: 46ch; font-size: var(--fs-l); line-height: 1.4; color: var(--ink-2); }
.extremes { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; margin: 20px 0 0; font-size: var(--fs-m); }
.extremes dt { color: var(--ink-3); }
.extremes dd { margin: 0; }
.extremes button {
  font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--rule-strong); text-underline-offset: 3px;
}

.readout {
  padding: 18px 20px 20px;
  background: var(--room-raised);
  border-top: 3px solid var(--plasma);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 18px;
  align-items: center;
  max-width: 520px;
}
.readout-emoji { font-size: 3.4rem; grid-row: span 2; }
.readout-name { margin: 0; font-size: var(--fs-l); font-weight: 700; font-stretch: 105%; line-height: 1.15; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.readout-name .ticker { font-size: var(--fs-m); color: var(--ink-3); }
.readout-price { margin: 0; font-size: var(--fs-m); }
.readout-spark { grid-column: 1 / -1; width: 100%; height: 44px; margin-top: 10px; }
.readout-foot { grid-column: 1 / -1; font-size: var(--fs-s); color: var(--ink-2); margin: 4px 0 0; }
.readout-spark svg, .spark-cell svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* ------------------------------------------------------------------ the wafer */
.wafer-wrap { width: 100%; max-width: 520px; justify-self: center; margin: 0; }
.wafer {
  position: relative;
  aspect-ratio: 1;
  width: 100%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 24%, rgba(255, 255, 255, 0.14), transparent 40%),
    conic-gradient(from 200deg, #1b1a26, #22304d, #3a2a5c, #1d3a4d, #4a2440, #2a2140, #1b1a26);
  box-shadow:
    inset 0 0 0 6px var(--silicon-edge),
    inset 0 0 0 10px var(--silicon),
    0 22px 50px -20px var(--shadow);
}
.wafer::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1px;
  width: 4.5%;
  aspect-ratio: 1;
  transform: translate(-50%, 50%);
  border-radius: 50%;
  background: var(--room);
}
.wafer-grid { position: absolute; inset: 5%; border-radius: 50%; clip-path: circle(50% at 50% 50%); container-type: inline-size; }
.die {
  position: absolute;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: var(--die);
  color: var(--die-ink);
  font: inherit;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 1px;
  cursor: pointer;
}
.die.is-edge { background: rgba(255, 255, 255, 0.04); cursor: default; pointer-events: none; }
.die .emoji { font-size: clamp(16px, 4.6cqi, 28px); }
.die .ticker { font-size: clamp(7.5px, 1.9cqi, 11px); line-height: 1; color: var(--die-ink); opacity: 0.86; }
.die:hover { box-shadow: inset 0 0 0 2px rgba(157, 123, 255, 0.85); }
.die[aria-pressed="true"] { box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px #9d7bff; z-index: 2; }
.die:focus-visible { outline: 2px solid #8fd8ff; outline-offset: 1px; z-index: 3; }
.die.is-probing { animation: probe 420ms ease-out both; }
@media (prefers-reduced-motion: reduce) { .die.is-probing { animation: none; } }
@keyframes probe {
  0% { opacity: 0.15; filter: saturate(0); }
  55% { opacity: 1; box-shadow: inset 0 0 0 2px rgba(255, 77, 99, 0.9); }
  100% { opacity: 1; filter: none; }
}

.bin-key {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 12px;
  font-size: var(--fs-xs);
  color: var(--ink-2);
}
.bin-key li { white-space: nowrap; }
.bin-key .emoji { font-size: 1rem; margin-right: 3px; vertical-align: -2px; }

/* ------------------------------------------------------------------ market tide */
.tide { padding: 40px 0 44px; border-bottom: 2px solid var(--ink); }
.tide-head { display: grid; gap: 14px; margin-bottom: 20px; }
@media (min-width: 900px) { .tide-head { grid-template-columns: minmax(0, 1fr) auto; align-items: end; } }
.tide-sentence { margin: 0; font-size: var(--fs-l); line-height: 1.35; max-width: 48ch; }
.tide-sentence strong { font-weight: 720; }
.tide-sub { margin: 6px 0 0; font-size: var(--fs-s); color: var(--ink-2); }
.tide-controls { display: grid; gap: 8px; justify-items: start; }
@media (min-width: 900px) { .tide-controls { justify-items: end; } }
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg button {
  font: inherit; font-size: var(--fs-s); font-weight: 620; color: var(--ink); background: transparent;
  border: 1.5px solid var(--rule-strong); border-radius: 999px; padding: 4px 12px; cursor: pointer;
}
.seg button:hover { border-color: var(--plasma); }
.seg button[aria-pressed="true"] { background: var(--plasma); border-color: var(--plasma); color: var(--on-plasma); }
.seg.is-range button { font-stretch: 85%; min-width: 3.1em; }

.tide-chart {
  --seabed: rgba(6, 3, 16, 0.6);
  position: relative;
  height: clamp(300px, 36vw, 440px);
  border-radius: 8px;
  overflow: hidden;
  background: linear-gradient(to bottom, #120c22 0%, var(--room-raised) 70%);
  box-shadow: inset 0 0 0 1px var(--rule);
}
:root[data-theme="light"] .tide-chart { --seabed: rgba(40, 22, 96, 0.35); background: linear-gradient(to bottom, #dcd3f5 0%, #f4f1fb 70%); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .tide-chart { --seabed: rgba(40, 22, 96, 0.35); background: linear-gradient(to bottom, #dcd3f5 0%, #f4f1fb 70%); }
}
.tide-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.tide-slider {
  position: absolute; inset: 0; z-index: 3; cursor: grab; touch-action: pan-y; border-radius: 8px;
}
.tide-slider:active { cursor: grabbing; }
.tide-slider:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--focus); }
.tide-boat-label {
  position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none; will-change: transform;
  display: grid; gap: 1px; padding: 6px 10px; border-radius: 8px; white-space: nowrap;
  background: var(--room); color: var(--ink); border: 1px solid var(--rule-strong);
  box-shadow: 0 8px 22px -10px var(--shadow); font-size: var(--fs-xs);
}
.tide-boat-label strong { font-size: var(--fs-m); font-weight: 720; }
.tide-boat-date { color: var(--ink-2); }
.tide-axis {
  position: absolute; bottom: 8px; left: 10px; right: 10px; z-index: 1; display: flex; justify-content: space-between;
  font-size: var(--fs-xs); color: rgba(255, 255, 255, 0.85); pointer-events: none;
}
.tide-hint { margin: 10px 0 0; font-size: var(--fs-xs); color: var(--ink-3); }
.tide-hint .hint-touch { display: none; }
@media (pointer: coarse) {
  .tide-hint .hint-mouse { display: none; }
  .tide-hint .hint-touch { display: inline; }
}
/* phones: the ocean runs edge to edge */
@media (max-width: 600px) {
  .tide-chart { height: 320px; margin: 0 calc(var(--gutter) * -1); border-radius: 0; box-shadow: none; }
  .tide-slider { border-radius: 0; }
  .tide-boat-label { padding: 5px 9px; }
  .tide-boat-label strong { font-size: var(--fs-s); }
}

/* ------------------------------------------------------------------ home lower */
.home-lower { display: grid; gap: 40px; padding: 40px 0 56px; }
@media (min-width: 900px) { .home-lower { grid-template-columns: minmax(0, 1fr) 300px; gap: 56px; } }
.more-link { display: inline-block; margin-top: 18px; font-weight: 650; }
.themes-note { margin: -6px 0 12px; font-size: var(--fs-s); color: var(--ink-3); }
.themes { list-style: none; margin: 0; padding: 0; }
.themes li { border-top: 1px solid var(--rule); }
.themes li:last-child { border-bottom: 1px solid var(--rule); }
.themes a { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; text-decoration: none; }
.themes a:hover .theme-label { text-decoration: underline; }
.theme-label { font-weight: 600; }
.theme-count { color: var(--ink-3); }
.theme-bar { display: block; height: 3px; background: linear-gradient(to right, var(--plasma), var(--laser)); margin-top: -3px; transform-origin: left; }

/* ------------------------------------------------------------------ stories */
.stories { list-style: none; margin: 0; padding: 0; }
.story { padding: 16px 0 18px; border-top: 1px solid var(--rule); }
.story:first-child { border-top: 0; padding-top: 4px; }
.story-title { display: block; font-size: var(--fs-l); font-weight: 640; line-height: 1.22; text-decoration: none; max-width: 62ch; }
.story-title:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.story-meta { margin: 6px 0 0; font-size: var(--fs-s); color: var(--ink-3); }
.story-meta .src { color: var(--ink-2); font-weight: 600; }
.story-sum {
  margin: 6px 0 0; max-width: 70ch; color: var(--ink-2); font-size: var(--fs-s);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tags { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tag {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px;
  border: 1px solid var(--rule-strong); border-radius: 999px; font-size: var(--fs-xs); text-decoration: none; line-height: 1.5;
}
.tag:hover { border-color: var(--plasma); }
.tag-ticker { border-color: transparent; background: var(--room-deep); }
.tag-ticker .ticker { font-size: var(--fs-s); }

.story-more { margin: 8px 0 0; font-size: var(--fs-s); }
.story-more summary { cursor: pointer; color: var(--ink-2); font-weight: 650; list-style: none; display: inline-flex; align-items: center; gap: 7px; padding: 2px 0; }
.story-more summary::-webkit-details-marker { display: none; }
.story-more summary::before { content: ""; width: 7px; height: 7px; border-right: 2px solid var(--plasma); border-bottom: 2px solid var(--plasma); transform: rotate(-45deg); transition: transform 0.2s ease; margin-left: 2px; }
.story-more[open] summary::before { transform: rotate(45deg); }
.story-more summary:focus-visible { outline: 3px solid var(--mirror); outline-offset: 3px; border-radius: 4px; }
.story-more-list { list-style: none; margin: 6px 0 0; padding: 0 0 0 14px; border-left: 2px solid var(--rule); display: grid; gap: 5px; }
.story-more-list .src { color: var(--ink-3); font-weight: 600; }
.story-more-list a { color: var(--ink); text-decoration-color: transparent; text-underline-offset: 3px; }
.story-more-list a:hover { text-decoration-color: var(--plasma); }
@media (prefers-reduced-motion: reduce) { .story-more summary::before { transition: none; } }
.day-group { margin-top: 30px; }
.day-group h2 {
  font-size: var(--fs-m); font-weight: 760; font-stretch: 110%;
  padding: 8px 0; border-bottom: 2px solid var(--ink); margin-bottom: 4px;
  position: sticky; top: 0; background: var(--room); z-index: 1;
}

/* ------------------------------------------------------------------ filters */
.filters { display: grid; gap: 14px; padding: 18px 0 20px; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--rule); }
.filter-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.field { display: grid; gap: 4px; font-size: var(--fs-s); font-weight: 600; }
.field input, .field select {
  font: inherit; font-weight: 420; font-size: var(--fs-m); color: var(--ink);
  background: var(--room-raised); border: 1.5px solid var(--rule-strong); border-radius: 6px; padding: 8px 10px; min-width: 0;
}
.field input:focus, .field select:focus { border-color: var(--plasma); }
.field input::placeholder { color: var(--ink-3); }
.filter-fields { display: grid; gap: 12px; }
@media (min-width: 720px) { .filter-fields { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } }
.chip {
  font: inherit; font-size: var(--fs-s); font-weight: 600; color: var(--ink); background: transparent;
  border: 1.5px solid var(--rule-strong); border-radius: 999px; padding: 5px 13px; cursor: pointer;
}
.chip:hover { border-color: var(--plasma); }
.chip[aria-pressed="true"] { background: var(--plasma); border-color: var(--plasma); color: var(--on-plasma); }
.chip .count { font-weight: 420; opacity: 0.75; margin-left: 4px; }
.text-button {
  font: inherit; font-size: var(--fs-s); font-weight: 650; color: var(--ink); background: none; border: 0;
  padding: 6px 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.result-count { margin: 16px 0 0; color: var(--ink-2); font-size: var(--fs-s); }
.empty { margin: 28px 0; padding: 24px; background: var(--room-raised); border-left: 4px solid var(--plasma); }

/* ------------------------------------------------------------------ emoji index */
.benchmarks { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 26px; }
.benchmarks li { display: flex; align-items: baseline; gap: 8px; }
.benchmarks .emoji { font-size: 1.6rem; align-self: center; }
.benchmarks .b-name { font-weight: 650; }

.key-full {
  list-style: none; margin: 0 0 30px; padding: 0; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 1px;
  background: var(--rule-strong); border: 1px solid var(--rule-strong); border-radius: 8px; overflow: hidden;
}
.key-full li { background: var(--room-raised); padding: 10px 10px 9px; display: grid; gap: 2px; font-size: var(--fs-xs); color: var(--ink-2); }
.key-full li.is-empty { opacity: 0.5; }
.key-full .emoji { font-size: 1.6rem; }
.key-full .k-tick { display: none; }
.key-full .k-count { color: var(--ink); font-weight: 650; }
.key-full .k-count b { font-weight: 750; }
@media (min-width: 1040px) {
  /* wide screens: the whole scale in one row, biggest gain on the left, like the ruler on the home page */
  .key-full { grid-template-columns: repeat(17, minmax(0, 1fr)); }
  .key-full li { padding: 9px 4px 8px; text-align: center; justify-items: center; }
  .key-full .emoji { font-size: 1.35rem; }
  .key-full .k-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .key-full .k-tick { display: block; font-size: 0.68rem; font-stretch: 80%; font-weight: 600; color: var(--ink-3); }
  .key-full .k-count { font-size: var(--fs-s); }
  .key-full .k-word { display: none; }
}

.table-wrap { overflow-x: auto; margin-bottom: 56px; }
.index-table { width: 100%; border-collapse: collapse; font-size: var(--fs-m); }
.index-table th {
  text-align: left; font-size: var(--fs-s); font-weight: 650; padding: 0 10px 8px;
  border-bottom: 2px solid var(--ink); white-space: nowrap; vertical-align: bottom;
}
.index-table td { padding: 10px; border-bottom: 1px solid var(--rule); vertical-align: middle; }
.index-table .num, .index-table th.num { text-align: right; }
.index-table .mood-cell { font-size: 1.9rem; width: 3rem; padding-left: 0; }
.index-table .co { display: flex; align-items: center; gap: 12px; }
.index-table .co .ticker { display: block; font-size: var(--fs-m); }
.index-table .co .co-name { display: block; font-size: var(--fs-s); color: var(--ink-3); }
.index-table .co a { text-decoration: none; }
.index-table .spark-cell { width: 140px; min-width: 110px; height: 30px; }
.index-table tr.is-stale td { opacity: 0.6; }
.sort-button { font: inherit; font-weight: 650; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
.sort-button .arrow { display: inline-block; width: 1em; color: var(--plasma); }
th[aria-sort="ascending"] .arrow::after { content: "▲"; font-size: 0.7em; }
th[aria-sort="descending"] .arrow::after { content: "▼"; font-size: 0.7em; }
@media (max-width: 720px) {
  .index-table .hide-sm { display: none; }
  .index-table td, .index-table th { padding-left: 6px; padding-right: 6px; }
  .index-table .spark-cell { width: 80px; min-width: 70px; }
  .index-table .co .logo { display: none; }
}

/* ------------------------------------------------------------------ AI stack */
.stack-map { margin: 4px 0 40px; display: grid; gap: 4px; }
.stack-row {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr);
  gap: 0 16px;
  padding: 12px 0;
  border-top: 1px solid var(--rule);
}
.stack-row::before { content: ""; grid-row: 1 / span 2; background: var(--stratum, var(--plasma)); border-radius: 3px; }
@media (min-width: 900px) {
  .stack-row { grid-template-columns: 10px 230px minmax(0, 1fr); align-items: center; }
  .stack-row::before { grid-row: 1; }
}
.stack-row h2 { font-size: var(--fs-m); font-stretch: 110%; font-weight: 760; }
.stack-row h2 a { text-decoration: none; }
.stack-row h2 a:hover { text-decoration: underline; }
.stack-row .row-mood { display: block; margin-top: 3px; font-size: var(--fs-xs); color: var(--ink-3); font-weight: 420; font-stretch: 100%; }
.stack-dies { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; grid-column: 2; }
@media (min-width: 900px) { .stack-dies { margin: 0; grid-column: 3; } }
.mini-die {
  display: grid; justify-items: center; gap: 2px; min-width: 64px; padding: 7px 6px 6px;
  background: var(--silicon); color: var(--die-ink); border-radius: 6px; text-decoration: none; font-size: var(--fs-xs);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.mini-die .emoji { font-size: 1.4rem; }
.mini-die .ticker { font-size: var(--fs-s); }
.mini-die:hover { box-shadow: inset 0 0 0 2px var(--plasma); }
.stack-note { font-size: var(--fs-s); color: var(--ink-3); grid-column: 2; margin: 4px 0 0; }
@media (min-width: 900px) { .stack-note { grid-column: 3; margin: 0; } }

.layer-jump {
  position: sticky; top: 0; z-index: 3; background: var(--room);
  display: flex; gap: 6px; overflow-x: auto; padding: 10px 0; margin: 0 0 8px; border-bottom: 1px solid var(--rule);
  scrollbar-width: thin;
}
.layer-jump a {
  flex: none; font-size: var(--fs-s); font-weight: 620; text-decoration: none; padding: 4px 12px;
  border: 1.5px solid var(--rule-strong); border-radius: 999px;
}
.layer-jump a:hover { border-color: var(--plasma); }

.layer-section { padding-top: 28px; scroll-margin-top: 60px; }
.layer-head { display: grid; gap: 6px; padding-bottom: 14px; border-bottom: 2px solid var(--ink); }
.layer-head h2 { font-size: var(--fs-2xl); font-stretch: 116%; font-weight: 820; letter-spacing: -0.02em; display: flex; align-items: center; gap: 14px; }
.layer-head h2::before { content: ""; width: 14px; height: 0.9em; border-radius: 3px; background: var(--stratum, var(--plasma)); }
.layer-head p { margin: 0; color: var(--ink-2); max-width: 62ch; }
.layer-head .layer-mood { display: flex; align-items: center; gap: 8px; font-size: var(--fs-s); color: var(--ink-2); }
.layer-head .layer-mood .emoji { font-size: 1.6rem; }

.profile { padding: 34px 0 36px; border-bottom: 1px solid var(--rule); scroll-margin-top: 60px; }
.profile-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.profile-title { flex: 1 1 260px; min-width: 0; }
.profile-title h3 { font-size: var(--fs-xl); font-stretch: 112%; font-weight: 800; letter-spacing: -0.02em; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.profile-title h3 .ticker { font-size: var(--fs-m); color: var(--ink-3); letter-spacing: 0.02em; }
.profile-meta { margin: 4px 0 0; font-size: var(--fs-s); color: var(--ink-3); }
.profile-quote {
  display: flex; align-items: center; gap: 12px; padding: 8px 14px 8px 10px; border-radius: 999px;
  background: var(--room-raised); box-shadow: inset 0 0 0 1px var(--rule);
}
.profile-quote .emoji { font-size: 1.9rem; }
.profile-quote .q-price { font-weight: 650; }
.profile-quote .q-sub { display: block; font-size: var(--fs-xs); color: var(--ink-3); }
.profile-specialty {
  margin: 20px 0 0; max-width: 54ch; font-size: var(--fs-l); line-height: 1.35; font-weight: 560;
  padding-left: 16px; border-left: 3px solid var(--laser);
}
.profile-body { display: grid; gap: 22px 48px; margin-top: 24px; }
@media (min-width: 900px) { .profile-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.profile-body h4 { font-size: var(--fs-m); font-stretch: 108%; font-weight: 740; margin-bottom: 8px; color: var(--ink); }
.profile-body p { margin: 0; color: var(--ink-2); max-width: 64ch; }
.profile-body section.is-why h4 { color: var(--up); }
.profile-body section.is-risk h4 { color: var(--down); }
.products { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.products li { font-size: var(--fs-xs); padding: 3px 9px; border-radius: 999px; background: var(--room-deep); color: var(--ink); }
.risks { margin: 0; padding-left: 1.1em; color: var(--ink-2); display: grid; gap: 6px; }
.risks li::marker { color: var(--down); }
.profile-foot { margin: 22px 0 0; display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: var(--fs-s); font-weight: 620; }

/* ------------------------------------------------------------------ learn */
.learn-group { padding: 8px 0 20px; }
.learn-group h2, .learn-group[id] { scroll-margin-top: 16px; }
.learn-jump { display: flex; flex-wrap: wrap; gap: 6px; margin: 18px 0 26px; }
.learn-jump a {
  font-size: var(--fs-s); font-weight: 620; text-decoration: none; padding: 4px 12px;
  border: 1.5px solid var(--rule-strong); border-radius: 999px;
}
.learn-jump a:hover { border-color: var(--plasma); }

/* how a language model works */
.ai-explainer { padding: 18px 0 6px; border-bottom: 1px solid var(--rule); }
.ai-title { font-size: var(--fs-l); font-stretch: 110%; font-weight: 760; margin: 4px 0 14px; }
.ai-steps { list-style: none; margin: 0; padding: 0; counter-reset: ai; display: grid; gap: 18px 36px; }
@media (min-width: 820px) { .ai-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .ai-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ai-steps li { counter-increment: ai; padding-top: 12px; border-top: 2px solid var(--plasma); }
.ai-steps h4 { margin: 0; font-size: var(--fs-m); font-weight: 720; line-height: 1.3; }
.ai-steps h4::before { content: counter(ai) ". "; color: var(--plasma); font-stretch: 110%; }
.ai-steps p { margin: 6px 0 0; color: var(--ink-2); font-size: var(--fs-s); line-height: 1.55; }
.ai-notes { display: grid; gap: 4px 36px; margin: 22px 0 8px; }
@media (min-width: 820px) { .ai-notes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ai-notes p { margin: 0 0 12px; color: var(--ink-2); font-size: var(--fs-s); line-height: 1.55; max-width: 64ch; }
.ai-notes strong { color: var(--ink); }

/* next-token demo */
.nt {
  margin: 28px 0 8px; padding: 18px 20px 16px; border-radius: 14px; background: var(--room-raised);
  box-shadow: inset 0 0 0 1px var(--rule-strong); max-width: 760px;
}
.nt-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin-bottom: 12px; }
.nt-title { font-weight: 760; font-size: var(--fs-m); font-stretch: 108%; }
.nt-note { font-size: var(--fs-xs); color: var(--ink-3); }
.nt-label { margin: 0 0 6px; font-size: var(--fs-xs); color: var(--ink-3); font-weight: 600; }
.nt-tokens { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 5px; }
.nt-tokens li, .nt-tok {
  font: 600 var(--fs-s) / 1.3 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; padding: 3px 8px; border-radius: 6px;
  background: color-mix(in oklab, var(--plasma) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--plasma) 40%, transparent);
}
.nt-tokens li:nth-child(even) { background: color-mix(in oklab, var(--mirror) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--mirror) 40%, transparent); }
.has-space::before { content: "·"; color: var(--ink-3); margin-right: 1px; }
.nt-tokens li.is-new { background: var(--plasma); color: var(--on-plasma); box-shadow: none; animation: nt-pop 0.35s ease; }
.nt-tokens li.is-new::before { color: inherit; opacity: 0.6; }
@keyframes nt-pop { from { transform: translateY(6px); opacity: 0; } to { transform: none; opacity: 1; } }
.nt-pass { margin: 12px 0; display: flex; align-items: center; gap: 10px; font-size: var(--fs-xs); color: var(--ink-3); }
.nt-pass::before, .nt-pass::after { content: ""; flex: 1; height: 0; border-top: 1.5px dashed var(--rule-strong); }
.nt-pass span { padding: 3px 10px; border-radius: 999px; border: 1.5px solid var(--rule-strong); white-space: nowrap; }
.nt-probs { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.nt-probs[hidden], .nt-label[hidden], .nt-pass[hidden] { display: none; }
.nt-probs li { display: flex; gap: 10px; align-items: center; }
.nt.is-live .nt-probs li { display: grid; grid-template-columns: minmax(96px, 9rem) minmax(0, 1fr) 3.2em; }
.nt-probs .nt-tok { justify-self: start; }
.nt-probs li.is-top .nt-tok { background: var(--plasma); color: var(--on-plasma); box-shadow: none; }
.nt-probs li.is-top .nt-tok::before { color: inherit; opacity: 0.6; }
.nt-bar { display: none; height: 10px; border-radius: 5px; background: var(--rule); overflow: hidden; }
.nt.is-live .nt-bar { display: block; }
.nt-bar > span { display: block; height: 100%; background: var(--mirror); transform-origin: left center; transition: transform 0.45s ease; }
.nt-probs li.is-top .nt-bar > span { background: var(--plasma); }
.nt-pct { font-size: var(--fs-s); font-variant-numeric: tabular-nums; color: var(--ink-2); text-align: right; }
.nt-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 14px; }
.nt-status { margin: 0; flex-basis: 100%; font-size: var(--fs-s); color: var(--ink-2); min-height: 1.4em; }
.nt-foot { margin: 10px 0 0; font-size: var(--fs-xs); color: var(--ink-3); line-height: 1.5; }
@media (prefers-reduced-motion: reduce) { .nt-tokens li.is-new { animation: none; } .nt-bar > span { transition: none; } }

/* attention visualiser */
.att { max-width: none; }
.att-intro { margin: 0 0 12px; font-size: var(--fs-s); color: var(--ink-2); line-height: 1.55; max-width: 70ch; }
.att-heads { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 4px; }
.att-stage { position: relative; padding-top: 66px; }
@media (max-width: 640px) { .att-stage { padding-top: 44px; } }
.att-arcs { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.att-arc { fill: none; stroke: var(--mirror); stroke-linecap: round; }
.att-dot { fill: var(--mirror); }
.att-dot.is-sel { fill: var(--plasma); }
.att-tokens { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 7px 5px; }
.att-tok {
  --w: 0; position: relative; font: 600 13.5px / 1.3 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; color: var(--ink);
  padding: 4px 7px; border: 0; border-radius: 6px; cursor: pointer; transition: background 0.2s ease, opacity 0.2s ease;
  background: color-mix(in oklab, var(--mirror) calc(8% + var(--w) * 80%), transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--mirror) calc(30% + var(--w) * 60%), transparent);
}
.att-tok:hover { box-shadow: inset 0 0 0 1.5px var(--mirror); }
.att-tok.is-sel, .att-tok.is-sel:hover { background: var(--plasma); color: var(--on-plasma); box-shadow: none; }
.att-tok.is-sel::before { color: inherit; opacity: 0.6; }
.att-tok.is-future { opacity: 0.32; background: transparent; box-shadow: inset 0 0 0 1px var(--rule-strong); }
.att-tok:focus-visible { outline: 2px solid var(--plasma); outline-offset: 2px; }
.att-mask { margin: 10px 0 0; font-size: var(--fs-xs); color: var(--ink-3); min-height: 1.4em; }
.att-read { display: grid; gap: 10px 28px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--rule); }
@media (min-width: 640px) { .att-read { grid-template-columns: minmax(0, 1.4fr) minmax(200px, 1fr); } }
.att-why { margin: 0; font-size: var(--fs-s); color: var(--ink-2); line-height: 1.55; }
.att-lead { color: var(--ink); font-weight: 600; }
.att-top { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; align-content: start; }
.att-top li { display: grid; grid-template-columns: minmax(64px, 7rem) minmax(0, 1fr) 3em; gap: 10px; align-items: center; }
.att-top-tok { font: 600 var(--fs-xs) / 1.3 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att-bar { display: block; height: 9px; border-radius: 5px; background: var(--rule); overflow: hidden; }
.att-bar > span { display: block; height: 100%; background: var(--mirror); transform-origin: left center; transition: transform 0.35s ease; }
.att-top-pct { font-size: var(--fs-xs); font-variant-numeric: tabular-nums; color: var(--ink-2); text-align: right; }
.att-tries { margin: 12px 0 0; font-size: var(--fs-s); color: var(--ink-2); }
.att-tries .text-button { padding: 0; }
@media (prefers-reduced-motion: reduce) { .att-tok, .att-bar > span { transition: none; } }
.learn-group > h2 { font-size: var(--fs-l); font-stretch: 112%; font-weight: 780; padding-bottom: 10px; border-bottom: 2px solid var(--ink); }
.learn-group > p { margin: 10px 0 0; color: var(--ink-2); max-width: 62ch; }
.resources { list-style: none; margin: 0; padding: 0; }
.resource { display: grid; gap: 6px 32px; padding: 22px 0; border-bottom: 1px solid var(--rule); }
@media (min-width: 820px) { .resource { grid-template-columns: 280px minmax(0, 1fr); } }
.resource h3 { font-size: var(--fs-xl); font-stretch: 115%; font-weight: 800; letter-spacing: -0.02em; }
.resource h3 a { text-decoration: none; }
.resource h3 a:hover { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 4px; }
.resource-by { margin: 6px 0 0; font-size: var(--fs-s); color: var(--ink-3); }
.resource-body p { margin: 0 0 10px; max-width: 64ch; color: var(--ink-2); }
.resource-body strong { color: var(--ink); }
.resource-links { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: var(--fs-s); font-weight: 650; }
.cost {
  display: inline-block; margin-top: 10px; font-size: var(--fs-xs); font-weight: 650; padding: 2px 9px;
  border-radius: 999px; background: var(--plasma); color: var(--on-plasma);
}

/* ------------------------------------------------------------------ footer */
.site-foot { border-top: 2px solid var(--ink); padding: 22px 0 40px; font-size: var(--fs-s); color: var(--ink-2); display: grid; gap: 10px; }
.site-foot p { margin: 0; max-width: 72ch; }
.theme-toggle {
  justify-self: start; font: inherit; font-size: var(--fs-s); font-weight: 650; color: var(--ink); background: none;
  border: 1.5px solid var(--rule-strong); border-radius: 999px; padding: 4px 12px; cursor: pointer;
}
.theme-toggle:hover { border-color: var(--plasma); }
.spacer { height: 48px; }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* emoji scale, drawn as a ruler from the biggest gain to the biggest loss */
.bin-scale-wrap { margin: 18px 0 0; }
.bin-scale {
  list-style: none; margin: 0; padding: 0 0 8px; display: grid; grid-template-columns: repeat(17, minmax(0, 1fr)); gap: 0;
  background: linear-gradient(to right, var(--up), var(--plasma) 50%, var(--down)) bottom / 100% 3px no-repeat;
}
.bin-scale li { display: grid; justify-items: center; gap: 4px; padding-bottom: 6px; position: relative; cursor: default; }
.bin-scale li::after { content: ""; position: absolute; bottom: -8px; width: 1px; height: 7px; background: var(--rule-strong); }
.bin-scale .emoji { font-size: clamp(0.85rem, 2.9vw, 1.15rem); }
.bin-scale .tick { font-size: 0.66rem; font-stretch: 75%; font-weight: 600; color: var(--ink-3); line-height: 1; }
.bin-scale li.is-flat .tick { color: var(--ink); }
.bin-caption { margin: 12px 0 0; text-align: center; font-size: var(--fs-xs); color: var(--ink-3); }
.profiles-note { margin: 28px 0 0; font-size: var(--fs-s); color: var(--ink-3); }
.stack-row::before { align-self: stretch; min-height: 2.6em; }
.key-full { gap: 0; background: var(--room-raised); }
.key-full li { box-shadow: inset -1px -1px 0 var(--rule); }
.key-full li.is-empty { opacity: 1; }
.key-full li.is-empty > * { opacity: 0.4; }
.index-table a.co { text-decoration: none; }
.index-table a.co:hover .ticker { text-decoration: underline; text-decoration-color: var(--plasma); text-underline-offset: 3px; }

/* ------------------------------------------------------------------ explainers (always dark, like the vacuum chamber) */
body { overflow-x: clip; }
.explainer {
  margin: 0 calc(50% - 50vw);
  color: #efeaf7;
  background:
    radial-gradient(1100px 520px at 18% 32%, rgba(109, 77, 255, 0.2), transparent 62%),
    radial-gradient(900px 480px at 88% 85%, rgba(255, 77, 99, 0.1), transparent 60%),
    #06050a;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.xp-inner { max-width: var(--max); margin: 0 auto; padding: 72px var(--gutter) 64px; }
.xp-head { max-width: 1000px; margin-bottom: 28px; }
.xp-title { font-stretch: 118%; font-weight: 820; font-size: var(--fs-2xl); letter-spacing: -0.025em; line-height: 1.05; }
.xp-lede { margin: 12px 0 0; color: #c6bcd9; font-size: var(--fs-m); max-width: 62ch; }
.xp-kicker { margin: 0 0 10px; font-size: var(--fs-s); font-weight: 700; color: #b9ddf5; letter-spacing: 0.02em; }
.xp-kicker a { color: #8fd8ff; text-decoration-color: rgba(143, 216, 255, 0.45); }
.xp-next { margin: 18px 0 0; font-weight: 700; }
.xp-next a { color: #c9b8ff; }
.explainer.gpu .xp-title, .explainer.net .xp-title, .explainer.dc .xp-title { font-size: clamp(2.2rem, 5vw, 3.6rem); }
h1.xp-title { margin: 0; }

/* the GPU page's flat diagram (shown until the 3D gallery loads, and on devices without WebGL) */
.gpu-svg { display: block; width: 100%; height: auto; }
.gpu-substrate { fill: #16302a; stroke: rgba(143, 216, 255, 0.25); stroke-width: 1.5; }
.gpu-interposer { fill: #2d2f45; stroke: rgba(255, 255, 255, 0.25); }
.gpu-hbm { fill: #2a2440; stroke: rgba(157, 123, 255, 0.6); stroke-width: 1.5; }
.gpu-die { fill: #16122a; stroke: rgba(143, 216, 255, 0.5); stroke-width: 1.5; }
.gpu-sm { fill: #3f6a9a; animation: gpu-sm 2.6s ease-in-out infinite; }
@keyframes gpu-sm { 0%, 100% { fill: #2f4f78; } 50% { fill: #8fd8ff; } }
.gpu-l2 { fill: #5b3fd0; }
.gpu-ctl { fill: #2f2a55; }
.gpu-nvlink { fill: #3a2a5a; }
.gpu-label { fill: #c6bcd9; font: 600 16px "Archivo", sans-serif; }
.gpu-svg.is-focus [data-part]:not(.is-active) { opacity: 0.3; }
@media (hover: hover) and (min-width: 900px) { .gpu-svg [data-part].is-active { filter: drop-shadow(0 0 7px rgba(157, 123, 255, 0.75)); } }
@media (max-width: 700px) { .gpu-label { display: none; } }
@media (prefers-reduced-motion: reduce) { .gpu-sm { animation: none; } }

/* ------------------------------------------------------------------ jiu-jitsu position map */
.bj-controls { display: grid; gap: 10px; padding: 16px 0 14px; border-top: 2px solid var(--ink); }
.bj-controls .seg button, .bj-controls .chip { font-size: var(--fs-xs); display: inline-flex; align-items: center; gap: 7px; }
.bj-hint { margin: 0; font-size: var(--fs-xs); color: var(--ink-3); }
.bj-map-wrap { margin: 4px 0 0; }
@media (min-width: 1240px) { .bj-map-wrap { --mapw: min(100vw - 2 * var(--gutter), 1500px); width: var(--mapw); margin-left: calc(50% - var(--mapw) / 2); } }
.bj-map { display: block; width: 100%; height: auto; font-family: "Archivo", sans-serif; }
.bj-cap { fill: var(--ink-3); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.bj-subcap { fill: var(--ink-3); font-size: 10px; font-weight: 600; opacity: 0.85; }
.bj-edge { fill: none !important; stroke-width: 1.3; stroke-opacity: 0.13; transition: stroke-opacity 0.25s ease, stroke-width 0.25s ease; }
.bj-edge.who-top { stroke-dasharray: 5 4; }
.bj-edge.is-on { stroke-opacity: 0.95; stroke-width: 2.4; }
.bj-edge.is-in { stroke-opacity: 0.55; stroke-width: 1.6; }
.bj-edge.is-dim { stroke-opacity: 0.035; }
.bj-edge.is-off { display: none; }
.bj-edge.is-sweep, .bj-dot.is-sweep, .bj-swatch.is-sweep, .is-sweep > .bj-swatch { stroke: var(--bj-sweep); fill: var(--bj-sweep); background: var(--bj-sweep); }
.bj-edge.is-pass, .bj-dot.is-pass, .bj-swatch.is-pass, .is-pass > .bj-swatch { stroke: var(--bj-pass); fill: var(--bj-pass); background: var(--bj-pass); }
.bj-edge.is-sub, .bj-dot.is-sub, .bj-swatch.is-sub, .is-sub > .bj-swatch { stroke: var(--bj-sub); fill: var(--bj-sub); background: var(--bj-sub); }
.bj-edge.is-back, .bj-dot.is-back, .bj-swatch.is-back, .is-back > .bj-swatch { stroke: var(--bj-back); fill: var(--bj-back); background: var(--bj-back); }
.bj-edge.is-entry, .bj-dot.is-entry, .bj-swatch.is-entry, .is-entry > .bj-swatch { stroke: var(--bj-entry); fill: var(--bj-entry); background: var(--bj-entry); }
.bj-edge.is-takedown, .bj-dot.is-takedown, .bj-swatch.is-takedown, .is-takedown > .bj-swatch { stroke: var(--bj-takedown); fill: var(--bj-takedown); background: var(--bj-takedown); }
.bj-edge.is-pull, .bj-dot.is-pull, .bj-swatch.is-pull, .is-pull > .bj-swatch { stroke: var(--bj-pull); fill: var(--bj-pull); background: var(--bj-pull); }
.bj-edge.is-move, .bj-dot.is-move, .bj-swatch.is-move, .is-move > .bj-swatch { stroke: var(--bj-move); fill: var(--bj-move); background: var(--bj-move); }
.bj-edge.is-escape, .bj-dot.is-escape, .bj-swatch.is-escape, .is-escape > .bj-swatch { stroke: var(--bj-escape); fill: var(--bj-escape); background: var(--bj-escape); }
.bj-dot { stroke: none; opacity: 0.95; }
.bj-node { cursor: pointer; transition: opacity 0.25s ease; outline: none; }
.bj-node.is-dim { opacity: 0.22; }
.bj-box { fill: var(--room-raised); stroke: var(--stratum, var(--rule-strong)); stroke-width: 1.5; transition: stroke-width 0.2s ease; }
.bj-node:hover .bj-box, .bj-node:focus-visible .bj-box { stroke-width: 2.5; }
.bj-node.is-self .bj-box { fill: var(--plasma); stroke: var(--plasma); stroke-width: 2.5; }
.bj-node.is-self text { fill: var(--on-plasma); }
.bj-node.is-next .bj-box { stroke-width: 2.5; stroke: var(--laser); }
.bj-node.is-prev .bj-box { stroke-width: 2.5; stroke: var(--mirror); }
.bj-node:focus-visible .bj-box { stroke: var(--mirror); stroke-width: 3; }
.bj-tick { fill: var(--ink); font-size: 12px; font-weight: 750; }
.bj-tick.is-tiny { font-size: 11px; }
.bj-sub { fill: var(--ink-3); font-size: 10px; font-weight: 600; letter-spacing: 0.02em; }
.bj-legend { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: var(--fs-xs); color: var(--ink-2); }
.bj-legend li { display: inline-flex; align-items: center; gap: 7px; }
.bj-swatch { width: 18px; height: 3px; border-radius: 2px; display: inline-block; flex: none; background: currentColor; }
.bj-panel { margin: 22px 0 0; padding: 20px 22px 18px; border-radius: 16px; background: var(--room-raised); box-shadow: inset 0 0 0 1px var(--rule-strong); display: grid; gap: 16px; }
.bj-layer { margin: 0 0 4px; font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); }
.bj-panel-head h2 { margin: 0; font-size: var(--fs-xl); font-stretch: 112%; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.bj-aka { font-size: var(--fs-s); font-weight: 600; color: var(--ink-3); font-stretch: 100%; letter-spacing: 0; }
.bj-tags { margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.bj-tag { font-size: var(--fs-xs); font-weight: 650; color: var(--ink-2); border: 1.5px solid var(--rule-strong); border-radius: 999px; padding: 2px 9px; }
.bj-desc { margin: 10px 0 0; font-size: var(--fs-m); color: var(--ink); max-width: 70ch; }
.bj-keys { margin: 10px 0 0; padding: 0 0 0 18px; font-size: var(--fs-s); color: var(--ink-2); max-width: 70ch; display: grid; gap: 3px; }
.bj-rules { margin: 10px 0 0; padding: 8px 12px; border-left: 3px solid var(--laser); font-size: var(--fs-s); color: var(--ink-2); max-width: 70ch; }
.bj-filter-note { margin: -6px 0 0; font-size: var(--fs-xs); }
.bj-cols { display: grid; gap: 16px 28px; }
@media (min-width: 760px) { .bj-cols { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } }
.bj-cols h3 { margin: 0 0 10px; font-size: var(--fs-s); font-weight: 750; color: var(--ink-2); text-transform: uppercase; letter-spacing: 0.04em; }
.bj-group + .bj-group { margin-top: 12px; }
.bj-group h4 { margin: 0 0 6px; font-size: var(--fs-xs); font-weight: 700; color: var(--ink-3); display: inline-flex; align-items: center; gap: 7px; }
.bj-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.bj-list li { display: grid; gap: 1px; }
.bj-list.is-compact { gap: 5px; }
.bj-chip { display: inline-flex; align-items: center; gap: 7px; font: inherit; font-size: var(--fs-s); color: var(--ink); background: none; border: 0; padding: 0; cursor: pointer; text-align: left; justify-self: start; }
.bj-chip b { font-weight: 750; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: text-decoration-color 0.2s ease; }
.bj-to { color: var(--ink-3); font-weight: 550; }
.bj-chip:hover .bj-to { color: var(--ink-2); }
.bj-chip { flex-wrap: wrap; }
.bj-chip:hover b { text-decoration-color: var(--plasma); }
.bj-chip:focus-visible { outline: 3px solid var(--mirror); outline-offset: 3px; border-radius: 4px; }
.bj-what { font-size: var(--fs-xs); color: var(--ink-3); padding-left: 25px; }
.bj-note { margin: 18px 0 0; font-size: var(--fs-xs); color: var(--ink-3); max-width: 72ch; }
.bj-concepts { margin: 40px 0 0; }
.bj-io { display: grid; gap: 20px; }
@media (min-width: 760px) { .bj-io { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; } }
.bj-io-fig { margin: 0; display: grid; gap: 12px; }
.bj-io-svg { display: block; width: 100%; max-width: 300px; height: auto; }
.bj-io-fig figcaption { font-size: var(--fs-s); color: var(--ink-2); max-width: 60ch; }
.bj-io-fig figcaption b { color: var(--ink); }
.io-mat { fill: var(--room-raised); stroke: var(--rule-strong); }
.io-them rect, .io-them ellipse { fill: color-mix(in oklab, var(--ink-3) 55%, var(--room-raised)); }
.io-you rect, .io-you ellipse { fill: var(--plasma); }
.io-you path { fill: none; stroke: var(--plasma); stroke-width: 28; stroke-linecap: round; }
.io-label { fill: var(--ink-3); font: 600 11px "Archivo", sans-serif; letter-spacing: 0.04em; text-transform: uppercase; }
.bj-io-note { margin: 18px 0 0; font-size: var(--fs-s); color: var(--ink-2); max-width: 72ch; }
.bj-tables { display: grid; gap: 20px; margin: 18px 0 0; }
@media (min-width: 760px) { .bj-tables { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; align-items: start; } }
.bj-table { width: 100%; border-collapse: collapse; font-size: var(--fs-s); }
.bj-table caption { text-align: left; font-weight: 750; color: var(--ink-2); font-size: var(--fs-s); text-transform: uppercase; letter-spacing: 0.04em; padding: 0 0 8px; }
.bj-table th, .bj-table td { text-align: left; padding: 7px 10px 7px 0; border-top: 1px solid var(--rule-strong); vertical-align: top; }
.bj-table th { font-size: var(--fs-xs); color: var(--ink-3); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; border-top: 0; }
.bj-table td:last-child { font-weight: 650; color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .bj-edge, .bj-node, .bj-box { transition: none; } }

/* the networking explainer's flat diagram */
.net-svg { display: block; width: 100%; height: auto; }
.net-core { fill: #5a2a3a; stroke: rgba(255, 107, 127, 0.6); stroke-width: 1.5; }
.net-spine { fill: #3a2f7a; stroke: rgba(183, 157, 255, 0.6); stroke-width: 1.5; }
.net-leaf { fill: #24405a; stroke: rgba(143, 216, 255, 0.6); stroke-width: 1.5; }
.net-link { stroke: rgba(183, 157, 255, 0.35); stroke-width: 1.2; }
.net-link-up { stroke: rgba(255, 107, 127, 0.4); }
.net-engine { fill: #8fd8ff; }
.net-fibre { stroke: rgba(183, 157, 255, 0.75); stroke-width: 2; stroke-dasharray: 5 5; animation: net-fibre 3s linear infinite; }
@keyframes net-fibre { to { stroke-dashoffset: -40; } }
.net-xcvr { fill: #c6bcd9; stroke: rgba(255, 255, 255, 0.3); }
.net-rack { fill: #16122a; stroke: rgba(255, 255, 255, 0.22); stroke-width: 1.5; }
.net-nic { fill: #4fae8a; }
.net-gpu { fill: #3f6a9a; stroke: rgba(143, 216, 255, 0.5); }
.net-gpu-dim { fill: #26324a; }
.net-nvsw { fill: #5b3fd0; }
.net-brace { fill: none; stroke-width: 2; }
.net-brace-up { stroke: rgba(143, 216, 255, 0.8); }
.net-brace-out { stroke: rgba(183, 157, 255, 0.8); }
.net-ring { fill: none; stroke: rgba(123, 224, 168, 0.75); stroke-width: 2.5; stroke-dasharray: 6 6; animation: net-fibre 2.4s linear infinite; }
.net-ring-arrow { fill: rgba(123, 224, 168, 0.9); }
.net-label { fill: #c6bcd9; font: 600 15px "Archivo", sans-serif; }
.net-label-side { fill: #8f85a8; font-size: 13px; }
.net-svg [data-part] { cursor: pointer; }
.net-svg.is-focus [data-part]:not(.is-active) { opacity: 0.3; }
@media (hover: hover) and (min-width: 900px) { .net-svg [data-part].is-active { filter: drop-shadow(0 0 7px rgba(157, 123, 255, 0.75)); } }
@media (max-width: 700px) { .net-label { display: none; } }
@media (prefers-reduced-motion: reduce) { .net-fibre, .net-ring { animation: none; } }

/* the data-centre explainer's flat diagram */
.dc-svg { display: block; width: 100%; height: auto; }
.dc-line { fill: none; stroke: rgba(255, 184, 107, 0.7); stroke-width: 2.5; }
.dc-line-dim { stroke: rgba(255, 184, 107, 0.3); stroke-dasharray: 5 5; }
.dc-pylon { fill: none; stroke: rgba(198, 188, 217, 0.6); stroke-width: 1.5; }
.dc-plant { fill: #3a3d4a; stroke: rgba(255, 255, 255, 0.25); }
.dc-stack { fill: #6f7490; }
.dc-xfmr { fill: #4a5664; stroke: rgba(255, 255, 255, 0.3); stroke-width: 1.5; }
.dc-xfmr-fin { fill: #6f7a86; }
.dc-bush { fill: #c9b88a; }
.dc-cab { fill: #3a3450; stroke: rgba(255, 255, 255, 0.25); }
.dc-ups { fill: #2a3f6a; }
.dc-bus { fill: #e6a060; }
.dc-gen { fill: #6a5428; stroke: rgba(255, 255, 255, 0.25); }
.dc-batt { fill: #2a3f6a; stroke: rgba(143, 216, 255, 0.5); }
.dc-rack { fill: #16122a; stroke: rgba(157, 123, 255, 0.55); stroke-width: 1.5; }
.dc-pue-it { fill: #3f6a9a; } .dc-pue-cool { fill: #b86b3a; } .dc-pue-loss { fill: #7a2a3a; }
.dc-aisle-cold { fill: rgba(143, 216, 255, 0.3); } .dc-aisle-hot { fill: rgba(255, 138, 91, 0.5); }
.dc-plate { fill: #d3864a; }
.dc-cdu { fill: #23203a; stroke: rgba(143, 216, 255, 0.5); stroke-width: 1.5; }
.dc-pipe-cold { stroke: #2a9fd8; stroke-width: 4; fill: none; } .dc-pipe-warm { stroke: #d8685a; stroke-width: 4; fill: none; } .dc-pipe-fac { stroke: #e0a060; stroke-width: 5; fill: none; }
.dc-tower { fill: #4a5664; stroke: rgba(255, 255, 255, 0.3); }
.dc-plume { fill: rgba(216, 220, 232, 0.25); animation: dc-plume 4s ease-in-out infinite; }
@keyframes dc-plume { 50% { transform: translateY(-6px); opacity: 0.6; } }
.dc-dry { fill: #4a5664; stroke: rgba(255, 255, 255, 0.3); }
.dc-fan { fill: #2a2c36; stroke: rgba(255, 255, 255, 0.45); stroke-width: 2; stroke-dasharray: 4 4; animation: dc-fan 3s linear infinite; transform-box: fill-box; transform-origin: center; }
@keyframes dc-fan { to { transform: rotate(360deg); } }
.dc-fence { fill: none; stroke: rgba(157, 123, 255, 0.3); stroke-width: 1.5; stroke-dasharray: 8 6; }
.dc-label { fill: #c6bcd9; font: 600 14px "Archivo", sans-serif; }
.dc-svg [data-part] { cursor: pointer; }
.dc-svg.is-focus [data-part]:not(.is-active) { opacity: 0.3; }
@media (hover: hover) and (min-width: 900px) { .dc-svg [data-part].is-active { filter: drop-shadow(0 0 7px rgba(157, 123, 255, 0.75)); } }
@media (max-width: 700px) { .dc-label { display: none; } }
@media (prefers-reduced-motion: reduce) { .dc-plume, .dc-fan { animation: none; } }

/* the fab explainer's flat diagram */
.fab-svg { display: block; width: 100%; height: auto; }
.fab-frame { fill: none; stroke: rgba(157, 123, 255, 0.35); stroke-width: 1.5; stroke-dasharray: 6 6; }
.fab-sub { fill: #6f7490; }
.fab-sti { fill: #2b3350; }
.fab-fin { fill: #9aa0bc; }
.fab-gate { fill: #6f5fd8; }
.fab-sd { fill: #4fae8a; }
.fab-diel { fill: rgba(43, 42, 74, 0.55); }
.fab-metal rect { fill: #e6a060; }
.fab-metal rect:nth-child(-n+2) { fill: #b8b0c8; }
.fab-via rect { fill: #e6a060; }
.fab-label { fill: #c6bcd9; font: 600 15px "Archivo", sans-serif; }
.fab-label-big { font-size: 17px; fill: #efeaf7; }
.fab-label-dim { fill: #8f85a8; font-weight: 500; font-size: 13px; }
.fab-ring-path { fill: none; stroke: rgba(143, 216, 255, 0.45); stroke-width: 2; stroke-dasharray: 5 5; animation: fab-ring 30s linear infinite; }
@keyframes fab-ring { to { stroke-dashoffset: -300; } }
.fab-ring-arrow { fill: rgba(143, 216, 255, 0.7); }
.fab-exit { stroke: rgba(123, 224, 168, 0.7); stroke-width: 2; stroke-dasharray: 4 4; fill: none; }
.fab-node { stroke: rgba(255, 255, 255, 0.25); stroke-width: 1.5; }
.fab-node-wet { fill: #214a52; } .fab-node-dep { fill: #24405a; } .fab-node-litho { fill: #3a2f7a; } .fab-node-etch { fill: #5a2a3a; }
.fab-node-implant { fill: #5a3a22; } .fab-node-cmp { fill: #2a4a3a; } .fab-node-metro { fill: #4f4a22; } .fab-node-test { fill: #3a3a52; }
.fab-node-label { fill: #efeaf7; font: 600 15px "Archivo", sans-serif; }
.fab-svg [data-part] { cursor: pointer; }
.fab-svg.is-focus [data-part]:not(.is-active) { opacity: 0.35; }
.fab-svg [data-part].is-active .fab-node { stroke: var(--plasma); stroke-width: 3; }
@media (hover: hover) and (min-width: 900px) { .fab-svg [data-part].is-active { filter: drop-shadow(0 0 7px rgba(157, 123, 255, 0.75)); } }
@media (max-width: 700px) { .fab-label { display: none; } .fab-node-label { font-size: 19px; } }
@media (prefers-reduced-motion: reduce) { .fab-ring-path { animation: none; } }

/* the series index */
.series { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 14px; }
@media (min-width: 820px) { .series { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.series-card > a, .series-card.is-soon { display: grid; gap: 6px; padding: 22px 22px 20px; border-radius: 16px; text-decoration: none; color: var(--ink); min-height: 100%;
  background: var(--room-raised); box-shadow: inset 0 0 0 1px var(--rule-strong); transition: box-shadow 0.2s ease, transform 0.2s ease; }
.series-card > a:hover { box-shadow: inset 0 0 0 2px var(--plasma); transform: translateY(-2px); }
.series-card > a:focus-visible { outline: 3px solid var(--mirror); outline-offset: 3px; }
.series-card.is-soon { opacity: 0.7; }
.series-card.is-aside > a { background: transparent; box-shadow: inset 0 0 0 1.5px var(--rule-strong); }
.series-num { font-size: var(--fs-xs); font-weight: 700; color: var(--plasma); letter-spacing: 0.04em; text-transform: uppercase; }
.series-title { font-size: var(--fs-xl); font-stretch: 112%; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.series-blurb { color: var(--ink-2); font-size: var(--fs-s); line-height: 1.55; }
.series-meta { margin-top: 6px; font-size: var(--fs-xs); color: var(--ink-3); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .series-card > a { transition: none; } .series-card > a:hover { transform: none; } }

.xp-stage { display: grid; gap: 24px; }
@media (min-width: 1000px) {
  .xp-stage { grid-template-columns: minmax(0, 1.6fr) minmax(320px, 1fr); align-items: start; }
  /* the model stays in view while the longer step text scrolls past it */
  .xp-figure { position: sticky; top: 12px; }
}

.xp-figure { margin: 0; padding: 10px; border-radius: 18px; background: rgba(255, 255, 255, 0.025); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.euv-svg { display: block; width: 100%; height: auto; }
.xp-caption { margin: 8px 6px 2px; font-size: var(--fs-xs); color: #9488ab; }

.euv-chamber { fill: none; stroke: rgba(255, 255, 255, 0.1); stroke-dasharray: 6 8; }
.euv-vessel { fill: rgba(157, 123, 255, 0.045); stroke: rgba(157, 123, 255, 0.28); stroke-width: 1.5; }
.euv-part { fill: #1b1729; stroke: rgba(255, 255, 255, 0.3); stroke-width: 1.5; }
.euv-laser-box { stroke: rgba(255, 77, 99, 0.7); }
.euv-guide { stroke: rgba(255, 255, 255, 0.12); stroke-dasharray: 2 6; }
.euv-droplet { fill: #dfe3ee; }
.euv-laser { stroke: #ff4d63; stroke-width: 2.5; stroke-linecap: round; opacity: 0.3; }
.euv-laser.is-pre { opacity: 0.85; stroke-width: 2; }
.euv-laser.is-main { opacity: 1; stroke-width: 6; }
@media (hover: hover) and (min-width: 900px) { .euv-laser.is-main { filter: url(#euv-glow); } }
.euv-light { fill: #8fd8ff; opacity: 0.12; }
.euv-mirror { fill: none; stroke: url(#euv-mirror-g); stroke-width: 6; stroke-linecap: round; }
.euv-collector { stroke-width: 8; }
.euv-facets { stroke-dasharray: 7 3; stroke-linecap: butt; }
.euv-hole { fill: #07060b; }
.euv-if { fill: #eaf8ff; }
.euv-reticle { fill: #262040; stroke: #c9d7e8; stroke-width: 1.5; }
.euv-pattern { fill: #8fd8ff; opacity: 0.75; }
.euv-po { fill: rgba(143, 216, 255, 0.03); stroke: rgba(143, 216, 255, 0.32); stroke-width: 1.5; stroke-dasharray: 4 6; }
.euv-beam { fill: none; stroke: #8fd8ff; stroke-width: 7; opacity: 0.14; stroke-linejoin: round; stroke-linecap: round; }
.euv-wafer { fill: url(#euv-wafer-g); stroke: rgba(255, 255, 255, 0.4); stroke-width: 1.2; }
.euv-die { fill: rgba(255, 255, 255, 0.09); transition: fill 0.4s ease; }
.euv-die.is-lit { fill: #a98bff; }
.euv-spot { fill: url(#euv-spot-g); opacity: 0; }
.euv-path { fill: none; stroke: none; }
.euv-photon circle { fill: #eaf8ff; }
.euv-photon .euv-photon-halo { fill: #8fd8ff; opacity: 0.28; }

[data-part] { cursor: pointer; transition: opacity 0.35s ease, filter 0.35s ease; }
@media (hover: hover) and (min-width: 900px) {
  .euv-svg [data-part].is-active { filter: drop-shadow(0 0 7px rgba(157, 123, 255, 0.75)); }
}
.euv-svg.is-focus [data-part]:not(.is-active) { opacity: 0.22; }
.euv-svg.is-focus .euv-photon { opacity: 0.3; }

.euv-marker { cursor: pointer; }
.euv-marker circle { fill: #15121d; stroke: #9d7bff; stroke-width: 2; transition: fill 0.25s ease; }
.euv-marker text { fill: #efeaf7; font: 700 15px "Archivo", sans-serif; text-anchor: middle; pointer-events: none; }
.euv-marker:hover circle { fill: #2a2245; }
.euv-marker.is-active circle { fill: #9d7bff; stroke: #e3d6ff; }
.euv-marker.is-active text { fill: #0b0910; }

.xp-side { display: grid; gap: 14px; }
.xp-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.xp-figure-3d ~ .xp-side .xp-mode, .xp-stage.is-3d .xp-mode { flex-basis: 100%; order: 3; }
.xp-play {
  display: inline-flex; align-items: center; gap: 9px;
  font: inherit; font-size: var(--fs-s); font-weight: 680; color: #0b0910;
  background: #9d7bff; border: 0; border-radius: 999px; padding: 7px 16px 7px 12px; cursor: pointer;
}
.xp-play:hover { background: #b39bff; }
.xp-play:focus-visible, .xp-step:focus-visible, .xp-nav button:focus-visible { outline: 3px solid #8fd8ff; outline-offset: 3px; }
.xp-play-icon { width: 12px; height: 12px; display: inline-block; background: currentColor; clip-path: polygon(0 0, 35% 0, 35% 100%, 0 100%, 0 0, 65% 0, 100% 0, 100% 100%, 65% 100%, 65% 0); }
.xp-play[aria-pressed="false"] .xp-play-icon { clip-path: polygon(0 0, 100% 50%, 0 100%); }
.xp-mode { font-size: var(--fs-s); color: #9488ab; }

.xp-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
@media (min-width: 640px) and (max-width: 999px) { .xp-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.xp-step {
  width: 100%; display: flex; align-items: center; gap: 8px; text-align: left;
  font: inherit; font-size: var(--fs-s); font-weight: 600; color: #efeaf7;
  background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 10px;
  padding: 7px 10px; cursor: pointer;
}
.xp-step:hover { border-color: rgba(157, 123, 255, 0.7); }
.xp-step-num {
  flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  font-size: 0.75rem; font-weight: 750; background: rgba(157, 123, 255, 0.2); color: #e3d6ff;
}
.xp-step[aria-current="step"] { background: rgba(157, 123, 255, 0.18); border-color: #9d7bff; }
.xp-step[aria-current="step"] .xp-step-num { background: #9d7bff; color: #0b0910; }

.xp-progress { height: 3px; border-radius: 3px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.xp-progress span { display: block; height: 100%; background: linear-gradient(to right, #8fd8ff, #9d7bff, #ff4d63); transform-origin: left; transform: scaleX(0); }
.is-paused .xp-progress { visibility: hidden; }

.xp-panel {
  padding: 18px 20px 18px; border-radius: 14px; background: rgba(255, 255, 255, 0.035);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09); min-height: 300px; display: grid; align-content: start; gap: 10px;
}
.xp-count { margin: 0; font-size: var(--fs-xs); color: #9488ab; font-weight: 600; }
.xp-step-title { font-size: var(--fs-l); font-stretch: 110%; font-weight: 760; line-height: 1.2; }
.xp-step-body { margin: 0; color: #d7cfe6; line-height: 1.55; }
.xp-fact { margin: 2px 0 0; padding-left: 12px; border-left: 3px solid #ff4d63; color: #c6bcd9; font-size: var(--fs-s); }
.xp-numbers {
  margin: 4px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px;
  border-radius: 10px; overflow: hidden; background: rgba(255, 255, 255, 0.09);
}
.xp-numbers div { background: #0d0b16; padding: 9px 11px 10px; min-width: 0; }
.xp-numbers dt { font-size: var(--fs-xs); color: #9488ab; line-height: 1.25; }
.xp-numbers dd { margin: 3px 0 0; font-size: var(--fs-m); font-stretch: 106%; font-weight: 750; letter-spacing: -0.01em; color: #efeaf7; line-height: 1.2; overflow-wrap: anywhere; }
.xp-try { margin: 0; display: flex; gap: 9px; align-items: flex-start; font-size: var(--fs-s); color: #b9ddf5; }
.xp-try-icon { flex: none; width: 14px; height: 14px; margin-top: 3px; border-radius: 50%; border: 2px solid #8fd8ff; box-shadow: 0 0 0 3px rgba(143, 216, 255, 0.18); }
.xp-more { margin: 2px 0 0; font-size: var(--fs-s); color: #c6bcd9; }
.xp-more summary { cursor: pointer; font-weight: 700; color: #efeaf7; list-style: none; display: inline-flex; align-items: center; gap: 8px; padding: 4px 0; }
.xp-more summary::-webkit-details-marker { display: none; }
.xp-more summary::before { content: ""; width: 8px; height: 8px; border-right: 2px solid #9d7bff; border-bottom: 2px solid #9d7bff; transform: rotate(-45deg); transition: transform 0.2s ease; margin-left: 2px; }
.xp-more[open] summary::before { transform: rotate(45deg); }
.xp-more summary:focus-visible { outline: 3px solid #8fd8ff; outline-offset: 3px; border-radius: 4px; }
.xp-more p { margin: 8px 0 0; line-height: 1.55; }
.xp-links { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: var(--fs-s); font-weight: 650; }
.xp-links a { color: #c9b8ff; }
.xp-fig { display: block; width: 100%; height: auto; margin: 2px 0; font-family: "Archivo", sans-serif; }
.xp-nav { display: flex; gap: 8px; margin-top: 6px; }
.xp-nav button {
  font: inherit; font-size: var(--fs-s); font-weight: 650; color: #efeaf7; background: none; cursor: pointer;
  border: 1.5px solid rgba(255, 255, 255, 0.3); border-radius: 999px; padding: 4px 13px;
}
.xp-nav button:hover { border-color: #9d7bff; }

.xp-stats {
  margin: 28px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px;
  border-radius: 14px; overflow: hidden; background: rgba(255, 255, 255, 0.08);
}
@media (min-width: 760px) { .xp-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.xp-stats div { background: #0b0912; padding: 16px 18px; }
.xp-stats dt { font-size: var(--fs-xs); color: #9488ab; }
.xp-stats dd { margin: 4px 0 0; font-size: clamp(1.25rem, 2.1vw, 1.75rem); font-stretch: 108%; font-weight: 800; letter-spacing: -0.02em; white-space: nowrap; }
@media (max-width: 480px) { .xp-stats dd { font-size: 1.15rem; white-space: normal; } .xp-stats div { padding: 14px 14px; } }
.xp-glossary { margin: 26px 0 0; }
.xp-glossary h3 { margin: 0 0 4px; font-size: var(--fs-m); font-stretch: 108%; font-weight: 760; }
.xp-glossary > p { margin: 0 0 14px; color: #9488ab; font-size: var(--fs-s); }
.xp-terms { margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px 24px; }
.xp-terms div { padding: 10px 0 0; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.xp-terms dt { font-weight: 700; color: #efeaf7; }
.xp-terms dd { margin: 3px 0 0; color: #c6bcd9; font-size: var(--fs-s); line-height: 1.5; }
.xp-sources { margin: 22px 0 0; color: #7f7596; font-size: var(--fs-xs); }
.xp-sources a { color: #a99cc4; }
.explainer + .site-foot, main:has(.explainer) + .site-foot { border-top: 0; }

.euv-label { fill: #c6bcd9; font: 600 16px "Archivo", sans-serif; pointer-events: none; }
@media (max-width: 700px) { .euv-label { display: none; } }

/* phones: bigger tap targets on the diagram's step numbers, tighter panel */
@media (max-width: 700px) {
  .xp-inner { padding-top: 52px; padding-bottom: 44px; }
  .xp-title { font-size: var(--fs-xl); }
  .euv-marker circle { r: 22px; }
  .euv-marker text { font-size: 20px; }
  .xp-figure { padding: 4px; margin: 0 calc(var(--gutter) * -0.5); }
  .xp-panel { min-height: 0; }
}

/* ------------------------------------------------------------------ explainers in 3D (explainers/ bundles) */
.xp-figure.xp-figure-3d { padding: 0; overflow: hidden; }
.x3d-viewport {
  position: relative; width: 100%; aspect-ratio: 16 / 11.5; overflow: hidden; border-radius: 18px 18px 0 0;
  background: radial-gradient(80% 70% at 30% 45%, rgba(109, 77, 255, 0.18), transparent 70%), #05040a;
  touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none;
}
.x3d-viewport.is-dragging { cursor: grabbing; }
.x3d-viewport::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(125% 95% at 50% 46%, transparent 58%, rgba(3, 2, 8, 0.5) 100%);
}
.x3d-hotspots, .x3d-tag, .x3d-hint, .x3d-loading, .x3d-callouts, .x3d-leaders { z-index: 1; }
.x3d-viewport canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y; }
.xp-figure-3d .xp-caption { margin: 10px 16px 14px; }
.x3d-hotspots { position: absolute; inset: 0; pointer-events: none; }
.x3d-hot {
  position: absolute; left: 0; top: 0; width: 30px; height: 30px; margin: -15px 0 0 -15px; padding: 0;
  display: grid; place-items: center; border-radius: 50%; border: 2px solid #9d7bff; background: rgba(11, 9, 16, 0.78);
  color: #efeaf7; font: 700 13px "Archivo", sans-serif; cursor: pointer; pointer-events: auto; will-change: transform;
  transition: background-color 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease;
}
.x3d-hot:hover { background: #2a2245; }
.x3d-hot[aria-current="step"] { background: #9d7bff; color: #0b0910; box-shadow: 0 0 0 6px rgba(157, 123, 255, 0.25), 0 0 22px rgba(157, 123, 255, 0.6); }
.x3d-hot:focus-visible { outline: 3px solid #8fd8ff; outline-offset: 3px; }
.x3d-hot.is-hidden, .x3d-tag.is-hidden { opacity: 0; pointer-events: none; }
.x3d-leaders { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.x3d-leaders line { stroke: rgba(143, 216, 255, 0.85); stroke-width: 1.25; opacity: 0; transition: opacity 0.35s ease; }
.x3d-leaders circle { fill: #8fd8ff; stroke: rgba(5, 4, 10, 0.8); stroke-width: 1.5; opacity: 0; transition: opacity 0.35s ease; }
.x3d-leaders .is-on { opacity: 1; }
.x3d-callouts { position: absolute; inset: 0; pointer-events: none; }
.x3d-callout {
  position: absolute; left: 0; top: 0; max-width: 230px; padding: 6px 10px 7px; border-radius: 10px;
  background: rgba(8, 6, 14, 0.84); border: 1px solid rgba(143, 216, 255, 0.5); color: #efeaf7;
  font-size: 13px; line-height: 1.3; opacity: 0; transition: opacity 0.35s ease; will-change: transform; backdrop-filter: blur(4px);
}
.x3d-callout.is-on { opacity: 1; }
.x3d-callout-text { display: block; font-weight: 700; }
.x3d-callout-sub { display: block; color: #b9ddf5; font-size: 12px; margin-top: 1px; }
.x3d-hot.is-behind { opacity: 0.4; }
.x3d-hot.is-behind[aria-current="step"] { opacity: 0.7; }
.x3d-tag {
  position: absolute; left: 0; top: 0; padding: 4px 11px; border-radius: 999px; background: rgba(11, 9, 16, 0.86);
  border: 1px solid rgba(157, 123, 255, 0.65); color: #efeaf7; font-size: 13px; font-weight: 650; white-space: nowrap;
  pointer-events: none; will-change: transform; transition: opacity 0.25s ease;
}
.x3d-loading { position: absolute; inset: 0; display: grid; place-items: center; color: #9488ab; font-size: var(--fs-s); }
.x3d-hint { position: absolute; left: 14px; bottom: 12px; margin: 0; font-size: var(--fs-xs); color: rgba(198, 188, 217, 0.8); pointer-events: none; }
.x3d-reset {
  font: inherit; font-size: var(--fs-s); font-weight: 650; color: #c6bcd9; background: none; border: 0; padding: 4px 0;
  margin-left: auto; text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.x3d-reset:hover { color: #efeaf7; }
.x3d-reset:focus-visible { outline: 3px solid #8fd8ff; outline-offset: 3px; }
@media (max-width: 700px) {
  .xp-figure.xp-figure-3d { margin: 0 calc(var(--gutter) * -1); border-radius: 0; }
  .x3d-viewport { aspect-ratio: 1 / 1.05; border-radius: 0; }
  .x3d-hot { width: 34px; height: 34px; margin: -17px 0 0 -17px; }
  .x3d-callout { max-width: 168px; font-size: 12px; padding: 5px 8px 6px; }
  .x3d-callout-sub { font-size: 11px; }
  .x3d-callout:nth-child(n + 3), .x3d-leaders line:nth-of-type(n + 3), .x3d-leaders circle:nth-of-type(n + 3) { display: none; }
  .xp-numbers dd { font-size: var(--fs-s); }
}
@media (prefers-reduced-motion: reduce) { .x3d-hot, .x3d-tag, .x3d-callout, .x3d-leaders line, .x3d-leaders circle, .xp-more summary::before { transition: none; } }

/* ------------------------------------------------------------------ supply-chain map */
.sc-controls { display: grid; gap: 10px; padding: 16px 0 14px; border-top: 2px solid var(--ink); }
.sc-controls .seg button { font-size: var(--fs-xs); }
.sc-hint { margin: 0; font-size: var(--fs-xs); color: var(--ink-3); }
.sc-map-wrap { margin: 4px 0 0; }
.sc-map { display: block; width: 100%; height: auto; font-family: "Archivo", sans-serif; }
.sc-cap { fill: var(--ink-3); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.sc-edge { fill: none; stroke-width: 1.4; stroke-opacity: 0.28; transition: stroke-opacity 0.25s ease, stroke-width 0.25s ease; }
.sc-edge.is-on { stroke-opacity: 0.95; stroke-width: 2.4; }
.sc-edge.is-dim { stroke-opacity: 0.07; }
.sc-edge.is-off { display: none; }
.sc-edge.is-tools, .sc-dot.is-tools, .sc-legend .is-tools .sc-swatch { stroke: var(--sc-tools); fill: var(--sc-tools); }
.sc-edge.is-silicon, .sc-dot.is-silicon, .sc-legend .is-silicon .sc-swatch { stroke: var(--sc-silicon); fill: var(--sc-silicon); }
.sc-edge.is-memory, .sc-dot.is-memory, .sc-legend .is-memory .sc-swatch { stroke: var(--sc-memory); fill: var(--sc-memory); }
.sc-edge.is-chips, .sc-dot.is-chips, .sc-legend .is-chips .sc-swatch { stroke: var(--sc-chips); fill: var(--sc-chips); }
.sc-edge.is-network, .sc-dot.is-network, .sc-legend .is-network .sc-swatch { stroke: var(--sc-network); fill: var(--sc-network); }
.sc-edge.is-compute, .sc-dot.is-compute, .sc-legend .is-compute .sc-swatch { stroke: var(--sc-compute); fill: var(--sc-compute); }
.sc-edge { fill: none !important; }
.sc-dot { stroke: none; opacity: 0.95; }
.sc-node { cursor: pointer; transition: opacity 0.25s ease; outline: none; }
.sc-node.is-dim { opacity: 0.28; }
.sc-box { fill: var(--room-raised); stroke: var(--stratum, var(--rule-strong)); stroke-width: 1.5; transition: stroke-width 0.2s ease; }
.sc-node:hover .sc-box, .sc-node:focus-visible .sc-box { stroke-width: 2.5; }
.sc-node.is-self .sc-box { fill: var(--plasma); stroke: var(--plasma); stroke-width: 2.5; }
.sc-node.is-self text { fill: var(--on-plasma); }
.sc-node.is-up .sc-box { stroke-width: 2.5; stroke: var(--mirror); }
.sc-node.is-down .sc-box { stroke-width: 2.5; stroke: var(--laser); }
.sc-node.is-private .sc-box { stroke-dasharray: 4 3; }
.sc-node:focus-visible .sc-box { stroke: var(--mirror); stroke-width: 3; }
.sc-emoji { font-size: 15px; }
.sc-tick { fill: var(--ink); font-size: 12px; font-weight: 750; }
.sc-pct { font-size: 10px; font-weight: 650; fill: var(--ink-3); }
.sc-pct.up { fill: var(--mirror); }
.sc-pct.down { fill: var(--laser); }
.sc-node.is-self .sc-pct { fill: var(--on-plasma); }
.sc-name { fill: var(--ink-3); font-size: 10px; }
.sc-legend { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: var(--fs-xs); color: var(--ink-2); }
.sc-legend li { display: inline-flex; align-items: center; gap: 7px; }
.sc-swatch { width: 22px; height: 3px; border-radius: 2px; display: inline-block; background: currentColor; }
.sc-legend .is-tools .sc-swatch { background: var(--sc-tools); } .sc-legend .is-silicon .sc-swatch { background: var(--sc-silicon); }
.sc-legend .is-memory .sc-swatch { background: var(--sc-memory); } .sc-legend .is-chips .sc-swatch { background: var(--sc-chips); }
.sc-legend .is-network .sc-swatch { background: var(--sc-network); } .sc-legend .is-compute .sc-swatch { background: var(--sc-compute); }

.sc-panel { margin: 22px 0 0; padding: 20px 22px 18px; border-radius: 16px; background: var(--room-raised); box-shadow: inset 0 0 0 1px var(--rule-strong); display: grid; gap: 16px; }
.sc-panel-head { display: flex; gap: 14px; align-items: flex-start; }
.sc-panel-head h2 { margin: 0; font-size: var(--fs-xl); font-stretch: 112%; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.sc-panel-head .ticker { font-size: var(--fs-s); font-weight: 600; color: var(--ink-3); margin-left: 6px; }
.sc-meta { margin: 6px 0 0; font-size: var(--fs-s); color: var(--ink-2); }
.sc-meta .q-price { font-weight: 700; color: var(--ink); }
.sc-links { margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: var(--fs-s); font-weight: 650; }
.sc-cols { display: grid; gap: 16px 28px; }
@media (min-width: 760px) { .sc-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sc-cols h3 { margin: 0 0 8px; font-size: var(--fs-s); font-weight: 750; color: var(--ink-2); text-transform: uppercase; letter-spacing: 0.04em; }
.sc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sc-list li { display: grid; gap: 2px; }
.sc-chip { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: var(--fs-s); color: var(--ink); background: none; border: 0; padding: 0; cursor: pointer; text-align: left; justify-self: start; }
.sc-chip b { font-weight: 750; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: text-decoration-color 0.2s ease; }
.sc-chip:hover b { text-decoration-color: var(--plasma); }
.sc-chip:focus-visible { outline: 3px solid var(--mirror); outline-offset: 3px; border-radius: 4px; }
.sc-what { font-size: var(--fs-xs); color: var(--ink-3); padding-left: 26px; }
.sc-note { margin: 18px 0 0; font-size: var(--fs-xs); color: var(--ink-3); max-width: 72ch; }
@media (prefers-reduced-motion: reduce) { .sc-edge, .sc-node, .sc-box { transition: none; } }

/* ------------------------------------------------------------------ tide: compare mode */
.tide-compare { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.tide-compare-label { font-size: var(--fs-s); font-weight: 650; color: var(--ink-2); }
.tide-pick {
  font: inherit; font-size: var(--fs-s); font-weight: 620; color: var(--ink); background: var(--room-raised);
  border: 1.5px solid var(--rule-strong); border-radius: 999px; padding: 5px 34px 5px 12px; max-width: 220px; cursor: pointer;
  appearance: none; -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%; background-size: 5px 5px; background-repeat: no-repeat;
}
.tide-pick:hover { border-color: var(--plasma); }
.tide-pick:focus-visible { outline: 3px solid var(--mirror); outline-offset: 2px; }
.tide-cmp-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tide-cmp-list li {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 6px 3px 10px; border-radius: 999px; font-size: var(--fs-s); font-weight: 650;
  background: var(--room-raised); box-shadow: inset 0 0 0 1.5px var(--c);
}
.tide-cmp-list li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.tide-cmp-x { font: inherit; font-weight: 700; line-height: 1; width: 22px; height: 22px; border-radius: 50%; border: 0; background: transparent; color: var(--ink-2); cursor: pointer; }
.tide-cmp-x:hover { background: var(--room-deep); color: var(--ink); }
.tide-cmp-x:focus-visible { outline: 2px solid var(--mirror); }
.tide-cmp-note { margin: 8px 0 0; font-size: var(--fs-s); color: var(--ink-2); max-width: 60ch; }
.tide-cmp-note:empty { display: none; }
.tide-cmp-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--c); margin: 0 5px 0 1px; vertical-align: 0; }
.tide-boat-cmp { display: flex; align-items: center; gap: 6px; }
.tide-boat-cmp i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
@media (max-width: 600px) { .tide-pick { max-width: 170px; } }

/* ------------------------------------------------------------------ profile: one-year chart */
.profile-chart { margin: 22px 0 0; display: grid; gap: 8px; }
.profile-chart:empty { display: none; }
.pc { width: 100%; height: 150px; display: block; border-radius: 10px; background: var(--room-raised); box-shadow: inset 0 0 0 1px var(--rule); }
.pc .pc-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke: var(--up); }
.pc.down .pc-line { stroke: var(--down); }
.pc .pc-bench { fill: none; stroke: var(--ink-3); stroke-width: 1.3; stroke-dasharray: 4 4; opacity: 0.9; }
.pc .pc-base { stroke: var(--ink-3); stroke-opacity: 0.45; stroke-dasharray: 2 4; }
.pc .pc-stop-a { stop-color: var(--up); stop-opacity: 0.32; }
.pc .pc-stop-b { stop-color: var(--up); stop-opacity: 0; }
.pc.down .pc-stop-a { stop-color: var(--down); }
.pc.down .pc-stop-b { stop-color: var(--down); }
.pc .pc-dot { fill: var(--ink); }
.pc .pc-end { fill: var(--up); stroke: var(--room); stroke-width: 2; }
.pc.down .pc-end { fill: var(--down); }
.pc-caption { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: baseline; font-size: var(--fs-s); color: var(--ink-2); }
.pc-main { font-size: var(--fs-m); color: var(--ink); }
.pc-main b { font-weight: 740; }
.pc-dash { display: inline-block; width: 18px; border-top: 2px dashed var(--ink-3); vertical-align: middle; margin-left: 6px; }
.pc-link { font-weight: 650; }
.pc-axis { display: flex; justify-content: space-between; font-size: var(--fs-xs); color: var(--ink-3); margin-top: -4px; }
@media (max-width: 600px) { .pc { height: 120px; } }

/* ------------------------------------------------------------------ home: reporting soon */
.er-home { list-style: none; margin: 0; padding: 0; }
.er-home li { border-top: 1px solid var(--rule); }
.er-home li:last-child { border-bottom: 1px solid var(--rule); }
.er-home a { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 2px 10px; padding: 9px 0; text-decoration: none; align-items: baseline; }
.er-home a:hover .er-home-name b { text-decoration: underline; }
.er-home-date { font-size: var(--fs-s); font-weight: 650; color: var(--ink-2); white-space: nowrap; }
.er-home-name { font-size: var(--fs-s); color: var(--ink-2); }
.er-home-name b { color: var(--ink); font-weight: 700; }
.er-home .er-strip { grid-column: 2; }
.home-earnings { margin-bottom: 36px; }

/* ------------------------------------------------------------------ earnings page */
.er-strip { display: inline-flex; flex-wrap: wrap; gap: 2px 8px; align-items: center; }
.er-strip.is-empty { font-size: var(--fs-xs); color: var(--ink-3); }
.er-react { display: inline-flex; align-items: center; gap: 3px; }
.er-react .emoji { font-size: 1.25rem; }
.er-react-pct { font-size: var(--fs-xs); font-weight: 650; }
.er-head { display: grid; gap: 4px; margin-bottom: 18px; }
.er-sub { margin: 0; color: var(--ink-2); max-width: 70ch; }
.er-group { margin-bottom: 22px; }
.er-group-title { font-size: var(--fs-xs); font-weight: 760; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 10px; }
.er-day { display: grid; gap: 8px; padding: 14px 0; border-top: 1px solid var(--rule); }
@media (min-width: 760px) { .er-day { grid-template-columns: 150px minmax(0, 1fr); gap: 18px; } }
.er-day.is-today { border-top: 2px solid var(--plasma); }
.er-date { margin: 0; font-size: var(--fs-m); font-weight: 760; font-stretch: 108%; display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; align-content: flex-start; align-self: start; }
.er-rel { font-size: var(--fs-xs); font-weight: 650; color: var(--ink-3); }
.er-day.is-today .er-rel { color: var(--plasma); }
.er-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.er-card details { border-radius: 14px; background: var(--room-raised); box-shadow: inset 0 0 0 1px var(--rule); }
.er-card details[open] { box-shadow: inset 0 0 0 1.5px var(--rule-strong); }
.er-sum {
  list-style: none; cursor: pointer; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 4px 12px; align-items: center; padding: 12px 14px;
}
.er-sum::-webkit-details-marker { display: none; }
.er-sum:focus-visible { outline: 3px solid var(--mirror); outline-offset: -3px; border-radius: 14px; }
.er-sum .logo { grid-row: 1 / span 4; align-self: start; }
.er-who { font-size: var(--fs-m); display: flex; flex-wrap: wrap; gap: 0 6px; align-items: center; }
.er-who b { font-weight: 750; }
.er-who .ticker { color: var(--ink-3); }
.er-who .emoji { font-size: 1.2rem; }
.er-today { font-size: var(--fs-s); font-weight: 650; }
.er-meta { display: flex; flex-wrap: wrap; gap: 0 10px; font-size: var(--fs-s); color: var(--ink-2); }
.er-when::first-letter { text-transform: uppercase; }
.er-eps { color: var(--ink-3); }
.er-typical { font-size: var(--fs-s); color: var(--ink-2); font-weight: 650; }
.er-sum .er-strip, .er-sum .er-typical { grid-column: 2; }
.er-react { white-space: nowrap; }
@media (min-width: 760px) {
  .er-sum { grid-template-columns: 40px minmax(240px, 1fr) auto auto; grid-template-rows: auto auto; column-gap: 18px; }
  .er-sum .logo { grid-row: 1 / span 2; }
  .er-who { grid-column: 2; grid-row: 1; }
  .er-meta { grid-column: 2; grid-row: 2; }
  .er-sum .er-strip { grid-column: 3; grid-row: 1 / span 2; justify-self: start; flex-wrap: nowrap; gap: 10px; }
  .er-sum .er-typical { grid-column: 4; grid-row: 1 / span 2; text-align: right; white-space: nowrap; min-width: 9.5em; }
}
@media (min-width: 760px) and (max-width: 980px) {
  .er-sum .er-strip { flex-wrap: wrap; max-width: 180px; }
}
.er-body { padding: 4px 14px 14px; display: grid; gap: 10px; border-top: 1px solid var(--rule); }
.er-body .table-wrap { margin: 6px 0 0; }
.er-past { width: 100%; border-collapse: collapse; font-size: var(--fs-s); }
.er-past th { text-align: left; font-weight: 650; font-size: var(--fs-xs); color: var(--ink-3); padding: 6px 8px 6px 0; border-bottom: 1px solid var(--rule-strong); white-space: nowrap; }
.er-past td { padding: 7px 8px 7px 0; border-bottom: 1px solid var(--rule); vertical-align: middle; white-space: nowrap; }
.er-past .num, .er-past th.num { text-align: right; padding-right: 14px; }
.er-period { color: var(--ink-2); }
.er-move .emoji { font-size: 1.2rem; vertical-align: -2px; }
.er-note-co { margin: 8px 0 0; font-size: var(--fs-s); color: var(--ink-2); max-width: 70ch; }
.er-foot { margin: 0; font-size: var(--fs-xs); color: var(--ink-3); }
.er-foot a { font-weight: 650; }
.er-key { margin: 16px 0 0; font-size: var(--fs-s); color: var(--ink-3); max-width: 80ch; }
.er-all { padding-top: 40px; }
.er-note { margin: -6px 0 16px; font-size: var(--fs-s); color: var(--ink-2); max-width: 78ch; }
.er-sort { margin-bottom: 14px; }
.er-table { width: 100%; border-collapse: collapse; font-size: var(--fs-s); }
.er-table th { text-align: left; font-size: var(--fs-xs); font-weight: 650; padding: 0 10px 8px 0; border-bottom: 2px solid var(--ink); white-space: nowrap; vertical-align: bottom; }
.er-table td { padding: 9px 10px 9px 0; border-bottom: 1px solid var(--rule); vertical-align: middle; }
.er-table .num, .er-table th.num { text-align: right; padding-right: 16px; }
.er-name { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.er-name b { font-weight: 720; }
.er-name:hover b { text-decoration: underline; }
.er-name .ticker { color: var(--ink-3); }
.er-layer { display: block; font-size: var(--fs-xs); color: var(--ink-3); margin-left: 38px; }
.er-cell-sub { display: block; font-size: var(--fs-xs); color: var(--ink-3); }
.er-cell-sub::first-letter { text-transform: uppercase; }

/* ------------------------------------------------------------------ capex tracker */
.cx { padding-top: 44px; border-top: 2px solid var(--ink); margin-top: 8px; scroll-margin-top: 20px; }
.cx-lede { margin: -4px 0 24px; max-width: 72ch; color: var(--ink-2); }
.cx-stats { display: grid; gap: 10px; margin: 0 0 24px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.cx-stats div { padding: 14px 16px; border-radius: 14px; background: var(--room-raised); box-shadow: inset 0 0 0 1px var(--rule); }
.cx-stats dt { font-size: var(--fs-xs); font-weight: 650; color: var(--ink-3); letter-spacing: 0.04em; text-transform: uppercase; }
.cx-stats dd { margin: 4px 0 0; display: grid; gap: 2px; }
.cx-stats dd b { font-size: var(--fs-xl); font-stretch: 110%; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.cx-stats dd span { font-size: var(--fs-xs); color: var(--ink-2); }
.cx-chart-wrap { margin: 0; }
.cx-chart { width: 100%; height: auto; display: block; border-radius: 14px; background: var(--room-raised); box-shadow: inset 0 0 0 1px var(--rule); font-family: inherit; }
.cx-grid { stroke: var(--rule-strong); stroke-opacity: 0.5; stroke-dasharray: 2 4; }
.cx-ytext, .cx-xtext { fill: var(--ink-3); font-size: 11px; font-weight: 600; }
.cx-total { fill: var(--ink); font-size: 12px; font-weight: 750; }
.cx-seg { stroke: var(--room-raised); stroke-width: 1; transition: opacity 0.15s ease; cursor: default; }
.cx-seg:hover, .cx-seg:focus { opacity: 0.8; outline: none; stroke: var(--ink); }
.cx-1 .cx-seg, .cx-seg.cx-1, .cx-1 .cx-swatch { fill: var(--cx-1); background: var(--cx-1); --co: var(--cx-1); }
.cx-2 .cx-seg, .cx-seg.cx-2, .cx-2 .cx-swatch { fill: var(--cx-2); background: var(--cx-2); --co: var(--cx-2); }
.cx-3 .cx-seg, .cx-seg.cx-3, .cx-3 .cx-swatch { fill: var(--cx-3); background: var(--cx-3); --co: var(--cx-3); }
.cx-4 .cx-seg, .cx-seg.cx-4, .cx-4 .cx-swatch { fill: var(--cx-4); background: var(--cx-4); --co: var(--cx-4); }
.cx-5 .cx-seg, .cx-seg.cx-5, .cx-5 .cx-swatch { fill: var(--cx-5); background: var(--cx-5); --co: var(--cx-5); }
.cx-6 .cx-seg, .cx-seg.cx-6, .cx-6 .cx-swatch { fill: var(--cx-6); background: var(--cx-6); --co: var(--cx-6); }
.cx-caption { margin: 8px 0 0; font-size: var(--fs-s); color: var(--ink-2); min-height: 1.5em; }
.cx-legend { list-style: none; margin: 12px 0 28px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: var(--fs-s); font-weight: 650; }
.cx-legend li { display: inline-flex; align-items: center; gap: 7px; }
.cx-swatch { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.cx-cards { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.cx-card { --co: var(--cx-1); padding: 18px 20px 20px; border-radius: 16px; background: var(--room-raised); box-shadow: inset 0 0 0 1px var(--rule); border-top: 4px solid var(--co); display: grid; gap: 14px; align-content: start; }
.cx-card.cx-2 { --co: var(--cx-2); } .cx-card.cx-3 { --co: var(--cx-3); } .cx-card.cx-4 { --co: var(--cx-4); } .cx-card.cx-5 { --co: var(--cx-5); } .cx-card.cx-6 { --co: var(--cx-6); }
.cx-card-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cx-card-head h3 { margin: 0; font-size: var(--fs-l); font-stretch: 110%; font-weight: 800; letter-spacing: -0.015em; display: flex; gap: 8px; align-items: baseline; }
.cx-card-head h3 .ticker { font-size: var(--fs-s); color: var(--ink-3); }
.cx-today { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-s); font-weight: 650; }
.cx-today .emoji { font-size: 1.3rem; }
.cx-card-stats { margin: 0; display: grid; gap: 10px; }
.cx-card-stats dt { font-size: var(--fs-xs); color: var(--ink-3); font-weight: 650; }
.cx-card-stats dd { margin: 2px 0 0; font-size: var(--fs-s); color: var(--ink-2); }
.cx-card-stats dd b { font-size: var(--fs-l); font-weight: 780; color: var(--ink); margin-right: 4px; }
.cx-spark { display: grid; gap: 4px; color: var(--co, var(--plasma)); }
.cx-spark svg { width: 100%; height: 40px; display: block; }
.cx-spark-label { font-size: var(--fs-xs); color: var(--ink-3); }
.cx-guide h4 { margin: 0 0 6px; font-size: var(--fs-s); font-weight: 740; color: var(--ink); }
.cx-guide p { margin: 0; font-size: var(--fs-s); color: var(--ink-2); }
.cx-guide blockquote { margin: 10px 0 0; padding-left: 12px; border-left: 3px solid var(--co, var(--plasma)); }
.cx-guide blockquote p { color: var(--ink); font-style: italic; }
.cx-guide blockquote footer { margin-top: 4px; font-size: var(--fs-xs); color: var(--ink-3); }
.cx-who, .cx-src { margin: 6px 0 0; font-size: var(--fs-xs); color: var(--ink-3); }
.cx-src a { font-weight: 650; }
.cx-note-co { margin: 0; font-size: var(--fs-xs); color: var(--ink-3); }
.cx-note { margin: 22px 0 0; font-size: var(--fs-s); color: var(--ink-3); max-width: 80ch; }
@media (max-width: 600px) {
  .cx-ytext, .cx-xtext { font-size: 14px; }
  .cx-total { font-size: 15px; }
}
.cx-seg.is-partial { opacity: 0.55; }
.cx-total.is-partial { fill: var(--ink-3); font-weight: 650; }

/* ------------------------------------------------------------------ learning: the Part 4 card */
.learn-part { display: grid; gap: 6px; margin: 18px 0 8px; padding: 22px 24px 20px; border-radius: 16px; text-decoration: none; color: var(--ink); background: var(--room-raised); box-shadow: inset 0 0 0 1.5px var(--rule-strong); transition: box-shadow 0.2s ease, transform 0.2s ease; }
.learn-part:hover { box-shadow: inset 0 0 0 2px var(--plasma); transform: translateY(-2px); }
.learn-part:focus-visible { outline: 3px solid var(--mirror); outline-offset: 3px; }
.learn-part-title { font-size: var(--fs-xl); font-stretch: 112%; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.learn-part-blurb { color: var(--ink-2); font-size: var(--fs-s); line-height: 1.55; max-width: 80ch; }
.ai-more { margin: 18px 0 0; font-weight: 700; }

/* ------------------------------------------------------------------ Part 4: how a language model works */
.lm-head { max-width: 1000px; }
.lm-kicker { margin: 0 0 10px; font-size: var(--fs-s); font-weight: 700; color: var(--plasma); letter-spacing: 0.02em; }
.lm-stats { display: grid; gap: 10px; margin: 0 0 40px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.lm-stats div { padding: 14px 16px; border-radius: 14px; background: var(--room-raised); box-shadow: inset 0 0 0 1px var(--rule); }
.lm-stats dt { font-size: var(--fs-xs); font-weight: 650; color: var(--ink-3); letter-spacing: 0.04em; text-transform: uppercase; }
.lm-stats dd { margin: 4px 0 0; font-size: var(--fs-m); font-stretch: 110%; font-weight: 800; letter-spacing: -0.015em; line-height: 1.2; }
.lm-stats sup { font-size: 0.6em; }
.lm-steps { list-style: none; margin: 0; padding: 0; counter-reset: lm; display: grid; gap: 8px; }
.lm-steps > li { counter-increment: lm; padding: 30px 0 32px; border-top: 2px solid var(--rule-strong); scroll-margin-top: 20px; }
.lm-steps > li:first-child { border-top-color: var(--plasma); }
.lm-steps h2 { margin: 0 0 12px; font-size: var(--fs-xl); font-stretch: 112%; font-weight: 800; letter-spacing: -0.02em; line-height: 1.12; max-width: 30ch; }
.lm-steps h2::before { content: counter(lm, decimal-leading-zero); display: block; margin-bottom: 8px; font-size: var(--fs-s); font-stretch: 100%; font-weight: 700; letter-spacing: 0.08em; color: var(--plasma); }
.lm-steps > li > p { margin: 0 0 14px; color: var(--ink-2); max-width: 72ch; line-height: 1.6; }
.lm-steps > li > p:last-child { margin-bottom: 0; }
.lm-fact { padding: 12px 16px; border-left: 3px solid var(--laser); border-radius: 0 10px 10px 0; background: var(--room-raised); color: var(--ink) !important; font-weight: 560; }
.lm-numbers { margin: 4px 0 16px; display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); max-width: 820px; }
.lm-numbers div { padding: 10px 14px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--rule); }
.lm-numbers dt { font-size: var(--fs-xs); color: var(--ink-3); font-weight: 650; }
.lm-numbers dd { margin: 2px 0 0; font-weight: 740; color: var(--ink); }
.lm-steps .nt { margin: 22px 0 6px; }
.lm-glossary { margin-top: 44px; padding-top: 32px; border-top: 2px solid var(--ink); }
.lm-glossary h2 { font-size: var(--fs-xl); font-stretch: 112%; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 6px; }
.lm-glossary > p { margin: 0 0 18px; color: var(--ink-2); }
.lm-terms { margin: 0; display: grid; gap: 14px 32px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.lm-terms dt { font-weight: 750; }
.lm-terms dd { margin: 3px 0 0; font-size: var(--fs-s); color: var(--ink-2); line-height: 1.5; }
.lm-sources { margin: 36px 0 0; font-size: var(--fs-s); color: var(--ink-3); max-width: 80ch; }
.lm-next { margin: 18px 0 0; font-weight: 700; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.nt-temp { display: grid; gap: 6px; margin: 16px 0 4px; max-width: 420px; }
.nt-temp label { display: flex; justify-content: space-between; font-size: var(--fs-s); font-weight: 650; }
.nt-temp output { font-variant-numeric: tabular-nums; color: var(--plasma); }
.nt-temp input { width: 100%; accent-color: var(--plasma); }
.nt-temp-note { margin: 0; font-size: var(--fs-xs); color: var(--ink-3); }