/* Tomato front page: the hardware is the image; the proof is the story. */
:root {
  color-scheme: dark;
  --bg: #050505;
  --surface: #101110;
  --text: #f1f1ed;
  --muted: #a4a6a0;
  --line: #30322e;
  --accent: #ff583f;
  --accent-ink: #050505;
  --green: #a9ce80;
  --mono: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
  --sans: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
html[data-theme='light'] {
  color-scheme: light;
  --bg: #f5f5f0;
  --surface: #e9eae3;
  --text: #151712;
  --muted: #5b6055;
  --line: #c8cbc0;
  --accent: #ba301c;
  --accent-ink: #fff;
  --green: #3e6323;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 2rem; }
body { margin: 0; background: var(--bg); color: var(--text); font: 1rem/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
::selection { background: var(--accent); color: var(--accent-ink); }
a { color: inherit; text-underline-offset: .25em; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled { cursor: wait; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
[hidden] { display: none !important; }
img, video, canvas { display: block; max-width: 100%; }
figure, h1, h2, h3, p { margin: 0; }
.frame { width: min(1440px, calc(100% - 7rem)); margin-inline: auto; }
.muted, .small-copy { color: var(--muted); }
.eyebrow, .section-label, .demo-tag, .state, .chart-heading, .footer-meta, .board-meta > a { font: 500 .75rem/1.5 var(--mono); letter-spacing: .045em; }
.eyebrow, .section-label { text-transform: uppercase; }
.section-space { padding-block: 6rem; }
.section-label { display: flex; justify-content: space-between; gap: 1rem; color: var(--muted); border-top: 1px solid var(--line); padding-top: 1.1rem; margin-bottom: 3rem; }
.section-label > :first-child { color: var(--accent); }
h2 { font-size: clamp(2.5rem, 4.6vw, 4.75rem); line-height: 1.05; font-weight: 500; letter-spacing: -.055em; }
h2 em, h1 em { font-style: normal; color: var(--accent); }
h3 { font-size: 1.55rem; line-height: 1.2; font-weight: 500; letter-spacing: -.035em; }
.prose { max-width: 37rem; }
.prose p { margin-bottom: 1.25rem; font-size: 1.0625rem; line-height: 1.75; }
.prose p:last-child { margin-bottom: 0; }
.prose strong { font-weight: 600; }
.text-link { display: inline-block; font-weight: 500; font-size: .9375rem; text-decoration: none; border-bottom: 1px solid var(--line); padding-block: .55rem; }
.text-link:hover { color: var(--accent); border-color: var(--accent); }
.skip-link { position: fixed; top: .8rem; left: 1rem; z-index: 100; padding: .75rem 1.25rem; background: var(--text); color: var(--bg); transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }
.front-nav { display: flex; align-items: center; gap: 1.5rem 2rem; min-height: 4.25rem; border-bottom: 1px solid var(--line); }
.wordmark { display: flex; align-items: center; gap: .65rem; text-decoration: none; font-size: 2rem; font-weight: 750; letter-spacing: -.08em; line-height: 1; }
.wordmark img { object-fit: contain; }
.front-paths {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .35rem .15rem;
}
.front-path {
  font-size: .875rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--muted);
  padding: .45rem .7rem;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
}
.front-path:hover { color: var(--text); }
.front-path--primary {
  border: 1px solid var(--accent);
  color: var(--accent);
  font-weight: 600;
  padding-inline: .95rem;
}
.front-path--primary:hover { color: var(--text); border-color: var(--text); }
.front-links {
  display: flex;
  align-items: center;
  gap: 1.15rem;
  margin-left: auto;
}
.front-links a {
  font-size: .8125rem;
  text-decoration: none;
  color: var(--muted);
}
.front-links a:hover { color: var(--accent); }
.theme-toggle { background: transparent; color: var(--muted); border: 1px solid var(--line); padding: .55rem .75rem; font-size: .8125rem; min-height: 44px; }
.theme-toggle:hover { color: var(--text); border-color: var(--muted); }

/* First viewport: board fills leftover space; hero copy stays on-screen under it.
   Hero is at least one viewport tall so 01 / What is Tomato starts below the fold.
   svh (not dvh): locked at load size, never resizes as the URL bar shows/hides. */
.hero {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-height: calc(100vh - var(--front-nav-height, 4.25rem));
  min-height: calc(100svh - var(--front-nav-height, 4.25rem));
}
.hero-stage, .hero-board { min-height: 0; display: flex; flex-direction: column; }
.hero-board { flex: 1 1 0; width: 100%; margin: 0; }
.board-meta {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: .5rem 1.25rem;
  align-items: baseline;
  color: var(--muted);
  padding-block: .55rem .4rem;
}
.board-meta .eyebrow { margin: 0; }
.board-meta__lot { display: flex; gap: .45rem; margin: 0; font: 500 .75rem/1.5 var(--mono); letter-spacing: .045em; text-transform: uppercase; }
.board-meta > a { text-decoration: none; font: 500 .75rem/1.5 var(--mono); letter-spacing: .045em; white-space: nowrap; }
.board-meta > a:hover { color: var(--accent); }
.bench-stage {
  position: relative;
  flex: 1 1 0;
  min-height: 6rem;
  width: 100%;
  height: 0;
  background: #050505;
  overflow: hidden;
  /* Board-first: every gesture inside the stage drives the 3D board.
     Page scroll starts outside the stage. */
  touch-action: none;
  overscroll-behavior: contain;
}
html[data-theme=light] .bench-stage { background: #f4f0e6; }
.board-image { width: 100%; height: 100%; object-fit: contain; background: inherit; }
.hero-board .bench-stage { border-block: 1px solid var(--line); touch-action: none; overscroll-behavior: contain; }
#front-bench {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  opacity: 0;
  background: transparent;
  transform: translateZ(0);
  touch-action: none;
}
.bench-stage.is-ready #front-bench { opacity: 1; }
/* Poster stays hidden once the GLB is ready so scroll/resize never flashes
   the static image over the live canvas. Print restores it (see @media print). */
.bench-stage.is-ready .board-image { visibility: hidden; }
.board-chrome {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .55rem 1rem;
  padding-block: .35rem;
  position: relative;
  z-index: 3;
}
.board-caption-text { margin: 0; font-size: .75rem; color: var(--muted); }
.board-load { background: transparent; border: none; color: var(--text); font-size: .8125rem; min-height: 44px; padding: 0; }
.board-load:hover { color: var(--accent); }
.board-feedback { font-size: .875rem; color: var(--muted); }
.board-feedback:not(:empty) { margin-top: .35rem; }
.board-chrome__end {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .55rem .6rem;
  margin-left: auto;
}
/* Collapsed viewer controls: one neutral pill; the Tour link stays the single accent. */
.viewer-controls { position: relative; }
.viewer-controls > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 40px;
  padding: .45rem .9rem;
  border: 1px solid var(--line);
  color: var(--text);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: transparent;
  user-select: none;
}
.viewer-controls > summary::-webkit-details-marker { display: none; }
.viewer-controls > summary::after {
  content: "+";
  font: 1rem/1 var(--mono);
  color: var(--muted);
}
.viewer-controls[open] > summary::after { content: "−"; }
.viewer-controls > summary:hover { color: var(--text); border-color: var(--text); }
.viewer-controls[open] > summary {
  color: var(--text);
  border-color: var(--text);
  background: var(--surface);
}
.viewer-controls-panel {
  position: absolute;
  right: 0;
  top: calc(100% + .5rem);
  z-index: 10;
  width: min(18rem, calc(100vw - 2.5rem));
  background: var(--bg);
  border: 1px solid var(--line);
  padding: .55rem;
  box-shadow: 0 12px 32px rgb(0 0 0 / .35);
}
/* Compact redesign: one row of views, one row of actions, single hairline
   between them. No accent inside the panel — Tour stays the only accent. */
.viewer-controls-panel .bench-tools {
  display: grid;
  gap: .35rem;
  border: 0;
  background: transparent;
  padding: 0;
}
.viewer-controls-panel .bench-views { grid-template-columns: repeat(4, 1fr); }
.viewer-controls-panel .bench-actions {
  grid-template-columns: repeat(3, 1fr);
  margin-top: .5rem;
  padding-top: .5rem;
  border-top: 1px solid var(--line);
}
.viewer-controls-panel .bench-tools button {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  min-height: 38px;
  justify-content: center;
  padding: .4rem .2rem;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.viewer-controls-panel .bench-tools button + button {
  border-left: 1px solid var(--line);
}
.viewer-controls-panel .bench-tools button:hover {
  border-color: var(--text);
  background: transparent;
  color: var(--text);
}
.viewer-controls-panel .bench-tools button.is-on {
  background: var(--text);
  border-color: var(--text);
  color: var(--bg);
}
.viewer-hint {
  margin: .5rem 0 0;
  font-size: .7rem;
  line-height: 1.5;
  color: var(--muted);
}
.viewer-hint-hand { display: none; }
.board-tour {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: .45rem 1rem;
  border: 1px solid var(--accent);
  background: transparent;
  color: var(--accent);
  text-decoration: none;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.board-tour:hover {
  color: var(--text);
  border-color: var(--text);
  background: transparent;
}
.bench-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  border: 1px solid var(--accent);
}
.bench-tools button,
.bench-tools > a,
.bench-hud-toggle,
.bench-mark {
  background: transparent;
  border: 0;
  border-radius: 0;
  color: var(--accent);
  padding: .35rem .55rem;
  min-height: 36px;
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .02em;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.bench-tools button + button,
.bench-tools button + a,
.bench-tools a + button {
  border-left: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
}
.bench-tools button:hover,
.bench-tools > a:hover { color: var(--text); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.bench-tools button.is-on {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}
.bench-tools a.is-tour {
  color: var(--accent);
  background: transparent;
}
.bench-tools a.is-tour:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  filter: none;
}
.bench-hud, .bench-mark-wrap { position: absolute; top: .75rem; z-index: 2; }
.bench-hud { right: .75rem; }
.bench-mark-wrap { left: .75rem; }
.bench-legend-wrap, .bench-model-wrap { position: absolute; top: 100%; padding: 1rem; background: var(--bg); border: 1px solid var(--line); width: min(290px, 65vw); font-size: .8125rem; }
.bench-legend-wrap { right: 0; }
.bench-legend-row, .bench-model-stat { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: .4rem; }
.bench-model-info p + p { margin-top: .7rem; }
.hud-hand, .bench-legend--hand { display: none; }

.hero-bar {
  flex: 0 0 auto;
  position: relative;
  z-index: 2;
  background: var(--bg);
  border-top: 1px solid var(--line);
  padding: 1.35rem 0 1.05rem;
}
.hero-bar::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -2rem;
  height: 2rem;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--bg));
}
.hero-bar__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  text-align: center;
}
.hero-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  width: 100%;
  padding-block: .3rem;
}
h1 {
  margin: 0;
  width: 100%;
  max-width: none;
  font-size: clamp(1.85rem, 4.2vw, 3.1rem);
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: -.055em;
}
.hero-hook {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: .45rem .75rem;
  margin: 0;
  padding-top: .45rem;
  border-top: 1px solid var(--line);
  width: min(36rem, 100%);
  font: 500 .78rem/1.5 var(--mono);
  letter-spacing: .04em;
  color: var(--muted);
}
.hero-hook a { text-decoration: none; color: inherit; }
.hero-hook a:hover { color: var(--accent); }
.hero-hook strong { color: var(--accent); font-size: 1rem; letter-spacing: -.02em; margin-right: .15rem; }
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .65rem 1.25rem;
  width: 100%;
  margin: 0;
}
.hero-actions .text-link {
  border-bottom-color: transparent;
  color: var(--muted);
}
.hero-actions .text-link:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.button { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 1rem; padding: .7rem 1.15rem; text-decoration: none; font-weight: 600; font-size: .875rem; }
.button-red { border: 1px solid var(--accent); background: transparent; color: var(--accent); }
.button-red:hover { border-color: var(--text); color: var(--text); }

