:root {
  --bg: #f2efe8;
  --surface: #e7e1d4;
  --paper: #f7f4ee;
  --ink: #1a1916;
  --muted: #5c5952;
  --line: #cdc6b8;
  --line-strong: #b7af9f;
  --accent: #b23e24;
  --accent-fill: #cf4d2f;
  --sans: Inter, "Helvetica Neue", "PingFang SC", "Noto Sans SC", "Noto Sans CJK SC", system-ui, sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Songti SC", "Noto Serif SC", "Noto Serif CJK SC", "Source Han Serif SC", Georgia, serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --lane: 4.4rem;
  --pred: 2.15rem;
  --gap: 0.45rem;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}

html.i18n-wait body {
  opacity: 0;
}

::selection {
  background: rgba(178, 62, 36, 0.18);
  color: var(--ink);
}

a {
  color: inherit;
}

.page {
  width: min(100% - 2.5rem, 68rem);
  margin: 0 auto;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 30;
  padding: 0.45rem 0.75rem;
  background: var(--ink);
  color: var(--bg);
  font-size: 0.875rem;
  text-decoration: none;
}

.skip-link:focus {
  top: 0.75rem;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4.25rem;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  color: inherit;
  text-decoration: none;
}

.brand-mark {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  width: 1.35rem;
  height: 1.35rem;
  flex: none;
}

.brand-mark i {
  display: block;
  border-radius: 1px;
  background: var(--ink);
}

.brand-mark i:nth-child(1),
.brand-mark i:nth-child(4) {
  background: var(--accent);
}

.brand-name {
  font-family: var(--serif);
  font-size: 1.15rem;
  letter-spacing: -0.02em;
}

.header-end {
  display: flex;
  align-items: center;
  gap: clamp(0.85rem, 2vw, 1.6rem);
}

nav {
  display: flex;
  gap: 1.1rem;
  font-size: 0.92rem;
}

nav a {
  color: var(--ink);
  text-decoration: none;
}

nav a[aria-current="page"] {
  color: var(--accent);
}

nav a:hover,
nav a:focus-visible {
  color: var(--accent);
  outline: none;
}

.lang-switch {
  display: inline-flex;
  align-items: center;
  padding: 0.16rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 70%, white);
}

.lang-switch button {
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  line-height: 1;
  min-height: 1.85rem;
  padding: 0.38rem 0.62rem;
}

.lang-switch button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--bg);
}

.lang-switch button:focus-visible,
.button:focus-visible,
.catalog-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.hero {
  padding: 3.2rem 0 1.4rem;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0 0 0.85rem;
  color: var(--accent);
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.eyebrow span[aria-hidden="true"] {
  color: var(--line-strong);
}

h1 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(3.2rem, 8vw, 5.4rem);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 0.95;
}

.lede {
  max-width: 38rem;
  margin: 1.25rem 0 0;
  font-size: 1.12rem;
  line-height: 1.55;
}

.section {
  padding: 1.5rem 0 4.5rem;
}

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.4rem;
  border-top: 1px solid var(--ink);
  padding-top: 0.85rem;
}

.section-head h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.85rem;
  font-weight: 500;
}

