/* =========================================================================
   The Six Layers of AI Experience — interactive edition
   Styling: Prince Pal Design System tokens (verbatim) mapped onto Bootstrap 5.3.
   No colour, type, spacing, radius or shadow values are introduced beyond the
   tokens below; layer colours use the system's warm sunset ramp.
   ========================================================================= */

/* ---------- 1. Design-system tokens (from Prince Pal Design System) ---------- */
:root{
  --primary:#FF5200;--primary-deep:#D73302;--on-primary:#ffffff;
  --sunshine-300:#ffce8c;--sunshine-500:#ffa23a;--sunshine-700:#ff8205;--sunshine-800:#e85b04;--sunshine-900:#C53800;
  --yellow-saturated:#ffd800;
  --block-5:#ffe08a;--block-6:#ffc53d;--block-7:#f0620f;
  --cream:#fff6e0;--cream-soft:#fffbef;--cream-deeper:#ffe9b8;--beige-deep:#efddb3;--footer-cream:#fff6e0;
  --canvas:#ffffff;--surface:#faf9f6;--surface-cream:#fff9e9;--surface-cream-soft:#fffbef;--surface-code:#14100d;
  --hairline:#e5e2dc;--hairline-soft:#eeebe5;--hairline-strong:#cfcac1;
  --ink:#121212;--ink-tint:#1c1917;--charcoal:#2b2724;--slate:#55504a;--steel:#7a736b;--stone:#9c948a;--muted:#b8b0a6;
  --on-dark:#ffffff;--on-dark-muted:rgba(255,255,255,.64);--on-cream:#1a1613;
  --link:#FF5200;--link-hover:#D73302;
  --sunset-stripe:linear-gradient(90deg,var(--primary) 0%,var(--sunshine-700) 28%,var(--sunshine-500) 52%,var(--yellow-saturated) 76%,var(--cream) 100%);
  --sunset-sky:linear-gradient(135deg,var(--sunshine-700) 0%,var(--sunshine-900) 60%,var(--primary) 100%);

  --font-display:"Instrument Serif","PP Editorial Old","Times New Roman",Georgia,serif;
  --font-ui:"Manrope","Inter",ui-sans-serif,system-ui,-apple-system,sans-serif;
  --font-heading:"Manrope","Inter",ui-sans-serif,system-ui,sans-serif;
  --font-mono:"JetBrains Mono","SF Mono",Menlo,Consolas,monospace;
  --type-hero-display:italic 400 84px/1.05 var(--font-display);--track-hero-display:-1.5px;
  --type-display-lg:400 64px/1.10 var(--font-display);--track-display-lg:-1px;
  --type-heading-1:italic 400 52px/1.15 var(--font-display);--track-heading-1:-.5px;
  --display-transform:capitalize;
  --type-stat-display:400 56px/1.10 var(--font-display);--track-stat-display:-1px;
  --type-heading-2:600 36px/1.20 var(--font-heading);--track-heading-2:-.5px;
  --type-heading-3:600 28px/1.25 var(--font-heading);
  --type-heading-4:600 22px/1.30 var(--font-heading);
  --type-heading-5:600 18px/1.40 var(--font-heading);
  --type-subtitle:600 18px/1.50 var(--font-ui);
  --type-body-md:600 16px/1.55 var(--font-ui);
  --type-body-md-medium:700 16px/1.55 var(--font-ui);
  --type-body-sm:600 14px/1.50 var(--font-ui);
  --type-body-sm-medium:700 14px/1.50 var(--font-ui);
  --type-caption:600 13px/1.40 var(--font-ui);
  --type-caption-bold:700 13px/1.40 var(--font-ui);
  --type-micro:600 12px/1.40 var(--font-ui);
  --type-micro-uppercase:600 11px/1.40 var(--font-ui);--track-micro-uppercase:1px;
  --type-button-md:500 14px/1.30 var(--font-ui);
  --type-code-md:400 14px/1.50 var(--font-mono);

  --space-xxs:4px;--space-xs:8px;--space-sm:12px;--space-md:16px;--space-lg:20px;--space-xl:24px;
  --space-xxl:32px;--space-xxxl:40px;--space-section-sm:48px;--space-section:64px;--space-section-lg:96px;--space-hero:120px;
  --container-max:1280px;--container-gutter:32px;

  --rounded-xs:4px;--rounded-sm:6px;--rounded-md:8px;--rounded-lg:12px;--rounded-xl:16px;--rounded-xxl:20px;--rounded-full:9999px;
  --control-height:44px;

  --shadow-2:rgba(0,0,0,.04) 0px 4px 12px 0px;
  --shadow-3:rgba(0,0,0,.08) 0px 12px 24px -4px;
  --shadow-4:rgba(0,0,0,.12) 0px 16px 48px -8px;
  --transition-fast:150ms ease;
  --transition-base:200ms ease;

  /* Layer ramp — warm-only, dark (surface) to light (depth) */
  --layer-ui:var(--sunshine-900);
  --layer-context:var(--primary);
  --layer-harness:var(--sunshine-700);
  --layer-model:var(--sunshine-500);
  --layer-governance:var(--block-6);
  --layer-emergence:var(--yellow-saturated);

  --nav-h:64px;

  /* ---------- 2. Bootstrap variable mapping ---------- */
  --bs-body-font-family:var(--font-ui);
  --bs-body-font-size:16px;
  --bs-body-font-weight:600;
  --bs-body-line-height:1.55;
  --bs-body-color:var(--ink);
  --bs-body-bg:var(--canvas);
  --bs-primary:#FF5200;--bs-primary-rgb:255,82,0;
  --bs-link-color:var(--link);--bs-link-color-rgb:255,82,0;
  --bs-link-hover-color:var(--link-hover);--bs-link-hover-color-rgb:215,51,2;
  --bs-border-color:var(--hairline-soft);
  --bs-border-radius:var(--rounded-lg);
  --bs-border-radius-sm:var(--rounded-md);
  --bs-focus-ring-color:rgba(255,82,0,.35);
  --bs-secondary-color:var(--slate);
  --bs-emphasis-color:var(--ink);
  --bs-heading-color:var(--ink);
  --bs-gutter-x:var(--container-gutter);
}