.hero-follow { padding-block: 1.75rem 0; }
.hero-deck { max-width: 40rem; margin: 0 0 1.5rem; color: var(--text); font-size: 1.125rem; line-height: 1.65; }
.status-strip { border: 1px solid var(--line); background: var(--surface); padding: 1rem 1.25rem; display: flex; gap: 1.5rem; justify-content: space-between; flex-wrap: wrap; font-size: .8125rem; }
.status-strip p:first-child { color: var(--green); font-weight: 600; }
.status-strip p:nth-child(2) { color: var(--text); }
.status-strip p:nth-child(3) { color: var(--accent); }
.status-strip a { color: var(--muted); text-decoration: none; }
.status-strip a:hover { color: var(--accent); }
.intro-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 6rem; align-items: start; }
.intro-grid h2 { font-size: clamp(1.45rem, 2.4vw, 2.35rem); line-height: 1.2; letter-spacing: -.03em; }
.intro-grid .prose { padding-top: .4rem; }
.intro-grid .text-link { margin-top: 1rem; }
.fact-row { margin-top: 4rem; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-block: 1px solid var(--line); }
.fact-row > a { display: flex; flex-direction: column; padding: 1.75rem 0; text-decoration: none; min-width: 0; }
.fact-row > a + a { border-left: 1px solid var(--line); padding-left: 1.35rem; }
.fact-row strong { font-size: clamp(1.55rem, 2.6vw, 2.85rem); font-weight: 500; letter-spacing: -.055em; line-height: 1.15; }
.fact-row a > span { color: var(--muted); font-size: .8125rem; margin-top: .55rem; line-height: 1.35; white-space: nowrap; }
.fact-row a:hover strong { color: var(--accent); }
.section-heading { display: flex; justify-content: space-between; gap: 4rem; align-items: flex-end; margin-bottom: 3rem; }
.section-heading h2 {
  flex: 1 1 18rem;
  min-width: 0;
  max-width: 16em;
  font-size: clamp(1.55rem, 2.5vw, 2.55rem);
  line-height: 1.18;
  letter-spacing: -.04em;
  text-wrap: balance;
}
.section-heading > p { flex: 0 1 26rem; max-width: 26rem; color: var(--muted); font-size: 1.0625rem; }
.running { background: var(--surface); }
.os-demo { width: 70%; margin-inline: auto; }
.demo-footer { width: 70%; margin-inline: auto; }
.os-demo video { width: 100%; aspect-ratio: 16/9; object-fit: contain; background: #000; }
.os-demo figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem; font: .75rem/1.6 var(--mono); color: var(--muted); border-bottom: 1px solid var(--line); padding-block: 1rem; }
.demo-footer { display: flex; gap: 2rem; align-items: center; padding-top: 1.5rem; }
.demo-footer > p { margin-right: auto; }
.difference-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6rem; align-items: start; }
.difference-grid h2 { font-size: clamp(2.1rem, 3.2vw, 2.9rem); line-height: 1.2; letter-spacing: -.035em; font-weight: 500; }
.difference-grid .prose { margin-block: 1.25rem 1rem; }
.logic-demo { border: 1px solid var(--line); padding: 2rem; background: var(--surface); min-width: 0; }
.logic-demo-top { display: flex; justify-content: space-between; gap: 1rem; }
.demo-tag { color: var(--muted); font-size: .75rem; }
.logic-operands { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; margin-block: 1.25rem; padding: 0; border: 0; }
.logic-operands legend { grid-column: 1 / -1; font-size: .875rem; color: var(--muted); margin-bottom: .15rem; }
.logic-operands label { display: flex; flex-direction: column; gap: .35rem; border: 1px solid var(--line); padding: .75rem; background: var(--bg); min-width: 0; }
.logic-operands label > span { font: .75rem/1.4 var(--mono); color: var(--muted); letter-spacing: .04em; }
.logic-operands input { width: 100%; min-height: 44px; padding: .55rem .6rem; background: transparent; color: var(--text); border: 1px solid var(--line); font: 1.35rem/1.2 var(--mono); }
.logic-operands code { font: .8125rem/1.4 var(--mono); color: var(--accent); }
.logic-operands small { font: .75rem var(--mono); color: var(--muted); }
.logic-inputs { display: grid; grid-template-columns: repeat(3, 1fr); margin-block: 1.75rem; border-block: 1px solid var(--line); }
.logic-inputs > div { display: flex; flex-direction: column; padding: .85rem 0; }
.logic-inputs > div + div { border-left: 1px solid var(--line); padding-left: 1.2rem; }
.logic-inputs span { font: .875rem var(--mono); color: var(--muted); }
.logic-inputs strong { font-size: 2.8rem; line-height: 1.3; font-weight: 400; letter-spacing: -.04em; }
#logic-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; padding: 0; margin: 0; border: 0; }
#logic-choices legend { font-size: .875rem; margin-bottom: .75rem; color: var(--muted); width: 100%; }
#logic-choices label { display: flex; align-items: center; gap: .5rem; border: 1px solid var(--line); padding: .55rem .75rem; font-size: .875rem; cursor: pointer; min-height: 44px; }
#logic-choices label:has(input:checked) { border-color: var(--accent); color: var(--accent); }
#logic-choices input { accent-color: var(--accent); margin: 0; }
.logic-error:not(:empty) { color: var(--accent); font-size: .875rem; margin-top: .75rem; }
.logic-result { border-bottom: 1px solid var(--line); padding-block: 1.5rem; min-height: 0; }
#logic-expression { font: 1.05rem/1.45 var(--mono); color: var(--muted); }
.logic-answer { display: flex; flex-wrap: wrap; align-items: baseline; gap: .75rem 1.5rem; margin-block: .35rem .75rem; }
#logic-output { display: block; color: var(--accent); font-size: clamp(3.2rem, 7vw, 4.6rem); letter-spacing: -.06em; line-height: 1.15; }
.logic-answer code { display: block; font: 1rem var(--mono); color: var(--text); }
.logic-answer span { font: .8125rem var(--mono); color: var(--muted); }
#logic-explanation { color: var(--muted); font-size: .9375rem; }
.opcode-pair { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-top: 1.25rem; }
.opcode-pair > div { border: 1px solid var(--line); padding: 1rem; background: var(--bg); }
.opcode-pair span { display: block; font: .7rem/1.4 var(--mono); letter-spacing: .06em; color: var(--muted); }
.opcode-pair strong { display: block; margin-top: .45rem; font: 1.35rem/1.2 var(--mono); color: var(--accent); }
.opcode-pair code { display: block; margin-top: .35rem; font: .875rem var(--mono); }
.opcode-pair small { display: block; margin-top: .35rem; color: var(--muted); font-size: .8125rem; }
.logic-trace { margin-top: 1rem; border: 1px solid var(--line); padding: 1rem; display: grid; gap: .55rem; background: var(--bg); }
.logic-trace > div { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; font: .875rem var(--mono); }
.logic-trace span { color: var(--muted); }
.logic-trace .trace-total { border-top: 1px solid var(--line); padding-top: .65rem; color: var(--accent); }
.logic-trace .trace-total code { color: var(--accent); }
#logic-carry-out { margin: .35rem 0 0; color: var(--muted); font-size: .75rem; }
.truth-details { margin-top: 1rem; border-top: 1px solid var(--line); padding-top: .75rem; }
.truth-details summary { cursor: pointer; font-size: .875rem; color: var(--muted); }
.truth-details p { margin-block: .75rem; color: var(--muted); font-size: .8125rem; }
.logic-truth { width: 100%; border-collapse: collapse; font: .8125rem var(--mono); }
.logic-truth th, .logic-truth td { border-bottom: 1px solid var(--line); padding: .4rem .35rem; text-align: left; }
.logic-truth caption { caption-side: bottom; text-align: left; color: var(--muted); padding-top: .5rem; font: .75rem var(--sans); }
.logic-foot { color: var(--muted); font-size: .8125rem; margin-block: 1rem .5rem; }
.polymorphic-panel { display: grid; grid-template-columns: 1.05fr .95fr; gap: 2.5rem; margin-top: 3.5rem; padding: 2rem; border: 1px solid var(--line); background: var(--surface); }
.polymorphic-panel .eyebrow { color: var(--accent); }
.polymorphic-panel h3 { margin-block: .75rem 1rem; }
.polymorphic-panel p { color: var(--muted); margin-bottom: 1rem; font-size: 1rem; line-height: 1.65; }
.polymorphic-panel code { font-size: .95em; color: var(--text); }
.polymorphic-map { border: 1px solid var(--line); background: var(--bg); padding: 1.15rem 1.2rem; }
.polymorphic-map figcaption { font: .75rem/1.4 var(--mono); color: var(--accent); letter-spacing: .04em; margin-bottom: .85rem; }
.poly-mux { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.poly-mux li { display: grid; grid-template-columns: 7.5rem 1fr; gap: .15rem .75rem; padding: .55rem 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.poly-mux span { font: .68rem/1.35 var(--mono); color: var(--muted); letter-spacing: .03em; grid-row: 1 / span 2; padding-top: .1rem; }
.poly-mux strong { font-size: .875rem; font-weight: 550; color: var(--text); }
.poly-mux em { font-style: normal; font-size: .75rem; color: var(--muted); line-height: 1.35; }
.polymorphic-map > p { margin: .9rem 0 0; font-size: .8125rem; color: var(--muted); line-height: 1.55; }
.polymorphic-map > p code { font-size: .9em; }
.engineering-note { border-block: 1px solid var(--line); margin-top: 3rem; }
.engineering-note summary { padding: 1.2rem .5rem; font-size: .9375rem; cursor: pointer; }
.engineering-note .prose { padding: 0 .5rem 1.5rem; max-width: 65rem; }
.engineering-note code { font-size: .95em; overflow-wrap: anywhere; }
.registers { background: var(--surface); }
.register-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 4.5rem; }
.register-grid h2 { margin-top: 1.5rem; }
.register-deck { font-size: 1.3rem; margin-block: 1.25rem 2rem; color: var(--muted); }
.register-chart { align-self: center; }
.chart-heading { display: flex; justify-content: space-between; color: var(--muted); border-bottom: 1px solid var(--line); padding-bottom: 1rem; }
.chart-row { margin-top: 1.75rem; }
.chart-row > div:first-child { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: .7rem; font-size: .875rem; }
.chart-row strong { font: 1.4rem var(--mono); }
.bar-track { width: 100%; height: 18px; background: var(--bg); }
.bar { display: block; height: 100%; }
.bar-tomato { width: 50%; background: var(--accent); }
.bar-blackwell { width: 100%; background: var(--green); }
.bar-riscv { width: .048828125%; background: var(--muted); }
.chart-row-tomato strong { color: var(--accent); }
.chart-row-riscv strong { color: var(--muted); }
.chart-row small { display: block; font-size: .8125rem; color: var(--muted); margin-top: .5rem; }
.comparison-note { border-top: 1px solid var(--line); margin-top: 2rem; padding-top: 1.2rem; color: var(--muted); font-size: .875rem; line-height: 1.7; }
.register-sources { display: flex; flex-wrap: wrap; gap: 1rem 2rem; border-top: 1px solid var(--line); margin-top: 3rem; padding-top: 1.5rem; font-size: .875rem; }
.register-sources p { width: 100%; color: var(--muted); }
.build-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-block: 1px solid var(--line); }
.build-grid article { padding: 2rem; }
.build-grid article:first-child { padding-left: 0; }
.build-grid article:last-child { padding-right: 0; }
.build-grid article + article { border-left: 1px solid var(--line); }
.state { display: inline-block; color: var(--accent); margin-bottom: 1.5rem; }
.state-running { color: var(--green); }
.state-planned { color: var(--muted); }
.build-grid p { color: var(--muted); margin-block: 1rem 1.5rem; }
.build-grid a { font-size: .875rem; }
.proof-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6rem; padding-top: 4rem; }
.proof-row h3 { font-size: 2rem; margin-top: 1rem; }
.proof-row .prose .small-copy { font-size: .875rem; }
.builder { background: var(--surface); }
.builder-grid { display: grid; grid-template-columns: .65fr 1.35fr; align-items: center; gap: 5rem; }
.builder figure { width: min(100%, 17rem); justify-self: center; }
.builder figure img { width: 100%; max-height: 22rem; object-fit: cover; filter: grayscale(1); }
.builder figcaption { margin-top: .75rem; font: .75rem/1.6 var(--mono); color: var(--muted); }
.builder h2 { margin-block: 1.5rem 2rem; }
.builder-links { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-top: 1.5rem; }
.explore h2 { margin-bottom: 3rem; }
.explore-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-block: 1px solid var(--line); }
.explore-grid > a { text-decoration: none; padding: 1.5rem 1rem; display: flex; flex-direction: column; min-width: 0; }
.explore-grid > a:first-child { padding-left: 0; }
.explore-grid > a + a { border-left: 1px solid var(--line); }
.explore-grid > a > span:first-child { font: .75rem var(--mono); color: var(--muted); margin-bottom: 1.5rem; }
.explore-grid h3 { font-size: 1.2rem; }
.explore-grid p { font-size: .875rem; color: var(--muted); margin-block: .85rem 1.5rem; }
.explore-arrow { font-size: 1.7rem; margin-top: auto; color: var(--accent); }
.explore-grid a:hover h3 { color: var(--accent); }
.faq-teaser .section-heading { margin-bottom: 1.25rem; }
.faq-teaser .section-heading h2 { font-size: clamp(1.55rem, 2.5vw, 2.55rem); }
.faq-teaser .section-heading p { margin: 0; }
.faq-home { border-top: 1px solid var(--line); margin-bottom: 1rem; max-width: 48rem; }
.faq-home details { border-bottom: 1px solid var(--line); }
.faq-home summary {
  cursor: pointer;
  list-style: none;
  position: relative;
  padding: .7rem 1.75rem .7rem 0;
  font: 500 .9375rem/1.4 var(--sans);
  letter-spacing: -.015em;
}
.faq-home summary::-webkit-details-marker { display: none; }
.faq-home summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: .65rem;
  color: var(--accent);
  font: 1.1rem/1 var(--mono);
}
.faq-home details[open] summary { color: var(--accent); }
.faq-home details[open] summary::after { content: "−"; }
.faq-home summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.faq-home p {
  margin: 0;
  padding: 0 1.75rem .85rem 0;
  color: var(--muted);
  font-size: .875rem;
  line-height: 1.55;
  max-width: 42rem;
}
.faq-home p a { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--line); }
.faq-home p a:hover { border-color: var(--accent); }
.faq-home code { font: .8125rem/1.4 var(--mono); overflow-wrap: anywhere; }
.front-footer { border-top: 1px solid var(--line); padding-top: 2.5rem; }
.footer-top { display: flex; align-items: center; gap: 4rem; }
.footer-top p { color: var(--muted); font-size: .9375rem; }
.footer-top > a:last-child { margin-left: auto; }
.footer-logo { font-size: clamp(3.5rem, 7vw, 7rem); font-weight: 600; letter-spacing: -.09em; line-height: 1; text-decoration: none; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 1rem 2rem; margin-block: 2.5rem; }
.footer-nav a { color: var(--muted); font-size: .8125rem; text-decoration: none; }
.footer-nav a:hover { color: var(--accent); }
.footer-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding-block: 1.5rem; border-top: 1px solid var(--line); color: var(--muted); }
.footer-meta a { text-decoration: none; }
@media (min-width: 1600px) {
  h1 { font-size: clamp(2.1rem, 3.4vw, 3.35rem); }
}
@media (max-width: 1100px) {
  .frame { width: calc(100% - 4rem); }
  .front-nav { gap: 1.5rem; }
  .front-links { gap: 1.25rem; }
  .intro-grid, .difference-grid, .builder-grid, .register-grid, .proof-row { gap: 3rem; }
  .hero-actions { gap: .55rem .85rem; }
  .hero-deck { font-size: 1rem; }
  .board-meta { gap: .35rem .85rem; }
  .demo-footer { flex-wrap: wrap; }
  .section-heading { gap: 2rem; }
  .section-heading > p { max-width: 22rem; }
}
@media (max-width: 860px), (max-height: 720px) {
  .hero-bar { padding: 1rem 0 1.15rem; }
  h1 { max-width: none; font-size: clamp(1.7rem, 7vw, 2.4rem); }
}
@media (max-width: 760px) {
  .frame { width: calc(100% - 2.5rem); }
  .front-nav { min-height: 5rem; flex-wrap: wrap; justify-content: space-between; gap: 0; padding-block: 1rem; }
  .wordmark { font-size: 1.75rem; }
  .wordmark img { width: 28px; height: 34px; }
  .theme-toggle { order: 1; }
  .front-paths {
    order: 2;
    margin: 1rem 0 0;
    width: 100%;
    justify-content: flex-start;
    gap: .35rem;
  }
  .front-path { font-size: .8125rem; padding: .4rem .6rem; min-height: 36px; }
  .front-path--primary { padding-inline: .8rem; }
  .front-links {
    order: 3;
    margin: .75rem 0 0;
    width: 100%;
    justify-content: flex-start;
    gap: .85rem 1.1rem;
    flex-wrap: wrap;
  }
  .front-links a { font-size: .75rem; }
  .hero-journeys {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }
  .hero-journeys strong {
    font-size: clamp(.68rem, 2.8vw, .78rem);
    white-space: nowrap;
  }
  .board-meta { grid-template-columns: 1fr auto; align-items: start; }
  .board-meta__lot { grid-column: 1 / -1; order: 3; }
  .hero-deck { max-width: 32rem; font-size: 1.0625rem; margin-top: 0; }
  /* Mobile hero: fill the viewport too, so 01 never peeks in on load.
     Board stretches to take leftover space; copy sits at the bottom.
     svh only — dvh would resize the board as the URL bar shows/hides. */
  .hero {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - var(--front-nav-height, 4.25rem));
    min-height: calc(100svh - var(--front-nav-height, 4.25rem));
  }
  .hero-stage { flex: 1 1 0; display: flex; min-height: 0; }
  .hero-board { flex: 1 1 0; display: flex; flex-direction: column; min-height: 0; }
  .hero-board .bench-stage {
    flex: 1 1 0;
    height: auto;
    min-height: 18rem;
    max-height: 66vh;
    max-height: 66svh;
  }
  .board-chrome { padding-block: .45rem; justify-content: center; text-align: center; gap: .55rem; }
  .board-caption-text { width: 100%; flex: 1 1 100%; text-align: center; font-size: .72rem; }
  .board-chrome__end { margin: 0 auto; width: 100%; justify-content: center; }
  .viewer-controls { position: static; }
  /* Centered on the page (anchored to .board-chrome), not under the button,
     so the panel never clips at viewport edges. */
  .viewer-controls-panel {
    left: 50%;
    right: auto;
    top: calc(100% + .5rem);
    width: min(18rem, calc(100vw - 2.5rem));
    transform: translateX(-50%);
  }
  .status-strip { display: grid; grid-template-columns: 1fr 1fr; font-size: .8125rem; gap: 1rem; }
  .section-space { padding-block: 3.5rem; }
  .section-label { margin-bottom: 2rem; }
  .section-label > :last-child { text-align: right; max-width: 45%; }
  .intro-grid, .difference-grid, .register-grid, .proof-row { grid-template-columns: 1fr; gap: 2rem; }
  .intro-grid .prose { padding: 0; }
  .fact-row { margin-top: 2.5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fact-row > a { padding: 1.15rem 0; }
  .fact-row > a + a { padding-left: 1rem; }
  .fact-row > a:nth-child(3) { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); }
  .fact-row > a:nth-child(n+3) { border-top: 1px solid var(--line); }
  .fact-row > a:nth-child(4) { padding-left: 1rem; border-left: 1px solid var(--line); }
  .fact-row strong { font-size: clamp(1.45rem, 4.2vw, 2.2rem); }
  .fact-row a > span { font-size: .8125rem; white-space: normal; }
  .section-heading { display: block; margin-bottom: 2rem; }
  .section-heading > p { max-width: 32rem; margin-top: 1.5rem; }
  .demo-footer { gap: 1rem 1.5rem; }
  .demo-footer > p { width: 100%; }
  .logic-demo { padding: 1.5rem; }
  .logic-operands { grid-template-columns: 1fr; }
  .opcode-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .polymorphic-panel { grid-template-columns: 1fr; gap: 1.5rem; padding: 1.5rem; }
  .poly-mux li { grid-template-columns: 6.25rem 1fr; gap: .1rem .55rem; }
  .register-grid h2 { font-size: clamp(1.45rem, 5.5vw, 2.2rem); }
  .register-chart { margin-top: .5rem; }
  .build-grid { grid-template-columns: 1fr; }
  .build-grid article, .build-grid article:first-child, .build-grid article:last-child { padding: 1.75rem 0; }
  .build-grid article + article { border-left: 0; border-top: 1px solid var(--line); }
  .state { margin-bottom: .75rem; }
  .proof-row { padding-top: 2.5rem; }
  .builder-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .builder figure { width: min(100%, 13rem); justify-self: start; }
  .builder figure img { max-height: 16rem; }
  .builder h2 br { display: none; }
  .explore-grid { grid-template-columns: repeat(2, 1fr); }
  .explore-grid > a { padding: 1.5rem 1rem; }
  .explore-grid > a:nth-child(odd) { border-left: 0; padding-left: 0; }
  .explore-grid > a:nth-child(n+3) { border-top: 1px solid var(--line); }
  .explore-grid > a:nth-child(5) { grid-column: 1 / -1; border-left: 0; padding-left: 0; }
  .explore-grid > a > span:first-child { margin-bottom: 1.5rem; }
  .footer-top { flex-wrap: wrap; gap: 1.5rem; }
  .footer-top > a:last-child { margin-left: 0; }
  .footer-top p { margin-left: auto; }
  .footer-nav { gap: .75rem 1.2rem; }
  .hud-desk, .bench-legend--desk { display: none; }
  .hud-hand, .bench-legend--hand { display: block; }
}
@media (max-width: 380px) {
  .frame { width: calc(100% - 2rem); }
  .front-links { flex-wrap: wrap; justify-content: flex-start; gap: .7rem 1.2rem; }
  .status-strip { grid-template-columns: 1fr; }
  .board-meta { grid-template-columns: 1fr; }
  .logic-demo { padding: 1rem; }
  .logic-demo-top { flex-wrap: wrap; }
  .fact-row { grid-template-columns: 1fr; }
  .fact-row > a + a { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; }
  .fact-row strong { font-size: 2.5rem; }
  .chart-row > div:first-child { flex-wrap: wrap; gap: .25rem; }
  .footer-top p { margin-left: 0; }
}
/* Readable engineering diagrams share the register comparison's visual language. */
.architecture-figure, .address-figure, .word-figure { border-top: 1px solid var(--line); margin-top: 3rem; padding-top: 1.5rem; }
.diagram-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem 2rem; margin-bottom: 1.5rem; }
.diagram-heading h3 { font-size: 1.35rem; }
.diagram-heading p { font-size: .875rem; color: var(--muted); }
.alu-signal { display: flex; flex-direction: column; gap: .45rem; }
.signal-box {
  display: grid;
  grid-template-columns: minmax(7.5rem, auto) minmax(0, 1fr) auto;
  align-items: baseline;
  gap: .2rem .9rem;
  border: 1px solid var(--line);
  background: var(--surface);
  padding: .7rem 1rem;
  min-width: 0;
}
.signal-box > span, .immediate-source > span, .immediate-destination > span, .address-fields > div > span, .instruction-word > div > span, .flow-step { display: block; font: .75rem/1.5 var(--mono); color: var(--muted); letter-spacing: .035em; }
.signal-box strong { display: block; margin: 0; font: 1rem/1.35 var(--mono); overflow-wrap: anywhere; }
.signal-box small { display: block; color: var(--muted); font-size: .8125rem; text-align: right; }
.signal-box-accent { border-color: var(--accent); }
.signal-box-accent strong { color: var(--accent); }
.signal-arrow { display: block; font: 1rem/1 var(--mono); color: var(--muted); text-align: center; }
.lut-pair { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; }
.lut-pair .signal-box { grid-template-columns: 1fr; gap: .15rem; }
.lut-pair .signal-box small { text-align: left; }
.capacity-equation { display: grid; grid-template-columns: 1fr auto 1fr auto .8fr auto 1.6fr; gap: 1rem; align-items: center; border-block: 1px solid var(--line); margin-top: 2rem; padding-block: 1.5rem; }
.capacity-equation > div { display: flex; flex-direction: column; }
.capacity-equation strong { font-size: clamp(1.5rem, 3.2vw, 3rem); line-height: 1.15; font-weight: 500; letter-spacing: -.045em; }
.capacity-equation span { color: var(--muted); font-size: .8125rem; margin-top: .5rem; }
.capacity-equation > span { font-size: 1.4rem; margin-top: 0; }
.capacity-total strong { color: var(--accent); }
.address-fields { display: grid; grid-template-columns: 7fr 3fr 5fr; border: 1px solid var(--line); }
.address-fields > div { padding: 1.25rem; }
.address-fields > div + div { border-left: 1px solid var(--line); }
.address-fields > div:first-child { background: var(--bg); }
.address-fields strong { display: block; font-size: 1.35rem; font-weight: 500; margin-block: .5rem; }
.address-fields small { color: var(--muted); font-size: .875rem; }
.diagram-caption { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .75rem 2rem; margin-top: 1rem; color: var(--muted); font-size: .8125rem; }
.diagram-caption code { color: var(--accent); font: .9375rem var(--mono); }
.feature-diagram-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6rem; align-items: start; }
.feature-diagram-grid .prose { margin-top: 2rem; }
.feature-diagram-grid .text-link { margin-top: 1rem; }
.immediate-demo { background: var(--surface); border: 1px solid var(--line); padding: 2rem; min-width: 0; }
.immediate-demo .diagram-heading { display: block; }
.immediate-demo .diagram-heading p { margin-top: .5rem; }
.select-label { display: block; color: var(--muted); font-size: .875rem; margin-bottom: .5rem; }
#immediate-mode { width: 100%; padding: .85rem .75rem; min-height: 48px; background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 0; font: .9375rem var(--sans); }
.immediate-source { margin-top: 1.5rem; padding: 1.25rem; border: 1px solid var(--line); }
.immediate-source strong { display: inline-block; font: 1.5rem var(--mono); margin-top: .6rem; }
.immediate-source small { font: .875rem var(--mono); color: var(--muted); margin-left: 1rem; }
.immediate-transform { display: flex; align-items: center; gap: 1rem; margin-block: 1rem; color: var(--muted); font-size: .875rem; }
.immediate-transform > span:first-child { font: 1.8rem var(--mono); color: var(--accent); }
.immediate-destination { padding: 1.25rem; border: 1px solid var(--accent); }
.immediate-destination strong { display: block; margin-block: .5rem 1rem; font: clamp(1.5rem, 2.4vw, 2.2rem) var(--mono); color: var(--accent); overflow-wrap: anywhere; }
.immediate-destination p { color: var(--muted); font-size: .875rem; margin-top: 1rem; }
.immediate-bits { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .25rem; font: .8125rem/1.8 var(--mono); }
.immediate-bits > span { border-bottom: 1px solid var(--line); text-align: center; }
.bit-extension { color: var(--muted); }
.instruction-section { background: var(--surface); }
.instruction-flow { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); padding: 0; margin: 0; border: 1px solid var(--line); }
.instruction-flow > li { padding: 1.5rem; position: relative; }
.instruction-flow > li + li { border-left: 1px solid var(--line); }
.instruction-flow > li + li::before { content: '→'; color: var(--accent); position: absolute; left: -.65rem; top: 1.3rem; background: var(--surface); font: 1.3rem var(--mono); }
.flow-step { color: var(--accent); margin-bottom: 1rem; }
.instruction-flow h3 { font-size: 1.25rem; }
.instruction-flow p { color: var(--muted); font-size: .9375rem; margin-top: .85rem; }
.instruction-word { display: grid; grid-template-columns: 9fr 5fr 5fr 5fr 5fr 3fr; border: 1px solid var(--line); }
.instruction-word > div { padding: 1.1rem .8rem; min-width: 0; }
.instruction-word > div + div { border-left: 1px solid var(--line); }
.instruction-word > div:first-child { background: var(--bg); }
.instruction-word strong { display: block; font-size: .9375rem; font-weight: 500; margin-block: .5rem; overflow-wrap: anywhere; }
.instruction-word small { font: .8125rem var(--mono); color: var(--muted); }
@media (max-width: 1100px) {
  .feature-diagram-grid { gap: 3rem; }
  .signal-box { padding: .65rem .85rem; gap: .15rem .7rem; }
  .signal-box strong { font-size: .9375rem; }
  .immediate-demo { padding: 1.5rem; }
  .immediate-destination { padding: 1rem .75rem; }
  .immediate-bits { font-size: .75rem; }
}
@media (max-width: 760px) {
  .os-demo, .demo-footer { width: 100%; }
  .feature-diagram-grid { grid-template-columns: 1fr; gap: 2rem; }
  .diagram-heading { display: block; }
  .diagram-heading p { margin-top: .5rem; }
  .signal-box { grid-template-columns: 1fr; gap: .15rem; }
  .signal-box small { text-align: left; }
  .lut-pair { grid-template-columns: 1fr 1fr; }
  .capacity-equation { grid-template-columns: 1fr auto 1fr auto .8fr; gap: .5rem; }
  .capacity-equation > span:nth-last-child(2) { display: none; }
  .capacity-total { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 1.25rem; margin-top: .5rem; }
  .capacity-total strong { font-size: 2.6rem; }
  .address-fields { grid-template-columns: 1fr 1fr 1fr; }
  .address-fields > div { padding: .8rem .55rem; }
  .address-fields strong { font-size: 1rem; }
  .address-fields small { font-size: .8125rem; }
  .immediate-demo { padding: 1.25rem; }
  .immediate-destination { padding: 1rem .5rem; }
  .instruction-flow { grid-template-columns: 1fr 1fr; }
  .instruction-flow > li:nth-child(3) { border-left: 0; }
  .instruction-flow > li:nth-child(n+3) { border-top: 1px solid var(--line); }
  .instruction-flow > li + li::before { display: none; }
  .instruction-word { grid-template-columns: repeat(3, 1fr); }
  .instruction-word > div:nth-child(4) { border-left: 0; }
  .instruction-word > div:nth-child(n+4) { border-top: 1px solid var(--line); }
}
@media (max-width: 380px) {
  .immediate-demo { padding: 1rem .75rem; }
  .instruction-flow { grid-template-columns: 1fr; }
  .instruction-flow > li + li { border-left: 0; border-top: 1px solid var(--line); }
}

