:root {
  --paper: #FAFAFA;
  --card: #FFFFFF;
  --sunk: #F4F4F5;
  --rule: #E4E4E7;

  --ink: #18181B;
  --ink-body: #09090B;
  --ink-dim: #71717A;
  --ink-dim-sunk: #52525B;
  --ink-faint: #A1A1AA;

  --accent: #047857;
  --accent-dot: #10B981;
  --accent-soft: #ECFDF5;
  --selection: #A7F3D0;

  --font-sans: Manrope, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --radius-pill: 9999px;
  --radius-card: 20px;

  --motion-micro: 160ms;
  --motion-state: 240ms;
  --motion-entrance: 420ms;
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-spring: linear(
    0, 0.163 2.7%, 0.573 8.7%, 0.919 14.9%, 1.074 21.5%, 1.099 24.9%,
    1.079 30.7%, 0.996 43.4%, 0.988 52.7%, 1.001 76.2%, 1
  );
}


@font-face {
  font-family: Manrope;
  src: url('/fonts/Manrope-latin.woff2?v=c8eafee8') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'Manrope Fallback';
  src: local('Arial'), local('ArialMT');
  font-weight: 200 599;
  size-adjust: 101.3%;
  ascent-override: 105.2%;
  descent-override: 29.6%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Manrope Fallback';
  src: local('Arial Bold'), local('Arial-BoldMT');
  font-weight: 600 800;
  size-adjust: 99.3%;
  ascent-override: 107.4%;
  descent-override: 30.2%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/fonts/JetBrainsMono.woff2?v=340e696a') format('woff2');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono Fallback';
  src: local('Menlo'), local('Courier New');
  size-adjust: 99.7%;
  ascent-override: 102.3%;
  descent-override: 30.1%;
  line-gap-override: 0%;
}

:root {
  --font-page: Manrope, 'Manrope Fallback', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --margin: clamp(16px, 3.4vw, 48px);
  --rail: 208px;
  --gap: 56px;
  --bar: 64px;
  --pill: 244px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; scroll-padding-top: 24px; }
body {
  margin: 0;
  overflow-x: clip;
  background: var(--paper);
  color: var(--ink-body);
  font: 400 17px/1.6 var(--font-page);
  font-feature-settings: 'kern';
  text-rendering: optimizeLegibility;
}
::selection { background: var(--selection); color: var(--ink-body); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
p, h1, h2, h3, ol, ul, dl, dd, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
code { font: 500 15px 'JetBrains Mono', 'JetBrains Mono Fallback', var(--font-mono); color: var(--ink); font-variant-ligatures: none; }
.acc { color: var(--accent); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: var(--margin); top: 8px; z-index: 30;
  padding: 8px 16px; border-radius: var(--radius-pill);
  background: var(--ink); color: var(--paper); font-weight: 600; font-size: 15px;
  text-decoration: none; transform: translateY(-150%);
}
.skip:focus { transform: none; }
[data-claim] { font-variant-numeric: tabular-nums; }

.bar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  height: var(--bar);
  padding-inline: var(--margin);
  background: var(--paper);
}
.name {
  display: inline-flex; align-items: center; gap: 12px;
  font-weight: 700; font-size: 17px; letter-spacing: -0.01em;
  min-height: 44px;
  text-decoration: none; color: var(--ink); white-space: nowrap;
}
.bar-links { display: flex; align-items: center; gap: 24px; font-size: 15px; font-weight: 600; }
.bar-links a { text-decoration: none; color: var(--ink); }
.bar-links a:hover { color: var(--accent); }

.toc-m { position: relative; }
.toc-m > summary {
  display: flex; align-items: center; gap: 8px;
  width: var(--pill); min-height: 44px; padding: 0 14px;
  border-radius: var(--radius-pill);
  background: var(--ink); color: var(--paper);
  font-size: 15px; font-weight: 600; cursor: pointer;
  list-style: none;
}
.toc-m > summary::-webkit-details-marker { display: none; }
.toc-m .now { flex: 1 1 auto; min-width: 0; white-space: nowrap; }
.toc-m .now .n { color: var(--accent-dot); font-variant-numeric: tabular-nums; margin-right: 8px; }
.toc-m .chev { flex: 0 0 auto; width: 12px; height: 12px; transition: transform var(--motion-micro) var(--ease-out-quart); }
.toc-m[open] .chev { transform: rotate(180deg); }
.toc-m .panel {
  position: absolute; right: 0; top: calc(100% + 8px);
  width: 296px; max-width: calc(100vw - 2 * var(--margin));
  max-height: calc(100vh - var(--bar) - 8px);
  max-height: calc(100dvh - var(--bar) - 8px);
  overflow-y: auto; overscroll-behavior: contain;
  padding: 12px;
  border-radius: var(--radius-card);
  background: var(--paper);
  box-shadow: 0 16px 40px -12px rgb(24 24 27 / 0.28), 0 2px 8px rgb(24 24 27 / 0.08);
}

