:root {
  color-scheme: dark;
  --bg: #040510;
  --text: #f7fbff;
  --muted: #aeb9cb;
  --cyan: #74f7ff;
  --blue: #61a5ff;
  --pink: #ff66c7;
  --violet: #a78bfa;
  --glass: rgba(255,255,255,.118);
  --glass-border: rgba(255,255,255,.28);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  overflow: hidden;
  color: var(--text);
  background: var(--bg);
}

.app-shell, .stage, .backdrop-scene, .liquid-root, .css-deck {
  position: fixed;
  inset: 0;
}

.stage {
  isolation: isolate;
  cursor: default;
  background:
    radial-gradient(circle at 50% 130%, rgba(116,247,255,.13), transparent 42%),
    linear-gradient(135deg, #040510 0%, #090821 50%, #02151d 100%);
}

.backdrop-scene {
  overflow: hidden;
  z-index: 0;
  background:
    radial-gradient(circle at 18% 18%, rgba(255,102,199,.20), transparent 18rem),
    radial-gradient(circle at 80% 20%, rgba(97,165,255,.23), transparent 24rem),
    radial-gradient(circle at 48% 70%, rgba(116,247,255,.17), transparent 28rem);
}

.backdrop-scene::before,
.backdrop-scene::after {
  content: "";
  position: absolute;
  inset: -20%;
  background-image:
    linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 76px 76px;
  transform: perspective(900px) rotateX(64deg) translateY(16vh);
  transform-origin: 50% 70%;
  mask-image: linear-gradient(transparent, #000 25%, #000 75%, transparent);
  animation: gridDrift 9s linear infinite;
}
.backdrop-scene::after {
  filter: blur(12px);
  opacity: .35;
  animation-duration: 15s;
}

.orb {
  position: absolute;
  border-radius: 999px;
  filter: blur(4px) saturate(1.3);
  mix-blend-mode: screen;
  opacity: .92;
  animation: float 10s ease-in-out infinite alternate;
}
.orb-a {
  width: min(44vw, 520px); height: min(44vw, 520px);
  left: 8vw; top: 8vh;
  background: radial-gradient(circle at 32% 28%, #fff 0 2%, #74f7ff 8%, #2546ff 42%, transparent 70%);
}
.orb-b {
  width: min(36vw, 430px); height: min(36vw, 430px);
  right: 5vw; bottom: 9vh;
  background: radial-gradient(circle at 40% 35%, #fff 0 2%, #ff66c7 11%, #7c3aed 48%, transparent 72%);
  animation-delay: -3s;
}
.orb-c {
  width: min(22vw, 280px); height: min(22vw, 280px);
  left: 58vw; top: 10vh;
  background: radial-gradient(circle at 35% 30%, #fff 0 2%, #fef08a 10%, #fb7185 46%, transparent 72%);
  animation-delay: -6s;
}

.grid-glow {
  position: absolute;
  left: 50%; top: 50%;
  width: 76vmin; height: 76vmin;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: conic-gradient(from 90deg, transparent, rgba(116,247,255,.28), transparent, rgba(255,102,199,.22), transparent);
  filter: blur(32px);
  opacity: .8;
  animation: spin 18s linear infinite;
}

.constellation span {
  position: absolute;
  width: 4px; height: 4px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 24px 6px rgba(116,247,255,.7);
  animation: pulse 2.4s ease-in-out infinite alternate;
}
.constellation span:nth-child(1) { left: 23%; top: 67%; }
.constellation span:nth-child(2) { left: 31%; top: 28%; animation-delay: -.6s; }
.constellation span:nth-child(3) { left: 67%; top: 31%; animation-delay: -1.2s; }
.constellation span:nth-child(4) { left: 78%; top: 62%; animation-delay: -1.6s; }
.constellation span:nth-child(5) { left: 49%; top: 47%; animation-delay: -2s; }

.liquid-root { z-index: 2; pointer-events: none; }
.liquid-root canvas { width: 100%; height: 100%; pointer-events: auto; }
/* Keep the DOM deck visible even when liquid-dom is running. Some browsers expose
   WebGPU but not Chrome's experimental HTML-in-Canvas flag, which makes the
   liquid canvas initialize while DOM-backed content stays blank. The CSS deck
   is the always-visible interaction layer; liquid-dom renders/refacts beneath it. */

.css-deck { z-index: 3; pointer-events: none; }
.glass-card {
  position: absolute;
  pointer-events: auto;
  user-select: none;
  border: 1px solid var(--glass-border);
  border-radius: 34px;
  background: linear-gradient(145deg, rgba(255,255,255,.16), rgba(255,255,255,.065));
  box-shadow: 0 28px 90px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.28);
  backdrop-filter: blur(18px) saturate(1.45);
  -webkit-backdrop-filter: blur(18px) saturate(1.45);
  transition: opacity .35s ease, transform .18s ease, border-color .18s ease;
  overflow: hidden;
}
.glass-card::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle at 20% 0%, rgba(255,255,255,.34), transparent 32%), linear-gradient(120deg, transparent 40%, rgba(255,255,255,.18), transparent 58%);
  opacity: .55;
  pointer-events: none;
}
.glass-card.dragging { transform: scale(1.025); border-color: rgba(116,247,255,.75); }
.glass-card > * { position: relative; }

.hero-card { left: 8vw; top: 12vh; width: min(520px, 84vw); padding: 34px; }
.metric-card { right: 12vw; top: 15vh; width: 250px; padding: 26px; }
.controls-card { right: 9vw; bottom: 12vh; width: 330px; padding: 24px; }
.playlist-card { left: 14vw; bottom: 13vh; width: 360px; padding: 24px; }

.eyebrow, .label {
  margin: 0 0 12px;
  color: var(--cyan);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: 12px;
  font-weight: 900;
}
h1 { margin: 0; font-size: clamp(48px, 8vw, 104px); line-height: .82; letter-spacing: -.08em; }
h2 { margin: 0 0 18px; font-size: 24px; letter-spacing: -.04em; }
p { color: rgba(247,251,255,.78); font-size: 16px; line-height: 1.6; }
.status-row { display: flex; gap: 10px; align-items: center; color: var(--muted); font-weight: 750; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: #fbbf24; box-shadow: 0 0 18px #fbbf24; }
.dot.ready { background: #34d399; box-shadow: 0 0 18px #34d399; }
.dot.error { background: #fb7185; box-shadow: 0 0 18px #fb7185; }
.metric-card strong { display: block; font-size: 62px; letter-spacing: -.08em; }
.meter { height: 11px; border-radius: 99px; background: rgba(255,255,255,.14); overflow: hidden; }
.meter i { display: block; width: 73%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--cyan), var(--pink)); box-shadow: 0 0 22px rgba(116,247,255,.5); }
.controls-card label { display: grid; gap: 8px; margin: 14px 0; color: rgba(247,251,255,.82); font-size: 13px; font-weight: 850; text-transform: uppercase; letter-spacing: .09em; }
input[type="range"] { width: 100%; accent-color: var(--cyan); }
button {
  width: 100%; margin-top: 8px; border: 0; border-radius: 999px; padding: 14px 16px;
  color: #031019; background: linear-gradient(135deg, var(--cyan), #a7f3d0);
  font: inherit; font-weight: 950; cursor: pointer;
  box-shadow: 0 14px 40px rgba(116,247,255,.22);
}
.wave { display: flex; align-items: end; gap: 7px; height: 58px; }
.wave b { width: 14%; border-radius: 99px; background: linear-gradient(180deg, var(--cyan), var(--pink)); animation: wave 1.1s ease-in-out infinite alternate; }
.wave b:nth-child(1) { height: 35%; animation-delay: -.1s; } .wave b:nth-child(2) { height: 70%; animation-delay: -.5s; }
.wave b:nth-child(3) { height: 48%; animation-delay: -.2s; } .wave b:nth-child(4) { height: 92%; animation-delay: -.8s; }
.wave b:nth-child(5) { height: 54%; animation-delay: -.4s; } .wave b:nth-child(6) { height: 78%; animation-delay: -.7s; }
.wave b:nth-child(7) { height: 38%; animation-delay: -.3s; }

.fallback-shell { position: fixed; z-index: 6; left: 18px; top: 18px; max-width: 460px; pointer-events: none; }
.fallback-card { border: 1px solid rgba(251,191,36,.42); border-radius: 24px; padding: 18px; background: rgba(12,13,24,.72); backdrop-filter: blur(18px); box-shadow: 0 24px 80px rgba(0,0,0,.45); }
.fallback-card h1 { font-size: 30px; letter-spacing: -.04em; }
.fallback-card p { margin: 8px 0; font-size: 13px; }
code { color: #fde68a; }

@keyframes gridDrift { to { background-position: 0 76px, 76px 0; } }
@keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes float { to { transform: translate3d(6vw, -3vh, 0) scale(1.08); } }
@keyframes pulse { to { transform: scale(1.8); opacity: .45; } }
@keyframes wave { to { transform: scaleY(.55); filter: hue-rotate(45deg); } }

@media (max-width: 820px) {
  body { overflow: auto; }
  .app-shell, .stage, .backdrop-scene, .liquid-root, .css-deck { min-height: 100vh; position: absolute; }
  .css-deck { display: grid; gap: 16px; padding: 110px 16px 32px; }
  .glass-card { position: relative; inset: auto; width: 100%; }
}