@media (pointer: coarse) {
  .viewer-hint-desk { display: none; }
  .viewer-hint-hand { display: inline; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@media print {
  :root { --bg: #fff; --surface: #fff; --text: #000; --muted: #444; --line: #ccc; --accent: #a32010; }
  .frame { width: 100%; }
  .section-space { padding-block: 2rem; }
  .front-links, .front-paths, .theme-toggle, .bench-tools, .viewer-controls, .board-tour, #load-board, .footer-nav { display: none !important; }
  .hero-copy, .intro-grid, .difference-grid, .register-grid, .builder-grid, .proof-row { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .bench-stage.is-ready .board-image { visibility: visible; }
  #front-bench { display: none; }
  h1 { font-size: 2.4rem; max-width: none; }
  h2 { font-size: 2.2rem; }
}

.hero-pitch { max-width: 43rem; margin: 0; color: var(--muted); font-size: clamp(.9375rem, 1.3vw, 1.125rem); line-height: 1.5; text-wrap: pretty; }
.logic-demo { overflow-wrap: anywhere; }
.logic-demo-top { flex-wrap: wrap; gap: .5rem; }
.logic-operands > label, .logic-answer > div, .opcode-pair > div { min-width: 0; }
.logic-trace > div { flex-wrap: wrap; gap: .35rem 1rem; }
#logic-choices label { min-width: 0; padding: .45rem .5rem; font-size: .8125rem; }
#logic-choices input { flex-shrink: 0; }
@media(max-width:760px) {
  /* The mobile browser's usable height can be much shorter than the physical
     screen once Chrome's bars and the keyboard are present. Keep the opening
     in normal document flow: the previous viewport-locked flex hero allocated
     less space than the board's 18rem minimum, so the board controls painted
     over the headline and CTAs on a real 360px-wide phone. */
  .hero {
    display: block;
    min-height: 0;
  }
  .hero-stage,
  .hero-board {
    display: block;
    min-height: 0;
  }
  .hero-board .bench-stage {
    height: clamp(15rem, 42svh, 22rem);
    min-height: 0;
    max-height: none;
  }
  .board-chrome {
    min-height: 4.25rem;
  }
  .logic-operands { grid-template-columns: repeat(3,minmax(0,1fr)); gap:.4rem; }
  .logic-operands label { padding:.5rem; }
  .logic-operands code { font-size:.75rem; overflow-wrap:anywhere; }
}
/* Compact opening copy. */
#hero-title {
  max-width: 100%;
  font-size: clamp(1.15rem, 2.4vw + .4rem, 2.5rem);
  line-height: 1.15;
  letter-spacing: -.035em;
}
.hero-pitch { font-size:clamp(.875rem,1.15vw,1rem); line-height:1.45; }
.hero-bar { padding:.85rem 0 1rem; }
.hero-copy { gap:.5rem; }
.hero-bar__inner { gap:.6rem; }
.running-layout { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); align-items:center; gap:3rem; }
.running-layout .os-demo { width:min(100%,24rem); margin:0 auto; }
.bench-status-layout { display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.2fr); gap:2.5rem; align-items:start; }
.bench-status-copy h2 {
  max-width: 16em;
  font-size: clamp(1.55rem, 2.5vw, 2.55rem);
  line-height: 1.18;
  letter-spacing: -.04em;
  text-wrap: balance;
  margin-top: 0;
}
.bench-status-copy > p { color:var(--muted); font-size:1rem; line-height:1.75; margin-block:1.25rem; max-width:38rem; }
.bench-status-media {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  min-width: 0;
  max-width: 32rem;
  justify-self: end;
  align-items: start;
}
.bench-status-media figure { margin:0; min-width:0; display:flex; flex-direction:column; }
.bench-still-frame,
.bench-clip-frame {
  width: 100%;
  height: auto;
  background: #050505;
  overflow: hidden;
  display: grid;
  place-items: center;
}
.bench-still-frame { aspect-ratio: 1 / 1; }
.bench-clip-frame { aspect-ratio: 960 / 738; }
.bench-still-frame img,
.bench-clip-frame video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  background: #050505;
}
.bench-status-media figcaption {
  display: grid;
  gap: .35rem;
  margin-top: .7rem;
  font: .75rem/1.55 var(--mono);
  color: var(--muted);
}
.bench-status-media figcaption strong {
  font: 500 .9rem/1.4 var(--sans);
  color: var(--text);
}
.bench-meta-chapter { color: var(--accent); }
.bench-clip-facts {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1.1rem;
  margin: .35rem 0 0;
  padding: 0;
}
.bench-clip-facts div { display: flex; gap: .4rem; }
.bench-clip-facts dt { color: var(--muted); }
.bench-clip-facts dd { margin: 0; color: var(--text); }
.running-copy { min-width: 0; }
.running-copy h2,
.compiler-layout h2,
.register-grid h2,
.feature-diagram-grid h2,
.builder-grid h2 {
  max-width: 16em;
  font-size: clamp(1.55rem, 2.5vw, 2.55rem);
  line-height: 1.18;
  letter-spacing: -.04em;
  text-wrap: balance;
}
.compiler-layout h2 {
  max-width: 14em;
  font-size: clamp(1.4rem, 2.2vw, 2.15rem);
}
.compiler-title-lead {
  display: block;
  margin: 0 0 .55rem;
  font: 500 .72rem/1.35 var(--mono);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--accent);
}
.running-copy > p { color:var(--muted); font-size:1rem; line-height:1.75; margin-block:1.25rem; }
.media-expand { display:block; position:relative; text-decoration:none; }
.media-expand video { width:100%; aspect-ratio:16/10; object-fit:contain; pointer-events:none; background:#050505; }
.media-expand-label { display:block; color:var(--accent); font:.7rem/1.5 var(--mono); padding:.7rem; border-top:1px solid var(--line); background:var(--surface); }
.os-demo figcaption { display:block; margin-top:.5rem; font:.7rem/1.5 var(--mono); color:var(--muted); }
.preview-toggle { background:transparent; border:0; border-bottom:1px solid var(--line); color:var(--muted); font:.75rem var(--sans); min-height:40px; padding:.5rem 0; }
.media-dialog { width:min(72rem,94vw); max-height:94dvh; padding:1rem; border:1px solid var(--line); background:var(--bg); color:var(--text); margin:auto; }
.media-dialog::backdrop { background:rgb(0 0 0 / .85); }
.media-dialog-heading { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1rem; }
.media-dialog-heading h2 { font:500 1rem/1.4 var(--sans); letter-spacing:0; }
.media-dialog-heading button { min-height:44px; background:var(--surface); color:var(--text); border:1px solid var(--line); padding:.5rem 1rem; }
.media-dialog video { width:100%; max-height:78dvh; background:#050505; }
.logic-picker { display:grid; gap:.5rem; }
.logic-picker label { font:.875rem var(--sans); color:var(--muted); }
.logic-picker select { min-width:0; width:100%; min-height:44px; padding:.7rem .5rem; border:1px solid var(--line); border-radius:0; background:var(--bg); color:var(--text); font:.875rem var(--sans); }
.compiler-layout { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr); align-items:center; gap:3rem; }
.compiler-layout > div:first-child { min-width: 0; }
.compiler-layout .prose { margin-top:1.5rem; }
.compiler-preview { width:min(100%,17rem); justify-self:center; }
.compiler-preview a { display:block; text-decoration:none; }
.compiler-preview img { width:100%; max-height:19rem; object-fit:contain; background:#050505; }
.compiler-preview figcaption { font:.8125rem/1.6 var(--sans); color:var(--muted); margin-top:.75rem; }
.compiler-flow { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); list-style:none; padding:0; margin:2rem 0 0; border:1px solid var(--line); }
.compiler-flow li { padding:1rem; min-width:0; }
.compiler-flow li + li { border-left:1px solid var(--line); }
.compiler-flow span { display:block; font:.7rem var(--mono); color:var(--accent); margin-bottom:.65rem; }
.compiler-flow strong { font:500 .9375rem/1.5 var(--sans); }
.area-comparison { padding:1.5rem; border:1px solid var(--line); }
.area-comparison figcaption { font:.75rem var(--mono); color:var(--muted); margin-bottom:1.5rem; }
.area-comparison > div { display:grid; grid-template-columns:1fr auto; gap:.5rem 1rem; margin-block:1.25rem; font:.875rem/1.5 var(--mono); }
.area-comparison i { display:block; width:var(--area); height:1rem; background:var(--muted); grid-column:1/-1; }
.area-comparison > div:nth-of-type(2) i { background:var(--accent); }
.area-comparison p { color:var(--muted); font:.875rem/1.6 var(--sans); }
.comparison-scroll { overflow-x:auto; margin-top:.85rem; }
.evolution-table { width:100%; border-collapse:collapse; table-layout:auto; text-align:left; font:.8125rem/1.45 var(--sans); }
.evolution-table caption { text-align:left; font:.75rem var(--mono); color:var(--muted); margin-bottom:1rem; }
.evolution-table th, .evolution-table td { padding:.45rem .85rem .45rem 0; border-bottom:1px solid var(--line); vertical-align:top; }
.evolution-table th:first-child,
.evolution-table td:first-child { width:1%; white-space:nowrap; padding-right:1rem; }
.evolution-table th:not(:first-child),
.evolution-table td:not(:first-child) { padding-right:1.1rem; width:auto; }
.evolution-table td { color:var(--muted); }
.evolution-table thead th { font-weight:500; color:var(--accent); padding-bottom:.55rem; }
.alu-evolution > .comparison-note { margin-top:1rem; }
@media(max-width:760px) {
 .running-layout { gap:1.5rem; }
 .running-copy > p { font-size:.9375rem; margin-block:.85rem; }
 .bench-status-layout { gap:1.5rem; }
 .bench-status-copy > p { font-size:.9375rem; margin-block:.85rem; }
 .compiler-layout { gap:1.5rem; }
 .compiler-flow { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .compiler-flow li:nth-child(3) { border-left:0; }
 .compiler-flow li:nth-child(n+3) { border-top:1px solid var(--line); }
 .evolution-table { min-width:34rem; }
}
@media(max-width:700px) {
 .bench-status-layout { grid-template-columns:1fr; }
 .bench-status-media {
   grid-template-columns: 1fr;
 }
 .bench-still-frame { width: min(100%, 22rem); margin-inline: auto; }
}
@media(max-width:560px) {
 .running-layout, .compiler-layout { grid-template-columns:1fr; }
 .running-layout .os-demo { width:min(85%,20rem); }
 .compiler-preview { width:13rem; }
 .area-comparison > div { grid-template-columns:1fr; }
}
/* Compact media and directly readable comparisons. */
.running-layout{align-items:start}
.running-layout h2{margin-top:0}
.compiler-layout{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.compiler-media-pair{display:grid;grid-template-columns:1fr 1fr;gap:1rem;min-width:0;align-items:stretch}
.compiler-media-pair figure{height:100%;margin:0;min-width:0;display:flex;flex-direction:column}
.compiler-media-pair .compiler-frame{height:15rem;min-height:15rem;max-height:15rem;background:#050505;display:grid;place-items:center;overflow:hidden}
.compiler-media-pair .compiler-frame video{display:block;width:100%;height:100%;max-width:none;max-height:none;object-fit:contain;object-position:center;background:#050505}
.compiler-media-pair figcaption,.compiler-media-pair p{font:.8125rem/1.6 var(--sans);color:var(--muted);margin-top:.7rem}
.compiler-media-pair p{grid-column:1/-1}
.evolution-charts{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.evolution-chart{margin:0;padding:1.05rem 1.15rem;border-right:1px solid var(--line);border-bottom:1px solid var(--line);min-width:0}
.evolution-chart figcaption{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.35rem .5rem;font:500 .875rem/1.45 var(--sans);margin-bottom:1rem}
.evolution-chart figcaption strong{color:var(--green);font-weight:600}
.metric-row{display:grid;grid-template-columns:1fr auto;gap:.3rem .65rem;margin:.7rem 0;font:.75rem/1.5 var(--mono)}
.metric-row i{grid-column:1/-1;display:block;width:var(--bar);height:.7rem;background:var(--muted)}
.tomato-metric i{background:var(--green)}
.evolution-chart p{font:.75rem/1.55 var(--sans);color:var(--muted);margin:1rem 0 0}
@media(max-width:850px){.compiler-layout{grid-template-columns:1fr}.compiler-media-pair .compiler-frame{height:16rem;min-height:16rem;max-height:16rem}}
@media(max-width:560px){.evolution-charts{grid-template-columns:1fr}.compiler-media-pair .compiler-frame{height:12rem;min-height:12rem;max-height:12rem}.metric-row{grid-template-columns:1fr}.evolution-chart{padding:.95rem 1rem}}
/* Section rhythm: explanation and circuit share the same column. */
.difference-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:3rem;align-items:start}
.difference-grid>div:first-child{min-width:0}
.difference-grid .architecture-figure{margin:2rem 0 0;padding:1.5rem;border:1px solid var(--line)}
.difference-grid .diagram-heading{display:block;margin-bottom:1rem}
.difference-grid .diagram-heading p{margin-top:.5rem}
.difference-grid .opcode-equation{flex-wrap:wrap}
.project-statement{text-align:center;max-width:52rem!important;margin-inline:auto!important;font-size:clamp(1.15rem,1.7vw,1.65rem)!important;line-height:1.6!important}
.metric-row:not(.tomato-metric) i{background:#bd941c}
.compound-examples{display:grid;gap:1.5rem}
.compound-example{min-width:0}
.compound-example h3{margin:0 0 .75rem;font:500 .9375rem/1.4 var(--mono);letter-spacing:-.01em}
.compound-paths{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line)}
.compound-paths figure{padding:1.35rem 1.5rem;min-width:0}
.compound-paths figure+figure{border-left:1px solid var(--line);background:var(--surface)}
.compound-paths figcaption{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem;font:.8125rem/1.5 var(--mono)}
.compound-paths figcaption strong{color:var(--green)}
.operation-path{display:flex;align-items:center;flex-wrap:wrap;gap:.55rem;margin:1.1rem 0}
.operation-path code{padding:.7rem .8rem;border:1px solid var(--line);font:.8125rem/1.45 var(--mono)}
.compound-paths p{color:var(--muted);font-size:.875rem}
.comparison-note{margin-top:1.25rem;color:var(--muted);font-size:.875rem}
.evolution-detail{margin-top:1rem}
.evolution-detail>p{padding:.65rem 0;color:var(--muted);font-size:.8125rem;line-height:1.5}
@media(max-width:900px){.difference-grid{grid-template-columns:1fr}.compound-paths{grid-template-columns:1fr}.compound-paths figure+figure{border-left:0;border-top:1px solid var(--line)}}
@media(min-width:901px){.difference-grid{align-items:stretch}.difference-grid .logic-demo{display:flex;flex-direction:column;justify-content:space-between;gap:.5rem}.difference-grid .logic-demo>details{flex:none}}
.compound-trend{border:1px solid var(--line);padding:1.25rem 1.5rem;background:var(--surface)}
.compound-trend figcaption{display:flex;justify-content:center;flex-wrap:wrap;gap:.7rem 2rem;font:.875rem/1.5 var(--sans)}
.rv-key:before,.tomato-key:before{content:'';display:inline-block;width:1.6rem;height:3px;vertical-align:middle;margin-right:.5rem;background:#bd941c}
.tomato-key:before{background:var(--green)}
.compound-trend svg{display:block;width:100%;max-width:62rem;margin:.5rem auto 0;overflow:visible}
.compound-trend svg text{fill:var(--text);font:13px var(--mono)}
.compound-trend .axis-title{fill:var(--muted);font:12px var(--sans)}
.chart-grid{stroke:var(--line);stroke-width:1}
.rv-line,.tomato-line{fill:none;stroke-width:3;stroke-linejoin:round}
.rv-line{stroke:#bd941c}.tomato-line{stroke:var(--green)}
.rv-dot{fill:#bd941c}.tomato-dot{fill:var(--green)}
.compound-compact{border:1px solid var(--line);border-top:0}
.compound-columns,.compound-row summary{display:flex;justify-content:space-between;gap:1rem;align-items:center;padding:.85rem 1.25rem}
.compound-columns{font:.75rem/1.5 var(--mono);color:var(--muted);border-bottom:1px solid var(--line)}
.compound-row+ .compound-row{border-top:1px solid var(--line)}
.compound-row summary{cursor:pointer;list-style:none;font:.9375rem/1.5 var(--sans)}
.compound-row summary::-webkit-details-marker{display:none}
.compound-row summary>span:first-child{display:flex;align-items:center;gap:1rem}
.compound-row summary>span:first-child:after{content:'+';color:var(--muted)}
.compound-row[open] summary>span:first-child:after{content:'−'}
.compound-row small{font:.75rem var(--mono);color:var(--muted)}
.compound-row summary>span:last-child{display:flex;gap:1rem;min-width:5.5rem;justify-content:flex-end;font:1rem var(--mono)}
.rv-count{color:#a98010}.tomato-count{color:var(--green)}
.compound-row i{font-style:normal;color:var(--muted)}
.compound-row-body{padding:0 1.25rem 1.25rem}
.compound-row-body>code{display:block;color:var(--muted);font:.8125rem/1.6 var(--mono);overflow-wrap:anywhere}
.compound-row-body>div{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1rem}
.compound-row-body strong{font:.8125rem/1.5 var(--sans)}
.compound-row-body p code{display:block;white-space:pre-wrap;overflow-wrap:anywhere;font:.8125rem/1.7 var(--mono);margin-top:.5rem}
@media(max-width:600px){.compound-trend{padding:.75rem .4rem}.compound-trend svg text{font-size:16px}.compound-trend .axis-title{font-size:14px}.compound-columns,.compound-row summary{padding:.75rem}.compound-row-body>div{grid-template-columns:1fr}.compound-row summary>span:first-child{gap:.6rem}.compound-trend figcaption{font-size:.75rem;gap:.5rem 1rem}}
.compound-trend svg{max-width:52rem}
.compound-trend .expression-label{font:11px var(--sans)}
@media(max-width:600px){.compound-trend .expression-label{font-size:14px}}
.comparison-takeaways{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);border-bottom:0}
.comparison-takeaways p{padding:1rem 1.25rem;display:flex;flex-direction:column;gap:.25rem}
.comparison-takeaways p+p{border-left:1px solid var(--line)}
.comparison-takeaways strong{font:1.4rem/1.3 var(--mono)}
.comparison-takeaways span{font:.8125rem/1.5 var(--sans);color:var(--muted)}
.comparison-takeaways p:nth-child(2) strong{color:#b18b19}.comparison-takeaways p:nth-child(3) strong{color:var(--green)}
.compound-chart-scroll{overflow-x:auto}
.compound-trend .compound-chart-scroll svg{width:100%;min-width:800px;max-width:70rem}
.chart-reading-note{font:.75rem/1.5 var(--sans);color:var(--muted);text-align:center;margin:.5rem 0 0}
.sequence-explanation{font:.875rem/1.65 var(--sans);color:var(--muted);margin-top:1rem}
@media(max-width:600px){.comparison-takeaways p{padding:.75rem}.comparison-takeaways span{font-size:.75rem}.comparison-takeaways strong{font-size:1.1rem}}
/* Control-word exhibit: a hierarchy of blocks rather than a compressed text list. */
.polymorphic-panel{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}.polymorphic-panel>div>.text-link{display:inline-block;margin:.5rem 1.2rem 0 0}.poly-exhibit{margin:0!important;padding:1.3rem!important;min-width:0}.poly-exhibit figcaption{color:var(--accent);text-transform:uppercase;font:.7rem/1.5 var(--mono);margin:0 0 1.1rem}.poly-control{display:grid;grid-template-columns:1fr;gap:.45rem;padding:1rem;text-align:center;border-block:1px solid var(--line);margin-bottom:1rem}.poly-control span{font:.75rem/1.4 var(--mono);color:var(--muted)}.poly-control strong{font-size:1.2rem}.poly-branches{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}.poly-branch{padding:1rem;background:var(--surface);border:1px solid var(--line);min-width:0}.poly-branch--alu{grid-column:1/-1;border-top:2px solid var(--accent)}.poly-branch:last-child{grid-column:1/-1}.poly-label{display:block;font:.65rem/1.5 var(--mono);color:var(--accent);letter-spacing:.04em;margin-bottom:.6rem}.poly-branch strong{display:block;font-size:1.05rem;line-height:1.3;margin-bottom:.6rem}.poly-branch--alu strong{font-size:1.7rem;letter-spacing:-.04em}.poly-branch code{display:block;font:.78rem/1.6 var(--mono);overflow-wrap:anywhere}.poly-branch p{font-size:.82rem;line-height:1.55;margin:0!important}.poly-exhibit>.text-link{display:inline-block;margin-top:1.1rem;font-size:.85rem}
.alu-milestones{border-block:1px solid var(--line);padding-block:2.5rem;margin-top:2.5rem}.alu-milestones-heading{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;align-items:start;margin-bottom:1.5rem}.alu-milestones h3{font-size:clamp(1.7rem,3vw,2.5rem);line-height:1.15;letter-spacing:-.04em;margin:.7rem 0}.alu-milestones-heading>p{font-size:1rem;line-height:1.7;color:var(--muted);margin:0}.alu-milestone-list{list-style:none!important;padding:0!important;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border:1px solid var(--line);margin:0!important}.alu-milestone-list li{display:flex;flex-direction:column;padding:1.2rem;border-right:1px solid var(--line);min-width:0}.alu-milestone-list li:last-child{border:0}.milestone-state{font:.65rem/1.6 var(--mono);color:var(--green);margin-bottom:.8rem}.alu-milestone-list strong{font-size:1rem;line-height:1.35}.alu-milestone-list p{font-size:.82rem;line-height:1.6;color:var(--muted);margin:.7rem 0 1rem}.alu-milestone-list a{font-size:.75rem;color:var(--accent);text-decoration:underline;text-underline-offset:.25em;margin-top:auto}.alu-milestone-foot{font-size:.85rem;color:var(--muted);line-height:1.7;margin:1.2rem 0 0}.alu-milestone-foot a{color:var(--accent)}
@media(max-width:1100px){.polymorphic-panel{grid-template-columns:1fr}.poly-branches{grid-template-columns:repeat(3,minmax(0,1fr))}.poly-branch--alu{grid-column:1/-1}.poly-branch:last-child{grid-column:auto}.alu-milestone-list{grid-template-columns:repeat(3,minmax(0,1fr))}.alu-milestone-list li{border-bottom:1px solid var(--line)}}
@media(max-width:650px){.polymorphic-panel{padding:1rem}.poly-exhibit{padding:1rem!important}.poly-branches{grid-template-columns:1fr}.poly-branch--alu,.poly-branch:last-child{grid-column:1}.alu-milestones-heading{grid-template-columns:1fr;gap:1rem}.alu-milestone-list{grid-template-columns:1fr}.alu-milestone-list li{padding:1rem;border-right:0;display:grid;grid-template-columns:1fr;gap:.3rem}.milestone-state{margin:0}.alu-milestone-list p{margin:.2rem 0 .4rem}}
/* Keep formulas intact even when the ALU figure occupies a narrow column. */
.difference-grid .signal-box{grid-template-columns:1fr;gap:.4rem}.difference-grid .signal-box strong{overflow-wrap:normal;word-break:normal;white-space:nowrap}.difference-grid .signal-box small{text-align:left}.difference-grid .diagram-heading{display:block}.difference-grid .diagram-heading p{margin:.4rem 0 0}.difference-grid .capacity-equation{gap:.55rem}.difference-grid .capacity-equation strong{font-size:clamp(1.2rem,2.4vw,2.3rem)}
/* Completed steps form one connected trail; arrows describe progression, not links. */
.alu-milestone-list.completion-trail{display:flex;gap:2rem;border:0;align-items:stretch;padding:.7rem 0!important}.completion-trail li{position:relative;flex:1;border:0!important;padding:0;background:none;display:block}.completion-trail li+li:before{content:'→';position:absolute;left:-1.5rem;top:2.1rem;font:1.2rem var(--mono);color:var(--muted)}.completion-trail li a{display:flex;flex-direction:column;gap:.55rem;border-top:2px solid var(--green);padding:1rem .2rem;text-decoration:none;color:var(--text);height:100%;box-sizing:border-box}.completion-trail .milestone-state{margin:0;font-size:.63rem}.completion-trail strong{font-size:1rem;line-height:1.4}.completion-trail a:hover strong{text-decoration:underline;text-underline-offset:.2em}
@media(max-width:700px){.alu-milestone-list.completion-trail{flex-direction:column;gap:1.4rem}.completion-trail li+li:before{content:'↓';top:-1.3rem;left:.5rem}.completion-trail li a{display:grid;grid-template-columns:9rem 1fr;border-top:0;border-left:2px solid var(--green);padding:.6rem 1rem;align-items:center}.completion-trail strong br{display:none}}

/* A compact map of the computer, with optional engineering detail below. */
.tomato-overview .overview-heading{margin-bottom:2rem;max-width:46rem}
/* What is Tomato: a quick inline summary. Mobile-sized type, links never underline. */
.overview-bullets{list-style:none;margin:0 0 1.25rem;padding:0;max-width:56rem}
.overview-bullets li{padding:.35rem 0;font-size:1rem;line-height:1.6}
.overview-bullets a{color:var(--muted);text-decoration:none}
.overview-bullets a strong{color:var(--text);font-weight:600}
.overview-bullets a:hover,.overview-bullets a:hover strong{text-decoration:none}
.overview-bullets code{font-size:.85em}
@media(min-width:760px){.overview-bullets li{font-size:1.05rem}}
.overview-bottom{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:1.4rem}.overview-bottom p{font-size:1rem;margin:0;color:var(--muted)}
.home-depth{border-block:1px solid var(--line);margin-top:2rem;padding:1rem 0}.home-depth summary{cursor:pointer;font-size:1rem;line-height:1.5}.home-depth[open]>summary{margin-bottom:1.5rem}.home-depth .polymorphic-panel{margin:0}.home-depth .architecture-figure{margin-top:0}
@media(max-width:650px){.overview-bottom{display:block}.overview-bottom .text-link{margin-top:.7rem}}

.tomato-overview .overview-heading{margin-bottom:1.5rem}
.overview-heading>p{font-size:clamp(1.15rem,2vw,1.5rem);line-height:1.5;margin:1rem 0 0}.overview-heading>p strong{font-weight:500}
.tomato-overview .overview-bottom{border-top:1px solid var(--line);padding-top:1rem}

/* A first-time visitor can choose a real, virtual, or connected Tomato. */
.meet-tomato{padding-bottom:clamp(3.5rem,7vw,6rem)}
.meet-tomato-heading{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:2rem 4rem;align-items:end;margin-bottom:1.5rem}
.meet-tomato-heading h2{font-size:clamp(1.8rem,3.4vw,3.25rem);line-height:1.08}
.meet-tomato-paths{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-block:1px solid var(--line)}
.meet-tomato-paths>a{display:flex;flex-direction:column;min-width:0;padding:1.4rem 1.5rem;text-decoration:none}
.meet-tomato-paths>a:first-child{padding-left:0}
.meet-tomato-paths>a:last-child{padding-right:0}
.meet-tomato-paths>a+a{border-left:1px solid var(--line)}
.meet-tomato-paths span{font:.68rem/1.5 var(--mono);letter-spacing:.05em;color:var(--accent)}
.meet-tomato-paths strong{display:block;margin:.65rem 0 .45rem;font-size:1.2rem;line-height:1.3}
.meet-tomato-paths p{color:var(--muted);font-size:.875rem;line-height:1.65;margin:0 0 1rem}
.meet-tomato-paths b{margin-top:auto;color:var(--text);font-size:.8125rem;font-weight:600}
.meet-tomato-paths>a:hover strong,.meet-tomato-paths>a:hover b{color:var(--accent)}
.meet-tomato-boundary{margin:.8rem 0 0;color:var(--muted);font:.72rem/1.6 var(--mono)}
@media(max-width:700px){.meet-tomato-heading{grid-template-columns:1fr;gap:.75rem}.meet-tomato-paths{grid-template-columns:1fr}.meet-tomato-paths>a,.meet-tomato-paths>a:first-child,.meet-tomato-paths>a:last-child{padding:1.15rem 0}.meet-tomato-paths>a+a{border-left:0;border-top:1px solid var(--line)}}

/* The software and connected world belong beside the hardware. */
.ecosystem { scroll-margin-top: 2rem; }
.ecosystem-pair { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem;padding-bottom:clamp(3rem,7vw,6rem); }
.ecosystem-pair > .ecosystem { width:100%;margin:0;padding:clamp(1.5rem,3vw,2.5rem);border:1px solid var(--line);border-radius:14px;background:var(--surface);min-width:0; }
.ecosystem-pair .ecosystem-heading { grid-template-columns:1fr;gap:1rem;align-items:start; }
.ecosystem-pair .ecosystem-heading h2 { font-size:clamp(2rem,3.5vw,3.25rem); }
.ecosystem-pair .vt-embed-grid { grid-template-columns:1fr; }
.ecosystem-pair .ecosystem-cards { grid-template-columns:1fr; }
.ecosystem-pair .ecosystem-cards article+article { border-left:0;border-top:1px solid var(--line); }
.ecosystem-pair .ecosystem-proof img { max-height:32rem; }
.ecosystem-heading { display:grid;grid-template-columns:1.1fr 1fr;gap:3rem;align-items:end;margin:2rem 0; }
.ecosystem-heading h2 { font-size:clamp(2rem,4.5vw,4.4rem);line-height:1.08;letter-spacing:-.045em;margin:0; }
.ecosystem-heading h2 em { font-style:normal;color:var(--green); }
.ecosystem-heading p { color:var(--muted);max-width:44rem;margin:0; }
.ecosystem-proof { margin:2rem 0; }
.ecosystem-proof img { display:block;width:100%;height:auto;max-height:46rem;object-fit:contain;object-position:top center;border:1px solid var(--line);border-radius:12px;background:var(--surface); }
.ecosystem-proof figcaption { margin-top:.65rem;color:var(--muted);font-size:.82rem;line-height:1.5; }
.ecosystem-links { display:flex;flex-wrap:wrap;gap:1rem 2rem;margin-top:1.8rem;font-weight:600; }
.ecosystem-links a { text-decoration:underline;text-decoration-thickness:1px; }
.hero-entry { margin:1rem 0; }
.ecosystem-cards { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--line);border-radius:12px;overflow:hidden; }
.ecosystem-cards article { padding:1.8rem;background:var(--surface);min-width:0; }
.ecosystem-cards article+article { border-left:1px solid var(--line); }
.ecosystem-cards h3 { font-size:1.55rem;line-height:1.2;margin:1.2rem 0; }
.ecosystem-cards p { color:var(--muted); }
.ecosystem-cards small { display:block;color:var(--muted);line-height:1.5;margin-top:1rem; }
.ecosystem-cards a { text-decoration:underline; }
.eco-tag { font: .7rem/1.5 var(--mono);letter-spacing:.06em;color:var(--green); }
.ecosystem-cards code { overflow-wrap:anywhere; }
@media(max-width:760px) { .ecosystem-pair { grid-template-columns:1fr; } .ecosystem-heading,.ecosystem-cards { grid-template-columns:1fr;gap:1rem; } .ecosystem-cards { gap:0; } .ecosystem-cards article+article { border-left:0;border-top:1px solid var(--line); } .hero-entry { gap:.85rem 1.2rem; } .ecosystem-links a { min-height:44px; display:inline-flex; align-items:center; } }

/* Homepage journeys stay secondary to the physical board. */
.hero-journeys {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(40rem, 100%);
  margin: .35rem 0;
  gap: .75rem;
}
.hero-journeys a {
  min-width: 0;
  min-height: 40px;
  padding: .45rem .9rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  text-decoration: none;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.hero-journeys a + a { border-color: var(--accent); color: var(--accent); }
.hero-journeys strong { font-size: .75rem; line-height: 1.25; }
.hero-journeys span { display: none; }
.hero-journeys a:hover { border-color: var(--text); color: var(--text); }
.hero-journeys .hero-journey-primary {
  background: transparent;
  color: var(--text);
}

/* One focused OS console with a compact Envelop companion. */
.ecosystem-console {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(16rem, .72fr);
  gap: 1.25rem;
  padding-block: clamp(3.5rem, 7vw, 6rem);
}
.ecosystem-machine,
.ecosystem-message {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  padding: clamp(1.25rem, 3vw, 2.5rem);
}
.ecosystem-console-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(15rem, .85fr);
  gap: 1.5rem;
  align-items: end;
}
.ecosystem-console-heading h2,
.ecosystem-message h2 {
  margin-top: .45rem;
  font-size: clamp(1.8rem, 3.2vw, 3rem);
  line-height: 1.08;
}
.ecosystem-console-heading > p,
.ecosystem-message > p { color: var(--muted); }
.ecosystem-machine .vt-embed {
  max-width: none;
  margin-top: 1.5rem;
}
.ecosystem-console-links {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.4rem;
  margin-top: 1.25rem;
}
.ecosystem-console-links a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  font-size: .875rem;
}
.ecosystem-message {
  align-self: stretch;
  display: flex;
  flex-direction: column;
}
.ecosystem-message > p { margin: 1rem 0; }
.ecosystem-message figure { margin: 1.25rem 0; }
.ecosystem-message img {
  width: 100%;
  height: auto;
  aspect-ratio: 40 / 27;
  object-fit: contain;
  object-position: center;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.ecosystem-message figcaption,
.ecosystem-message small {
  display: block;
  color: var(--muted);
  font-size: .75rem;
  line-height: 1.55;
}
.ecosystem-message figcaption { margin-top: .5rem; }
.ecosystem-message .button { width: 100%; margin-bottom: .5rem; }
.ecosystem-message small { margin-top: auto; padding-top: 1rem; }
@media (min-width: 761px) {
  .hero-bar { padding: .5rem 0 .6rem; }
  .hero-bar__inner { gap: .35rem; }
  .hero-copy {
    display: grid;
    grid-template-columns: minmax(16rem, .9fr) minmax(20rem, 1.1fr);
    gap: .45rem 1.25rem;
    align-items: center;
    padding-block: 0;
    text-align: left;
  }
  #hero-title {
    font-size: clamp(1.2rem, 2.2vw, 2rem);
    line-height: 1.08;
  }
  .hero-pitch {
    max-width: none;
    font-size: clamp(.78rem, .9vw, .9rem);
    line-height: 1.35;
  }
  .hero-journeys {
    grid-template-columns: repeat(2, auto);
    width: fit-content;
    max-width: 100%;
    margin: 0;
    gap: .75rem;
    justify-self: start;
  }
  .hero-hook {
    width: 100%;
    justify-content: flex-start;
    padding-top: .25rem;
    font-size: .7rem;
  }
  .hero-hook strong { font-size: .9rem; }
}
@media (max-width: 900px) {
  .ecosystem-console { grid-template-columns: 1fr; }
  .ecosystem-message {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(12rem, .7fr);
    gap: .5rem 1.5rem;
    align-items: start;
  }
  .ecosystem-message > * { grid-column: 1; }
  .ecosystem-message figure { grid-column: 2; grid-row: 1 / span 6; margin: 0; }
}
@media (max-width: 600px) {
  .hero-journeys a { padding: .55rem .45rem; text-align: center; }
  .hero-journeys span { display: none; }
  .ecosystem-console-heading { grid-template-columns: 1fr; gap: .75rem; }
  .ecosystem-message { display: block; }
  .ecosystem-message figure { margin: 1rem 0; }
}