.toc a {
  display: grid; grid-template-columns: 28px 1fr; align-items: baseline;
  padding: 8px; border-radius: 12px;
  color: var(--ink-dim); text-decoration: none; font-size: 15px; line-height: 1.35;
  transition: color var(--motion-micro) var(--ease-out-quart), background-color var(--motion-micro) var(--ease-out-quart);
}
.toc .n { font-variant-numeric: tabular-nums; }
.toc a:hover { color: var(--ink); }
.toc a[aria-current="true"] { color: var(--ink); font-weight: 600; }
.toc a[aria-current="true"] .n { color: var(--accent); }
.toc-m .toc a { min-height: 44px; align-content: center; }
.toc-m .toc a:hover { background: var(--sunk); color: var(--ink); }

.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding-inline: var(--margin);
  max-width: 1440px; margin-inline: auto;
}
.rail { display: none; }
main { min-width: 0; }

.hero { padding-top: 24px; }
.hero-head { display: grid; gap: 20px; }
h1 {
  font-weight: 700;
  font-size: clamp(36px, 4.4vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: var(--ink);
  max-width: 13em;
  text-wrap: balance;
  word-spacing: 0.06em;
}
.lede { font-size: 20px; line-height: 1.5; color: var(--ink-body); max-width: 34em; text-wrap: pretty; }
.film { margin-top: 40px; }

.film-box { position: relative; width: 100%; max-width: 520px; margin-inline: auto; aspect-ratio: 4 / 5; background: var(--paper); }
.film-box > picture, .film-box > picture > img, .film-box > video {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover;
}
.film-box > video { display: none; background: transparent; }
.film-box.film-js > video { display: block; opacity: 0; clip-path: inset(1px); }
.film-box.film-js.has-frame > video { opacity: 1; }
@media (min-width: 901px) and (max-width: 1023.98px), (min-width: 1184px) {
  .film-box { margin-inline: 0; aspect-ratio: 16 / 9; max-width: max(823px, calc((100svh - 290px) * 16 / 9)); }
}

.stop {
  --stop-top: 136px;
  padding-top: var(--stop-top);
  container-type: inline-size;
  scroll-margin-top: calc(32px - 24px - var(--stop-top));
}
h2 {
  font-weight: 700;
  font-size: clamp(28px, 2.8vw, 40px);
  line-height: 1.12;
  letter-spacing: -0.022em;
  color: var(--ink);
  max-width: 21em;
  text-wrap: balance;
}
.thesis { margin-top: 20px; font-size: 20px; line-height: 1.5; color: var(--ink-body); max-width: 35em; text-wrap: pretty; }
.why { margin-top: 8px; font-size: 17px; color: var(--ink-dim); max-width: 40em; text-wrap: pretty; }

.stop-body { container-type: inline-size; margin-top: 40px; }
.pair { display: grid; gap: 32px; }
.pair > figure, .pair > .fig-cuts { max-width: 840px; }
@container (min-width: 1040px) {
  .pair { grid-template-columns: 800px minmax(0, 1fr); gap: 40px; align-items: start; }
  .pair > figure, .pair > .fig-cuts { max-width: none; }
  .pair .legend { padding-top: 4px; }
  .pair.roomy { grid-template-columns: 768px minmax(0, 1fr); gap: 32px; }
  .pair.stacked { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .pair.stacked > figure, .pair.stacked > .fig-cuts { max-width: 840px; }
}

.split-figs .fig-cuts { max-width: 840px; }
@container (min-width: 1040px) {
  .split { display: grid; grid-template-columns: minmax(0, 1fr) 768px; gap: 40px; align-items: start; margin-top: 20px; }
  .split-text { position: sticky; top: 24px; }
  .split-text .thesis { margin-top: 0; }
  .split-figs .stop-body { margin-top: 0; }
  .split-figs .stop-body + .stop-body { margin-top: 8px; }
  .split + details.more { margin-top: 24px; }
}

.legend { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
@container (min-width: 520px) {
  .legend-wrap.legend { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container (min-width: 1040px) {
  .pair .legend { grid-template-columns: minmax(0, 1fr); }
  .pair.stacked .legend { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 40px; }
  .pair.stacked:not(.four) .legend > :last-child:nth-child(3n + 2) { grid-column: span 2; }
  .pair.stacked:not(.four) .legend > :last-child:nth-child(3n + 1) { grid-column: 1 / -1; }
  .pair.stacked.four .legend { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 32px; }
}
.legend dt, .legend h3 { font-weight: 700; font-size: 17px; line-height: 1.4; color: var(--ink); }
.legend dd, .legend li { margin-top: 4px; font-size: 17px; line-height: 1.5; color: var(--ink-body); text-wrap: pretty; }
.legend li + li { margin-top: 8px; }
.go-line { margin-top: 20px; }
.legend > .go-line { grid-column: 1 / -1; margin-top: 0; }
.go {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: 15px; color: var(--accent); text-decoration: none;
}
.go svg { width: 14px; height: 14px; transition: transform var(--motion-micro) var(--ease-out-quart); }
.go:hover svg { transform: translateX(3px); }
.go:hover { text-decoration: underline; }

details.more { margin-top: 32px; max-width: 40em; }
details.more + details.more { margin-top: 12px; }
details.more > summary {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px;
  font-weight: 600; font-size: 15px; color: var(--ink); cursor: pointer; list-style: none;
}
details.more > summary::-webkit-details-marker { display: none; }
details.more > summary:hover { color: var(--accent); }
details.more > summary svg { width: 12px; height: 12px; transition: transform var(--motion-state) var(--ease-out-quart); }
details.more[open] > summary svg { transform: rotate(180deg); }
.more-body { display: grid; gap: 16px; padding: 8px 0 4px; font-size: 17px; line-height: 1.6; }
.more-body .analogy { color: var(--ink); font-weight: 600; }

.rows { display: grid; gap: 24px; max-width: 920px; }
.rows > div { display: grid; gap: 4px; }
.rows dt { font-weight: 700; font-size: 17px; color: var(--ink); line-height: 1.4; }
.rows dd { font-size: 17px; line-height: 1.55; }
@container (min-width: 720px) {
  .rows > div { grid-template-columns: 300px minmax(0, 1fr); gap: 32px; }
}
.analogy-line { margin-top: 32px; max-width: 34em; text-wrap: pretty; font-size: 20px; line-height: 1.5; color: var(--ink); }
.glossary { columns: 2 300px; column-gap: 40px; padding-top: 8px; }
.glossary div { break-inside: avoid; padding-bottom: 16px; }
.glossary dt { font-weight: 700; font-size: 17px; color: var(--ink); }
.glossary dd { font-size: 17px; line-height: 1.5; }

.areas { display: grid; gap: 8px; }
.areas li { font-size: 17px; line-height: 1.5; color: var(--ink-body); text-wrap: pretty; }
.legend-wrap .analogy-line { margin-top: 24px; font-size: 17px; }

#stop-08 .legend { gap: 12px; }
#stop-08 .legend dd { margin-top: 2px; }
#stop-08 .stop-body { margin-top: 24px; }
#stop-08 .pair { gap: 16px; }
#stop-08.stop .pair.stacked { gap: 16px; }
@container (min-width: 1040px) {
  #stop-08 .pair.stacked > .fig-cuts { max-width: 768px; }
  #stop-08 .pair.stacked .legend { gap: 16px 40px; }
}

.cols { display: grid; gap: 40px; max-width: 920px; }
@container (min-width: 720px) { .cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.cols h3 { font-weight: 700; font-size: 20px; line-height: 1.3; color: var(--ink); }
.cols ul { margin-top: 12px; display: grid; gap: 8px; }
.cols li { font-size: 17px; line-height: 1.5; color: var(--ink-body); text-wrap: pretty; }
.cols .group { display: flex; flex-direction: column; }
.cta-wrap { margin-top: 24px; }
.cols .cta-wrap { margin-top: auto; padding-top: 24px; }

.steps { display: grid; gap: 4px; }
.steps button {
  display: block; width: 100%; padding: 8px 0; min-height: 44px;
  border: 0; background: none; text-align: left; cursor: pointer;
  font: 600 17px/1.4 var(--font-page); color: var(--ink-dim);
  transition: color var(--motion-micro) var(--ease-out-quart);
}
.steps button:hover { color: var(--ink); }
.steps button[aria-pressed="true"] { color: var(--accent); }
@container (min-width: 1040px) {
  .steps button { min-height: 36px; padding: 4px 0; }
}
.steps p { padding-bottom: 8px; font-size: 17px; line-height: 1.5; color: var(--ink-body); text-wrap: pretty; }
.steps-note { margin-top: 20px; font-size: 17px; line-height: 1.5; color: var(--ink-dim); }

.reach { border-collapse: collapse; width: 100%; font-size: 17px; line-height: 1.5; }
.reach th { text-align: left; font-weight: 700; color: var(--ink); vertical-align: top; padding: 0 0 2px; }
.reach td { padding: 0 0 16px; vertical-align: top; }
.reach tr { display: grid; }

.anchor { display: block; height: 0; }
.gap { margin-top: 24px; padding: 24px; border-radius: var(--radius-card); background: var(--sunk); color: var(--ink-dim-sunk); font-size: 15px; }

.end {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px;
  padding: 160px 0 56px;
}
.end-name { font-weight: 700; font-size: clamp(36px, 4.4vw, 64px); line-height: 1.05; letter-spacing: -0.03em; word-spacing: 0.06em; color: var(--ink); }
.end-links { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.btn {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 24px;
  border-radius: var(--radius-pill); background: var(--ink); color: var(--paper);
  font-weight: 600; font-size: 15px; text-decoration: none;
  transition: background-color var(--motion-micro) var(--ease-out-quart);
}
.btn:hover { background: var(--accent); }
.end-links .plain { font-weight: 600; font-size: 15px; color: var(--ink); }
.end-links .plain:hover { color: var(--accent); }

.mk-i { fill: var(--ink); }
.mk-a { fill: var(--accent); }
.mk-o { fill: none; stroke: #D4D4D8; stroke-width: 1; }
.mk-bar { width: 24px; height: 24px; flex: 0 0 auto; }
.mk-big { display: block; width: 140px; height: 140px; }
.mk-big rect { transform-box: fill-box; transform-origin: center; }

.ag-glyph { flex: 0 0 auto; width: 14px; height: 14px; }
.ag-quiet { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; }
.ag-pill {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 18px;
  border: 1px solid var(--rule); border-radius: var(--radius-pill); background: var(--card); color: var(--ink);
  font: 600 15px/1 var(--font-page); cursor: pointer;
  transition: border-color var(--motion-micro) var(--ease-out-quart), color var(--motion-micro) var(--ease-out-quart);
}
.ag-pill:hover { border-color: var(--ink); }
.ag-pill.is-done { border-color: var(--accent); color: var(--accent); }
.ag-llm {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px;
  color: var(--ink); font-size: 15px; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.ag-llm:hover { color: var(--accent); }
.ag-nojs { display: none; }
.ag-prompt { display: block; flex: 1 0 100%; max-width: 34em; font: 400 13.5px/1.55 'JetBrains Mono', 'JetBrains Mono Fallback', var(--font-mono); color: var(--ink); overflow-wrap: anywhere; }
.ag-prompt[hidden] { display: none; }
.ag-url { white-space: nowrap; }
.ag-status { flex: 1 0 100%; font-size: 14px; line-height: 1.4; color: var(--ink-dim); }
.ag-status:empty { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.ag-quiet-label { flex: 1 0 100%; font-size: 15px; font-weight: 600; color: var(--ink); }

.bar-links .ag-for { white-space: nowrap; }
.ag-panel-link {
  display: flex; align-items: center; gap: 8px; min-height: 44px;
  margin-top: 8px; padding: 8px 8px 8px 36px;
  color: var(--ink); font-size: 15px; font-weight: 600; text-decoration: none;
}
@media (max-width: 599.98px) {
  .bar-links .ag-for { display: none; }
}
@media (min-width: 600px) and (max-width: 1023.98px) {
  .bar:not(.in-stop) .ag-for { position: relative; z-index: 1; transform: translateX(128px); }
}

.page-404 { padding-inline: var(--margin); max-width: 1440px; margin-inline: auto; }
.lost { padding: 120px 0 160px; display: grid; gap: 24px; }
.lost .btn { justify-self: start; }

@media (min-width: 1024px) {
  .bar { position: static; }
  .toc-m { display: none; }
  .layout { grid-template-columns: var(--rail) minmax(0, 1fr); column-gap: var(--gap); }
  .rail { display: block; position: sticky; top: 24px; align-self: start; padding-top: 24px; }
  .rail-head { font-size: 15px; font-weight: 600; color: var(--ink-dim); padding: 0 8px 8px; margin: 0 0 0 -8px; }
  .rail .toc a { margin-left: -8px; }
}
@media (min-width: 1180px) {
  .hero-head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 48px; align-items: start; }
  .hero-head h1 { grid-row: 1 / span 2; }
  .hero-head .ag-quiet { grid-column: 2; }
}
@media (max-width: 1023.98px) {
  .bar-links .work { display: none; }
  html { scroll-padding-top: calc(var(--bar) + 16px); }
  .stop { scroll-margin-top: calc(var(--bar) + 32px - var(--bar) - 16px - var(--stop-top)); }
}
@media (max-width: 600px) {
  .stop { --stop-top: 104px; }
  .stop-body { margin-top: 32px; }
  .pair { gap: 24px; }
  details.more { margin-top: 24px; }
  .film { margin-top: 32px; }
  .end { padding-top: 120px; }
  .mk-big { width: 96px; height: 96px; }
}
@media (max-width: 479.98px) {
  .bar .name { position: relative; flex: 0 0 24px; width: 24px; gap: 0; }
  .bar .mk-bar { position: absolute; left: 0; top: 10px; }
  .bar .toc-m { z-index: 1; }
  .bar:not(.in-stop) .mk-bar { opacity: 0; }
  .bar.in-stop .name-t { opacity: 0; }
  .toc-m > summary:focus-visible { outline-color: var(--accent-dot); outline-offset: -4px; }
}
@media (max-width: 1023.98px) {
  .bar:not(.in-stop) .toc-m > summary { clip-path: inset(0 0 0 calc(100% - 116px) round 999px); }
  .bar:not(.in-stop) .now { text-align: right; }
}
@media (min-width: 1024px) and (max-width: 1183.98px) {
  .film { margin-top: 24px; }
  .film-box { max-width: max(360px, min(520px, calc((100svh - 334px) * 4 / 5))); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
@media print {
  .bar, .rail, .skip, .ag-quiet { display: none !important; }
  .layout { display: block; }
  details > summary { display: none; }
  details::details-content { content-visibility: visible; display: contents; }
  .film-box > video { display: none !important; }
  .film-box { aspect-ratio: auto; max-width: none; margin-inline: 0; }
  .film-box > picture { position: static; }
  .film-box > picture > img { position: static; width: 100%; height: auto; max-height: 20cm; object-fit: contain; }
  .stop { --stop-top: 48px; }
  .fig-cuts .fig-wide { display: block !important; }
  .fig-cuts .fig-portrait { display: none !important; }
  h1, h2, h3, .thesis, .why, .legend dt { break-after: avoid; break-inside: avoid; }
  .thesis, .why, .lede, .legend > div, .steps li, .areas li, .cols li, .glossary div { break-inside: avoid; }
  .steps button { min-height: 0; padding: 8px 0 0; color: var(--ink) !important; font-weight: 700; }
  body { background: var(--paper); }
}

[data-motion-root] svg { display: block; width: 100%; height: auto; min-width: 0; }

.dd-title       { font: 700 28px var(--font-sans); fill: var(--ink); }
.dd-accent      { fill: var(--accent); }
.dd-node-name   { font: 600 18px var(--font-sans); fill: var(--ink); }
.dd-group       { font: 600 20px var(--font-sans); fill: var(--ink); }
.dd-sublabel    { font: 400 15px var(--font-sans); fill: var(--ink-dim-sunk); }
.dd-label       { font: 600 15px var(--font-sans); fill: var(--ink-dim-sunk); }
.dd-arrow-label { font: 500 15px var(--font-sans); fill: var(--ink-dim-sunk); }
.dd-callout     { font: 400 18px var(--font-sans); fill: var(--ink); }
.dd-code        { font: 500 15px var(--font-mono); fill: var(--ink); }
.dd-on-accent   { fill: var(--ink-body); }

.dd-node     { fill: var(--card); stroke: var(--ink); stroke-width: 1.5; }
.dd-focal    { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 2; }
.dd-store    { fill: var(--ink); fill-opacity: 0.05; stroke: var(--ink-dim-sunk); stroke-width: 1.5; }
.dd-external { fill: var(--ink); fill-opacity: 0.03; stroke: var(--ink); stroke-opacity: 0.3; stroke-width: 1.5; }
.dd-input    { fill: var(--ink-dim-sunk); fill-opacity: 0.1; stroke: var(--ink-dim-sunk); stroke-width: 1.5; }
.dd-optional { fill: var(--ink); fill-opacity: 0.02; stroke: var(--ink); stroke-opacity: 0.2; stroke-width: 1.5; stroke-dasharray: 4 4; }
.dd-security { fill: var(--accent); fill-opacity: 0.05; stroke: var(--accent); stroke-opacity: 0.5; stroke-width: 1.5; stroke-dasharray: 4 4; }
.dd-accent-fill { fill: var(--accent); fill-opacity: 0.85; }

.dd-arrow        { fill: none; stroke: var(--ink-dim-sunk); stroke-width: 1.5; }
.dd-arrow-accent { fill: none; stroke: var(--accent); stroke-width: 2; }
.dd-arrowhead    { fill: var(--ink-dim-sunk); }
.dd-arrowhead-accent { fill: var(--accent); }
.dd-rule         { fill: none; stroke: var(--rule); stroke-width: 1; }
.dd-baseline     { fill: none; stroke: var(--ink-faint); stroke-width: 1; }

.dd-ground, .dd-mask { fill: var(--paper); }
.dd-zone   { fill: none; stroke: var(--ink-dim-sunk); stroke-width: 1; stroke-dasharray: 6 5; }
.dd-panel  { fill: none; stroke: var(--rule); stroke-width: 1; }
.dd-dash   { stroke-dasharray: 5 4; }
.dd-arrow-thin { fill: none; stroke: var(--ink-dim-sunk); stroke-width: 1; }
.dd-glyph  { fill: none; stroke: var(--ink-dim-sunk); stroke-width: 1.5; }

.dd-pulse  { fill: none; stroke: var(--accent); stroke-width: 9; stroke-linecap: round; stroke-dasharray: 0 1; }
.dd-answer { fill: none; stroke: var(--accent); stroke-width: 2.5; }
.dd-answer-mark { fill: var(--accent); }
.dd-tile   { fill: var(--card); stroke: var(--ink-dim-sunk); stroke-width: 1; }
.dd-tile-text { font: 600 15px var(--font-sans); fill: var(--ink); }
[data-pulse-at], [data-answer-at], [data-fx-in] { opacity: 0; }
[data-motion-root][data-frame="end"] [data-pulse-at], [data-motion-root][data-frame="end"] [data-answer-at],
[data-motion-root][data-frame="end"] [data-fx-in], [data-motion-root][data-frame="static"] [data-pulse-at],
[data-motion-root][data-frame="static"] [data-answer-at], [data-motion-root][data-frame="static"] [data-fx-in] {
  opacity: 0 !important;
}
[data-motion-root][data-frame="end"] [data-grow-at],
[data-motion-root][data-frame="static"] [data-grow-at] { transform: none !important; }

[data-motion-root].motion-ready:not([data-frame="end"]) [data-motion-item] { opacity: 0; }
[data-motion-root][data-frame="end"] [data-motion-item],
[data-motion-root][data-frame="static"] [data-motion-item] {
  opacity: 1 !important;
  transform: none !important;
}
[data-motion-root][data-frame="end"] [data-draw],
[data-motion-root][data-frame="static"] [data-draw] { stroke-dashoffset: 0 !important; }

.fig-cuts { container-type: inline-size; }
.fig-cuts .fig-portrait { display: none; max-width: 480px; margin-inline: auto; }
@container (max-width: 767px) {
  .fig-cuts .fig-wide { display: none; }
  .fig-cuts .fig-portrait { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  [data-motion-item] { opacity: 1 !important; transform: none !important; transition: none !important; }
  [data-draw] { stroke-dashoffset: 0 !important; }
  [data-pulse-at], [data-answer-at], [data-fx-in] { opacity: 0 !important; }
  [data-grow-at] { transform: none !important; }
}
@media print {
  [data-motion-item] { opacity: 1 !important; transform: none !important; }
  [data-draw] { stroke-dashoffset: 0 !important; }
  [data-pulse-at], [data-answer-at], [data-fx-in] { opacity: 0 !important; }
  [data-grow-at] { transform: none !important; }
}