/* ---------- 3. Base ---------- */
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 16px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--canvas);color:var(--ink);font:var(--type-body-md);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5{margin:0}
p{margin:0 0 var(--space-md)}
a{color:var(--link);text-decoration:none}
a:hover{color:var(--link-hover);text-decoration:underline}
::selection{background:var(--cream-deeper);color:var(--ink)}
.container-pp{max-width:var(--container-max);margin:0 auto;padding:0 var(--container-gutter)}
@media (max-width:575.98px){
  .container-pp{padding:0 var(--space-md)}
  .row.g-5,.row.g-4{--bs-gutter-x:var(--space-xxl)}
  .mode-track{width:72px}
  .ui-mock-bar{flex-wrap:wrap}
}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.skip-link{position:absolute;left:var(--space-md);top:-60px;z-index:2000;background:var(--ink);color:var(--on-dark);padding:var(--space-xs) var(--space-md);border-radius:var(--rounded-md);font:var(--type-body-sm-medium)}
.skip-link:focus{top:var(--space-xs);color:var(--on-dark)}

/* ---------- 4. Type roles ---------- */
.t-hero{font:var(--type-hero-display);letter-spacing:var(--track-hero-display);text-transform:var(--display-transform)}
.t-display{font:var(--type-display-lg);letter-spacing:var(--track-display-lg);font-style:italic;text-transform:var(--display-transform)}
.t-h1{font:var(--type-heading-1);letter-spacing:var(--track-heading-1);text-transform:var(--display-transform)}
.t-stat{font:var(--type-stat-display);letter-spacing:var(--track-stat-display);font-style:italic}
.t-h2{font:var(--type-heading-2);letter-spacing:var(--track-heading-2)}
.t-h3{font:var(--type-heading-3)}
.t-h4{font:var(--type-heading-4)}
.t-h5{font:var(--type-heading-5)}
.t-subtitle{font:var(--type-subtitle);color:var(--slate)}
.t-body{font:var(--type-body-md)}
.t-body-sm{font:var(--type-body-sm)}
.t-caption{font:var(--type-caption);color:var(--slate)}
.t-micro{font:var(--type-micro);color:var(--steel)}
.eyebrow{font:var(--type-micro-uppercase);letter-spacing:var(--track-micro-uppercase);text-transform:uppercase;color:var(--primary-deep);display:inline-block;margin-bottom:var(--space-sm)}
.text-slate{color:var(--slate)}
.text-steel{color:var(--steel)}
.mono{font:var(--type-code-md)}
@media (max-width:991.98px){
  .t-hero{font-size:56px;letter-spacing:-1px}
  .t-display{font-size:44px}
  .t-h1{font-size:40px}
  .t-h2{font-size:28px}
}
@media (max-width:575.98px){
  .t-hero{font-size:44px}
  .t-display{font-size:36px}
  .t-h1{font-size:34px}
  .t-stat{font-size:44px}
}

