/* §§ RESET_AND_TOKENS ================================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  /* §§ COLORS */
  --bg: #0a0f1c;
  --bg-secondary: #111827;
  --bg-card: #151d2e;
  --bg-card-hover: #1a2438;
  --text: #f0f4f8;
  --text-secondary: #b0bcc8;
  --text-muted: #7b8da0;
  --accent: #22d3a8;
  --accent-mint: #6ee7b7;
  --accent-indigo: #6366f1;
  --accent-glow: rgba(34, 211, 168, 0.2);
  --accent-soft: rgba(34, 211, 168, 0.08);
  --indigo-glow: rgba(99, 102, 241, 0.15);
  --border: rgba(255, 255, 255, 0.08);
  --border-hover: rgba(255, 255, 255, 0.15);

  /* §§ BLOCK_COLORS */
  --block-system: #22d3a8;
  --block-claude-md: #f59e0b;
  --block-agent: #6366f1;
  --block-tools: #3fb950;
  --block-history: #7b8da0;
  --block-skill: #a78bfa;
  --block-user: #60a5fa;
  --block-output: #22d3a8;

  /* §§ TYPOGRAPHY */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'DM Sans', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* §§ SIZING */
  --nav-height: 88px;
  --content-max: 1280px;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);

  /* §§ GRADIENT */
  --gradient-brand: linear-gradient(135deg, #22d3a8 0%, #6ee7b7 50%, #6366f1 100%);
  --gradient-bar: linear-gradient(90deg, #22d3a8, #6ee7b7, #6366f1);
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-height) + 3px + 1rem);
}

body {
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 1.2vw, 1.1rem);
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

/* §§ GRADIENT_BAR ===================================================== */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--gradient-bar);
  z-index: 200;
}

/* §§ ATMOSPHERIC_BG =================================================== */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 15% 20%, rgba(34, 211, 168, 0.04) 0%, transparent 70%),
    radial-gradient(ellipse 60% 50% at 85% 80%, rgba(99, 102, 241, 0.03) 0%, transparent 70%);
  pointer-events: none;
  z-index: -1;
}

/* §§ SKIP_LINK ======================================================== */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--accent);
  color: var(--bg);
  padding: 0.5rem 1rem;
  z-index: 2000;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  text-decoration: none;
  border-radius: 0 0 6px 0;
  transition: top 0.2s;
}
.skip-link:focus {
  top: 3px;
}

/* §§ NAVIGATION ======================================================= */
nav {
  position: sticky;
  top: 3px;
  z-index: 1000;
  isolation: isolate;
  height: var(--nav-height);
  padding: 0 clamp(1.5rem, 5vw, 3rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(10, 15, 28, 0.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

/* §§ NAV_BRAND — Open Augments wordmark recipe (course page / OA site §§ NAV).
   DEPLOY: mask asset path becomes assets/... relative to the deployed page. */
.logo-icon {
  display: inline-block;
  width: clamp(48px, 8vw, 80px); height: clamp(48px, 8vw, 80px);
  background-color: var(--accent);
  -webkit-mask-image: url('/assets/Open Augments Logo PNG Teal.png');
  mask-image: url('/assets/Open Augments Logo PNG Teal.png');
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
}
.nav-brand {
  font-family: var(--font-display); font-weight: 400; font-size: 1.1rem;
  color: var(--accent); letter-spacing: -0.03em;
  display: inline-flex; align-items: center; gap: 0.75rem;
  text-decoration: none;
}
.nav-brand:hover { opacity: 1; }
.nav-brand .logo-icon { width: clamp(32px, 4vw, 42px); height: clamp(32px, 4vw, 42px); }

/* §§ NAV_LINKS ======================================================== */
.nav-links {
  display: flex;
  gap: clamp(1rem, 3vw, 2.5rem);
  list-style: none;
  align-items: center;
}
.nav-links a {
  text-decoration: none;
  position: relative;
  font-family: var(--font-display);
  font-size: clamp(0.85rem, 1.1vw, 0.95rem);
  font-weight: 500;
  color: var(--text-muted);
  transition: color 0.2s;
  padding: 0.25rem 0;
  padding-bottom: 4px;
  white-space: nowrap;
}
.nav-links a:hover { color: var(--text); opacity: 1; }
.nav-links a.active { color: var(--accent); }
.nav-links a.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--accent);
  border-radius: 1px;
}

/* §§ NAV_DROPDOWN ===================================================== */
.nav-dropdown { position: relative; }
.nav-dropdown > a,
.nav-dropdown > .nav-dropdown-toggle { padding-right: 1rem; }

/* §§ NAV_DROPDOWN_TOGGLE */
.nav-dropdown-toggle {
  background: none;
  border: none;
  cursor: default;
  font-family: var(--font-display);
  font-size: clamp(0.85rem, 1.1vw, 0.95rem);
  font-weight: 500;
  color: var(--text-muted);
  transition: color 0.2s;
  position: relative;
  padding: 0.25rem 0;
  padding-bottom: 4px;
  white-space: nowrap;
}
.nav-dropdown-toggle:hover { color: var(--text); opacity: 1; }
.nav-dropdown-toggle.active { color: var(--accent); }
.nav-dropdown-toggle.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--accent);
  border-radius: 1px;
}

.nav-dropdown > a::before,
.nav-dropdown > .nav-dropdown-toggle::before {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-75%) rotate(45deg);
  width: 5px;
  height: 5px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  opacity: 0.6;
  pointer-events: none;
}
.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  min-width: 200px;
  background: rgba(17, 24, 39, 0.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border-hover);
  border-radius: 10px;
  padding: 0.5rem;
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s, transform 0.2s var(--ease-out-expo);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  z-index: 200;
}
.nav-dropdown-menu::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 0;
  right: 0;
  height: 8px;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.nav-dropdown-menu li { list-style: none; }
.nav-dropdown-menu a {
  text-decoration: none;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0.85rem;
  border-radius: 6px;
  font-size: clamp(0.78rem, 1vw, 0.88rem);
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.nav-dropdown-menu a:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
}
.nav-dropdown-menu a.active {
  color: var(--accent);
  background: rgba(34, 211, 168, 0.08);
}
.nav-dropdown-menu a::after { display: none; }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text);
  margin: 5px 0;
  transition: transform 0.3s, opacity 0.3s;
}

/* §§ HERO — mirrors the course page hero (academy.html §§ HERO + §§ HERO_LOCKUP):
   every element recipe (lockup sizes, h1 --title-size, subtitle) is VERBATIM
   from academy.html so the two pages read as one brand; only the section's
   vertical padding is compact (no 50vh min-height -- the app must stay above
   the fold). */
.gym-hero {
  position: relative;
  text-align: center;
  /* top = academy hero's exact 6rem section padding (measured 96px, was 20px
     short); bottom stays compact so the rail sits near the fold */
  padding: 6rem clamp(1.5rem, 5vw, 4rem) clamp(2rem, 4vw, 3rem);
}
.gym-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(34, 211, 168, 0.08) 0%, transparent 60%),
    radial-gradient(ellipse at 30% 70%, rgba(99, 102, 241, 0.05) 0%, transparent 50%);
  pointer-events: none;
}
.gym-hero-inner { position: relative; max-width: var(--content-max); margin: 0 auto; }
/* h1 = course-page hero h1, verbatim (--title-size, Space Grotesk 400, -0.05em) */
.gym-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 400;
  letter-spacing: -0.05em;
  line-height: 1.15;
  margin-bottom: 1.5rem;
  text-wrap: balance; /* progressive enhancement: no orphaned last word */
}
.gradient-text {
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.gym-hero .subtitle {
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  color: var(--text-secondary);
  max-width: 640px;
  margin: 0 auto;
  line-height: 1.7;
}
.gym-hero .subtitle a { color: var(--accent); text-decoration: none; }
.gym-hero .subtitle a:hover { text-decoration: underline; }
.hero-lockup { display: inline-flex; align-items: center; gap: 1.15rem; margin-bottom: 2rem; }
.hero-lockup .logo-icon { width: clamp(54px, 6vw, 68px); height: clamp(54px, 6vw, 68px); flex: none; }
.lockup-rule {
  align-self: stretch; width: 1px; flex: none;
  background: linear-gradient(180deg, var(--accent), var(--accent-indigo));
  opacity: 0.65;
}
.lockup-text {
  display: flex; flex-direction: column; align-items: flex-start;
  text-align: left; gap: 0.3rem; padding: 0.2rem 0;
}
/* official wordmark registers, verbatim from academy.html: parent = nav-brand
   recipe (Space Grotesk 400, -0.03em, teal); product = hero-h1 recipe
   (Space Grotesk 400, -0.05em) */
.lockup-parent {
  font-family: var(--font-display); font-size: clamp(1rem, 1.4vw, 1.2rem);
  font-weight: 400; letter-spacing: -0.03em; line-height: 1; color: var(--accent);
}
.lockup-product {
  font-family: var(--font-display); font-size: clamp(1.75rem, 2.8vw, 2.3rem);
  font-weight: 400; letter-spacing: -0.05em; line-height: 1; color: var(--text);
}
/* §§ PIPELINE_PANEL =================================================== */
.pipeline-panel {
  min-width: 0;
}

/* §§ PANEL_SHARED ===================================================== */
.panel-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
}
.panel-header h2 {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.panel-header svg {
  color: var(--text-muted);
  flex-shrink: 0;
}

/* §§ CONTEXT_STACK ==================================================== */
.context-stack {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* §§ BLOCK_CARD ======================================================= */
.block-card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--block-color, var(--text-muted));
  border-radius: 0;
  overflow: hidden;
  transition: border-color 0.3s var(--ease-out-expo),
              box-shadow 0.3s var(--ease-out-expo);
}
.block-card:first-child {
  border-radius: 10px 10px 0 0;
}
.block-card:last-child {
  border-radius: 0 0 10px 10px;
}
.block-card:only-child {
  border-radius: 10px;
}
.block-card + .block-card {
  border-top: none;
}

