/* =========================================================
   Thesis page — scroll overrides on top of the deck's styles.css
   Converts the absolutely-positioned slide deck into a stacked,
   scroll-triggered narrative page. Keeps the deck's neon look.
   ========================================================= */

html { scroll-behavior: smooth; }
html, body {
  height: auto;
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

/* #stage stays fixed as the background; #deck flows in normal document flow */
#deck { position: static; inset: auto; z-index: 10; }

/* Each former slide becomes a full-height scroll section */
.slide {
  position: relative;
  inset: auto;
  display: flex;
  min-height: 100vh;
  padding: 15vh 8vw;
  opacity: 0;
  transform: translateY(28px) scale(.995);
  filter: blur(5px);
  transition: opacity .7s ease, transform .7s ease, filter .7s ease;
}
.slide.in-view { opacity: 1; transform: none; filter: none; }

/* No-JS fallback: show everything, no scroll-reveal */
.no-js .slide { opacity: 1; transform: none; filter: none; }
.no-js .frag  { opacity: 1; transform: none; }

/* ============ HERO — explicit thesis statement ============ */
.hero-thesis { gap: .2rem; }
.thesis-statement {
  font-family: var(--sans);
  max-width: 60ch;
  margin: 2.4rem auto 0;
  font-size: clamp(1rem, 1.7vw, 1.45rem);
  line-height: 1.7;
  color: var(--muted);
}
.thesis-statement b { color: var(--ink); }
.thesis-statement .hl-cyan { color: var(--cyan); text-shadow: var(--glow-cyan); }
.thesis-statement .hl-pink { color: var(--pink); text-shadow: var(--glow-pink); }

.scroll-cue {
  font-family: var(--pixel);
  font-size: clamp(.55rem, 1vw, .72rem);
  letter-spacing: 2px;
  color: var(--pink);
  text-shadow: var(--glow-pink);
  margin-top: 3.2rem;
  animation: cueBlink 1.4s steps(2) infinite;
}
@keyframes cueBlink { 0%,60%{opacity:1} 61%,100%{opacity:.25} }

/* ============ Fixed chrome — top bar ============ */
#topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .7rem 1.2rem;
  background: linear-gradient(180deg, rgba(13,7,24,.92) 0%, rgba(13,7,24,0) 100%);
  pointer-events: none;
}
#topbar a { pointer-events: auto; }

.tbtn {
  font-family: var(--pixel);
  font-size: clamp(.5rem, .95vw, .68rem);
  letter-spacing: 1.5px;
  text-decoration: none;
  padding: .6rem .9rem;
  border-radius: 6px;
  border: 2px solid var(--purple);
  color: var(--ink);
  background: rgba(219,123,160,.08);
  transition: border-color .2s ease, box-shadow .2s ease, color .2s ease;
}
.tbtn:hover { border-color: var(--cyan); color: var(--cyan); box-shadow: var(--glow-cyan); }
.tbtn.present { border-color: var(--pink); color: var(--pink); }
.tbtn.present:hover { box-shadow: var(--glow-pink); }

/* ============ Closing section ============ */
.closing-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin-top: 2.6rem;
}
.cta-big {
  font-family: var(--pixel);
  font-size: clamp(.6rem, 1.1vw, .82rem);
  letter-spacing: 1.5px;
  text-decoration: none;
  padding: 1rem 1.4rem;
  border-radius: 8px;
  border: 2px solid var(--purple);
  color: var(--ink);
  background: rgba(219,123,160,.08);
  transition: border-color .2s ease, box-shadow .2s ease, color .2s ease;
}
.cta-big:hover { border-color: var(--cyan); color: var(--cyan); box-shadow: var(--glow-cyan); }
.cta-big.pinky { border-color: var(--pink); color: var(--pink); }
.cta-big.pinky:hover { box-shadow: var(--glow-pink); }

.closing-sign {
  font-family: var(--mono);
  font-size: clamp(1rem, 1.6vw, 1.3rem);
  color: var(--faint);
  margin-top: 2.4rem;
}

/* Keep the HUD brand, drop the slide counter on the scroll page */
#hud #counter { display: none; }

/* Smaller screens: let tall sections breathe (full responsive pass = Phase 4) */
@media (max-width: 640px) {
  .slide { padding: 12vh 6vw; min-height: auto; }
  .hero-thesis { min-height: 100vh; }
}

/* =========================================================
   PORTFOLIO V1 BRAND ALIGNMENT
   Re-skins the deck's neon-arcade look to match the portfolio
   homepage: Space Grotesk headings, Sora body, the portfolio
   palette, softer glows, flatter background. Loaded last so it
   overrides styles.css.
   ========================================================= */
:root {
  /* palette → portfolio tokens */
  --bg:        #150f22;
  --bg-deep:   #0e0b1a;
  --bg-green:  #12141c;
  --pink:      #f15bb5;
  --pink-hot:  #f15bb5;
  --cyan:      #00f5d4;
  --purple:    #c76596;
  --indigo:    #4f7df9;
  --green:     #2bd96a;
  --ink:       #f0f0f5;
  --muted:     #b6b6cc;
  --faint:     #8686a0;

  /* fonts → portfolio (Clash Display titles, Space Grotesk sub, Sora body) */
  --sans:    'Sora', system-ui, -apple-system, sans-serif;
  --mono:    'Sora', system-ui, sans-serif;
  --heading: 'Space Grotesk', sans-serif;
  --display: 'Clash Display', 'Space Grotesk', sans-serif;

  /* glows → much softer, no hot neon */
  --glow-pink:   0 0 14px rgba(241,91,181,.28);
  --glow-cyan:   0 0 14px rgba(0,245,212,.28);
  --glow-green:  0 0 14px rgba(43,217,106,.26);
  --glow-purple: 0 0 14px rgba(221,127,170,.24);
}

