:root{
  --bg:#070a12; --panel:rgba(12,17,30,.86); --panel2:rgba(18,25,43,.92); --ink:#e3e9f6; --dim:#8d99b6; --faint:#5d6886;
  --line:rgba(150,170,215,.16); --line2:rgba(150,170,215,.28);
  --live:#6fdc9c; --live2:#3fb877; --aim:#c9a86a; --aimdim:#7d6d4c; --msg:#86a8ff; --down:#ffc27a; --wire:#ff8fb0; --warn:#e0728f;
  --jido:#8fb4ff; --r:10px; --mono:ui-monospace,SFMono-Regular,Consolas,Menlo,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font:13.5px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;overflow:hidden}
button{font:inherit;color:inherit}
a{color:#9cc0ff}
#stage{position:fixed;inset:0}
#graph{position:fixed;inset:52px 360px 64px 0;display:none}
body.view-graph #graph{display:block}
body.view-graph #explore{display:none}
body.view-graph #stage canvas{opacity:.12;filter:blur(2px)}

/* ---------- top bar */
#top{position:fixed;left:0;right:0;top:0;height:52px;display:flex;align-items:center;gap:14px;padding:0 14px;
  background:linear-gradient(180deg,rgba(7,10,18,.96),rgba(7,10,18,.72));border-bottom:1px solid var(--line);z-index:5}
#top .brand{font-weight:650;letter-spacing:.01em}
#top .brand small{display:block;font-weight:400;color:var(--dim);font-size:11px;letter-spacing:.02em}
.seg{display:inline-flex;border:1px solid var(--line2);border-radius:999px;overflow:hidden}
.seg button{background:none;border:0;padding:5px 12px;cursor:pointer;color:var(--dim)}
.seg button.on{background:rgba(143,180,255,.14);color:var(--ink)}
#gapbox{margin-left:auto;display:flex;gap:8px}
.gap{border:1px solid var(--line);border-radius:8px;padding:3px 9px;text-align:center;min-width:64px}
.gap b{display:block;font-size:17px;line-height:1.1}
.gap span{font-size:10px;color:var(--dim);letter-spacing:.06em;text-transform:uppercase}
.gap.live b{color:var(--live)} .gap.aim b{color:var(--aim)} .gap.born b{color:var(--warn)}
#back{color:var(--dim);text-decoration:none;font-size:12px;border:1px solid var(--line);padding:4px 10px;border-radius:999px}

/* ---------- side panels */
.panel{position:fixed;top:52px;bottom:64px;background:var(--panel);backdrop-filter:blur(8px);border-color:var(--line);z-index:4;overflow:auto}
#explore{left:0;width:268px;border-right:1px solid var(--line);padding:10px 0}
#inspect{right:0;width:360px;border-left:1px solid var(--line);padding:0}
.ph{font:600 10.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim);padding:8px 14px 6px}
.tree{list-style:none;margin:0;padding:0}
.tree li{margin:0}
.tree .row{display:flex;align-items:center;gap:7px;padding:3px 10px 3px 14px;cursor:pointer;border-left:2px solid transparent;white-space:nowrap}
.tree .row:hover{background:rgba(143,180,255,.07)}
.tree .row.sel{background:rgba(111,220,156,.10);border-left-color:var(--live)}
.tree .tw{width:12px;color:var(--faint);font-size:10px;flex:none;text-align:center}
.tree .dot{width:8px;height:8px;border-radius:50%;flex:none;background:var(--aimdim)}
.tree .dot.live{background:var(--live);box-shadow:0 0 6px var(--live)}
.tree .lbl{overflow:hidden;text-overflow:ellipsis}
.tree .badge{margin-left:auto;font:10px var(--mono);color:var(--faint)}
.tree ul{list-style:none;margin:0;padding:0 0 0 12px}
.tree .closed>ul{display:none}
.toggles{padding:4px 14px 10px;display:grid;grid-template-columns:1fr 1fr;gap:4px 10px;font-size:12px;color:var(--dim)}
.toggles label{display:flex;gap:6px;align-items:center;cursor:pointer}
.focus{padding:0 14px 10px;display:flex;flex-wrap:wrap;gap:6px}
.focus button,.btn{background:rgba(143,180,255,.08);border:1px solid var(--line2);border-radius:999px;padding:4px 10px;cursor:pointer;font-size:12px}
.focus button:hover,.btn:hover{background:rgba(143,180,255,.16)}
.slider{padding:2px 14px 10px;font-size:12px;color:var(--dim)}
.slider input{width:100%}

