/* Stagecraft theme bundle: paper — generated by scripts/bundle.js. */
/* === themes/paper/tokens.css === */
/* Stagecraft — Paper theme tokens */
:root[data-theme="paper"] {
  --bg: #FAFAF7;
  --bg-elevated: #FFFFFF;
  --fg: #1F1F1F;
  --dim: #888888;
  --dim-2: #DCDCD8;
  --accent: #1F4F87;            /* navy */
  --accent-soft: rgba(31, 79, 135, 0.08);
  --accent-glow: rgba(31, 79, 135, 0.18);
  --blue: #1F4F87;
  --amber: #B57F2C;
  --red: #9B2C2C;
  --mono: 'Source Serif 4', 'IBM Plex Serif', Georgia, serif;
  --display: 'Inter', system-ui, sans-serif;
  --body: 'Inter', system-ui, sans-serif;
}

/* Paper theme has no film grain, no ambient gradient */
:root[data-theme="paper"] body::before,
:root[data-theme="paper"] body::after { display: none; }

/* === themes/paper/base.css === */
/* Paper theme — base styles. Token-driven, so most rules inherit from phosphor/base.css
 * (you should also link that file). This file overrides anything paper-specific. */

/* === inlined: themes/phosphor/base.css === */
/* Stagecraft — Phosphor theme: engine + base styles. */

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
}

body.idle { cursor: none; }

/* subtle ambient gradient */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(255,255,255,0.025) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

/* film grain */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1   0 0 0 0 1   0 0 0 0 1   0 0 0 0.06 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
  pointer-events: none;
  z-index: 1000;
  mix-blend-mode: overlay;
  opacity: 0.6;
}

#stage {
  position: fixed;
  inset: 0;
  z-index: 1;
}

.slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(2rem, 6vw, 6rem);
  opacity: 0;
  pointer-events: none;
}
.slide.current { opacity: 1; pointer-events: auto; }

/* ---------- Typography ---------- */
.hero {
  font-size: clamp(2.5rem, 7vw, 6.5rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.025em;
  max-width: 22ch;
  text-align: center;
}
.hero-xl {
  font-size: clamp(3rem, 9vw, 8rem);
  font-weight: 500;
  line-height: 1.0;
  letter-spacing: -0.03em;
  max-width: 18ch;
  text-align: center;
}
.pre-label {
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 2.5rem;
}
.pre-label .dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  background: var(--accent);
  margin-right: 0.7rem;
  vertical-align: middle;
  animation: pulse 2s ease-in-out infinite;
}
.pre-label.blue .dot { background: var(--blue); }

.sub {
  margin-top: 2.5rem;
  font-size: clamp(0.95rem, 1.3vw, 1.2rem);
  color: var(--dim);
  letter-spacing: 0.02em;
  text-align: center;
}
.sub strong { color: var(--fg); font-weight: 500; }

.accent { color: var(--accent); }
.accent-blue { color: var(--blue); }
.dim { color: var(--dim); }

/* Caret */
.caret {
  display: inline-block;
  width: 0.55em;
  height: 1em;
  background: var(--accent);
  margin-left: 0.15em;
  vertical-align: -0.12em;
  animation: blink 1.1s steps(2, end) infinite;
  box-shadow: 0 0 12px var(--accent-glow);
}
@keyframes blink { 50% { opacity: 0; } }
@keyframes pulse { 50% { opacity: 0.4; } }

/* ---------- Chrome ---------- */
.ui {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dim);
  font-family: var(--mono);
}
.ui-brand { position: absolute; top: 1.8rem; left: 2.2rem; }
.ui-brand .br-accent { color: var(--fg); font-weight: 500; }
.ui-title {
  position: absolute;
  top: 1.8rem; right: 2.2rem;
  text-align: right;
  max-width: 40ch;
}
.ui-counter {
  position: absolute;
  bottom: 1.8rem; left: 2.2rem;
  color: var(--fg);
  font-weight: 500;
}
.ui-counter .slash { color: var(--dim); margin: 0 0.4em; }
.ui-counter .total { color: var(--dim); }
.ui-dots {
  position: absolute;
  bottom: 1.8rem; right: 2.2rem;
  display: flex;
  gap: 0.7rem;
  align-items: center;
}
.ui-dots .dot {
  width: 6px; height: 6px;
  background: var(--dim-2);
  transition: background 300ms, box-shadow 300ms, transform 300ms;
}
.ui-dots .dot.active {
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent-glow);
  transform: scale(1.15);
}
.ui-dots .dot.past { background: var(--dim); }

.ui-hint {
  position: absolute;
  bottom: 1.8rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.68rem;
  letter-spacing: 0.25em;
  color: var(--dim-2);
  opacity: 0;
  transition: opacity 300ms;
}
.ui-hint.visible { opacity: 1; }

.ui-brand, .ui-title, .ui-counter, .ui-dots {
  opacity: 0;
  transition: opacity 700ms ease-out;
}
body.armed .ui-brand,
body.armed .ui-title,
body.armed .ui-counter,
body.armed .ui-dots { opacity: 1; }

/* ---------- Welcome ---------- */
.welcome {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: opacity 500ms ease-out;
}
.welcome.hidden { opacity: 0; pointer-events: none; }
.welcome .key-prompt {
  font-size: 0.85rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 1rem;
}
.welcome .key-prompt .accent { color: var(--accent); }
.welcome h1 {
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--fg);
  margin-bottom: 0.4rem;
}
.welcome .by {
  font-size: 0.85rem;
  color: var(--dim);
  letter-spacing: 0.15em;
}

/* ---------- Stagger ---------- */
.stagger > * {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 700ms ease-out, transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}
.stagger > *.in { opacity: 1; transform: translateY(0); }

/* ---------- Storyboard ---------- */
.overview {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 300;
  overflow-y: auto;
  overflow-x: hidden;
  opacity: 0;
  transition: opacity 250ms ease-out;
  padding: 5rem 2rem 2rem;
}
.overview.in { opacity: 1; }
.overview-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  padding: 1.3rem 2rem;
  background: rgba(10,10,10,0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--dim-2);
  z-index: 310;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.72rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--dim);
  font-family: var(--mono);
}
.overview-header .left strong { color: var(--fg); font-weight: 500; }
.overview-header .accent { color: var(--accent); }
.overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.2rem;
  max-width: 1700px;
  margin: 0 auto;
}
.tile {
  position: relative;
  overflow: hidden;
  background: var(--bg);
  border: 1px solid var(--dim-2);
  cursor: pointer;
  transition: border-color 200ms ease-out, transform 200ms ease-out, box-shadow 200ms ease-out;
}
.tile:hover { border-color: var(--accent); transform: translateY(-3px); }
.tile.current {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 0 28px var(--accent-glow);
}
.tile-scaler {
  position: absolute;
  top: 0; left: 0;
  transform-origin: top left;
  pointer-events: none;
}
.tile-scaler > .slide {
  position: absolute !important;
  inset: 0 !important;
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}
.tile-num {
  position: absolute;
  top: 0.5rem; left: 0.7rem;
  font-size: 0.65rem;
  color: var(--dim);
  letter-spacing: 0.25em;
  z-index: 4;
  font-weight: 500;
  background: rgba(10,10,10,0.7);
  padding: 0.2rem 0.5rem;
  font-family: var(--mono);
}
.tile.current .tile-num { color: var(--accent); }
.tile-label {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: linear-gradient(to top, rgba(10,10,10,0.95) 40%, rgba(10,10,10,0));
  color: var(--fg);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 1.6rem 0.8rem 0.6rem;
  z-index: 4;
  pointer-events: none;
  font-family: var(--mono);
}

/* responsive */
@media (max-width: 700px) {
  .ui-hint { display: none; }
}

/* a11y */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* Material Symbols Outlined — for components that want icons */
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-feature-settings: 'liga';
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  font-variation-settings: 'opsz' 24, 'wght' 400, 'FILL' 0, 'GRAD' 0;
}

/* Edit-mode body marker (subtle ring) */
body.edit-mode #stage::after {
  content: '';
  position: fixed;
  inset: 0;
  border: 2px solid var(--accent);
  pointer-events: none;
  z-index: 99;
  box-shadow: inset 0 0 30px var(--accent-soft);
  opacity: 0.3;
}

/* ----------------------------------------------------------------------------
 * Presenter view (multi-monitor / second window)
 *
 * Activated via ?mode=presenter on the URL. The engine builds a different
 * chrome and renders the current slide into a half-screen pane plus a
 * thumbnail of the next slide, a notes panel, and a timer. This window
 * is intended to live on the laptop while the main window goes on the beamer.
 * -------------------------------------------------------------------------- */
body.presenter-mode {
  overflow: auto;
  background: var(--bg);
}
body.presenter-mode::before,
body.presenter-mode::after { display: none; }    /* no film grain / ambient gradient */

.presenter-shell {
  display: grid;
  grid-template-rows: 1fr auto auto;
  height: 100vh;
  gap: 0.5rem;
  padding: 0.7rem;
}
.presenter-top {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 0.7rem;
  min-height: 0;        /* allow children to overflow:hidden */
}
.presenter-pane {
  position: relative;
  background: var(--bg-elevated);
  border: 1px solid var(--dim-2);
  overflow: hidden;
}
.presenter-pane-label {
  position: absolute;
  top: 0.5rem; left: 0.6rem;
  z-index: 10;
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dim);
  font-family: var(--mono);
  background: rgba(10, 10, 10, 0.75);
  padding: 0.15rem 0.45rem;
}
.presenter-current .presenter-pane-label {
  color: var(--accent);
}
.presenter-pane-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
/* Slides rendered into a presenter pane need to be size-constrained to the
 * pane (not viewport). They retain their original layout via flex centering
 * and clamp() typography. */
.presenter-pane .slide {
  position: absolute !important;
  inset: 0 !important;
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  pointer-events: none;
}
.presenter-end {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--dim);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  font-size: 0.9rem;
}

/* Meta strip: timer + clock + reset */
.presenter-meta {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1.2rem;
  padding: 0.6rem 1rem;
  background: var(--bg-elevated);
  border: 1px solid var(--dim-2);
  font-family: var(--mono);
}
.presenter-timer {
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-weight: 500;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}
.presenter-clock {
  font-size: 0.9rem;
  color: var(--dim);
  letter-spacing: 0.15em;
  text-align: right;
}
.presenter-timer-reset {
  background: transparent;
  color: var(--dim);
  border: 1px solid var(--dim-2);
  font-family: inherit;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.35rem 0.7rem;
  cursor: pointer;
}
.presenter-timer-reset:hover {
  color: var(--accent);
  border-color: var(--accent);
}

/* Notes panel */
.presenter-notes {
  background: var(--bg-elevated);
  border: 1px solid var(--dim-2);
  padding: 0.8rem 1rem;
  max-height: 30vh;
  overflow-y: auto;
}
.presenter-notes-label {
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dim);
  font-family: var(--mono);
  margin-bottom: 0.5rem;
}
.presenter-notes-body {
  font-size: clamp(0.95rem, 1.4vw, 1.15rem);
  line-height: 1.5;
  color: var(--fg);
  white-space: pre-wrap;
}
.presenter-notes-body.empty {
  color: var(--dim);
  font-style: italic;
}


:root[data-theme="paper"] body::before,
:root[data-theme="paper"] body::after { display: none; }

:root[data-theme="paper"] .caret { animation: none; background: var(--accent); }

/* === themes/paper/components.css === */
/* Stagecraft — Paper theme: Layer-2 component styles.
 * Imports phosphor base layer + paper-specific family sub-files. */

/* === inlined: themes/phosphor/components.css === */
/* Stagecraft — Phosphor theme: Layer-2 component styles. */

/* Component expansion (Phase 2): layout / diagram / chart families */
/* === inlined: themes/phosphor/components-layout.css === */
/* Stagecraft — Phosphor theme: layout components. */

/* ---------------------------------------------------------------------------
 * ImageText
 * ------------------------------------------------------------------------- */
.image-text {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  width: min(1400px, 94vw);
}
.image-text--right { grid-template-areas: 'text image'; }
.image-text--right .it-figure { grid-area: image; }
.image-text--right .it-text { grid-area: text; }
.image-text--left  { grid-template-areas: 'image text'; }
.image-text--left  .it-figure { grid-area: image; }
.image-text--left  .it-text  { grid-area: text; }

.it-figure {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--bg-elevated);
  opacity: 0;
  transform: translateX(-30px) scale(0.98);
  transition: opacity 900ms ease-out, transform 1100ms cubic-bezier(0.16, 1, 0.3, 1);
}
.image-text--right .it-figure { transform: translateX(30px) scale(0.98); }
.it-figure.in { opacity: 1; transform: translateX(0) scale(1); }
.it-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.92) contrast(1.04);
}
.it-img-frame {
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow:
    inset 0 0 0 1px var(--dim-2),
    0 0 0 1px var(--dim-2),
    0 30px 60px -20px rgba(0,0,0,0.6),
    0 0 60px -10px var(--accent-glow);
}

.it-text {
  display: flex;
  flex-direction: column;
  gap: clamp(0.8rem, 1.5vw, 1.4rem);
}
.it-heading {
  margin: 0;
  font-size: clamp(2.5rem, 5.5vw, 4rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--fg);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 700ms ease-out, transform 800ms cubic-bezier(0.16, 1, 0.3, 1);
}
.it-heading.in { opacity: 1; transform: translateY(0); }
.it-body {
  display: flex;
  flex-direction: column;
  gap: 0.4em;
}
.it-line {
  font-size: clamp(1rem, 1.6vw, 1.4rem);
  line-height: 1.5;
  color: var(--fg);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 600ms ease-out, transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}
.it-line.in { opacity: 1; transform: translateY(0); }
.it-caption {
  margin-top: 0.6rem;
  font-size: clamp(0.85rem, 1.1vw, 1rem);
  color: var(--dim);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 800ms ease-out;
}
.it-caption.in { opacity: 1; }

@media (max-width: 800px) {
  .image-text, .image-text--left, .image-text--right {
    grid-template-columns: 1fr;
    grid-template-areas: 'image' 'text';
  }
  .it-figure { aspect-ratio: 16 / 10; }
}

/* ---------------------------------------------------------------------------
 * FullImage
 * ------------------------------------------------------------------------- */
.full-image-host {
  padding: 0 !important;
  display: block !important;
  width: 100vw;
  height: 100vh;
  position: relative;
}
.full-image {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.fi-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 1200ms ease-out, transform 18s linear;
}
.fi-bg.in { opacity: 1; }
.fi-bg.drift { transform: scale(1.12) translate(-1%, 1%); }

.fi-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  padding: clamp(2rem, 6vw, 5rem);
  pointer-events: none;
  z-index: 2;
}
.fi-overlay--center        { align-items: center;     justify-content: center; text-align: center; }
.fi-overlay--top           { align-items: flex-start; justify-content: center; text-align: center; }
.fi-overlay--bottom-left   { align-items: flex-end;   justify-content: flex-start; }
.fi-overlay--bottom-right  { align-items: flex-end;   justify-content: flex-end; text-align: right; }

.fi-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
}
.fi-scrim--center       { background: radial-gradient(ellipse at center, rgba(10,10,10,0.55) 0%, rgba(10,10,10,0.1) 70%); }
.fi-scrim--top          { background: linear-gradient(180deg, rgba(10,10,10,0.75), transparent 50%); }
.fi-scrim--bottom-left  { background: linear-gradient(45deg, rgba(10,10,10,0.85), transparent 60%); }
.fi-scrim--bottom-right { background: linear-gradient(315deg, rgba(10,10,10,0.85), transparent 60%); }

.fi-overlay-inner {
  position: relative;
  z-index: 1;
  max-width: 32ch;
  display: flex;
  flex-direction: column;
  gap: clamp(0.8rem, 1.5vw, 1.4rem);
}
.fi-overlay--center .fi-overlay-inner,
.fi-overlay--top    .fi-overlay-inner { max-width: 28ch; }
.fi-headline {
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--fg);
  text-shadow: 0 2px 30px rgba(0,0,0,0.55);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 800ms ease-out, transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
}
.fi-headline.in { opacity: 1; transform: translateY(0); }
.fi-body {
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  color: var(--fg);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 800ms ease-out, transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
}
.fi-body.in { opacity: 0.92; transform: translateY(0); }

/* ---------------------------------------------------------------------------
 * Quote
 * ------------------------------------------------------------------------- */
.quote {
  position: relative;
  text-align: center;
  max-width: min(1100px, 92vw);
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: clamp(0.5rem, 1.5vw, 1.5rem);
  row-gap: clamp(1.5rem, 4vw, 3rem);
}
.q-mark {
  font-size: clamp(4rem, 9vw, 8rem);
  line-height: 0.8;
  color: var(--accent);
  text-shadow: 0 0 30px var(--accent-glow);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 600ms ease-out, transform 700ms cubic-bezier(0.34, 1.56, 0.64, 1);
  align-self: start;
  user-select: none;
}
.q-mark.in { opacity: 1; transform: scale(1); }
.q-mark--open  { padding-top: 0.2em; }
.q-mark--close { padding-top: 0.2em; align-self: end; }

.q-text {
  margin: 0;
  font-style: italic;
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--fg);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 900ms ease-out, transform 1000ms cubic-bezier(0.16, 1, 0.3, 1);
  grid-column: 2;
}
.q-text.in { opacity: 1; transform: translateY(0); }

.q-meta {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 0.6rem;
  font-size: clamp(0.95rem, 1.3vw, 1.15rem);
  letter-spacing: 0.04em;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 800ms ease-out, transform 900ms ease-out;
}
.q-meta.in { opacity: 1; transform: translateY(0); }
.q-author { color: var(--fg); font-weight: 500; }
.q-role,
.q-source { color: var(--dim); }
.q-sep    { color: var(--dim-2); }

/* ---------------------------------------------------------------------------
 * BigNumber
 * ------------------------------------------------------------------------- */
.big-number {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.8rem, 1.6vw, 1.4rem);
}
.bn-figure {
  display: inline-flex;
  align-items: baseline;
  gap: 0.05em;
  line-height: 0.9;
}
.bn-num {
  font-size: clamp(6rem, 18vw, 14rem);
  font-weight: 500;
  letter-spacing: -0.05em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 60px var(--accent-glow);
  line-height: 1;
}
.bn-unit {
  font-size: clamp(2.5rem, 7vw, 5.5rem);
  font-weight: 400;
  letter-spacing: -0.03em;
  color: var(--dim);
  margin-left: 0.1em;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 600ms ease-out, transform 700ms ease-out;
}
.bn-unit.in { opacity: 1; transform: translateX(0); }
.bn-label {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  color: var(--fg);
  letter-spacing: -0.01em;
  max-width: 24ch;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 700ms ease-out, transform 800ms ease-out;
}
.bn-label.in { opacity: 1; transform: translateY(0); }
.bn-caption {
  margin-top: 0.6rem;
  font-size: clamp(0.9rem, 1.2vw, 1.1rem);
  color: var(--dim);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 800ms ease-out;
}
.bn-caption.in { opacity: 1; }

