:root {
  --bg: #eef2f5;
  --panel: #ffffff;
  --line: #d5dde3;
  --text: #15202b;
  --muted: #5b6b76;
  --ink: #0b1b24;
  --active: #0f766e;
  --active-bg: #ccfbf1;
  --match: #166534;
  --match-bg: #dcfce7;
  --bad: #b42318;
  --bad-bg: #fee4e2;
  --warn: #b54708;
  --mono: "IBM Plex Mono", "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;
  --sans: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --ohp: "Caveat", "Segoe Print", "Comic Sans MS", cursive;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background:
    radial-gradient(1200px 400px at 10% -10%, #d1fae855, transparent 50%),
    var(--bg);
  color: var(--text);
  font: 15px/1.45 var(--sans);
}
.demo-banner {
  display: none;
  margin: 0;
  padding: 8px 16px;
  text-align: center;
  font: 12px var(--mono);
  color: #134e4a;
  background: #ccfbf1;
  border-bottom: 1px solid #99f6e4;
}
html[data-share-demo] .demo-banner { display: block; }
header, main, footer { width: min(1640px, calc(100% - 28px)); margin: auto; }
header { padding: 22px 0 16px; display: flex; justify-content: space-between; gap: 20px; align-items: flex-end; }
h1 { margin: 4px 0 6px; font-size: 28px; letter-spacing: -0.03em; color: var(--ink); font-weight: 700; }
h2 { margin: 0; font-size: 16px; }
.eyebrow { margin: 0; font: 11px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.lede, .muted { color: var(--muted); }
.lede { margin: 0; max-width: 68ch; }
.small { font-size: 12px; }
.status-stack { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.badge { border: 1px solid var(--line); background: var(--panel); border-radius: 999px; padding: 4px 10px; font: 11px var(--mono); }
.badge.ok { color: var(--match); border-color: #86efac; background: var(--match-bg); }
.badge.bad { color: var(--bad); border-color: #fca5a5; background: var(--bad-bg); }
.badge.est { color: var(--warn); border-color: #fdb022; background: #fffaeb; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 16px; margin-bottom: 14px; }
form { display: flex; gap: 10px; align-items: flex-end; }
.grow { flex: 1; display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--muted); }
input, button {
  font: 14px var(--mono);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  background: #fff;
  color: var(--text);
}
input:focus, button:focus-visible {
  outline: 2px solid #5eead4;
  outline-offset: 1px;
}
button { cursor: pointer; background: var(--ink); color: #fff; border-color: var(--ink); font-weight: 600; }
button:hover:not(:disabled) { filter: brightness(1.08); }
button:disabled { opacity: 0.5; cursor: not-allowed; }
html:not([data-share-demo]) #verifyBtn:disabled { cursor: wait; }
button.ghost { background: #fff; color: var(--ink); font-weight: 600; }
button.ghost:hover:not(:disabled) { background: #f0fdfa; border-color: #5eead4; filter: none; }
.error { color: var(--bad); font: 12px var(--mono); margin: 10px 0 0; }
.token-row { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; }
.label { font: 11px var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; padding-top: 6px; min-width: 72px; }
.tokens { display: flex; flex-wrap: wrap; gap: 6px; min-height: 40px; }
.token {
  font: 12px var(--mono);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 4px 8px;
  background: #f8fafc;
}
.token.active { background: var(--active-bg); border-color: #5eead4; }
.token small { display: block; color: var(--muted); font-size: 11px; margin-top: 2px; }
.token.out { background: #ecfeff; border-color: #67e8f9; }
.pred-row {
  margin-top: 16px;
  padding: 12px;
  background: #f0fdfa;
  border: 1px solid #99f6e4;
  border-radius: 10px;
  align-items: center;
}
.pred-sentence {
  margin: 0;
  font: 20px/1.45 var(--sans);
  color: var(--ink);
  max-width: 80ch;
  /* Placeholder (15px) and sentence (20px) then occupy the same line box. */
  min-height: 29px;
}
.pred-sentence.muted { color: var(--muted); font-size: 15px; }
#compareDetail { min-height: 44px; }
.pred-sentence mark {
  background: #ccfbf1;
  color: var(--ink);
  padding: 0 4px;
  border-radius: 4px;
  font-weight: 700;
}
.why-slow {
  margin: 14px 0 0;
  padding: 12px 14px;
  background: #f8fafc;
  border: 1px solid var(--line);
  border-left: 3px solid var(--active);
  border-radius: 10px;
}
.why-slow-k {
  margin: 0 0 6px;
  font: 13px/1.4 var(--sans);
  font-weight: 600;
  color: var(--ink);
  /* Status text re-wraps on poll ticks; two lines keeps it stable. */
  min-height: 37px;
}
.why-more { margin: 4px 0 0; max-width: min(1640px, 100%); }
.why-more > summary {
  cursor: pointer;
  font: 11px var(--mono);
  color: var(--muted);
  list-style: none;
  display: inline-block;
}
.why-more > summary::before { content: "▸ "; }
.why-more[open] > summary::before { content: "▾ "; }
.why-more > summary:hover { color: #0f766e; }
.why-more .why-slow-body { margin-top: 6px; }
.why-slow-body {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
  max-width: 92ch;
}
.run-progress { margin: 0 0 10px; }
.run-progress[hidden] { display: none; }
.run-progress-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 4px;
  font: 11px var(--mono);
  color: var(--muted);
}
#runProgressLabel, #runProgressElapsed { color: var(--muted); }
.run-progress-track {
  display: flex;
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: #e2e8f0;
  border: 1px solid var(--line);
}
.run-progress-seg { width: 0%; transition: width 0.25s linear; }
.run-progress-seg.py { background: var(--active); }
.run-progress-seg.rtl { background: var(--warn); }
.run-progress-labels {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 5px;
  font: 11px var(--mono);
  color: var(--ink);
}
.run-progress-labels .muted { color: var(--muted); }
.metrics {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}
.metrics div {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
}
.metrics span { display: block; font: 10px var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.metrics strong { display: block; margin-top: 4px; font: 15px var(--mono); color: var(--ink); }
.transport {
  position: sticky;
  top: 0;
  z-index: 12;
  box-shadow: 0 10px 24px #15202b14;
}
.transport-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.scrub { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 220px; font: 11px var(--mono); color: var(--muted); }
.scrub input { width: 100%; padding: 0; accent-color: var(--active); }
.compute {
  margin: 8px 0 14px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
  cursor: pointer;
}
.compute:hover { border-color: #5eead4; }
.compute-k { margin: 0; font: 10px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.compute-eq { margin: 4px 0 6px; font: 15px var(--mono); color: var(--ink); min-height: 21px; }
.compute-shape { margin: 0 0 8px; font: 11px var(--mono); color: var(--muted); min-height: 16px; }
.compute-vals { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; max-height: 72px; overflow: hidden; }
.compute-vals span {
  font: 10px var(--mono);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 3px 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.compute-ins {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 0 0 8px;
  font: 11px var(--mono);
  color: var(--ink);
  /* Two feed lines: the count varies per op, so reserve the max. */
  min-height: 35px;
}
.compute-ins em {
  font-style: normal;
  color: #0f766e;
  display: inline-block;
  min-width: 18px;
  font-weight: 700;
}
.split {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(360px, 0.95fr);
  gap: 14px;
  align-items: start;
  margin-bottom: 14px;
}
.network-pane {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px 14px 14px;
  position: relative;
  box-shadow: 0 10px 30px #15202b0d;
  max-height: calc(100vh - 24px);
  overflow: auto;
}
.pane-label {
  /* In-flow caption: an absolutely positioned label above the pane edge is
     clipped by the pane's own overflow, cutting the text mid-glyph. */
  position: static;
  display: block;
  margin: 0 0 10px 2px;
  padding: 0;
  font: 11px var(--mono);
  color: var(--muted);
}
.network { display: flex; flex-direction: column; gap: 6px; }
.layer-rail {
  display: grid;
  grid-template-columns: repeat(14, minmax(0, 1fr));
  gap: 3px;
  position: sticky;
  top: 0;
  z-index: 4;
  background: linear-gradient(#fff 80%, #fffd);
  padding: 6px 0 10px;
}
.layer-dot {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  padding: 5px 0;
  font: 9px var(--mono);
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fff;
  color: var(--muted);
  cursor: pointer;
  font-weight: 700;
}
.layer-dot:hover { border-color: #5eead4; color: #0f766e; }
.layer-dot.active { background: var(--active-bg); border-color: #0f766e; color: #0f766e; }
.layer-dot.mismatch { background: var(--bad-bg); border-color: #dc2626; color: #dc2626; }
.layer-dot.active.mismatch { background: var(--active-bg); border-color: #dc2626; color: #0f766e; }
.flow-edge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  color: #64748b;
  font: 10px var(--mono);
  padding: 2px 0 4px;
}
.flow-edge i {
  font-style: normal;
  font-size: 13px;
  line-height: 1;
  color: #0f766e;
}
.decoder-graph {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 8px 4px 16px;
  background: #f4f6f8;
}
.decoder-graph.current { border-color: #0f766e; box-shadow: 0 0 0 2px #99f6e455; }
.dag-title {
  margin: 0 8px 4px;
  font: 11px var(--mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.dag-legend {
  margin: 0 8px 10px;
  font: 10px var(--mono);
  color: #64748b;
}
.dag { position: relative; padding: 4px 36px 10px; }
.dag-edges {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}
.dag-nodes {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 52px 14px;
}
.dag-nodes .io.w { display: none; }
.net-node, .op {
  position: relative;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 10px;
  padding: 12px 8px 7px;
  font: 11px var(--mono);
  color: var(--ink);
  text-align: left;
  transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease;
}
button.op, button.net-node {
  appearance: none;
  -webkit-appearance: none;
  font-weight: 400;
  color: var(--ink);
  background: #fff;
  margin: 0;
}
button.op:hover:not(:disabled), button.net-node:hover:not(:disabled) {
  border-color: #5eead4;
  box-shadow: 0 6px 16px #0f766e14;
  filter: none;
}
.net-node.wide { align-self: stretch; width: 100%; }
.op { min-width: 0; width: 100%; cursor: pointer; }
.op .soma {
  position: absolute;
  top: -6px;
  left: 50%;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #94a3b8;
  border: 2px solid #fff;
  transform: translateX(-50%);
  box-shadow: 0 0 0 1px #cbd5e1;
}
.op.port { border-style: dashed; background: #f8fafc; }
.op b, .net-node b { display: block; font-size: 11px; }
.op .eq, .net-node .eq { display: block; margin-top: 3px; color: #0f766e; font-size: 10px; }
.op .shp, .net-node .shp { display: block; color: var(--muted); font-size: 9px; margin-top: 2px; }
.op .io, .net-node .io {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* Sample text changes length every playback tick; clamp to two full lines
     (with ellipsis) so node heights stay constant without slicing glyphs. */
  min-height: 27px;
  margin-top: 2px;
  font-size: 9px;
  word-break: break-all;
  color: #334155;
}
.op .io.w, .net-node .io.w { color: #7c5c12; }
.op .io.out, .net-node .io.out { color: #1e3a5f; }
.op.active, .net-node.active {
  border-color: #0f766e;
  background: var(--active-bg);
  box-shadow: 0 0 0 2px #99f6e455;
  animation: opPulse 1.1s ease-in-out infinite;
}
.op.active .soma { background: #0f766e; box-shadow: 0 0 0 1px #0f766e; }
.op.on-path, .net-node.on-path {
  border-color: #5eead4;
  background: #f0fdfa;
}
.op.on-path .soma { background: #14b8a6; }
@keyframes opPulse {
  0%, 100% { box-shadow: 0 0 0 2px #99f6e455; }
  50% { box-shadow: 0 0 0 4px #5eead488; }
}
.op.mismatch, .net-node.mismatch { border-color: #dc2626; background: var(--bad-bg); }
.op.active.mismatch, .net-node.active.mismatch { box-shadow: 0 0 0 2px #fecaca88; }
.edge { fill: none; stroke: #0f172a; stroke-width: 2.15; stroke-linecap: round; stroke-linejoin: round; marker-end: url(#arr); }
.edge.skip { stroke: #0f766e; stroke-dasharray: 5 3; stroke-width: 2; }
.edge.live { stroke: #0f766e; stroke-width: 2.6; marker-end: url(#arrLive); }
.edge.live-out { stroke: #64748b; stroke-width: 1.7; }
.edge-lab {
  font: 11px var(--mono);
  font-weight: 600;
  fill: #1e3a5f;
  text-anchor: middle;
  paint-order: stroke;
  stroke: #f4f6f8;
  stroke-width: 4px;
}
.edge-lab.live { fill: #0f766e; }

.sch-wrap {
  position: sticky;
  top: 12px;
  max-height: calc(100vh - 24px);
  overflow: auto;
}
.sch-label {
  font: 11px var(--mono);
  color: var(--muted);
  margin: 0 0 8px 4px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.sch {
  background: #f7f8fa;
  border: 1px solid #1f2a33;
  padding: 10px;
  font: 11px var(--mono);
}
.sch-row { display: grid; gap: 6px; align-items: stretch; }
.sch-row.top { grid-template-columns: 1fr 36px 1.4fr; }
.sch-row.mem { grid-template-columns: 1fr 36px 1fr; }
.sch-row.eng { grid-template-columns: repeat(4, 1fr); margin-bottom: 6px; }
.blk {
  border: 1.5px solid #1f2a33;
  background: #fff;
  padding: 8px;
  min-width: 0;
}
.blk strong { display: block; font-size: 12px; color: var(--ink); }
.blk small { display: block; color: var(--muted); margin-top: 2px; }
.blk-k {
  display: block;
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #3b6ea5;
  margin-bottom: 3px;
}
.blk.io { background: #eef6ee; }
.blk.ctl { background: #eef2f8; }
.blk.rom { background: #e8f0fa; }
.blk.sram { background: #e9f6ee; }
.blk.mac { background: #f4f0e8; margin-bottom: 6px; }
.blk.eng { background: #f8eee6; }
.blk.logits { background: #f3eef8; margin-bottom: 6px; }
.blk.active {
  border-color: #0f766e;
  box-shadow: inset 0 0 0 2px #0f766e55;
  background: #ccfbf1;
}
.blk.mismatch { border-color: #b42318; background: #fee4e2; }
.blk[data-block] { cursor: pointer; transition: box-shadow 0.15s ease; }
.blk[data-block]:hover { box-shadow: inset 0 0 0 2px #0f766e88, 0 2px 8px #15202b22; }
.chip-inspector {
  margin: 10px 0 6px;
  padding: 12px 14px;
  background: #f8fafc;
  border: 1px solid var(--line);
  border-left: 3px solid var(--active);
  border-radius: 10px;
  /* Always-present card; the floor keeps block switches from resizing it. */
  min-height: 148px;
}
#chipInspectorBody { min-height: 72px; }
.ci-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.ci-module { margin: 0; font: 11px var(--mono); color: var(--muted); }
.ci-detail { margin: 8px 0 6px; font-size: 12px; line-height: 1.45; color: var(--muted); min-height: 35px; }
.ci-now {
  margin: 0 0 8px;
  font: 12px var(--mono);
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 6px 8px;
  /* Stage text changes every poll; one line reserved. */
  min-height: 31px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.ci-row { font: 11px var(--mono); color: var(--ink); margin: 4px 0; min-height: 17px; }
.ci-row em { font-style: normal; color: var(--muted); margin-right: 6px; }
.ci-store {
  margin: 0 0 8px;
  padding: 6px 8px;
  background: #e8f0fa;
  border: 1px solid #c5d4e8;
  border-radius: 6px;
}
.ci-store .ci-row { min-height: 0; }
.rom-eq {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 2px;
}
.rom-eq li {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 6px;
  font: 9px/1.35 var(--mono);
  color: var(--ink);
}
.rom-eq em {
  font-style: normal;
  color: #3b6ea5;
  letter-spacing: 0.02em;
}
.rom-reticle { margin-top: 6px; }
.rom-reticle-die {
  height: 22px;
  border: 1px solid #1f2a33;
  background: #f1f5f9;
  border-radius: 3px;
  overflow: hidden;
}
.rom-reticle-fill {
  height: 100%;
  background: #3b6ea5;
}
.rom-reticle p {
  margin: 3px 0 0;
  font: 8px/1.3 var(--mono);
  color: var(--muted);
}
.rom-reticle b { color: var(--ink); font-weight: 700; }
.ci-vals { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0; }
.ci-vals span {
  font: 11px var(--mono);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 2px 6px;
  background: #fff;
}
.plat-grid { display: flex; gap: 10px; flex-wrap: wrap; margin: 10px 0; }
.plat-card {
  flex: 1 1 220px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  background: #fff;
}
.plat-card h3 { margin: 0 0 6px; font-size: 13px; color: var(--ink); }
.plat-card .pc-row { display: flex; justify-content: space-between; font: 11px var(--mono); margin: 3px 0; }
.plat-card .pc-row span:first-child { color: var(--muted); }
.plat-table { width: 100%; border-collapse: collapse; font: 11px var(--mono); }
.plat-table th, .plat-table td {
  border: 1px solid var(--line);
  padding: 5px 8px;
  text-align: right;
}
.plat-table th:first-child, .plat-table td:first-child { text-align: left; color: var(--muted); }
.plat-table thead th { background: #f8fafc; color: var(--ink); }

/* 1T scaling panel */
.scale-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
  margin: 10px 0;
}
.scale-controls label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font: 11px var(--mono);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.scale-controls select {
  font: 12px var(--mono);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  background: #fff;
  color: var(--text);
  min-width: 150px;
}
.xover-wrap { margin: 14px 0; }
.xover-wrap h4, .scale-stages h4 { margin: 0 0 8px; font: 11px var(--mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.xover-wrap svg { width: 100%; max-width: 760px; height: auto; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
#scaleConfigs { margin: 14px 0; }
#scaleConfigs h4 { margin: 0 0 8px; font: 11px var(--mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.cc-head, .cc-row { display: grid; grid-template-columns: 150px minmax(0, 1fr) minmax(0, 1fr) 70px minmax(140px, auto); gap: 10px; align-items: center; margin: 4px 0; font: 11px var(--mono); }
.cc-head { color: var(--muted); text-transform: uppercase; font-size: 9px; letter-spacing: 0.06em; }
.cc-name { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-row.h100 .cc-name { color: var(--muted); }
.cc-cell { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cc-cell em { font-style: normal; color: var(--muted); white-space: nowrap; font-size: 10px; }
.cc-bar { display: block; flex: 1; height: 10px; background: #eef2f5; border-radius: 999px; overflow: hidden; }
.cc-bar span { display: block; height: 100%; border-radius: 999px; }
.cc-dies { color: var(--muted); white-space: nowrap; }
.cc-vs { color: var(--ink); white-space: nowrap; font-size: 10px; }
.cc-row.infeasible { color: var(--bad); }
.cc-row.infeasible .cc-vs { color: var(--bad); }
@media (max-width: 900px) { .cc-head, .cc-row { grid-template-columns: 110px 1fr 1fr; } .cc-dies, .cc-vs { display: none; } }
/* ---- Minto structure: takeaway + keyline + collapsed details ---- */
.takeaway {
  width: min(1640px, calc(100% - 28px));
  margin: 0 auto 10px;
  padding: 12px 16px;
  background: var(--ink);
  border-radius: 12px;
  color: #fff;
  display: flex;
  gap: 14px;
  align-items: baseline;
}
/* The claim, the run bar, and every slide panel share one width. */
.takeaway, .deck-nav, main > .slide > .panel, main > .slide > .detail-block { width: min(1640px, calc(100% - 28px)); margin-left: auto; margin-right: auto; }
main > .slide > .panel { margin-bottom: 10px; }
.tk-label { font: 10px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: #5eead4; white-space: nowrap; }
.takeaway p { margin: 0; font: 15px/1.5 var(--sans); }
.takeaway strong { color: #5eead4; }
.keyline {
  width: min(1640px, calc(100% - 28px));
  margin: 0 auto 14px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.key-card { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.kc-num { display: block; font: 22px var(--mono); font-weight: 700; color: var(--ink); letter-spacing: -0.02em; }
.kc-num.ok { color: var(--match); }
.kc-cap { display: block; margin-top: 3px; font: 10px var(--mono); color: var(--muted); line-height: 1.4; }
@media (max-width: 1100px) { .keyline { grid-template-columns: repeat(2, 1fr); } }
.detail-block {
  width: min(1640px, calc(100% - 28px));
  margin: 0 auto 10px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
}
.detail-block > summary {
  cursor: pointer;
  padding: 11px 16px;
  font: 13px var(--mono);
  font-weight: 600;
  color: var(--ink);
  list-style: none;
  display: flex;
  align-items: center;
}
.detail-block > summary::before { content: "▸"; margin-right: 10px; color: var(--muted); transition: transform 120ms ease; }
.detail-block[open] > summary::before { transform: rotate(90deg); }
.detail-block > summary:hover { color: #0f766e; }
.detail-block > *:not(summary) { padding: 0 16px 14px; }
.detail-block .panel { margin-bottom: 0; border: none; padding: 0 0 10px; }
/* ---- Slide deck ---- */
.deck header,
.deck footer { display: none; }
.deck {
  background: #fff;
}
.deck main {
  width: 100%;
  max-width: none;
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.deck-nav {
  display: flex;
  gap: 4px;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: nowrap;
  margin: 0 auto;
  width: min(1640px, calc(100% - 28px));
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 20;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
  padding: 10px 2px;
  background: linear-gradient(180deg, #fffffff2 0%, #ffffffd9 82%, transparent 100%);
  backdrop-filter: blur(10px);
}
.deck-dot {
  display: flex; gap: 0; align-items: center;
  background: #fff; color: var(--ink); border: 1px solid var(--line);
  border-radius: 999px; padding: 5px 7px; font: 11px var(--mono); font-weight: 600;
  flex-shrink: 0;
  min-height: 34px;
}
.deck-dot span {
  display: inline-grid; place-items: center; width: 20px; height: 20px;
  border-radius: 50%; background: #eef2f5; font-size: 10px; color: var(--muted);
}
.deck-dot em {
  display: inline;
  font-style: normal;
  margin-left: 7px;
  margin-right: 4px;
  white-space: nowrap;
}
.deck-dot.active { background: var(--ink); color: #fff; border-color: var(--ink); }
.deck-dot.active span { background: #0f766e; color: #fff; }
.deck-dot:hover:not(.active) { background: #f0fdfa; border-color: #5eead4; filter: none; }
.deck-dot:focus-visible { outline: 3px solid #0f766e; outline-offset: 2px; }
@media (max-width: 720px) {
  .deck-nav { width: 100%; padding: 8px 14px; gap: 6px; scroll-padding-inline: 14px; }
  .deck-dot { min-height: 36px; padding: 6px 9px; }
}
.deck-hint { margin-left: auto; }
.slide[hidden] { display: none; }
.src-fold {
  margin: 10px auto 0;
  max-width: 100%;
  font-size: 12.5px;
  color: #64748b;
}
.src-fold > summary {
  cursor: pointer;
  list-style: none;
  font: 11px var(--mono);
  color: #64748b;
  display: inline-block;
}
.src-fold > summary::-webkit-details-marker { display: none; }
.src-fold > summary::before { content: "▸ "; }
.src-fold[open] > summary::before { content: "▾ "; }
.src-fold > summary:hover { color: #0f766e; }
.src-fold > *:not(summary) { margin-top: 8px; }
/* Centered headers on every slide */
.slide-h {
  margin: 0 auto 8px;
  max-width: 34ch;
  text-align: center;
  font: 700 clamp(22px, 2.8vw, 34px)/1.2 var(--sans);
  letter-spacing: -0.035em;
  color: #0b1b24;
}

body.on-title {
  background: #f6f8f7;
}
body.on-title header,
body.on-title footer,
body.on-title .demo-banner { display: none; }
body.on-title main {
  width: 100%;
  max-width: none;
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
body.on-title .deck-nav {
  width: min(1640px, calc(100% - 28px));
  margin: 12px auto 0;
}
.slide-title {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3vh 28px 6vh;
  background:
    radial-gradient(720px 280px at 50% 0%, #ccfbf155, transparent 70%),
    #f6f8f7;
}
.title-kicker {
  margin: 0 0 14px;
  font: 600 11px/1 var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #0f766e;
  text-align: center;
}
.slide-title .deck-title {
  font-size: clamp(42px, 7vw, 84px);
  text-align: center;
  max-width: 12em;
  line-height: 0.95;
  letter-spacing: -0.055em;
  margin: 0 0 14px;
  color: #0b1b24;
}
.slide-title .deck-sub {
  margin: 0 0 28px;
  max-width: 34em;
  font: 400 18px/1.55 var(--sans);
  text-align: center;
  color: #475569;
}
.slide-title .deck-sub strong {
  color: #0f766e;
  font-weight: 600;
}
.title-metrics {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0 0 32px;
  padding: 0;
  list-style: none;
  width: min(920px, 100%);
}
.title-metrics li {
  flex: 1 1 180px;
  min-width: 160px;
  margin: 0;
  padding: 14px 16px 12px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  text-align: center;
}
.title-metrics b {
  display: block;
  font: 700 28px/1 var(--sans);
  letter-spacing: -0.04em;
  color: #0f766e;
}
.title-metrics span {
  display: block;
  margin-top: 6px;
  font: 500 12px/1.35 var(--sans);
  color: #64748b;
}
.title-split {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 16px;
  align-items: stretch;
  width: min(980px, 100%);
}
.title-vs {
  align-self: center;
  margin: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #e2e8f0;
  font: 700 11px/36px var(--mono);
  text-align: center;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.title-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  padding: 20px 22px 16px;
  box-shadow: 0 12px 32px #15202b08;
  display: flex;
  flex-direction: column;
}
.title-card.is-rom {
  border-color: #5eead4;
  background: #f4fffc;
  box-shadow: 0 12px 32px #0f766e12;
}
.title-card.is-rom .title-card-k { color: #0f766e; }
.title-card-k {
  margin: 0 0 6px;
  font: 600 11px var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #64748b;
}
.title-card h2 {
  margin: 0 0 16px;
  font: 600 20px/1.25 var(--sans);
  letter-spacing: -0.03em;
  color: #0b1b24;
}
.title-viz {
  display: grid;
  grid-template-columns: 1.4fr 0.75fr 0.95fr;
  gap: 10px;
  align-items: center;
  min-height: 118px;
  margin-bottom: 14px;
  flex: 1;
}
.title-die {
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  background: #f8fafc;
  padding: 10px;
  min-height: 118px;
}
.title-die.rom {
  border-color: #2dd4bf;
  background: #ccfbf1;
}
.title-die-k {
  display: block;
  font: 600 9px var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #64748b;
  margin-bottom: 8px;
}
.title-die.rom .title-die-k { color: #0f766e; }
.title-die-cells {
  height: 72px;
  border-radius: 8px;
  background:
    repeating-linear-gradient(90deg, #cbd5e1 0 8px, transparent 8px 14px),
    repeating-linear-gradient(#cbd5e1 0 8px, transparent 8px 14px),
    #fff;
}
.title-die-cells.rom {
  background:
    repeating-linear-gradient(90deg, #0f766e 0 7px, transparent 7px 11px),
    repeating-linear-gradient(#14b8a6 0 7px, transparent 7px 11px),
    #f0fdfa;
  opacity: 0.9;
}
.title-flow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: #2563eb;
}
.title-flow i {
  display: block;
  width: 100%;
  max-width: 52px;
  height: 2px;
  background: currentColor;
  position: relative;
}
.title-flow i::before {
  content: "";
  position: absolute;
  left: -1px;
  top: -4px;
  border: 5px solid transparent;
  border-right-color: currentColor;
}
.title-flow b {
  font: 600 9px/1.25 var(--mono);
  letter-spacing: 0.02em;
  text-align: center;
  color: inherit;
}
.title-flow.idle {
  color: #94a3b8;
}
.title-hbm, .title-host {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.title-hbm span, .title-host span {
  display: block;
  text-align: center;
  font: 600 10px var(--mono);
  color: #1e40af;
  background: #dbeafe;
  border: 1px solid #93c5fd;
  border-radius: 8px;
  padding: 8px 4px;
}
.title-host span {
  color: #475569;
  background: #fff;
  border-color: #cbd5e1;
  padding: 28px 4px;
}
.title-card-n {
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid #e2e8f0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font: 500 13px/1.4 var(--sans);
  color: #64748b;
}
.title-card.is-rom .title-card-n { border-color: #99f6e4; }
.title-card-n strong {
  font: 700 16px/1.2 var(--sans);
  letter-spacing: -0.03em;
  color: #0b1b24;
}
.title-card.is-rom .title-card-n strong { color: #0f766e; }
@media (max-width: 720px) {
  .title-split { grid-template-columns: 1fr; }
  .title-vs { display: none; }
}

/* ---- Slide 2 · GPU HBM→SM replica ---------------------------------------- */
body.on-gpu {
  background: #fff;
}
body.on-gpu header,
body.on-gpu footer,
body.on-gpu .demo-banner { display: none; }
body.on-gpu main {
  width: 100%;
  max-width: none;
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding-bottom: 12px;
}
body.on-gpu .deck-nav {
  width: calc(100% - 24px);
  max-width: none;
  margin: 12px auto 0;
}
.slide-gpu {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 6px 14px 12px;
  width: 100%;
  max-width: none;
  margin: 0;
  box-sizing: border-box;
}
.gpu-title {
  font-size: clamp(22px, 2.4vw, 34px);
  line-height: 1.2;
  max-width: 22ch;
}
.gpu-lead {
  font: 500 15px/1.5 var(--sans);
  color: #334155;
  max-width: 52em;
  margin: 0 auto 8px;
  text-align: center;
}
.gpu-runbar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 12px;
  align-items: center;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #f8fafc;
}
.gpu-prompt-k {
  margin: 0;
  font: 10px var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #64748b;
}
.gpu-prompt-line {
  margin: 0;
  font: 500 14px/1.45 var(--sans);
  color: #0f172a;
}
.gpu-prompt-line.is-decoded em {
  font-style: normal;
  color: #0f766e;
  font-weight: 700;
  margin-left: 0.25em;
}
.gpu-jump {
  border-color: #0f766e;
  color: #0f766e;
  font-weight: 600;
}
.gpu-tokens {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.gpu-tokens .tok {
  font: 10px var(--mono);
  padding: 2px 6px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: #fff;
  color: #334155;
}
.gpu-tokens .tok.is-next {
  background: #0f766e;
  border-color: #0f766e;
  color: #fff;
}
.gpu-runbar .gpu-transport {
  grid-column: 1 / -1;
  margin: 4px 0 0;
}
.gpu-bottleneck {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid #f59e0b;
  border-left: 4px solid #ea580c;
  border-radius: 12px;
  background: linear-gradient(90deg, #fff7ed 0%, #ffffff 72%);
}
.gpu-story {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}
.gpu-story-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.gpu-story-head p { margin: 0; color: #475569; font-size: 12px; }
.gpu-story-k { font: 600 10px var(--mono); color: #0f766e !important; letter-spacing: .06em; text-transform: uppercase; }
.gpu-story-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.gpu-story-steps li { display: flex; gap: 8px; min-width: 0; padding: 10px; border: 1px solid #e2e8f0; border-radius: 10px; background: #f8fafc; }
.gpu-story-steps li.is-hot { border-color: #fdba74; background: #fff7ed; }
.gpu-story-steps li.is-win { border-color: #86efac; background: #f0fdfa; }
.gpu-story-n { display: grid; place-items: center; flex: 0 0 22px; height: 22px; border-radius: 50%; background: #334155; color: #fff; font: 700 11px var(--mono); }
.gpu-story-steps .is-hot .gpu-story-n { background: #ea580c; }
.gpu-story-steps .is-win .gpu-story-n { background: #0f766e; }
.gpu-story-steps strong { display: block; color: #0f172a; font-size: 12px; line-height: 1.3; }
.gpu-story-steps p { margin: 4px 0 0; color: #475569; font-size: 11px; line-height: 1.4; }
.gpu-story-steps b { color: #c2410c; font-weight: 700; }
.gpu-story-steps code { font: 10px var(--mono); color: #0f766e; }
.gpu-story-visuals { display: grid; grid-template-columns: 1fr 1.3fr; gap: 10px; margin-top: 10px; }
.gpu-story-figure { min-width: 0; margin: 0; padding: 9px; border: 1px solid #e2e8f0; border-radius: 9px; background: #fafcff; }
.gpu-story-figure figcaption { margin-bottom: 7px; color: #0f172a; font-size: 12px; font-weight: 700; }
.gpu-story-figure figcaption span { display: block; color: #64748b; font: 600 9px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.gpu-story-figure > p { margin: 7px 0 0; color: #64748b; font-size: 10px; line-height: 1.35; }
.story-package-diagram { display: flex; align-items: center; gap: 7px; }
.story-host { flex: 0 0 52px; padding: 7px 3px; border: 1px solid #94a3b8; border-radius: 5px; background: #fff; color: #334155; text-align: center; font: 700 9px var(--mono); }
.story-host small { color: #64748b; font-size: 8px; }
.story-link { color: #0f766e; font: 700 9px var(--mono); }
.story-package { position: relative; display: grid; flex: 1; min-height: 82px; grid-template-columns: repeat(3, 1fr); grid-template-rows: 20px 1fr 20px; gap: 3px; padding: 4px; border: 2px solid #334155; border-radius: 7px; background: #eef2f8; }
.story-hbm { display: grid; place-items: center; border: 1px solid #1d4ed8; border-radius: 3px; background: #dbeafe; color: #1e3a8a; font: 700 8px var(--mono); }
.story-hbm.hbm-3 { grid-column: 1; grid-row: 2; }
.story-hbm.hbm-4 { grid-column: 3; grid-row: 2; }
.story-gpu-die { position: relative; grid-column: 2; grid-row: 2; display: grid; place-content: center; min-width: 66px; border: 1px solid #0f766e; border-radius: 4px; background: #ccfbf1; color: #134e4a; text-align: center; }
.story-gpu-die b { font-size: 9px; }.story-gpu-die small { font: 8px var(--mono); }.story-gpu-die em { position: absolute; right: -16px; top: 50%; color: #ea580c; font: 700 9px var(--mono); font-style: normal; }
.story-network-diagram { display: flex; align-items: center; gap: 4px; min-height: 82px; overflow: auto; }
.story-network-diagram > i { flex: 0 0 auto; color: #64748b; font-style: normal; font-weight: 700; }
.story-net-node { flex: 0 0 58px; padding: 8px 4px; border: 1px solid #94a3b8; border-radius: 5px; background: #fff; color: #334155; text-align: center; font: 700 9px/1.3 var(--mono); }.story-net-node small { font-size: 8px; color: #64748b; }
.story-net-layer { flex: 1 0 175px; padding: 7px; border: 1px solid #0f766e; border-radius: 6px; background: #f0fdfa; color: #134e4a; }.story-net-layer b { display: block; margin-bottom: 3px; font-size: 10px; }.story-net-layer small { display: block; font: 8px/1.4 var(--mono); }.story-net-layer mark { padding: 0 2px; background: #fed7aa; color: #9a3412; }
.gpu-story-takeaway { margin: 10px 0 0; padding: 8px 10px; border-radius: 8px; background: #ecfdf5; color: #134e4a; font-size: 12px; line-height: 1.4; }
@media (max-width: 900px) { .gpu-story-steps, .gpu-story-visuals { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .gpu-story-head { display: block; } .gpu-story-head p + p { margin-top: 3px; } .gpu-story-steps { grid-template-columns: 1fr; } }
.gpu-bottleneck-intro {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 8px;
}
.gpu-bottleneck-intro p { margin: 0; color: #475569; font-size: 12px; line-height: 1.4; }
.gpu-bottleneck-intro .gpu-bottleneck-k { color: #9a3412; flex: 0 0 auto; }
.gpu-bottleneck-k {
  display: block;
  font: 600 9px/1.3 var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #64748b;
}
.gpu-bottleneck-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.gpu-bottleneck-metrics article {
  min-width: 0;
  padding: 7px 9px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
}
.gpu-bottleneck-metrics article.is-hot { border-color: #fdba74; background: #fffaf5; }
.gpu-bottleneck-metrics article.is-win { border-color: #f59e0b; background: #fffbeb; }
.gpu-bottleneck-metrics strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 3px 0 1px;
  font: 700 16px/1.2 var(--sans);
  color: #0f172a;
  font-variant-numeric: tabular-nums;
}
.gpu-bottleneck-metrics .is-hot strong { color: #c2410c; }
.gpu-bottleneck-metrics .is-win strong { color: #a16207; }
.gpu-bottleneck-metrics small { display: block; color: #64748b; font-size: 10px; line-height: 1.3; }
.gpu-bottleneck-takeaway { margin: 8px 0 0; color: #7c2d12; font-size: 12px; line-height: 1.4; }
@media (max-width: 900px) {
  .gpu-bottleneck-intro { display: block; }
  .gpu-bottleneck-intro .gpu-bottleneck-k { margin-bottom: 3px; }
  .gpu-bottleneck-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) { .gpu-bottleneck-metrics { grid-template-columns: 1fr; } }
.gpu-tri {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  grid-template-rows: minmax(0, 1fr);
  gap: 14px;
  flex: 1;
  min-height: 0;
  align-items: stretch;
}
#gpuTri[hidden] { display: none !important; }
.slide-gpu.is-simple .gpu-stage-cost,
.slide-gpu.is-simple .gpu-foot { display: none; }
.gpu-left-col {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  min-height: 0;
}
.gpu-tab-bar {
  display: flex;
  gap: 4px;
  flex: none;
}
.gpu-tab-btn {
  flex: 1;
  padding: 7px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
  color: #475569;
  font: 600 11px var(--mono);
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.gpu-tab-btn:hover { background: #eef2f5; }
.gpu-tab-btn[aria-pressed="true"] {
  background: #0f766e;
  border-color: #0f766e;
  color: #fff;
}
.gpu-tab-btn[aria-pressed="true"]:hover { background: #0f766e; }
.gpu-left-col .gpu-board-wrap,
.gpu-left-col .gpu-pane-net,
.gpu-left-col .gpu-pane-notes {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}
#gpuBoardWrap[hidden],
#gpuNetPane[hidden],
#gpuNotesPane[hidden] { display: none !important; }
.gpu-left-col .gpu-notes-grid {
  grid-template-columns: 1fr;
}
.gpu-left-col .gpu-pane-notes { padding: 10px 12px 12px; }
.gpu-stage-cost {
  flex: none;
  margin: 0;
  padding: 6px 10px 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}
.gpu-stage-cost-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px 12px;
  margin: 0 0 6px;
}
.gpu-stage-cost-k {
  margin: 0;
  font: 10px var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #64748b;
}
.gpu-stage-cost-kpis {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.gpu-stage-kpi {
  margin: 0;
  padding: 4px 8px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
  min-width: 0;
}
.gpu-stage-kpi-k {
  margin: 0 0 2px;
  font: 9px var(--mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #64748b;
}
.gpu-stage-kpi-n {
  margin: 0;
  font: 700 16px/1.2 var(--sans);
  color: #0f172a;
  font-variant-numeric: tabular-nums;
}
.gpu-stage-kpi-eq {
  margin: 2px 0 0;
  font: 500 9px/1.35 var(--mono);
  color: #475569;
  max-width: 28em;
}
.gpu-stage-cost-body {
  display: block;
}
.gpu-stage-tbl {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font: 500 10px/1.35 var(--sans);
  color: #334155;
}
.gpu-stage-tbl th,
.gpu-stage-tbl td {
  padding: 3px 8px;
  border-bottom: 1px solid #e2e8f0;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gpu-stage-tbl th:nth-child(1),
.gpu-stage-tbl td:nth-child(1) { width: 34%; text-align: left; }
.gpu-stage-tbl th:nth-child(2),
.gpu-stage-tbl td:nth-child(2) { width: 33%; }
.gpu-stage-tbl th:nth-child(3),
.gpu-stage-tbl td:nth-child(3) { width: 33%; }
.gpu-stage-tbl thead th {
  font: 600 9px var(--mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #64748b;
  border-bottom: 1px solid #cbd5e1;
}
.gpu-stage-tbl tbody tr:last-child td { border-bottom: none; }
.gpu-stage-tbl tr.is-now {
  background: #f0fdfa;
}
.gpu-stage-tbl tr.is-now td {
  font-weight: 600;
  color: #0f172a;
}
.gpu-stage-tbl tr.is-heavy td {
  color: #0f766e;
}
.gpu-stage-cost-load {
  text-align: center;
  color: #94a3b8;
}
.gpu-pane.gpu-pane-flow {
  grid-column: 1;
  grid-row: 1;
}
.gpu-board-wrap {
  width: 100%;
  max-width: none;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  padding: 6px 8px 8px;
  box-sizing: border-box;
  overflow: auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.gpu-pane-rtl {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.slide-gpu.is-flow .gpu-tri {
  grid-template-columns: minmax(280px, 1.15fr) minmax(0, 1.4fr);
  grid-template-rows: minmax(0, 1fr);
}
.slide-gpu.is-flow .gpu-pane.gpu-pane-flow {
  display: flex;
  grid-column: 1;
  grid-row: 1;
}
.slide-gpu.is-flow .gpu-pane-rtl {
  grid-column: 2;
  grid-row: 1;
}
.slide-gpu.is-flow .gpu-pane-net,
.slide-gpu.is-flow .gpu-pane-notes,
.slide-gpu.is-flow .gpu-left-col { display: none; }
.slide-gpu.is-flow .gpu-sm-grid,
.slide-gpu.is-flow .gpu-pkg,
.slide-gpu.is-flow .gpu-pkg-k { display: none; }
.gpu-pane.gpu-pane-flow {
  display: none;
  min-width: 0;
  overflow: auto;
}
.gpu-pane-rtl {
  flex: 1;
  min-height: 0;
}
.gpu-fig {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
  flex: 1;
  min-height: 0;
}
.gpu-board-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.gpu-left-col .gpu-board-head {
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
  margin-bottom: 4px;
}
.gpu-left-col .gpu-mach-toggle {
  justify-content: flex-end;
  flex: none;
}
.gpu-left-col .gpu-mach-btn {
  font-size: 10px;
  padding: 2px 6px;
}
.gpu-left-col .gpu-leg {
  font-size: 9px;
  gap: 2px 4px;
  margin: 4px 0 0;
  flex: none;
}
.gpu-left-col .gpu-xsect {
  display: none;
}
.gpu-left-col .gpu-pkg-frame {
  display: flex;
  place-items: stretch;
}
.gpu-left-col .gpu-ohp .gpu-pkg-fig {
  width: 100%;
  height: 100%;
  max-height: 100%;
  aspect-ratio: auto;
}
.gpu-left-col .gpu-die-cell {
  min-height: 0;
  padding: 4px 3px 3px 10px;
  font-size: 7px;
}
.gpu-left-col .gpu-pkg-stack {
  min-height: 0;
  padding: 3px 1px 2px;
}
.gpu-left-col .gpu-host-mini {
  padding: 3px 8px 3px 18px;
}
.gpu-left-col .gpu-host-mini small {
  min-height: 0;
}
.gpu-board-head .gpu-pane-k { margin: 0; }
.gpu-board-head .gpu-mach-toggle { margin: 0; }
.gpu-ohp {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  width: 100%;
}
.gpu-pkg-frame {
  container-type: size;
  flex: 1;
  min-height: 0;
  display: grid;
  place-items: center;
  width: 100%;
}
.gpu-ohp .gpu-pkg-fig {
  width: min(100%, calc(100cqb * 16 / 9));
  aspect-ratio: 16 / 9;
  max-height: 100%;
  max-width: 100%;
  margin: 0;
  justify-content: stretch;
}
.gpu-ohp .gpu-floor {
  flex: 1;
  min-height: 0;
}
.gpu-leg {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  font: 500 10px/1.35 var(--sans);
  color: #475569;
}
.gpu-leg li {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 2px 6px;
  border-radius: 4px;
}
.gpu-leg li.on {
  font-weight: 600;
  color: #0f172a;
  background: #f0fdfa;
  outline: 1px solid #99f6e4;
}
.gpu-leg i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid;
  flex: none;
}
.gpu-leg [data-leg="1"] i,
.gpu-leg [data-leg="host"] i { background: #dbeafe; border-color: #1e3a5f; }
.gpu-leg [data-leg="2"] i { background: #bfdbfe; border-color: #1d4ed8; }
.gpu-leg [data-leg="3"] i,
.gpu-leg [data-leg="hbm"] i { background: #ccfbf1; border-color: #0f766e; }
.gpu-leg [data-leg="4"] i,
.gpu-leg [data-leg="l2"] i { background: #fde68a; border-color: #b45309; }
.gpu-leg [data-leg="5"] i,
.gpu-leg [data-leg="mac"] i { background: #ddd6fe; border-color: #6d28d9; }
.gpu-leg [data-leg="eng"] i { background: #fce7f3; border-color: #be185d; }
.gpu-leg-mono {
  font: 600 9px/1.2 var(--mono);
  font-variant-numeric: tabular-nums;
}
.gpu-ohp-rtl {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.gpu-leg-rtl {
  flex: none;
  margin: 0 0 6px;
}
.gpu-ohp-rtl .gpu-sch {
  min-height: 0;
  overflow: auto;
  flex: 1;
}
.gpu-callouts {
  display: none;
}
.gpu-pkg-fig {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  min-width: 0;
  max-width: none;
  margin: 0;
  width: 100%;
}
.gpu-fit,
.blk strong.gpu-fit,
.blk small.gpu-fit,
.gpu-stage-tag.gpu-fit,
.gpu-mac-reduce.gpu-fit,
.gpu-port.gpu-fit,
.gpu-ops span i.gpu-fit,
.gpu-floor-die-k.gpu-fit,
.gpu-die-cell.gpu-fit,
.gpu-host-mini small.gpu-fit {
  display: grid;
  justify-items: stretch;
  align-items: start;
  font-variant-numeric: tabular-nums;
}
.gpu-fit.inline,
.gpu-call em.gpu-fit,
.gpu-call b.gpu-fit {
  display: inline-grid;
  justify-items: start;
}
.gpu-fit::before {
  content: attr(data-fit);
  visibility: hidden;
  pointer-events: none;
  grid-area: 1 / 1;
  white-space: pre;
}
.gpu-fit.wrap::before { white-space: pre-wrap; }
.slide-gpu .gpu-sch .blk small.gpu-fit,
.slide-gpu .gpu-sch .blk strong.gpu-fit {
  display: grid;
}
.gpu-fit > * {
  grid-area: 1 / 1;
  min-width: 0;
  max-width: 100%;
}
.gpu-die-cell.gpu-fit { align-items: center; }
.gpu-die-cell.gpu-fit::before,
.gpu-die-cell.gpu-fit > * { text-align: center; }
.gpu-call {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 6px;
  margin: 0;
  font: 10px/1.35 var(--sans);
  color: #475569;
}
.gpu-call i {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #0f172a;
  color: #fff;
  font: 700 9px/16px var(--mono);
  text-align: center;
  font-style: normal;
}
.gpu-call b { display: block; font: 700 10px var(--sans); color: #0f172a; }
.gpu-call em { font-style: normal; font-family: var(--mono); font-weight: 700; color: #0f172a; }
.gpu-call.on { color: #0f766e; }
.gpu-call.on i { background: #0f766e; }
.gpu-call.on b, .gpu-call.on em { color: #0f766e; }
.gpu-host-mini {
  margin: 0;
  padding: 4px 8px 4px 18px;
  position: relative;
  text-align: left;
}
.gpu-host-mini.active {
  background: #0f766e;
  border-color: #047857;
  color: #ecfdf5;
}
.gpu-host-mini.active strong,
.gpu-host-mini.active small,
.gpu-host-mini.active .blk-k { color: #ecfdf5; }
.gpu-pcie-mini.live {
  background: #1d4ed8;
  color: #fff;
  border-radius: 3px;
}
.gpu-pcie-mini.live span { color: #dbeafe; font-weight: 700; }
.gpu-host-mini strong { font-size: 11px; }
.gpu-host-mini small {
  margin-top: 1px;
  font-size: 9px;
  min-height: 1.2em;
}
.gpu-floor-die-k {
  min-height: 1.2em;
}
.gpu-call span {
  min-height: 4.05em;
}
.gpu-pcie-mini {
  position: relative;
  height: 16px;
  min-height: 16px;
  margin: 0;
}
.gpu-pcie-mini span { font-size: 8px; }
.gpu-floor {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  grid-template-areas:
    "top top top"
    "left die right"
    "bot bot bot";
  gap: 3px;
  padding: 6px;
  border: 1.5px solid #1f2a33;
  border-radius: 8px;
  background: #eef2f6;
}
.gpu-floor-top { grid-area: top; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; }
.gpu-floor-left { grid-area: left; display: flex; flex-direction: column; gap: 3px; }
.gpu-floor-right { grid-area: right; display: flex; flex-direction: column; gap: 3px; }
.gpu-floor-left .gpu-pkg-stack,
.gpu-floor-right .gpu-pkg-stack { flex: 1; }
.gpu-floor-bot { grid-area: bot; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; }
.gpu-floor-bot:empty { display: none; }
.gpu-pkg-stack {
  position: relative;
  border: 1px solid #1f2a33;
  background: #e8f0fa;
  border-radius: 3px;
  padding: 4px 1px 3px;
  text-align: center;
  min-height: 28px;
}
.gpu-pkg-stack > b:not(.gpu-num) { display: block; font: 700 8px var(--mono); }
.gpu-pkg-stack span { display: block; font: 7px var(--mono); color: #64748b; }
.gpu-pkg-stack.hot {
  background: #0f766e;
  border-color: #0f766e;
  color: #fff;
}
.gpu-pkg-stack.hot span { color: #ecfdf5; }
.gpu-floor-die {
  grid-area: die;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.gpu-floor-die-k {
  font: 700 8px var(--mono);
  color: #64748b;
  text-align: center;
}
.gpu-die-grid,
.gpu-pnr-mini {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  flex: 1;
}
.gpu-die-cell.pnr-std {
  background: repeating-linear-gradient(45deg, #f8fafc 0 3px, #e2e8f0 3px 4px);
}
.gpu-die-cell.pnr-l2 { background: #e0e7ff; }
.gpu-die-cell.pnr-phy { background: #fef3c7; }
.gpu-die-cell.pnr-mc { background: #ccfbf1; }
.gpu-pnr-rdl {
  height: 14px;
  margin: 0;
  font: 700 7px/14px var(--mono);
  text-align: center;
  color: #64748b;
  background-image: repeating-linear-gradient(90deg, #94a3b8 0 6px, transparent 6px 10px);
  background-position: center;
  background-size: 100% 2px;
  background-repeat: no-repeat;
}
.gpu-pnr-rdl.live {
  color: #fff;
  background-color: #0f766e;
  background-image: repeating-linear-gradient(90deg, #ecfdf5 0 6px, transparent 6px 10px);
}
.gpu-view-toggle {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin: 0 0 6px;
}
.gpu-view-toggle .ghost[aria-pressed="true"] {
  background: #0f766e;
  color: #fff;
  border-color: #0f766e;
}
.gpu-pnr-big {
  flex: 1;
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.gpu-pnr-big[hidden] { display: none !important; }
.gpu-pnr-prov {
  margin: 0;
  font: 11px/1.4 var(--sans);
  color: #334155;
}
.gpu-pnr-prov em { font-style: italic; }
.pnr-leg {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font: 9px var(--mono);
  color: #475569;
}
.pnr-leg .lg { padding: 2px 6px; border: 1px solid #cbd5e1; border-radius: 4px; }
.pnr-leg .lg.place { background: #e8f0fa; }
.pnr-leg .lg.route { background: #ccfbf1; }
.pnr-leg .lg.std {
  background: repeating-linear-gradient(45deg, #f8fafc 0 3px, #e2e8f0 3px 4px);
}
.pnr-canvas {
  border: 1.5px solid #1f2a33;
  border-radius: 8px;
  background: #eef2f6;
  padding: 6px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 4px;
  min-height: 220px;
}
.pnr-hbm-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.pnr-hbm-row:empty { display: none; }
.pnr-mid { display: grid; grid-template-columns: 52px minmax(0, 1fr) 52px; gap: 4px; min-height: 140px; }
.pnr-hbm-col { display: flex; flex-direction: column; gap: 4px; }
.pnr-hbm-col .gpu-pkg-stack { flex: 1; }
.pnr-die {
  position: relative;
  border: 1.5px solid #1f2a33;
  background: #fff;
  border-radius: 6px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.pnr-die-k { font: 700 9px var(--mono); color: #64748b; text-align: center; }
.pnr-phy-strip {
  background: #fef3c7;
  border: 1px solid #1f2a33;
  border-radius: 3px;
  font: 700 8px var(--mono);
  text-align: center;
  padding: 4px 2px;
}
.pnr-phy-strip.on { background: #fde68a; }
.pnr-core { display: grid; grid-template-columns: 1.4fr 1fr; gap: 4px; flex: 1; }
.pnr-sms {
  background: repeating-linear-gradient(45deg, #f8fafc 0 4px, #e2e8f0 4px 5px);
  border: 1px solid #1f2a33;
  border-radius: 3px;
  font: 700 9px var(--mono);
  display: grid;
  place-items: center;
  text-align: center;
  padding: 8px 4px;
}
.pnr-sms.on { outline: 2px solid #0f766e; }
.pnr-macros { display: flex; flex-direction: column; gap: 4px; }
.pnr-macros span {
  flex: 1;
  border: 1px solid #1f2a33;
  border-radius: 3px;
  font: 700 8px/1.2 var(--mono);
  display: grid;
  place-items: center;
  padding: 4px;
  text-align: center;
}
.pnr-l2 { background: #e0e7ff; }
.pnr-mc { background: #ccfbf1; }
.pnr-pcie { background: #f1f5f9; }
.pnr-macros span.on { outline: 2px solid #0f766e; }
.pnr-metal { width: 100%; height: 12px; display: block; }
.pnr-wire { fill: none; stroke: #94a3b8; stroke-width: 1.2; }
.pnr-wire.live { stroke: #0f766e; stroke-width: 1.8; }
.gpu-pnr-scale {
  margin: 0;
  font: 10px/1.35 var(--sans);
  color: #64748b;
}
.replica-k-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.replica-k-row .gpu-view-toggle { margin: 0; }
.asic-pnr {
  flex: 1;
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.asic-pnr[hidden] { display: none !important; }
.asic-pnr-die {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  grid-template-rows: 1.2fr 1fr 0.7fr;
  gap: 6px;
  min-height: 280px;
  padding: 8px;
  border: 1.5px solid #1f2a33;
  border-radius: 10px;
  background: #eef2f6;
}
.asic-pnr-rom {
  grid-row: 1 / 3;
  background: repeating-linear-gradient(0deg, #0f766e 0 2px, #134e4a 2px 3px);
  color: #ecfdf5;
  border: 1.5px solid #1f2a33;
  border-radius: 6px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 2px;
}
.asic-pnr-rom b { font: 700 12px var(--sans); }
.asic-pnr-rom span, .asic-pnr-rom em { font: 10px var(--mono); opacity: 0.9; }
.asic-pnr-rom strong { font: 700 18px var(--sans); }
.asic-pnr-mac, .asic-pnr-sram, .asic-pnr-io {
  border: 1px solid #1f2a33;
  border-radius: 6px;
  padding: 8px;
  background: #fff;
}
.asic-pnr-mac {
  background: repeating-linear-gradient(45deg, #f8fafc 0 4px, #e2e8f0 4px 5px);
}
.asic-pnr-sram { background: #e0e7ff; }
.asic-pnr-io { background: #f1f5f9; }
.asic-pnr-mac b, .asic-pnr-sram b, .asic-pnr-io b { display: block; font: 700 12px var(--sans); }
.asic-pnr-mac span, .asic-pnr-sram span, .asic-pnr-io span { font: 10px var(--mono); color: #475569; }
.gpu-die-cell {
  position: relative;
  border: 1px solid #1f2a33;
  background: #fff;
  border-radius: 3px;
  padding: 6px 4px 4px 10px;
  font: 700 8px/1.2 var(--mono);
  color: #0f172a;
  text-align: center;
  min-height: 38px;
  box-sizing: border-box;
}
.gpu-die-cell.on {
  background: #0f766e;
  border-color: #047857;
  color: #ecfdf5;
  box-shadow: 0 0 0 1px #99f6e4;
}
.gpu-die-cell.on span,
.gpu-die-cell.on b:not(.gpu-num) { color: #ecfdf5; }
.gpu-num {
  position: absolute;
  top: 3px;
  left: 3px;
  z-index: 1;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #0f172a;
  color: #fff;
  font: 700 8px/14px var(--mono);
  text-align: center;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.35);
}
.gpu-host-mini.active .gpu-num,
.gpu-pcie-mini.live .gpu-num,
.gpu-pkg-stack.hot .gpu-num,
.gpu-die-cell.on .gpu-num { background: #fff; color: #0f766e; }
.gpu-xsect {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 2px;
  margin: 2px 0 0;
  font: 8px/1.2 var(--mono);
}
.gpu-xsect-hbm {
  background: #e8f0fa;
  border: 1px solid #1f2a33;
  text-align: center;
  padding: 2px 0;
}
.gpu-xsect-die {
  background: #fff;
  border: 1px solid #1f2a33;
  text-align: center;
  padding: 2px 0;
  font-weight: 700;
}
.gpu-xsect-rdl {
  grid-column: 1 / -1;
  background: #cbd5e1;
  color: #334155;
  text-align: center;
  padding: 2px 4px;
  border-radius: 0 0 4px 4px;
}
.gpu-flow-layers {
  display: grid;
  grid-template-columns: repeat(14, minmax(0, 1fr));
  gap: 2px;
  margin: 0 0 8px;
}
.gpu-flow-layers button {
  border: 1px solid #cbd5e1;
  background: #fff;
  border-radius: 4px;
  padding: 2px 0;
  font: 700 8px var(--mono);
  color: #64748b;
  cursor: pointer;
}
.gpu-flow-layers button.on {
  background: #0f766e;
  border-color: #0f766e;
  color: #fff;
}
.gpu-flow {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 0;
  flex: 1;
}
.gfs-sec, .gfs-band { display: flex; flex-direction: column; }
.gfs-band {
  margin: 6px 0;
  padding: 6px 6px 6px 0;
  border: 1.5px solid #1f2a33;
  border-radius: 10px;
  background: #f7f8fa;
}
.gfs-band-k {
  margin: 0 0 6px 22px;
  font: 700 10px var(--mono);
  color: #0f766e;
}
.gfs-hop {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) 52px;
  gap: 6px;
  align-items: stretch;
  width: 100%;
  margin: 0;
  padding: 0 4px 0 6px;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
}
.gfs-spine {
  position: relative;
  min-height: 44px;
  background-image: repeating-linear-gradient(0deg, #1f2a33 0 5px, transparent 5px 9px);
  background-position: center;
  background-size: 2px 100%;
  background-repeat: no-repeat;
}
.gfs-hop.now .gfs-spine {
  background-image: repeating-linear-gradient(0deg, #0f766e 0 5px, transparent 5px 9px);
}
.gfs-pkt {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #0f766e;
  color: #fff;
  font: 700 8px var(--mono);
  padding: 1px 4px;
  border-radius: 3px;
  z-index: 1;
}
.gfs-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22px minmax(0, 1fr) 22px minmax(0, 1fr);
  gap: 4px;
  align-items: stretch;
  border: 1.5px solid #d1d9e0;
  background: #fff;
  border-radius: 8px;
  padding: 4px;
}
.gfs-hop.now .gfs-row {
  border-color: #0f766e;
  background: #f0fdfa;
  box-shadow: inset 0 0 0 1px #0f766e55;
}
.gfs-hop.done { opacity: 0.42; }
.gfs-hop:hover .gfs-row { border-color: #0f766e; }
.gfs-row .blk {
  padding: 4px 5px;
  min-width: 0;
  border-radius: 6px;
  overflow: hidden;
}
.gfs-row .blk-k { font-size: 7px; margin-bottom: 1px; }
.gfs-row .blk strong { font-size: 10px; line-height: 1.15; }
.gfs-row .bus.h {
  height: auto;
  margin: 0;
  align-self: center;
  font-size: 7px;
}
.gfs-lab {
  display: flex;
  align-items: center;
  font: 700 10px/1.2 var(--mono);
  color: #334155;
}
.gfs-hop.now .gfs-lab { color: #0f766e; }
#gpuFlowBtn[aria-pressed="true"] {
  background: #0f766e;
  color: #fff;
  border-color: #0f766e;
}
.gpu-pane-rtl {
  min-width: 0;
}
.gpu-pane {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  padding: 8px 10px 10px;
  overflow: hidden;
}
.gpu-pane-k {
  margin: 0 0 4px;
  font: 500 13px var(--sans);
  color: #64748b;
}
.gpu-pane-k-late { margin-top: 10px; }
.gpu-pane-sub {
  margin: 0 0 8px;
  font: 11px/1.4 var(--sans);
  color: #64748b;
}
.gpu-left-col .gpu-pane-net {
  padding: 6px 8px 8px;
}
.gpu-net-head {
  flex: none;
  margin: 0 0 4px;
}
.gpu-net-status {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  margin: 0 0 3px;
}
.gpu-net-badge {
  flex: none;
  font: 700 10px/1 var(--mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #0f766e;
  background: #ecfdf5;
  border: 1px solid #99f6e4;
  border-radius: 4px;
  padding: 2px 5px;
}
.gpu-net-op {
  font: 600 10px/1.3 var(--sans);
  color: #0f172a;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gpu-net {
  flex: none;
  min-height: 0;
  overflow: visible;
  gap: 0;
}
.gpu-net-track {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.gpu-net-layers {
  display: grid;
  grid-template-columns: repeat(28, minmax(0, 1fr));
  gap: 2px;
  height: 8px;
}
.gpu-net-ldot {
  display: block;
  height: 8px;
  border-radius: 2px;
  background: #e2e8f0;
}
.gpu-net-ldot.active {
  background: #0f766e;
  box-shadow: 0 0 0 1px #99f6e4;
}
.gpu-net-block {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 6px 7px 7px;
  border: 1px solid #99f6e4;
  border-radius: 8px;
  background: #f8fafc;
}
.gpu-net-block.current {
  border-color: #0f766e;
}
.gpu-net-block-k {
  margin: 0;
  font: 700 10px/1.2 var(--mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #0f766e;
}
.gpu-net-row {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
}
.gpu-net-row-k {
  flex: none;
  width: 30px;
  padding-top: 4px;
  font: 700 9px/1.2 var(--mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #64748b;
}
.gpu-net-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  min-width: 0;
}
.gpu-net-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 3px 7px;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  background: #fff;
  font: 600 10px/1.2 var(--sans);
  color: #64748b;
  cursor: default;
}
.gpu-net-chip i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid #cbd5e1;
  background: #f1f5f9;
  flex: none;
}
.gpu-net-chip.cls-embed i { background: #7dd3fc; border-color: #0369a1; }
.gpu-net-chip.cls-norm i { background: #c7d2fe; border-color: #4338ca; }
.gpu-net-chip.cls-proj i { background: #5eead4; border-color: #0f766e; }
.gpu-net-chip.cls-rope i { background: #a5f3fc; border-color: #0e7490; }
.gpu-net-chip.cls-attn i { background: #fde68a; border-color: #b45309; }
.gpu-net-chip.cls-act i { background: #f9a8d4; border-color: #be185d; }
.gpu-net-chip.cls-resid i { background: #cbd5e1; border-color: #475569; }
.gpu-net-chip.cls-head i { background: #ddd6fe; border-color: #6d28d9; }
.gpu-net-chip.active {
  color: #0f172a;
  border-color: #0f766e;
  background: #ecfdf5;
  box-shadow: 0 0 0 1px #99f6e4;
}
.gpu-net-eq {
  margin: 0 0 4px;
  padding: 4px 7px;
  font: 600 10px/1.35 var(--mono);
  font-variant-numeric: tabular-nums;
  color: #475569;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 5px;
  min-height: 0;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.gpu-net-eq.is-live {
  color: #0f172a;
  background: #f0fdfa;
  border-color: #99f6e4;
}
.gpu-net-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.gpu-net-legend li {
  display: flex;
  align-items: center;
  gap: 3px;
  border-radius: 999px;
  padding: 1px 4px 1px 2px;
  font: 600 8px/1 var(--sans);
  color: #64748b;
}
.gpu-net-legend li span {
  letter-spacing: 0.02em;
}
.gpu-net-legend i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1px solid;
  flex: none;
}
.gpu-net-legend li.is-now {
  color: #0f172a;
  background: #f0fdfa;
  outline: 1px solid #99f6e4;
}
.gpu-net-tail {
  display: flex;
  align-items: stretch;
  gap: 4px;
}
.gpu-net-track > .gpu-circ.wide,
.gpu-net-tail .gpu-circ.wide {
  flex: 1;
  min-width: 0;
  opacity: 0.5;
  padding: 4px 6px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: #fff;
}
.gpu-net-track > .gpu-circ.wide.active,
.gpu-net-tail .gpu-circ.wide.active {
  opacity: 1;
  border-color: #0f766e;
  background: #ecfdf5;
}
.gpu-net-track > .gpu-circ.wide .soma,
.gpu-net-tail .gpu-circ.wide .soma {
  width: 10px;
  height: 10px;
}
.gpu-net-track > .gpu-circ.wide b,
.gpu-net-tail .gpu-circ.wide b {
  font-size: 10px;
}
.slide-gpu .gpu-net .decoder-graph {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 2px 2px 4px;
  border-radius: 6px;
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
}
.slide-gpu .gpu-net .dag {
  flex: 1;
  min-height: 0;
  padding: 2px 2px 4px;
}
.slide-gpu .gpu-net .dag-nodes {
  gap: 3px 1px;
}
.slide-gpu .gpu-net .gpu-circ:not(.active):not(.on-path):not(.wide) b {
  display: none;
}
.slide-gpu .gpu-net .gpu-circ:not(.active):not(.on-path):not(.wide) {
  opacity: 0.28;
  justify-content: center;
}
.slide-gpu .gpu-net .gpu-circ.on-path:not(.active):not(.wide) {
  opacity: 0.72;
}
.slide-gpu .gpu-net .gpu-circ .soma {
  width: 11px;
  height: 11px;
  border-width: 1.2px;
}
.slide-gpu .gpu-net .gpu-circ.active .soma {
  width: 14px;
  height: 14px;
}
.slide-gpu .gpu-net .gpu-circ.active b {
  font-size: 8px;
  padding: 1px 4px;
}
.slide-gpu .gpu-net .gpu-circ.on-path .soma {
  box-shadow: 0 0 0 1px #5eead4;
}
.slide-gpu .dag-title {
  margin: 0 2px 2px;
  font-size: 7px;
  letter-spacing: 0.06em;
}
.slide-gpu .gpu-net-now {
  font: 700 11px/1.35 var(--sans);
  color: #0f172a;
  min-height: 1.35em;
}
.slide-gpu .gpu-net-now #gpuNetNowLayer { color: #0f766e; }
.gpu-net-legend [data-cls="embed"] i { background: #7dd3fc; border-color: #0369a1; }
.gpu-net-legend [data-cls="norm"] i { background: #c7d2fe; border-color: #4338ca; }
.gpu-net-legend [data-cls="proj"] i { background: #5eead4; border-color: #0f766e; }
.gpu-net-legend [data-cls="rope"] i { background: #a5f3fc; border-color: #0e7490; }
.gpu-net-legend [data-cls="attn"] i { background: #fde68a; border-color: #b45309; }
.gpu-net-legend [data-cls="act"] i { background: #f9a8d4; border-color: #be185d; }
.gpu-net-legend [data-cls="resid"] i { background: #cbd5e1; border-color: #475569; }
.gpu-net-legend [data-cls="head"] i { background: #ddd6fe; border-color: #6d28d9; }
.slide-gpu .layer-rail {
  grid-template-columns: repeat(14, minmax(0, 1fr));
  gap: 1px;
  padding: 0 0 2px;
}
.slide-gpu .layer-dot { padding: 0; font-size: 6px; border-radius: 2px; }
.slide-gpu .decoder-graph { padding: 1px 0 2px; border-radius: 6px; }
.slide-gpu .dag { padding: 1px 2px 2px; }
.slide-gpu .dag-nodes { gap: 7px 0; overflow: visible; }
.slide-gpu .dag { overflow: visible; }
.slide-gpu .dag-title { margin: 0 2px 1px; font-size: 8px; }
.slide-gpu .gpu-net .gpu-circ {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: none;
  box-shadow: none;
  width: 100%;
  min-width: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border-radius: 0;
  animation: none;
  cursor: default;
  opacity: 0.34;
}
.slide-gpu .gpu-net .gpu-circ.wide {
  width: auto;
  align-self: stretch;
  justify-self: stretch;
  grid-column: auto;
}
.slide-gpu .gpu-net-track > .gpu-circ.wide,
.slide-gpu .gpu-net-tail .gpu-circ.wide {
  opacity: 0.55;
  border: 1px solid #e2e8f0;
  background: #fff;
}
.slide-gpu .gpu-net-track > .gpu-circ.wide.active,
.slide-gpu .gpu-net-tail .gpu-circ.wide.active {
  opacity: 1;
}
.slide-gpu .gpu-net .gpu-circ.port {
  border: none;
  background: transparent;
}
.slide-gpu .gpu-net .gpu-circ .soma {
  position: relative;
  top: 0;
  left: 0;
  transform: none;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 1.5px solid;
  box-shadow: none;
  flex: none;
}
.slide-gpu .gpu-net .gpu-circ.wide .soma {
  width: 16px;
  height: 16px;
}
.slide-gpu .gpu-net .gpu-circ.cls-embed .soma { background: #7dd3fc; border-color: #0369a1; }
.slide-gpu .gpu-net .gpu-circ.cls-norm .soma { background: #c7d2fe; border-color: #4338ca; }
.slide-gpu .gpu-net .gpu-circ.cls-proj .soma { background: #5eead4; border-color: #0f766e; }
.slide-gpu .gpu-net .gpu-circ.cls-rope .soma { background: #a5f3fc; border-color: #0e7490; }
.slide-gpu .gpu-net .gpu-circ.cls-attn .soma { background: #fde68a; border-color: #b45309; }
.slide-gpu .gpu-net .gpu-circ.cls-act .soma { background: #f9a8d4; border-color: #be185d; }
.slide-gpu .gpu-net .gpu-circ.cls-resid .soma { background: #cbd5e1; border-color: #475569; }
.slide-gpu .gpu-net .gpu-circ.cls-head .soma { background: #ddd6fe; border-color: #6d28d9; }
.slide-gpu .gpu-net .gpu-circ b {
  font: 600 9px/1.2 var(--sans);
  line-height: 1.2;
  font-weight: 600;
  text-align: left;
  color: #334155;
  white-space: nowrap;
  max-width: none;
}
.slide-gpu .gpu-net .gpu-circ.active,
.slide-gpu .gpu-net .gpu-circ.on-path,
.slide-gpu .gpu-net .net-node.gpu-circ.active,
.slide-gpu .gpu-net .net-node.gpu-circ.on-path {
  background: transparent;
  border: none;
  box-shadow: none;
  animation: none;
  filter: none;
}
.slide-gpu .gpu-net .gpu-circ.on-path {
  opacity: 0.92;
}
.slide-gpu .gpu-net .gpu-circ.on-path .soma {
  box-shadow: 0 0 0 2px #5eead4;
}
.slide-gpu .gpu-net .gpu-circ.active {
  opacity: 1;
  z-index: 4;
}
.slide-gpu .gpu-net .gpu-circ.active .soma {
  width: 18px;
  height: 18px;
  box-shadow: 0 0 0 2px #fff, 0 0 0 5px #0f172a;
  animation: gpuSomaPulse 0.9s ease-in-out infinite;
}
.slide-gpu .gpu-net .gpu-circ.active b {
  color: #fff;
  background: #0f172a;
  font-weight: 600;
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 4px;
}
@keyframes gpuSomaPulse {
  0%, 100% { box-shadow: 0 0 0 2px #fff, 0 0 0 5px #0f172a; }
  50% { box-shadow: 0 0 0 2px #fff, 0 0 0 8px #0f766e; }
}
.slide-gpu .gpu-net button.gpu-circ:hover:not(:disabled) {
  border: none;
  box-shadow: none;
  filter: none;
  opacity: 1;
}
.slide-gpu .gpu-net button.gpu-circ:hover:not(:disabled) .soma {
  filter: brightness(0.96);
}
.slide-gpu .flow-edge { padding: 0; font-size: 7px; gap: 0; }
.slide-gpu .gpu-net .flow-edge { min-height: 8px; line-height: 8px; }
.slide-gpu .gpu-net .flow-edge i { font-size: 8px; }
.slide-gpu .flow-edge span { display: none; }
.slide-gpu .rail-caption, .slide-gpu .dag-legend { display: none; }
.slide-gpu .gpu-pane-net { padding: 6px 6px 8px; }
.slide-gpu .gpu-pane-notes {
  overflow: auto;
  background: #f8fafc;
  padding: 8px 10px;
  max-height: min(24vh, 190px);
}
.gpu-notes-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 6px;
}
.gpu-notes-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
  align-items: stretch;
}
.gpu-notes-grid .gpu-note-card,
.gpu-notes-grid .gpu-rtl-measured {
  margin: 0;
  min-width: 0;
}
.gpu-notes-now {
  margin: 0;
  font: 700 14px/1.3 var(--sans);
  color: #0f172a;
}
.gpu-notes-phase {
  margin: 0;
  font: 600 11px var(--mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #0f766e;
}
.gpu-note-card {
  margin: 0 0 8px;
  padding: 8px 10px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
}
.gpu-note-card.is-keep {
  background: #f0fdfa;
  border-color: #99f6e4;
}
.gpu-note-k {
  margin: 0 0 4px;
  font: 10px var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #64748b;
}
.gpu-note-b {
  margin: 0;
  font: 12px/1.4 var(--sans);
  color: #334155;
}
.slide-gpu .gpu-pane-notes .gpu-rtl-measured {
  margin: 8px 0 0;
  padding: 8px 10px;
}
.slide-gpu .gpu-pane-notes .gpu-rtl-line { font-size: 11px; line-height: 1.45; }
.slide-gpu .sch-note[hidden] { display: none !important; }
.slide-gpu .gpu-viz {
  flex: 1;
  min-height: 0;
  display: block;
  overflow: auto;
}
.slide-gpu .gpu-sch {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 10px 12px;
  font-size: 11px;
  background: #fafbfc;
  border-radius: 12px;
  border-color: #d1d9e0;
}
.slide-gpu .gpu-sch .blk {
  padding: 8px 10px;
  border-radius: 10px;
  border-width: 1px;
  overflow: hidden;
}
.slide-gpu .gpu-sch .blk strong { font-size: 12px; }
.slide-gpu .gpu-sch .blk small { font-size: 9px; margin-top: 3px; }
.slide-gpu .gpu-sch .bus.h {
  position: relative;
  height: 16px;
  margin: 4px 0;
  font-size: 8px;
  border-radius: 3px;
}
.slide-gpu .gpu-sch .bus.h.gpu-hbm-bus {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 22px;
  min-height: 22px;
  margin: 6px 0;
  padding: 0 8px;
  border: none;
  border-radius: 0;
  background-color: transparent;
  background-image: repeating-linear-gradient(90deg, #1f2a33 0 8px, transparent 8px 14px);
  background-position: center;
  background-size: 100% 2px;
  background-repeat: no-repeat;
  overflow: visible;
}
.slide-gpu .gpu-sch .bus.h.gpu-hbm-bus.live {
  border: none;
  background-color: transparent;
  background-image: repeating-linear-gradient(90deg, #0f766e 0 8px, transparent 8px 14px);
}
.slide-gpu .gpu-hbm-bus .gpu-bus-line {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  background: #fafbfc;
  padding: 1px 8px;
  z-index: 1;
}
.slide-gpu .gpu-hbm-bus .gpu-bus-line b {
  font: 700 13px/1.15 var(--sans);
  color: #0f172a;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.slide-gpu .gpu-hbm-bus #gpuBusSpec {
  font: 10px/1.2 var(--mono);
  color: #475569;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.slide-gpu .gpu-hbm-bus .gpu-bus-cap {
  flex-shrink: 0;
  max-width: 38%;
  background: #fafbfc;
  padding: 1px 8px;
  font: 10px var(--mono);
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  z-index: 1;
}
.slide-gpu .gpu-hbm-bus .gpu-bus-cap::before { white-space: pre; }
.slide-gpu .gpu-w-bus {
  min-width: 18px;
  font-size: 9px;
  font-weight: 700;
  text-align: center;
}
.slide-gpu .gpu-w-bus span {
  background: #fafbfc;
  padding: 2px 0;
}
.slide-gpu .gpu-sch .bus.v { border-radius: 3px; }
.slide-gpu .gpu-sm-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: 8px;
  gap: 1px;
  margin-top: 4px;
  min-height: calc(13 * 8px + 12 * 1px);
  height: calc(13 * 8px + 12 * 1px);
  opacity: 0.4;
}
.slide-gpu .gpu-sm-grid.is-live {
  opacity: 1;
}
.slide-gpu .gpu-sm-grid.is-live .gpu-sm-cell {
  background: #0f766e;
  border-color: #0d9488;
}
.gpu-gemm-pipe {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  margin: 8px 0 4px;
  padding: 0;
  list-style: none;
}
.gpu-gemm-pipe li {
  border: 1px solid #cbd5e1;
  background: #fff;
  border-radius: 6px;
  padding: 5px 6px;
  font: 10px/1.25 var(--mono);
  color: #475569;
}
.gpu-gemm-pipe li b {
  display: block;
  font-size: 11px;
  color: #0f172a;
  margin-bottom: 1px;
}
.gpu-gemm-pipe li.on {
  background: #0f766e;
  border-color: #0f766e;
  color: #ecfdf5;
}
.gpu-gemm-pipe li.on b { color: #fff; }
.gpu-gemm-not {
  margin: 0 0 6px;
  font: 11px/1.35 var(--sans);
  color: #64748b;
}
.gpu-pkg-k {
  margin: 8px 0 2px;
  font: 8px var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #3b6ea5;
}
.gpu-pkg {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  font: 10px var(--mono);
  color: #475569;
}
.gpu-pkg-bar {
  display: block;
  height: 8px;
  background: #e2e8f0;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  overflow: hidden;
}
.gpu-pkg-bar i {
  display: block;
  height: 100%;
  width: 0.5%;
  background: #0f766e;
}
.slide-gpu .gpu-mac-lanes {
  display: grid;
  grid-template-columns: repeat(16, minmax(0, 1fr));
  gap: 2px;
  margin-top: 6px;
}
.slide-gpu .gpu-mac-lane {
  min-height: 26px;
  border: 1px solid #1f2a33;
  background: #fff;
  border-radius: 3px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font: 7px var(--mono);
  color: #64748b;
}
.slide-gpu .gpu-mac-lane em {
  font-style: normal;
  font-weight: 700;
  font-size: 11px;
  line-height: 1;
  color: #b54708;
}
.slide-gpu .gpu-mac-lane.hot {
  background: #0f766e;
  border-color: #0f766e;
  color: #fff;
}
.slide-gpu .gpu-mac-lane.hot em { color: #fde68a; }
.slide-gpu .gpu-mac-lane.lead {
  box-shadow: inset 0 0 0 2px #fde68a;
}
.slide-gpu .gpu-mac-reduce {
  margin: 4px 0 0;
  text-align: center;
  font: 700 10px/1.3 var(--mono);
  color: #0f172a;
  justify-items: center;
}
.slide-gpu .gpu-sm-cell {
  min-height: 0;
  height: 8px;
  border: 1px solid #cbd5e1;
  background: #fff;
  border-radius: 1px;
  padding: 0;
}
.slide-gpu .gpu-sm-cell span { display: none; }
.slide-gpu .gpu-hbm-stack {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 4px;
  margin-top: 6px;
}
.slide-gpu .gpu-hbm-die {
  border: 1px solid #1f2a33;
  background: #e8f0fa;
  border-radius: 4px;
  padding: 4px 2px;
  text-align: center;
  min-height: 36px;
}
.slide-gpu .gpu-hbm-die b {
  display: block;
  font-size: 9px;
  font-family: var(--mono);
}
.slide-gpu .gpu-hbm-die span {
  display: block;
  font-size: 8px;
  color: #64748b;
}
.slide-gpu .gpu-hbm-die.hot {
  background: #0f766e;
  border-color: #0f766e;
  color: #fff;
}
.slide-gpu .gpu-hbm-die.hot b,
.slide-gpu .gpu-hbm-die.hot span { color: #fff; }
.slide-gpu .gpu-bus-pkt {
  position: absolute;
  top: 50%;
  bottom: auto;
  transform: translate(-50%, -50%);
  background: #0f766e;
  color: #fff;
  font: 700 8px var(--mono);
  padding: 1px 6px;
  border-radius: 4px;
  pointer-events: none;
  white-space: nowrap;
  z-index: 2;
}
.slide-gpu .gpu-sch .blk.sram.loading {
  background: #fffbeb;
  border-color: #f59e0b;
}
.slide-gpu .gpu-strip[hidden] { display: none !important; }
.slide-gpu .gpu-mach-toggle { grid-column: auto; justify-content: flex-start; margin-bottom: 6px; }
.slide-gpu .gpu-stage-tag { grid-column: auto; font-size: 12px; margin-bottom: 6px; justify-items: center; }
.gpu-path[hidden],
.gpu-path-why[hidden] {
  display: none !important;
}
.gpu-path {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0 0 4px;
  padding: 6px 8px;
  border: 1px solid #99f6e4;
  background: #f0fdfa;
  border-radius: 8px;
  font: 600 11px/1.3 var(--mono);
  color: #334155;
}
.gpu-path i {
  width: 16px;
  height: 2px;
  background: #94a3b8;
  flex-shrink: 0;
}
.gpu-path [data-gpu-hop] {
  padding: 3px 8px;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  background: #fff;
}
.gpu-path [data-gpu-hop].on {
  background: #0f766e;
  border-color: #0f766e;
  color: #fff;
}
.gpu-path-why {
  margin: 0 0 8px;
  font: 12px/1.4 var(--sans);
  color: #475569;
}
.gpu-note-card.is-path {
  background: #fff7ed;
  border-color: #fdba74;
}
.slide-gpu .gpu-sch .sch-row.mem {
  grid-template-columns: minmax(0, 1.2fr) 22px minmax(0, 0.7fr) 22px minmax(0, 0.9fr);
}
.slide-gpu .gpu-sch .sch-row.exec {
  display: grid;
  grid-template-columns: 1.35fr 0.8fr;
  gap: 8px;
  margin-bottom: 6px;
}
.slide-gpu .gpu-sch .sch-row.eng.is-later { opacity: 0.42; }
.slide-gpu .gpu-sch .sch-row.eng.is-later .blk.active { opacity: 1; }
.gpu-ops {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4px;
  margin-top: 6px;
}
.gpu-ops span {
  border: 1px solid #1f2a33;
  background: #fff;
  border-radius: 4px;
  padding: 4px 4px 3px;
  text-align: center;
  font: 10px var(--mono);
  color: #334155;
}
.gpu-ops span b {
  display: block;
  font-size: 13px;
  line-height: 1.1;
  color: #0f172a;
}
.gpu-ops span i {
  display: block;
  font-style: normal;
  font-size: 8px;
  color: #64748b;
  margin-top: 1px;
  white-space: nowrap;
}
.gpu-ops span i.gpu-fit { display: grid; }
.gpu-ops span i.gpu-fit::before { white-space: pre; }
.gpu-ops span.on {
  background: #0f766e;
  border-color: #0f766e;
  color: #fff;
}
.gpu-ops span.on b,
.gpu-ops span.on i { color: #fff; }
.gpu-ops span.wait {
  background: #fffbeb;
  border-color: #f59e0b;
}
.gpu-ops span.wait b { color: #92400e; }
.gpu-mac-ports {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 6px;
  width: 100%;
  min-height: 22px;
  margin: 6px 0;
  padding: 2px 0;
  background-image: repeating-linear-gradient(90deg, #1f2a33 0 8px, transparent 8px 14px);
  background-position: center;
  background-size: 100% 2px;
  background-repeat: no-repeat;
}
.gpu-mac-ports.live {
  background-image: repeating-linear-gradient(90deg, #0f766e 0 8px, transparent 8px 14px);
}
.gpu-port {
  background: #fafbfc;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  padding: 2px 8px;
  font: 700 10px var(--mono);
  color: #0f172a;
  white-space: nowrap;
  justify-items: center;
}
.gpu-port > * { color: inherit; }
.gpu-port.on {
  background: #0f766e;
  border-color: #0f766e;
  color: #fff;
}
.gpu-port.ready {
  background: #f0fdfa;
  border-color: #0f766e;
  color: #0f766e;
}
.gpu-port.blocked {
  background: #fffbeb;
  border-color: #f59e0b;
  color: #92400e;
}
.gpu-port-op {
  background: #fafbfc;
  padding: 0 4px;
  font: 700 12px var(--mono);
  color: #0f172a;
}
.gpu-leg [data-leg="kv"] i { background: #e9d5ff; border-color: #7c3aed; }
.slide-gpu .blk.kv.active {
  background: #ede9fe;
  border-color: #7c3aed;
  box-shadow: inset 0 0 0 2px #7c3aed55, 0 0 0 1px #7c3aed;
}
.slide-gpu .blk.kv.active strong { color: #5b21b6; }
.slide-gpu .blk.miss {
  background: #fff7ed;
  border-color: #c2410c;
  box-shadow: inset 0 0 0 2px #c2410c33;
}
.slide-gpu .gpu-rtl-measured { max-width: none; margin: 0 0 8px; padding: 8px 10px; }
.slide-gpu .gpu-rtl-line { font-size: 12px; }
.slide-gpu .gpu-rtl-sub { display: none; }
.gpu-pass-kpis {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 8px;
}
.gpu-pass-kpis div {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 6px 8px;
}
.gpu-pass-kpis span {
  display: block;
  font: 10px var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
}
.gpu-pass-kpis strong {
  display: block;
  font: 700 15px var(--sans);
  color: #0f172a;
  font-variant-numeric: tabular-nums;
}
.gpu-pass-chart {
  flex: 1;
  min-height: 120px;
  overflow: auto;
}
.gpu-pass-row {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) 54px;
  gap: 6px;
  align-items: center;
  margin: 2px 0;
  font: 9px var(--mono);
  color: #334155;
}
.gpu-pass-row.is-hot { color: #0f766e; font-weight: 700; }
.gpu-pass-bar {
  display: block;
  height: 8px;
  background: #eef2f5;
  border-radius: 999px;
  overflow: hidden;
}
.gpu-pass-bar span {
  display: block;
  height: 100%;
  background: #94a3b8;
  border-radius: 999px;
}
.gpu-pass-row.is-hot .gpu-pass-bar span { background: #0f766e; }
.slide-gpu .gpu-strip {
  grid-template-columns: 1fr;
  gap: 6px;
  overflow: auto;
  max-height: 220px;
}
.slide-gpu .gpu-stat { padding: 6px 8px; }
.slide-gpu .gpu-stat-n { font-size: 16px; }
@media (max-width: 1100px) {
  .gpu-leg { font-size: 9px; }
}
@media (max-width: 1280px) {
  .gpu-notes-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .gpu-tri { grid-template-columns: 1fr; grid-template-rows: none; }
  .gpu-left-col,
  .gpu-pane.gpu-pane-flow,
  .gpu-pane-rtl,
  .gpu-pane-notes { grid-column: auto; grid-row: auto; }
  .gpu-left-col .gpu-board-wrap { flex: none; min-height: 280px; }
  .gpu-left-col .gpu-pane-net { flex: none; }
  .gpu-pane-notes { max-height: none; }
  .gpu-notes-grid { grid-template-columns: 1fr 1fr; }
  .gpu-ohp { min-height: 220px; }
}
.gpu-eq {
  max-width: 68em;
  margin: 0 auto 10px;
  padding: 10px 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #f8fafc;
  text-align: center;
}
.gpu-eq-line {
  margin: 0 0 6px;
  font: 600 20px/1.3 var(--sans);
  color: #0f172a;
}
.gpu-eq-line .katex { font-size: 1.1em; }
.gpu-eq-cap {
  margin: 0;
  font: 13px/1.55 var(--sans);
  color: #334155;
  text-align: left;
}
.gpu-eq-cap code {
  font: 12px var(--mono);
  background: #eef2f5;
  padding: 1px 5px;
  border-radius: 4px;
}
.gpu-viz {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 180px 1fr;
  gap: 16px;
  align-items: stretch;
  min-height: 280px;
}
.gpu-mach-toggle {
  grid-column: 1 / -1;
  display: flex;
  gap: 8px;
  justify-content: center;
}
.gpu-stage-tag {
  grid-column: 1 / -1;
  text-align: center;
  font: 700 15px var(--mono);
  color: #0f172a;
  background: #f0fdfa;
  border: 1px solid #99f6e4;
  border-radius: 8px;
  padding: 5px 10px;
  margin: 0;
}
.gpu-mach-btn[aria-pressed="true"] {
  background: #0f766e;
  color: #fff;
  border-color: #0f766e;
}
.gpu-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.gpu-col-k {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748b;
}
.gpu-rtl-measured {
  max-width: 68em;
  margin: 0 auto 10px;
  padding: 10px 16px;
  border: 1.5px solid #1f2a33;
  background: #f7f8fa;
}
.gpu-rtl-line {
  font: 700 15px var(--sans);
  color: #0f172a;
  margin: 4px 0;
}
.gpu-rtl-sub {
  font: 12px/1.5 var(--sans);
  color: #475569;
  margin: 0;
}
.gpu-transport {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin: 2px 0;
}
.gpu-speed {
  display: flex;
  align-items: center;
  gap: 6px;
  font: 11px var(--mono);
  color: #475569;
}
.gpu-speed b { color: #0f172a; font-variant-numeric: tabular-nums; }
.gpu-speed input[type="range"] { width: 88px; }
#gpuZoomBtn { margin-left: auto; }
#gpuZoomBtn[aria-pressed="true"] {
  background: #0f766e;
  color: #fff;
  border-color: #0f766e;
}
#gpuZoomBtn:disabled { opacity: 0.4; cursor: not-allowed; }
.gpu-zoom {
  border: 1px solid #99f6e4;
  background: #f0fdfa;
  border-radius: 12px;
  padding: 10px 14px;
  margin: 2px 0;
}
.gpu-zoom-h {
  margin: 0 0 4px;
  font: 700 13px var(--mono);
  color: #0f172a;
}
.gpu-zoom-sub {
  margin: 0 0 10px;
  font: 12px/1.5 var(--sans);
  color: #475569;
}
.gpu-wave-transport {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}
.gpu-zoom-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.gpu-zoom-col { min-width: 0; }
.gpu-occ-bar {
  height: 14px;
  border-radius: 7px;
  background: #e2e8f0;
  border: 1px solid #cbd5e1;
  overflow: hidden;
  margin: 4px 0;
}
.gpu-occ-fill {
  height: 100%;
  background: #0f766e;
  width: 0%;
}
.gpu-zoom-eq {
  margin: 4px 0;
  font: 600 13px var(--mono);
  color: #0f172a;
}
.gpu-zoom-foot {
  margin: 8px 0 0;
  font: 11px/1.5 var(--sans);
  color: #64748b;
}
@media (max-width: 900px) {
  .gpu-zoom-body { grid-template-columns: 1fr; }
}
.gpu-x-badge {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 7px 10px;
  border: 1px dashed #94a3b8;
  border-radius: 10px;
  background: #f8fafc;
  margin-bottom: 2px;
}
.gpu-x-k {
  font: 700 12px var(--mono);
  color: #0f172a;
}
.gpu-x-v {
  font: 11px/1.4 var(--sans);
  color: #64748b;
}
.gpu-x-badge.loading {
  border-color: #f59e0b;
  background: #fffbeb;
}
.gpu-mac {
  min-height: 2.4em;
  color: #1e40af;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  padding: 6px 8px;
}
.gpu-sm-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 4px;
  align-content: start;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 10px;
}
.gpu-sm-cell {
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  background: #f8fafc;
  text-align: center;
  font: 9px var(--mono);
  color: #94a3b8;
  padding: 10px 0;
}
.gpu-sm-cell.hot {
  background: #dbeafe;
  border-color: #2563eb;
  color: #1e40af;
}
.gpu-cap {
  font: 11px var(--mono);
  color: #475569;
  margin: 0;
}
.gpu-bus {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  min-height: 120px;
}
.gpu-bus-wire {
  width: 100%;
  height: 10px;
  border-radius: 5px;
  background: #e2e8f0;
  border: 1px solid #cbd5e1;
}
.gpu-bus.live .gpu-bus-wire {
  background: #bfdbfe;
  border-color: #3b82f6;
}
.gpu-bus-pkt {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #1d4ed8;
  color: #fff;
  font: 10px var(--mono);
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.gpu-bus-arrow {
  position: absolute;
  top: 50%;
  right: -2px;
  transform: translateY(-50%);
  font: 700 18px var(--mono);
  color: #94a3b8;
}
.gpu-bus.live .gpu-bus-arrow { color: #3b82f6; }
.gpu-hbm-stack {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  align-content: start;
}
.gpu-hbm-die {
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: #f1f5f9;
  text-align: center;
  padding: 10px 4px;
}
.gpu-hbm-die b {
  display: block;
  font: 11px var(--mono);
  color: #334155;
}
.gpu-hbm-die span {
  font: 9px var(--mono);
  color: #94a3b8;
}
.gpu-hbm-die.hot {
  background: #dbeafe;
  border-color: #2563eb;
}
.gpu-hbm-die.hot b {
  color: #1e40af;
}
.gpu-note {
  font: 500 13.5px/1.5 var(--sans);
  color: #334155;
  margin: 0;
  min-height: 2.6em;
  text-align: center;
}
.gpu-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}
.gpu-stat {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 10px 12px;
}
.gpu-stat-k {
  display: block;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748b;
}
.gpu-stat-n {
  display: block;
  font-size: 22px;
  font-weight: 700;
  color: #0f172a;
  font-variant-numeric: tabular-nums;
  margin: 2px 0;
}
.gpu-stat-note {
  display: block;
  font-size: 11.5px;
  color: #64748b;
}
.gpu-foot {
  margin-top: 4px;
}
.gpu-foot .muted.small {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 10px 14px;
  margin: 8px 0 0;
}
@media (max-width: 1100px) {
  .gpu-viz { grid-template-columns: 1fr; }
  .gpu-strip { grid-template-columns: repeat(2, 1fr); }
  .gpu-bus { min-height: 60px; }
}
body.on-thanks {
  background: #fff;
}
body.on-thanks header,
body.on-thanks footer,
body.on-thanks .demo-banner { display: none; }
body.on-thanks main {
  width: 100%;
  max-width: none;
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
body.on-thanks .deck-nav {
  width: min(1640px, calc(100% - 28px));
  margin: 16px auto 0;
}
.slide-thanks {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8vh 32px 16vh;
  background: #fff;
}
.thanks-title {
  font-size: clamp(32px, 4.8vw, 52px);
  letter-spacing: -0.045em;
  max-width: none;
  margin-bottom: 22px;
}
.thanks-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  width: min(720px, 100%);
  margin: 0 auto;
}
.thanks-grid article {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 16px 18px;
}
.thanks-k {
  margin: 0 0 6px;
  font: 11px var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #0f766e;
}
.thanks-grid p:last-child {
  margin: 0;
  font: 500 16px/1.4 var(--sans);
  color: #334155;
}
.thanks-grid strong { color: #0b1b24; }
.thanks-team {
  margin: 20px 0 0;
  font: 600 18px/1.3 var(--sans);
  letter-spacing: -0.02em;
  color: #0f766e;
  text-align: center;
}

/* Appendix slide */
body.on-appendix {
  background: #fff;
}
body.on-appendix header,
body.on-appendix footer,
body.on-appendix .demo-banner { display: none; }
body.on-appendix main {
  width: 100%;
  max-width: none;
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
body.on-appendix .deck-nav {
  width: min(1640px, calc(100% - 28px));
  margin: 16px auto 0;
}
.slide-appendix {
  flex: 1;
  padding: 20px 32px 40px;
  background: #fff;
  overflow-y: auto;
}
.appendix-title {
  margin: 0 0 20px;
  font-size: clamp(20px, 3vw, 28px);
}
.appendix-grid {
  display: grid;
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
}
.appendix-section {
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px 20px;
}
.appendix-section h3 {
  margin: 0 0 12px;
  font: 600 14px/1.3 var(--sans);
  color: var(--ink);
}
.appendix-section .spec-gate {
  margin: 0;
  font-size: 12px;
}
.appendix-section .spec-gate th,
.appendix-section .spec-gate td {
  padding: 8px 10px;
}
.appendix-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.appendix-col {
  padding: 12px 14px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid var(--line);
}
.appendix-col.keep {
  border-color: #86efac;
  background: #f0fdf4;
}
.appendix-col.drop {
  border-color: #fca5a5;
  background: #fef2f2;
}
.appendix-col h4 {
  margin: 0 0 8px;
  font: 600 12px/1.3 var(--sans);
  color: var(--ink);
}
.appendix-col ul {
  margin: 0;
  padding: 0 0 0 16px;
  font: 12px/1.5 var(--sans);
  color: #334155;
}
.appendix-col li {
  margin: 4px 0;
}
@media (max-width: 800px) {
  .appendix-two-col { grid-template-columns: 1fr; }
}

body.on-replica,
body.on-2d {
  background: #fff;
}
body.on-replica header,
body.on-replica footer,
body.on-replica .demo-banner,
body.on-2d header,
body.on-2d footer,
body.on-2d .demo-banner { display: none; }
body.on-replica main,
body.on-2d main {
  width: 100%;
  max-width: none;
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding-bottom: 12px;
}
body.on-replica .deck-nav,
body.on-2d .deck-nav {
  width: min(1640px, calc(100% - 28px));
  margin: 16px auto 0;
}
.slide-replica {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  width: min(1680px, calc(100% - 20px));
  margin: 0 auto;
  padding: 8px 16px 12px;
  background: #fff;
}
.replica-title {
  margin: 0 auto 6px;
}
.replica-lead {
  margin: 0 auto 14px;
  max-width: 52em;
  font: 500 15px/1.5 var(--sans);
  text-align: center;
  color: #334155;
}
.replica-lead strong {
  color: #0f766e;
  font-weight: 600;
}
.replica-run {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  margin: 0 auto 8px;
  width: 100%;
  max-width: 1100px;
}
.replica-run input { flex: 1; min-width: 0; padding: 8px 10px; }
.replica-run button { padding: 8px 12px; }
.replica-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  flex: 1;
  min-height: 0;
  align-items: stretch;
}
.replica-k {
  margin: 0 0 6px;
  font: 15px var(--sans);
  color: #6b7280;
  font-weight: 500;
}
.replica-col {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 8px 10px 10px;
  overflow: hidden;
}
.replica-col.network-pane,
.replica-col.sch-wrap {
  position: static;
  max-height: none;
  height: auto;
  box-shadow: none;
}
.replica-col .network,
.replica-col .sch {
  flex: 1;
  min-height: 0;
  overflow: auto;
}
/* Slide 2 diagram: cleaner, less cluttered */
.slide-replica .sch {
  padding: 10px 12px;
  font-size: 11px;
  height: auto;
  background: #fafbfc;
  border-radius: 12px;
  border-color: #d1d9e0;
}
.slide-replica .compute[hidden] { display: none !important; }
.slide-replica .chip-inspector { display: none; }
.slide-replica .chip-inspector.is-open { display: block; }
.slide-replica .sch-row.mem { grid-template-columns: 1.35fr 36px 1fr; }
.slide-replica .rom-eq { margin-top: 5px; }
.slide-replica .rom-eq li { font-size: 8px; grid-template-columns: 64px minmax(0, 1fr); }
.slide-replica .dag-title,
.slide-replica .dag-legend,
.slide-replica .rail-caption { display: none; }
.slide-replica .network { gap: 3px; }
.slide-replica .flow-edge { padding: 0; font-size: 8px; gap: 0; }
.slide-replica .flow-edge span { display: none; }
.slide-replica .flow-edge i { font-size: 11px; color: #0f766e; }
.slide-replica .layer-rail { grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 2px; padding: 2px 0 4px; }
.slide-replica .layer-dot { padding: 2px 0; font-size: 8px; border-radius: 4px; }
.slide-replica .decoder-graph { padding: 4px 2px 6px; border-radius: 8px; overflow: visible; }
.slide-replica .dag { padding: 6px 16px 8px; overflow: visible; }
.slide-replica .dag-edges { overflow: visible; }
.slide-replica .dag-nodes { gap: 26px 6px; }
.slide-replica .net-node, .slide-replica .op { padding: 3px 5px; font-size: 9px; border-radius: 6px; }
.slide-replica .op b, .slide-replica .net-node b { font-size: 9px; display: inline; }
.slide-replica .net-node.wide { padding: 3px 6px; }
.slide-replica .op .soma {
  width: 4px;
  height: 4px;
  top: -2px;
  border-width: 1px;
  box-shadow: none;
}
.slide-replica .op.active, .slide-replica .net-node.active {
  background: #99f6e5;
  border-color: #0f766e;
}
.slide-replica .op.on-path, .slide-replica .net-node.on-path {
  background: #ccfbf1;
  border-color: #2dd4bf;
}
.slide-replica .edge-lab { font-size: 8px; fill: #0f766e; stroke-width: 3px; }
.slide-replica .blk {
  padding: 8px 10px;
  border-radius: 10px;
  border-width: 1px;
}
.slide-replica .blk strong { font-size: 12px; }
.slide-replica .blk small { font-size: 9px; margin-top: 3px; }
.slide-replica .blk-k { font-size: 8px; margin-bottom: 2px; }
.slide-replica .mem-array { gap: 3px; margin-top: 4px; }
.slide-replica .mem-array .bank { min-height: 24px; border-radius: 4px; }
.slide-replica .mac-grid { gap: 3px; margin-top: 4px; }
.slide-replica .mac-grid .pe { min-height: 20px; font-size: 8px; border-radius: 4px; }
.slide-replica .bus.h { height: 14px; margin: 4px 0; font-size: 8px; border-radius: 3px; }
.slide-replica .bus.v { border-radius: 3px; }
.slide-replica .layers { gap: 3px; margin-top: 6px; }
.slide-replica .layer { min-height: 16px; font-size: 8px; border-radius: 4px; }
.slide-2d .replica-lead { max-width: 62em; }
.slide-2d .replica-split { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); }
.move-card, .speed-card {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 10px;
  margin: 0 0 8px;
  background: #fff;
}
.move-card.now { border-color: #0f766e; background: #f0fdfa; }
.move-h {
  margin: 0 0 4px;
  font: 600 11px var(--sans);
  color: #0f766e;
}
.move-p {
  margin: 0 0 6px;
  font: 12px/1.4 var(--sans);
  color: #334155;
}
.move-cap {
  margin: 6px 0 0;
  font: 10px/1.35 var(--mono);
  color: var(--muted);
}
.lane-1d {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 3px;
}
.lane-1d .pe {
  border: 1px solid #1f2a33;
  background: #fff;
  min-height: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font: 8px var(--mono);
  line-height: 1.1;
}
.lane-1d .pe em { font-style: normal; color: #b54708; font-weight: 700; }
.lane-1d .pe.hot { background: #0f766e; color: #fff; border-color: #0f766e; }
.lane-1d .pe.hot em { color: #fde68a; }
.lane-1d .pe.done { background: #99f6e4; border-color: #0f766e; }
.mxu-grid.d2-mini { margin-top: 4px; gap: 2px; }
.mxu-grid.d2-mini .pe { min-height: 18px; font-size: 7px; }
.mxu-grid.d2-mini .pe em { font-size: 9px; }
.speed-card ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.speed-card li {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 8px;
  font: 12px/1.4 var(--sans);
  margin: 3px 0;
}
.speed-card li span { color: var(--muted); font: 10px var(--mono); padding-top: 2px; }
.speed-card li strong { font-weight: 600; color: var(--ink); }
.slide-2d .sch-row.mxu-mem { grid-template-columns: minmax(6em, 0.32fr) 28px minmax(0, 1fr); }
.slide-2d [data-d2].active {
  border-color: #0f766e;
  box-shadow: inset 0 0 0 2px #0f766e55;
}
.slide-2d .bus.live {
  background: #ccfbf1;
  color: #0f766e;
  font-weight: 700;
}
.replica-more { margin: 8px 0 0; font: 12px var(--mono); color: var(--muted); }
.replica-more > summary { cursor: pointer; }
@media (max-width: 720px) {
  .replica-split { grid-template-columns: 1fr; }
  .replica-col { min-height: 42vh; }
}
.sched-toggle { display: flex; gap: 8px; margin: 8px 0; }
.sched-toggle .ghost[aria-pressed="true"] { background: var(--ink); color: #fff; }
.sc-total { font: 12px var(--mono); color: var(--ink); margin: 6px 0 10px; }
.sc-total strong { color: #0f766e; }
.stage-chart .ss-row { grid-template-columns: 120px minmax(0, 1fr) minmax(280px, auto); }
/* Walk strip: per-layer measured spans */
.walk-head { display: grid; grid-template-columns: 44px minmax(0, 1fr) 110px minmax(220px, auto) 90px; gap: 10px; font: 9px var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 4px; }
.walk-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) 110px minmax(220px, auto) 90px; gap: 10px; align-items: center; margin: 2px 0; font: 10px var(--mono); }
.wk-layer { color: var(--ink); font-weight: 700; }
.wk-bar { display: block; height: 9px; background: #eef2f5; border-radius: 999px; overflow: hidden; }
.wk-bar span { display: block; height: 100%; background: var(--active); border-radius: 999px; }
.wk-cyc { color: var(--muted); white-space: nowrap; }
.wk-top { color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wk-top b { color: #b54708; }
.wk-cum { color: var(--muted); white-space: nowrap; text-align: right; }
@media (max-width: 900px) { .walk-head, .walk-row { grid-template-columns: 40px 1fr 90px; } .wk-top, .wk-cum { display: none; } }
.profile-keyline { margin: 0 0 12px; }
.formula-wrap { overflow-x: auto; margin: 0 0 16px; }
.formula-table {
  width: 100%;
  border-collapse: collapse;
  font: 12px/1.4 var(--mono);
}
.formula-table th {
  text-align: left;
  font: 9px var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 6px 8px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.formula-table td {
  padding: 7px 8px;
  border-bottom: 1px solid #eef2f5;
  vertical-align: top;
}
.formula-table td.eq { font-style: normal; color: var(--ink); white-space: nowrap; }
.formula-table td.calc { color: var(--muted); font: 12px/1.4 var(--sans); }
.formula-table td.num { white-space: nowrap; text-align: right; }
.formula-table tr.hot td { background: #fff7ed; }
.formula-table tr.hot td:first-child { font-weight: 700; color: #b54708; }
.slide-eqs {
  background: #fff;
  padding: 1.2vh 16px 3vh;
}
.nn-graph-wrap {
  max-width: 1600px;
  margin: 0 auto;
}
.nn-title {
  margin: 0 auto 8px;
}
.nn-title { max-width: 18ch; }
.nn-geom {
  margin: 0 auto 14px;
  max-width: 52em;
  font: 500 15px/1.5 var(--sans);
  color: #334155;
  text-align: center;
}
.nn-geom strong {
  color: #0f766e;
  font-weight: 600;
}
.nn-where {
  display: grid;
  grid-template-columns: minmax(15em, 0.36fr) minmax(0, 1fr);
  gap: 16px 24px;
  align-items: center;
  margin: 0 0 12px;
  padding: 10px 12px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}
.nn-eq-k {
  margin: 0 0 6px;
  font: 11px var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.nn-eq-big {
  margin: 0 0 8px;
  font: 700 36px/1.15 var(--sans);
  letter-spacing: -0.04em;
  color: #111;
}
.nn-eq-big .katex { font-size: 1.05em; }
.nn-eq-sub {
  margin: 0;
  max-width: 36em;
  font: 14px/1.45 var(--sans);
  color: #334155;
}
.nn-eq-sub[hidden], .nn-eq-big[hidden] { display: none; }
.nn-map {
  min-width: 0;
}
.nn-map .layer-rail {
  position: static;
  background: none;
  grid-template-columns: repeat(28, minmax(0, 1fr));
  gap: 1px;
  padding: 0 0 3px;
}
.nn-map .layer-dot {
  padding: 0;
  font-size: 6px;
  cursor: default;
}
.nn-map .decoder-graph { padding: 2px 2px 4px; }
.nn-map .dag { padding: 1px 12px 3px; }
.nn-map .dag-nodes { gap: 16px 4px; }
.nn-map .edge { stroke-width: 1.5; }
.nn-map .edge-lab { font-size: 7px; stroke-width: 2px; }
.nn-map .net-node, .nn-map .op {
  padding: 1px 4px;
  border-radius: 4px;
  font-size: 7px;
  cursor: default;
}
.nn-map .op:hover:not(:disabled), .nn-map .net-node:hover:not(:disabled) {
  box-shadow: none;
  filter: none;
}
.nn-map .op b, .nn-map .net-node b { font-size: 7px; display: inline; }
.nn-map .op .soma { width: 5px; height: 5px; top: -3px; }
.nn-map .flow-edge { padding: 0; font-size: 7px; gap: 0; }
.nn-map .flow-edge i { font-size: 8px; }
.nn-map .dag-title,
.nn-map .dag-legend { display: none; }
.nn-map .tip { display: none !important; }
@media (max-width: 900px) {
  .nn-where { grid-template-columns: 1fr; }
}
.nn-anim-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin: 0 0 14px;
}
.nn-anim-k {
  font: 11px var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.nn-anim-bar .ghost { padding: 6px 10px; font-size: 12px; }
.nn-anim-bar .ghost[aria-pressed="true"] {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.nn-anim-hint { font: 12px var(--sans); color: var(--muted); flex: 1 1 16em; }
.nn-stage {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 8px;
}
.nn-now {
  margin: 0;
  height: 2.7em;
  min-height: 2.7em;
  overflow: hidden;
  font: 13px/1.35 var(--sans);
  font-weight: 600;
  color: #111;
}
.nn-pane.unfused .nn-now { color: #9a3412; }
.nn-pane.fused .nn-now { color: #0f766e; }
.nn-pane.gpu .nn-now { color: #1e3a8a; }
.nn-pane.tpu .nn-now { color: #b45309; }
.nn-pane.lpu .nn-now { color: #6d28d9; }
.nn-pane.cim .nn-now { color: #9f1239; }
.nn-pane.pim .nn-now { color: #0e7490; }
.nn-leds {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin: 0;
  font: 10px var(--mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.nn-leds [data-led] {
  padding: 2px 8px;
  border-radius: 99px;
  border: 1px solid var(--line);
  background: #fff;
}
.nn-leds [data-led].on {
  color: #fff;
  border-color: transparent;
}
.nn-pane.unfused .nn-leds [data-led].on { background: #c2410c; }
.nn-pane.fused .nn-leds [data-led].on { background: #0f766e; }
.nn-pane.gpu .nn-leds [data-led].on { background: #1d4ed8; }
.nn-pane.tpu .nn-leds [data-led].on { background: #b45309; }
.nn-pane.lpu .nn-leds [data-led].on { background: #6d28d9; }
.nn-pane.cim .nn-leds [data-led].on { background: #be123c; }
.nn-pane.pim .nn-leds [data-led].on { background: #0e7490; }
.nn-acc-l { margin-left: auto; text-transform: none; letter-spacing: 0; }
.nn-schem {
  position: relative;
  width: 100%;
  aspect-ratio: 11 / 5;
  overflow: hidden;
  line-height: 0;
  contain: layout paint;
}
.nn-badge {
  display: inline-block;
  margin: 0 0 6px;
  padding: 4px 10px;
  border-radius: 5px;
  font: 700 13px/1.2 var(--sans);
  color: #fff;
}
.nn-pane.gpu .nn-badge { background: #1d4ed8; }
.nn-pane.tpu .nn-badge { background: #b45309; }
.nn-pane.lpu .nn-badge { background: #6d28d9; }
.nn-pane.cim .nn-badge { background: #be123c; }
.nn-pane.pim .nn-badge { background: #0e7490; }
.nn-pane.unfused .nn-badge { background: #c2410c; }
.nn-pane.fused .nn-badge { background: #0f766e; }
.nn-svg {
  width: 100%;
  height: 100%;
  display: block;
}
.nn-wire {
  fill: none;
  stroke: #d5dde3;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  marker-end: url(#nnArrU);
  transition: stroke 280ms, stroke-width 280ms;
}
.nn-pane.fused .nn-wire { marker-end: url(#nnArrF); }
.nn-pane.gpu .nn-wire { marker-end: url(#nnArrG); }
.nn-pane.tpu .nn-wire { marker-end: url(#nnArrT); }
.nn-pane.lpu .nn-wire { marker-end: url(#nnArrL); }
.nn-pane.cim .nn-wire { marker-end: url(#nnArrC); }
.nn-pane.pim .nn-wire { marker-end: url(#nnArrP); }
.nn-mech-modal .nn-pane.fused .nn-wire { marker-end: url(#nnArrFm); }
.nn-mech-modal .nn-pane.gpu .nn-wire { marker-end: url(#nnArrGm); }
.nn-mech-modal .nn-pane.tpu .nn-wire { marker-end: url(#nnArrTm); }
.nn-mech-modal .nn-pane.lpu .nn-wire { marker-end: url(#nnArrLm); }
.nn-mech-modal .nn-pane.cim .nn-wire { marker-end: url(#nnArrCm); }
.nn-mech-modal .nn-pane.pim .nn-wire { marker-end: url(#nnArrPm); }
.nn-mech-modal .nn-pane.unfused .nn-wire { marker-end: url(#nnArrUm); }
.nn-wire.dim { stroke: #e8eef2; marker-end: none; }
.nn-wire.live {
  stroke-width: 3.5;
  stroke-dasharray: 7 5;
  animation: nn-flow 2.4s linear infinite;
}
.nn-pane.unfused .nn-wire.live { stroke: #c2410c; }
.nn-pane.fused .nn-wire.live { stroke: #0f766e; }
.nn-pane.gpu .nn-wire.live { stroke: #1d4ed8; }
.nn-pane.tpu .nn-wire.live { stroke: #b45309; }
.nn-pane.lpu .nn-wire.live { stroke: #6d28d9; }
.nn-pane.cim .nn-wire.live { stroke: #be123c; }
.nn-pane.pim .nn-wire.live { stroke: #0e7490; }
.nn-pane.gpu .nn-wire[data-wire="rom-mac"].live,
.nn-pane.tpu .nn-wire[data-wire="rom-mac"].live { stroke-width: 4.5; }
@keyframes nn-flow {
  to { stroke-dashoffset: -24; }
}
.nn-wire-lab {
  font: 9px var(--mono);
  fill: var(--muted);
  letter-spacing: 0.04em;
}
.nn-node-bg {
  fill: #f8fafc;
  stroke: var(--line);
  stroke-width: 1.25;
  transition: fill 280ms, stroke 280ms;
}
.nn-node.on .nn-node-bg {
  fill: #fff7ed;
  stroke: #fdba74;
}
.nn-pane.fused .nn-node.on .nn-node-bg {
  fill: #f0fdfa;
  stroke: #2dd4bf;
}
.nn-pane.gpu .nn-node.on .nn-node-bg {
  fill: #eff6ff;
  stroke: #93c5fd;
}
.nn-pane.tpu .nn-node.on .nn-node-bg {
  fill: #fff7ed;
  stroke: #fdba74;
}
.nn-pane.lpu .nn-node.on .nn-node-bg {
  fill: #f5f3ff;
  stroke: #c4b5fd;
}
.nn-pane.cim .nn-node.on .nn-node-bg {
  fill: #fff1f2;
  stroke: #fda4af;
}
.nn-pane.pim .nn-node.on .nn-node-bg {
  fill: #ecfeff;
  stroke: #67e8f9;
}
.nn-node.dim { opacity: 0.38; }
.nn-node-k {
  font: 9px var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  fill: var(--muted);
}
.nn-cell {
  fill: #fff;
  stroke: var(--line);
  stroke-width: 1;
  transition: fill 120ms, stroke 120ms;
}
.nn-cell.fill { fill: #fff7ed; stroke: #fdba74; }
.nn-pane.fused .nn-cell.fill { fill: #ccfbf1; stroke: #2dd4bf; }
.nn-pane.gpu .nn-cell.fill { fill: #dbeafe; stroke: #60a5fa; }
.nn-pane.tpu .nn-cell.fill { fill: #ffedd5; stroke: #fb923c; }
.nn-pane.lpu .nn-cell.fill { fill: #ede9fe; stroke: #a78bfa; }
.nn-pane.cim .nn-cell.fill { fill: #ffe4e6; stroke: #fb7185; }
.nn-pane.pim .nn-cell.fill { fill: #cffafe; stroke: #22d3ee; }
.nn-cell.hot { fill: #c2410c; stroke: #c2410c; }
.nn-pane.fused .nn-cell.hot { fill: #0f766e; stroke: #0f766e; }
.nn-pane.gpu .nn-cell.hot { fill: #1d4ed8; stroke: #1d4ed8; }
.nn-pane.tpu .nn-cell.hot { fill: #b45309; stroke: #b45309; }
.nn-pane.lpu .nn-cell.hot { fill: #6d28d9; stroke: #6d28d9; }
.nn-pane.cim .nn-cell.hot { fill: #be123c; stroke: #be123c; }
.nn-pane.pim .nn-cell.hot { fill: #0e7490; stroke: #0e7490; }
.nn-cell.done { fill: #111; stroke: #111; }
.nn-cell-t {
  font: 9px var(--mono);
  fill: var(--muted);
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
}
.nn-cell.hot + .nn-cell-t,
.nn-cell.done + .nn-cell-t { fill: #fff; }
.nn-lane {
  fill: #fff;
  stroke: var(--line);
  stroke-width: 1;
}
.nn-lane.fill { fill: #fdba74; stroke: #c2410c; }
.nn-pane.fused .nn-lane.fill { fill: #5eead4; stroke: #0f766e; }
.nn-pane.gpu .nn-lane.fill { fill: #93c5fd; stroke: #1d4ed8; }
.nn-pane.tpu .nn-lane.fill { fill: #fdba74; stroke: #b45309; }
.nn-pane.tpu .nn-lane.wave { fill: #b45309; stroke: #9a3412; }
.nn-pane.lpu .nn-lane.fill { fill: #c4b5fd; stroke: #6d28d9; }
.nn-pane.cim .nn-lane.fill { fill: #fda4af; stroke: #be123c; }
.nn-pane.pim .nn-lane.fill { fill: #67e8f9; stroke: #0e7490; }
.nn-accbar-bg { fill: #e8eef2; }
.nn-accbar { fill: #c2410c; transition: width 420ms linear; }
.nn-pane.fused .nn-accbar { fill: #0f766e; }
.nn-pane.gpu .nn-accbar { fill: #1d4ed8; }
.nn-pane.tpu .nn-accbar { fill: #b45309; }
.nn-pane.lpu .nn-accbar { fill: #6d28d9; }
.nn-pane.cim .nn-accbar { fill: #be123c; }
.nn-pane.pim .nn-accbar { fill: #0e7490; }
.nn-pkt {
  position: absolute;
  left: 0;
  top: 0;
  min-width: 34px;
  height: 22px;
  padding: 0 6px;
  display: grid;
  place-items: center;
  border-radius: 5px;
  font: 10px var(--mono);
  font-weight: 700;
  color: #fff;
  background: #c2410c;
  box-shadow: 0 4px 10px #c2410c55;
  transform: translate(-50%, -50%);
  transition: left 0.7s ease-in-out, top 0.7s ease-in-out;
  pointer-events: none;
  z-index: 2;
}
.nn-pkt.w { background: #0f766e; box-shadow: 0 4px 10px #0f766e55; }
.nn-pane.unfused .nn-pkt.w { background: #9a3412; }
.nn-pane.gpu .nn-pkt { background: #1d4ed8; box-shadow: 0 4px 10px #1d4ed855; }
.nn-pane.gpu .nn-pkt.w { background: #1e3a8a; box-shadow: 0 4px 12px #1e3a8a66; }
.nn-pane.tpu .nn-pkt { background: #b45309; box-shadow: 0 4px 10px #b4530955; }
.nn-pane.tpu .nn-pkt.w { background: #9a3412; }
.nn-pane.lpu .nn-pkt { background: #6d28d9; box-shadow: 0 4px 10px #6d28d955; }
.nn-pane.lpu .nn-pkt.w { background: #5b21b6; }
.nn-pane.cim .nn-pkt { background: #be123c; box-shadow: 0 4px 10px #be123c55; }
.nn-pane.cim .nn-pkt.w { background: #9f1239; }
.nn-pane.pim .nn-pkt { background: #0e7490; box-shadow: 0 4px 10px #0e749055; }
.nn-pane.pim .nn-pkt.w { background: #155e75; }
.nn-pkt.y { background: #111; box-shadow: 0 4px 10px #1114; }
.nn-pkt.jump { transition: none; }
.nn-pkt[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .nn-pkt { transition: none; }
  .nn-wire.live { animation: none; stroke-dasharray: none; }
}
.nn-tick {
  margin: 0;
  height: 1.25em;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font: 11px var(--mono);
  color: var(--muted);
}
.nn-mech-cap code { font: 11px var(--mono); color: #0f766e; }
.nn-more {
  margin: 10px 0 0;
  font: 12px var(--sans);
}
.nn-more summary { cursor: pointer; color: var(--muted); }
.nn-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}
.nn-row-k {
  margin: 12px 0 8px;
  font: 11px var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.nn-compare {
  display: grid;
  grid-template-columns: minmax(18em, 0.4fr) minmax(0, 1fr);
  gap: 10px 14px;
  align-items: start;
  margin: 0 0 6px;
}
.nn-compare-l,
.nn-compare-r {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.nn-compare-l .nn-row-k,
.nn-compare-r .nn-row-k { margin-top: 0; }
/* Slide 3 comparison panels: cleaner, focus on key metrics */
.nn-split-rivals {
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
.nn-split-rivals .nn-pane {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 4px rgba(0,0,0,0.03);
}
.nn-split-rivals .nn-pane-h { margin: 0; }
.nn-split-rivals .nn-kpis { margin: 0; }
.nn-split-rivals .nn-stage { display: none; } /* Hide animation to reduce clutter */
.nn-split-rivals .nn-mech-cap { display: none; } /* Hide detailed caption */
.nn-split-rivals .nn-now { display: none; }
.nn-split-rivals .nn-svg { display: none; }
.nn-split-rivals .nn-leds { display: none; }
.nn-split-rivals .nn-pane-h h2 { font-size: 14px; margin: 0; }
.nn-split-rivals .nn-kind { font-size: 10px; margin-bottom: 2px; }
.nn-split-rivals .nn-sub { font-size: 11px; color: var(--muted); margin-top: 2px; }
.nn-split-rivals .nn-open { display: none; }
.nn-split-rivals .nn-wlive { font-size: 11px; margin-top: 4px; }
.nn-split-rivals .nn-en { font-size: 12px; font-weight: 600; margin-top: 5px; }
.nn-split-rivals .nn-en [data-kpi="e"] { color: #0f766e; }
.nn-split-rivals .nn-tr { font-size: 11px; margin-top: 2px; }
.nn-split-rivals .nn-tr-note { font-size: 10px; color: var(--muted); }
.nn-split-rivals .nn-lat { font-size: 11px; color: var(--muted); margin-top: 3px; }
/* ASIC comparison: highlight the winner */
.nn-split-asic {
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  flex: 1;
  max-width: none;
  margin: 0;
}
.nn-split-asic .nn-pane {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 10px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #e2e8f0;
}
.nn-split-asic .nn-pane.fused {
  border-color: #0f766e;
  background: linear-gradient(135deg, #f0fdfa 0%, #fff 100%);
  box-shadow: 0 4px 12px rgba(15,118,110,0.12);
}
.nn-split-asic .nn-pane-h { margin: 0; }
.nn-split-asic .nn-kpis { margin: 0; }
.nn-split-asic .nn-stage { display: none; }
.nn-split-asic .nn-mech-cap { display: none; }
.nn-split-asic .nn-more { margin: 8px 0 0; }
.nn-split-asic .nn-note { margin: 5px 0 0; font-size: 10px; color: var(--muted); }
.nn-split-asic .nn-svg { display: none; }
.nn-split-asic .nn-pane-h h2 { font-size: 14px; }
.nn-split-asic .nn-open { display: none; }
.nn-split-asic .nn-now, .nn-split-asic .nn-leds { display: none; }
.nn-compare-r .nn-chart {
  display: flex;
  flex-direction: column;
  margin: 0;
}
.nn-compare-r #nnChartE {
  height: 360px;
  flex: none;
}
.nn-compare-r .nn-chart-svg {
  height: 360px;
  display: block;
}
.nn-compare-r .nn-why {
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 10px;
}
.nn-pane[data-mech] {
  cursor: pointer;
  transition: box-shadow 160ms, border-color 160ms;
}
.nn-pane[data-mech]:hover {
  box-shadow: 0 8px 24px #15202b18;
  border-color: #94a3b8;
}
.nn-pane[data-mech]:focus-visible {
  outline: 2px solid #0f766e;
  outline-offset: 2px;
}
.nn-open {
  margin: 4px 0 0;
  font: 10px var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #0f766e;
}
.nn-mech-modal {
  z-index: 50;
  padding: 16px;
  align-items: center;
}
.nn-mech-card {
  width: min(1080px, 100%);
  max-height: calc(100vh - 32px);
}
.nn-mech-card .nn-kind { margin-bottom: 6px; }
.nn-mech-card #nnMechTitle {
  margin: 0;
  font: 700 28px/1.15 var(--sans);
  letter-spacing: -0.04em;
  color: #111;
}
.nn-mech-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px 16px;
  margin: 12px 0 14px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f8fafc;
}
.nn-mech-kpis .nn-wlive,
.nn-mech-kpis .nn-en,
.nn-mech-kpis .nn-tr,
.nn-mech-kpis .nn-tr-note,
.nn-mech-kpis .nn-lat { margin: 0; }
.nn-mech-kpis .nn-tr { font-size: 22px; }
.nn-mech-modal .nn-pane {
  border: 1px solid var(--line);
  padding: 12px 14px 14px;
  cursor: default;
}
.nn-mech-modal .nn-schem {
  aspect-ratio: 11 / 5;
  min-height: 280px;
}
.nn-mech-modal .nn-now {
  height: auto;
  min-height: 1.4em;
  font-size: 16px;
}
.nn-mech-modal .nn-leds { font-size: 12px; }
.nn-mech-modal .nn-tick { height: auto; font-size: 12px; white-space: normal; }
.nn-mech-body {
  margin: 8px 0 0;
  max-width: 62em;
  font: 15px/1.5 var(--sans);
  color: #334155;
}
.nn-mech-body strong { color: #0f766e; }
.nn-mech-ctrls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 0;
}
.nn-mech-ctrls .ghost[aria-pressed="true"] {
  background: var(--ink);
  color: #fff;
}
.nn-pane {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 14px 16px;
  background: #fff;
  min-width: 0;
}
.nn-pane.gpu { border-top: 4px solid #1d4ed8; }
.nn-pane.tpu { border-top: 4px solid #b45309; }
.nn-pane.lpu { border-top: 4px solid #6d28d9; }
.nn-pane.cim { border-top: 4px solid #be123c; }
.nn-pane.pim { border-top: 4px solid #0e7490; }
.nn-pane.unfused { border-top: 4px solid #c2410c; }
.nn-pane.fused { border-top: 4px solid #0f766e; }
.nn-pane-h { margin: 0 0 8px; }
.nn-kind {
  display: inline-block;
  margin: 0 0 6px;
  font: 700 11px var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  padding: 3px 8px;
  border-radius: 4px;
}
.nn-pane.gpu .nn-kind, .nn-kind[data-side="gpu"] { background: #1d4ed8; }
.nn-pane.tpu .nn-kind, .nn-kind[data-side="tpu"] { background: #b45309; }
.nn-pane.lpu .nn-kind, .nn-kind[data-side="lpu"] { background: #6d28d9; }
.nn-pane.cim .nn-kind, .nn-kind[data-side="cim"] { background: #be123c; }
.nn-pane.pim .nn-kind, .nn-kind[data-side="pim"] { background: #0e7490; }
.nn-pane.unfused .nn-kind, .nn-kind[data-side="unfused"] { background: #c2410c; }
.nn-pane.fused .nn-kind, .nn-kind[data-side="fused"] { background: #0f766e; }
.nn-pane-h h2 {
  margin: 0;
  font: 700 22px/1.15 var(--sans);
  letter-spacing: -0.04em;
  color: #111;
}
.nn-sub {
  margin: 4px 0 0;
  font: 13px/1.3 var(--sans);
  color: var(--muted);
}
.nn-kpis { margin: 0 0 10px; }
.nn-wlive {
  margin: 0 0 6px;
  font: 12px/1.3 var(--sans);
  color: #111;
}
.nn-wlive strong { font-weight: 700; }
.nn-en {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  font: 600 13px/1.3 var(--sans);
  color: #111;
}
.nn-en-k {
  font: 9px var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}
.nn-tr {
  margin: 6px 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  font: 700 20px/1.15 var(--sans);
  letter-spacing: -0.03em;
  color: #111;
}
.nn-tr .nn-en-k { font-weight: 500; }
.nn-tr-note {
  margin: 2px 0 0;
  font: 11px/1.3 var(--mono);
  color: var(--muted);
}
.nn-lat {
  margin: 6px 0 0;
  font: 12px var(--mono);
  color: var(--muted);
}
.nn-chart {
  margin: 0 0 8px;
  padding: 14px 16px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}
.nn-chart-wide { width: 100%; }
.nn-chart figcaption {
  margin: 0 0 10px;
  font: 13px/1.4 var(--sans);
  letter-spacing: 0;
  text-transform: none;
  color: #15202b;
}
.nn-chart-svg {
  width: 100%;
  height: auto;
  display: block;
}
.nn-grid { stroke: #eef2f5; stroke-width: 1; }
.nn-axis { stroke: #cbd5e1; stroke-width: 1.25; }
.nn-split-line {
  stroke: #94a3b8;
  stroke-width: 1.25;
  stroke-dasharray: 5 4;
}
.nn-fuse-link {
  stroke: #0f766e;
  stroke-width: 2;
  stroke-dasharray: 4 3;
}
.nn-region {
  font: 700 10px var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  fill: #94a3b8;
}
.nn-dot { stroke: #fff; stroke-width: 2; }
.nn-xl {
  font: 12px var(--sans);
  font-weight: 600;
  fill: #15202b;
  text-anchor: middle;
}
.nn-pt {
  font: 11px var(--mono);
  fill: #5b6b76;
  text-anchor: middle;
}
.nn-tx {
  font: 11px var(--mono);
  font-weight: 700;
  fill: #111;
  text-anchor: middle;
}
.nn-yl {
  font: 10px var(--mono);
  fill: #64748b;
  text-anchor: end;
}
.nn-panel-k {
  font: 700 10px var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  fill: #5b6b76;
}
.nn-call {
  font: 11px var(--sans);
  fill: #0f766e;
}
.nn-call.slow { fill: #1d4ed8; }
details.nn-why {
  display: block;
  grid-template-columns: none;
}
.nn-compare-r details.nn-why {
  display: block;
  grid-template-columns: none;
}
.nn-why p {
  margin: 0;
  font: 13px/1.45 var(--sans);
  color: #334155;
}
.nn-why strong { color: #111; }
@media (max-width: 900px) {
  .nn-why { grid-template-columns: 1fr; }
}
.nn-kpi-store { margin: 8px 0; overflow-x: auto; }
.nn-kpi-table {
  width: 100%;
  min-width: 1080px;
  border-collapse: collapse;
  font: 12px/1.35 var(--sans);
}
.nn-kpi-table th, .nn-kpi-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  text-align: center;
  vertical-align: top;
}
.nn-kpi-table thead th {
  font: 700 11px var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: #f8fafc;
}
.nn-kpi-table tbody th {
  text-align: left;
  font: 11px var(--mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.nn-kpi-table thead th[data-col="gpu"],
.nn-kpi-table td:nth-child(2) { color: #1e3a8a; }
.nn-kpi-table thead th[data-col="tpu"],
.nn-kpi-table td:nth-child(3) { color: #9a3412; }
.nn-kpi-table thead th[data-col="lpu"],
.nn-kpi-table td:nth-child(4) { color: #5b21b6; }
.nn-kpi-table thead th[data-col="cim"],
.nn-kpi-table td:nth-child(5) { color: #9f1239; }
.nn-kpi-table thead th[data-col="pim"],
.nn-kpi-table td:nth-child(6) { color: #0e7490; }
.nn-kpi-table thead th[data-col="unfused"],
.nn-kpi-table td:nth-child(7) { color: #9a3412; }
.nn-kpi-table thead th[data-col="fused"],
.nn-kpi-table td:nth-child(8) { color: #0f766e; }
.nn-kpi-table td.win {
  background: #f0fdfa;
  font-weight: 700;
  color: #0f766e;
}
.nn-kpi-table td.lose { background: #fef2f2; color: #9f1239; }
.nn-kpi-note {
  margin: 8px 0 0;
  font: 12px/1.45 var(--sans);
  color: var(--muted);
}
.nn-split-3 .nn-pane-h h2 { font-size: 17px; }
.nn-calc { margin: 0 0 16px; }
.nn-calc-h {
  margin: 12px 0 2px;
  font: 11px var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.nn-calc-h code {
  font: 11px var(--mono);
  letter-spacing: 0;
  text-transform: none;
  color: #0f766e;
}
.nn-calc-ops {
  margin: 0 0 8px;
  font: 13px var(--sans);
  color: #111;
}
.nn-loop {
  margin: 0 0 4px;
  padding: 8px 12px;
  list-style: none;
  background: #f8fafc;
  border-radius: 8px;
  font: 14px/1.55 var(--sans);
  color: #15202b;
}
.nn-loop li { margin: 0; }
.nn-loop .waste {
  color: #9a3412;
  font-weight: 600;
  background: #fff7ed;
  margin: 4px -8px;
  padding: 2px 8px;
  border-radius: 4px;
}
.nn-loop .keep {
  color: #0f766e;
  font-weight: 600;
  background: #f0fdfa;
  margin: 4px -8px;
  padding: 2px 8px;
  border-radius: 4px;
}
.nn-mech {
  margin: 0 0 12px;
  padding: 10px 10px 8px;
  background: #f8fafc;
  border-radius: 8px;
}
.nn-pass {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  margin: 5px 0;
  font: 11px var(--mono);
  color: #15202b;
}
.nn-jk {
  width: 2.6em;
  color: var(--muted);
  flex: 0 0 auto;
}
.nn-cell {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 1px solid #fdba74;
  background: #fff7ed;
  border-radius: 4px;
  font-size: 10px;
  color: #9a3412;
}
.nn-cell.keep, .nn-act .nn-cell {
  border-color: #5eead4;
  background: #ccfbf1;
  color: #0f766e;
}
.nn-cell.waste { box-shadow: inset 0 0 0 1px #c2410c; }
.nn-arr { color: var(--muted); }
.nn-mac {
  padding: 3px 8px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 4px;
  font-weight: 600;
}
.nn-yj {
  padding: 3px 7px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
}
.nn-yj.dim { color: var(--muted); }
.nn-sum {
  padding: 3px 10px;
  border-radius: 4px;
  border: 1px solid #fdba74;
  background: #fff7ed;
  color: #9a3412;
  font-weight: 600;
}
.nn-sum.keep {
  border-color: #5eead4;
  background: #ccfbf1;
  color: #0f766e;
}
.nn-sram, .nn-w {
  padding: 3px 8px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 4px;
}
.nn-act {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  border: 1px dashed #0f766e;
  border-radius: 6px;
  background: #f0fdfa;
}
.nn-act-k {
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #0f766e;
  margin-right: 4px;
}
.nn-stream {
  margin: 6px 0 0 1.2em;
  padding-left: 10px;
  border-left: 2px solid #99f6e4;
}
.nn-fork { margin: 8px 0 0 2.2em; }
.nn-fork-stem {
  display: block;
  width: 2px;
  height: 10px;
  background: #0f766e;
  margin: 0 0 6px 12px;
}
.nn-fork-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.nn-mech-cap {
  margin: 8px 0 0;
  font: 12px/1.4 var(--sans);
  color: var(--muted);
}
.nn-ops {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.nn-op {
  display: grid;
  grid-template-columns: 7.5em minmax(0, 1fr) 3.6em;
  grid-template-rows: auto auto;
  column-gap: 10px;
  row-gap: 3px;
  align-items: center;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}
.nn-op .nn-name {
  grid-column: 1;
  font: 10px var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.nn-op .nn-lab {
  grid-column: 2;
  min-width: 0;
  line-height: 1.2;
}
.nn-op .nn-lab .katex { font-size: 1.05em; }
.nn-op .nn-counts {
  grid-column: 3;
  font: 11px var(--mono);
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: #111;
}
.nn-op .nn-bar {
  grid-column: 1 / -1;
  height: 6px;
  width: calc(var(--w, 0) * 100%);
  border-radius: 99px;
  background: #cbd5e1;
}
.nn-pane.unfused .nn-op .nn-bar,
.nn-op.waste .nn-bar { background: #c2410c; }
.nn-pane.fused .nn-op.keep .nn-bar { background: #0f766e; }
.nn-op.waste {
  background: #fff7ed;
  border-color: #fdba74;
}
.nn-pane.fused .nn-op.keep {
  background: #f0fdfa;
  border-color: #99f6e4;
}
.nn-note {
  margin: 12px 0 0;
  font: 12px/1.4 var(--sans);
  color: var(--muted);
}
.nn-how .katex, .nn-pane-h .katex, .nn-wlive .katex, .nn-loop .katex, .nn-calc-ops .katex { font-size: 1.02em; }
@media (max-width: 1400px) {
  .nn-split-rivals { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1100px) {
  .nn-split, .nn-split-asic { grid-template-columns: 1fr; }
  .nn-split-rivals { grid-template-columns: repeat(2, 1fr); }
  .nn-compare { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .nn-split-rivals { grid-template-columns: 1fr; }
}
body.on-eqs,
body.on-scale,
body.on-spec,
body.on-roadmap {
  background: #fff;
}
body.on-eqs header,
body.on-eqs footer,
body.on-eqs .demo-banner,
body.on-scale header,
body.on-scale footer,
body.on-scale .demo-banner,
body.on-spec header,
body.on-spec footer,
body.on-spec .demo-banner,
body.on-roadmap header,
body.on-roadmap footer,
body.on-roadmap .demo-banner { display: none; }
body.on-eqs main,
body.on-scale main,
body.on-spec main,
body.on-roadmap main {
  width: 100%;
  max-width: none;
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
body.on-eqs .deck-nav,
body.on-scale .deck-nav,
body.on-spec .deck-nav,
body.on-roadmap .deck-nav {
  width: min(1640px, calc(100% - 28px));
  margin: 16px auto 0;
}
.slide-scale {
  width: min(1640px, calc(100% - 28px));
  margin: 20px auto 40px;
  max-height: calc(100vh - 72px);
  overflow-y: auto;
}
.slide-spec {
  width: min(1200px, calc(100% - 48px));
  margin: 20px auto 40px;
}
.slide-roadmap {
  max-height: calc(100vh - 90px);
  overflow-y: auto;
}

/* Interactive visualization layout */
.spec-viz {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.spec-viz .spec-head {
  text-align: center;
}
.spec-viz .spec-title {
  margin: 0 0 8px;
  font-size: clamp(24px, 3.5vw, 34px);
}
.spec-subtitle {
  margin: 0;
  font: 500 15px/1.4 var(--sans);
  color: var(--muted);
}
.spec-subtitle strong {
  color: #0f766e;
}

/* Main layout: chart + stats */
.spec-main {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 24px;
  align-items: start;
}

/* Chart area */
.spec-chart-area {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 20px 24px 24px;
}
.spec-chart-container {
  width: 100%;
  aspect-ratio: 5 / 3;
}
.spec-chart-svg {
  width: 100%;
  height: 100%;
}
.spec-axis-label {
  font: 11px var(--mono);
  fill: #94a3b8;
}
.spec-axis-title {
  font: 600 10px var(--sans);
  fill: #64748b;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.spec-point-label {
  font: 700 12px var(--sans);
  fill: #0f766e;
}
.spec-baseline-label {
  font: 11px var(--sans);
  fill: #94a3b8;
}

/* Slider */
.spec-slider-wrap {
  margin-top: 16px;
  padding: 0 20px;
}
.spec-slider-label {
  display: block;
  margin-bottom: 8px;
  font: 600 11px/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
}
.spec-slider {
  width: 100%;
  height: 8px;
  -webkit-appearance: none;
  appearance: none;
  background: #e2e8f0;
  border-radius: 4px;
  outline: none;
  cursor: pointer;
}
.spec-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  background: #0f766e;
  border-radius: 50%;
  cursor: grab;
  box-shadow: 0 2px 8px rgba(15,118,110,0.3);
  transition: transform 0.15s ease;
}
.spec-slider::-webkit-slider-thumb:hover {
  transform: scale(1.1);
}
.spec-slider::-webkit-slider-thumb:active {
  cursor: grabbing;
  transform: scale(0.95);
}
.spec-slider-ticks {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font: 500 11px var(--mono);
  color: #64748b;
}

/* Stats cards */
.spec-stats {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.spec-stat-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.spec-stat-card.highlight {
  background: #f0fdfa;
  border-color: #5eead4;
}
.spec-stat-label {
  font: 600 10px/1 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.spec-stat-val {
  font: 700 22px/1.2 var(--sans);
  color: var(--ink);
  letter-spacing: -0.02em;
}
.spec-stat-card.highlight .spec-stat-val {
  color: #0f766e;
}
.spec-stat-note {
  font: 400 11px/1.3 var(--sans);
  color: #64748b;
}
.spec-stat-note.good {
  color: #0f766e;
}
.spec-stat-note.bad {
  color: #b45309;
}

/* Bottom insight */
.spec-bottom-insight {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 14px 20px;
  font: 14px/1.5 var(--sans);
  color: #334155;
  text-align: center;
}
.spec-insight-highlight {
  color: #0f766e;
  font-weight: 600;
}

@media (max-width: 900px) {
  .spec-main {
    grid-template-columns: 1fr;
  }
  .spec-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
}
@media (max-width: 600px) {
  .spec-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}
.scale-title {
  margin: 0 auto 8px;
}
.scale-lead {
  margin: 0 0 18px;
  max-width: 62em;
  font: 500 15px/1.55 var(--sans);
  color: #334155;
}
.scale-lead strong {
  color: #0f766e;
  font-weight: 600;
}
.scale-body {
  display: grid;
  grid-template-columns: minmax(14em, 0.38fr) minmax(0, 1.15fr);
  gap: 14px 18px;
  align-items: start;
}
.scale-node {
  margin: 0 0 10px;
  padding: 0 0 10px;
  border-bottom: 1px solid var(--line);
}
.scale-eq-big {
  margin: 0 0 6px;
  font: 700 26px/1.15 var(--sans);
  letter-spacing: -0.04em;
  color: #111;
  min-height: 1.2em;
}
.scale-eq-big .katex { font-size: 1.05em; }
.scale-eq-big[hidden], .scale-eq-note[hidden] { display: none; }
.scale-eq-note {
  margin: 0 0 8px;
  font: 13px/1.4 var(--sans);
  color: #334155;
}
.scale-eq-foot {
  margin: 0;
  font: 12px/1.4 var(--sans);
  color: var(--muted);
}
.scale-kpi {
  margin: 0 0 10px;
  padding: 0 0 10px;
  border-bottom: 1px solid var(--line);
}
.scale-kpi-n {
  margin: 0;
  font: 700 38px/1 var(--sans);
  letter-spacing: -0.05em;
  color: #0f766e;
}
.scale-kpi-sub {
  margin: 3px 0 8px;
  font: 11px/1.3 var(--sans);
  color: var(--muted);
}
.scale-kpi-vs {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
}
.scale-kpi-vs li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
  padding: 3px 0;
  font: 12px/1.35 var(--sans);
  color: #334155;
  border-bottom: 1px solid #eef2f5;
}
.scale-kpi-vs li:last-child {
  border-bottom: 0;
  color: #0f766e;
  font-weight: 600;
}
.scale-kpi-vs strong { font: 700 13px var(--mono); color: #111; }
.scale-kpi-vs li:last-child strong { color: #0f766e; }
.scale-batch {
  margin: 0 0 16px;
  padding: 0 0 14px;
  border-bottom: 1px solid var(--line);
}
.scale-batch ul {
  margin: 0;
  padding: 0 0 0 1.1em;
  font: 13px/1.4 var(--sans);
  color: #334155;
}
.scale-batch li { margin: 0 0 8px; }
.scale-batch li:last-child { margin: 0; }
.scale-tx-tot {
  margin: 0 0 10px;
  font: 15px/1.35 var(--sans);
  color: var(--ink);
}
.scale-tx-tot strong {
  font: 700 22px/1.1 var(--sans);
  letter-spacing: -0.03em;
  color: #0f766e;
}
.scale-tx-tot span {
  font: 12px/1.35 var(--sans);
  color: var(--muted);
}
.scale-why-k {
  margin: 0 0 10px;
  font: 11px var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.scale-vs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.scale-vs li {
  margin: 0;
  padding: 8px 10px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  border-left: 4px solid #94a3b8;
}
.scale-vs li.us { border-left-color: #0f766e; background: #f0fdfa; }
.vs-k {
  display: inline-block;
  margin: 0 0 4px;
  font: 700 10px var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.vs-k.gpu { color: #1d4ed8; }
.vs-k.tpu { color: #b45309; }
.vs-k.lpu { color: #6d28d9; }
.vs-k.cim { color: #be123c; }
.vs-k.pim { color: #0e7490; }
.vs-k.us { color: #0f766e; }
.scale-vs p {
  margin: 0;
  font: 12px/1.4 var(--sans);
  color: #334155;
}
.scale-vs li {
  cursor: pointer;
}
.scale-vs li:hover { background: #f8fafc; }
.scale-vs li[aria-pressed="true"] {
  outline: 2px solid currentColor;
  outline-offset: -1px;
}
.scale-vs li[data-scale-mach="gpu"][aria-pressed="true"] { outline-color: #1d4ed8; background: #eff6ff; }
.scale-vs li[data-scale-mach="tpu"][aria-pressed="true"] { outline-color: #b45309; background: #fff7ed; }
.scale-vs li[data-scale-mach="lpu"][aria-pressed="true"] { outline-color: #6d28d9; background: #f5f3ff; }
.scale-vs li[data-scale-mach="cim"][aria-pressed="true"] { outline-color: #be123c; background: #fff1f2; }
.scale-vs li[data-scale-mach="pim"][aria-pressed="true"] { outline-color: #0e7490; background: #ecfeff; }
.scale-vs li[data-scale-mach="us"][aria-pressed="true"] { outline-color: #0f766e; }
.scale-mach {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  margin: 0 0 8px;
}
.scale-mach-btn {
  margin: 0;
  padding: 6px 5px;
  border: 1.5px solid #1f2a33;
  border-radius: 0;
  background: #fff;
  font: 700 10px/1.2 var(--mono);
  letter-spacing: 0.02em;
  color: #334155;
}
.scale-mach-btn.gpu { color: #1d4ed8; }
.scale-mach-btn.tpu { color: #b45309; }
.scale-mach-btn.lpu { color: #6d28d9; }
.scale-mach-btn.cim { color: #be123c; }
.scale-mach-btn.pim { color: #0e7490; }
.scale-mach-btn.us { color: #0f766e; }
.scale-mach-btn[aria-selected="true"] {
  color: #fff;
}
.scale-mach-btn.gpu[aria-selected="true"] { background: #1d4ed8; border-color: #1d4ed8; }
.scale-mach-btn.tpu[aria-selected="true"] { background: #b45309; border-color: #b45309; }
.scale-mach-btn.lpu[aria-selected="true"] { background: #6d28d9; border-color: #6d28d9; }
.scale-mach-btn.cim[aria-selected="true"] { background: #be123c; border-color: #be123c; }
.scale-mach-btn.pim[aria-selected="true"] { background: #0e7490; border-color: #0e7490; }
.scale-mach-btn.us[aria-selected="true"] { background: #0f766e; border-color: #0f766e; }
.scale-mach-cap {
  margin: 0 0 10px;
  padding: 8px 10px;
  background: #fff;
  border: 1px solid var(--line);
  font: 13px/1.4 var(--sans);
  color: #334155;
}
.sch-row.scale-hbm-row {
  grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr);
  margin: 0 0 6px;
}
.blk.hbm {
  background: #dbe7f5;
  background-image: repeating-linear-gradient(90deg, transparent 0 10px, #9eb6d4 10px 11px);
}
.blk.fifo { background: #fff7ed; }
.blk.hbm.active { background-color: #bfdbfe; }
.blk.fifo.active { background: #fed7aa; }
#mxuChip[data-mach="us"] .blk.hbm,
#mxuChip[data-mach="lpu"] .blk.hbm,
#mxuChip:not([data-mach="tpu"]) .blk.fifo {
  opacity: 0.42;
  filter: grayscale(0.35);
  outline: 1.5px dashed #94a3b8;
  outline-offset: -2px;
}
#mxuChip[data-mach="gpu"] .blk.hbm,
#mxuChip[data-mach="tpu"] .blk.hbm {
  outline: 2px solid #1d4ed8;
  outline-offset: -2px;
  opacity: 1;
  filter: none;
}
#mxuChip[data-mach="tpu"] .blk.fifo {
  outline: 2px solid #b45309;
  outline-offset: -2px;
  opacity: 1;
  filter: none;
}
#mxuChip[data-mach="lpu"] .blk.sram {
  outline: 2px solid #6d28d9;
  outline-offset: -2px;
  background: #f3e8ff;
}
#mxuChip[data-mach="us"] .pe-box.rom,
#mxuChip[data-mach="us"] .mxu-grid .pe {
  outline: 0;
}
#mxuChip[data-mach="gpu"] .mxu-grid .pe {
  background: #eff6ff;
}
#mxuChip[data-mach="tpu"] .mxu-grid .pe {
  background: #fff7ed;
}
#mxuChip[data-mach="lpu"] .mxu-grid .pe {
  background:
    repeating-linear-gradient(0deg, #ede9fe 0 3px, #ddd6fe 3px 4px),
    repeating-linear-gradient(90deg, transparent 0 6px, #c4b5fd 6px 7px);
}
#mxuChip[data-mach="gpu"] .pe-box.rom {
  background: #dbeafe;
}
#mxuChip[data-mach="tpu"] .pe-box.rom {
  background: #ffedd5;
}
#mxuChip[data-mach="lpu"] .pe-box.rom {
  background:
    repeating-linear-gradient(0deg, #ede9fe 0 3px, #ddd6fe 3px 4px),
    repeating-linear-gradient(90deg, transparent 0 6px, #c4b5fd 6px 7px);
}
#mxuChip[data-mach="gpu"] .sram-tags [data-mxu-tag="ww"],
#mxuChip[data-mach="tpu"] .sram-tags [data-mxu-tag="ww"],
#mxuChip[data-mach="us"] .sram-tags [data-mxu-tag="ww"] {
  opacity: 0.4;
}
#mxuChip[data-mach="lpu"] .sram-tags [data-mxu-tag="ww"] {
  background: #ede9fe;
  border-color: #6d28d9;
  color: #6d28d9;
  opacity: 1;
  font-weight: 700;
}
@media (max-width: 900px) {
  .scale-mach { grid-template-columns: 1fr 1fr; }
}
.scale-sch { min-width: 0; }
.slide-scale .sch { padding: 6px; font-size: 10px; }
.slide-scale .blk { padding: 5px 6px; }
.slide-scale .blk strong { font-size: 11px; }
.slide-scale .blk small { font-size: 8px; }
.slide-scale .blk-k { font-size: 7px; margin-bottom: 1px; }
.sch-row.mxu-mem {
  grid-template-columns: minmax(7em, 0.36fr) 32px minmax(0, 1fr);
  margin-bottom: 6px;
}
.blk.pe-sch { background: #f4f0e8; margin-bottom: 6px; }
.pe-net { display: grid; gap: 5px; margin-top: 8px; }
.pe-row {
  display: grid;
  grid-template-columns: minmax(3.2em, 0.7fr) minmax(0, 1.4fr) minmax(3.2em, 0.8fr);
  gap: 4px;
  align-items: center;
}
.pe-box {
  border: 1.5px solid #1f2a33;
  background: #fff;
  padding: 6px 5px;
  text-align: center;
  font: 8px/1.2 var(--mono);
  min-height: 32px;
  display: grid;
  place-items: center;
}
.pe-box.rom {
  background:
    repeating-linear-gradient(0deg, #dbe7f5 0 3px, #c5d6ec 3px 4px),
    repeating-linear-gradient(90deg, transparent 0 6px, #9eb6d4 6px 7px);
}
.pe-box.active { background: #ccfbf1; border-color: #0f766e; }
.pe-box.rom.active { background: #0f766e; color: #fff; }
.pe-pin { font: 8px var(--mono); color: #334155; text-align: center; }
.pe-op { font: 700 14px var(--mono); color: #b54708; text-align: center; }
.mxu-tiles {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 2px;
  margin-top: 6px;
}
.mxu-tiles .tile {
  border: 1px solid #1f2a33;
  background: #fff;
  font: 7px/1.1 var(--mono);
  text-align: center;
  padding: 3px 1px;
  color: #334155;
}
.mxu-tiles .tile.active { background: #ccfbf1; border-color: #0f766e; color: #0f766e; font-weight: 700; }
.slide-scale .sram-tags { margin: 4px 0; }
.slide-scale .sram-tags span.active { background: #ccfbf1; border-color: #0f766e; }
.blk.mac.mxu { background: #e8f0fa; margin-bottom: 0; }
.mxu-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 3px;
  margin-top: 8px;
}
.mxu-grid .pe {
  border: 1px solid #1f2a33;
  min-height: 28px;
  background:
    repeating-linear-gradient(0deg, #dbe7f5 0 3px, #c5d6ec 3px 4px),
    repeating-linear-gradient(90deg, transparent 0 6px, #9eb6d4 6px 7px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font: 8px var(--mono);
  color: #1f2a33;
  line-height: 1.1;
}
.mxu-grid .pe em { font-style: normal; color: #b54708; font-size: 11px; font-weight: 700; }
.mxu-grid .pe.hot {
  background: #0f766e;
  color: #fff;
  border-color: #0f766e;
}
.mxu-grid .pe.hot em { color: #fde68a; }
.mxu-grid .pe.done {
  background: #99f6e4;
  border-color: #0f766e;
}
.blk.mac.mxu.active { background: #ccfbf1; }
.slide-scale .mem-array { gap: 2px; margin-top: 4px; }
.slide-scale .mem-array .bank { min-height: 36px; }
.slide-scale .mem-array .bank.active { outline: 2px solid #0f766e; }
.slide-scale .mac-reduce { font-size: 10px; }
.slide-scale .layers { margin-top: 4px; }
.slide-scale .layer { min-height: 16px; font-size: 8px; }
.scale-sch .bus.live {
  background: #ccfbf1;
  color: #0f766e;
  font-weight: 700;
}
@media (max-width: 1100px) {
  .scale-body, .sch-row.mxu-mem { grid-template-columns: 1fr; }
  .pe-row { grid-template-columns: 1fr; }
}
.spec-head {
  margin: 0 auto 14px;
  text-align: center;
}
.spec-title {
  margin: 0 auto 6px;
}
.spec-claim {
  margin: 0 auto 6px;
  max-width: 72em;
  font: 700 16px/1.35 var(--sans);
  letter-spacing: -0.02em;
  color: #0f172a;
  text-align: center;
}
.spec-claim em {
  font-style: normal;
  color: #0f766e;
}
.spec-claim span {
  display: block;
  margin: 6px auto 0;
  font: 600 13px/1.4 var(--sans);
  color: #334155;
}
.spec-claim span strong { color: #0f766e; }
.spec-lead {
  margin: 0 auto 8px;
  max-width: 64em;
  font: 500 15px/1.5 var(--sans);
  text-align: center;
  color: #334155;
}
.spec-lead strong {
  color: #0f766e;
  font-weight: 600;
}
.util-hero {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 16px;
}
.util-hero-card {
  margin: 0;
  padding: 14px 16px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  border-top: 5px solid #94a3b8;
}
.util-hero-card.gpu { border-top-color: #1d4ed8; }
.util-hero-card.tpu { border-top-color: #b45309; }
.util-hero-card.lpu { border-top-color: #6d28d9; }
.util-hero-card .util-k { margin: 0 0 2px; }
.util-hero-card.gpu .util-k { color: #1d4ed8; }
.util-hero-card.tpu .util-k { color: #b45309; }
.util-hero-card.lpu .util-k { color: #6d28d9; }
.util-hero-n {
  margin: 0;
  font: 700 52px/0.95 var(--sans);
  letter-spacing: -0.05em;
  color: #0f766e;
}
.util-hero-card.gpu .util-hero-n { color: #1d4ed8; }
.util-hero-card.tpu .util-hero-n { color: #b45309; }
.util-hero-card.lpu .util-hero-n { color: #6d28d9; }
.util-hero-u {
  margin: 4px 0 2px;
  font: 700 13px/1.2 var(--sans);
  color: #0f172a;
}
.util-hero-tx {
  margin: 0 0 8px;
  font: 700 14px/1.25 var(--sans);
  color: #0f766e;
}
.util-hero .util-abs { margin: 0; }
.util-hero-pick {
  grid-column: 1 / -1;
  margin: 0;
  font: 12px/1.35 var(--sans);
  color: var(--muted);
}
.util-same {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 16px;
}
.util-same article {
  margin: 0;
  padding: 12px 14px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  border-left: 4px solid #94a3b8;
}
.util-same article.us {
  border-left-color: #0f766e;
  background: #f0fdfa;
}
.util-same .util-k { margin: 0 0 6px; }
.util-same .util-k.gpu { color: #1d4ed8; }
.util-same .util-k.lpu { color: #6d28d9; }
.util-same .util-k.us { color: #0f766e; }
.util-hold {
  margin: 0 0 8px;
  font: 11px var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.util-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 16px;
}
.util-card {
  margin: 0;
  padding: 12px 14px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  border-top: 4px solid #94a3b8;
}
.util-card.hit {
  border-top-color: #0f766e;
  background: #f0fdfa;
}
.util-k {
  margin: 0 0 4px;
  font: 700 10px var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.util-card.hit .util-k { color: #0f766e; }
.util-w {
  margin: 0 0 10px;
  font: 14px/1.35 var(--sans);
  color: #111;
}
.util-w strong { font-weight: 700; }
.util-card ul {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
}
.util-card li {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin: 0;
  padding: 4px 0;
  border-bottom: 1px solid #eef2f5;
  font: 13px/1.35 var(--sans);
  color: #334155;
}
.util-card li:last-child { border-bottom: 0; }
.util-card li span { color: var(--muted); }
.util-card li strong { font: 700 13px var(--sans); color: #0f766e; }
.util-abs {
  margin: 0;
  font: 11px/1.35 var(--sans);
  color: var(--muted);
}
.util-note {
  margin: 0 0 16px;
  font: 12px/1.45 var(--sans);
  color: var(--muted);
}
.util-sec {
  margin: 18px 0 8px;
  font: 700 11px var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #0f766e;
}
.util-sec:first-of-type { margin-top: 4px; }
.util-x {
  margin: 0 0 16px;
  padding: 14px 16px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}
.util-x-ctrls {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px 16px;
  margin: 0 0 12px;
}
.util-x-ctrls .util-k { margin: 0 0 6px; }
.util-x-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.util-x-btns button {
  margin: 0;
  padding: 6px 10px;
  border: 1.5px solid #1f2a33;
  border-radius: 0;
  background: #fff;
  font: 700 11px/1.2 var(--mono);
  color: #334155;
}
.util-x-btns button[aria-pressed="true"] {
  background: #0f766e;
  border-color: #0f766e;
  color: #fff;
}
.util-x-btns button.prod[aria-pressed="true"] { background: #0f766e; }
.util-x-kpis {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 14px;
}
.util-x-kpi {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  background: #f8fafc;
}
.util-x-kpi b {
  display: block;
  font: 700 18px/1.15 var(--sans);
  letter-spacing: -0.03em;
  color: #0f766e;
}
.util-x-kpi span {
  display: block;
  margin-top: 4px;
  font: 11px/1.3 var(--sans);
  color: var(--muted);
}
.util-plot { margin: 0 0 14px; }
.util-plot-svg {
  display: block;
  width: 100%;
  height: auto;
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 12px;
}
.util-plot-grid { stroke: #e2e8f0; stroke-width: 1; }
.util-plot-axis { stroke: #94a3b8; stroke-width: 1.2; }
.util-plot-lbl {
  font: 10px var(--mono);
  fill: #64748b;
}
.util-plot-node {
  font: 700 10px var(--mono);
  fill: #0f766e;
}
.util-plot-axk {
  font: 11px var(--sans);
  fill: #475569;
}
.util-plot-leg {
  font: 11px var(--sans);
  fill: #334155;
}
.util-plot-legk {
  font: 700 11px var(--sans);
  fill: #0f766e;
}
.util-plot-rivl {
  font: 700 10px var(--sans);
  fill: #0f172a;
}
.util-plot-hit { cursor: pointer; }
.util-plot-hit:hover circle { stroke: #0f172a; stroke-width: 1.5; }
.util-plot-128 {
  stroke: #0f766e;
  stroke-width: 1.6;
  stroke-dasharray: 5 4;
}
.util-plot-128l {
  font: 700 10px var(--sans);
  fill: #0f766e;
}
.util-plot-par {
  stroke: #b91c1c;
  stroke-width: 1.4;
  stroke-dasharray: 4 3;
}
.util-plot-parl {
  font: 700 10px var(--sans);
  fill: #b91c1c;
}
.util-plot-dead {
  fill: #fecaca;
  opacity: 0.45;
}
.util-plot-deadl {
  font: 700 11px var(--sans);
  fill: #991b1b;
}
.util-board {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 18px;
}
.util-board-card {
  margin: 0;
  padding: 12px 14px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  border-top: 5px solid #94a3b8;
}
.util-board-card.us {
  border-top-color: #0f766e;
  background: #f0fdfa;
}
.util-board-card.gpu { border-top-color: #1d4ed8; }
.util-board-card.tpu { border-top-color: #b45309; }
.util-board-card.lpu { border-top-color: #6d28d9; }
.util-board-card.cim { border-top-color: #be123c; }
.util-board-card.pim { border-top-color: #0e7490; }
.util-board-card .util-k { margin: 0 0 4px; }
.util-board-card.us .util-k { color: #0f766e; }
.util-board-card.gpu .util-k { color: #1d4ed8; }
.util-board-card.tpu .util-k { color: #b45309; }
.util-board-card.lpu .util-k { color: #6d28d9; }
.util-board-card.cim .util-k { color: #be123c; }
.util-board-card.pim .util-k { color: #0e7490; }
.util-board-e {
  margin: 0;
  font: 700 28px/1 var(--sans);
  letter-spacing: -0.04em;
  color: #0f172a;
}
.util-board-card.us .util-board-e { color: #0f766e; }
.util-board-u {
  margin: 4px 0 10px;
  font: 12px/1.3 var(--sans);
  color: var(--muted);
}
.util-board-t {
  margin: 0 0 8px;
  font: 700 22px/1.1 var(--sans);
  letter-spacing: -0.03em;
  color: #0f172a;
}
.util-board-card.us .util-board-t { color: #0f766e; }
.util-board-card .util-abs { margin: 0; }
.util-kv {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 18px;
}
.util-kv .util-board-card.lpu .util-board-e { color: #6d28d9; }
.util-viable .util-abs { margin: 8px 0 0; }
.util-viable tr.ok td:last-child { color: #166534; font-weight: 700; }
.util-viable tr.mid td:last-child { color: #b54708; font-weight: 600; }
.util-viable tr.on { background: #ccfbf1; }
.util-x .fold { margin: 0 0 10px; }
.util-vs { margin: 0 0 14px; }
.util-vs > .util-k { margin: 0 0 8px; }
.util-vs-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 10px;
}
.util-vs-card {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  background: #fff;
}
.util-vs-card .util-k { margin: 0 0 6px; }
.util-vs-card.gpu .util-k { color: #1d4ed8; }
.util-vs-card.tpu .util-k { color: #b45309; }
.util-vs-card.lpu .util-k { color: #6d28d9; }
.util-vs-x {
  margin: 0 0 6px;
  font: 15px/1.3 var(--sans);
  color: #0f172a;
}
.util-vs-x strong { color: #0f766e; }
.util-calc {
  margin: 0 0 14px;
  padding: 12px 14px 14px;
  border: 1px dashed #99f6e4;
  border-radius: 10px;
  background: #f0fdfa;
  font: 13px/1.5 var(--sans);
  color: #334155;
}
.util-calc > .util-k { margin: 0 0 6px; }
.util-calc > p { margin: 0 0 10px; }
.util-calc ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: util-step;
}
.util-calc li {
  counter-increment: util-step;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
  margin: 0 0 10px;
  padding: 0 0 0 1.8em;
  position: relative;
}
.util-calc li:last-child { margin-bottom: 0; }
.util-calc li::before {
  content: counter(util-step);
  position: absolute;
  left: 0;
  top: 1px;
  width: 1.35em;
  height: 1.35em;
  border-radius: 50%;
  background: #0f766e;
  color: #fff;
  font: 700 10px/1.35em var(--mono);
  text-align: center;
}
.util-calc li span:first-child {
  font: 600 12.5px/1.4 var(--sans);
  color: #0f172a;
}
.util-calc li span:last-child {
  font: 12.5px/1.55 var(--mono);
  color: #115e59;
}
.util-heat {
  display: grid;
  grid-template-columns: 7.5em repeat(5, minmax(0, 1fr));
  gap: 3px;
  font: 11px var(--mono);
}
.util-heat .hh, .util-heat .hr {
  padding: 6px 4px;
  color: var(--muted);
  text-align: center;
}
.util-heat .hr { text-align: left; }
.util-heat button {
  margin: 0;
  padding: 8px 4px;
  border: 1px solid var(--line);
  border-radius: 0;
  background: #f0fdfa;
  font: 700 12px var(--mono);
  color: #134e4a;
  cursor: pointer;
}
.util-heat button.on {
  outline: 2px solid #0f766e;
  outline-offset: -2px;
  background: #0f766e;
  color: #fff;
}
.util-heat button.no {
  background: #fef2f2;
  color: #9f1239;
}
.util-levers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 16px;
}
.util-levers article {
  margin: 0;
  padding: 12px 14px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}
.util-levers p:last-child {
  margin: 0;
  font: 13px/1.4 var(--sans);
  color: #334155;
}
.util-tbl td { font-variant-numeric: tabular-nums; }
@media (max-width: 1100px) {
  .util-cards, .util-same, .util-levers, .util-x-kpis, .util-x-ctrls, .util-vs-grid, .util-hero, .util-board, .util-kv { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .util-cards { grid-template-columns: 1fr; }
}
.spec-ux {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.spec-ux li {
  display: flex;
  gap: 12px;
  margin: 0;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}
.spec-n {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #0f766e;
  color: #fff;
  font: 700 13px var(--mono);
}
.spec-ux h2 {
  margin: 0 0 6px;
  font: 700 15px/1.25 var(--sans);
  letter-spacing: -0.02em;
  color: #111;
}
.spec-ux p {
  margin: 0;
  font: 13px/1.45 var(--sans);
  color: #475569;
}
.spec-gate {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 16px;
  font: 13px/1.35 var(--sans);
}
.spec-gate th, .spec-gate td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.spec-gate thead th {
  font: 700 10px var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  background: #f8fafc;
}
.spec-gate tbody th {
  font: 600 13px var(--sans);
  color: #111;
  white-space: nowrap;
}
.spec-gate td.ok { color: #166534; font-weight: 700; }
.spec-gate td.bad { color: #b42318; font-weight: 700; }
.spec-gate td.mid { color: #b54708; font-weight: 600; }

/* Simplified comparison table wrapper */
.spec-table-wrap {
  margin: 20px 0 0;
  padding: 16px;
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 12px;
}
.spec-table-wrap .spec-gate {
  margin: 0;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
}
.spec-table-wrap .spec-gate th,
.spec-table-wrap .spec-gate td {
  padding: 12px 14px;
}
.spec-table-wrap .spec-gate td.ok strong {
  color: #0f766e;
}
.spec-table-note {
  margin: 12px 0 0;
  font: 500 13px/1.4 var(--sans);
  color: var(--muted);
  text-align: center;
}

.fold-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 16px;
}
.fold-row .fold[open] { grid-column: 1 / -1; }
.fold {
  margin: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  font: 14px/1.45 var(--sans);
  color: #334155;
  min-width: 0;
}
.fold[open] { padding-bottom: 14px; }
.fold summary {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  font: 600 14px/1.3 var(--sans);
  color: #0f766e;
  list-style: none;
  white-space: nowrap;
}
.fold summary::-webkit-details-marker { display: none; }
.fold summary::before {
  content: "▸";
  flex: 0 0 auto;
  font-weight: 700;
}
.fold[open] summary::before { content: "▾"; }
.fold summary:hover { color: #115e59; }
.fold > *:not(summary) { padding: 0 14px; min-width: 0; }
.fold .util-tbl { display: block; width: 100%; overflow-x: auto; }
.fold .spec-ux, .fold .spec-card, .fold .spec-from, .fold .spec-grid, .fold .scale-gate, .fold .scale-keep, .fold .scale-note {
  margin-top: 12px;
}
.fold .spec-ux { margin-bottom: 0; }
.fold .spec-card { box-shadow: none; }
@media (max-width: 1000px) {
  .fold-row { grid-template-columns: 1fr; }
}
.spec-from {
  margin: 0 0 16px;
  max-width: 62em;
  font: 14px/1.5 var(--sans);
  color: #475569;
}
.spec-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.spec-card {
  margin: 0;
  padding: 16px 18px 18px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: #fff;
}
.spec-card.keep { border-top: 4px solid #0f766e; }
.spec-card.drop { border-top: 4px solid #b42318; }
.spec-k {
  margin: 0 0 10px;
  font: 700 11px var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.spec-card.keep .spec-k { color: #0f766e; }
.spec-card.drop .spec-k { color: #b42318; }
.spec-card ul {
  margin: 0;
  padding: 0 0 0 1.1em;
  font: 13px/1.5 var(--sans);
  color: #15202b;
}
.spec-card li { margin: 0 0 8px; }
.spec-card li:last-child { margin: 0; }
.spec-card code {
  font: 12px var(--mono);
  color: #0f766e;
}
@media (max-width: 1000px) {
  .spec-ux, .spec-grid { grid-template-columns: 1fr; }
}
.kpi-split {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 28px;
  align-items: start;
}
.kpi-split p.muted { margin: 0; font: 14px/1.5 var(--sans); }
@media (max-width: 900px) { .kpi-split { grid-template-columns: 1fr; } }
.frac {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  vertical-align: middle;
  font: 11px/1.2 var(--mono);
}
.frac .fn {
  padding: 0 4px 2px;
  border-bottom: 1px solid var(--ink);
  white-space: nowrap;
}
.frac .fd { padding: 2px 4px 0; white-space: nowrap; color: var(--muted); }
.eq-line { font: 11px var(--mono); white-space: nowrap; }
.kpi-table td.how { font: 12px/1.35 var(--sans); color: var(--muted); }
.kpi-table .prov { font: 9px var(--mono); letter-spacing: 0.04em; text-transform: uppercase; color: #0f766e; }
.kpi-table .prov.est { color: #b54708; }
.calc-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.calc-card {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  background: #f8fafc;
}
.calc-card h4 { margin: 0 0 8px; font-size: 13px; }
.calc-card ol { margin: 0; padding-left: 18px; font: 12px/1.5 var(--sans); color: var(--text); }
.calc-card ol li { margin: 0 0 4px; }
.calc-card .result { margin: 8px 0 0; font: 13px var(--mono); font-weight: 700; }
@media (max-width: 900px) { .calc-grid { grid-template-columns: 1fr; } }
.walk-split { margin-top: 14px; }
.walk-split .network-pane { max-height: 640px; }
.walk-split .sch-wrap { position: static; max-height: none; overflow: visible; }
/* Run panel: single thin bar + one meta line */
.run-panel { padding: 10px 14px; }
.run-bar { display: flex; gap: 8px; align-items: center; }
.run-bar .run-title { font: 13px var(--mono); font-weight: 700; color: var(--ink); white-space: nowrap; }
.run-bar input { flex: 1; padding: 7px 10px; font-size: 13px; }
.run-bar button { padding: 7px 14px; font-size: 13px; }
.run-meta {
  display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center;
  margin-top: 6px; min-height: 22px; font: 11px var(--mono);
}
.run-meta .tokens { gap: 4px; min-height: 0; }
.run-meta .token { padding: 1px 6px; font-size: 10px; }
.pred-inline { font: 12px var(--sans); color: var(--ink); }
.pred-inline mark { background: #ccfbf1; padding: 0 3px; border-radius: 3px; font-weight: 700; }
.out-inline .token { padding: 1px 6px; font-size: 10px; }
.run-panel .run-progress { margin: 6px 0 0; }
.run-panel .run-progress[hidden] { display: none; }
.run-panel .why-slow-k { min-height: 0; margin: 4px 0 0; }
.run-panel .why-more { margin: 2px 0 0; }
/* Walk + panes: equal-height side-by-side */
.mini-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; align-items: stretch; }
@media (max-width: 1400px) { .mini-split { grid-template-columns: 1fr; } }
/* Fixed pane heights: content varies every tick, the frame must not. */
.mini-split .network-pane { height: 560px; padding: 10px 8px 8px; box-shadow: none; overflow: auto; }
.mini-split .sch-wrap { position: static; height: 560px; overflow: auto; }
.mini-split .sch { padding: 6px; height: auto; min-height: 100%; font-size: 10px; }
.mini-split .blk { padding: 5px 6px; }
.mini-split .blk strong { font-size: 10px; }
.mini-split .blk small { font-size: 9px; }
.mini-split .blk-k { font-size: 8px; margin-bottom: 2px; }
.mini-split .mem-array { gap: 2px; margin-top: 4px; }
.mini-split .mem-array .bank { min-height: 34px; }
.mini-split .mac-grid { gap: 3px; margin-top: 4px; }
.mini-split .mac-grid .pe { min-height: 26px; font-size: 8px; }
.mini-split .mac-grid .pe em { font-size: 11px; }
.mini-split .mac-reduce { margin-top: 3px; padding-top: 2px; font-size: 9px; }
.mini-split .bus.h { height: 12px; margin: 2px 0; font-size: 7px; }
.mini-split .bus.v { font-size: 7px; }
.mini-split .sram-tags { margin: 3px 0; gap: 3px; }
.mini-split .sram-tags span { font-size: 8px; padding: 1px 4px; }
.mini-split .sch-row.eng { margin-bottom: 3px; }
.mini-split .blk.eng strong, .mini-split .blk.logits strong { font-size: 10px; }
.mini-split .blk.logits { margin-bottom: 3px; }
.mini-split .layers { gap: 2px; }
.mini-split .layer { min-height: 15px; font-size: 7px; }
.mini-split .sch-note { font-size: 9px; margin-top: 4px; }
.mini-split .chip-inspector { min-height: 0; padding: 8px 10px; }
.mini-split #chipInspectorBody { min-height: 46px; }
.mini-split .ci-detail { min-height: 0; margin: 4px 0; font-size: 11px; }
.mini-split .ci-now { min-height: 0; padding: 3px 6px; font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Decoder graph compaction */
.mini-split .compute { margin: 4px 0 8px; padding: 6px 8px; min-height: 118px; }
.mini-split .compute-eq { font-size: 12px; margin: 2px 0 4px; min-height: 16px; }
.mini-split .compute-shape { margin-bottom: 4px; font-size: 10px; min-height: 13px; }
.mini-split .compute-ins { min-height: 28px; font-size: 10px; margin-bottom: 4px; }
.mini-split .compute-vals { max-height: 40px; min-height: 18px; }
.mini-split .network { gap: 3px; }
.mini-split .layer-rail { gap: 2px; padding: 3px 0 5px; }
.mini-split .layer-dot { padding: 2px 0; font-size: 8px; }
.mini-split .flow-edge { padding: 0 0 1px; font-size: 8px; }
.mini-split .flow-edge i { font-size: 10px; }
.mini-split .decoder-graph { padding: 4px 3px 8px; }
.mini-split .dag { padding: 2px 22px 6px; }
.mini-split .dag-nodes { gap: 14px 8px; }
.mini-split .net-node, .mini-split .op { padding: 3px 6px; border-radius: 5px; font-size: 9px; }
.mini-split .op b, .mini-split .net-node b { font-size: 9px; display: inline; }
.mini-split .op .soma { width: 7px; height: 7px; top: -4px; }
/* Hover tooltip: details on demand instead of inline text */
.op .tip, .net-node .tip {
  display: none;
  position: fixed;
  z-index: 60;
  background: #15202b;
  color: #e2e8f0;
  font: 10px/1.5 var(--mono);
  white-space: pre-wrap;
  text-align: left;
  padding: 6px 8px;
  border-radius: 6px;
  width: max-content;
  max-width: 260px;
  pointer-events: none;
  box-shadow: 0 8px 20px #15202b44;
}
.op:hover .tip, .net-node:hover .tip, .op:focus-visible .tip { display: block; }
.tip.live { display: block; }
.op { position: relative; }
.net-node { position: relative; }
/* Wide global nodes stay slim too */
.mini-split .net-node.wide { padding: 3px 8px; }
.mini-split .dag-title { margin: 0 6px 2px; font-size: 9px; }
.mini-split .dag-legend { margin: 0 6px 4px; font-size: 8px; }
.mini-split .edge-lab { font-size: 9px; stroke-width: 3px; }
.prov-badge { display: inline-block; font: 9px var(--mono); padding: 1px 6px; border-radius: 999px; margin-left: 6px; vertical-align: middle; }
.prov-badge.est { background: #fef3c7; color: #92400e; }
.prov-badge.meas { background: #dcfce7; color: #166534; }
/* Multi-die viz + architecture comparison */
.die-viz h4, .scale-stages h4, .xover-wrap h4, #scaleConfigs h4, .verdict-block h4 { margin: 0 0 8px; font: 11px var(--mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.arch-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 1100px) { .arch-compare { grid-template-columns: 1fr; } }
.arch-col { background: #f8fafc; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.arch-name { margin: 0 0 10px; font: 12px var(--mono); font-weight: 700; }
.arch-name.ours { color: #0f766e; }
.arch-name.gpu { color: #64748b; }
.arch-notes { margin-top: 10px; }
.die-grid { display: grid; gap: 8px; margin: 8px 0; }
.die-tile {
  position: relative; border: 1.5px solid #1f2a33; border-radius: 8px;
  background: linear-gradient(135deg, #f0fdfa 0%, #ccfbf1 100%);
  display: grid; place-items: center; align-content: center; gap: 1px;
}
.die-tile b { font: 13px var(--mono); color: var(--ink); }
.die-tile span { font: 8px var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
.die-tile.bwl { background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%); }
.die-tile .kv-chip {
  position: absolute; top: 4px; right: 4px; font: 8px var(--mono); font-style: normal;
  background: #f3eef8; border: 1px solid #c4b5fd; color: #6d28d9; border-radius: 4px; padding: 1px 4px;
}
/* GPU-style monolith sketch */
.gpu-die {
  border: 1.5px solid #1f2a33; border-radius: 8px; background: #eef2f5;
  padding: 8px; display: flex; flex-direction: column; gap: 6px;
}
.gpu-l2 {
  border: 1px dashed #64748b; border-radius: 6px; background: #e2e8f0;
  font: 9px var(--mono); color: #475569; text-align: center; padding: 8px 6px;
}
.gpu-sm-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; }
.gpu-sm {
  border: 1px solid #1f2a33; border-radius: 4px; background: #fff;
  font: 8px var(--mono); color: var(--ink); text-align: center; padding: 8px 0;
}
.gpu-hbm {
  border: 1px solid #1f2a33; border-radius: 6px; background: #dbe7f5;
  font: 9px var(--mono); color: #1e3a5f; text-align: center; padding: 6px;
  background-image: repeating-linear-gradient(90deg, transparent 0 10px, #9eb6d4 10px 11px);
}
.die-facts { margin-top: 8px; }
.die-bw { height: 10px; background: #eef2f5; border-radius: 999px; overflow: hidden; margin: 8px 0; }
.die-bw span { display: block; height: 100%; background: var(--warn); border-radius: 999px; }
/* Verdict */
.verdict-block { margin: 14px 0; padding: 14px 16px; background: #f8fafc; border: 1px solid var(--line); border-left: 4px solid var(--active); border-radius: 10px; }
.verdict-main { margin: 4px 0 8px; font: 15px/1.5 var(--sans); color: var(--ink); }
.plat-wrap { overflow-x: auto; }
.rail-caption { margin: 0 2px 6px; font: 10px var(--mono); color: var(--muted); }
.pass-chip {
  display: inline-block; font: 10px var(--mono); font-weight: 700;
  background: var(--active-bg); border: 1px solid #5eead4; color: var(--active);
  border-radius: 999px; padding: 2px 10px; margin-left: 8px; vertical-align: middle;
}
.sm-card {
  flex: 1 1 240px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  background: #fff;
}
.sm-card h4 { margin: 0 0 6px; font-size: 12px; color: var(--ink); }
.scale-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.scale-memory { display: flex; gap: 10px; flex-wrap: wrap; margin: 10px 0; }
.scale-stages h4, .scale-cols h4 { margin: 0 0 8px; font: 11px var(--mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.ss-row { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 8px; align-items: center; margin: 3px 0; font: 10px var(--mono); }
.ss-name { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-bar { display: block; height: 10px; background: #eef2f5; border-radius: 999px; overflow: hidden; }
.ss-bar span { display: block; height: 100%; background: var(--active); border-radius: 999px; }
.ss-val { color: var(--muted); white-space: nowrap; }
@media (max-width: 1100px) { .scale-cols { grid-template-columns: 1fr; } }
.sram-tags { display: flex; gap: 4px; flex-wrap: wrap; margin: 6px 0; }
.sram-tags span {
  border: 1px solid #1f2a33;
  padding: 2px 6px;
  font-size: 9px;
  background: #fff;
}
.sram-tags span.active { background: #ccfbf1; border-color: #0f766e; }
.bus {
  display: grid;
  place-items: center;
  color: #1f2a33;
  font-size: 8px;
  letter-spacing: 0.04em;
  text-align: center;
}
.bus.h {
  height: 18px;
  margin: 4px 0;
  background:
    repeating-linear-gradient(90deg, #1f2a33 0 8px, transparent 8px 12px);
  background-position: center;
  background-size: 100% 2px;
  background-repeat: no-repeat;
}
.bus.v {
  background:
    repeating-linear-gradient(0deg, #1f2a33 0 8px, transparent 8px 12px);
  background-position: center;
  background-size: 2px 100%;
  background-repeat: no-repeat;
}
.bus span {
  background: #f7f8fa;
  padding: 0 4px;
}
.bus.live { color: #0f766e; font-weight: 700; }
.bus.live.h {
  background-image: repeating-linear-gradient(90deg, #0f766e 0 8px, transparent 8px 12px);
}
.bus.live.v {
  background-image: repeating-linear-gradient(0deg, #0f766e 0 8px, transparent 8px 12px);
}
.mem-array {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 3px;
  margin-top: 8px;
}
.mem-array .bank {
  border: 1px solid #1f2a33;
  min-height: 72px;
  background:
    repeating-linear-gradient(0deg, #dbe7f5 0 3px, #c5d6ec 3px 4px),
    repeating-linear-gradient(90deg, transparent 0 6px, #9eb6d4 6px 7px);
  position: relative;
}
.blk.sram .mem-array .bank {
  background:
    repeating-linear-gradient(0deg, #d5eedc 0 3px, #bfe6c8 3px 4px),
    repeating-linear-gradient(90deg, transparent 0 6px, #7fbe90 6px 7px);
}
.mem-array .bank b {
  position: absolute;
  left: 2px;
  bottom: 2px;
  font-size: 8px;
  font-weight: 600;
  color: #1f2a33;
}
.blk.rom.active .bank, .blk.active .mem-array .bank { outline: 2px solid #0f766e; }
.mac-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 4px;
  margin-top: 8px;
}
.mac-grid .pe {
  border: 1px solid #1f2a33;
  background: #fff;
  min-height: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  line-height: 1.15;
}
.mac-grid .pe em { font-style: normal; color: #b54708; font-size: 14px; font-weight: 700; }
.blk.mac.active .pe { background: #fef3c7; border-color: #0f766e; }
.mac-reduce {
  margin-top: 6px;
  border-top: 2px solid #1f2a33;
  padding-top: 4px;
  text-align: center;
  font-size: 10px;
}
.layers { display: grid; grid-template-columns: repeat(14, 1fr); gap: 2px; }
.layer {
  min-height: 22px;
  border: 1px solid #1f2a33;
  display: grid;
  place-items: center;
  font: 8px var(--mono);
  color: var(--muted);
  background: #fff;
}
.layer.active { background: #ccfbf1; border-color: #0f766e; color: #0f766e; }
.layer.mismatch { background: #fee4e2; border-color: #b42318; color: #b42318; }
.sch-note { margin: 8px 0 0; font: 11px var(--mono); color: var(--ink); min-height: 16px; }
.sch-note.dim { color: var(--muted); word-break: break-all; min-height: 16px; }
.section-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
#mismatchBox {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 8px;
  padding: 10px 12px;
  font: 12px var(--mono);
  overflow: auto;
  max-height: 180px;
}
footer { padding: 18px 0 32px; color: var(--muted); font-size: 12px; }
.modal {
  position: fixed;
  inset: 0;
  background: #15202b88;
  display: grid;
  place-items: center;
  z-index: 40;
  padding: 24px;
}
.modal[hidden] { display: none; }
.modal-card {
  width: min(1100px, 100%);
  max-height: calc(100vh - 48px);
  overflow: auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 24px 60px #15202b33;
}
.modal-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.modal-tabs, .modal-pager { display: flex; gap: 8px; align-items: center; margin: 10px 0; }
.modal-tabs .ghost[aria-pressed="true"] { background: var(--ink); color: #fff; }
.modal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 6px;
}
.modal-grid span {
  font: 11px var(--mono);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 6px 8px;
  background: #f8fafc;
}
.modal-grid span b { display: block; color: var(--muted); font-weight: 500; font-size: 9px; }
.hm-note { margin: 0 0 8px; font: 11px var(--mono); color: var(--muted); }
.hm-diff-note { color: var(--bad); }
.hm-grid { display: grid; gap: 2px; overflow-x: auto; padding-bottom: 4px; }
.hm-rowlabel, .hm-collabel {
  font: 9px var(--mono); color: var(--muted);
  display: flex; align-items: center; justify-content: center;
}
.hm-cell {
  font: 9px var(--mono); text-align: center; padding: 5px 2px;
  border-radius: 4px; color: #15202b; border: 1px solid transparent;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hm-cell.diff { border-color: #dc2626; box-shadow: 0 0 0 1.5px #dc2626; }
@media (max-width: 1100px) {
  .split { grid-template-columns: 1fr; }
  .sch-wrap { position: static; }
  .network-pane { max-height: none; }
  .metrics { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 600px) {
  .metrics { grid-template-columns: 1fr 1fr; }
  form { flex-direction: column; align-items: stretch; }
  .sch-row.top, .sch-row.mem, .sch-row.eng { grid-template-columns: 1fr; }
  .bus.v { height: 18px; background-size: 100% 2px; background-image: repeating-linear-gradient(90deg, #1f2a33 0 8px, transparent 8px 12px); }
  .compute-vals { grid-template-columns: repeat(4, 1fr); }
}

.gate-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}
.gate-card {
  width: min(420px, 100%);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 28px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 18px 40px #15202b14;
}
.gate-card h1 { margin: 0 0 4px; font-size: 26px; }
.gate-card .lede { margin: 0 0 10px; }
.gate-label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font: 12px var(--mono);
  color: var(--muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.pin-boxes {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 8px;
}
.pin-digit {
  width: 100%;
  aspect-ratio: 1;
  min-height: 44px;
  padding: 0;
  text-align: center;
  font: 22px/1 var(--mono);
  letter-spacing: 0;
  color: var(--ink);
}
.pin-digit:focus {
  border-color: var(--active);
  background: #f0fdfa;
}
.gate-card button { width: 100%; margin-top: 4px; padding: 12px; }
.gate-card .error { margin: 0; }

/* Architecture comparison section (slide 2) */
.arch-diagrams { margin-top: 12px; }
.arch-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.arch-tab.active { background: var(--ink); color: #fff; }
.arch-diagram { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 8px; }
.arch-diagram img { width: 100%; height: auto; display: block; }
#archTable table { margin-bottom: 6px; }

/* Choices keyline (slide 2) */
.choices-takeaway { margin-bottom: 10px; }
.key-card.choice .kc-tag { display: block; font: 9px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: #0f766e; margin-bottom: 4px; }
.key-card.choice.base .kc-tag { color: var(--muted); }
.key-card.choice.base .kc-num { color: var(--muted); font-size: 18px; }


/* ---- Roadmap slide (slide 6) ---- */
.roadmap-tbl td,
.roadmap-tbl th {
  font-size: 13px;
  padding: 7px 10px;
}
.roadmap-tbl .approx-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 9px;
  background: #fef3c7;
  color: #92400e;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  vertical-align: 1px;
}
.roadmap-tbl tr.highlight td,
.roadmap-tbl tr.highlight th {
  background: #f0fdfa;
}


/* Roadmap live lever strip */
.roadmap-live {
  padding: 10px 14px;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 10px;
  background: #f8fafc;
}
.roadmap-levers {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.roadmap-levers button {
  padding: 5px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #fff;
  font: 600 12.5px var(--sans);
  color: #334155;
  cursor: pointer;
}
.roadmap-levers button[aria-pressed="true"] {
  background: #0f766e;
  border-color: #0f766e;
  color: #fff;
}
.roadmap-endpoint {
  margin-left: auto;
  font: 600 13px var(--sans);
  color: #0f766e;
  white-space: nowrap;
}


/* Roadmap mechanism bars */
.roadmap-mech {
  padding: 12px 14px;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 10px;
  background: #fff;
}
.roadmap-mech-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.roadmap-mech-legend {
  margin: 0;
  font: 500 12px var(--sans);
  color: #475569;
  display: flex;
  align-items: center;
  gap: 14px;
}
.lg {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 3px;
  margin-right: 5px;
  vertical-align: -1px;
}
.lg-w { background: #0f766e; }
.lg-k { background: #f59e0b; }
.roadmap-bars {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}
.rbar-track {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 150px;
  border-radius: 6px;
  background: #f1f5f9;
  overflow: hidden;
}
.rbar-w, .rbar-k {
  transition: height 0.3s ease;
}
.rbar-w { background: #0f766e; }
.rbar-k { background: #f59e0b; }
.rbar-lab {
  margin-top: 6px;
  font: 600 11px/1.25 var(--sans);
  color: #334155;
  text-align: center;
  min-height: 26px;
}
.rbar-val {
  font: 700 12px var(--sans);
  color: #0f766e;
  text-align: center;
}
.rbar.end .rbar-val { color: #047857; }


/* Roadmap live walk: equation + die diagram */
.rm-walk {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 14px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--border, #e2e8f0);
}
.rm-eq-title {
  margin: 0 0 8px;
  font: 700 12px var(--sans);
  color: #0f766e;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.rm-eq-line {
  margin: 0 0 6px;
  font: 600 15px var(--sans);
  color: #0f172a;
}
.rm-eq-calc {
  margin: 0 0 10px;
  font: 500 13px/1.7 var(--sans);
  color: #334155;
}
.rm-term {
  padding: 1px 6px;
  border-radius: 6px;
  background: #f1f5f9;
  transition: background 0.2s ease;
}
.rm-term b { color: #0f172a; }
.rm-tw { border-left: 3px solid #0f766e; }
.rm-tk { border-left: 3px solid #f59e0b; }
.rm-term.rm-hit { background: #d1fae5; }
.rm-total { font-size: 15px; color: #0f766e; }
.rm-notes {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 5px;
}
.rm-notes li {
  font: 400 12px/1.5 var(--sans);
  color: #64748b;
  padding-left: 14px;
  position: relative;
}
.rm-notes li::before {
  content: "·";
  position: absolute;
  left: 2px;
  color: #94a3b8;
}
.rm-notes li.hit { color: #0f172a; }
.rm-notes li.hit::before { content: "→"; color: #0f766e; font-weight: 700; }
.rm-die-svg { width: 100%; height: auto; }
.rm-die-outline { fill: #f8fafc; stroke: #cbd5e1; stroke-width: 1.5; }
.rm-rom { fill: #ccfbf1; stroke: #0f766e; stroke-width: 1.2; }
.rm-rom.hit { stroke-width: 2.5; fill: #99f6e4; }
.rm-kv { fill: #fef3c7; stroke: #d97706; stroke-width: 1.2; }
.rm-kv.hit { stroke-width: 2.5; fill: #fde68a; }
.rm-mxu { fill: #eff6ff; stroke: #3b82f6; stroke-width: 1; }
.rm-die-t { font: 700 13px var(--sans); fill: #0f172a; }
.rm-die-s { font: 500 10px var(--sans); fill: #475569; }
.rm-die-s.warn { fill: #b91c1c; font-weight: 700; }
.rm-die-cap {
  margin: 6px 0 0;
  font: 500 11.5px var(--sans);
  color: #64748b;
}
@media (max-width: 900px) {
  .rm-walk { grid-template-columns: 1fr; }
}

/* ===================== Slides 5-9 · workload, KPIs, scaling ===================== */
.slide-workload, .slide-kpis, .slide-arrayscale, .slide-precision, .slide-multidie {
  flex: 1;
  padding: 20px 48px 32px;
  overflow-y: auto;
}
.wl-wrap, .kp-wrap, .as-wrap, .pr-wrap, .md-wrap { max-width: 1180px; margin: 0 auto; }
.wl-head, .kp-head, .as-head, .pr-head, .md-head { margin-bottom: 18px; text-align: center; }
.wl-title, .kp-title, .as-title, .pr-title, .md-title { font-size: 30px; margin-bottom: 8px; max-width: 22ch; }
.wl-sub, .kp-sub, .as-sub, .pr-sub, .md-sub {
  color: #475569; font-size: 16px; line-height: 1.45;
  max-width: 42em; margin: 0 auto;
}

.wl-body { display: grid; grid-template-columns: 1fr 280px; gap: 24px; align-items: start; }
.wl-tbl, .kp-tbl, .pr-tbl, .md-tbl {
  width: 100%; border-collapse: collapse; font-size: 13.5px;
  background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; overflow: hidden;
}
.wl-tbl th, .kp-tbl th, .pr-tbl th, .md-tbl th, .wl-tbl td, .kp-tbl td, .pr-tbl td, .md-tbl td {
  padding: 7px 12px; text-align: left; border-bottom: 1px solid #f1f5f9;
}
.wl-tbl thead th, .kp-tbl thead th, .pr-tbl thead th, .md-tbl thead th {
  background: #f8fafc; color: #334155; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em;
}
.wl-tbl tfoot td { font-weight: 700; border-top: 2px solid #0f766e; background: #f0fdfa; }
.wl-loading, .kp-loading, .pr-loading, .md-loading { color: #94a3b8; text-align: center; padding: 24px; }
.wl-side { display: flex; flex-direction: column; gap: 14px; }
.wl-stat { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; padding: 14px 16px; }
.wl-stat-k { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: #64748b; }
.wl-stat-n { font-size: 26px; font-weight: 700; color: #0f172a; margin: 4px 0; font-variant-numeric: tabular-nums; }
.wl-stat-note { font-size: 12.5px; color: #64748b; }
.wl-foot, .kp-foot, .pr-foot, .md-foot, .as-callout {
  margin-top: 16px; font-size: 12.5px; color: #475569;
  background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; padding: 12px 16px;
}
.kp-src, .pr-src, .md-src, .as-src { color: #94a3b8; margin-top: 6px; font-size: 12px; }
.kp-tbl td[data-provenance] { font-variant-numeric: tabular-nums; }
.kp-name { font-weight: 600; color: #0f172a; }
.kp-tag {
  display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 8px;
  border-radius: 999px; letter-spacing: 0.02em;
}
.kp-measured { background: #ccfbf1; color: #115e59; }
.kp-sim { background: #dbeafe; color: #1e40af; }
.kp-cited { background: #fef3c7; color: #92400e; }

.mech-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
  margin: 18px 0 20px;
}
.mech-panel {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mech-panel.mech-fused { border-color: #0f766e; background: #f0fdfa; }
.mech-h { font-weight: 700; font-size: 13.5px; color: #0f172a; margin: 0; }
.mech-sch {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  background: #f7f8fa;
  border: 1px solid #1f2a33;
  padding: 8px;
}
.mech-sch .mech-blk {
  border: 1.5px solid #1f2a33;
  background: #fff;
  padding: 6px 8px;
  min-width: 0;
}
.mech-sch .mech-blk .blk-k {
  display: block; font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase;
  color: #3b6ea5; margin-bottom: 2px;
}
.mech-sch .mech-blk small { display: block; color: var(--muted); font-size: 10px; }
.mech-sch .mech-blk.mech-none { background: #fef2f2; border-style: dashed; }
.mech-sch .mech-blk.mech-none .blk-k { color: #b42318; }
.mech-sch .bus.mech-bus { height: 16px; font-size: 8px; }
.mech-rtl { font-size: 12px; line-height: 1.45; color: #475569; margin: 0; }
.mech-rtl code { font: 10.5px var(--mono); background: #f1f5f9; padding: 1px 4px; border-radius: 3px; }
.mech-num {
  font: 12px var(--mono); color: #0f172a; font-weight: 700;
  margin: 0; padding-top: 4px; border-top: 1px dashed #e2e8f0;
}
.mech-tbl td code { font-size: 11px; }

.moe-controls {
  display: flex; align-items: center; gap: 12px; justify-content: center;
  margin-bottom: 14px;
}
.moe-token { font: 13px var(--mono); color: #475569; }
.moe-token strong { color: #0f172a; font-variant-numeric: tabular-nums; }
.moe-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.moe-panel {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 10px;
  padding: 14px 16px; display: flex; flex-direction: column; gap: 8px;
}
.moe-panel.moe-fused { border-color: #0f766e; background: #f0fdfa; }
.moe-h { font-weight: 700; font-size: 13.5px; color: #0f172a; margin: 0; }
.moe-router {
  font: 11px var(--mono); text-align: center; color: #3b6ea5;
  border: 1.5px dashed #3b6ea5; border-radius: 6px; padding: 5px;
  background: #eef2f8;
}
.moe-grid {
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  gap: 3px;
  margin: 4px 0;
}
.moe-cell {
  aspect-ratio: 1;
  border: 1px solid #cbd5e1;
  background: #f1f5f9;
  border-radius: 2px;
  transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.moe-panel .moe-cell.active {
  background: #93c5fd;
  border-color: #1d4ed8;
}
.moe-panel .moe-cell.fetching {
  background: #1d4ed8;
  box-shadow: 0 0 0 2px #1d4ed855;
}
.moe-fused .moe-cell.active {
  background: #0f766e;
  border-color: #0f766e;
  box-shadow: 0 0 0 2px #0f766e33;
}
.moe-cap { font-size: 12px; line-height: 1.45; color: #475569; margin: 0; }
.moe-num {
  font: 12px var(--mono); color: #0f172a; font-weight: 700;
  margin: 0; padding-top: 4px; border-top: 1px dashed #e2e8f0;
}
@media (max-width: 860px) {
  .moe-split { grid-template-columns: 1fr; }
}

.moe-arch-wrap { margin: 8px 0 20px; }
.moe-arch-svg { width: 100%; height: auto; display: block; }
.moe-arch-cite { font-size: 11px; color: #94a3b8; text-align: center; margin: 6px 0 0; }
.moe-arch-blk { stroke: #1f2a33; stroke-width: 1.3; }
.moe-arch-attn { fill: #eef2f8; }
.moe-arch-moe { fill: #bfe3e0; }
.moe-arch-io { fill: #fbcfe8; }
.moe-arch-expert { fill: #fff; }
.moe-arch-selected { fill: #64748b; }
.moe-arch-selected + text { fill: #fff; }
.moe-arch-gate { fill: #bbf7d0; }
.moe-arch-panel { fill: #eef6f8; stroke: #94b8c9; stroke-width: 1.2; }
.moe-arch-panel-title { font: 700 13px var(--sans); fill: #0f172a; }
.moe-arch-lbl { font: 11px var(--sans); fill: #0f172a; }
.moe-arch-cap { font: 10px var(--mono); fill: #64748b; }
.moe-arch-gatecap { fill: #0f766e; font-weight: 700; }
.moe-arch-ellipsis { font-size: 18px; fill: #94a3b8; }
.moe-arch-node { fill: #fff; stroke: #334155; stroke-width: 1.4; }
.moe-arch-node-lbl { font: 700 14px var(--sans); fill: #334155; }
.moe-arch-arrow { stroke: #334155; stroke-width: 1.4; fill: none; }
.moe-arch-live { stroke: #0f766e; stroke-width: 2; }
.moe-arch-bus { stroke: #94a3b8; stroke-width: 1; stroke-dasharray: 3 3; fill: none; }
.moe-arch-zoomline { stroke: #94b8c9; stroke-width: 1; stroke-dasharray: 4 3; fill: none; }
.moe-arch-gateline { stroke: #0f766e; }

.as-controls { margin: 6px 0 18px; }
.as-slider { width: 420px; max-width: 100%; accent-color: #0f766e; }
.as-slider-label { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: #64748b; margin-bottom: 4px; }
.as-ticks { display: flex; justify-content: space-between; width: 420px; max-width: 100%; font-size: 12px; color: #64748b; }
.as-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.as-panel { background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 14px 16px; }
.as-panel-k { font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: #64748b; margin-bottom: 10px; }
.as-tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.as-tbl th { text-align: left; color: #64748b; font-weight: 500; padding: 5px 0; width: 45%; }
.as-tbl td { font-weight: 600; font-variant-numeric: tabular-nums; }
.as-tbl tr[data-provenance="measured"] td { color: #0f766e; }

details.src-fold.wl-foot,
details.src-fold.kp-foot,
details.src-fold.pr-foot,
details.src-fold.md-foot,
details.src-fold.gpu-foot {
  background: transparent;
  border: none;
  padding: 0;
}
.spec-formula-inline {
  margin: 0 auto 16px;
  max-width: 42em;
  font: 500 16px/1.45 var(--sans);
  color: #475569;
  text-align: center;
}
.spec-formula-inline em { color: #0f766e; font-style: italic; }
.spec-insight-box {
  margin-top: 10px;
  padding: 12px 14px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
}
.spec-insight-box h4 {
  margin: 0 0 6px;
  font: 600 13px/1.3 var(--sans);
}
.spec-insight-box p {
  margin: 0;
  font: 13px/1.45 var(--sans);
  color: #475569;
}
.replica-lead { max-width: 46em; }
.as-controls { display: flex; flex-direction: column; align-items: center; }
@media (max-width: 720px) {
  .thanks-grid { grid-template-columns: 1fr; }
}

/* Same-compute, different-hardware comparison (hw_verify runs). */
.hw-compare-body { margin-top: 10px; }
.hw-run-h {
  margin: 10px 0 6px;
  font: 600 12px/1.3 var(--sans);
  color: #334155;
}
.hw-compare-table {
  width: 100%;
  border-collapse: collapse;
  font: 12px/1.4 var(--sans);
}
.hw-compare-table th {
  text-align: left;
  padding: 4px 8px;
  color: #64748b;
  font-weight: 600;
  border-bottom: 1px solid #e2e8f0;
}
.hw-compare-table td {
  padding: 5px 8px;
  border-bottom: 1px solid #f1f5f9;
  color: #334155;
  vertical-align: middle;
}
.hw-compare-table td.hw-pass { color: #15803d; font-weight: 600; }
.hw-compare-table td.hw-fail { color: #b91c1c; font-weight: 600; }
.hw-bar {
  display: inline-block;
  width: 90px;
  height: 8px;
  margin-right: 6px;
  background: #e2e8f0;
  border-radius: 4px;
  overflow: hidden;
  vertical-align: middle;
}
.hw-bar-fill {
  height: 100%;
  background: #3b82f6;
  border-radius: 4px;
}

/* Package-first refinement: deliberately architectural, never a P&R claim. */
.slide-gpu.has-experience.is-simple > .gpu-title,
.slide-gpu.has-experience.is-simple > .gpu-lead,
.slide-gpu.has-experience.is-simple > .gpu-runbar,
.slide-gpu.has-experience > #gpuStory { display: none !important; }
.slide-gpu.has-experience.is-simple { padding-top: 18px; }
#gpuExperience[hidden] { display: none !important; }
.gpu-story-visuals { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 12px; margin-top: 12px; }
.story-package-diagram { min-height: 170px; gap: 9px; }
.story-package {
  min-height: 148px;
  grid-template-rows: 32px 1fr 32px;
  gap: 5px;
  padding: 9px;
  overflow: visible;
}
.story-hbm {
  padding: 6px 3px;
  border-radius: 5px;
  font-size: 9px;
}
.story-gpu-die {
  min-width: 100px;
  padding: 12px 9px;
  border-width: 2px;
  border-radius: 7px;
}
.story-gpu-die b { font-size: 10px; }
.story-package-note {
  position: absolute;
  z-index: 2;
  color: #475569;
  font: 700 8px/1.1 var(--mono);
  letter-spacing: .02em;
  white-space: nowrap;
}
.story-package-note::before {
  position: absolute;
  display: block;
  width: 18px;
  height: 1px;
  background: #94a3b8;
  content: "";
}
.note-hbm { right: -82px; top: 18px; }
.note-hbm::before { left: -23px; top: 4px; }
.note-die { right: -98px; bottom: 38px; }
.note-die::before { left: -23px; top: 4px; }
.note-link { left: 42px; bottom: -16px; color: #c2410c; }
.note-link::before { left: 15px; top: -7px; width: 1px; height: 5px; background: #c2410c; }
.story-network-diagram { min-height: 170px; }
.story-net-layer { flex: 1 0 220px; padding: 10px; }
.story-net-layer p { margin: 8px 0 0; font: 9px/1.45 var(--mono); }
.story-net-layer p span { text-transform: uppercase; font-size: 8px; }
.story-net-layer p b { display: inline; color: #c2410c; font-size: 10px; }
@media (max-width: 700px) {
  .gpu-story-visuals { grid-template-columns: 1fr; }
  .story-package-note { display: none; }
  .story-package-diagram, .story-network-diagram { min-height: 140px; }
}

/* ---- Machine trace replay player (slide 7) · light warm-paper theme ---- */
.mp-wrap {
  margin-top: 10px;
  padding: 12px 14px 14px;
  border: 1px solid #f2c277;
  border-radius: 10px;
  background: #fffaf5;
}
.mp-head { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; justify-content: space-between; }
.mp-k { margin: 0; color: #9a3412; font: 10px/1.4 var(--mono); text-transform: uppercase; letter-spacing: 0.04em; }
.mp-tabs { display: flex; flex-wrap: wrap; gap: 4px; }
.mp-tab {
  padding: 3px 9px;
  border: 1px solid #ecd9b8;
  border-radius: 999px;
  background: transparent;
  color: #a16207;
  font: 10px/1.3 var(--mono);
  cursor: pointer;
}
.mp-tab:hover { border-color: #d97706; color: #7c2d12; }
.mp-tab[aria-pressed="true"] { border-color: #d97706; color: #9a3412; background: #fff7ed; }
.mp-story {
  margin: 9px 0 0;
  padding: 6px 10px;
  border-left: 3px solid #f59e0b;
  background: #fff7ed;
  border-radius: 0 6px 6px 0;
  color: #7c2d12;
  font: 10.5px/1.55 var(--mono);
}
.mp-stage { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 12px; margin-top: 10px; }
.mp-sch {
  display: flex; align-items: stretch;
  padding: 12px 10px;
  border: 1px solid #f2c277;
  border-radius: 8px;
  background: #fff7ed;
}
.mp-blk {
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
  min-width: 0; padding: 8px 10px;
  border: 1px solid #e8d0a8; border-radius: 6px;
  background: #ffffff;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.mp-blk b { color: #431407; font: 11px/1.3 var(--mono); }
.mp-blk small { color: #a16207; font: 9px/1.3 var(--mono); }
.mp-blk.mp-mem { border-color: #d9a86c; }
.mp-blk.mp-mac { flex: 1 1 auto; border-color: rgba(15, 118, 110, 0.35); }
.mp-blk.mp-mac.is-live { border-color: #0f766e; box-shadow: 0 0 0 1px rgba(15, 118, 110, 0.25); }
.mp-blk.mp-mac.is-hot { box-shadow: 0 0 0 1px rgba(15, 118, 110, 0.55); }
.mp-blk.mp-mac.is-live small { color: #0f766e; }
.mp-wire {
  position: relative;
  flex: 1 1 46px;
  align-self: center;
  height: 2px;
  margin: 0 10px;
  background: #f1dcb8;
  border-radius: 1px;
}
.mp-wire span {
  position: absolute; left: 0; right: 0; top: -14px;
  color: #a16207; font: 8px/1.2 var(--mono); text-align: center;
  white-space: nowrap;
}
.mp-wire i {
  position: absolute; top: -3px; left: 0;
  width: 8px; height: 8px; border-radius: 2px;
  background: #f59e0b;
  opacity: 0;
}
.mp-wire.is-live i { opacity: 1; left: calc(var(--frac, 0) * 100%); transform: translateX(-50%); }
.mp-wire.is-hot { background: #d97706; }
.mp-wire.is-hot i { background: #b45309; }
.mp-meter { display: flex; flex-direction: column; gap: 7px; padding: 10px 12px; border: 1px solid #f2c277; border-radius: 8px; background: #fff7ed; }
.mp-meter-k { margin: 0; color: #9a3412; font: 9px/1.4 var(--mono); text-transform: uppercase; letter-spacing: 0.04em; }
.mp-lane { display: grid; grid-template-columns: 108px 1fr 62px; align-items: center; gap: 8px; }
.mp-lane span { color: #92600a; font: 9px/1.3 var(--mono); }
.mp-lane b { color: #431407; font: 10px/1.3 var(--mono); text-align: right; white-space: nowrap; }
.mp-bar { height: 8px; border-radius: 4px; background: #ffedd5; border: 1px solid #fdba74; overflow: hidden; }
.mp-bar i { display: block; height: 100%; width: 0; border-radius: 4px; transition: width 0.12s linear; }
.mp-lane:nth-of-type(1) .mp-bar i { background: #f59e0b; }
.mp-lane:nth-of-type(2) .mp-bar i { background: #0f766e; }
.mp-share { margin: 2px 0 0; color: #7c2d12; font: 10px/1.4 var(--mono); }
.mp-share b { color: #9a3412; }
.mp-readout { margin: 2px 0 0; color: #0f766e; font: 10px/1.4 var(--mono); min-height: 14px; }
.mp-watch {
  margin: 6px 0 0;
  padding: 5px 10px;
  border-left: 3px solid #0f766e;
  background: #f0fdfa;
  border-radius: 0 6px 6px 0;
  color: #0f766e;
  font: 10.5px/1.55 var(--mono);
}
.mp-blk.mp-extra { border-color: #d9a86c; background: #fffdf8; }
.mp-blk.mp-x-fifo { border-style: dashed; }
.mp-blk.mp-x-reg { border-color: #b3a369; }
.mp-blk.mp-x-sram { border-color: #0f766e; }
.mp-wire.mp-blocking {
  background: repeating-linear-gradient(90deg, #f1dcb8 0 6px, transparent 6px 11px);
}
.mp-wire.mp-blocking.is-live { background: repeating-linear-gradient(90deg, #d97706 0 6px, transparent 6px 11px); }
.mp-bubble {
  position: absolute; left: 55%; top: 5px;
  transform: translateX(-50%);
  padding: 1px 6px;
  border: 1px solid #d97706;
  border-radius: 999px;
  background: #fff7ed;
  color: #b45309;
  font: 8px/1.4 var(--mono);
  white-space: nowrap;
}
.mp-transport { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; }
.mp-transport .scrub { flex: 1 1 220px; display: flex; align-items: center; gap: 8px; }
.mp-transport .scrub span { color: #a16207; font: 9px/1.3 var(--mono); white-space: nowrap; }
.mp-cap { flex: 1 1 100%; margin: 0; color: #a16207; font: 9px/1.4 var(--mono); }
@media (max-width: 900px) {
  .mp-stage { grid-template-columns: 1fr; }
}

/* ---- Live energy accrual (slide 2 details view) ---- */
.gpu-accrual {
  margin: 10px 0 0;
  padding: 9px 11px 11px;
  border: 1px solid #fdba74;
  border-radius: 8px;
  background: #fffaf5;
}
.gpu-accrual[hidden] { display: none; }
.gpu-accrual-k { margin: 0 0 7px; color: #9a3412; font: 10px/1.4 var(--mono); text-transform: uppercase; letter-spacing: 0.04em; }
.gpu-accrual-lane { display: grid; grid-template-columns: 128px 1fr 70px; align-items: center; gap: 8px; margin-top: 5px; }
.gpu-accrual-lane span { color: #7c2d12; font: 10px/1.3 var(--mono); }
.gpu-accrual-lane b { color: #431407; font: 11px/1.3 var(--mono); text-align: right; white-space: nowrap; }
.gpu-accrual-bar { height: 9px; border-radius: 5px; background: #ffedd5; border: 1px solid #fdba74; overflow: hidden; }
.gpu-accrual-bar i { display: block; height: 100%; width: 0; border-radius: 5px; transition: width 0.12s linear; }
.gpu-accrual-lane:nth-of-type(1) .gpu-accrual-bar i { background: #f59e0b; }
.gpu-accrual-lane:nth-of-type(2) .gpu-accrual-bar i { background: #0f766e; }
@media (max-width: 700px) {
  .gpu-accrual-lane { grid-template-columns: 96px 1fr 62px; }
}

/* ============================================================================
   DESIGN SYSTEM
   One type scale, one page frame, one set of accents, one card/table/label
   treatment. Appended last on purpose: this block is the single authority for
   anything that must read the same on every slide. Per-slide rules above keep
   their component internals (RTL instrument panels, 3D diagrams, charts).
   ========================================================================== */
:root {
  /* type scale — display is for the two bookend slides only */
  --fs-display: clamp(40px, 5vw, 66px);
  --fs-h1:      clamp(27px, 2.9vw, 40px);
  --fs-h2:      19px;
  --fs-lead:    16.5px;
  --fs-body:    14.5px;
  --fs-cap:     12px;
  --fs-label:   10.5px;

  /* frame */
  --slide-max: 1300px;
  --gutter:    40px;
  --pad-top:   26px;
  --pad-bot:   30px;
  --measure:   64ch;      /* readable line length for lead paragraphs */

  /* accent semantics — teal = ours/on-die, blue = HBM/off-chip,
     amber = energy cost / weight traffic, slate = neutral */
  --c-ours:      #0f766e;
  --c-ours-tint: #ecfdf5;
  --c-ours-line: #5eead4;
  --c-mem:       #1d4ed8;
  --c-mem-tint:  #eff6ff;
  --c-mem-line:  #93c5fd;
  --c-cost:      #b45309;
  --c-cost-tint: #fffaf5;
  --c-cost-line: #fdba74;
  --c-neut:      #64748b;

  /* surfaces */
  --surface:   #ffffff;
  --surface-2: #f8fafc;
  --hairline:  #e2e8f0;
  --radius:    12px;
}

/* ---- frame: every slide shares one gutter and vertical rhythm ------------ */
.deck .slide {
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
.deck .wl-wrap,
.deck .kp-wrap,
.deck .as-wrap,
.deck .pr-wrap,
.deck .md-wrap,
.deck .spec-clean,
.deck .spec-viz {
  max-width: var(--slide-max);
  margin-inline: auto;
}

/* ---- headings: one size everywhere, display only on the bookends -------- */
.deck .slide .slide-h {
  font: 700 var(--fs-h1)/1.14 var(--sans);
  letter-spacing: -0.028em;
  max-width: 32ch;
  margin: 0 auto 10px;
  text-align: center;
  color: var(--ink);
}
body.on-title .slide .slide-h,
body.on-thanks .slide .slide-h {
  font-size: var(--fs-display);
  line-height: 1.04;
  letter-spacing: -0.042em;
  max-width: 20ch;
}
/* the 22ch clamp here was wrapping five titles onto two lines with ~600px
   of unused width to their right */
.deck .wl-title,
.deck .kp-title,
.deck .as-title,
.deck .pr-title,
.deck .md-title,
.deck .spec-viz .spec-title,
.deck .spec-clean .spec-title {
  font-size: var(--fs-h1);
  max-width: 32ch;
}

/* ---- lead paragraph under the title ------------------------------------- */
.deck .wl-sub,
.deck .kp-sub,
.deck .as-sub,
.deck .pr-sub,
.deck .md-sub,
.deck .spec-subtitle,
.deck .replica-lead,
.deck .gpu-lead,
.deck .slide-title .deck-sub {
  font-size: var(--fs-lead);
  line-height: 1.5;
  max-width: var(--measure);
  margin-inline: auto;
  color: #475569;
}

/* ---- eyebrow / kicker / section label: 36 variants, one look ------------ */
.deck .title-kicker,
.deck .eyebrow,
.deck .replica-k,
.deck .wl-stat-k,
.deck .as-panel-k,
.deck .thanks-k,
.deck .util-k,
.deck .mp-k,
.deck .mp-meter-k,
.deck .gpu-pane-k,
.deck .gpu-story-k,
.deck .nn-row-k,
.deck .nn-eq-k,
.deck .spec-stat-label {
  font-family: var(--mono);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--c-neut);
}
.deck .title-kicker,
.deck .thanks-k,
.deck .nn-eq-k { color: var(--c-ours); }

/* ---- cards: one border, radius and shadow ------------------------------- */
.deck .title-card,
.deck .as-panel,
.deck .mech-panel,
.deck .moe-panel,
.deck .wl-stat,
.deck .spec-stat-card,
.deck .thanks-grid article,
.deck .spec-insight-box,
.deck .nn-mech-card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: none;
}
/* the one "this is ours" emphasis treatment */
.deck .title-card.is-rom,
.deck .mech-panel.mech-fused,
.deck .moe-panel.moe-fused,
.deck .spec-stat-card.highlight {
  background: var(--c-ours-tint);
  border-color: var(--c-ours-line);
}

/* ---- tables: 10 implementations, one language --------------------------- */
.deck .wl-tbl,
.deck .kp-tbl,
.deck .pr-tbl,
.deck .md-tbl,
.deck .as-tbl,
.deck .mech-tbl,
.deck .roadmap-tbl,
.deck .spec-clean-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-body);
  background: var(--surface);
}
.deck .wl-tbl thead th,
.deck .kp-tbl thead th,
.deck .pr-tbl thead th,
.deck .md-tbl thead th,
.deck .as-tbl thead th,
.deck .mech-tbl thead th,
.deck .roadmap-tbl thead th,
.deck .spec-clean-table thead th {
  background: var(--surface-2);
  color: #334155;
  font-family: var(--mono);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-align: left;
  padding: 9px 12px;
  border-bottom: 1px solid var(--hairline);
}
.deck .wl-tbl td,
.deck .kp-tbl td,
.deck .pr-tbl td,
.deck .md-tbl td,
.deck .as-tbl td,
.deck .mech-tbl td,
.deck .roadmap-tbl td,
.deck .spec-clean-table td {
  padding: 8px 12px;
  border-bottom: 1px solid #f1f5f9;
  color: #15202b;
}
/* numeric columns line up */
.deck .kp-tbl td,
.deck .pr-tbl td,
.deck .md-tbl td,
.deck .roadmap-tbl td,
.deck .spec-clean-table td { font-variant-numeric: tabular-nums; }

/* ---- provenance badges: measured vs simulated must never look alike ----- */
.deck .badge.is-measured,
.deck .prov-measured {
  background: var(--c-ours-tint);
  border: 1px solid var(--c-ours-line);
  color: #134e4a;
}
.deck .badge.is-simulated,
.deck .prov-simulated {
  background: var(--surface-2);
  border: 1px dashed #cbd5e1;
  color: var(--c-neut);
}

/* ---- nav: 15 chips overflowed 1600px and clipped the end labels --------- */
.deck-nav {
  position: relative;
  scrollbar-width: none;
  mask-image: linear-gradient(90deg, transparent 0, #000 14px,
                               #000 calc(100% - 22px), transparent 100%);
}
.deck-nav::-webkit-scrollbar { height: 0; }

/* ---- scaling slide: three axes, one slide -------------------------------- */
.deck .slide-scaling { flex: 1; padding-top: var(--pad-top); padding-bottom: var(--pad-bot); overflow-y: auto; }
.deck .sc-wrap { max-width: var(--slide-max); margin-inline: auto; }
.deck .sc-head { margin-bottom: 16px; text-align: center; }
.deck .sc-sub {
  font-size: var(--fs-lead); line-height: 1.5; color: #475569;
  max-width: var(--measure); margin: 0 auto;
}
.deck .sc-tabs { display: flex; justify-content: center; gap: 6px; margin-bottom: 18px; }
.deck .sc-tab {
  padding: 7px 16px; border: 1px solid var(--hairline); border-radius: 999px;
  background: var(--surface); color: #475569;
  font: 600 var(--fs-body)/1.2 var(--sans); cursor: pointer;
}
.deck .sc-tab:hover { border-color: var(--c-ours-line); color: var(--c-ours); }
.deck .sc-tab[aria-selected="true"] {
  background: var(--c-ours); border-color: var(--c-ours); color: #fff;
}
.deck .sc-claim {
  margin: 0 auto 16px; max-width: var(--measure); text-align: center;
  font-size: var(--fs-body); line-height: 1.5; color: #475569;
}
.deck .sc-claim strong { color: var(--ink); }
.deck .sc-panel[hidden] { display: none !important; }

/* ---- packages slide: the six machines as physical hardware --------------- */
.deck .slide-packages { flex: 1; padding-top: var(--pad-top); padding-bottom: var(--pad-bot); overflow-y: auto; }
.deck .pk-wrap { max-width: var(--slide-max); margin-inline: auto; }
.deck .pk-head { margin-bottom: 16px; text-align: center; }
.deck .pk-sub {
  font-size: var(--fs-lead); line-height: 1.5; color: #475569;
  max-width: var(--measure); margin: 0 auto;
}
.deck .pk-foot {
  margin: 14px auto 0; text-align: center;
  font: var(--fs-cap)/1.5 var(--sans); color: var(--c-neut);
}
.deck .pk-lg {
  display: inline-block; width: 8px; height: 8px;
  border-radius: 2px; margin: 0 2px -1px 6px;
}
.deck .pk-cost { background: var(--c-cost); }
.deck .pk-mem  { background: var(--c-mem); }
.deck .pk-ours { background: var(--c-ours); }

/* cross-reference line where slide 5's duplicated rival cards used to sit */
.deck .nn-xref {
  margin: 2px 0 12px; max-width: var(--measure);
  font-size: var(--fs-cap); line-height: 1.55; color: var(--c-neut);
}
.deck .nn-xref strong { color: var(--c-ours); }

/* the duplicated layer graph on the Q = yW slide, collapsed by default */
.deck .nn-where { grid-template-columns: minmax(0, 1fr); }
.deck .nn-map-fold { grid-column: 1 / -1; }
.deck .nn-map-fold > summary {
  cursor: pointer; list-style: none;
  padding: 6px 0 2px;
  font: var(--fs-cap)/1.5 var(--mono); color: var(--c-neut);
}
.deck .nn-map-fold > summary::-webkit-details-marker { display: none; }
.deck .nn-map-fold > summary::before { content: "▸ "; color: #94a3b8; }
.deck .nn-map-fold[open] > summary::before { content: "▾ "; }
.deck .nn-map-fold > summary:hover { color: var(--c-ours); }
.deck .nn-map-fold > summary strong { color: var(--c-ours); font-weight: 600; }

/* roadmap: the per-lever mechanism bars, collapsed so the table and the live
   levers both fit one screen */
.deck .rm-mech-fold > summary {
  cursor: pointer; list-style: none; padding: 8px 0 4px;
  font: var(--fs-cap)/1.5 var(--mono); color: var(--c-neut);
}
.deck .rm-mech-fold > summary::-webkit-details-marker { display: none; }
.deck .rm-mech-fold > summary::before { content: "▸ "; color: #94a3b8; }
.deck .rm-mech-fold[open] > summary::before { content: "▾ "; }
.deck .rm-mech-fold > summary:hover { color: var(--c-ours); }

/* cost slide · roadmap tab: fit the table, the live levers and the die view
   on one screen without hiding any of them */
.deck .slide-cost .roadmap-tbl th,
.deck .slide-cost .roadmap-tbl td { padding: 5px 12px; }
.deck .slide-cost .rm-walk { gap: 12px; }
.deck .slide-cost .rm-eq,
.deck .slide-cost .rm-die { max-height: 270px; overflow: hidden; }
.deck .slide-cost .rm-die svg { max-height: 250px; width: 100%; height: auto; }
.deck .slide-cost .sc-claim { margin-bottom: 10px; }
.deck .slide-cost .spec-table-section { margin-bottom: 6px; }

/* ---- slide 3 · the bit-exact compare is the hero ------------------------- */
.deck .slide-replica .replica-run {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  justify-content: center;
  max-width: 900px; margin: 4px auto 0;
}
.deck .slide-replica .replica-run input[type="text"] {
  flex: 1 1 420px; min-width: 0;
  padding: 11px 14px;
  border: 1px solid var(--hairline); border-radius: 10px;
  font: var(--fs-body)/1.4 var(--sans); color: var(--ink);
  background: var(--surface);
}
.deck .slide-replica .replica-run input[type="text"]:focus {
  outline: none; border-color: var(--c-ours);
  box-shadow: 0 0 0 3px #0f766e1f;
}
.deck .slide-replica .replica-run button[type="submit"] {
  padding: 11px 20px; border: 1px solid var(--c-ours); border-radius: 10px;
  background: var(--c-ours); color: #fff;
  font: 600 var(--fs-body)/1.2 var(--sans); cursor: pointer;
}
.deck .slide-replica .replica-run button[type="submit"]:hover:not(:disabled) { background: #0b5f58; }
.deck .slide-replica .replica-run button[type="submit"]:disabled { opacity: .55; cursor: default; }

.proof-verdict {
  max-width: 900px;
  margin: 12px auto 14px;
  padding: 13px 16px 14px;
  border: 1px solid var(--c-ours-line);
  border-radius: 14px;
  background: var(--c-ours-tint);
}
.pv-state { display: flex; align-items: center; gap: 10px; }
.pv-k {
  font: 600 var(--fs-label)/1.3 var(--mono);
  letter-spacing: .09em; text-transform: uppercase; color: #134e4a;
}
.pv-detail {
  margin: 7px 0 0;
  font: var(--fs-body)/1.5 var(--sans); color: #134e4a;
}
.pv-checks {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px; margin: 12px 0 0; padding: 11px 0 0; list-style: none;
  border-top: 1px solid #99f6e4;
}
.pv-checks li { display: grid; gap: 1px; text-align: center; }
.pv-checks b {
  font: 600 17px/1.15 var(--sans); color: var(--c-ours);
  font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
}
.pv-checks span { font: var(--fs-cap)/1.35 var(--mono); color: #47695f; }
.proof-verdict #mismatchBox {
  margin: 10px 0 0; padding: 9px 11px; max-height: 120px; overflow: auto;
  border: 1px solid #fecaca; border-radius: 8px; background: #fff5f5;
  font: 10.5px/1.5 var(--mono); color: #7f1d1d; white-space: pre-wrap;
}
@media (max-width: 780px) {
  .pv-checks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* The two RTL reference panes are supporting evidence now that the verdict is
   the hero, so give them a bounded, scrollable region instead of letting them
   push the slide 380px past the fold. */
.deck .slide-replica > .replica-split {
  max-height: 430px;
  overflow: auto;
  padding-right: 2px;
  scrollbar-width: thin;
}
.deck .slide-replica > .replica-split::after {
  content: "";
  position: sticky; bottom: 0; left: 0;
  display: block; height: 18px;
  margin-top: -18px;
  background: linear-gradient(180deg, transparent, #ffffffe6);
  pointer-events: none;
}

/* shared fold for supporting material demoted off the first screen */
.deck .deck-fold { margin: 6px 0 0; }
.deck .deck-fold > summary {
  cursor: pointer; list-style: none; padding: 8px 0 4px;
  font: var(--fs-cap)/1.5 var(--mono); color: var(--c-neut);
}
.deck .deck-fold > summary::-webkit-details-marker { display: none; }
.deck .deck-fold > summary::before { content: "▸ "; color: #94a3b8; }
.deck .deck-fold[open] > summary::before { content: "▾ "; }
.deck .deck-fold > summary:hover { color: var(--c-ours); }

/* tighter slide headers on the two densest comparison slides */
.deck .slide-mechanisms .kp-sub,
.deck .slide-moe .kp-sub { font-size: var(--fs-body); max-width: 76ch; }

/* provenance of the KPI table's energy column */
.deck .kp-energy-note {
  margin: 8px 0 0; max-width: 96ch;
  font: var(--fs-cap)/1.55 var(--sans); color: var(--c-neut);
}

/* the weight-walk column is the like-for-like one, and our own row is the
   reference the last column is relative to */
.deck .kp-tbl .kp-walk { font-weight: 600; color: var(--c-cost); font-variant-numeric: tabular-nums; }
.deck .kp-tbl tr.kp-self { background: var(--c-ours-tint); }
.deck .kp-tbl tr.kp-self .kp-name { color: #134e4a; }
.deck .kp-tbl tr.kp-self .kp-walk { color: var(--c-ours); }
.deck .kp-tbl .kp-th-sub { font-weight: 400; text-transform: none; letter-spacing: 0; opacity: .7; }
.deck .kp-note-fold { margin-top: 4px; }
.deck .kp-note-fold .kp-energy-note { margin-top: 4px; }

/* third evidence class: the number is analytical but the dataflow is real RTL */
.deck .kp-tbl .kp-tag.kp-rtl {
  margin-left: 5px;
  background: var(--c-mem-tint);
  border: 1px solid var(--c-mem-line);
  color: #1e3a8a;
}

/* "Peak used": how much of a machine's own ceiling actually does work */
.deck .kp-tbl .kp-used { line-height: 1.25; }
.deck .kp-used-n { display: block; font-weight: 600; font-variant-numeric: tabular-nums; }
.deck .kp-used-d { display: block; font: 9.5px/1.3 var(--mono); color: var(--c-neut); }
.deck .kp-tbl tr.kp-self .kp-used-n { color: var(--c-ours); }
/* the extra "peak used" line makes rows taller; claw back the difference */
.deck .slide-kpis .kp-tbl th,
.deck .slide-kpis .kp-tbl td { padding-top: 7px; padding-bottom: 7px; }