:root{
  color-scheme:dark;
  /* Channel variables. Translucent fills are written as rgba(var(--x-rgb),a),
     so flipping these few triplets re-tones the entire UI per theme. */
  --ink-rgb:255,255,255;      /* overlay fills LIGHTEN the surface in dark mode */
  --panel-rgb:17,26,42;
  --panel-hi-rgb:22,34,53;
  --deep-rgb:8,13,22;
  --shadow-rgb:0,0,0;
  --line-rgb:155,197,255;
  --edge-rgb:170,187,208;
  --accent-rgb:69,240,194;
  --accent2-rgb:118,169,255;
  --gold-rgb:255,204,102;
  --mf-rgb:240,128,32;
  --veil-rgb:5,7,13;

  --bg:#05070d;--bg2:#0b1220;--bg-grad-a:#060914;--bg-grad-b:#070b12;--bg-grad-c:#04060b;
  --panel:#111a2a;--panel2:#162235;
  --text:#edf7ff;--lede:#d6e6f7;--muted:#aabbd0;--soft:#7f90a6;
  --accent:#45f0c2;--accent-ink:#45f0c2;--on-accent:#04110d;
  --accent2:#76a9ff;--gold:#ffcc66;--gold-ink:#ffcc66;
  --danger:#ff6b7a;--purple:#c18cff;
  --line:rgba(var(--line-rgb),.18);
  --nav-panel:#08101c;
  --select-bg:#101827;
  --map-node:#101a2a;--map-node-visited:#0e2a27;--map-node-current:#172d4f;--map-text:#dcecff;
  /* Terminal and code surfaces stay dark in BOTH themes on purpose: the
     monospace panels are part of the site's identity, and dark code on a
     light page is a familiar, readable pattern. */
  --term-bg:#05070d;--term-text:#bfeadf;--code-text:#d8f8ee;
  --media-bg:#05070d;
  --bg-image:url("../img/dark-bg.png");
  --bg-opacity:.42;
  --bg-filter:saturate(1.05) contrast(1.02);
  --bg-veil:radial-gradient(circle at 18% 12%,rgba(var(--accent-rgb),.07),transparent 22rem),linear-gradient(180deg,rgba(var(--veil-rgb),.62),rgba(var(--veil-rgb),.80) 55%,rgba(var(--veil-rgb),.90));

  --radius:18px;--max:1160px;
  --shadow:0 24px 70px rgba(var(--shadow-rgb),.35)
}

/* ---- Light theme ----------------------------------------------------
   Applied when the visitor picks light, or when the OS prefers light and
   they have not overridden it. Overlay channels invert (fills darken
   instead of lighten) and the accent gains a darker "ink" variant so it
   stays legible as text on a pale surface. */
:root[data-theme="light"]{
  color-scheme:light;
  --ink-rgb:16,30,52;         /* overlay fills DARKEN the surface in light mode */
  --panel-rgb:255,255,255;
  --panel-hi-rgb:255,255,255;
  --deep-rgb:216,227,241;
  --shadow-rgb:24,45,78;
  --line-rgb:40,72,112;
  --edge-rgb:98,120,148;
  --accent-rgb:9,132,102;
  --accent2-rgb:42,102,204;
  --gold-rgb:176,124,18;
  --veil-rgb:240,245,251;

  --bg:#eef3f9;--bg2:#e2eaf4;--bg-grad-a:#f3f7fc;--bg-grad-b:#eaf0f8;--bg-grad-c:#e3ebf5;
  --panel:#ffffff;--panel2:#f5f9fd;
  --text:#0d1b2c;--lede:#25384e;--muted:#40566e;--soft:#4a5b70;
  --accent:#0a8062;--accent-ink:#065f49;--on-accent:#ffffff;
  --accent2:#2a66cc;--gold:#a3730f;--gold-ink:#6b4a06;
  --danger:#c22c3c;--purple:#7a45c4;
  --line:rgba(var(--line-rgb),.20);
  --nav-panel:#ffffff;
  --select-bg:#ffffff;
  --map-node:#ffffff;--map-node-visited:#d9f4ea;--map-node-current:#dbe7ff;--map-text:#12263c;
  --media-bg:#ffffff;
  --bg-image:url("../img/light-bg.png");
  --bg-opacity:.5;
  --bg-filter:saturate(1.02) contrast(1.02);
  --bg-veil:radial-gradient(circle at 18% 12%,rgba(var(--accent-rgb),.05),transparent 22rem),linear-gradient(180deg,rgba(var(--veil-rgb),.70),rgba(var(--veil-rgb),.84) 55%,rgba(var(--veil-rgb),.92));

  --shadow:0 20px 50px rgba(var(--shadow-rgb),.12)
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--text);background:radial-gradient(circle at 12% 0%,rgba(var(--accent-rgb),.16),transparent 32rem),radial-gradient(circle at 88% 4%,rgba(var(--accent2-rgb),.14),transparent 30rem),linear-gradient(180deg,var(--bg-grad-a),var(--bg-grad-b) 48%,var(--bg-grad-c));line-height:1.62;isolation:isolate;position:relative;min-height:100vh}body:before{content:"";position:fixed;z-index:-3;inset:0;background-image:var(--bg-image);background-size:cover;background-position:center center;background-repeat:no-repeat;opacity:var(--bg-opacity);filter:var(--bg-filter);pointer-events:none}body:after{content:"";position:fixed;z-index:-2;inset:0;background:var(--bg-veil);pointer-events:none}a{color:inherit;text-decoration:none}.skip-link{position:absolute;left:-999px;top:8px;background:var(--accent);color:var(--on-accent);padding:.55rem .8rem;border-radius:999px;z-index:100}.skip-link:focus{left:8px}.container{width:min(var(--max),calc(100% - 32px));margin:0 auto}.site-header{position:sticky;top:0;z-index:50;backdrop-filter:blur(18px);background:rgba(var(--deep-rgb),.80);border-bottom:1px solid var(--line)}.nav-wrap{width:min(var(--max),calc(100% - 32px));margin:0 auto;min-height:66px;display:flex;align-items:center;justify-content:space-between;gap:1rem}.brand{display:flex;align-items:center;gap:.75rem;font-weight:900;letter-spacing:-.035em}.brand-mark{width:38px;height:38px;display:grid;place-items:center;border-radius:13px;background:linear-gradient(135deg,rgba(var(--accent-rgb),.25),rgba(var(--accent2-rgb),.20));border:1px solid rgba(var(--accent-rgb),.38);box-shadow:0 0 28px rgba(var(--accent-rgb),.14)}.brand small{display:block;color:var(--muted);font-weight:650;letter-spacing:0;margin-top:-5px;font-size:.74rem}.nav-links{display:flex;align-items:center;gap:.18rem;flex-wrap:wrap;justify-content:flex-end}.nav-links a{color:var(--muted);padding:.44rem .55rem;border-radius:999px;font-weight:800;font-size:.79rem}.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--text);background:rgba(var(--ink-rgb),.075)}.nav-toggle{display:none;border:1px solid var(--line);background:rgba(var(--ink-rgb),.045);color:var(--text);border-radius:12px;padding:.65rem .8rem}.hero{padding:clamp(2.6rem,6vw,5.3rem) 0 2.3rem}.hero-grid{display:grid;grid-template-columns:1.18fr .82fr;gap:clamp(1.4rem,4.2vw,4rem);align-items:center}.eyebrow{color:var(--accent-ink);font-weight:950;letter-spacing:.16em;text-transform:uppercase;font-size:.76rem;margin-bottom:.85rem}h1,h2,h3{line-height:1.07;margin:0 0 1rem;letter-spacing:-.046em}h1{font-size:clamp(2.35rem,5.7vw,5.2rem)}h2{font-size:clamp(1.55rem,3.1vw,2.65rem)}h3{font-size:clamp(1.06rem,1.55vw,1.35rem)}p{margin:0 0 1rem;color:var(--muted)}.lede{font-size:clamp(1.02rem,1.55vw,1.23rem);color:var(--lede);max-width:76ch}.hero-actions,.actions{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.4rem}.button{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:46px;padding:.78rem 1.06rem;border-radius:999px;font-weight:950;border:1px solid transparent}.button.primary{background:var(--accent);color:var(--on-accent);box-shadow:0 12px 40px rgba(var(--accent-rgb),.16)}.button.secondary{border-color:var(--line);background:rgba(var(--ink-rgb),.045);color:var(--text)}.signal-card,.card,.panel{background:linear-gradient(180deg,rgba(var(--panel-rgb),.88),rgba(var(--panel-rgb),.88));border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}.signal-card{padding:1.35rem;overflow:hidden}.terminal{font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace;font-size:.92rem;color:var(--term-text)}.terminal-line{padding:.35rem 0;border-bottom:1px solid rgba(var(--ink-rgb),.055)}.terminal-line span{color:var(--gold-ink)}.section{padding:clamp(2rem,4.6vw,3.8rem) 0}.section-header{max-width:820px;margin-bottom:1.75rem}.grid{display:grid;gap:1rem}.grid.two{grid-template-columns:repeat(2,1fr)}.grid.three{grid-template-columns:repeat(3,1fr)}.grid.four{grid-template-columns:repeat(4,1fr)}.card{padding:1.08rem}.card:hover{border-color:rgba(var(--accent-rgb),.36);background:linear-gradient(180deg,rgba(var(--panel-hi-rgb),.88),rgba(var(--panel-rgb),.9))}.card .icon{font-size:1.75rem;margin-bottom:.65rem}.tag-row{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.9rem}.tag{display:inline-flex;color:var(--text);background:rgba(var(--ink-rgb),.065);border:1px solid rgba(var(--ink-rgb),.095);padding:.28rem .55rem;border-radius:999px;font-size:.82rem;font-weight:800}.page-hero{padding:3rem 0 1.4rem}.page-hero h1{font-size:clamp(2rem,4.4vw,4rem)}.content-layout{display:grid;grid-template-columns:280px 1fr;gap:2rem}.toc{position:sticky;top:88px;align-self:start;border:1px solid var(--line);border-radius:var(--radius);padding:1rem;background:rgba(var(--panel-rgb),.62)}.toc a{display:block;color:var(--muted);font-weight:800;padding:.45rem .2rem}.toc a:hover{color:var(--text)}.story-block{padding:1.3rem;border-left:3px solid var(--accent);background:rgba(var(--accent-rgb),.055);border-radius:0 var(--radius) var(--radius) 0}.timeline{display:grid;gap:.8rem}.timeline-item{display:grid;grid-template-columns:150px 1fr;gap:1rem;border:1px solid var(--line);border-radius:var(--radius);padding:1rem;background:rgba(var(--panel-rgb),.6)}.timeline-item strong{color:var(--accent-ink)}.quote{font-size:1.35rem;color:var(--text);border-left:4px solid var(--gold);padding:1rem 1.25rem;background:rgba(var(--gold-rgb),.06);border-radius:0 var(--radius) var(--radius) 0}.split{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.callout{border:1px solid rgba(var(--accent-rgb),.26);background:rgba(var(--accent-rgb),.07);border-radius:var(--radius);padding:1rem}.mini-list{display:grid;gap:.65rem;margin:0;padding:0;list-style:none}.mini-list li{padding:.72rem .85rem;border:1px solid var(--line);border-radius:14px;background:rgba(var(--ink-rgb),.035);color:var(--muted)}.site-footer{border-top:1px solid var(--line);padding:2rem 0;background:rgba(var(--shadow-rgb),.18)}.footer-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:1rem}.footer-grid p{margin:.35rem 0 0}.journey-main{display:grid;gap:1rem}.stage-pill{display:inline-flex;align-items:center;border:1px solid rgba(var(--ink-rgb),.12);border-radius:999px;padding:.28rem .6rem;color:var(--on-accent);background:var(--accent);font-weight:950;font-size:.78rem;margin-bottom:.55rem}.path-chip{border:1px solid rgba(var(--ink-rgb),.1);background:rgba(var(--ink-rgb),.045);color:var(--muted);border-radius:999px;padding:.24rem .5rem;font-size:.76rem;font-weight:800}.map-edge{stroke:rgba(var(--edge-rgb),.3);stroke-width:3;fill:none;stroke-linecap:round}.map-edge.visited{stroke:var(--accent);filter:drop-shadow(0 0 5px rgba(var(--accent-rgb),.35))}.map-arrow{fill:rgba(var(--edge-rgb),.55)}.map-arrow.visited{fill:var(--accent)}.map-node{cursor:pointer}.map-node-box{fill:var(--map-node);stroke:rgba(var(--edge-rgb),.35);stroke-width:2;rx:14;filter:drop-shadow(0 8px 15px rgba(var(--shadow-rgb),.2))}.map-node.visited .map-node-box{fill:var(--map-node-visited);stroke:var(--accent)}.map-node.current .map-node-box{fill:var(--map-node-current);stroke:var(--gold);stroke-width:3}.map-node text{font-size:18px;font-weight:800;fill:var(--map-text);text-anchor:middle;dominant-baseline:middle}@media(max-width:920px){.hero-grid,.grid.two,.grid.three,.grid.four,.split,.content-layout,.journey-shell,.detail-grid,.footer-grid{grid-template-columns:1fr}.persona-rail,.toc{position:static}.nav-toggle{display:block}.nav-links{display:none;position:absolute;left:16px;right:16px;top:66px;padding:1rem;border:1px solid var(--line);border-radius:18px;background:var(--nav-panel)}.nav-links.open{display:flex;justify-content:flex-start}.timeline-item{grid-template-columns:1fr}}@media(max-width:560px){.container,.nav-wrap{width:min(var(--max),calc(100% - 22px))}.hero{padding-top:2rem}h1{font-size:2.15rem}.brand small{display:none}}