/* ---------------------------------------------------------------------------
 * Stats
 * ------------------------------------------------------------------------- */
.stats {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  width: min(1300px, 94vw);
}
.stats--cols-1 { grid-template-columns: 1fr; }
.stats--cols-2 { grid-template-columns: repeat(2, 1fr); }
.stats--cols-3 { grid-template-columns: repeat(3, 1fr); }
.stats--cols-4 { grid-template-columns: repeat(4, 1fr); }

.stat {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: clamp(1.2rem, 2.5vw, 2rem);
  border: 1px solid var(--dim-2);
  background: var(--bg-elevated);
  position: relative;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 700ms ease-out, transform 800ms cubic-bezier(0.16, 1, 0.3, 1), border-color 600ms ease;
}
.stat.in { opacity: 1; transform: translateY(0); }
.stat::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 2px;
  background: var(--dim-2);
  transition: background 600ms ease;
}
.stat--accent::before { background: var(--accent); box-shadow: 0 0 14px var(--accent-glow); }
.stat--amber::before  { background: var(--amber); }
.stat--blue::before   { background: var(--blue); }
.stat--red::before    { background: var(--red); }

.stat-figure {
  display: flex;
  align-items: baseline;
  gap: 0.05em;
}
.stat-num {
  font-size: clamp(2.8rem, 6vw, 5rem);
  font-weight: 500;
  letter-spacing: -0.04em;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.stat-unit {
  font-size: clamp(1.4rem, 2.5vw, 2.2rem);
  color: var(--dim);
  margin-left: 0.1em;
}
.stat--accent .stat-num { color: var(--accent); text-shadow: 0 0 20px var(--accent-glow); }
.stat--amber .stat-num  { color: var(--amber); }
.stat--blue .stat-num   { color: var(--blue); }
.stat--red .stat-num    { color: var(--red); }

.stat-label {
  font-size: clamp(0.9rem, 1.25vw, 1.1rem);
  color: var(--dim);
  letter-spacing: 0.04em;
  line-height: 1.35;
  margin-top: 0.4rem;
}

@media (max-width: 800px) {
  .stats--cols-3, .stats--cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .stats--cols-2, .stats--cols-3, .stats--cols-4 { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
 * Bento
 * ------------------------------------------------------------------------- */
.bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(clamp(8rem, 18vh, 14rem), auto);
  gap: clamp(0.8rem, 1.5vw, 1.4rem);
  width: min(1400px, 94vw);
}
.bento-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(1.2rem, 2vw, 1.8rem);
  background: var(--bg-elevated);
  border: 1px solid var(--dim-2);
  background-size: cover;
  background-position: center;
  overflow: hidden;
  opacity: 0;
  transform: translateY(16px) scale(0.985);
  transition: opacity 700ms ease-out, transform 800ms cubic-bezier(0.16, 1, 0.3, 1), border-color 500ms ease;
}
.bento-cell.in { opacity: 1; transform: translateY(0) scale(1); }
.bento-cell--span-2 { grid-column: span 2; }

.bento-cell--accent { border-color: rgba(0, 255, 156, 0.35); box-shadow: 0 0 30px -8px var(--accent-glow); }
.bento-cell--accent .bento-heading { color: var(--accent); }
.bento-cell--amber  { border-color: rgba(255, 180, 84, 0.4); }
.bento-cell--amber  .bento-heading { color: var(--amber); }
.bento-cell--blue   { border-color: rgba(24, 158, 255, 0.4); }
.bento-cell--blue   .bento-heading { color: var(--blue); }

.bento-cell--image {
  min-height: clamp(10rem, 22vh, 18rem);
  color: var(--fg);
}
.bento-cell--image .bento-heading { color: var(--fg); text-shadow: 0 2px 18px rgba(0,0,0,0.6); }
.bento-cell--image .bento-body    { color: var(--fg); opacity: 0.85; }

.bento-cell-body {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  position: relative;
  z-index: 1;
}
.bento-heading {
  font-size: clamp(1.2rem, 2vw, 1.7rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--fg);
  line-height: 1.15;
}
.bento-body {
  font-size: clamp(0.9rem, 1.15vw, 1.05rem);
  color: var(--dim);
  line-height: 1.4;
}

@media (max-width: 900px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento-cell--span-2 { grid-column: span 2; }
}
@media (max-width: 540px) {
  .bento { grid-template-columns: 1fr; }
  .bento-cell--span-2 { grid-column: span 1; }
}

/* === inlined: themes/phosphor/components-diagram.css === */
/* Stagecraft — Phosphor theme: diagram component styles (Pillars, Timeline, Pyramid, Cycle, Funnel). */

/* Local component vars; theme tokens (--accent, --dim, etc.) flow through. */
:root[data-theme="phosphor"] {
  --diag-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --diag-rise: 16px;
  --diag-card-bg: rgba(255, 255, 255, 0.015);
  --diag-card-border: var(--dim-2);
}

/* ===========================================================================
 * Pillars
 * ===========================================================================*/
.pillars-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.4rem, 3vw, 2.4rem);
  width: min(1200px, 92vw);
}
.pillars-intro {
  font-size: clamp(0.95rem, 1.4vw, 1.25rem);
  color: var(--dim);
  letter-spacing: 0.04em;
  font-style: italic;
  text-align: center;
  max-width: 60ch;
}
.pillars-grid {
  display: grid;
  grid-template-columns: repeat(var(--pillars-count, 3), minmax(0, 1fr));
  gap: clamp(1rem, 3vw, 2.6rem);
  width: 100%;
}
.pillar {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(0.6rem, 1.2vw, 1rem);
  padding: clamp(1rem, 2vw, 1.6rem) clamp(0.6rem, 1.2vw, 1rem);
  opacity: 0;
  transform: translateY(var(--diag-rise));
  transition: opacity 700ms ease-out, transform 700ms var(--diag-ease);
}
.pillar.in { opacity: 1; transform: translateY(0); }
.pillar-icon {
  font-size: 3rem;
  line-height: 1;
  color: var(--accent);
  transition: transform 600ms var(--diag-ease), filter 600ms ease;
}
.pillar:hover .pillar-icon {
  animation: pillar-pulse 1600ms ease-in-out infinite;
}
@keyframes pillar-pulse {
  0%, 100% { transform: scale(1);    filter: drop-shadow(0 0 0 transparent); }
  50%      { transform: scale(1.08); filter: drop-shadow(0 0 14px var(--accent-glow)); }
}
.pillar-heading {
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--fg);
}
.pillar-body {
  font-size: 1rem;
  color: var(--dim);
  letter-spacing: 0.01em;
  max-width: 24ch;
  line-height: 1.5;
}
.pillar.pc-accent .pillar-icon { color: var(--accent); }
.pillar.pc-blue   .pillar-icon { color: var(--blue);   }
.pillar.pc-amber  .pillar-icon { color: var(--amber);  }
.pillar.pc-red    .pillar-icon { color: var(--red);    }
.pillar.pc-dim    .pillar-icon { color: var(--dim);    }
.pillar.pc-fg     .pillar-icon { color: var(--fg);     }
@media (max-width: 800px) {
  .pillars-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .pillars-grid { grid-template-columns: 1fr; }
}

/* ===========================================================================
 * Timeline
 * ===========================================================================*/
.timeline {
  position: relative;
  width: min(1300px, 94vw);
}
.timeline-track {
  position: absolute;
  background: var(--dim-2);
}
.timeline-events { display: grid; }

/* Horizontal */
.timeline--horizontal .timeline-track {
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  transform: translateY(-0.5px);
}
.timeline--horizontal .timeline-events {
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  align-items: center;
  gap: clamp(0.6rem, 2vw, 1.6rem);
  padding: clamp(2rem, 4vw, 3rem) 0;
}
.timeline--horizontal .tl-event {
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  align-items: center;
  justify-items: center;
  text-align: center;
  gap: clamp(0.6rem, 1.4vw, 1rem);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 600ms ease-out, transform 600ms var(--diag-ease);
}
.timeline--horizontal .tl-event.in { opacity: 1; transform: translateY(0); }
.timeline--horizontal .tl-date { align-self: end; }
.timeline--horizontal .tl-text { align-self: start; }

/* Vertical */
.timeline--vertical .timeline-track {
  top: 0;
  bottom: 0;
  left: clamp(2rem, 6vw, 4rem);
  width: 1px;
}
.timeline--vertical .timeline-events {
  grid-template-columns: 1fr;
  gap: clamp(1.2rem, 2.5vw, 2rem);
  padding-left: clamp(0.5rem, 2vw, 1rem);
}
.timeline--vertical .tl-event {
  display: grid;
  grid-template-columns: clamp(4rem, 9vw, 6rem) auto 1fr;
  align-items: center;
  gap: clamp(0.8rem, 2vw, 1.4rem);
  opacity: 0;
  transform: translateX(-12px);
  transition: opacity 600ms ease-out, transform 600ms var(--diag-ease);
}
.timeline--vertical .tl-event.in { opacity: 1; transform: translateX(0); }
.timeline--vertical .tl-date { text-align: right; }
.timeline--vertical .tl-text { text-align: left; }

/* Shared atoms */
.tl-date {
  font-size: clamp(0.8rem, 1.1vw, 1rem);
  color: var(--dim);
  letter-spacing: 0.25em;
  font-variant-numeric: tabular-nums;
  text-transform: uppercase;
}
.tl-dot {
  width: clamp(0.9rem, 1.6vw, 1.3rem);
  height: clamp(0.9rem, 1.6vw, 1.3rem);
  border-radius: 50%;
  border: 1px solid var(--dim);
  background: var(--bg);
  position: relative;
  display: grid;
  place-items: center;
  z-index: 1;
  transition: background 400ms ease, border-color 400ms ease, box-shadow 400ms ease;
}
.tl-event.active .tl-dot {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
.tl-icon {
  font-size: clamp(0.7rem, 1.1vw, 0.95rem);
  color: var(--bg);
  line-height: 1;
}
.tl-event:not(.active) .tl-icon { color: var(--dim); }
.tl-heading {
  font-size: clamp(1.1rem, 1.9vw, 1.6rem);
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--fg);
  line-height: 1.2;
}
.tl-body {
  font-size: clamp(0.85rem, 1.1vw, 1rem);
  color: var(--dim);
  margin-top: 0.25rem;
  line-height: 1.4;
}
.tl-event.tc-accent.active .tl-dot { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.tl-event.tc-blue.active   .tl-dot { background: var(--blue);   border-color: var(--blue);   box-shadow: 0 0 0 4px rgba(24, 158, 255, 0.18); }
.tl-event.tc-amber.active  .tl-dot { background: var(--amber);  border-color: var(--amber);  box-shadow: 0 0 0 4px rgba(255, 180, 84, 0.18); }
.tl-event.tc-red.active    .tl-dot { background: var(--red);    border-color: var(--red);    box-shadow: 0 0 0 4px rgba(255, 92, 92, 0.18); }

/* ===========================================================================
 * Pyramid
 * ===========================================================================*/
.pyramid {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(900px, 92vw);
  gap: 6px;
}
.pyr-layer {
  width: var(--pyr-w, 100%);
  display: flex;
  justify-content: center;
  opacity: 0;
  transform: translateY(8px) scaleX(0.92);
  transform-origin: center;
  transition: opacity 600ms ease-out, transform 700ms var(--diag-ease);
}
.pyr-layer.in { opacity: 1; transform: translateY(0) scaleX(1); }
.pyr-shape {
  width: 100%;
  padding: clamp(0.9rem, 1.8vw, 1.4rem) clamp(1.2rem, 2.5vw, 2rem);
  background: var(--diag-card-bg);
  border: 1px solid var(--diag-card-border);
  /* Slight trapezoid feel: angled side cuts via clip-path. */
  clip-path: polygon(6% 0%, 94% 0%, 100% 100%, 0% 100%);
}
.pyramid--down .pyr-shape {
  clip-path: polygon(0% 0%, 100% 0%, 94% 100%, 6% 100%);
}
.pyr-content { text-align: center; }
.pyr-label {
  font-size: clamp(1.1rem, 2.2vw, 1.8rem);
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--fg);
  line-height: 1.15;
}
.pyr-body {
  font-size: clamp(0.85rem, 1.1vw, 1rem);
  color: var(--dim);
  margin-top: 0.35rem;
  letter-spacing: 0.01em;
}
.pyr-layer.pyc-accent .pyr-shape { border-color: var(--accent); background: var(--accent-soft); }
.pyr-layer.pyc-accent .pyr-label { color: var(--accent); }
.pyr-layer.pyc-blue   .pyr-shape { border-color: var(--blue);   background: rgba(24, 158, 255, 0.10); }
.pyr-layer.pyc-blue   .pyr-label { color: var(--blue);   }
.pyr-layer.pyc-amber  .pyr-shape { border-color: var(--amber);  background: rgba(255, 180, 84, 0.10); }
.pyr-layer.pyc-amber  .pyr-label { color: var(--amber);  }
.pyr-layer.pyc-red    .pyr-shape { border-color: var(--red);    background: rgba(255, 92, 92, 0.10);  }
.pyr-layer.pyc-red    .pyr-label { color: var(--red);    }
.pyr-layer.pyc-dim    .pyr-shape { border-color: var(--dim-2); }
.pyr-layer.pyc-dim    .pyr-label { color: var(--dim);    }

/* ===========================================================================
 * Cycle
 * ===========================================================================*/
.cycle {
  display: flex;
  justify-content: center;
  width: min(720px, 80vmin);
  aspect-ratio: 1 / 1;
}
.cyc-frame {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 1700ms var(--diag-ease);
}
.cyc-frame.rotating { animation: cyc-rotate-in 1700ms var(--diag-ease) both; }
@keyframes cyc-rotate-in {
  from { transform: rotate(-360deg); }
  to   { transform: rotate(0deg);    }
}
.cyc-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.cyc-ring {
  fill: none;
  stroke: var(--dim-2);
  stroke-width: 1;
  stroke-dasharray: 3 5;
  opacity: 0.6;
}
.cyc-arc {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
  opacity: 0;
  transition: opacity 600ms ease-out;
}
.cyc-arc.in { opacity: 0.85; }
.cyc-arrow {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  transition: opacity 600ms ease-out;
}
.cyc-arrow.in { opacity: 1; }
.cyc-items {
  position: absolute;
  inset: 0;
}
.cyc-item {
  position: absolute;
  transform: translate(-50%, -50%) scale(0.85);
  opacity: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: clamp(0.6rem, 1.2vw, 0.9rem) clamp(0.8rem, 1.4vw, 1.1rem);
  background: var(--bg);
  border: 1px solid var(--dim-2);
  border-radius: 8px;
  min-width: clamp(5rem, 12vw, 8rem);
  text-align: center;
  transition: opacity 600ms ease-out, transform 700ms var(--diag-ease), border-color 400ms ease;
}
.cyc-item.in { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.cyc-icon {
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  color: var(--accent);
  line-height: 1;
}
.cyc-label {
  font-size: clamp(0.85rem, 1.2vw, 1.05rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--fg);
  line-height: 1.2;
}
.cyc-item.cyc-accent { border-color: var(--accent); }
.cyc-item.cyc-accent .cyc-icon { color: var(--accent); }
.cyc-item.cyc-blue   { border-color: var(--blue); }
.cyc-item.cyc-blue   .cyc-icon { color: var(--blue); }
.cyc-item.cyc-amber  { border-color: var(--amber); }
.cyc-item.cyc-amber  .cyc-icon { color: var(--amber); }
.cyc-item.cyc-red    { border-color: var(--red); }
.cyc-item.cyc-red    .cyc-icon { color: var(--red); }

/* ===========================================================================
 * Funnel
 * ===========================================================================*/
.funnel {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: min(820px, 88vw);
  gap: 4px;
}
.fn-stage {
  position: relative;
  min-height: clamp(3.6rem, 8vh, 5.4rem);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 600ms ease-out, transform 700ms var(--diag-ease);
}
.fn-stage.in { opacity: 1; transform: translateY(0); }
.fn-shape {
  position: absolute;
  inset: 0;
  background: var(--diag-card-bg);
  border-top: 1px solid var(--dim-2);
  border-bottom: 1px solid var(--dim-2);
}
.fn-content {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 3vw, 2.4rem);
  padding: clamp(0.6rem, 1.4vw, 1rem) var(--fn-pad, 12%);
  text-align: center;
}
.fn-label {
  font-size: clamp(1rem, 1.7vw, 1.4rem);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg);
  line-height: 1.1;
}
.fn-value {
  font-size: clamp(1.8rem, 3.6vw, 3rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--fg);
  line-height: 1;
}
.fn-body {
  font-size: clamp(0.8rem, 1.1vw, 1rem);
  color: var(--dim);
  letter-spacing: 0.02em;
}
.fn-stage.fnc-accent .fn-shape { background: var(--accent-soft); border-color: var(--accent); }
.fn-stage.fnc-accent .fn-label,
.fn-stage.fnc-accent .fn-value { color: var(--accent); }
.fn-stage.fnc-blue   .fn-shape { background: rgba(24, 158, 255, 0.10); border-color: var(--blue); }
.fn-stage.fnc-blue   .fn-label,
.fn-stage.fnc-blue   .fn-value { color: var(--blue); }
.fn-stage.fnc-amber  .fn-shape { background: rgba(255, 180, 84, 0.10); border-color: var(--amber); }
.fn-stage.fnc-amber  .fn-label,
.fn-stage.fnc-amber  .fn-value { color: var(--amber); }
.fn-stage.fnc-red    .fn-shape { background: rgba(255, 92, 92, 0.10); border-color: var(--red); }
.fn-stage.fnc-red    .fn-label,
.fn-stage.fnc-red    .fn-value { color: var(--red); }
.fn-stage.fnc-dim    .fn-shape { background: transparent; border-color: var(--dim-2); }
.fn-stage.fnc-dim    .fn-label { color: var(--dim); }
.fn-stage.fn-outcome .fn-content { gap: clamp(1.4rem, 4vw, 3.4rem); }

/* === inlined: themes/phosphor/components-chart.css === */
/* Stagecraft — Phosphor theme: chart/relationship component styles.
   Used by Matrix2x2, BarChart, Progress, ProcessFlow, Venn. */