.block-card[data-swappable="true"] {
  cursor: pointer;
}
.block-card[data-swappable="true"]:hover {
  border-color: var(--block-color, var(--accent));
  box-shadow: inset 0 0 20px rgba(var(--block-color-rgb, 34, 211, 168), 0.06);
}
.block-card.active {
  border-color: var(--block-color, var(--accent));
  box-shadow:
    inset 0 0 30px rgba(var(--block-color-rgb, 34, 211, 168), 0.08),
    0 0 20px rgba(var(--block-color-rgb, 34, 211, 168), 0.06);
}

.block-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  user-select: none;
}
.block-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: rgba(var(--block-color-rgb, 34, 211, 168), 0.1);
  color: var(--block-color, var(--accent));
  flex-shrink: 0;
}
.block-label {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--block-color, var(--text));
  letter-spacing: 0.02em;
  flex: 1;
}
.block-swap-indicator {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-muted);
  opacity: 0.7;
  transition: opacity 0.2s;
}
.block-card[data-swappable="true"]:hover .block-swap-indicator {
  opacity: 1;
  color: var(--block-color, var(--accent));
}
.block-swap-indicator .chevron {
  transition: transform 0.3s var(--ease-out-expo);
}
.block-card.active .block-swap-indicator .chevron {
  transform: rotate(180deg);
}

/* §§ BLOCK_CONTENT ==================================================== */
.block-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s var(--ease-out-expo);
}
.block-content.expanded {
  grid-template-rows: 1fr;
}
.block-content-inner {
  overflow: hidden;
}
.block-text {
  padding: 0 1rem 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--text-secondary);
  white-space: pre-wrap;
  word-break: break-word;
}
.block-text.empty-prompt {
  color: var(--text-muted);
  font-style: italic;
}

/* §§ SWAP_OPTIONS ===================================================== */
.swap-panel {
  display: block;
}
.swap-panel-inner {
}
.swap-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0 1rem 1rem;
}
.swap-btn {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  padding: 0.4rem 0.75rem;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s var(--ease-out-expo);
  white-space: nowrap;
}
.swap-btn:hover {
  background: rgba(var(--block-color-rgb, 34, 211, 168), 0.08);
  border-color: rgba(var(--block-color-rgb, 34, 211, 168), 0.3);
  color: var(--block-color, var(--accent));
}
.swap-btn.selected {
  background: rgba(var(--block-color-rgb, 34, 211, 168), 0.12);
  border-color: var(--block-color, var(--accent));
  color: var(--block-color, var(--accent));
  font-weight: 500;
}
.swap-btn.selected::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--block-color, var(--accent));
  margin-right: 0.4rem;
  vertical-align: middle;
}

/* §§ CONNECTOR_LINE =================================================== */
.stack-connector {
  display: flex;
  justify-content: center;
  padding: 0.75rem 0;
}
.stack-connector svg {
  color: var(--text-muted);
  opacity: 0.4;
}

/* §§ TOKEN_METER — context-window meter (Phase 8 remount, The Long Session). */
.token-meter { border: 1px solid var(--border); border-radius: 8px; padding: 0.6rem 0.8rem; margin-bottom: 0.9rem; background: var(--bg-card); }
.token-meter-label { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.78rem; color: var(--text-secondary); margin-bottom: 0.45rem; }
.token-meter-label .token-count { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-muted); }
.token-meter-bar { height: 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.token-meter-fill { height: 100%; border-radius: 999px; background: var(--accent); transition: width 0.6s var(--ease-out-expo), background 0.3s; }
.token-meter-fill.is-high { background: #f59e0b; }

/* §§ OUTPUT_PANEL ===================================================== */

/* §§ LEVEL_INFO ======================================================= */
.level-info {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.25rem;
  margin-bottom: 1.25rem;
}
.level-info .level-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 0.25rem 0.65rem;
  border-radius: 100px;
  margin-bottom: 0.75rem;
  letter-spacing: 0.02em;
}
.level-info h3 {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.5rem;
}
.level-info p {
  font-size: 0.92rem;
  color: var(--text-secondary);
  line-height: 1.6;
}
.level-info .try-it {
  margin-top: 0.75rem;
  padding: 0.75rem 1rem;
  background: rgba(34, 211, 168, 0.04);
  border-left: 2px solid var(--accent);
  border-radius: 0 6px 6px 0;
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.5;
}
.level-info .what-happened {
  margin-top: 0.75rem;
  padding: 0.75rem 1rem;
  background: rgba(99, 102, 241, 0.04);
  border-left: 2px solid var(--accent-indigo);
  border-radius: 0 6px 6px 0;
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.5;
  display: none;
}
.level-info .what-happened.visible {
  display: block;
  animation: revealFadeIn 0.5s var(--ease-out-expo);
}
@keyframes revealFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* §§ REVEAL_TEASER — signals hidden content waiting to be unlocked ===== */
.reveal-teaser {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding: 0.7rem 1rem;
  background: rgba(167, 139, 250, 0.06);
  border: 1px dashed rgba(167, 139, 250, 0.35);
  border-radius: 6px;
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: #a78bfa;
  line-height: 1.45;
  animation: revealFadeIn 0.4s var(--ease-out-expo);
}
.reveal-teaser svg {
  color: #a78bfa;
  flex-shrink: 0;
  animation: nudge 2s var(--ease-out-expo) infinite;
}
@keyframes nudge {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(2px, -2px); }
}

/* §§ MODEL_TABS ======================================================= */
.model-tabs {
  display: flex;
  gap: 0;
  background: var(--bg-secondary);
  border-radius: 8px;
  padding: 3px;
  margin-bottom: 1rem;
}
.model-tab {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  padding: 0.5rem 0.75rem;
  background: transparent;
  color: var(--text-muted);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s var(--ease-out-expo);
  text-align: center;
  white-space: nowrap;
}
.model-tab:hover {
  color: var(--text-secondary);
}
.model-tab.active {
  background: var(--bg-card);
  color: var(--text);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}
.model-tab .model-badge {
  display: block;
  font-size: 0.65rem;
  color: var(--text-muted);
  margin-top: 0.15rem;
  font-weight: 400;
}
.model-tab.active .model-badge {
  color: var(--text-muted);
}

/* §§ OUTPUT_CARD ====================================================== */
.output-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.output-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
}
.output-model-name {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-secondary);
  font-weight: 500;
}
.output-meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-muted);
}
.output-body {
  padding: 1.25rem;
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--text-secondary);
  max-height: 60vh;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
}
.output-body::-webkit-scrollbar {
  width: 6px;
}
.output-body::-webkit-scrollbar-track {
  background: transparent;
}
.output-body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

/* §§ OUTPUT_MARKDOWN =================================================== */
.output-body h1,
.output-body h2,
.output-body h3 {
  font-family: var(--font-display);
  color: var(--text);
  margin: 1.25rem 0 0.5rem;
  line-height: 1.3;
}
.output-body h1 { font-size: 1.25rem; }
.output-body h2 { font-size: 1.1rem; }
.output-body h3 { font-size: 1rem; }
.output-body h1:first-child,
.output-body h2:first-child,
.output-body h3:first-child {
  margin-top: 0;
}
.output-body p {
  margin-bottom: 0.75rem;
}
.output-body p:last-child {
  margin-bottom: 0;
}
.output-body strong {
  color: var(--text);
  font-weight: 600;
}
.output-body em {
  font-style: italic;
  color: var(--text);
}
.output-body ul, .output-body ol {
  padding-left: 1.5rem;
  margin-bottom: 0.75rem;
}
.output-body li {
  margin-bottom: 0.3rem;
}
.output-body code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  background: rgba(255, 255, 255, 0.06);
  padding: 0.15em 0.4em;
  border-radius: 4px;
}
.output-body pre {
  background: rgba(0, 0, 0, 0.3);
  padding: 1rem;
  border-radius: 6px;
  overflow-x: auto;
  margin-bottom: 0.75rem;
}
.output-body pre code {
  background: none;
  padding: 0;
}
.output-body blockquote {
  border-left: 2px solid var(--accent);
  padding-left: 1rem;
  margin: 0.75rem 0;
  color: var(--text-muted);
  font-style: italic;
}

