:root{
  --bg:#f5f6f3; --surface:#ffffff; --surface2:#eef1ec; --ink:#16201d; --muted:#55645f; --line:#d9dfd9;
  --accent:#0f766e; --accent-ink:#ffffff; --accent-soft:#d5ede9; --warn:#b45309; --warn-soft:#fdecc8;
  --bad:#b42318; --good:#1a7f37; --term:#0b5f9e; --shadow:0 1px 2px rgba(0,0,0,.06),0 4px 14px rgba(0,0,0,.05);
  --c1:#0f766e; --c2:#b45309; --c3:#6d28d9; --c4:#0b5f9e; --c5:#b42318; --c6:#4d7c0f; --c7:#a21caf; --c8:#475569;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0e1513; --surface:#16201d; --surface2:#1c2924; --ink:#e6efeb; --muted:#9bb0a8; --line:#2a3a34;
    --accent:#2dd4bf; --accent-ink:#06201c; --accent-soft:#12332e; --warn:#fbbf24; --warn-soft:#3a2d0b;
    --bad:#ff7b72; --good:#56d364; --term:#79c0ff; --shadow:0 1px 2px rgba(0,0,0,.4),0 4px 14px rgba(0,0,0,.3);
    --c1:#2dd4bf; --c2:#fbbf24; --c3:#a78bfa; --c4:#79c0ff; --c5:#ff7b72; --c6:#a3e635; --c7:#f0abfc; --c8:#94a3b8;
  }
}
:root[data-theme="dark"]{
  --bg:#0e1513; --surface:#16201d; --surface2:#1c2924; --ink:#e6efeb; --muted:#9bb0a8; --line:#2a3a34;
  --accent:#2dd4bf; --accent-ink:#06201c; --accent-soft:#12332e; --warn:#fbbf24; --warn-soft:#3a2d0b;
  --bad:#ff7b72; --good:#56d364; --term:#79c0ff; --shadow:0 1px 2px rgba(0,0,0,.4),0 4px 14px rgba(0,0,0,.3);
  --c1:#2dd4bf; --c2:#fbbf24; --c3:#a78bfa; --c4:#79c0ff; --c5:#ff7b72; --c6:#a3e635; --c7:#f0abfc; --c8:#94a3b8;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
a{color:var(--accent)} a:hover{text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
code{background:var(--surface2);padding:.1em .35em;border-radius:4px;font-size:.9em}
pre{background:var(--surface2);padding:12px;border-radius:8px;overflow:auto}

/* shell */
.top{position:sticky;top:0;z-index:30;display:flex;gap:12px;align-items:center;padding:10px 16px;background:var(--surface);border-bottom:1px solid var(--line)}
.brand{font-weight:700;letter-spacing:.01em;white-space:nowrap}
.brand small{display:block;font-weight:500;color:var(--muted);font-size:.72rem;letter-spacing:.04em}
.search{flex:1;max-width:520px;position:relative}
.search input{width:100%;padding:8px 12px;border-radius:10px;border:1px solid var(--line);background:var(--bg);color:var(--ink);font:inherit}
.search-res{position:absolute;left:0;right:0;top:110%;background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);max-height:60vh;overflow:auto;display:none}
.search-res.on{display:block}
.search-res a{display:block;padding:8px 12px;text-decoration:none;color:var(--ink);border-bottom:1px solid var(--line)}
.search-res a:hover{background:var(--accent-soft)}
.search-res small{color:var(--muted);display:block}
.iconbtn{border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:6px 10px}
.layout{display:flex;min-height:calc(100vh - 56px)}
nav.side{width:250px;flex:none;padding:14px 10px;border-right:1px solid var(--line);background:var(--surface);position:sticky;top:56px;align-self:flex-start;height:calc(100vh - 56px);overflow:auto}
nav.side h6{margin:14px 8px 4px;font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
nav.side a{display:block;padding:7px 10px;border-radius:8px;text-decoration:none;color:var(--ink);font-size:.94rem}
nav.side a:hover{background:var(--surface2)}
nav.side a.on{background:var(--accent-soft);color:var(--ink);font-weight:600;box-shadow:inset 3px 0 0 var(--accent)}
main{flex:1;min-width:0;padding:24px clamp(16px,4vw,48px) 80px;max-width:1100px}
#menu{display:none}
@media (max-width:860px){
  #menu{display:inline-block}
  nav.side{position:fixed;left:0;top:56px;z-index:25;transform:translateX(-102%);transition:transform .2s;width:80vw;max-width:300px;box-shadow:var(--shadow)}
  nav.side.open{transform:none}
  .brand small{display:none}
}

/* type */
h1{font-size:clamp(1.7rem,3.4vw,2.4rem);line-height:1.15;margin:.2em 0 .2em}
h2{font-size:1.35rem;margin:1.4em 0 .4em}
h3{font-size:1.1rem}
.lead{font-size:1.1rem;color:var(--muted);max-width:70ch}
.eyebrow{font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);font-weight:700}
.muted{color:var(--muted)}

/* cards & tiles */
.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px 16px;box-shadow:var(--shadow)}
.tile .k{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.tile .v{font-size:1.5rem;font-weight:700;line-height:1.2;margin:.15em 0}
.tile .s{font-size:.86rem;color:var(--muted)}
.tile.warn{border-color:var(--warn);background:linear-gradient(0deg,var(--warn-soft),var(--warn-soft)) }
.banner{border:1px solid var(--warn);background:var(--warn-soft);border-radius:14px;padding:14px 16px;margin:16px 0}
.banner b{color:var(--warn)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px;box-shadow:var(--shadow);margin:14px 0}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.chip{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:3px 11px;font-size:.84rem;text-decoration:none;color:var(--ink)}
.chip.on,.chip:hover{background:var(--accent-soft);border-color:var(--accent)}
.badge{display:inline-block;font-size:.7rem;font-weight:700;padding:1px 8px;border-radius:999px;border:1px solid var(--line);text-transform:uppercase;letter-spacing:.04em}
.badge.high{color:var(--good);border-color:var(--good)} .badge.medium{color:var(--warn);border-color:var(--warn)}
.badge.low,.badge.unverified{color:var(--bad);border-color:var(--bad)}

/* collapsibles */
details.sec{background:var(--surface);border:1px solid var(--line);border-radius:12px;margin:10px 0;box-shadow:var(--shadow)}
details.sec>summary{cursor:pointer;padding:12px 16px;font-weight:650;font-size:1.05rem;list-style:none;display:flex;gap:10px;align-items:center}
details.sec>summary::before{content:"▸";color:var(--accent);transition:transform .15s}
details.sec[open]>summary::before{transform:rotate(90deg)}
details.sec>.body{padding:0 18px 14px}
details.sub{border-left:3px solid var(--accent-soft);margin:8px 0;padding-left:10px}
details.sub>summary{cursor:pointer;font-weight:600;padding:6px 0;list-style:none}
details.sub>summary::before{content:"▸ ";color:var(--accent)}
details.sub[open]>summary::before{content:"▾ "}
.body table{border-collapse:collapse;width:100%;font-size:.9rem}
.tablewrap{overflow:auto;margin:8px 0}
.body th,.body td{border:1px solid var(--line);padding:5px 8px;text-align:left;vertical-align:top}
.body th{background:var(--surface2)}
.body li{margin:.2em 0}

/* glossary terms */
.term{color:var(--term);border-bottom:1.5px dotted var(--term);cursor:help;background:none;border-top:0;border-left:0;border-right:0;padding:0;font:inherit}
.term:hover,.term:focus{background:var(--accent-soft);outline:none}
#tip{position:fixed;z-index:60;max-width:320px;background:var(--ink);color:var(--bg);padding:8px 11px;border-radius:9px;font-size:.84rem;pointer-events:none;display:none;box-shadow:var(--shadow)}
#card{position:fixed;right:16px;bottom:16px;z-index:55;width:min(420px,calc(100vw - 32px));max-height:70vh;overflow:auto;background:var(--surface);border:1px solid var(--accent);border-radius:14px;box-shadow:0 10px 40px rgba(0,0,0,.28);padding:16px;display:none}
#card.on{display:block}
#card h4{margin:0 0 4px;font-size:1.15rem}
#card .x{position:absolute;right:10px;top:8px;border:0;background:none;font-size:1.3rem}
#card .cat{font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}

/* labs */
.lab{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px;margin:20px 0;box-shadow:var(--shadow)}
.lab h3{margin:.1em 0}
.ctrls{display:grid;gap:10px 18px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin:10px 0}
.ctrls label{font-size:.86rem;color:var(--muted);display:block}
.ctrls output{float:right;color:var(--ink);font-weight:600}
.ctrls input[type=range]{width:100%;accent-color:var(--accent)}
canvas{width:100%;max-width:100%;border:1px solid var(--line);border-radius:10px;background:var(--bg);display:block}
.readouts{display:flex;flex-wrap:wrap;gap:10px;margin:10px 0}
.readouts .tile{flex:1 1 150px;padding:10px 12px}
.readouts .tile .v{font-size:1.2rem}
.btn{border:1px solid var(--accent);background:var(--accent);color:var(--accent-ink);border-radius:10px;padding:6px 14px;font-weight:600}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:.84rem;color:var(--muted);margin:6px 0}
.legend i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:5px;vertical-align:middle}

/* 3d */
.split{display:grid;grid-template-columns:260px 1fr;gap:14px}
@media (max-width:860px){.split{grid-template-columns:1fr}}
.slist{max-height:520px;overflow:auto;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.slist button{display:block;width:100%;text-align:left;border:0;border-bottom:1px solid var(--line);background:none;padding:9px 12px}
.slist button.on{background:var(--accent-soft);font-weight:600}
.slist small{display:block;color:var(--muted)}
#viewer{width:100%;height:480px;position:relative;border:1px solid var(--line);border-radius:12px;background:#0b1210;overflow:hidden}
.pre-warm{opacity:.6}
.timeline-svg{width:100%;height:auto;background:var(--surface);border:1px solid var(--line);border-radius:12px}
.pager{display:flex;gap:10px;align-items:center;margin:12px 0}
.srcrow{display:grid;grid-template-columns:1fr auto;gap:8px;padding:6px 0;border-bottom:1px solid var(--line);font-size:.88rem;word-break:break-all}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}