:root{--ground:#171716;--panel:#1e1e1c;--surface:#242422;--raised:#302f2b;--rail:#101010;--bone:#f1efe8;--bone2:#e9e4d6;--ink:#171716;--orange:#ff5a1f;--line:#f1efe81f;--muted:#9a978d;--mono:'Geist Mono',monospace}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--ground);color:var(--bone);font-family:Geist,Arial,sans-serif;font-size:15px;overflow:hidden;color-scheme:dark}
button,input,select{font:inherit}button,select{cursor:pointer;color:inherit}
button{background:none;border:1px solid var(--line);padding:8px 12px;color:var(--bone)}
button:hover{background:var(--raised);border-color:var(--bone)}
button.icon,a.icon{border:0;width:36px;height:36px;padding:0;display:inline-flex;align-items:center;justify-content:center;font-size:20px;line-height:1;color:var(--bone);text-decoration:none;background:none}
button.icon:hover,a.icon:hover{background:var(--raised)}
.icon .q{font:600 15px/1 Geist,Arial,sans-serif;width:20px;height:20px;border:1.6px solid currentColor;border-radius:50%;display:inline-flex;align-items:center;justify-content:center}
button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
header{height:60px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 18px;border-bottom:1px solid var(--line);background:var(--ground);position:relative;z-index:30}
.back.icon,.title{display:none}
.wordmark{font-size:22px;font-weight:700;letter-spacing:-.6px;text-decoration:none;color:var(--bone);white-space:nowrap}
.wordmark span{font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:2px;margin-left:12px;color:var(--muted)}
.plate{font-family:var(--mono);font-size:11px;letter-spacing:1.2px;color:var(--muted);border:1px solid var(--line);padding:5px 9px}
.header-actions{display:flex;gap:4px;align-items:center}
.header-actions a.link{font-size:13px;color:var(--bone);text-decoration:none;padding:8px 10px;margin-right:4px}
#panel-toggle[aria-expanded=true]{color:var(--orange)}
.eyebrow,.edition{font-family:var(--mono);font-size:10px;letter-spacing:1.2px;line-height:1.7;color:var(--muted)}
main{position:relative;height:calc(100dvh - 60px);min-height:420px;overflow:hidden;background-image:linear-gradient(#f1efe808 1px,transparent 1px),linear-gradient(90deg,#f1efe808 1px,transparent 1px);background-size:24px 24px}
#graph{position:absolute;inset:0;touch-action:none;cursor:grab}
#graph canvas{display:block}
.scene-foot{position:absolute;left:16px;right:16px;bottom:12px;display:flex;justify-content:space-between;gap:10px;font-family:var(--mono);font-size:10px;letter-spacing:.4px;color:var(--muted);pointer-events:none}
.view-tools{position:absolute;top:12px;left:12px;display:inline-flex;z-index:5;border:1px solid var(--line);background:var(--ground)}
.view-tools button{font-size:12px;border:0;border-right:1px solid var(--line);padding:7px 12px;height:34px;min-width:34px}
.view-tools button:last-child{border-right:0}
/* settings panel: slides in from the right, over the graph */
.panel{position:absolute;top:12px;right:12px;bottom:12px;width:320px;max-width:calc(100% - 24px);z-index:20;background:var(--panel);border:1px solid var(--line);box-shadow:0 20px 60px #00000080;overflow:auto;padding:12px 16px 20px;transform:translateX(calc(100% + 24px));transition:transform .25s ease;overscroll-behavior:contain}
.panel.open{transform:none}
.panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.panel details{border-top:1px solid var(--line);padding:4px 0 12px}
.panel summary{cursor:pointer;font-weight:500;font-size:15px;padding:10px 0;list-style:none;display:flex;align-items:center;gap:8px}
.panel summary::-webkit-details-marker{display:none}
.panel summary:before{content:'›';display:inline-block;color:var(--muted);transition:transform .15s}
.panel details[open]>summary:before{transform:rotate(90deg)}
.search-wrap{position:relative;margin:2px 0 10px}
#search{width:100%;background:var(--surface);border:1px solid var(--line);color:var(--bone);padding:9px 11px;font-size:14px}
#search::placeholder{color:var(--muted)}
.results{position:absolute;left:0;right:0;top:100%;z-index:40;background:var(--surface);border:1px solid var(--bone);max-height:260px;overflow:auto}
.results button{display:block;width:100%;border:0;border-bottom:1px solid var(--line);text-align:left;padding:8px 10px;font-size:13px;line-height:1.3}
.results button small{display:block;font:10px var(--mono);color:var(--muted);letter-spacing:.6px;margin-top:2px}
.results button:hover,.results button.active{background:var(--bone);color:var(--ink)}
.results button:hover small,.results button.active small{color:#4f524a}
.row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:7px 0;font-size:14px}
.row span{display:flex;flex-direction:column;gap:2px}
.row small{font:10px var(--mono);color:var(--muted);letter-spacing:.4px}
.row select{background:var(--surface);border:1px solid var(--line);color:var(--bone);padding:6px 8px;font-size:13px}
input[type=checkbox]{appearance:none;width:34px;height:20px;background:var(--raised);border:1px solid var(--line);position:relative;margin:0;cursor:pointer;flex-shrink:0}
input[type=checkbox]:before{content:'';position:absolute;top:3px;left:3px;width:12px;height:12px;background:var(--muted)}
input[type=checkbox]:checked{background:var(--bone);border-color:var(--bone)}
input[type=checkbox]:checked:before{left:17px;background:var(--ink)}
.panel .eyebrow{margin:12px 0 6px}
.chips{display:flex;flex-wrap:wrap;gap:4px}
.chips button{font-size:12px;padding:6px 10px}
.chips button[aria-pressed=true]{background:var(--bone);color:var(--ink);border-color:var(--bone)}
#domain{width:100%;background:var(--surface);border:1px solid var(--line);color:var(--bone);padding:8px;font-size:13px}
.legend{list-style:none;margin:6px 0 0;padding:0}
.legend li{display:flex;align-items:center;gap:10px;padding:6px 0;font-size:13px}
.legend i{width:10px;height:10px;flex-shrink:0;display:inline-block}
.legend i.sq{border-radius:0}.legend i.dot{border-radius:50%}
.legend span{flex:1}
.legend small{font:10px var(--mono);color:var(--muted)}
.legend input[type=checkbox]{width:28px;height:16px}
.legend input[type=checkbox]:before{width:10px;height:10px;top:2px;left:2px}
.legend input[type=checkbox]:checked:before{left:14px}
.slider{display:block;padding:8px 0}
.slider span{display:flex;justify-content:space-between;font-size:13px;margin-bottom:6px}
.slider b{font:11px var(--mono);color:var(--muted);font-weight:400}
input[type=range]{width:100%;accent-color:var(--bone);margin:0;height:20px}
.top{list-style:none;margin:0;padding:0;counter-reset:top}
.top li{border-top:1px solid var(--line)}
.top button{width:100%;border:0;text-align:left;padding:7px 0;display:flex;gap:10px;align-items:baseline;font-size:13px}
.top button:before{counter-increment:top;content:counter(top,decimal-leading-zero);font:10px var(--mono);color:var(--muted);letter-spacing:.6px;min-width:18px}
.top button span{flex:1;line-height:1.25}
.top button small{font:10px var(--mono);color:var(--muted)}
.top button:hover{background:none;color:var(--orange)}
.edition{margin-top:16px;font-size:10px}
/* the plate */
.detail{position:absolute;top:12px;left:12px;bottom:12px;width:340px;max-width:calc(100% - 24px);z-index:20;background:var(--panel);border:1px solid var(--line);box-shadow:0 20px 60px #00000080;overflow:auto;padding:18px 20px;display:none}
.detail.open{display:block}
.detail-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.detail h2{font-size:25px;font-weight:500;letter-spacing:-.7px;line-height:1.15;margin:6px 0 12px}
.detail p{font-size:14px;line-height:1.65;color:var(--bone2);margin:0 0 10px}
.status{font-family:var(--mono);font-size:10px;letter-spacing:.8px;display:inline-flex;align-items:center;gap:6px}
.status:before{content:'';width:6px;height:6px;background:var(--muted)}
.status.live:before{background:var(--orange)}
.kicker{font:10px var(--mono);letter-spacing:.8px;color:var(--muted);line-height:1.6}
.section-label{font:10px var(--mono);letter-spacing:1px;color:var(--muted);margin:20px 0 8px}
.spec{font-family:var(--mono);font-size:11px;line-height:1.7;border-top:1px solid var(--line);padding-top:10px;margin:0;color:var(--bone2)}
.spec span{color:var(--muted)}
.directory{display:flex;flex-direction:column}
.directory button{border:0;border-top:1px solid var(--line);text-align:left;font-size:13px;padding:9px 0;display:flex;align-items:baseline;justify-content:space-between;gap:8px;line-height:1.3}
.directory button i{width:8px;height:8px;flex-shrink:0;display:inline-block;margin-right:8px;align-self:center}
.directory button span{flex:1}
.directory button small{font:9px var(--mono);color:var(--muted);letter-spacing:.5px;white-space:nowrap;max-width:45%;overflow:hidden;text-overflow:ellipsis}
.directory button:hover{background:none;color:var(--orange)}
.source{font:11px var(--mono);color:var(--muted);line-height:1.6;overflow-wrap:anywhere}
.action{display:block;width:100%;background:var(--bone);color:var(--ink);font-size:13px;margin-top:14px;text-align:center;text-decoration:none;padding:10px}
.action:hover{background:var(--bone2)}
.degree{font-size:34px;font-weight:500;letter-spacing:-1.2px;line-height:1;margin:6px 0 2px}
dialog{border:1px solid var(--bone);background:var(--panel);color:var(--bone);max-width:620px;width:90%;max-height:85dvh;padding:26px}
dialog::backdrop{background:#000000aa}
dialog p,dialog li{font-size:14px;line-height:1.6}dialog li{margin:10px 0}dialog .fine{font-size:12px;color:var(--muted)}
[hidden]{display:none!important}
@media(max-width:850px){
  header{height:56px;padding:0 6px 0 4px;gap:4px}.wordmark,.plate,.header-actions a.link{display:none}.back.icon{display:inline-flex}.title{display:flex;flex:1;flex-direction:column;align-items:center;justify-content:center;min-width:0;line-height:1.15}.title .eyebrow{font-size:9px;letter-spacing:1.6px;line-height:1.3}.title strong{font-size:16px;font-weight:500;letter-spacing:-.3px;white-space:nowrap}.header-actions{gap:0}
  main{height:calc(100dvh - 56px)}
  .view-tools{top:10px;left:10px}.view-tools button{font-size:12px;padding:6px 10px;height:34px}
  .scene-foot{left:10px;right:10px;bottom:8px;font-size:9px}.hint{display:none}
  .panel{top:8px;right:8px;bottom:8px;width:min(86%,340px);padding:10px 14px 24px}
  .detail{top:auto;left:0;right:0;bottom:0;width:100%;max-width:100%;max-height:58dvh;border-left:0;border-right:0;border-bottom:0;padding:14px 18px calc(16px + env(safe-area-inset-bottom))}
  .detail h2{font-size:22px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}