:root{
  --paper:#f5f0e3;
  --paper-grid:rgba(28,36,48,.07);
  --surface:#fbf8ef;
  --ink:#1c2430;
  --ink-soft:#5b6472;
  --border:rgba(28,36,48,.16);
  --accent:#1f5c96;
  --accent-soft:rgba(31,92,150,.12);
  --amber:#a85a1e;
  --amber-soft:rgba(168,90,30,.14);
  --data:#2c7a5e;
  --data-soft:rgba(44,122,94,.14);
  --security:#a3352e;
  --security-soft:rgba(163,53,46,.14);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0d2542;
    --paper-grid:rgba(255,255,255,.08);
    --surface:#123657;
    --ink:#e9f1fb;
    --ink-soft:#9fb6cf;
    --border:rgba(255,255,255,.18);
    --accent:#7cc5ff;
    --accent-soft:rgba(124,197,255,.16);
    --amber:#ffb35c;
    --amber-soft:rgba(255,179,92,.16);
    --data:#6fdcb4;
    --data-soft:rgba(111,220,180,.16);
    --security:#ff8f86;
    --security-soft:rgba(255,143,134,.16);
  }
}
:root[data-theme="dark"]{
  --paper:#0d2542;
  --paper-grid:rgba(255,255,255,.08);
  --surface:#123657;
  --ink:#e9f1fb;
  --ink-soft:#9fb6cf;
  --border:rgba(255,255,255,.18);
  --accent:#7cc5ff;
  --accent-soft:rgba(124,197,255,.16);
  --amber:#ffb35c;
  --amber-soft:rgba(255,179,92,.16);
  --data:#6fdcb4;
  --data-soft:rgba(111,220,180,.16);
  --security:#ff8f86;
  --security-soft:rgba(255,143,134,.16);
}

*{box-sizing:border-box;}
html,body{ margin:0; padding:0; }
body{
  background:var(--paper);
  background-image:
    linear-gradient(var(--paper-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--paper-grid) 1px, transparent 1px);
  background-size:26px 26px;
  color:var(--ink);
  font-family:"IBM Plex Serif", Georgia, serif;
  line-height:1.75;
}
a{ color:inherit; }
.wrap{ max-width:1080px; margin:0 auto; padding:28px 20px 80px; position:relative; }

.mono{ font-family:"IBM Plex Mono", ui-monospace, monospace; }
.eyebrow{
  font-family:"IBM Plex Mono", monospace;
  font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-soft);
}
h1,h2,h3,.wordmark{ font-family:"IBM Plex Sans Condensed", sans-serif; text-wrap:balance; }

/* ---- top bar ---- */
.topbar{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-bottom:26px; }
.wordmark{ font-weight:700; font-size:19px; letter-spacing:.01em; display:flex; align-items:center; gap:8px; white-space:nowrap; text-decoration:none; }
.wordmark svg{ flex:none; }
.search{ position:relative; flex:1; min-width:220px; max-width:420px; }
.search input{
  width:100%; padding:10px 14px; border-radius:3px; border:1px solid var(--border);
  background:var(--surface); color:var(--ink); font-family:"IBM Plex Mono", monospace; font-size:13.5px;
}
.search input:focus{ outline:2px solid var(--accent); outline-offset:1px; }
.search-results{
  position:absolute; top:calc(100% + 6px); left:0; right:0; background:var(--surface);
  border:1px solid var(--border); border-radius:4px; box-shadow:0 10px 24px rgba(0,0,0,.16);
  overflow:hidden; z-index:30; display:none;
}
.search-results.open{ display:block; }
.search-results button{
  display:flex; align-items:baseline; gap:8px; width:100%; text-align:left; padding:9px 12px;
  background:none; border:none; border-bottom:1px solid var(--border); color:var(--ink); cursor:pointer; font-family:"IBM Plex Serif", serif;
}
.search-results button:last-child{ border-bottom:none; }
.search-results button:hover, .search-results button:focus-visible{ background:var(--accent-soft); }
.search-results .dot{ width:7px; height:7px; border-radius:50%; flex:none; }
.search-results .t{ font-family:"IBM Plex Sans Condensed", sans-serif; font-weight:600; font-size:14px; }
.search-results .d{ color:var(--ink-soft); font-size:12.5px; }
.search-empty{ padding:10px 12px; font-size:12.5px; color:var(--ink-soft); font-family:"IBM Plex Mono", monospace; }

