stagecraft 0.1.0

package/dist/stagecraft.bundle.css

@@ -0,0 +1,4443 @@
+/* Stagecraft theme bundle: phosphor — generated by scripts/bundle.js. */
+/* === themes/phosphor/tokens.css === */
+/* Stagecraft — Phosphor theme tokens */
+:root[data-theme="phosphor"] {
+  --bg: #0A0A0A;
+  --bg-elevated: #121212;
+  --fg: #E6E6E6;
+  --dim: #666666;
+  --dim-2: #2a2a2a;
+  --accent: #00FF9C;                              /* phosphor green */
+  --accent-soft: rgba(0, 255, 156, 0.12);
+  --accent-glow: rgba(0, 255, 156, 0.45);
+  --blue: #189EFF;                                /* alt accent */
+  --amber: #FFB454;
+  --red: #FF5C5C;
+  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  --display: var(--mono);
+  --body: var(--mono);
+}
+
+/* === 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;
+}
+
+/* === 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;
+}
+
+/* === 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; }
+