aeon-ui-engine 1.0.0

package/apps/demo/src/landing.css

@@ -0,0 +1,1094 @@
+/* Landing layout — voice & rhythm aligned with spidercorp.xyz */
+:root {
+  --font-display: 'Syne', system-ui, sans-serif;
+  --font-body: 'Instrument Sans', system-ui, sans-serif;
+  --max: 1080px;
+  --header-h: 3.15rem;
+  --gutter: clamp(1.25rem, 4vw, 2rem);
+  --section-y: clamp(4rem, 8vw, 6rem);
+  --radius-lg: 10px;
+  --grid-line: var(--aeon-grid-line, rgba(255, 255, 255, 0.05));
+  --bg-card: var(--aeon-surface);
+  --bg-elevated: var(--aeon-surface-raised);
+  --border: var(--aeon-border);
+  --border-strong: color-mix(in srgb, var(--aeon-border) 70%, var(--aeon-text));
+  --text-muted: var(--aeon-muted);
+  --site-header-offset: var(--header-h);
+  /* Header chrome — mode toggles, theme select, CTA share one height */
+  --header-control-h: 2.25rem;
+}
+
+.landing {
+  position: relative;
+  z-index: 1;
+}
+
+.container {
+  width: min(var(--max), 100% - 2 * var(--gutter));
+  margin-inline: auto;
+}
+
+.section {
+  padding-block: var(--section-y);
+  scroll-margin-top: calc(var(--site-header-offset) + 1rem);
+}
+
+.section-header {
+  margin-bottom: clamp(2rem, 4vw, 2.75rem);
+  max-width: 40rem;
+}
+
+.section-label {
+  display: block;
+  font-size: 0.7rem;
+  font-weight: 600;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  color: var(--aeon-accent);
+  margin: 0 0 0.75rem;
+}
+
+.section-title {
+  font-family: var(--font-display);
+  font-size: clamp(1.85rem, 4.5vw, 2.75rem);
+  font-weight: 700;
+  line-height: 1.1;
+  letter-spacing: -0.03em;
+  margin: 0 0 0.85rem;
+}
+
+.section-lead {
+  font-size: 1.05rem;
+  color: var(--text-muted);
+  max-width: 40rem;
+  margin: 0;
+  line-height: 1.65;
+}
+
+.text-accent {
+  color: var(--aeon-accent);
+}
+
+/* Shared shell — full-width top accent follows border-radius */
+.panel {
+  position: relative;
+  overflow: hidden;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+}
+
+.panel::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 2px;
+  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
+  background: linear-gradient(
+    90deg,
+    var(--aeon-accent) 0%,
+    color-mix(in srgb, var(--aeon-accent) 55%, transparent) 45%,
+    color-mix(in srgb, var(--aeon-accent) 18%, transparent) 100%
+  );
+  pointer-events: none;
+  z-index: 1;
+}
+
+.grid-mesh {
+  position: fixed;
+  inset: -100vmax;
+  z-index: 0;
+  pointer-events: none;
+  overflow: hidden;
+  background: var(--aeon-bg);
+}
+
+.grid-mesh__lines {
+  position: absolute;
+  inset: 0;
+  background-image:
+    linear-gradient(var(--grid-line) 1px, transparent 1px),
+    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
+  background-size: 48px 48px;
+  mask-image: radial-gradient(ellipse 85% 65% at 50% 0%, black 15%, transparent 72%);
+}
+
+.grid-mesh__vignette {
+  position: absolute;
+  inset: 0;
+  background: radial-gradient(ellipse at 50% 0%, transparent 0%, var(--aeon-bg) 70%);
+}
+
+/* Header */
+.landing-header {
+  position: sticky;
+  top: 0;
+  z-index: 40;
+  border-bottom: 1px solid transparent;
+  background: color-mix(in srgb, var(--aeon-bg) 94%, transparent);
+  backdrop-filter: blur(12px);
+}
+
+.landing-header--scrolled {
+  border-bottom-color: var(--border);
+}
+
+.landing-header__shell {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: clamp(0.4rem, 2vw, 1rem);
+  min-height: var(--header-h);
+  padding-inline: var(--gutter);
+  max-width: var(--max);
+  margin-inline: auto;
+}
+
+.landing-header__brand {
+  flex: 0 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: var(--font-display);
+  font-weight: 700;
+  font-size: clamp(0.95rem, 3.5vw, 1.25rem);
+  letter-spacing: -0.03em;
+  line-height: 1.1;
+  color: var(--aeon-text);
+  text-decoration: none;
+}
+
+.landing-header__brand span {
+  color: var(--aeon-accent);
+}
+
+.landing-header__nav {
+  display: none;
+  gap: 1.25rem;
+}
+
+@media (min-width: 720px) {
+  .landing-header__nav {
+    display: flex;
+  }
+}
+
+.landing-header__nav a {
+  font-size: 0.8rem;
+  font-weight: 500;
+  letter-spacing: 0.04em;
+  color: var(--text-muted);
+  text-decoration: none;
+  padding: 0.35rem 0.7rem;
+  border-radius: var(--aeon-radius);
+  transition:
+    color 0.2s ease,
+    background 0.2s ease;
+}
+
+.landing-header__nav a:hover {
+  color: var(--aeon-text);
+  background: color-mix(in srgb, var(--aeon-surface-raised) 80%, transparent);
+}
+
+.landing-header__nav a.is-active {
+  color: var(--aeon-accent);
+  background: var(--aeon-accent-dim);
+}
+
+.landing-header__utilities {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  gap: clamp(0.35rem, 1.5vw, 0.5rem);
+  flex: 0 1 auto;
+  min-width: 0;
+}
+
+.landing-header__cta {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  align-self: center;
+  text-decoration: none;
+}
+
+/* Theme switcher — segmented light/dark + preset select */
+.theme-switcher {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  gap: clamp(0.35rem, 1.5vw, 0.5rem);
+  min-width: 0;
+}
+
+.theme-switcher__modes {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.125rem;
+  flex-shrink: 0;
+  padding: 0.15rem;
+  border: 1px solid var(--aeon-border);
+  border-radius: var(--aeon-radius);
+  background: color-mix(in srgb, var(--aeon-surface) 92%, var(--aeon-bg));
+}
+
+.theme-switcher__mode-btn {
+  min-width: 2.75rem;
+  margin: 0 !important;
+}
+
+.theme-switcher__mode-btn[aria-pressed='true'] {
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
+}
+
+.theme-switcher__theme-select {
+  width: 6.5rem;
+  max-width: 24vw;
+  min-width: 0;
+  flex-shrink: 1;
+  height: var(--header-control-h);
+}
+
+.theme-switcher__theme-select [data-aeon-part='trigger'] {
+  min-height: var(--header-control-h);
+  height: 100%;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding-inline: 0.5rem 1.75rem;
+  font-size: 0.7rem;
+}
+
+@media (max-width: 420px) {
+  :root {
+    --header-control-h: 2rem;
+  }
+
+  .landing-header__shell {
+    gap: 0.35rem;
+  }
+
+  .landing-header__brand {
+    font-size: 0.9rem;
+  }
+
+  .theme-switcher {
+    gap: 0.3rem;
+  }
+
+  .theme-switcher__modes {
+    padding: 0.1rem;
+  }
+
+  .theme-switcher__mode-btn {
+    min-width: 0;
+    padding-inline: 0.4rem !important;
+    font-size: 0.625rem !important;
+    letter-spacing: 0.02em;
+  }
+
+  .theme-switcher__theme-select {
+    width: 4.75rem;
+    max-width: 20vw;
+  }
+
+  .theme-switcher__theme-select [data-aeon-part='trigger'] {
+    padding-inline: 0.4rem 1.5rem;
+    font-size: 0.625rem;
+  }
+
+  .landing-header__cta [data-aeon-scope='button'][data-aeon-part='root'] {
+    min-height: var(--header-control-h);
+    padding-inline: 0.45rem !important;
+    font-size: 0.625rem;
+    letter-spacing: 0.04em;
+  }
+
+  .landing-header__cta-label--long {
+    display: none;
+  }
+
+  .landing-header__cta-label--short {
+    display: inline;
+  }
+}
+
+.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;
+}
+
+/* Header CTA — same vertical rhythm as mode toggles + select */
+.landing-header__cta [data-aeon-scope='button'][data-aeon-part='root'] {
+  min-height: var(--header-control-h);
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  font-size: 0.75rem;
+}
+
+.landing-header__cta-label--short {
+  display: none;
+}
+
+/* Hero */
+.hero {
+  padding-top: clamp(2.5rem, 6vw, 4rem);
+  padding-bottom: clamp(1.25rem, 3vw, 2rem);
+}
+
+/* One-line install — above hero CTAs */
+.hero__copy .hero-install__line {
+  margin: 0 0 1rem;
+}
+
+.hero-install__line {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  gap: 0.65rem;
+  margin: 0;
+  padding: 0.6rem 0.85rem;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  background: color-mix(in srgb, var(--aeon-surface) 90%, var(--aeon-bg));
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width: thin;
+}
+
+.hero-install__label {
+  flex-shrink: 0;
+  font-size: 0.65rem;
+  font-weight: 600;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--aeon-accent);
+}
+
+.hero-install__access {
+  flex: 1 1 auto;
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  font-family: var(--font-display);
+  font-size: clamp(0.85rem, 3.2vw, 1.05rem);
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  line-height: 1.3;
+  white-space: nowrap;
+  color: var(--aeon-text);
+}
+
+.hero__eyebrow {
+  margin: 0 0 1rem;
+  font-size: 0.68rem;
+  font-weight: 600;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--text-muted);
+}
+
+.hero__title {
+  font-family: var(--font-display);
+  font-size: clamp(2rem, 5.5vw, 3.35rem);
+  font-weight: 700;
+  line-height: 1.06;
+  letter-spacing: -0.04em;
+  margin: 0 0 1rem;
+  max-width: 18ch;
+}
+
+.hero__lead {
+  margin: 0 0 0.35rem;
+  font-size: 1.0625rem;
+  font-weight: 500;
+  color: var(--text-muted);
+  max-width: 44ch;
+  line-height: 1.6;
+}
+
+.hero__sub {
+  margin: 0 0 1.5rem;
+  font-size: 0.98rem;
+  color: color-mix(in srgb, var(--text-muted) 82%, transparent);
+  max-width: 42ch;
+}
+
+.hero__actions {
+  margin-bottom: 2rem;
+}
+
+.hero__actions a {
+  text-decoration: none;
+}
+
+.hero__stats {
+  display: flex;
+  margin: 0;
+  padding: 0;
+}
+
+.hero__stat {
+  flex: 1 1 0;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+  padding: 1.05rem 1.1rem 1rem;
+  border-right: 1px solid var(--border);
+  background: transparent;
+  transition: background 0.2s ease;
+}
+
+.hero__stat:last-child {
+  border-right: none;
+}
+
+.hero__stat[data-aeon-state='active'] {
+  background: color-mix(in srgb, var(--aeon-accent-dim) 28%, transparent);
+  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--aeon-accent) 35%, transparent);
+}
+
+.hero__stat-label {
+  font-size: 0.65rem;
+  font-weight: 600;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--text-muted);
+}
+
+.hero__stat-detail {
+  font-family: var(--font-display);
+  font-size: 0.8125rem;
+  font-weight: 500;
+  line-height: 1.35;
+  color: var(--aeon-text);
+}
+
+@media (max-width: 640px) {
+  .hero__stats {
+    flex-direction: column;
+  }
+
+  .hero__stat {
+    border-right: none;
+    border-bottom: 1px solid var(--border);
+  }
+
+  .hero__stat:last-child {
+    border-bottom: none;
+  }
+}
+
+.hero__visual {
+  margin-top: 2.5rem;
+}
+
+@media (min-width: 900px) {
+  .hero__grid {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(320px, 400px);
+    gap: clamp(2rem, 4vw, 3rem);
+    align-items: center;
+  }
+
+  .hero__visual {
+    margin-top: 0;
+  }
+}
+
+.state-card {
+  padding: 1.15rem var(--aeon-pad-lg) var(--aeon-pad-lg);
+  min-width: 0;
+}
+
+.state-card .machine-console {
+  width: 100%;
+  min-width: 0;
+}
+
+.state-card__label {
+  margin: 0 0 0.75rem;
+  font-family: var(--font-display);
+  font-size: 1.15rem;
+  font-weight: 700;
+  letter-spacing: -0.03em;
+}
+
+.state-card__hint {
+  margin: 0 0 1rem;
+  font-size: 0.8rem;
+  color: var(--text-muted);
+}
+
+/* Layers */
+.layers__commitments {
+  display: grid;
+  gap: 0;
+  margin-bottom: 2rem;
+  padding: 0;
+}
+
+@media (min-width: 720px) {
+  .layers__commitments {
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  .layers__commitment:not(:last-child) {
+    border-right: 1px solid var(--border);
+  }
+}
+
+@media (max-width: 719px) {
+  .layers__commitment:not(:last-child) {
+    border-bottom: 1px solid var(--border);
+  }
+}
+
+.layers__commitment {
+  padding: 1.05rem var(--aeon-pad-md) var(--aeon-pad-md);
+  background: transparent;
+}
+
+.layers__commitment h3 {
+  margin: 0 0 0.35rem;
+  font-family: var(--font-display);
+  font-size: 0.95rem;
+  font-weight: 600;
+}
+
+.layers__commitment p {
+  margin: 0;
+  font-size: 0.88rem;
+  color: var(--text-muted);
+  line-height: 1.5;
+}
+
+.layers__grid {
+  display: grid;
+  gap: 1rem;
+}
+
+@media (min-width: 720px) {
+  .layers__grid {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+.layer-card {
+  padding: 1.05rem var(--aeon-pad-md) var(--aeon-pad-md);
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.layer-card__index {
+  font-family: var(--aeon-mono);
+  font-size: 0.65rem;
+  font-weight: 600;
+  letter-spacing: 0.14em;
+  color: color-mix(in srgb, var(--aeon-accent) 70%, var(--aeon-muted));
+}
+
+.layer-card h3 {
+  margin: 0;
+  font-family: var(--font-mono);
+  font-size: 0.9rem;
+  color: var(--aeon-accent);
+}
+
+.layer-card > p {
+  margin: 0;
+  font-size: 0.92rem;
+  color: var(--text-muted);
+  line-height: 1.5;
+}
+
+.layer-card ul {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+}
+
+.layer-card li {
+  font-size: 0.82rem;
+  color: var(--aeon-text);
+}
+
+.layer-card li::before {
+  content: '— ';
+  color: var(--aeon-accent);
+}
+
+/* Playground — one shell, flat dividers between demos */
+.playground {
+  padding: 0;
+  overflow: hidden;
+}
+
+.playground__block {
+  padding: 1.15rem var(--aeon-pad-lg) var(--aeon-pad-lg);
+  margin: 0;
+  border-bottom: 1px solid var(--border);
+}
+
+.playground__block:first-child {
+  padding-top: 1.2rem;
+}
+
+.playground__block--last,
+.playground__block:last-child {
+  border-bottom: none;
+}
+
+.playground__block-title {
+  margin: 0 0 0.25rem;
+  font-family: var(--font-display);
+  font-size: 1rem;
+  font-weight: 600;
+}
+
+.playground__block-sub {
+  margin: 0 0 0.75rem;
+  font-size: 0.875rem;
+  line-height: 1.55;
+  color: var(--text-muted);
+  max-width: 52ch;
+}
+
+.code-example {
+  margin: 0 0 1.25rem;
+  padding: 0.85rem 1rem;
+  font-family: var(--aeon-mono);
+  font-size: 0.75rem;
+  line-height: 1.55;
+  color: color-mix(in srgb, var(--aeon-text) 88%, var(--aeon-muted));
+  background: color-mix(in srgb, var(--aeon-bg) 55%, var(--aeon-surface));
+  border: 1px solid var(--aeon-border);
+  border-radius: var(--aeon-radius);
+  overflow-x: auto;
+  white-space: pre;
+}
+
+.code-example code {
+  font-family: inherit;
+}
+
+.scroll-demo {
+  min-width: 0;
+}
+
+.scroll-demo-hint {
+  margin: 0 0 1rem;
+  font-size: 0.8125rem;
+  line-height: 1.45;
+  color: var(--aeon-muted);
+}
+
+.scroll-demo-grid {
+  display: grid;
+  gap: 1.25rem;
+  grid-template-columns: 1fr;
+  min-width: 0;
+}
+
+@media (min-width: 900px) {
+  .scroll-demo-grid {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 1rem;
+  }
+}
+
+.scroll-demo-cell {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+  min-width: 0;
+  max-width: 100%;
+}
+
+.scroll-demo-scroll {
+  width: 100%;
+  min-width: 0;
+}
+
+.scroll-demo-scroll .aeonScroll__viewport {
+  max-width: 100%;
+}
+
+.scroll-demo-label {
+  margin: 0;
+  font-size: 0.75rem;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--aeon-muted);
+}
+
+.scroll-demo-meta {
+  display: flex;
+  flex-direction: column;
+  gap: 0.2rem;
+  min-width: 0;
+}
+
+.scroll-demo-meta-label {
+  font-size: 0.625rem;
+  font-weight: 600;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--aeon-muted);
+}
+
+.scroll-demo-state {
+  display: block;
+  margin: 0;
+  padding: 0.4rem 0.55rem;
+  font-family: var(--aeon-mono);
+  font-size: 0.6875rem;
+  line-height: 1.35;
+  color: var(--aeon-text);
+  background: color-mix(in srgb, var(--aeon-bg) 55%, var(--aeon-surface));
+  border: 1px solid var(--aeon-border);
+  border-radius: var(--aeon-radius-sm);
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  white-space: nowrap;
+}
+
+.scroll-demo-list {
+  margin: 0;
+  padding: 0.5rem 0.65rem 0.5rem 1.1rem;
+  font-size: 0.8125rem;
+  line-height: 1.55;
+}
+
+.scroll-demo-list li + li {
+  margin-top: 0.15rem;
+}
+
+.scroll-demo-row {
+  display: flex;
+  flex-wrap: nowrap;
+  gap: 0.4rem;
+  padding: 0.5rem;
+  width: max-content;
+  min-width: 100%;
+}
+
+.scroll-demo-matrix {
+  display: grid;
+  grid-template-columns: repeat(5, 3.75rem);
+  gap: 0.4rem;
+  padding: 0.5rem;
+  width: max-content;
+}
+
+@media (max-width: 479px) {
+  .scroll-demo-matrix {
+    grid-template-columns: repeat(4, 3.5rem);
+  }
+}
+
+.scroll-demo-chip {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 3.25rem;
+  padding: 0.35rem 0.45rem;
+  font-family: var(--aeon-mono);
+  font-size: 0.6875rem;
+  white-space: nowrap;
+  background: color-mix(in srgb, var(--aeon-accent) 10%, var(--aeon-surface));
+  border: 1px solid var(--aeon-border);
+  border-radius: var(--aeon-radius-sm);
+}
+
+.layer-card__example {
+  margin-top: 1rem;
+}
+
+.thesis__card .code-example {
+  margin: 0.75rem 0 0;
+  font-size: 0.7rem;
+}
+
+.hero__stat-example {
+  display: block;
+  margin-top: 0.35rem;
+  font-family: var(--aeon-mono);
+  font-size: 0.62rem;
+  line-height: 1.4;
+  color: color-mix(in srgb, var(--aeon-muted) 90%, transparent);
+  white-space: pre;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+@media (max-width: 900px) {
+  .hero__stat-example {
+    display: none;
+  }
+}
+
+/* Thesis — 2×2 connected grid inside one shell */
+.thesis__grid {
+  display: grid;
+  gap: 0;
+  padding: 0;
+  overflow: hidden;
+}
+
+@media (min-width: 720px) {
+  .thesis__grid {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .thesis__card:nth-child(odd) {
+    border-right: 1px solid var(--border);
+  }
+
+  .thesis__card:nth-child(-n + 2) {
+    border-bottom: 1px solid var(--border);
+  }
+}
+
+@media (max-width: 719px) {
+  .thesis__card:not(:last-child) {
+    border-bottom: 1px solid var(--border);
+  }
+}
+
+.thesis__card {
+  padding: 1.15rem var(--aeon-pad-lg) var(--aeon-pad-lg);
+  background: transparent;
+}
+
+.thesis__card h3 {
+  margin: 0 0 0.5rem;
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--aeon-accent);
+}
+
+.thesis__card p {
+  margin: 0;
+  font-size: 0.92rem;
+  color: var(--text-muted);
+  line-height: 1.6;
+}
+
+.thesis__cta {
+  margin-top: 1.5rem;
+}
+
+.thesis__cta a {
+  text-decoration: none;
+}
+
+/* Footer */
+.landing-footer {
+  padding-block: 2.5rem;
+  border-top: 1px solid var(--border);
+  margin-top: 2rem;
+}
+
+.landing-footer__inner {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  font-size: 0.85rem;
+  color: var(--text-muted);
+}
+
+.landing-footer__inner a {
+  color: var(--aeon-accent);
+  text-decoration: none;
+}
+
+.landing-footer__tag {
+  font-family: var(--font-display);
+  font-weight: 500;
+}
+
+/* Scene plane demo */
+.scene-demo__stage {
+  position: relative;
+  min-height: 220px;
+  overflow: hidden;
+  border-radius: calc(var(--radius-lg) - 2px);
+  padding: 1.25rem;
+  display: grid;
+  gap: 1rem;
+}
+
+.scene-demo__swatches {
+  position: relative;
+  z-index: 1;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 0.5rem;
+}
+
+.scene-demo__swatch {
+  min-height: 3.5rem;
+  border-radius: 6px;
+  border: 1px solid var(--border);
+}
+
+.scene-demo__viz {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 1rem 1.5rem;
+}
+
+.scene-demo__bars {
+  width: min(100%, 10rem);
+  height: auto;
+}
+
+.scene-demo__code {
+  margin-top: 1rem;
+  padding: 0.75rem 1rem;
+  background: var(--bg-elevated);
+  border-top: 1px solid var(--border);
+  font-family: 'IBM Plex Mono', ui-monospace, monospace;
+  font-size: 0.72rem;
+  color: var(--text-muted);
+  overflow-x: auto;
+}
+
+.scene-demo__code pre {
+  margin: 0;
+}
+
+.scene-demo--3d {
+  margin-top: 1.5rem;
+}
+
+.scene-demo__3d-header {
+  padding: 1rem 1.25rem 0;
+}
+
+.scene-demo__3d-title {
+  margin: 0 0 0.35rem;
+  font-family: var(--font-display);
+  font-size: 1.05rem;
+  font-weight: 600;
+}
+
+.scene-demo__3d-lead {
+  margin: 0;
+  font-size: 0.88rem;
+  color: var(--text-muted);
+  max-width: 42rem;
+}
+
+.scene-3d-demo {
+  margin: 1rem 1.25rem 0;
+  border-radius: calc(var(--radius-lg) - 2px);
+  background: #0a0e14;
+}
+
+/* Statechart diagrams (Mermaid) */
+.diagrams__grid {
+  display: grid;
+  gap: clamp(1.25rem, 3vw, 1.75rem);
+}
+
+@media (min-width: 52rem) {
+  .diagrams__grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .diagram-card:first-child {
+    grid-column: 1 / -1;
+  }
+}
+
+.diagram-card__head {
+  padding: 1.25rem 1.25rem 0;
+}
+
+.diagram-card__head h3 {
+  margin: 0 0 0.5rem;
+  font-family: var(--font-display);
+  font-size: 1.15rem;
+  font-weight: 600;
+}
+
+.diagram-card__head p {
+  margin: 0 0 0.65rem;
+  font-size: 0.9rem;
+  color: var(--text-muted);
+  line-height: 1.55;
+}
+
+.diagram-card__ref {
+  display: inline-block;
+  font-size: 0.72rem;
+  padding: 0.2rem 0.5rem;
+  border-radius: 4px;
+  background: var(--bg-elevated);
+  border: 1px solid var(--border);
+  color: var(--aeon-accent);
+}
+
+.diagram-card__figure {
+  margin: 0;
+  padding: 0.75rem 1rem 1.25rem;
+  overflow-x: auto;
+}
+
+.diagram-card__mermaid svg {
+  display: block;
+  max-width: 100%;
+  height: auto;
+  margin-inline: auto;
+}
+
+.diagram-card__loading,
+.diagram-card__error {
+  margin: 0;
+  padding: 1.5rem;
+  font-size: 0.85rem;
+  color: var(--text-muted);
+  text-align: center;
+}
+
+.diagram-card__error {
+  color: #f87171;
+  white-space: pre-wrap;
+  text-align: left;
+}
+
+.diagrams__footnote {
+  margin: clamp(1.5rem, 3vw, 2rem) 0 0;
+  font-size: 0.88rem;
+  color: var(--text-muted);
+}
+
+.diagrams__footnote a {
+  color: var(--aeon-accent);
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}