:root{
  --ink:#0A0E14; --ink2:#0C111A; --panel:#10151F; --panel2:#0D1320; --line:#1E2632; --line2:#28303E;
  --text:#C6D2E1; --read:#D7DEEA; --dim:#727E92; --faint:#4C5566;
  --hi:#eef4fa; --code-ink:#bfe7f3; --shadow:rgba(0,0,0,.5); --bar-bg:rgba(10,14,20,.88);
  --accent:#5CC8E8; --accentdim:#3a8aa3;
  --live:#46D08A; --alpha:#5CC8E8; --spec:#F2B24C; --draft:#9B8CF0; --veto:#FF5C7A;
  /* syntax tokens */
  --t-comment:#5B6577; --t-string:#7FD49A; --t-kw:#9B8CF0; --t-lit:#F2B24C; --t-num:#E59866;
  --t-type:#5CC8E8; --t-fn:#6FB6E6; --t-atom:#E08FB6; --t-attr:#C9A0F0; --t-var:#E59866;
  --t-key:#6FB6E6; --t-flag:#7FD49A;
  --disp:'Space Grotesk',system-ui,sans-serif; --read-f:'Newsreader',Georgia,serif; --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  /* sticky-stack height = amp-nav (var, 0 when absent) + the atlas top bar (~53px). Drives the
     sticky offsets + viewport heights of the tree/rail so they sit below the header, not behind it. */
  --bar-h:53px; --stick:calc(var(--amp-nav-height, 0px) + var(--bar-h));
}
:root[data-theme="light"]{
  --ink:#F6F8FB; --ink2:#FFFFFF; --panel:#FFFFFF; --panel2:#EEF2F7; --line:#E0E6EE; --line2:#CFD8E3;
  --text:#2C3540; --read:#1E2730; --dim:#5C6776; --faint:#9AA5B3;
  --hi:#10161E; --code-ink:#0E6E8C; --shadow:rgba(15,30,50,.16); --bar-bg:rgba(246,248,251,.85);
  --accent:#1683B4; --accentdim:#8FBdd4;
  --live:#1FA463; --alpha:#1683B4; --spec:#B07415; --draft:#6D5BD0; --veto:#D63862;
  --t-comment:#8A94A2; --t-string:#197A45; --t-kw:#6D44C8; --t-lit:#B07415; --t-num:#B45A1E;
  --t-type:#1683B4; --t-fn:#1E6FA8; --t-atom:#B43E7E; --t-attr:#6D44C8; --t-var:#B45A1E;
  --t-key:#1E6FA8; --t-flag:#197A45;
}
/* shared portfolio nav (<amp-nav>) — bind its palette to the atlas accent + mono.
   The component switches dark/light via its own theme attribute (kept in sync by
   shell-atlas.js); these vars only retune accent/typography to match the atlas. */
amp-nav{--amp-nav-accent:var(--accent);--amp-nav-font:var(--mono)}
*{box-sizing:border-box} html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--text);font-family:var(--disp);line-height:1.55;
  background-image:radial-gradient(1100px 520px at 82% -12%, rgba(92,200,232,.05), transparent 60%);}
a{color:var(--accent);text-decoration:none} a:hover{text-decoration:underline}
code{font-family:var(--mono);font-size:.86em;background:var(--panel2);border:1px solid var(--line);border-radius:4px;padding:.08em .38em;color:var(--code-ink)}
pre{position:relative;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:14px 16px;overflow:auto;margin:14px 0}
pre code{background:none;border:0;padding:0;font-size:12.5px;line-height:1.6;color:var(--text)}
pre[data-lang]{padding-top:30px}
pre[data-lang]::before{content:attr(data-lang);position:absolute;top:0;right:0;font:600 9.5px var(--mono);letter-spacing:.1em;
  text-transform:uppercase;color:var(--faint);background:var(--panel);border:1px solid var(--line);border-top:0;border-right:0;
  border-radius:0 9px 0 7px;padding:3px 9px}