/* ---------- 5. Navigation & progress ---------- */
.site-nav{position:sticky;top:0;z-index:1030;height:var(--nav-h);background:var(--canvas);border-bottom:1px solid var(--hairline)}
.site-nav .container-pp{height:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--space-md)}
.wordmark{font:500 14px/1 var(--font-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.wordmark:hover{color:var(--ink);text-decoration:none}
.nav-current{font:var(--type-caption);color:var(--slate);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.nav-current b{color:var(--ink);font-weight:700}
.read-progress{position:absolute;left:0;right:0;bottom:-1px;height:3px;background:transparent}
.read-progress span{display:block;height:100%;width:100%;background:var(--primary);transform-origin:0 50%;transform:scaleX(0)}
.chapter-rail{position:fixed;right:var(--space-md);top:50%;transform:translateY(-50%);z-index:1020;display:none}
@media (min-width:1400px){.chapter-rail{display:block}}
.chapter-rail ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.chapter-rail a{display:flex;align-items:center;justify-content:center;width:36px;height:30px;border-radius:var(--rounded-md);font:var(--type-micro);color:var(--steel);text-decoration:none;transition:background var(--transition-fast),color var(--transition-fast)}
.chapter-rail a:hover{background:var(--surface);color:var(--ink)}
.chapter-rail a[aria-current="true"]{color:var(--on-primary);background:var(--primary)}
.offcanvas-chapters .list-group-item{border-color:var(--hairline-soft);font:var(--type-body-sm);padding:var(--space-sm) var(--space-md);display:flex;gap:var(--space-sm)}
.offcanvas-chapters .list-group-item span{color:var(--steel);min-width:22px}
.offcanvas-chapters .list-group-item[aria-current="true"]{background:var(--cream);color:var(--ink)}

/* ---------- 6. Buttons, controls (Bootstrap overrides to DS) ---------- */
.btn{--bs-btn-font-family:var(--font-ui);--bs-btn-font-size:14px;--bs-btn-font-weight:500;--bs-btn-line-height:1.3;--bs-btn-padding-y:10px;--bs-btn-padding-x:20px;--bs-btn-border-radius:var(--rounded-md);min-height:var(--control-height);display:inline-flex;align-items:center;justify-content:center;gap:var(--space-xs);transition:background-color var(--transition-fast),color var(--transition-fast),border-color var(--transition-fast)}
.btn-pp-primary{--bs-btn-bg:var(--primary);--bs-btn-color:var(--on-primary);--bs-btn-border-color:var(--primary);--bs-btn-hover-bg:var(--primary-deep);--bs-btn-hover-color:var(--on-primary);--bs-btn-hover-border-color:var(--primary-deep);--bs-btn-active-bg:var(--primary-deep);--bs-btn-active-color:var(--on-primary);--bs-btn-active-border-color:var(--primary-deep);--bs-btn-disabled-bg:var(--hairline);--bs-btn-disabled-color:var(--slate);--bs-btn-disabled-border-color:var(--hairline)}
.btn-pp-secondary{--bs-btn-bg:var(--canvas);--bs-btn-color:var(--ink);--bs-btn-border-color:var(--hairline-strong);--bs-btn-hover-bg:var(--surface);--bs-btn-hover-color:var(--ink);--bs-btn-hover-border-color:var(--hairline-strong);--bs-btn-active-bg:var(--hairline-soft);--bs-btn-active-color:var(--ink);--bs-btn-active-border-color:var(--hairline-strong);--bs-btn-disabled-bg:var(--hairline);--bs-btn-disabled-color:var(--slate)}
.btn-pp-ghost{--bs-btn-bg:transparent;--bs-btn-color:var(--ink);--bs-btn-border-color:transparent;--bs-btn-hover-bg:var(--surface);--bs-btn-hover-color:var(--ink);--bs-btn-active-bg:var(--hairline-soft);--bs-btn-active-color:var(--ink)}
.btn-sm.btn{min-height:36px;--bs-btn-padding-y:6px;--bs-btn-padding-x:14px;--bs-btn-font-size:13px}
.btn:focus-visible{box-shadow:none;outline:2px solid var(--primary);outline-offset:2px}

/* Pill tabs (DS: pills only on badges & pill tabs) */
.pill-tabs{display:flex;flex-wrap:wrap;gap:var(--space-xs)}
.pill-tab{appearance:none;border:1px solid var(--hairline-strong);background:var(--canvas);color:var(--ink);border-radius:var(--rounded-full);font:var(--type-body-sm);padding:6px 14px;min-height:36px;display:inline-flex;align-items:center;gap:var(--space-xs);cursor:pointer;transition:background var(--transition-fast),color var(--transition-fast),border-color var(--transition-fast)}
.pill-tab:hover{background:var(--surface)}
.pill-tab[aria-selected="true"],.pill-tab[aria-pressed="true"],.pill-tab.is-active{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
@media (max-width:767.98px){.pill-tab{min-height:44px}}
.pill-tab .num{font:var(--type-micro);opacity:.8}

/* Segmented control */
.segmented{display:inline-flex;background:var(--surface);border:1px solid var(--hairline);border-radius:var(--rounded-md);padding:3px;gap:2px;flex-wrap:wrap}
.segmented button{appearance:none;border:0;background:transparent;border-radius:var(--rounded-sm);font:var(--type-body-sm);color:var(--slate);padding:6px 12px;min-height:36px;cursor:pointer;transition:background var(--transition-fast),color var(--transition-fast)}
.segmented button[aria-pressed="true"]{background:var(--canvas);color:var(--ink);box-shadow:inset 0 0 0 1px var(--hairline-strong)}
.segmented button[aria-pressed="true"]::after{content:"";display:block;height:2px;background:var(--primary);border-radius:2px;margin-top:2px}

/* Form switch & range */
.form-check-input{border-color:var(--hairline-strong);cursor:pointer}
.form-check-input:checked{background-color:var(--primary);border-color:var(--primary)}
.form-check-input:focus{border-color:var(--primary);box-shadow:none;outline:2px solid var(--primary);outline-offset:2px}
.form-switch .form-check-input{width:2.5em;height:1.35em;margin-top:.1em}
.form-switch .form-check-input:focus{--bs-form-switch-bg:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23cfcac1'/%3e%3c/svg%3e")}
.form-switch .form-check-input:checked{--bs-form-switch-bg:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e")}
.form-check{min-height:var(--control-height);display:flex;align-items:center;gap:var(--space-sm);padding-left:0}
.form-check .form-check-input{float:none;margin-left:0;flex-shrink:0}
.form-check-label{font:var(--type-body-sm);cursor:pointer}
.form-range{accent-color:var(--primary);height:var(--control-height)}
.form-range::-webkit-slider-thumb{background:var(--primary)}
.form-range::-moz-range-thumb{background:var(--primary)}
.form-range:focus::-webkit-slider-thumb{box-shadow:0 0 0 2px var(--canvas),0 0 0 4px var(--primary)}
.form-range::-webkit-slider-runnable-track{background:var(--hairline)}
.form-range::-moz-range-track{background:var(--hairline)}
.range-row{display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:var(--space-sm)}
.range-row label{font:var(--type-body-sm-medium)}
.range-row output{font:var(--type-caption-bold);color:var(--primary-deep)}
.range-ends{display:flex;justify-content:space-between;font:var(--type-micro);color:var(--steel);margin-top:-6px}

/* ---------- 7. Badges, cards, panels ---------- */
.badge-pp{display:inline-flex;align-items:center;gap:6px;border-radius:var(--rounded-full);padding:3px 10px;font:var(--type-micro);background:var(--cream);color:var(--on-cream);border:1px solid var(--beige-deep)}
.badge-illustrative{background:var(--canvas);border:1px dashed var(--hairline-strong);color:var(--slate)}
.badge-illustrative::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--sunshine-500)}
.card-pp{background:var(--canvas);border:1px solid var(--hairline-soft);border-radius:var(--rounded-lg);padding:var(--space-xl)}
.card-cream{background:var(--cream);border:1px solid var(--beige-deep);border-radius:var(--rounded-lg);padding:var(--space-xl)}
.panel-feature{background:var(--surface-cream);border:1px solid var(--beige-deep);border-radius:var(--rounded-xl);padding:var(--space-xxl)}
@media (max-width:575.98px){.panel-feature{padding:var(--space-lg)}.card-pp,.card-cream{padding:var(--space-lg)}}
.product-frame{background:var(--canvas);border:1px solid var(--hairline);border-radius:var(--rounded-lg);box-shadow:var(--shadow-2)}
.code-frame{background:var(--surface-code);color:var(--on-dark);border-radius:var(--rounded-lg);box-shadow:var(--shadow-3);font:var(--type-code-md)}
.divider{height:1px;background:var(--hairline);border:0;margin:var(--space-xl) 0}

/* ---------- 8. Chapters & scrollytelling ---------- */
.chapter{padding:var(--space-section-lg) 0;position:relative}
.chapter + .chapter{border-top:1px solid var(--hairline-soft)}
.chapter-head{max-width:820px;margin-bottom:var(--space-section-sm)}
.chapter-num{font:var(--type-micro-uppercase);letter-spacing:var(--track-micro-uppercase);text-transform:uppercase;color:var(--steel);display:flex;align-items:center;gap:var(--space-sm);margin-bottom:var(--space-md)}
.chapter-num::before{content:"";width:28px;height:2px;background:var(--primary)}
.chapter-head .t-h1,.chapter-head .t-display{margin-bottom:var(--space-lg)}
.lede{font:var(--type-subtitle);color:var(--slate);max-width:720px}
.prose{max-width:680px}
.prose p{color:var(--charcoal)}
.prose h3{font:var(--type-heading-4);margin:var(--space-xxl) 0 var(--space-sm)}
.prose ul{padding-left:1.1em;color:var(--charcoal)}
.prose li{margin-bottom:6px}
.pull-quote{border:0;margin:var(--space-xxl) 0;padding:0}
.pull-quote p{font:italic 400 30px/1.3 var(--font-display);color:var(--ink);margin-bottom:var(--space-sm)}
.pull-quote footer{font:var(--type-caption);color:var(--slate)}
@media (max-width:575.98px){.pull-quote p{font-size:24px}}
.term{font-weight:700;color:var(--ink)}
.kicker{font:var(--type-caption-bold);text-transform:uppercase;letter-spacing:1px;color:var(--primary-deep)}

.scrolly{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:var(--space-section-sm);align-items:start}
.scrolly.figure-right{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}
.scrolly.figure-right .scrolly-figure{order:2}
.scrolly-figure{position:sticky;top:calc(var(--nav-h) + 24px);min-height:calc(100vh - var(--nav-h) - 48px);display:flex;flex-direction:column;justify-content:center}
.scrolly-steps{padding:20vh 0 30vh}
.step{min-height:70vh;display:flex;align-items:center}
.step-card{max-width:520px;padding:var(--space-xl);border-radius:var(--rounded-lg);border:1px solid transparent;transition:border-color var(--transition-base),background var(--transition-base),opacity var(--transition-base);opacity:.45}
.step.is-active .step-card{opacity:1;border-color:var(--hairline-soft);background:var(--canvas)}
.step-card h3{font:var(--type-heading-4);margin-bottom:var(--space-sm)}
.step-card p{color:var(--charcoal)}
.step-card p:last-child{margin-bottom:0}
.step-index{font:var(--type-micro-uppercase);letter-spacing:1px;text-transform:uppercase;color:var(--steel);margin-bottom:var(--space-xs);display:block}
.no-js .step-card,.reduced .step-card{opacity:1}

@media (max-width:991.98px){
  .scrolly,.scrolly.figure-right{display:block}
  .scrolly-figure{top:calc(var(--nav-h) + 8px);min-height:0;z-index:1;background:var(--canvas);padding:var(--space-xs) 0;border-bottom:1px solid var(--hairline-soft)}
  .scrolly-figure.fig-compact svg,.scrolly-figure.fig-compact .fig-scale{max-height:44vh}
  .scrolly-steps{padding:var(--space-xl) 0 var(--space-section-sm);position:relative;z-index:2}
  .step{min-height:60vh;align-items:flex-end}
  .step-card{opacity:1;background:var(--canvas);border-color:var(--hairline-soft);box-shadow:var(--shadow-2)}
}

/* Stage stepper (non-scroll access to figure states) */
.stage-buttons{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--space-md)}
.stage-buttons button{appearance:none;width:36px;height:36px;border-radius:var(--rounded-md);border:1px solid var(--hairline-strong);background:var(--canvas);font:var(--type-caption-bold);color:var(--slate);cursor:pointer;transition:background var(--transition-fast),color var(--transition-fast)}
.stage-buttons button[aria-pressed="true"]{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
@media (max-width:767.98px){.stage-buttons button{width:44px;height:44px}}

figure{margin:0}
.fig-caption{font:var(--type-caption);color:var(--steel);margin-top:var(--space-sm)}
svg text{font-family:var(--font-ui)}
.svg-wrap{width:100%}
.svg-wrap svg{width:100%;height:auto;display:block;overflow:visible}

/* ---------- 9. Hero / Chapter 01 ---------- */
.hero{padding:var(--space-hero) 0 var(--space-section);position:relative;overflow:hidden}
.hero-question{font:italic 400 34px/1.25 var(--font-display);color:var(--slate);max-width:760px;margin:var(--space-xl) 0}
@media (max-width:575.98px){.hero-question{font-size:26px}}
.hero-meta{display:flex;flex-wrap:wrap;gap:var(--space-sm) var(--space-xl);font:var(--type-caption);color:var(--slate);align-items:center}
.hero-meta b{color:var(--ink)}
.scroll-cue{display:inline-flex;align-items:center;gap:var(--space-xs);font:var(--type-caption-bold);color:var(--ink);margin-top:var(--space-xxl)}
.scroll-cue svg{width:16px;height:16px}

/* ---------- 10. Chapter 02 — Evolution ---------- */
.evo-scope{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-top:var(--space-md)}
.evo-scope div{height:10px;border-radius:2px;background:var(--hairline-soft);transition:background var(--transition-base)}
.evo-scope div.on{background:var(--primary)}
.evo-scope div.on.soft{background:var(--sunshine-500)}
.evo-scope div.on.softer{background:var(--block-6)}
.evo-scope-labels{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-top:6px}
.evo-scope-labels span{font:var(--type-micro);color:var(--steel)}

/* ---------- 11. Chapter 03 — Layer explorer ---------- */
.explorer{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:var(--space-xxxl);align-items:start}
@media (max-width:991.98px){.explorer{grid-template-columns:1fr}}
.explorer-figure{position:sticky;top:calc(var(--nav-h) + 24px)}
@media (max-width:991.98px){.explorer-figure{position:relative;top:0}}
.slab{cursor:pointer;transition:opacity var(--transition-base)}
.slab.dim{opacity:.28}
.slab.is-selected .slab-top{stroke-width:2.5}
.layer-panel{min-height:540px}
.layer-panel .t-h2{margin:var(--space-xs) 0 var(--space-xs)}
.layer-core{font:italic 400 24px/1.3 var(--font-display);color:var(--charcoal);margin-bottom:var(--space-lg)}
.chip-row{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:var(--space-lg)}
.relations{list-style:none;padding:0;margin:0}
.relations li{display:grid;grid-template-columns:auto 1fr;gap:var(--space-sm);padding:var(--space-sm) 0;border-top:1px solid var(--hairline-soft);font:var(--type-body-sm);color:var(--charcoal)}
.relations li b{display:block;color:var(--ink);font-weight:700}
.swatch{width:12px;height:12px;border-radius:3px;margin-top:5px;border:1px solid rgba(0,0,0,.12)}
.layer-nav{display:flex;justify-content:space-between;gap:var(--space-sm);margin-top:var(--space-xl)}
details.card-pp{overflow:hidden;max-width:100%}
.table-scroll{display:block;width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.overview-table{min-width:520px;width:100%;border-collapse:collapse;font:var(--type-body-sm)}
.overview-table th,.overview-table td{padding:var(--space-sm) var(--space-sm);border-top:1px solid var(--hairline-soft);text-align:left;vertical-align:top}
.overview-table th{font:var(--type-caption-bold);color:var(--slate);text-transform:uppercase;letter-spacing:.5px}

/* ---------- 12. Chapter 04 — UI mock ---------- */
.ui-mock{padding:var(--space-lg);font:var(--type-body-sm)}
.ui-mock-bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-md);gap:var(--space-sm)}
.ui-mode{display:flex;align-items:center;gap:var(--space-xs);font:var(--type-caption-bold)}
.mode-track{position:relative;width:140px;height:8px;background:var(--hairline-soft);border-radius:4px}
.mode-track span{position:absolute;top:-4px;width:16px;height:16px;border-radius:50%;background:var(--primary);left:0;transform:translateX(-50%);border:2px solid var(--canvas);box-shadow:0 0 0 1px var(--primary)}
.ui-zone{border:1px solid var(--hairline-soft);border-radius:var(--rounded-md);padding:var(--space-sm) var(--space-md);margin-bottom:var(--space-sm);transition:opacity var(--transition-base),transform var(--transition-base),max-height 400ms ease,padding var(--transition-base),margin var(--transition-base),border-color var(--transition-base);overflow:hidden}
.ui-zone .zone-label{font:var(--type-micro-uppercase);letter-spacing:1px;text-transform:uppercase;color:var(--steel);display:block;margin-bottom:6px}
.ui-zone.collapsed{opacity:0;max-height:0 !important;padding-top:0;padding-bottom:0;margin-bottom:0;border-color:transparent}
.ui-zone.shrunk{opacity:.55}
.prompt-text{font:var(--type-body-sm);color:var(--charcoal);min-height:3em}
.prompt-text .caret{display:inline-block;width:2px;height:1em;background:var(--primary);vertical-align:-2px;margin-left:1px}
.word-count{font:var(--type-micro);color:var(--steel)}
.dir-chips{display:flex;flex-wrap:wrap;gap:6px}
.dir-chip{border:1px solid var(--beige-deep);background:var(--cream);border-radius:var(--rounded-full);padding:3px 10px;font:var(--type-micro);color:var(--on-cream)}
.dir-chip b{font-weight:700}
.ctx-learned{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.ctx-learned li{font:var(--type-caption);display:flex;gap:var(--space-xs);align-items:center}
.ctx-learned li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--primary);flex-shrink:0}
.meter{height:8px;background:var(--hairline-soft);border-radius:4px;overflow:hidden}
.meter span{display:block;height:100%;width:0;background:var(--primary);border-radius:4px}
.meter.soft span{background:var(--sunshine-500)}
.feed{list-style:none;margin:0;padding:0}
.feed li{display:flex;justify-content:space-between;align-items:center;gap:var(--space-sm);padding:6px 0;border-top:1px solid var(--hairline-soft);font:var(--type-caption)}
.feed li:first-child{border-top:0}
.status{font:var(--type-micro);padding:2px 8px;border-radius:var(--rounded-full);background:var(--surface);border:1px solid var(--hairline);white-space:nowrap}
.status.ok{background:var(--cream);border-color:var(--beige-deep)}
.status.wait{background:var(--canvas);border-color:var(--primary);color:var(--primary-deep)}
.status.paused{background:var(--ink);color:var(--on-dark);border-color:var(--ink)}
.panel-toggles{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-xs)}
@media (max-width:575.98px){.panel-toggles{grid-template-columns:1fr}}
.panel-toggles .form-check{min-height:36px}

/* ---------- 13. Chapter 05 — Context map ---------- */
.ctx-stage{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:var(--space-xl)}
@media (max-width:991.98px){.ctx-stage{grid-template-columns:1fr}}
.map-frame{position:relative;border-radius:var(--rounded-lg);overflow:hidden;border:1px solid var(--hairline);background:var(--surface)}
.map-frame canvas{display:block;width:100%;height:auto;aspect-ratio:16/11}
.map-legend{display:flex;flex-wrap:wrap;gap:var(--space-md);margin-top:var(--space-sm);font:var(--type-micro);color:var(--slate)}
.map-legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:4px;vertical-align:-1px}
.ctx-list{list-style:none;padding:0;margin:0;max-height:240px;overflow:auto;border:1px solid var(--hairline-soft);border-radius:var(--rounded-md)}
.ctx-list li{display:flex;align-items:center;gap:var(--space-xs);padding:6px var(--space-sm);border-top:1px solid var(--hairline-soft);font:var(--type-caption)}
.ctx-list li:first-child{border-top:0}
.ctx-list li .src{font:var(--type-micro);min-width:62px;color:var(--steel)}
.ctx-list li.stale{color:var(--steel);text-decoration:line-through;text-decoration-color:var(--muted)}
.ctx-list li .txt{flex:1}
.ctx-list li button{appearance:none;border:0;background:transparent;color:var(--slate);font:var(--type-micro);padding:4px 6px;border-radius:var(--rounded-sm);min-height:28px;cursor:pointer}
.ctx-list li button:hover{background:var(--surface);color:var(--ink)}
.ctx-empty{padding:var(--space-md);font:var(--type-caption);color:var(--steel)}
.meter-row{display:grid;grid-template-columns:110px 1fr 44px;align-items:center;gap:var(--space-sm);font:var(--type-caption)}
.meter-row output{font:var(--type-caption-bold);text-align:right}
.anticipation{border:1px dashed var(--primary);border-radius:var(--rounded-md);padding:var(--space-sm) var(--space-md);font:var(--type-caption);background:var(--canvas);transition:opacity var(--transition-base)}
.anticipation[hidden]{display:block !important;opacity:.35;border-color:var(--hairline-strong)}
.ctx-btns{display:flex;flex-wrap:wrap;gap:6px}
.ctx-btns .btn{white-space:normal;text-align:left}