/* ============================================================
 * Matrix2x2
 * ============================================================ */
.matrix2x2 {
  --matrix-size: min(72vh, 56vw, 880px);
  --matrix-gap: 1px;
  --matrix-pad: clamp(1rem, 2.2vw, 2rem);
  width: var(--matrix-size);
  height: var(--matrix-size);
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: 1fr auto;
  gap: clamp(0.6rem, 1.4vw, 1.2rem);
}
.matrix2x2 .y-axis {
  grid-column: 1; grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 0.78rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--dim);
  padding: 0.4rem 0;
}
.matrix2x2 .y-axis .label {
  font-weight: 500;
  color: var(--fg);
  letter-spacing: 0.18em;
}
.matrix2x2 .y-axis .lo,
.matrix2x2 .y-axis .hi {
  font-variant-numeric: tabular-nums;
}
.matrix2x2 .grid {
  grid-column: 2; grid-row: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: var(--matrix-gap);
  background: var(--dim-2);
  border: 1px solid var(--dim-2);
  position: relative;
}
.matrix2x2 .grid::before,
.matrix2x2 .grid::after {
  content: '';
  position: absolute;
  background: var(--dim-2);
  pointer-events: none;
}
.matrix2x2 .grid::before {
  left: 0; right: 0; top: 50%; height: 1px; transform: translateY(-0.5px);
}
.matrix2x2 .grid::after {
  top: 0; bottom: 0; left: 50%; width: 1px; transform: translateX(-0.5px);
}
.matrix2x2 .x-axis {
  grid-column: 2; grid-row: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.78rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--dim);
  padding: 0.4rem 0.2rem 0;
}
.matrix2x2 .x-axis .label {
  font-weight: 500;
  color: var(--fg);
  letter-spacing: 0.18em;
}
.matrix2x2 .quadrant {
  position: relative;
  padding: var(--matrix-pad);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  opacity: 0.45;
  filter: saturate(0.5);
  transition: opacity 600ms ease-out, filter 600ms ease-out,
              background 600ms ease-out, box-shadow 600ms ease-out;
  overflow: hidden;
}
.matrix2x2 .quadrant .q-label {
  font-size: clamp(1rem, 1.6vw, 1.4rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--fg);
  line-height: 1.15;
}
.matrix2x2 .quadrant .q-body {
  font-size: clamp(0.85rem, 1.15vw, 1rem);
  color: var(--dim);
  line-height: 1.5;
}
.matrix2x2 .quadrant .q-tag {
  position: absolute;
  top: 0.6rem;
  right: 0.8rem;
  font-size: 0.65rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--dim);
  opacity: 0.6;
}
.matrix2x2 .quadrant.active {
  opacity: 1;
  filter: none;
  background: color-mix(in srgb, var(--q-color, var(--accent)) 8%, var(--bg));
  box-shadow: inset 0 0 0 1px var(--q-color, var(--accent));
}
.matrix2x2 .quadrant.active .q-label { color: var(--fg); }
.matrix2x2 .quadrant.active .q-tag { color: var(--q-color, var(--accent)); opacity: 1; }

/* ============================================================
 * BarChart
 * ============================================================ */
.barchart {
  --bar-thickness: clamp(1.6rem, 3vw, 2.4rem);
  --bar-gap: clamp(0.9rem, 1.6vw, 1.4rem);
  --bar-color: var(--accent);
  --bar-track: var(--dim-2);
  width: min(1100px, 92vw);
  display: flex;
  flex-direction: column;
  gap: var(--bar-gap);
}
.barchart.vertical {
  flex-direction: row;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(1.5rem, 3vw, 2.6rem);
  height: min(60vh, 480px);
}
.barchart .bar-row {
  display: grid;
  grid-template-columns: minmax(7rem, 14ch) 1fr auto;
  align-items: center;
  gap: clamp(0.8rem, 1.6vw, 1.4rem);
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity 500ms ease-out, transform 500ms cubic-bezier(0.16, 1, 0.3, 1);
}
.barchart .bar-row.in, .barchart .bar-row.shown { opacity: 1; transform: translateX(0); }
.barchart .bar-label {
  font-size: clamp(0.95rem, 1.3vw, 1.15rem);
  color: var(--fg);
  letter-spacing: 0.02em;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.barchart .bar-track {
  height: var(--bar-thickness);
  background: var(--bar-track);
  position: relative;
  overflow: hidden;
}
.barchart .bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  background: var(--bar-color);
  transition: width 1200ms cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 0 18px color-mix(in srgb, var(--bar-color) 60%, transparent);
}
.barchart .bar-value {
  font-size: clamp(0.95rem, 1.3vw, 1.15rem);
  color: var(--bar-color);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  min-width: 4ch;
}
/* vertical orientation */
.barchart.vertical .bar-row {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  justify-content: flex-start;
  height: 100%;
  gap: 0.6rem;
  min-width: clamp(3rem, 6vw, 5rem);
  transform: translateY(10px);
}
.barchart.vertical .bar-row.in,
.barchart.vertical .bar-row.shown { transform: translateY(0); }
.barchart.vertical .bar-label { text-align: center; }
.barchart.vertical .bar-track {
  width: var(--bar-thickness);
  height: 100%;
}
.barchart.vertical .bar-fill {
  inset: auto 0 0 0;
  width: 100%;
  height: 0%;
  transition: height 1200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.barchart .bar-row.accent { --bar-color: var(--accent); }
.barchart .bar-row.amber  { --bar-color: var(--amber); }
.barchart .bar-row.blue   { --bar-color: var(--blue); }
.barchart .bar-row.red    { --bar-color: var(--red); }
.barchart .bar-row.dim    { --bar-color: var(--dim); }

/* ============================================================
 * Progress
 * ============================================================ */
.progress-list {
  width: min(1000px, 92vw);
  display: flex;
  flex-direction: column;
  gap: clamp(1.1rem, 2vw, 1.8rem);
}
.progress-row {
  --prog-color: var(--accent);
  display: grid;
  grid-template-columns: minmax(8rem, 16ch) 1fr 5ch;
  gap: clamp(0.8rem, 1.8vw, 1.6rem);
  align-items: center;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 500ms ease-out, transform 500ms cubic-bezier(0.16, 1, 0.3, 1);
}
.progress-row.in, .progress-row.shown { opacity: 1; transform: translateY(0); }
.progress-row.accent { --prog-color: var(--accent); }
.progress-row.amber  { --prog-color: var(--amber); }
.progress-row.blue   { --prog-color: var(--blue); }
.progress-row.red    { --prog-color: var(--red); }
.progress-label {
  font-size: clamp(0.95rem, 1.3vw, 1.15rem);
  color: var(--fg);
  letter-spacing: 0.02em;
}
.progress-track {
  height: clamp(0.5rem, 0.9vw, 0.7rem);
  background: var(--dim-2);
  position: relative;
  overflow: hidden;
  border-radius: 2px;
}
.progress-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  background: var(--prog-color);
  transition: width 1400ms cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 0 14px color-mix(in srgb, var(--prog-color) 55%, transparent);
}
.progress-value {
  font-size: clamp(0.95rem, 1.25vw, 1.1rem);
  color: var(--prog-color);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  text-align: right;
}

/* ============================================================
 * ProcessFlow
 * ============================================================ */
.processflow {
  --pf-card-bg: var(--bg-elevated);
  --pf-card-border: var(--dim-2);
  --pf-accent: var(--accent);
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: clamp(0.8rem, 1.8vw, 1.6rem);
  width: min(1300px, 94vw);
  flex-wrap: wrap;
}
.processflow.vertical {
  flex-direction: column;
  align-items: center;
  width: min(620px, 92vw);
}
.processflow .pf-step {
  --pf-color: var(--fg);
  flex: 1 1 0;
  min-width: clamp(8rem, 14vw, 13rem);
  max-width: 18rem;
  background: var(--pf-card-bg);
  border: 1px solid var(--pf-card-border);
  padding: clamp(1rem, 1.8vw, 1.5rem);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.7rem;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 500ms ease-out, transform 500ms cubic-bezier(0.16, 1, 0.3, 1),
              border-color 400ms ease-out, box-shadow 400ms ease-out;
}
.processflow .pf-step.in,
.processflow .pf-step.shown { opacity: 1; transform: translateY(0); }
.processflow .pf-step.accent { --pf-color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, var(--dim-2)); }
.processflow .pf-step.amber  { --pf-color: var(--amber); border-color: color-mix(in srgb, var(--amber) 40%, var(--dim-2)); }
.processflow .pf-step.blue   { --pf-color: var(--blue);  border-color: color-mix(in srgb, var(--blue) 40%, var(--dim-2)); }
.processflow .pf-step.red    { --pf-color: var(--red);   border-color: color-mix(in srgb, var(--red) 40%, var(--dim-2)); }
.processflow .pf-icon {
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  color: var(--pf-color);
  line-height: 1;
}
.processflow .pf-icon .material-symbols-outlined {
  font-size: inherit;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.processflow .pf-label {
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  font-weight: 500;
  color: var(--fg);
  letter-spacing: -0.005em;
  line-height: 1.25;
}
.processflow .pf-body {
  font-size: clamp(0.85rem, 1.1vw, 1rem);
  color: var(--dim);
  line-height: 1.5;
}
.processflow .pf-arrow {
  flex: 0 0 auto;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(1.2rem, 2vw, 1.8rem);
  color: var(--pf-accent);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 500ms ease-out, transform 500ms cubic-bezier(0.16, 1, 0.3, 1);
  min-width: 1.8rem;
}
.processflow .pf-arrow.in,
.processflow .pf-arrow.shown { opacity: 1; transform: translateX(0); }
.processflow.vertical .pf-arrow {
  transform: translateY(-6px);
}
.processflow.vertical .pf-arrow.in,
.processflow.vertical .pf-arrow.shown { transform: translateY(0); }
.processflow .pf-arrow.pulse {
  animation: pf-pulse 900ms ease-out;
}
@keyframes pf-pulse {
  0%   { color: var(--pf-accent); text-shadow: 0 0 0 transparent; transform: scale(1); }
  40%  { color: var(--fg);        text-shadow: 0 0 18px color-mix(in srgb, var(--pf-accent) 80%, transparent); transform: scale(1.18); }
  100% { color: var(--pf-accent); text-shadow: 0 0 0 transparent; transform: scale(1); }
}

/* ============================================================
 * Venn
 * ============================================================ */
.venn {
  --venn-size: min(70vh, 56vw, 760px);
  width: var(--venn-size);
  height: calc(var(--venn-size) * 0.78);
  position: relative;
}
.venn svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}
.venn .v-circle {
  fill-opacity: 0.18;
  stroke-width: 1.5;
  opacity: 0;
  transform-origin: center;
  transform: scale(0.94);
  transition: opacity 700ms ease-out, transform 800ms cubic-bezier(0.16, 1, 0.3, 1);
}
.venn .v-circle.in {
  opacity: 1;
  transform: scale(1);
}
.venn .v-label {
  position: absolute;
  text-align: center;
  transform: translate(-50%, -50%);
  font-size: clamp(0.85rem, 1.2vw, 1.05rem);
  letter-spacing: 0.02em;
  line-height: 1.3;
  color: var(--fg);
  opacity: 0;
  transition: opacity 600ms ease-out;
  max-width: 14ch;
  pointer-events: none;
}
.venn .v-label.in { opacity: 1; }
.venn .v-label.set { font-weight: 500; }
.venn .v-label.set .name {
  display: inline-block;
  color: var(--vl-color, var(--fg));
  background: var(--bg);
  padding: 0.1rem 0.4rem;
  letter-spacing: 0.04em;
}
.venn .v-label.overlap {
  color: var(--fg);
  font-size: clamp(0.78rem, 1vw, 0.95rem);
  letter-spacing: 0.06em;
}
.venn .v-label.overlap > span {
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  padding: 0.1rem 0.35rem;
  display: inline-block;
}

/* Phase 3: data / business / content families */
/* === inlined: themes/phosphor/components-data.css === */
/* Stagecraft — Phosphor theme: data-visualization component styles.
   Used by KPI, DonutChart, LineChart, Gauge, SparkLine, Heatmap,
   Roadmap, SWOT, CodeBlock, CodeDiff. */

/* ============================================================
 * Shared color hooks (used by KPI, SparkLine, Gauge, etc.)
 * ------------------------------------------------------------ */
.kpi--accent,    .gauge--accent,    .sparkline--accent    { --data-color: var(--accent); }
.kpi--amber,     .gauge--amber,     .sparkline--amber     { --data-color: var(--amber); }
.kpi--blue,      .gauge--blue,      .sparkline--blue      { --data-color: var(--blue); }
.kpi--red,       .gauge--red,       .sparkline--red       { --data-color: var(--red); }
.kpi--dim,       .gauge--dim,       .sparkline--dim       { --data-color: var(--dim); }
.kpi--fg,        .gauge--fg,        .sparkline--fg        { --data-color: var(--fg); }

/* ============================================================
 * KPI
 * ============================================================ */