/* Matrix portrait background support */
.hero,.page-hero,.section,.site-footer{position:relative;z-index:1}
.site-header{position:fixed;top:0;left:0;right:0;width:100%;z-index:1000}
body{padding-top:66px}
.nav-dropdown{position:relative;display:inline-flex;align-items:center}.nav-dropdown-toggle{border:0;background:transparent;color:var(--muted);padding:.44rem .55rem;border-radius:999px;font:inherit;font-weight:800;font-size:.79rem;cursor:pointer}.nav-dropdown-toggle:after{content:"";display:inline-block;margin-left:.42rem;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;vertical-align:middle}.nav-dropdown:hover .nav-dropdown-toggle,.nav-dropdown:focus-within .nav-dropdown-toggle,.nav-dropdown.open .nav-dropdown-toggle,.nav-dropdown:has(a[aria-current="page"]) .nav-dropdown-toggle{color:var(--text);background:rgba(var(--ink-rgb),.075)}.nav-dropdown-menu{display:none;position:absolute;top:100%;right:0;min-width:190px;padding:.45rem;border:1px solid var(--line);border-radius:14px;background:rgba(var(--deep-rgb),.96);box-shadow:var(--shadow);backdrop-filter:blur(18px)}.nav-dropdown:hover .nav-dropdown-menu,.nav-dropdown:focus-within .nav-dropdown-menu,.nav-dropdown.open .nav-dropdown-menu{display:grid;gap:.18rem}.nav-dropdown-menu a{display:block;border-radius:10px;padding:.55rem .65rem;white-space:nowrap}@media(max-width:920px){.nav-dropdown{width:100%;display:grid}.nav-dropdown-toggle{text-align:left;width:100%;padding:.55rem .65rem}.nav-dropdown-menu{position:static;right:auto;top:auto;margin-top:.35rem;min-width:0;width:100%;box-shadow:none;background:rgba(var(--ink-rgb),.035)}.nav-dropdown.open .nav-dropdown-menu{display:grid}.nav-dropdown:not(.open) .nav-dropdown-menu{display:none}}
.hero .container,.page-hero .container{position:relative}
.hero .lede,.page-hero .lede{text-shadow:0 2px 18px rgba(var(--shadow-rgb),.65)}
.lyric-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}.song-card{padding:1.1rem;border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(180deg,rgba(var(--panel-rgb),.86),rgba(var(--deep-rgb),.88));box-shadow:var(--shadow)}.song-meta{display:flex;gap:.45rem;flex-wrap:wrap;margin:.25rem 0 1rem}.audio-shell{border:1px solid rgba(var(--accent-rgb),.22);background:rgba(var(--accent-rgb),.055);border-radius:14px;padding:.8rem;margin:1rem 0}.audio-shell audio{width:100%;display:block}.embed-note{font-size:.88rem;color:var(--muted);margin:.4rem 0 0}.lyrics{white-space:pre-wrap;font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace;font-size:.88rem;line-height:1.55;color:var(--text);background:rgba(var(--shadow-rgb),.28);border:1px solid rgba(var(--ink-rgb),.08);border-radius:14px;padding:.9rem;max-height:420px;overflow:auto}.track-config{padding:1rem;border:1px dashed rgba(var(--ink-rgb),.22);border-radius:var(--radius);background:rgba(var(--ink-rgb),.035)}@media(max-width:920px){body:before{width:100vw;height:44vh;opacity:.42;background-position:left top}.lyric-grid{grid-template-columns:1fr}}

.soundcloud-panel{border:1px solid rgba(var(--accent-rgb),.28);border-radius:var(--radius);background:linear-gradient(180deg,rgba(var(--panel-rgb),.82),rgba(var(--deep-rgb),.92));box-shadow:var(--shadow);overflow:hidden;padding:1rem}.soundcloud-panel iframe{display:block;border:0;border-radius:14px;background:var(--media-bg)}.soundcloud-meta{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:.9rem;color:var(--muted);font-size:.9rem}.soundcloud-meta span{font-weight:800;color:var(--soft)}

.video-panel{border:1px solid rgba(var(--accent-rgb),.28);border-radius:var(--radius);background:linear-gradient(180deg,rgba(var(--panel-rgb),.82),rgba(var(--deep-rgb),.92));box-shadow:var(--shadow);overflow:hidden;padding:1rem}.video-frame{position:relative;width:100%;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:var(--media-bg);border:1px solid rgba(var(--ink-rgb),.08)}.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}.video-panel .soundcloud-meta{margin-top:.9rem}

/* Rick site expansion */
.project-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}.project-card{padding:1.05rem;border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(180deg,rgba(var(--panel-rgb),.86),rgba(var(--deep-rgb),.88));box-shadow:var(--shadow)}.project-top{display:flex;align-items:start;justify-content:space-between;gap:1rem}.project-top h3{margin-bottom:.45rem}.project-top a{text-decoration:underline;text-decoration-color:rgba(var(--accent-rgb),.38);text-underline-offset:4px}.status{border:1px solid rgba(var(--accent-rgb),.35);background:rgba(var(--accent-rgb),.08);color:var(--accent-ink);border-radius:999px;padding:.18rem .5rem;font-size:.74rem;font-weight:950;text-transform:uppercase;white-space:nowrap}.muted-line{color:var(--soft);font-size:.92rem}.muted-line span{color:var(--gold-ink);font-weight:900}.wide{max-width:980px}.small-quote{font-size:1rem;margin:1rem 0}.top-gap{margin-top:1rem}.card a:hover,.project-card a:hover{color:var(--accent-ink)}@media(max-width:920px){.project-grid{grid-template-columns:1fr}.project-top{display:block}.status{display:inline-flex;margin-bottom:.6rem}}