/* ---------- 14. Chapter 06 — Harness ---------- */
.flow-node rect{transition:fill var(--transition-base),stroke var(--transition-base)}
.flow-node.blocked rect{stroke-dasharray:5 4}
.flow-node.blocked text{fill:var(--steel)}
.outcome-card{border-left:0}
.outcome-list{list-style:none;padding:0;margin:0}
.outcome-list li{display:flex;gap:var(--space-sm);padding:6px 0;font:var(--type-body-sm);color:var(--charcoal)}
.outcome-list li .mk{flex-shrink:0;width:20px;height:20px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font:var(--type-micro);font-weight:700;margin-top:1px}
.mk.go{background:var(--primary);color:var(--on-primary)}
.mk.stop{background:var(--ink);color:var(--on-dark)}
.mk.ask{background:var(--cream);color:var(--on-cream);border:1px solid var(--beige-deep)}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-sm)}
.kpi{background:var(--surface);border:1px solid var(--hairline-soft);border-radius:var(--rounded-md);padding:var(--space-sm)}
.kpi b{display:block;font:italic 400 30px/1.1 var(--font-display)}
.kpi span{font:var(--type-micro);color:var(--slate)}
.comp-tabs-panel{min-height:210px}

/* ---------- 15. Chapter 07 — Model ---------- */
.accordion{--bs-accordion-border-color:var(--hairline-soft);--bs-accordion-border-radius:var(--rounded-lg);--bs-accordion-inner-border-radius:var(--rounded-lg);--bs-accordion-btn-focus-box-shadow:none;--bs-accordion-active-bg:var(--cream);--bs-accordion-active-color:var(--ink);--bs-accordion-btn-padding-y:16px;--bs-accordion-body-padding-y:16px}
.accordion-button{font:var(--type-heading-5);gap:var(--space-sm)}
.accordion-button:focus-visible{outline:2px solid var(--primary);outline-offset:-2px}
.accordion-button::after{background-image:none;content:"+";font:600 22px/1 var(--font-ui);color:var(--primary);display:flex;align-items:center;justify-content:center;transform:none}
.accordion-button:not(.collapsed)::after{content:"\2212";transform:none}
.accordion-body{font:var(--type-body-sm);color:var(--charcoal)}
.radar-wrap{max-width:440px;margin:0 auto}
.latency{height:6px;background:var(--hairline-soft);border-radius:3px;overflow:hidden}
.latency span{display:block;height:100%;width:0;background:var(--primary)}
.fit-verdict{font:italic 400 28px/1.2 var(--font-display)}
.sample-out{font:var(--type-body-sm);color:var(--charcoal);background:var(--surface);border:1px solid var(--hairline-soft);border-radius:var(--rounded-md);padding:var(--space-sm) var(--space-md);min-height:96px}

