aeon-ui-engine 1.0.1 → 1.0.3

package/apps/demo/src/landing.css

@@ -1,1151 +0,0 @@
-/* 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: 1rem;
-  color: var(--text-muted);
-  max-width: 42ch;
-  margin: 0;
-  line-height: 1.6;
-}
-
-.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;
-  text-decoration: none;
-}
-
-.landing-header__cta [data-aeon-scope='button'][data-aeon-part='root'] {
-  min-height: var(--header-control-h);
-  letter-spacing: 0.04em;
-  white-space: nowrap;
-}
-
-.landing-header__cta-label--short {
-  display: 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__trigger-prefix {
-  display: none;
-  flex-shrink: 0;
-  font-weight: 600;
-}
-
-.theme-switcher__trigger-value {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.theme-switcher__theme-select [data-aeon-part='trigger'] {
-  min-height: var(--header-control-h);
-  height: 100%;
-  max-width: 100%;
-  overflow: hidden;
-  padding-inline: 0.5rem 1.75rem;
-  font-size: 0.7rem;
-}
-
-@media (max-width: 719px) {
-  .theme-switcher__trigger-prefix {
-    display: inline;
-  }
-}
-
-@media (max-width: 640px) {
-  .landing-header__cta [data-aeon-scope='button'][data-aeon-part='root'] {
-    min-height: var(--header-control-h);
-    padding-inline: 0.55rem !important;
-    font-size: 0.6875rem;
-  }
-
-  .landing-header__cta-label--long {
-    display: none;
-  }
-
-  .landing-header__cta-label--short {
-    display: inline;
-  }
-}
-
-@media (max-width: 420px) {
-  .theme-switcher__trigger-value {
-    display: none;
-  }
-}
-
-@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: auto;
-    min-width: 4.35rem;
-    max-width: none;
-  }
-
-  .theme-switcher__theme-select [data-aeon-part='trigger'] {
-    padding-inline: 0.45rem 1.5rem;
-    font-size: 0.625rem;
-  }
-}
-
-.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;
-}
-
-/* Hero */
-.hero {
-  padding-top: clamp(2.5rem, 6vw, 4rem);
-  padding-bottom: clamp(1.25rem, 3vw, 2rem);
-}
-
-/* Install line — above hero CTAs */
-.hero__copy .hero-install {
-  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__hint {
-  margin: 0.4rem 0 0;
-  font-size: 0.75rem;
-  line-height: 1.45;
-  color: var(--text-muted);
-  max-width: 36ch;
-}
-
-.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__command {
-  flex: 1 1 auto;
-  min-width: 0;
-  margin: 0;
-  padding: 0;
-  font-family: var(--font-mono, 'IBM Plex Mono', ui-monospace, monospace);
-  font-size: clamp(0.78rem, 2.8vw, 0.92rem);
-  font-weight: 500;
-  letter-spacing: 0.02em;
-  line-height: 1.3;
-  white-space: nowrap;
-  color: var(--aeon-text);
-  background: transparent;
-}
-
-.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.75rem;
-  font-size: 1.0625rem;
-  font-weight: 500;
-  color: var(--text-muted);
-  max-width: 44ch;
-  line-height: 1.6;
-}
-
-.hero__sub {
-  margin: 0 0 1.25rem;
-  font-size: 0.9375rem;
-  line-height: 1.55;
-  color: var(--text-muted);
-  max-width: 46ch;
-  opacity: 0.92;
-}
-
-.hero__actions {
-  margin-bottom: 1.5rem;
-}
-
-.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__pillars {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  display: flex;
-  flex-direction: column;
-}
-
-.hero__pillar {
-  display: flex;
-  flex-direction: column;
-  gap: 0.2rem;
-  padding: 0.85rem 1rem;
-  border-bottom: 1px solid var(--border);
-}
-
-.hero__pillar:last-child {
-  border-bottom: none;
-}
-
-.hero__pillar strong {
-  font-family: var(--font-display);
-  font-size: 0.8125rem;
-  font-weight: 600;
-  color: var(--aeon-text);
-}
-
-.hero__pillar span {
-  font-size: 0.8125rem;
-  line-height: 1.45;
-  color: var(--text-muted);
-}
-
-.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.85rem;
-  font-size: 0.875rem;
-  line-height: 1.55;
-  color: var(--text-muted);
-  max-width: 48ch;
-}
-
-.playground__block-demo {
-  margin: 0;
-}
-
-.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);
-  max-width: 40rem;
-}
-
-.diagram-card__head {
-  padding: 1.15rem 1.15rem 0;
-}
-
-.diagram-card__head h3 {
-  margin: 0 0 0.35rem;
-  font-family: var(--font-display);
-  font-size: 1.05rem;
-  font-weight: 600;
-}
-
-.diagram-card__head p {
-  margin: 0;
-  font-size: 0.875rem;
-  color: var(--text-muted);
-  line-height: 1.5;
-  max-width: 40ch;
-}
-
-.diagram-card__figure {
-  margin: 0;
-  padding: 1rem 1.15rem 1.15rem;
-  overflow-x: auto;
-}
-
-.diagram-card__mermaid {
-  min-height: 5rem;
-}
-
-.diagram-card__mermaid svg {
-  display: block;
-  width: 100%;
-  max-width: 36rem;
-  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;
-}