/* Martial arts logos */
.martial-logo-band{padding:1.2rem 0 0;position:relative;z-index:1}.martial-logos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;align-items:stretch}.martial-logo-item{margin:0;min-height:210px;display:grid;place-items:center;gap:.75rem;padding:1.1rem;border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(180deg,rgba(var(--panel-rgb),.78),rgba(var(--deep-rgb),.86));box-shadow:var(--shadow)}.martial-logo-item img{display:block;width:min(180px,52vw);aspect-ratio:1/1;object-fit:contain}.martial-logo-item figcaption{color:var(--muted);font-weight:950;text-align:center}@media(max-width:640px){.martial-logos{grid-template-columns:1fr}.martial-logo-item{min-height:180px}.martial-logo-item img{width:min(160px,58vw)}}

/* Resume */
.resume-panel{padding:1.35rem;border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(180deg,rgba(var(--panel-rgb),.82),rgba(var(--deep-rgb),.9));box-shadow:var(--shadow)}.resume-header{display:flex;align-items:flex-start;justify-content:space-between;gap:1.25rem;border-bottom:1px solid var(--line);padding-bottom:1rem;margin-bottom:1rem}.resume-header h2{margin-bottom:.35rem}.resume-meta{display:flex;gap:.45rem;flex-wrap:wrap;justify-content:flex-end}.resume-meta a{display:inline-flex;border:1px solid rgba(var(--accent-rgb),.26);background:rgba(var(--accent-rgb),.07);color:var(--text);border-radius:999px;padding:.36rem .62rem;font-weight:900;font-size:.86rem}.resume-summary{max-width:92ch}.resume-block{border-top:1px solid rgba(var(--ink-rgb),.08);padding-top:1rem;margin-top:1rem}.resume-block h3{font-size:1.2rem;letter-spacing:0;margin-bottom:.75rem;color:var(--accent-ink)}.resume-list{margin:0;padding-left:1.15rem;color:var(--muted)}.resume-list li{margin:.28rem 0}.resume-jobs{display:grid;gap:.8rem}.resume-job{display:grid;grid-template-columns:1fr auto;gap:.3rem 1rem;padding:.88rem;border:1px solid rgba(var(--ink-rgb),.09);border-radius:14px;background:rgba(var(--ink-rgb),.035)}.resume-job h4,.resume-block h4{margin:0 0 .18rem;color:var(--text);font-size:1rem}.resume-job p{margin:0}.resume-job>span{color:var(--gold-ink);font-size:.82rem;font-weight:950;text-align:right;white-space:nowrap}.resume-job>p{grid-column:1/-1;color:var(--muted)}@media(max-width:760px){.resume-header,.resume-job{display:block}.resume-meta{justify-content:flex-start}.resume-job>span{display:block;text-align:left;white-space:normal;margin:.3rem 0 .55rem}.resume-panel{padding:1rem}}

/* Technology book */
.tech-book{display:grid;grid-template-columns:260px 330px 1fr;gap:1rem;align-items:start}.tech-sidebar,.chapter-index,.chapter-reader{padding:1rem}.tech-sidebar{position:sticky;top:86px}.tech-sidebar label{display:block;color:var(--accent-ink);font-weight:950;letter-spacing:.08em;text-transform:uppercase;font-size:.74rem;margin-bottom:.55rem}.search-row{display:grid;grid-template-columns:1fr auto;gap:.5rem}.tech-search{min-width:0;width:100%;background:rgba(var(--ink-rgb),.065);border:1px solid var(--line);border-radius:12px;color:var(--text);padding:.72rem .8rem;font-weight:800}.tech-search::placeholder{color:var(--soft)}.clear-search{border:1px solid var(--line);background:rgba(var(--ink-rgb),.045);color:var(--text);border-radius:12px;padding:.72rem .78rem;font-weight:900;cursor:pointer}.search-count{margin:.55rem 0 1rem;font-size:.9rem;color:var(--soft)}.topic-list{display:grid;gap:.48rem}.topic-tab{width:100%;text-align:left;border:1px solid rgba(var(--ink-rgb),.09);background:rgba(var(--ink-rgb),.045);color:var(--muted);border-radius:12px;padding:.74rem .82rem;font-weight:900;cursor:pointer}.topic-tab:hover,.topic-tab.active{color:var(--text);border-color:rgba(var(--accent-rgb),.38);background:rgba(var(--accent-rgb),.1)}.book-heading{display:flex;align-items:start;justify-content:space-between;gap:1rem;border-bottom:1px solid var(--line);padding-bottom:.85rem;margin-bottom:.85rem}.book-heading h2{font-size:1.45rem;margin:0}.book-mark{border:1px solid rgba(var(--gold-rgb),.32);background:rgba(var(--gold-rgb),.08);color:var(--gold-ink);border-radius:999px;padding:.24rem .55rem;font-size:.74rem;font-weight:950;white-space:nowrap}.chapter-list{display:grid;gap:.55rem}.chapter-link{display:grid;grid-template-columns:2.1rem 1fr;gap:.2rem .65rem;text-align:left;border:1px solid rgba(var(--ink-rgb),.09);background:rgba(var(--ink-rgb),.035);color:var(--text);border-radius:14px;padding:.78rem;cursor:pointer}.chapter-link span{grid-row:1/3;color:var(--gold-ink);font-weight:950;font-size:.82rem;padding-top:.08rem}.chapter-link strong{line-height:1.15}.chapter-link small{color:var(--muted);line-height:1.35}.chapter-link:hover,.chapter-link.active{border-color:rgba(var(--accent-rgb),.45);background:rgba(var(--accent-rgb),.09)}.chapter-page{display:none}.chapter-page.active{display:block}.chapter-kicker{color:var(--accent-ink);font-size:.8rem;font-weight:950;letter-spacing:.1em;text-transform:uppercase;margin-bottom:.6rem}.chapter-reader h2{font-size:clamp(1.8rem,3vw,2.7rem)}.chapter-notes{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1.2rem}.chapter-notes>div{border:1px solid rgba(var(--ink-rgb),.09);background:rgba(var(--ink-rgb),.04);border-radius:14px;padding:1rem}.chapter-notes strong{display:block;color:var(--gold-ink);margin-bottom:.35rem}.chapter-notes p{margin:0}.chapter-notes a{text-decoration:underline;text-decoration-color:rgba(var(--accent-rgb),.4);text-underline-offset:4px}.empty-search .chapter-reader:before{content:"No matching chapters.";display:block;color:var(--muted);font-weight:900;padding:1rem;border:1px dashed var(--line);border-radius:14px;background:rgba(var(--ink-rgb),.035)}.empty-search .chapter-page{display:none}@media(max-width:1040px){.tech-book{grid-template-columns:240px 1fr}.chapter-reader{grid-column:1/-1}.tech-sidebar{position:static}}@media(max-width:760px){.tech-book,.chapter-notes{grid-template-columns:1fr}.search-row{grid-template-columns:1fr}.book-heading{display:block}.book-mark{display:inline-flex;margin-top:.4rem}}

.future-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-bottom:1rem}.metric-card{border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(180deg,rgba(var(--panel-rgb),.86),rgba(var(--deep-rgb),.88));box-shadow:var(--shadow);padding:1rem}.metric-card strong{display:block;color:var(--accent-ink);font-size:clamp(1.35rem,2.5vw,2rem);line-height:1.1;margin-bottom:.35rem}.metric-card span{color:var(--muted);font-weight:800}.future-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.future-panel,.future-data{padding:1rem;overflow:hidden}.future-panel-wide{grid-column:1/-1}.future-panel-head{display:flex;align-items:start;justify-content:space-between;gap:1rem;border-bottom:1px solid var(--line);padding-bottom:.75rem;margin-bottom:1rem}.future-panel-head h3{margin:0}.future-panel-head span{color:var(--gold-ink);font-size:.76rem;font-weight:950;text-transform:uppercase;letter-spacing:.08em;white-space:nowrap}.future-diagram{min-height:360px;margin:0;overflow:auto;background:rgba(var(--shadow-rgb),.18);border:1px solid rgba(var(--ink-rgb),.08);border-radius:14px;padding:1rem;color:var(--muted)}.future-diagram svg{max-width:100%;height:auto}.future-data{margin-top:1rem}.future-table-wrap{overflow:auto}.future-table{width:100%;border-collapse:collapse;min-width:560px}.future-table th,.future-table td{text-align:left;padding:.7rem .75rem;border-bottom:1px solid rgba(var(--ink-rgb),.08)}.future-table th{color:var(--accent-ink);font-size:.78rem;text-transform:uppercase;letter-spacing:.08em}.future-table td{color:var(--muted)}@media(max-width:920px){.future-summary,.future-grid{grid-template-columns:1fr}.future-panel-wide{grid-column:auto}.future-diagram{min-height:280px}}