/* §§ LEVEL_NAV ======================================================== */
.level-nav {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 1.5rem clamp(1rem, 3vw, 2.5rem) 3rem;
  /* No position: relative — let the main site nav's z-index:1000 paint on top when scrolling */
  clear: both;
}
.level-nav--top {
  padding-top: 2rem;
  padding-bottom: 1.5rem;
}
.level-nav--bottom {
  padding-top: 2rem;
  padding-bottom: 3rem;
}
.level-nav-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0.85rem 1.25rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  /* Center the navigator itself within the page width */
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
}
/* Arrows align with the dot row, not the chunk label */
.level-arrow {
  align-self: center;
}
.level-dots {
  display: flex;
  gap: 0;
  align-items: center;
  justify-content: center;
}
.level-chunk {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0 0.6rem;
  border-right: 1px solid var(--border);
}
.level-chunk:last-child {
  border-right: none;
}
.level-chunk-label {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.6;
  transition: color 0.2s, opacity 0.2s;
  white-space: nowrap;
  /* Align label baseline with the dots row */
  align-self: center;
}
.level-chunk.active .level-chunk-label {
  color: var(--accent);
  opacity: 1;
}
.level-dot {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s var(--ease-out-expo);
}
.level-dot:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
}
.level-dot.active {
  background: var(--accent-soft);
  border-color: rgba(34, 211, 168, 0.3);
  color: var(--accent);
  font-weight: 600;
}
.level-dot.available {
  color: var(--text-secondary);
}
.level-dot.locked {
  opacity: 0.35;
  cursor: default;
}
.level-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s;
}
.level-arrow:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
}
.level-arrow:disabled {
  opacity: 0.3;
  cursor: default;
}

/* §§ FOOTER — site-wide minimal footer, verbatim from workshops.html /
   academy.html §§ FOOTER (copyright line only). */
footer {
  padding: 2rem clamp(1.5rem, 5vw, 4rem);
  border-top: 1px solid var(--border);
  text-align: center;
  background: transparent;
}
.footer-copy {
  font-size: clamp(0.875rem, 1.1vw, 1rem);
  color: var(--text-secondary);
  opacity: 0.6;
}

/* §§ ANIMATIONS ======================================================= */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes slideUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--block-color-rgb, 34, 211, 168), 0); }
  50% { box-shadow: 0 0 16px 2px rgba(var(--block-color-rgb, 34, 211, 168), 0.15); }
}

.block-card.swapping {
  animation: pulse-glow 0.6s var(--ease-out-expo);
}

.output-body.updating {
  animation: slideUp 0.35s var(--ease-out-expo);
}

/* §§ LOADING ========================================================== */
.loading-skeleton {
  background: linear-gradient(90deg,
    var(--bg-card) 0%,
    rgba(255, 255, 255, 0.04) 50%,
    var(--bg-card) 100%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s infinite;
  border-radius: 4px;
}
@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.loading-line {
  height: 1em;
  margin-bottom: 0.75rem;
  border-radius: 4px;
}
.loading-line:nth-child(1) { width: 90%; }
.loading-line:nth-child(2) { width: 75%; }
.loading-line:nth-child(3) { width: 85%; }
.loading-line:nth-child(4) { width: 60%; }

/* §§ SAMPLE_CYCLER (Non-determinism L2) =============================== */
.sample-cycler {
  margin-bottom: 1rem;
}
.sample-cycler-inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1rem;
  background: rgba(167, 139, 250, 0.06);
  border: 1px solid rgba(167, 139, 250, 0.2);
  border-radius: 8px;
}
.sample-label {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: #a78bfa;
  font-weight: 500;
  white-space: nowrap;
  letter-spacing: 0.02em;
}
.sample-dots {
  display: flex;
  gap: 0.4rem;
  flex: 1;
}
.sample-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(167, 139, 250, 0.2);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: all 0.2s var(--ease-out-expo);
}
.sample-dot:hover {
  background: rgba(167, 139, 250, 0.5);
  transform: scale(1.2);
}
.sample-dot.active {
  background: #a78bfa;
  box-shadow: 0 0 12px rgba(167, 139, 250, 0.5);
}
.sample-rerun {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: #a78bfa;
  background: rgba(167, 139, 250, 0.1);
  border: 1px solid rgba(167, 139, 250, 0.3);
  border-radius: 6px;
  padding: 0.35rem 0.7rem;
  cursor: pointer;
  transition: all 0.2s var(--ease-out-expo);
  white-space: nowrap;
}
.sample-rerun:hover {
  background: rgba(167, 139, 250, 0.18);
  border-color: rgba(167, 139, 250, 0.5);
  transform: translateY(-1px);
}
.sample-rerun svg {
  transition: transform 0.4s var(--ease-out-expo);
}
.sample-rerun:hover svg {
  transform: rotate(120deg);
}

/* §§ CHUNKED_LEVEL_NAV ================================================ */
.level-chunk-dots {
  display: flex;
  gap: 0.25rem;
}

/* §§ LOCKED_BLOCKS ==================================================== */
.block-card[data-swappable="false"][data-type="system_prompt"] {
  opacity: 0.85;
}
.block-card[data-swappable="false"][data-type="system_prompt"] .block-label::after {
  content: ' · locked';
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--text-muted);
  opacity: 0.6;
  text-transform: lowercase;
  letter-spacing: 0;
}

/* §§ FAMILY_2_TYPED_MESSAGE =========================================== */
.block-card--typed .block-role-tag,
.block-card--reference .block-role-tag {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--block-color, var(--text-muted));
  opacity: 0.7;
  padding: 0.15rem 0.45rem;
  border: 1px solid rgba(var(--block-color-rgb, 123, 141, 160), 0.3);
  border-radius: 4px;
  background: rgba(var(--block-color-rgb, 123, 141, 160), 0.06);
  margin-left: auto;
}

/* §§ THINKING_BLOCK_TOGGLE (L7) ======================================= */
.block-card--thinking .block-content {
  /* Override the default grid-row expand animation — allow collapse */
}
.block-card--thinking.thinking-hidden .block-content {
  grid-template-rows: 0fr;
}
.thinking-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  color: #a78bfa;
  background: rgba(167, 139, 250, 0.08);
  border: 1px solid rgba(167, 139, 250, 0.25);
  border-radius: 5px;
  padding: 0.2rem 0.5rem;
  cursor: pointer;
  margin-left: auto;
  transition: all 0.2s var(--ease-out-expo);
}
.thinking-toggle:hover {
  background: rgba(167, 139, 250, 0.15);
  border-color: rgba(167, 139, 250, 0.45);
}
.block-card--thinking.thinking-hidden .thinking-toggle {
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.03);
  border-color: var(--border);
}
.block-card--thinking.thinking-hidden .block-role-tag {
  opacity: 0.4;
}

/* §§ FAMILY_3_CONTAINER (Conversation History) ======================== */
.block-card--container .container-turns {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 0.25rem 0;
}
.container-turn {
  position: relative;
  padding: 0.65rem 0.8rem 0.7rem 1rem;
  background: rgba(var(--block-color-rgb, 123, 141, 160), 0.04);
  border: 1px solid rgba(var(--block-color-rgb, 123, 141, 160), 0.2);
  border-left: 2px solid var(--block-color, var(--text-muted));
  border-radius: 6px;
  animation: turnReveal 0.4s var(--ease-out-expo);
}
@keyframes turnReveal {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.turn-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.45rem;
}
.turn-header .block-icon {
  width: 22px;
  height: 22px;
  background: rgba(var(--block-color-rgb, 123, 141, 160), 0.12);
}
.turn-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--block-color, var(--text));
  letter-spacing: 0.02em;
}
.turn-number {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--text-muted);
  margin-left: auto;
  opacity: 0.6;
}
.turn-content {
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--text-secondary);
  white-space: pre-wrap;
  word-break: break-word;
}
.block-count-tag {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--text-muted);
  opacity: 0.6;
  margin-left: auto;
  padding: 0.1rem 0.4rem;
  border: 1px solid var(--border);
  border-radius: 4px;
}

/* §§ FAMILY_3_SUBCARD — nested thinking / tool_call / tool_result ===== */
.sub-card {
  margin: 0.45rem 0 0.45rem 1rem;
  padding: 0.55rem 0.75rem;
  background: rgba(var(--block-color-rgb, 99, 102, 241), 0.05);
  border: 1px solid rgba(var(--block-color-rgb, 99, 102, 241), 0.22);
  border-left: 2px solid var(--block-color, var(--accent-indigo));
  border-radius: 5px;
  animation: turnReveal 0.35s var(--ease-out-expo);
}
.sub-card--thinking    { --block-color: #a78bfa; --block-color-rgb: 167, 139, 250; }
.sub-card--tool_call   { --block-color: #3fb950; --block-color-rgb: 63, 185, 80; }
.sub-card--tool_result { --block-color: #7b8da0; --block-color-rgb: 123, 141, 160; }

.sub-card-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.35rem;
}
.sub-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  background: rgba(var(--block-color-rgb), 0.12);
  color: var(--block-color);
  flex-shrink: 0;
}
.sub-card-icon svg { width: 14px; height: 14px; }
.sub-card-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--block-color, var(--text));
  letter-spacing: 0.02em;
}
.sub-card-args {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-secondary);
  background: rgba(0, 0, 0, 0.3);
  padding: 0.5rem 0.6rem;
  border-radius: 4px;
  margin: 0.3rem 0;
  white-space: pre-wrap;
  word-break: break-word;
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.sub-card-content {
  font-size: 0.84rem;
  line-height: 1.55;
  color: var(--text-secondary);
  white-space: pre-wrap;
  word-break: break-word;
}

/* §§ INTER_BLOCK_ADD_TURN (L6 non-nested progressive reveal) ========== */
.add-turn-btn--inter-block {
  margin: 0.5rem 0;
  align-self: stretch;
}
.add-turn-btn--inter-block .add-turn-label {
  font-size: 0.82rem;
}