/* ---------- 16. Chapter 08 — Governance ---------- */
.gov-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-md)}
@media (max-width:991.98px){.gov-grid{grid-template-columns:1fr}}
.gov-mech h3{font:var(--type-heading-5);margin-bottom:4px}
.gov-mech .strength{font:var(--type-micro);color:var(--steel);margin-bottom:var(--space-sm);display:block}
.draft-card{display:flex;justify-content:space-between;align-items:center;gap:var(--space-sm);padding:6px 0;border-top:1px solid var(--hairline-soft);font:var(--type-caption)}
.action-steps{list-style:none;padding:0;margin:0;counter-reset:s}
.action-steps li{display:grid;grid-template-columns:28px 1fr auto;gap:var(--space-sm);align-items:center;padding:10px 0;border-top:1px solid var(--hairline-soft);font:var(--type-body-sm)}
.action-steps li::before{counter-increment:s;content:counter(s);width:24px;height:24px;border-radius:50%;background:var(--surface);border:1px solid var(--hairline);display:flex;align-items:center;justify-content:center;font:var(--type-micro)}
.action-steps li.blocked .label{text-decoration:line-through;color:var(--steel)}
.reply-preview{font:var(--type-body-sm);background:var(--canvas);border:1px solid var(--hairline-soft);border-radius:var(--rounded-md);padding:var(--space-md);color:var(--charcoal);min-height:120px}
.reply-preview .disclosure{display:block;font:var(--type-micro);color:var(--steel);margin-top:var(--space-xs)}

