:root{
    --ink:#050a0e; --panel:#0a1216; --panel2:#0e181d; --line:#16262c; --line2:#101c21;
    --text:#dbe7e4; --muted:#7d9490; --sub:#a7bcb7;
    --teal:#2dd4bf; --lime:#a3e635; --amber:#f59e0b; --red:#f87171; --violet:#a78bfa;
    --display:'Montserrat',system-ui,sans-serif;
    --body:'DM Sans',system-ui,sans-serif;
    --mono:'Space Mono',ui-monospace,Consolas,monospace;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth;scroll-padding-top:5rem}
  body{margin:0;background:var(--ink);color:var(--text);font-family:var(--body);
       -webkit-font-smoothing:antialiased;line-height:1.6}
  ::selection{background:rgba(45,212,191,.3)}
  ::-webkit-scrollbar{width:11px}
  ::-webkit-scrollbar-track{background:var(--ink)}
  ::-webkit-scrollbar-thumb{background:#1b2f36;border-radius:6px;border:3px solid var(--ink)}
  a{color:inherit}
  h1,h2,h3,h4{font-family:var(--display);letter-spacing:-.012em;margin:0;line-height:1.12}
  .mono{font-family:var(--mono)}

  /* ---- ambient: faint contour wash, no gradients-as-decor ---- */
  .wash{position:fixed;inset:0;z-index:0;pointer-events:none;
    background:
      radial-gradient(700px 380px at 8% -8%, rgba(45,212,191,.10), transparent 65%),
      radial-gradient(620px 420px at 96% 4%, rgba(163,230,53,.06), transparent 62%);}
  .rule-grid{position:fixed;inset:0;z-index:0;pointer-events:none;
    background-image:linear-gradient(to right, rgba(125,148,144,.05) 1px, transparent 1px);
    background-size:96px 100%;
    -webkit-mask-image:linear-gradient(to bottom, black, transparent 70%);
            mask-image:linear-gradient(to bottom, black, transparent 70%);}

  .wrap{position:relative;z-index:1;max-width:74rem;margin:0 auto;padding:0 1.25rem}
  section.sheet{padding:5.5rem 0;border-top:1px solid var(--line2)}
  section.sheet:first-of-type{border-top:none}

  /* ---- header ---- */
  header.bar{position:fixed;top:0;left:0;right:0;z-index:60;
    background:rgba(5,10,14,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
  .bar-in{max-width:74rem;margin:0 auto;padding:0 1.25rem;height:3.5rem;
    display:flex;align-items:center;gap:1.4rem;overflow-x:auto;scrollbar-width:none}
  .bar-in::-webkit-scrollbar{display:none}
  .brand{display:flex;align-items:center;gap:.55rem;flex-shrink:0;text-decoration:none}
  .brand .mk{width:.8rem;height:.8rem;border:2px solid var(--teal);transform:rotate(45deg)}
  .brand b{font-family:var(--mono);font-size:.72rem;letter-spacing:.22em;font-weight:700}
  nav.jump{display:flex;gap:1.15rem}
  nav.jump a{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;color:var(--muted);
    text-decoration:none;white-space:nowrap;transition:color .18s;padding:.2rem 0}
  nav.jump a:hover,nav.jump a:focus-visible{color:var(--teal)}
  #prog{position:fixed;top:0;left:0;height:2px;z-index:70;width:0;background:var(--teal)}

  /* ---- type utilities ---- */
  .eyebrow{font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
  .kicker{display:inline-flex;align-items:center;gap:.55rem;border:1px solid rgba(45,212,191,.35);
    background:rgba(45,212,191,.07);padding:.32rem .8rem;font-family:var(--mono);font-size:.68rem;
    letter-spacing:.16em;text-transform:uppercase;color:var(--teal)}
  h2.sec{font-size:clamp(1.7rem,3.4vw,2.5rem);font-weight:800;margin-top:1.1rem}
  .lede{max-width:66ch;margin-top:1rem;color:var(--sub);font-size:1.02rem}
  .note{max-width:70ch;color:var(--sub);font-size:.92rem}
  .src{font-family:var(--mono);font-size:.68rem;color:var(--muted);margin-top:.7rem;word-break:break-all}
  .hi{color:var(--text);font-weight:500}
  .q{border-left:2px solid var(--teal);padding-left:1.1rem;color:var(--sub);font-size:.93rem}

  /* ---- panels ---- */
  .panel{border:1px solid var(--line);background:var(--panel);padding:1.15rem 1.25rem}
  .panel.pad{padding:1.6rem}
  .grid{display:grid;gap:.85rem}
  .g2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .g4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .g5{grid-template-columns:repeat(5,minmax(0,1fr))}
  @media (max-width:900px){.g3,.g4,.g5{grid-template-columns:repeat(2,minmax(0,1fr))}}
  @media (max-width:620px){.g2,.g3,.g4,.g5{grid-template-columns:1fr}}

  /* ---- evidence tier: the spine of this document ---- */
  .tier{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--mono);
    font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;padding:.15rem .45rem;
    border:1px solid currentColor;white-space:nowrap}
  .t-doc{color:var(--lime)} .t-claim{color:var(--amber)} .t-unv{color:var(--muted)}
  .t-src{color:var(--teal)}

  .entry{position:relative;padding-left:1.65rem;margin-bottom:2.6rem}
  .entry::before{content:'';position:absolute;left:0;top:.42rem;bottom:-2.6rem;width:2px;background:var(--line)}
  .entry:last-child::before{bottom:.4rem}
  .entry::after{content:'';position:absolute;left:-3px;top:.42rem;width:8px;height:8px;background:var(--ink);
    border:2px solid var(--muted)}
  .entry[data-tier="doc"]::after{border-color:var(--lime)}
  .entry[data-tier="claim"]::after{border-color:var(--amber)}
  .entry[data-tier="unv"]::after{border-color:#33474d}
  .entry h4{font-size:1.12rem;font-weight:700;margin-top:.45rem}
  .entry .meta{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap}
  .entry p{margin:.6rem 0 0;max-width:68ch;color:var(--sub);font-size:.93rem}

  /* filter state */
  body.hide-doc .entry[data-tier="doc"],
  body.hide-claim .entry[data-tier="claim"],
  body.hide-unv .entry[data-tier="unv"]{display:none}

  .filterbar{position:sticky;top:3.5rem;z-index:50;margin:0 0 2.5rem;
    border:1px solid var(--line);background:rgba(10,18,22,.96);backdrop-filter:blur(8px);
    padding:.85rem 1rem;display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
  .filterbar .lbl{font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;
    text-transform:uppercase;color:var(--muted);margin-right:.35rem}
  .fbtn{font-family:var(--mono);font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;
    background:transparent;border:1px solid currentColor;padding:.3rem .6rem;cursor:pointer;
    display:inline-flex;align-items:center;gap:.45rem;transition:opacity .18s,background .18s}
  .fbtn .dot{width:.45rem;height:.45rem;background:currentColor;border-radius:50%}
  .fbtn[aria-pressed="false"]{opacity:.35}
  .fbtn:hover{background:rgba(255,255,255,.04)}
  .fbtn:focus-visible{outline:2px solid var(--teal);outline-offset:2px}

  /* ---- table ---- */
  .tbl-wrap{overflow-x:auto;border:1px solid var(--line)}
  table{width:100%;border-collapse:collapse;font-size:.85rem;min-width:52rem}
  th{font-family:var(--mono);font-size:.62rem;letter-spacing:.13em;text-transform:uppercase;
    color:var(--muted);text-align:left;font-weight:400;padding:.7rem .85rem;
    border-bottom:1px solid var(--line);background:var(--panel2)}
  td{padding:.6rem .85rem;border-bottom:1px solid var(--line2);vertical-align:top;color:var(--sub)}
  tr:last-child td{border-bottom:none}
  tr:hover td{background:rgba(45,212,191,.03)}
  td.name{color:var(--text);font-weight:500}

  /* ---- doc window ---- */
  .doc{border:1px solid var(--line);background:#070f13}
  .doc .head{display:flex;align-items:center;justify-content:space-between;gap:.75rem;
    padding:.5rem .8rem;border-bottom:1px solid var(--line2);background:var(--panel2);
    font-family:var(--mono);font-size:.64rem;color:var(--muted);letter-spacing:.06em}
  .doc .body{padding:1rem 1.1rem;font-family:var(--mono);font-size:.76rem;line-height:1.85;
    color:#b7cbc6;overflow-x:auto}
  .c-com{color:#5f7a76;font-style:italic}
  .c-key{color:var(--red)}
  .c-str{color:var(--lime)}
  .c-num{color:var(--teal)}
  .c-fn{color:var(--violet)}

  .chip{display:inline-flex;align-items:center;gap:.4rem;border:1px solid var(--line);
    background:var(--panel);padding:.28rem .6rem;font-family:var(--mono);font-size:.68rem;color:var(--sub)}
  .stack{display:flex;flex-wrap:wrap;gap:.45rem}

  .barfig{height:7px;background:var(--line)}
  .barfig i{display:block;height:100%}

  .reveal{opacity:0;transform:translateY(14px);transition:opacity .55s ease,transform .55s ease}
  .reveal.on{opacity:1;transform:none}
  @media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}
    html{scroll-behavior:auto}}


  figure{margin:1.2rem 0 0}
  figure img{display:block;width:100%;height:auto;border:1px solid var(--line);background:#070f13}
  figcaption,.capline{margin:.55rem 0 0;font-family:var(--mono);font-size:.68rem;line-height:1.6;color:var(--muted)}
  figcaption b,.capline b{color:var(--sub);font-weight:400}
  .shots{display:grid;gap:.6rem;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:1.2rem}
  .shots img{display:block;width:100%;height:auto;border:1px solid var(--line)}
  @media (max-width:700px){.shots{grid-template-columns:1fr}}
  .hero-art{position:relative;margin-top:2.6rem;border:1px solid var(--line);overflow:hidden}
  .hero-art img{display:block;width:100%;height:auto;filter:saturate(.35) contrast(1.06)}
  .hero-art::after{content:'';position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(5,10,14,.15),rgba(5,10,14,.85));pointer-events:none}
  .hero-cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:1rem 1.2rem;
    font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;color:var(--sub)}

  .lib{display:grid;gap:1.1rem;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:2.2rem}
  @media (max-width:820px){.lib{grid-template-columns:1fr}}
  .card{display:block;text-decoration:none;border:1px solid var(--line);background:var(--panel);
    transition:transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s, border-color .28s;
    will-change:transform}
  .card .thumb{overflow:hidden;border-bottom:1px solid var(--line2);background:#070f13}
  .card .thumb img{display:block;width:100%;height:auto;transition:transform .5s cubic-bezier(.2,.7,.3,1)}
  .card .body{padding:1.05rem 1.15rem}
  .card h4{font-size:1.02rem;font-weight:700;line-height:1.25;transition:color .2s}
  .card p{margin:.5rem 0 0;font-size:.87rem;color:var(--sub)}
  .card .foot{margin-top:.9rem;display:flex;align-items:center;justify-content:space-between;gap:1rem}
  .card .meta{font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
  .card .go{font-family:var(--mono);font-size:.68rem;color:var(--teal);opacity:0;transform:translateX(-6px);
    transition:opacity .28s, transform .28s}
  .card:hover,.card:focus-visible{transform:translateY(-7px);border-color:rgba(45,212,191,.5);
    box-shadow:0 22px 45px -18px rgba(0,0,0,.95), 0 0 0 1px rgba(45,212,191,.16), 0 0 34px -12px rgba(45,212,191,.45)}
  .card:hover .thumb img{transform:scale(1.035)}
  .card:hover h4,.card:focus-visible h4{color:var(--teal)}
  .card:hover .go,.card:focus-visible .go{opacity:1;transform:none}
  .card:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
  @media (prefers-reduced-motion:reduce){.card,.card .thumb img,.card .go{transition:none}
    .card:hover{transform:none}.card:hover .thumb img{transform:none}}

  .vid{position:relative;width:100%;padding-top:56.25%;margin-top:1.2rem;border:1px solid var(--line);
    background:#070f13;box-shadow:0 18px 40px -22px rgba(0,0,0,.9);overflow:hidden}
  .vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
  .vid .facade{position:absolute;inset:0;display:block;border:0;padding:0;cursor:pointer;background:#070f13;
    background-size:cover;background-position:center}
  .vid .facade::after{content:'';position:absolute;inset:0;background:rgba(5,10,14,.45);transition:background .25s}
  .vid .facade:hover::after{background:rgba(5,10,14,.25)}
  .vid .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
    width:4.6rem;height:3.2rem;border-radius:.7rem;background:rgba(45,212,191,.92);
    display:flex;align-items:center;justify-content:center;transition:transform .25s,background .25s}
  .vid .facade:hover .play{transform:translate(-50%,-50%) scale(1.08);background:var(--teal)}
  .vid .play svg{width:1.5rem;height:1.5rem;fill:#04191a;margin-left:.15rem}
  .vid .facade:focus-visible{outline:2px solid var(--teal);outline-offset:-4px}
  .vidcap{margin:.55rem 0 0;font-family:var(--mono);font-size:.68rem;line-height:1.6;color:var(--muted)}
  .vidcap b{color:var(--sub);font-weight:400}
  .vidcap a{color:var(--teal)}
  .micdrop{border:1px solid rgba(45,212,191,.35);padding:1.6rem;background:var(--panel);
    box-shadow:0 0 60px -25px rgba(45,212,191,.5)}
  footer{border-top:1px solid var(--line);padding:3.5rem 0 5rem}
  /* ---- rev.3 additions ---- */
  .flag{border:1px solid rgba(245,158,11,.4);background:rgba(245,158,11,.06);padding:1rem 1.15rem;margin-top:1.2rem}
  .flag .eyebrow{color:var(--amber)}
  .flag p{margin:.5rem 0 0 !important;font-size:.88rem !important;color:var(--sub)}
  .okbox{border:1px solid rgba(163,230,53,.35);background:rgba(163,230,53,.05);padding:1rem 1.15rem;margin-top:1.2rem}
  .okbox .eyebrow{color:var(--lime)}
  .okbox p{margin:.5rem 0 0 !important;font-size:.88rem !important;color:var(--sub)}
  figure.narrow img{max-width:36rem}
  .shots.three{grid-template-columns:repeat(3,minmax(0,1fr))}
  @media (max-width:900px){.shots.three{grid-template-columns:repeat(2,minmax(0,1fr))}}
  @media (max-width:620px){.shots.three{grid-template-columns:1fr}}
  .shots figure{margin:0}
  .tl{list-style:none;margin:1.1rem 0 0;padding:0;border-left:2px solid var(--line)}
  .tl li{position:relative;padding:.1rem 0 1rem 1.2rem;font-size:.9rem;color:var(--sub)}
  .tl li::before{content:'';position:absolute;left:-5px;top:.5rem;width:8px;height:8px;background:var(--ink);border:2px solid var(--teal)}
  .tl li b{font-family:var(--mono);font-weight:400;font-size:.72rem;color:var(--teal);letter-spacing:.06em;display:block}
  .searchbox{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;margin:1.1rem 0 .7rem}
  .searchbox input{flex:1;min-width:14rem;background:var(--panel2);border:1px solid var(--line);color:var(--text);
    font-family:var(--mono);font-size:.8rem;padding:.55rem .75rem}
  .searchbox input:focus-visible{outline:2px solid var(--teal);outline-offset:1px}
  .tbl-wrap.tall{max-height:26rem;overflow-y:auto}
  .tbl-wrap.tall table{min-width:0}
  table.compact{min-width:36rem}
  tr.you td{background:rgba(45,212,191,.07)}
  article.card{cursor:default}
  article.card .go{color:var(--muted)}
  .thumb.gen{aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;
    background:repeating-linear-gradient(135deg,#0a1216 0 12px,#0c161b 12px 24px)}
  .thumb.gen span{font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;color:var(--teal);text-transform:uppercase}
  .stat{font-family:var(--mono);font-size:1.3rem;color:var(--text);margin:.45rem 0 0}

  /* ================= rev.4 additions ================= */
  :root{--new:#7dd3fc}
  body{font-size:1.02rem}
  .entry p,.note{line-height:1.7}
  p{text-wrap:pretty}
  h2.sec,h3,h4{text-wrap:balance}
  .skip{position:absolute;left:-999px;top:0;z-index:90;background:var(--teal);color:#04191a;
    padding:.5rem .8rem;font-family:var(--mono);font-size:.75rem;text-decoration:none}
  .skip:focus{left:.75rem;top:.6rem}
  .sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  nav.jump a[aria-current="true"]{color:var(--teal)}
  nav.jump a.nw::after{content:'';display:inline-block;width:.32rem;height:.32rem;margin-left:.35rem;
    border-radius:50%;background:var(--new);vertical-align:.12rem}
  .tag-new{display:inline-flex;align-items:center;gap:.35rem;font-family:var(--mono);font-size:.58rem;
    letter-spacing:.14em;text-transform:uppercase;color:var(--new);border:1px solid rgba(125,211,252,.45);
    background:rgba(125,211,252,.07);padding:.14rem .45rem;white-space:nowrap}
  .sub-h{font-size:1.25rem;font-weight:800;margin-top:3.2rem;display:flex;align-items:center;gap:.8rem;flex-wrap:wrap}
  .sub-h::before{content:'';width:1.4rem;height:2px;background:var(--teal)}
  .divider{height:1px;background:var(--line);margin:3rem 0}

  /* contents */
  .toc{list-style:none;margin:2.2rem 0 0;padding:0;display:grid;gap:.6rem;
    grid-template-columns:repeat(auto-fill,minmax(17.5rem,1fr));counter-reset:none}
  .toc a{display:grid;grid-template-columns:2.6rem 1fr;gap:.2rem .7rem;text-decoration:none;
    border:1px solid var(--line);background:var(--panel);padding:.85rem .95rem;height:100%;
    transition:border-color .2s,background .2s}
  .toc a:hover,.toc a:focus-visible{border-color:rgba(45,212,191,.55);background:var(--panel2)}
  .toc a:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
  .toc .n{grid-row:span 2;font-family:var(--mono);font-size:1.15rem;color:var(--teal);line-height:1.2}
  .toc b{font-family:var(--display);font-size:.93rem;font-weight:700;color:var(--text);line-height:1.25}
  .toc span.d{font-size:.8rem;color:var(--muted);line-height:1.45}
  .toc .tags{grid-column:2;display:flex;gap:.35rem;flex-wrap:wrap;margin-top:.35rem}
  .toc-part{grid-column:1/-1;font-family:var(--mono);font-size:.64rem;letter-spacing:.18em;
    text-transform:uppercase;color:var(--muted);padding:1rem 0 .2rem;border-bottom:1px solid var(--line2)}

  /* lightbox */
  figure img,.shots img{cursor:zoom-in}
  .card .thumb img{cursor:pointer}
  dialog#lb{border:1px solid var(--line);background:rgba(5,10,14,.97);padding:0;max-width:min(96vw,80rem);
    max-height:94vh;color:var(--text)}
  dialog#lb::backdrop{background:rgba(2,5,7,.86);backdrop-filter:blur(3px)}
  dialog#lb .lb-in{display:flex;flex-direction:column;max-height:94vh}
  dialog#lb .lb-img{overflow:auto;flex:1;display:flex;justify-content:center;align-items:flex-start;padding:1rem}
  dialog#lb img{max-width:100%;height:auto;display:block;cursor:zoom-out}
  dialog#lb .lb-bar{display:flex;justify-content:space-between;gap:1rem;align-items:flex-start;
    padding:.75rem 1rem;border-top:1px solid var(--line);background:var(--panel)}
  dialog#lb .lb-cap{font-family:var(--mono);font-size:.7rem;line-height:1.6;color:var(--sub);max-width:80ch}
  dialog#lb button{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
    background:transparent;color:var(--teal);border:1px solid rgba(45,212,191,.5);padding:.35rem .7rem;cursor:pointer;flex-shrink:0}
  dialog#lb button:focus-visible{outline:2px solid var(--teal);outline-offset:2px}

  /* phases (Defango) */
  .phases{display:grid;gap:.85rem;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:1.6rem}
  @media (max-width:980px){.phases{grid-template-columns:repeat(2,minmax(0,1fr))}}
  @media (max-width:620px){.phases{grid-template-columns:1fr}}
  .phase{border:1px solid var(--line);background:var(--panel);padding:1.1rem 1.15rem;position:relative}
  .phase::before{content:'';position:absolute;left:0;right:0;top:0;height:3px;background:var(--pc,var(--amber))}
  .phase .yr{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;color:var(--pc,var(--amber))}
  .phase h5{font-family:var(--display);font-size:1rem;font-weight:800;margin:.45rem 0 0;line-height:1.2}
  .phase p{margin:.55rem 0 0;font-size:.85rem;color:var(--sub)}
  .phase q{display:block;margin-top:.7rem;font-size:.82rem;color:var(--text);border-left:2px solid var(--pc,var(--amber));
    padding-left:.7rem;quotes:'\201C' '\201D'}

  /* identity chain */
  .chain{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;margin-top:1rem}
  .chain .nd{border:1px solid var(--line);background:var(--panel2);padding:.4rem .65rem;font-family:var(--mono);font-size:.72rem;color:var(--text)}
  .chain .eq{font-family:var(--mono);color:var(--teal);font-size:.9rem}

  /* bar chart */
  .chart{border:1px solid var(--line);background:var(--panel);padding:1.2rem 1.2rem .9rem;margin-top:1.4rem}
  .vbars{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:.45rem;align-items:end;height:13rem;
    border-bottom:1px solid var(--line);padding-top:1.2rem}
  .vbars .b{position:relative;background:linear-gradient(180deg,var(--teal),rgba(45,212,191,.35));min-height:2px}
  .vbars .b.hot{background:linear-gradient(180deg,var(--red),rgba(248,113,113,.35))}
  .vbars .b span{position:absolute;top:-1.25rem;left:0;right:0;text-align:center;font-family:var(--mono);font-size:.64rem;color:var(--sub)}
  .vlab{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:.45rem;margin-top:.45rem}
  .vlab span{font-family:var(--mono);font-size:.6rem;color:var(--muted);text-align:center;letter-spacing:.04em}
  @media (max-width:560px){.vbars,.vlab{gap:.2rem}.vlab span{font-size:.52rem}.vbars .b span{font-size:.55rem}}
  .hbars{display:grid;gap:.7rem;margin-top:1rem}
  .hbar{display:grid;grid-template-columns:minmax(8rem,13rem) 1fr;gap:.8rem;align-items:center}
  @media (max-width:620px){.hbar{grid-template-columns:1fr}}
  .hbar .lbl{font-size:.84rem;color:var(--text)}
  .hbar .lbl small{display:block;font-size:.72rem;color:var(--muted)}
  .hbar .trk{height:.7rem;background:var(--line2);position:relative}
  .hbar .trk i{position:absolute;inset:0 auto 0 0;background:var(--amber)}
  .hbar .trk i.you{background:var(--teal)}
  .hbar .trk em{position:absolute;right:.1rem;top:-1.1rem;font-style:normal;font-family:var(--mono);font-size:.64rem;color:var(--sub)}

  /* stat row */
  .stats{display:grid;gap:.85rem;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:1.6rem}
  @media (max-width:900px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
  .stats .panel .big{font-family:var(--mono);font-size:1.55rem;color:var(--text);margin:.35rem 0 0;line-height:1.1}
  .stats .panel small{display:block;margin-top:.35rem;font-size:.78rem;color:var(--muted)}

  /* steps model */
  .steps{list-style:none;margin:1.3rem 0 0;padding:0;display:grid;gap:.6rem;
    grid-template-columns:repeat(4,minmax(0,1fr));counter-reset:st}
  @media (max-width:900px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
  @media (max-width:520px){.steps{grid-template-columns:1fr}}
  .steps li{counter-increment:st;border:1px solid var(--line);background:var(--panel);padding:.85rem .9rem;font-size:.84rem;color:var(--sub);position:relative}
  .steps li::before{content:counter(st,decimal-leading-zero);display:block;font-family:var(--mono);font-size:.72rem;color:var(--teal);margin-bottom:.35rem}
  .steps li.loop{border-color:rgba(245,158,11,.45)}
  .steps li.loop::before{color:var(--amber)}

  /* snow white loop */
  .loopfig{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:.6rem;align-items:stretch;margin-top:1.3rem}
  .loopfig .nd{border:1px solid var(--line);background:var(--panel);padding:1rem}
  .loopfig .nd .eyebrow{display:block}
  .loopfig .nd p{margin:.5rem 0 0;font-size:.85rem;color:var(--sub)}
  .loopfig .ar{display:flex;align-items:center;font-family:var(--mono);color:var(--teal);font-size:1.2rem}
  @media (max-width:820px){.loopfig{grid-template-columns:1fr}.loopfig .ar{justify-content:center;transform:rotate(90deg)}}
  .loopback{margin-top:.6rem;border:1px dashed rgba(45,212,191,.45);padding:.6rem .9rem;font-family:var(--mono);font-size:.7rem;color:var(--teal);text-align:center}

  /* attribution arc */
  .arc-grid{display:grid;gap:1rem;grid-template-columns:1.25fr 1fr;margin-top:1.4rem}
  @media (max-width:860px){.arc-grid{grid-template-columns:1fr}}
  .arcsvg{width:100%;height:auto;display:block}
  .ratio{display:flex;height:1.9rem;margin-top:.9rem;border:1px solid var(--line)}
  .ratio i{display:flex;align-items:center;padding:0 .6rem;font-style:normal;font-family:var(--mono);font-size:.7rem;color:#04191a;white-space:nowrap;overflow:hidden}
  .ratio i.a{background:var(--teal)} .ratio i.b{background:var(--amber)}
  .portrait{display:grid;grid-template-columns:9rem 1fr;gap:1.1rem;align-items:start}
  @media (max-width:560px){.portrait{grid-template-columns:1fr}}
  .portrait img{width:100%;height:auto;border:1px solid var(--line);filter:grayscale(1) contrast(1.05)}

  /* quote card (es / en) */
  .bil{display:grid;gap:.8rem;grid-template-columns:1fr 1fr;margin-top:1rem}
  @media (max-width:700px){.bil{grid-template-columns:1fr}}
  .bil blockquote{margin:0;border:1px solid var(--line);background:var(--panel);padding:1rem 1.1rem;font-size:.95rem;color:var(--text)}
  .bil blockquote[lang="en"]{color:var(--sub);font-size:.88rem}
  .bil cite{display:block;margin-top:.55rem;font-style:normal;font-family:var(--mono);font-size:.64rem;color:var(--muted);letter-spacing:.06em}

  .ledger td.mono,.ledger td .mono{font-size:.72rem}
  .ledger td q{color:var(--text)}
  .kv{display:grid;grid-template-columns:auto 1fr;gap:.35rem 1rem;font-size:.86rem;margin-top:.8rem}
  .kv dt{font-family:var(--mono);font-size:.68rem;color:var(--muted);letter-spacing:.08em;padding-top:.15rem}
  .kv dd{margin:0;color:var(--sub)}
  .totop{position:fixed;right:1rem;bottom:1rem;z-index:55;width:2.6rem;height:2.6rem;display:flex;align-items:center;justify-content:center;
    border:1px solid var(--line);background:rgba(10,18,22,.92);color:var(--teal);text-decoration:none;font-family:var(--mono);
    opacity:0;pointer-events:none;transition:opacity .25s}
  .totop.show{opacity:1;pointer-events:auto}
  .totop:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
  @media print{header.bar,#prog,.filterbar,.totop,.wash,.rule-grid{display:none!important}
    .reveal{opacity:1!important;transform:none!important}body{background:#fff;color:#000}}

/* cover background video — the 3301 animation glowing behind the cover text */
#top{position:relative;overflow:hidden}
.cover-vid{position:absolute;inset:0 0 auto 0;height:min(100svh,100%);z-index:0;pointer-events:none;background:var(--ink)}
.cover-vid video{width:100%;height:100%;object-fit:cover;opacity:.85;mix-blend-mode:screen}
.cover-vid::after{content:'';position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(5,10,14,.78) 0%,rgba(5,10,14,.4) 50%,transparent 100%),
    linear-gradient(180deg,rgba(5,10,14,.35) 0%,transparent 22%,transparent 60%,var(--ink) 100%)}
.cover-vid.off{display:none}
#top h1{text-shadow:0 0 28px rgba(34,211,238,.35),0 2px 10px rgba(0,0,0,.6)}
#top .lede{text-shadow:0 1px 3px rgba(0,0,0,.9),0 0 18px rgba(5,10,14,.9)}
@media (max-width:760px){
  .cover-vid::after{background:linear-gradient(180deg,rgba(5,10,14,.3) 0%,rgba(5,10,14,.5) 45%,var(--ink) 100%)}}
@media print{.cover-vid{display:none!important}}
/* parallax: the video scrolls at ~60% of page speed, zooms and dims as the cover leaves.
   Decorative, so progressive enhancement only — browsers without scroll-driven animations see it static. */
@keyframes cover-drift{to{transform:translateY(40svh) scale(1.08);opacity:.35}}
@supports ((animation-timeline: view()) and (animation-range: entry)){
  .cover-vid{transform-origin:50% 0;will-change:transform;
    animation:cover-drift linear both;
    animation-timeline:scroll(root);
    animation-range:0 100svh}
}
@media (prefers-reduced-motion:reduce){.cover-vid{animation:none}}

/* organization logos shown above an entry heading — light chip so dark or transparent marks stay legible */
.logo-chip{display:inline-flex;align-items:center;background:#e9efed;border:1px solid var(--line);
  padding:.35rem .6rem;margin-bottom:.7rem}
.logo-chip img{display:block;height:2.1rem;width:auto;max-width:9rem;cursor:default}

/* thesis up front: five-sentence argument, "does not claim" panel, per-chapter one-liners */
.argument{margin-top:2.2rem;border:1px solid rgba(45,212,191,.35);background:rgba(10,18,22,.82);padding:1.4rem 1.5rem;max-width:62rem}
.argument ol{margin:1rem 0 0;padding-left:1.3rem;display:grid;gap:.7rem}
.argument li{color:var(--sub);font-size:.97rem;line-height:1.55}
.argument li::marker{color:var(--teal);font-family:var(--mono);font-size:.85rem}
.argument b,.notclaim b{color:var(--text);font-weight:600}
.notclaim{border-color:rgba(245,158,11,.35)}
.notclaim ul{margin:1rem 0 0;padding-left:1.1rem;display:grid;gap:.65rem}
.notclaim li{color:var(--sub);font-size:.92rem;line-height:1.55}
.takeaway{max-width:66ch;margin:1.1rem 0 0;padding:.7rem 1rem;border-left:2px solid var(--teal);
  background:rgba(45,212,191,.06);color:var(--text);font-size:.98rem;line-height:1.5}
.takeaway span{display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--teal);margin-bottom:.25rem}

/* origin story: opening scene and the closing line about meaning */
.origin-open{margin:1rem 0 0;max-width:62ch;font-size:1.08rem;line-height:1.6;color:var(--text)}
.meaning{margin:1.6rem 0 0;padding:1rem 1.2rem;border-left:3px solid var(--violet);background:rgba(167,139,250,.07)}
.meaning p{margin:0;font-size:1.05rem;line-height:1.55;color:var(--text)}

/* witness chapters: the author was a participant; his passages are first person */
.witness{max-width:66ch;margin:.6rem 0 0;padding:.6rem 1rem;border-left:2px solid var(--violet);
  background:rgba(167,139,250,.07);color:var(--sub);font-size:.9rem;line-height:1.5}
.witness span{display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--violet);margin-bottom:.25rem}

/* "From my book" cards: the author's lived story, set beside the evidence */
.fromthebook{position:relative;max-width:46rem;margin:2rem 0;padding:1.3rem 1.4rem 1.2rem;
  border:1px solid rgba(167,139,250,.35);background:linear-gradient(135deg,rgba(167,139,250,.09),rgba(10,18,22,.6))}
.fromthebook .fb-label{display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--violet)}
.fromthebook .fb-label em{font-style:normal;color:var(--text)}
.fromthebook .fb-when{display:block;margin-top:.35rem;font-family:var(--mono);font-size:.72rem;color:var(--muted)}
.fromthebook h5{margin:.5rem 0 0;font-family:var(--display);font-size:1.15rem;font-weight:800;color:var(--text)}
.fromthebook p{margin:.75rem 0 0;font-size:.97rem;line-height:1.65;color:var(--sub)}
.fromthebook .fb-note{font-size:.8rem;color:var(--muted);border-top:1px dashed rgba(167,139,250,.3);padding-top:.6rem}
.fromthebook a,.src a,.witness a{color:var(--teal)}
.compact td a,.entry p a{color:var(--teal)}
figure.phone img{max-width:min(100%,19rem)}
.lvid{margin-top:1.2rem;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#070f13}.lvid video{display:block;width:100%;aspect-ratio:16/9;background:#070f13}
.logo-band{margin:1.2rem 0 .4rem;max-width:26rem;opacity:.85}.logo-band img{display:block;width:100%;height:auto;border-radius:8px}

/* ---- extras: entry links ---- */
.entry{position:relative}
.elink{position:absolute;top:.55rem;right:.55rem;z-index:2;font-family:var(--mono);font-size:.7rem;line-height:1;
  padding:.35rem .5rem;border:1px solid var(--line);border-radius:6px;background:rgba(5,10,14,.7);color:var(--muted);
  cursor:pointer;opacity:.35;transition:opacity .18s,color .18s,border-color .18s}
.entry:hover .elink,aside.fromthebook:hover .elink,.elink:focus-visible{opacity:1}
.elink:hover,.elink:focus-visible{color:var(--teal);border-color:rgba(45,212,191,.5);outline:none}
.elink.ok{color:var(--lime);border-color:rgba(163,230,53,.5);opacity:1}
@media (hover:none){.elink{opacity:.8}}
.flash{animation:noiflash 1.8s ease-out}
@keyframes noiflash{0%{box-shadow:0 0 0 2px var(--teal),0 0 28px rgba(45,212,191,.35)}100%{box-shadow:0 0 0 0 transparent}}

/* ---- extras: floating tier filter ---- */
.fpill{position:fixed;left:1rem;bottom:calc(1rem + env(safe-area-inset-bottom,0px));z-index:65;display:flex;align-items:center;gap:.35rem;
  padding:.35rem .45rem;border:1px solid var(--line);border-radius:999px;background:rgba(5,10,14,.92);backdrop-filter:blur(8px);
  transform:translateY(160%);transition:transform .3s ease}
.fpill.show{transform:none}
.fpill-l{font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);padding:0 .3rem}
.fp{display:flex;align-items:center;gap:.35rem;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--sub);
  font-family:var(--mono);font-size:.62rem;padding:.3rem .55rem;cursor:pointer}
.fp .dot{width:.5rem;height:.5rem;border-radius:50%;background:currentColor}
.fp.t-doc{color:var(--teal)}.fp.t-claim{color:var(--amber)}.fp.t-unv{color:var(--violet)}
.fp[aria-pressed="false"]{opacity:.35;text-decoration:line-through}
.fp:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
@media (max-width:560px){.fp-t{display:none}.fpill-l{display:none}}

/* ---- extras: boot intro ---- */
.boot{position:fixed;inset:0;z-index:200;background:#020507;display:flex;flex-direction:column;justify-content:center;
  align-items:flex-start;padding:0 max(1.25rem,8vw);transition:opacity .45s ease}
.boot.out{opacity:0;pointer-events:none}
.boot-t{margin:0;font-family:var(--mono);font-size:clamp(.72rem,1.6vw,.95rem);line-height:1.9;color:var(--teal);white-space:pre-wrap;min-height:12em}
.boot-skip{position:absolute;right:1.25rem;bottom:calc(1.25rem + env(safe-area-inset-bottom,0px));font-family:var(--mono);font-size:.7rem;
  background:none;border:1px solid var(--line);border-radius:6px;color:var(--muted);padding:.4rem .7rem;cursor:pointer}

/* ---- extras: timeline ---- */
.tl-legend{display:flex;flex-wrap:wrap;gap:.4rem 1rem;align-items:center;font-size:.64rem;color:var(--muted);margin-top:1.6rem}
.tl-legend .k{display:inline-block;width:.6rem;height:.6rem;border-radius:50%;margin-right:.1rem;vertical-align:-1px}
.tl{margin-top:1rem;border:1px solid var(--line);border-radius:12px;background:var(--panel);padding:1rem 1rem .8rem}
.tl-track{display:grid;grid-template-columns:repeat(26,minmax(1.6rem,1fr));gap:.2rem;overflow-x:auto;padding-bottom:.4rem;align-items:end}
.net-jump[hidden]{display:none}
.tl-col{display:flex;flex-direction:column;align-items:center;gap:.35rem;border-radius:6px;padding:.3rem 0}
.tl-col.tl-q{background:rgba(248,113,113,.08);box-shadow:inset 0 0 0 1px rgba(248,113,113,.3)}
.tl-stack{display:flex;flex-direction:column-reverse;align-items:center;gap:3px;min-height:9rem;justify-content:flex-start}
.tl-dot{width:.62rem;height:.62rem;border-radius:50%;border:0;padding:0;cursor:pointer;transition:transform .15s}
.tl-dot:hover,.tl-dot:focus-visible{transform:scale(1.6);outline:none}
.tl-doc,.k.tl-doc{background:var(--teal)}.tl-claim,.k.tl-claim{background:var(--amber)}
.tl-unv,.k.tl-unv{background:var(--violet)}.tl-book,.k.tl-book{background:#e5e7eb}
.k.tl-qk{background:rgba(248,113,113,.5);border-radius:2px}
.tl-y{font-family:var(--mono);font-size:.58rem;color:var(--muted)}
.tl-tip{margin-top:.6rem;min-height:2.6em;font-size:.85rem;color:var(--sub)}

/* ---- extras: network ---- */
.net{margin-top:1.6rem;display:grid;grid-template-columns:minmax(0,2.2fr) minmax(0,1fr);gap:1rem;align-items:start}
@media (max-width:860px){.net{grid-template-columns:1fr}}
.net-box{border:1px solid rgba(45,212,191,.28);border-radius:12px;overflow-x:auto;
  background:radial-gradient(ellipse at 50% 45%,#16303a 0%,#10222a 55%,#0c1a20 100%)}
.net-svg{display:block;width:100%;min-width:640px;height:auto}
.nl{stroke:#6f98a3;stroke-width:1.6;opacity:.75;transition:stroke .2s,opacity .2s}
.nl-claim{stroke:#c9a15a;stroke-dasharray:6 4}
.nl.on{stroke:var(--teal);stroke-width:2.6;opacity:1}.nl.on.nl-claim{stroke:var(--amber)}
.nl.dim{opacity:.12}
.nn{cursor:pointer;outline:none}
.nn circle,.nn rect{fill:#1d3b44;stroke:#9cc3bd;stroke-width:2;transition:fill .2s,stroke .2s}
.nn-core circle{fill:#4a2327;stroke:var(--red)}
.nn-me circle{fill:#0f5149;stroke:var(--teal)}
.nn-org rect{fill:#2f2750;stroke:var(--violet)}
.nn text{font-family:var(--mono);font-size:12px;font-weight:700;fill:#e6f1ef;paint-order:stroke;stroke:#0c1a20;stroke-width:4px;pointer-events:none}
.nn:hover circle,.nn:hover rect,.nn:focus-visible circle,.nn:focus-visible rect,.nn.sel circle,.nn.sel rect{fill:var(--teal);stroke:#fff}
.nn.sel text{fill:#fff}
.nn.dim{opacity:.25}
.net-info{border:1px solid var(--line);border-radius:12px;background:var(--panel);padding:1rem 1.1rem}
.net-head{margin:0;font-family:var(--display);font-weight:700;font-size:1rem}
.net-list{list-style:none;margin:.8rem 0 0;padding:0;display:grid;gap:.55rem;font-size:.86rem;color:var(--sub)}
.net-list .tier{margin-right:.35rem}
.net-jump{margin-top:1rem;cursor:pointer}

/* ---- org logos: larger floating cards on the right ---- */
.entry>.logo-chip,.reveal>.logo-chip{float:right;margin:-1.5rem 2.6rem 1rem 1.6rem;padding:.9rem 1.1rem;border:0;border-radius:12px;
  background:#eef3f1;box-shadow:0 10px 30px rgba(0,0,0,.45),0 0 0 1px rgba(45,212,191,.25);transform:rotate(1.2deg);
  transition:transform .25s ease,box-shadow .25s ease}
.entry>.logo-chip:hover,.reveal>.logo-chip:hover{transform:rotate(0) scale(1.03);box-shadow:0 14px 36px rgba(0,0,0,.5),0 0 0 1px rgba(45,212,191,.55)}
.entry>.logo-chip img,.reveal>.logo-chip img{height:auto;max-height:4.6rem;width:auto;max-width:11rem}
.entry>.logo-chip~figure,.entry>.logo-chip~.doc,.entry>.logo-chip~.q,.entry>.logo-chip~.grid,.entry>.logo-chip~.shots,
.entry>.logo-chip~.tbl-wrap,.entry>.logo-chip~.lvid,.entry>.logo-chip~.vid,.reveal>.logo-chip~.grid{clear:right}
@media (max-width:700px){
  .entry>.logo-chip,.reveal>.logo-chip{float:none;display:inline-flex;margin:.6rem 0 .7rem;transform:none}
  .entry>.logo-chip img,.reveal>.logo-chip img{max-height:3.2rem;max-width:10rem}
}
@media (prefers-reduced-motion:reduce){.entry>.logo-chip,.reveal>.logo-chip{transition:none}}

/* ---- depth: shadows on media so it lifts off the page ---- */
figure img,.shots img,article.card .thumb img,.portrait img,.hero-art img{
  box-shadow:0 14px 34px rgba(0,0,0,.55),0 2px 6px rgba(0,0,0,.4),0 0 0 1px rgba(45,212,191,.14);
  transition:transform .25s ease,box-shadow .25s ease}
figure img[role="button"]:hover,.shots img[role="button"]:hover,article.card .thumb img:hover{
  transform:translateY(-3px);
  box-shadow:0 22px 48px rgba(0,0,0,.6),0 4px 10px rgba(0,0,0,.45),0 0 0 1px rgba(45,212,191,.45),0 0 28px rgba(45,212,191,.12)}
.lvid,.vid{box-shadow:0 18px 44px rgba(0,0,0,.6),0 2px 8px rgba(0,0,0,.4),0 0 0 1px rgba(45,212,191,.16)}
.logo-band img{box-shadow:none;filter:drop-shadow(0 10px 22px rgba(0,0,0,.6)) drop-shadow(0 0 18px rgba(45,212,191,.22))}
figure.logo-band img:hover{transform:none}
.entry>.logo-chip,.reveal>.logo-chip{box-shadow:0 16px 40px rgba(0,0,0,.6),0 3px 8px rgba(0,0,0,.45),0 0 0 1px rgba(45,212,191,.3),0 0 24px rgba(45,212,191,.1)}
.logo-chip{box-shadow:0 6px 16px rgba(0,0,0,.45)}
#top .cover-vid video{box-shadow:none}
@media (prefers-reduced-motion:reduce){figure img,.shots img,article.card .thumb img{transition:none}figure img[role="button"]:hover,.shots img[role="button"]:hover,article.card .thumb img:hover{transform:none}}

  /* video library: lazy thumbnails inside facades */
  .vid .facade img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
  .vlib .vidcap a{color:var(--teal)}

/* ---- side menu ---- */
.sidenav{position:fixed;z-index:58;top:5.2rem;bottom:1rem;left:.9rem;width:15.5rem;overflow-y:auto;overscroll-behavior:contain;
  padding:.9rem .7rem;border:1px solid var(--line);border-radius:12px;background:rgba(10,18,22,.92);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);scrollbar-width:thin;scrollbar-color:rgba(45,212,191,.28) transparent;
  transform:translateX(calc(-100% - 2rem));transition:transform .3s cubic-bezier(.2,.7,.3,1)}
.sidenav .sn-h{margin:0 0 .5rem .35rem;font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--teal)}
.sidenav .sn-part{margin:.9rem 0 .3rem .35rem;font-family:var(--mono);font-size:.56rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.sidenav a{display:flex;gap:.6rem;align-items:center;padding:.32rem .4rem;border-radius:6px;text-decoration:none;
  font-size:.8rem;line-height:1.3;color:var(--sub);border-left:2px solid transparent}
.sidenav a:hover,.sidenav a:focus-visible{color:var(--text);background:rgba(45,212,191,.07)}
.sidenav a[aria-current="true"]{color:var(--teal);border-left-color:var(--teal);background:rgba(45,212,191,.08)}
.sidenav .sn-n{order:3;margin-left:auto;padding-left:.4rem;font-family:var(--mono);font-size:.6rem;color:var(--muted);opacity:.8}
.sidenav .sn-n:empty{display:none}
.sidenav .sn-t{order:2}
.sidenav .sn-i{flex:0 0 1rem;width:1rem;height:1rem;background:var(--muted);opacity:.85;
  -webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat;transition:background .2s}
.sidenav a:hover .sn-i{background:var(--text)}
.sidenav a[aria-current="true"] .sn-i{background:var(--teal);opacity:1}
.sidenav::-webkit-scrollbar{width:4px}
.sidenav::-webkit-scrollbar-track{background:transparent}
.sidenav::-webkit-scrollbar-thumb{background:rgba(45,212,191,.25);border:0;border-radius:4px}
.sidenav:hover::-webkit-scrollbar-thumb{background:rgba(45,212,191,.45)}
.sidenav a[aria-current="true"] .sn-n{color:var(--teal)}
.sn-btn{position:fixed;z-index:66;right:1rem;bottom:calc(4.2rem + env(safe-area-inset-bottom,0px));width:2.9rem;height:2.9rem;
  display:flex;align-items:center;justify-content:center;border-radius:50%;cursor:pointer;
  border:1px solid rgba(45,212,191,.45);background:rgba(10,18,22,.95);color:var(--teal)}
.sn-btn svg{width:1.3rem;height:1.3rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.sn-btn:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
body.sn-open .sidenav{transform:none;box-shadow:0 20px 60px rgba(0,0,0,.6)}
@media (min-width:1200px){
  body.has-sn{padding-left:17rem}
  body.has-sn .fpill{left:18rem}
  .sidenav{transform:none;box-shadow:none}
  .sn-btn{display:none}
}
@media (max-width:560px){.sidenav{left:.5rem;right:.5rem;width:auto}}
@media print{.sidenav,.sn-btn{display:none!important}}
@media (prefers-reduced-motion:reduce){.sidenav{transition:none}}

/* page scrollbar in Firefox, matching the webkit one */
html{scrollbar-color:#1b2f36 var(--ink)}