.section-note {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.catalog {
  list-style: none;
  margin: 0;
  padding: 0;
}

.catalog li {
  border-bottom: 1px solid var(--line);
}

.catalog-link,
.catalog-item {
  display: grid;
  grid-template-columns: 3.2rem minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 1rem 1.5rem;
  align-items: center;
  padding: 1.15rem 0.2rem;
  color: inherit;
  text-decoration: none;
}

.catalog-link:hover {
  background: color-mix(in srgb, var(--surface) 55%, transparent);
}

.catalog-link:hover .go {
  color: var(--accent);
}

.num {
  font-family: var(--serif);
  font-size: 1.15rem;
  color: var(--accent);
}

.catalog h3 {
  margin: 0.15rem 0 0.2rem;
  font-family: var(--serif);
  font-size: 1.65rem;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.catalog p {
  margin: 0;
  color: var(--muted);
  font-size: 0.98rem;
}

.kicker {
  display: inline-flex;
  gap: 0.45rem;
  align-items: center;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.kicker .live {
  color: var(--accent);
}

.mnemonic {
  margin: 0;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 0.82rem;
  line-height: 1.45;
}

.mnemonic .op-name {
  color: var(--accent);
}

.catalog-item.is-planned .mnemonic,
.catalog-item.is-planned h3 {
  color: var(--muted);
}

.go {
  display: inline-block;
  margin-top: 0.35rem;
  font-size: 0.92rem;
}

.site-footer {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1.1rem 0 2rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.88rem;
}

.site-footer a {
  color: var(--ink);
}

.demo-main {
  padding-bottom: 4rem;
}

.back {
  display: inline-block;
  margin: 1.35rem 0 0;
  color: var(--muted);
  font-size: 0.92rem;
  text-decoration: none;
}

.back:hover,
.back:focus-visible {
  color: var(--accent);
  outline: none;
}

.demo-head {
  padding: 1.1rem 0 1.4rem;
}

.demo-head h1 {
  font-size: clamp(3rem, 7vw, 4.6rem);
}

.insn {
  margin: 0 0 1.15rem;
  padding: 0.85rem 1rem 1rem;
  background: var(--ink);
  color: var(--bg);
  border-radius: 12px;
}

.insn figcaption {
  color: #97917f;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.insn pre {
  margin: 0.4rem 0 0;
  white-space: pre-wrap;
  word-break: break-word;
}

.insn code {
  font-family: var(--mono);
  font-size: clamp(0.86rem, 2.3vw, 1.08rem);
  color: #f2efe8;
}

.insn .op-name {
  color: #e0603f;
}

.bench {
  width: fit-content;
  max-width: 100%;
  padding: 1rem 1rem 1.05rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
}

.bench-scroll {
  overflow-x: auto;
}

.stage-top,
.stage-body,
.stage-foot {
  display: grid;
  grid-template-columns: 2.7rem var(--lane) auto;
  column-gap: var(--gap);
  justify-content: start;
}

.stage-top {
  grid-template-rows: auto var(--pred) auto var(--lane);
  row-gap: 0.3rem;
  align-items: stretch;
}

.col-label {
  margin: 0;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.75rem;
  text-align: right;
  align-self: center;
}

.label-p0 {
  grid-column: 1;
  grid-row: 4;
}

.label-z0 {
  grid-column: 2;
  grid-row: 4;
}

.quad-stack {
  display: grid;
  grid-column: 3;
  grid-row: 1 / -1;
  grid-template-rows: subgrid;
  row-gap: 0.3rem;
}

.quad-label {
  margin: 0;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.75rem;
}

.quad,
.col-stack {
  display: grid;
  gap: var(--gap);
}

.quad {
  grid-template-columns: repeat(4, var(--lane));
}

.col-stack {
  grid-template-rows: repeat(4, var(--lane));
}

.stage-body {
  margin-top: var(--gap);
}

.pred,
.lane,
.cell {
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--paper);
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

.pred {
  width: 100%;
  height: var(--pred);
  color: var(--muted);
  font-size: 0.78rem;
}

.col-stack .pred {
  height: 100%;
}

.lane,
.cell {
  width: 100%;
  height: 100%;
  font-size: 1.05rem;
}

.tile {
  display: grid;
  grid-template-columns: repeat(4, var(--lane));
  grid-template-rows: repeat(4, var(--lane));
  gap: var(--gap);
  width: max-content;
}

.cell {
  position: relative;
  overflow: hidden;
}

.cell-index {
  position: absolute;
  top: 0.22rem;
  left: 0.32rem;
  z-index: 1;
  color: var(--muted);
  font-size: 0.62rem;
  letter-spacing: 0.02em;
}

.cell-value {
  position: relative;
  z-index: 1;
  color: var(--muted);
}

.wash {
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: 50% 100%;
  transition: transform 220ms cubic-bezier(0.25, 0.8, 0.3, 1), background-color 220ms ease;
}

.cell.is-done .wash {
  background: color-mix(in srgb, var(--accent) 18%, var(--paper));
  transform: scaleY(1);
}

.cell.is-hot .wash {
  background: var(--accent);
  transform: scaleY(1);
}

.cell.is-done .cell-value {
  color: var(--ink);
  font-weight: 650;
}

.cell.is-hot .cell-value,
.cell.is-hot .cell-index {
  color: var(--bg);
}

.cell.is-armed {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.cell.is-row:not(.is-hot):not(.is-done),
.cell.is-col:not(.is-hot):not(.is-done) {
  background: color-mix(in srgb, var(--accent) 8%, var(--paper));
}

.pred.is-live,
.lane.is-live {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--paper));
  color: var(--accent);
}

.stage.is-instant .wash,
.stage.is-instant .pred,
.stage.is-instant .lane,
.stage.is-instant .cell {
  transition: none;
}

.tile-name {
  grid-column: 3;
  margin: 0.55rem 0 0;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.78rem;
  text-align: center;
}

.formula {
  width: 0;
  min-width: 100%;
  min-height: 3.2em;
  margin: 0.95rem 0 0;
  font-family: var(--mono);
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
}

.values-line {
  margin-top: 0.9rem;
}

.controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 0.75rem;
  width: 0;
  min-width: 100%;
  margin-top: 0.85rem;
}

.button {
  appearance: none;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  font-size: 0.95rem;
  min-height: 2.75rem;
  padding: 0.4rem 1.15rem;
}

.button-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
}

