:root{
  --ground:#0d1219; --panel:#151d28; --panel2:#1b2632; --line:#27323f; --line-soft:#1e2732;
  --ink:#c8d2de; --muted:#7c8896; --faint:#586576;
  --cyan:#48c9dd;   /* feed / data plane */
  --violet:#a689f9; /* on-chain / guard plane */
  --ok:#46b95c; --warn:#d9a441; --down:#f2544b;
  --mono:ui-monospace,"SF Mono","JetBrains Mono","Cascadia Code",Menlo,Consolas,monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --nav:264px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased}
a{color:var(--cyan); text-decoration:none}
a:hover{text-decoration:underline}

/* ── layout ── */
.shell{display:grid; grid-template-columns:var(--nav) 1fr; min-height:100vh}
.side{position:sticky; top:0; align-self:start; height:100vh; overflow-y:auto;
  border-right:1px solid var(--line); background:#0b1016; padding:26px 20px 40px}
.main{min-width:0}
.doc{max-width:820px; margin:0 auto; padding:44px 32px 96px}

/* ── sidebar ── */
.brand{display:flex; align-items:center; gap:10px; font-family:var(--mono);
  font-weight:600; font-size:1.02rem; letter-spacing:-.01em; color:var(--ink); margin-bottom:4px}
.brand .dot{width:9px; height:9px; border-radius:2px;
  background:linear-gradient(135deg,var(--cyan),var(--violet))}
.brand-sub{font-family:var(--mono); font-size:.68rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--faint); margin:0 0 22px 19px}
.navgroup{margin-top:22px}
.navgroup .lbl{font-family:var(--mono); font-size:.66rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--faint); margin:0 0 8px 8px}
.side nav a{display:block; padding:6px 10px; border-radius:7px; color:var(--muted);
  font-size:.92rem; line-height:1.4}
.side nav a:hover{color:var(--ink); background:var(--panel); text-decoration:none}
.side nav a.active{color:var(--ink); background:var(--panel2);
  box-shadow:inset 2px 0 0 var(--cyan)}

/* ── prose ── */
.eyebrow{font-family:var(--mono); font-size:.72rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--muted)}
h1{font-family:var(--mono); font-weight:600; letter-spacing:-.015em;
  font-size:clamp(1.8rem,4vw,2.5rem); line-height:1.08; margin:.35rem 0 0; text-wrap:balance}
.tagline{color:var(--muted); font-size:1.08rem; margin:16px 0 0; max-width:64ch}
h2{font-family:var(--mono); font-weight:600; font-size:1.4rem; letter-spacing:-.01em;
  margin:52px 0 4px; padding-top:8px; text-wrap:balance; scroll-margin-top:20px}
h3{font-size:1.08rem; font-weight:600; margin:30px 0 0; letter-spacing:-.005em}
p{margin:14px 0 0}
.doc > p:first-of-type, h2 + p, h3 + p{margin-top:12px}
p, li{color:var(--ink)}
.muted{color:var(--muted)}
strong{color:var(--ink); font-weight:600}
hr{border:none; border-top:1px solid var(--line); margin:44px 0}

code{font-family:var(--mono); font-size:.86em; color:var(--cyan);
  background:rgba(72,201,221,.09); padding:1px 5px; border-radius:4px; word-break:break-word}
h2 code,h3 code{font-size:.82em}
pre{margin:18px 0 0; background:#0a0f15; border:1px solid var(--line); border-radius:10px;
  padding:16px 18px; overflow-x:auto}
pre code{font-family:var(--mono); font-size:.83rem; line-height:1.62; color:#aeb9c7;
  background:none; padding:0; white-space:pre}