.t-comment{color:var(--t-comment);font-style:italic} .t-string{color:var(--t-string)} .t-kw{color:var(--t-kw)}
.t-lit{color:var(--t-lit)} .t-num{color:var(--t-num)} .t-type{color:var(--t-type)} .t-fn{color:var(--t-fn)}
.t-atom{color:var(--t-atom)} .t-attr{color:var(--t-attr)} .t-var{color:var(--t-var)} .t-key{color:var(--t-key)} .t-flag{color:var(--t-flag)}
blockquote{margin:16px 0;padding:12px 16px;border-left:2px solid var(--accentdim);background:linear-gradient(90deg,rgba(92,200,232,.06),transparent);
  border-radius:0 8px 8px 0;color:var(--read);font-family:var(--read-f);font-size:16px;font-style:italic}

/* ───────── top bar ───────── */
.bar{position:sticky;top:var(--amp-nav-height,0);z-index:30;display:flex;align-items:center;gap:14px;padding:11px 20px;
  background:var(--bar-bg);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.bar .mk{font:700 13px var(--mono);letter-spacing:.13em;color:var(--accent);cursor:pointer;white-space:nowrap}
.bar .mk b{color:var(--text)}
.crumbs{flex:1;font:12px var(--mono);color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crumbs a{color:var(--text)} .crumbs span{color:var(--faint);margin:0 5px}
.chip{font:600 11px var(--mono);color:var(--dim);border:1px solid var(--line2);border-radius:999px;padding:4px 10px;white-space:nowrap}
.chip b{color:var(--accent)}
.bar .crumbs{flex:1}
.kbd{display:flex;align-items:center;gap:7px;font:600 11px var(--mono);color:var(--dim);border:1px solid var(--line2);
  border-radius:8px;padding:5px 10px;cursor:pointer;white-space:nowrap;transition:border-color .15s,color .15s}
.kbd:hover{color:var(--accent);border-color:var(--accentdim)}
.kbd span{font:600 11px var(--mono);background:var(--panel2);border:1px solid var(--line2);border-radius:5px;padding:1px 5px;color:var(--code-ink)}

/* ───────── layout ───────── */
.wrap{display:grid;grid-template-columns:280px minmax(0,1fr);gap:0;align-items:start}
.tree{position:sticky;top:var(--stick);height:calc(100vh - var(--stick));overflow-y:auto;border-right:1px solid var(--line);
  padding:14px 8px 40px 14px;background:linear-gradient(180deg,var(--panel2),transparent 240px)}
.tree .root{font:700 11px var(--mono);letter-spacing:.12em;color:var(--faint);padding:4px 6px 10px}
.tnode{user-select:none}
.trow{display:flex;align-items:center;gap:6px;padding:3px 6px;border-radius:6px;cursor:pointer;font-size:13px;color:var(--text)}
.trow:hover{background:var(--panel)} .trow.here{background:rgba(92,200,232,.12);color:var(--hi)}
.trow .ic{width:14px;color:var(--dim);font-size:11px;flex:none;text-align:center}
.trow.dir .nm{font-weight:600} .trow.file .nm{color:var(--text)}
.trow .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tkids{margin-left:11px;border-left:1px solid var(--line)}
.tkids.hidden{display:none}

.main{padding:26px 34px 80px;min-height:calc(100vh - var(--stick))}
.wrap.full{display:block} .wrap.full .main{padding:0 0 70px}

/* ───────── home: hero ───────── */
.home{max-width:1120px;margin:0 auto;padding:0 30px}
.hero{padding:46px 0 30px;border-bottom:1px solid var(--line);margin-bottom:6px}
.hero .eyebrow{font:600 11px var(--mono);letter-spacing:.18em;color:var(--accent);text-transform:uppercase}
.hero h1{font:600 44px/1.05 var(--disp);color:var(--hi);margin:14px 0 14px;letter-spacing:-.5px}
.hero p{max-width:680px;color:var(--dim);font-size:15.5px;line-height:1.6}
.hero kbd{font:600 11px var(--mono);background:var(--panel2);border:1px solid var(--line2);border-radius:5px;padding:1px 6px;color:var(--code-ink)}
.legend{display:flex;flex-wrap:wrap;gap:16px;margin-top:18px;font:500 12px var(--mono);color:var(--dim)}
.legend i.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:middle}

/* ───────── home: status palette ───────── */
.s-live .rst,.s-live.rst{color:var(--live)} .dot.s-live{background:var(--live)}
.s-alpha .rst,.s-alpha.rst{color:var(--alpha)} .dot.s-alpha{background:var(--alpha)}
.s-spec .rst,.s-spec.rst{color:var(--spec)} .dot.s-spec{background:var(--spec)}
.s-draft .rst,.s-draft.rst{color:var(--draft)} .dot.s-draft{background:var(--draft)}

/* ───────── home: dark-factory phase display ───────── */
.dfband{border:1px solid var(--line);border-radius:13px;padding:18px 20px 16px;background:var(--panel2)}
.dfphases{display:flex;flex-wrap:wrap;align-items:flex-start;gap:6px}
.dfp{flex:1 1 120px;min-width:100px;border:1px solid var(--line2);border-radius:9px;padding:10px 12px;background:var(--panel)}
.dfp .dfn{font:600 13px var(--disp);color:var(--hi);text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px}
.dfp .dfr{font:600 11px var(--mono);color:var(--live);letter-spacing:.08em}
.dfp .dfs{font:10px var(--mono);color:var(--faint);margin-top:4px;word-break:break-all}
.dfgap .dfr{color:var(--veto)}
.dfgap .dfg{font:10px var(--mono);color:var(--dim);margin-top:4px;line-height:1.4}
.dfarr{color:var(--faint);font:500 16px var(--mono);align-self:center;padding:0 2px}

/* ───────── home: orientation row ───────── */
.band{margin:24px 0}
.band-h{font:600 11px var(--mono);letter-spacing:.15em;color:var(--faint);text-transform:uppercase;margin:0 0 12px}
.metarow .chips{display:flex;flex-wrap:wrap;gap:9px}
.ochip{display:flex;flex-direction:column;gap:1px;border:1px solid var(--line);background:var(--panel2);border-radius:9px;
  padding:8px 12px;color:var(--text);transition:border-color .15s,transform .15s}
.ochip:hover{border-color:var(--accentdim);transform:translateY(-2px);text-decoration:none}
.ochip b{font:600 12.5px var(--disp);color:var(--hi)} .ochip span{font:10.5px var(--mono);color:var(--faint)}

/* ───────── home: bands of rooms ───────── */
.rooms{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:13px}
.room{position:relative;display:block;border:1px solid var(--line);background:linear-gradient(180deg,var(--panel),var(--panel2));
  border-radius:13px;padding:15px 16px 16px;color:var(--text);overflow:hidden;transition:border-color .15s,transform .15s,box-shadow .15s}
.room::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--line2)}
.room.s-live::before{background:var(--live)} .room.s-alpha::before{background:var(--alpha)}
.room.s-spec::before{background:var(--spec)} .room.s-draft::before{background:var(--draft)}
.room:hover{border-color:var(--accentdim);transform:translateY(-3px);box-shadow:0 14px 30px rgba(0,0,0,.35);text-decoration:none}
.rk{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.rmark{font-size:20px;line-height:1;color:var(--hi)} .rst{font:600 10px var(--mono);letter-spacing:.1em;text-transform:uppercase}
.rname{font:600 16px var(--disp);color:var(--hi);word-break:break-word}
.ros{font:11px var(--mono);color:var(--faint);margin:2px 0 8px}
.rtag{font-family:var(--read-f);font-size:13px;color:var(--dim);line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
@media(prefers-reduced-motion:no-preference){
  .rooms.reveal .room{animation:rise .42s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i,0) * 26ms)}
}