/* ---- hero: title block ---- */
.titleblock{
  position:relative; border:1px solid var(--border); border-radius:6px; background:var(--surface);
  padding:22px 24px 24px; margin-bottom:22px;
}
.tb-row{ display:flex; gap:18px; flex-wrap:wrap; margin-bottom:14px; }
.tb-field{ display:flex; flex-direction:column; gap:2px; }
.tb-field .v{ font-family:"IBM Plex Mono", monospace; font-size:12.5px; color:var(--ink); }
.term-title{ font-size:clamp(30px, 5vw, 44px); font-weight:700; margin:0 0 4px; line-height:1.1; }
.reading{ font-family:"IBM Plex Mono", monospace; color:var(--ink-soft); font-size:14px; margin:0 0 14px; }
.chips{ display:flex; gap:8px; flex-wrap:wrap; }
.chip{
  font-family:"IBM Plex Mono", monospace; font-size:11.5px; padding:4px 10px; border-radius:100px;
  border:1px solid var(--border); color:var(--ink-soft); display:inline-flex; align-items:center; gap:6px;
}
.chip.cat{ font-weight:600; }
.chip .dot{ width:7px; height:7px; border-radius:50%; }

/* ---- layout ---- */
.grid{ display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:28px; align-items:start; }
@media (max-width:880px){ .grid{ grid-template-columns:1fr; } }

.levels{ display:inline-flex; padding:3px; border:1px solid var(--border); border-radius:100px; background:var(--surface); margin-bottom:20px; }
.levels button{
  font-family:"IBM Plex Mono", monospace; font-size:12px; letter-spacing:.03em; padding:7px 14px; border-radius:100px;
  border:none; background:none; color:var(--ink-soft); cursor:pointer;
}
.levels button.active{ background:var(--accent); color:var(--surface); }
.levels button:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

.prose{ max-width:64ch; font-size:16.5px; }
.prose p{ margin:0; }
.level-panel{ display:none; }
.level-panel.active{ display:block; }

a.term-link{ color:var(--accent); text-decoration:underline dotted; text-underline-offset:3px; cursor:help; }
a.term-link:hover, a.term-link:focus-visible{ background:var(--accent-soft); border-radius:2px; }

/* ---- preview popover ---- */
#preview{
  position:fixed; max-width:260px; background:var(--surface); border:1px solid var(--border);
  border-radius:6px; padding:12px 14px; box-shadow:0 12px 28px rgba(0,0,0,.2); z-index:50;
  opacity:0; visibility:hidden; transform:translateY(3px); transition:opacity .12s ease, transform .12s ease;
}
#preview.show{ opacity:1; visibility:visible; transform:translateY(0); }
#preview .cat{ font-family:"IBM Plex Mono", monospace; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; display:flex; align-items:center; gap:6px; margin-bottom:5px; }
#preview .cat .dot{ width:7px; height:7px; border-radius:50%; }
#preview .t{ font-family:"IBM Plex Sans Condensed", sans-serif; font-weight:700; font-size:15.5px; margin:0 0 4px; }
#preview .d{ font-size:13px; color:var(--ink-soft); line-height:1.5; margin:0; }

/* ---- graph panel ---- */
.graph-panel{
  border:1px solid var(--border); border-radius:6px; background:var(--surface); padding:16px 16px 14px;
  position:sticky; top:20px;
}
.graph-panel .eyebrow{ display:flex; justify-content:space-between; margin-bottom:6px; }
.graph-panel svg{ width:100%; height:auto; overflow:visible; }
.edge{ stroke:var(--border); stroke-width:1.4; transition:stroke .15s ease, stroke-width .15s ease; }
.edge.active{ stroke:var(--accent); stroke-width:2; }
.node circle{ stroke:var(--surface); stroke-width:2; transition:r .15s ease; }
.node text{ font-family:"IBM Plex Mono", monospace; fill:var(--ink); pointer-events:none; }
.node{ cursor:pointer; }
.node.dim circle{ opacity:.35; }
.node.dim text{ opacity:.35; }
.cat-architecture{ fill:var(--amber); }
.cat-protocol{ fill:var(--accent); }
.cat-data{ fill:var(--data); }
.cat-security{ fill:var(--security); }
.legend{ display:flex; flex-wrap:wrap; gap:10px 14px; margin-top:10px; font-family:"IBM Plex Mono", monospace; font-size:11px; color:var(--ink-soft); }
.legend span{ display:inline-flex; align-items:center; gap:5px; }
.legend i{ width:8px; height:8px; border-radius:50%; display:inline-block; }

@media (prefers-reduced-motion: no-preference){
  .node{ animation:bob 5.5s ease-in-out infinite; }
}
@keyframes bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-3px); } }

/* ---- index / listing page ---- */
.cat-section{ margin-bottom:28px; }
.cat-section h2{ font-size:15px; display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.term-list{ display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:0; padding:0; }
.term-list a{
  display:inline-block; padding:6px 12px; border:1px solid var(--border); border-radius:100px;
  text-decoration:none; font-size:14px; background:var(--surface);
}
.term-list a:hover{ background:var(--accent-soft); border-color:var(--accent); }
.intro{ max-width:60ch; color:var(--ink-soft); margin:0 0 30px; }
.notfound{ text-align:center; padding:80px 20px; }