:root {
    --bg: #070912;
    --panel: rgba(13, 18, 31, 0.84);
    --panel-strong: rgba(17, 24, 39, 0.94);
    --line: rgba(167, 184, 218, 0.16);
    --line-strong: rgba(167, 184, 218, 0.28);
    --text: #f0f3fb;
    --muted: #9fa9bb;
    --subtle: #6f7a8f;
    --cyan: #58d5f6;
    --violet: #7b6ef6;
    --mint: #54d79d;
    --amber: #e7a95f;
    --rose: #d66f96;
    --night-blue: #101c31;
    --shadow: 0 24px 80px rgba(0, 0, 0, 0.42);
    --radius: 8px;
    --player-height: 178px;
    --scene-image: url("../images/scenes/nightflat-window-city-default.png");
    --scene-tint: rgba(34, 67, 122, 0.2);
    --scene-glow: rgba(107, 107, 246, 0.18);
    --scene-warmth: rgba(231, 169, 95, 0.1);
    --scene-rain-opacity: 0.14;
    --scene-glass-opacity: 0.34;
    --time-bg-top: rgba(3, 5, 12, 0.18);
    --time-bg-mid: rgba(5, 7, 16, 0.68);
    --time-bg-bottom: rgba(3, 5, 12, 0.98);
    --time-side-tint: rgba(5, 7, 16, 0.32);
    --time-overlay-opacity: 1;
    --time-ambient-opacity: 1;
    --time-scene-saturate: 1;
    --time-window-boost: 0;
    --time-window-right-boost: 0;
    --time-rain-boost: 0;
    --time-glass-boost: 0;
    --time-city-boost: 0;
    --time-hero-neon-opacity: 0;
    --time-heading-glow-opacity: 0;
    --time-panel-glow-opacity: 0;
    --time-ui-glow-opacity: 0;
    --time-sidebar-glow-opacity: 0;
    --audio-reactive-level: 0;
    --neon-primary: #d66f96;
    --neon-secondary: #7b6ef6;
    --neon-primary-rgb: 214 111 150;
    --neon-secondary-rgb: 123 110 246;
    --neon-glow: rgba(214, 111, 150, 0.32);
    --neon-line: rgba(214, 111, 150, 0.46);
    --neon-soft: rgba(214, 111, 150, 0.12);
    --neon-secondary-soft: rgba(123, 110, 246, 0.12);
    color-scheme: dark;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body[data-neon-theme] {
    --cyan: var(--neon-primary);
    --violet: var(--neon-secondary);
    --rose: var(--neon-primary);
    --scene-tint: rgb(var(--neon-secondary-rgb) / 0.18);
    --scene-glow: rgb(var(--neon-primary-rgb) / 0.2);
    --scene-warmth: rgb(var(--neon-primary-rgb) / 0.08);
}

body[data-neon-theme="afterglow"] {
    --neon-primary: #d66f96;
    --neon-secondary: #7b6ef6;
    --neon-primary-rgb: 214 111 150;
    --neon-secondary-rgb: 123 110 246;
    --neon-glow: rgba(214, 111, 150, 0.32);
    --neon-line: rgba(214, 111, 150, 0.46);
    --neon-soft: rgba(214, 111, 150, 0.12);
    --neon-secondary-soft: rgba(123, 110, 246, 0.12);
}

body[data-neon-theme="cyan-window"] {
    --neon-primary: #58d5f6;
    --neon-secondary: #7b6ef6;
    --neon-primary-rgb: 88 213 246;
    --neon-secondary-rgb: 123 110 246;
    --neon-glow: rgba(88, 213, 246, 0.34);
    --neon-line: rgba(88, 213, 246, 0.5);
    --neon-soft: rgba(88, 213, 246, 0.12);
    --neon-secondary-soft: rgba(123, 110, 246, 0.12);
}

body[data-neon-theme="mint-signal"] {
    --neon-primary: #54d79d;
    --neon-secondary: #58d5f6;
    --neon-primary-rgb: 84 215 157;
    --neon-secondary-rgb: 88 213 246;
    --neon-glow: rgba(84, 215, 157, 0.3);
    --neon-line: rgba(84, 215, 157, 0.46);
    --neon-soft: rgba(84, 215, 157, 0.12);
    --neon-secondary-soft: rgba(88, 213, 246, 0.1);
}

body[data-neon-theme="amber-tape"] {
    --neon-primary: #e7a95f;
    --neon-secondary: #d66f96;
    --neon-primary-rgb: 231 169 95;
    --neon-secondary-rgb: 214 111 150;
    --neon-glow: rgba(231, 169, 95, 0.32);
    --neon-line: rgba(231, 169, 95, 0.48);
    --neon-soft: rgba(231, 169, 95, 0.12);
    --neon-secondary-soft: rgba(214, 111, 150, 0.1);
}

body[data-neon-theme="neon-off"] {
    --neon-primary: #8d96a8;
    --neon-secondary: #5f6878;
    --neon-primary-rgb: 141 150 168;
    --neon-secondary-rgb: 95 104 120;
    --neon-glow: rgba(141, 150, 168, 0.12);
    --neon-line: rgba(141, 150, 168, 0.24);
    --neon-soft: rgba(141, 150, 168, 0.055);
    --neon-secondary-soft: rgba(95, 104, 120, 0.05);
    --scene-tint: rgba(95, 104, 120, 0.08);
    --scene-glow: rgba(141, 150, 168, 0.06);
    --scene-warmth: rgba(141, 150, 168, 0.035);
    --time-hero-neon-opacity: 0.01;
    --time-heading-glow-opacity: 0.01;
    --time-panel-glow-opacity: 0;
    --time-ui-glow-opacity: 0.005;
    --time-sidebar-glow-opacity: 0.01;
}

body[data-neon-theme="ultraviolet"] {
    --neon-primary: #a889ff;
    --neon-secondary: #58d5f6;
    --neon-primary-rgb: 168 137 255;
    --neon-secondary-rgb: 88 213 246;
    --neon-glow: rgba(168, 137, 255, 0.36);
    --neon-line: rgba(168, 137, 255, 0.52);
    --neon-soft: rgba(168, 137, 255, 0.13);
    --neon-secondary-soft: rgba(88, 213, 246, 0.1);
}

body[data-neon-theme="laser-rose"] {
    --neon-primary: #ff73ca;
    --neon-secondary: #ff9ab7;
    --neon-primary-rgb: 255 115 202;
    --neon-secondary-rgb: 255 154 183;
    --neon-glow: rgba(255, 115, 202, 0.36);
    --neon-line: rgba(255, 115, 202, 0.52);
    --neon-soft: rgba(255, 115, 202, 0.13);
    --neon-secondary-soft: rgba(255, 154, 183, 0.1);
}

body[data-neon-theme="electric-lime"] {
    --neon-primary: #b8ff5f;
    --neon-secondary: #54d79d;
    --neon-primary-rgb: 184 255 95;
    --neon-secondary-rgb: 84 215 157;
    --neon-glow: rgba(184, 255, 95, 0.28);
    --neon-line: rgba(184, 255, 95, 0.48);
    --neon-soft: rgba(184, 255, 95, 0.1);
    --neon-secondary-soft: rgba(84, 215, 157, 0.11);
}

body[data-neon-theme="ghost-blue"] {
    --neon-primary: #91e5ff;
    --neon-secondary: #bdaaff;
    --neon-primary-rgb: 145 229 255;
    --neon-secondary-rgb: 189 170 255;
    --neon-glow: rgba(145, 229, 255, 0.32);
    --neon-line: rgba(145, 229, 255, 0.5);
    --neon-soft: rgba(145, 229, 255, 0.12);
    --neon-secondary-soft: rgba(189, 170, 255, 0.12);
}

body[data-neon-theme="velvet-rain"] {
    --neon-primary: #c77dff;
    --neon-secondary: #4dd4ac;
    --neon-primary-rgb: 199 125 255;
    --neon-secondary-rgb: 77 212 172;
    --neon-glow: rgba(199, 125, 255, 0.35);
    --neon-line: rgba(199, 125, 255, 0.52);
    --neon-soft: rgba(199, 125, 255, 0.13);
    --neon-secondary-soft: rgba(77, 212, 172, 0.11);
}

body[data-neon-theme="moonlit-jade"] {
    --neon-primary: #6cf6c8;
    --neon-secondary: #9bbcff;
    --neon-primary-rgb: 108 246 200;
    --neon-secondary-rgb: 155 188 255;
    --neon-glow: rgba(108, 246, 200, 0.31);
    --neon-line: rgba(108, 246, 200, 0.5);
    --neon-soft: rgba(108, 246, 200, 0.11);
    --neon-secondary-soft: rgba(155, 188, 255, 0.12);
}

body[data-neon-theme="rooftop-gold"] {
    --neon-primary: #ffd166;
    --neon-secondary: #ff7f7f;
    --neon-primary-rgb: 255 209 102;
    --neon-secondary-rgb: 255 127 127;
    --neon-glow: rgba(255, 209, 102, 0.3);
    --neon-line: rgba(255, 209, 102, 0.5);
    --neon-soft: rgba(255, 209, 102, 0.11);
    --neon-secondary-soft: rgba(255, 127, 127, 0.1);
}

body[data-neon-theme="dream-cassette"] {
    --neon-primary: #ff9fca;
    --neon-secondary: #70e4ff;
    --neon-primary-rgb: 255 159 202;
    --neon-secondary-rgb: 112 228 255;
    --neon-glow: rgba(255, 159, 202, 0.34);
    --neon-line: rgba(255, 159, 202, 0.52);
    --neon-soft: rgba(255, 159, 202, 0.12);
    --neon-secondary-soft: rgba(112, 228, 255, 0.11);
}

body[data-neon-theme="arctic-hush"] {
    --neon-primary: #bdefff;
    --neon-secondary: #d9d4ff;
    --neon-primary-rgb: 189 239 255;
    --neon-secondary-rgb: 217 212 255;
    --neon-glow: rgba(189, 239, 255, 0.28);
    --neon-line: rgba(189, 239, 255, 0.46);
    --neon-soft: rgba(189, 239, 255, 0.1);
    --neon-secondary-soft: rgba(217, 212, 255, 0.11);
}

body[data-neon-theme="bass-bloom"] {
    --neon-primary: #ff5c8a;
    --neon-secondary: #5cf2d6;
    --neon-primary-rgb: 255 92 138;
    --neon-secondary-rgb: 92 242 214;
    --neon-glow: rgba(255, 92, 138, 0.38);
    --neon-line: rgba(255, 92, 138, 0.56);
    --neon-soft: rgba(255, 92, 138, 0.14);
    --neon-secondary-soft: rgba(92, 242, 214, 0.12);
}

body[data-neon-theme="pulse-violet"] {
    --neon-primary: #b066ff;
    --neon-secondary: #ff72df;
    --neon-primary-rgb: 176 102 255;
    --neon-secondary-rgb: 255 114 223;
    --neon-glow: rgba(176, 102, 255, 0.4);
    --neon-line: rgba(176, 102, 255, 0.58);
    --neon-soft: rgba(176, 102, 255, 0.14);
    --neon-secondary-soft: rgba(255, 114, 223, 0.12);
}

body[data-neon-theme="afterhours-eq"] {
    --neon-primary: #68f5ff;
    --neon-secondary: #ffce6b;
    --neon-primary-rgb: 104 245 255;
    --neon-secondary-rgb: 255 206 107;
    --neon-glow: rgba(104, 245, 255, 0.36);
    --neon-line: rgba(104, 245, 255, 0.54);
    --neon-soft: rgba(104, 245, 255, 0.12);
    --neon-secondary-soft: rgba(255, 206, 107, 0.11);
}

body[data-neon-theme="ultra-beats"] {
    --neon-primary: #ff2bd6;
    --neon-secondary: #39ff8f;
    --neon-primary-rgb: 255 43 214;
    --neon-secondary-rgb: 57 255 143;
    --neon-glow: rgba(255, 43, 214, 0.48);
    --neon-line: rgba(255, 43, 214, 0.68);
    --neon-soft: rgba(255, 43, 214, 0.16);
    --neon-secondary-soft: rgba(57, 255, 143, 0.14);
}

body[data-neon-theme="prism-kick"] {
    --neon-primary: #7cfffb;
    --neon-secondary: #ff7a3d;
    --neon-primary-rgb: 124 255 251;
    --neon-secondary-rgb: 255 122 61;
    --neon-glow: rgba(124, 255, 251, 0.4);
    --neon-line: rgba(124, 255, 251, 0.58);
    --neon-soft: rgba(124, 255, 251, 0.13);
    --neon-secondary-soft: rgba(255, 122, 61, 0.12);
}

body[data-neon-theme="strobe-soda"] {
    --neon-primary: #f4ff4f;
    --neon-secondary: #45a3ff;
    --neon-primary-rgb: 244 255 79;
    --neon-secondary-rgb: 69 163 255;
    --neon-glow: rgba(244, 255, 79, 0.34);
    --neon-line: rgba(244, 255, 79, 0.52);
    --neon-soft: rgba(244, 255, 79, 0.11);
    --neon-secondary-soft: rgba(69, 163, 255, 0.13);
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    overflow-x: hidden;
    background: var(--bg);
}

body {
    min-height: 100vh;
    margin: 0;
    padding-bottom: var(--player-height);
    overflow-x: hidden;
    background:
        linear-gradient(180deg, var(--time-bg-top), var(--time-bg-mid) 58%, var(--time-bg-bottom) 100%),
        linear-gradient(90deg, var(--scene-warmth), transparent 30%, var(--scene-tint) 72%, var(--time-side-tint)),
        var(--scene-image) center / cover fixed,
        url("../images/background.webp") center / cover fixed,
        var(--bg);
    color: var(--text);
    letter-spacing: 0;
}

body,
.page-shell,
main,
section,
article,
aside,
div {
    min-width: 0;
}

body::before,
body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -2;
}