/* §§ FAMILY_3_ADD_TURN ================================================ */
.add-turn-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: #a78bfa;
  background: rgba(167, 139, 250, 0.06);
  border: 1px dashed rgba(167, 139, 250, 0.4);
  border-radius: 8px;
  padding: 0.7rem 0.95rem;
  cursor: pointer;
  transition: all 0.25s var(--ease-out-expo);
  align-self: stretch;
  margin-top: 0.4rem;
  text-align: left;
  position: relative;
  animation: turnReveal 0.4s var(--ease-out-expo);
}
.add-turn-btn::before {
  content: '';
  position: absolute;
  left: -2px;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 60%;
  background: rgba(167, 139, 250, 0.4);
  border-radius: 1px;
}
.add-turn-btn:hover {
  color: #c4b5fd;
  border-color: rgba(167, 139, 250, 0.7);
  background: rgba(167, 139, 250, 0.1);
  transform: translateY(-1px);
}
.add-turn-btn:hover::before {
  background: rgba(167, 139, 250, 0.8);
  height: 80%;
}
.add-turn-label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.add-turn-label svg { color: #a78bfa; transition: transform 0.2s, color 0.2s; }
.add-turn-btn:hover .add-turn-label svg {
  color: #c4b5fd;
  transform: scale(1.1);
}
.add-turn-hint {
  display: block;
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.45;
  font-weight: 400;
  opacity: 0.85;
}

/* §§ FAMILY_5_REFERENCE — non-interactive inline delegation card.
 * Dashed border = "a hand-off happened here", echoing the margin-note
 * narration register. The v2 open-panel button is retired (spec §6/§13.5). */
.block-card--reference {
  border-style: dashed;
}
.reference-body {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  align-items: flex-start;
  padding: 0 1rem 0.85rem;
}
.reference-title {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
}
.reference-description {
  font-size: 0.84rem;
  color: var(--text-secondary);
  line-height: 1.55;
}

/* §§ OUTPUT_THINKING (L7) ============================================= */
.output-thinking {
  margin-bottom: 1.25rem;
  padding: 0.85rem 1rem;
  background: rgba(167, 139, 250, 0.05);
  border: 1px solid rgba(167, 139, 250, 0.2);
  border-left: 2px solid #a78bfa;
  border-radius: 0 6px 6px 0;
  position: relative;
}
.output-thinking-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  color: #a78bfa;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.5rem;
}
.output-thinking-header svg { color: #a78bfa; flex-shrink: 0; }
.output-thinking-body {
  font-size: 0.84rem;
  line-height: 1.6;
  color: var(--text-secondary);
  font-style: italic;
  opacity: 0.9;
}
.output-thinking-body p { margin-bottom: 0.5rem; }
.output-thinking-body p:last-child { margin-bottom: 0; }

/* §§ REDUCED_MOTION =================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
}

/* §§ RESPONSIVE_1080 ================================================== */
@media (max-width: 1080px) {
  .nav-links {
    display: none;
    position: absolute;
    top: var(--nav-height);
    left: 0;
    right: 0;
    background: rgba(10, 15, 28, 0.95);
    backdrop-filter: blur(12px);
    flex-direction: column;
    padding: 1.25rem 2rem 1.75rem;
    border-bottom: 1px solid var(--border);
    gap: 0.15rem;
  }
  .nav-links.open { display: flex; align-items: flex-start; }
  .nav-links a { padding: 0.65rem 0; white-space: normal; }
  .nav-links a.active::after { display: none; }
  .nav-cta-item { margin-left: 0; margin-top: 0.5rem; }
  .nav-cta-item .btn-nav-install { padding: 0.55rem 1.5rem; font-size: 0.88rem; display: inline-block; }
  .nav-toggle { display: block; }
  .nav-dropdown { width: 100%; }
  .nav-dropdown-menu { display: none; }
  .nav-dropdown.mobile-open .nav-dropdown-menu {
    display: block;
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    background: transparent;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 0.35rem 0 0.25rem 1rem;
    min-width: 0;
  }
  .nav-dropdown > a::before { display: none; }
  .nav-dropdown > .nav-dropdown-toggle {
    padding: 0.65rem 1.2rem 0.65rem 0;
    cursor: pointer;
    text-align: left;
    width: 100%;
  }
  .nav-dropdown > .nav-dropdown-toggle::before {
    display: block;
    transition: transform 0.2s ease;
  }
  .nav-dropdown.mobile-open > .nav-dropdown-toggle::before {
    transform: translateY(-75%) rotate(-135deg);
  }
  .nav-dropdown-toggle.active::after { display: none; }
  .nav-dropdown-menu a {
    padding: 0.4rem 0.85rem;
    font-size: 0.88rem;
    color: var(--text-muted);
    justify-content: flex-start;
  }
  .nav-dropdown-menu a:hover,
  .nav-dropdown-menu a.active {
    color: var(--accent);
  }
  .nav-icon-item { margin-left: 0; margin-top: 0.5rem; }
  .nav-links .nav-icon-link svg { width: 28px; height: 28px; }
}

/* §§ RESPONSIVE_900 =================================================== */
@media (max-width: 900px) {
  .explorer-layout {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .explorer-layout.subagent-open {
    grid-template-columns: 1fr;
  }
  .explorer-layout.subagent-open .pipeline-panel,
  .explorer-layout.subagent-open .level-sidebar {
    display: none;
  }
  .explorer-layout.subagent-open .subagent-panel {
    position: fixed;
    inset: calc(var(--nav-height) + 3px) 0 0 0;
    max-height: none;
    border-radius: 0;
    z-index: 500;
  }
  /* Full-screen takeover: show Back button, hide desktop × close */
  .explorer-layout.subagent-open .subagent-back {
    display: inline-flex;
  }
  .explorer-layout.subagent-open .subagent-close {
    display: none;
  }
  .subagent-back-label {
    display: inline;
  }
  .level-sidebar {
    position: static;
    order: -1;
  }
  /* §§ MOBILE_LEVEL_NAV — full-width horizontal scroll, static element ===== */
  .level-nav--top,
  .level-nav--bottom {
    /* Static block — no position, no sticky, no fixed. Scrolls with page. */
    padding-left: clamp(1rem, 3vw, 2.5rem);
    padding-right: clamp(1rem, 3vw, 2.5rem);
  }
  .level-nav-inner {
    /* The whole bar scrolls — arrows included. */
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    width: 100%;
    max-width: 100%;
    margin: 0;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    justify-content: flex-start;
    /* Edge fade affordance via mask-image — respects rounded corners */
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 1.25rem, #000 calc(100% - 1.25rem), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 1.25rem, #000 calc(100% - 1.25rem), transparent 100%);
  }
  .level-nav-inner::-webkit-scrollbar { display: none; }
  .level-dots {
    flex: 0 0 auto;
    flex-wrap: nowrap;
  }
  .level-arrow {
    flex-shrink: 0;
  }
  .level-chunk {
    border-right: 1px solid var(--border);
    border-bottom: none;
    padding: 0 0.5rem;
    flex-shrink: 0;
  }
  .level-chunk:last-child {
    border-right: none;
  }
}

/* §§ RESPONSIVE_560 =================================================== */
@media (max-width: 560px) {
  .model-tabs {
    flex-direction: column;
  }
  .output-meta {
    display: none;
  }
  .swap-options {
    gap: 0.35rem;
  }
  .swap-btn {
    font-size: 0.7rem;
    padding: 0.35rem 0.6rem;
  }
}

/* §§ TRANSCRIPT_LAYOUT ================================================ */
.transcript-layout {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 1rem clamp(1rem, 3vw, 2.5rem) 3rem;
}
.transcript-main { min-width: 0; display: flex; flex-direction: column; gap: 0; }

.beat-row { display: grid; grid-template-columns: minmax(0, 1fr) 300px; column-gap: clamp(1.25rem, 3vw, 2.5rem); align-items: start; margin-bottom: 0.9rem; scroll-margin-bottom: 1.5rem; }
.beat-main { min-width: 0; display: flex; flex-direction: column; gap: 0.9rem; }
.beat-note { grid-column: 2; }
.beat-row--setup { margin-bottom: 0.9rem; }
/* Non-row children (model tabs, connector, tail) align to the content column: */
.transcript-main > .model-tabs, .transcript-main > .setup-connector, .transcript-main > .transcript-tail { max-width: calc(100% - 300px - clamp(1.25rem, 3vw, 2.5rem)); }

/* §§ MARGIN_NOTE — dashed indigo, italic: "narration, not content." */
.margin-note {
  border-left: 2px dashed var(--accent-indigo);
  padding: 0.4rem 0 0.4rem 0.75rem;
  margin-bottom: 0.75rem;
  color: var(--text-secondary);
  font-style: italic;
  font-size: 0.9rem;
  line-height: 1.5;
}

/* §§ BEAT_CONTROLS =================================================== */
.beat-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin: 1.25rem 0; }
.beat-btn {
  font-family: var(--font-display); font-weight: 600; font-size: 0.95rem;
  padding: 0.6rem 1.1rem; border-radius: 8px; cursor: pointer;
  background: var(--gradient-brand); color: #05121f; border: none;
  transition: transform 0.2s var(--ease-out-expo), box-shadow 0.2s var(--ease-out-expo);
}
.beat-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px var(--accent-glow); }
.beat-btn--replay { background: transparent; color: var(--accent); border: 1px solid var(--accent); }
.beat-btn:focus-visible, .choice-btn:focus-visible, .rail-item:focus-visible, .swap-btn:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
.advance-note { font-size: 0.85rem; color: var(--text-muted); font-style: italic; }
.choice-prompt { font-family: var(--font-display); font-weight: 500; margin-bottom: 0.5rem; color: var(--text-secondary); font-style: italic; }
.choice-options { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.choice-btn {
  font-family: var(--font-display); font-weight: 600; font-size: 0.92rem;
  padding: 0.6rem 1.1rem; border-radius: 8px; cursor: pointer;
  background: rgba(99, 102, 241, 0.08); color: var(--text);
  border: 1px solid var(--accent-indigo);
  transition: transform 0.2s var(--ease-out-expo), box-shadow 0.2s var(--ease-out-expo), background 0.2s var(--ease-out-expo);
}
.choice-btn:hover {
  background: rgba(99, 102, 241, 0.18); transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(99, 102, 241, 0.25);
}

/* §§ BEAT_PIPS — per-item progress: one dot per beat of the current path. */
.beat-pips { display: inline-flex; gap: 5px; align-items: center; margin-left: 0.9rem; }
.beat-pip { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.12); transition: background 0.3s, transform 0.3s; }
.beat-pip.is-active { background: var(--accent); transform: scale(1.35); }
.beat-pip.is-done { background: rgba(34, 211, 168, 0.45); }
.beat-pip--more { width: 4px; height: 4px; background: transparent; border: 1px dashed var(--text-muted); }

