/* sidged.com: Sidged fills the design-system roles with its own accent "Sodium" (spec D3, design system §12).
   Loaded after tokens.css and components.css. Dark only. No inline CSS: the edge CSP forbids it. */

:root {
  color-scheme: dark;
  --sdg-sodium-100: #FFF1DB;
  --sdg-sodium-300: #FFC870;
  --sdg-sodium-400: #FFA733;
  --sdg-sodium-500: #F28A0F;
  --sdg-sodium-700: #A35800;
  --sdg-sodium-900: #3D2000;

  --vv-color-primary: var(--sdg-sodium-400);
  --vv-color-on-primary: var(--sdg-sodium-900);
  --vv-color-primary-container: var(--sdg-sodium-700);
  --vv-color-on-primary-container: var(--sdg-sodium-100);
  --vv-color-focus: var(--sdg-sodium-400);
}

body { background: var(--vv-color-surface); }
code { font-family: var(--vv-font-mono); font-size: 0.92em; }

/* Skip link: hidden until focused (components.css only provides .vv-sr-only). */
.skip-link:focus-visible {
  position: fixed; z-index: 100; top: var(--vv-space-2); left: var(--vv-space-2);
  width: auto; height: auto; clip: auto; overflow: visible; white-space: normal;
  padding: var(--vv-space-3) var(--vv-space-5); border-radius: 999px;
  background: var(--vv-color-surface-container-highest); color: var(--vv-color-on-surface);
}

/* Navigation: the one glass layer, built like the vaiev.com pill (typeset name left, text links right). Fixed, so it
   travels with the page over stage and content; the glass keeps both readable. */
.nav { position: fixed; inset: 0 0 auto; padding-top: max(var(--vv-space-4), env(safe-area-inset-top)); }
.nav__bar { max-width: 340px; padding-left: var(--vv-space-5); }
.brand { min-width: var(--vv-touch-target); font: 600 1.375rem/1 var(--vv-font-sans); letter-spacing: -0.03em; color: var(--vv-color-on-stage); text-decoration: none; }
.nav__links { display: flex; gap: 0; }
.nav__links a {
  position: relative; display: inline-flex; align-items: center; min-height: var(--vv-touch-target); padding: 0 var(--vv-space-4);
  border-radius: var(--vv-shape-full); color: var(--vv-color-on-surface-variant); text-decoration: none;
  font: 500 var(--vv-type-label)/1 var(--vv-font-sans);
}
.nav__links a::before { content: ""; position: absolute; inset: 4px 0; border-radius: inherit; background: currentColor; opacity: 0;
  transition: opacity var(--vv-motion-short) var(--vv-ease-standard); }
.nav__links a:hover::before { opacity: var(--vv-state-hover); }
.nav__links a:active::before { opacity: var(--vv-state-pressed); }
html { scroll-padding-top: 96px; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Stage: black, rounded, inset like vaiev.com; a sodium glow rises behind the stack. */
.stage {
  --stage-margin: var(--vv-space-2);
  margin: var(--stage-margin); min-height: calc(100svh - 2 * var(--stage-margin));
  display: grid; align-items: center; padding-top: 72px; /* room for the fixed pill */
  --stage-glow: 80% 34% at 50% 86%;
  background:
    radial-gradient(var(--stage-glow), rgb(255 167 51 / 0.16), transparent 70%),
    radial-gradient(60% 140px at 50% 0, #191B22, transparent),
    var(--vv-color-stage);
  overflow: hidden;
}

/* Hero: claim left, stack right (expanded); stacked on compact. */
.hero {
  display: grid; align-items: center; gap: var(--vv-space-10);
  max-width: calc(var(--vv-layout-max) + 2 * var(--vv-layout-margin)); margin-inline: auto;
  padding: var(--vv-space-16) var(--vv-layout-margin) var(--vv-space-12);
}
.hero__text { display: grid; gap: var(--vv-space-6); justify-items: start; }
.hero__claim {
  margin: 0; font-size: clamp(2.5rem, 1.5rem + 4.2vw, 5rem); line-height: 1.02; letter-spacing: -0.035em;
  color: var(--vv-color-on-stage); text-wrap: balance;
}
.hero__line { display: block; }
.hero__line--1 { font-weight: 400; color: var(--vv-color-on-surface-variant); }
.hero__line--2 { font-weight: 600; }
.hero__lede { margin: 0; max-width: 34em; font-size: var(--vv-type-body-lg); line-height: 1.55; color: var(--vv-color-on-surface-variant); text-wrap: pretty; }
.hero__cta { text-decoration: none; }
.hood__tech { list-style: none; margin: var(--vv-space-6) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--vv-space-2); }
.hood__tech li { padding: var(--vv-space-1) var(--vv-space-3); border-radius: var(--vv-shape-xs); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.14);
  font: 400 var(--vv-type-small)/1.6 var(--vv-font-mono); color: var(--vv-color-on-surface-variant); }