/* ---------- 17. Chapter 09 — Emergence ---------- */
.emergence-stage{position:relative;border-radius:var(--rounded-xl);overflow:hidden;background:var(--surface-code);box-shadow:var(--shadow-3)}
.emergence-stage canvas{display:block;width:100%;height:440px}
@media (max-width:767.98px){.emergence-stage canvas{height:320px}}
.emergence-labels{position:absolute;inset:0;pointer-events:none}
.emergence-labels span{position:absolute;font:var(--type-micro-uppercase);letter-spacing:1px;text-transform:uppercase;color:var(--on-dark-muted)}
.emergence-labels .out{color:var(--on-dark)}
.variant-out{font:var(--type-body-md);color:var(--ink);background:var(--canvas);border:1px solid var(--hairline-soft);border-radius:var(--rounded-md);padding:var(--space-md);min-height:110px}
.variant-out.flagged{border-color:var(--primary)}
.run-history{display:flex;gap:6px;flex-wrap:wrap}
.run-history span{font:var(--type-micro);padding:2px 8px;border-radius:var(--rounded-full);background:var(--surface);border:1px solid var(--hairline)}
.run-history span.odd{border-color:var(--primary);color:var(--primary-deep);background:var(--canvas)}
.trace{list-style:none;padding:0;margin:0;position:relative}
.trace li{position:relative;padding:0 0 var(--space-md) 28px;font:var(--type-body-sm)}
.trace li::before{content:"";position:absolute;left:7px;top:6px;width:10px;height:10px;border-radius:50%;background:var(--canvas);border:2px solid var(--hairline-strong)}
.trace li::after{content:"";position:absolute;left:11px;top:18px;bottom:0;width:2px;background:var(--hairline-soft)}
.trace li:last-child::after{display:none}
.trace li.flag::before{border-color:var(--primary);background:var(--primary)}
.trace li .t{font:var(--type-micro);color:var(--steel);display:block}
.weight-row{display:grid;grid-template-columns:150px 1fr;gap:var(--space-sm);align-items:center;font:var(--type-caption);padding:4px 0}
.prov-chain{display:flex;flex-direction:column;gap:0}
.prov-step{border:1px solid var(--hairline-soft);border-radius:var(--rounded-md);padding:var(--space-sm) var(--space-md);font:var(--type-body-sm);background:var(--canvas)}
.prov-step .k{font:var(--type-micro-uppercase);letter-spacing:1px;text-transform:uppercase;color:var(--steel);display:block}
.prov-arrow{height:22px;display:flex;justify-content:center}
.prov-arrow svg{height:22px;width:12px}
.incident{height:100%}
.incident .src{font:var(--type-micro);color:var(--steel);margin-top:auto}