/* ---------- inspector */
.ins-h{padding:14px 16px 10px;border-bottom:1px solid var(--line);background:var(--panel2);position:sticky;top:0;z-index:1}
.ins-h .kind{font:600 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.ins-h h2{margin:3px 0 4px;font-size:17px;line-height:1.25;word-break:break-word}
.pill{display:inline-block;font:600 10.5px var(--mono);letter-spacing:.06em;padding:2px 8px;border-radius:999px;border:1px solid var(--line2);margin:2px 4px 2px 0}
.pill.live{color:var(--live);border-color:rgba(111,220,156,.5);background:rgba(111,220,156,.07)}
.pill.aim{color:var(--aim);border-color:rgba(201,168,106,.45)}
.pill.warn{color:var(--warn);border-color:rgba(224,114,143,.45)}
.pill.jido{color:var(--jido);border-color:rgba(143,180,255,.45)}
.sec{padding:12px 16px;border-bottom:1px solid var(--line)}
.sec h3{margin:0 0 7px;font:600 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.sec p{margin:0 0 7px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:3px 10px;font-size:12.5px}
.kv dt{color:var(--dim)} .kv dd{margin:0;word-break:break-word}
.mono{font-family:var(--mono);font-size:12px}
.muted{color:var(--dim)}
.note{font-size:12px;color:var(--dim);border-left:2px solid var(--line2);padding-left:9px;margin:6px 0}
.sci{display:none} body.mode-sci .sci{display:block} body.mode-sci .cls{display:none}
.sci-i{display:none} body.mode-sci .sci-i{display:inline}
.bars{display:grid;gap:4px}
.bar{display:grid;grid-template-columns:44px 1fr 56px;gap:8px;align-items:center;font:12px var(--mono)}
.bar i{display:block;height:9px;border-radius:5px;background:var(--live);min-width:1px}
.bar.spare{opacity:.45} .bar.spare i{background:var(--faint)}
.loop{display:grid;gap:6px;counter-reset:st}
.loop .st{display:grid;grid-template-columns:22px 1fr;gap:8px;align-items:start}
.loop .n{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font:600 11px var(--mono);border:1px solid var(--line2);color:var(--dim)}
.loop .st.act .n{border-color:var(--live);color:var(--live)}
.chips{display:flex;flex-wrap:wrap;gap:5px}
.chip{font-size:12px;border:1px solid var(--line2);border-radius:6px;padding:2px 7px;cursor:pointer;background:rgba(143,180,255,.05)}
.chip.live{border-color:rgba(111,220,156,.45)} .chip:hover{background:rgba(143,180,255,.14)}
canvas.spark{width:100%;height:46px;display:block}
.heat{display:grid;gap:2px}
.heat .cell{height:14px;border-radius:2px}
table.m{border-collapse:collapse;font:11.5px var(--mono);width:100%}
table.m td,table.m th{border:1px solid var(--line);padding:2px 4px;text-align:right}
table.m th{color:var(--dim);font-weight:500}

/* ---------- bottom bar */
#bottom{position:fixed;left:0;right:0;bottom:0;height:64px;display:flex;align-items:center;gap:12px;padding:0 14px;
  background:linear-gradient(0deg,rgba(7,10,18,.97),rgba(7,10,18,.8));border-top:1px solid var(--line);z-index:5}
#bottom select{background:var(--panel2);color:var(--ink);border:1px solid var(--line2);border-radius:8px;padding:4px 6px}
#scrub{flex:1;min-width:120px}
#stepLbl{font:12px var(--mono);color:var(--dim);min-width:86px}
#band{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;max-width:46%}
#band .pill{font-size:10px}
#tip{position:fixed;pointer-events:none;background:var(--panel2);border:1px solid var(--line2);border-radius:8px;padding:5px 9px;font-size:12px;z-index:9;display:none;max-width:280px}
#labels{position:fixed;inset:0;pointer-events:none;z-index:3}
#labels .l3{position:absolute;transform:translate(-50%,-120%);font-size:11px;white-space:nowrap;color:var(--ink);text-shadow:0 0 4px #000,0 0 2px #000}
#labels .l3.aim{color:var(--aim)} #labels .l3.live{color:var(--live)}
#boot{position:fixed;inset:0;display:grid;place-items:center;color:var(--dim);font:12px var(--mono);letter-spacing:.12em;text-transform:uppercase;z-index:20;background:var(--bg)}

/* ---------- graph (SVG) */
#graph svg{width:100%;height:100%}
.gnode{cursor:pointer}
.gnode rect{rx:7;ry:7}
.gnode text{font:11px system-ui;fill:var(--ink)}
.gnode.dorm rect{fill:rgba(125,109,76,.14);stroke:rgba(201,168,106,.5)} .gnode.dorm text{fill:#cdbb95}
.gnode.live rect{fill:rgba(111,220,156,.14);stroke:var(--live)}
.gnode.sel rect{stroke-width:2.5;stroke:#fff}
.gedge{fill:none;stroke:rgba(201,168,106,.45);stroke-width:1.4}
.gedge.live{stroke:var(--live);stroke-width:2}
.gch{fill:none;stroke:rgba(134,168,255,.35);stroke-width:1}
.gch.live{stroke:var(--msg);stroke-width:1.6}
.glat{fill:none;stroke:rgba(255,143,176,.5);stroke-dasharray:4 4}
.gjido{fill:none;stroke:rgba(143,180,255,.45);stroke-dasharray:2 3}
.gjnode rect{fill:rgba(143,180,255,.08);stroke:rgba(143,180,255,.5)} .gjnode text{fill:#bcd0ff;font:10.5px var(--mono)}
.glane{font:600 10px var(--mono);letter-spacing:.14em;fill:var(--faint);text-transform:uppercase}

@media (max-width: 980px){
  #explore{display:none} #inspect{width:100%;top:auto;height:44%} #graph{inset:52px 0 64px 0}
  #band{display:none}
}