body::before {
    background:
        linear-gradient(105deg, rgba(214, 111, 150, calc(var(--audio-level) * 0.12)), transparent 34%),
        linear-gradient(248deg, rgba(88, 213, 246, calc(var(--audio-level) * 0.18)), transparent 38%),
        radial-gradient(circle at 74% 68%, var(--scene-glow), transparent 34%),
        linear-gradient(180deg, rgba(4, 7, 15, 0.08), rgba(4, 7, 15, 0.82));
    mix-blend-mode: screen;
    opacity: var(--time-overlay-opacity);
    transition: opacity 220ms ease;
}

body::after {
    z-index: -3;
    background:
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 4px),
        linear-gradient(115deg, #050711, #10151f 36%, #171426 68%, #07110e);
}

body[data-neon-theme]::before {
    background:
        linear-gradient(105deg, rgb(var(--neon-primary-rgb) / calc(var(--audio-level) * 0.12)), transparent 34%),
        linear-gradient(248deg, rgb(var(--neon-secondary-rgb) / calc(var(--audio-level) * 0.18)), transparent 38%),
        radial-gradient(circle at 74% 68%, var(--scene-glow), transparent 34%),
        linear-gradient(180deg, rgba(4, 7, 15, 0.08), rgba(4, 7, 15, 0.82));
}