/* ---- EXACT portfolio background: #08070b base + purple atmosphere glow + 2 radials + faint masked grid ---- */
#stage {
  background:
    /* flat section tint (no centre glow) */
    linear-gradient(rgba(18,14,28,0.82), rgba(18,14,28,0.82)) !important;
  background-color: #08070b !important;
}
#stage::after { display: none !important; }   /* kill the CRT scanlines */
#stage::before {
  background-image:
    linear-gradient(rgba(205,162,238,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(205,162,238,0.06) 1px, transparent 1px) !important;
  background-size: 56px 56px !important;
  background-position: 0 0 !important;
  opacity: 1 !important;
  -webkit-mask-image: radial-gradient(ellipse 125% 115% at 50% 42%, #000 38%, transparent 96%) !important;
          mask-image: radial-gradient(ellipse 125% 115% at 50% 42%, #000 38%, transparent 96%) !important;
}

/* portfolio currently hides floating particles — match it */
#particles { display: none !important; }

/* ---- big type → Clash Display, sentence case, soft lavender (portfolio .pro-line / .cs-modal__title) ---- */
h1.title {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2.6rem, 5.4vw, 4.8rem);
  line-height: 1.08;
  letter-spacing: -1.5px;
  word-spacing: .16em;
  color: var(--text-primary, #f0f0f5);
  text-shadow: none;
}
h2.heading {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(28px, 4vw, 46px);
  line-height: 1.08;
  letter-spacing: -.2px;
  word-spacing: .12em;
  color: #f4f1fb;
  text-shadow: none;
}
/* two-tone: bright primary first, grey accent last */
h2.heading .pink,
h2.heading .cyan,
h2.heading .purple { color: #b9b3cf; text-shadow: none; }

.subtitle {
  font-family: var(--heading);
  font-weight: 500;
  color: var(--muted);
  text-shadow: none;
}
.subtitle .sep { color: var(--faint); text-shadow: none; }

/* kicker → portfolio "// LABEL": muted grey pixel, with a // prefix */
.kicker, .kicker.pink {
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--faint);
  text-shadow: none;
}
.kicker::before { content: "// "; }

/* captions now read as clean Sora, not techy mono */
.tiny-mono { font-weight: 400; letter-spacing: .2px; }

/* ---- hero thesis statement + cue ---- */
.thesis-statement .hl-cyan { text-shadow: var(--glow-cyan); }
.thesis-statement .hl-pink { text-shadow: var(--glow-pink); }
.scroll-cue {
  font-family: var(--heading);
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--faint);
  text-shadow: none;
}

/* ---- progress bar → cyan, no neon ---- */
#progress { background: var(--cyan); box-shadow: none; }

/* ---- top bar: clean portfolio-style Back button ---- */
#topbar { background: linear-gradient(180deg, rgba(21,15,34,.92) 0%, rgba(21,15,34,0) 100%); }
.tbtn {
  font-family: var(--heading);
  font-weight: 600;
  font-size: clamp(.78rem, 1vw, .92rem);
  letter-spacing: .2px;
  border: 1px solid rgba(0,245,212,0.3);
  border-radius: 10px;
  color: var(--cyan);
  background: transparent;
  padding: 10px 22px;
}
.tbtn:hover { border-color: var(--cyan); color: var(--cyan); box-shadow: 0 8px 30px rgba(0,245,212,0.15); }

/* ---- closing CTA → portfolio button ---- */
.cta-big {
  font-family: var(--heading);
  font-weight: 600;
  font-size: clamp(.9rem, 1.1vw, 1rem);
  letter-spacing: .2px;
  border: 1px solid rgba(0,245,212,0.3);
  border-radius: 10px;
  color: var(--cyan);
  background: transparent;
  padding: 14px 28px;
}
.cta-big:hover { border-color: var(--cyan); color: var(--cyan); box-shadow: 0 8px 30px rgba(0,245,212,0.15); }

/* ---- soften the floating particles ---- */
#particles .px { filter: none; }

/* =========================================================
   FULL PORTFOLIO COLOUR PASS (no neon, no coloured text)
   Every value below is pulled from Portfolio/index.html.
   ========================================================= */

/* 1) Kill ALL glows globally (text-shadows + standalone box-shadow glows) */
:root {
  --glow-pink:   0 0 0 transparent;
  --glow-cyan:   0 0 0 transparent;
  --glow-green:  0 0 0 transparent;
  --glow-purple: 0 0 0 transparent;
}

/* 2) TEXT → portfolio gray/off-white. No coloured text. */
/* strong/emphasis → off-white #f0f0f5 */
.flow-row .step-text b, .pred-caveat b, .slack-list b, .slack-ask b, .rchip b,
.reframe-line b, .vrule b, .vrule i, .pr-tag, .pr-branch, .pr-add, .pr-plus,
.sa-name, .sa-colhead, .md-table td:first-child, .md-table tr.mine td:first-child,
.md-dim b, .md-bar b, .fp-fold, .wf-lbl, .doc-big .doc-lbl, .ps-lbl b,
.tpo-examples .a, .now-text .now-tag, .role-row.now .role-pair, .req-name,
.req-ico, .reframe-line .cursor, .unlock-ico, .gh-num, .doc-arrow,
.pred-sub .hl-pink, .pred-sub .hl-cyan, .dia span, .card .c-ico, .flow-tag,
.shot figcaption code, .pr-state-badge,
.thesis-statement .hl-cyan, .thesis-statement .hl-pink, .pr-file, .pr-meta b {
  color: #f0f0f5 !important;
  text-shadow: none !important;
}
/* base body copy → secondary gray #b6b6cc */
.flow-row .step-text, .vrule span:last-child, .tiny-mono, .slack-sub, .slack-list,
.slack-ask, .pr-meta, .pr-stats, .sa-desc, .req-sub, .pred-caveat, .slack-lead,
.slack-name, .pr-title, .role-pair { color: #b6b6cc !important; }
/* step numbers + faint labels → muted #8686a0 */
.flow-row .step, .now-chip, .req-amp { color: #8686a0 !important; }
/* inline coloured text in the HTML → off-white emphasis */
[style*="color:var(--cyan)"], [style*="color: var(--cyan)"],
[style*="color:var(--pink)"], [style*="color: var(--pink)"],
[style*="color:#d9d0e0"] { color: #f0f0f5 !important; text-shadow: none !important; }

/* 3) CONTENT CARDS → portfolio purple glass */
.flow-row, .card, .why-card, .req-badge, .pr-card {
  background: rgba(221,127,170,0.09) !important;
  border: 1px solid rgba(221,127,170,0.25) !important;
  box-shadow: 0 6px 24px -8px rgba(0,0,0,0.5), 0 0 24px -6px rgba(221,127,170,0.12) !important;
}

/* 4) DARK PANELS (code / screenshots / chat) → dark fill, purple border, no glow */
.folder-pull, .mdfile, .pr-card-gh, .slack-msg, .subagent-panel, .shot, .pr-card-gh {
  background: rgba(20,16,30,0.66) !important;
  border: 1px solid rgba(221,127,170,0.25) !important;
  box-shadow: 0 6px 24px -8px rgba(0,0,0,0.55) !important;
}

/* 5) Colour kept ONLY where it carries meaning — portfolio colours, low opacity, no glow */
/* Double Diamond */
.dia { border: 1px solid rgba(221,127,170,0.30) !important; background: rgba(221,127,170,0.07) !important; box-shadow: none !important; }
.dia.ux { border-color: rgba(241,91,181,0.40) !important; background: rgba(241,91,181,0.08) !important; }
.dia.ui { border-color: rgba(0,245,212,0.34) !important; background: rgba(0,245,212,0.07) !important; }
/* pipeline */
.pstage.show { border-color: rgba(221,127,170,0.40) !important; box-shadow: none !important; }
.pstage.core.show { border-color: rgba(241,91,181,0.42) !important; box-shadow: none !important; }
.pbeam.show { background: rgba(221,127,170,0.5) !important; box-shadow: none !important; }
/* PR status (keep green/cyan meaning, muted) */
.pr-card.done { border-color: rgba(43,217,106,0.40) !important; box-shadow: none !important; }
.pr-card.active { border-color: rgba(0,245,212,0.38) !important; box-shadow: none !important; }
/* badges / avatars / tags → muted purple, no glow */
.req-badge.cyanb { border-color: rgba(0,245,212,0.34) !important; background: rgba(0,245,212,0.07) !important; box-shadow: none !important; }
.slack-avatar { background: rgba(221,127,170,0.6) !important; box-shadow: none !important; }
.flow-tag { background: rgba(221,127,170,0.85) !important; color: #f0f0f5 !important; box-shadow: none !important; }
.wline { background-image: linear-gradient(90deg, rgba(221,127,170,0.7) 55%, transparent 55%) !important; }
/* node / context diagrams */
.node.active { border-color: rgba(221,127,170,0.45) !important; box-shadow: none !important; }
.ctx-node.show { border-color: rgba(221,127,170,0.35) !important; box-shadow: none !important; }
.why-canvas { border: 1px solid rgba(221,127,170,0.30) !important; box-shadow: 0 16px 44px rgba(0,0,0,.6) !important; }

/* ---- portfolio grain/noise overlay (body::before in the portfolio) ---- */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 2;
}

/* ---- T-shaped designer paths ---- */
.tshape-grid {
  display: flex; gap: 1.2rem; flex-wrap: wrap;
  justify-content: center; max-width: 1340px; margin: 0 auto;
}
.tshape-card {
  flex: 1 1 260px; max-width: 320px;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: .7rem;
  padding: 2.1rem 1.6rem;
  background: rgba(221,127,170,0.09);
  border: 1px solid rgba(221,127,170,0.25);
  border-radius: 16px;
  box-shadow: 0 6px 24px -8px rgba(0,0,0,0.5), 0 0 24px -6px rgba(221,127,170,0.12);
}
.ts-stem { font-family: var(--display); font-size: 2.4rem; font-weight: 600; color: #e0dbe6; line-height: 1; }
.ts-title { font-family: var(--display); font-size: clamp(1.05rem, 1.6vw, 1.35rem); font-weight: 600; color: #f0f0f5; letter-spacing: -.2px; }
.ts-desc { font-family: var(--sans); font-size: clamp(.92rem, 1.2vw, 1.04rem); color: #b6b6cc; line-height: 1.55; }

/* ---- "I've lived it" section: right font + no colour accents ---- */
.now-text .now-tag {
  font-family: var(--display) !important;
  font-weight: 600 !important;
  font-size: clamp(1.7rem, 3vw, 2.6rem) !important;
  letter-spacing: -.6px !important;
  color: #e0dbe6 !important;
  text-shadow: none !important;
  margin-bottom: 1rem !important;
}
.now-text .now-sub {
  font-family: var(--sans) !important;
  font-style: normal !important;
  color: var(--muted) !important;
}
/* timeline rows → neutral, no pink/cyan */
.role-row { border-left-color: rgba(221,127,170,0.30) !important; }
.role-row.now { border-left-color: rgba(221,127,170,0.45) !important; }
.role-row.now .role-pair { color: #f0f0f5 !important; text-shadow: none !important; }
.role-row.now .role-meta { color: var(--faint) !important; }

/* ---- reusable animated panel (folder-tree style) for replacing screenshots ---- */
.rv-panel {
  width: min(760px, 92vw);
  margin: 0 auto;
  border: 1px solid rgba(221,127,170,0.25);
  border-radius: 12px;
  background: rgba(20,16,30,0.72);
  box-shadow: 0 6px 24px -8px rgba(0,0,0,0.55);
  overflow: hidden;
  text-align: left;
  font-family: var(--mono);
}
.rv-bar {
  display: flex; align-items: center; gap: 7px;
  padding: .7rem 1rem;
  background: rgba(221,127,170,0.12);
  border-bottom: 1px solid rgba(221,127,170,0.22);
}
.rv-bar i { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.rv-bar .r { background:#ff5f57; } .rv-bar .y { background:#febc2e; } .rv-bar .g { background:#28c840; }
.rv-bar span { margin-left: 8px; font-size: clamp(.85rem,1.2vw,1rem); color: var(--faint); letter-spacing: .3px; }
.rv-body { padding: 1.1rem 1.3rem; display: flex; flex-direction: column; gap: .55rem; }
.rv-row {
  display: flex; align-items: center; gap: .6rem;
  font-size: clamp(.92rem, 1.35vw, 1.12rem);
  line-height: 1.5;
  color: var(--muted);
  opacity: 0; transform: translateY(8px);
  transition: opacity .45s ease, transform .45s ease;
}
.rv-row.show { opacity: 1; transform: none; }
.rv-row b { color: #f0f0f5; font-weight: 600; }
.rv-row.q { color: #f0f0f5; }
.rv-row.a { padding-left: 1.1rem; }
.rv-caret { color: var(--faint); font-weight: 700; }
.rv-cur { display: inline-block; margin-left: .15rem; width: .55em; height: 1.05em; background: #e0dbe6; vertical-align: -2px; animation: blink 1s steps(1) infinite; }
.rv-ico, .rv-plus, .rv-ok, .rv-warn { color: var(--faint); flex-shrink: 0; }
.rv-tag { margin-left: auto; font-size: .82em; color: var(--faint); border: 1px solid rgba(221,127,170,0.3); border-radius: 999px; padding: .1rem .55rem; white-space: nowrap; }
@media (max-width: 560px) { .rv-tag { display: none; } }

/* ---- tighter text container + heading→content spacing ---- */
.slide p.tiny-mono {
  max-width: 52ch !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
h2.heading { margin-bottom: 1.5rem !important; }
/* a description that sits directly under the heading (standfirst) gets space below it before the graphic */
.slide p.dek { margin: 0 auto 2.4rem !important; color: var(--muted); }

/* ---- Back button — match the case-study .cs-back exactly ---- */
.tbtn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-family: var(--pixel) !important;
  font-weight: 400 !important;
  font-size: 11px !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.45) !important;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 10px 0 !important;
  box-shadow: none !important;
  transition: color .2s ease !important;
}
.tbtn:hover { color: #fff !important; box-shadow: none !important; }
.tbtn__arrow { display: inline-flex; font-family: var(--sans); font-size: 17px; line-height: 1; transition: transform .25s ease; }
.tbtn:hover .tbtn__arrow { transform: translateX(-4px); }

/* ---- brand moved into the top bar, centred in line with Back ---- */
#hud { display: none !important; }
.topbar-brand {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--pixel);
  font-size: clamp(.5rem, 1vw, .68rem);
  letter-spacing: 2px;
  color: rgba(255,255,255,0.32);
  text-shadow: none;
  white-space: nowrap;
  pointer-events: none;
}
@media (max-width: 640px) { .topbar-brand { display: none; } }

/* =========================================================
   L3/L4 MARKET ACT — autonomy ladder + moat + vantage + vision
   ========================================================= */

/* ---- the L1->L4 ladder ---- */
.ladder {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: min(1120px, 96vw);
  margin: 0 auto;
  border: 1px solid rgba(221,127,170,0.18);
  border-radius: 14px;
  overflow: hidden;
  background: rgba(20,16,30,0.4);
}
.lad-col {
  display: flex; flex-direction: column; gap: 1.1rem;
  padding: 1.5rem 1.15rem 1.2rem;
  text-align: left;
  border-right: 1px solid rgba(255,255,255,0.06);
  opacity: 0; transform: translateY(10px);
  transition: opacity .5s ease, transform .5s ease;
}
.lad-col.frag.show { opacity: 1; transform: none; }
.lad-col:last-child { border-right: none; }
.lad-col.moat { background: rgba(221,127,170,0.07); }
.lad-h { font-family: var(--display); font-weight: 600; font-size: clamp(.95rem, 1.4vw, 1.25rem); color: var(--muted); letter-spacing: -.2px; }
.lad-h .lad-n { color: var(--faint); }
.lad-col.moat .lad-h { color: #e2dce6; }
.lad-col.moat .lad-h .lad-n { color: #cf7ba0; }
.lad-ex { font-family: var(--mono); font-size: .82rem; color: var(--faint); margin-top: auto; }
.lad-col.moat .lad-ex { color: #b0537a; }

/* nodes */
.lad-node { display: flex; align-items: center; gap: .5rem; font-family: var(--sans); font-size: .82rem; color: var(--muted); line-height: 1.3; }
.lad-dot { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--faint); flex-shrink: 0; }
.lad-dot.fill { background: var(--faint); }
.lad-col.moat .lad-dot { border-color: #c76596; }
.lad-col.moat .lad-dot.fill { background: #c76596; }
.lad-col.moat .lad-node { color: #ded7e2; }

/* L1/L2 vertical steps with a connector line */
.lad-steps { display: flex; flex-direction: column; gap: .7rem; position: relative; }
.lad-steps::before { content: ''; position: absolute; left: 4.5px; top: 9px; bottom: 9px; width: 1.5px; background: rgba(255,255,255,0.12); }
.lad-col.moat .lad-steps::before { background: rgba(221,127,170,0.3); }

/* L3 hub / L4 tree */
.lad-hub, .lad-tree { display: flex; flex-direction: column; align-items: center; gap: .5rem; width: 100%; }
.lad-row { display: flex; gap: .9rem; justify-content: center; }
.lad-mini { display: flex; flex-direction: column; align-items: center; gap: .3rem; font-family: var(--sans); font-size: .72rem; color: #ded7e2; text-align: center; }
.lad-rule { width: 70%; height: 1.5px; background: rgba(221,127,170,0.28); }

/* bottom band under the ladder */
.lad-band { display: grid; grid-template-columns: 1fr 1fr; width: min(1120px, 96vw); margin: .9rem auto 0; font-family: var(--mono); font-size: clamp(.78rem,1.1vw,.95rem); }
.lad-band span { padding: .2rem .4rem; color: var(--faint); text-align: center; }
.lad-band span.moat { color: #cf7ba0; text-align: center; }

/* ---- M3 moat 2-up ---- */
.moat-2up { display: flex; gap: 1.2rem; justify-content: center; flex-wrap: wrap; width: min(900px,96vw); margin: 0 auto; }
.moat-card {
  flex: 1 1 320px; max-width: 420px;
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
  padding: 1.8rem 1.4rem;
  background: rgba(221,127,170,0.08);
  border: 1px solid rgba(221,127,170,0.25);
  border-radius: 14px;
  opacity: 0; transform: translateY(10px);
  transition: opacity .5s ease, transform .5s ease;
}
.moat-card.frag.show { opacity: 1; transform: none; }
.moat-card .mc-tag { font-family: var(--pixel); font-size: .6rem; letter-spacing: 1.5px; color: #cf7ba0; }
.moat-card .mc-title { font-family: var(--display); font-weight: 600; font-size: clamp(1.05rem,1.6vw,1.35rem); color: #ece7f0; }
.moat-card .mc-desc { font-family: var(--sans); font-size: clamp(.9rem,1.2vw,1.02rem); color: var(--muted); text-align: center; line-height: 1.5; }

/* ---- M4 vantage 2-up (linked cards) ---- */
.vantage-2up { display: flex; gap: 1.2rem; justify-content: center; flex-wrap: wrap; width: min(1180px,96vw); margin: 0 auto; }
.vantage-card {
  flex: 1 1 0; min-width: 270px; max-width: none;
  display: flex; flex-direction: column; align-items: flex-start; gap: .55rem;
  padding: 1.6rem 1.5rem; text-decoration: none; text-align: left;
  background: rgba(221,127,170,0.07);
  border: 1px solid rgba(221,127,170,0.25);
  border-radius: 14px;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
  opacity: 0; transform: translateY(10px);
}
.vantage-card.frag.show { opacity: 1; transform: translateY(0); }
.vantage-card:hover { border-color: rgba(0,245,212,0.4); transform: translateY(-3px); box-shadow: 0 10px 30px -10px rgba(0,0,0,.6); }
.vc-tag { font-family: var(--pixel); font-size: .58rem; letter-spacing: 1.5px; color: #cf7ba0; }
.vc-title { font-family: var(--display); font-weight: 600; font-size: clamp(1.05rem,1.5vw,1.3rem); color: #f0f0f5; }
.vc-desc { font-family: var(--sans); font-size: clamp(.88rem,1.2vw,1rem); color: var(--muted); line-height: 1.5; }
.vc-link { font-family: var(--mono); font-size: 15px; color: #c6c4d4; margin-top: .3rem; text-decoration: none; text-underline-offset: 4px; }
.vc-link:hover, .vantage-card:hover .vc-link { text-decoration: underline; }

/* ---- vision CTAs ---- */
.vision-ctas { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; margin-top: 2.4rem; }

@media (max-width: 760px) {
  .ladder { grid-template-columns: repeat(2, 1fr); }
  .lad-col:nth-child(2) { border-right: none; }
  .lad-col:nth-child(1), .lad-col:nth-child(2) { border-bottom: 1px solid rgba(255,255,255,0.06); }
  .lad-band { grid-template-columns: 1fr; gap: .2rem; }
  .lad-band span.moat { text-align: center; }
}

/* ---- governance surfaces grid (the new design surface) ---- */
.gov-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;
  width: min(1020px, 96vw); margin: 0 auto; text-align: left;
}
.gov-card {
  display: flex; flex-direction: column; gap: .45rem;
  padding: 1.3rem 1.25rem;
  background: rgba(221,127,170,0.07);
  border: 1px solid rgba(221,127,170,0.22);
  border-radius: 12px;
  opacity: 0; transform: translateY(8px);
  transition: opacity .45s ease, transform .45s ease;
}
.gov-card.frag.show { opacity: 1; transform: none; }
.gov-ico {
  width: 34px; height: 34px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(221,127,170,0.14); color: #cbb8ec; margin-bottom: .35rem;
}
.gov-ico svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.gov-title { font-family: var(--display); font-weight: 600; font-size: clamp(1rem, 1.3vw, 1.15rem); color: #f0f0f5; letter-spacing: -.2px; }
.gov-desc { font-family: var(--sans); font-size: clamp(.85rem, 1.1vw, .97rem); color: var(--muted); line-height: 1.45; }
@media (max-width: 760px) { .gov-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .gov-grid { grid-template-columns: 1fr; } }

/* ---- balanced wrapping ---- */
h2.heading { text-wrap: balance; }
.slide p.dek, .slide p.tiny-mono { text-wrap: pretty; }

/* ---- floating chrome buttons (theme + music), shared with the site ---- */
.floatBtn {
  position: fixed; top: 22px; z-index: 9999;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(22,22,31,0.85);
  border: 1px solid rgba(0,245,212,0.3);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  color: rgba(0,245,212,0.75);
  transition: border-color .25s ease, color .25s ease, background .25s ease;
}
.floatBtn:hover { border-color: rgba(0,245,212,0.55); color: rgba(0,245,212,0.95); }
#themeToggle { right: 24px; }
#music-toggle { right: 76px; }
#music-toggle.playing { border-color: rgba(0,245,212,0.55); color: rgba(0,245,212,0.95); }
@media (max-width: 640px) { #themeToggle { right: 16px; } #music-toggle { right: 68px; } }

/* =========================================================
   LIGHT MODE — mirrors the rest of the site (data-theme=light)
   ========================================================= */
html[data-theme="light"] {
  --ink: #1b1633; --muted: #4c4668; --faint: #6f6a88;
  --cyan: #0b9e8a; --pink: #d6379a; --purple: #b0537a;
}
html[data-theme="light"] #stage {
  background:
    linear-gradient(to top, #ecebf2 0%, #fdfdff 100%) !important;
  background-color: #f4f2f7 !important;
}
html[data-theme="light"] #stage::before {
  background-image:
    linear-gradient(rgba(27,22,51,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(27,22,51,0.05) 1px, transparent 1px) !important;
}
html[data-theme="light"] body::after { opacity: .02; }

/* type */
html[data-theme="light"] h1.title { color: #1b1633; }
html[data-theme="light"] h2.heading { color: #1b1633; }
html[data-theme="light"] h2.heading .pink,
html[data-theme="light"] h2.heading .cyan,
html[data-theme="light"] h2.heading .purple { color: #6f6a88; }
html[data-theme="light"] .kicker { color: #8a85a0 !important; }
html[data-theme="light"] .slide p.dek,
html[data-theme="light"] .slide p.tiny-mono { color: #4c4668 !important; }
html[data-theme="light"] .tiny-mono b, html[data-theme="light"] .dek b { color: #1b1633 !important; }
html[data-theme="light"] .topbar-brand { color: #9690a8; }
/* light-mode: make body/flow bolds dark so they read as emphasis (not lighter) */
html[data-theme="light"] .step-text b,
html[data-theme="light"] .vrule b,
html[data-theme="light"] .vrule i,
html[data-theme="light"] .pred-caveat b,
html[data-theme="light"] .now-text b { color: #1b1633 !important; }
html[data-theme="light"] .now-tag { color: #2a2342 !important; }

/* cards / panels → light surfaces */
html[data-theme="light"] .rv-panel,
html[data-theme="light"] .moat-card,
html[data-theme="light"] .vantage-card,
html[data-theme="light"] .gov-card,
html[data-theme="light"] .tshape-card,
html[data-theme="light"] .subagent-panel,
html[data-theme="light"] .folder-pull,
html[data-theme="light"] .ladder,
html[data-theme="light"] .flow-row,
html[data-theme="light"] .card,
html[data-theme="light"] .why-card,
html[data-theme="light"] .req-badge,
html[data-theme="light"] .pr-card {
  background: #ffffff !important;
  border-color: rgba(27,22,51,0.10) !important;
  box-shadow: 0 6px 22px -12px rgba(27,22,51,0.22) !important;
}
html[data-theme="light"] .lad-col { background: #ffffff !important; border-color: rgba(27,22,51,0.07) !important; }
html[data-theme="light"] .lad-col.moat { background: rgba(221,127,170,0.05) !important; }
html[data-theme="light"] .rv-bar { background: rgba(221,127,170,0.06) !important; border-color: rgba(27,22,51,0.08) !important; }

/* panel text */
html[data-theme="light"] .rv-row,
html[data-theme="light"] .gov-desc,
html[data-theme="light"] .vc-desc,
html[data-theme="light"] .mc-desc,
html[data-theme="light"] .ts-desc,
html[data-theme="light"] .lad-node,
html[data-theme="light"] .sa-desc,
html[data-theme="light"] .step-text,
html[data-theme="light"] .vrule span:last-child { color: #4c4668 !important; }
html[data-theme="light"] .rv-row b,
html[data-theme="light"] .gov-title,
html[data-theme="light"] .vc-title,
html[data-theme="light"] .mc-title,
html[data-theme="light"] .ts-title,
html[data-theme="light"] .lad-h,
html[data-theme="light"] .sa-name { color: #1b1633 !important; }
html[data-theme="light"] .rv-bar span,
html[data-theme="light"] .lad-ex,
html[data-theme="light"] .rv-caret,
html[data-theme="light"] .now-sub,
html[data-theme="light"] .role-meta { color: #6f6a88 !important; }

/* accents → teal / purple for light */
html[data-theme="light"] .vc-link { color: #3f3a54 !important; }
html[data-theme="light"] .reframe-line b { color: #0b9e8a !important; }
html[data-theme="light"] .vc-tag, html[data-theme="light"] .mc-tag,
html[data-theme="light"] .lad-col.moat .lad-h, html[data-theme="light"] .lad-col.moat .lad-h .lad-n,
html[data-theme="light"] .lad-band span.moat { color: #b0537a !important; }
html[data-theme="light"] .role-row.now .role-pair { color: #1b1633 !important; }

/* ladder dots / rules */
html[data-theme="light"] .lad-dot { border-color: #9690a8; }
html[data-theme="light"] .lad-dot.fill { background: #9690a8; }
html[data-theme="light"] .lad-col.moat .lad-dot { border-color: #b0537a; }
html[data-theme="light"] .lad-col.moat .lad-dot.fill { background: #b0537a; }
html[data-theme="light"] .lad-col.moat .lad-node, html[data-theme="light"] .lad-mini { color: #5b4b78; }
html[data-theme="light"] .lad-steps::before { background: rgba(27,22,51,0.12); }
html[data-theme="light"] .lad-rule { background: rgba(221,127,170,0.3); }

/* governance icon */
html[data-theme="light"] .gov-ico { background: rgba(221,127,170,0.12); color: #b0537a; }

/* chrome */
html[data-theme="light"] .tbtn { color: #6f6a88 !important; }
html[data-theme="light"] .tbtn:hover { color: #1b1633 !important; }
html[data-theme="light"] .cta-big { color: #0b9e8a !important; border-color: rgba(11,158,138,0.4) !important; }
html[data-theme="light"] .cta-big:hover { border-color: #0b9e8a !important; box-shadow: 0 8px 30px rgba(11,158,138,0.15) !important; }
html[data-theme="light"] #topbar { background: linear-gradient(180deg, rgba(253,253,255,0.92) 0%, rgba(253,253,255,0) 100%) !important; }
html[data-theme="light"] #progress { background: #0b9e8a; }
html[data-theme="light"] .floatBtn { background: rgba(255,255,255,0.92); border-color: rgba(27,22,51,0.10); color: #b0537a; }
html[data-theme="light"] .floatBtn:hover { border-color: rgba(221,127,170,0.5); color: #7a3bc9; }
html[data-theme="light"] #music-toggle.playing { border-color: rgba(221,127,170,0.5); color: #7a3bc9; }

/* =========================================================
   LIGHT MODE — animation/diagram visibility audit fixes
   (these components had near-white text/dark tiles on white)
   ========================================================= */

/* Safe-vibe rules: dark tiles -> white */
html[data-theme="light"] .vrule {
  background: #ffffff !important;
  border-color: rgba(27,22,51,0.12) !important;
  border-left-color: #d6379a !important;
  box-shadow: 0 4px 16px -11px rgba(27,22,51,0.22) !important;
}

/* PR queue cards: near-white state text -> readable */
html[data-theme="light"] .pr-card { background: #ffffff !important; border-color: rgba(27,22,51,0.18) !important; color: #4c4668 !important; }
html[data-theme="light"] .pr-card.done { border-color: #1a9e54 !important; color: #15723f !important; box-shadow: none !important; }
html[data-theme="light"] .pr-card.active { border-color: #0b9e8a !important; color: #0b7567 !important; box-shadow: none !important; }
html[data-theme="light"] .pr-note { color: #6f6a88 !important; }

/* Double Diamond labels: light pink/cyan -> dark accents */
html[data-theme="light"] .dia span { color: #4c4668 !important; text-shadow: none !important; }
html[data-theme="light"] .dia.ux span { color: #c01f72 !important; }
html[data-theme="light"] .dia.ui span { color: #0b7567 !important; }

/* Triad labels: kill glow, darken the light-purple PRODUCT label */
html[data-theme="light"] .t-label { text-shadow: none !important; }
html[data-theme="light"] .t-label.l-prod { color: #7a47c9 !important; }

/* T-shape stems: near-white lavender -> purple */
html[data-theme="light"] .ts-stem { color: #b0537a !important; }

/* Folder tree: keep accents readable on white */
html[data-theme="light"] .fp-folder { background: rgba(221,127,170,0.08) !important; border-bottom-color: rgba(27,22,51,0.10) !important; }
html[data-theme="light"] .fp-fold { color: #0b7567 !important; }
html[data-theme="light"] .fp-folder span, html[data-theme="light"] .fp-from, html[data-theme="light"] .fp-branch { color: #6f6a88 !important; }

/* Coding-tool panel: green check + cursor stay visible */
html[data-theme="light"] .rv-ok { color: #1a9e54 !important; }

/* ---- compression ladder: L1-L2 = Claude's territory ---- */
.ladder.compressed .lad-col.claude { position: relative; border-color: rgba(241,91,181,0.5) !important; background: rgba(241,91,181,0.09) !important; }
.lad-claude-tag {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  font-family: var(--pixel); font-size: .5rem; letter-spacing: 1px; line-height: 1;
  color: #0a0a0f; background: var(--pink); padding: 4px 8px; border-radius: 5px; white-space: nowrap; z-index: 2;
}
.lad-band span.claude { color: #e89bc8; }
html[data-theme="light"] .ladder.compressed .lad-col.claude { border-color: rgba(214,55,154,0.45) !important; background: rgba(214,55,154,0.07) !important; }
html[data-theme="light"] .lad-band span.claude { color: #c01f72 !important; }

/* ---- triad: keep circles visible in light mode, especially the merged END (it blurs + fades to near-invisible on white) ---- */
html[data-theme="light"] .t-circle.prod { background: radial-gradient(circle, rgba(221,127,170,.30), rgba(221,127,170,.05) 70%) !important; border-color: #b0537a !important; }
html[data-theme="light"] .t-circle.eng  { background: radial-gradient(circle, rgba(11,158,138,.28), rgba(11,158,138,.05) 70%) !important; border-color: #0b9e8a !important; }
html[data-theme="light"] .t-circle.des  { background: radial-gradient(circle, rgba(214,55,154,.26), rgba(214,55,154,.05) 70%) !important; border-color: #d6379a !important; }
html[data-theme="light"] .triad.merged .t-circle { filter: blur(2px); opacity: .92; }

/* ---- triad: the circles use mix-blend-mode:screen which turns INVISIBLE on a
   white bg (screen toward white). Switch to multiply in light so they read,
   and keep the merged END frame visible. ---- */
html[data-theme="light"] .t-circle { mix-blend-mode: multiply !important; }
html[data-theme="light"] .t-circle.prod { background: radial-gradient(circle, rgba(221,127,170,.32), rgba(221,127,170,.08) 72%) !important; border-color: #b0537a !important; }
html[data-theme="light"] .t-circle.eng  { background: radial-gradient(circle, rgba(11,158,138,.30), rgba(11,158,138,.08) 72%) !important; border-color: #0b9e8a !important; }
html[data-theme="light"] .t-circle.des  { background: radial-gradient(circle, rgba(214,55,154,.28), rgba(214,55,154,.08) 72%) !important; border-color: #d6379a !important; }
html[data-theme="light"] .triad.merged .t-circle { filter: blur(1.5px) !important; opacity: 1 !important; }

/* =========================================================
   FIG tiles — homepage "What I Bring" card system ported for the
   thesis grids: dark-glass card + thin pink line-art illustration.
   ========================================================= */
.tb-cs__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; max-width: 1120px; margin: 0 auto; }
.tb-cs__tile { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 18px; padding: 0 0 26px; transition: border-color .25s ease; text-align: left; }
.tb-cs__tile:hover { border-color: rgba(255,255,255,0.14); }
.tb-cs__fig { display: block; font-family: var(--pixel); font-size: 9px; letter-spacing: 1px; text-transform: uppercase; color: rgba(255,255,255,0.4); padding: 22px 24px 0; }
.tb-cs__iso { height: 150px; display: flex; align-items: center; justify-content: center; margin: 6px 0 12px; }
.tb-cs__iso svg { width: 60%; max-width: 200px; height: auto; color: rgba(255,255,255,0.34); overflow: visible; }
.tb-cs__iso .iso-hot { color: var(--pink); }
.tb-cs__tile:hover .tb-cs__iso svg { color: rgba(255,255,255,0.5); }
.tb-cs__tile:hover .tb-cs__iso .iso-hot { color: #ff86cf; }
.tb-cs__title { font-family: var(--display); font-weight: 600; font-size: 22px; letter-spacing: -0.015em; color: var(--ink); margin: 0 24px 10px; }
.tb-cs__desc { font-family: var(--sans); font-size: 15px; line-height: 1.6; color: var(--faint); margin: 0 24px; }
@media (max-width: 900px) { .tb-cs__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .tb-cs__grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: no-preference) {
  .tb-cs__iso .iso-pulse { transform-box: fill-box; transform-origin: center; animation: tbPulse 2.4s ease-in-out infinite; }
  @keyframes tbPulse { 0%,100% { opacity:1; transform: scale(1); } 50% { opacity:.55; transform: scale(1.2); } }
  .tb-cs__iso .iso-float { transform-box: fill-box; animation: tbFloat 3.4s ease-in-out infinite; }
  @keyframes tbFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
  .tb-cs__iso .iso-slide { transform-box: fill-box; animation: tbSlide 2.8s ease-in-out infinite; }
  @keyframes tbSlide { 0%,100% { transform: translateX(-12px); } 50% { transform: translateX(12px); } }
  .tb-cs__iso .iso-blink { animation: tbBlink 1.05s steps(1) infinite; }
  @keyframes tbBlink { 0%,100% { opacity:1; } 50% { opacity:0; } }
  .tb-cs__iso .iso-draw { transform-box: fill-box; transform-origin: left center; animation: tbDraw 2.6s ease-in-out infinite; }
  @keyframes tbDraw { 0% { transform: scaleX(.15); } 55% { transform: scaleX(1); } 100% { transform: scaleX(.15); } }
}
html[data-theme="light"] .tb-cs__tile { background: rgba(255,255,255,0.9); border-color: rgba(27,22,51,0.10); box-shadow: 0 6px 22px -12px rgba(27,22,51,0.2); }
html[data-theme="light"] .tb-cs__fig { color: #8a85a0; }
html[data-theme="light"] .tb-cs__iso svg { color: rgba(27,22,51,0.30); }
html[data-theme="light"] .tb-cs__tile:hover .tb-cs__iso svg { color: rgba(27,22,51,0.45); }
html[data-theme="light"] .tb-cs__title { color: #1b1633; }
html[data-theme="light"] .tb-cs__desc { color: #4c4668; }

/* =========================================================
   Normalize legacy thesis cards → homepage neutral dark-glass,
   so the whole page reads as one card system. Dark mode only
   (light mode keeps its existing white-card overrides). Accents
   (pink/purple highlights) preserved separately.
   ========================================================= */
html[data-theme="dark"] .moat-card,
html[data-theme="dark"] .vantage-card,
html[data-theme="dark"] .ladder,
html[data-theme="dark"] .subagent-panel {
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(255,255,255,0.08) !important;
}
html[data-theme="dark"] .lad-col { border-right-color: rgba(255,255,255,0.06) !important; }
html[data-theme="dark"] .lad-col.moat { background: rgba(221,127,170,0.05) !important; }   /* keep a faint moat tint */
/* safe-vibe rules: neutral glass + remove the pink left stroke ("ai stroke line") */
html[data-theme="dark"] .vrule {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-left: 1px solid rgba(255,255,255,0.08) !important;
}
html[data-theme="dark"] .pr-card { background: rgba(255,255,255,0.03) !important; border: 1px solid rgba(255,255,255,0.10) !important; }
html[data-theme="dark"] .pr-card.done { border-color: rgba(43,217,106,0.45) !important; }
html[data-theme="dark"] .pr-card.active { border-color: rgba(0,245,212,0.4) !important; }

/* ---- scroll-down cue (first viewport): "SCROLL ⌄", fades out once you scroll ---- */
.t-scrollcue { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 80; display: flex; flex-direction: column; align-items: center; gap: 9px; pointer-events: none; transition: opacity .45s ease; }
.t-scrollcue__txt { font-family: var(--pixel); font-size: clamp(.5rem, .9vw, .62rem); letter-spacing: 2.5px; color: #8686a0; }
.t-scrollcue__chev { width: 28px; height: 15px; color: #8686a0; animation: tCueBounce 1.6s ease-in-out infinite; }
html[data-theme="light"] .t-scrollcue__txt, html[data-theme="light"] .t-scrollcue__chev { color: #6f6a88; }
@keyframes tCueBounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
.t-scrollcue.is-hidden { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .t-scrollcue__chev { animation: none; } }

/* ---- operating-system node graph (lighter rebuild of the homepage skill graph) ---- */
.os-graph { width: 100%; max-width: 780px; margin: 0 auto; }
.os-graph__wrap { position: relative; width: 100%; aspect-ratio: 16/10; border: 1px solid rgba(255,255,255,0.08); border-radius: 18px; background: rgba(255,255,255,0.02); overflow: hidden; }
html[data-theme="light"] .os-graph__wrap { border-color: rgba(27,22,51,0.08); background: rgba(255,255,255,0.45); }
.os-graph__wrap canvas { display: block; width: 100%; height: 100%; }
.os-graph__legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 24px; margin-top: 22px; }
.os-graph__leg { display: flex; align-items: center; gap: 8px; font-family: 'Sora', system-ui, sans-serif; font-size: 13px; color: var(--muted); }
.os-graph__dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; }

/* ===== Left-side beat tracker ===== */
.beatnav { position: fixed; left: 22px; top: 50%; transform: translateY(-50%); z-index: 9000; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s ease; }
.beatnav.is-on { opacity: 1; visibility: visible; }
.beat { position: relative; width: 11px; height: 11px; border-radius: 50%; background: transparent; border: 1.5px solid rgba(60,55,80,0.4); padding: 0; cursor: pointer; transition: all .2s ease; }
.beat:hover { border-color: rgba(60,55,80,0.75); }
.beat.is-active { background: rgba(60,55,80,0.85); border-color: rgba(60,55,80,0.85); transform: scale(1.15); }
.beat__lbl { position: absolute; left: 21px; top: 50%; transform: translateY(-50%); white-space: nowrap; font-family: 'Press Start 2P', monospace; font-size: 7px; letter-spacing: 1px; text-transform: uppercase; color: #4c4668; background: #fff; padding: 6px 9px; border-radius: 6px; opacity: 0; pointer-events: none; transition: opacity .18s ease; box-shadow: 0 6px 20px rgba(30,22,50,0.14); }
.beat:hover .beat__lbl { opacity: 1; }
:root[data-theme="dark"] .beat { border-color: rgba(255,255,255,0.42); }
:root[data-theme="dark"] .beat:hover { border-color: rgba(255,255,255,0.8); }
:root[data-theme="dark"] .beat.is-active { background: rgba(255,255,255,0.92); border-color: rgba(255,255,255,0.92); }
:root[data-theme="dark"] .beat__lbl { background: #15131f; color: #fff; box-shadow: 0 6px 20px rgba(0,0,0,0.45); }
@media (max-width: 960px) { .beatnav { display: none !important; } }

/* ===== Thesis refresh: left-aligned 2-layer headers + isometric ladder/moat ===== */
.slide__head { width: min(1120px, 92vw); margin: 0 auto 2.2rem; text-align: left; }
.slide .slide__head .kicker { text-align: left; display: block; margin: 0 0 0.9rem; }
.slide .slide__head p.dek { text-align: left !important; max-width: 68ch; margin: 0 !important; color: var(--muted); }

/* ladder cards -> pink-accent isometric illustrations */
.lad-iso { flex: 1 1 auto; width: 100%; display: flex; align-items: center; justify-content: center; padding: 0.3rem 0; }
.lad-iso svg { width: 80%; max-width: 148px; height: auto; color: rgba(255,255,255,0.34); overflow: visible; }
.lad-iso .iso-hot { color: var(--pink); }
.lad-col:hover .lad-iso svg { color: rgba(255,255,255,0.5); }
.lad-col:hover .lad-iso .iso-hot { color: #ff86cf; }
html[data-theme="light"] .lad-iso svg { color: rgba(27,22,51,0.5); }
html[data-theme="light"] .lad-iso .iso-hot { color: #d6379a; }

/* ladder responsive: 4 -> 2 -> 1 */
@media (max-width: 900px) {
  .ladder { grid-template-columns: repeat(2, 1fr); }
  .lad-col { border-right: 1px solid rgba(255,255,255,0.06); }
  .lad-col:nth-child(2n) { border-right: none; }
  .lad-col:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,0.06); }
}
@media (max-width: 560px) {
  .ladder { grid-template-columns: 1fr; }
  .lad-col { border-right: none !important; border-bottom: 1px solid rgba(255,255,255,0.06); }
  .lad-col:last-child { border-bottom: none; }
  .lad-iso svg { max-width: 190px; }
}

/* moat cards -> isometric illustration on top */
.mc-iso { width: 100%; display: flex; align-items: center; justify-content: center; margin-bottom: 0.2rem; }
.mc-iso svg { width: auto; height: 94px; color: rgba(255,255,255,0.34); overflow: visible; }
.mc-iso .iso-hot { color: var(--pink); }
.moat-card:hover .mc-iso svg { color: rgba(255,255,255,0.5); }
html[data-theme="light"] .mc-iso svg { color: rgba(27,22,51,0.5); }
html[data-theme="light"] .mc-iso .iso-hot { color: #d6379a; }

/* ===== Thesis layout fix: one shared container width, no premature wrap, compression visual ===== */
:root { --wrap: min(1180px, 92vw); }
.slide__head,
.ladder,
.lad-band,
.moat-2up,
.vantage-2up,
.tb-cs__grid {
  width: 100% !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
/* description fills the shared width instead of wrapping early */
.slide .slide__head p.dek { max-width: none !important; }

/* section-2 compression illustration (pink-accent iso, fills width, responsive) */
.compress-iso { width: 100%; margin: 1.4rem auto 0; display: flex; justify-content: center; }
.compress-iso svg { width: 100%; height: auto; color: rgba(255,255,255,0.34); overflow: visible; }
.compress-iso .iso-hot { color: var(--pink); }
.compress-iso text { font-family: var(--sans), sans-serif; font-size: 11px; letter-spacing: .3px; }
.compress-iso:hover svg { color: rgba(255,255,255,0.5); }
html[data-theme="light"] .compress-iso svg { color: rgba(27,22,51,0.5); }
html[data-theme="light"] .compress-iso .iso-hot { color: #d6379a; }

/* ── "I've lived this" — venn + roles wrapped in a portfolio card (white in light mode) ── */
.now-card {
  width: min(1120px, 92vw); margin: 0 auto;
  background: rgba(221,127,170,0.06);
  border: 1px solid rgba(221,127,170,0.18);
  border-radius: 20px;
  padding: clamp(1.5rem, 3vw, 2.6rem);
  box-shadow: 0 12px 34px -18px rgba(0,0,0,0.5);
}
html[data-theme="light"] .now-card {
  background: #ffffff;
  border-color: rgba(27,22,51,0.10);
  box-shadow: 0 10px 30px -18px rgba(40,38,55,0.22);
}
.now-card .now-grid { margin: 0; }
.now-note {
  font-family: var(--sans);
  font-size: clamp(.9rem, 1.2vw, 1rem);
  line-height: 1.55; color: var(--muted);
  margin: 1.3rem 0 0; max-width: 52ch;
}
html[data-theme="light"] .now-note { color: #4c4668; }

/* GitHub contributions screenshot: scale down + keep inside the content column (never overflow) */
.slide .shot { width: min(720px, 90vw) !important; max-width: 100% !important; margin-left: auto !important; margin-right: auto !important; }
.slide .shot img { width: 100% !important; height: auto !important; }

/* ===== Thesis fill-width v2: EVERY section graphic matches the header width (no text overflowing images, no tiles bleeding) ===== */
.slide > .slide__head,
.slide > .ladder,
.slide > .compress-iso,
.slide > .lad-band,
.slide > .moat-2up,
.slide > .vantage-2up,
.slide > .tb-cs__grid,
.slide > .triad,
.slide > .diamonds,
.slide > .now-card,
.slide > .os-graph,
.slide > .rv-panel,
.slide > .folder-pull,
.slide > .flow,
.slide > .vibe-grid {
  width: 100% !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
/* diagram-style graphics: keep their artwork centered within the now-wider container */
.slide > .triad,
.slide > .diamonds,
.slide > .os-graph,
.slide > .flow { display: flex; align-items: center; justify-content: center; }

/* ===== content fills the expanding container ===== */
.moat-2up { align-items: stretch !important; }
.moat-card { max-width: none !important; flex: 1 1 0 !important; }
.lad-iso svg { width: 74% !important; max-width: none !important; }
.mc-iso svg { height: clamp(94px, 8vw, 150px) !important; }

/* ── FIX: these diagrams were over-widened by the container-unify rules, flinging their
   legend/labels to the container edges. Restore their intended constrained layout. ── */
.slide > .os-graph {
  display: block !important;          /* stack: canvas on top, legend underneath */
  width: 100% !important;
  max-width: 780px !important;
  margin-left: auto !important; margin-right: auto !important;
}
.slide > .triad {
  display: block !important;          /* absolute labels hug the circles again */
  width: 440px !important;
  max-width: 440px !important;
  margin: 1.4rem auto 1.6rem !important;
}
/* PRODUCT label was still purple (#7a47c9) — bring it into the warm palette */
html[data-theme="light"] .t-label.l-prod { color: #b0537a !important; }

/* L1/L2 commoditized (Claude's territory) — faded vs the vibrant L3/L4 moat */
.lad-col.commoditized { opacity: 0.6; }

/* remove the SCROLL cue + the bottom lavender/purple wash */
.t-scrollcue { display: none !important; }
html[data-theme="light"] #stage { background: #f2f2f4 !important; background-color: #f2f2f4 !important; }