/* §§ TERMINAL_CLUSTER — completion line, nudge callout, CTA card. */
.beat-controls--terminal { display: flex; flex-direction: column; align-items: stretch; gap: 0.9rem; }
.terminal-complete { display: flex; align-items: center; gap: 0.5rem; color: var(--accent); font-size: 0.85rem; font-weight: 600; margin: 0; }
.terminal-nudge { display: flex; gap: 0.6rem; align-items: flex-start; background: rgba(99, 102, 241, 0.07); border: 1px solid rgba(99, 102, 241, 0.35); border-radius: 8px; padding: 0.7rem 0.85rem; font-size: 0.85rem; color: var(--text-secondary); }
.terminal-nudge svg { flex-shrink: 0; margin-top: 2px; color: var(--accent-indigo); }
.terminal-actions { display: flex; gap: 0.75rem; }
/* font-family: buttons don't inherit -- without it the teaser + Continue pill
   fall back to the UA button font */
.terminal-cta { display: flex; justify-content: space-between; align-items: center; gap: 1rem; width: 100%; text-align: left; cursor: pointer; border-radius: 10px; padding: 0.95rem 1.1rem; font-family: var(--font-body); background: linear-gradient(100deg, rgba(34, 211, 168, 0.14), rgba(99, 102, 241, 0.14)); border: 1px solid rgba(34, 211, 168, 0.45); transition: transform 0.2s var(--ease-out-expo), box-shadow 0.2s; }
.terminal-cta:hover { transform: translateY(-1px); box-shadow: 0 2px 16px rgba(34, 211, 168, 0.25); }
.terminal-cta-text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.terminal-cta-kicker { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.terminal-cta-title { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; color: var(--text); }
.terminal-cta-teaser { font-size: 0.8rem; color: var(--text-secondary); }
.terminal-cta-go { flex-shrink: 0; background: var(--accent); color: var(--bg); font-family: var(--font-display); font-weight: 700; font-size: 0.85rem; border-radius: 999px; padding: 0.5rem 1.15rem; }

/* §§ SETUP_CONNECTOR — teal→indigo pipeline metaphor. */
.setup-connector { width: 2px; height: 28px; margin: 0.25rem 0 0.25rem 1.25rem; background: var(--gradient-bar); }

/* §§ STAGGERED_REVEAL — retired; see REVEAL_GRAMMAR below. */
@keyframes block-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* §§ GENERATION_REVEAL — word-by-word stream on assistant outputs; spans and
   per-word delays are set by render-block.mjs staggerWords(). */
.gen-word { opacity: 0; animation: gen-word-in 0.22s ease-out forwards; }
@keyframes gen-word-in { from { opacity: 0; } to { opacity: 1; } }

/* §§ REVEAL_GRAMMAR — append-only: block enters, teal pulse decays, note follows.
   The pulse is a ::before rail bar offset left of the content (2026-08-16: was a
   box-shadow flush against the text edge); base opacity 0 so reduced-motion or a
   cancelled animation leaves it invisible. */
/* §§ RESET_EXIT — rows a reset is about to remove (marked by gracefulReset
 * in app.mjs) fade + settle out before the full rebuild replaces them. The
 * elements keep their layout box during the fade so the page height doesn't
 * collapse until the rebuild -- that's what lets the anchor scroll stay
 * smooth. Reduced motion is covered by the global reduced-motion rule. */
.is-resetting {
  opacity: 0;
  transform: translateY(8px);
  /* plain `ease`, NOT --ease-out-expo: the expo curve is so front-loaded
   * that a fade-out perceptually reads as an instant blink */
  transition: opacity 0.35s ease, transform 0.35s ease;
  pointer-events: none;
}

.beat-row--enter > .beat-main { position: relative; }
.beat-row--enter > .beat-main::before {
  content: '';
  position: absolute;
  left: -12px;
  top: 2px;
  bottom: 2px;
  width: 3px;
  border-radius: 2px;
  background: var(--accent);
  opacity: 0;
  pointer-events: none;
  animation: reveal-pulse 1.5s var(--ease-out-expo) both;
}
.beat-row--enter .block-card, .beat-row--enter .lesson-prose, .beat-row--enter .lesson-diagram { animation: block-in 0.35s var(--ease-out-expo) both; }
.beat-row--enter .beat-note { animation: block-in 0.35s var(--ease-out-expo) both; animation-delay: 180ms; }
@keyframes reveal-pulse { 0% { opacity: 1; } 100% { opacity: 0; } }

/* §§ SUBAGENT_LANE — offset delegated work: a sub-agent's own window, inline.
 * The delegation card (Family 5) introduces the lane on the main thread;
 * these rules render the sub-agent's beats as a visibly separate register.
 * VIS-05: stronger indigo left rail (4px) + 8%-opacity tint on desktop. */
.beat-row[data-lane="subagent"] > .beat-main {
  margin-left: 2rem;
  border-left: 4px solid var(--accent-indigo);
  border-radius: 0 10px 10px 0;
  background: rgba(99, 102, 241, 0.08);
  padding: 0.4rem 0.4rem 0.4rem 0.75rem;
}

/* §§ TOP_RAIL ======================================================= */
:root { --sticky-offset: calc(var(--nav-height) + 3px); }
.top-rail-mount { position: sticky; top: var(--sticky-offset); z-index: 500; background: var(--bg); border-bottom: 1px solid var(--border); max-width: var(--content-max); margin: 0 auto; padding: 0 clamp(1rem, 3vw, 2.5rem); }
.top-rail { overflow-x: auto; overflow-y: hidden; scrollbar-width: thin;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
}
.top-rail-inner { display: flex; gap: 1.75rem; padding: 0.75rem 24px; width: max-content; }
.rail-chunk { display: flex; flex-direction: column; gap: 0.4rem; }
.rail-chunk-label { font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); }
.rail-chunk.is-active .rail-chunk-label { color: var(--accent); }
/* §§ RAIL_LESSON_GROUPS — within-chunk lesson sections: linked header
   ("Lesson 2: Why AI makes things up" -> course page anchor) above that
   lesson's markers; unassigned items collect under a trailing General group. */
.rail-chunk-groups { display: flex; gap: 1.1rem; align-items: flex-end; }
.rail-lesson-group {
  display: flex; flex-direction: column; gap: 0.35rem;
  padding: 0.3rem 0.45rem 0.4rem; margin: -0.3rem -0.45rem -0.4rem;
  border-radius: 8px;
}
.rail-lesson-label {
  font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.04em;
  color: var(--text-muted); white-space: nowrap; text-decoration: none;
}
a.rail-lesson-label:hover { color: var(--accent); text-decoration: underline; }
.rail-lesson-label--general { font-style: italic; }
/* ?lesson= deep-link highlight */
.rail-lesson-group.is-highlight {
  box-shadow: 0 0 0 1px var(--accent);
  background: var(--accent-soft);
}
.rail-lesson-group.is-highlight .rail-lesson-label { color: var(--accent); }
.rail-markers { display: flex; gap: 0.5rem; }
.rail-item { width: 24px; height: 24px; padding: 0; border: 1px solid var(--border-hover); background: var(--bg-card); cursor: pointer; display: grid; place-items: center; border-radius: 6px; color: var(--text-muted); }
.rail-item-num { font-family: var(--font-mono); font-size: 0.72rem; line-height: 1; }
.rail-item.is-done { border-color: rgba(34, 211, 168, 0.45); color: var(--accent); }
.rail-item.is-current { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.rail-item.is-locked { opacity: 0.4; cursor: not-allowed; }
/* §§ RAIL_TOOLTIP — floating, body-level (never clipped by rail overflow). */
.rail-tooltip { position: fixed; z-index: 900; background: var(--bg-card); border: 1px solid var(--border-hover); border-radius: 6px; padding: 0.35rem 0.65rem; font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-secondary); pointer-events: none; white-space: nowrap; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4); }