.kpi {
  --data-color: var(--accent);
  width: min(620px, 92vw);
  background: var(--bg-elevated);
  border: 1px solid var(--dim-2);
  padding: clamp(1.4rem, 2.6vw, 2.2rem);
  display: flex;
  flex-direction: column;
  gap: clamp(0.6rem, 1.4vw, 1.1rem);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 600ms ease-out, transform 600ms cubic-bezier(0.16, 1, 0.3, 1),
              border-color 600ms ease-out, box-shadow 600ms ease-out;
}
.kpi.in {
  opacity: 1;
  transform: translateY(0);
  border-color: color-mix(in srgb, var(--data-color) 35%, var(--dim-2));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--data-color) 15%, transparent),
              0 0 50px color-mix(in srgb, var(--data-color) 12%, transparent);
}
.kpi-head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: clamp(0.9rem, 1.2vw, 1.05rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dim);
}
.kpi-icon {
  color: var(--data-color);
  font-size: 1.2em;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.kpi-label {
  letter-spacing: 0.18em;
}
.kpi-figure {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.kpi-num {
  font-size: clamp(3.4rem, 7vw, 6rem);
  font-weight: 500;
  color: var(--data-color);
  letter-spacing: -0.03em;
  text-shadow: 0 0 24px color-mix(in srgb, var(--data-color) 35%, transparent);
}
.kpi-unit {
  font-size: clamp(1.4rem, 2.6vw, 2.2rem);
  color: var(--data-color);
  font-weight: 500;
  letter-spacing: -0.01em;
}
.kpi-change {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: clamp(0.85rem, 1.15vw, 1rem);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 500ms ease-out, transform 500ms cubic-bezier(0.16, 1, 0.3, 1);
}
.kpi-change.in { opacity: 1; transform: translateY(0); }
.kpi-change .kpi-arrow {
  font-size: 0.9em;
  line-height: 1;
}
.kpi-change.up   .kpi-arrow,
.kpi-change.up   .kpi-change-num { color: var(--accent); }
.kpi-change.down .kpi-arrow,
.kpi-change.down .kpi-change-num { color: var(--red); }
.kpi-change .kpi-change-period { color: var(--dim); }

/* ============================================================
 * DonutChart
 * ============================================================ */
.donut {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  width: min(1100px, 92vw);
  flex-wrap: wrap;
  justify-content: center;
}
.donut-svg-wrap {
  position: relative;
  width: min(48vh, 36vw, 460px);
  aspect-ratio: 1;
}
.donut-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.donut-arc {
  transition: stroke-width 300ms ease-out;
  filter: drop-shadow(0 0 8px color-mix(in srgb, currentColor 0%, transparent));
}
.donut-center {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(1rem, 1.6vw, 1.4rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dim);
  pointer-events: none;
}
.donut-legend {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-width: 14rem;
}
.donut-legend-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 0.8rem;
  align-items: baseline;
  font-size: clamp(0.85rem, 1.1vw, 1rem);
  color: var(--fg);
  opacity: 0;
  transform: translateX(8px);
  transition: opacity 500ms ease-out, transform 500ms cubic-bezier(0.16, 1, 0.3, 1);
  font-variant-numeric: tabular-nums;
}
.donut-legend-row.in { opacity: 1; transform: translateX(0); }
.donut-dot {
  width: 0.7rem;
  height: 0.7rem;
  background: var(--dc-color, var(--accent));
  display: inline-block;
  box-shadow: 0 0 8px color-mix(in srgb, var(--dc-color, var(--accent)) 70%, transparent);
}
.donut-leg-label {
  letter-spacing: 0.02em;
}
.donut-leg-value {
  color: var(--dim);
  font-variant-numeric: tabular-nums;
}
.donut-leg-pct {
  color: var(--fg);
  min-width: 3.2ch;
  text-align: right;
}

/* ============================================================
 * LineChart
 * ============================================================ */
.linechart {
  width: min(1200px, 94vw);
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.lc-svg-wrap {
  width: 100%;
  aspect-ratio: 2 / 1;
  max-height: 60vh;
}
.lc-svg {
  width: 100%;
  height: 100%;
}
.lc-grid {
  stroke: var(--dim-2);
  stroke-width: 1;
  stroke-dasharray: 2 4;
  opacity: 0.7;
}
.lc-y-label,
.lc-x-label {
  fill: var(--dim);
  font-size: 14px;
  font-family: var(--mono);
  letter-spacing: 0.04em;
}
.lc-line {
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 6px color-mix(in srgb, currentColor 40%, transparent));
}
.lc-area {
  opacity: 0;
  transition: opacity 700ms ease-out;
}
.lc-area.in { opacity: 1; }
.lc-dot {
  opacity: 0;
  transform-origin: center;
  transition: opacity 400ms ease-out;
}
.lc-dot.in { opacity: 1; }
.lc-legend {
  display: flex;
  gap: clamp(1rem, 2vw, 1.6rem);
  flex-wrap: wrap;
  padding: 0.4rem 0.6rem 0;
}
.lc-leg-row {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: clamp(0.85rem, 1.1vw, 1rem);
  color: var(--fg);
  letter-spacing: 0.02em;
}
.lc-dot-leg {
  width: 0.7rem;
  height: 0.7rem;
  background: var(--lc-color, var(--accent));
  display: inline-block;
  box-shadow: 0 0 8px color-mix(in srgb, var(--lc-color, var(--accent)) 70%, transparent);
}

/* ============================================================
 * Gauge
 * ============================================================ */
.gauge {
  --data-color: var(--accent);
  width: min(620px, 80vw);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.g-svg-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 200 / 120;
}
.g-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.g-fill {
  filter: drop-shadow(0 0 14px color-mix(in srgb, var(--data-color) 55%, transparent));
  transition: none;
}
.g-tick {
  stroke: var(--dim);
  stroke-width: 1.5;
  opacity: 0.6;
}
.g-readout {
  position: absolute;
  left: 50%;
  bottom: -0.6rem;
  transform: translateX(-50%);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.g-num {
  font-variant-numeric: tabular-nums;
  font-size: clamp(2.2rem, 4.4vw, 3.6rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--data-color);
  line-height: 1;
  text-shadow: 0 0 18px color-mix(in srgb, var(--data-color) 40%, transparent);
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  justify-content: center;
}
.g-num-max {
  font-size: 0.55em;
  color: var(--dim);
  font-weight: 400;
  letter-spacing: 0.02em;
  text-shadow: none;
}
.g-label {
  font-size: clamp(0.85rem, 1.2vw, 1rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dim);
}

/* ============================================================
 * SparkLine
 * ============================================================ */
.sparkline {
  --data-color: var(--accent);
  width: min(540px, 90vw);
  background: var(--bg-elevated);
  border: 1px solid var(--dim-2);
  padding: clamp(1.2rem, 2.2vw, 1.8rem);
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.sl-figure {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  line-height: 1;
}
.sl-num {
  font-size: clamp(3rem, 6vw, 5rem);
  font-weight: 500;
  color: var(--data-color);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 22px color-mix(in srgb, var(--data-color) 35%, transparent);
}
.sl-label {
  font-size: clamp(0.85rem, 1.1vw, 1rem);
  color: var(--dim);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.sl-svg-wrap {
  width: 100%;
  height: clamp(60px, 8vh, 90px);
}
.sl-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.sl-line {
  stroke-width: 2;
  fill: none;
  filter: drop-shadow(0 0 6px color-mix(in srgb, currentColor 40%, transparent));
}
.sl-area {
  opacity: 0;
  transition: opacity 700ms ease-out;
}
.sl-area.in { opacity: 1; }
.sl-tip {
  opacity: 0;
  transition: opacity 400ms ease-out;
}
.sl-tip.in { opacity: 1; }
.sl-period {
  font-size: clamp(0.75rem, 1vw, 0.9rem);
  color: var(--dim);
  letter-spacing: 0.04em;
}

/* ============================================================
 * Heatmap
 * ============================================================ */
.heatmap {
  --hm-base: var(--accent);
  --hm-cell: clamp(1.2rem, 2.2vw, 1.9rem);
  width: min(1200px, 94vw);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.hm-x-labels {
  display: grid;
  grid-template-columns: minmax(3rem, auto) 1fr;
  gap: clamp(0.4rem, 0.8vw, 0.7rem);
}
.hm-x-labels .hm-corner { /* placeholder above y-labels */ }
.hm-x-row {
  display: grid;
  grid-template-columns: repeat(var(--hm-cols), 1fr);
  gap: clamp(2px, 0.3vw, 4px);
}
.hm-x-label {
  font-size: clamp(0.7rem, 0.95vw, 0.85rem);
  color: var(--dim);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
/* When y-labels are absent, drop the corner and stretch x-row full width */
.heatmap:not(:has(.hm-y-label)) .hm-x-labels {
  grid-template-columns: 1fr;
}
.heatmap:not(:has(.hm-y-label)) .hm-x-labels .hm-corner { display: none; }
.hm-body {
  display: flex;
  flex-direction: column;
  gap: clamp(2px, 0.3vw, 4px);
}
.hm-row {
  display: grid;
  grid-template-columns: minmax(3rem, auto) 1fr;
  gap: clamp(0.4rem, 0.8vw, 0.7rem);
  align-items: center;
}
.hm-row:only-child,
.heatmap:not(:has(.hm-y-label)) .hm-row {
  grid-template-columns: 1fr;
}
.hm-y-label {
  font-size: clamp(0.7rem, 0.95vw, 0.85rem);
  color: var(--dim);
  letter-spacing: 0.06em;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.hm-cells {
  display: grid;
  grid-template-columns: repeat(var(--hm-cols), 1fr);
  gap: clamp(2px, 0.3vw, 4px);
}
.hm-cell {
  aspect-ratio: 1;
  background: color-mix(in srgb, var(--hm-base) calc(var(--hm-intensity) * 95%), var(--dim-2));
  border: 1px solid color-mix(in srgb, var(--hm-base) calc(var(--hm-intensity) * 40%), var(--dim-2));
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 400ms ease-out, transform 400ms cubic-bezier(0.16, 1, 0.3, 1);
}
.hm-cell.in {
  opacity: 1;
  transform: scale(1);
}
.hm-scale {
  display: inline-flex;
  align-items: center;
  gap: clamp(2px, 0.3vw, 4px);
  align-self: flex-end;
  margin-top: 0.4rem;
  font-size: clamp(0.7rem, 0.9vw, 0.8rem);
  color: var(--dim);
  letter-spacing: 0.06em;
}
.hm-scale-label {
  padding: 0 0.4rem;
}
.hm-scale-step {
  width: clamp(0.9rem, 1.2vw, 1.2rem);
  height: clamp(0.9rem, 1.2vw, 1.2rem);
  display: inline-block;
  background: color-mix(in srgb, var(--hm-base) calc(var(--hm-intensity) * 95%), var(--dim-2));
  border: 1px solid color-mix(in srgb, var(--hm-base) calc(var(--hm-intensity) * 40%), var(--dim-2));
}

/* ============================================================
 * Roadmap
 * ============================================================ */
.roadmap {
  width: min(1300px, 96vw);
  display: flex;
  flex-direction: column;
  gap: clamp(0.5rem, 1vw, 0.8rem);
}
.rm-header {
  display: grid;
  grid-template-columns: 8rem 1fr;
  gap: clamp(0.5rem, 1vw, 0.8rem);
}
.rm-lane-label-spacer {
  /* placeholder above lane labels */
}
.rm-months {
  display: grid;
  grid-template-columns: repeat(var(--rm-cols), 1fr);
  border-bottom: 1px solid var(--dim-2);
  padding-bottom: 0.4rem;
}
.rm-month {
  font-size: clamp(0.7rem, 0.95vw, 0.85rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dim);
  text-align: center;
}
.rm-body {
  display: flex;
  flex-direction: column;
  gap: clamp(0.6rem, 1vw, 1rem);
}
.rm-lane {
  display: grid;
  grid-template-columns: 8rem 1fr;
  gap: clamp(0.5rem, 1vw, 0.8rem);
  align-items: stretch;
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity 500ms ease-out, transform 500ms cubic-bezier(0.16, 1, 0.3, 1);
}
.rm-lane.in { opacity: 1; transform: translateX(0); }
.rm-lane-label {
  --rm-color: var(--fg);
  display: flex;
  align-items: center;
  font-size: clamp(0.85rem, 1.1vw, 1rem);
  letter-spacing: 0.04em;
  color: var(--fg);
  border-left: 2px solid var(--rm-color);
  padding-left: 0.8rem;
}
.rm-lane-label.rm-accent { --rm-color: var(--accent); }
.rm-lane-label.rm-amber  { --rm-color: var(--amber); }
.rm-lane-label.rm-blue   { --rm-color: var(--blue); }
.rm-lane-label.rm-red    { --rm-color: var(--red); }
.rm-lane-label.rm-dim    { --rm-color: var(--dim); }
.rm-lane-track {
  position: relative;
  background:
    repeating-linear-gradient(
      to right,
      transparent 0,
      transparent calc((100% / var(--rm-cols, 12)) - 1px),
      var(--dim-2) calc((100% / var(--rm-cols, 12)) - 1px),
      var(--dim-2) calc(100% / var(--rm-cols, 12))
    ),
    color-mix(in srgb, var(--bg-elevated) 60%, transparent);
  border: 1px solid var(--dim-2);
  min-height: clamp(2.2rem, 4vw, 3rem);
}
.rm-bar {
  --rm-bar-color: var(--accent);
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: var(--rm-left);
  width: var(--rm-width);
  background: color-mix(in srgb, var(--rm-bar-color) 22%, var(--bg-elevated));
  border: 1px solid color-mix(in srgb, var(--rm-bar-color) 60%, var(--dim-2));
  display: flex;
  align-items: center;
  padding: 0 0.7rem;
  overflow: hidden;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 600ms ease-out, transform 600ms cubic-bezier(0.16, 1, 0.3, 1),
              width 800ms cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: inset 3px 0 0 var(--rm-bar-color),
              0 0 20px color-mix(in srgb, var(--rm-bar-color) 18%, transparent);
}
.rm-bar.in { opacity: 1; transform: translateY(0); }
.rm-bar.rm-accent { --rm-bar-color: var(--accent); }
.rm-bar.rm-amber  { --rm-bar-color: var(--amber); }
.rm-bar.rm-blue   { --rm-bar-color: var(--blue); }
.rm-bar.rm-red    { --rm-bar-color: var(--red); }
.rm-bar.rm-dim    { --rm-bar-color: var(--dim); }
.rm-bar-label {
  font-size: clamp(0.75rem, 1vw, 0.9rem);
  color: var(--fg);
  letter-spacing: 0.02em;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

/* ============================================================
 * SWOT
 * ============================================================ */
.swot {
  width: min(1100px, 94vw);
  height: min(72vh, 700px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 1px;
  background: var(--dim-2);
  border: 1px solid var(--dim-2);
}
.swot-cell {
  --swot-color: var(--accent);
  background: var(--bg);
  padding: clamp(1rem, 2.2vw, 1.8rem);
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  position: relative;
  opacity: 0;
  transform: scale(0.97);
  transition: opacity 500ms ease-out, transform 500ms cubic-bezier(0.16, 1, 0.3, 1),
              background 500ms ease-out, box-shadow 500ms ease-out;
  overflow: hidden;
}
.swot-cell.in {
  opacity: 1;
  transform: scale(1);
  background: color-mix(in srgb, var(--swot-color) 6%, var(--bg));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--swot-color) 45%, var(--dim-2));
}
.swot-cell--accent { --swot-color: var(--accent); }
.swot-cell--amber  { --swot-color: var(--amber); }
.swot-cell--blue   { --swot-color: var(--blue); }
.swot-cell--red    { --swot-color: var(--red); }
.swot-head {
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
}
.swot-letter {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 500;
  color: var(--swot-color);
  letter-spacing: -0.04em;
  line-height: 1;
  text-shadow: 0 0 20px color-mix(in srgb, var(--swot-color) 50%, transparent);
}
.swot-title {
  font-size: clamp(1rem, 1.3vw, 1.2rem);
  color: var(--fg);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.swot-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.swot-item {
  font-size: clamp(0.9rem, 1.2vw, 1.05rem);
  color: var(--fg);
  line-height: 1.45;
  padding-left: 1.2rem;
  position: relative;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 400ms ease-out, transform 400ms cubic-bezier(0.16, 1, 0.3, 1);
}
.swot-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.55rem;
  height: 1px;
  background: var(--swot-color);
}
.swot-item.in { opacity: 1; transform: translateX(0); }

/* ============================================================
 * CodeBlock
 * ============================================================ */
.codeblock {
  width: min(1100px, 94vw);
  background: var(--bg-elevated);
  border: 1px solid var(--dim-2);
  font-family: var(--mono);
  overflow: hidden;
}
.cb-head {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.7rem 1rem;
  background: color-mix(in srgb, var(--bg) 60%, var(--bg-elevated));
  border-bottom: 1px solid var(--dim-2);
  font-size: clamp(0.8rem, 1vw, 0.9rem);
  color: var(--dim);
  letter-spacing: 0.04em;
}
.cb-dots {
  display: inline-flex;
  gap: 0.35rem;
}
.cb-dots span {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--dim-2);
}
.cb-dots span:nth-child(1) { background: color-mix(in srgb, var(--red) 60%, var(--dim-2)); }
.cb-dots span:nth-child(2) { background: color-mix(in srgb, var(--amber) 60%, var(--dim-2)); }
.cb-dots span:nth-child(3) { background: color-mix(in srgb, var(--accent) 60%, var(--dim-2)); }
.cb-file {
  color: var(--fg);
  font-weight: 500;
}
.cb-lang {
  margin-left: auto;
  font-size: 0.85em;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--accent);
}
.cb-body {
  margin: 0;
  padding: clamp(0.8rem, 1.4vw, 1.2rem) 0;
  font-size: clamp(0.85rem, 1.1vw, 1rem);
  line-height: 1.55;
  color: var(--fg);
  background: transparent;
  overflow-x: auto;
  white-space: pre;
}
.cb-line {
  display: grid;
  grid-template-columns: 4ch 1fr;
  gap: 1rem;
  padding: 0 clamp(0.8rem, 1.4vw, 1.2rem);
  opacity: 0;
  transform: translateY(2px);
  transition: opacity 400ms ease-out, transform 400ms cubic-bezier(0.16, 1, 0.3, 1),
              background 300ms ease-out;
}
.cb-line.in { opacity: 1; transform: translateY(0); }
.cb-line-num {
  color: var(--dim);
  text-align: right;
  font-variant-numeric: tabular-nums;
  user-select: none;
}
.cb-line-text {
  color: var(--fg);
  white-space: pre;
}
.cb-line--highlight {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  box-shadow: inset 2px 0 0 var(--accent);
}
.cb-line--highlight .cb-line-num { color: var(--accent); }

/* ============================================================
 * CodeDiff
 * ============================================================ */
.codediff {
  width: min(1100px, 94vw);
  background: var(--bg-elevated);
  border: 1px solid var(--dim-2);
  font-family: var(--mono);
  overflow: hidden;
}
.cd-head {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.7rem 1rem;
  background: color-mix(in srgb, var(--bg) 60%, var(--bg-elevated));
  border-bottom: 1px solid var(--dim-2);
  font-size: clamp(0.8rem, 1vw, 0.9rem);
  color: var(--dim);
  letter-spacing: 0.04em;
}
.cd-file {
  color: var(--fg);
  font-weight: 500;
}
.cd-lang {
  font-size: 0.85em;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--accent);
}
.cd-stats {
  margin-left: auto;
  display: inline-flex;
  gap: 0.7rem;
  font-variant-numeric: tabular-nums;
}
.cd-stats .cd-adds    { color: var(--accent); }
.cd-stats .cd-removes { color: var(--red); }
.cd-body {
  margin: 0;
  padding: clamp(0.8rem, 1.4vw, 1.2rem) 0;
  font-size: clamp(0.85rem, 1.1vw, 1rem);
  line-height: 1.55;
  background: transparent;
  overflow-x: auto;
  white-space: pre;
}
.cd-line {
  display: grid;
  grid-template-columns: 2ch 1fr;
  gap: 1rem;
  padding: 0 clamp(0.8rem, 1.4vw, 1.2rem);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 400ms ease-out, transform 400ms cubic-bezier(0.16, 1, 0.3, 1);
}
.cd-line.in { opacity: 1; transform: translateX(0); }
.cd-marker {
  font-variant-numeric: tabular-nums;
  user-select: none;
  font-weight: 500;
}
.cd-text {
  white-space: pre;
}
.cd-line--add {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  box-shadow: inset 2px 0 0 var(--accent);
}
.cd-line--add .cd-marker { color: var(--accent); }
.cd-line--add .cd-text   { color: color-mix(in srgb, var(--accent) 30%, var(--fg)); }
.cd-line--remove {
  background: color-mix(in srgb, var(--red) 10%, transparent);
  box-shadow: inset 2px 0 0 var(--red);
}
.cd-line--remove .cd-marker { color: var(--red); }
.cd-line--remove .cd-text   { color: color-mix(in srgb, var(--red) 30%, var(--fg)); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--red) 40%, transparent); }
.cd-line--context .cd-marker { color: var(--dim); }
.cd-line--context .cd-text   { color: var(--dim); }

/* === inlined: themes/phosphor/components-business.css === */
/* Stagecraft — Phosphor theme: business / marketing components. */

/* ---------------------------------------------------------------------------
 * Pricing
 * ------------------------------------------------------------------------- */
.pricing {
  display: grid;
  gap: clamp(1rem, 2vw, 1.6rem);
  width: min(1300px, 94vw);
  align-items: stretch;
}
.pricing--cols-1 { grid-template-columns: 1fr; max-width: 480px; }
.pricing--cols-2 { grid-template-columns: repeat(2, 1fr); }
.pricing--cols-3 { grid-template-columns: repeat(3, 1fr); }
.pricing--cols-4 { grid-template-columns: repeat(4, 1fr); }

.pricing-tier {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(0.7rem, 1.4vw, 1.2rem);
  padding: clamp(1.3rem, 2.6vw, 2rem);
  background: var(--bg-elevated);
  border: 1px solid var(--dim-2);
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 700ms ease-out,
    transform 800ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 500ms ease,
    box-shadow 500ms ease;
}
.pricing-tier.in { opacity: 1; transform: translateY(0); }

.pricing-tier--featured {
  border-color: var(--accent);
  box-shadow:
    0 0 0 1px var(--accent),
    0 0 40px -10px var(--accent-glow);
  transform: translateY(14px) scale(1.04);
  z-index: 1;
}
.pricing-tier--featured.in { transform: translateY(0) scale(1.04); }

.pricing-badge {
  position: absolute;
  top: -0.8rem;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.25rem 0.7rem;
  background: var(--accent);
  color: var(--bg);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 500;
  box-shadow: 0 0 24px -4px var(--accent-glow);
}

.pricing-name {
  font-size: clamp(0.95rem, 1.3vw, 1.15rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dim);
}
.pricing-tier--featured .pricing-name { color: var(--accent); }

.pricing-figure {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
  line-height: 1;
  margin: 0.2rem 0 0.4rem;
}
.pricing-price {
  font-size: clamp(2.2rem, 4.5vw, 3.4rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--fg);
}
.pricing-tier--featured .pricing-price {
  color: var(--accent);
  text-shadow: 0 0 28px var(--accent-glow);
}
.pricing-period {
  font-size: clamp(0.95rem, 1.3vw, 1.15rem);
  color: var(--dim);
}

.pricing-features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.pricing-feature {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-size: clamp(0.9rem, 1.15vw, 1.05rem);
  color: var(--fg);
  line-height: 1.4;
}
.pricing-check {
  font-size: 1.1rem;
  color: var(--accent);
  flex: 0 0 auto;
  margin-top: 0.1em;
}

.pricing-cta {
  margin-top: auto;
  padding: 0.7rem 1rem;
  border: 1px solid var(--dim-2);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.4rem;
  font-size: clamp(0.85rem, 1.1vw, 1rem);
  color: var(--fg);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: border-color 400ms ease, background 400ms ease;
}
.pricing-tier--featured .pricing-cta {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}
.pricing-cta-arrow { font-size: 1.1rem; }

@media (max-width: 800px) {
  .pricing--cols-3, .pricing--cols-4 { grid-template-columns: 1fr; }
  .pricing-tier--featured, .pricing-tier--featured.in { transform: translateY(0) scale(1); }
}

/* ---------------------------------------------------------------------------
 * Testimonial
 * ------------------------------------------------------------------------- */
.testimonial {
  display: grid;
  grid-template-columns: minmax(0, 280px) 1fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
  width: min(1200px, 94vw);
}
.testimonial-photo-wrap {
  width: clamp(180px, 22vw, 280px);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg-elevated);
  border: 1px solid var(--dim-2);
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 700ms ease-out, transform 800ms cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 0 40px -10px var(--accent-glow);
}
.testimonial-photo-wrap.in { opacity: 1; transform: scale(1); }
.testimonial-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.9) contrast(1.05);
}

