*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#0b0b10;color:#eaeef2;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',Arial,'Noto Sans',sans-serif}
canvas#view{display:block;width:100vw;height:100vh}
#hud{position:fixed;top:8px;left:10px;background:rgba(0,0,0,.35);backdrop-filter:blur(6px);padding:6px 10px;border-radius:8px;font-size:12px;line-height:1.4;pointer-events:none}
.panel{position:fixed;right:12px;top:12px;width:min(360px,90vw);background:rgba(9,10,18,.75);border:1px solid rgba(255,255,255,.08);border-radius:12px;box-shadow:0 8px 30px rgba(0,0,0,.35);color:#dfe7f3}
.panel__header{padding:10px 12px;font-weight:600;cursor:pointer;user-select:none;border-bottom:1px solid rgba(255,255,255,.06)}
.panel__body{max-height:60vh;overflow:auto;display:none}
.panel.open .panel__body{display:block}
section{padding:10px 12px;border-bottom:1px dashed rgba(255,255,255,.08)}
section:last-child{border-bottom:none}
label{display:flex;flex-direction:column;gap:6px;margin:8px 0}
label.row{flex-direction:row;align-items:center;gap:10px}
input[type="range"]{width:100%}
button{appearance:none;border:1px solid rgba(255,255,255,.2);background:transparent;color:#dfe7f3;border-radius:8px;padding:6px 10px;cursor:pointer}
button:hover{background:rgba(255,255,255,.06)}
fieldset{border:1px solid rgba(255,255,255,.18);padding:8px;border-radius:8px;margin:8px 0}
h3{margin:6px 0 8px 0;font-size:14px;color:#8ab4ff}
/* Small glow for nodes */
.glow{filter:drop-shadow(0 0 6px rgba(140,190,255,.7))}