body[data-neon-theme="neon-off"]::before {
    background:
        linear-gradient(105deg, rgb(var(--neon-primary-rgb) / calc(var(--audio-level) * 0.035)), transparent 34%),
        linear-gradient(248deg, rgb(var(--neon-secondary-rgb) / calc(var(--audio-level) * 0.045)), transparent 38%),
        radial-gradient(circle at 74% 68%, var(--scene-glow), transparent 34%),
        linear-gradient(180deg, rgba(4, 7, 15, 0.08), rgba(4, 7, 15, 0.86));
}

body[data-neon-reactive="true"]::before {
    background:
        linear-gradient(105deg, rgb(var(--neon-primary-rgb) / calc(var(--audio-level) * 0.16 + var(--audio-reactive-level) * 0.34)), transparent 34%),
        linear-gradient(248deg, rgb(var(--neon-secondary-rgb) / calc(var(--audio-level) * 0.2 + var(--audio-reactive-level) * 0.38)), transparent 38%),
        radial-gradient(circle at 74% 68%, var(--scene-glow), transparent 34%),
        linear-gradient(180deg, rgba(4, 7, 15, 0.08), rgba(4, 7, 15, 0.82));
}

body[data-neon-theme="ultra-beats"][data-neon-reactive="true"]::before {
    background:
        linear-gradient(100deg, rgb(var(--neon-primary-rgb) / calc(var(--audio-level) * 0.2 + var(--audio-reactive-level) * 0.56)), transparent 30%),
        linear-gradient(248deg, rgb(var(--neon-secondary-rgb) / calc(var(--audio-level) * 0.24 + var(--audio-reactive-level) * 0.6)), transparent 36%),
        radial-gradient(circle at 22% 18%, rgb(var(--neon-secondary-rgb) / calc(0.05 + var(--audio-reactive-level) * 0.28)), transparent 24%),
        radial-gradient(circle at 78% 74%, rgb(var(--neon-primary-rgb) / calc(0.07 + var(--audio-reactive-level) * 0.34)), transparent 32%),
        linear-gradient(180deg, rgba(4, 7, 15, 0.04), rgba(4, 7, 15, 0.78));
}