.testimonial-body {
  display: flex;
  flex-direction: column;
  gap: clamp(0.8rem, 1.8vw, 1.4rem);
  position: relative;
}
.testimonial-mark {
  font-size: clamp(3rem, 6vw, 5rem);
  color: var(--accent);
  text-shadow: 0 0 30px var(--accent-glow);
  line-height: 0.7;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 600ms ease-out, transform 700ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.testimonial-mark.in { opacity: 1; transform: scale(1); }

.testimonial-quote {
  margin: 0;
  font-size: clamp(1.4rem, 2.6vw, 2.2rem);
  font-style: italic;
  line-height: 1.3;
  color: var(--fg);
  letter-spacing: -0.01em;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 900ms ease-out, transform 1000ms cubic-bezier(0.16, 1, 0.3, 1);
}
.testimonial-quote.in { opacity: 1; transform: translateY(0); }

.testimonial-meta {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 700ms ease-out, transform 800ms ease-out;
  position: relative;
}
.testimonial-meta.in { opacity: 1; transform: translateY(0); }
.testimonial-author {
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  color: var(--fg);
  font-weight: 500;
}
.testimonial-affil {
  font-size: clamp(0.85rem, 1.1vw, 1rem);
  color: var(--dim);
}
.testimonial-sep { color: var(--dim-2); margin: 0 0.3rem; }
.testimonial-logo {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 2rem;
  opacity: 0.55;
  filter: grayscale(1);
}

@media (max-width: 800px) {
  .testimonial { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .testimonial-meta { align-items: center; }
  .testimonial-logo { position: static; transform: none; margin-top: 0.6rem; }
}

/* ---------------------------------------------------------------------------
 * TeamGrid
 * ------------------------------------------------------------------------- */
.team-grid {
  display: grid;
  gap: clamp(1.2rem, 2.2vw, 2rem);
  width: min(1300px, 94vw);
}
.team-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.team-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.team-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }

.team-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.5rem;
  padding: clamp(1rem, 2vw, 1.6rem);
  background: var(--bg-elevated);
  border: 1px solid var(--dim-2);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 700ms ease-out, transform 800ms cubic-bezier(0.16, 1, 0.3, 1), border-color 500ms ease;
}
.team-card.in { opacity: 1; transform: translateY(0); }
.team-card:hover { border-color: var(--accent); }

.team-photo-wrap {
  width: clamp(80px, 9vw, 120px);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg);
  border: 1px solid var(--dim-2);
  margin-bottom: 0.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.team-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.9) contrast(1.04);
}
.team-photo--placeholder {
  font-size: clamp(2.5rem, 4vw, 3.5rem);
  color: var(--dim);
}

.team-name {
  font-size: clamp(1rem, 1.3vw, 1.2rem);
  font-weight: 500;
  color: var(--fg);
  letter-spacing: -0.01em;
}
.team-role {
  font-size: clamp(0.8rem, 1.05vw, 0.95rem);
  color: var(--accent);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.team-bio {
  font-size: clamp(0.8rem, 1.05vw, 0.95rem);
  color: var(--dim);
  line-height: 1.45;
  margin-top: 0.3rem;
}
.team-social {
  margin-top: auto;
  padding-top: 0.6rem;
  display: flex;
  gap: 0.7rem;
}
.team-social-icon {
  font-size: 1.1rem;
  color: var(--dim);
  transition: color 300ms ease;
  cursor: default;
}
.team-social-icon:hover { color: var(--accent); }

@media (max-width: 900px) {
  .team-grid--cols-3, .team-grid--cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .team-grid--cols-2, .team-grid--cols-3, .team-grid--cols-4 { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
 * Agenda
 * ------------------------------------------------------------------------- */
.agenda {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(0.8rem, 1.6vw, 1.4rem);
  width: min(900px, 92vw);
  padding-left: clamp(5rem, 10vw, 8rem);
}
.agenda-rail {
  position: absolute;
  left: clamp(5rem, 10vw, 8rem);
  top: 0.6rem;
  bottom: 0.6rem;
  width: 1px;
  background: linear-gradient(to bottom, transparent, var(--dim-2) 12%, var(--dim-2) 88%, transparent);
}
.agenda-item {
  position: relative;
  display: grid;
  grid-template-columns: clamp(5rem, 10vw, 8rem) auto 1fr;
  align-items: center;
  gap: clamp(0.8rem, 1.4vw, 1.2rem);
  margin-left: calc(-1 * clamp(5rem, 10vw, 8rem));
  opacity: 0;
  transform: translateX(-12px);
  transition: opacity 700ms ease-out, transform 800ms cubic-bezier(0.16, 1, 0.3, 1);
}
.agenda-item.in { opacity: 1; transform: translateX(0); }
.agenda-time {
  font-size: clamp(0.85rem, 1.15vw, 1rem);
  color: var(--accent);
  text-align: right;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.05em;
}
.agenda-dot {
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  background: var(--bg-elevated);
  border: 1px solid var(--accent);
  box-shadow: 0 0 16px -2px var(--accent-glow);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
}
.agenda-dot .material-symbols-outlined {
  font-size: 1.1rem;
  color: var(--accent);
}
.agenda-body {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.agenda-label {
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  color: var(--fg);
  font-weight: 500;
  letter-spacing: -0.01em;
}
.agenda-duration {
  font-size: clamp(0.75rem, 1vw, 0.9rem);
  color: var(--dim);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@media (max-width: 600px) {
  .agenda { padding-left: 0; }
  .agenda-rail { left: 4rem; }
  .agenda-item { grid-template-columns: 4rem auto 1fr; margin-left: 0; }
}

/* ---------------------------------------------------------------------------
 * Checklist
 * ------------------------------------------------------------------------- */
.checklist {
  display: flex;
  flex-direction: column;
  gap: clamp(0.6rem, 1.2vw, 1rem);
  width: min(800px, 92vw);
}
.checklist-item {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  padding: clamp(0.7rem, 1.3vw, 1rem) clamp(0.8rem, 1.6vw, 1.2rem);
  background: var(--bg-elevated);
  border: 1px solid var(--dim-2);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 600ms ease-out, transform 700ms cubic-bezier(0.16, 1, 0.3, 1), border-color 400ms ease;
}
.checklist-item.in { opacity: 1; transform: translateY(0); }
.checklist-item.is-done { border-color: rgba(0, 255, 156, 0.25); }
.checklist-box {
  font-size: 1.5rem;
  color: var(--dim);
  flex: 0 0 auto;
  transition: color 400ms ease;
  line-height: 1.1;
}
.checklist-item.is-done .checklist-box {
  color: var(--accent);
  text-shadow: 0 0 12px var(--accent-glow);
}
.checklist-body {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.checklist-text {
  font-size: clamp(1rem, 1.35vw, 1.2rem);
  color: var(--fg);
  letter-spacing: -0.01em;
  line-height: 1.35;
}
.checklist-item.is-done .checklist-text { color: var(--dim); }
.checklist-sub {
  font-size: clamp(0.8rem, 1.05vw, 0.95rem);
  color: var(--dim);
  line-height: 1.45;
}

/* ---------------------------------------------------------------------------
 * Steps
 * ------------------------------------------------------------------------- */
.steps {
  display: grid;
  gap: clamp(1rem, 2vw, 1.8rem);
  width: min(1300px, 94vw);
}
.steps--horizontal { grid-auto-flow: column; grid-auto-columns: 1fr; }
.steps--vertical   { grid-auto-flow: row; max-width: 720px; }

.step-card {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(0.8rem, 1.5vw, 1.4rem);
  padding: clamp(1.1rem, 2.2vw, 1.8rem);
  background: var(--bg-elevated);
  border: 1px solid var(--dim-2);
  align-items: start;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 700ms ease-out, transform 800ms cubic-bezier(0.16, 1, 0.3, 1), border-color 400ms ease;
}
.step-card.in { opacity: 1; transform: translateY(0); }
.step-card:hover { border-color: var(--accent); }

.steps--horizontal .step-card { grid-template-columns: 1fr; grid-template-rows: auto auto; }

.step-numeral {
  font-size: clamp(2.5rem, 5vw, 4.2rem);
  font-weight: 500;
  letter-spacing: -0.05em;
  line-height: 0.9;
  color: var(--accent);
  text-shadow: 0 0 28px var(--accent-glow);
  font-variant-numeric: tabular-nums;
}

.step-content {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
}
.step-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.step-icon {
  font-size: 1.3rem;
  color: var(--dim);
}
.step-label {
  font-size: clamp(1.05rem, 1.5vw, 1.4rem);
  font-weight: 500;
  color: var(--fg);
  letter-spacing: -0.015em;
  line-height: 1.2;
}
.step-body {
  font-size: clamp(0.85rem, 1.1vw, 1rem);
  color: var(--dim);
  line-height: 1.5;
}

@media (max-width: 800px) {
  .steps--horizontal { grid-auto-flow: row; grid-auto-columns: auto; }
  .steps--horizontal .step-card { grid-template-columns: auto 1fr; }
}

/* ---------------------------------------------------------------------------
 * CTA
 * ------------------------------------------------------------------------- */
.cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(1rem, 2vw, 1.6rem);
  width: min(900px, 92vw);
  padding: clamp(2rem, 4vw, 3.5rem);
  background: var(--bg-elevated);
  border: 1px solid var(--dim-2);
  position: relative;
}
.cta--accent {
  border-color: var(--accent);
  box-shadow: 0 0 50px -10px var(--accent-glow);
  background:
    linear-gradient(135deg, var(--accent-soft), transparent 50%),
    var(--bg-elevated);
}
.cta-headline {
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--fg);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 800ms ease-out, transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
}
.cta-headline.in { opacity: 1; transform: translateY(0); }
.cta--accent .cta-headline { color: var(--fg); }

.cta-body {
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  color: var(--dim);
  line-height: 1.5;
  max-width: 50ch;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 700ms ease-out, transform 800ms cubic-bezier(0.16, 1, 0.3, 1);
}
.cta-body.in { opacity: 1; transform: translateY(0); }

.cta-action {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 0.4rem;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 700ms ease-out, transform 800ms cubic-bezier(0.16, 1, 0.3, 1);
}
.cta-action.in { opacity: 1; transform: translateY(0); }

.cta-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem 1.4rem;
  border: 1px solid var(--accent);
  color: var(--accent);
  background: transparent;
  font-size: clamp(0.9rem, 1.2vw, 1.05rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: background 300ms ease, color 300ms ease, transform 300ms ease, box-shadow 300ms ease;
}
.cta--accent .cta-button {
  background: var(--accent);
  color: var(--bg);
  box-shadow: 0 0 30px -5px var(--accent-glow);
}
.cta-button-arrow { font-size: 1.2rem; }
.cta-hint {
  font-size: clamp(0.8rem, 1.05vw, 0.95rem);
  color: var(--dim);
  letter-spacing: 0.05em;
}

/* ---------------------------------------------------------------------------
 * Callout (shared base) + Tip
 * ------------------------------------------------------------------------- */
.callout {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: flex-start;
  gap: clamp(0.8rem, 1.5vw, 1.2rem);
  width: min(900px, 92vw);
  padding: clamp(1.1rem, 2.2vw, 1.8rem) clamp(1.2rem, 2.4vw, 2rem);
  background: var(--bg-elevated);
  border-left: 4px solid var(--dim-2);
  opacity: 0;
  transform: translateX(-12px);
  transition: opacity 700ms ease-out, transform 800ms cubic-bezier(0.16, 1, 0.3, 1);
}
.callout.in { opacity: 1; transform: translateX(0); }
.callout-icon {
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  line-height: 1;
  flex: 0 0 auto;
  margin-top: 0.05em;
}
.callout-body {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.callout-heading {
  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
  font-weight: 500;
  letter-spacing: -0.01em;
}
.callout-text {
  font-size: clamp(0.95rem, 1.25vw, 1.1rem);
  color: var(--fg);
  line-height: 1.5;
  opacity: 0.9;
}
.callout--info    { border-left-color: var(--blue);   background: linear-gradient(90deg, rgba(24, 158, 255, 0.08), transparent 40%), var(--bg-elevated); }
.callout--info    .callout-icon, .callout--info    .callout-heading { color: var(--blue); }
.callout--tip     { border-left-color: var(--accent); background: linear-gradient(90deg, var(--accent-soft), transparent 40%), var(--bg-elevated); }
.callout--tip     .callout-icon, .callout--tip     .callout-heading { color: var(--accent); }
.callout--warning { border-left-color: var(--amber);  background: linear-gradient(90deg, rgba(255, 180, 84, 0.1), transparent 40%), var(--bg-elevated); }
.callout--warning .callout-icon, .callout--warning .callout-heading { color: var(--amber); }
.callout--danger  { border-left-color: var(--red);    background: linear-gradient(90deg, rgba(255, 92, 92, 0.1), transparent 40%), var(--bg-elevated); }
.callout--danger  .callout-icon, .callout--danger  .callout-heading { color: var(--red); }
.callout--success { border-left-color: var(--accent); background: linear-gradient(90deg, rgba(0, 255, 156, 0.18), transparent 50%), var(--bg-elevated); }
.callout--success .callout-icon, .callout--success .callout-heading { color: var(--accent); }
.callout--success .callout-icon { text-shadow: 0 0 18px var(--accent-glow); }

/* Tip — compact single-paragraph emphasis */
.tip {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.8rem;
  width: min(720px, 92vw);
  padding: 0.9rem 1.2rem;
  background: var(--bg-elevated);
  border: 1px solid var(--dim-2);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 600ms ease-out, transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}
.tip.in { opacity: 1; transform: translateY(0); }
.tip-icon {
  font-size: clamp(1.4rem, 2vw, 1.8rem);
  flex: 0 0 auto;
}
.tip-body {
  margin: 0;
  font-size: clamp(0.95rem, 1.25vw, 1.15rem);
  color: var(--fg);
  line-height: 1.4;
}
.tip--info    { border-color: rgba(24, 158, 255, 0.4); }
.tip--info    .tip-icon { color: var(--blue); }
.tip--tip     { border-color: rgba(0, 255, 156, 0.35); }
.tip--tip     .tip-icon { color: var(--accent); }
.tip--warning { border-color: rgba(255, 180, 84, 0.4); }
.tip--warning .tip-icon { color: var(--amber); }
.tip--danger  { border-color: rgba(255, 92, 92, 0.4); }
.tip--danger  .tip-icon { color: var(--red); }
.tip--success {
  border-color: var(--accent);
  background: linear-gradient(135deg, var(--accent-soft), transparent 60%), var(--bg-elevated);
}
.tip--success .tip-icon { color: var(--accent); text-shadow: 0 0 14px var(--accent-glow); }

/* ---------------------------------------------------------------------------
 * BeforeAfter
 * ------------------------------------------------------------------------- */
.before-after--text {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: clamp(1rem, 2vw, 2rem);
  width: min(1200px, 94vw);
}
.ba-col {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  padding: clamp(1.3rem, 2.5vw, 2rem);
  background: var(--bg-elevated);
  border: 1px solid var(--dim-2);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 700ms ease-out, transform 800ms cubic-bezier(0.16, 1, 0.3, 1);
}
.ba-col.in { opacity: 1; transform: translateY(0); }
.ba-col.ba-after { border-color: rgba(0, 255, 156, 0.3); }
.ba-col-tag {
  font-size: clamp(0.8rem, 1.05vw, 0.95rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dim);
}
.ba-col-tag--accent { color: var(--accent); }
.ba-col-text {
  font-size: clamp(1.05rem, 1.6vw, 1.45rem);
  color: var(--fg);
  line-height: 1.4;
  letter-spacing: -0.01em;
}
.ba-after .ba-col-text { color: var(--fg); }
.ba-arrow {
  align-self: center;
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  color: var(--accent);
  text-shadow: 0 0 22px var(--accent-glow);
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity 600ms ease-out, transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}
.ba-arrow.in { opacity: 1; transform: translateX(0); }

.before-after--image {
  position: relative;
  width: min(1200px, 94vw);
  aspect-ratio: 16 / 9;
  background: var(--bg-elevated);
  border: 1px solid var(--dim-2);
  overflow: hidden;
}
.before-after--image .ba-pane {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 700ms ease-out;
}
.before-after--image .ba-pane.in { opacity: 1; }
.before-after--image .ba-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.9) contrast(1.05);
}
.before-after--image .ba-before { z-index: 1; }
.before-after--image .ba-after {
  z-index: 2;
  clip-path: polygon(0 0, var(--ba-clip, 0%) 0, calc(var(--ba-clip, 0%) + 4%) 100%, 0 100%);
  transition: opacity 700ms ease-out, clip-path 1200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.before-after--image .ba-after .ba-img { filter: saturate(1.05) contrast(1.08); }
.ba-label {
  position: absolute;
  bottom: 1rem;
  padding: 0.4rem 0.8rem;
  z-index: 3;
}
.ba-label--left  { left: 1rem; }
.ba-label--right { right: 1rem; }
.ba-tag {
  display: inline-block;
  padding: 0.35rem 0.7rem;
  background: rgba(10, 10, 10, 0.7);
  border: 1px solid var(--dim-2);
  color: var(--fg);
  font-size: clamp(0.75rem, 1vw, 0.9rem);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  backdrop-filter: blur(4px);
}
.ba-tag--accent {
  color: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 18px -4px var(--accent-glow);
}
.before-after--image .ba-divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--ba-clip, 0%);
  width: 2px;
  background: var(--accent);
  box-shadow: 0 0 18px var(--accent-glow);
  transform: skewX(-6deg);
  z-index: 4;
  pointer-events: none;
  transition: left 1200ms cubic-bezier(0.16, 1, 0.3, 1);
}

@media (max-width: 800px) {
  .before-after--text { grid-template-columns: 1fr; }
  .ba-arrow { transform: rotate(90deg); justify-self: center; }
  .ba-arrow.in { transform: rotate(90deg); }
}

/* === inlined: themes/phosphor/components-content.css === */
/* Stagecraft — Phosphor theme: content/typography components. */

/* ---------------------------------------------------------------------------
 * Statement
 * ------------------------------------------------------------------------- */
.statement-host {
  padding: clamp(2rem, 5vw, 4rem);
}
.statement {
  width: min(1500px, 92vw);
  text-align: center;
}
.statement-text {
  margin: 0;
  font-size: clamp(3rem, 9vw, 9rem);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1.02;
  color: var(--fg);
  /* word spans need to be inline-block so transform works */
}
.statement .st-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(14px);
  filter: blur(6px);
  transition:
    opacity 600ms ease-out,
    transform 700ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 600ms ease-out;
}
.statement .st-word.in {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
.statement .st-em {
  color: var(--accent);
  text-shadow: 0 0 30px var(--accent-glow);
}
.statement .st-em--amber { color: var(--amber); text-shadow: 0 0 22px rgba(255, 180, 84, 0.35); }
.statement .st-em--blue  { color: var(--blue);  text-shadow: 0 0 24px rgba(24, 158, 255, 0.4); }

/* ---------------------------------------------------------------------------
 * QandA
 * ------------------------------------------------------------------------- */
.qanda {
  width: min(1200px, 92vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(1.5rem, 4vw, 3rem);
}
.qa-q {
  font-size: clamp(1.6rem, 3.5vw, 2.6rem);
  font-style: italic;
  font-weight: 400;
  color: var(--amber);
  letter-spacing: -0.01em;
  line-height: 1.25;
  max-width: 28ch;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 800ms ease-out, transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
}
.qa-q::before { content: '?  ';  color: var(--dim-2); font-style: normal; }
.qa-q.in { opacity: 1; transform: translateY(0); }

.qa-a {
  font-size: clamp(2.5rem, 6.5vw, 5.5rem);
  font-weight: 500;
  color: var(--accent);
  letter-spacing: -0.03em;
  line-height: 1.05;
  text-shadow: 0 0 40px var(--accent-glow);
  max-width: 22ch;
  opacity: 0;
  transform: translateY(20px) scale(0.98);
  transition: opacity 900ms ease-out, transform 1100ms cubic-bezier(0.16, 1, 0.3, 1);
}
.qa-a.in { opacity: 1; transform: translateY(0) scale(1); }

.qa-attr {
  font-size: clamp(0.85rem, 1.1vw, 1rem);
  color: var(--dim);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 800ms ease-out;
}
.qa-attr.in { opacity: 1; }

/* ---------------------------------------------------------------------------
 * Manifesto
 * ------------------------------------------------------------------------- */
.manifesto {
  width: min(1300px, 92vw);
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 2.5vw, 2rem);
}
.mf-intro {
  font-size: clamp(0.95rem, 1.3vw, 1.15rem);
  color: var(--dim);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 700ms ease-out, transform 800ms ease-out;
}
.mf-intro.in { opacity: 1; transform: translateY(0); }

.mf-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(0.8rem, 1.6vw, 1.4rem);
}
.mf-item {
  display: grid;
  grid-template-columns: clamp(3rem, 6vw, 5rem) 1fr;
  align-items: baseline;
  gap: clamp(1rem, 2.5vw, 2rem);
  padding-bottom: clamp(0.6rem, 1.4vw, 1.1rem);
  border-bottom: 1px solid var(--dim-2);
  opacity: 0;
  transform: translateX(-14px);
  transition: opacity 700ms ease-out, transform 800ms cubic-bezier(0.16, 1, 0.3, 1), border-color 600ms ease;
}
.mf-item:last-child { border-bottom: none; }
.mf-item.in { opacity: 1; transform: translateX(0); }
.mf-item.in { border-color: var(--dim-2); }

.mf-num {
  font-size: clamp(1.5rem, 2.8vw, 2.2rem);
  font-weight: 300;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  text-shadow: 0 0 18px var(--accent-glow);
}
.mf-text {
  font-size: clamp(1.4rem, 2.6vw, 2.2rem);
  color: var(--fg);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.015em;
}
.mf-text .mf-em {
  color: var(--accent);
  font-weight: 500;
}

/* ---------------------------------------------------------------------------
 * Punchline
 * ------------------------------------------------------------------------- */
.punchline {
  width: min(1300px, 92vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(2rem, 5vw, 4rem);
}
.pl-buildup {
  display: flex;
  flex-direction: column;
  gap: clamp(0.6rem, 1.4vw, 1.1rem);
}
.pl-line {
  font-size: clamp(1.1rem, 1.8vw, 1.5rem);
  color: var(--dim);
  letter-spacing: -0.01em;
  line-height: 1.4;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 700ms ease-out, transform 800ms cubic-bezier(0.16, 1, 0.3, 1);
}
.pl-line.in { opacity: 1; transform: translateY(0); }

.pl-payoff {
  font-size: clamp(3rem, 8vw, 7rem);
  font-weight: 500;
  color: var(--accent);
  letter-spacing: -0.04em;
  line-height: 1.05;
  text-shadow: 0 0 50px var(--accent-glow);
  max-width: 22ch;
  opacity: 0;
  transform: translateY(24px) scale(0.97);
  filter: blur(8px);
  transition:
    opacity 900ms ease-out,
    transform 1200ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 800ms ease-out;
}
.pl-payoff.in { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }

/* ---------------------------------------------------------------------------
 * Definition
 * ------------------------------------------------------------------------- */
.definition {
  width: min(1100px, 92vw);
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 2vw, 1.6rem);
}
.df-head {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  border-bottom: 1px solid var(--dim-2);
  padding-bottom: clamp(0.6rem, 1.2vw, 1rem);
}
.df-term {
  margin: 0;
  font-size: clamp(4rem, 11vw, 9rem);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--fg);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 800ms ease-out, transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
}
.df-term.in { opacity: 1; transform: translateY(0); }
.df-pos {
  font-size: clamp(1rem, 1.6vw, 1.3rem);
  color: var(--dim);
  font-style: italic;
  letter-spacing: 0.04em;
  opacity: 0;
  transition: opacity 800ms ease-out;
}
.df-pos.in { opacity: 1; }

