:root {
  --background: 246 42% 7%;
  --foreground: 220 28% 96%;
  --primary: 267 100% 67%;
  --primary-foreground: 0 0% 100%;
  --secondary: 188 100% 54%;
  --secondary-foreground: 245 38% 8%;
  --muted: 241 22% 18%;
  --muted-foreground: 224 16% 73%;
  --destructive: 350 91% 63%;
  --destructive-foreground: 0 0% 100%;
  --border: 244 21% 25%;
  --card: 244 32% 12%;
  --shadow-sm: 0 8px 22px rgba(0, 0, 0, .22);
  --shadow-md: 0 18px 50px rgba(0, 0, 0, .35);
  --shadow-lg: 0 28px 90px rgba(84, 42, 255, .28);
  --transition-fast: 150ms ease;
  --transition-smooth: 360ms cubic-bezier(.2,.8,.2,1);
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 32px;
}
.dark {
  --background: 246 42% 7%;
  --foreground: 220 28% 96%;
  --primary: 267 100% 67%;
  --secondary: 188 100% 54%;
  --muted: 241 22% 18%;
  --border: 244 21% 25%;
  --card: 244 32% 12%;
}
* { box-sizing: border-box; }
html { background: hsl(var(--background)); color: hsl(var(--foreground)); }
body { margin: 0; min-height: 100vh; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; overflow-x: hidden; }
button, a, input, select { -webkit-tap-highlight-color: transparent; }
.glass { background: linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.04)); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(22px); box-shadow: var(--shadow-md); }
.cinematic-grid { background-image: radial-gradient(circle at 15% 10%, hsla(var(--primary), .32), transparent 32%), radial-gradient(circle at 85% 0%, hsla(var(--secondary), .24), transparent 30%), linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: auto, auto, 42px 42px, 42px 42px; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }
.video-shell { background: radial-gradient(circle at 50% 20%, rgba(140, 92, 255, .24), transparent 38%), #03030a; }
.video-shell video { width: 100%; height: 100%; object-fit: cover; background: #03030a; }
.range { accent-color: hsl(var(--primary)); }
.wavebar { transform-origin: bottom; animation: pulseWave 1.8s ease-in-out infinite; }
@keyframes pulseWave { 0%, 100% { opacity: .45; transform: scaleY(.55); } 50% { opacity: 1; transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
@media (max-width: 640px) { .mobile-safe { padding-bottom: env(safe-area-inset-bottom); } }