:root { --bg:#18120b; --panel:#251f17; --ink:#ede0d4; --dim:#9c8f80; --faint:#4f4539; --line:#2f2921; --accent:#f4bd6f; --field:#2f2921; --hover:#3b342b; }
* { box-sizing:border-box; }
html,body { margin:0; height:100%; background:var(--bg); color:var(--ink); font:13px/1.45 "IBM Plex Mono", ui-monospace, monospace; }
#side { position:fixed; left:0; top:0; bottom:0; width:20rem; overflow-y:auto; overflow-x:hidden; padding:1rem 1rem 2rem; background:var(--panel); border-right:1px solid var(--line); }
#stage { position:fixed; left:20rem; top:0; right:0; bottom:72px; }
#c { display:block; cursor:grab; touch-action:none; }
#card { position:absolute; max-width:22rem; padding:.45rem .6rem; background:var(--panel); border:1px solid var(--faint); border-radius:2px; pointer-events:none; font-size:.78rem; box-shadow:0 4px 16px rgba(0,0,0,.4); }
#card b { color:var(--accent); font-weight:600; word-break:break-all; }
#card .kind { display:block; color:var(--dim); font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; }
#card p { margin:.3rem 0 0; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }
#c.pointer { cursor:pointer; }
h1 { margin:0 0 .4rem; font-size:1.05rem; font-weight:600; color:var(--accent); }
h2 { margin:1.1rem 0 .3rem; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--dim); font-weight:500; }
.lede { margin:0 0 .6rem; color:var(--dim); font-size:.8rem; }
.tiny { color:var(--dim); font-size:.72rem; }
#search { width:100%; padding:.45rem .6rem; background:var(--field); color:var(--ink); border:1px solid var(--faint); font:inherit; font-size:.8rem; }
.row { display:flex; flex-wrap:wrap; gap:.4rem; margin:.5rem 0; }
button { background:var(--hover); color:var(--ink); border:1px solid var(--dim); border-radius:3px; padding:.35rem .7rem; font:inherit; font-size:.75rem; cursor:pointer; box-shadow:0 1px 0 rgba(0,0,0,.4); }
button:hover { border-color:var(--accent); color:var(--accent); }
button:active { transform:translateY(1px); box-shadow:none; }
button.on { background:var(--accent); color:var(--bg); border-color:var(--accent); }
label.unfold { display:block; margin:.4rem 0 .2rem; }
label.unfold input[type=range] { display:block; width:100%; margin:.25rem 0 0; }
#side-toggle { display:none; position:fixed; top:.6rem; right:.6rem; z-index:3; }
#fit { position:absolute; right:.8rem; top:.8rem; z-index:2; opacity:.85; }
.folded { margin-left:.2rem; color:var(--faint); font-style:italic; }
.folded.hide { display:none; }
label { display:flex; justify-content:space-between; align-items:center; gap:.6rem; font-size:.78rem; color:var(--dim); margin:.15rem 0; }
label input[type=range] { width:8rem; accent-color:var(--accent); }
ul { list-style:none; margin:0; padding:0; }
#types li, #evidence li, #kinds li { display:flex; align-items:center; gap:.5rem; padding:.18rem .2rem; cursor:pointer; font-size:.78rem; border-radius:2px; }
#types li:hover, #evidence li:hover, #kinds li:hover { background:var(--hover); }
#types li.off, #evidence li.off, #kinds li.off { opacity:.35; }
#kinds i { width:1.6em; height:0; border-top:2px solid var(--dim); flex:none; }
#types i { width:.7em; height:.7em; border-radius:50%; flex:none; }
#evidence i { width:1.6em; height:0; border-top:2px solid; flex:none; }
#evidence i.dash { border-top-style:dashed; }
.count { margin-left:auto; color:var(--dim); font-size:.72rem; }
#detail { margin:1rem 0 .4rem; padding:.8rem 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
#detail:empty { display:none; }
summary { cursor:pointer; list-style:none; }
summary::-webkit-details-marker { display:none; }
summary h2 { display:inline-block; }
#detail summary h2 { margin:.6rem 0 .2rem; }
#detail summary .count { margin-left:.5rem; }
summary h2::before { content:"+ "; color:var(--faint); }
details[open] summary h2::before { content:"- "; }
#detail h3 { margin:0; font-size:.95rem; color:var(--accent); font-weight:600; word-break:break-all; }
#detail .kind { color:var(--dim); font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; }
#detail p { margin:.35rem 0; font-size:.8rem; }
#detail .conn { display:block; padding:.3rem 0; border-bottom:1px solid var(--line); cursor:pointer; font-size:.78rem; }
#detail .conn:hover { background:var(--hover); }
#detail .conn b { color:var(--accent); font-weight:500; }
#detail .conn .ev { color:var(--dim); }
#detail .conn .tag { color:var(--dim); font-size:.7rem; }
#detail .back { color:var(--accent); cursor:pointer; font-size:.75rem; }
#detail .expand { margin:.4rem 0 0; }
#detail .path { margin:0 0 .8rem; padding:.4rem .5rem; border:1px solid var(--faint); border-radius:2px; font-size:.78rem; }
#detail .path .tiny { display:block; }
#detail .step { display:block; cursor:pointer; color:var(--accent); padding:.1rem 0 .1rem .8rem; border-left:1px solid var(--faint); }
#detail .step:first-of-type { padding-left:0; border-left:0; }
#timeline { position:fixed; left:20rem; right:0; bottom:0; height:72px; padding:6px 12px; background:var(--panel); border-top:1px solid var(--line); }
#timeline svg { display:block; width:100%; height:36px; cursor:crosshair; touch-action:none; }
#timeline rect { fill:var(--accent); opacity:.55; }
#timeline rect.brush { fill:var(--ink); opacity:.18; }
#timeline p { margin:4px 0 0; }
@media (max-width: 800px), (pointer: coarse) and (max-width: 1000px) {
  #side-toggle { display:block; }
  #side { display:none; width:100%; right:0; bottom:0; z-index:2; padding-top:2.8rem; }
  #side.open { display:block; }
  #stage { left:0; bottom:60px; }
  #timeline { left:0; height:60px; padding:4px 8px; }
  #timeline svg { height:30px; }
  #timeline p { font-size:.68rem; }
  button { padding:.55rem .8rem; font-size:.85rem; }
  #types li, #evidence li, #kinds li { padding:.35rem .3rem; font-size:.85rem; }
  #detail .conn { padding:.45rem 0; font-size:.85rem; }
  #card { display:none; }
}