.df-def {
  margin: 0;
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  font-weight: 400;
  color: var(--fg);
  line-height: 1.35;
  letter-spacing: -0.01em;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 800ms ease-out, transform 900ms ease-out;
}
.df-def.in { opacity: 1; transform: translateY(0); }
.df-def::before {
  content: '1. ';
  color: var(--accent);
  font-weight: 500;
}

.df-ety {
  margin: 0;
  font-size: clamp(0.95rem, 1.3vw, 1.15rem);
  font-style: italic;
  color: var(--dim);
  line-height: 1.4;
  letter-spacing: 0.01em;
  opacity: 0;
  transition: opacity 800ms ease-out;
}
.df-ety::before { content: 'origin · '; color: var(--dim-2); font-style: normal; letter-spacing: 0.08em; text-transform: uppercase; }
.df-ety.in { opacity: 1; }

.df-examples {
  margin: clamp(0.6rem, 1.5vw, 1.2rem) 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  border-top: 1px dashed var(--dim-2);
  padding-top: clamp(0.8rem, 1.6vw, 1.2rem);
}
.df-ex {
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  color: var(--dim);
  font-style: italic;
  line-height: 1.4;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 700ms ease-out, transform 800ms ease-out;
}
.df-ex.in { opacity: 1; transform: translateY(0); }
.df-ex::before { content: '“'; color: var(--dim-2); font-style: normal; }
.df-ex::after  { content: '”'; color: var(--dim-2); font-style: normal; }
.df-mark {
  color: var(--accent);
  font-style: normal;
  font-weight: 500;
  background: var(--accent-soft);
  padding: 0 0.2em;
}

/* ---------------------------------------------------------------------------
 * ImageGrid
 * ------------------------------------------------------------------------- */
.image-grid {
  display: grid;
  gap: clamp(1rem, 2vw, 1.8rem);
  width: min(1500px, 94vw);
}
.image-grid.ig-cols-2 { grid-template-columns: repeat(2, 1fr); }
.image-grid.ig-cols-3 { grid-template-columns: repeat(3, 1fr); }
.image-grid.ig-cols-4 { grid-template-columns: repeat(4, 1fr); }

.ig-cell {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 700ms ease-out,
    transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
}
.ig-cell.in { opacity: 1; transform: translateY(0) rotate(0); }

/* cascade: each cell falls in with a small rotation that resolves to zero */
.image-grid.ig--cascade .ig-cell {
  transform: translateY(-30px) rotate(-3deg);
}
.image-grid.ig--cascade .ig-cell:nth-child(even) {
  transform: translateY(-30px) rotate(3deg);
}
.image-grid.ig--cascade .ig-cell.in {
  transform: translateY(0) rotate(0);
}

.ig-frame {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--bg-elevated);
  border: 1px solid var(--dim-2);
}
.ig-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,0.4),
    0 20px 50px -20px rgba(0,0,0,0.7);
}
.ig-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.92) contrast(1.04);
  transition: transform 800ms ease-out, filter 600ms ease-out;
}
.ig-cell:hover .ig-img {
  transform: scale(1.03);
  filter: saturate(1) contrast(1.06);
}
.ig-cap {
  font-size: clamp(0.85rem, 1.1vw, 1rem);
  color: var(--dim);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.4;
}

@media (max-width: 900px) {
  .image-grid.ig-cols-4 { grid-template-columns: repeat(2, 1fr); }
  .image-grid.ig-cols-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .image-grid.ig-cols-2,
  .image-grid.ig-cols-3,
  .image-grid.ig-cols-4 { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
 * Spotlight
 * ------------------------------------------------------------------------- */
.spotlight {
  width: min(1300px, 92vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(2rem, 4vw, 3.5rem);
}
.sp-focus {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2rem);
  padding: clamp(1.5rem, 3vw, 2.5rem) clamp(2rem, 4vw, 3.5rem);
  background: var(--bg-elevated);
  border: 1px solid var(--accent);
  box-shadow:
    0 0 0 1px var(--accent-soft),
    0 0 60px -10px var(--accent-glow),
    0 30px 80px -30px rgba(0,0,0,0.7);
  max-width: 56rem;
  opacity: 0;
  transform: translateY(20px) scale(0.97);
  transition: opacity 800ms ease-out, transform 1000ms cubic-bezier(0.16, 1, 0.3, 1);
}
.sp-focus.in { opacity: 1; transform: translateY(0) scale(1); }

.sp-icon {
  font-size: clamp(3rem, 5vw, 4.5rem);
  color: var(--accent);
  text-shadow: 0 0 30px var(--accent-glow);
  line-height: 1;
}
.sp-focus-text {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.sp-heading {
  font-size: clamp(2rem, 4.5vw, 3.4rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--accent);
}
.sp-body {
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  color: var(--fg);
  line-height: 1.4;
  max-width: 38ch;
}

.sp-context {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1rem, 2.5vw, 2rem) clamp(1.4rem, 3vw, 2.6rem);
  padding-top: clamp(1rem, 2vw, 1.6rem);
  border-top: 1px solid var(--dim-2);
  width: 100%;
}
.sp-ctx-item {
  font-size: clamp(0.95rem, 1.4vw, 1.2rem);
  color: var(--dim);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 600ms ease-out, transform 700ms ease-out, color 400ms ease;
}
.sp-ctx-item.in { opacity: 1; transform: translateY(0); }
.sp-ctx-item:hover { color: var(--fg); }

@media (max-width: 700px) {
  .sp-focus { flex-direction: column; text-align: center; }
}

/* ---------------------------------------------------------------------------
 * Marquee
 * ------------------------------------------------------------------------- */
.marquee-host {
  padding: 0 !important;
  display: block !important;
  width: 100vw;
  height: auto;
  align-self: center;
}
.marquee {
  --mq-duration: 28s;
  position: relative;
  width: 100vw;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: clamp(0.6rem, 1.5vw, 1.4rem);
  padding: clamp(2rem, 6vw, 5rem) 0;
  mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.marquee.mq--slow   { --mq-duration: 42s; }
.marquee.mq--medium { --mq-duration: 26s; }
.marquee.mq--fast   { --mq-duration: 16s; }

.mq-track {
  width: 100%;
  overflow: hidden;
  border-block: 1px solid var(--dim-2);
  padding: clamp(0.6rem, 1.2vw, 1rem) 0;
}
.mq-row {
  display: inline-flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 1.6rem);
  white-space: nowrap;
  will-change: transform;
  animation: mq-scroll var(--mq-duration) linear infinite;
}
.marquee.mq--right .mq-row { animation-direction: reverse; }
.mq-track--rev .mq-row     { animation-direction: reverse; }
.marquee.mq--right .mq-track--rev .mq-row { animation-direction: normal; }

.marquee:hover .mq-row { animation-play-state: paused; }

.mq-item {
  font-size: clamp(2rem, 5vw, 4.2rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--fg);
  line-height: 1;
  text-transform: lowercase;
}
.mq-track--b .mq-item {
  color: var(--accent);
  text-shadow: 0 0 24px var(--accent-glow);
  font-style: italic;
  font-weight: 400;
}
.mq-sep {
  font-size: clamp(2rem, 5vw, 4.2rem);
  color: var(--dim-2);
  line-height: 1;
  user-select: none;
}

@keyframes mq-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}


/* KineticText */
.kinetic .line {
  display: block;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 800ms ease-out, transform 1000ms cubic-bezier(0.16, 1, 0.3, 1);
}
.kinetic .line.in { opacity: 1; transform: translateY(0); }
.kinetic .line.dim { color: var(--dim); }
.kinetic .line.accent { color: var(--accent); }
.kinetic .line.fg { color: var(--fg); }
.kinetic .line.amber { color: var(--amber); }
.kinetic .line.blue { color: var(--blue); }
.kinetic .pause { display: inline-block; width: 0.6em; }

/* SectionCard */
.section-card { text-align: center; max-width: 100%; }
.sec-rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 3vw, 2rem);
  margin-bottom: clamp(2rem, 5vw, 4rem);
}
.sec-line { width: clamp(2.5rem, 8vw, 7rem); height: 1px; background: var(--dim); }
.sec-num {
  font-size: clamp(0.95rem, 1.3vw, 1.2rem);
  letter-spacing: 0.35em;
  color: var(--dim);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.sec-title {
  font-size: clamp(2.8rem, 8.5vw, 6.5rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--fg);
  margin-bottom: clamp(1rem, 2.5vw, 2rem);
  max-width: 22ch;
  margin-left: auto;
  margin-right: auto;
}
.sec-title .accent { color: var(--accent); }
.sec-tag {
  font-size: clamp(0.95rem, 1.4vw, 1.25rem);
  color: var(--dim);
  letter-spacing: 0.04em;
  font-style: italic;
}

/* ActivityList */
.activities {
  display: flex;
  flex-direction: column;
  gap: clamp(1.4rem, 3vw, 2.4rem);
  max-width: min(900px, 90vw);
}
.activity {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1.2rem, 3vw, 2.5rem);
  align-items: baseline;
  opacity: 0;
  transform: translateX(-14px);
  transition: opacity 600ms ease-out, transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}
.activity.in, .activity.shown { opacity: 1; transform: translateX(0); }
.activity .num {
  font-size: clamp(0.85rem, 1.2vw, 1.1rem);
  color: var(--dim);
  letter-spacing: 0.25em;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  min-width: 2.5ch;
  padding-top: 0.6em;
}
.activity .body { display: flex; flex-direction: column; gap: 0.35rem; }
.activity .name {
  font-size: clamp(1.8rem, 4.2vw, 3.6rem);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--fg);
}
.activity .name .accent { color: var(--accent); }
.activity .desc {
  font-size: clamp(0.95rem, 1.35vw, 1.2rem);
  color: var(--dim);
  letter-spacing: 0.01em;
}

/* Compare */
.compare {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: 0;
  width: min(1300px, 92vw);
}
.compare-col { padding: 0 clamp(2rem, 5vw, 5rem); }
.compare-h {
  font-size: 0.85rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 2rem;
}
.compare-h.old::before { content: '◌  '; color: var(--dim); }
.compare-h.new::before { content: '◉  '; color: var(--accent); }
.compare-list {
  list-style: none;
  font-size: clamp(1.1rem, 1.7vw, 1.5rem);
  line-height: 2;
  color: var(--fg);
}
.compare-list li {
  padding-left: 1.4em;
  position: relative;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 600ms, transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}
.compare-list li.in, .compare-list li.shown { opacity: 1; transform: translateX(0); }
.compare-list li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--dim);
}
.compare-list.strikethrough li {
  text-decoration: line-through;
  text-decoration-color: var(--dim-2);
  color: var(--dim);
}
.compare-list.accent li::before { color: var(--accent); }
.compare-divider {
  background: linear-gradient(to bottom, transparent, var(--dim-2) 20%, var(--dim-2) 80%, transparent);
}
@media (max-width: 700px) {
  .compare { grid-template-columns: 1fr; }
  .compare-divider { display: none; }
}

/* Counter */
.counter-wrap {
  display: flex;
  gap: clamp(2rem, 8vw, 8rem);
  align-items: stretch;
  justify-content: center;
  flex-wrap: wrap;
}
.counter-block { text-align: left; }
.counter-label {
  font-size: 0.85rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 0.8rem;
}
.counter-label .dot {
  display: inline-block;
  width: 7px; height: 7px;
  margin-right: 0.7rem;
  vertical-align: middle;
}
.counter-label.accent .dot { background: var(--accent); }
.counter-label.amber .dot { background: var(--amber); }
.counter-label.blue .dot { background: var(--blue); }
.counter-label.red .dot { background: var(--red); }
.counter-num {
  font-size: clamp(3rem, 8vw, 7rem);
  font-weight: 500;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--fg);
}
.counter-num.accent { color: var(--accent); }
.counter-num.amber { color: var(--amber); }
.counter-num.blue { color: var(--blue); }
.counter-num.red { color: var(--red); }
.counter-foot {
  margin-top: 4rem;
  font-size: clamp(1rem, 1.4vw, 1.3rem);
  color: var(--dim);
  text-align: center;
  opacity: 0;
  transition: opacity 1500ms ease-out;
}
.counter-foot.visible, .counter-foot.shown { opacity: 1; }
.counter-foot .accent { color: var(--accent); font-weight: 500; }