/* Documentation-style technology page */
.docs-page{display:grid;grid-template-columns:300px minmax(0,1fr);align-items:start}.docs-sidebar{position:sticky;top:66px;height:calc(100vh - 66px);overflow:auto;border-right:1px solid var(--line);background:rgba(var(--deep-rgb),.86);backdrop-filter:blur(18px);z-index:2}.docs-sidebar-inner{padding:1rem}.docs-brand{display:flex;align-items:center;gap:.75rem;padding:.25rem 0 1rem;margin-bottom:1rem;border-bottom:1px solid var(--line);font-weight:950}.docs-brand-mark{width:36px;height:36px;border-radius:8px;display:grid;place-items:center;background:rgba(var(--accent-rgb),.13);border:1px solid rgba(var(--accent-rgb),.42);color:var(--accent-ink)}.docs-brand small{display:block;color:var(--soft);font-size:.72rem;letter-spacing:0;font-weight:750;margin-top:-.2rem}.docs-search-label{display:block;color:var(--accent-ink);font-size:.72rem;font-weight:950;text-transform:uppercase;letter-spacing:.12em;margin-bottom:.45rem}.docs-search{width:100%;border:1px solid var(--line);background:rgba(var(--ink-rgb),.055);color:var(--text);border-radius:10px;padding:.7rem .78rem;font-weight:800}.docs-search-count{font-size:.84rem;color:var(--soft);margin:.45rem 0 1rem}.docs-toc{display:grid;gap:1rem}.docs-nav-group{display:grid;gap:.14rem}.docs-nav-heading{color:var(--text);font-size:.78rem;font-weight:950;text-transform:uppercase;letter-spacing:.12em;margin:.2rem 0}.docs-toc a:not(.docs-nav-heading){display:block;color:var(--muted);border-left:2px solid transparent;padding:.36rem .4rem .36rem .7rem;font-size:.92rem;font-weight:780}.docs-toc a:hover,.docs-toc a.active{color:var(--text);border-left-color:var(--accent);background:rgba(var(--accent-rgb),.07)}.docs-content{min-width:0}.docs-hero,.doc-method,.docs-divider,.docs-graph-section{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,42%);gap:0;border-bottom:1px solid var(--line);scroll-margin-top:86px}.docs-hero{min-height:420px}.docs-section-copy,.method-copy{padding:clamp(1.35rem,4vw,3rem);max-width:820px}.docs-hero h1{font-size:clamp(2.3rem,5vw,4.7rem)}.docs-divider{grid-template-columns:1fr;background:rgba(var(--accent-rgb),.035)}.docs-divider .docs-section-copy{max-width:920px}.doc-method .method-copy p,.docs-section-copy p{font-size:1.02rem}.doc-list{color:var(--muted);margin:0;padding-left:1.15rem}.doc-list li{margin:.45rem 0}.method-copy a{text-decoration:underline;text-decoration-color:rgba(var(--accent-rgb),.4);text-underline-offset:4px}.method-examples,.docs-example-panel{border-left:1px solid var(--line);background:rgba(var(--deep-rgb),.6);padding:clamp(1rem,2vw,1.5rem);min-width:0}.example-sticky{position:sticky;top:88px}.example-topbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;border:1px solid rgba(var(--ink-rgb),.08);border-bottom:0;background:rgba(var(--accent-rgb),.08);border-radius:12px 12px 0 0;padding:.62rem .78rem}.example-topbar span{color:var(--accent-ink);font-size:.76rem;font-weight:950;text-transform:uppercase;letter-spacing:.09em}.example-topbar strong{color:var(--gold-ink);font-size:.78rem;text-transform:uppercase;letter-spacing:.08em}.method-examples pre,.docs-example-panel pre{margin:0;white-space:pre-wrap;overflow:auto;background:var(--term-bg);border:1px solid rgba(var(--ink-rgb),.08);border-radius:0 0 12px 12px;padding:1rem;color:var(--code-text);font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace;font-size:.88rem;line-height:1.55}.docs-graph-section{grid-template-columns:1fr}.docs-graph-section>.docs-section-copy{max-width:900px}.docs-graph-section .future-summary,.docs-graph-section .future-grid,.docs-graph-section .future-data{width:min(1280px,calc(100% - 48px));margin-left:auto;margin-right:auto}.docs-graph-section .future-data{margin-top:1rem;margin-bottom:2rem}.doc-section[hidden]{display:none}.docs-page .future-diagram{background:var(--media-bg);border-radius:12px}.docs-page .panel,.docs-page .metric-card{border-radius:12px}@media(max-width:1060px){.docs-page{grid-template-columns:1fr}.docs-sidebar{position:relative;top:auto;height:auto;border-right:0;border-bottom:1px solid var(--line)}.docs-sidebar-inner{width:min(var(--max),calc(100% - 32px));margin:0 auto}.docs-toc{grid-template-columns:repeat(3,1fr)}.docs-hero,.doc-method{grid-template-columns:1fr}.method-examples,.docs-example-panel{border-left:0;border-top:1px solid var(--line)}.example-sticky{position:relative;top:auto}}@media(max-width:720px){.docs-toc{grid-template-columns:1fr}.docs-section-copy,.method-copy{padding:1.25rem}.method-examples,.docs-example-panel{padding:1rem}.docs-graph-section .future-summary,.docs-graph-section .future-grid,.docs-graph-section .future-data{width:min(100% - 24px,1280px)}}
.future-data-stack,.source-chart-grid{width:min(1280px,calc(100% - 48px));margin:0 auto 2rem;display:grid;gap:1rem}.future-data-stack{grid-template-columns:1fr}.future-data-stack .future-data{width:100%;margin:0}.source-chart-grid{grid-template-columns:repeat(2,1fr)}.source-chart{margin:0;padding:1rem;overflow:hidden}.source-chart img{display:block;width:100%;height:auto;border-radius:10px;border:1px solid rgba(var(--ink-rgb),.08);background:var(--media-bg)}.source-chart figcaption{color:var(--muted);font-weight:900;font-size:.9rem;margin-top:.7rem;text-transform:uppercase;letter-spacing:.05em}.future-table td,.future-table th{vertical-align:top}.future-table-wrap{max-width:100%}@media(max-width:920px){.source-chart-grid{grid-template-columns:1fr}.future-data-stack,.source-chart-grid{width:min(100% - 24px,1280px)}}
.docs-card-grid{width:min(1280px,calc(100% - 48px));margin:0 auto 2rem;display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}@media(max-width:1040px){.docs-card-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:700px){.docs-card-grid{grid-template-columns:1fr;width:min(100% - 24px,1280px)}}@media(max-width:920px){}

/* AI topic selector */
.ai-topic-shell{display:grid;grid-template-columns:300px 1fr;gap:1rem;align-items:start}.ai-topic-nav{position:sticky;top:86px;padding:1rem}.ai-topic-nav label{display:block;color:var(--accent-ink);font-weight:950;letter-spacing:.08em;text-transform:uppercase;font-size:.74rem;margin-bottom:.55rem}.topic-select{width:100%;background:rgba(var(--ink-rgb),.065);border:1px solid var(--line);border-radius:14px;color:var(--text);padding:.8rem .9rem;font-weight:850;margin-bottom:1rem}.topic-select option{background:var(--select-bg);color:var(--text)}.topic-buttons{display:grid;gap:.5rem}.topic-button{width:100%;text-align:left;border:1px solid rgba(var(--ink-rgb),.09);background:rgba(var(--ink-rgb),.045);color:var(--muted);border-radius:14px;padding:.78rem .86rem;font-weight:900;cursor:pointer}.topic-button:hover,.topic-button.active{color:var(--text);border-color:rgba(var(--accent-rgb),.38);background:rgba(var(--accent-rgb),.10)}.ai-topic-content{padding:1.25rem}.topic-panel{display:none}.topic-panel.active{display:block}.topic-panel h2{margin-bottom:.8rem}.clean-list{margin:0 0 1.1rem;padding-left:1.2rem;color:var(--muted)}.clean-list li{margin:.35rem 0}.callout{border-left:4px solid var(--accent);background:rgba(var(--accent-rgb),.08);padding:.85rem 1rem;border-radius:14px;margin:1rem 0;color:var(--text)}.code-card{white-space:pre-wrap;overflow:auto;background:var(--term-bg);border:1px solid rgba(var(--ink-rgb),.1);border-radius:16px;padding:1rem;color:var(--code-text)}.mini-flow{display:flex;flex-wrap:wrap;gap:.55rem;margin:1rem 0 1.2rem}.mini-flow span{display:inline-flex;align-items:center;border:1px solid rgba(var(--accent-rgb),.24);background:rgba(var(--accent-rgb),.08);border-radius:999px;padding:.42rem .7rem;font-weight:900;color:var(--text)}.compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1rem 0}.compare-grid>div,.mini-card{background:rgba(var(--ink-rgb),.045);border:1px solid rgba(var(--ink-rgb),.09);border-radius:16px;padding:1rem}.glossary-grid{margin:1rem 0}.mini-card h3{margin-bottom:.45rem}@media(max-width:860px){.ai-topic-shell{grid-template-columns:1fr}.ai-topic-nav{position:relative;top:auto}.compare-grid{grid-template-columns:1fr}}

/* Duotone SVG icons (replaces emoji glyphs) */
.icon:has(svg){display:grid;place-items:center;width:2.75rem;height:2.75rem;border-radius:14px;background:linear-gradient(135deg,rgba(var(--accent-rgb),.18),rgba(var(--accent2-rgb),.12));border:1px solid rgba(var(--accent-rgb),.3);box-shadow:0 10px 26px rgba(var(--shadow-rgb),.28),inset 0 0 0 1px rgba(var(--ink-rgb),.03);margin-bottom:.85rem}
.icon svg{width:1.55rem;height:1.55rem;display:block}
.icon svg .duo{fill:var(--gold);opacity:.5}
.icon svg .solid{fill:var(--accent)}
.card:hover .icon:has(svg){border-color:rgba(var(--accent-rgb),.5)}