/* §§ ITEM_HEADER ==================================================== */
.item-header, .beat-row { scroll-margin-top: calc(var(--sticky-offset) + 96px); }
.item-header { max-width: var(--content-max); margin: 0 auto; padding: 1.5rem clamp(1rem, 3vw, 2.5rem) 0.5rem; }
.item-type-badge { font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; padding: 0.2rem 0.5rem; border-radius: 4px; }
.item-type-badge--lesson { color: var(--accent); border: 1px solid var(--accent); }
.item-type-badge--activity { color: var(--accent-indigo); border: 1px solid var(--accent-indigo); }
.item-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.5rem, 4vw, 2.2rem); margin: 0.5rem 0 0.25rem; }
.item-subtitle { color: var(--text-secondary); }
/* §§ PAIRS_LINK — back-link to the Academy lesson this item practices. */
.item-pairs { margin-top: 0.6rem; }
.item-pairs a {
  font-family: var(--font-mono); font-size: 0.78rem; color: var(--accent);
  text-decoration: none; border: 1px solid rgba(34, 211, 168, 0.35);
  border-radius: 6px; padding: 0.3rem 0.65rem; display: inline-block;
  transition: border-color 0.2s, background 0.2s;
}
.item-pairs a:hover { border-color: var(--accent); background: var(--accent-soft); }
.item-intro { color: var(--text-muted); max-width: 60ch; margin-top: 0.75rem; }

/* §§ LESSON_DIAGRAM ================================================= */
.lesson-diagram { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 1.5rem; margin-bottom: 0.75rem; }
.lesson-prose { padding: 0.5rem 0 1rem; color: var(--text-secondary); }
/* markdown structure inside prose (the global reset zeroes these) */
.lesson-prose p { margin-bottom: 0.6rem; }
.lesson-prose p:last-child { margin-bottom: 0; }
.lesson-prose ul, .lesson-prose ol { margin: 0.35rem 0 0.25rem; padding-left: 1.35rem; display: grid; gap: 0.45rem; }
.lesson-prose li::marker { color: var(--accent); }
.lesson-diagram-missing { color: var(--text-muted); font-family: var(--font-mono); font-size: 0.85rem; }
.dg-window { border: 1px dashed var(--border-hover); border-radius: 10px; padding: 1rem; display: flex; flex-direction: column; gap: 0.5rem; }
.dg-window-label { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.dg-window-empty-hint { color: var(--text-muted); font-style: italic; font-size: 0.85rem; }
.dg-part { border-left: 3px solid var(--accent); background: rgba(34,211,168,0.06); padding: 0.6rem 0.75rem; border-radius: 6px; opacity: 0; transform: translateY(8px); }
.dg-part--memory { border-left-color: var(--block-claude-md); background: rgba(245,158,11,0.06); }
.dg-part--history { border-left-color: var(--block-history); background: rgba(123,141,160,0.06); }
.dg-part--user { border-left-color: var(--block-user); background: rgba(96,165,250,0.06); }
.dg-animate .dg-part { animation: dg-part-in 0.5s var(--ease-out-expo) both; animation-delay: calc(var(--i) * 140ms); }
@keyframes dg-part-in { to { opacity: 1; transform: none; } }

/* §§ LESSON_DIAGRAM_AUTOCOMPLETE ===================================== */
.dg-auto-loop { display: flex; flex-direction: column; gap: 0.5rem; }
.dg-auto-input,
.dg-auto-output {
  border: 1px dashed var(--border-hover); border-radius: 8px;
  padding: 0.65rem 0.9rem; display: flex; flex-direction: column; gap: 0.4rem;
  opacity: 0; transform: translateY(8px);
}
.dg-auto-output { border-color: var(--accent); background: rgba(34,211,168,0.05); }
.dg-auto-tag { font-family: var(--font-mono); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); }
.dg-auto-tokens { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }
.dg-auto-token {
  font-family: var(--font-mono); font-size: 0.82rem;
  background: rgba(255,255,255,0.05); border: 1px solid var(--border);
  border-radius: 5px; padding: 0.2rem 0.5rem; color: var(--text-secondary);
}
.dg-auto-token--blank { color: var(--text-muted); border-style: dashed; font-style: italic; }
.dg-auto-token--result { color: var(--accent); border-color: var(--accent); background: rgba(34,211,168,0.10); font-weight: 600; }
.dg-auto-arrow {
  text-align: center; color: var(--text-muted); font-size: 1rem; line-height: 1;
  opacity: 0; transform: translateY(6px);
}
.dg-auto-dist {
  border-left: 3px solid var(--accent-indigo); background: rgba(99,102,241,0.05);
  border-radius: 0 8px 8px 0; padding: 0.65rem 0.9rem;
  display: flex; flex-direction: column; gap: 0.5rem;
  opacity: 0; transform: translateY(8px);
}
.dg-auto-bars { display: flex; flex-direction: column; gap: 0.3rem; }
.dg-auto-bar-row {
  display: grid; grid-template-columns: 5.5rem 1fr 2.5rem auto;
  align-items: center; gap: 0.4rem;
  opacity: 0; transform: translateY(6px);
}
.dg-auto-bar-row--dim { opacity: 0; }
@keyframes dg-auto-dim-in { to { opacity: 0.45; transform: none; } }
.dg-auto-label { font-size: 0.8rem; color: var(--text-secondary); font-family: var(--font-body); }
.dg-auto-track { background: rgba(255,255,255,0.07); border-radius: 3px; height: 10px; overflow: hidden; }
.dg-auto-fill { height: 100%; width: var(--pct); background: rgba(99,102,241,0.5); border-radius: 3px; }
.dg-auto-fill--pick { background: var(--accent); }
.dg-auto-pct { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-muted); text-align: right; }
.dg-auto-sampled {
  font-family: var(--font-mono); font-size: 0.62rem; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--accent);
  border: 1px solid var(--accent); border-radius: 4px;
  padding: 0.1rem 0.35rem; white-space: nowrap;
}
.dg-auto-threshold { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.25rem; }
.dg-auto-threshold-line { flex: 1; border-top: 1px dashed var(--border-hover); }
.dg-auto-threshold-label { font-family: var(--font-mono); font-size: 0.62rem; color: var(--text-muted); white-space: nowrap; }
/* Staggered entrance for all animated children */
.dg-auto.dg-animate .dg-auto-input,
.dg-auto.dg-animate .dg-auto-arrow,
.dg-auto.dg-animate .dg-auto-dist,
.dg-auto.dg-animate .dg-auto-output {
  animation: dg-part-in 0.5s var(--ease-out-expo) both; animation-delay: calc(var(--i) * 120ms);
}
.dg-auto.dg-animate .dg-auto-bar-row {
  animation: dg-part-in 0.4s var(--ease-out-expo) both; animation-delay: calc(var(--i) * 100ms);
}
.dg-auto.dg-animate .dg-auto-bar-row--dim {
  animation: dg-auto-dim-in 0.4s var(--ease-out-expo) both; animation-delay: calc(var(--i) * 100ms);
}