/* ShiftArrow */
.shift-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 4vw, 3rem);
  flex-wrap: wrap;
}
.shift-from, .shift-to {
  font-size: clamp(1.4rem, 3.5vw, 3rem);
  font-weight: 400;
  letter-spacing: -0.02em;
}
.shift-from { color: var(--dim); text-decoration: line-through; text-decoration-color: var(--dim-2); }
.shift-to { color: var(--accent); }
.shift-arrow {
  font-size: clamp(1.4rem, 3.5vw, 3rem);
  color: var(--accent);
  font-weight: 300;
}

/* === inlined: themes/paper/components-layout.css === */
/* Stagecraft — Paper theme: layout component overrides. */
/* circular @import skipped: ../phosphor/components-layout.css */

/* ---------------------------------------------------------------------------
 * ImageText
 * ------------------------------------------------------------------------- */
:root[data-theme="paper"] .it-figure {
  background: #FFFFFF;
}
:root[data-theme="paper"] .it-img {
  /* warmer print-like rendering */
  filter: saturate(0.85) contrast(1.02);
}
:root[data-theme="paper"] .it-img-frame {
  /* drop the green accent glow + heavy dark dropshadow; use thin grey rule */
  box-shadow:
    inset 0 0 0 1px var(--dim-2),
    0 0 0 1px var(--dim-2),
    0 12px 28px -16px rgba(31, 79, 135, 0.18);
}

/* ---------------------------------------------------------------------------
 * FullImage — scrims need to come from light not dark
 * ------------------------------------------------------------------------- */
:root[data-theme="paper"] .fi-scrim--center       { background: radial-gradient(ellipse at center, rgba(250,250,247,0.55) 0%, rgba(250,250,247,0.05) 70%); }
:root[data-theme="paper"] .fi-scrim--top          { background: linear-gradient(180deg, rgba(250,250,247,0.85), transparent 55%); }
:root[data-theme="paper"] .fi-scrim--bottom-left  { background: linear-gradient(45deg, rgba(250,250,247,0.92), transparent 65%); }
:root[data-theme="paper"] .fi-scrim--bottom-right { background: linear-gradient(315deg, rgba(250,250,247,0.92), transparent 65%); }

:root[data-theme="paper"] .fi-headline {
  color: var(--fg);
  text-shadow: 0 1px 14px rgba(255,255,255,0.55);
}
:root[data-theme="paper"] .fi-body {
  color: var(--fg);
}

/* ---------------------------------------------------------------------------
 * Quote
 * ------------------------------------------------------------------------- */
:root[data-theme="paper"] .q-mark {
  color: var(--accent);
  text-shadow: none;
  font-family: var(--mono); /* Source Serif quote marks */
}
:root[data-theme="paper"] .q-text {
  font-family: var(--mono); /* serif for editorial italic */
}

/* ---------------------------------------------------------------------------
 * BigNumber
 * ------------------------------------------------------------------------- */
:root[data-theme="paper"] .bn-num {
  color: var(--accent);
  text-shadow: none;
}

/* ---------------------------------------------------------------------------
 * Stats
 * ------------------------------------------------------------------------- */
:root[data-theme="paper"] .stat {
  background: #FFFFFF;
  border: 1px solid var(--dim-2);
}
:root[data-theme="paper"] .stat::before {
  height: 2px;
}
:root[data-theme="paper"] .stat--accent::before {
  background: var(--accent);
  box-shadow: none;
}
:root[data-theme="paper"] .stat--accent .stat-num {
  color: var(--accent);
  text-shadow: none;
}

/* ---------------------------------------------------------------------------
 * Bento
 * ------------------------------------------------------------------------- */
:root[data-theme="paper"] .bento-cell {
  background: #FFFFFF;
  border: 1px solid var(--dim-2);
}
:root[data-theme="paper"] .bento-cell--accent {
  border-color: var(--accent);
  box-shadow: none;
  background: var(--accent-soft);
}
:root[data-theme="paper"] .bento-cell--accent .bento-heading { color: var(--accent); }
:root[data-theme="paper"] .bento-cell--amber {
  border-color: rgba(181, 127, 44, 0.45);
  background: rgba(181, 127, 44, 0.06);
}
:root[data-theme="paper"] .bento-cell--blue {
  border-color: rgba(31, 79, 135, 0.4);
  background: rgba(31, 79, 135, 0.05);
}
:root[data-theme="paper"] .bento-cell--image .bento-heading {
  color: #FFFFFF;
  text-shadow: 0 1px 12px rgba(0,0,0,0.55);
}
:root[data-theme="paper"] .bento-cell--image .bento-body {
  color: #FFFFFF;
  opacity: 0.9;
}

/* === inlined: themes/paper/components-diagram.css === */
/* Stagecraft — Paper theme: diagram component overrides. */
/* circular @import skipped: ../phosphor/components-diagram.css */

/* Local card vars for paper look */
:root[data-theme="paper"] {
  --diag-card-bg: #FFFFFF;
  --diag-card-border: var(--dim-2);
}

/* ===========================================================================
 * Pillars
 * ===========================================================================*/
:root[data-theme="paper"] .pillar:hover .pillar-icon {
  /* drop drop-shadow glow */
  animation: none;
}
:root[data-theme="paper"] .pillar-icon {
  color: var(--accent);
}
:root[data-theme="paper"] .pillars-intro {
  font-family: var(--mono); /* serif emphasis */
}

/* ===========================================================================
 * Timeline
 * ===========================================================================*/
:root[data-theme="paper"] .tl-dot {
  background: #FFFFFF;
  border: 1px solid var(--dim);
}
:root[data-theme="paper"] .tl-event.active .tl-dot {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
:root[data-theme="paper"] .tl-icon {
  color: #FFFFFF;
}
:root[data-theme="paper"] .tl-event:not(.active) .tl-icon { color: var(--dim); }

/* ===========================================================================
 * Pyramid
 * ===========================================================================*/
:root[data-theme="paper"] .pyr-shape {
  background: #FFFFFF;
  border: 1px solid var(--dim-2);
}
:root[data-theme="paper"] .pyr-layer.pyc-accent .pyr-shape {
  background: var(--accent-soft);
  border-color: var(--accent);
}
:root[data-theme="paper"] .pyr-layer.pyc-blue   .pyr-shape { background: rgba(31, 79, 135, 0.08); border-color: var(--blue); }
:root[data-theme="paper"] .pyr-layer.pyc-amber  .pyr-shape { background: rgba(181, 127, 44, 0.10); border-color: var(--amber); }
:root[data-theme="paper"] .pyr-layer.pyc-red    .pyr-shape { background: rgba(155, 44, 44, 0.08); border-color: var(--red); }

/* ===========================================================================
 * Cycle
 * ===========================================================================*/
:root[data-theme="paper"] .cyc-ring {
  stroke: var(--dim-2);
  opacity: 0.8;
}
:root[data-theme="paper"] .cyc-arc {
  stroke: var(--accent);
  opacity: 0;
}
:root[data-theme="paper"] .cyc-arc.in { opacity: 0.8; }
:root[data-theme="paper"] .cyc-item {
  background: #FFFFFF;
  border: 1px solid var(--dim-2);
}
:root[data-theme="paper"] .cyc-item.cyc-accent { border-color: var(--accent); }
:root[data-theme="paper"] .cyc-item.cyc-blue   { border-color: var(--blue); }
:root[data-theme="paper"] .cyc-item.cyc-amber  { border-color: var(--amber); }
:root[data-theme="paper"] .cyc-item.cyc-red    { border-color: var(--red); }

/* ===========================================================================
 * Funnel
 * ===========================================================================*/
:root[data-theme="paper"] .fn-shape {
  background: #FFFFFF;
  border-top: 1px solid var(--dim-2);
  border-bottom: 1px solid var(--dim-2);
}
:root[data-theme="paper"] .fn-stage.fnc-accent .fn-shape { background: var(--accent-soft); border-color: var(--accent); }
:root[data-theme="paper"] .fn-stage.fnc-blue   .fn-shape { background: rgba(31, 79, 135, 0.08); border-color: var(--blue); }
:root[data-theme="paper"] .fn-stage.fnc-amber  .fn-shape { background: rgba(181, 127, 44, 0.10); border-color: var(--amber); }
:root[data-theme="paper"] .fn-stage.fnc-red    .fn-shape { background: rgba(155, 44, 44, 0.08); border-color: var(--red); }
:root[data-theme="paper"] .fn-stage.fnc-dim    .fn-shape { background: rgba(0,0,0,0.02); border-color: var(--dim-2); }

/* === inlined: themes/paper/components-chart.css === */
/* Stagecraft — Paper theme: chart/relationship component overrides. */
/* circular @import skipped: ../phosphor/components-chart.css */

/* ============================================================
 * Matrix2x2
 * ============================================================ */
:root[data-theme="paper"] .matrix2x2 .grid {
  background: var(--dim-2);
  border: 1px solid var(--dim-2);
}
:root[data-theme="paper"] .matrix2x2 .quadrant {
  background: #FFFFFF;
  filter: saturate(0.7);
}
:root[data-theme="paper"] .matrix2x2 .quadrant.active {
  background: color-mix(in srgb, var(--q-color, var(--accent)) 8%, #FFFFFF);
  box-shadow: inset 0 0 0 1px var(--q-color, var(--accent));
}

/* ============================================================
 * BarChart
 * ============================================================ */
:root[data-theme="paper"] .barchart .bar-track {
  background: var(--dim-2);
}
:root[data-theme="paper"] .barchart .bar-fill {
  /* drop glow */
  box-shadow: none;
}

/* ============================================================
 * Progress
 * ============================================================ */
:root[data-theme="paper"] .progress-track {
  background: var(--dim-2);
}
:root[data-theme="paper"] .progress-fill {
  box-shadow: none;
}

/* ============================================================
 * ProcessFlow
 * ============================================================ */
:root[data-theme="paper"] .processflow {
  --pf-card-bg: #FFFFFF;
  --pf-card-border: var(--dim-2);
}
:root[data-theme="paper"] .processflow .pf-step {
  background: #FFFFFF;
  border: 1px solid var(--dim-2);
}
:root[data-theme="paper"] .processflow .pf-arrow.pulse {
  /* dampen pulse: no glow shadow */
  animation: pf-pulse-paper 900ms ease-out;
}
@keyframes pf-pulse-paper {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}

/* ============================================================
 * Venn — fills already use --accent / --blue etc.; just brighten labels
 * ============================================================ */
:root[data-theme="paper"] .venn .v-circle {
  fill-opacity: 0.14;
  stroke-width: 1.5;
}
:root[data-theme="paper"] .venn .v-label.set .name {
  background: #FFFFFF;
}
:root[data-theme="paper"] .venn .v-label.overlap > span {
  background: rgba(255, 255, 255, 0.85);
}

/* === inlined: themes/paper/components-data.css === */
/* Stagecraft — Paper theme: data-visualization component overrides. */
/* circular @import skipped: ../phosphor/components-data.css */

/* ============================================================
 * KPI — white card, thin border, no glow
 * ============================================================ */
:root[data-theme="paper"] .kpi {
  background: #FFFFFF;
  border: 1px solid var(--dim-2);
}
:root[data-theme="paper"] .kpi.in {
  border-color: color-mix(in srgb, var(--data-color) 50%, var(--dim-2));
  box-shadow: none;
}
:root[data-theme="paper"] .kpi-num {
  text-shadow: none;
}

/* ============================================================
 * DonutChart
 * ============================================================ */
:root[data-theme="paper"] .donut-arc {
  filter: none;
}
:root[data-theme="paper"] .donut-dot {
  box-shadow: none;
}

/* ============================================================
 * LineChart
 * ============================================================ */
:root[data-theme="paper"] .lc-grid {
  stroke: var(--dim-2);
  opacity: 0.9;
}
:root[data-theme="paper"] .lc-y-label,
:root[data-theme="paper"] .lc-x-label {
  font-family: var(--display);
}
:root[data-theme="paper"] .lc-line {
  filter: none;
}
:root[data-theme="paper"] .lc-dot-leg {
  box-shadow: none;
}

/* ============================================================
 * Gauge
 * ============================================================ */
:root[data-theme="paper"] .g-fill {
  filter: none;
}
:root[data-theme="paper"] .g-tick {
  stroke: var(--dim);
  opacity: 0.6;
}
:root[data-theme="paper"] .g-num {
  text-shadow: none;
}

/* ============================================================
 * SparkLine — white card
 * ============================================================ */
:root[data-theme="paper"] .sparkline {
  background: #FFFFFF;
  border: 1px solid var(--dim-2);
}
:root[data-theme="paper"] .sl-num {
  text-shadow: none;
}
:root[data-theme="paper"] .sl-line {
  filter: none;
}

/* ============================================================
 * Heatmap — accent shades on light bg
 * ============================================================ */
:root[data-theme="paper"] .hm-cell {
  /* base track is dim-2; intensity layers --hm-base over it */
  background: color-mix(in srgb, var(--hm-base) calc(var(--hm-intensity) * 90%), #ECECE8);
  border: 1px solid color-mix(in srgb, var(--hm-base) calc(var(--hm-intensity) * 35%), var(--dim-2));
}
:root[data-theme="paper"] .hm-scale-step {
  background: color-mix(in srgb, var(--hm-base) calc(var(--hm-intensity) * 90%), #ECECE8);
  border: 1px solid color-mix(in srgb, var(--hm-base) calc(var(--hm-intensity) * 35%), var(--dim-2));
}

/* ============================================================
 * Roadmap
 * ============================================================ */
:root[data-theme="paper"] .rm-lane-track {
  background:
    repeating-linear-gradient(
      to right,
      transparent 0,
      transparent calc((100% / var(--rm-cols, 12)) - 1px),
      var(--dim-2) calc((100% / var(--rm-cols, 12)) - 1px),
      var(--dim-2) calc(100% / var(--rm-cols, 12))
    ),
    #FFFFFF;
  border: 1px solid var(--dim-2);
}
:root[data-theme="paper"] .rm-bar {
  background: color-mix(in srgb, var(--rm-bar-color) 14%, #FFFFFF);
  border: 1px solid color-mix(in srgb, var(--rm-bar-color) 65%, var(--dim-2));
  /* no glow shadow */
  box-shadow: inset 3px 0 0 var(--rm-bar-color);
}

/* ============================================================
 * SWOT — light fills, no glow letters
 * ============================================================ */
:root[data-theme="paper"] .swot {
  background: var(--dim-2);
  border: 1px solid var(--dim-2);
}
:root[data-theme="paper"] .swot-cell {
  background: #FFFFFF;
}
:root[data-theme="paper"] .swot-cell.in {
  background: color-mix(in srgb, var(--swot-color) 6%, #FFFFFF);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--swot-color) 50%, var(--dim-2));
}
:root[data-theme="paper"] .swot-letter {
  text-shadow: none;
  font-family: var(--mono); /* serif for swot letter accent */
}

/* ============================================================
 * CodeBlock — terminal look on light background.
 * CodeBlock stays monospaced because it's code.
 * ============================================================ */
:root[data-theme="paper"] .codeblock {
  background: #FFFFFF;
  border: 1px solid var(--dim-2);
}
:root[data-theme="paper"] .cb-head {
  background: #F4F4EF;
  border-bottom: 1px solid var(--dim-2);
}
:root[data-theme="paper"] .cb-line--highlight {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  box-shadow: inset 2px 0 0 var(--accent);
}

/* ============================================================
 * CodeDiff — same, monospaced
 * ============================================================ */
:root[data-theme="paper"] .codediff {
  background: #FFFFFF;
  border: 1px solid var(--dim-2);
}
:root[data-theme="paper"] .cd-head {
  background: #F4F4EF;
  border-bottom: 1px solid var(--dim-2);
}
:root[data-theme="paper"] .cd-line--add {
  background: color-mix(in srgb, var(--accent) 9%, transparent);
}
:root[data-theme="paper"] .cd-line--add .cd-text {
  color: color-mix(in srgb, var(--accent) 35%, var(--fg));
}
:root[data-theme="paper"] .cd-line--remove {
  background: color-mix(in srgb, var(--red) 8%, transparent);
}
:root[data-theme="paper"] .cd-line--remove .cd-text {
  color: color-mix(in srgb, var(--red) 35%, var(--fg));
}

/* === inlined: themes/paper/components-business.css === */
/* Stagecraft — Paper theme: business / marketing component overrides. */
/* circular @import skipped: ../phosphor/components-business.css */

/* ---------------------------------------------------------------------------
 * Pricing
 * ------------------------------------------------------------------------- */
:root[data-theme="paper"] .pricing-tier {
  background: #FFFFFF;
  border: 1px solid var(--dim-2);
}
:root[data-theme="paper"] .pricing-tier--featured {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}
:root[data-theme="paper"] .pricing-badge {
  background: var(--accent);
  color: #FFFFFF;
  box-shadow: none;
}
:root[data-theme="paper"] .pricing-tier--featured .pricing-price {
  color: var(--accent);
  text-shadow: none;
}

/* ---------------------------------------------------------------------------
 * Testimonial
 * ------------------------------------------------------------------------- */
:root[data-theme="paper"] .testimonial-photo-wrap {
  background: #FFFFFF;
  border: 1px solid var(--dim-2);
  box-shadow: 0 8px 24px -12px rgba(31, 79, 135, 0.25);
}
:root[data-theme="paper"] .testimonial-mark {
  color: var(--accent);
  text-shadow: none;
  font-family: var(--mono); /* serif quote mark */
}
:root[data-theme="paper"] .testimonial-quote {
  font-family: var(--mono); /* serif italic for editorial body */
}

/* ---------------------------------------------------------------------------
 * TeamGrid
 * ------------------------------------------------------------------------- */
:root[data-theme="paper"] .team-card {
  background: #FFFFFF;
  border: 1px solid var(--dim-2);
}
:root[data-theme="paper"] .team-photo-wrap {
  background: #F4F4EF;
  border: 1px solid var(--dim-2);
}

/* ---------------------------------------------------------------------------
 * Agenda
 * ------------------------------------------------------------------------- */
:root[data-theme="paper"] .agenda-dot {
  background: #FFFFFF;
  border: 1px solid var(--accent);
  box-shadow: none;
}

/* ---------------------------------------------------------------------------
 * Checklist
 * ------------------------------------------------------------------------- */
:root[data-theme="paper"] .checklist-item {
  background: #FFFFFF;
  border: 1px solid var(--dim-2);
}
:root[data-theme="paper"] .checklist-item.is-done {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--dim-2));
}
:root[data-theme="paper"] .checklist-item.is-done .checklist-box {
  color: var(--accent);
  text-shadow: none;
}

/* ---------------------------------------------------------------------------
 * Steps
 * ------------------------------------------------------------------------- */
:root[data-theme="paper"] .step-card {
  background: #FFFFFF;
  border: 1px solid var(--dim-2);
}
:root[data-theme="paper"] .step-numeral {
  text-shadow: none;
  font-family: var(--mono); /* serif numeral for editorial feel */
}

/* ---------------------------------------------------------------------------
 * CTA
 * ------------------------------------------------------------------------- */
:root[data-theme="paper"] .cta {
  background: #FFFFFF;
  border: 1px solid var(--dim-2);
}
:root[data-theme="paper"] .cta--accent {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
  background:
    linear-gradient(135deg, var(--accent-soft), transparent 55%),
    #FFFFFF;
}
:root[data-theme="paper"] .cta-button {
  border: 1px solid var(--accent);
  color: var(--accent);
  background: transparent;
}
:root[data-theme="paper"] .cta--accent .cta-button {
  background: var(--accent);
  color: #FFFFFF;
  box-shadow: none;
}

/* ---------------------------------------------------------------------------
 * Callout
 * ------------------------------------------------------------------------- */
:root[data-theme="paper"] .callout {
  background: #FFFFFF;
  border-left: 4px solid var(--dim-2);
}
:root[data-theme="paper"] .callout--info {
  background: linear-gradient(90deg, rgba(31, 79, 135, 0.06), transparent 40%), #FFFFFF;
  border-left-color: var(--blue);
}
:root[data-theme="paper"] .callout--tip {
  background: linear-gradient(90deg, var(--accent-soft), transparent 45%), #FFFFFF;
  border-left-color: var(--accent);
}
:root[data-theme="paper"] .callout--warning {
  background: linear-gradient(90deg, rgba(181, 127, 44, 0.08), transparent 40%), #FFFFFF;
  border-left-color: var(--amber);
}
:root[data-theme="paper"] .callout--danger {
  background: linear-gradient(90deg, rgba(155, 44, 44, 0.07), transparent 40%), #FFFFFF;
  border-left-color: var(--red);
}
:root[data-theme="paper"] .callout--success {
  background: linear-gradient(90deg, var(--accent-soft), transparent 50%), #FFFFFF;
  border-left-color: var(--accent);
}
:root[data-theme="paper"] .callout--success .callout-icon {
  text-shadow: none;
}

/* ---------------------------------------------------------------------------
 * Tip
 * ------------------------------------------------------------------------- */
:root[data-theme="paper"] .tip {
  background: #FFFFFF;
  border: 1px solid var(--dim-2);
}
:root[data-theme="paper"] .tip--info    { border-color: rgba(31, 79, 135, 0.4); }
:root[data-theme="paper"] .tip--tip     { border-color: rgba(31, 79, 135, 0.4); }
:root[data-theme="paper"] .tip--warning { border-color: rgba(181, 127, 44, 0.45); }
:root[data-theme="paper"] .tip--danger  { border-color: rgba(155, 44, 44, 0.45); }
:root[data-theme="paper"] .tip--success {
  border-color: var(--accent);
  background: linear-gradient(135deg, var(--accent-soft), transparent 60%), #FFFFFF;
}
:root[data-theme="paper"] .tip--success .tip-icon {
  text-shadow: none;
}

/* ---------------------------------------------------------------------------
 * BeforeAfter
 * ------------------------------------------------------------------------- */
:root[data-theme="paper"] .ba-col {
  background: #FFFFFF;
  border: 1px solid var(--dim-2);
}
:root[data-theme="paper"] .ba-col.ba-after {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--dim-2));
}
:root[data-theme="paper"] .ba-arrow {
  text-shadow: none;
}

:root[data-theme="paper"] .before-after--image {
  background: #FFFFFF;
  border: 1px solid var(--dim-2);
}
:root[data-theme="paper"] .ba-tag {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--dim-2);
  color: var(--fg);
}
:root[data-theme="paper"] .ba-tag--accent {
  color: var(--accent);
  border-color: var(--accent);
  box-shadow: none;
}
:root[data-theme="paper"] .before-after--image .ba-divider {
  background: var(--accent);
  box-shadow: none;
}

/* === inlined: themes/paper/components-content.css === */
/* Stagecraft — Paper theme: content/typography component overrides. */
/* circular @import skipped: ../phosphor/components-content.css */

/* ---------------------------------------------------------------------------
 * Statement — no glow on emphasized words
 * ------------------------------------------------------------------------- */
:root[data-theme="paper"] .statement .st-em {
  color: var(--accent);
  text-shadow: none;
}
:root[data-theme="paper"] .statement .st-em--amber { color: var(--amber); text-shadow: none; }
:root[data-theme="paper"] .statement .st-em--blue  { color: var(--blue);  text-shadow: none; }

/* ---------------------------------------------------------------------------
 * QandA
 * ------------------------------------------------------------------------- */
:root[data-theme="paper"] .qa-q {
  color: var(--amber);
  font-family: var(--mono); /* serif italic question */
}
:root[data-theme="paper"] .qa-a {
  color: var(--accent);
  text-shadow: none;
}

/* ---------------------------------------------------------------------------
 * Manifesto
 * ------------------------------------------------------------------------- */
:root[data-theme="paper"] .mf-num {
  color: var(--accent);
  text-shadow: none;
  font-family: var(--mono); /* serif numeral */
}
:root[data-theme="paper"] .mf-item {
  border-bottom: 1px solid var(--dim-2);
}

/* ---------------------------------------------------------------------------
 * Punchline
 * ------------------------------------------------------------------------- */
:root[data-theme="paper"] .pl-payoff {
  color: var(--accent);
  text-shadow: none;
}

/* ---------------------------------------------------------------------------
 * Definition — feels academic already; just polish
 * ------------------------------------------------------------------------- */
:root[data-theme="paper"] .df-term {
  font-family: var(--mono); /* serif headword */
}
:root[data-theme="paper"] .df-pos {
  font-family: var(--mono); /* italic serif pos */
}
:root[data-theme="paper"] .df-def::before {
  color: var(--accent);
}
:root[data-theme="paper"] .df-mark {
  background: var(--accent-soft);
  color: var(--accent);
}

/* ---------------------------------------------------------------------------
 * ImageGrid
 * ------------------------------------------------------------------------- */
:root[data-theme="paper"] .ig-frame {
  background: #FFFFFF;
  border: 1px solid var(--dim-2);
}
:root[data-theme="paper"] .ig-frame::after {
  /* drop the dark inner cast; keep just a hint of paper drop shadow */
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.05),
    0 12px 26px -16px rgba(31, 79, 135, 0.2);
}
:root[data-theme="paper"] .ig-img {
  filter: saturate(0.85) contrast(1.02);
}