.button-primary:hover,
.button-primary:focus-visible {
  background: var(--accent-fill);
  border-color: var(--accent-fill);
}

.button:hover {
  border-color: var(--accent);
}

.button:disabled {
  opacity: 0.4;
  cursor: default;
}

.step-count {
  margin: 0 0 0 auto;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}

.motion-note {
  margin: 0.75rem 0 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.notes {
  margin-top: 1.6rem;
}

.notes h2 {
  margin: 0 0 0.8rem;
  font-family: var(--serif);
  font-size: 1.55rem;
  font-weight: 500;
}

.notes ol {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.notes li {
  margin: 0;
  padding: 0.95rem 0.95rem 1rem;
  background: color-mix(in srgb, var(--surface) 48%, var(--bg));
  border-radius: 12px;
}

.notes h3 {
  margin: 0 0 0.35rem;
  font-size: 0.98rem;
}

.notes p {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
}

.notes code {
  font-family: var(--mono);
  font-size: 0.86em;
  color: var(--ink);
}

@media (max-width: 720px) {
  :root {
    --lane: 3rem;
    --gap: 0.32rem;
  }

  .bench {
    padding: 0.75rem;
  }

  .cell,
  .lane {
    font-size: 0.95rem;
  }
}

@media (max-width: 380px) {
  :root {
    --lane: 2.5rem;
  }

  .cell-index {
    display: none;
  }

  .col-label {
    font-size: 0.68rem;
  }
}

@media (max-width: 800px) {
  .catalog-link,
  .catalog-item {
    grid-template-columns: 2.4rem minmax(0, 1fr);
  }

  .mnemonic {
    grid-column: 2;
  }

  .notes ol {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .page {
    width: min(100% - 1.5rem, 68rem);
  }

  .header-end nav {
    display: none;
  }

  .step-count {
    margin-left: 0;
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Predicate bits are buttons: click to toggle a lane off. */
button.pred {
  appearance: none;
  padding: 0;
  cursor: pointer;
  transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease;
}

button.pred:hover {
  border-color: var(--accent);
}

button.pred:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.pred.is-off {
  color: var(--line-strong);
  border-style: dashed;
  background: transparent;
}

.pred.is-dead {
  border-color: var(--line-strong);
  border-style: dashed;
  color: var(--muted);
  background: color-mix(in srgb, var(--muted) 10%, var(--paper));
}

/* A cell the predicate pair left unchanged (/m). */
.cell.is-kept {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--muted) 40%, transparent);
}

.cell.is-kept .cell-value {
  color: var(--muted);
}

/* View toggle (step-by-step / parallel). */
.seg {
  display: inline-flex;
  align-items: center;
  padding: 0.16rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 70%, white);
}

.seg button {
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 650;
  line-height: 1;
  min-height: 2.1rem;
  padding: 0.4rem 0.8rem;
}

.seg button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--bg);
}

.seg button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.button-ghost {
  min-width: 2.75rem;
  padding: 0.4rem 0.6rem;
  font-family: var(--mono);
}

