:root{--background:#060611;--foreground:#f4f5f8;--card:#0d0e1c;--muted:#131423;--muted-foreground:#8e91a5;--border:#1c1e2d;--hairline:#25273a;--accent:#17192b;--signal:#955aff;--signal-glow:#b883ff;--accent-blue:#279cff;--accent-mint:#28d4b2;--destructive:#f51945;--radius:.25rem;--radius-xl:.75rem;
--font-display:"Instrument Serif",ui-serif,Georgia,serif;--font-sans:"Inter Tight",ui-sans-serif,system-ui,sans-serif;--font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,monospace}
*{box-sizing:border-box}body{font-family:var(--font-sans);margin:0;background:var(--background);color:var(--foreground);-webkit-font-smoothing:antialiased}
header{position:sticky;top:0;z-index:10;display:flex;gap:16px;align-items:center;height:56px;padding:0 2.5rem;background:rgba(6,6,17,.9);backdrop-filter:blur(24px);border-bottom:1px solid var(--hairline)}
.brand{display:flex;align-items:center;gap:8px;color:var(--foreground);text-decoration:none}.wordmark{font-family:var(--font-display);font-size:24px}.sp{flex:1}
.eyebrow{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-foreground)}
main{width:min(100%,1440px);margin:0 auto;padding:0 2.5rem 64px}
.hero{padding:56px 0 24px;border-bottom:1px solid var(--hairline)}.hero-heading{font-family:var(--font-display);font-weight:400;font-size:4.5rem;line-height:1;margin:16px 0 0}
.text-brand-gradient{background-image:linear-gradient(100deg,var(--accent-blue) 0%,var(--signal) 55%,var(--signal-glow) 100%);color:transparent;-webkit-background-clip:text;background-clip:text}
.lede{max-width:36rem;font-size:1.0625rem;line-height:1.625;color:var(--muted-foreground);margin-top:20px}
h2{font-family:var(--font-display);font-weight:400;font-size:30px;margin:48px 0 14px}
select{font:500 14px var(--font-sans);background:var(--background);color:var(--foreground);border:1px solid var(--border);padding:8px 12px;border-radius:var(--radius);min-height:36px}select:focus{outline:1px solid var(--signal)}
#banner{font-size:13px;color:var(--muted-foreground)}
#banner.sample{color:var(--signal-glow);background:rgba(149,90,255,.1);border:1px solid rgba(149,90,255,.4);padding:6px 12px;border-radius:var(--radius);font-family:var(--font-mono);font-size:12px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;margin-top:32px}
.card{background:var(--card);border:1px solid var(--hairline);border-radius:var(--radius-xl);padding:16px 18px;color:var(--muted-foreground);font-size:13px}
.card b{display:block;font-family:var(--font-display);font-weight:400;font-size:40px;line-height:1.1;color:var(--foreground)}
table{border-collapse:collapse;width:100%;font-size:13px;background:var(--card);border:1px solid var(--hairline);border-radius:var(--radius-xl);overflow:hidden}
td,th{border-bottom:1px solid var(--hairline);padding:10px 12px;text-align:left;vertical-align:top}th{font:500 11px var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted-foreground)}
.tag{font:11px var(--font-mono);padding:2px 7px;border-radius:var(--radius);margin-right:4px}.tag.o{background:rgba(40,212,178,.12);color:var(--accent-mint);border:1px solid rgba(40,212,178,.4)}.tag.i{background:rgba(39,156,255,.1);color:var(--accent-blue);border:1px dashed var(--accent-blue)}
.net{background:var(--card);border:1px solid var(--hairline);border-left:2px solid var(--signal);border-radius:var(--radius-xl);padding:14px 18px;margin-bottom:10px}
#map{width:100%;height:440px;background:var(--card);border:1px solid var(--hairline);border-radius:var(--radius-xl)}
.legend{color:var(--muted-foreground);font-size:13px}.legend .obs{color:var(--accent-mint)}.legend .inf{color:var(--accent-blue)}code{font-family:var(--font-mono);color:var(--signal-glow)}
ul{color:var(--muted-foreground);line-height:1.7}