/* ---------------------------------------------------------------------------
 * Spotlight — drop the heavy shadow stack
 * ------------------------------------------------------------------------- */
:root[data-theme="paper"] .sp-focus {
  background: #FFFFFF;
  border: 1px solid var(--accent);
  box-shadow:
    0 0 0 1px var(--accent-soft),
    0 16px 40px -22px rgba(31, 79, 135, 0.25);
}
:root[data-theme="paper"] .sp-icon {
  color: var(--accent);
  text-shadow: none;
}
:root[data-theme="paper"] .sp-heading {
  color: var(--accent);
}

/* ---------------------------------------------------------------------------
 * Marquee — calmer accent row, no green glow
 * ------------------------------------------------------------------------- */
:root[data-theme="paper"] .marquee {
  mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,1) 6%, rgba(0,0,0,1) 94%, transparent 100%);
}
:root[data-theme="paper"] .mq-track--b .mq-item {
  color: var(--accent);
  text-shadow: none;
  font-family: var(--mono); /* serif italic emphasis row */
}


/* --- Generic paper softening of phosphor-base components --- */

/* Pre-label dot: no pulse animation, calm static accent block */
:root[data-theme="paper"] .pre-label .dot { animation: none; }

/* Storyboard dots: no glow */
:root[data-theme="paper"] .ui-dots .dot.active { box-shadow: none; }

/* Caret: no blink, no glow */
:root[data-theme="paper"] .caret { animation: none; background: var(--accent); box-shadow: none; }

/* Storyboard overview header — light backdrop */
:root[data-theme="paper"] .overview-header {
  background: rgba(250, 250, 247, 0.92);
  border-bottom: 1px solid var(--dim-2);
}
:root[data-theme="paper"] .tile {
  background: #FFFFFF;
  border: 1px solid var(--dim-2);
}
:root[data-theme="paper"] .tile.current {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}
:root[data-theme="paper"] .tile-num {
  background: rgba(255, 255, 255, 0.85);
  font-family: var(--display);
}
:root[data-theme="paper"] .tile-label {
  background: linear-gradient(to top, rgba(255, 255, 255, 0.95) 40%, rgba(255, 255, 255, 0));
  color: var(--fg);
  font-family: var(--display);
}

/* Edit-mode ring — subtle navy */
:root[data-theme="paper"] body.edit-mode #stage::after {
  box-shadow: inset 0 0 30px var(--accent-soft);
}

/* UI chrome family — Inter, no monospace */
:root[data-theme="paper"] .ui { font-family: var(--display); }

/* ShiftArrow — strikethrough darker since light bg */
:root[data-theme="paper"] .shift-from { text-decoration-color: var(--dim); }

/* Compare divider gradient: works on light bg already */
:root[data-theme="paper"] .compare-divider {
  background: linear-gradient(to bottom, transparent, var(--dim-2) 20%, var(--dim-2) 80%, transparent);
}

/* === themes/paper/transitions.css === */
/* === inlined: themes/phosphor/transitions.css === */
/* Stagecraft — Phosphor theme: transitions library
 *
 * The animations apply to anything carrying the tx-<name>-enter / tx-<name>-exit
 * class, not just .slide elements — so previews in the edit-mode picker share
 * the exact same motion as the real thing.
 */

/* fade */
.tx-fade-enter { animation: tx-fade-enter 700ms cubic-bezier(0.16, 1, 0.3, 1) both; }
.tx-fade-exit  { animation: tx-fade-exit 400ms ease-in both; }
@keyframes tx-fade-enter {
  from { opacity: 0; transform: scale(0.985); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes tx-fade-exit {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(1.01); }
}

/* slide */
.tx-slide-enter { animation: tx-slide-enter 700ms cubic-bezier(0.16, 1, 0.3, 1) both; }
.tx-slide-exit  { animation: tx-slide-exit 500ms ease-in both; }
@keyframes tx-slide-enter {
  from { opacity: 0; transform: translateX(60px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes tx-slide-exit {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(-60px); }
}

/* dissolve */
.tx-dissolve-enter { animation: tx-dissolve-enter 1200ms ease-out both; }
.tx-dissolve-exit  { animation: tx-dissolve-exit 1000ms ease-in both; }
@keyframes tx-dissolve-enter {
  from { opacity: 0; filter: blur(8px); }
  to   { opacity: 1; filter: blur(0); }
}
@keyframes tx-dissolve-exit {
  from { opacity: 1; filter: blur(0); }
  to   { opacity: 0; filter: blur(8px); }
}

/* glitch — phosphor flavor */
.tx-glitch-enter { animation: tx-glitch-enter 600ms steps(8, end) both; }
@keyframes tx-glitch-enter {
  0%   { opacity: 0;   transform: translateX(0);  filter: hue-rotate(0deg); }
  20%  { opacity: 0.6; transform: translateX(-3px); filter: hue-rotate(30deg) contrast(1.3); }
  40%  { opacity: 0.4; transform: translateX(4px);  filter: hue-rotate(-20deg); }
  60%  { opacity: 0.8; transform: translateX(-1px); }
  100% { opacity: 1;   transform: translateX(0);  filter: none; }
}
.tx-glitch-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(0, 255, 156, 0.04) 0,
      rgba(0, 255, 156, 0.04) 1px,
      transparent 1px,
      transparent 4px
    );
  mix-blend-mode: screen;
  animation: tx-glitch-overlay 600ms steps(6, end) both;
}
@keyframes tx-glitch-overlay {
  0%   { opacity: 0.9; }
  50%  { opacity: 0.5; transform: translateX(3px); }
  100% { opacity: 0;   transform: translateX(0); }
}

/* wipe — masked reveal left-to-right */
.tx-wipe-enter {
  animation: tx-wipe-enter 800ms cubic-bezier(0.16, 1, 0.3, 1) both;
  clip-path: inset(0 100% 0 0);
}
@keyframes tx-wipe-enter {
  from { opacity: 1; clip-path: inset(0 100% 0 0); }
  to   { opacity: 1; clip-path: inset(0 0%   0 0); }
}
.tx-wipe-exit { animation: tx-wipe-exit 500ms ease-in both; }
@keyframes tx-wipe-exit {
  from { opacity: 1; clip-path: inset(0 0%   0 0); }
  to   { opacity: 1; clip-path: inset(0 0   0 100%); }
}

/* cut — picker-preview only. The real cut in the deck is instant (no class
 * is added on enter, see src/transitions.js). This animation is just so the
 * picker preview can demonstrate what cut means: 0% opacity for the first
 * half of the hover, then a hard snap to 100% — no easing, no fade. */
.tx-cut-enter {
  animation: tx-cut-enter 600ms steps(2, jump-none) both;
}
@keyframes tx-cut-enter {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ============================================================================
 * Phase 2 transitions
 * ============================================================================ */

/* zoom-in: scales up from small while fading in */
.tx-zoom-in-enter { animation: tx-zoom-in-enter 700ms cubic-bezier(0.16, 1, 0.3, 1) both; }
.tx-zoom-in-exit  { animation: tx-zoom-in-exit  400ms ease-in both; }
@keyframes tx-zoom-in-enter {
  from { opacity: 0; transform: scale(0.6); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes tx-zoom-in-exit {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(1.4); }
}

/* zoom-out: opposite — starts large and shrinks in */
.tx-zoom-out-enter { animation: tx-zoom-out-enter 700ms cubic-bezier(0.16, 1, 0.3, 1) both; }
.tx-zoom-out-exit  { animation: tx-zoom-out-exit  400ms ease-in both; }
@keyframes tx-zoom-out-enter {
  from { opacity: 0; transform: scale(1.4); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes tx-zoom-out-exit {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(0.6); }
}

/* flip: 3D Y-axis rotation */
.tx-flip-enter {
  animation: tx-flip-enter 900ms cubic-bezier(0.45, 0, 0.55, 1) both;
  transform-style: preserve-3d;
  perspective: 1200px;
}
.tx-flip-exit { animation: tx-flip-exit 500ms ease-in both; }
@keyframes tx-flip-enter {
  from { opacity: 0; transform: perspective(1200px) rotateY(-90deg); }
  60%  { opacity: 1; }
  to   { opacity: 1; transform: perspective(1200px) rotateY(0deg); }
}
@keyframes tx-flip-exit {
  from { opacity: 1; transform: perspective(1200px) rotateY(0deg); }
  to   { opacity: 0; transform: perspective(1200px) rotateY(90deg); }
}

/* iris: circular reveal from center */
.tx-iris-enter {
  animation: tx-iris-enter 900ms cubic-bezier(0.4, 0, 0.2, 1) both;
}
.tx-iris-exit { animation: tx-iris-exit 500ms ease-in both; }
@keyframes tx-iris-enter {
  from { opacity: 1; clip-path: circle(0% at 50% 50%); }
  to   { opacity: 1; clip-path: circle(80% at 50% 50%); }
}
@keyframes tx-iris-exit {
  from { opacity: 1; clip-path: circle(80% at 50% 50%); }
  to   { opacity: 1; clip-path: circle(0% at 50% 50%); }
}

/* shutter: horizontal bands close → open */
.tx-shutter-enter {
  animation: tx-shutter-enter 800ms cubic-bezier(0.4, 0, 0.2, 1) both;
}
@keyframes tx-shutter-enter {
  0%   { opacity: 0; clip-path: polygon(0 0, 100% 0, 100% 8%, 0 8%, 0 17%, 100% 17%, 100% 25%, 0 25%, 0 34%, 100% 34%, 100% 42%, 0 42%, 0 50%, 100% 50%, 100% 58%, 0 58%, 0 66%, 100% 66%, 100% 75%, 0 75%, 0 83%, 100% 83%, 100% 92%, 0 92%); }
  100% { opacity: 1; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
}
.tx-shutter-exit { animation: tx-fade-exit 500ms ease-in both; }

/* push: pushes in horizontally, like slide but stronger */
.tx-push-enter { animation: tx-push-enter 800ms cubic-bezier(0.16, 1, 0.3, 1) both; }
.tx-push-exit  { animation: tx-push-exit  800ms cubic-bezier(0.7, 0, 0.84, 0) both; }
@keyframes tx-push-enter {
  from { opacity: 1; transform: translateX(100%); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes tx-push-exit {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 1; transform: translateX(-100%); }
}

/* typewriter: wide → narrow reveal, like a CRT power-on */
.tx-typewriter-enter {
  animation: tx-typewriter-enter 900ms cubic-bezier(0.4, 0, 0.2, 1) both;
  transform-origin: center;
}
@keyframes tx-typewriter-enter {
  0%   { opacity: 0; transform: scaleX(0); }
  40%  { opacity: 1; transform: scaleX(1); transform-origin: center; }
  100% { opacity: 1; transform: scaleX(1); }
}
.tx-typewriter-exit {
  animation: tx-typewriter-exit 300ms ease-in both;
}
@keyframes tx-typewriter-exit {
  from { opacity: 1; transform: scaleY(1); }
  to   { opacity: 0; transform: scaleY(0); }
}

/* shatter: many tiny grid-shifts then resolve */
.tx-shatter-enter {
  animation: tx-shatter-enter 900ms steps(10, jump-end) both;
  filter: contrast(1) blur(0);
}
@keyframes tx-shatter-enter {
  0%   { opacity: 0; filter: blur(20px) saturate(0.2); transform: translate(-4px, 2px) skew(2deg); }
  20%  { opacity: 0.4; filter: blur(8px) saturate(0.4); transform: translate(3px, -1px) skew(-1deg); }
  40%  { opacity: 0.7; filter: blur(3px); transform: translate(-1px, 1px); }
  60%  { opacity: 0.9; filter: blur(1px); transform: translate(1px, 0); }
  100% { opacity: 1; filter: none; transform: none; }
}
.tx-shatter-exit { animation: tx-fade-exit 500ms ease-in both; }


/* Paper-specific: subtler glitch (no green scanlines) */
:root[data-theme="paper"] .tx-glitch-overlay { display: none; }
:root[data-theme="paper"] .tx-glitch-enter {
  animation: tx-paper-glitch 400ms steps(4, end) both;
}
@keyframes tx-paper-glitch {
  0% { opacity: 0; }
  100% { opacity: 1; }
}