:root{
  --bg:#03070b;
  --bg-2:#06121a;
  --fg:#dff5ec;
  --fg-dim:#7da99b;
  --accent:#00ffaa;
  --accent-2:#5ad7ff;
  --warn:#ff5577;
  --panel:rgba(8,18,24,.72);
  --panel-b:rgba(0,255,170,.18);
  --mono:"JetBrains Mono","SF Mono",Menlo,monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{
  width:100%;height:100%;
  background:radial-gradient(ellipse at 50% 30%,#06121a 0%,#020608 70%,#000 100%);
  color:var(--fg);
  font-family:var(--mono);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  cursor:crosshair;
}
canvas#scene{position:fixed;inset:0;display:block;z-index:0}

#hud-top,#hud-left,#hud-right,#hud-bottom{
  position:fixed;z-index:5;pointer-events:none;
}
#hud-top{
  top:14px;left:18px;right:18px;display:flex;justify-content:space-between;align-items:flex-start;
}
.brand{pointer-events:auto;display:flex;align-items:center;gap:10px;letter-spacing:.18em;font-size:12px}
.brand .dot{
  width:9px;height:9px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 12px var(--accent),0 0 30px var(--accent);
  animation:pulse 2.4s ease-in-out infinite;
}
.brand .t1{font-weight:700;color:var(--accent)}
.brand .t2{color:var(--fg-dim)}
.meta{color:var(--fg-dim);font-size:11px;letter-spacing:.12em;text-align:right;line-height:1.5}

@keyframes pulse{0%,100%{opacity:.7}50%{opacity:1}}

#hud-left{
  top:60px;left:18px;width:260px;display:flex;flex-direction:column;gap:10px;
}
#hud-right{
  top:60px;right:18px;width:260px;display:flex;flex-direction:column;gap:10px;
}
.panel{
  pointer-events:auto;
  background:var(--panel);
  border:1px solid var(--panel-b);
  border-radius:6px;
  backdrop-filter:blur(6px);
  padding:10px 12px;
  font-size:11px;
  color:var(--fg);
  box-shadow:0 0 30px rgba(0,255,170,.05) inset;
}
.panel.small{padding:8px 10px}
.panel .ph{color:var(--accent);letter-spacing:.18em;font-size:10px;margin-bottom:8px;border-bottom:1px dashed rgba(0,255,170,.15);padding-bottom:4px}
.panel .big{font-size:18px;font-weight:600;color:var(--fg);letter-spacing:.06em;margin-bottom:8px}
.panel .kv{display:flex;justify-content:space-between;padding:2px 0;color:var(--fg-dim)}
.panel .kv b{color:var(--fg);font-weight:500}

.panel ul{list-style:none;max-height:240px;overflow:auto;font-size:11px}
.panel li{padding:3px 0;display:flex;justify-content:space-between;gap:6px;cursor:pointer;color:var(--fg-dim);border-bottom:1px dotted rgba(125,169,155,.1)}
.panel li:hover{color:var(--accent)}
.panel li b{color:var(--fg);font-weight:500}

#legend-canvas{width:100%;height:14px;display:block;border-radius:3px;margin-top:2px}
.legend-labels{display:flex;justify-content:space-between;color:var(--fg-dim);font-size:10px;margin-top:4px}

#hud-bottom{
  left:18px;right:18px;bottom:14px;
}
.time-row{
  pointer-events:auto;
  display:flex;align-items:center;gap:12px;
  background:var(--panel);border:1px solid var(--panel-b);border-radius:6px;padding:8px 14px;
  backdrop-filter:blur(6px);
}
.ctl{
  background:transparent;color:var(--accent);border:1px solid var(--accent);
  width:30px;height:26px;border-radius:4px;cursor:pointer;font-size:13px;
}
.ctl:hover{background:rgba(0,255,170,.1)}
#time-slider{
  flex:1;-webkit-appearance:none;background:transparent;height:18px;
}
#time-slider::-webkit-slider-runnable-track{
  height:3px;background:linear-gradient(90deg,rgba(0,255,170,.15),rgba(0,255,170,.6));border-radius:3px;
}
#time-slider::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;
  background:var(--accent);margin-top:-6px;box-shadow:0 0 12px var(--accent);
}
.time-label{font-size:11px;color:var(--fg-dim);min-width:200px;text-align:right}

.spx-strip{
  margin-top:6px;background:var(--panel);border:1px solid var(--panel-b);border-radius:6px;
  padding:6px 8px;pointer-events:auto;
}
#spx-canvas{width:100%;display:block}

.tooltip{
  position:fixed;z-index:9;pointer-events:none;
  background:rgba(0,0,0,.85);color:var(--accent);
  padding:6px 9px;border:1px solid rgba(0,255,170,.4);
  font-size:11px;border-radius:4px;display:none;
}

#loader{
  position:fixed;inset:0;z-index:99;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:#000;color:var(--accent);font-size:12px;letter-spacing:.18em;
}
#loader .ring{
  width:48px;height:48px;border-radius:50%;
  border:2px solid rgba(0,255,170,.2);border-top:2px solid var(--accent);
  animation:spin 1.2s linear infinite;margin-bottom:14px;
}
#loader.hidden{opacity:0;pointer-events:none;transition:opacity .4s}
@keyframes spin{to{transform:rotate(360deg)}}

/* lil-gui themeing tweaks */
.lil-gui{
  --background-color:rgba(8,18,24,.72);
  --text-color:#dff5ec;
  --title-background-color:rgba(0,255,170,.08);
  --title-text-color:#00ffaa;
  --widget-color:rgba(0,255,170,.15);
  --hover-color:rgba(0,255,170,.25);
  --focus-color:rgba(0,255,170,.35);
  --number-color:#5ad7ff;
  --string-color:#dff5ec;
  --font-family:var(--mono);
  --font-size:11px;
  --input-font-size:11px;
  z-index:6 !important;
  border:1px solid var(--panel-b)!important;
  backdrop-filter:blur(6px);
  top:60px!important;
  right:286px!important;
}
@media (max-width:1100px){
  #hud-right{display:none}
  .lil-gui{right:18px!important;top:60px!important}
}
@media (max-width:760px){
  #hud-left{display:none}
}