:root {
  --ui-ink: #f4f7ef;
  --ui-muted: rgba(232, 241, 226, 0.64);
  --ui-line: rgba(202, 218, 198, 0.17);
  --ui-panel: rgba(2, 7, 6, 0.72);
  --ui-aqua: #76e6c2;
  --ui-amber: #f2b861;
}

.stage {
  background:
    conic-gradient(from 215deg at 46% 52%, rgba(122, 184, 255, 0.11), rgba(118, 230, 194, 0.075), rgba(242, 184, 97, 0.07), rgba(5, 12, 18, 0.02), rgba(122, 184, 255, 0.11)),
    linear-gradient(118deg, rgba(118, 230, 194, 0.085), transparent 24%, rgba(122, 184, 255, 0.06) 56%, transparent 76%),
    linear-gradient(180deg, #020408 0%, #030a0c 42%, #05050a 72%, #010203 100%);
}

.stage::before,
.stage::after {
  position: absolute;
  inset: 0;
  pointer-events: none;
  content: "";
}

.stage::before {
  z-index: 0;
  background:
    linear-gradient(118deg, transparent 0%, rgba(122, 184, 255, 0.055) 36%, transparent 68%),
    linear-gradient(62deg, transparent 0%, rgba(118, 230, 194, 0.045) 42%, transparent 78%);
  mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}

.stage::after {
  z-index: 2;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.042), transparent 16%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.68), transparent 24%, transparent 70%, rgba(0, 0, 0, 0.48)),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.02) 0, rgba(255, 255, 255, 0.02) 1px, transparent 1px, transparent 5px);
  mix-blend-mode: screen;
  opacity: 0.5;
}

.shade {
  background:
    linear-gradient(90deg, rgba(0, 3, 5, 0.74), rgba(0, 4, 6, 0.08) 36%, rgba(0, 2, 4, 0.58)),
    linear-gradient(0deg, rgba(0, 2, 4, 0.76), transparent 34%, rgba(0, 2, 4, 0.18));
}

.control-panel {
  border-color: rgba(193, 239, 222, 0.2);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.085), transparent 30%),
    linear-gradient(180deg, rgba(8, 17, 14, 0.86), rgba(2, 6, 5, 0.76));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -1px 0 rgba(0, 0, 0, 0.42),
    0 24px 70px rgba(0, 0, 0, 0.54),
    0 0 44px rgba(118, 230, 194, 0.08);
  backdrop-filter: blur(24px) saturate(150%);
}

.metric {
  border-bottom-color: rgba(232, 241, 226, 0.13);
}

.metric span,
label {
  color: var(--ui-muted);
}

.metric strong {
  color: var(--ui-amber);
  text-shadow: 0 0 18px rgba(242, 184, 97, 0.32);
}

input[type="range"] {
  height: 4px;
  accent-color: var(--ui-aqua);
  filter: drop-shadow(0 0 8px rgba(118, 230, 194, 0.28));
}

button {
  border-color: rgba(232, 241, 226, 0.19);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.095), rgba(255, 255, 255, 0.025));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09);
}

button:hover {
  border-color: rgba(118, 230, 194, 0.66);
  background:
    linear-gradient(180deg, rgba(118, 230, 194, 0.18), rgba(118, 230, 194, 0.06));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.13),
    0 0 22px rgba(118, 230, 194, 0.12);
}

.status-line {
  color: rgba(232, 241, 226, 0.68);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.7);
}

@media (prefers-reduced-motion: reduce) {
  button {
    transition: none;
  }
}