:root {
    --bg: #000000;
    --text: #ffffff;
    --font: 'Montserrat', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: var(--bg); color: var(--text); font-family: var(--font); overflow: hidden; height: 100vh; transition: background 0.1s; }

/* Strobe effect class toggled by JS */
body.strobe { background: #ffffff; color: #000000; }
body.strobe .light { background: #000; }
body.strobe .bass-circle { border-color: #000; }

.strobe-container { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; }

/* Giant Pulse Text */
h1 { font-size: 12vw; line-height: 0.9; text-align: center; text-transform: uppercase; z-index: 10; cursor: pointer; transition: transform 0.1s; }
h1:hover { transform: scale(1.05); }

/* Subtitle */
.subtitle { margin-top: 2rem; font-size: 2rem; letter-spacing: 10px; z-index: 10; font-weight: 900; }

/* Bass Circles */
.bass-circle { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 50vw; height: 50vw; border-radius: 50%; border: 20px solid rgba(255,255,255,0.1); z-index: 1; transition: 0.1s; }
.bass-circle.ring { width: 70vw; height: 70vw; border-width: 2px; border-color: rgba(255,255,255,0.3); }
body.boom .bass-circle { transform: translate(-50%, -50%) scale(1.2); border-color: rgba(255,255,255,0.5); }

/* Grid Lights */
.grid-lights { position: absolute; bottom: 50px; display: grid; grid-template-columns: repeat(9, 1fr); gap: 20px; width: 80%; opacity: 0.5; z-index: 5; }
.light { height: 20px; background: white; border-radius: 10px; transition: height 0.1s; }