:root {
  color-scheme: dark;
  --ink: #f4f7ff;
  --muted: #97a4c0;
  --panel: rgba(17, 25, 48, .78);
  --line: rgba(151, 164, 192, .18);
  --cyan: #43e7df;
  --violet: #9370ff;
  --orange: #ff9a57;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; }

body {
  background:
    radial-gradient(circle at 13% 10%, rgba(67, 231, 223, .12), transparent 28rem),
    radial-gradient(circle at 85% 14%, rgba(147, 112, 255, .15), transparent 31rem),
    #080c18;
  color: var(--ink);
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body::before {
  background-image: linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
  background-size: 32px 32px;
  content: "";
  inset: 0;
  pointer-events: none;
  position: fixed;
}

button, input { font: inherit; }

button { color: inherit; }

.app-shell { margin: 0 auto; max-width: 1240px; padding: 46px 24px 28px; position: relative; }

.hero { align-items: end; display: flex; gap: 32px; justify-content: space-between; margin-bottom: 27px; }

.eyebrow { color: var(--cyan); font-size: 12px; font-weight: 800; letter-spacing: .23em; margin: 0 0 9px; }

h1 { font-size: clamp(42px, 7vw, 82px); letter-spacing: -.065em; line-height: .88; margin: 0; }

.lede { color: var(--muted); font-size: 17px; line-height: 1.55; margin: 18px 0 0; max-width: 670px; }

.status-card { align-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: 18px; display: flex; flex: 0 0 310px; gap: 13px; padding: 16px 18px; }

.status-card div { display: grid; gap: 4px; }
.status-card strong { font-size: 14px; }
.status-card span:last-child { color: var(--muted); font-size: 12px; line-height: 1.4; }
.status-dot { background: var(--cyan); border-radius: 50%; box-shadow: 0 0 0 5px rgba(67,231,223,.12), 0 0 18px var(--cyan); flex: 0 0 8px; height: 8px; width: 8px; }

.toolbar { display: flex; gap: 8px; margin-bottom: 12px; overflow-x: auto; padding: 1px 1px 8px; scrollbar-width: thin; }

.scene-button, .control-button {
  background: rgba(21, 30, 56, .7);
  border: 1px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
  font-weight: 700;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

.scene-button { flex: 0 0 auto; font-size: 13px; padding: 11px 15px; }
.scene-button:hover, .control-button:hover { border-color: rgba(67,231,223,.58); transform: translateY(-1px); }
.scene-button.active { background: linear-gradient(135deg, rgba(67,231,223,.2), rgba(147,112,255,.2)); border-color: rgba(67,231,223,.65); }

.stage-card { background: #080c18; border: 1px solid rgba(151,164,192,.22); border-radius: 20px; box-shadow: 0 28px 80px rgba(0,0,0,.35); overflow: hidden; position: relative; }
#stage { aspect-ratio: 3 / 2; width: 100%; }
#stage canvas { display: block; height: 100% !important; touch-action: none; width: 100% !important; }
.stage-overlay { color: rgba(244,247,255,.62); display: flex; font-size: 10px; font-weight: 800; inset: 15px 18px auto; justify-content: space-between; letter-spacing: .15em; pointer-events: none; position: absolute; }

.control-deck { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; display: grid; gap: 12px; grid-template-columns: 130px 130px 1fr 1fr; margin-top: 12px; padding: 14px; }
.control-button { align-items: center; display: flex; gap: 10px; justify-content: center; min-height: 54px; }
.control-button.paused { background: rgba(255,154,87,.14); border-color: rgba(255,154,87,.6); }
.control-icon { color: var(--cyan); font-size: 19px; }
.range-control { background: rgba(8,12,24,.52); border-radius: 12px; display: grid; gap: 7px; padding: 10px 13px; }
.range-control > span { display: flex; font-size: 11px; justify-content: space-between; text-transform: uppercase; }
.range-control output { color: var(--cyan); font-variant-numeric: tabular-nums; }
input[type="range"] { accent-color: var(--cyan); cursor: pointer; width: 100%; }

footer { color: #6f7b96; display: flex; font-size: 11px; gap: 18px; justify-content: space-between; margin-top: 17px; }

@media (max-width: 760px) {
  .app-shell { padding: 28px 14px 20px; }
  .hero { align-items: stretch; flex-direction: column; }
  .status-card { flex-basis: auto; }
  .control-deck { grid-template-columns: 1fr 1fr; }
  .range-control { grid-column: span 2; }
  footer { flex-direction: column; gap: 2px; }
}

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }