:root {
  --bg: #020b05;
  --panel: rgba(5, 20, 12, 0.52);
  --panel-border: rgba(138, 255, 182, 0.18);
  --text: #e7ffee;
  --muted: #a7c6b1;
  --accent: #71ff8b;
  --accent-strong: #c8ffd2;
  --shadow: rgba(54, 255, 114, 0.16);
}

:root[data-theme='cyan'] {
  --bg: #020812;
  --panel: rgba(5, 16, 28, 0.54);
  --panel-border: rgba(103, 214, 255, 0.18);
  --text: #e8fbff;
  --muted: #9ac4cf;
  --accent: #67d6ff;
  --accent-strong: #d1f6ff;
  --shadow: rgba(59, 191, 255, 0.16);
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  width: 100%;
  min-height: 100%;
  overflow: hidden;
  background: radial-gradient(circle at top, rgba(255,255,255,0.04), transparent 35%), var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.35) 100%);
}

#matrix {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hud {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: max(18px, env(safe-area-inset-top)) 16px max(20px, env(safe-area-inset-bottom)) 16px;
  pointer-events: none;
}

.brand, .panel {
  width: min(100%, 440px);
  pointer-events: auto;
}

.brand {
  padding: 14px 16px;
  border: 1px solid var(--panel-border);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
  backdrop-filter: blur(14px);
  box-shadow: 0 12px 40px var(--shadow);
}

.brand-kicker {
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  color: var(--accent-strong);
}

.brand h1 {
  margin: 8px 0 0;
  font-size: clamp(1.2rem, 5vw, 2.2rem);
  line-height: 1.05;
}

.panel {
  align-self: flex-end;
  padding: 14px;
  border-radius: 24px;
  border: 1px solid var(--panel-border);
  background: var(--panel);
  backdrop-filter: blur(16px);
  box-shadow: 0 20px 48px var(--shadow);
}

.row { display: flex; gap: 10px; }
.row + .row, .row + .slider-group, .slider-group + .row { margin-top: 12px; }
.buttons .btn { flex: 1; }

.btn, .chip {
  border: 1px solid var(--panel-border);
  background: rgba(255,255,255,0.04);
  color: var(--text);
  min-height: 46px;
  padding: 0 14px;
  border-radius: 14px;
  font-weight: 700;
}

.btn.primary {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 28%, transparent), rgba(255,255,255,0.02));
}

.presets { flex-wrap: wrap; }
.chip { flex: 1 1 30%; }
.chip.active {
  color: #001107;
  background: var(--accent);
  border-color: transparent;
}
:root[data-theme='cyan'] .chip.active { color: #03131a; }

.slider-group {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-weight: 600;
}

input[type='range'] {
  width: 100%;
  accent-color: var(--accent);
}

@media (min-width: 700px) {
  .hud { padding: 24px; }
  .panel { margin-left: auto; }
}