.mapwrap{display:grid;grid-template-columns:1fr 320px;gap:12px;align-items:start}
#map{height:auto}#inspector{position:sticky;top:72px;background:var(--card);border:1px solid var(--hairline);border-radius:var(--radius-xl);padding:18px;font-size:13px}
#inspector h3{font-family:var(--font-display);font-weight:400;font-size:26px;margin:6px 0 12px;overflow-wrap:anywhere}#inspector dl{display:grid;grid-template-columns:96px 1fr;gap:8px 10px;margin:0}#inspector dt{color:var(--muted-foreground);font:11px var(--font-mono);text-transform:uppercase;letter-spacing:.08em}#inspector dd{margin:0;overflow-wrap:anywhere}
.muted{color:var(--muted-foreground);line-height:1.6}
#map .hit{cursor:pointer}#map .hit text{fill:#f4f5f8;pointer-events:none}
#map .lan rect{fill:#131423;stroke:#25273a}#map .br rect{fill:#17192b;stroke:#955aff}#map .unr rect{fill:#0d0e1c;stroke:#279cff;stroke-dasharray:4 3}#map .unr text{fill:#c9d3ff}
#map .dot circle{fill:#131423;stroke:#8e91a5;stroke-width:1.5}#map .dot.inf circle{stroke:#279cff;stroke-dasharray:3 2}
#map .hit:hover rect,#map .hit:hover circle{stroke:#b883ff}#map .sel rect,#map .sel circle{stroke:#b883ff;stroke-width:2.5;fill:rgba(149,90,255,.18)}
#map line.obs{stroke:#28d4b2;stroke-width:1.5}#map line.inf,#map path.inf{stroke:#279cff;stroke-dasharray:4 4;stroke-width:1.5}
.net.unr{border-left-color:var(--accent-blue);border-style:dashed}
/* v0.3 map + standards logos */
.sechead{display:flex;align-items:center;gap:20px;margin:48px 0 14px}.sechead h2{margin:0}.stds{display:flex;gap:18px;align-items:center}
.std-logo{opacity:.72;display:block}.std-logo.thread{height:26px}.std-logo.matter{height:16px}.net .std-logo{float:right;height:22px;margin:2px 0 6px 12px}
.footnote{margin-top:56px;padding-top:18px;border-top:1px solid var(--hairline);font:11px/1.7 var(--font-mono);letter-spacing:.04em;color:var(--muted-foreground)}
.legend{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;font-size:13px;margin-bottom:12px}.key{display:inline-flex;align-items:center;gap:7px;font:11px var(--font-mono);text-transform:uppercase;letter-spacing:.1em;color:var(--muted-foreground)}
.key i{width:26px;border-top:2px solid var(--accent-mint)}.key.inf i{border-top:2px dashed var(--accent-blue)}.key.obs{color:var(--accent-mint)}.key.inf{color:var(--accent-blue)}
.sw{width:14px;height:10px;border-radius:3px;border:1px solid var(--signal);background:var(--accent)}.sw.unr{border:1px dashed var(--accent-blue);background:var(--card)}.sw.mt{border-radius:6px;border-color:#3a3d57;background:var(--muted)}
.mapwrap{display:block;position:relative;background:radial-gradient(1200px 500px at 20% 0%,rgba(149,90,255,.07),transparent 60%),var(--card);border:1px solid var(--hairline);border-radius:var(--radius-xl);overflow:hidden}
#map{display:block;width:100%;background:none;border:0;border-radius:0;cursor:grab;touch-action:none;user-select:none}#map.dragging{cursor:grabbing}
.mapctl{position:absolute;top:12px;right:12px;display:flex;gap:6px;align-items:center;z-index:2}.mapctl .eyebrow{order:-1;margin-right:8px;font-size:10px}
.mapctl button{font:500 13px var(--font-sans);min-width:32px;height:32px;padding:0 10px;background:var(--background);color:var(--foreground);border:1px solid var(--border);border-radius:var(--radius);cursor:pointer}.mapctl button:hover{background:var(--accent)}
#map .link{fill:none;stroke-width:1.5;transition:opacity .2s,stroke-width .2s}#map .link.obs{stroke:#28d4b2;opacity:.7}#map .link.inf{stroke:#279cff;stroke-dasharray:5 5;opacity:.6}#map .bracket{fill:none;stroke:#279cff;stroke-dasharray:3 4;opacity:.45}
#map .node rect{transition:fill .2s,stroke .2s,opacity .2s}#map .node text{fill:#f4f5f8;pointer-events:none}#map .node text.sub{fill:#8e91a5;letter-spacing:.06em}
#map .lan rect{fill:#131423;stroke:#3a3d57}#map .net rect{fill:rgba(149,90,255,.12);stroke:#955aff}#map .group rect{fill:#17192b;stroke:#25273a}#map .group.unr rect{fill:#0d0e1c;stroke:#279cff;stroke-dasharray:4 3}#map .group.fabric rect{stroke:rgba(39,156,255,.45)}
#map .br rect{fill:#17192b;stroke:rgba(149,90,255,.55)}#map .br circle{fill:#28d4b2}#map .br.unr rect{fill:#0d0e1c;stroke:#279cff;stroke-dasharray:4 3}#map .br.unr circle{fill:none;stroke:#279cff}
#map .matter rect{fill:#131423;stroke:#2a2d44}#map .matter circle{fill:none;stroke:#279cff;stroke-width:1.3;stroke-dasharray:2 1.5}#map .matter text{fill:#c9cbd8}
#map .fold circle{fill:#060611;stroke:#3a3d57}#map .fold text{fill:#b883ff}#map .fold{cursor:pointer;pointer-events:all}#map .fold:hover circle{stroke:#b883ff}
#map .hit:hover rect{stroke:#b883ff}#map .sel rect{stroke:#b883ff!important;stroke-width:2;fill:rgba(149,90,255,.2)!important}
#map.hl .node:not(.on){opacity:.32}#map.hl .link:not(.on),#map.hl .bracket:not(.on){opacity:.1}#map.hl .link.on{opacity:1;stroke-width:2.2}#map.hl .node.on rect{stroke:#b883ff}
#inspector{position:fixed;top:72px;right:24px;width:340px;max-height:calc(100vh - 96px);overflow:auto;z-index:20;box-shadow:0 20px 60px rgba(0,0,0,.5);transform:translateX(120%);transition:transform .25s ease}#inspector.open{transform:none}
#inspector .x{float:right;background:none;border:0;color:var(--muted-foreground);font-size:20px;cursor:pointer}

/* v0.4 map: calm toolbar bar (no overlay), raw IDs muted, tables never overflow */
.mapctl{position:static;display:flex;align-items:center;gap:6px;padding:10px 12px 10px 18px;border-bottom:1px solid var(--hairline);flex-wrap:wrap}.mapctl .eyebrow{order:0;margin:0;font-size:10px;white-space:nowrap}
.mapctl button{min-width:36px;height:32px}
#map .node text.sub{fill:#8e91a5}#map .node.matter text{fill:#d4d6e2}#map .fold path{stroke:#b883ff;stroke-width:1.5;fill:none}
#map .group.fabric rect{fill:rgba(39,156,255,.06);stroke:rgba(39,156,255,.5)}
#map .hit:focus{outline:none}#map .hit:focus-visible rect{stroke:#955aff;stroke-width:2}
code.raw{font-size:11px;color:#8e91a5;overflow-wrap:anywhere}td{overflow-wrap:anywhere}table{table-layout:auto}
.legend .muted{flex-basis:100%;font-size:13px}
.net .std-logo{float:none;display:inline-block;vertical-align:middle;margin:0 10px 0 0}
#inspector code{overflow-wrap:anywhere}
#map .net.unknown rect{fill:#0d0e1c;stroke:#279cff;stroke-dasharray:4 3}