body[data-neon-theme="prism-kick"][data-neon-reactive="true"]::before,
body[data-neon-theme="strobe-soda"][data-neon-reactive="true"]::before {
    background:
        linear-gradient(105deg, rgb(var(--neon-primary-rgb) / calc(var(--audio-level) * 0.18 + var(--audio-reactive-level) * 0.42)), transparent 32%),
        linear-gradient(248deg, rgb(var(--neon-secondary-rgb) / calc(var(--audio-level) * 0.22 + var(--audio-reactive-level) * 0.46)), transparent 38%),
        radial-gradient(circle at 72% 66%, var(--scene-glow), transparent 32%),
        radial-gradient(circle at 18% 22%, rgb(var(--neon-secondary-rgb) / calc(0.04 + var(--audio-reactive-level) * 0.18)), transparent 28%),
        linear-gradient(180deg, rgba(4, 7, 15, 0.07), rgba(4, 7, 15, 0.8));
}

body[data-time-mood="morning"] {
    --time-bg-top: rgba(7, 10, 18, 0.1);
    --time-bg-mid: rgba(8, 12, 23, 0.58);
    --time-bg-bottom: rgba(4, 6, 13, 0.9);
    --time-side-tint: rgba(8, 14, 25, 0.24);
    --time-overlay-opacity: 0.72;
    --time-ambient-opacity: 0.76;
    --time-scene-saturate: 0.92;
    --time-hero-neon-opacity: 0;
    --time-heading-glow-opacity: 0;
    --time-sidebar-glow-opacity: 0;
}