.cap{font-family:var(--mono); font-size:.72rem; letter-spacing:.03em; color:var(--muted); margin:9px 0 0}
.tok-k{color:var(--violet)} .tok-s{color:#8fd79b} .tok-n{color:var(--cyan)} .tok-c{color:var(--faint)}

ul,ol{margin:14px 0 0; padding-left:0}
.doc ul{list-style:none; display:grid; gap:9px}
.doc ul li{position:relative; padding-left:20px; color:var(--muted)}
.doc ul li::before{content:"›"; position:absolute; left:2px; color:var(--cyan); font-family:var(--mono)}
.doc ul li strong, .doc ol li strong{color:var(--ink)}
.doc ol{list-style:none; counter-reset:s; display:grid; gap:10px}
.doc ol li{position:relative; padding-left:34px; color:var(--muted)}
.doc ol li::before{counter-increment:s; content:counter(s,decimal-leading-zero);
  position:absolute; left:0; top:1px; font-family:var(--mono); font-size:.74rem;
  color:var(--violet); border:1px solid rgba(166,137,249,.35); border-radius:5px; padding:1px 5px}

/* ── callout ── */
.note{margin:20px 0 0; background:var(--panel); border:1px solid var(--line);
  border-left:3px solid var(--cyan); border-radius:8px; padding:14px 18px; color:var(--muted); font-size:.95rem}
.note.chain{border-left-color:var(--violet)}
.note.warn{border-left-color:var(--warn)}
.note strong{color:var(--ink)}

/* ── cards ── */
.grid{display:grid; gap:15px; margin-top:20px}
@media(min-width:640px){ .grid.cols2{grid-template-columns:1fr 1fr} }
.card{background:var(--panel); border:1px solid var(--line); border-radius:11px; padding:18px 20px}
.card h3{margin:0 0 5px; display:flex; align-items:center; gap:9px; font-size:1rem}
.card h3::before{content:""; width:7px; height:7px; border-radius:2px; background:var(--accent,var(--cyan)); flex:none}
.card.chain{--accent:var(--violet)}
.card p{margin:0; color:var(--muted); font-size:.93rem}
.card p+p{margin-top:8px}

/* ── key-schema table ── */
.table-wrap{overflow-x:auto; margin-top:20px; border:1px solid var(--line); border-radius:11px}
table{border-collapse:collapse; width:100%; font-size:.9rem; min-width:560px}
th,td{text-align:left; padding:11px 16px; border-top:1px solid var(--line); vertical-align:top}
thead th{border-top:none; font-family:var(--mono); font-size:.68rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--faint); background:#0b1016; font-weight:600}
td code{white-space:nowrap}
td.desc{color:var(--muted)}

/* ── flow diagram ── */
.flow{display:flex; flex-wrap:wrap; align-items:stretch; gap:9px; margin-top:22px}
.node{flex:1 1 130px; background:var(--panel); border:1px solid var(--line); border-radius:10px;
  padding:13px 15px; min-width:0}
.node .nl{font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--cyan)}
.node.v .nl{color:var(--violet)}
.node .nt{margin:5px 0 0; font-size:.9rem; color:var(--ink)}
.node .nd{margin:3px 0 0; font-size:.8rem; color:var(--faint)}
.arrow{align-self:center; color:var(--faint); font-family:var(--mono); flex:none}
@media(max-width:640px){ .arrow{transform:rotate(90deg)} .flow{flex-direction:column} }

/* ── byte map ── */
.strip{display:grid; grid-template-columns:20fr 10fr 3.6fr 3.6fr; gap:4px; border-radius:8px;
  overflow:hidden; margin-top:18px}
.seg{padding:13px 8px; text-align:center; font-family:var(--mono); background:var(--panel2); border:1px solid var(--line)}
.seg .b{display:block; font-size:.95rem; color:var(--ink); font-weight:600}
.seg .r{display:block; font-size:.66rem; color:var(--faint); margin-top:3px}
.seg.creator{background:linear-gradient(180deg,rgba(166,137,249,.16),rgba(166,137,249,.05))}
.seg.chain{background:linear-gradient(180deg,rgba(72,201,221,.16),rgba(72,201,221,.05))}
.seg.slot{background:rgba(217,164,65,.14)}
.seg.pos{background:rgba(70,185,92,.14)}

/* ── pills ── */
.pills{display:flex; flex-wrap:wrap; gap:8px; margin-top:22px}
.pill{font-family:var(--mono); font-size:.73rem; padding:5px 11px; border:1px solid var(--line);
  border-radius:999px; color:var(--muted); white-space:nowrap}
.pill b{color:var(--ink); font-weight:600}
.pill.cyan{border-color:rgba(72,201,221,.4); color:#9fe1ec}
.pill.violet{border-color:rgba(166,137,249,.4); color:#c8b6fc}

/* ── page footer nav ── */
.pagenav{display:flex; justify-content:space-between; gap:16px; margin-top:64px;
  padding-top:24px; border-top:1px solid var(--line); font-family:var(--mono); font-size:.85rem}
.pagenav a{color:var(--muted)} .pagenav a:hover{color:var(--ink)}
.pagenav .nx{text-align:right; margin-left:auto}

/* ── mobile ── */
.menubtn{display:none}
@media(max-width:860px){
  .shell{grid-template-columns:1fr}
  .side{position:fixed; z-index:40; width:min(84vw,300px); transform:translateX(-100%);
    transition:transform .22s ease}
  .side.open{transform:none}
  .menubtn{display:inline-flex; position:fixed; z-index:50; top:14px; left:14px;
    align-items:center; gap:8px; font-family:var(--mono); font-size:.8rem; color:var(--ink);
    background:var(--panel2); border:1px solid var(--line); border-radius:8px; padding:8px 12px; cursor:pointer}
  .scrim{position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:30; opacity:0;
    pointer-events:none; transition:opacity .22s}
  .scrim.on{opacity:1; pointer-events:auto}
  .doc{padding:64px 20px 80px}
}
@media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .side{transition:none} }
:focus-visible{outline:2px solid var(--cyan); outline-offset:2px; border-radius:4px}