.stack { width: min(100%, 520px); height: auto; justify-self: center; overflow: visible; }

/* The one orchestrated moment: the stack opens from a single plane, then the core lights up and keeps breathing. */
@keyframes plane-from-mid-top { from { transform: translateY(112px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes plane-from-mid-bottom { from { transform: translateY(-112px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes breathe { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
.plane--surface { animation: plane-from-mid-top 900ms var(--vv-ease-spring) 250ms backwards; }
.plane--kernel { animation: plane-from-mid-bottom 900ms var(--vv-ease-spring) 250ms backwards; }
.stack__rails { animation: fade-in 400ms var(--vv-ease-standard) 900ms backwards; }
.core { animation: fade-in 300ms var(--vv-ease-standard) 1000ms backwards; }
.core__glow { animation: fade-in 300ms var(--vv-ease-standard) 1000ms backwards, breathe 4s ease-in-out 1300ms infinite; }
.hero__line--1 { animation: rise 500ms var(--vv-ease-decelerate) 100ms backwards; }
.hero__line--2 { animation: rise 500ms var(--vv-ease-decelerate) 650ms backwards; }
.hero__lede, .hero__cta { animation: rise 500ms var(--vv-ease-decelerate) 900ms backwards; }
@media (prefers-reduced-motion: reduce) {
  .plane, .stack__rails, .core, .core__glow, .hero__line, .hero__lede, .hero__cta { animation: none; }
}

/* Sections: flat, tonal, no shadows. */
.section { padding-block: var(--vv-layout-section) 0; }
.section__title { max-width: 20em; text-wrap: balance; }
.section__lede { max-width: 38em; margin-top: var(--vv-space-4); color: var(--vv-color-on-surface-variant); }

/* Thesis: two statements side by side, the second one carries the weight. */
.thesis__cols { display: grid; gap: var(--vv-space-6); margin-top: var(--vv-space-6); max-width: 64rem; }
.thesis__cols p { color: var(--vv-color-on-surface-variant); }
.thesis__cols .thesis__strong { color: var(--vv-color-on-surface); }

/* Layers: the real stack, top to bottom; concentric radii (outer 32, gap 4 -> inner 8). */
.layers { list-style: none; margin: var(--vv-space-10) 0 0; padding: 0; display: grid; gap: var(--vv-space-1); }
.layer {
  display: grid; gap: var(--vv-space-3); padding: var(--vv-space-8) var(--vv-space-6);
  border-radius: var(--vv-space-2); background: var(--vv-color-surface-container-low);
}
.layer:first-child { border-top-left-radius: var(--vv-shape-xl); border-top-right-radius: var(--vv-shape-xl); }
.layer:last-child { border-bottom-left-radius: var(--vv-shape-xl); border-bottom-right-radius: var(--vv-shape-xl); }
.layer--runtime {
  background: linear-gradient(100deg, rgb(255 167 51 / 0.20), rgb(255 167 51 / 0.04) 60%), var(--vv-color-surface-container);
  box-shadow: inset 3px 0 0 var(--sdg-sodium-400);
}
.layer--kernel { background: var(--vv-color-surface-container-lowest); }
.layer__id { margin: 0; display: flex; gap: var(--vv-space-3); align-items: baseline; color: var(--vv-color-on-surface-variant); font-size: var(--vv-type-small); }
.layer__id code { color: var(--sdg-sodium-300); }
.layer__body { display: grid; gap: var(--vv-space-2); max-width: 44em; }
.layer__body .vv-body { color: var(--vv-color-on-surface-variant); }


/* Demo: one request played through Sidged. 14 s loop, CSS only. The base styles are the finished state, so reduced
   motion (animation: none) shows the outcome at once. Model nodes light white, core nodes sodium. */
.demo {
  --demo: 14s;
  display: grid; gap: var(--vv-space-8); margin-top: var(--vv-space-10); padding: var(--vv-space-8) var(--vv-space-6);
  border-radius: var(--vv-shape-xl); color: var(--vv-color-on-stage);
  background: radial-gradient(60% 80% at 80% 100%, rgb(255 167 51 / 0.12), transparent 70%), var(--vv-color-stage);
}
.demo__ask { display: flex; gap: var(--vv-space-3); align-items: center; flex-wrap: wrap; }
.demo__you { padding: var(--vv-space-1) var(--vv-space-3); border-radius: var(--vv-shape-full); background: var(--vv-color-surface-container-high);
  font: 500 var(--vv-type-small)/1.4 var(--vv-font-sans); color: var(--vv-color-on-surface-variant); }
.demo__text { margin: 0; font: 500 var(--vv-type-title)/1.3 var(--vv-font-sans); }
.demo__text span { display: inline-block; }
@keyframes demo-type { 0%, 1.5% { clip-path: inset(0 100% 0 0); opacity: 1; } 16%, 92% { clip-path: inset(0 0 0 0); opacity: 1; } 97%, 100% { clip-path: inset(0 0 0 0); opacity: 0; } }
.demo__text span { animation: demo-type var(--demo) steps(44, end) infinite; }

.demo__track { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: var(--vv-space-4); }
.demo__track::before, .demo__track::after { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; border-radius: 1px; }
.demo__track::before { background: rgb(255 255 255 / 0.12); }
.demo__track::after { background: linear-gradient(var(--vv-color-on-stage), var(--sdg-sodium-400) 30%); transform-origin: top; }
@keyframes demo-bar-y { 0%, 20% { transform: scaleY(0); opacity: 1; } 61%, 92% { transform: scaleY(1); opacity: 1; } 97%, 100% { transform: scaleY(1); opacity: 0; } }
@keyframes demo-bar-x { 0%, 20% { transform: scaleX(0); opacity: 1; } 61%, 92% { transform: scaleX(1); opacity: 1; } 97%, 100% { transform: scaleX(1); opacity: 0; } }
.demo__track::after { animation: demo-bar-y var(--demo) linear infinite; }
.demo__node { position: relative; display: grid; grid-template-columns: 16px auto 1fr; gap: var(--vv-space-4); align-items: center; }
.demo__dot { position: relative; width: 16px; height: 16px; border-radius: 50%; background: var(--vv-color-stage); box-shadow: inset 0 0 0 2px rgb(255 255 255 / 0.3); }
.demo__dot::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--vv-color-on-stage); }
.demo__node--core .demo__dot::after { background: var(--sdg-sodium-400); box-shadow: 0 0 14px 2px rgb(255 167 51 / 0.7); }
.demo__step { font: 500 var(--vv-type-body)/1.3 var(--vv-font-sans); }
.demo__role { font: 400 var(--vv-type-small)/1 var(--vv-font-mono); color: var(--vv-color-outline); }
.demo__node--core .demo__role { color: var(--sdg-sodium-300); }
@keyframes demo-n1 { 0%, 19.9% { opacity: 0.4; } 20%, 92% { opacity: 1; } 97%, 100% { opacity: 0.4; } }
@keyframes demo-f1 { 0%, 19.9% { opacity: 0; transform: scale(0.4); } 21.5%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
.demo__node:nth-child(1) { animation: demo-n1 var(--demo) linear infinite; }
.demo__node:nth-child(1) .demo__dot::after { animation: demo-f1 var(--demo) var(--vv-ease-standard) infinite; }
@keyframes demo-n2 { 0%, 26.9% { opacity: 0.4; } 27%, 92% { opacity: 1; } 97%, 100% { opacity: 0.4; } }
@keyframes demo-f2 { 0%, 26.9% { opacity: 0; transform: scale(0.4); } 28.5%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
.demo__node:nth-child(2) { animation: demo-n2 var(--demo) linear infinite; }
.demo__node:nth-child(2) .demo__dot::after { animation: demo-f2 var(--demo) var(--vv-ease-standard) infinite; }
@keyframes demo-n3 { 0%, 33.9% { opacity: 0.4; } 34%, 92% { opacity: 1; } 97%, 100% { opacity: 0.4; } }
@keyframes demo-f3 { 0%, 33.9% { opacity: 0; transform: scale(0.4); } 35.5%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
.demo__node:nth-child(3) { animation: demo-n3 var(--demo) linear infinite; }
.demo__node:nth-child(3) .demo__dot::after { animation: demo-f3 var(--demo) var(--vv-ease-standard) infinite; }
@keyframes demo-n4 { 0%, 40.9% { opacity: 0.4; } 41%, 92% { opacity: 1; } 97%, 100% { opacity: 0.4; } }
@keyframes demo-f4 { 0%, 40.9% { opacity: 0; transform: scale(0.4); } 42.5%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
.demo__node:nth-child(4) { animation: demo-n4 var(--demo) linear infinite; }
.demo__node:nth-child(4) .demo__dot::after { animation: demo-f4 var(--demo) var(--vv-ease-standard) infinite; }
@keyframes demo-n5 { 0%, 53.9% { opacity: 0.4; } 54%, 92% { opacity: 1; } 97%, 100% { opacity: 0.4; } }
@keyframes demo-f5 { 0%, 53.9% { opacity: 0; transform: scale(0.4); } 55.5%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
.demo__node:nth-child(5) { animation: demo-n5 var(--demo) linear infinite; }
.demo__node:nth-child(5) .demo__dot::after { animation: demo-f5 var(--demo) var(--vv-ease-standard) infinite; }
@keyframes demo-n6 { 0%, 60.9% { opacity: 0.4; } 61%, 92% { opacity: 1; } 97%, 100% { opacity: 0.4; } }
@keyframes demo-f6 { 0%, 60.9% { opacity: 0; transform: scale(0.4); } 62.5%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
.demo__node:nth-child(6) { animation: demo-n6 var(--demo) linear infinite; }
.demo__node:nth-child(6) .demo__dot::after { animation: demo-f6 var(--demo) var(--vv-ease-standard) infinite; }

.demo__screen { display: grid; min-height: 64px; }
.demo__approve, .demo__done { grid-area: 1 / 1; align-self: center; }
.demo__approve {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--vv-space-3); padding: var(--vv-space-3) var(--vv-space-3) var(--vv-space-3) var(--vv-space-4);
  border-radius: var(--vv-shape-lg); background: var(--vv-color-surface-container-high); opacity: 0;
}
.demo__lock { display: grid; place-items: center; color: var(--sdg-sodium-300); }
.demo__question { flex: 1 1 14rem; font-size: var(--vv-type-body); }
.demo__btn { padding: var(--vv-space-2) var(--vv-space-5); border-radius: var(--vv-shape-full); background: var(--sdg-sodium-400); color: var(--sdg-sodium-900);
  font: 500 var(--vv-type-label)/1.4 var(--vv-font-sans); }
.demo__done { margin: 0; display: flex; gap: var(--vv-space-2); align-items: center; font: 500 var(--vv-type-title)/1.3 var(--vv-font-sans); color: var(--sdg-sodium-300); }
@keyframes demo-approve { 0%, 40.9% { opacity: 0; transform: translateY(8px); } 42%, 52% { opacity: 1; transform: none; } 55%, 100% { opacity: 0; transform: none; } }
@keyframes demo-press { 0%, 49% { transform: none; filter: none; } 50%, 52% { transform: scale(0.94); filter: brightness(1.2); } 53%, 100% { transform: none; filter: none; } }
@keyframes demo-done { 0%, 62.9% { opacity: 0; transform: translateY(8px); } 64%, 92% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
.demo__approve { animation: demo-approve var(--demo) var(--vv-ease-decelerate) infinite; }
.demo__btn { animation: demo-press var(--demo) linear infinite; }
.demo__done { animation: demo-done var(--demo) var(--vv-ease-decelerate) infinite; }

/* Promises: three plain statements for everyone. */
.promises { list-style: none; margin: var(--vv-space-10) 0 0; padding: 0; display: grid; gap: var(--vv-space-4); }
.promise { display: grid; gap: var(--vv-space-3); align-content: start; padding: var(--vv-space-6); border-radius: var(--vv-shape-md); background: var(--vv-color-surface-container-low); }
.promise__icon { width: 48px; height: 48px; border-radius: var(--vv-shape-sm); display: grid; place-items: center;
  background: var(--vv-color-primary-container); color: var(--vv-color-on-primary-container); }
.promise .vv-body { color: var(--vv-color-on-surface-variant); }

/* Swarm: black stage panel; work flows along the links, one edge drifts and is replaced (8 s loop). Base = final state. */
.swarm { display: grid; gap: var(--vv-space-8); padding: var(--vv-space-10) var(--vv-space-6); border-radius: var(--vv-shape-xl);
  background: radial-gradient(50% 60% at 70% 30%, rgb(255 167 51 / 0.10), transparent 70%), var(--vv-color-stage); }
.swarm__text { display: grid; gap: var(--vv-space-4); max-width: 36em; }
.swarm__text .vv-body-lg { color: var(--vv-color-on-surface-variant); }
.swarm__map { width: 100%; max-width: 520px; height: auto; justify-self: center; }
.swarm__labels { font: 400 17px var(--vv-font-mono); }
.swarm__old-edge { stroke: #F2716C; stroke-dasharray: 4 4; }
.swarm__link-old { stroke-opacity: 0; }
.swarm__new, .swarm__old { transform-box: fill-box; transform-origin: center; }
@keyframes swarm-flow { to { stroke-dashoffset: -20; } }
@keyframes swarm-old-edge { 0%, 34% { stroke: #F7F7F8; stroke-opacity: 0.6; } 40%, 92% { stroke: #F2716C; stroke-opacity: 1; } 98%, 100% { stroke: #F7F7F8; stroke-opacity: 0.6; } }
@keyframes swarm-old-link { 0%, 34% { stroke-opacity: 0.55; } 42%, 96% { stroke-opacity: 0; } 100% { stroke-opacity: 0.55; } }
@keyframes swarm-show-late { 0%, 40% { opacity: 0; } 44%, 92% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes swarm-new { 0%, 55% { opacity: 0; transform: scale(0.5); } 62%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes swarm-core { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }
.swarm__links path { animation: swarm-flow 1.2s linear infinite; }
.swarm__links .swarm__link-old { animation: swarm-flow 1.2s linear infinite, swarm-old-link 8s linear infinite; }
.swarm__links .swarm__link-new { animation: swarm-flow 1.2s linear infinite, swarm-new 8s var(--vv-ease-decelerate) infinite; }
.swarm__old-edge { animation: swarm-old-edge 8s linear infinite; }
.swarm__old-x, .swarm__old-label { animation: swarm-show-late 8s linear infinite; }
.swarm__new, .swarm__new-label { animation: swarm-new 8s var(--vv-ease-spring) infinite; }
.swarm__core { animation: swarm-core 2.4s ease-in-out infinite; }
.swarm__facts { list-style: none; margin: 0; padding: 0 0 var(--vv-space-6); display: grid; gap: var(--vv-space-6) var(--vv-layout-gutter); }
.swarm__facts li { display: grid; gap: var(--vv-space-2); align-content: start; }
.swarm__facts .vv-body { color: var(--vv-color-on-surface-variant); }

/* Cloud: three short rules. */
.cloud { display: grid; gap: var(--vv-space-6) var(--vv-layout-gutter); margin-top: var(--vv-space-8); }
.cloud__item { display: grid; gap: var(--vv-space-2); align-content: start; padding-left: var(--vv-space-4); box-shadow: inset 2px 0 0 var(--sdg-sodium-700); }
.cloud__item .vv-body { color: var(--vv-color-on-surface-variant); }

/* Under the hood: depth on demand. Native <details>, no script; the chevron turns when open. */
.hood { margin-top: var(--vv-space-8); border-bottom: 1px solid var(--vv-color-outline-variant); }
.more { border-top: 1px solid var(--vv-color-outline-variant); }
.swarm .more { border-color: rgb(255 255 255 / 0.12); }
.more > summary {
  list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--vv-space-4);
  min-height: 64px; cursor: pointer; font: 500 var(--vv-type-title)/1.3 var(--vv-font-sans); color: var(--vv-color-on-surface);
}
.more > summary::-webkit-details-marker { display: none; }
.more > summary::after { content: ""; flex: none; width: 10px; height: 10px; margin-right: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-3px) rotate(45deg); transition: transform var(--vv-motion-medium) var(--vv-ease-standard); color: var(--sdg-sodium-400); }
.more[open] > summary::after { transform: translateY(2px) rotate(225deg); }
.more > :not(summary) { margin-bottom: var(--vv-space-8); }
.more .layers, .more .rules, .more .primitives { margin-top: var(--vv-space-2); }
.hood__list { margin: 0; padding-left: 1.25em; display: grid; gap: var(--vv-space-3); max-width: 46em; color: var(--vv-color-on-surface-variant); }
.hood__status { margin-top: var(--vv-space-6); }
.build__code { margin: 0; overflow-x: auto; padding: var(--vv-space-6); border-radius: var(--vv-shape-lg);
  background: var(--vv-color-surface-container-lowest); box-shadow: inset 0 0 0 1px var(--vv-color-outline-variant);
  font: 400 0.875rem/1.7 var(--vv-font-mono); color: var(--vv-color-on-surface); }
.build__code code { font-size: inherit; }
.build__c { color: var(--sdg-sodium-300); }

@media (prefers-reduced-motion: reduce) {
  .demo *, .demo *::before, .demo *::after, .demo__track::after, .swarm__map * { animation: none !important; }
}

/* Primitives: a real table (old concept -> replacement); stacked rows on compact. */
.primitives { width: 100%; margin-top: var(--vv-space-10); border-collapse: collapse; }
.primitives thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.primitives tr { display: grid; gap: var(--vv-space-1); padding: var(--vv-space-5) 0; border-top: 1px solid var(--vv-color-outline-variant); }
.primitives tr:last-child { border-bottom: 1px solid var(--vv-color-outline-variant); }
.primitives th, .primitives td { padding: 0; text-align: left; vertical-align: top; }
.primitives tbody th { font: 600 var(--vv-type-title)/1.3 var(--vv-font-sans); color: var(--vv-color-on-surface); }
.primitives:not(.iso) td:nth-child(2) { color: var(--vv-color-outline); text-decoration: line-through; text-decoration-color: rgb(255 167 51 / 0.6); }
.primitives td:nth-child(3) { color: var(--vv-color-on-surface-variant); }

/* Rules: the nine invariants keep their canonical numbers (the specs cite them by number). */
.rules { list-style: none; counter-reset: rule; margin: var(--vv-space-10) 0 0; padding: 0; display: grid; gap: var(--vv-space-8) var(--vv-layout-gutter); }
.rules li { counter-increment: rule; display: grid; gap: var(--vv-space-2); align-content: start; padding-top: var(--vv-space-4); border-top: 1px solid var(--vv-color-outline-variant); }
.rules li::before { content: counter(rule); font: 500 var(--vv-type-headline)/1 var(--vv-font-mono); color: var(--sdg-sodium-400); }
.rules .vv-body { color: var(--vv-color-on-surface-variant); }

/* ISO mapping reuses the table rhythm with two columns. */
.iso td { color: var(--vv-color-on-surface-variant); }
.iso__note { margin-top: var(--vv-space-4); }

/* Footer: flat, one row. */
.footer { padding-block: var(--vv-space-16) max(var(--vv-space-8), env(safe-area-inset-bottom)); }
.footer__row { display: flex; justify-content: space-between; align-items: center; gap: var(--vv-space-4); flex-wrap: wrap; }
.footer a { display: inline-flex; align-items: center; min-height: 48px; color: var(--vv-color-on-surface-variant); }
.footer a:hover { color: var(--vv-color-on-surface); }

/* Legal page. */
.page { padding-block: calc(var(--vv-space-16) + 56px) 0; }
.prose { display: grid; gap: var(--vv-space-4); max-width: 42em; color: var(--vv-color-on-surface-variant); }
.prose :is(h1, h2) { color: var(--vv-color-on-surface); }
.prose h1 { margin-bottom: var(--vv-space-4); }
.prose h2 { margin-top: var(--vv-space-8); }
.prose ul { display: grid; gap: var(--vv-space-2); padding-left: 1.25em; margin: 0; }
.prose a { color: var(--vv-color-primary); text-underline-offset: 0.22em; }
.prose__card { display: grid; gap: var(--vv-space-4); margin-top: var(--vv-space-8); padding: var(--vv-space-6);
  border-radius: var(--vv-shape-md); background: var(--vv-color-surface-container-low); }
.prose__card h2 { margin-top: 0; }

@media (min-width: 600px) {
  .promises, .cloud { grid-template-columns: repeat(3, 1fr); }
  .rules, .swarm__facts { grid-template-columns: repeat(2, 1fr); }
  .primitives tr { grid-template-columns: 9rem 1fr; column-gap: var(--vv-space-6); }
  .primitives td:nth-child(3) { grid-column: 2; }
}
@media (min-width: 840px) {
  .stage { --stage-margin: var(--vv-space-3); --stage-glow: 42% 46% at 72% 58%; }
  .hero { grid-template-columns: 1.15fr 0.85fr; padding-top: var(--vv-space-12); }
  .layer { grid-template-columns: 12rem 1fr; padding: var(--vv-space-10) var(--vv-space-10); }
  .primitives thead { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .primitives thead th { font: 500 var(--vv-type-small)/1.4 var(--vv-font-sans); color: var(--vv-color-outline); padding-bottom: var(--vv-space-3); }
  .primitives tr { grid-template-columns: 10rem 1fr 1.6fr; }
  .primitives td:nth-child(3) { grid-column: auto; }
  .rules { grid-template-columns: repeat(3, 1fr); }
  .thesis__cols { grid-template-columns: 1fr 1fr; gap: var(--vv-space-10); }
  .iso tr { grid-template-columns: 14rem 1fr; }
  .demo { padding: var(--vv-space-12); gap: var(--vv-space-10); }
  .demo__track { grid-template-columns: repeat(6, 1fr); gap: var(--vv-space-2); }
  .demo__track::before, .demo__track::after { left: calc(100% / 12); right: calc(100% / 12); top: 7px; bottom: auto; width: auto; height: 2px; }
  .demo__track::after { background: linear-gradient(90deg, var(--vv-color-on-stage), var(--sdg-sodium-400) 30%); transform-origin: left; animation-name: demo-bar-x; }
  .demo__node { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: var(--vv-space-2); }
  .demo__step { margin-top: var(--vv-space-2); }
  .swarm { grid-template-columns: 1fr 1fr; align-items: center; padding: var(--vv-space-16) var(--vv-space-12); }
  .swarm__more { grid-column: 1 / -1; }
  .swarm__facts { grid-template-columns: repeat(4, 1fr); }
  .swarm__labels { font-size: 12px; }
  .page { padding-top: calc(var(--vv-space-20) + 56px); }
}