body[data-time-mood="afternoon"] {
    --time-bg-top: rgba(8, 10, 18, 0.13);
    --time-bg-mid: rgba(8, 12, 23, 0.62);
    --time-bg-bottom: rgba(4, 6, 13, 0.94);
    --time-side-tint: rgba(71, 45, 44, 0.28);
    --time-overlay-opacity: 0.78;
    --time-ambient-opacity: 0.82;
    --time-scene-saturate: 0.98;
    --time-window-boost: 0.015;
    --time-glass-boost: 0.01;
    --time-city-boost: 0.015;
    --time-hero-neon-opacity: 0.04;
    --time-heading-glow-opacity: 0.03;
    --time-panel-glow-opacity: 0.008;
    --time-ui-glow-opacity: 0.01;
    --time-sidebar-glow-opacity: 0.018;
}

body[data-time-mood="evening"] {
    --time-bg-top: rgba(5, 7, 16, 0.16);
    --time-bg-mid: rgba(6, 9, 21, 0.7);
    --time-bg-bottom: rgba(3, 5, 12, 0.98);
    --time-side-tint: rgba(76, 40, 68, 0.32);
    --time-overlay-opacity: 0.86;
    --time-ambient-opacity: 0.9;
    --time-scene-saturate: 1.03;
    --time-window-boost: 0.035;
    --time-window-right-boost: 0.02;
    --time-rain-boost: 0.006;
    --time-glass-boost: 0.02;
    --time-city-boost: 0.035;
    --time-hero-neon-opacity: 0.06;
    --time-heading-glow-opacity: 0.05;
    --time-panel-glow-opacity: 0.016;
    --time-ui-glow-opacity: 0.025;
    --time-sidebar-glow-opacity: 0.04;
}