/* §§ LESSON_DIAGRAM_SYSTEM_PROMPT ==================================== */
.dg-sp-stack { display: flex; flex-direction: column; gap: 0.4rem; }
.dg-sp-layer {
  display: flex; flex-direction: column; gap: 0.25rem;
  border-left: 3px solid var(--border-hover);
  background: rgba(255, 255, 255, 0.03);
  padding: 0.6rem 0.85rem; border-radius: 6px;
  opacity: 0; transform: translateY(8px);
}
.dg-sp-tag {
  font-family: var(--font-mono); font-size: 0.62rem; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--text-muted);
}
.dg-sp-layer--user { border-left-color: #60a5fa; background: rgba(96, 165, 250, 0.06); }
.dg-sp-layer--assistant { border-left-color: var(--accent); background: rgba(34, 211, 168, 0.06); }
.dg-sp-layer--system { border-left-color: var(--accent-indigo); background: rgba(99, 102, 241, 0.06); }
/* Hidden variant: the system layer is a faint, veiled placeholder. */
.dg-sp-hidden { border-left-style: dashed; background: rgba(99, 102, 241, 0.03); }
.dg-sp-hidden .dg-sp-veil { font-style: italic; color: var(--text-muted); font-size: 0.82rem; }
/* Revealed variant: the system layer glows to signal "this was here all along". */
.dg-sp-revealed { box-shadow: 0 0 0 1px var(--accent-indigo), 0 6px 20px rgba(99, 102, 241, 0.18); }
.dg-sp-arrow { text-align: center; color: var(--text-muted); font-size: 1.1rem; line-height: 1; }
.dg-sp.dg-animate .dg-sp-layer { animation: dg-part-in 0.5s var(--ease-out-expo) both; animation-delay: calc(var(--i) * 140ms); }

/* §§ LESSON_DIAGRAM_AGENTIC ========================================== */
.dg-ag-flow { display: flex; align-items: stretch; gap: 0.6rem; flex-wrap: wrap; }
.dg-ag-node {
  flex: 1 1 150px; min-width: 140px; display: flex; flex-direction: column; gap: 0.25rem;
  border-left: 3px solid var(--border-hover); background: rgba(255, 255, 255, 0.03);
  padding: 0.6rem 0.85rem; border-radius: 6px; opacity: 0; transform: translateY(8px);
}
.dg-ag-node--user { border-left-color: #60a5fa; background: rgba(96, 165, 250, 0.06); }
.dg-ag-node--model, .dg-ag-node--answer { border-left-color: var(--accent); background: rgba(34, 211, 168, 0.06); }
.dg-ag-tag { font-family: var(--font-mono); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); }
.dg-ag-arrow { align-self: center; color: var(--text-muted); font-size: 1.1rem; opacity: 0; }
.dg-ag-loop {
  flex: 1.5 1 200px; border: 1px dashed var(--accent-indigo); border-radius: 10px;
  padding: 0.6rem 0.75rem; display: flex; flex-direction: column; gap: 0.3rem;
  opacity: 0; transform: translateY(8px);
}
.dg-ag-loop-label { font-family: var(--font-mono); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent-indigo); }
.dg-ag-step { border-left: 3px solid var(--accent-indigo); background: rgba(99, 102, 241, 0.06); padding: 0.45rem 0.6rem; border-radius: 6px; display: flex; flex-direction: column; gap: 0.15rem; }
.dg-ag-step--act { border-left-color: #3fb950; background: rgba(63, 185, 80, 0.07); }
.dg-ag-loop-arrow { text-align: center; color: var(--text-muted); line-height: 1; }
.dg-ag-loop-back { font-family: var(--font-mono); font-size: 0.68rem; color: var(--accent-indigo); text-align: center; margin-top: 0.15rem; }
.dg-ag.dg-animate .dg-ag-node, .dg-ag.dg-animate .dg-ag-arrow, .dg-ag.dg-animate .dg-ag-loop {
  animation: dg-part-in 0.5s var(--ease-out-expo) both; animation-delay: calc(var(--i) * 140ms);
}

/* §§ LESSON_DIAGRAM_SVT ============================================== */
.dg-svt-row { display: flex; align-items: stretch; gap: 0.75rem; flex-wrap: wrap; }
.dg-svt-node {
  flex: 1 1 160px; min-width: 150px; display: flex; flex-direction: column; gap: 0.25rem;
  border-left: 3px solid var(--border-hover); background: rgba(255, 255, 255, 0.03);
  padding: 0.6rem 0.85rem; border-radius: 6px; opacity: 0; transform: translateY(8px);
}
.dg-svt-node--model { border-left-color: var(--accent); background: rgba(34, 211, 168, 0.06); }
.dg-svt-node--world { border-left-color: #3fb950; background: rgba(63, 185, 80, 0.07); }
.dg-svt-node--shelf { border-left-color: #a78bfa; background: rgba(167, 139, 250, 0.08); }
.dg-svt-node--window { border-left-color: var(--accent); background: rgba(34, 211, 168, 0.06); border: 1px dashed var(--border-hover); border-left: 3px solid var(--accent); }
/* VIS-01: raise tag contrast from --text-muted to --text-secondary (≥7:1 on dark bg) */
.dg-svt-tag { font-family: var(--font-mono); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-secondary); }
.dg-svt-channel { display: flex; flex-direction: column; justify-content: center; gap: 0.35rem; opacity: 0; }
.dg-svt-arrow { font-family: var(--font-mono); font-size: 0.72rem; white-space: nowrap; color: var(--text-muted); }
.dg-svt-arrow--out { color: #3fb950; }
.dg-svt-arrow--in { color: #a78bfa; }
.dg-svt-caption { margin-top: 0.75rem; font-size: 0.85rem; color: var(--text-secondary); font-style: italic; opacity: 0; }
.dg-svt.dg-animate .dg-svt-node, .dg-svt.dg-animate .dg-svt-channel, .dg-svt.dg-animate .dg-svt-caption {
  animation: dg-part-in 0.5s var(--ease-out-expo) both; animation-delay: calc(var(--i) * 140ms);
}
/* VIS-02: mobile — stack SVT columns full-width so comparison survives 390px */
@media (max-width: 600px) {
  .dg-svt-row { flex-direction: column; }
  .dg-svt-node { flex: none; min-width: 0; width: 100%; }
  .dg-svt-channel { flex-direction: row; justify-content: flex-start; padding: 0.2rem 0; }
}

/* §§ LESSON_DIAGRAM_DELEGATION ======================================= */
.dg-dl-row { display: flex; gap: 0.75rem; align-items: stretch; flex-wrap: wrap; }
.dg-dl-subcol { flex: 1 1 220px; display: flex; flex-direction: column; gap: 0.6rem; }
.dg-dl-window {
  border: 1px dashed var(--border-hover); border-radius: 10px; padding: 0.75rem;
  display: flex; flex-direction: column; gap: 0.4rem;
  opacity: 0; transform: translateY(8px);
}
.dg-dl-window--orch { flex: 1.2 1 240px; border-color: var(--accent); }
.dg-dl-window--sub { border-color: var(--accent-indigo); background: rgba(99, 102, 241, 0.04); }
.dg-dl-tag { font-family: var(--font-mono); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); }
.dg-dl-part {
  border-left: 3px solid var(--border-hover); background: rgba(255, 255, 255, 0.03);
  padding: 0.5rem 0.7rem; border-radius: 6px;
  display: flex; flex-direction: column; gap: 0.15rem; font-size: 0.84rem;
}
.dg-dl-part--bulk { border-left-color: #7b8da0; background: rgba(123, 141, 160, 0.07); color: var(--text-muted); }
.dg-dl-part--task { border-left-color: #60a5fa; background: rgba(96, 165, 250, 0.06); }
.dg-dl-part--report { border-left-color: var(--accent); background: rgba(34, 211, 168, 0.06); }
.dg-dl-part-tag { font-family: var(--font-mono); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); }
.dg-dl-meter { font-family: var(--font-mono); font-size: 0.7rem; color: #f59e0b; text-align: center; margin-top: 0.2rem; }
.dg-dl-return { font-family: var(--font-mono); font-size: 0.68rem; color: var(--accent); margin-top: 0.1rem; }
.dg-dl-window--crowded .dg-dl-part, .dg-dl-window--crowded .dg-dl-meter { opacity: 0; transform: translateY(8px); }
.dg-dl.dg-animate .dg-dl-window,
.dg-dl.dg-animate .dg-dl-window--crowded .dg-dl-part,
.dg-dl.dg-animate .dg-dl-window--crowded .dg-dl-meter {
  animation: dg-part-in 0.5s var(--ease-out-expo) both; animation-delay: calc(var(--i, 0) * 140ms);
}

/* §§ LESSON_DIAGRAM_PRO_TECHNIQUES =================================== */
.dg-pt-line { display: flex; align-items: stretch; gap: 0.5rem; flex-wrap: wrap; }
.dg-pt-node {
  flex: 1 1 150px; min-width: 140px; display: flex; flex-direction: column; gap: 0.25rem;
  border-left: 3px solid var(--border-hover); background: rgba(255, 255, 255, 0.03);
  padding: 0.6rem 0.85rem; border-radius: 6px;
  /* VIS-03: raise cell body text to 13px for legibility */
  font-size: 0.8125rem;
  opacity: 0; transform: translateY(8px);
}
.dg-pt-node--task { border-left-color: #60a5fa; background: rgba(96, 165, 250, 0.06); }
.dg-pt-node--risk { border-left-color: #f59e0b; background: rgba(245, 158, 11, 0.05); }
.dg-pt-node--work, .dg-pt-node--good { border-left-color: var(--accent); background: rgba(34, 211, 168, 0.06); }
.dg-pt-node--end { border-left-color: #7b8da0; background: rgba(123, 141, 160, 0.07); color: var(--text-muted); }
/* VIS-03: row headers (tags) get --text-secondary for distinct treatment vs cell body text */
.dg-pt-tag { font-family: var(--font-mono); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-secondary); font-weight: 600; }
.dg-pt-arrow { align-self: center; color: var(--text-muted); font-size: 1.1rem; opacity: 0; }
.dg-pt-caption { margin-top: 0.75rem; font-size: 0.85rem; color: var(--text-secondary); font-style: italic; opacity: 0; }
.dg-pt-inserts { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.75rem; }
.dg-pt-sub {
  flex: 1 1 180px; min-width: 170px; display: flex; flex-direction: column; gap: 0.2rem;
  border: 1px dashed var(--accent-indigo); background: rgba(99, 102, 241, 0.04);
  padding: 0.55rem 0.75rem; border-radius: 10px; font-size: 0.8125rem;
  opacity: 0; transform: translateY(8px);
}
.dg-pt-sub--file { border-color: #f59e0b; background: rgba(245, 158, 11, 0.05); }
.dg-pt-when { font-family: var(--font-mono); font-size: 0.68rem; color: var(--accent); text-transform: uppercase; letter-spacing: 0.1em; }
.dg-pt-feed { font-family: var(--font-mono); font-size: 0.68rem; color: var(--accent-indigo); margin-top: 0.15rem; }
.dg-pt-sub--file .dg-pt-feed { color: #f59e0b; }
.dg-pt.dg-animate .dg-pt-node, .dg-pt.dg-animate .dg-pt-arrow, .dg-pt.dg-animate .dg-pt-caption, .dg-pt.dg-animate .dg-pt-sub {
  animation: dg-part-in 0.5s var(--ease-out-expo) both; animation-delay: calc(var(--i) * 140ms);
}
/* VIS-04: mobile — stack each stage as a full-width card at ≤600px */
@media (max-width: 600px) {
  .dg-pt-line { flex-direction: column; }
  .dg-pt-node { flex: none; min-width: 0; width: 100%; }
  .dg-pt-arrow { align-self: flex-start; }
  .dg-pt-inserts { flex-direction: column; }
  .dg-pt-sub { flex: none; min-width: 0; width: 100%; }
}

/* §§ LESSON_DIAGRAM_UTILIZATION — quality-vs-utilization curve (Phase 8). */
.dg-ut { display: flex; flex-direction: column; gap: 0.75rem; padding: 1.25rem 1.25rem 1.6rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; }
.dg-ut-plot { position: relative; padding-left: 1.1rem; }
.dg-ut-plot svg { width: 100%; height: auto; display: block; }
.dg-ut-axis { stroke: var(--border-hover); stroke-width: 1.5; }
.dg-ut-curve { stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 900; stroke-dashoffset: 900; }
.dg-animate .dg-ut-curve { animation: dg-ut-draw 1.6s var(--ease-out-expo) 0.2s forwards; }
@keyframes dg-ut-draw { to { stroke-dashoffset: 0; } }
.dg-ut-region { position: absolute; bottom: 20%; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); opacity: 0; }
.dg-ut-region--good { color: var(--accent); }
.dg-ut-region--rot { color: #f59e0b; }
.dg-ut-y { position: absolute; left: -0.35rem; bottom: 45%; transform: rotate(-90deg); transform-origin: left bottom; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; }
.dg-ut-x { position: absolute; right: 0; bottom: -1.1rem; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.dg-ut-caption { font-size: 0.85rem; color: var(--text-secondary); font-style: italic; text-align: center; opacity: 0; }
.dg-animate .dg-ut-region, .dg-animate .dg-ut-caption { animation: dg-part-in 0.5s var(--ease-out-expo) both; animation-delay: calc(var(--i) * 260ms + 900ms); }

/* §§ LESSON_DIAGRAM_ROT — one stack, three tasks, decaying focus (Phase 8). */
.dg-rot { display: flex; flex-direction: column; gap: 0.9rem; padding: 1.25rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; }
.dg-rot-cols { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 1rem; align-items: stretch; }
.dg-rot-stack { display: flex; flex-direction: column; gap: 0.45rem; }
.dg-rot-row { border: 1px solid var(--border-hover); border-radius: 6px; padding: 0.4rem 0.65rem; font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-secondary); background: rgba(255, 255, 255, 0.02); }
.dg-rot-row--base { border-color: rgba(34, 211, 168, 0.35); color: var(--accent); }
.dg-rot-group { display: flex; flex-direction: column; gap: 0.45rem; opacity: 0; }
.dg-rot-states { display: flex; flex-direction: column; justify-content: flex-end; gap: 0.6rem; }
.dg-rot-state { border-radius: 8px; border: 1px solid; padding: 0.5rem 0.75rem; font-weight: 600; font-size: 0.85rem; display: flex; flex-direction: column; gap: 0.15rem; opacity: 0; }
.dg-rot-tag { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 400; color: var(--text-muted); }
.dg-rot-state--focused { border-color: rgba(34, 211, 168, 0.5); color: var(--accent); }
.dg-rot-state--drifting { border-color: rgba(245, 158, 11, 0.5); color: #f59e0b; }
.dg-rot-state--lost { border-style: dashed; border-color: var(--border-hover); color: var(--text-muted); }
.dg-rot-caption { font-size: 0.85rem; color: var(--text-secondary); font-style: italic; text-align: center; opacity: 0; }
.dg-animate .dg-rot-group, .dg-animate .dg-rot-state, .dg-animate .dg-rot-caption { animation: dg-part-in 0.5s var(--ease-out-expo) both; animation-delay: calc(var(--i) * 420ms); }
@media (max-width: 900px) { .dg-rot-cols { grid-template-columns: 1fr; } .dg-rot-states { flex-direction: row; } .dg-rot-state { flex: 1; } }

/* §§ LESSON_DIAGRAM_COMPACTION — before/after window compression (Phase 8). */
.dg-cp { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 1rem; align-items: center; padding: 1.25rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; }
.dg-cp-panel { display: flex; flex-direction: column; gap: 0.5rem; opacity: 0; }
.dg-cp-tag { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.dg-cp-win { border: 1px solid var(--border-hover); border-radius: 8px; padding: 0.5rem; display: flex; flex-direction: column; gap: 0.35rem; min-height: 220px; }
.dg-cp-row { border: 1px solid var(--border); border-radius: 5px; padding: 0.3rem 0.55rem; font-family: var(--font-mono); font-size: 0.66rem; color: var(--text-secondary); background: rgba(255, 255, 255, 0.02); }
.dg-cp-row--summary { border-color: rgba(99, 102, 241, 0.55); color: var(--accent-indigo); background: rgba(99, 102, 241, 0.08); }
.dg-cp-free { flex: 1; border: 1px dashed var(--border); border-radius: 5px; display: grid; place-items: center; font-family: var(--font-mono); font-size: 0.66rem; color: var(--text-muted); }
.dg-cp-arrow { font-size: 1.4rem; color: var(--text-muted); opacity: 0; }
.dg-cp-loss { font-size: 0.78rem; color: #f59e0b; font-style: italic; opacity: 0; }
.dg-animate .dg-cp-panel, .dg-animate .dg-cp-arrow, .dg-animate .dg-cp-loss { animation: dg-part-in 0.5s var(--ease-out-expo) both; animation-delay: calc(var(--i) * 350ms); }
@media (max-width: 900px) { .dg-cp { grid-template-columns: 1fr; } .dg-cp-arrow { transform: rotate(90deg) !important; justify-self: center; } }

/* §§ CONTROL_FOCUS — Phase 2 controls not covered by the Phase 1 focus rule. */
.model-tab:focus-visible, .sample-rerun:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

/* §§ COURSE_COMPLETE — non-interactive terminal marker on the course's
 * final item (replaces the Next-item button; see render-transcript.mjs). */
.course-complete {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-display); font-weight: 600; font-size: 0.95rem;
  color: var(--accent);
  border: 1px dashed var(--accent);
  border-radius: 8px; padding: 0.6rem 1.1rem;
  background: rgba(34, 211, 168, 0.06);
}

/* §§ MOBILE_TRANSCRIPT — collapse margin, interleave notes as narration. */
@media (max-width: 900px) {
  .beat-row { grid-template-columns: 1fr; row-gap: 0.6rem; }
  .beat-note { grid-column: 1; }
  .transcript-main > .model-tabs, .transcript-main > .setup-connector, .transcript-main > .transcript-tail { max-width: none; }
  /* VIS-08: reduce mobile note-card visual weight so narration reads subordinate */
  .beat-note .margin-note {
    margin: 0 0 0 1.25rem; border-left: 3px solid var(--accent-indigo);
    background: rgba(99,102,241,0.05); border-radius: 0 8px 8px 0;
    padding: 0.6rem 0.85rem; font-style: italic; color: var(--text-secondary);
    opacity: 0.85;
  }
  /* VIS-06: lane offset narrower on small screens; 4px rail + tint still mark nesting. */
  .beat-row[data-lane="subagent"] > .beat-main { margin-left: 1rem; padding-left: 0.6rem; }
}

/* §§ LANE_GROUP_SPACING — VIS-07: breathing room between orch/subagent lane groups.
 * Adjacent subagent beats run seamlessly; the group-boundary gap signals the
 * handoff/return without altering any beat path or adding divider elements. */
.beat-row[data-lane="subagent"] + .beat-row:not([data-lane]),
.beat-row:not([data-lane]) + .beat-row[data-lane="subagent"] {
  margin-top: 1.25rem;
}

/* §§ REDUCED_MOTION ================================================= */
@media (prefers-reduced-motion: reduce) {
  .beat-row--enter > .beat-main::before { animation: none; opacity: 0; }
  .gen-word { animation: none !important; animation-delay: 0ms !important; opacity: 1; }
  .beat-row--enter .block-card, .beat-row--enter .lesson-prose, .beat-row--enter .lesson-diagram, .beat-row--enter .beat-note { animation: none; opacity: 1; transform: none; }
  .dg-animate .dg-part,
  .dg-sp.dg-animate .dg-sp-layer,
  .dg-ag.dg-animate .dg-ag-node, .dg-ag.dg-animate .dg-ag-arrow, .dg-ag.dg-animate .dg-ag-loop,
  .dg-svt.dg-animate .dg-svt-node, .dg-svt.dg-animate .dg-svt-channel, .dg-svt.dg-animate .dg-svt-caption,
  .dg-dl.dg-animate .dg-dl-window,
  .dg-dl.dg-animate .dg-dl-window--crowded .dg-dl-part,
  .dg-dl.dg-animate .dg-dl-window--crowded .dg-dl-meter,
  .dg-pt.dg-animate .dg-pt-node, .dg-pt.dg-animate .dg-pt-arrow, .dg-pt.dg-animate .dg-pt-caption, .dg-pt.dg-animate .dg-pt-sub,
  .dg-auto.dg-animate .dg-auto-input, .dg-auto.dg-animate .dg-auto-arrow,
  .dg-auto.dg-animate .dg-auto-dist, .dg-auto.dg-animate .dg-auto-output,
  .dg-auto.dg-animate .dg-auto-bar-row
    { animation: none !important; opacity: 1 !important; transform: none !important; }
  .dg-auto.dg-animate .dg-auto-bar-row--dim
    { animation: none !important; opacity: 0.45 !important; transform: none !important; }
  .block-content { transition: none !important; }
  .beat-btn, .choice-btn { transition: none !important; }
  .beat-pip { transition: none; }
  .terminal-cta { transition: none; }
  .terminal-cta:hover { transform: none; }
  html { scroll-behavior: auto; }
  .dg-ut-curve { animation: none; stroke-dashoffset: 0; }
  .dg-ut-region, .dg-ut-caption { animation: none; opacity: 1; }
  .dg-rot-group, .dg-rot-state, .dg-rot-caption { animation: none; opacity: 1; }
  .dg-cp-panel, .dg-cp-arrow, .dg-cp-loss { animation: none; opacity: 1; }
  .token-meter-fill { transition: none; }
}