.kbd-note {
  margin: 0.6rem 0 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.notes li.wide {
  grid-column: 1 / -1;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Register lanes used as a result: arm/hot/done/kept states without a wash. */
.lane.is-armed {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.lane.is-hot {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
}

.lane.is-done {
  background: color-mix(in srgb, var(--accent) 14%, var(--paper));
  color: var(--ink);
  font-weight: 650;
}

.lane.is-kept {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--muted) 40%, transparent);
}

/* A tile cell acting as an operand source (stores, gathers). */
.cell.is-live {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--paper));
}

/* A whole ZA slice selected by W12. */
.cell.is-slice {
  box-shadow: inset 0 0 0 2px var(--line-strong);
}

/* Horizontal row of labelled register columns, with × and → glyphs. */
.lane-cols {
  display: flex;
  align-items: start; /* in-window memory words share rows with register lanes */
  gap: calc(var(--gap) + 0.25rem);
  width: max-content;
}

.lane-col {
  display: grid;
  row-gap: 0.3rem;
}

.lane-col .quad-label {
  text-align: center;
}

.lane-col .col-stack {
  grid-template-rows: repeat(4, var(--lane));
}

.op-glyph {
  align-self: center;
  margin: 0;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 1.05rem;
  padding-bottom: 0.2rem;
}

/* Memory words: an address plus the stored value. */
.mem-word {
  display: grid;
  grid-template-columns: 4.6rem var(--lane);
  align-items: center;
  gap: 0.45rem;
}

.mem-addr {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.72rem;
  text-align: right;
}

.mem-value {
  display: grid;
  place-items: center;
  height: var(--lane);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface);
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.05rem;
  transition: background-color 220ms ease, border-color 220ms ease;
}

.mem-value.is-live {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--paper));
}

.mem-value.is-hot {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
}

.mem-value.is-done {
  background: color-mix(in srgb, var(--accent) 14%, var(--paper));
  color: var(--ink);
  font-weight: 650;
}

.mem-value.is-kept {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--muted) 40%, transparent);
}

.mem-value.is-out {
  opacity: 0.4;
}

/* Predicate bits drawn as a result (whilelt): not clickable. */
span.pred {
  cursor: default;
}

span.pred:hover {
  border-color: var(--line-strong);
}

/* A lane that this instruction does not select (uzp odd elements). */
.lane.is-out {
  opacity: 0.4;
}

/* Scalar stepper (whilelt x0 / x1). */
.stepper {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.stepper-label {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.85rem;
}

.stepper .button-ghost {
  min-width: 2.3rem;
  min-height: 2.3rem;
  padding: 0.2rem 0.5rem;
}

.stepper-value {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 1rem;
  min-width: 1.6ch;
  text-align: center;
}

/* Data-type and size note under the instruction figure. */
.spec-note {
  margin: -0.35rem 0 1.15rem;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.78rem;
  line-height: 1.55;
}

/* Half-precision lanes: half height, half the visual weight (FMLAL). */
.col-stack.eight {
  grid-template-rows: repeat(8, calc(var(--lane) / 2));
}

.lane.half-lane {
  height: calc(var(--lane) / 2);
  font-size: 0.85rem;
}

/* Overview strip of ZA slices (FMLAL): sixteen thin slots. */
.slice-map {
  display: grid;
  grid-template-rows: repeat(16, 1.15rem);
  gap: 2px;
}

.slice-slot {
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 5px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.62rem;
  background: var(--paper);
}

.slice-slot.is-target {
  border-color: var(--accent);
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--paper));
}

/* Two-row zoom tile for a ZA double-vector group (FMLAL). */
.tile.tile-d2 {
  grid-template-rows: repeat(2, var(--lane));
}

/* Roofline concept page */
.bench-wide {
  width: auto;
}

.roofline-chart {
  display: block;
  width: 100%;
  max-width: 720px;
  height: auto;
}

.roofline-chart text {
  font-family: var(--mono);
  font-size: 11px;
  fill: var(--muted);
}

.roofline-chart .grid .axis {
  stroke: var(--line-strong);
}

.roofline-chart .grid .tick {
  stroke: var(--line);
}

#roof-compute {
  stroke: var(--ink);
  stroke-width: 2;
}