/* ───────── home: ring-0 kernel slab ───────── */
.ring0{margin:30px 0 22px}
.slab{display:flex;align-items:center;gap:18px;border:1px solid var(--line2);border-radius:16px;padding:20px 22px;
  background:radial-gradient(120% 160% at 0% 0%, rgba(70,208,138,.10), transparent 55%), linear-gradient(180deg,var(--panel),var(--panel2));
  color:var(--text);transition:border-color .15s,transform .15s}
.slab:hover{border-color:var(--live);transform:translateY(-2px);text-decoration:none}
.slab .smark{font-size:38px;line-height:1;color:var(--live);flex:none}
.slab .smeta{flex:1;min-width:0}
.slab .sos{font:11px var(--mono);color:var(--live);letter-spacing:.06em}
.slab .sname{font:600 22px var(--disp);color:var(--hi);margin:1px 0 3px}
.slab .stag{font-family:var(--read-f);font-size:14px;color:var(--read)}
.slab .sgo{font:600 12px var(--mono);color:var(--accent);white-space:nowrap;flex:none;align-self:flex-end}
.slab:hover .sgo{color:var(--hi)}

/* ───────── home: footer ───────── */
.hfoot{margin-top:34px;padding-top:18px;border-top:1px solid var(--line);font-size:12.5px;color:var(--faint)}
.hfoot .mono{font:11px var(--mono);display:block;margin-top:4px;color:var(--faint)}
@media(max-width:680px){.slab{flex-wrap:wrap}.hero h1{font-size:34px}}