body[data-time-mood="early-night"] {
    --time-bg-top: rgba(4, 6, 15, 0.2);
    --time-bg-mid: rgba(5, 8, 19, 0.76);
    --time-bg-bottom: rgba(2, 4, 10, 0.99);
    --time-side-tint: rgba(34, 14, 56, 0.38);
    --time-overlay-opacity: 0.94;
    --time-ambient-opacity: 0.96;
    --time-scene-saturate: 1.08;
    --time-window-boost: 0.06;
    --time-window-right-boost: 0.04;
    --time-rain-boost: 0.012;
    --time-glass-boost: 0.03;
    --time-city-boost: 0.06;
    --time-hero-neon-opacity: 0.085;
    --time-heading-glow-opacity: 0.065;
    --time-panel-glow-opacity: 0.024;
    --time-ui-glow-opacity: 0.04;
    --time-sidebar-glow-opacity: 0.06;
}

body[data-time-mood="night"] {
    --time-bg-top: rgba(3, 5, 13, 0.24);
    --time-bg-mid: rgba(4, 7, 18, 0.82);
    --time-bg-bottom: rgba(1, 3, 9, 1);
    --time-side-tint: rgba(28, 12, 49, 0.42);
    --time-overlay-opacity: 1;
    --time-ambient-opacity: 1;
    --time-scene-saturate: 1.11;
    --time-window-boost: 0.09;
    --time-window-right-boost: 0.07;
    --time-rain-boost: 0.022;
    --time-glass-boost: 0.04;
    --time-city-boost: 0.09;
    --time-hero-neon-opacity: 0.12;
    --time-heading-glow-opacity: 0.09;
    --time-panel-glow-opacity: 0.034;
    --time-ui-glow-opacity: 0.06;
    --time-sidebar-glow-opacity: 0.082;
}

body[data-time-mood="midnight"] {
    --time-bg-top: rgba(2, 4, 12, 0.28);
    --time-bg-mid: rgba(3, 5, 17, 0.88);
    --time-bg-bottom: rgba(1, 2, 8, 1);
    --time-side-tint: rgba(36, 14, 57, 0.46);
    --time-overlay-opacity: 1;
    --time-ambient-opacity: 1;
    --time-scene-saturate: 1.16;
    --time-window-boost: 0.13;
    --time-window-right-boost: 0.1;
    --time-rain-boost: 0.03;
    --time-glass-boost: 0.05;
    --time-city-boost: 0.13;
    --time-hero-neon-opacity: 0.16;
    --time-heading-glow-opacity: 0.12;
    --time-panel-glow-opacity: 0.045;
    --time-ui-glow-opacity: 0.08;
    --time-sidebar-glow-opacity: 0.11;
}

body[data-time-mood="pre-dawn"] {
    --time-bg-top: rgba(3, 5, 13, 0.2);
    --time-bg-mid: rgba(4, 7, 18, 0.76);
    --time-bg-bottom: rgba(2, 4, 10, 0.98);
    --time-side-tint: rgba(19, 22, 47, 0.38);
    --time-overlay-opacity: 0.88;
    --time-ambient-opacity: 0.86;
    --time-scene-saturate: 0.96;
    --time-window-boost: 0.045;
    --time-window-right-boost: 0.032;
    --time-rain-boost: 0.018;
    --time-glass-boost: 0.025;
    --time-city-boost: 0.045;
    --time-hero-neon-opacity: 0.07;
    --time-heading-glow-opacity: 0.055;
    --time-panel-glow-opacity: 0.02;
    --time-ui-glow-opacity: 0.03;
    --time-sidebar-glow-opacity: 0.05;
}

body[data-scene-mood="Rainy"] {
    --scene-tint: rgba(74, 139, 180, 0.26);
    --scene-glow: rgba(88, 213, 246, 0.26);
    --scene-rain-opacity: 0.28;
}