/* ---------- 18. Conclusion ---------- */
.leverage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-xxl);align-items:center}
@media (max-width:991.98px){.leverage{grid-template-columns:1fr}}
.lev-bar{display:grid;grid-template-columns:130px 1fr 40px;align-items:center;gap:var(--space-sm);font:var(--type-body-sm-medium);margin-bottom:var(--space-sm)}
.lev-bar output{font:var(--type-caption-bold);text-align:right}
.role-card .t-micro{text-transform:uppercase;letter-spacing:1px}
.closing{padding:var(--space-section-lg) 0;text-align:center}
.closing .t-display{max-width:980px;margin:0 auto var(--space-xl)}
.stat-cell{border-top:2px solid var(--primary);padding-top:var(--space-md)}

/* ---------- 19. Footer & signature ---------- */
.sunset-stripe{height:12px;background:var(--sunset-stripe)}
.site-footer{background:var(--footer-cream);padding:var(--space-section) 0 var(--space-xxl);font:var(--type-body-sm);color:var(--charcoal)}
.site-footer a{color:var(--primary-deep)}
.site-footer h2{font:var(--type-heading-5);margin-bottom:var(--space-sm)}
.site-footer ol{padding-left:1.1em}
.site-footer li{margin-bottom:6px}

/* ---------- 19b. SEO / AEO blocks ---------- */
.breadcrumb-pp ol{list-style:none;margin:0 0 var(--space-xl);padding:0;display:flex;flex-wrap:wrap;gap:var(--space-xs);font:var(--type-caption);color:var(--slate)}
.breadcrumb-pp li+li::before{content:"/";margin-right:var(--space-xs);color:var(--muted)}
.breadcrumb-pp a{color:var(--slate)}
.breadcrumb-pp a:hover{color:var(--ink)}
.breadcrumb-pp [aria-current]{color:var(--ink)}
.hero{padding-bottom:var(--space-section-sm)}
.summary-box .lede{max-width:none;color:var(--charcoal)}
.summary-list{padding-left:1.3em;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:6px var(--space-xxl);font:var(--type-body-sm);color:var(--charcoal)}
.summary-list a{color:var(--ink)}
.summary-list a:hover{color:var(--primary-deep)}
@media (max-width:767.98px){.summary-list{grid-template-columns:1fr}}
.takeaways{padding-left:1.1em;margin:0;font:var(--type-body-sm);color:var(--charcoal)}
.takeaways li{margin-bottom:6px}
.faq-list{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--space-section-sm);max-width:1100px}
@media (max-width:991.98px){.faq-list{grid-template-columns:1fr}}
.faq-item{padding:var(--space-xl) 0;border-top:1px solid var(--hairline)}
.faq-item h3{margin-bottom:var(--space-sm)}
.faq-a{color:var(--charcoal);margin:0}
.author-box{max-width:760px}
.author-box h2 a{color:var(--ink)}
.static-layers{margin:0}
.static-layers dt{font:var(--type-heading-5);margin-top:var(--space-md)}
.static-layers dt:first-child{margin-top:0}
.static-layers dd{margin:4px 0 0;font:var(--type-body-sm);color:var(--slate)}
.overview-table th[scope="row"]{font:var(--type-body-sm-medium);text-transform:none;letter-spacing:0;color:var(--ink)}
.overview-table th[scope="row"] a{color:var(--ink)}

/* Reserve diagram space before JS draws them (prevents layout shift / CLS) */
#introSvgWrap{aspect-ratio:660/700}
#evoSvgWrap{aspect-ratio:600/520}
#explorerSvgWrap{aspect-ratio:720/800}
#harnessSvgWrap{aspect-ratio:1000/250}
#radarWrap{aspect-ratio:440/400}
#levSvgWrap{aspect-ratio:420/460}
@media (max-width:767.98px){#harnessSvgWrap{aspect-ratio:360/820;max-width:360px;margin-left:auto;margin-right:auto}}
/* ---------- 20. Utility states ---------- */
.reveal{opacity:1}
.js .reveal-up{opacity:0;transform:translateY(16px)}
.reduced .reveal-up{opacity:1 !important;transform:none !important}
.sr-desc{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.static-fallback{display:none}
.no-webgl .static-fallback{display:block}