#roof-memory {
  stroke: var(--accent);
  stroke-width: 2;
  stroke-dasharray: 5 4;
}

#ridge-line {
  stroke: var(--line-strong);
}

#ridge-dot {
  fill: var(--ink);
}

#ridge-text {
  fill: var(--muted);
}

/* The visitor's own measured scalar number (homepage bench). Muted and
   dashed on purpose: a reference point, never a roof. */
#roof-measured {
  display: none;
}

#roof-measured.on {
  display: inline;
}

#roof-measured line {
  stroke: var(--muted);
  stroke-width: 1.5;
  stroke-dasharray: 2 4;
}

#roof-measured text {
  fill: var(--muted);
  font-style: italic;
}

.roof-dot circle {
  fill: var(--accent);
}

.roof-dot text {
  fill: var(--ink);
}

.roof-dot.is-compute circle {
  fill: var(--ink);
}

.slider-row {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.9rem;
}

.slider-row input[type="range"] {
  width: 11rem;
  accent-color: var(--accent);
}

.slider-row output {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  min-width: 2.4ch;
  text-align: right;
}

.slider-unit {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.82rem;
}

.roofline-table {
  border-collapse: collapse;
  margin-top: 0.9rem;
  font-size: 0.88rem;
}

.roofline-table th,
.roofline-table td {
  padding: 0.35rem 0.9rem 0.35rem 0;
  text-align: left;
  border-bottom: 1px solid var(--line);
}

.roofline-table thead th {
  color: var(--muted);
  font-size: 0.78rem;
}

.roofline-table td.num {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

.roofline-table tbody th {
  font-weight: 600;
}

/* Microkernel page: source grids, panels, vector strips, slots. */
.mk-flow {
  display: grid;
  gap: 1.1rem;
  width: max-content;
}

.mk-sect {
  display: grid;
  gap: 0.5rem;
}

.mk-phase {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  margin: 0;
  color: var(--accent);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.mk-tag {
  padding: 0.08rem 0.5rem;
  border: 1px dashed var(--line-strong);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.68rem;
  letter-spacing: 0.02em;
  text-transform: none;
}

.mk-tag-core {
  border-style: solid;
  border-color: var(--accent);
  color: var(--accent);
}

.mk-pack-row,
.mk-loop-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.mk-box {
  display: grid;
  gap: 0.45rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  transition: opacity 220ms ease, border-color 220ms ease;
}

/* Spotlight: everything not involved in this step fades back. */
.mk-flow.has-focus .mk-box {
  opacity: 0.35;
}

.mk-flow.has-focus .mk-box.is-focus {
  opacity: 1;
  border-color: var(--line-strong);
}

.mk-box-title {
  margin: 0;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.72rem;
}

.mk-path {
  margin: 0;
  color: var(--accent);
  font-family: var(--mono);
  font-size: 0.72rem;
}

.mk-arrow {
  margin: 0;
  color: var(--line-strong);
  font-family: var(--mono);
  font-size: 1rem;
}

.mk-cells {
  display: grid;
  gap: 4px;
  --mk: 2.6rem;
}

.mk-src-a-norm {
  grid-template-columns: repeat(2, var(--mk));
}

.mk-src-a-trans {
  grid-template-columns: repeat(4, var(--mk));
}

.mk-src-b-norm {
  grid-template-columns: repeat(4, var(--mk));
}

.mk-src-b-trans {
  grid-template-columns: repeat(2, var(--mk));
}

.mk-panel {
  grid-template-columns: repeat(2, var(--mk));
}

.mk-cell {
  display: grid;
  place-items: center;
  width: var(--mk);
  height: var(--mk);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--paper);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
  transition: background-color 200ms ease, border-color 200ms ease, opacity 200ms ease, color 200ms ease;
}

.mk-cell.is-live {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--paper));
  color: var(--accent);
}

