:root{
  --fg:#d7e7ff;
  --bg:rgba(0,0,0,0.35);
  --bd:rgba(150,190,255,0.25);
  --accent:rgba(125,200,255,0.85);
}
html,body{height:100%; margin:0; overflow:hidden; background:#03050a; color:var(--fg); font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;}

/* IMPORTANT: canvas is the background layer */
#c{
  position:fixed; inset:0;
  width:100%; height:100%;
  display:block;
  z-index:0;
  pointer-events:none;
}

/* HUD must stay above the WebGL canvas */
#hud{
  position:fixed;
  z-index:10;
  left:16px; top:16px;
  width:min(520px, calc(100% - 32px));
  background:var(--bg); border:1px solid var(--bd); border-radius:16px; padding:14px; backdrop-filter: blur(8px);
  box-shadow: 0 10px 40px rgba(0,0,0,0.45);
}
.title{display:flex; gap:12px; align-items:center; margin-bottom:10px;}
.logo{font-size:26px; filter: drop-shadow(0 0 10px rgba(125,200,255,0.25));}
.name{font-weight:700; font-size:18px; letter-spacing:0.3px;}
.tag{opacity:0.85; font-size:12px;}
.controls .row{display:flex; gap:8px; flex-wrap:wrap; margin:8px 0;}
button{background:rgba(25,35,55,0.75); color:var(--fg); border:1px solid var(--bd); border-radius:12px;
  padding:8px 10px; cursor:pointer; transition:transform 0.05s ease, border-color 0.15s ease;
}
button:hover{border-color:var(--accent)}
button:active{transform:translateY(1px)}
button.label{flex:1}
.grid{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
label{display:flex; flex-direction:column; gap:6px; font-size:12px; opacity:0.95;}
input[type=range]{width:100%}
.decoder{margin-top:10px; padding-top:10px; border-top:1px solid var(--bd)}
.decoderTitle{font-weight:700; margin-bottom:6px;}
.decoderHint{font-size:12px; opacity:0.8; margin-bottom:8px;}
#notes{flex:1; min-width:200px; border-radius:12px; border:1px solid var(--bd); background:rgba(0,0,0,0.25);
  color:var(--fg); padding:8px 10px; outline:none;
}
.readout{display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-top:8px; font-size:12px; opacity:0.92;}
.readout > div:nth-child(3){grid-column:1 / -1}
.footer{margin-top:10px; font-size:11px; opacity:0.75}
code{color:#bfe3ff}