/* ───────── floor (directory view) ───────── */
.floor-h{margin:4px 0 4px}
.floor-h .kind{font:600 11px var(--mono);letter-spacing:.16em;color:var(--accent);text-transform:uppercase}
.floor-h h1{font:600 30px/1.1 var(--disp);margin:8px 0 6px;color:var(--hi)}
.floor-h .sub{color:var(--dim);font-size:14px;max-width:680px}
.section-l{font:600 11px var(--mono);letter-spacing:.15em;color:var(--faint);text-transform:uppercase;margin:26px 0 10px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:12px}
.tile{display:block;border:1px solid var(--line);background:linear-gradient(180deg,var(--panel),var(--panel2));
  border-radius:12px;padding:14px 15px;color:var(--text);position:relative;overflow:hidden;transition:border-color .15s,transform .15s}
.tile:hover{border-color:var(--accentdim);transform:translateY(-2px);text-decoration:none}
.tile::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accentdim);opacity:.5}
.tile.dir::before{background:var(--spec)} .tile.doc::before{background:var(--accent)}
.tile .ic{font-size:15px;color:var(--dim)}
.tile .nm{font:600 14.5px var(--disp);margin:7px 0 3px;color:var(--hi);word-break:break-word}
.tile .meta{font:11px var(--mono);color:var(--faint)}
.tile .cnt{position:absolute;top:13px;right:14px;font:600 11px var(--mono);color:var(--dim)}