/* ===== Roots: The Crossing (period-map voyage) ===== */
.voyage{position:relative;border:1px solid rgba(120,92,48,.5);border-radius:var(--radius);overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.03);background:#0a0d14}
.voyage-stage{position:relative;width:100%;aspect-ratio:16/10;background:radial-gradient(circle at 50% 38%,#1a1206,#0a0d14 70%)}
.voyage-scene{position:absolute;inset:0;opacity:0;transition:opacity 1.1s ease;pointer-events:none}
.voyage-scene.active{opacity:1}
.voyage-scene svg{position:absolute;inset:0;width:100%;height:100%}
.voyage-scene image{filter:saturate(.92) contrast(1.03)}
/* matte vignette + ornate gilt frame */
.voyage-vignette{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 120px 30px rgba(6,8,12,.85),inset 0 0 40px rgba(6,8,12,.6);z-index:3}
.voyage-frame{position:absolute;inset:10px;pointer-events:none;border:1px solid rgba(196,160,92,.35);border-radius:6px;z-index:4}
.voyage-frame:before{content:"";position:absolute;inset:5px;border:1px solid rgba(196,160,92,.18);border-radius:4px}
.voyage-corner{position:absolute;width:34px;height:34px;border:0 solid rgba(212,175,102,.7);z-index:5;pointer-events:none}
.voyage-corner.tl{top:14px;left:14px;border-top-width:2px;border-left-width:2px;border-top-left-radius:6px}
.voyage-corner.tr{top:14px;right:14px;border-top-width:2px;border-right-width:2px;border-top-right-radius:6px}
.voyage-corner.bl{bottom:14px;left:14px;border-bottom-width:2px;border-left-width:2px;border-bottom-left-radius:6px}
.voyage-corner.br{bottom:14px;right:14px;border-bottom-width:2px;border-right-width:2px;border-bottom-right-radius:6px}

/* route + vessels (drawn in each scene's svg units) */
.voyage .route{fill:none;stroke:#3a2410;stroke-linecap:round;opacity:.85}
.voyage .route-glow{fill:none;stroke:rgba(212,175,102,.55);stroke-linecap:round}
.voyage .vessel{opacity:0;transition:opacity .5s ease}
.voyage .vessel .hull{fill:#241608;stroke:#d4af66;stroke-width:1.1;paint-order:stroke}
.voyage .vessel .sail{fill:#f3e6c8;stroke:#7a5a2b;stroke-width:.6}
.voyage .vessel-name{font-family:Georgia,"Times New Roman",serif;font-style:italic;font-weight:700;fill:#fff;paint-order:stroke;stroke:#1a1206;stroke-width:3}
.voyage .pin{opacity:0;transition:opacity .6s ease}
.voyage .pin .dot{fill:#b4321f;stroke:#fff;stroke-width:1.5}
.voyage .pin .ring{fill:none;stroke:#b4321f}
.voyage .pin text,.voyage .place text{font-family:Georgia,serif;font-weight:700;fill:#fff;paint-order:stroke;stroke:#1a1206;stroke-width:3.2}
.voyage .place{opacity:0;transition:opacity .6s ease}
.voyage .place .tick{fill:#1a1206;stroke:#f3e6c8;stroke-width:1}
@keyframes voyagePulse{0%{stroke-width:2;opacity:.9;r:6}100%{stroke-width:.2;opacity:0;r:46}}
.voyage .pin.pulsing .ring{animation:voyagePulse 2s ease-out infinite}

/* HUD: year, caption, compass, dots */
.voyage-hud{position:absolute;inset:0;z-index:6;pointer-events:none}
.voyage-year{position:absolute;top:18px;left:24px;font-family:Georgia,serif;font-weight:800;font-size:clamp(1.3rem,2.6vw,2.1rem);color:#f3e6c8;letter-spacing:.04em;text-shadow:0 2px 14px rgba(0,0,0,.8)}
.voyage-era{display:block;font-size:.4em;letter-spacing:.32em;text-transform:uppercase;color:#d4af66;font-weight:700;margin-top:.1em}
.voyage-caption{position:absolute;left:24px;right:120px;bottom:20px;font-family:Georgia,serif;font-size:clamp(.92rem,1.5vw,1.12rem);color:#f6eed8;line-height:1.5;text-shadow:0 2px 12px rgba(0,0,0,.9);transition:opacity .45s ease;max-width:64ch}
.voyage-caption b{color:#ffcf8a;font-style:italic;font-weight:700}
.voyage-compass{position:absolute;right:16px;bottom:14px;width:clamp(78px,11vw,128px);height:auto;z-index:6;opacity:.92;filter:drop-shadow(0 4px 10px rgba(0,0,0,.6))}
.voyage-dots{position:absolute;top:24px;right:22px;display:flex;gap:.5rem;z-index:6}
.voyage-dots span{width:9px;height:9px;border-radius:999px;background:rgba(243,230,200,.28);border:1px solid rgba(243,230,200,.4);transition:background .4s,transform .4s}
.voyage-dots span.active{background:#d4af66;transform:scale(1.45)}
.voyage-controls{display:flex;gap:.7rem;align-items:center;flex-wrap:wrap;padding:1rem 1.1rem;background:linear-gradient(180deg,rgba(10,13,20,.0),rgba(10,13,20,.5));border-top:1px solid rgba(120,92,48,.3)}
.voyage-credit{color:var(--muted);font-size:.74rem;margin-left:auto;opacity:.7}
@media(max-width:640px){.voyage-caption{right:24px;bottom:74px}.voyage-compass{width:64px;bottom:auto;top:54px}}
@media(prefers-reduced-motion:reduce){.voyage .pin.pulsing .ring{animation:none}.voyage-scene{transition:none}}

/* ---- Navigation additions: breadcrumbs, section jump-bar, footer links ---- */
.breadcrumbs{border-bottom:1px solid var(--line);background:rgba(var(--deep-rgb),.6);font-size:.86rem}
.breadcrumbs .container{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;padding:.6rem 0}
.breadcrumbs a{color:var(--muted);font-weight:800}
.breadcrumbs a:hover{color:var(--accent-ink)}
.breadcrumbs [aria-current="page"]{color:var(--text);font-weight:900}
.crumb-sep{color:var(--soft);opacity:.6}

.section-nav{position:sticky;top:66px;z-index:3;border-bottom:1px solid var(--line);background:rgba(var(--deep-rgb),.92);backdrop-filter:blur(18px)}
.section-nav-inner{display:flex;align-items:center;gap:1rem;padding:.55rem 0}
.section-nav-label{flex:none;color:var(--accent-ink);font-size:.7rem;font-weight:950;text-transform:uppercase;letter-spacing:.12em}
.section-nav-links{display:flex;gap:.25rem;overflow-x:auto;scrollbar-width:thin}
.section-nav-links a{flex:none;padding:.35rem .7rem;border-radius:999px;color:var(--muted);font-size:.88rem;font-weight:800;white-space:nowrap;border:1px solid transparent}
.section-nav-links a:hover{color:var(--text);background:rgba(var(--accent-rgb),.08);border-color:rgba(var(--accent-rgb),.3)}
.section-nav-links a.active{color:var(--accent-ink);background:rgba(var(--accent-rgb),.12);border-color:rgba(var(--accent-rgb),.42)}
@media(max-width:720px){.section-nav-label{display:none}}

.footer-links{display:grid;gap:.3rem;margin-top:.35rem}
.footer-links a{color:var(--muted);font-weight:800}
.footer-links a:hover{color:var(--accent-ink)}
.nav-dropdown.active>.nav-dropdown-toggle{color:var(--accent-ink)}

/* ---- Project cards (generated from src/data/site.js) ---- */
.project-grid{gap:1.1rem}
.project-card{display:flex;flex-direction:column;gap:.5rem}
.project-card-head{display:flex;align-items:center;justify-content:space-between;gap:.75rem}
.project-card h3{margin:0}
.project-card h3 a{color:var(--text)}
.project-card h3 a:hover{color:var(--accent-ink)}
.project-tagline{color:var(--accent-ink);font-weight:850;margin:0}
.status-pill{flex:none;font-size:.68rem;font-weight:950;text-transform:uppercase;letter-spacing:.09em;padding:.24rem .55rem;border-radius:999px;border:1px solid var(--line);color:var(--soft)}
.status-shipping{color:var(--accent-ink);border-color:rgba(var(--accent-rgb),.45);background:rgba(var(--accent-rgb),.1)}
.status-in-progress{color:var(--gold-ink);border-color:rgba(var(--gold-rgb),.42);background:rgba(var(--gold-rgb),.09)}
.tag-row{display:flex;flex-wrap:wrap;gap:.35rem;margin:.15rem 0}
.tag{font-size:.74rem;font-weight:850;padding:.2rem .5rem;border-radius:6px;background:rgba(var(--ink-rgb),.06);color:var(--soft)}
.card-more{margin:auto 0 0}
.card-more a{color:var(--accent-ink);font-weight:900}

/* ---- Theme: follow the OS when the visitor has not chosen explicitly ----
   The explicit [data-theme="light"] block above wins over this, and
   [data-theme="dark"] opts back out of a light OS preference. */
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    color-scheme:light;
    --ink-rgb:16,30,52;--panel-rgb:255,255,255;--panel-hi-rgb:255,255,255;
    --deep-rgb:216,227,241;--shadow-rgb:24,45,78;--line-rgb:40,72,112;--edge-rgb:98,120,148;
    --accent-rgb:9,132,102;--accent2-rgb:42,102,204;--gold-rgb:176,124,18;--veil-rgb:240,245,251;
    --bg:#eef3f9;--bg2:#e2eaf4;--bg-grad-a:#f3f7fc;--bg-grad-b:#eaf0f8;--bg-grad-c:#e3ebf5;
    --panel:#ffffff;--panel2:#f5f9fd;
    --text:#0d1b2c;--lede:#25384e;--muted:#40566e;--soft:#4a5b70;
    --accent:#0a8062;--accent-ink:#065f49;--on-accent:#ffffff;
    --accent2:#2a66cc;--gold:#a3730f;--gold-ink:#6b4a06;
    --danger:#c22c3c;--purple:#7a45c4;
    --line:rgba(var(--line-rgb),.20);
    --nav-panel:#ffffff;--select-bg:#ffffff;
    --map-node:#ffffff;--map-node-visited:#d9f4ea;--map-node-current:#dbe7ff;--map-text:#12263c;
    --media-bg:#ffffff;
    --bg-image:url("../img/light-bg.png");
    --bg-opacity:.5;--bg-filter:saturate(1.02) contrast(1.02);
    --bg-veil:radial-gradient(circle at 18% 12%,rgba(var(--accent-rgb),.05),transparent 22rem),linear-gradient(180deg,rgba(var(--veil-rgb),.70),rgba(var(--veil-rgb),.84) 55%,rgba(var(--veil-rgb),.92));
    --shadow:0 20px 50px rgba(var(--shadow-rgb),.12)
  }
}


/* The hero terminal keeps its dark console look in both themes. */
.signal-card{background:linear-gradient(180deg,#0b1424,#070d18);border-color:rgba(var(--accent-rgb),.28)}
.signal-card .terminal{color:var(--term-text)}
.signal-card .terminal-line{border-bottom-color:rgba(255,255,255,.06)}
.signal-card .terminal-line span{color:#ffcc66}

/* ---- Theme toggle ---- */
.theme-toggle{display:inline-grid;place-items:center;width:38px;height:38px;flex:none;margin-left:.35rem;
  border:1px solid var(--line);border-radius:12px;background:rgba(var(--ink-rgb),.05);
  color:var(--muted);cursor:pointer;padding:0}
.theme-toggle:hover{color:var(--accent-ink);border-color:rgba(var(--accent-rgb),.45);background:rgba(var(--accent-rgb),.09)}
.theme-toggle svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.theme-toggle .icon-sun{display:none}
.theme-toggle .icon-moon{display:block}
:root[data-theme="light"] .theme-toggle .icon-sun{display:block}
:root[data-theme="light"] .theme-toggle .icon-moon{display:none}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]) .theme-toggle .icon-sun{display:block}
  :root:not([data-theme="dark"]) .theme-toggle .icon-moon{display:none}
}
@media(max-width:920px){.theme-toggle{margin-left:auto;margin-right:.5rem}}

/* Keep the header a single left/right split: brand on the left, then the
   nav, theme toggle, and (on mobile) the menu button grouped on the right. */
.nav-wrap{justify-content:flex-start}
.brand{margin-right:auto}
.nav-links{order:1}
.theme-toggle{order:2}
.nav-toggle{order:3}
@media(max-width:920px){.theme-toggle{margin-left:0}}

/* ================= Static web books and reader ================= */
.brand-mark{flex:none}
.book-reader-page:before{background-image:none}
.book-catalog{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,680px));gap:1rem}
.book-card{display:grid;grid-template-columns:92px minmax(0,1fr);gap:1rem;align-items:center;padding:1rem;border:1px solid var(--line);border-radius:var(--radius);background:rgba(var(--panel-rgb),.72)}
.book-card-cover{display:block}
.book-card img{display:block;width:92px;height:auto;border-radius:7px;border:1px solid var(--line);box-shadow:0 10px 24px rgba(var(--shadow-rgb),.25)}
.book-card h2{font-size:1.15rem;line-height:1.2;margin:0 0 .65rem;letter-spacing:-.025em}
.book-card-links{display:flex;flex-wrap:wrap;gap:.45rem;margin:0}
.book-card-links a{display:inline-flex;padding:.42rem .72rem;border:1px solid var(--line);border-radius:999px;color:var(--text);font-size:.8rem;font-weight:900}
.book-card-links a:first-child{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.book-card-links a:hover{border-color:rgba(var(--accent-rgb),.55)}
.book-cover{display:block;width:100%;height:auto;border-radius:12px;border:1px solid var(--line);box-shadow:var(--shadow)}
.book-landing-hero{padding:clamp(2rem,5vw,4rem) 0;border-bottom:1px solid var(--line)}.book-landing-grid{display:grid;grid-template-columns:minmax(180px,260px) minmax(0,1fr);gap:clamp(1.5rem,5vw,4rem);align-items:center}.book-meta{color:var(--soft);font-weight:800}.book-landing-content{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:2rem;align-items:start}.book-landing-toc{display:grid;gap:.7rem}.book-publication-links{position:sticky;top:88px;padding:1rem}.book-publication-links ul{padding-left:1.15rem}.book-publication-links a{text-decoration:underline;text-underline-offset:3px}
.book-nav-group{border:0;border-top:1px solid var(--line);border-radius:0;background:none;overflow:visible}
.book-nav-group>summary{cursor:pointer;padding:.7rem 0;color:var(--accent-ink);font-weight:950}
.book-nav-group>ol{list-style:none;margin:0;padding:0 0 .7rem}
.book-unit-link{padding:.18rem 0}
.book-unit-link>a{display:block;padding:.32rem .5rem;border-left:2px solid transparent;color:var(--muted);font-weight:800;font-size:.86rem;line-height:1.35}
.book-unit-link>a:hover,.book-unit-link>a[aria-current="page"]{color:var(--text);border-left-color:var(--accent);background:rgba(var(--accent-rgb),.08)}
.book-section-list{list-style:none;margin:.25rem 0 .4rem .75rem;padding-left:.55rem;border-left:1px solid var(--line)}
.book-section-list li{margin:.12rem 0}
.book-section-list a{display:block;padding:.2rem .35rem;color:var(--soft);font-size:.79rem;line-height:1.35}
.book-section-list a:hover,.book-section-list a[aria-current="location"]{color:var(--accent-ink);background:rgba(var(--accent-rgb),.06)}
.book-unit-sections-toggle{margin-left:.5rem;border:0;background:transparent;color:var(--accent-ink);font:inherit;font-size:.7rem;font-weight:900;cursor:pointer;text-decoration:underline}
.book-reader-grid{display:grid;grid-template-columns:280px minmax(0,800px);justify-content:center;align-items:start;gap:clamp(2rem,4vw,4rem);width:min(1180px,calc(100% - 32px));margin:0 auto;padding:2rem 0 4rem}
.book-navigation{position:sticky;top:86px;max-height:calc(100vh - 106px);overflow:auto;scrollbar-width:thin;padding:1rem 1rem 1rem 0;border-right:1px solid var(--line)}
.book-navigation>.book-nav-shell>summary{display:none}
.book-navigation h2{margin:.9rem 0 .55rem;font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;color:var(--soft)}
.book-nav-intro{padding-bottom:.85rem}
.book-back-link{display:block;color:var(--text);font-size:1rem;font-weight:950;line-height:1.3}
.book-back-link:hover{color:var(--accent-ink)}
.book-nav-tools{display:flex;gap:.4rem;margin-top:.65rem}
.book-nav-tools a{padding:.34rem .58rem;border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:.72rem;font-weight:900}
.book-nav-tools a:hover{color:var(--text);border-color:rgba(var(--accent-rgb),.5)}
.book-reading{min-width:0;outline:none}.book-unit{min-width:0}.book-unit-kicker{color:var(--accent-ink);font-weight:950;text-transform:uppercase;letter-spacing:.12em;font-size:.76rem}.book-unit h1{font-size:clamp(2.1rem,5vw,4rem);scroll-margin-top:170px}.book-unit h2,.book-unit h3,.book-unit h4{scroll-margin-top:170px;margin-top:2.1rem}.book-unit h2{font-size:clamp(1.45rem,3vw,2.1rem)}.book-unit h3{font-size:clamp(1.15rem,2vw,1.45rem);letter-spacing:-.025em}.book-unit h4{font-size:1.05rem;letter-spacing:-.015em}.book-unit p,.book-unit li{max-width:76ch}.book-unit a{text-decoration:underline;text-decoration-color:rgba(var(--accent-rgb),.38);text-underline-offset:3px}.book-section-link{font-size:.72em;color:var(--soft);text-decoration:none!important;opacity:.65}.book-section-link:hover,.book-section-link:focus{opacity:1;color:var(--accent-ink)}.book-unit img{display:block;max-width:100%;height:auto;margin:1.25rem auto;border-radius:10px;background:var(--media-bg)}.book-unit blockquote{margin:1rem 0;padding:.8rem 1rem;border-left:4px solid var(--accent);background:rgba(var(--accent-rgb),.055)}.book-unit blockquote p{color:var(--lede)}.book-unit code{font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace}.book-unit :not(pre)>code{overflow-wrap:anywhere;color:var(--accent-ink)}.book-code-block{position:relative;max-width:100%;margin:1rem 0}.book-code-block pre{max-width:100%;overflow:auto;margin:0;padding:1rem;background:var(--term-bg);color:var(--code-text);border:1px solid var(--line);border-radius:12px;line-height:1.5}.book-copy-code{position:absolute;right:.55rem;top:.55rem;z-index:1;border:1px solid rgba(255,255,255,.25);border-radius:8px;background:#101827;color:#d8f8ee;padding:.3rem .5rem;font-weight:850;cursor:pointer}.book-table-scroll{max-width:100%;overflow-x:auto;margin:1rem 0}.book-table-scroll table{width:100%;border-collapse:collapse;min-width:520px}.book-table-scroll th,.book-table-scroll td{padding:.55rem .65rem;border:1px solid var(--line);text-align:left;vertical-align:top}.book-table-scroll th{color:var(--accent-ink);background:rgba(var(--ink-rgb),.05)}.book-sequential{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:3rem;padding-top:1.25rem;border-top:1px solid var(--line)}.book-sequential a{display:grid;padding:1rem;border:1px solid var(--line);border-radius:12px;text-decoration:none}.book-sequential .next{text-align:right}.book-sequential span{color:var(--soft);font-size:.75rem;text-transform:uppercase}.book-sequential strong{color:var(--text)}
.book-search-form{max-width:800px}.book-search-form label{display:block;margin-bottom:.5rem;color:var(--lede);font-weight:900}.book-search-form>div{display:grid;grid-template-columns:1fr auto;gap:.6rem}.book-search-form input{min-width:0;border:1px solid var(--line);border-radius:999px;background:rgba(var(--panel-rgb),.8);color:var(--text);padding:.8rem 1rem;font:inherit}.book-search-status{margin:1rem 0;color:var(--soft)}.book-search-results{display:grid;gap:.8rem;max-width:900px}.book-search-result{padding:1rem}.book-search-result h2{font-size:1.2rem;margin-bottom:.25rem}.book-search-result h2 a{text-decoration:underline;text-underline-offset:3px}.book-search-result-unit{color:var(--accent-ink);font-size:.82rem;font-weight:900;margin-bottom:.45rem}
@media(min-width:861px){.book-nav-shell:not([open])>:not(summary){display:block!important}}
@media(max-width:860px){
  .book-landing-grid,.book-landing-content{grid-template-columns:1fr}
  .book-cover{width:min(220px,70vw)}
  .book-publication-links{position:static}
  .book-reader-grid{grid-template-columns:1fr;width:min(100% - 24px,800px);gap:1rem;padding-top:1rem}
  .book-navigation{position:static;max-height:none;border:0;padding:0}
  .book-navigation>.book-nav-shell>summary{display:block;cursor:pointer;padding:.7rem .8rem;border:1px solid var(--line);border-radius:12px;color:var(--accent-ink);font-weight:950}
  .book-nav-shell[open]>summary{margin-bottom:.6rem}
  .book-sequential{grid-template-columns:1fr}
  .book-sequential .next{text-align:left}
  .book-search-form>div{grid-template-columns:1fr}
}
@media(max-width:480px){
  .book-catalog{grid-template-columns:1fr}
  .book-card{grid-template-columns:72px minmax(0,1fr);padding:.8rem}
  .book-card img{width:72px}
}

/* Off-site nav links get an outbound marker. */
.nav-links > a[target="_blank"]::after,
.footer-links a[target="_blank"]::after{content:"\2197";margin-left:.22em;font-size:.85em;opacity:.7}

/* ---- Pre-rendered diagrams -------------------------------------------
   Mermaid bakes colors into the SVG, so the build emits one copy per theme
   and CSS picks. This is why the site ships no Mermaid JavaScript. */
.future-diagram{overflow-x:auto}
.future-diagram svg{max-width:100%;height:auto;display:block;margin:0 auto}
.diagram-light{display:none}
.diagram-dark{display:block}
:root[data-theme="light"] .diagram-light{display:block}
:root[data-theme="light"] .diagram-dark{display:none}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]) .diagram-light{display:block}
  :root:not([data-theme="dark"]) .diagram-dark{display:none}
}

/* ---- Permanently dark surfaces ---------------------------------------
   A few panels keep a dark background in BOTH themes: the hero terminal,
   code/example blocks, and the Roots voyage map (an antique illustration).
   Their text must stay light or light mode renders dark-on-dark. */
.voyage,.voyage-stage{color:#f6eed8}
.voyage-credit,.voyage figcaption{color:#f6eed8}
.voyage .button,.voyage button{color:#f6eed8;border-color:rgba(212,175,102,.5);background:rgba(26,18,6,.75)}
.voyage-hud,.voyage-year{color:#f6eed8}

.method-examples pre,.docs-example-panel pre{color:var(--code-text)}
.signal-card,.signal-card p,.signal-card strong{color:var(--term-text)}

/* Gantt bars: Mermaid's own palette puts pale text on pale bars in light mode
   and grey-on-grey in dark. The SVG is inline, so restyle it per theme.
   !important is needed: Mermaid injects an ID-scoped <style> inside the SVG,
   which outranks any class selector we can write. */
.future-diagram .task{fill:#3f4fae!important;stroke:#2b3a8c!important}
.future-diagram .taskText{fill:#ffffff!important;font-weight:600}
.future-diagram .taskTextOutsideRight,.future-diagram .taskTextOutsideLeft{fill:var(--text)!important}
.future-diagram .titleText,.future-diagram .sectionTitle{fill:var(--text)!important}
.future-diagram .grid .tick text{fill:var(--muted)!important}
.future-diagram .grid path,.future-diagram .grid line{stroke:rgba(var(--edge-rgb),.35)!important}
:root[data-theme="light"] .future-diagram .task{fill:#33429c!important;stroke:#26317a!important}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]) .future-diagram .task{fill:#33429c!important;stroke:#26317a!important}
}

/* ---- Section pages: align the old docs blocks to the page container ----
   .doc-method / .docs-divider / .docs-graph-section were designed to sit in
   the right-hand column of a 300px sidebar grid. Standing alone they ran
   full-bleed, so a page had three different left edges (container 140px,
   doc-method 48px, graph blocks 80px). Constrain them all to the same
   container as the hero, breadcrumbs, and jump bar. */
.doc-method,.docs-divider,.docs-graph-section{
  width:min(var(--max),calc(100% - 32px));
  margin-inline:auto;
  grid-template-columns:minmax(0,1fr) minmax(290px,34%);
  gap:clamp(1.5rem,3vw,2.75rem);
  align-items:start;
  padding:clamp(1.75rem,3.5vw,2.75rem) 0;
  border-bottom:1px solid var(--line);
  scroll-margin-top:120px;
}
.docs-divider,.docs-graph-section{grid-template-columns:1fr}
.docs-divider{background:none}

/* The copy column carried the sidebar layout's padding; drop it so text
   starts on the container edge, and cap the measure for readability. */
.docs-section-copy,.method-copy{padding:0;max-width:68ch}
.docs-divider .docs-section-copy,.docs-graph-section>.docs-section-copy{max-width:72ch}

/* The example panel was a full-height bordered column; make it a card that
   sits beside the text instead of stretching to the section height. */
.method-examples,.docs-example-panel{
  border:1px solid var(--line);border-left:1px solid var(--line);
  border-radius:var(--radius);background:rgba(var(--panel-rgb),.45);
  padding:1rem;position:sticky;top:110px;
}
.example-sticky{position:static}

/* Inner blocks are already inside a constrained parent. */
.docs-graph-section .future-summary,
.docs-graph-section .future-grid,
.docs-graph-section .future-data,
.docs-card-grid{width:100%;margin-left:0;margin-right:0}
.docs-card-grid{margin-bottom:0}

@media(max-width:920px){
  .doc-method{grid-template-columns:1fr}
  .method-examples,.docs-example-panel{position:static;border-top:1px solid var(--line)}
}

/* The era label sits over a light area of the antique map; it needs the same
   shadow the caption already has to stay legible. */
.voyage-era{text-shadow:0 1px 8px rgba(0,0,0,.95),0 0 2px rgba(0,0,0,.9)}

/* Generic card screenshot thumbnail.
   Restored: removed in error by the MarkForge cleanup, whose match caught the
   old comment above it. Without width:100% the 1280px images blew out the
   .grid.three tracks.
   height:auto added: the <img> carries width/height attributes, which pin a
   definite 800px height and make aspect-ratio inert -- so these cards were
   rendering 800px tall (a pre-existing bug, present in the original site). */
.card-thumb{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:left top;border-radius:12px;margin:-.2rem 0 .85rem;border:1px solid rgba(var(--ink-rgb),.08);background:var(--media-bg)}

/* ---- Room list: aligned rows instead of a card grid -------------------
   A scannable table-style list: thumbnail column, copy column, action
   column. Rows with a destination make the whole row clickable via the
   heading link's ::after overlay, so there is one link per row rather than
   a heading and a button competing. */
.room-list{
  list-style:none;margin:0;padding:0;
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  background:linear-gradient(180deg,rgba(var(--panel-rgb),.72),rgba(var(--panel-rgb),.55));
  box-shadow:var(--shadow);
}
.room{
  position:relative;display:grid;
  grid-template-columns:140px minmax(0,1fr) auto;
  gap:1.25rem;align-items:center;
  padding:1rem 1.25rem;border-top:1px solid var(--line);
  transition:background .15s ease;
}
.room:first-child{border-top:0}
.room:hover{background:rgba(var(--accent-rgb),.07)}
.room:focus-within{background:rgba(var(--accent-rgb),.09)}

.room-thumb img{
  display:block;width:100%;height:auto;aspect-ratio:16/10;
  object-fit:cover;object-position:left top;border-radius:10px;
  border:1px solid rgba(var(--ink-rgb),.08);background:var(--media-bg);
}
.room-icon{
  display:grid;place-items:center;width:100%;aspect-ratio:16/10;border-radius:10px;
  background:rgba(var(--accent-rgb),.1);border:1px solid rgba(var(--accent-rgb),.28);
}
.room-icon svg{width:2.15rem;height:2.15rem;display:block}
.room-icon svg .duo{fill:var(--gold);opacity:.5}
.room-icon svg .solid{fill:var(--accent)}
.room:hover .room-icon{border-color:rgba(var(--accent-rgb),.55);background:rgba(var(--accent-rgb),.15)}

.room-copy h3{margin:0 0 .3rem;font-size:1.08rem;letter-spacing:-.02em}
.room-copy h3 a{color:var(--text)}
.room-copy h3 a::after{content:"";position:absolute;inset:0}   /* whole row is the link */
.room:hover .room-copy h3 a{color:var(--accent-ink)}
.room-copy p{margin:0;color:var(--muted);font-size:.95rem;line-height:1.55}

.room-go{
  flex:none;pointer-events:none;display:inline-flex;align-items:center;gap:.4rem;
  border:1px solid var(--line);border-radius:999px;padding:.5rem .9rem;
  font-weight:900;font-size:.8rem;color:var(--muted);white-space:nowrap;
  background:rgba(var(--ink-rgb),.05);
}
.room-go::after{content:"→"}
.room:hover .room-go{color:var(--on-accent);background:var(--accent);border-color:var(--accent)}

/* Compact variant: rows that are reference entries, not destinations. */
.room-list.compact .room{grid-template-columns:56px minmax(0,1fr);gap:1rem;padding:.9rem 1.15rem}
.room-list.compact .room:hover{background:none}
.room-list.compact .room-icon{aspect-ratio:1/1}
.room-list.compact .room-icon svg{width:1.35rem;height:1.35rem}

@media(max-width:720px){
  .room{grid-template-columns:88px minmax(0,1fr);row-gap:.7rem}
  .room-go{grid-column:2;justify-self:start}
  .room-list.compact .room{grid-template-columns:44px minmax(0,1fr)}
}

/* Plain variant: term/description rows. Used where cards carried only a
   heading and a paragraph, with no thumbnail and nowhere to click -- so the
   heading becomes the left column and the copy the right, table-style. */
.room-list.plain .room{grid-template-columns:minmax(170px,230px) minmax(0,1fr);gap:1.5rem;align-items:baseline;padding:1rem 1.25rem}
.room-list.plain .room:hover{background:none}
.room-list.plain .room>h3{margin:0;font-size:1.02rem;letter-spacing:-.02em;color:var(--text)}
.room-list.plain .room>p{margin:0;color:var(--muted);font-size:.95rem;line-height:1.55}
@media(max-width:720px){
  .room-list.plain .room{grid-template-columns:1fr;gap:.35rem;align-items:start}
}

/* ================= How AI Works: application shell =====================
   The walkthrough used to be a tall scrolling page, so the step text, the
   map and the persona impact were never on screen at once. It is now a
   fixed-height app: persona strip, step rail, map, and detail pane all
   visible together, with only the inner panes scrolling. */
/* The walkthrough is wider than the reading container: the map is
   width-constrained, so the extra width is what makes the node labels legible. */
.container.container-wide{width:min(1560px,calc(100% - 32px));max-width:none}
.ai-intro{padding:1.1rem 0 .9rem}
.ai-intro h1{font-size:clamp(1.5rem,2.4vw,2.1rem);margin-bottom:.35rem}
.ai-intro .lede{font-size:.95rem;max-width:78ch;margin:0}

.ai-app{
  display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr) auto;
  height:clamp(460px,calc(100vh - 300px),900px);
  border:1px solid var(--line);border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(var(--panel-rgb),.75),rgba(var(--panel-rgb),.55));
  box-shadow:var(--shadow);overflow:hidden;
}

/* --- persona strip --- */
.ai-bar{display:flex;align-items:flex-start;gap:1rem;padding:.7rem .85rem;border-bottom:1px solid var(--line);background:rgba(var(--ink-rgb),.04)}
.ai-bar-personas{display:flex;align-items:center;gap:.7rem;min-width:0;flex:1}
.ai-bar-label{flex:none;padding-top:.5rem;color:var(--accent-ink);font-size:.68rem;font-weight:950;text-transform:uppercase;letter-spacing:.12em}
.persona-chips{display:flex;flex-wrap:wrap;gap:.35rem;min-width:0}
.persona-chip{flex:none;display:inline-flex;align-items:center;gap:.35rem;white-space:nowrap;cursor:pointer;
  border:1px solid var(--line);background:rgba(var(--ink-rgb),.05);color:var(--muted);
  border-radius:999px;padding:.4rem .7rem;font-weight:850;font-size:.82rem}
.persona-chip:hover{color:var(--text);border-color:rgba(var(--accent-rgb),.45)}
.persona-chip[aria-selected="true"]{color:var(--on-accent);background:var(--accent);border-color:var(--accent)}
.ai-reset{flex:none;border:1px solid var(--line);background:rgba(var(--ink-rgb),.05);color:var(--muted);
  border-radius:999px;padding:.45rem .8rem;font-weight:900;font-size:.78rem;cursor:pointer}
.ai-reset:hover{color:var(--accent-ink);border-color:rgba(var(--accent-rgb),.45)}
.ai-persona-note{margin:0;padding:.55rem .95rem;border-bottom:1px solid var(--line);
  color:var(--muted);font-size:.88rem;background:rgba(var(--accent-rgb),.05)}
.ai-persona-note strong{color:var(--text)}

/* --- three panes --- */
.ai-body{display:grid;grid-template-columns:210px minmax(0,1fr) 330px;min-width:0;min-height:0}
.ai-steps{border-right:1px solid var(--line);overflow:auto;min-height:0;padding:.5rem}
.ai-steps ol{list-style:none;margin:0;padding:0;counter-reset:step}
.ai-step{width:100%;text-align:left;display:grid;grid-template-columns:24px 1fr;gap:.55rem;align-items:center;
  border:1px solid transparent;background:none;color:var(--muted);cursor:pointer;
  border-radius:10px;padding:.46rem .55rem;font-weight:800;font-size:.94rem;line-height:1.3}
.ai-step .n{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;
  border:1px solid var(--line);font-size:.7rem;font-weight:950;color:var(--soft)}
.ai-step:hover{background:rgba(var(--ink-rgb),.05);color:var(--text)}
.ai-step.visited .n{border-color:rgba(var(--accent-rgb),.5);color:var(--accent-ink)}
.ai-step.current{background:rgba(var(--accent-rgb),.13);border-color:rgba(var(--accent-rgb),.45);color:var(--text)}
.ai-step.current .n{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}

.ai-stage{min-width:0;min-height:330px;display:grid;place-items:stretch;padding:.75rem}
.ai-map{min-width:0;min-height:0;display:grid;place-items:center}
.ai-map svg{width:100%;height:100%;max-height:100%;display:block}

.ai-detail{border-left:1px solid var(--line);overflow:auto;min-height:0;padding:.95rem 1rem;background:rgba(var(--ink-rgb),.03)}
.ai-detail h2{font-size:1.22rem;margin:.55rem 0 .5rem;letter-spacing:-.02em}
.ai-detail-summary{color:var(--muted);font-size:.92rem;margin:0 0 .85rem}
.ai-detail-block{border-top:1px solid var(--line);padding-top:.7rem;margin-top:.7rem}
.ai-detail-block h3{font-size:.7rem;text-transform:uppercase;letter-spacing:.12em;color:var(--accent-ink);margin:0 0 .35rem}
.ai-detail-block p{margin:0;color:var(--muted);font-size:.9rem;line-height:1.55}

/* --- footer nav --- */
.ai-foot{display:flex;align-items:center;gap:1rem;padding:.65rem .85rem;border-top:1px solid var(--line);background:rgba(var(--ink-rgb),.04)}
.ai-nav-btn{flex:none;border:1px solid var(--line);background:rgba(var(--ink-rgb),.05);color:var(--text);
  border-radius:999px;padding:.55rem 1rem;font-weight:900;font-size:.85rem;cursor:pointer}
.ai-nav-btn:hover:not(:disabled){border-color:rgba(var(--accent-rgb),.5)}
.ai-nav-btn:disabled{opacity:.4;cursor:not-allowed}
.ai-nav-btn.primary{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.ai-progress{flex:1;display:flex;align-items:center;gap:.7rem;min-width:0}
.ai-progress-track{flex:1;height:6px;border-radius:999px;background:rgba(var(--ink-rgb),.12);overflow:hidden}
.ai-progress-fill{height:100%;background:var(--accent);border-radius:999px;transition:width .2s ease}
.ai-progress-label{flex:none;color:var(--soft);font-size:.78rem;font-weight:850;white-space:nowrap}

.ai-hint{margin:.6rem 0 0;color:var(--soft);font-size:.82rem}
.ai-hint kbd{border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;padding:0 .32rem;
  font-family:inherit;font-size:.78rem;background:rgba(var(--ink-rgb),.06)}
.room-emoji{font-size:1.25rem;line-height:1}

@media(max-width:1000px){
  .ai-app{height:auto;grid-template-rows:auto auto auto auto}
  .ai-bar{flex-direction:column;align-items:stretch;gap:.5rem}
  .ai-bar-personas{flex-direction:column;align-items:flex-start;gap:.4rem}
  .ai-bar-label{padding-top:0}
  .persona-chips{flex-wrap:nowrap;overflow-x:auto;width:100%;padding-bottom:3px}
  .ai-reset{align-self:flex-start}
  .ai-body{grid-template-columns:1fr;grid-template-rows:auto minmax(320px,52vh) auto}
  .ai-steps{border-right:0;border-bottom:1px solid var(--line);max-height:170px}
  .ai-steps ol{display:flex;gap:.35rem;overflow-x:auto}
  .ai-step{width:auto;flex:none}
  .ai-detail{border-left:0;border-top:1px solid var(--line)}
}

/* Short viewports (laptops, split screens): trade intro copy for app height
   so the footer controls stay reachable without scrolling. */
@media (max-height:820px) and (min-width:1001px){
  .ai-intro{padding:.6rem 0 .5rem}
  .ai-intro .lede{display:none}
  .ai-app{height:clamp(500px,calc(100vh - 205px),900px)}
  .ai-hint{display:none}
}