body[data-scene-mood="Melancholy"],
body[data-scene-mood="Lonely"],
body[data-scene-mood="Midnight"] {
    --scene-tint: rgba(24, 48, 96, 0.34);
    --scene-glow: rgba(72, 86, 156, 0.18);
    --scene-warmth: rgba(231, 169, 95, 0.055);
    --scene-rain-opacity: 0.2;
}

body[data-scene-mood="Dreamy"] {
    --scene-tint: rgba(125, 106, 196, 0.22);
    --scene-glow: rgba(158, 140, 255, 0.24);
    --scene-rain-opacity: 0.12;
}

body[data-scene-mood="Cozy"],
body[data-scene-mood="Afterglow"] {
    --scene-tint: rgba(96, 56, 118, 0.2);
    --scene-glow: rgba(214, 111, 150, 0.2);
    --scene-warmth: rgba(231, 169, 95, 0.18);
}

body[data-scene-mood="Rooftop"],
body[data-scene-mood="Vibing"] {
    --scene-tint: rgba(103, 93, 190, 0.24);
    --scene-glow: rgba(214, 111, 150, 0.18);
    --scene-warmth: rgba(231, 169, 95, 0.12);
}

body[data-scene-type="rain"] {
    --scene-rain-opacity: 0.34;
}