.mk-cell.is-armed {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.mk-cell.is-hot {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
}

.mk-cell.is-done {
  background: color-mix(in srgb, var(--accent) 14%, var(--paper));
  color: var(--ink);
  font-weight: 650;
}

.mk-cell.is-read {
  opacity: 0.42;
  border-style: dashed;
}

/* The worked example: look at this run of cells. */
.mk-cell.is-pattern {
  box-shadow: 0 0 0 2px var(--accent);
  border-color: var(--accent);
  z-index: 1;
}

.mk-vecs {
  display: grid;
  gap: 0.4rem;
}

.mk-vec {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.mk-vec-label {
  min-width: 3.1rem;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.72rem;
}

.mk-vec-half {
  display: flex;
  gap: 4px;
}

.mk-slots {
  display: flex;
  gap: 0.4rem;
}

.mk-slot {
  display: grid;
  place-items: center;
  min-width: 2.4rem;
  height: 1.7rem;
  border: 1px dashed var(--line-strong);
  border-radius: 6px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.72rem;
  transition: border-color 200ms ease, background-color 200ms ease, color 200ms ease;
}

.mk-slot.is-live {
  border-style: solid;
  border-color: var(--accent);
  color: var(--accent);
}

.mk-slot.is-done {
  border-style: solid;
  border-color: var(--line-strong);
  background: color-mix(in srgb, var(--accent) 10%, var(--paper));
  color: var(--ink);
}

.mk-tiles {
  --lane: 3.4rem;
  display: flex;
  gap: 0.55rem;
  align-items: flex-start;
}

.mk-tile-col {
  display: grid;
  gap: 0.25rem;
}

.mk-tile-col .quad-label {
  text-align: center;
}

.mk-tiles .cell {
  font-size: 0.95rem;
}

.mk-tiles .cell-index {
  font-size: 0.58rem;
}

/* Roofline clock probe */
.probe-lede {
  max-width: 46rem;
  margin: 0 0 0.9rem;
  color: var(--muted);
  font-size: 0.95rem;
}

.probe-bench {
  width: auto;
}

.probe-bars {
  display: grid;
  gap: 0.55rem;
  margin-top: 0.95rem;
}

.probe-row {
  display: grid;
  grid-template-columns: 9.5rem minmax(8rem, 1fr) 4rem;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.85rem;
}

.probe-label {
  color: var(--muted);
}

.probe-track {
  display: block;
  height: 0.9rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 60%, var(--bg));
  overflow: hidden;
}

.probe-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--accent);
  transition: width 200ms ease;
}

.probe-row[data-kind="memory"] .probe-fill {
  background: var(--ink);
}

.probe-row[data-kind="total"] .probe-fill {
  background: var(--line-strong);
}

.probe-value {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.diag-table {
  max-width: 52rem;
}

.diag-table td {
  color: var(--muted);
  font-size: 0.88rem;
}

/* Memory-in-flight concept page: a four-row cache-traffic timeline. */
.mflow {
  display: grid;
  grid-template-columns: 8.5rem repeat(10, minmax(3.4rem, auto));
  gap: 3px;
  width: max-content;
}

.mflow-band {
  display: contents;
}

.mflow-band-k {
  margin: 0 0 0.3rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--line-strong);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-align: center;
}

.mflow-band-k2 {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.mflow-head {
  display: grid;
  align-content: start;
  gap: 0.18rem;
  padding: 0.3rem 0.5rem 0.3rem 0;
}

.mflow-name {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 650;
}

.mflow-budget {
  margin: 0;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.62rem;
}

.mflow-quietnote {
  color: var(--line-strong);
}

.mflow-meter {
  height: 5px;
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
  background: var(--paper);
}

.mflow-meter i {
  display: block;
  width: 0;
  height: 100%;
  background: var(--accent);
  transition: width 260ms ease;
}

.mflow-meter i.is-over {
  background: var(--ink);
}

.mflow-use {
  margin: 0;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.62rem;
  font-variant-numeric: tabular-nums;
}

.mflow-use.is-over {
  color: var(--accent);
  font-weight: 650;
}

.mflow-cell {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-height: 3.2rem;
  padding: 3px;
  border: 1px dashed var(--line);
  border-radius: 6px;
  transition: border-color 200ms ease, background-color 200ms ease;
}

.mflow-cell.is-done {
  border-style: solid;
  border-color: var(--line-strong);
}

.mflow-cell.is-active {
  border-color: var(--accent);
  border-style: solid;
  background: color-mix(in srgb, var(--accent) 6%, var(--paper));
}

.mflow-chip {
  display: block;
  padding: 0.12rem 0.28rem;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  font-family: var(--mono);
  font-size: 0.62rem;
  line-height: 1.3;
  text-align: center;
}

.mflow-chip.is-read {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--paper));
  color: var(--accent);
}