/* ───────── reader (doc view) ───────── */
.reader{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:34px;align-items:start}
@media(max-width:1080px){.reader{grid-template-columns:1fr}.rail{display:none}}
.doc-h{border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:8px}
.doc-h .src{display:flex;align-items:center;gap:8px;font:12px var(--mono);color:var(--dim);flex-wrap:wrap}
.doc-h .src .path{color:var(--code-ink);background:var(--panel2);border:1px solid var(--line);border-radius:6px;padding:3px 8px}
.doc-h .src .copy{cursor:pointer;color:var(--dim);border:1px solid var(--line);border-radius:6px;padding:3px 7px}
.doc-h .src .copy:hover{color:var(--accent);border-color:var(--accentdim)}
.doc-h .proj{color:var(--spec)}
.prose{font-family:var(--read-f);color:var(--read);font-size:16.5px;max-width:760px}
.prose h2{font:600 25px var(--disp);color:var(--hi);margin:30px 0 10px;padding-top:6px}
.prose h3{font:600 19px var(--disp);color:var(--hi);margin:24px 0 8px}
.prose h4,.prose h5,.prose h6{font:600 15px var(--disp);color:var(--hi);margin:18px 0 6px}
.prose p{margin:12px 0} .prose ul,.prose ol{margin:10px 0;padding-left:22px} .prose li{margin:5px 0}
.prose a[data-link]{border-bottom:1px dotted var(--accentdim)}
.prose table{border-collapse:collapse;margin:16px 0;width:100%;font-size:14.5px;display:block;overflow-x:auto}
.prose thead th{text-align:left;font:600 12px var(--mono);letter-spacing:.04em;color:var(--faint);text-transform:uppercase;border-bottom:1px solid var(--line2)}
.prose th,.prose td{padding:7px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.prose tbody tr:last-child td{border-bottom:0}
.prose td code{font-size:12.5px}
.rail{position:sticky;top:calc(var(--stick) + 14px);max-height:calc(100vh - var(--stick) - 26px);overflow-y:auto;
  overscroll-behavior:contain;padding-right:4px}
.rail .card{border:1px solid var(--line);background:var(--panel2);border-radius:12px;padding:13px 14px;margin-bottom:12px}
.rail .lab{font:600 10px var(--mono);letter-spacing:.14em;color:var(--faint);text-transform:uppercase;margin-bottom:9px}
.rail a{display:block;font-size:13px;padding:5px 0;border-bottom:1px solid var(--line);color:var(--text)}
.rail a:last-child{border-bottom:0}
.rail .cid{font:11px var(--mono);color:var(--faint);word-break:break-all;line-height:1.5}
.rail .none{color:var(--faint);font-size:12px}
.tag{display:inline-block;font:600 10px var(--mono);color:var(--draft);border:1px solid var(--line2);border-radius:5px;padding:2px 6px;margin-left:6px}
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--panel);border:1px solid var(--accentdim);
  color:var(--hi);font:12px var(--mono);padding:9px 15px;border-radius:8px;box-shadow:0 12px 30px rgba(0,0,0,.5);opacity:0;transition:opacity .2s;z-index:50}
.toast.show{opacity:1}

/* ───────── glue: tile summaries + reveal ───────── */
.tile .tsum{font-family:var(--read-f);font-size:12.5px;color:var(--dim);margin:2px 0 8px;line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media(prefers-reduced-motion:no-preference){
  .grid.reveal .tile{animation:rise .42s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i,0) * 22ms)}
}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ───────── glue: doc lead ───────── */
.reader .col{min-width:0}
.lead{font-family:var(--read-f);font-size:18px;line-height:1.5;color:var(--hi);margin:14px 0 6px;padding-left:14px;
  border-left:2px solid var(--accentdim)}

/* ───────── glue: on-this-page outline + scroll-spy ───────── */
.toc-card{max-height:46vh;overflow:auto}
.toc{display:flex;flex-direction:column;gap:1px}
.toc a{display:block;border:0;padding:4px 8px;border-left:2px solid transparent;color:var(--dim);font-size:12.5px;
  line-height:1.35;border-radius:0 5px 5px 0;transition:color .12s,border-color .12s,background .12s}
.toc a:hover{color:var(--text);background:var(--panel)}
.toc a.lvl3{padding-left:18px;font-size:12px} .toc a.lvl4{padding-left:28px;font-size:11.5px}
.toc a.active{color:var(--hi);border-left-color:var(--accent);background:rgba(92,200,232,.08)}