body[data-scene-type="ambient"],
body[data-scene-type="tape"] {
    --scene-glass-opacity: 0.44;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
textarea,
select {
    font: inherit;
}

button {
    cursor: pointer;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.ambient-scene {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    filter: saturate(var(--time-scene-saturate));
    opacity: var(--time-ambient-opacity);
    pointer-events: none;
    transition:
        filter 260ms ease,
        opacity 260ms ease;
}

.window-glow {
    position: absolute;
    bottom: 7vh;
    width: 34vw;
    max-width: 620px;
    min-width: 300px;
    height: 42vh;
    border: 1px solid rgba(167, 184, 218, 0.08);
    background:
        linear-gradient(180deg, rgba(231, 169, 95, 0.14), rgba(214, 111, 150, 0.05) 52%, transparent),
        repeating-linear-gradient(90deg, transparent 0 34px, rgba(255, 255, 255, 0.07) 34px 36px),
        repeating-linear-gradient(0deg, transparent 0 42px, rgba(255, 255, 255, 0.05) 42px 44px);
    opacity: calc(0.18 + var(--audio-level) * 0.22 + var(--time-window-boost));
    transform: skewX(-8deg);
    mix-blend-mode: screen;
}

.window-glow-left {
    left: -12vw;
}

.window-glow-right {
    right: -10vw;
    bottom: 22vh;
    width: 26vw;
    height: 30vh;
    opacity: calc(0.12 + var(--audio-level) * 0.15 + var(--time-window-right-boost));
}

.city-glow {
    position: absolute;
    inset: auto 0 0;
    height: 34vh;
    background:
        linear-gradient(90deg, rgba(214, 111, 150, 0.08), rgba(88, 213, 246, calc(var(--audio-level) * 0.2)), rgba(231, 169, 95, 0.1)),
        linear-gradient(0deg, rgba(3, 4, 9, 0.96), transparent);
    opacity: calc(0.86 + var(--time-city-boost));
}

body[data-neon-theme] .window-glow {
    background:
        linear-gradient(180deg, rgb(var(--neon-primary-rgb) / 0.14), rgb(var(--neon-secondary-rgb) / 0.06) 52%, transparent),
        repeating-linear-gradient(90deg, transparent 0 34px, rgba(255, 255, 255, 0.07) 34px 36px),
        repeating-linear-gradient(0deg, transparent 0 42px, rgba(255, 255, 255, 0.05) 42px 44px);
}

body[data-neon-reactive="true"] .window-glow {
    opacity: calc(0.22 + var(--audio-level) * 0.28 + var(--audio-reactive-level) * 0.32 + var(--time-window-boost));
}

body[data-neon-reactive="true"] .window-glow-right {
    opacity: calc(0.15 + var(--audio-level) * 0.2 + var(--audio-reactive-level) * 0.26 + var(--time-window-right-boost));
}

body[data-neon-theme] .city-glow {
    background:
        linear-gradient(90deg, var(--neon-soft), rgb(var(--neon-secondary-rgb) / calc(var(--audio-level) * 0.2)), var(--neon-secondary-soft)),
        linear-gradient(0deg, rgba(3, 4, 9, 0.96), transparent);
}

body[data-neon-reactive="true"] .city-glow {
    background:
        linear-gradient(90deg, var(--neon-soft), rgb(var(--neon-secondary-rgb) / calc(var(--audio-level) * 0.22 + var(--audio-reactive-level) * 0.38)), var(--neon-secondary-soft)),
        linear-gradient(0deg, rgba(3, 4, 9, 0.96), transparent);
}

.home-cinematic-ambient,
.home-cinematic-ambient span {
    position: absolute;
    display: block;
    pointer-events: none;
}

.home-cinematic-ambient {
    inset: 0;
    overflow: hidden;
}

.home-page .home-city-twinkle {
    inset: 10vh 0 0;
    mix-blend-mode: screen;
    opacity: calc(0.24 + var(--time-city-boost));
    filter: blur(0.35px) saturate(1.08);
}

.home-page .home-city-twinkle-a {
    background:
        radial-gradient(circle at 9% 45%, rgba(255, 190, 116, 0.42) 0 1px, transparent 3px),
        radial-gradient(circle at 18% 63%, rgba(255, 214, 158, 0.38) 0 1px, transparent 3px),
        radial-gradient(circle at 31% 54%, rgba(146, 190, 255, 0.34) 0 1px, transparent 3px),
        radial-gradient(circle at 43% 67%, rgba(255, 187, 118, 0.38) 0 1px, transparent 3px),
        radial-gradient(circle at 58% 56%, rgba(164, 206, 255, 0.32) 0 1px, transparent 3px),
        radial-gradient(circle at 74% 48%, rgba(255, 207, 148, 0.4) 0 1px, transparent 3px),
        radial-gradient(circle at 89% 58%, rgba(255, 182, 104, 0.34) 0 1px, transparent 3px);
}

.home-page .home-city-twinkle-b {
    background:
        radial-gradient(circle at 12% 72%, rgba(255, 198, 130, 0.3) 0 1px, transparent 3px),
        radial-gradient(circle at 25% 49%, rgba(151, 196, 255, 0.26) 0 1px, transparent 3px),
        radial-gradient(circle at 38% 61%, rgba(255, 222, 168, 0.32) 0 1px, transparent 3px),
        radial-gradient(circle at 51% 44%, rgba(255, 184, 112, 0.28) 0 1px, transparent 3px),
        radial-gradient(circle at 66% 66%, rgba(145, 193, 255, 0.3) 0 1px, transparent 3px),
        radial-gradient(circle at 81% 51%, rgba(255, 210, 154, 0.34) 0 1px, transparent 3px),
        radial-gradient(circle at 93% 70%, rgba(255, 185, 110, 0.28) 0 1px, transparent 3px);
    opacity: 0.2;
}

.home-page .home-city-twinkle-c {
    background:
        radial-gradient(circle at 15% 38%, rgba(158, 203, 255, 0.24) 0 1px, transparent 3px),
        radial-gradient(circle at 34% 76%, rgba(255, 188, 116, 0.26) 0 1px, transparent 3px),
        radial-gradient(circle at 48% 52%, rgba(255, 221, 166, 0.28) 0 1px, transparent 3px),
        radial-gradient(circle at 61% 73%, rgba(151, 197, 255, 0.24) 0 1px, transparent 3px),
        radial-gradient(circle at 76% 39%, rgba(255, 199, 134, 0.3) 0 1px, transparent 3px),
        radial-gradient(circle at 88% 78%, rgba(255, 184, 112, 0.24) 0 1px, transparent 3px);
    opacity: 0.16;
}

.home-page .window-glow {
    display: none;
}

.home-page .city-glow {
    display: none;
}

.home-page .ambient-scene {
    z-index: 0;
}

.home-page .page-shell {
    position: relative;
    z-index: 1;
}