:root {
  --bg: #0b0716; --panel: rgba(18, 11, 36, .72); --text: #efe9ff; --muted: #a79bc9;
  --accent: #c77dff; --accent2: #ff5fa2; --line: rgba(199, 125, 255, .25);
  --r: 12px;
}
[data-theme="inferno"] { --bg:#120704; --panel:rgba(36,12,6,.72); --text:#fff0e6; --muted:#d0a58f; --accent:#ff8a3d; --accent2:#ff3d3d; --line:rgba(255,138,61,.28); }
[data-theme="abyss"]   { --bg:#03101a; --panel:rgba(6,24,38,.72); --text:#e4f6ff; --muted:#8fbcd4; --accent:#3dd5f3; --accent2:#4f7cff; --line:rgba(61,213,243,.28); }
[data-theme="verdant"] { --bg:#05120a; --panel:rgba(8,30,16,.72); --text:#e8ffee; --muted:#93c9a2; --accent:#5eea8a; --accent2:#c6f432; --line:rgba(94,234,138,.28); }
[data-theme="aurum"]   { --bg:#120e04; --panel:rgba(32,24,6,.72); --text:#fff8e0; --muted:#cdbb8a; --accent:#ffd04a; --accent2:#ffa23d; --line:rgba(255,208,74,.28); }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--text);
  font: 14px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; transition: background .8s; }
canvas#gl { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
canvas#gl:active { cursor: grabbing; }

#nogl { position: fixed; inset: 0; display: grid; place-content: center; text-align: center; padding: 2rem; }

#panel {
  position: fixed; top: 12px; left: 12px; bottom: 12px; width: 310px; overflow-y: auto; padding: 16px;
  background: var(--panel); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 10px 40px rgba(0,0,0,.45), 0 0 30px -10px var(--accent);
  transition: transform .5s cubic-bezier(.2,.9,.2,1), opacity .4s, background .8s, border-color .8s, box-shadow .8s;
  scrollbar-width: thin; scrollbar-color: var(--accent) transparent;
}
body.hidden-ui #panel { transform: translateX(-120%); opacity: 0; pointer-events: none; }
body.hidden-ui #hud { opacity: .5; }

h1 { margin: 0; font-size: 22px; letter-spacing: .04em; display: flex; align-items: center; gap: 10px;
  background: linear-gradient(90deg, var(--accent), var(--accent2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.logo { width: 20px; height: 20px; border-radius: 50%; flex: none;
  background: conic-gradient(var(--accent), var(--accent2), var(--accent)); animation: spin 8s linear infinite;
  -webkit-mask: radial-gradient(circle 4px, transparent 98%, #000 100%); mask: radial-gradient(circle 4px, transparent 98%, #000 100%); }
@keyframes spin { to { transform: rotate(360deg); } }
.sub { margin: 4px 0 10px; color: var(--muted); font-size: 12px; }

details { border-top: 1px solid var(--line); padding: 8px 0; }
summary { cursor: pointer; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-size: 12px; color: var(--accent); padding: 4px 0; list-style: none; }
summary::before { content: "▸ "; display: inline-block; transition: transform .25s; }
details[open] > summary::before { transform: rotate(90deg); }

.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin: 8px 0; }
.grid.themes { grid-template-columns: repeat(5, 1fr); }

button, select {
  font: inherit; color: var(--text); background: rgba(255,255,255,.06); border: 1px solid var(--line);
  border-radius: 10px; padding: 7px 10px; cursor: pointer; transition: all .2s;
}
button:hover, select:hover { border-color: var(--accent); background: rgba(255,255,255,.12); box-shadow: 0 0 14px -4px var(--accent); }
button:active { transform: scale(.96); }
button.active, button.toggle.on { background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #120a20; border-color: transparent; font-weight: 600; box-shadow: 0 0 18px -4px var(--accent); }
select option { background: #1a1230; color: #fff; }

.themes button { height: 34px; padding: 0; border-radius: 50%; border: 2px solid transparent; }
.themes button.active { border-color: #fff; transform: scale(1.1); }

.btns { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 2px; }
.btns button { flex: 1 1 40%; }
.btns.main { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 12px; }

.row { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 8px 0; color: var(--muted); }
.row select { flex: 1; max-width: 170px; }
.check { display: flex; gap: 8px; align-items: center; margin: 6px 0; color: var(--muted); font-size: 13px; }
.check input { accent-color: var(--accent); }

.slider { margin: 8px 0; }
.slider label { display: flex; justify-content: space-between; color: var(--muted); font-size: 12.5px; }
.slider output { color: var(--text); font-variant-numeric: tabular-nums; }
input[type=range] { width: 100%; margin: 4px 0 0; accent-color: var(--accent); height: 18px; }

.note { color: var(--muted); font-size: 11.5px; margin: 6px 0 0; }

#hud { position: fixed; right: 18px; bottom: 14px; text-align: right; pointer-events: none; text-shadow: 0 1px 8px #000, 0 0 2px #000; transition: opacity .4s; }
#hudName { font-size: 26px; font-weight: 700; letter-spacing: .05em; color: #fff; transition: opacity .35s, transform .35s; }
#hudName.swap { opacity: 0; transform: translateY(8px); }
#hudInfo { font-size: 12px; color: #ddd; font-variant-numeric: tabular-nums; }

#panelToggle { position: fixed; top: 14px; left: 14px; z-index: 5; display: none; width: 42px; height: 42px; padding: 0; font-size: 20px; background: var(--panel); backdrop-filter: blur(10px); }

@media (max-width: 700px) {
  #panelToggle { display: block; }
  #panel { top: 64px; width: auto; right: 12px; bottom: auto; max-height: 62vh; }
  body.hidden-ui #panel { transform: translateY(-20px); }
  #hudName { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) { .logo { animation: none; } * { transition-duration: .01s !important; } }