/* ============================================================
     PHASE 4, REFERENCES WIRED (spine + KB content complete)
     Locked design: dominant 11-step SPINE + Knowledge Base,
     joined by a slide-over Panel (A). Styling deliberately
     restrained; polish is Phase 6. Components (palette, callouts,
     code/copy) carried over from the prior build.
     ============================================================ */
  :root{
    --ink:#1c1f24; --ink-soft:#3b4048; --muted:#6b7280; --faint:#9aa1ab;
    --line:#e4e6ea; --line-soft:#eef0f3; --bg:#ffffff; --bg-soft:#f7f8fa;
    --accent:#1f5fae; --accent-soft:#eaf1fb; --accent-line:#cfe0f5;
    --ok:#1f7a4d; --ok-soft:#e9f4ee; --warn:#9a5b00; --warn-soft:#fbf2e3;
    --danger:#a13030; --danger-soft:#f8ecec; --story:#5a4a86; --story-soft:#efecf6;
    --code-bg:#1c2128; --code-ink:#e7ebf0;
    --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    --serif:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    --mono:"SFMono-Regular",ui-monospace,Menlo,Consolas,monospace;
    --rail:300px; --panel:480px; --measure:760px;
    --page:#f4f6f9; --surface:#ffffff; --card-shadow:0 1px 2px rgba(16,24,40,.04),0 1px 3px rgba(16,24,40,.03);
  }
  [data-theme="dark"]{
    --ink:#e6eaf0; --ink-soft:#bcc3cd; --muted:#8a919b; --faint:#5e6671;
    --line:#2d333c; --line-soft:#23282f; --bg:#13161b; --bg-soft:#1c2129;
    --accent:#5fa1e6; --accent-soft:#172538; --accent-line:#34507a;
    --ok:#54c08a; --ok-soft:#15291f; --warn:#d39a45; --warn-soft:#2c2412;
    --danger:#e08a8a; --danger-soft:#2e1b1b; --story:#9c8fd2; --story-soft:#201c30;
    --code-bg:#0d1014; --code-ink:#e6eaf0;
    --page:#0e1115; --surface:#171b21; --card-shadow:0 1px 2px rgba(0,0,0,.25);
  }
  /* Phase 6: dark-mode inline code / path chips, lift text + border contrast
     (light-mode navy code text and faint borders read poorly on the dark chip bg) */
  [data-theme="dark"] code{color:#9ec9f5;border-color:var(--faint)}
  [data-theme="dark"] .path{color:var(--ink);border-color:var(--faint)}
  *{box-sizing:border-box}
  html{scroll-behavior:auto}
  body{margin:0;background:var(--page);color:var(--ink);font-family:var(--sans);
    font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}

  /* ---------- Topbar ---------- */
  .topbar{position:sticky;top:0;z-index:40;height:64px;display:flex;align-items:center;gap:14px;
    padding:0 20px;background:var(--bg);border-bottom:1px solid var(--line)}
  .brandblock{display:flex;align-items:center;gap:11px;min-width:0;cursor:pointer}
  .brandmark{flex:none;width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,#fb5277,#e11d48);display:inline-flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 1px 3px rgba(225,29,72,.3)}
  .brandmark svg{width:19px;height:19px}
  .brandtext{display:flex;flex-direction:column;min-width:0;line-height:1.22}
  .brandname{font-weight:700;letter-spacing:.2px;font-size:13.5px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .brandname .arrow{color:var(--accent)}
  .brandname .sub{color:var(--faint);font-weight:500}
  .brandby{font-size:10.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .brandby b{color:#e11d48;font-weight:700}
  .menu-btn{display:none;border:1px solid var(--line);background:var(--bg);border-radius:8px;padding:6px 10px;font-size:13px;cursor:pointer;color:var(--ink)}
  .theme-btn,.print-btn{border:1px solid var(--line);background:var(--bg);border-radius:8px;width:34px;height:32px;font-size:15px;line-height:1;cursor:pointer;color:var(--ink-soft);display:inline-flex;align-items:center;justify-content:center}
  .theme-btn:hover,.print-btn:hover{color:var(--accent);border-color:var(--accent-line)}
  /* ---- top navigation (8c) ---- */
  .topnav{display:flex;align-items:center;gap:2px;flex:none}
  .topnavlink{display:inline-flex;align-items:center;padding:7px 12px;border-radius:7px;font-size:13.5px;font-weight:500;
    color:var(--ink-soft);cursor:pointer;text-decoration:none;white-space:nowrap;border:1px solid transparent;line-height:1}
  .topnavlink:hover{background:var(--line-soft);color:var(--ink)}
  .topnavlink.active{background:var(--accent-soft);color:var(--accent);font-weight:600}
  #aboutNavLink.active{background:#fdeef2;color:#e11d48;font-weight:600}
  [data-theme="dark"] #aboutNavLink.active{background:rgba(225,29,72,.14)}
  .railmore-about .ic{color:#e11d48}

  /* ---------- Layout ---------- */
  .layout{display:flex;align-items:flex-start}
  .rail{position:sticky;top:64px;width:var(--rail);height:calc(100vh - 64px);overflow-y:auto;
    border-right:1px solid var(--line);background:var(--page);padding:14px 0 60px}
  .rail .grp{font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--ink);font-weight:800;
    margin:6px 18px 8px;display:flex;align-items:center;gap:8px}
  .rail .grp.do{color:var(--accent)}
  .rail .grp.kb{margin-top:0}
  .railmore{padding-bottom:14px;margin-bottom:6px;border-bottom:1px solid var(--line)}

  .steplink{display:flex;align-items:flex-start;gap:11px;padding:8px 18px;cursor:pointer;color:var(--ink-soft);
    font-size:14px;border-left:3px solid transparent;text-decoration:none;line-height:1.35}
  .steplink:hover{background:var(--line-soft);color:var(--ink)}
  .steplink.active{background:var(--accent-soft);color:var(--accent);border-left-color:var(--accent);font-weight:600}
  .steplink .sn{font-variant-numeric:tabular-nums;font-size:12px;font-weight:700;color:#fff;background:var(--faint);
    border-radius:5px;min-width:22px;height:20px;display:flex;align-items:center;justify-content:center;flex:0 0 auto;margin-top:1px}
  .steplink.active .sn{background:var(--accent)}
  .steplink.done .sn{background:var(--ok)}

  .navlink{display:flex;align-items:baseline;gap:10px;padding:8px 18px;cursor:pointer;color:var(--ink-soft);
    font-size:14px;border-left:3px solid transparent;text-decoration:none}
  .navlink:hover{background:var(--line-soft);color:var(--ink)}
  .navlink.active{background:var(--accent-soft);color:var(--accent);border-left-color:var(--accent);font-weight:600}
  .navlink .ic{color:var(--faint)}
  .aboutlink{display:flex;align-items:flex-start;gap:11px;padding:8px 18px;cursor:pointer;color:var(--ink-soft);font-size:14px;border-left:3px solid transparent;text-decoration:none;line-height:1.35}
  .aboutlink:hover{background:var(--line-soft);color:var(--ink)}
  .aboutlink.active{background:#fdeef2;color:#e11d48;border-left-color:#e11d48;font-weight:600}
  [data-theme="dark"] .aboutlink.active{background:rgba(225,29,72,.14)}
  .aboutlink .sn{font-variant-numeric:tabular-nums;font-size:12px;font-weight:700;color:#fff;background:#e11d48;border-radius:5px;min-width:22px;height:20px;display:flex;align-items:center;justify-content:center;flex:0 0 auto;margin-top:1px}

  .main{flex:1;min-width:0;padding:28px 36px 110px}
  .appfoot{max-width:var(--measure);margin:64px auto 0;padding:22px 0 8px;border-top:1px solid var(--line);text-align:center}
  .af-credit{font-size:13px;color:var(--muted)}
  .af-credit b{color:#e11d48;font-weight:700}
  .af-sep{color:var(--faint);margin:0 5px}
  .af-note{margin-top:6px;font-size:12px;color:var(--faint);font-style:italic}

  /* ---------- Home / landing (7c) ---------- */
  .home{max-width:720px;margin:36px auto 8px;text-align:center;padding:18px 16px 4px}
  .home-mark{display:inline-flex;width:84px;height:84px;border-radius:22px;background:linear-gradient(135deg,#fb5277,#e11d48);align-items:center;justify-content:center;color:#fff;box-shadow:0 12px 30px rgba(225,29,72,.28);margin-bottom:26px}
  .home-mark svg{width:46px;height:46px}
  .home-title{font-size:37px;line-height:1.16;font-weight:800;letter-spacing:-.6px;margin:0 0 18px;color:var(--ink)}
  .home-title .ht-line{display:block}
  .home-title .arrow{color:var(--accent)}
  .home-title-mg{display:block;color:#e11d48}
  .home-sub{font-size:18px;line-height:1.6;color:var(--muted);margin:0 auto 34px;max-width:548px}
  .home-stats{display:flex;justify-content:center;gap:50px;margin:0 0 36px}
  .hstat{min-width:72px}
  .hstat .hn{font-size:38px;font-weight:800;color:#e11d48;line-height:1}
  .hstat .hl{margin-top:9px;font-size:14px;color:var(--muted);white-space:nowrap}
  .home-cta{display:inline-flex;align-items:center;gap:8px;background:#e11d48;color:#fff;border:none;border-radius:12px;padding:15px 34px;font-size:16px;font-weight:700;cursor:pointer;box-shadow:0 6px 18px rgba(225,29,72,.26);transition:background .15s}
  .home-cta:hover{background:#c1133b}
  .home-scope{margin:34px auto 0;padding-top:22px;border-top:1px solid var(--line);font-size:13px;line-height:1.6;color:var(--faint);max-width:540px}
  @media(max-width:560px){
    .home-title{font-size:32px}
    .home-sub{font-size:16px}
    .home-stats{gap:32px}
    .hstat .hn{font-size:32px}
    .home-mark{width:72px;height:72px}
    .home-mark svg{width:40px;height:40px}
  }

  /* ---------- About the Author (full page, 7d) ---------- */
  .author-page{max-width:700px;margin:0 auto}
  .author-header{text-align:center;padding:26px 0 30px;border-bottom:1px solid var(--line);margin-bottom:30px}
  .author-title{font-size:28px;font-weight:800;margin-bottom:6px;color:#e11d48}
  .author-subtitle{font-size:14px;color:var(--ink-soft);margin-bottom:4px}
  .author-exp{font-size:13px;color:var(--muted)}
  .author-links{display:flex;justify-content:center;gap:12px;margin-top:18px}
  .author-link{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;background:var(--bg-soft);border:1px solid var(--line);border-radius:7px;color:var(--ink);text-decoration:none;font-size:13px}
  .author-link:hover{border-color:#e11d48;color:#e11d48}
  .author-section{margin-bottom:28px}
  .author-section-title{font-size:18px;font-weight:700;margin-bottom:12px;color:var(--ink);display:flex;align-items:center;gap:8px}
  .author-section p{font-size:14.5px;color:var(--ink-soft);line-height:1.7;margin:0 0 12px}
  .author-list{list-style:none;padding:0;margin:12px 0}
  .author-list li{font-size:13.5px;color:var(--ink-soft);padding:6px 0 6px 22px;position:relative}
  .author-list li::before{content:"→";position:absolute;left:0;color:#e11d48;font-weight:700}
  .company-list{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
  .company-tag{background:var(--bg-soft);border:1px solid var(--line);padding:6px 12px;border-radius:6px;font-size:12px;color:var(--ink-soft)}
  .company-tag.adobe{background:#fdeef2;color:#e11d48;font-weight:600;border-color:#f7cdd8}
  .author-quote{background:#fdeef2;border-left:3px solid #e11d48;padding:16px 20px;margin:20px 0;border-radius:0 8px 8px 0}
  .author-quote p{font-size:14.5px;color:var(--ink);font-style:italic;margin:0;line-height:1.7}
  .cert-badge{display:flex;align-items:center;gap:16px;background:var(--bg-soft);border:1px solid var(--line);padding:16px;border-radius:9px;margin:8px 0}
  .cert-icon{font-size:32px;line-height:1}
  .cert-info{flex:1}
  .cert-name{font-size:14.5px;font-weight:700;color:var(--ink)}
  .cert-id{font-size:12px;color:var(--muted)}
  [data-theme="dark"] .company-tag.adobe,[data-theme="dark"] .author-quote{background:rgba(225,29,72,.14);border-color:rgba(225,29,72,.35)}
  .view{display:none;animation:fade .18s ease}
  .view.active{display:block;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:30px 38px;box-shadow:var(--card-shadow)}
  @keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
  .wrap{max-width:var(--measure)}

  /* ---------- Typography ---------- */
  .eyebrow{font-size:11.5px;letter-spacing:1.4px;text-transform:uppercase;color:var(--accent);font-weight:700}
  h1{font-family:var(--serif);font-size:33px;line-height:1.18;margin:.3em 0 .25em;letter-spacing:-.3px}
  h2{font-family:var(--serif);font-size:23px;margin:1.5em 0 .4em;letter-spacing:-.2px}
  h3{font-size:17px;margin:1.4em 0 .3em}
  p{margin:.6em 0}
  .lead{font-size:18px;color:var(--ink-soft)}
  .intent{font-size:17px;color:var(--ink-soft);margin:.2em 0 1.1em}
  code{font-family:var(--mono);font-size:.88em;background:var(--bg-soft);border:1px solid var(--line);
    border-radius:5px;padding:1px 5px;color:#0b3a66}

  /* ---------- "Why?" adjoining row (the bridge to KB) ---------- */
  .why-row{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 22px;padding:12px 14px;background:var(--accent-soft);
    border:1px solid var(--accent-line);border-radius:10px}
  .why-row .wl{font-size:11px;letter-spacing:.5px;text-transform:uppercase;color:var(--accent);font-weight:700;
    align-self:center;margin-right:4px}
  .why{display:inline-flex;align-items:center;gap:5px;font-size:13.5px;color:var(--accent);background:var(--bg);
    border:1px solid var(--accent-line);border-radius:999px;padding:4px 12px;cursor:pointer;text-decoration:none}
  .why:hover{background:var(--accent);color:var(--bg)}
  .why .arr{font-size:11px;opacity:.8}

  /* ---------- Citations ---------- */
  .cite{color:var(--accent);text-decoration:none;font-variant-numeric:tabular-nums;font-size:11px;
    vertical-align:super;cursor:pointer;padding:0 1px}
  .cite:hover{text-decoration:underline}

  /* ---------- Infographics (Phase 5) ---------- */
  .fig-svg{margin:22px 0;border:1px solid var(--line);border-radius:12px;background:var(--bg);padding:18px 18px 12px}
  .fig-svg svg{display:block;width:100%;height:auto}
  .fig-svg text{font-family:var(--sans);fill:var(--ink)}
  .fig-svg .mn{font-family:var(--mono)}
  .fig-svg figcaption{margin-top:10px;font-size:12.5px;color:var(--muted);text-align:center;line-height:1.5}
  .fig-svg figcaption b{color:var(--ink-soft)}

  /* ---------- Placeholders ---------- */
  .ph{border:1.5px dashed var(--line);border-radius:10px;padding:22px;margin:18px 0;color:var(--muted);
    background:repeating-linear-gradient(45deg,#fcfcfd,#fcfcfd 10px,#f6f7f9 10px,#f6f7f9 20px);font-size:14px}
  .ph b{color:var(--ink-soft)}
  .ph.fig{border-color:var(--accent-line);color:var(--ink-soft)}

  /* ---------- Step navigation (prev/next) ---------- */
  .stepnav{display:flex;justify-content:space-between;gap:12px;margin-top:42px;padding-top:20px;border-top:1px solid var(--line)}
  .stepnav button{font-family:inherit;font-size:14px;border:1px solid var(--line);background:var(--bg);border-radius:9px;
    padding:10px 16px;cursor:pointer;color:var(--ink-soft);max-width:48%;text-align:left;line-height:1.3}
  .stepnav button:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
  .stepnav button:disabled{opacity:.4;cursor:default}
  .stepnav button.next{text-align:right;border-color:var(--accent);color:var(--accent);font-weight:600}
  .stepnav .lbl{display:block;font-size:11px;letter-spacing:.4px;text-transform:uppercase;color:var(--faint)}

  /* ---------- Progress bar (top of spine view) ---------- */
  .progress{display:flex;align-items:center;gap:12px;margin-bottom:8px}
  .progress .track{flex:1;height:5px;background:var(--line);border-radius:3px;overflow:hidden}
  .progress .fill{height:100%;background:var(--accent);width:0;transition:width .25s}
  .progress .pc{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}

  /* ---------- KB browse ---------- */
  .kb-intro{font-size:18px;color:var(--ink-soft);max-width:var(--measure)}
  .kb-grp-h{font-family:var(--serif);font-size:20px;margin:1.6em 0 .2em}
  .kb-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;margin:.8em 0}
  .kb-card{border:1px solid var(--line);border-radius:11px;padding:14px 16px;background:var(--bg);cursor:pointer;text-decoration:none;color:var(--ink)}
  .kb-card:hover{border-color:var(--accent);background:var(--bg-soft)}
  .kb-card .t{font-weight:700;font-size:14.5px}
  .kb-card .d{font-size:12.5px;color:var(--muted);margin-top:3px}

  /* KB topic source blocks live here (hidden); panel & browse read from them */
  .kbtopic{display:none}
  .kbtopic h2{margin-top:.2em}

  /* ---------- Slide-over Panel (A) ---------- */
  .scrim{position:fixed;inset:0;background:rgba(20,24,30,.34);z-index:60;opacity:0;pointer-events:none;transition:opacity .2s}
  body.panel-open .scrim{opacity:1;pointer-events:auto}
  .panel{position:fixed;top:0;right:0;height:100vh;width:var(--panel);max-width:92vw;background:var(--bg);z-index:70;
    box-shadow:-12px 0 40px rgba(0,0,0,.18);transform:translateX(100%);transition:transform .24s cubic-bezier(.4,0,.2,1);
    display:flex;flex-direction:column}
  body.panel-open .panel{transform:none}
  .panel-head{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line);flex:0 0 auto}
  .panel-head .pk{font-size:11px;letter-spacing:.7px;text-transform:uppercase;color:var(--accent);font-weight:700}
  .panel-head .px{margin-left:auto;border:1px solid var(--line);background:var(--bg);border-radius:8px;width:32px;height:32px;
    cursor:pointer;font-size:16px;color:var(--muted);line-height:1}
  .panel-head .px:hover{border-color:var(--accent);color:var(--accent)}
  .panel-body{padding:20px 22px 40px;overflow-y:auto}
  .panel-body h2{font-size:21px;margin-top:0}
  .panel-foot{margin-top:18px;padding-top:14px;border-top:1px solid var(--line-soft)}
  .panel-foot a{color:var(--accent);text-decoration:none;font-size:13.5px;cursor:pointer}
  .panel-foot a:hover{text-decoration:underline}

  /* ---------- References ---------- */
  .reflist{list-style:none;padding:0;margin:1em 0}
  .reflist li{padding:9px 12px;border-bottom:1px solid var(--line-soft);font-size:13.5px;display:flex;gap:10px}
  .reflist li .rn{font-variant-numeric:tabular-nums;font-weight:700;color:var(--accent);flex:0 0 auto}
  .reflist li.hot{background:var(--accent-soft);border-radius:7px}
  .refblock-h{font-size:12px;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);font-weight:700;margin:1.4em 0 .3em}
  .reflist li span:last-child{display:flex;flex-direction:column;gap:2px}
  .reflist a{color:var(--accent);text-decoration:none}
  .reflist a:hover{text-decoration:underline}
  .ref-host{font-size:11px;color:var(--faint);font-variant-numeric:tabular-nums}

  /* ---------- Responsive ---------- */
  .railmore,.railmore-h{display:none}
  @media(max-width:1000px){
    .rail{position:fixed;top:64px;left:0;z-index:65;transform:translateX(-100%);transition:transform .2s;box-shadow:0 10px 40px rgba(0,0,0,.18)}
    body.nav-open .rail{transform:none}
    body.nav-open .scrim{opacity:1;pointer-events:auto}
    .menu-btn{display:inline-block}
    .main{padding:28px 20px 100px}
    .view.active{padding:24px 22px}
    .topnav{display:none}
    .railmore{display:block}
    .railmore-h{display:block}
  }
  @media(max-width:560px){
    .topbar{height:54px;padding:0 12px;gap:10px}
    .menu-btn{padding:7px 11px}
    .brandname{font-size:12.5px}
    .brandname .sub{display:none}
    .brandby{font-size:10px}
    .brandmark{width:30px;height:30px}
    .brandmark svg{width:17px;height:17px}
    .main{padding:22px 16px 92px}
    .view.active{padding:18px 16px;border-radius:11px}
    .panel{width:100vw;max-width:100vw}
    h1{font-size:27px}
    .narrative{font-size:16px}
    /* never let a long token force horizontal page scroll */
    .narrative,.astep .al,.kbtopic p,.panel-body p,.khook,.mini-tbl td{overflow-wrap:anywhere}
    .narrative code,.astep code,.al code,.path,.kbtopic code,.panel-body code{overflow-wrap:anywhere;word-break:break-word}
    .gmap,.code pre{font-size:11.5px}
    /* comfortable tap targets */
    .why-row{padding:11px 12px}
    .why{font-size:13px;padding:7px 11px}
    .steplink{padding:11px 16px}
    .actionblock{padding:6px 15px 13px}
    .view.rebalanced .astep .al{font-size:16px}
    .call{padding:9px 12px}
    /* figures: stay legible, scroll within the card rather than shrink to unreadable */
    .fig-svg{padding:14px 12px 10px;overflow-x:auto;-webkit-overflow-scrolling:touch}
    .fig-svg svg{min-width:560px}
    .fig-svg figcaption{position:sticky;left:0;width:calc(100vw - 56px);box-sizing:border-box}
  }

  /* ---------- Spine content (Phase 2) ---------- */
  .do-intro{font-size:15px;color:var(--ink-soft);margin:.2em 0 1.1em}
  .astep{display:grid;grid-template-columns:28px 1fr;gap:0 12px;padding:10px 0;border-bottom:1px solid var(--line-soft)}
  .astep:last-of-type{border-bottom:0}
  .astep .an{width:24px;height:24px;border-radius:50%;background:var(--accent-soft);color:var(--accent);
    border:1px solid var(--accent);font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;margin-top:1px}
  .astep .al{margin:2px 0;font-size:14.5px;line-height:1.5}
  .astep .lbl{display:inline-block;font-size:10px;letter-spacing:.6px;text-transform:uppercase;color:var(--faint);font-weight:700;min-width:46px}
  .path{font-family:var(--mono);font-size:12.5px;background:var(--bg-soft);border:1px solid var(--line);border-radius:6px;padding:2px 7px;color:var(--ink-soft)}
  .gstep{margin:20px 0 4px;font-size:15px;font-weight:700;color:var(--ink);border-left:3px solid var(--accent);padding-left:10px}
  .gmap{font-family:var(--mono);font-size:12.5px;white-space:pre;background:var(--bg-soft);border:1px solid var(--line);border-radius:7px;padding:9px 11px;margin:5px 0;color:var(--ink-soft);overflow:auto;line-height:1.6}
  .call{border:1px solid var(--line);border-left-width:4px;border-radius:8px;padding:11px 15px;margin:14px 0;background:var(--bg-soft);font-size:14.5px}
  .call .ct{display:block;font-weight:700;font-size:12px;letter-spacing:.5px;text-transform:uppercase;margin-bottom:3px}
  .call p{margin:.3em 0}
  .call.check{border-left-color:var(--ok);background:var(--ok-soft)} .call.check .ct{color:var(--ok)}
  .call.warn{border-left-color:var(--warn);background:var(--warn-soft)} .call.warn .ct{color:var(--warn)}
  .call.danger{border-left-color:var(--danger);background:var(--danger-soft)} .call.danger .ct{color:var(--danger)}
  .call.margin{border-left-color:var(--faint);background:var(--bg);color:var(--muted);font-size:13.5px} .call.margin .ct{color:var(--muted)}
  .code{position:relative;margin:10px 0}
  .code pre{margin:0;background:var(--code-bg);color:var(--code-ink);border-radius:9px;padding:13px 15px;overflow:auto;font-family:var(--mono);font-size:12.5px;line-height:1.55}
  .code .copy{position:absolute;top:7px;right:7px;background:#2b323b;color:#c9d1d9;border:1px solid #3a424c;border-radius:6px;font-size:11px;padding:3px 9px;cursor:pointer;opacity:.85}
  .code .copy:hover{opacity:1}.code .copy.done{color:#7fe0a6;border-color:#2f6b48}
  .mini-tbl{width:100%;border-collapse:collapse;margin:10px 0;font-size:13.5px}
  .mini-tbl td{padding:6px 9px;border-bottom:1px solid var(--line-soft);vertical-align:top}
  .mini-tbl td:first-child{font-weight:700;white-space:nowrap;color:var(--accent);width:78px}
  /* narrative head + mistake callout (Phase 2b) */
  .narrative{font-size:16.5px;line-height:1.72;color:var(--ink-soft);margin:.35em 0 1.05em}
  .narrative b{color:var(--ink)}
  .call.mistake{border-left-color:#9a3b2f;background:#fbeae3} .call.mistake .ct{color:#9a3b2f}
  /* ---------- Phase 5.5: action-dominant rebalance (scoped) ---------- */
  .actionblock{position:relative;margin:.1em 0 1.5em;padding:6px 22px 14px;
    background:var(--accent-soft);border:1px solid var(--accent-line);border-left:5px solid var(--accent);border-radius:12px}
  .actionblock .abh{font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:var(--accent);font-weight:700;margin:14px 0 4px}
  .view.rebalanced .astep{grid-template-columns:34px 1fr;gap:0 15px;padding:14px 0;border-bottom:1px solid var(--accent-line)}
  .view.rebalanced .astep:last-of-type{border-bottom:0;padding-bottom:4px}
  .view.rebalanced .astep .an{width:30px;height:30px;font-size:14px;font-weight:700;background:var(--accent);color:var(--bg);border-color:var(--accent);margin-top:2px}
  .view.rebalanced .astep .al{font-size:17px;line-height:1.55;margin:4px 0;color:var(--ink)}
  .view.rebalanced .astep .al b{color:var(--ink);font-weight:700}
  .view.rebalanced .astep .lbl{font-size:10.5px;min-width:54px;color:var(--accent)}
  .view.rebalanced .astep .path{font-size:13.5px;background:var(--bg);border-color:var(--accent-line);color:var(--accent);font-weight:600;padding:3px 9px}
  .view.rebalanced .astep code{font-size:13.5px}
  /* demote the survivable callouts; keep danger distinct but not dominant */
  .view.rebalanced .call{font-size:13px;padding:8px 13px;margin:11px 0;border-left-width:3px}
  .view.rebalanced .call .ct{font-size:11px}
  .view.rebalanced .call.mistake{background:var(--bg);border-left-color:#c08a7f}
  .view.rebalanced .call.check{background:var(--bg);border-left-color:var(--ok)}
  .view.rebalanced .call.danger{background:var(--danger-soft);border-left-width:4px}
  /* KB topic opening (Phase 3) */
  .kbtopic .khook,.panel-body .khook{font-size:16px;color:var(--ink);line-height:1.7;margin:.1em 0 .8em}
  .kbtopic p,.panel-body p{margin:.6em 0}
  /* full-width KB topic view + expand (Phase 3) */
  .kb-back{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;color:var(--accent);cursor:pointer;text-decoration:none;margin-bottom:10px}
  .kb-back:hover{text-decoration:underline}
  #kbTopicWrap h2{font-family:var(--serif);font-size:28px;margin:.1em 0 .5em}
  #kbTopicWrap .khook{font-size:17px}
  .kb-expand{margin-top:22px}
  .kb-expand-btn{display:inline-flex;align-items:center;gap:8px;font-family:inherit;font-size:14px;font-weight:600;color:var(--accent);background:var(--accent-soft);border:1px solid var(--accent-line);border-radius:9px;padding:10px 16px;cursor:pointer}
  .kb-expand-btn:hover{background:var(--accent);color:var(--bg)}
  .kb-full{margin-top:20px;padding-top:20px;border-top:2px solid var(--line)}
  .kb-full[hidden]{display:none}
  .kb-full .fulltag{font-size:11px;letter-spacing:.7px;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:10px}
  .kb-full h3{font-size:18px;font-family:var(--serif);margin:1.4em 0 .3em}
  .arch{margin:18px 0 4px;border:1px solid var(--accent-line);border-left:4px solid var(--accent);background:var(--accent-soft);border-radius:8px;padding:12px 15px}
  .arch .at{display:block;font-size:11px;letter-spacing:.6px;text-transform:uppercase;color:var(--accent);font-weight:800;margin-bottom:4px}
  .arch p{margin:.2em 0;font-size:14.5px;color:var(--ink)}
  /* ---------- Phase 6c: Search (command palette) ---------- */
  .search-btn{flex:1 1 auto;max-width:460px;margin:0 auto;border:1px solid var(--line);background:var(--bg-soft);border-radius:10px;height:38px;padding:0 14px;font-size:14px;line-height:1;cursor:pointer;color:var(--faint);display:inline-flex;align-items:center;gap:10px;text-align:left}
  .search-btn:hover{border-color:var(--accent-line);background:var(--bg)}
  .search-btn .sl{flex:1;font-weight:400;color:var(--faint)}
  .search-btn .sk{font-size:11px;color:var(--faint);border:1px solid var(--line);border-radius:5px;padding:2px 7px;letter-spacing:.3px}
  .search-overlay{position:fixed;inset:0;z-index:80;background:rgba(15,18,23,.45);display:none;justify-content:center;align-items:flex-start;padding:72px 16px 16px}
  .search-overlay:not([hidden]){display:flex}
  [data-theme="dark"] .search-overlay{background:rgba(0,0,0,.6)}

  /* ---------- About the Author (overlay modal, 7d) ---------- */
  .about-overlay{position:fixed;inset:0;z-index:90;background:rgba(15,18,23,.5);display:none;justify-content:center;align-items:center;padding:24px}
  .about-overlay:not([hidden]){display:flex}
  [data-theme="dark"] .about-overlay{background:rgba(0,0,0,.62)}
  /* Floating author icon (7e) */
  .author-fab{position:fixed;bottom:24px;right:24px;width:54px;height:54px;border-radius:50%;background:#e11d48;color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(225,29,72,.4);z-index:50;transition:transform .18s,box-shadow .18s}
  .author-fab:hover{transform:scale(1.08);box-shadow:0 9px 24px rgba(225,29,72,.5)}
  .author-fab svg{width:25px;height:25px}
  .about-card{position:relative;background:var(--bg);color:var(--ink);max-width:560px;width:100%;max-height:88vh;overflow-y:auto;border-radius:16px;padding:34px 34px 30px;box-shadow:0 30px 80px rgba(0,0,0,.34);border:1px solid var(--line)}
  .about-x{position:absolute;top:14px;right:16px;border:none;background:none;font-size:26px;line-height:1;color:var(--faint);cursor:pointer;padding:4px}
  .about-x:hover{color:var(--ink)}
  .about-head{display:flex;align-items:center;gap:16px;margin-bottom:20px}
  .about-avatar{flex:none;width:60px;height:60px;border-radius:50%;background:linear-gradient(135deg,#fb5277,#e11d48);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:21px;letter-spacing:.5px}
  .about-name{font-size:21px;font-weight:800;color:var(--ink)}
  .about-role{font-size:13px;color:#e11d48;font-weight:600;margin-top:3px}
  .about-body p{font-size:15px;line-height:1.7;color:var(--ink-soft);margin:0 0 14px}
  .about-cta{display:inline-flex;align-items:center;gap:6px;margin-top:6px;color:#fff;background:#e11d48;border-radius:10px;padding:11px 22px;font-size:14px;font-weight:700;text-decoration:none}
  .about-cta:hover{background:#c1133b}
  .search-box{width:100%;max-width:640px;background:var(--bg);border:1px solid var(--line);border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.28);overflow:hidden;display:flex;flex-direction:column;max-height:calc(100vh - 120px)}
  .search-in{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--line)}
  .search-in svg{color:var(--muted);flex:none}
  .search-in input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--ink);font-size:16px;font-family:var(--sans)}
  .search-in input::placeholder{color:var(--faint)}
  .search-in kbd{font-size:11px;color:var(--faint);border:1px solid var(--line);border-radius:5px;padding:2px 6px;flex:none}
  .search-results{overflow-y:auto;padding:6px}
  .search-hint{padding:18px 14px;color:var(--muted);font-size:13.5px}
  .sresult{display:flex;gap:12px;align-items:flex-start;padding:10px 12px;border-radius:9px;cursor:pointer;text-decoration:none}
  .sresult:hover,.sresult.sel{background:var(--accent-soft)}
  .sbadge{flex:none;font-size:10px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;padding:3px 8px;border-radius:999px;margin-top:2px;white-space:nowrap}
  .sbadge.step{color:var(--accent);background:var(--bg);border:1px solid var(--accent-line)}
  .sbadge.kb{color:var(--story);background:var(--bg);border:1px solid var(--story)}
  .sbody{display:flex;flex-direction:column;gap:3px;min-width:0}
  .stitle{font-size:15px;font-weight:600;color:var(--ink)}
  .ssnip{font-size:13px;color:var(--muted);line-height:1.5;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .sresult mark{background:var(--warn-soft);color:var(--ink);border-radius:3px;padding:0 1px}
  @media(max-width:560px){
    .search-btn .sk,.search-btn .sl{display:none}
    .search-btn{flex:0 0 auto;width:34px;max-width:none;height:34px;margin-left:auto;padding:0;justify-content:center;border-radius:8px}
    .author-fab{width:48px;height:48px;bottom:18px;right:18px}
    .author-fab svg{width:22px;height:22px}
    .search-overlay{padding:12px 10px 10px}
    .search-box{max-height:calc(100vh - 24px)}
  }
  /* ---------- Phase 6d: Print / Save-as-PDF (current view only + table thead/tfoot running header/footer) ---------- */
  .print-doc{ display:none }
  @media print{
    /* force the light palette regardless of the active theme */
    :root, [data-theme="dark"]{
      --ink:#1c1f24; --ink-soft:#3b4048; --muted:#6b7280; --faint:#9aa1ab;
      --line:#e4e6ea; --line-soft:#eef0f3; --bg:#ffffff; --bg-soft:#f7f8fa;
      --accent:#1f5fae; --accent-soft:#eaf1fb; --accent-line:#cfe0f5;
      --ok:#1f7a4d; --ok-soft:#e9f4ee; --warn:#9a5b00; --warn-soft:#fbf2e3;
      --danger:#a13030; --danger-soft:#f8ecec; --story:#5a4a86; --story-soft:#efecf6;
      --code-bg:#1c2128; --code-ink:#e7ebf0;
    }
    html,body{ background:#fff }
    *{ -webkit-print-color-adjust:exact; print-color-adjust:exact }
    /* hide the live app entirely; print the mirrored single-view document instead */
    .topbar, .layout, .scrim, .panel, .search-overlay, .about-overlay, .author-fab{ display:none !important }
    /* the print document: a table so thead/tfoot REPEAT on every page and RESERVE their height (no overlap) */
    .print-doc{ display:table !important; width:100%; border-collapse:collapse; table-layout:fixed }
    .print-doc thead{ display:table-header-group }
    .print-doc tfoot{ display:table-footer-group }
    .print-doc td{ padding:0 }
    .print-doc thead td{ border-bottom:2px solid #e11d48; padding-bottom:5px }
    .print-doc thead .ph-row{ display:flex; justify-content:space-between; align-items:baseline; gap:14px }
    .print-doc thead .ph-title{ font-size:9pt; font-weight:600; color:#5b6370 }
    .print-doc thead .ph-ctx{ font-size:8pt; color:#9aa1ab; white-space:nowrap }
    .print-doc thead .ph-by{ font-size:8pt; color:#9aa1ab; margin-top:2px }
    .print-doc tfoot td{ border-top:2px solid #e11d48; padding-top:5px; text-align:center }
    .print-doc tfoot span{ font-size:8pt; color:#9aa1ab }
    .print-doc tbody td{ padding:16px 0 }      /* breathing room between the running header/footer and content */
    /* content inside the mirrored view */
    .print-doc .wrap{ max-width:none !important }
    .print-doc .progress, .print-doc .why-row, .print-doc .stepnav{ display:none !important }
    .print-doc .kb-back, .print-doc .kb-expand{ display:none !important }   /* KB nav controls + scaffolding note */
    .print-doc .kb-full[hidden]{ display:none !important }                  /* collapsed detail stays out, print what's on screen */
    .print-doc .fig-svg{ overflow:visible !important; break-inside:avoid; page-break-inside:avoid }
    .print-doc .fig-svg svg{ min-width:0 !important; max-width:100%; height:auto }
    .print-doc .fig-svg figcaption{ position:static !important; left:auto !important; width:auto !important }
    .print-doc .call, .print-doc .astep, .print-doc .arch, .print-doc .mini-tbl, .print-doc figure{ break-inside:avoid; page-break-inside:avoid }
    .print-doc h1, .print-doc h2, .print-doc h3{ break-after:avoid }
    .print-doc a[href]{ color:var(--accent); text-decoration:none }
    @page{ margin:14mm }
  }

/* ===== multi-page additions (preview): theme authority + link-based stepnav + breadcrumb ===== */
:root{color-scheme:light}
[data-theme="dark"]{color-scheme:dark}
.crumb{font-size:12.5px;color:var(--muted);margin:0 0 6px}
.crumb a{color:var(--accent);text-decoration:none}
.crumb a:hover{text-decoration:underline}
.stepnav a{font-family:inherit;font-size:14px;border:1px solid var(--line);background:var(--bg);border-radius:9px;padding:10px 16px;color:var(--ink-soft);max-width:48%;text-decoration:none;line-height:1.3;display:inline-block}
.stepnav a:hover{border-color:var(--accent);color:var(--accent)}
.stepnav a.next{text-align:right;border-color:var(--accent);color:var(--accent);font-weight:600}
.stepnav .placeholder{opacity:.4;border:none;background:none}
.stepnav .lbl{display:block;font-size:11px;letter-spacing:.4px;text-transform:uppercase;color:var(--faint)}


/* ===== preview-round fixes ===== */
/* no underlines on chrome links (brand, nav, rail, steps) */
.topbar a,.topbar a:hover,.rail a,.rail a:hover,.brandblock,.brandblock:hover,.steplink:hover,.navlink:hover,.topnavlink:hover,.tohome:hover{text-decoration:none}
/* back-to-home link in the topbar */
.tohome{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;color:var(--muted);border:1px solid var(--line);border-radius:8px;padding:6px 11px;white-space:nowrap;flex:none}
.tohome:hover{border-color:var(--accent);color:var(--accent)}
.topbar .tbsep{width:1px;height:26px;background:var(--line);flex:none}
/* print: force a light canvas even when the app is in dark mode */
@media print{
  html{color-scheme:light !important;background:#fff !important}
  body{background:#fff !important}
  .author-fab,.linkedin-fab{display:none !important}
}

/* migration landing: "why I built this" block under the hero */
.guide-why{max-width:680px;margin:36px auto 0;padding-top:26px;border-top:1px solid var(--line);text-align:left}
.guide-why p{font-size:14.5px;color:var(--ink-soft);line-height:1.7}