:root {
  --background: 262 72% 6%;
  --foreground: 212 100% 96%;
  --primary: 265 100% 62%;
  --primary-foreground: 0 0% 100%;
  --secondary: 190 100% 55%;
  --secondary-foreground: 254 70% 7%;
  --muted: 252 28% 28%;
  --muted-foreground: 220 28% 78%;
  --destructive: 344 100% 62%;
  --destructive-foreground: 0 0% 100%;
  --border: 260 50% 35%;
  --card: 260 55% 12%;
  --shadow-sm: 0 6px 20px hsl(265 100% 62% / .18);
  --shadow-md: 0 18px 50px hsl(190 100% 55% / .18);
  --shadow-lg: 0 28px 90px hsl(304 100% 62% / .22);
  --transition-fast: 160ms ease;
  --transition-smooth: 360ms cubic-bezier(.22,1,.36,1);
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 32px;
}
.dark {
  --background: 262 72% 6%;
  --foreground: 212 100% 96%;
  --primary: 265 100% 62%;
  --secondary: 190 100% 55%;
  --muted: 252 28% 28%;
  --destructive: 344 100% 62%;
  --border: 260 50% 35%;
  --card: 260 55% 12%;
}
.light {
  --background: 230 100% 97%;
  --foreground: 258 58% 12%;
  --primary: 265 100% 52%;
  --primary-foreground: 0 0% 100%;
  --secondary: 191 94% 42%;
  --secondary-foreground: 0 0% 100%;
  --muted: 242 45% 88%;
  --muted-foreground: 252 28% 32%;
  --destructive: 344 84% 50%;
  --border: 248 48% 78%;
  --card: 0 0% 100%;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; overflow-x: hidden; background: hsl(var(--background)); color: hsl(var(--foreground)); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, input, textarea, select { font: inherit; }
a { color: inherit; text-decoration: none; }
::selection { background: hsl(var(--primary) / .45); }
.app-shell { min-height: 100vh; position: relative; background: radial-gradient(circle at 15% 10%, hsl(var(--primary) / .34), transparent 30%), radial-gradient(circle at 85% 20%, hsl(var(--secondary) / .25), transparent 26%), radial-gradient(circle at 50% 90%, hsl(304 100% 62% / .20), transparent 28%), hsl(var(--background)); }
.glass { background: linear-gradient(135deg, hsl(var(--card) / .72), hsl(var(--card) / .38)); border: 1px solid hsl(var(--border) / .55); box-shadow: var(--shadow-md); backdrop-filter: blur(22px); }
.neon-text { background: linear-gradient(90deg, hsl(var(--foreground)), hsl(var(--secondary)), hsl(304 100% 70%), hsl(var(--primary))); -webkit-background-clip: text; background-clip: text; color: transparent; }
.neon-btn { position: relative; overflow: hidden; transition: transform var(--transition-smooth), box-shadow var(--transition-smooth), border-color var(--transition-fast); }
.neon-btn:before { content: ""; position: absolute; inset: -80% -30%; background: linear-gradient(90deg, transparent, hsl(0 0% 100% / .26), transparent); transform: translateX(-90%) rotate(18deg); transition: transform 700ms ease; }
.neon-btn:hover:before { transform: translateX(90%) rotate(18deg); }
.neon-btn:hover { transform: translateY(-2px) scale(1.01); box-shadow: var(--shadow-lg); }
.particle-field { pointer-events: none; position: fixed; inset: 0; z-index: 0; overflow: hidden; }
.particle { position: absolute; width: 3px; height: 3px; border-radius: 999px; background: hsl(var(--secondary)); box-shadow: 0 0 18px hsl(var(--secondary)); animation: floatParticle linear infinite; opacity: .75; }
@keyframes floatParticle { from { transform: translate3d(0, 110vh, 0) scale(.7); } to { transform: translate3d(18px, -12vh, 0) scale(1.3); } }
@keyframes pulseGlow { 0%, 100% { box-shadow: 0 0 22px hsl(var(--primary) / .25); } 50% { box-shadow: 0 0 42px hsl(var(--secondary) / .36); } }
@keyframes visualizer { 0%, 100% { transform: scaleY(.28); } 50% { transform: scaleY(1); } }
@keyframes orbit { to { transform: rotate(360deg); } }
.hero-city { background: linear-gradient(to top, hsl(262 72% 5%) 0 18%, transparent 18%), linear-gradient(120deg, hsl(265 100% 62% / .24), hsl(190 100% 55% / .10)), radial-gradient(circle at center, transparent, hsl(262 72% 6% / .72)), repeating-linear-gradient(90deg, hsl(190 100% 55% / .18) 0 1px, transparent 1px 80px), repeating-linear-gradient(0deg, hsl(304 100% 62% / .10) 0 1px, transparent 1px 70px); }
.city-bars { background: linear-gradient(to top, hsl(252 70% 8%), hsl(260 70% 14%)); clip-path: polygon(0 100%,0 52%,5% 52%,5% 30%,10% 30%,10% 65%,16% 65%,16% 40%,23% 40%,23% 58%,29% 58%,29% 22%,35% 22%,35% 72%,42% 72%,42% 35%,49% 35%,49% 60%,58% 60%,58% 28%,65% 28%,65% 70%,73% 70%,73% 45%,80% 45%,80% 24%,88% 24%,88% 56%,95% 56%,95% 38%,100% 38%,100% 100%); }
.scanline { background: linear-gradient(180deg, transparent, hsl(var(--secondary) / .10), transparent); animation: scan 5s linear infinite; }
@keyframes scan { from { transform: translateY(-100%); } to { transform: translateY(100%); } }
.focus-ring:focus { outline: 2px solid hsl(var(--secondary)); outline-offset: 3px; }
.wavebar { transform-origin: bottom; animation: visualizer 900ms ease-in-out infinite; }
.preview-frame { background: hsl(250 55% 8%); border: 1px solid hsl(var(--border) / .7); border-radius: var(--radius-md); min-height: 340px; overflow: hidden; }
@media (prefers-reduced-motion: reduce) { *, *:before, *:after { animation-duration: 1ms !important; transition-duration: 1ms !important; scroll-behavior: auto !important; } }