/* ───────── glue: neighborhood graph ───────── */
.graph{width:100%;height:auto;display:block;margin:2px 0 6px;overflow:visible}
.graph .ge{stroke:var(--line2);stroke-width:1}
.graph .ge.out{stroke:rgba(92,200,232,.45)} .graph .ge.in{stroke:rgba(155,140,240,.4)}
.graph .gc{fill:var(--accent)} .graph .gct{fill:var(--hi);font:600 9px var(--mono)}
.graph .gn{cursor:pointer} .graph .gn circle{transition:r .12s,fill .12s}
.graph .gn.out circle{fill:#2b5563} .graph .gn.in circle{fill:#3b3568}
.graph .gn text{fill:var(--dim);font:500 8.5px var(--mono);pointer-events:none}
.graph .gn:hover circle,.graph .gn:focus circle{r:8} .graph .gn:hover text,.graph .gn:focus text{fill:var(--hi)}
.graph .gn:focus{outline:none}
.glegend{display:flex;gap:12px;font:500 10px var(--mono);margin-top:2px}
.glegend .o{color:var(--accent)} .glegend .i{color:var(--draft)}

/* ───────── glue: continue / prev-next pager ───────── */
.pager{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:34px 0 10px;max-width:760px}
.pg{display:block;border:1px solid var(--line);background:linear-gradient(180deg,var(--panel),var(--panel2));
  border-radius:12px;padding:13px 15px;color:var(--text);transition:border-color .15s,transform .15s}
.pg:hover{border-color:var(--accentdim);transform:translateY(-2px);text-decoration:none}
.pg.empty{border:1px dashed var(--line);background:none;pointer-events:none}
.pg.next{text-align:right}
.pg .dir{font:600 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:5px}
.pg .t{font:600 14.5px var(--disp);color:var(--hi)} .pg .s{font-family:var(--read-f);font-size:12.5px;color:var(--dim);margin-top:4px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ───────── glue: hover link-peek ───────── */
.peek{position:fixed;z-index:60;max-width:320px;background:var(--panel);border:1px solid var(--line2);border-radius:11px;
  padding:11px 13px;box-shadow:0 18px 44px rgba(0,0,0,.55);opacity:0;transform:translateY(4px);pointer-events:none;
  transition:opacity .14s,transform .14s;visibility:hidden}
.peek.show{opacity:1;transform:none}
.peek .pk-t{font:600 13.5px var(--disp);color:var(--hi);margin-bottom:3px}
.peek .pk-p{font:11px var(--mono);color:var(--code-ink);margin-bottom:6px;word-break:break-all}
.peek .pk-s{font-family:var(--read-f);font-size:13px;color:var(--read);line-height:1.45}
.peek .pk-m{font:11px var(--mono);color:var(--faint);margin-top:7px}

/* ───────── glue: ⌘K command palette ───────── */
.palette{position:fixed;inset:0;z-index:80;display:none;background:rgba(6,9,14,.62);backdrop-filter:blur(4px);
  align-items:flex-start;justify-content:center;padding-top:12vh}
.palette.show{display:flex;animation:palfade .14s ease}
@keyframes palfade{from{opacity:0}to{opacity:1}}
.pal-box{width:min(640px,92vw);background:var(--panel);border:1px solid var(--line2);border-radius:14px;overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.6);display:flex;flex-direction:column;max-height:70vh}
.pal-in{background:var(--panel2);border:0;border-bottom:1px solid var(--line);color:var(--text);font:14px var(--disp);
  padding:15px 18px;outline:none}
.pal-list{overflow-y:auto;padding:6px}
.pal-item{display:block;padding:9px 12px;border-radius:8px;color:var(--text)}
.pal-item:hover{text-decoration:none} .pal-item.sel{background:rgba(92,200,232,.13)}
.pal-item .pi-t{font:600 13.5px var(--disp);color:var(--hi)} .pal-item .pi-p{font:11px var(--mono);color:var(--dim);margin-top:1px}
.pal-empty{padding:18px;text-align:center;color:var(--faint);font:12px var(--mono)}
.pal-foot{display:flex;gap:16px;padding:9px 14px;border-top:1px solid var(--line);font:11px var(--mono);color:var(--faint)}
.pal-foot b{color:var(--dim)}

/* ───────── glue: animated route transitions ───────── */
@media(prefers-reduced-motion:no-preference){
  ::view-transition-old(root){animation:vtOut .18s ease both}
  ::view-transition-new(root){animation:vtIn .26s ease both}
  @keyframes vtOut{to{opacity:0}}
  @keyframes vtIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
}