.mflow-chip.is-write {
  border: 1px solid var(--accent);
  border-style: dashed;
  background: color-mix(in srgb, var(--accent) 18%, var(--paper));
  color: var(--ink);
}

.mflow-chip.is-flight {
  border-style: dashed;
  color: var(--muted);
}

.mflow-chip.is-done {
  color: var(--muted);
  background: color-mix(in srgb, var(--muted) 8%, var(--paper));
}

.mflow-chip.is-op {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--bg);
  font-weight: 650;
}

/* ADDHA's stage has no z0 column-stack beside the tile (the vector sits in
   the quad above), so the tile would auto-place into grid column 2 and stop
   lining up with the z0.s lanes it is supposed to correspond to column for
   column. Pin it to column 3, where the lanes and the tile-name already are. */
[data-addha] .stage-body .tile {
  grid-column: 3;
}

/* The roofline page's slider rows, unit labels and probe rows are wider than a
   phone viewport, which pushed the whole page into horizontal scroll (16 px at
   390 px wide). Let the slider row wrap and let the probe rows stack the track
   under the label instead of running past the edge. */
@media (max-width: 460px) {
  .slider-row {
    flex-wrap: wrap;
  }

  .probe-row {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: 0.3rem;
  }

  .probe-label {
    grid-column: 1;
    grid-row: 1;
  }

  .probe-value {
    grid-column: 2;
    grid-row: 1;
  }

  .probe-track {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

/* Home-page glossary: the abbreviations every page leans on, defined once. */
.glossary {
  margin: 0;
  display: grid;
  grid-template-columns: 3.2rem minmax(0, 1fr);
  gap: 0.7rem 1rem;
}

.glossary dt {
  font-family: var(--mono);
  font-size: 0.82rem;
  color: var(--accent);
}

.glossary dd {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.55;
  max-width: 44rem;
}

@media (max-width: 560px) {
  .glossary {
    grid-template-columns: 1fr;
    gap: 0.15rem;
  }

  .glossary dd {
    margin-bottom: 0.6rem;
  }
}

/* --- Memory in flight: the three moves, and the marks that prove them -----
   The page's argument is a plan (three moves) plus a collision. These rules
   carry the three visual marks that let a reader check each move in the
   timeline by eye: the two-slot rail for a transfer in flight, the hit tags
   on the loads a prefetch served, and the ring on the one over-budget slot. */
.mflow-plan {
  margin-top: 1.8rem;
}

.mflow-plan-head {
  margin-bottom: 0.9rem;
  border-top: 1px solid var(--ink);
  padding-top: 0.85rem;
}

.mflow-plan-head h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.55rem;
  font-weight: 500;
}

.mflow-plan-head .section-note {
  margin-top: 0.3rem;
}

.mflow-moves {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mflow-move {
  margin: 0;
  padding: 0.95rem 0.95rem 1rem;
  background: color-mix(in srgb, var(--surface) 48%, var(--bg));
  border-radius: 12px;
}

.mflow-move-num {
  margin: 0 0 0.25rem;
  color: var(--accent);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
}

.mflow-move h3 {
  margin: 0 0 0.4rem;
  font-size: 0.98rem;
}

.mflow-move p {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.55;
}

.mflow-move p + p {
  margin-top: 0.5rem;
}

.mflow-move .mflow-move-cost {
  color: var(--ink);
}

.mflow-move .mflow-move-watch {
  color: var(--accent);
}

/* kernel n+1's band starts at the boundary the drain crosses. */
.mflow-band-k2 {
  border-left: 1px dashed var(--accent);
}

.mflow-cell.is-flight {
  background: color-mix(in srgb, var(--accent) 4%, var(--paper));
}

/* One transfer, two slots: dashed where it is issued, solid where the bytes
   arrive. The negative margins bridge the grid gap so the halves read as one
   line running into the next slot. */
.mflow-rail {
  display: block;
  margin-top: auto;
  height: 0;
  border-top: 2px dashed var(--accent);
}

.mflow-rail.is-out {
  margin-right: -4px;
}

.mflow-rail.is-in {
  margin-left: -4px;
  border-top-style: solid;
  border-top-color: var(--ink);
}

/* A load the earlier prefetch already served. */
.mflow-chip.is-hit {
  border-style: dotted;
  border-color: var(--ink);
  color: var(--ink);
}

/* The one slot that asks HBM for read and write at once. */
.mflow-chip.is-over {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 16%, var(--paper));
  color: var(--accent);
  font-weight: 650;
}

.mflow-cell.is-over {
  border-style: solid;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
}

@media (max-width: 800px) {
  .mflow-moves {
    grid-template-columns: 1fr;
  }
}

/* Quiz and primer pages, plus the home hero note. */
a.button {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.hero-note,
.path-hint {
  margin: 0.85rem 0 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.hero-note a,
.path-hint a {
  color: var(--muted);
}

.hero-note a:hover,
.hero-note a:focus-visible,
.path-hint a:hover,
.path-hint a:focus-visible {
  color: var(--accent);
  outline: none;
}

.quiz-list {
  margin: 1.6rem 0 0;
  padding: 0;
  list-style: none;
  max-width: 40rem;
}

.quiz-list li {
  border-top: 1px solid var(--line);
  padding: 0.9rem 0;
}

.quiz-list p {
  margin: 0.35rem 0 0;
}

.quiz-list fieldset {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.quiz-list legend {
  padding: 0;
  font-weight: 650;
}

.quiz-choice {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  margin-top: 0.45rem;
  cursor: pointer;
}

.quiz-choice input {
  margin-top: 0.4rem;
}

.quiz-list fieldset.is-right,
.quiz-list fieldset.is-wrong {
  padding-left: 0.75rem;
}

.quiz-list fieldset.is-right {
  box-shadow: inset 3px 0 0 var(--ink);
}

.quiz-list fieldset.is-wrong {
  box-shadow: inset 3px 0 0 var(--accent);
}

.quiz-mark {
  margin: 0.45rem 0 0;
  font-family: var(--mono);
  font-size: 0.78rem;
}

.quiz-list .is-wrong .quiz-mark {
  color: var(--accent);
}

.quiz-score {
  margin: 1rem 0 0;
  font-family: var(--mono);
  font-size: 0.92rem;
}

/* Hardware page: the three named parts. */
.anatomy-terms {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin: 0.4rem 0 0;
  padding: 0;
  list-style: none;
}

.anatomy-terms li {
  margin: 0;
  padding: 0.95rem 0.95rem 1rem;
  background: color-mix(in srgb, var(--surface) 48%, var(--bg));
  border-radius: 12px;
}

.anatomy-terms h2 {
  margin: 0.85rem 0 0.35rem;
  font-size: 1.05rem;
  font-weight: 650;
}

.anatomy-terms p,
.anatomy-svl {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
}

.anatomy-svl {
  margin-top: 0.9rem;
}

.anatomy-fig,
.matmul-fig {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.45rem;
  min-height: 7.5rem;
  padding: 0.75rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.matmul-fig {
  max-width: 16rem;
  min-height: 0;
}

.anatomy-row,
.anatomy-flow {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.anatomy-tag {
  flex: none;
  width: 3.4rem;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.72rem;
}

.anatomy-slot,
.anatomy-grid i,
.anatomy-op {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.7rem;
  height: 1.7rem;
  padding: 0 0.35rem;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: var(--bg);
  font-family: var(--mono);
  font-size: 0.78rem;
  font-style: normal;
}

.anatomy-scalar {
  min-width: 3.4rem;
}

.anatomy-grid {
  display: grid;
  grid-template-columns: repeat(4, 1.35rem);
  gap: 0.28rem;
}

.anatomy-grid i.is-write,
.anatomy-op {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
  font-weight: 650;
}

.matmul-points {
  max-width: 38rem;
  margin: 1rem 0 0;
  padding: 0 0 0 1.2rem;
}

.matmul-points li + li {
  margin-top: 0.55rem;
}

@media (max-width: 800px) {
  .anatomy-terms {
    grid-template-columns: 1fr;
  }
}