user.css

@charset "UTF-8";
/**
 * CRITICAL DARK THEME CSS - Loaded First (Phase 1)
 *
 * Purpose: Eliminate white flash on page load by establishing dark theme immediately
 * Priority: CRITICAL - Must load before any other styles
 * Performance: Inline-able, minimal CSS for fastest possible paint
 *
 * Architecture Integration:
 * - Complements SpicetifyColorBridge fallback system (Phase 3, 200ms)
 * - Provides immediate visual foundation while JS initializes
 * - Uses Catppuccin Macchiato palette for consistency
 *
 * Color Selection Rationale:
 * - --spice-mantle (#181926): Darkest background, eliminates white flash
 * - --spice-main (#24273a): Primary background for content areas
 * - --spice-text (#cad3f5): High contrast text for accessibility
 * - --spice-subtext (#a5adcb): Secondary text for hierarchy
 *
 * @layer critical-dark-theme
 * @performance <1ms parse time, immediate paint
 * @accessibility WCAG AAA contrast ratios maintained
 */
:root {
  --spice-mantle: #181926;
  --spice-main: #24273a;
  --spice-base: #24273a;
  --spice-surface0: #363a4f;
  --spice-surface1: #494d64;
  --spice-surface2: #5b6078;
  --spice-text: #cad3f5;
  --spice-subtext: #a5adcb;
  --spice-overlay0: #6e738d;
  --spice-overlay1: #8087a2;
  --spice-overlay2: #939ab7;
  --spice-crust: #1e2030;
}

:root {
  background-color: var(--spice-mantle) !important;
  color: var(--spice-text) !important;
}

body {
  background-color: var(--spice-mantle) !important;
  color: var(--spice-text) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.Root__main-view,
.main-view-container,
#main {
  background-color: var(--spice-main);
}

.main-view-container__scroll-node,
.main-viewContainer-scrollNode,
.main-view-container__scroll-node-child {
  background-color: var(--spice-main);
}

.main-view-container[data-visualeffects-enhanced=true],
.main-view-container[data-visualeffects-enhanced=true] .main-view-container__scroll-node,
.main-view-container[data-visualeffects-enhanced=true] .main-viewContainer-scrollNode,
.main-view-container[data-visualeffects-enhanced=true] .main-view-container__scroll-node-child {
  background-color: transparent;
}

html[data-fluid-gradient-ready=true] #main,
html[data-fluid-gradient-ready=true] .Root__main-view,
html[data-fluid-gradient-ready=true] .main-view-container,
html[data-fluid-gradient-ready=true] .main-view-container__scroll-node,
html[data-fluid-gradient-ready=true] .main-viewContainer-scrollNode,
html[data-fluid-gradient-ready=true] .main-view-container__scroll-node-child,
html[data-fluid-gradient-ready=true] .Root__nav-bar,
html[data-fluid-gradient-ready=true] nav[aria-label=Main] {
  background-color: transparent !important;
}

html[data-theme-loading=critical]:not([data-fluid-gradient-ready=true]) #main,
html[data-theme-loading=tokens]:not([data-fluid-gradient-ready=true]) #main {
  background-color: var(--spice-main) !important;
}
html[data-theme-loading=critical]:not([data-fluid-gradient-ready=true]) .Root__main-view,
html[data-theme-loading=tokens]:not([data-fluid-gradient-ready=true]) .Root__main-view {
  background-color: var(--spice-main) !important;
}
html[data-theme-loading=critical]:not([data-fluid-gradient-ready=true]) .main-view-container,
html[data-theme-loading=tokens]:not([data-fluid-gradient-ready=true]) .main-view-container {
  background-color: var(--spice-main) !important;
}
html[data-theme-loading=critical]:not([data-fluid-gradient-ready=true]) .main-view-container__scroll-node,
html[data-theme-loading=critical]:not([data-fluid-gradient-ready=true]) .main-viewContainer-scrollNode,
html[data-theme-loading=tokens]:not([data-fluid-gradient-ready=true]) .main-view-container__scroll-node,
html[data-theme-loading=tokens]:not([data-fluid-gradient-ready=true]) .main-viewContainer-scrollNode {
  background-color: var(--spice-main) !important;
}
html[data-theme-loading=critical]:not([data-fluid-gradient-ready=true]) .main-view-container__scroll-node-child,
html[data-theme-loading=tokens]:not([data-fluid-gradient-ready=true]) .main-view-container__scroll-node-child {
  background-color: var(--spice-main) !important;
}
html[data-theme-loading=critical]:not([data-fluid-gradient-ready=true]) .Root__nav-bar,
html[data-theme-loading=critical]:not([data-fluid-gradient-ready=true]) nav[aria-label=Main],
html[data-theme-loading=tokens]:not([data-fluid-gradient-ready=true]) .Root__nav-bar,
html[data-theme-loading=tokens]:not([data-fluid-gradient-ready=true]) nav[aria-label=Main] {
  background-color: var(--spice-sidebar, var(--spice-surface0)) !important;
}

body,
.main-view-container,
.Root__main-view {
  color: var(--spice-text) !important;
}

.main-type-mesto,
.main-cardSubHeader-root,
.main-type-ballad {
  color: var(--spice-subtext) !important;
}

html {
  text-rendering: optimizeLegibility;
  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
/**
 * Design Token System - Catppuccin StarryNight
 *
 * Unified design token source providing structured, namespaced CSS custom properties
 * for the Year 3000 System architecture- All visual systems derive from these tokens-
 *
 * @architecture Year3000System
 * @performance Critical variables bypass CSSVariableBatcher for real-time updates
 * @accessibility All tokens support prefers-reduced-motion and color contrast requirements
 */
@keyframes crystalline-pulse {
  0%, 100% {
    filter: brightness(1) saturate(1.2);
    opacity: 0.8;
  }
  25% {
    filter: brightness(1.05) saturate(1.3);
    opacity: 0.9;
  }
  50% {
    filter: brightness(1.1) saturate(1.4);
    opacity: 1;
  }
  75% {
    filter: brightness(1.05) saturate(1.3);
    opacity: 0.9;
  }
}
@keyframes crystalline-iridescence {
  0% {
    background-position: 0% 50%, 0% 50%;
  }
  25% {
    background-position: 100% 0%, 100% 0%;
  }
  50% {
    background-position: 50% 100%, 50% 100%;
  }
  75% {
    background-position: 0% 50%, 0% 50%;
  }
  100% {
    background-position: 0% 50%, 0% 50%;
  }
}
@keyframes unified-skeleton-shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}
@keyframes unified-gradient-shimmer {
  0%, 100% {
    background-position: -200% center, 200% center;
    opacity: 0.6;
  }
  50% {
    background-position: 200% center, -200% center;
    opacity: 1;
  }
}
@keyframes unified-filter-shimmer {
  0%, 100% {
    filter: brightness(100%) saturate(100%) hue-rotate(0deg);
  }
  25% {
    filter: brightness(120%) saturate(110%) hue-rotate(15deg);
  }
  50% {
    filter: brightness(90%) saturate(105%) hue-rotate(30deg);
  }
  75% {
    filter: brightness(110%) saturate(115%) hue-rotate(45deg);
  }
}
@keyframes unified-pulse-shimmer {
  0%, 100% {
    opacity: var(--pulse-opacity-start, 0.5);
    transform: scale(1);
  }
  50% {
    opacity: var(--pulse-opacity-peak, 0.8);
    transform: scale(var(--pulse-scale-peak, 1.05));
  }
}
@keyframes unified-text-shimmer {
  0%, 100% {
    opacity: var(--text-shimmer-intensity, 0.3);
    text-shadow: 0 0 5px rgba(var(--sn-bg-gradient-accent-rgb), 0.2);
  }
  50% {
    opacity: calc(var(--text-shimmer-intensity, 0.3) * 1.4);
    text-shadow: 0 0 8px rgba(var(--sn-bg-gradient-accent-rgb), 0.4);
  }
}
@keyframes advanced-holographic-shimmer {
  0%, 100% {
    border-radius: 50% 50% 50% 50%/50% 50% 50% 50%;
    filter: brightness(1) saturate(1.2) hue-rotate(0deg);
  }
  25% {
    border-radius: 60% 40% 70% 30%/40% 80% 20% 60%;
    filter: brightness(1.1) saturate(1.3) hue-rotate(30deg);
  }
  50% {
    border-radius: 30% 70% 40% 60%/80% 20% 60% 40%;
    filter: brightness(1.2) saturate(1.4) hue-rotate(60deg);
  }
  75% {
    border-radius: 70% 30% 60% 40%/20% 80% 40% 60%;
    filter: brightness(1.1) saturate(1.3) hue-rotate(90deg);
  }
}
@keyframes advanced-holographic-shimmer-music {
  0%, 100% {
    border-radius: 50% 50% 50% 50%/50% 50% 50% 50%;
    filter: brightness(1) saturate(1.2) hue-rotate(var(--sn-music-rhythm-phase, 0deg));
  }
  25% {
    border-radius: 60% 40% 70% 30%/40% 80% 20% 60%;
    filter: brightness(1.1) saturate(1.3) hue-rotate(calc(var(--sn-music-rhythm-phase, 0deg) + 30deg));
  }
  50% {
    border-radius: 30% 70% 40% 60%/80% 20% 60% 40%;
    filter: brightness(1.2) saturate(1.4) hue-rotate(calc(var(--sn-music-rhythm-phase, 0deg) + 60deg));
  }
  75% {
    border-radius: 70% 30% 60% 40%/20% 80% 40% 60%;
    filter: brightness(1.1) saturate(1.3) hue-rotate(calc(var(--sn-music-rhythm-phase, 0deg) + 90deg));
  }
}
@keyframes advanced-cosmic-depth {
  0% {
    filter: blur(0px) brightness(1) hue-rotate(0deg);
    perspective: 1000px;
  }
  25% {
    filter: blur(1px) brightness(1.2) hue-rotate(15deg);
    perspective: 1200px;
  }
  50% {
    filter: blur(0.5px) brightness(0.8) hue-rotate(30deg);
    perspective: 800px;
  }
  75% {
    filter: blur(1.5px) brightness(1.1) hue-rotate(45deg);
    perspective: 1100px;
  }
  100% {
    filter: blur(0px) brightness(1) hue-rotate(60deg);
    perspective: 1000px;
  }
}
@keyframes advanced-cosmic-depth-music {
  0% {
    filter: blur(0px) brightness(1) hue-rotate(var(--sn-music-rhythm-phase, 0deg));
    perspective: var(--cosmic-perspective, 1000px);
  }
  25% {
    filter: blur(1px) brightness(1.2) hue-rotate(calc(var(--sn-music-rhythm-phase, 0deg) + 15deg));
    perspective: calc(var(--cosmic-perspective, 1000px) * 1.2);
  }
  50% {
    filter: blur(0.5px) brightness(0.8) hue-rotate(calc(var(--sn-music-rhythm-phase, 0deg) + 30deg));
    perspective: calc(var(--cosmic-perspective, 1000px) * 0.8);
  }
  75% {
    filter: blur(1.5px) brightness(1.1) hue-rotate(calc(var(--sn-music-rhythm-phase, 0deg) + 45deg));
    perspective: calc(var(--cosmic-perspective, 1000px) * 1.1);
  }
  100% {
    filter: blur(0px) brightness(1) hue-rotate(calc(var(--sn-music-rhythm-phase, 0deg) + 60deg));
    perspective: var(--cosmic-perspective, 1000px);
  }
}
@keyframes advanced-fluid-organic {
  0%, 100% {
    border-radius: 45% 55% 50% 50%/50% 45% 55% 50%;
    transform: rotate(0deg) scale(1);
    filter: brightness(1) saturate(1.1);
  }
  33% {
    border-radius: 55% 45% 60% 40%/40% 60% 45% 55%;
    transform: rotate(120deg) scale(1.05);
    filter: brightness(1.1) saturate(1.2);
  }
  66% {
    border-radius: 40% 60% 45% 55%/55% 40% 60% 45%;
    transform: rotate(240deg) scale(0.95);
    filter: brightness(0.9) saturate(1.15);
  }
}
@keyframes advanced-particle-field {
  0%, 100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
  25% {
    transform: scale(1.1) rotate(90deg);
    opacity: 0.8;
  }
  50% {
    transform: scale(0.8) rotate(180deg);
    opacity: 1;
  }
  75% {
    transform: scale(1.05) rotate(270deg);
    opacity: 0.9;
  }
}
@keyframes magnetic-invitation-pulse {
  0%, 100% {
    transform: translateZ(0px) scale(1);
  }
  50% {
    transform: translateZ(4px) scale(1.01);
  }
}
:root {
  --sn-rotation-disable: 0; /* Set to 1 to disable all rotations for stable UI */
  --sn-rotation-multiplier: calc(1 - var(--sn-rotation-disable, 0)); /* Multiplier for rotation values */
  --sn-animation-intensity: 1; /* 0 = minimal, 1 = full effects */
  --sn-animation-reduce: 0; /* Set to 1 to reduce all animations */
  --sn-bg-webgl-ready: 0;
  --sn-bg-webgpu-ready: 0;
  --sn-bg-active-backend: "css";
  --sn-bg-gradient-primary-rgb: var(--sn-dynamic-accent-rgb);
  --sn-bg-gradient-secondary-rgb: var(--sn-cosmic-secondary-rgb);
  --sn-bg-gradient-accent-rgb: var(--sn-dynamic-accent-rgb);
  --sn-brightness-mode: "dark";
  --sn-brightness-current-saturation: 1.1;
  --sn-brightness-current-brightness: 1.0;
  --sn-brightness-current-contrast: 1.0;
  --sn-brightness-current-opacity: 0.15;
  --sn-brightness-bright-saturation: 1.6;
  --sn-brightness-bright-brightness: 1.3;
  --sn-brightness-bright-contrast: 1.4;
  --sn-brightness-bright-opacity: 0.28;
  --sn-brightness-balanced-saturation: 1.2;
  --sn-brightness-balanced-brightness: 1.1;
  --sn-brightness-balanced-contrast: 1.1;
  --sn-brightness-balanced-opacity: 0.20;
  --sn-brightness-dark-saturation: 1.1;
  --sn-brightness-dark-brightness: 1.0;
  --sn-brightness-dark-contrast: 1.0;
  --sn-brightness-dark-opacity: 0.15;
  --sn-music-beat-pulse-intensity: 0;
  --sn-music-rhythm-phase: 0deg;
  --sn-music-breathing-scale: 1.0;
  --sn-music-spectrum-phase: 0deg;
  --sn-music-energy-level: 0.5;
  --sn-music-valence: 0.5;
  --sn-music-tempo-bpm: 120;
  --sn-music-intensity-boost: 1.0;
  --sn-music-sync-enabled: 1;
  --sn-music-feed-bloom-intensity: 0;
  --sn-music-energy-modulation: 1.0;
  --sn-bg-beat-pulse-intensity: var(--sn-music-beat-color-pulse, 0);
  --sn-bg-beat-pulse-scale: calc(1 + var(--sn-music-beat-pulse-intensity, 0) * 0.1);
  --sn-bg-beat-color-shift: calc(var(--sn-music-beat-color-phase, 0) * 10deg);
  --sn-bg-beat-pulse: var(--sn-bg-beat-pulse-intensity);
  --sn-anim-motion-scale: 1;
  --sn-anim-easing-emergence: cubic-bezier(0.23, 1, 0.32, 1);
  --sn-anim-easing-organic: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --sn-anim-easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --sn-anim-easing-bounce-playful: cubic-bezier(0.1, 0.7, 0.5, 1.3);
  --sn-anim-easing-bounce-smooth: cubic-bezier(0.175, 0.885, 0.32, 1.4);
  --sn-anim-easing-bounce-medium: cubic-bezier(0.175, 0.885, 0.32, 1.375);
  --sn-anim-easing-bounce-strong: cubic-bezier(0.175, 0.885, 0.32, 1.5);
  --sn-anim-easing-dynamic: cubic-bezier(0.4, 0, 0.2, 1);
  --sn-easing-explorer: var(--sn-anim-easing-dynamic);
  --sn-transition-fast-duration: 150ms;
  --sn-transition-standard-duration: 300ms;
  --sn-transition-slow-duration: 500ms;
  --sn-transition-extended-duration: 800ms;
  --sn-anim-transition-cosmic: 1200ms;
  --sn-transition-timing-default: var(--sn-anim-easing-dynamic);
  --sn-transition-fast: var(--sn-transition-fast-duration) var(--sn-transition-timing-default);
  --sn-transition-standard: var(--sn-transition-standard-duration) var(--sn-transition-timing-default);
  --sn-transition-slow: var(--sn-transition-slow-duration) var(--sn-transition-timing-default);
  --sn-anim-motion-intelligence-level: 3;
  --sn-anim-motion-reduced: 0;
  --sn-perf-webgl-context-ready: 0;
  --sn-perf-webgpu-context-ready: 0;
  --sn-perf-fps-target: 60;
  --sn-perf-quality-particles: 1.0;
  --sn-perf-quality-shadows: 1.0;
  --sn-perf-quality-blur: 1.0;
  --sn-ui-glass-pulse-enabled: 1;
  --sn-echo-radius-multiplier: 1.0;
  --sn-echo-hue-shift: 0deg;
  --sn-echo-offset-x: 0px;
  --sn-echo-offset-y: 0px;
  --sn-echo-skew: 0deg;
  --sn-echo-rotate: 0deg;
  --sn-ui-sidebar-visual-effects-opacity: 0.8;
  --sn-ui-sidebar-visual-effects-deep-rgb: 17, 17, 27;
  --sn-ui-button-accent-hex: var(--sn-accent-hex);
  --sn-ui-button-accent-rgb: var(--sn-accent-rgb);
  --sn-ui-button-cosmic-glow: 0;
  --sn-ui-button-energy-brightness: 1.0;
  --sn-ui-button-hologram-opacity: 0;
  --sn-text-glow-intensity: 0;
  --sn-text-gradient-angle: 45deg;
  --sn-text-energy-brightness: 1.0;
  --sn-text-rhythm-hue: 0deg;
  --sn-text-cosmic-blur: 0px;
  --sn-text-harmonic-saturation: 1.0;
  --sn-ix-feedback-subtle: 0.2;
  --sn-ix-feedback-moderate: 0.5;
  --sn-ix-feedback-prominent: 0.8;
  --sn-ix-ripple-intensity: 0.6;
  --sn-ix-ripple-duration: 600ms;
  --sn-ix-ripple-color-rgb: var(--sn-bg-gradient-accent-rgb);
  --sn-ix-magnetic-hover-pull: 1.05;
  --sn-ix-magnetic-focus-pull: 1.1;
  --sn-ix-magnetic-active-pull: 0.95;
  --sn-ix-echo-past-opacity: 0.3;
  --sn-ix-echo-present-opacity: 1.0;
  --sn-ix-echo-future-opacity: 0.1;
  --sn-cosmic-base-hex: #1e1e2e;
  --sn-cosmic-base-rgb: 30, 30, 46;
  --sn-cosmic-surface-hex: #313244;
  --sn-cosmic-surface-rgb: 49, 50, 68;
  --sn-cosmic-accent-hex: #cba6f7;
  --sn-cosmic-accent-rgb: 203, 166, 247;
  --sn-cosmic-secondary-hex: #45475a;
  --sn-cosmic-secondary-rgb: 69, 71, 90;
  --sn-cosmic-text-hex: #cdd6f4;
  --sn-cosmic-text-rgb: 205, 214, 244;
  --sn-dynamic-accent-hex: var(--sn-cosmic-accent-hex);
  --sn-dynamic-accent-rgb: var(--sn-cosmic-accent-rgb);
  --sn-dynamic-primary-hex: var(--sn-cosmic-accent-hex);
  --sn-dynamic-primary-rgb: var(--sn-cosmic-accent-rgb);
  --sn-dynamic-secondary-hex: var(--sn-cosmic-secondary-hex);
  --sn-dynamic-secondary-rgb: var(--sn-cosmic-secondary-rgb);
  --sn-color-accent-hex: var(--sn-dynamic-accent-hex);
  --sn-color-accent-rgb: var(--sn-dynamic-accent-rgb);
  --sn-color-primary-hex: var(--sn-dynamic-primary-hex);
  --sn-color-primary-rgb: var(--sn-dynamic-primary-rgb);
  --sn-color-base-hex: var(--sn-cosmic-base-hex);
  --sn-color-base-rgb: var(--sn-cosmic-base-rgb);
  --sn-oklab-primary-rgb: var(--sn-cosmic-accent-rgb);
  --sn-oklab-accent-rgb: var(--sn-cosmic-accent-rgb);
  --sn-oklab-highlight-rgb: var(--sn-cosmic-accent-rgb);
  --sn-oklab-shadow-rgb: var(--sn-cosmic-base-rgb);
  --sn-oklab-base-luminance: 0.08;
  --sn-oklab-accent-luminance: 0.45;
  --sn-oklab-default-chroma: 0.15;
  --sn-oklab-default-hue: 280;
  --sn-musical-oklab-primary-rgb: var(--sn-oklab-primary-rgb);
  --sn-musical-oklab-accent-rgb: var(--sn-oklab-accent-rgb);
  --sn-musical-oklab-highlight-rgb: var(--sn-oklab-highlight-rgb);
  --sn-musical-oklab-shadow-rgb: var(--sn-oklab-shadow-rgb);
  --oklab-blue: var(--sn-blue);
  --oklab-blue-rgb: var(--sn-blue-rgb);
  --oklab-mauve: var(--sn-mauve);
  --oklab-mauve-rgb: var(--sn-mauve-rgb);
  --oklab-pink: var(--sn-pink);
  --oklab-pink-rgb: var(--sn-pink-rgb);
  --oklab-base: var(--sn-base);
  --oklab-base-rgb: var(--sn-base-rgb);
  --oklab-text: var(--sn-text);
  --oklab-text-rgb: var(--sn-text-rgb);
  --oklab-mantle: var(--sn-mantle);
  --oklab-mantle-rgb: var(--sn-mantle-rgb);
  --oklab-crust: var(--sn-crust);
  --oklab-crust-rgb: var(--sn-crust-rgb);
  --oklab-overlay0: var(--sn-overlay0);
  --oklab-overlay0-rgb: var(--sn-overlay0-rgb);
  --oklab-teal: var(--sn-teal);
  --oklab-teal-rgb: var(--sn-teal-rgb);
  --oklab-sapphire: var(--sn-sapphire);
  --oklab-sapphire-rgb: var(--sn-sapphire-rgb);
  --oklab-lavender: var(--sn-lavender);
  --oklab-lavender-rgb: var(--sn-lavender-rgb);
  --oklab-surface1: var(--sn-surface1);
  --oklab-surface1-rgb: var(--sn-surface1-rgb);
  --oklab-overlay1: var(--sn-overlay1);
  --oklab-overlay1-rgb: var(--sn-overlay1-rgb);
  --oklab-red: var(--sn-red);
  --oklab-red-rgb: var(--sn-red-rgb);
  --oklab-yellow: var(--sn-yellow);
  --oklab-yellow-rgb: var(--sn-yellow-rgb);
  --oklab-green: var(--sn-green);
  --oklab-green-rgb: var(--sn-green-rgb);
  --ui-accent-base: var(--oklab-blue);
  --ui-accent-base-rgb: var(--oklab-blue-rgb);
  --ui-accent-secondary: var(--oklab-mauve);
  --ui-accent-secondary-rgb: var(--oklab-mauve-rgb);
  --ui-accent-tertiary: var(--oklab-pink);
  --ui-accent-tertiary-rgb: var(--oklab-pink-rgb);
  --ui-light-source: var(--oklab-yellow);
  --ui-light-source-rgb: var(--oklab-yellow-rgb);
  --ui-light-ambient: var(--oklab-lavender);
  --ui-light-ambient-rgb: var(--oklab-lavender-rgb);
  --ui-structural-base: var(--oklab-mauve);
  --ui-structural-base-rgb: var(--oklab-mauve-rgb);
  --ui-structural-emphasis: var(--oklab-pink);
  --ui-structural-emphasis-rgb: var(--oklab-pink-rgb);
  --ui-depth-soft: var(--oklab-overlay0);
  --ui-depth-soft-rgb: var(--oklab-overlay0-rgb);
  --ui-depth-moderate: var(--oklab-mantle);
  --ui-depth-moderate-rgb: var(--oklab-mantle-rgb);
  --ui-depth-strong: var(--oklab-crust);
  --ui-depth-strong-rgb: var(--oklab-crust-rgb);
  --ui-atmosphere-cool: var(--oklab-teal);
  --ui-atmosphere-cool-rgb: var(--oklab-teal-rgb);
  --ui-atmosphere-neutral: var(--oklab-sapphire);
  --ui-atmosphere-neutral-rgb: var(--oklab-sapphire-rgb);
  --ui-atmosphere-warm: var(--oklab-lavender);
  --ui-atmosphere-warm-rgb: var(--oklab-lavender-rgb);
  --global-light-temperature: 0.8;
  --global-shadow-temperature: 0.3;
  --global-light-intensity: 0.5;
  --global-shadow-intensity: 0.4;
  --global-atmosphere-density: 0.3;
  --global-atmosphere-color: var(--oklab-teal);
  --music-light-boost: 1.0;
  --music-shadow-boost: 1.0;
  --music-temperature-shift: 0deg;
  --sn-musical-oklab-accent-rgb: var(--oklab-blue-rgb);
  --sn-musical-oklab-primary-rgb: var(--oklab-mauve-rgb);
  --sn-musical-oklab-highlight-rgb: var(--oklab-pink-rgb);
  --sn-musical-oklab-shadow-rgb: var(--oklab-mantle-rgb);
  --sn-musical-oklab-secondary-rgb: var(--oklab-base-rgb);
  --sn-genre-electronic-oklab-chroma-boost: 1.6;
  --sn-genre-electronic-oklab-lightness-boost: 1.2;
  --sn-genre-classical-oklab-chroma-boost: 1.1;
  --sn-genre-classical-oklab-lightness-boost: 1.05;
  --sn-genre-rock-oklab-chroma-boost: 1.4;
  --sn-genre-rock-oklab-lightness-boost: 1.1;
  --genre-primary-hue-min: 0;
  --genre-primary-hue-max: 360;
  --genre-saturation-base: 1.0;
  --genre-saturation-variation: 0.2;
  --genre-brightness-base: 1.0;
  --genre-brightness-variation: 0.1;
  --sn-color-visual-effects-deep-rgb: var(--sn-cosmic-base-rgb);
  --sn-color-visual-effects-surface-rgb: var(--sn-cosmic-surface-rgb);
  --sn-color-visual-effects-glow-rgb: var(--sn-color-accent-rgb);
  --sn-layout-z-background: -11;
  --sn-layout-z-nebula: -10;
  --sn-layout-z-particles: -9;
  --sn-layout-z-content: 0;
  --sn-layout-z-ui: 10;
  --sn-layout-z-modal: 100;
  --sn-layout-space-xs: 0.25rem;
  --sn-layout-space-sm: 0.5rem;
  --sn-layout-space-md: 1rem;
  --sn-layout-space-lg: 1.5rem;
  --sn-layout-space-xl: 2rem;
  --sn-layout-space-2xl: 3rem;
  --sn-layout-radius-sm: 4px;
  --sn-layout-radius-md: 8px;
  --sn-layout-radius-lg: 12px;
  --sn-layout-radius-xl: 16px;
  --sn-layout-radius-full: 9999px;
  --sn-visual-effects-magnetic-hover-pull: 12px;
  --sn-visual-effects-magnetic-focus-pull: 18px;
  --sn-visual-effects-magnetic-interest-pull: 8px;
  --sn-visual-effects-magnetic-transition-speed: 0.6s;
  --sn-visual-effects-magnetic-max-rotation: 2deg;
  --sn-visual-effects-text-clarity: 1;
  --sn-visual-effects-contrast-boost: 1.05;
  --sn-visual-effects-field-intensity: 0.4;
  --sn-visual-effects-animation-rate: 12s;
  --sn-visual-effects-response-sensitivity: 0.8;
  --sn-visual-effects-performance-mode: 1;
  --sn-visual-effects-accessibility-scale: 1;
  --sn-visual-effects-mobile-reduction: 0.6;
  --sn-visual-effects-advanced-mode: 1;
  --sn-visual-effects-subdivision-mode: 1;
  --visual-effects-css-fallback: 1.0;
  --visual-effects-webgl-coordination: 0;
  --sn-theme-ethereal-soft-rgb: var(--spice-rgb-mauve);
  --sn-theme-ethereal-mystical-rgb: var(--spice-rgb-teal);
  --sn-theme-ethereal-dreamy-rgb: var(--spice-rgb-rosewater);
  --sn-theme-ethereal-emotional-rgb: var(--spice-rgb-yellow);
  --sn-theme-ethereal-highlight-rgb: var(--spice-rgb-lavender);
  --sn-theme-natural-earthy-rgb: var(--spice-rgb-green);
  --sn-theme-natural-forest-rgb: var(--spice-rgb-green);
  --sn-theme-natural-sky-rgb: var(--spice-rgb-sky);
  --sn-theme-natural-sunset-rgb: var(--spice-rgb-peach);
  --sn-theme-natural-stone-rgb: var(--spice-rgb-overlay0);
  --sn-theme-cinematic-red-rgb: var(--spice-rgb-red);
  --sn-theme-cinematic-amber-rgb: var(--spice-rgb-peach);
  --sn-theme-cinematic-blue-rgb: var(--spice-rgb-blue);
  --sn-theme-cinematic-cyan-rgb: var(--spice-rgb-teal);
  --sn-anim-breathing-energetic: 2000ms;
  --sn-anim-breathing-cosmic: 6000ms;
  --sn-anim-breathing-effects: var(--sn-anim-transition-cosmic, 1200ms);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --sn-music-beat-pulse-intensity: 0 !important;
    --sn-music-rhythm-phase: 0deg !important;
    --sn-music-breathing-scale: 1.0 !important;
    --sn-anim-motion-reduced: 1;
    --sn-transition-fast-duration: 0ms;
    --sn-transition-standard-duration: 0ms;
    --sn-transition-slow-duration: 0ms;
    --sn-transition-extended-duration: 0ms;
    --sn-anim-transition-cosmic: 0ms;
    --sn-bg-particle-density: 0;
    --sn-perf-quality-particles: 0;
    --sn-visual-effects-magnetic-hover-pull: 4px;
    --sn-visual-effects-magnetic-focus-pull: 6px;
    --sn-visual-effects-magnetic-transition-speed: 1.2s;
    --sn-visual-effects-animation-rate: 30s;
    --sn-visual-effects-field-intensity: 0.2;
  }
}
@media (prefers-contrast: high) {
  :root {
    --sn-ui-glass-opacity: 0.3;
    --sn-text-glow-intensity: 0;
    --sn-bg-gradient-contrast: 1.5;
    --sn-color-visual-effects-surface-rgb: 45, 45, 69;
  }
}
:root {
  --spicetify-base: var(--spice-base, var(--sn-cosmic-base-hex));
  --spicetify-surface: var(--spice-surface1, var(--sn-cosmic-surface-hex));
  --spicetify-accent: var(--spice-accent, var(--sn-cosmic-accent-hex));
  --spicetify-text: var(--spice-text, var(--sn-cosmic-text-hex));
  --catppuccin-base: #1e1e2e;
  --catppuccin-mantle: #181825;
  --catppuccin-crust: #11111b;
  --catppuccin-surface0: #313244;
  --catppuccin-surface1: #45475a;
  --catppuccin-surface2: #585b70;
  --catppuccin-text: #cdd6f4;
}

:root[data-sn-brightness=bright],
:root[data-brightness-mode=bright],
html[style*='--sn-brightness-mode: "bright"'] {
  --sn-bg-gradient-saturation: var(--sn-brightness-current-saturation);
  --sn-bg-gradient-brightness: var(--sn-brightness-current-brightness);
  --sn-bg-gradient-contrast: var(--sn-brightness-current-contrast);
  --sn-bg-gradient-opacity: var(--sn-brightness-current-opacity);
}

:root[data-sn-brightness=balanced],
:root[data-brightness-mode=balanced],
html[style*='--sn-brightness-mode: "balanced"'] {
  --sn-bg-gradient-saturation: var(--sn-brightness-current-saturation);
  --sn-bg-gradient-brightness: var(--sn-brightness-current-brightness);
  --sn-bg-gradient-contrast: var(--sn-brightness-current-contrast);
  --sn-bg-gradient-opacity: var(--sn-brightness-current-opacity);
}

:root[data-sn-brightness=dark],
:root[data-brightness-mode=dark],
html[style*='--sn-brightness-mode: "dark"'] {
  --sn-bg-gradient-saturation: var(--sn-brightness-current-saturation);
  --sn-bg-gradient-brightness: var(--sn-brightness-current-brightness);
  --sn-bg-gradient-contrast: var(--sn-brightness-current-contrast);
  --sn-bg-gradient-opacity: var(--sn-brightness-current-opacity);
}

@media (max-width: 768px) {
  :root {
    --sn-visual-effects-magnetic-hover-pull: calc(12px * var(--sn-visual-effects-mobile-reduction));
    --sn-visual-effects-magnetic-focus-pull: calc(18px * var(--sn-visual-effects-mobile-reduction));
    --sn-visual-effects-field-intensity: calc(0.4 * var(--sn-visual-effects-mobile-reduction));
  }
}
@media (prefers-contrast: high) {
  :root {
    --sn-visual-effects-contrast-boost: 1.15;
    --sn-visual-effects-field-intensity: 0.6;
  }
}
/* Comprehensive reduced motion support - disables all problematic animations */
@media (prefers-reduced-motion: reduce) {
  :root {
    --sn-rotation-disable: 1 !important;
    --sn-rotation-multiplier: 0 !important;
    --sn-animation-intensity: 0.3 !important;
    --sn-animation-reduce: 1 !important;
    --sn-visual-effects-field-intensity: 0.1 !important;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/* Utility classes for manual motion control */
.sn-no-rotation,
.sn-stable-ui {
  --sn-rotation-disable: 1 !important;
  --sn-rotation-multiplier: 0 !important;
}

.sn-minimal-animation {
  --sn-animation-intensity: 0.2 !important;
  --sn-animation-reduce: 1 !important;
}

.sn-full-effects {
  --sn-rotation-disable: 0 !important;
  --sn-rotation-multiplier: 1 !important;
  --sn-animation-intensity: 1 !important;
  --sn-animation-reduce: 0 !important;
}

/**
 * Bright Mode - Vibrant, high energy appearance
 * Opt-in via: document.documentElement.setAttribute('data-brightness-mode', 'bright')
 */
:root[data-brightness-mode=bright] {
  --sn-brightness-current-saturation: var(--sn-brightness-bright-saturation);
  --sn-brightness-current-brightness: var(--sn-brightness-bright-brightness);
  --sn-brightness-current-contrast: var(--sn-brightness-bright-contrast);
  --sn-brightness-current-opacity: var(--sn-brightness-bright-opacity);
}

/**
 * Balanced Mode - Moderate, harmonious appearance
 * Opt-in via: document.documentElement.setAttribute('data-brightness-mode', 'balanced')
 */
:root[data-brightness-mode=balanced] {
  --sn-brightness-current-saturation: var(--sn-brightness-balanced-saturation);
  --sn-brightness-current-brightness: var(--sn-brightness-balanced-brightness);
  --sn-brightness-current-contrast: var(--sn-brightness-balanced-contrast);
  --sn-brightness-current-opacity: var(--sn-brightness-balanced-opacity);
}

/**
 * Dark Mode - Subtle, refined appearance (DEFAULT)
 * No attribute needed - this is the default state
 * Explicit setting via: document.documentElement.setAttribute('data-brightness-mode', 'dark')
 */
:root[data-brightness-mode=dark] {
  --sn-brightness-current-saturation: var(--sn-brightness-dark-saturation);
  --sn-brightness-current-brightness: var(--sn-brightness-dark-brightness);
  --sn-brightness-current-contrast: var(--sn-brightness-dark-contrast);
  --sn-brightness-current-opacity: var(--sn-brightness-dark-opacity);
}

:root {
  --ui-accent-lit: #b5d4ff;
  --ui-accent-lit-rgb: 181, 212, 255;
  --ui-accent-shadowed: #6789c8;
  --ui-accent-shadowed-rgb: 103, 137, 200;
  --ui-accent-reflected: #7a9ddb;
  --ui-accent-reflected-rgb: 122, 157, 219;
  --ui-structural-lit: #e5d9ff;
  --ui-structural-lit-rgb: 229, 217, 255;
  --ui-structural-shadowed: #9b86c5;
  --ui-structural-shadowed-rgb: 155, 134, 197;
  --ui-structural-reflected: #b29ddb;
  --ui-structural-reflected-rgb: 178, 157, 219;
  --ui-emphasis-lit: #ffdff5;
  --ui-emphasis-lit-rgb: 255, 223, 245;
  --ui-emphasis-shadowed: #d199c8;
  --ui-emphasis-shadowed-rgb: 209, 153, 200;
  --ui-emphasis-reflected: #e8b3db;
  --ui-emphasis-reflected-rgb: 232, 179, 219;
  --ui-light-source-pure: #fffef5;
  --ui-light-source-pure-rgb: 255, 254, 245;
  --ui-light-source-warm: #fff5d9;
  --ui-light-source-warm-rgb: 255, 245, 217;
}

@supports (color: oklch(from red l c h)) {
  :root {
    --ui-accent-lit: oklch(
      from var(--ui-accent-base)
      calc(l + 0.15)
      calc(c * 1.2)
      calc(h - 5deg)
    );
    --ui-accent-shadowed: oklch(
      from var(--ui-accent-base)
      calc(l - 0.15)
      calc(c * 0.8)
      calc(h + 10deg)
    );
    --ui-accent-reflected: oklch(
      from var(--ui-accent-base)
      calc(l - 0.08)
      calc(c * 0.9)
      calc(h + 15deg)
    );
    --ui-structural-lit: oklch(
      from var(--ui-structural-base)
      calc(l + 0.12) calc(c * 1.15) calc(h - 8deg)
    );
    --ui-structural-shadowed: oklch(
      from var(--ui-structural-base)
      calc(l - 0.18) calc(c * 0.75) calc(h + 12deg)
    );
    --ui-structural-reflected: oklch(
      from var(--ui-structural-base)
      calc(l - 0.10) calc(c * 0.85) calc(h + 8deg)
    );
    --ui-emphasis-lit: oklch(
      from var(--ui-accent-tertiary)
      calc(l + 0.18) calc(c * 1.25) calc(h - 10deg)
    );
    --ui-emphasis-shadowed: oklch(
      from var(--ui-accent-tertiary)
      calc(l - 0.12) calc(c * 0.85) calc(h + 8deg)
    );
    --ui-emphasis-reflected: oklch(
      from var(--ui-accent-tertiary)
      calc(l - 0.08) calc(c * 0.90) calc(h + 12deg)
    );
    --ui-light-source-pure: oklch(
      from var(--ui-light-source)
      calc(l + 0.25) calc(c * 0.5) h
    );
    --ui-light-source-warm: oklch(
      from var(--ui-light-source)
      calc(l + 0.12) calc(c * 0.8) h
    );
  }
}
.sn-gpu-accelerated, aside[data-testid=now-playing-bar],
.Root__now-playing-bar, .main-actionBar-ActionBarRow,
[class*=actionBar-ActionBarRow],
[data-testid*=action-bar], div.main-trackList-trackListRow[role=row], .main-card-card,
.main-card-cardContainer {
  will-change: transform, opacity, filter;
  transform: translateZ(0);
  backface-visibility: hidden;
  contain: layout style paint;
  perspective: 1000px;
}

/* Mixin to contain animations to prevent UI shake propagation */
/* Mixin for stable UI elements (no rotation/shake) */
/* Mixin for background effects that should not affect UI stability */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .sn-stars-container,
  .shootingstar {
    display: none !important;
  }
  .sn-bloom-active,
  .sn-refract-active,
  .sn-oscillate-active,
  .sn-harmonize-fundamental,
  .sn-harmonize-sub,
  .sn-harmonize-flow,
  .sn-temporal-echo,
  .sn-gravity-active,
  .sn-future-preview,
  .year3000-kinetic-canvas {
    animation: none !important;
  }
  .sn-bloom-active {
    transform: scale(1.02);
    filter: drop-shadow(0 0 4px rgba(var(--sn-bloom-glow-color, 140, 170, 238), 0.3));
  }
  .sn-refract-active {
    filter: brightness(1.05);
  }
}
:root {
  --sn-beat-pulse: 0;
  --sn-kinetic-energy: 0;
  --sn-music-beat-pulse-intensity: 0;
  --sn-music-rhythm-phase: 0;
  --micro-fast: calc(0.15s * (1 - (var(--sn-music-beat-pulse-intensity, 0) * 0.3)));
  --micro-medium: calc(0.3s * (1 - (var(--sn-music-beat-pulse-intensity, 0) * 0.2)));
  --micro-slow: calc(0.6s * (1 - (var(--sn-music-beat-pulse-intensity, 0) * 0.1)));
  --ripple-color: var(--sn-color-accent-hex);
  --ripple-duration: calc(
    var(--sn-bg-gradient-transition, 0.8s) * (1 - (var(--sn-music-beat-pulse-intensity, 0) * 0.3))
  );
  --ripple-intensity: calc(0.3 + (var(--sn-music-beat-pulse-intensity, 0) * 0.4));
  --ripple-max-scale: 3;
  --ripple-opacity: 0.3;
  --focus-glow-intensity: 0.4;
  --focus-flow-duration: 300ms;
  --focus-ring-thickness: 2px;
  --focus-ring-color: rgba(var(--sn-bg-gradient-accent-rgb), var(--focus-glow-intensity));
  --hover-lift-distance: 2px;
  --hover-glow-intensity: 0.2;
  --hover-transition-speed: 200ms;
  --hover-scale-factor: 1.02;
  --feedback-subtle: calc(0.1 + (var(--sn-music-beat-pulse-intensity, 0) * 0.05));
  --feedback-moderate: calc(0.2 + (var(--sn-music-beat-pulse-intensity, 0) * 0.1));
  --feedback-prominent: calc(0.3 + (var(--sn-music-beat-pulse-intensity, 0) * 0.2));
  --interaction-beat-sync: calc(var(--sn-music-beat-pulse-intensity, 0) * 0.5);
  --interaction-energy-boost: calc(var(--sn-music-energy, 0) * 0.3);
  --interaction-feedback-delay: calc(
    0.1s * (1 - (var(--sn-music-beat-pulse-intensity, 0) * 0.5))
  );
  --sn-echo-offset-x: 0px;
  --sn-echo-offset-y: 0px;
  --sn-echo-skew: 0deg;
  --sn-echo-radius-multiplier: 1;
  --sn-echo-hue-shift: 0deg;
  --sn-echo-decay-curve: var(--sn-easing-emergence, var(--sn-anim-easing-organic));
  --sn-echo-duration: 800ms;
}

@keyframes sn-beat-scale {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  35% {
    transform: scale(1.03);
    opacity: 0.98;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes sn-beat-pulse-subtle {
  0% {
    opacity: 1;
    filter: brightness(1);
  }
  50% {
    opacity: 0.95;
    filter: brightness(1.05);
  }
  100% {
    opacity: 1;
    filter: brightness(1);
  }
}
@keyframes musical-interaction-boost {
  0%, 100% {
    filter: brightness(1) saturate(1);
  }
  50% {
    filter: brightness(calc(1 + var(--interaction-energy-boost))) saturate(calc(1 + var(--interaction-beat-sync)));
  }
}
@keyframes css-interaction-ripple {
  0%, 100% {
    transform: scale(1);
    opacity: 0;
  }
}
@keyframes focus-flow-pulse {
  0%, 100% {
    box-shadow: 0 0 0 var(--focus-ring-thickness) var(--focus-ring-color), 0 0 10px var(--focus-ring-color);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0 calc(var(--focus-ring-thickness) * 1.5) var(--focus-ring-color), 0 0 20px var(--focus-ring-color);
    transform: scale(1.01);
  }
}
@keyframes simple-gradient-flow {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 200% 50%;
  }
}
@keyframes year3000-echo-core {
  0% {
    opacity: 0.32;
    transform: translate(var(--sn-echo-offset-x), var(--sn-echo-offset-y)) skew(var(--sn-echo-skew)) scale(calc(0.8 * var(--sn-echo-radius-multiplier)));
    filter: blur(1px) hue-rotate(var(--sn-echo-hue-shift));
  }
  100% {
    opacity: 0.2;
    transform: translate(var(--sn-echo-offset-x), var(--sn-echo-offset-y)) skew(var(--sn-echo-skew)) scale(calc(1.4 * var(--sn-echo-radius-multiplier)));
    filter: blur(4px) hue-rotate(var(--sn-echo-hue-shift));
  }
}
.sn-beat-responsive {
  --_sn-pulse-intensity: var(--sn-beat-pulse, 0);
  animation: sn-beat-scale 300ms var(--sn-anim-easing-standard) forwards;
  animation-play-state: var(--_sn-pulse-intensity, paused);
}
@media (prefers-reduced-motion: reduce) {
  .sn-beat-responsive {
    animation: none;
    transform: none !important;
  }
}

.sn-beat-responsive--subtle {
  --_sn-pulse-intensity: var(--sn-beat-pulse, 0);
  animation: sn-beat-pulse-subtle 250ms var(--sn-anim-easing-standard) forwards;
  animation-play-state: var(--_sn-pulse-intensity, paused);
}
@media (prefers-reduced-motion: reduce) {
  .sn-beat-responsive--subtle {
    animation: none;
    filter: none !important;
  }
}

.sn-beat-responsive--custom {
  transform: scale(calc(1 + var(--sn-kinetic-energy, 0) * 0.03));
  opacity: calc(1 - var(--sn-kinetic-energy, 0) * 0.02);
  transition: transform 100ms var(--sn-anim-easing-standard), opacity 100ms var(--sn-anim-easing-standard);
}
@media (prefers-reduced-motion: reduce) {
  .sn-beat-responsive--custom {
    transform: scale(1) !important;
    opacity: 1 !important;
    transition: none;
  }
}

.sn-beat-glow {
  --_sn-glow-intensity: calc(var(--sn-kinetic-energy, 0) * 0.3);
  box-shadow: 0 0 calc(var(--_sn-glow-intensity) * 20px) rgba(var(--sn-accent-rgb, 140, 170, 238), var(--_sn-glow-intensity));
  transition: box-shadow 150ms var(--sn-anim-easing-standard);
}
@media (prefers-reduced-motion: reduce) {
  .sn-beat-glow {
    box-shadow: none !important;
    transition: none;
  }
}

.sn-temporal-echo, body:not([data-bloom=off]) div.main-rootlist-wrapper[role=presentation] div.main-trackList-trackListRow[role=row]:hover::after,
body:not([data-bloom=off]) div.main-rootlist-wrapper div.main-trackList-trackListRow[role=row]:hover::after, body:not([data-bloom=off]) div.main-rootlist-wrapper[role=presentation] div.main-trackList-trackListRow[role=row][aria-selected=true]::after, body:not([data-bloom=off]) div.main-rootlist-wrapper[role=presentation] div.main-trackList-trackListRow[role=row]:has(.main-trackList-playingIcon)::after,
body:not([data-bloom=off]) div.main-rootlist-wrapper div.main-trackList-trackListRow[role=row][aria-selected=true]::after,
body:not([data-bloom=off]) div.main-rootlist-wrapper div.main-trackList-trackListRow[role=row]:has(.main-trackList-playingIcon)::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  pointer-events: none;
  border-radius: inherit;
  transform-origin: center;
  z-index: 0;
  animation: year3000-echo-core var(--sn-echo-duration) var(--sn-echo-decay-curve) forwards;
}
.sn-temporal-echo::before, .sn-temporal-echo::after, body:not([data-bloom=off]) div.main-rootlist-wrapper[role=presentation] div.main-trackList-trackListRow[role=row]:hover::after,
body:not([data-bloom=off]) div.main-rootlist-wrapper div.main-trackList-trackListRow[role=row]:hover::after, body:not([data-bloom=off]) div.main-rootlist-wrapper[role=presentation] div.main-trackList-trackListRow[role=row][aria-selected=true]::after, body:not([data-bloom=off]) div.main-rootlist-wrapper[role=presentation] div.main-trackList-trackListRow[role=row]:has(.main-trackList-playingIcon)::after,
body:not([data-bloom=off]) div.main-rootlist-wrapper div.main-trackList-trackListRow[role=row][aria-selected=true]::after,
body:not([data-bloom=off]) div.main-rootlist-wrapper div.main-trackList-trackListRow[role=row]:has(.main-trackList-playingIcon)::after {
  content: none;
  animation: none;
  opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
  .sn-temporal-echo, body:not([data-bloom=off]) div.main-rootlist-wrapper[role=presentation] div.main-trackList-trackListRow[role=row]:hover::after,
  body:not([data-bloom=off]) div.main-rootlist-wrapper div.main-trackList-trackListRow[role=row]:hover::after, body:not([data-bloom=off]) div.main-rootlist-wrapper[role=presentation] div.main-trackList-trackListRow[role=row][aria-selected=true]::after, body:not([data-bloom=off]) div.main-rootlist-wrapper[role=presentation] div.main-trackList-trackListRow[role=row]:has(.main-trackList-playingIcon)::after,
  body:not([data-bloom=off]) div.main-rootlist-wrapper div.main-trackList-trackListRow[role=row][aria-selected=true]::after,
  body:not([data-bloom=off]) div.main-rootlist-wrapper div.main-trackList-trackListRow[role=row]:has(.main-trackList-playingIcon)::after {
    animation: none !important;
    opacity: 0 !important;
  }
}

.sn-performance-mode .sn-beat-responsive,
.sn-performance-mode .sn-beat-responsive--subtle,
.sn-performance-mode .sn-beat-responsive--custom {
  animation: none !important;
  transform: scale(1) !important;
  opacity: 1 !important;
  transition: none !important;
}
.sn-performance-mode .sn-beat-glow {
  box-shadow: none !important;
  transition: none !important;
}
.sn-performance-mode .sn-temporal-echo,
.sn-performance-mode body:not([data-bloom=off]) div.main-rootlist-wrapper div.main-trackList-trackListRow[role=row]:hover::after,
body:not([data-bloom=off]) div.main-rootlist-wrapper .sn-performance-mode div.main-trackList-trackListRow[role=row]:hover::after,
.sn-performance-mode body:not([data-bloom=off]) div.main-rootlist-wrapper div.main-trackList-trackListRow[role=row][aria-selected=true]::after,
body:not([data-bloom=off]) div.main-rootlist-wrapper .sn-performance-mode div.main-trackList-trackListRow[role=row][aria-selected=true]::after,
.sn-performance-mode body:not([data-bloom=off]) div.main-rootlist-wrapper div.main-trackList-trackListRow[role=row]:has(.main-trackList-playingIcon)::after,
body:not([data-bloom=off]) div.main-rootlist-wrapper .sn-performance-mode div.main-trackList-trackListRow[role=row]:has(.main-trackList-playingIcon)::after {
  animation: none !important;
  opacity: 0 !important;
}

:root {
  --sn-unified-effect-intensity: 0.5;
  --sn-unified-music-energy: 0.5;
  --sn-unified-performance-quality: 1.0;
  --sn-unified-blur-amount: calc(
    var(--sn-unified-effect-intensity) *
    var(--sn-unified-performance-quality) *
    20px
  );
  --sn-unified-scale-delta: calc(
    var(--sn-unified-effect-intensity) *
    0.02
  );
  --sn-unified-opacity-base: 0.8;
  --sn-unified-opacity-range: calc(
    0.2 * var(--sn-unified-music-energy)
  );
  --sn-unified-saturation-boost: calc(
    var(--sn-unified-effect-intensity) * 0.3
  );
  --sn-unified-brightness-delta: calc(
    var(--sn-unified-effect-intensity) * 0.1
  );
  --sn-unified-glow-radius: calc(
    var(--sn-unified-effect-intensity) *
    var(--sn-unified-music-energy) *
    20px
  );
  --sn-variant-gentle-scale: 0.5;
  --sn-variant-energetic-scale: 1.5;
  --sn-variant-crystalline-scale: 1.2;
  --sn-variant-fluid-scale: 0.8;
  --sn-glass-base-intensity: 0.6;
  --sn-glass-music-multiplier: 1.0;
  --sn-glass-float-height: 15px;
  --sn-glass-float-rhythm: 4s;
  --sn-gradient-base-intensity: 0.5;
  --sn-gradient-flow-duration: 12s;
  --sn-particle-base-speed: 15s;
  --sn-particle-field-density: 0.4;
  --sn-particle-connection-range: 100px;
  --sn-particle-connect-speed: 6s;
  --sn-particle-connection-opacity: 0.1;
  --sn-particle-pulse-speed: 2s;
  --sn-particle-growth-speed: 3s;
  --sn-particle-connection-complexity: 2;
  --sn-star-depth-layers: 4;
  --sn-star-brightness-variance: 0.3;
  --sn-star-max-size: 2px;
  --sn-star-twinkle-speed: 8s;
  --sn-star-parallax-intensity: 0.15;
  --sn-shape-corner-radius: 16px;
  --sn-shape-depth-near: translateZ(12px);
  --sn-shape-depth-mid: translateZ(6px);
  --sn-shape-depth-far: translateZ(0px);
  --sn-shape-transition-medium: 0.5s;
  --sn-layered-depth-count: 3;
  --sn-layered-projection-distance: 30px;
  --sn-layered-glow-intensity: 0.8;
}

@keyframes unified-breathing-keyframes {
  0%, 100% {
    transform: scale(var(--breath-scale-min)) translateZ(0);
    opacity: var(--breath-opacity-min);
    filter: var(--breath-filter-min);
  }
  50% {
    transform: scale(var(--breath-scale-max)) translateZ(0);
    opacity: var(--breath-opacity-max);
    filter: var(--breath-filter-max) saturate(calc(1 + var(--sn-unified-saturation-boost)));
  }
}
.unified-effect-gentle {
  will-change: transform, opacity, filter;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
  contain: style paint;
  backdrop-filter: blur(calc(calc(0.3 * var(--sn-variant-gentle-scale, 0.5)) * var(--sn-unified-blur-amount))) saturate(calc(1 + calc(0.3 * var(--sn-variant-gentle-scale, 0.5)) * var(--sn-unified-saturation-boost))) brightness(calc(1 + calc(0.3 * var(--sn-variant-gentle-scale, 0.5)) * var(--sn-unified-brightness-delta)));
  -webkit-backdrop-filter: blur(calc(calc(0.3 * var(--sn-variant-gentle-scale, 0.5)) * var(--sn-unified-blur-amount))) saturate(calc(1 + calc(0.3 * var(--sn-variant-gentle-scale, 0.5)) * var(--sn-unified-saturation-boost))) brightness(calc(1 + calc(0.3 * var(--sn-variant-gentle-scale, 0.5)) * var(--sn-unified-brightness-delta)));
  /* Phase 4C: explicit mauve for structural glass base */
  background: rgba(var(--oklab-mauve-rgb, var(--spice-rgb-surface0)), calc(0.08 * calc(0.3 * var(--sn-variant-gentle-scale, 0.5))));
  /* Phase 4C: explicit blue for interactive accent border */
  border: 1px solid rgba(var(--oklab-blue-rgb, var(--spice-rgb-accent)), calc(0.2 * calc(0.3 * var(--sn-variant-gentle-scale, 0.5))));
  transition: backdrop-filter 400ms ease-out, background 400ms ease-out, border-color 400ms ease-out;
  will-change: transform, opacity, filter;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
  contain: style paint;
  --breath-scale-min: 1;
  --breath-scale-max: calc(1 + calc(0.3 * var(--sn-variant-gentle-scale, 0.5)) * var(--sn-unified-scale-delta));
  --breath-opacity-min: calc(var(--sn-unified-opacity-base) - calc(0.3 * var(--sn-variant-gentle-scale, 0.5)) * 0.05);
  --breath-opacity-max: calc(var(--sn-unified-opacity-base) + calc(0.3 * var(--sn-variant-gentle-scale, 0.5)) * var(--sn-unified-opacity-range));
  --breath-filter-min: brightness(1);
  --breath-filter-max: brightness(calc(1 + calc(0.3 * var(--sn-variant-gentle-scale, 0.5)) * var(--sn-unified-brightness-delta)));
  animation: unified-breathing-keyframes 4s ease-in-out infinite;
  /* Phase 4C: explicit blue for interactive accent glow */
  box-shadow: 0 0 calc(0.3 * var(--sn-unified-glow-radius)) rgba(var(--oklab-blue-rgb, var(--spice-rgb-accent)), 0.09);
}
@supports not (backdrop-filter: blur(1px)) {
  .unified-effect-gentle {
    background: rgba(var(--spice-rgb-surface0), calc(0.2 * calc(0.3 * var(--sn-variant-gentle-scale, 0.5))));
    border: 1px solid rgba(var(--spice-rgb-surface1), 0.3);
  }
}
@media (prefers-reduced-motion: reduce) {
  .unified-effect-gentle {
    animation: none !important;
    transform: scale(1) translateZ(0) !important;
    opacity: var(--sn-unified-opacity-base) !important;
  }
}
.device-tier-low .unified-effect-gentle {
  backdrop-filter: none;
  box-shadow: none;
}
.device-tier-medium .unified-effect-gentle {
  backdrop-filter: blur(3px);
}
.unified-effect-standard {
  will-change: transform, opacity, filter;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
  contain: style paint;
  backdrop-filter: blur(calc(calc(0.5 * 1) * var(--sn-unified-blur-amount))) saturate(calc(1 + calc(0.5 * 1) * var(--sn-unified-saturation-boost))) brightness(calc(1 + calc(0.5 * 1) * var(--sn-unified-brightness-delta)));
  -webkit-backdrop-filter: blur(calc(calc(0.5 * 1) * var(--sn-unified-blur-amount))) saturate(calc(1 + calc(0.5 * 1) * var(--sn-unified-saturation-boost))) brightness(calc(1 + calc(0.5 * 1) * var(--sn-unified-brightness-delta)));
  /* Phase 4C: explicit mauve for structural glass base */
  background: rgba(var(--oklab-mauve-rgb, var(--spice-rgb-surface0)), calc(0.08 * calc(0.5 * 1)));
  /* Phase 4C: explicit blue for interactive accent border */
  border: 1px solid rgba(var(--oklab-blue-rgb, var(--spice-rgb-accent)), calc(0.2 * calc(0.5 * 1)));
  transition: backdrop-filter 400ms ease-out, background 400ms ease-out, border-color 400ms ease-out;
  will-change: transform, opacity, filter;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
  contain: style paint;
  --breath-scale-min: 1;
  --breath-scale-max: calc(1 + calc(0.5 * 1) * var(--sn-unified-scale-delta));
  --breath-opacity-min: calc(var(--sn-unified-opacity-base) - calc(0.5 * 1) * 0.05);
  --breath-opacity-max: calc(var(--sn-unified-opacity-base) + calc(0.5 * 1) * var(--sn-unified-opacity-range));
  --breath-filter-min: brightness(1);
  --breath-filter-max: brightness(calc(1 + calc(0.5 * 1) * var(--sn-unified-brightness-delta)));
  animation: unified-breathing-keyframes 4s ease-in-out infinite;
  /* Phase 4C: explicit blue for interactive accent glow */
  box-shadow: 0 0 calc(0.5 * var(--sn-unified-glow-radius)) rgba(var(--oklab-blue-rgb, var(--spice-rgb-accent)), 0.15);
}
@supports not (backdrop-filter: blur(1px)) {
  .unified-effect-standard {
    background: rgba(var(--spice-rgb-surface0), calc(0.2 * calc(0.5 * 1)));
    border: 1px solid rgba(var(--spice-rgb-surface1), 0.3);
  }
}
@media (prefers-reduced-motion: reduce) {
  .unified-effect-standard {
    animation: none !important;
    transform: scale(1) translateZ(0) !important;
    opacity: var(--sn-unified-opacity-base) !important;
  }
}
.device-tier-low .unified-effect-standard {
  backdrop-filter: none;
  box-shadow: none;
}
.device-tier-medium .unified-effect-standard {
  backdrop-filter: blur(5px);
}
.unified-effect-energetic {
  will-change: transform, opacity, filter;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
  contain: style paint;
  backdrop-filter: blur(calc(calc(0.8 * var(--sn-variant-energetic-scale, 1.5)) * var(--sn-unified-blur-amount))) saturate(calc(1 + calc(0.8 * var(--sn-variant-energetic-scale, 1.5)) * var(--sn-unified-saturation-boost))) brightness(calc(1 + calc(0.8 * var(--sn-variant-energetic-scale, 1.5)) * var(--sn-unified-brightness-delta)));
  -webkit-backdrop-filter: blur(calc(calc(0.8 * var(--sn-variant-energetic-scale, 1.5)) * var(--sn-unified-blur-amount))) saturate(calc(1 + calc(0.8 * var(--sn-variant-energetic-scale, 1.5)) * var(--sn-unified-saturation-boost))) brightness(calc(1 + calc(0.8 * var(--sn-variant-energetic-scale, 1.5)) * var(--sn-unified-brightness-delta)));
  /* Phase 4C: explicit mauve for structural glass base */
  background: rgba(var(--oklab-mauve-rgb, var(--spice-rgb-surface0)), calc(0.08 * calc(0.8 * var(--sn-variant-energetic-scale, 1.5))));
  /* Phase 4C: explicit blue for interactive accent border */
  border: 1px solid rgba(var(--oklab-blue-rgb, var(--spice-rgb-accent)), calc(0.2 * calc(0.8 * var(--sn-variant-energetic-scale, 1.5))));
  transition: backdrop-filter 400ms ease-out, background 400ms ease-out, border-color 400ms ease-out;
  will-change: transform, opacity, filter;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
  contain: style paint;
  --breath-scale-min: 1;
  --breath-scale-max: calc(1 + calc(0.8 * var(--sn-variant-energetic-scale, 1.5)) * var(--sn-unified-scale-delta));
  --breath-opacity-min: calc(var(--sn-unified-opacity-base) - calc(0.8 * var(--sn-variant-energetic-scale, 1.5)) * 0.05);
  --breath-opacity-max: calc(var(--sn-unified-opacity-base) + calc(0.8 * var(--sn-variant-energetic-scale, 1.5)) * var(--sn-unified-opacity-range));
  --breath-filter-min: brightness(1);
  --breath-filter-max: brightness(calc(1 + calc(0.8 * var(--sn-variant-energetic-scale, 1.5)) * var(--sn-unified-brightness-delta)));
  animation: unified-breathing-keyframes 4s ease-in-out infinite;
  /* Phase 4C: explicit blue for interactive accent glow */
  box-shadow: 0 0 calc(0.8 * var(--sn-unified-glow-radius)) rgba(var(--oklab-blue-rgb, var(--spice-rgb-accent)), 0.24);
}
@supports not (backdrop-filter: blur(1px)) {
  .unified-effect-energetic {
    background: rgba(var(--spice-rgb-surface0), calc(0.2 * calc(0.8 * var(--sn-variant-energetic-scale, 1.5))));
    border: 1px solid rgba(var(--spice-rgb-surface1), 0.3);
  }
}
@media (prefers-reduced-motion: reduce) {
  .unified-effect-energetic {
    animation: none !important;
    transform: scale(1) translateZ(0) !important;
    opacity: var(--sn-unified-opacity-base) !important;
  }
}
.device-tier-low .unified-effect-energetic {
  backdrop-filter: none;
  box-shadow: none;
}
.device-tier-medium .unified-effect-energetic {
  backdrop-filter: blur(8px);
}
.unified-effect-crystalline {
  will-change: transform, opacity, filter;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
  contain: style paint;
  backdrop-filter: blur(calc(calc(0.6 * var(--sn-variant-crystalline-scale, 1.2)) * var(--sn-unified-blur-amount))) saturate(calc(1 + calc(0.6 * var(--sn-variant-crystalline-scale, 1.2)) * var(--sn-unified-saturation-boost))) brightness(calc(1 + calc(0.6 * var(--sn-variant-crystalline-scale, 1.2)) * var(--sn-unified-brightness-delta)));
  -webkit-backdrop-filter: blur(calc(calc(0.6 * var(--sn-variant-crystalline-scale, 1.2)) * var(--sn-unified-blur-amount))) saturate(calc(1 + calc(0.6 * var(--sn-variant-crystalline-scale, 1.2)) * var(--sn-unified-saturation-boost))) brightness(calc(1 + calc(0.6 * var(--sn-variant-crystalline-scale, 1.2)) * var(--sn-unified-brightness-delta)));
  /* Phase 4C: explicit mauve for structural glass base */
  background: rgba(var(--oklab-mauve-rgb, var(--spice-rgb-surface0)), calc(0.08 * calc(0.6 * var(--sn-variant-crystalline-scale, 1.2))));
  /* Phase 4C: explicit blue for interactive accent border */
  border: 1px solid rgba(var(--oklab-blue-rgb, var(--spice-rgb-accent)), calc(0.2 * calc(0.6 * var(--sn-variant-crystalline-scale, 1.2))));
  transition: backdrop-filter 400ms ease-out, background 400ms ease-out, border-color 400ms ease-out;
  /* Phase 4C: explicit blue for interactive accent glow */
  box-shadow: 0 0 calc(0.6 * var(--sn-unified-glow-radius)) rgba(var(--oklab-blue-rgb, var(--spice-rgb-accent)), 0.18);
}
@supports not (backdrop-filter: blur(1px)) {
  .unified-effect-crystalline {
    background: rgba(var(--spice-rgb-surface0), calc(0.2 * calc(0.6 * var(--sn-variant-crystalline-scale, 1.2))));
    border: 1px solid rgba(var(--spice-rgb-surface1), 0.3);
  }
}
.device-tier-low .unified-effect-crystalline {
  backdrop-filter: none;
  box-shadow: none;
}
.device-tier-medium .unified-effect-crystalline {
  backdrop-filter: blur(6px);
}
.unified-intensity-minimal {
  --sn-unified-effect-intensity: 0.2;
}

.unified-intensity-low {
  --sn-unified-effect-intensity: 0.4;
}

.unified-intensity-medium {
  --sn-unified-effect-intensity: 0.6;
}

.unified-intensity-high {
  --sn-unified-effect-intensity: 0.8;
}

.unified-intensity-maximum {
  --sn-unified-effect-intensity: 1.0;
}

.unified-energy-calm {
  --sn-unified-music-energy: 0.2;
}

.unified-energy-moderate {
  --sn-unified-music-energy: 0.5;
}

.unified-energy-high {
  --sn-unified-music-energy: 0.8;
}

.unified-energy-peak {
  --sn-unified-music-energy: 1.0;
}

/*
USAGE EXAMPLES:

1. Simple glassmorphism with breathing:
   @include unified-visual-effect($intensity: 0.5, $breathing: true);

2. Crystalline effect without breathing:
   @include unified-visual-effect($intensity: 0.6, $variant: 'crystalline');

3. Energetic breathing only:
   @include unified-breathing($intensity: 0.8, $variant: 'energetic', $duration: 3s);

4. Custom intensity control:
   .my-element {
     @include unified-visual-effect($intensity: 0.7, $variant: 'gentle');

     &:hover {
       --sn-unified-effect-intensity: 0.9; // Increase on hover
     }
   }

5. Music-reactive effect (TypeScript controlled):
   // In TypeScript:
   // element.style.setProperty('--sn-unified-music-energy', audioLevel);

   .music-reactive {
     @include unified-visual-effect($intensity: var(--sn-unified-music-energy));
   }

MIGRATION FROM LEGACY MIXINS:

Old:
  @include glassmorphism(20px, 0.1, 1.2);
  @include breathing-animation('gentle');

New:
  @include unified-visual-effect($intensity: 0.5, $breathing: true);

Benefits:
  - Single backdrop-filter application (no stacking)
  - Single animation (no conflicts)
  - Performance-optimized by default
  - Music sync through single intensity variable
*/
:root .Root__main-view .UyzJidwrGk3awngSGIwv {
  color: var(--spice-subtext);
}
:root .Root__main-view .main-home-content > section:first-child > .main-gridContainer-gridContainer > div span[aria-label],
:root .Root__main-view span[aria-label="New episode"],
:root .Root__main-view span[aria-label="New Podcast Episode"] {
  background: var(--spice-text);
}
:root .Root__main-view .Button-sm-buttonSecondary-useBrowserDefaultFocusStyle {
  background-color: var(--spice-base);
  color: var(--spice-text);
  border: 1px solid var(--spice-overlay1);
}
:root .Root__main-view .Button-sm-buttonSecondary-useBrowserDefaultFocusStyle:hover {
  border-color: rgba(var(--sn-oklab-highlight-rgb, 255, 255, 255), 0.7);
}

.starrynight-settings .setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--spice-border);
}
.starrynight-settings .setting-row:last-child {
  border-bottom: none;
}
.starrynight-settings .setting-row .setting-label {
  color: var(--spice-text);
  font-size: 14px;
  font-weight: 500;
  min-width: 120px;
}
.starrynight-settings .setting-row select.main-dropDown-dropDown {
  min-width: 150px;
  background: var(--spice-button);
  color: var(--spice-text);
  border: 1px solid var(--spice-border);
  border-radius: 4px;
  padding: 8px 12px;
}
.starrynight-settings .setting-row select.main-dropDown-dropDown:hover {
  background: var(--spice-button-active);
}
.starrynight-settings .setting-row select.main-dropDown-dropDown:focus {
  outline: 2px solid var(--spice-accent);
  outline-offset: 2px;
}

.main-settingsPage-section .starrynight-settings {
  margin-top: 16px;
}

:root {
  --spice-rgb-base: var(--spice-base, "30,30,46");
  --spice-rgb-accent: var(--spice-accent, "140,170,238");
  --border-radius: var(--spice-border-radius, 6px);
}

:root {
  --spice-button: rgba(var(--sn-accent-rgb, 128, 128, 128), 0.15);
  --spice-button-active: rgba(var(--sn-accent-rgb, 128, 128, 128), 0.25);
  --spice-button-disabled: rgba(var(--sn-accent-rgb, 128, 128, 128), 0.05);
  --spice-rgb-button: var(--sn-accent-rgb);
  --sn-button-shadow: 0 1px 3px rgba(var(--sn-accent-rgb, 128, 128, 128), 0.2);
  --sn-button-highlight: inset 0 1px 0 rgba(var(--sn-accent-rgb, 128, 128, 128), 0.1);
  --sn-button-hover-shadow: 0 2px 6px rgba(var(--sn-accent-rgb, 128, 128, 128), 0.3);
  --sn-button-hover-highlight: inset 0 1px 0 rgba(var(--sn-accent-rgb, 128, 128, 128), 0.2);
}

button,
.Button,
.main-playButton-PlayButton,
select.main-dropDown-dropDown,
.main-button-secondary,
.main-button-primary {
  box-shadow: var(--sn-button-shadow), var(--sn-button-highlight);
  transition: box-shadow 0.2s ease, transform 0.1s ease;
}
button:hover:not(:disabled),
.Button:hover:not(:disabled),
.main-playButton-PlayButton:hover:not(:disabled),
select.main-dropDown-dropDown:hover:not(:disabled),
.main-button-secondary:hover:not(:disabled),
.main-button-primary:hover:not(:disabled) {
  box-shadow: var(--sn-button-hover-shadow), var(--sn-button-hover-highlight);
  transform: translateY(-1px);
}
button:active:not(:disabled),
.Button:active:not(:disabled),
.main-playButton-PlayButton:active:not(:disabled),
select.main-dropDown-dropDown:active:not(:disabled),
.main-button-secondary:active:not(:disabled),
.main-button-primary:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: var(--sn-button-shadow), var(--sn-button-highlight);
}
button:disabled,
.Button:disabled,
.main-playButton-PlayButton:disabled,
select.main-dropDown-dropDown:disabled,
.main-button-secondary:disabled,
.main-button-primary:disabled {
  box-shadow: 0 1px 2px rgba(var(--sn-accent-rgb, 128, 128, 128), 0.1), inset 0 1px 0 rgba(var(--sn-accent-rgb, 128, 128, 128), 0.05);
  opacity: 0.6;
}

.main-view-container__scroll-node {
  position: relative;
  isolation: isolate;
}
.main-view-container__scroll-node::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 990;
  background: radial-gradient(circle at 50% 50%, rgba(var(--spice-rgb-accent, 168, 173, 200), calc(var(--dynamic-fog-opacity, 0.02) * 4)) 0%, transparent 70%);
  will-change: transform, opacity, filter;
  transform: translateZ(0);
  backface-visibility: hidden;
  contain: layout style paint;
}
@media (update: slow) {
  .main-view-container__scroll-node::before {
    will-change: auto;
  }
}
.main-view-container__scroll-node::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 991;
  background: radial-gradient(circle at 70% 65%, rgba(var(--spice-rgb-accent, 168, 173, 200), calc(var(--dynamic-fog-opacity, 0.02) * 3)) 0%, transparent 70%);
  will-change: transform, opacity, filter;
  transform: translateZ(0);
  backface-visibility: hidden;
  contain: layout style paint;
}
@media (update: slow) {
  .main-view-container__scroll-node::after {
    will-change: auto;
  }
}

.main-view-container[data-visualeffects-enhanced=true] .main-view-container__scroll-node::before,
.main-view-container[data-visualeffects-enhanced=true] .main-view-container__scroll-node::after {
  content: none;
}

.card,
.main-card,
.artist-card,
.playlist-card,
.album-card {
  position: relative;
}
.card::before,
.main-card::before,
.artist-card::before,
.playlist-card::before,
.album-card::before {
  content: "";
  position: absolute;
  top: calc(var(--dynamic-breathing-phase, 0) * 10% + 10%);
  right: calc(var(--dynamic-breathing-phase, 0) * 15% + 10%);
  width: calc(60px + var(--dynamic-growth-scale, 1) * 60px);
  height: calc(60px + var(--dynamic-growth-scale, 1) * 60px);
  border-radius: 50%;
  background: linear-gradient(45deg, rgba(var(--spice-rgb-accent, 168, 173, 200), calc(var(--dynamic-shimmer-opacity, 0.05) * 2)) 0%, rgba(var(--spice-rgb-accent, 168, 173, 200), var(--dynamic-shimmer-opacity, 0.05)) 100%);
  pointer-events: none;
  z-index: 1;
  will-change: transform, opacity, filter;
  transform: translateZ(0);
  backface-visibility: hidden;
  contain: layout style paint;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.card.dynamic-visual-effects-enabled::before,
.main-card.dynamic-visual-effects-enabled::before,
.artist-card.dynamic-visual-effects-enabled::before,
.playlist-card.dynamic-visual-effects-enabled::before,
.album-card.dynamic-visual-effects-enabled::before {
  opacity: 1;
  transform: scale(1);
}
.card::after,
.main-card::after,
.artist-card::after,
.playlist-card::after,
.album-card::after {
  content: "";
  position: absolute;
  bottom: calc(var(--dynamic-breathing-phase, 0) * 5% + 5%);
  left: calc(var(--dynamic-breathing-phase, 0) * 10% + 5%);
  width: calc(2px + var(--dynamic-growth-scale, 1) * 2px);
  height: calc(2px + var(--dynamic-growth-scale, 1) * 2px);
  border-radius: 50%;
  background: rgba(var(--spice-rgb-accent, 168, 173, 200), calc(var(--dynamic-glow-opacity, 0.1) * 6));
  pointer-events: none;
  z-index: 2;
  will-change: transform, opacity, filter;
  transform: translateZ(0);
  backface-visibility: hidden;
  contain: layout style paint;
  opacity: 0;
  transform: scale(0);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.card.dynamic-visual-effects-enabled::after,
.main-card.dynamic-visual-effects-enabled::after,
.artist-card.dynamic-visual-effects-enabled::after,
.playlist-card.dynamic-visual-effects-enabled::after,
.album-card.dynamic-visual-effects-enabled::after {
  opacity: 1;
  transform: scale(1);
}

.main-view-container__scroll-node.dynamic-particle-enabled::before {
  opacity: 1;
  transform: scale(1);
}

.main-view-container__scroll-node.dynamic-particle-enabled::after {
  opacity: 1;
  transform: scale(1);
}

@keyframes organic-membrane-breathing {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.95;
    transform: scale(1.01);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes dynamic-ambient-field {
  0% {
    opacity: 1;
    transform: translateX(0) translateY(0);
  }
  25% {
    opacity: 0.98;
    transform: translateX(1px) translateY(-0.5px);
  }
  50% {
    opacity: 0.96;
    transform: translateX(-0.5px) translateY(1px);
  }
  75% {
    opacity: 0.98;
    transform: translateX(-1px) translateY(-0.5px);
  }
  100% {
    opacity: 1;
    transform: translateX(0) translateY(0);
  }
}
:root {
  --sn-topbar-beat-glow-intensity: calc(
    var(--sn-music-beat-pulse-intensity, 0) * 0.8
  );
  --sn-topbar-rhythm-hue-shift: calc(var(--sn-music-rhythm-phase, 0) * 25deg);
  --sn-topbar-gradient-opacity: calc(
    0.1 + var(--sn-music-beat-pulse-intensity, 0) * 0.15
  );
  --sn-search-effect-intensity: calc(var(--sn-music-beat-pulse-intensity, 0) * 0.6);
  --sn-search-focus-scale: calc(1 + var(--sn-music-beat-pulse-intensity, 0) * 0.05);
  --sn-search-beat-border: rgba(
    var(--sn-accent-rgb, var(--sn-accent-rgb, 140,170,238)),
    calc(0.3 + var(--sn-music-beat-pulse-intensity, 0) * 0.4)
  );
  --sn-button-background-color: rgba(
    var(--sn-accent-rgb, var(--sn-accent-rgb, 202,158,230)),
    calc(0.1 + var(--sn-music-beat-pulse-intensity, 0) * 0.2)
  );
  --sn-button-hover-scale: calc(1 + var(--sn-music-beat-pulse-intensity, 0) * 0.03);
  --sn-button-glow-radius: calc(5px + var(--sn-music-beat-pulse-intensity, 0) * 10px);
  --sn-topbar-rhythm-phase: var(--sn-music-rhythm-phase, 0);
  --sn-topbar-beat-intensity: var(--sn-music-beat-pulse-intensity, 0);
  --sn-topbar-rhythm-angle: calc(var(--sn-music-rhythm-phase, 0) * 180deg);
  --sn-topbar-primary-rgb: var(--sn-oklab-primary-rgb);
  --sn-topbar-secondary-rgb: var(--sn-cosmic-secondary-rgb);
  --sn-topbar-intensity: 0.2;
}

:root .Root__top-bar header,
:root .main-topBar-container {
  position: relative;
  overflow: hidden;
  background: linear-gradient(calc(90deg + var(--sn-topbar-rhythm-angle)), rgba(var(--sn-accent-rgb, var(--sn-accent-rgb, 202, 158, 230)), var(--sn-topbar-gradient-opacity)) 0%, transparent 40%, transparent 60%, rgba(var(--sn-accent-rgb, var(--spice-rgb-surface0, 186, 187, 241)), calc(var(--sn-topbar-gradient-opacity) * 0.8)) 100%), var(--spice-main, #1e1e2e) !important;
  backdrop-filter: blur(10px) saturate(1.1);
  border-bottom: 1px solid oklab-color("primary", calc(var(--sn-topbar-intensity) * 0.5 * (1 + var(--sn-music-beat-pulse-intensity, 0) * 0.3)));
  box-shadow: 0 2px var(--sn-button-glow-radius) oklab-color("accent", calc(var(--sn-topbar-beat-glow-intensity) * 0.3)), inset 0 1px 0 oklab-color("highlight", calc(var(--sn-topbar-beat-glow-intensity) * 0.2));
  filter: hue-rotate(var(--sn-topbar-rhythm-hue-shift)) saturate(calc(1 + var(--sn-music-beat-pulse-intensity, 0) * 0.2)) brightness(calc(1 + var(--sn-music-beat-pulse-intensity, 0) * 0.1));
  transition: all 0.8s var(--sn-anim-easing-organic), filter 0.3s ease-out, border-bottom 0.3s ease-out, backdrop-filter 0.5s ease-out;
}
:root .Root__top-bar header::before,
:root .main-topBar-container::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse 150% 100% at 50% 0%, rgba(var(--sn-accent-rgb, 140, 170, 238), calc(var(--sn-topbar-beat-intensity) * 0.15)) 0%, transparent 70%);
  animation: gradientFlow calc(20s / max(var(--sn-music-beat-pulse-intensity, 0.1), 0.1)) linear infinite;
  opacity: var(--sn-topbar-beat-intensity);
}
:root .Root__top-bar header .main-topBar-background,
:root .main-topBar-container .main-topBar-background {
  background-color: transparent !important;
}
:root .Root__top-bar header .main-entityHeader-withBackgroundImage,
:root .main-topBar-container .main-entityHeader-withBackgroundImage {
  background: radial-gradient(ellipse at center, rgba(var(--sn-accent-rgb, "202,158,230"), calc(var(--sn-topbar-gradient-opacity) * 1.5)) 0%, rgba(var(--sn-accent-rgb, var(--spice-rgb-base)), 0.2) 100%) !important;
}

:root .Root__top-bar header .x-searchInput-searchInputInput,
:root .main-topBar-container .x-searchInput-searchInputInput {
  position: relative;
  border: 2px solid var(--sn-search-beat-border);
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(var(--spice-rgb-overlay0, "108,112,134"), 0.9) 0%, rgba(var(--sn-accent-rgb, "202,158,230"), calc(var(--sn-search-effect-intensity) * 0.1)) 100%) !important;
  box-shadow: 0 0 calc(8px + var(--sn-search-effect-intensity) * 12px) rgba(var(--sn-accent-rgb, 140, 170, 238), calc(var(--sn-search-effect-intensity) * 0.4)), inset 0 1px 3px rgba(var(--sn-accent-rgb, "202,158,230"), calc(var(--sn-search-effect-intensity) * 0.2));
  color: var(--spice-subtext, #bac2de) !important;
  transition: all 0.3s var(--sn-anim-easing-organic);
}
:root .Root__top-bar header .x-searchInput-searchInputInput::placeholder,
:root .main-topBar-container .x-searchInput-searchInputInput::placeholder {
  color: rgba(var(--spice-rgb-subtext, "186,194,222"), calc(0.5 + var(--sn-music-beat-pulse-intensity, 0) * 0.2)) !important;
  transition: color 0.3s ease;
}
:root .Root__top-bar header .x-searchInput-searchInputInput:focus,
:root .main-topBar-container .x-searchInput-searchInputInput:focus {
  border-color: rgba(var(--sn-accent-rgb, "202,158,230"), 0.8);
  box-shadow: 0 0 calc(12px + var(--sn-search-effect-intensity) * 16px) rgba(var(--sn-accent-rgb, 140, 170, 238), calc(var(--sn-search-effect-intensity) * 0.6 + 0.3)), inset 0 2px 4px rgba(var(--sn-accent-rgb, "202,158,230"), calc(var(--sn-search-effect-intensity) * 0.3 + 0.1));
  filter: hue-rotate(calc(var(--sn-topbar-rhythm-hue-shift) * 0.5));
}
:root .Root__top-bar header .x-searchInput-searchInputInput:not(:placeholder-shown),
:root .main-topBar-container .x-searchInput-searchInputInput:not(:placeholder-shown) {
  border-color: rgba(var(--sn-accent-rgb, 140, 170, 238), calc(0.6 + var(--sn-music-beat-pulse-intensity, 0) * 0.3));
}
:root .Root__top-bar header .x-searchInput-searchInputClearButton,
:root .main-topBar-container .x-searchInput-searchInputClearButton {
  color: rgba(var(--spice-rgb-subtext, 186, 194, 222), calc(0.7 + var(--sn-music-beat-pulse-intensity, 0) * 0.2));
}
:root .Root__top-bar header .x-searchInput-searchInputClearButton:hover,
:root .main-topBar-container .x-searchInput-searchInputClearButton:hover {
  color: rgba(var(--sn-accent-rgb, 140, 170, 238), 1);
}

:root .Root__top-bar header button:not(.x-searchInput-searchInputClearButton),
:root .Root__top-bar header .main-topBar-button,
:root .main-topBar-container button:not(.x-searchInput-searchInputClearButton),
:root .main-topBar-container .main-topBar-button {
  position: relative;
  overflow: hidden;
  background: var(--sn-button-background-color) !important;
  color: var(--spice-subtext, #bac2de) !important;
  border: 1px solid rgba(var(--sn-accent-rgb, 140, 170, 238), calc(0.2 + var(--sn-music-beat-pulse-intensity, 0) * 0.3)) !important;
  border-radius: 8px;
  transition: all 0.3s var(--sn-anim-easing-organic);
}
:root .Root__top-bar header button:not(.x-searchInput-searchInputClearButton)::before,
:root .Root__top-bar header .main-topBar-button::before,
:root .main-topBar-container button:not(.x-searchInput-searchInputClearButton)::before,
:root .main-topBar-container .main-topBar-button::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(var(--sn-accent-rgb, 140, 170, 238), calc(var(--sn-topbar-beat-intensity) * 0.3)) 50%, transparent 100%);
  transition: left 0.6s ease;
  pointer-events: none;
}
:root .Root__top-bar header button:not(.x-searchInput-searchInputClearButton):hover,
:root .Root__top-bar header .main-topBar-button:hover,
:root .main-topBar-container button:not(.x-searchInput-searchInputClearButton):hover,
:root .main-topBar-container .main-topBar-button:hover {
  background: rgba(var(--sn-accent-rgb, "202,158,230"), calc(0.2 + var(--sn-music-beat-pulse-intensity, 0) * 0.15)) !important;
  box-shadow: 0 0 var(--sn-button-glow-radius) rgba(var(--sn-accent-rgb, "202,158,230"), calc(var(--sn-topbar-beat-glow-intensity) * 0.5 + 0.2)), inset 0 1px 2px rgba(var(--sn-accent-rgb, 140, 170, 238), calc(var(--sn-topbar-beat-glow-intensity) * 0.3));
  transform: translateY(-1px);
}
:root .Root__top-bar header button:not(.x-searchInput-searchInputClearButton):hover::before,
:root .Root__top-bar header .main-topBar-button:hover::before,
:root .main-topBar-container button:not(.x-searchInput-searchInputClearButton):hover::before,
:root .main-topBar-container .main-topBar-button:hover::before {
  left: 100%;
}
:root .Root__top-bar header button:not(.x-searchInput-searchInputClearButton):active,
:root .Root__top-bar header .main-topBar-button:active,
:root .main-topBar-container button:not(.x-searchInput-searchInputClearButton):active,
:root .main-topBar-container .main-topBar-button:active {
  box-shadow: inset 0 2px 4px rgba(var(--sn-accent-rgb, "202,158,230"), 0.3);
}
:root .Root__top-bar header button:not(.x-searchInput-searchInputClearButton):focus-visible,
:root .Root__top-bar header .main-topBar-button:focus-visible,
:root .main-topBar-container button:not(.x-searchInput-searchInputClearButton):focus-visible,
:root .main-topBar-container .main-topBar-button:focus-visible {
  outline: 2px solid rgba(var(--sn-accent-rgb, 140, 170, 238), 0.8);
  outline-offset: 2px;
}
:root .Root__top-bar header .Svg-img-24-icon.home-active-icon,
:root .main-topBar-container .Svg-img-24-icon.home-active-icon {
  filter: drop-shadow(0 0 calc(6px + var(--sn-music-beat-pulse-intensity, 0) * 8px) rgba(var(--sn-accent-rgb, "202,158,230"), calc(var(--sn-topbar-beat-glow-intensity) * 0.8 + 0.2)));
  color: hsl(calc(250 + var(--sn-music-rhythm-phase, 0) * 15), calc(70% + var(--sn-music-beat-pulse-intensity, 0) * 20%), calc(60% + var(--sn-music-beat-pulse-intensity, 0) * 20%)) !important;
  transition: all 0.4s ease-out;
}

@keyframes gradientFlow {
  from {
    transform: translateX(-100%);
    opacity: 0.5;
  }
  to {
    transform: translateX(100%);
    opacity: 0.8;
  }
}
@keyframes topbar-breathing {
  0%, 100% {
    transform: scale(1) rotate(0deg);
    filter: hue-rotate(0deg);
  }
  50% {
    transform: scale(1.002) rotate(0.5deg);
    filter: hue-rotate(5deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  :root .Root__top-bar header::before,
  :root .main-topBar-container::before {
    animation: none !important;
  }
  :root .Root__top-bar header *,
  :root .main-topBar-container * {
    transition-duration: 0.1s !important;
    transform: none !important;
    animation: none !important;
  }
}
@media (prefers-contrast: high) {
  :root {
    --sn-topbar-gradient-opacity: 0.25;
    --sn-search-effect-intensity: 1;
  }
  :root .x-searchInput-searchInputInput {
    border-width: 3px !important;
  }
  :root button:not(.x-searchInput-searchInputClearButton),
  :root .main-topBar-button {
    border-width: 2px !important;
  }
}
@media (max-width: 768px) {
  :root {
    --sn-topbar-gradient-opacity: 0.08;
    --sn-button-glow-radius: calc(
      3px + var(--sn-music-beat-pulse-intensity, 0) * 6px
    );
  }
  :root .Root__top-bar header .x-searchInput-searchInputInput,
  :root .main-topBar-container .x-searchInput-searchInputInput {
    border-radius: 20px;
  }
}
@media (max-resolution: 1dppx) {
  :root .Root__top-bar header,
  :root .main-topBar-container {
    backdrop-filter: none;
  }
  :root .Root__top-bar header::before,
  :root .main-topBar-container::before {
    display: none;
  }
}
/* ═══════════════════════════════════════════════════════════════════════════════
   🌟 YEAR 3000 HEADER VISUAL EFFECTS VARIABLES
   Technology that synchronizes with the music's dynamic response
   ═══════════════════════════════════════════════════════════════════════════════ */
:root {
  --header-musical-response: 0.6;
  --header-transition: calc(var(--choreography-harmony-sync, 0.8s) * 0.7)
    var(--sn-anim-easing-organic);
  --header-cosmic-depth: calc(
    var(--cosmic-depth-layers, 80px) * 0.4
  );
  --header-cosmic-blur: calc(
    var(--cosmic-blur-poetry, 12px) * 0.8
  );
  --header-interface-glow: rgba(
    var(--sn-accent-rgb, var(--spice-rgb-accent)),
    calc(var(--ethereal-glow-base, 0.2) * 0.4)
  );
  --sn-action-bar-intensity: 0.2;
  --sn-action-bar-animation-rate: 8s;
  --sn-action-bar-primary-rgb: var(--sn-color-harmony-complementary-rgb);
  --sn-action-bar-secondary-rgb: var(--sn-cosmic-secondary-rgb);
  --sn-action-bar-accent-rgb: var(--sn-oklab-accent-rgb);
  --header-visual-effects-flow-speed: calc(
    var(--sn-action-bar-animation-rate) * 0.8
  );
  --header-visual-effects-energy: 0.5;
  --header-visual-effects-harmony: 0deg;
  --header-visual-effects-depth: 1;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   🚫 SEARCH EXCLUSION GUARD - Header Visual Effects DISABLED in Search
   ═══════════════════════════════════════════════════════════════════════════════ */
body:not(:has(.main-searchPage-content)) {
  /* ═══════════════════════════════════════════════════════════════════════════════
     🎯 ACTION BAR VISUAL EFFECTS - Music-Responsive Background
     ═══════════════════════════════════════════════════════════════════════════════ */
  /* ═══════════════════════════════════════════════════════════════════════════════
     🎯 ACTION BAR ROW - Harmonic Oscillation & Beat Sync
     ═══════════════════════════════════════════════════════════════════════════════ */
  /* ═══════════════════════════════════════════════════════════════════════════════
     🎮 PLAYBACK CONTROL BUTTONS - Beat-Responsive Glow
     ═══════════════════════════════════════════════════════════════════════════════ */
}
body:not(:has(.main-searchPage-content)) .main-actionBarBackground-background,
body:not(:has(.main-searchPage-content)) [class*=actionBarBackground],
body:not(:has(.main-searchPage-content)) .main-actionBar-ActionBarRow::before {
  position: absolute;
  top: -16px;
  left: -16px;
  right: -16px;
  bottom: -16px;
  z-index: -1;
  pointer-events: none;
  background-color: transparent !important;
  background: radial-gradient(ellipse 400% 120% at 25% 50%, oklab-color("complementary", var(--sn-action-bar-intensity)) 0%, transparent 45%), radial-gradient(ellipse 300% 100% at 75% 50%, oklab-color("secondary", calc(var(--sn-action-bar-intensity) * 0.8)) 0%, transparent 40%), linear-gradient(90deg, oklab-color("accent", var(--sn-action-bar-intensity)) 0%, transparent 25%, oklab-color("accent", calc(var(--sn-action-bar-intensity) * 0.4)) 60%, transparent 100%) !important;
  border-radius: 20px 28px 24px 32px;
  filter: blur(var(--header-cosmic-blur)) saturate(calc(var(--cosmic-saturation, 1.4) * 0.9)) brightness(calc(1 + 0.08 * var(--header-interface-intensity)));
  animation: header-dynamic-visual-effects var(--header-visual-effects-flow-speed) ease-in-out infinite;
  opacity: calc(var(--header-interface-intensity) * 0.6);
  transition: all var(--header-transition);
}
body:not(:has(.main-searchPage-content)) .main-actionBarBackground-background:hover,
body:not(:has(.main-searchPage-content)) [class*=actionBarBackground]:hover,
body:not(:has(.main-searchPage-content)) .main-actionBar-ActionBarRow::before:hover {
  opacity: calc(var(--header-interface-intensity) * 0.9);
  filter: blur(calc(var(--header-cosmic-blur) * 1.1)) saturate(calc(var(--cosmic-saturation, 1.4) * 1.1)) brightness(calc(1 + 0.15 * var(--header-interface-intensity)));
}
body:not(:has(.main-searchPage-content)) .main-actionBar-ActionBarRow,
body:not(:has(.main-searchPage-content)) [class*=actionBar-ActionBarRow],
body:not(:has(.main-searchPage-content)) [data-testid*=action-bar] {
  background: linear-gradient(calc(135deg + var(--sn-music-rhythm-phase, 0) * 5deg), rgba(var(--sn-header-primary-rgb, var(--spice-rgb-accent)), calc(var(--sn-header-intensity, 0.2) * 0.85)) 0%, rgba(var(--sn-header-secondary-rgb, var(--spice-rgb-surface0)), calc(var(--sn-header-intensity, 0.2) * 0.75)) 50%, rgba(var(--sn-header-accent-rgb, var(--spice-rgb-surface1)), calc(var(--sn-header-intensity, 0.2) * 0.65)) 100%) !important;
  backdrop-filter: blur(15px) saturate(calc(1.15 + (var(--sn-music-breathing-scale, 1) - 1) * 0.3));
  transition: background 800ms var(--sn-anim-easing-organic);
  filter: hue-rotate(calc(var(--sn-music-rhythm-phase, 0) * 2deg)) brightness(calc(1 + var(--sn-music-beat-pulse-intensity, 0) * 0.1));
  position: relative;
  z-index: 1;
  transform: translateZ(0);
  transition: box-shadow var(--sn-transition-fast);
}
body:not(:has(.main-searchPage-content)) .main-actionBar-ActionBarRow::after,
body:not(:has(.main-searchPage-content)) [class*=actionBar-ActionBarRow]::after,
body:not(:has(.main-searchPage-content)) [data-testid*=action-bar]::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  top: 50%;
  height: 4px;
  transform: translateY(-50%);
  background: rgba(var(--sn-accent-rgb, var(--spice-rgb-accent)), calc(0.7 * var(--sn-music-beat-pulse-intensity, 0)));
  border-radius: 2px;
  transition: opacity 120ms var(--sn-anim-easing-bounce-medium);
  z-index: -1;
}
body:not(:has(.main-searchPage-content)) .main-actionBar-ActionBar,
body:not(:has(.main-searchPage-content)) [class*=actionBar-ActionBar]:not([class*=Row]) {
  position: relative;
  z-index: 2;
  transition: all var(--header-transition);
}
body:not(:has(.main-searchPage-content)) .main-actionBar-ActionBar:hover,
body:not(:has(.main-searchPage-content)) [class*=actionBar-ActionBar]:not([class*=Row]):hover {
  filter: brightness(calc(1 + 0.05 * var(--header-interface-intensity))) saturate(calc(1 + 0.1 * var(--header-interface-intensity)));
}
body:not(:has(.main-searchPage-content)) button[data-testid=play-button],
body:not(:has(.main-searchPage-content)) button[data-testid=pause-button],
body:not(:has(.main-searchPage-content)) button[data-testid=control-button-shuffle],
body:not(:has(.main-searchPage-content)) button[data-testid*=control-button],
body:not(:has(.main-searchPage-content)) .main-playButton-PlayButton,
body:not(:has(.main-searchPage-content)) .main-shuffleButton-button,
body:not(:has(.main-searchPage-content)) .main-button-button {
  transform: translateZ(0);
  transition: box-shadow 120ms var(--sn-anim-easing-bounce-medium);
  text-shadow: 0 0 5px rgba(var(--spice-rgb-shadow), 0.3);
  box-shadow: 0 0 calc(8px * var(--sn-music-beat-pulse-intensity, 0)) rgba(var(--sn-accent-rgb, var(--spice-rgb-accent)), calc(0.4 * var(--sn-music-beat-pulse-intensity, 0)));
}

/* ═══════════════════════════════════════════════════════════════════════════════
   🚫 SEARCH AREAS - Complete Respect Mode
   ═══════════════════════════════════════════════════════════════════════════════ */
.main-searchPage-content .main-actionBarBackground-background,
.main-searchPage-content [class*=actionBarBackground],
.main-searchPage-content .main-actionBar-ActionBarRow::before {
  opacity: 0.05 !important;
}
.main-searchPage-content .main-actionBar-ActionBarRow,
.main-searchPage-content [class*=actionBar-ActionBarRow],
.main-searchPage-content [data-testid*=action-bar] {
  animation-duration: 30s !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   🎬 VISUAL EFFECTS ANIMATIONS - Movements that feel dynamic and musically connected
   ═══════════════════════════════════════════════════════════════════════════════ */
@keyframes header-dynamic-visual-effects {
  0%, 100% {
    filter: blur(var(--header-cosmic-blur)) saturate(calc(var(--cosmic-saturation, 1.4) * (0.9 + var(--header-visual-effects-energy) * 0.1))) brightness(calc(1 + 0.08 * var(--header-interface-intensity) + var(--header-visual-effects-energy) * 0.05)) hue-rotate(calc(var(--header-visual-effects-harmony) + 0deg)) contrast(calc(1 + var(--header-visual-effects-energy) * 0.05));
    opacity: calc(var(--header-interface-intensity) * (0.6 + var(--header-visual-effects-energy) * 0.1));
  }
  25% {
    filter: blur(calc(var(--header-cosmic-blur) * (1.1 - var(--header-visual-effects-energy) * 0.05))) saturate(calc(var(--cosmic-saturation, 1.4) * (1.1 + var(--header-visual-effects-energy) * 0.2))) brightness(calc(1 + 0.12 * var(--header-interface-intensity) + var(--header-visual-effects-energy) * 0.08)) hue-rotate(calc(var(--header-visual-effects-harmony) + 8deg)) contrast(calc(1.05 + var(--header-visual-effects-energy) * 0.1));
    opacity: calc(var(--header-interface-intensity) * (0.75 + var(--header-visual-effects-energy) * 0.15));
  }
  50% {
    filter: blur(calc(var(--header-cosmic-blur) * (0.9 + var(--header-visual-effects-energy) * 0.1))) saturate(calc(var(--cosmic-saturation, 1.4) * (1 + var(--header-visual-effects-energy) * 0.3))) brightness(calc(1 + 0.15 * var(--header-interface-intensity) + var(--header-visual-effects-energy) * 0.12)) hue-rotate(calc(var(--header-visual-effects-harmony) + 15deg)) contrast(calc(1.08 + var(--header-visual-effects-energy) * 0.15));
    opacity: calc(var(--header-interface-intensity) * (0.8 + var(--header-visual-effects-energy) * 0.2));
  }
  75% {
    filter: blur(calc(var(--header-cosmic-blur) * (1.05 - var(--header-visual-effects-energy) * 0.03))) saturate(calc(var(--cosmic-saturation, 1.4) * (0.95 + var(--header-visual-effects-energy) * 0.15))) brightness(calc(1 + 0.1 * var(--header-interface-intensity) + var(--header-visual-effects-energy) * 0.06)) hue-rotate(calc(var(--header-visual-effects-harmony) - 5deg)) contrast(calc(1.03 + var(--header-visual-effects-energy) * 0.08));
    opacity: calc(var(--header-interface-intensity) * (0.7 + var(--header-visual-effects-energy) * 0.12));
  }
}
/* ═══════════════════════════════════════════════════════════════════════════════
   ♿ ACCESSIBILITY & PERFORMANCE WITH VISUAL EFFECTS
   ═══════════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  :root {
    --header-interface-animation-rate: 30s;
  }
  * {
    animation-duration: 30s !important;
  }
}
@media (max-width: 768px) {
  :root {
    --header-cosmic-blur: 6px;
    --header-cosmic-depth: 30px;
  }
}
@media (prefers-contrast: high) {
  :root {
    --header-interface-intensity: 1.0;
  }
}
/* ═══════════════════════════════════════════════════════════════════════════════
   🔄 LEGACY COMPATIBILITY ALIASES
   Ensures backward compatibility during transition
   ═══════════════════════════════════════════════════════════════════════════════ */
:root {
  --header-soul-intensity: var(--header-interface-intensity);
  --header-soul-breath-rate: var(--header-interface-animation-rate);
  --header-soul-primary: var(--header-interface-primary);
  --header-soul-secondary: var(--header-interface-secondary);
  --header-soul-accent: var(--header-interface-accent);
  --header-soul-whisper: var(--header-interface-glow);
}

div.Root__right-sidebar[data-testid=right-sidebar],
.Root__right-sidebar {
  --spice-main-elevated: rgba(var(--sn-accent-rgb, 128, 128, 128), 0.05);
}
div.Root__right-sidebar[data-testid=right-sidebar] .Button-textSubdued-sm-16-buttonTertiary-condensed-useBrowserDefaultFocusStyle,
.Root__right-sidebar .Button-textSubdued-sm-16-buttonTertiary-condensed-useBrowserDefaultFocusStyle {
  color: var(--spice-text) !important;
}
div.Root__right-sidebar[data-testid=right-sidebar] .artist-artistOnTour-timeAndVenue.artist-artistOnTour-condensed,
.Root__right-sidebar .artist-artistOnTour-timeAndVenue.artist-artistOnTour-condensed {
  color: var(--spice-text);
}
div.Root__right-sidebar[data-testid=right-sidebar] .Button-textSubdued-sm-16-buttonTertiary-condensed-isUsingKeyboard-useBrowserDefaultFocusStyle,
.Root__right-sidebar .Button-textSubdued-sm-16-buttonTertiary-condensed-isUsingKeyboard-useBrowserDefaultFocusStyle {
  color: var(--spice-text);
}
div.Root__right-sidebar[data-testid=right-sidebar] .main-buddyFeed-activityMetadata .main-buddyFeed-username a,
div.Root__right-sidebar[data-testid=right-sidebar] .main-buddyFeed-activityMetadata .main-buddyFeed-usernameAndTimestamp,
.Root__right-sidebar .main-buddyFeed-activityMetadata .main-buddyFeed-username a,
.Root__right-sidebar .main-buddyFeed-activityMetadata .main-buddyFeed-usernameAndTimestamp {
  color: rgba(var(--spice-rgb-text), 0.2);
}
div.Root__right-sidebar[data-testid=right-sidebar] .main-buddyFeed-activityMetadata .main-buddyFeed-artistAndTrackName a,
div.Root__right-sidebar[data-testid=right-sidebar] .main-buddyFeed-activityMetadata .main-buddyFeed-playbackContextLink,
div.Root__right-sidebar[data-testid=right-sidebar] .main-buddyFeed-activityMetadata .main-buddyFeed-timestamp,
.Root__right-sidebar .main-buddyFeed-activityMetadata .main-buddyFeed-artistAndTrackName a,
.Root__right-sidebar .main-buddyFeed-activityMetadata .main-buddyFeed-playbackContextLink,
.Root__right-sidebar .main-buddyFeed-activityMetadata .main-buddyFeed-timestamp {
  color: rgba(var(--spice-rgb-text), 0.8);
}

:root {
  --sn-entity-header-primary-rgb: var(--sn-color-harmony-analogous-rgb);
  --sn-entity-header-secondary-rgb: var(--sn-cosmic-secondary-rgb);
  --sn-entity-header-accent-rgb: var(--sn-oklab-accent-rgb);
  --sn-entity-header-intensity: 0.2;
}

.main-entityHeader-container,
[data-testid*=entity-header],
[class*=entityHeader] {
  position: relative;
  background: radial-gradient(ellipse 400% 150% at 50% 20%, rgba(var(--sn-color-harmony-analogous-rgb, 128, 128, 128), var(--sn-entity-header-intensity)) 0%, transparent 45%), radial-gradient(ellipse 300% 120% at 50% 60%, rgba(var(--sn-bg-gradient-secondary-rgb, 96, 96, 96), calc(var(--sn-entity-header-intensity) * 0.8)) 0%, transparent 40%), linear-gradient(145deg, rgba(var(--sn-accent-rgb, 128, 128, 128), var(--sn-entity-header-intensity)) 0%, transparent 30%, rgba(var(--sn-accent-rgb, 128, 128, 128), calc(var(--sn-entity-header-intensity) * 0.4)) 70%, transparent 100%);
  border-radius: 16px 20px 18px 22px;
  filter: blur(var(--header-cosmic-blur, 12px)) saturate(calc(var(--cosmic-saturation, 1.4) * 0.9)) brightness(calc(1 + 0.08 * var(--sn-entity-header-intensity)));
  transition: background 800ms var(--sn-anim-easing-organic), filter 800ms var(--sn-anim-easing-organic);
}
.main-entityHeader-container .main-entityHeader-backgroundColor,
[data-testid*=entity-header] .main-entityHeader-backgroundColor,
[class*=entityHeader] .main-entityHeader-backgroundColor {
  background: transparent !important;
}
.main-entityHeader-container .main-entityHeader-backgroundOverColorGradient,
[data-testid*=entity-header] .main-entityHeader-backgroundOverColorGradient,
[class*=entityHeader] .main-entityHeader-backgroundOverColorGradient {
  background: transparent !important;
}
.main-entityHeader-container .main-entityHeader-imageContainer,
.main-entityHeader-container .main-entityHeader-image,
.main-entityHeader-container [class*=entityHeader-image],
[data-testid*=entity-header] .main-entityHeader-imageContainer,
[data-testid*=entity-header] .main-entityHeader-image,
[data-testid*=entity-header] [class*=entityHeader-image],
[class*=entityHeader] .main-entityHeader-imageContainer,
[class*=entityHeader] .main-entityHeader-image,
[class*=entityHeader] [class*=entityHeader-image] {
  position: relative;
  z-index: 1;
}
.main-entityHeader-container .main-entityHeader-headerText,
[data-testid*=entity-header] .main-entityHeader-headerText,
[class*=entityHeader] .main-entityHeader-headerText {
  position: relative;
  z-index: 1;
}
.main-entityHeader-container::before,
[data-testid*=entity-header]::before,
[class*=entityHeader]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(45deg, transparent 30%, rgba(var(--sn-accent-rgb, 128, 128, 128), calc(0.1 + var(--sn-music-beat-pulse-intensity, 0) * 0.05)) 50%, transparent 70%), radial-gradient(ellipse 120% 100% at 50% 50%, transparent 40%, rgba(var(--sn-color-harmony-analogous-rgb, 128, 128, 128), 0.08) 60%, transparent 80%);
  backdrop-filter: blur(20px) brightness(calc(1.2 + var(--sn-music-beat-pulse-intensity, 0) * 0.05)) contrast(1.1);
  border: 1px solid rgba(var(--sn-accent-rgb, 128, 128, 128), calc(0.3 + var(--sn-music-beat-pulse-intensity, 0) * 0.15));
  border-radius: 16px 20px 18px 22px;
  box-shadow: inset 0 1px 0 rgba(var(--sn-oklab-highlight-rgb, 255, 255, 255), 0.1), 0 0 20px rgba(var(--sn-accent-rgb, 128, 128, 128), 0.2), 0 0 40px rgba(var(--sn-accent-rgb, 128, 128, 128), 0.1);
  animation: holographic-pulse 3s ease-in-out infinite;
  transition: backdrop-filter 300ms ease-out, border-color 300ms ease-out;
}

@keyframes holographic-pulse {
  0%, 100% {
    transform: scale(1) perspective(1000px) rotateX(0deg);
    filter: hue-rotate(0deg);
  }
  50% {
    transform: scale(1.02) perspective(1000px) rotateX(1deg);
    filter: hue-rotate(10deg);
  }
}
:root {
  --artist-aura-intensity: calc(
    var(--header-soul-intensity, 0.6) * 0.8
  );
  --artist-aura-field-radius: calc(
    var(--header-cosmic-depth, 80px) * 2
  );
  --artist-aura-breathing-sync: var(
    --header-soul-breath-rate, 8s
  );
  --artist-aura-signature-primary: var(
    --header-soul-primary,
    rgba(var(--sn-accent-rgb, var(--spice-rgb-accent)), 0.18)
  );
  --artist-aura-signature-secondary: var(
    --header-soul-secondary,
    rgba(var(--sn-accent-rgb, var(--spice-rgb-surface0)), 0.14)
  );
  --artist-aura-signature-accent: var(
    --header-soul-accent,
    rgba(var(--sn-accent-rgb, var(--spice-rgb-accent)), 0.2)
  );
  --aura-cascade-strength: 0.3;
  --aura-cascade-falloff: 0.7;
  --aura-cascade-transition: calc(
    var(--header-transition, 0.8s) * 1.2
  );
  --aura-performance-mode: 1;
  --aura-memory-optimization: 1;
}

.main-view-container:has([data-testid*=artist]),
.main-view-container:has([aria-label*=Artist]),
[data-testid*=artist-page],
body:has(.main-entityHeader-container) .main-view-container {
  position: relative;
}
.main-view-container:has([data-testid*=artist])::before,
.main-view-container:has([aria-label*=Artist])::before,
[data-testid*=artist-page]::before,
body:has(.main-entityHeader-container) .main-view-container::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -10;
  pointer-events: none;
  background: radial-gradient(ellipse 800% 300% at 50% 20%, var(--artist-aura-signature-primary) 0%, transparent 35%), linear-gradient(180deg, var(--artist-aura-signature-secondary) 0%, transparent 25%, var(--artist-aura-signature-accent) 75%, transparent 100%), conic-gradient(from 0deg at 50% 20%, transparent 0%, var(--artist-aura-signature-primary) 25%, transparent 50%, var(--artist-aura-signature-accent) 75%, transparent 100%);
  filter: blur(calc(var(--header-cosmic-blur, 4px) * 1.5)) saturate(calc(var(--cosmic-saturation, 1.4) * 0.6)) brightness(calc(1 + 0.04 * var(--artist-aura-intensity)));
  animation: artist-aura-breathing var(--artist-aura-breathing-sync) ease-in-out infinite;
  opacity: calc(var(--artist-aura-intensity) * var(--aura-performance-mode) * 0.4);
  transition: all var(--aura-cascade-transition);
}
.main-view-container:has([data-testid*=artist]) .main-entityHeader-container,
.main-view-container:has([data-testid*=artist]) [data-testid*=entity-header],
.main-view-container:has([data-testid*=artist]) [class*=entityHeader],
.main-view-container:has([aria-label*=Artist]) .main-entityHeader-container,
.main-view-container:has([aria-label*=Artist]) [data-testid*=entity-header],
.main-view-container:has([aria-label*=Artist]) [class*=entityHeader],
[data-testid*=artist-page] .main-entityHeader-container,
[data-testid*=artist-page] [data-testid*=entity-header],
[data-testid*=artist-page] [class*=entityHeader],
body:has(.main-entityHeader-container) .main-view-container .main-entityHeader-container,
body:has(.main-entityHeader-container) .main-view-container [data-testid*=entity-header],
body:has(.main-entityHeader-container) .main-view-container [class*=entityHeader] {
  position: relative;
  z-index: 2;
  --header-soul-intensity: calc(var(--artist-aura-intensity) * 1.2);
  --header-soul-primary: var(--artist-aura-signature-primary);
  --header-soul-secondary: var(--artist-aura-signature-secondary);
  --header-soul-accent: var(--artist-aura-signature-accent);
}
.main-view-container:has([data-testid*=artist]) .main-content,
.main-view-container:has([aria-label*=Artist]) .main-content,
[data-testid*=artist-page] .main-content,
body:has(.main-entityHeader-container) .main-view-container .main-content {
  position: relative;
}
.main-view-container:has([data-testid*=artist]) .main-content::before,
.main-view-container:has([aria-label*=Artist]) .main-content::before,
[data-testid*=artist-page] .main-content::before,
body:has(.main-entityHeader-container) .main-view-container .main-content::before {
  content: "";
  position: absolute;
  inset: -8px;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(var(--artist-aura-signature-primary) 0%, transparent 20%);
  background-size: 200% 200%;
  border-radius: 12px;
  opacity: calc(var(--artist-aura-intensity) * var(--aura-cascade-strength) * 0.15);
  transition: opacity var(--aura-cascade-transition);
}
.main-view-container:has([data-testid*=artist]) .main-content:hover::before,
.main-view-container:has([aria-label*=Artist]) .main-content:hover::before,
[data-testid*=artist-page] .main-content:hover::before,
body:has(.main-entityHeader-container) .main-view-container .main-content:hover::before {
  opacity: calc(var(--artist-aura-intensity) * var(--aura-cascade-strength) * 0.35);
  animation: nebula-holographic-flow 18s ease-in-out infinite;
}

@keyframes artist-aura-breathing {
  0%, 100% {
    transform: scale(1);
    filter: brightness(1) saturate(0.6);
  }
  25% {
    transform: scale(1.02);
    filter: brightness(1.05) saturate(0.8);
  }
  50% {
    transform: scale(1.04);
    filter: brightness(1.08) saturate(0.9);
  }
  75% {
    transform: scale(1.03);
    filter: brightness(1.03) saturate(0.7);
  }
}
@media (prefers-reduced-motion: reduce) {
  :root {
    --artist-aura-intensity: 0.2;
    --aura-performance-mode: 0.5;
    --artist-aura-breathing-sync: 30s;
  }
  .main-view-container::before {
    animation-duration: 30s !important;
    filter: blur(6px) !important;
  }
}
@media (prefers-contrast: high) {
  :root {
    --artist-aura-intensity: 0.8;
    --aura-cascade-strength: 0.5;
  }
}
@media (max-width: 768px) {
  :root {
    --artist-aura-intensity: 0.3;
    --aura-performance-mode: 0.6;
  }
  .main-view-container::before {
    background: radial-gradient(ellipse 400% 200% at 50% 20%, var(--artist-aura-signature-primary) 0%, transparent 40%) !important;
  }
}
@supports not (backdrop-filter: blur(1px)) {
  .main-view-container::before {
    opacity: calc(var(--artist-aura-intensity) * 0.2) !important;
    filter: blur(3px) !important;
  }
}
.Root__main-view .main-view-container__scroll-node {
  position: relative;
  isolation: isolate;
}
.Root__main-view .main-view-container__scroll-node::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -2;
  background: radial-gradient(ellipse at center, rgba(var(--sn-nebula-layer-3-color-rgb), calc(var(--sn-nebula-layer-3-opacity, 0.03) * var(--sn-nebula-beat-intensity, 1))) 0%, transparent 60%), radial-gradient(ellipse at center, rgba(var(--sn-nebula-layer-2-color-rgb), calc(var(--sn-nebula-layer-2-opacity, 0.04) * var(--sn-nebula-beat-intensity, 1))) 0%, transparent 70%), radial-gradient(circle at center, rgba(var(--sn-nebula-layer-1-color-rgb), calc(var(--sn-nebula-layer-1-opacity, 0.05) * var(--sn-nebula-beat-intensity, 1))) 0%, transparent 85%), radial-gradient(circle at center, rgba(var(--sn-nebula-layer-0-color-rgb), calc(var(--sn-nebula-layer-0-opacity, 0.05) * var(--sn-nebula-beat-intensity, 1))) 0%, transparent 100%);
  transition-property: background, --sn-nebula-ease-t;
  transition-duration: 600ms, 800ms;
  transition-timing-function: ease, var(--sn-anim-easing-standard);
  /* Apply softening blur & hint to compositor */
  filter: blur(var(--sn-nebula-layer-3-blur, var(--sn-nebula-max-blur, 12px)));
  will-change: filter;
  /* ------------------------------------------------------------------ */
  /*  Header Mask – prevent overlay bleeding into playlist/album header  */
  /* ------------------------------------------------------------------ */
  mask-image: linear-gradient(to bottom, transparent var(--sn-header-height, 112px), black calc(var(--sn-header-height, 112px) + 1px));
  -webkit-mask-image: linear-gradient(to bottom, transparent var(--sn-header-height, 112px), black calc(var(--sn-header-height, 112px) + 1px));
}
@supports (background: radial-gradient(circle at center, transparent calc(1%))) {
  .Root__main-view .main-view-container__scroll-node::before {
    background: radial-gradient(ellipse at center, rgba(var(--sn-nebula-layer-3-color-rgb), calc(var(--sn-nebula-layer-3-opacity, 0.03) * var(--sn-nebula-beat-intensity, 1))) 0%, transparent clamp(0%, 45% * (1 - var(--sn-nebula-ease-t, 0)), 90%)), radial-gradient(ellipse at center, rgba(var(--sn-nebula-layer-2-color-rgb), calc(var(--sn-nebula-layer-2-opacity, 0.04) * var(--sn-nebula-beat-intensity, 1))) 0%, transparent clamp(0%, 55% * (1 - var(--sn-nebula-ease-t, 0)), 95%)), radial-gradient(circle at center, rgba(var(--sn-nebula-layer-1-color-rgb), calc(var(--sn-nebula-layer-1-opacity, 0.05) * var(--sn-nebula-beat-intensity, 1))) 0%, transparent clamp(0%, 75% * (1 - var(--sn-nebula-ease-t, 0)), 98%)), radial-gradient(circle at center, rgba(var(--sn-nebula-layer-0-color-rgb), calc(var(--sn-nebula-layer-0-opacity, 0.05) * var(--sn-nebula-beat-intensity, 1))) 0%, transparent 100%);
  }
}
.Root__main-view .main-view-container__scroll-node::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -3;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc2NCcgaGVpZ2h0PSc2NCc+PGZpbHRlciBpZD0nZic+PGZlVHVyYnVsZW5jZSB0eXBlPSdmcmFjdGFsTm9pc2UnIGJhc2VGcmVxdWVuY3k9Jy4yJyBudW1PY3RhdmVzPSc0JyBzdGl0Y2hUaWxlcz0nc3RpdGNoJy8+PC9maWx0ZXI+PHJlY3Qgd2lkdGg9JzEwMCUnIGhlaWdodD0nMTAwJScgZmlsdGVyPSd1cmwoI2YpJy8+PC9zdmc+");
  background-repeat: repeat;
  background-size: 300% var(--sn-nebula-noise-scale-y, 150%);
  opacity: var(--sn-nebula-noise-opacity, 0.06);
  mix-blend-mode: var(--sn-nebula-blend-mode, color-dodge);
}

/* =============================================================================
   CARD BASE LAYER – shared structural styles (Phase 2)
   -----------------------------------------------------------------------------
   Purpose: Provide a single source of truth for fundamental card attributes
   that must be consistent across all card types and variants.

   Supports both legacy (.main-card-card) and current (.main-card-cardContainer)
   Spotify DOM structures for maximum compatibility.

   This file MUST contain **no high-intensity motion** – keep it gentle so that
   additional layers can opt-in to heavier effects.
============================================================================= */
.main-gridContainer-gridContainer {
  perspective: 800px;
  perspective-origin: center;
}

.main-card-card,
.main-card-cardContainer {
  position: relative;
  border-radius: var(--sn-card-stellar-radius, var(--card-border-radius, 12px));
  overflow: hidden;
  isolation: isolate;
  background: rgba(var(--section-background-base, var(--spice-rgb-surface0, 28, 28, 30)), 0.08);
  filter: drop-shadow(0 1px 4px rgba(var(--sn-oklab-shadow-rgb, 0, 0, 0), 0.06));
  transition: box-shadow 0.3s ease, background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
  will-change: transform, opacity, filter;
  transform: translateZ(0);
  backface-visibility: hidden;
  contain: layout style paint;
}
.main-card-card:focus-visible,
.main-card-cardContainer:focus-visible {
  outline: 2px solid var(--spice-accent, #f5c2e7);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .main-card-card,
  .main-card-cardContainer {
    transition-duration: 0.15s !important;
    animation: none !important;
  }
}

@keyframes fluid-breathing {
  0%, 100% {
    border-radius: 48% 52% 53% 47%/51% 49% 52% 48%;
    transform: rotate(0deg) scale(1) skewX(0deg);
  }
  25% {
    border-radius: 52% 48% 47% 53%/49% 51% 48% 52%;
    transform: rotate(1deg) scale(1.005) skewX(0.5deg);
  }
  50% {
    border-radius: 47% 53% 52% 48%/52% 48% 51% 49%;
    transform: rotate(0deg) scale(1.01) skewX(0deg);
  }
  75% {
    border-radius: 53% 47% 48% 52%/48% 52% 49% 51%;
    transform: rotate(-1deg) scale(1.005) skewX(-0.5deg);
  }
}
@keyframes fluid-awakening {
  0%, 100% {
    border-radius: 48% 52% 53% 47%/51% 49% 52% 48%;
    transform: rotate(0deg) scale(1) skewX(0deg);
  }
  25% {
    border-radius: 60% 40% 45% 55%/42% 58% 48% 52%;
    transform: rotate(-3deg) scale(1.02) skewX(-1deg);
  }
  50% {
    border-radius: 43% 57% 48% 52%/55% 45% 53% 47%;
    transform: rotate(2deg) scale(1.04) skewX(0.5deg);
  }
  75% {
    border-radius: 53% 47% 48% 52%/48% 52% 49% 51%;
    transform: rotate(-1deg) scale(1.005) skewX(-0.5deg);
  }
}
@keyframes metallic-coalescence {
  0% {
    transform: scale(1) translateX(0);
    border-radius: 50%;
    opacity: 1;
  }
  30% {
    transform: scale(1.2) translateX(5px);
    border-radius: 60% 40% 50% 50%;
    opacity: 0.8;
  }
  60% {
    transform: scale(0.8) translateX(-3px);
    border-radius: 40% 60% 45% 55%;
    opacity: 0.9;
  }
  100% {
    transform: scale(1) translateX(0);
    border-radius: 50%;
    opacity: 1;
  }
}
@keyframes fluid-ripple {
  0%, 100% {
    transform: scale(1) rotate(0deg);
    opacity: 0;
    border-radius: 50%;
  }
  50% {
    transform: scale(2) rotate(180deg);
    opacity: 1;
    border-radius: 40% 60% 30% 70%;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: var(--sn-transition-slow-duration, 0.8s) !important;
    animation-timing-function: linear !important;
  }
}
@media (max-width: 768px) {
  @keyframes fluid-breathing {
    0%, 100% {
      border-radius: 12px;
      transform: none;
    }
    50% {
      border-radius: 16px;
      transform: scale(1.01);
    }
  }
}
:root {
  --sn-harmonic-aura-alpha-base: 0.04;
  --sn-harmonic-aura-alpha-dynamic: calc(var(--card-beat-intensity, 0) * 0.12);
  --sn-harmonic-aura-blur-base: 10px;
  --sn-harmonic-aura-blur-dynamic: calc(var(--card-beat-intensity, 0) * 6px);
  --card-visual-depth: 16px;
  --card-effect-field-radius: 20px;
  --card-connection-strength: 0.8;
  --card-expansion-factor: 1.08;
  --card-smooth-fluidity: var(--sn-anim-easing-emergence);
  --card-dynamic-corners: 16px;
  --card-depth-near: translateZ(12px);
  --card-depth-mid: translateZ(6px);
  --card-depth-far: translateZ(0px);
  --card-perspective-field: 1200px;
  --card-effect-pulse-rate: 3s;
  --card-effect-threshold: 0.25s;
  --card-effect-dissipation: 0.8s;
  --card-harmonic-resonance: 1;
  --card-effect-base-alpha: 0.015;
  --card-effect-beat-factor: var(--sn-visual-beat-intensity, 0);
  --card-effect-context-factor: var(--motion-intelligence-level);
  --card-effect-alpha: clamp(
    0.015,
    calc(
      (var(--card-effect-base-alpha) * var(--card-effect-context-factor)) +
      (var(--card-effect-beat-factor) * 0.05)
    ),
    0.12
  );
  --motion-intelligence-level: 1;
  --focus-mode-dampening: 0.25;
  --discovery-mode-amplification: 1.4;
  --music-effect-modulation: 1;
  --card-color-primary: rgba(
    var(--sn-accent-rgb, var(--sn-accent-rgb, 202,158,230)),
    0.8
  );
  --card-color-secondary: rgba(
    var(--sn-accent-rgb, var(--spice-rgb-surface0, 186,187,241)),
    0.6
  );
  --card-color-accent: rgba(
    var(--sn-accent-rgb, var(--sn-accent-rgb, 140,170,238)),
    0.7
  );
  --card-color-ambient: rgba(
    var(--spice-rgb-surface0, 65,69,89),
    0.4
  );
  --card-beat-pulse-multiplier: 1;
  --card-rhythm-animation: 1;
  --card-beat-intensity: var(
    --sn-music-beat-pulse-intensity,
    0
  );
  --card-rhythm-phase: var(--sn-music-rhythm-phase, 0);
  --card-visual-mode: 0;
  --card-visual-connection: var(--visual-connection-strength, 0.7);
  --calculated-lift: calc(
    var(--card-visual-depth) * var(--motion-intelligence-level) *
      var(--card-harmonic-resonance) *
      (
        1 +
          (var(--card-beat-intensity) * var(--card-beat-pulse-multiplier) * 0.3)
      )
  );
  --calculated-scale: calc(
    1 +
      (0.05 * var(--motion-intelligence-level) * var(--card-harmonic-resonance)) +
      (var(--card-beat-intensity) * var(--card-beat-pulse-multiplier) * 0.02)
  );
  --calculated-transition: calc(
    var(--card-effect-dissipation) / var(--motion-intelligence-level)
  );
  --card-border-radius: 12px;
  --card-color-intensity: 0.08;
  --card-shadow-intensity: 0.12;
  --card-transition-speed: 0.3s;
  --card-shadow-base: rgba(var(--sn-oklab-shadow-rgb, 0, 0, 0), 0.12);
}

.main-entityHeader-container,
section[data-testid=component-shelf],
.main-shelf-shelf,
.main-gridContainer-gridContainer:not([data-context=search]),
[data-context=discovery] {
  --motion-intelligence-level: var(--discovery-mode-amplification);
  --card-harmonic-resonance: 1.2;
  --card-effect-pulse-rate: calc(var(--card-effect-pulse-rate) * 0.7);
}

section[data-testid=component-shelf] .main-gridContainer-gridContainer,
.main-shelf-shelf .main-gridContainer-gridContainer,
.main-gridContainer-gridContainer.main-shelf-shelfGrid {
  position: relative;
  --shelf-glow-base-opacity: 0.6;
  --shelf-glow-hover-opacity: 0.85;
  --shelf-glow-transition: calc(
    var(--sn-visual-effects-transition-duration, 0.6s) * 1.3
  );
}
section[data-testid=component-shelf] .main-gridContainer-gridContainer::before,
.main-shelf-shelf .main-gridContainer-gridContainer::before,
.main-gridContainer-gridContainer.main-shelf-shelfGrid::before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 16px;
  background: radial-gradient(ellipse at 50% 0%, rgba(var(--sn-accent-rgb), 0.15) 0%, transparent 40%), radial-gradient(circle at 0% 0%, rgba(var(--sn-accent-rgb), 0.12) 0%, transparent 60%), radial-gradient(circle at 100% 100%, rgba(var(--sn-accent-rgb), 0.1) 0%, transparent 60%), radial-gradient(circle at 50% 0%, rgba(var(--sn-accent-rgb), 0.15) 0%, transparent 70%), radial-gradient(circle at 0% 50%, rgba(var(--sn-accent-rgb), 0.12) 0%, transparent 70%);
  background-size: 200% 200%;
  border: 1px solid rgba(var(--sn-accent-rgb), 0.15);
  pointer-events: none;
  z-index: 0;
  animation: shelf-glow-flow 24s ease-in-out infinite, shelf-border-pulse 8s ease-in-out infinite;
}
section[data-testid=component-shelf] .main-gridContainer-gridContainer:hover::before,
.main-shelf-shelf .main-gridContainer-gridContainer:hover::before,
.main-gridContainer-gridContainer.main-shelf-shelfGrid:hover::before {
  animation: shelf-glow-flow 12s ease-in-out infinite, shelf-border-pulse 4s ease-in-out infinite;
}
section[data-testid=component-shelf] .main-gridContainer-gridContainer > *,
.main-shelf-shelf .main-gridContainer-gridContainer > *,
.main-gridContainer-gridContainer.main-shelf-shelfGrid > * {
  position: relative;
  z-index: 1;
}

@keyframes shelf-glow-flow {
  0% {
    background-position: 0% 0%, 0% 0%, 100% 100%, 50% 0%, 0% 50%;
    opacity: 0.3;
  }
  25% {
    background-position: 20% 80%, 20% 80%, 80% 20%, 70% 30%, 30% 70%;
    opacity: 0.8;
  }
  50% {
    background-position: 50% 50%, 40% 60%, 60% 40%, 90% 60%, 10% 40%;
    opacity: 0.4;
  }
  75% {
    background-position: 80% 20%, 60% 40%, 40% 60%, 30% 90%, 70% 10%;
    opacity: 0.7;
  }
  100% {
    background-position: 100% 0%, 0% 0%, 100% 100%, 50% 0%, 0% 50%;
    opacity: 0.3;
  }
}
@keyframes shelf-border-pulse {
  0%, 100% {
    border-color: rgba(var(--sn-accent-rgb), 0.15);
  }
  50% {
    border-color: rgba(var(--sn-accent-rgb), 0.35);
  }
}
.Root__nav-bar,
.main-yourLibrary-yourLibrary,
[data-context=navigation] {
  --motion-intelligence-level: 0.8;
  --card-harmonic-resonance: 0.9;
}

.Root__now-playing-bar:has(.main-trackList-playingIcon),
[data-context=playing] {
  --music-effect-modulation: 1.3;
  --card-effect-pulse-rate: calc(var(--card-effect-pulse-rate) * 0.6);
  --card-harmonic-resonance: calc(var(--card-harmonic-resonance) * 1.2);
}

.main-card-card,
.main-card-cardContainer {
  position: relative;
  perspective: var(--card-perspective-field);
  transform-style: preserve-3d;
  position: relative;
  background: linear-gradient(135deg, rgba(var(--sn-oklab-primary-rgb), 0.6) 0%, rgba(var(--sn-oklab-accent-rgb), 0.4) 100%);
  transform: translateZ(0);
  border-radius: var(--card-dynamic-corners);
  background: linear-gradient(calc(135deg + var(--card-rhythm-phase) * 2deg), rgba(var(--sn-accent-rgb, var(--spice-rgb-accent)), calc(0.05 + var(--card-beat-intensity) * 0.03)) 0%, rgba(var(--sn-accent-rgb, var(--spice-rgb-surface0)), calc(0.08 + var(--card-beat-intensity) * 0.04)) 50%, rgba(var(--sn-accent-rgb, var(--spice-rgb-surface1)), calc(0.03 + var(--card-beat-intensity) * 0.02)) 100%);
  border: 1px solid rgba(var(--sn-accent-rgb, var(--spice-rgb-accent)), 0.15);
  box-shadow: 0 4px calc(16px + 6px * var(--card-beat-intensity)) rgba(var(--sn-accent-rgb, 128, 128, 128), calc(0.05 + var(--card-beat-intensity) * 0.05)), 0 8px calc(24px + 8px * var(--card-beat-intensity)) rgba(var(--sn-oklab-shadow-rgb, 0, 0, 0), calc(0.08 + var(--card-beat-intensity) * 0.07)), inset 0 1px 0 rgba(var(--sn-oklab-highlight-rgb, 255, 255, 255), calc(0.07 + var(--card-beat-intensity) * 0.04));
  transition: transform var(--calculated-transition) var(--card-smooth-fluidity), box-shadow var(--calculated-transition) ease, background var(--calculated-transition) ease, border-color var(--calculated-transition) ease, backdrop-filter var(--calculated-transition) ease;
  will-change: transform, opacity, filter;
  transform: translateZ(0);
  backface-visibility: hidden;
  contain: layout style paint;
}
.main-card-card::after,
.main-card-cardContainer::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  filter: drop-shadow(0 0 calc(var(--sn-harmonic-aura-blur-base) + var(--sn-harmonic-aura-blur-dynamic)) rgba(var(--sn-accent-rgb, var(--spice-rgb-accent)), calc(var(--sn-harmonic-aura-alpha-base) + var(--sn-harmonic-aura-alpha-dynamic))));
  transition: filter 400ms ease-out;
  z-index: -1;
}
.main-card-card:hover::after,
.main-card-cardContainer:hover::after {
  filter: drop-shadow(0 0 calc(var(--sn-harmonic-aura-blur-base) * 1.4 + var(--sn-harmonic-aura-blur-dynamic)) rgba(var(--sn-accent-rgb, var(--spice-rgb-accent)), calc(var(--sn-harmonic-aura-alpha-base) * 1.4 + var(--sn-harmonic-aura-alpha-dynamic))));
}
.main-card-card[data-visual-enhanced], .main-card-card[data-consciousness-enhanced],
.main-card-cardContainer[data-visual-enhanced],
.main-card-cardContainer[data-consciousness-enhanced] {
  background-blend-mode: multiply;
  mix-blend-mode: screen;
}
.main-gridContainer-gridContainer:has([data-testid*=visual]) .main-card-card, .main-view-container:has([data-testid*=artist]) .main-card-card,
.main-gridContainer-gridContainer:has([data-testid*=visual]) .main-card-cardContainer,
.main-view-container:has([data-testid*=artist]) .main-card-cardContainer {
  --card-visual-mode: 1;
  transform: translateZ(0) var(--card-visual-depth);
}
@supports (backdrop-filter: blur(1px)) {
  .main-card-card,
  .main-card-cardContainer {
    backdrop-filter: blur(20px) saturate(1.3);
  }
}
@supports not (backdrop-filter: blur(1px)) {
  .main-card-card,
  .main-card-cardContainer {
    background: rgba(var(--sn-accent-rgb, var(--spice-rgb-accent)), 0.15);
  }
}
.main-card-card::before,
.main-card-cardContainer::before {
  content: "";
  position: absolute;
  top: calc(-1 * var(--card-effect-field-radius));
  left: calc(-1 * var(--card-effect-field-radius));
  right: calc(-1 * var(--card-effect-field-radius));
  bottom: calc(-1 * var(--card-effect-field-radius));
  z-index: -2;
  background: radial-gradient(ellipse 120% 100% at center, rgba(var(--sn-accent-rgb, var(--spice-rgb-accent)), 0) 0%, rgba(var(--sn-accent-rgb, var(--spice-rgb-accent)), var(--card-effect-alpha)) 40%, transparent 70%);
  border-radius: calc(var(--card-dynamic-corners) * 2);
  opacity: 0;
  transform: translateZ(0);
  transition: all var(--calculated-transition) var(--card-smooth-fluidity);
}
.main-card-card:hover,
.main-card-cardContainer:hover {
  transform: var(--card-depth-near) translateZ(12px);
  background: linear-gradient(135deg, rgba(var(--sn-accent-rgb, var(--spice-rgb-accent)), 0.12) 0%, rgba(var(--sn-accent-rgb, var(--spice-rgb-surface0)), 0.15) 50%, rgba(var(--sn-accent-rgb, var(--spice-rgb-surface1)), 0.08) 100%);
  backdrop-filter: blur(25px) saturate(1.5) contrast(1.1);
  border-color: rgba(var(--sn-accent-rgb, var(--spice-rgb-accent)), 0.4);
  box-shadow: 0 var(--calculated-lift) calc(var(--calculated-lift) * 2) rgba(var(--sn-accent-rgb, var(--spice-rgb-accent)), 0.15), 0 calc(var(--calculated-lift) * 2) calc(var(--calculated-lift) * 4) rgba(var(--sn-oklab-shadow-rgb, 0, 0, 0), 0.2), 0 8px 24px rgba(var(--sn-oklab-shadow-rgb, 0, 0, 0), 0.2), 0 0 calc(var(--card-effect-field-radius) * 2) rgba(var(--sn-accent-rgb, var(--spice-rgb-accent)), var(--card-effect-alpha)), inset 0 1px 0 rgba(var(--sn-oklab-highlight-rgb, 255, 255, 255), 0.2);
}
.main-card-card:hover::before,
.main-card-cardContainer:hover::before {
  opacity: 1;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
}
.main-card-card:hover::after,
.main-card-cardContainer:hover::after {
  content: "";
  --sn-kinetic-intensity: calc(var(--motion-intelligence-level,1) * 0.18);
}
.main-card-card:focus-visible,
.main-card-cardContainer:focus-visible {
  outline: none;
}
.main-card-card:focus-visible::after,
.main-card-cardContainer:focus-visible::after {
  content: "";
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  border: 2px solid var(--card-color-primary);
  border-radius: calc(var(--card-dynamic-corners) + 3px);
  box-shadow: 0 0 12px rgba(var(--sn-accent-rgb, var(--spice-rgb-accent)), 0.4);
  animation: visual-focus-pulse var(--card-effect-pulse-rate) ease-in-out infinite;
}
.main-card-card:active,
.main-card-cardContainer:active {
  transform: var(--card-depth-mid);
  transition: transform 0.1s ease;
  box-shadow: 0 2px 8px var(--card-shadow-base);
}
.main-card-card:active::after,
.main-card-cardContainer:active::after {
  content: "";
  --sn-kinetic-intensity: calc(var(--motion-intelligence-level,1) * 0.24);
}

.main-card-card,
.main-card-cardContainer {
  position: relative;
  overflow: visible;
  border-radius: 48% 52% 53% 47%/51% 49% 52% 48%;
  background: radial-gradient(ellipse 90% 70% at 35% 45%, rgba(var(--sn-bg-gradient-primary-rgb), calc(0.2 * 0.04)) 0%, transparent 80%), radial-gradient(ellipse 70% 85% at 65% 55%, rgba(var(--sn-bg-gradient-accent-rgb), calc(0.2 * 0.03)) 0%, transparent 70%);
  background-size: 250% 180%, 220% 250%;
  will-change: transform, opacity, filter;
  transform: translateZ(0);
  backface-visibility: hidden;
  contain: layout style paint;
  animation: fluid-breathing 15s ease-in-out infinite;
  transition: border-radius 2.5s var(--sn-anim-easing-standard), background 3s ease-out;
}
.Root[style*="--sn-music-beat-pulse-intensity"] .main-card-card,
.Root[style*="--sn-music-beat-pulse-intensity"] .main-card-cardContainer {
  animation: fluid-awakening calc(15s * (2 - var(--sn-music-beat-pulse-intensity, 0))) ease-in-out infinite;
  background: radial-gradient(ellipse 95% 75% at 30% 40%, rgba(var(--sn-bg-gradient-primary-rgb), calc(0.2 * (0.04 + var(--sn-music-beat-pulse-intensity, 0) * 0.06))) 0%, transparent 75%), radial-gradient(ellipse 75% 90% at 70% 60%, rgba(var(--sn-bg-gradient-accent-rgb), calc(0.2 * (0.03 + var(--sn-music-beat-pulse-intensity, 0) * 0.05))) 0%, transparent 65%);
}
.main-card-card[data-testid*=artist],
.main-card-cardContainer[data-testid*=artist] {
  position: relative;
  overflow: visible;
  border-radius: 48% 52% 53% 47%/51% 49% 52% 48%;
  background: radial-gradient(ellipse 90% 70% at 35% 45%, rgba(var(--sn-bg-gradient-primary-rgb), calc(0.3 * 0.04)) 0%, transparent 80%), radial-gradient(ellipse 70% 85% at 65% 55%, rgba(var(--sn-bg-gradient-accent-rgb), calc(0.3 * 0.03)) 0%, transparent 70%);
  background-size: 250% 180%, 220% 250%;
  will-change: transform, opacity, filter;
  transform: translateZ(0);
  backface-visibility: hidden;
  contain: layout style paint;
  animation: fluid-breathing 15s ease-in-out infinite;
  transition: border-radius 2.5s var(--sn-anim-easing-standard), background 3s ease-out;
}
.Root[style*="--sn-music-beat-pulse-intensity"] .main-card-card[data-testid*=artist],
.Root[style*="--sn-music-beat-pulse-intensity"] .main-card-cardContainer[data-testid*=artist] {
  animation: fluid-awakening calc(15s * (2 - var(--sn-music-beat-pulse-intensity, 0))) ease-in-out infinite;
  background: radial-gradient(ellipse 95% 75% at 30% 40%, rgba(var(--sn-bg-gradient-primary-rgb), calc(0.3 * (0.04 + var(--sn-music-beat-pulse-intensity, 0) * 0.06))) 0%, transparent 75%), radial-gradient(ellipse 75% 90% at 70% 60%, rgba(var(--sn-bg-gradient-accent-rgb), calc(0.3 * (0.03 + var(--sn-music-beat-pulse-intensity, 0) * 0.05))) 0%, transparent 65%);
}

.main-card-header,
.main-card-imageContainer {
  position: relative;
  aspect-ratio: 1/1;
  width: 100%;
  overflow: hidden;
  border-radius: var(--card-dynamic-corners) var(--card-dynamic-corners) 0 0;
  transform: var(--card-depth-mid);
}
.main-card-header::before,
.main-card-imageContainer::before {
  content: "";
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  z-index: -1;
  background: conic-gradient(from 0deg, rgba(var(--sn-accent-rgb, var(--spice-rgb-accent)), 0.4) 0deg, rgba(var(--sn-accent-rgb, var(--spice-rgb-surface1)), 0.2) 120deg, rgba(var(--sn-accent-rgb, var(--spice-rgb-surface0)), 0.4) 240deg, rgba(var(--sn-accent-rgb, var(--spice-rgb-accent)), 0.4) 360deg);
  border-radius: calc(var(--card-dynamic-corners) + 4px);
  opacity: 0;
  animation: visual-source-rotation calc(var(--card-effect-pulse-rate) * 2) linear infinite;
  transition: opacity var(--calculated-transition) ease;
}
.main-card-header .main-image-image,
.main-card-header .main-cardImage-image,
.main-card-imageContainer .main-image-image,
.main-card-imageContainer .main-cardImage-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform var(--calculated-transition) var(--card-smooth-fluidity), filter var(--calculated-transition) ease;
  filter: contrast(1) saturate(1);
}
.main-card-header .main-image-image:hover,
.main-card-header .main-cardImage-image:hover,
.main-card-imageContainer .main-image-image:hover,
.main-card-imageContainer .main-cardImage-image:hover {
  transform: translateZ(0);
  filter: contrast(1.05) saturate(1.1);
}
.main-card-card:hover .main-card-header::before, .main-card-cardContainer:hover .main-card-header::before,
.main-card-card:hover .main-card-imageContainer::before,
.main-card-cardContainer:hover .main-card-imageContainer::before {
  opacity: 1;
}
.main-card-header .main-card-cardMetadata,
.main-card-imageContainer .main-card-cardMetadata {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px;
  background: linear-gradient(transparent 0%, rgba(var(--sn-oklab-shadow-rgb, 0, 0, 0), 0.7) 40%, rgba(var(--sn-oklab-shadow-rgb, 0, 0, 0), 0.85) 100%);
  backdrop-filter: blur(8px);
}
.main-card-header .main-card-cardMetadata .main-cardHeader-text,
.main-card-header .main-card-cardMetadata .main-type-bass,
.main-card-imageContainer .main-card-cardMetadata .main-cardHeader-text,
.main-card-imageContainer .main-card-cardMetadata .main-type-bass {
  text-shadow: 0 1px 3px rgba(var(--sn-oklab-shadow-rgb, 0, 0, 0), 0.8), 0 0 8px rgba(var(--sn-accent-rgb, var(--spice-rgb-accent)), 0.2);
  color: rgba(var(--sn-musical-harmony-contrast-rgb), 0.95);
  transition: all 300ms ease;
}
.main-card-header .main-card-cardMetadata .main-cardHeader-text:hover,
.main-card-header .main-card-cardMetadata .main-type-bass:hover,
.main-card-imageContainer .main-card-cardMetadata .main-cardHeader-text:hover,
.main-card-imageContainer .main-card-cardMetadata .main-type-bass:hover {
  color: rgba(var(--sn-accent-rgb, var(--spice-rgb-accent)), 1);
  text-shadow: 0 1px 3px rgba(var(--sn-oklab-shadow-rgb, 0, 0, 0), 0.8), 0 0 12px rgba(var(--sn-accent-rgb, var(--spice-rgb-accent)), 0.4);
}

.main-gridContainer-gridContainer {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: calc(24px * var(--motion-intelligence-level, 1));
  padding: 24px;
}
.main-gridContainer-gridContainer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(ellipse 100% 50% at center top, rgba(var(--sn-accent-rgb, var(--spice-rgb-accent)), 0.02) 0%, transparent 60%);
  pointer-events: none;
  z-index: -1;
}
@media (max-width: 768px) {
  .main-gridContainer-gridContainer {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 16px;
    padding: 16px;
  }
}
@media (min-width: 1200px) {
  .main-gridContainer-gridContainer {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 32px;
  }
}
@media (min-width: 1600px) {
  .main-gridContainer-gridContainer {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 40px;
  }
}

.main-card-PlayButtonContainer,
.main-playButton-PlayButton {
  position: absolute;
  bottom: 16px;
  right: 16px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--sn-accent-rgb, var(--spice-rgb-accent)), 0.95) 0%, rgba(var(--sn-accent-rgb, var(--spice-rgb-surface1)), 0.85) 100%);
  box-shadow: 0 4px 16px rgba(var(--sn-accent-rgb, var(--spice-rgb-accent)), 0.3), 0 8px 32px rgba(var(--sn-oklab-shadow-rgb, 0, 0, 0), 0.2), inset 0 1px 0 rgba(var(--sn-oklab-highlight-rgb, 255, 255, 255), 0.2);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(var(--sn-accent-rgb, var(--spice-rgb-accent)), 0.3);
  opacity: calc(0.2 * var(--motion-intelligence-level, 1));
  transform: translateY(calc(8px * var(--motion-intelligence-level, 1))) scale(calc(0.8 + 0.2 * var(--motion-intelligence-level, 1)));
  transition: all var(--calculated-transition) var(--card-smooth-fluidity);
}
.main-card-PlayButtonContainer::before,
.main-playButton-PlayButton::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: radial-gradient(circle, rgba(var(--sn-accent-rgb, var(--spice-rgb-accent)), 0.3) 0%, transparent 70%);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: all 600ms var(--card-smooth-fluidity);
  z-index: -1;
  opacity: 0;
}
.main-card-card:hover .main-card-PlayButtonContainer, .main-card-cardContainer:hover .main-card-PlayButtonContainer,
.main-card-card:hover .main-playButton-PlayButton,
.main-card-cardContainer:hover .main-playButton-PlayButton {
  opacity: 1;
  transform: translateY(0);
  transition-delay: calc(var(--card-effect-threshold) / var(--motion-intelligence-level, 1));
}
.main-card-PlayButtonContainer:hover,
.main-playButton-PlayButton:hover {
  transform: translateZ(0);
  background: radial-gradient(circle, rgba(var(--sn-accent-rgb, var(--spice-rgb-accent)), 1) 0%, rgba(var(--sn-accent-rgb, var(--spice-rgb-surface1)), 0.95) 100%);
  box-shadow: 0 6px 24px rgba(var(--sn-accent-rgb, var(--spice-rgb-accent)), 0.4), 0 12px 48px rgba(var(--sn-oklab-shadow-rgb, 0, 0, 0), 0.3), 0 0 16px rgba(var(--sn-accent-rgb, var(--spice-rgb-accent)), 0.2);
}
.main-card-PlayButtonContainer:hover::before,
.main-playButton-PlayButton:hover::before {
  width: 60px;
  height: 60px;
  opacity: 1;
}
.main-card-PlayButtonContainer:active,
.main-playButton-PlayButton:active {
  transform: translateZ(0);
  transition: transform 0.1s ease;
}

@keyframes visual-focus-pulse {
  0%, 100% {
    box-shadow: 0 0 12px rgba(var(--sn-accent-rgb, var(--spice-rgb-accent)), 0.4);
    transform: translateZ(0);
  }
  50% {
    box-shadow: 0 0 20px rgba(var(--sn-accent-rgb, var(--spice-rgb-accent)), 0.6);
    transform: translateZ(0);
  }
}
@keyframes visual-source-rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-intelligence-level: 0.1;
    --card-effect-pulse-rate: 0.01ms;
  }
  .main-card-card,
  .main-card-cardContainer {
    transition: opacity 200ms ease, background-color 200ms ease, border-color 200ms ease;
  }
  .main-card-card:hover,
  .main-card-cardContainer:hover {
    transform: none !important;
  }
  .main-card-card::before, .main-card-card::after,
  .main-card-cardContainer::before,
  .main-card-cardContainer::after {
    animation: none !important;
  }
  .main-card-PlayButtonContainer {
    transition: opacity 200ms ease, background-color 200ms ease, border-color 200ms ease;
  }
  .main-card-PlayButtonContainer:hover {
    transform: none !important;
  }
  .main-card-PlayButtonContainer::before, .main-card-PlayButtonContainer::after {
    animation: none !important;
  }
}
@media (max-width: 768px) {
  :root {
    --motion-intelligence-level: 0.6;
    --card-effect-pulse-rate: calc(var(--card-effect-pulse-rate) * 1.5);
  }
  .main-card-PlayButtonContainer {
    opacity: 0.8 !important;
    transform: none !important;
  }
}
@media (prefers-contrast: high) {
  .main-card-card,
  .main-card-cardContainer {
    border-width: 2px;
    box-shadow: 0 4px 24px rgba(var(--sn-oklab-highlight-rgb, 255, 255, 255), 0.1), 0 8px 32px rgba(var(--sn-oklab-shadow-rgb, 0, 0, 0), 0.4);
  }
  .main-card-card:hover,
  .main-card-cardContainer:hover {
    border-color: rgba(var(--sn-oklab-highlight-rgb, 255, 255, 255), 0.8);
  }
}
@media (prefers-reduced-data: reduce) {
  :root {
    --motion-intelligence-level: 0.3;
    --card-effect-pulse-rate: calc(var(--card-effect-pulse-rate) * 3);
  }
  .main-card-card::before, .main-card-card::after,
  .main-card-cardContainer::before,
  .main-card-cardContainer::after {
    display: none;
  }
}
:root {
  --sn-card-animation-intensity: 0.6;
  --sn-card-breath-scale: 1;
  --sn-card-animation-phase: 0;
  --sn-card-shadow-strength: 1;
  --sn-card-glow-level: 0;
  --sn-card-border-radius-enhanced: 16px;
  --sn-card-border-width: 1px;
  --sn-card-background-blur: 12px;
  --sn-card-particle-size: 2px;
  --sn-card-base-luminance: var(--sn-oklab-processed-dynamic-base-luminance, 0.4);
  --sn-card-harmonic-base-hue: 270deg;
  --sn-card-harmonic-primary: hsl(var(--sn-card-harmonic-base-hue), 70%, 60%);
  --sn-card-harmonic-analogous-1: hsl(calc(var(--sn-card-harmonic-base-hue) + 30deg), 65%, 55%);
  --sn-card-harmonic-analogous-2: hsl(calc(var(--sn-card-harmonic-base-hue) - 30deg), 65%, 55%);
  --sn-card-harmonic-complementary: hsl(calc(var(--sn-card-harmonic-base-hue) + 180deg), 60%, 50%);
  --sn-card-harmonic-triadic-1: hsl(calc(var(--sn-card-harmonic-base-hue) + 120deg), 60%, 50%);
  --sn-card-harmonic-triadic-2: hsl(calc(var(--sn-card-harmonic-base-hue) + 240deg), 60%, 50%);
  --sn-card-harmonic-primary-rgb: var(--sn-accent-rgb);
  --sn-card-harmonic-analogous-1-rgb: var(--sn-accent-rgb);
  --sn-card-harmonic-analogous-2-rgb: var(--sn-accent-rgb);
  --sn-card-harmonic-complementary-rgb: var(--sn-accent-rgb);
  --sn-card-harmonic-triadic-1-rgb: var(--sn-accent-rgb);
  --sn-card-harmonic-triadic-2-rgb: var(--sn-accent-rgb);
  --sn-card-breath-duration: 4s;
  --sn-card-shadow-transition: 0.8s;
  --sn-card-color-cycle-duration: 2s;
  --sn-card-particle-orbit-duration: 12s;
}

@keyframes card-breath-animation {
  0%, 100% {
    transform: translateZ(0);
    filter: brightness(0.95);
  }
  50% {
    transform: translateZ(0);
    filter: brightness(1.05);
  }
}
@keyframes card-color-cycle {
  0% {
    border-color: var(--sn-card-harmonic-primary);
  }
  25% {
    border-color: var(--sn-card-harmonic-analogous-1);
  }
  50% {
    border-color: var(--sn-card-harmonic-complementary);
  }
  75% {
    border-color: var(--sn-card-harmonic-analogous-2);
  }
  100% {
    border-color: var(--sn-card-harmonic-primary);
  }
}
@keyframes card-particle-orbit {
  0% {
    transform: rotate(0deg) translateX(8px) rotate(0deg);
  }
  100% {
    transform: rotate(360deg) translateX(8px) rotate(-360deg);
  }
}
@keyframes card-background-drift {
  0%, 100% {
    background-position: 0% 50%;
    opacity: calc(0.1 + var(--sn-card-animation-intensity) * 0.15);
  }
  50% {
    background-position: 100% 50%;
    opacity: calc(0.05 + var(--sn-card-animation-intensity) * 0.1);
  }
}
body:not(:has(.main-searchPage-content)) .main-card-card,
body:not(:has(.main-searchPage-content)) .main-card-cardContainer {
  position: relative;
  border-radius: var(--sn-card-border-radius-enhanced);
  isolation: isolate;
  will-change: transform, opacity, filter;
  transform: translateZ(0);
  backface-visibility: hidden;
  contain: layout style paint;
  --sn-card-shadow-idle:
    0 2px 8px rgba(var(--sn-oklab-shadow-rgb, 0, 0, 0), 0.08),
    0 4px 16px rgba(var(--sn-card-harmonic-primary-rgb), 0.04),
    inset 0 1px 0 rgba(var(--spice-rgb-surface1), 0.1);
  --sn-card-shadow-active:
    0 8px 32px rgba(var(--sn-oklab-shadow-rgb, 0, 0, 0), 0.15),
    0 16px 64px rgba(var(--sn-card-harmonic-primary-rgb), 0.1),
    0 4px 24px rgba(var(--sn-card-harmonic-analogous-1-rgb), 0.06),
    inset 0 1px 0 rgba(var(--spice-rgb-surface1), 0.2),
    inset 0 -1px 0 rgba(var(--sn-card-harmonic-primary-rgb), 0.05);
  --sn-card-shadow-emergence:
    0 12px 48px rgba(var(--sn-oklab-shadow-rgb, 0, 0, 0), 0.2),
    0 24px 96px rgba(var(--sn-card-harmonic-primary-rgb), 0.15),
    0 8px 32px rgba(var(--sn-card-harmonic-complementary-rgb), 0.08),
    0 4px 16px rgba(var(--sn-card-harmonic-triadic-1-rgb), 0.06),
    inset 0 2px 0 rgba(var(--spice-rgb-surface1), 0.25),
    inset 0 -2px 0 rgba(var(--sn-card-harmonic-primary-rgb), 0.1);
  background: linear-gradient(135deg, rgba(var(--sn-card-harmonic-primary-rgb), 0.03) 0%, rgba(var(--sn-card-harmonic-analogous-1-rgb), 0.02) 30%, rgba(var(--sn-card-harmonic-analogous-2-rgb), 0.01) 60%, rgba(var(--sn-card-harmonic-primary-rgb), 0.03) 100%), rgba(var(--spice-rgb-surface0), 0.08);
  background-size: 300% 300%;
  border: var(--sn-card-border-width) solid rgba(var(--sn-card-harmonic-primary-rgb), 0.15);
  box-shadow: var(--sn-card-shadow-idle);
  animation: card-breath-animation var(--sn-card-breath-duration) ease-in-out infinite, card-background-drift calc(var(--sn-card-breath-duration) * 3) ease-in-out infinite;
  transition: box-shadow var(--sn-card-shadow-transition) var(--sn-anim-easing-standard), border-color var(--sn-card-shadow-transition) var(--sn-anim-easing-standard), transform var(--sn-card-shadow-transition) var(--sn-anim-easing-standard);
}
body:not(:has(.main-searchPage-content)) .main-card-card::before,
body:not(:has(.main-searchPage-content)) .main-card-cardContainer::before {
  content: "";
  position: absolute;
  top: 12px;
  right: 12px;
  width: var(--sn-card-particle-size);
  height: var(--sn-card-particle-size);
  background: radial-gradient(circle, rgba(var(--sn-card-harmonic-primary-rgb), 0.8) 0%, rgba(var(--sn-card-harmonic-primary-rgb), 0) 70%);
  border-radius: 50%;
  animation: card-particle-orbit var(--sn-card-particle-orbit-duration) linear infinite;
  opacity: calc(0.6 + var(--sn-card-animation-intensity) * 0.4);
}
body:not(:has(.main-searchPage-content)) .main-card-card::after,
body:not(:has(.main-searchPage-content)) .main-card-cardContainer::after {
  content: "";
  position: absolute;
  bottom: 16px;
  left: 16px;
  width: calc(var(--sn-card-particle-size) * 0.8);
  height: calc(var(--sn-card-particle-size) * 0.8);
  background: radial-gradient(circle, rgba(var(--sn-card-harmonic-analogous-1-rgb), 0.6) 0%, rgba(var(--sn-card-harmonic-analogous-1-rgb), 0) 70%);
  border-radius: 50%;
  animation: card-particle-orbit calc(var(--sn-card-particle-orbit-duration) * 1.3) linear infinite reverse;
  opacity: calc(0.4 + var(--sn-card-animation-intensity) * 0.3);
}
body:not(:has(.main-searchPage-content)) .main-card-card:hover,
body:not(:has(.main-searchPage-content)) .main-card-cardContainer:hover {
  --sn-card-animation-intensity: 0.85;
  --sn-card-breath-scale: 1.5;
  --sn-card-shadow-strength: 1.4;
  box-shadow: var(--sn-card-shadow-active);
  border-color: rgba(var(--sn-card-harmonic-primary-rgb), 0.4);
  transform: translateY(-2px);
  animation: card-breath-animation calc(var(--sn-card-breath-duration) * 0.7) ease-in-out infinite, card-background-drift calc(var(--sn-card-breath-duration) * 2) ease-in-out infinite, card-color-cycle var(--sn-card-color-cycle-duration) ease-in-out infinite;
}
body:not(:has(.main-searchPage-content)) .main-card-card:active, body:not(:has(.main-searchPage-content)) .main-card-card.sn-card-selected, body:not(:has(.main-searchPage-content)) .main-card-card[aria-selected=true],
body:not(:has(.main-searchPage-content)) .main-card-cardContainer:active,
body:not(:has(.main-searchPage-content)) .main-card-cardContainer.sn-card-selected,
body:not(:has(.main-searchPage-content)) .main-card-cardContainer[aria-selected=true] {
  --sn-card-animation-intensity: 1;
  --sn-card-breath-scale: 1.8;
  --sn-card-shadow-strength: 2.5;
  --sn-card-glow-level: 1;
  box-shadow: var(--sn-card-shadow-emergence);
  border-color: rgba(var(--sn-card-harmonic-complementary-rgb), 0.8);
  transform: translateY(-6px);
  animation: card-breath-animation calc(var(--sn-card-breath-duration) * 0.6) ease-in-out infinite, card-background-drift calc(var(--sn-card-breath-duration) * 1.2) ease-in-out infinite, card-color-cycle calc(var(--sn-card-color-cycle-duration) * 0.8) ease-in-out infinite;
}
body:not(:has(.main-searchPage-content)) .main-card-card:focus-visible,
body:not(:has(.main-searchPage-content)) .main-card-cardContainer:focus-visible {
  outline: none;
  box-shadow: var(--sn-card-shadow-active), 0 0 0 3px rgba(var(--sn-card-harmonic-complementary-rgb), 0.5), 0 0 0 6px rgba(var(--sn-card-harmonic-complementary-rgb), 0.2);
}
body:not(:has(.main-searchPage-content)) .main-card-card:focus-visible::before, body:not(:has(.main-searchPage-content)) .main-card-card:focus-visible::after,
body:not(:has(.main-searchPage-content)) .main-card-cardContainer:focus-visible::before,
body:not(:has(.main-searchPage-content)) .main-card-cardContainer:focus-visible::after {
  opacity: 1;
  animation-duration: calc(var(--sn-card-particle-orbit-duration) * 0.5);
}

body:not(:has(.main-searchPage-content)) .main-card-card.sn-card-selected:nth-child(2n), body:not(:has(.main-searchPage-content)) .main-card-card[aria-selected=true]:nth-child(2n),
body:not(:has(.main-searchPage-content)) .main-card-cardContainer.sn-card-selected:nth-child(2n),
body:not(:has(.main-searchPage-content)) .main-card-cardContainer[aria-selected=true]:nth-child(2n) {
  animation-delay: calc(var(--sn-card-breath-duration) * 0.33);
}
body:not(:has(.main-searchPage-content)) .main-card-card.sn-card-selected:nth-child(3n), body:not(:has(.main-searchPage-content)) .main-card-card[aria-selected=true]:nth-child(3n),
body:not(:has(.main-searchPage-content)) .main-card-cardContainer.sn-card-selected:nth-child(3n),
body:not(:has(.main-searchPage-content)) .main-card-cardContainer[aria-selected=true]:nth-child(3n) {
  animation-delay: calc(var(--sn-card-breath-duration) * 0.66);
}
body:not(:has(.main-searchPage-content)) .main-card-card.sn-card-selected::before, body:not(:has(.main-searchPage-content)) .main-card-card[aria-selected=true]::before,
body:not(:has(.main-searchPage-content)) .main-card-cardContainer.sn-card-selected::before,
body:not(:has(.main-searchPage-content)) .main-card-cardContainer[aria-selected=true]::before {
  width: calc(var(--sn-card-particle-size) * 1.5);
  height: calc(var(--sn-card-particle-size) * 1.5);
  opacity: 1;
  animation-duration: calc(var(--sn-card-particle-orbit-duration) * 0.7);
  box-shadow: 0 0 8px rgba(var(--sn-card-harmonic-primary-rgb), 0.6);
}
body:not(:has(.main-searchPage-content)) .main-card-card.sn-card-selected::after, body:not(:has(.main-searchPage-content)) .main-card-card[aria-selected=true]::after,
body:not(:has(.main-searchPage-content)) .main-card-cardContainer.sn-card-selected::after,
body:not(:has(.main-searchPage-content)) .main-card-cardContainer[aria-selected=true]::after {
  width: calc(var(--sn-card-particle-size) * 1.2);
  height: calc(var(--sn-card-particle-size) * 1.2);
  opacity: 0.9;
  animation-duration: calc(var(--sn-card-particle-orbit-duration) * 0.9);
  box-shadow: 0 0 6px rgba(var(--sn-card-harmonic-analogous-1-rgb), 0.5);
}

@media (prefers-reduced-motion: reduce) {
  body:not(:has(.main-searchPage-content)) .main-card-card,
  body:not(:has(.main-searchPage-content)) .main-card-cardContainer {
    animation-duration: 0.1s !important;
    transition-duration: 0.2s !important;
  }
  body:not(:has(.main-searchPage-content)) .main-card-card::before, body:not(:has(.main-searchPage-content)) .main-card-card::after,
  body:not(:has(.main-searchPage-content)) .main-card-cardContainer::before,
  body:not(:has(.main-searchPage-content)) .main-card-cardContainer::after {
    animation: none !important;
  }
}
@supports (will-change: transform) {
  body:not(:has(.main-searchPage-content)) .main-card-card,
  body:not(:has(.main-searchPage-content)) .main-card-cardContainer {
    will-change: transform, box-shadow, border-color, opacity;
  }
  body:not(:has(.main-searchPage-content)) .main-card-card::before, body:not(:has(.main-searchPage-content)) .main-card-card::after,
  body:not(:has(.main-searchPage-content)) .main-card-cardContainer::before,
  body:not(:has(.main-searchPage-content)) .main-card-cardContainer::after {
    will-change: transform, opacity;
  }
}
@media (prefers-contrast: high) {
  body:not(:has(.main-searchPage-content)) .main-card-card,
  body:not(:has(.main-searchPage-content)) .main-card-cardContainer {
    --sn-card-border-width: 2px;
    border-color: var(--spice-accent) !important;
  }
  body:not(:has(.main-searchPage-content)) .main-card-card::before, body:not(:has(.main-searchPage-content)) .main-card-card::after,
  body:not(:has(.main-searchPage-content)) .main-card-cardContainer::before,
  body:not(:has(.main-searchPage-content)) .main-card-cardContainer::after {
    opacity: 0.9 !important;
  }
}
@media (prefers-color-scheme: dark) {
  :root {
    --sn-card-animation-intensity: 0.8;
    --sn-card-base-luminance: 0.2;
  }
}
@media (prefers-reduced-motion: reduce) {
  .main-card-card,
  .main-card-cardContainer {
    transition-duration: 0.1s !important;
  }
}
.main-card-card:not(.preserve-3d-override),
.main-card-cardContainer:not(.preserve-3d-override) {
  transform-style: flat !important;
  backface-visibility: visible !important;
}

section[data-testid=component-shelf] .main-card-card,
section[data-testid=component-shelf] .main-card-cardContainer,
.main-shelf-shelf .main-card-card,
.main-shelf-shelf .main-card-cardContainer,
.main-gridContainer-gridContainer .main-card-card,
.main-gridContainer-gridContainer .main-card-cardContainer {
  transform-style: flat !important;
  backface-visibility: visible !important;
  perspective: none;
}

section[data-testid=component-shelf] .main-card-header,
section[data-testid=component-shelf] .main-card-imageContainer,
.main-shelf-shelf .main-card-header,
.main-shelf-shelf .main-card-imageContainer,
.main-gridContainer-gridContainer .main-card-header,
.main-gridContainer-gridContainer .main-card-imageContainer {
  transform: none !important;
}

section[data-testid=component-shelf] .main-cardImage-image,
section[data-testid=component-shelf] .main-image-image,
section[data-testid=component-shelf] .main-card-cardImage,
.main-shelf-shelf .main-cardImage-image,
.main-shelf-shelf .main-image-image,
.main-shelf-shelf .main-card-cardImage,
.main-gridContainer-gridContainer .main-cardImage-image,
.main-gridContainer-gridContainer .main-image-image,
.main-gridContainer-gridContainer .main-card-cardImage {
  backface-visibility: visible !important;
  transform: translateZ(0);
  opacity: 1 !important;
  will-change: transform;
}

.main-card-card img,
.main-card-card .main-image-image,
.main-card-card .main-cardImage-image,
.main-card-card .main-card-cardImage,
.main-card-cardContainer img,
.main-card-cardContainer .main-image-image,
.main-card-cardContainer .main-cardImage-image,
.main-card-cardContainer .main-card-cardImage {
  opacity: 1 !important;
  visibility: visible !important;
  backface-visibility: visible !important;
  position: relative;
  z-index: 1;
}
.main-card-card .main-card-header,
.main-card-card .main-card-imageContainer,
.main-card-card .main-cardImage-imageWrapper,
.main-card-cardContainer .main-card-header,
.main-card-cardContainer .main-card-imageContainer,
.main-card-cardContainer .main-cardImage-imageWrapper {
  position: relative;
  z-index: 1;
}

@media (max-width: 768px) {
  :root {
    --card-transition-speed: 0.2s;
    --card-shadow-intensity: 0.08;
  }
}
:root {
  --card-holographic-depth: var(--card-visual-depth);
  --card-energy-field-radius: var(--card-effect-field-radius);
  --card-energy-pulse-rate: var(--card-effect-pulse-rate);
  --card-energy-dissipation: var(--card-effect-dissipation);
  --card-energy-primary: var(--card-color-primary);
  --card-energy-secondary: var(--card-color-secondary);
  --card-energy-accent: var(--card-color-accent);
  --card-energy-ambient: var(--card-color-ambient);
  --card-bloom-base-alpha: var(--card-effect-base-alpha);
  --card-bloom-beat-factor: var(--card-effect-beat-factor);
  --card-bloom-context-factor: var(--card-effect-context-factor);
  --card-bloom-alpha: var(--card-effect-alpha);
  --card-bloom-threshold: var(--card-effect-threshold);
  --card-nexus-connection-strength: var(--card-connection-strength);
  --card-organic-corners: var(--card-dynamic-corners);
  --card-morphing-fluidity: var(--card-smooth-fluidity);
  --card-constellation-mode: var(--card-visual-mode);
  --card-constellation-depth: var(--card-visual-depth);
  --card-constellation-connection: var(--card-visual-connection);
  --music-energy-modulation: var(--music-effect-modulation);
  --card-bloom-expansion: var(--card-expansion-factor);
  --card-rhythm-breathing: var(--card-rhythm-animation);
  --organic-breathing-cycle: var(--dynamic-animation-cycle);
  --organic-breathing-standard: var(--dynamic-animation-standard);
  --breathing-context-multiplier: var(--animation-context-multiplier);
}

@keyframes organic-element-breathing {
  0%, 100% {
    transform: translateZ(0);
  }
  50% {
    transform: translateZ(0);
  }
}
@keyframes nexus-focus-pulse {
  0%, 100% {
    box-shadow: 0 0 12px rgba(var(--sn-accent-rgb, var(--spice-rgb-accent)), 0.4);
    transform: translateZ(0);
  }
  50% {
    box-shadow: 0 0 20px rgba(var(--sn-accent-rgb, var(--spice-rgb-accent)), 0.6);
    transform: translateZ(0);
  }
}
@keyframes energy-source-rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* ████████████████████████████████████████████████████████████████████████████████*/
/* YEAR 3000 TRACK LIST ENHANCED - Revolutionary Track Experience*/
/* ████████████████████████████████████████████████████████████████████████████████*/
/* Track List Container Styling*/
div.main-rootlist-wrapper[role=presentation],
div.main-rootlist-wrapper {
  position: relative;
  background: transparent;
  /* Add gentle gradient background*/
  /* Track list row grid enhancements*/
  /* Individual track row styling*/
  /* Row marker (track numbers) styling*/
}
div.main-rootlist-wrapper[role=presentation]::before,
div.main-rootlist-wrapper::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, rgba(var(--sn-accent-rgb, var(--spice-rgb-accent)), 0.15) 0%, rgba(var(--sn-accent-rgb, var(--spice-rgb-accent)), 0.12) 30%, transparent 65%, transparent 85%, rgba(var(--sn-accent-rgb, var(--spice-rgb-surface0)), 0.05) 100%);
  z-index: 0;
  pointer-events: none;
  transition: all var(--sn-gradient-transition, 600ms ease);
  -webkit-transition: all var(--sn-gradient-transition, 600ms ease);
  -moz-transition: all var(--sn-gradient-transition, 600ms ease);
  -ms-transition: all var(--sn-gradient-transition, 600ms ease);
  -o-transition: all var(--sn-gradient-transition, 600ms ease);
}
div.main-rootlist-wrapper[role=presentation] .main-trackList-trackListRowGrid,
div.main-rootlist-wrapper .main-trackList-trackListRowGrid {
  position: relative;
  z-index: 1;
}
div.main-rootlist-wrapper[role=presentation] div.main-trackList-trackListRow[role=row],
div.main-rootlist-wrapper div.main-trackList-trackListRow[role=row] {
  position: relative;
  transition: transform var(--hover-transition-speed) ease-out, box-shadow var(--hover-transition-speed) ease-out, filter var(--hover-transition-speed) ease-out;
  --local-lift-distance: var(--hover-lift-distance);
  --local-hover-scale: var(--hover-scale-factor);
  --local-hover-glow: var(--hover-glow-intensity);
  transition: transform 300ms var(--sn-easing-explorer, var(--sn-anim-easing-organic)), background 300ms var(--sn-easing-explorer, var(--sn-anim-easing-organic));
  /* Add this wrapper around the hover and selected states*/
}
div.main-rootlist-wrapper[role=presentation] div.main-trackList-trackListRow[role=row]:hover,
div.main-rootlist-wrapper div.main-trackList-trackListRow[role=row]:hover {
  transform: translateY(calc(-1 * var(--local-lift-distance))) scale(var(--local-hover-scale));
  box-shadow: 0 calc(var(--local-lift-distance) * 2) calc(var(--local-lift-distance) * 8) rgba(var(--sn-bg-gradient-accent-rgb), var(--local-hover-glow));
  filter: brightness(1.05) saturate(1.1);
}
body:not([data-bloom=off]) div.main-rootlist-wrapper[role=presentation] div.main-trackList-trackListRow[role=row],
body:not([data-bloom=off]) div.main-rootlist-wrapper div.main-trackList-trackListRow[role=row] {
  /* Hover effect with dynamic colors*/
  /* Selected/active state – one-shot ocean ripple*/
  /* Track number colour shift on hover (non-selected rows)*/
}
body:not([data-bloom=off]) div.main-rootlist-wrapper[role=presentation] div.main-trackList-trackListRow[role=row]:hover,
body:not([data-bloom=off]) div.main-rootlist-wrapper div.main-trackList-trackListRow[role=row]:hover {
  /* Echo element*/
  /* Add subtle side border*/
}
body:not([data-bloom=off]) div.main-rootlist-wrapper[role=presentation] div.main-trackList-trackListRow[role=row]:hover::after,
body:not([data-bloom=off]) div.main-rootlist-wrapper div.main-trackList-trackListRow[role=row]:hover::after {
  content: "";
}
body:not([data-bloom=off]) div.main-rootlist-wrapper[role=presentation] div.main-trackList-trackListRow[role=row]:hover::before,
body:not([data-bloom=off]) div.main-rootlist-wrapper div.main-trackList-trackListRow[role=row]:hover::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%; /* Center vertically*/
  bottom: auto; /* Remove bottom constraint*/
  height: 40px; /* Set fixed height (e.g., matches album art)*/
  transform: translateY(-50%); /* Adjust for vertical centering*/
  width: 3px;
  background: linear-gradient(180deg, rgba(var(--sn-bg-gradient-primary-rgb, 128, 128, 128), 0.8) 0%, rgba(var(--sn-accent-rgb, 128, 128, 128), 0.6) 100%);
  border-radius: 0 2px 2px 0;
  transition: all 200ms ease;
}
body:not([data-bloom=off]) div.main-rootlist-wrapper[role=presentation] div.main-trackList-trackListRow[role=row][aria-selected=true], body:not([data-bloom=off]) div.main-rootlist-wrapper[role=presentation] div.main-trackList-trackListRow[role=row]:has(.main-trackList-playingIcon),
body:not([data-bloom=off]) div.main-rootlist-wrapper div.main-trackList-trackListRow[role=row][aria-selected=true],
body:not([data-bloom=off]) div.main-rootlist-wrapper div.main-trackList-trackListRow[role=row]:has(.main-trackList-playingIcon) {
  filter: hue-rotate(var(--sn-hue-shift-dynamic));
  transition: filter 0.4s ease-out;
  /* Highlight track number when row is active*/
}
@media (prefers-reduced-motion: reduce) {
  body:not([data-bloom=off]) div.main-rootlist-wrapper[role=presentation] div.main-trackList-trackListRow[role=row][aria-selected=true], body:not([data-bloom=off]) div.main-rootlist-wrapper[role=presentation] div.main-trackList-trackListRow[role=row]:has(.main-trackList-playingIcon),
  body:not([data-bloom=off]) div.main-rootlist-wrapper div.main-trackList-trackListRow[role=row][aria-selected=true],
  body:not([data-bloom=off]) div.main-rootlist-wrapper div.main-trackList-trackListRow[role=row]:has(.main-trackList-playingIcon) {
    filter: none !important;
  }
}
body:not([data-bloom=off]) div.main-rootlist-wrapper[role=presentation] div.main-trackList-trackListRow[role=row][aria-selected=true]::after, body:not([data-bloom=off]) div.main-rootlist-wrapper[role=presentation] div.main-trackList-trackListRow[role=row]:has(.main-trackList-playingIcon)::after,
body:not([data-bloom=off]) div.main-rootlist-wrapper div.main-trackList-trackListRow[role=row][aria-selected=true]::after,
body:not([data-bloom=off]) div.main-rootlist-wrapper div.main-trackList-trackListRow[role=row]:has(.main-trackList-playingIcon)::after {
  content: "";
}
body:not([data-bloom=off]) div.main-rootlist-wrapper[role=presentation] div.main-trackList-trackListRow[role=row][aria-selected=true] .main-trackList-rowMarker, body:not([data-bloom=off]) div.main-rootlist-wrapper[role=presentation] div.main-trackList-trackListRow[role=row]:has(.main-trackList-playingIcon) .main-trackList-rowMarker,
body:not([data-bloom=off]) div.main-rootlist-wrapper div.main-trackList-trackListRow[role=row][aria-selected=true] .main-trackList-rowMarker,
body:not([data-bloom=off]) div.main-rootlist-wrapper div.main-trackList-trackListRow[role=row]:has(.main-trackList-playingIcon) .main-trackList-rowMarker {
  color: var(--spice-accent);
}
body:not([data-bloom=off]) div.main-rootlist-wrapper[role=presentation] div.main-trackList-trackListRow[role=row][aria-selected=true]::before, body:not([data-bloom=off]) div.main-rootlist-wrapper[role=presentation] div.main-trackList-trackListRow[role=row]:has(.main-trackList-playingIcon)::before,
body:not([data-bloom=off]) div.main-rootlist-wrapper div.main-trackList-trackListRow[role=row][aria-selected=true]::before,
body:not([data-bloom=off]) div.main-rootlist-wrapper div.main-trackList-trackListRow[role=row]:has(.main-trackList-playingIcon)::before {
  opacity: 1;
  transform: translateY(-50%) scaleY(1.5);
}
body:not([data-bloom=off]) div.main-rootlist-wrapper[role=presentation] div.main-trackList-trackListRow[role=row]:hover .main-trackList-rowMarker,
body:not([data-bloom=off]) div.main-rootlist-wrapper div.main-trackList-trackListRow[role=row]:hover .main-trackList-rowMarker {
  color: var(--spice-text);
}
div.main-rootlist-wrapper[role=presentation] .main-trackList-rowMarker,
div.main-rootlist-wrapper .main-trackList-rowMarker {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 12px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--spice-subtext);
  transition: color 300ms ease;
  z-index: 1;
}

:root aside[data-testid=now-playing-bar],
:root .Root__now-playing-bar {
  backdrop-filter: blur(calc(var(--glass-blur, 6px) + var(--sn-glass-beat-boost, 0) * 5px)) saturate(var(--glass-saturation, 1.2)) brightness(var(--glass-brightness, 1.1));
  -webkit-backdrop-filter: blur(calc(var(--glass-blur, 6px) + var(--sn-glass-beat-boost, 0) * 5px)) saturate(var(--glass-saturation, 1.2)) brightness(var(--glass-brightness, 1.1));
  background: var(--glass-background, rgba(var(--sn-oklab-highlight-rgb, 255, 255, 255), 0.1));
  border: 1px solid var(--glass-border, rgba(var(--sn-oklab-highlight-rgb, 255, 255, 255), 0.2));
  transition: backdrop-filter 400ms ease-out, -webkit-backdrop-filter 400ms ease-out, background var(--sn-bg-gradient-transition, 0.8s ease-in-out), border var(--sn-bg-gradient-transition, 0.8s ease-in-out);
  will-change: transform, opacity, filter;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
  contain: style paint;
  will-change: backdrop-filter, -webkit-backdrop-filter;
}
@supports not (backdrop-filter: blur(1px)) {
  :root aside[data-testid=now-playing-bar],
  :root .Root__now-playing-bar {
    background: rgba(var(--spice-rgb-surface0), var(--glass-opacity-fallback, 0.2));
    border: 1px solid rgba(var(--spice-rgb-surface1), 0.3);
  }
}
:root aside[data-testid=now-playing-bar] .main-shuffleButton-button,
:root .Root__now-playing-bar .main-shuffleButton-button {
  transition: all 0.3s var(--sn-easing-explorer, ease-out);
}
:root aside[data-testid=now-playing-bar] .main-shuffleButton-button:focus:not(:focus-visible, :hover),
:root .Root__now-playing-bar .main-shuffleButton-button:focus:not(:focus-visible, :hover) {
  color: var(--spice-spice-surface1);
}
:root aside[data-testid=now-playing-bar] .main-shuffleButton-button:hover,
:root .Root__now-playing-bar .main-shuffleButton-button:hover {
  color: var(--spice-text);
  transform: translateZ(0);
  filter: drop-shadow(0 0 calc(4px * var(--sn-music-beat-pulse-intensity, 0)) rgba(var(--sn-accent-rgb, 128, 128, 128), calc(0.4 * var(--sn-music-beat-pulse-intensity, 0))));
}
:root aside[data-testid=now-playing-bar] .main-shuffleButton-button.main-shuffleButton-active,
:root .Root__now-playing-bar .main-shuffleButton-button.main-shuffleButton-active {
  color: var(--spice-text);
  transform: translateZ(0);
  text-shadow: 0 0 calc(4px * var(--sn-music-beat-pulse-intensity, 0)) rgba(var(--sn-accent-rgb, 128, 128, 128), calc(0.6 * var(--sn-music-beat-pulse-intensity, 0)));
}
:root aside[data-testid=now-playing-bar] .main-playButton-PlayButton.main-playButton-primary,
:root .Root__now-playing-bar .main-playButton-PlayButton.main-playButton-primary {
  color: var(--sn-color-accent-hex);
  position: relative;
  transition: all 0.2s var(--sn-anim-easing-bounce-smooth);
  transform: translateZ(0);
}
:root aside[data-testid=now-playing-bar] .main-playButton-PlayButton.main-playButton-primary::before,
:root .Root__now-playing-bar .main-playButton-PlayButton.main-playButton-primary::before {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--sn-accent-rgb, 128, 128, 128), calc(0.25 * var(--sn-music-beat-pulse-intensity, 0))) 0%, transparent 70%);
  z-index: -1;
  transition: opacity 0.3s ease-out, background 0.3s ease-out;
}
:root aside[data-testid=now-playing-bar] .main-playButton-PlayButton.main-playButton-primary:hover::before,
:root .Root__now-playing-bar .main-playButton-PlayButton.main-playButton-primary:hover::before {
  background: radial-gradient(circle, rgba(var(--sn-accent-rgb, 128, 128, 128), calc(0.35 * var(--sn-music-beat-pulse-intensity, 0))) 0%, transparent 70%);
}
:root aside[data-testid=now-playing-bar] .main-button-primary,
:root .Root__now-playing-bar .main-button-primary {
  background: var(--glass-button-background, linear-gradient(135deg, rgba(var(--sn-accent-rgb, 128, 128, 128), 0.9) 0%, rgba(var(--sn-accent-rgb, 128, 128, 128), 0.7) 100%));
  border: 1px solid var(--glass-button-border, rgba(var(--sn-accent-rgb, 128, 128, 128), 0.3));
  transition: all 0.3s var(--sn-easing-explorer, ease-out);
}
:root aside[data-testid=now-playing-bar] .main-button-primary:active,
:root aside[data-testid=now-playing-bar] .main-button-primary:focus,
:root aside[data-testid=now-playing-bar] .main-button-primary:hover,
:root .Root__now-playing-bar .main-button-primary:active,
:root .Root__now-playing-bar .main-button-primary:focus,
:root .Root__now-playing-bar .main-button-primary:hover {
  background: var(--glass-button-background-hover, linear-gradient(135deg, rgba(var(--sn-accent-rgb, 128, 128, 128), 0.95) 0%, rgba(var(--sn-accent-rgb, 128, 128, 128), 0.8) 100%));
  transform: translateZ(0);
  box-shadow: 0 0 calc(6px * var(--sn-music-beat-pulse-intensity, 0)) rgba(var(--sn-accent-rgb, 128, 128, 128), calc(0.3 * var(--sn-music-beat-pulse-intensity, 0)));
}
:root aside[data-testid=now-playing-bar] .Button-sm-16-buttonTertiary-iconOnly-isUsingKeyboard-useBrowserDefaultFocusStyle,
:root aside[data-testid=now-playing-bar] .control-button,
:root aside[data-testid=now-playing-bar] .main-view-container button:hover > div[class^=ButtonInner-sc-],
:root aside[data-testid=now-playing-bar] .main-skipForwardButton-button,
:root aside[data-testid=now-playing-bar] .main-skipBackButton-button,
:root .Root__now-playing-bar .Button-sm-16-buttonTertiary-iconOnly-isUsingKeyboard-useBrowserDefaultFocusStyle,
:root .Root__now-playing-bar .control-button,
:root .Root__now-playing-bar .main-view-container button:hover > div[class^=ButtonInner-sc-],
:root .Root__now-playing-bar .main-skipForwardButton-button,
:root .Root__now-playing-bar .main-skipBackButton-button {
  color: var(--spice-subtext) !important;
  transition: all 0.3s var(--sn-easing-explorer, ease-out);
  transform: translateZ(0);
}
:root aside[data-testid=now-playing-bar] .Button-sm-16-buttonTertiary-iconOnly-isUsingKeyboard-useBrowserDefaultFocusStyle:hover,
:root aside[data-testid=now-playing-bar] .control-button:hover,
:root aside[data-testid=now-playing-bar] .main-view-container button:hover > div[class^=ButtonInner-sc-]:hover,
:root aside[data-testid=now-playing-bar] .main-skipForwardButton-button:hover,
:root aside[data-testid=now-playing-bar] .main-skipBackButton-button:hover,
:root .Root__now-playing-bar .Button-sm-16-buttonTertiary-iconOnly-isUsingKeyboard-useBrowserDefaultFocusStyle:hover,
:root .Root__now-playing-bar .control-button:hover,
:root .Root__now-playing-bar .main-view-container button:hover > div[class^=ButtonInner-sc-]:hover,
:root .Root__now-playing-bar .main-skipForwardButton-button:hover,
:root .Root__now-playing-bar .main-skipBackButton-button:hover {
  color: var(--spice-text) !important;
  transform: translateZ(0);
  text-shadow: 0 0 calc(3px * var(--sn-music-beat-pulse-intensity, 0)) rgba(var(--sn-accent-rgb, 128, 128, 128), calc(0.4 * var(--sn-music-beat-pulse-intensity, 0)));
}
:root aside[data-testid=now-playing-bar] .control-button-heart[aria-checked=true],
:root aside[data-testid=now-playing-bar] .main-addButton-active,
:root aside[data-testid=now-playing-bar] .main-addButton-active:focus,
:root aside[data-testid=now-playing-bar] .main-addButton-active:hover,
:root .Root__now-playing-bar .control-button-heart[aria-checked=true],
:root .Root__now-playing-bar .main-addButton-active,
:root .Root__now-playing-bar .main-addButton-active:focus,
:root .Root__now-playing-bar .main-addButton-active:hover {
  color: var(--spice-red);
  transform: translateZ(0);
  filter: drop-shadow(0 0 calc(6px * var(--sn-music-beat-pulse-intensity, 0)) rgba(var(--spice-rgb-red, 243, 139, 168), calc(0.7 * var(--sn-music-beat-pulse-intensity, 0))));
  transition: all 0.15s var(--sn-anim-easing-bounce-strong);
}
:root aside[data-testid=now-playing-bar] .x-progressBar-progressBarBg,
:root .Root__now-playing-bar .x-progressBar-progressBarBg {
  position: relative;
}
:root aside[data-testid=now-playing-bar] .x-progressBar-progressBarBg > div > div,
:root .Root__now-playing-bar .x-progressBar-progressBarBg > div > div {
  background: linear-gradient(calc(90deg + var(--sn-music-rhythm-phase, 0) * 4deg), rgba(var(--sn-accent-rgb, 128, 128, 128), 0.9) 0%, rgba(var(--sn-accent-rgb, 128, 128, 128), 1) 50%, rgba(var(--sn-accent-rgb, 128, 128, 128), 0.9) 100%);
  box-shadow: 0 0 calc(4px * var(--sn-music-beat-pulse-intensity, 0)) rgba(var(--sn-accent-rgb, 128, 128, 128), calc(0.5 * var(--sn-music-beat-pulse-intensity, 0)));
  transition: box-shadow 0.2s ease-out;
}
:root aside[data-testid=now-playing-bar] .x-progressBar-progressBarBg::before,
:root .Root__now-playing-bar .x-progressBar-progressBarBg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(var(--sn-accent-rgb, 128, 128, 128), calc(0.1 * var(--sn-music-beat-pulse-intensity, 0))) 50%, transparent 100%);
  z-index: -1;
  transition: all 0.3s ease-out;
}

.sn-glass-disabled aside[data-testid=now-playing-bar],
.sn-glass-disabled .Root__now-playing-bar {
  background: rgba(var(--spice-rgb-surface0), 0.9) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.sn-glass-disabled aside[data-testid=now-playing-bar]::before,
.sn-glass-disabled .Root__now-playing-bar::before {
  background: rgba(var(--sn-accent-rgb, 128, 128, 128), 0.8) !important;
}

@media (prefers-reduced-motion: reduce) {
  aside[data-testid=now-playing-bar],
  .Root__now-playing-bar {
    transition: none !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
  }
  aside[data-testid=now-playing-bar]::before, aside[data-testid=now-playing-bar]::after,
  .Root__now-playing-bar::before,
  .Root__now-playing-bar::after {
    animation: none !important;
    transition: none !important;
  }
}
@media (max-resolution: 1dppx) {
  aside[data-testid=now-playing-bar]::after,
  .Root__now-playing-bar::after {
    display: none;
  }
}
@supports not (backdrop-filter: blur(1px)) {
  aside[data-testid=now-playing-bar],
  .Root__now-playing-bar {
    background: rgba(var(--spice-rgb-surface0), 0.9) !important;
    border-top: 1px solid rgba(var(--spice-rgb-surface1), 0.5);
  }
}
.loading-state {
  position: relative;
  pointer-events: none;
  user-select: none;
  will-change: transform, opacity, filter;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
  contain: style paint;
  background: linear-gradient(90deg, var(--sn-bg-gradient-secondary, var(--spice-surface0)) 0%, var(--sn-bg-gradient-accent, var(--spice-surface1)) 50%, var(--sn-bg-gradient-secondary, var(--spice-surface0)) 100%);
  background-size: 200% 100%;
  animation: unified-skeleton-shimmer calc(1.5s * 1) ease-in-out infinite;
  opacity: 0.7;
  transition: opacity 0.3s ease;
}
@media (prefers-reduced-motion: reduce) {
  .loading-state {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    opacity: calc(0.5 * 1) !important;
    filter: none !important;
    transform: none !important;
  }
}
@media (prefers-contrast: high) {
  .loading-state {
    opacity: calc(1 * 1.3);
    filter: contrast(1.2);
  }
}

.loading-context-playlist {
  will-change: transform, opacity, filter;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
  contain: style paint;
  background: linear-gradient(90deg, var(--album-dominant-color, var(--sn-bg-gradient-secondary)) 0%, var(--album-accent-color, var(--sn-bg-gradient-accent)) 50%, var(--album-dominant-color, var(--sn-bg-gradient-secondary)) 100%);
  background-size: 200% 100%;
  animation: unified-skeleton-shimmer calc(1.5s * 1) ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .loading-context-playlist {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    opacity: calc(0.5 * 1) !important;
    filter: none !important;
    transform: none !important;
  }
}
@media (prefers-contrast: high) {
  .loading-context-playlist {
    opacity: calc(1 * 1.3);
    filter: contrast(1.2);
  }
}

.loading-context-artist {
  will-change: transform, opacity, filter;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
  contain: style paint;
  background: linear-gradient(90deg, var(--artist-header-start, var(--sn-bg-gradient-primary)) 0%, var(--artist-header-end, var(--sn-bg-gradient-accent)) 50%, var(--artist-header-start, var(--sn-bg-gradient-primary)) 100%);
  background-size: 200% 100%;
  animation: unified-skeleton-shimmer calc(1.5s * 1) ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .loading-context-artist {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    opacity: calc(0.5 * 1) !important;
    filter: none !important;
    transform: none !important;
  }
}
@media (prefers-contrast: high) {
  .loading-context-artist {
    opacity: calc(1 * 1.3);
    filter: contrast(1.2);
  }
}

.loading-context-search {
  will-change: transform, opacity, filter;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
  contain: style paint;
  background: linear-gradient(90deg, var(--spice-surface0) 0%, var(--spice-surface1) 50%, var(--spice-surface0) 100%);
  background-size: 200% 100%;
  animation: unified-skeleton-shimmer calc(1.5s * 1.3) ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .loading-context-search {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    opacity: calc(0.5 * 0.7) !important;
    filter: none !important;
    transform: none !important;
  }
}
@media (prefers-contrast: high) {
  .loading-context-search {
    opacity: calc(0.7 * 1.3);
    filter: contrast(1.2);
  }
}

.loading-context-home {
  will-change: transform, opacity, filter;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
  contain: style paint;
  background: linear-gradient(90deg, var(--sn-bg-gradient-primary, var(--spice-accent)) 0%, var(--spice-accent, var(--sn-bg-gradient-primary)) 50%, var(--sn-bg-gradient-primary, var(--spice-accent)) 100%);
  background-size: 200% 100%;
  animation: unified-skeleton-shimmer calc(1.5s * 1) ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .loading-context-home {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    opacity: calc(0.5 * 1) !important;
    filter: none !important;
    transform: none !important;
  }
}
@media (prefers-contrast: high) {
  .loading-context-home {
    opacity: calc(1 * 1.3);
    filter: contrast(1.2);
  }
}

.loading-intensity-subtle {
  animation-duration: 1.95s;
  opacity: 0.5;
}

.loading-intensity-intense {
  animation-duration: 1.05s;
  opacity: 0.9;
}

.loading-grain-texture {
  mask-image: var(--sn-nebula-noise-url);
  mask-size: 600% 600%;
  animation: unified-skeleton-shimmer 1.5s ease-in-out infinite, year3000-grain-shift 3s linear infinite;
}

.loading-music-sync {
  opacity: calc(0.6 + 0.3 * var(--sn-current-intensity, 0.5));
  animation-duration: calc(1.5s / (1 + var(--sn-current-intensity, 0.5) * 0.5));
}

div.main-trackList-trackListRow[role=row].loading-state {
  will-change: transform, opacity, filter;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
  contain: style paint;
  background: linear-gradient(90deg, var(--album-dominant-color, var(--sn-bg-gradient-secondary)) 0%, var(--album-accent-color, var(--sn-bg-gradient-accent)) 50%, var(--album-dominant-color, var(--sn-bg-gradient-secondary)) 100%);
  background-size: 200% 100%;
  animation: unified-skeleton-shimmer calc(1.5s * 1) ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  div.main-trackList-trackListRow[role=row].loading-state {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    opacity: calc(0.5 * 1) !important;
    filter: none !important;
    transform: none !important;
  }
}
@media (prefers-contrast: high) {
  div.main-trackList-trackListRow[role=row].loading-state {
    opacity: calc(1 * 1.3);
    filter: contrast(1.2);
  }
}
div.main-trackList-trackListRow[role=row].loading-state .main-trackList-rowSectionVariable,
div.main-trackList-trackListRow[role=row].loading-state .main-trackList-rowTitle,
div.main-trackList-trackListRow[role=row].loading-state .main-trackList-rowSubTitle {
  will-change: transform, opacity, filter;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
  contain: style paint;
  opacity: calc(0.5 * 0.7);
  animation: unified-pulse-shimmer calc(1.5s * 1.3) ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  div.main-trackList-trackListRow[role=row].loading-state .main-trackList-rowSectionVariable,
  div.main-trackList-trackListRow[role=row].loading-state .main-trackList-rowTitle,
  div.main-trackList-trackListRow[role=row].loading-state .main-trackList-rowSubTitle {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    opacity: calc(0.5 * 0.7) !important;
    filter: none !important;
    transform: none !important;
  }
}
@media (prefers-contrast: high) {
  div.main-trackList-trackListRow[role=row].loading-state .main-trackList-rowSectionVariable,
  div.main-trackList-trackListRow[role=row].loading-state .main-trackList-rowTitle,
  div.main-trackList-trackListRow[role=row].loading-state .main-trackList-rowSubTitle {
    opacity: calc(0.7 * 1.3);
    filter: contrast(1.2);
  }
}

.loading-state [class*=trackList] {
  will-change: transform, opacity, filter;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
  contain: style paint;
  background: linear-gradient(90deg, var(--album-dominant-color, var(--sn-bg-gradient-secondary)) 0%, var(--album-accent-color, var(--sn-bg-gradient-accent)) 50%, var(--album-dominant-color, var(--sn-bg-gradient-secondary)) 100%);
  background-size: 200% 100%;
  animation: unified-skeleton-shimmer calc(1.5s * 1) ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .loading-state [class*=trackList] {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    opacity: calc(0.5 * 1) !important;
    filter: none !important;
    transform: none !important;
  }
}
@media (prefers-contrast: high) {
  .loading-state [class*=trackList] {
    opacity: calc(1 * 1.3);
    filter: contrast(1.2);
  }
}
.loading-state [class*=trackList] .main-trackList-rowSectionVariable,
.loading-state [class*=trackList] .main-trackList-rowTitle,
.loading-state [class*=trackList] .main-trackList-rowSubTitle {
  will-change: transform, opacity, filter;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
  contain: style paint;
  opacity: calc(0.5 * 0.7);
  animation: unified-pulse-shimmer calc(1.5s * 1.3) ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .loading-state [class*=trackList] .main-trackList-rowSectionVariable,
  .loading-state [class*=trackList] .main-trackList-rowTitle,
  .loading-state [class*=trackList] .main-trackList-rowSubTitle {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    opacity: calc(0.5 * 0.7) !important;
    filter: none !important;
    transform: none !important;
  }
}
@media (prefers-contrast: high) {
  .loading-state [class*=trackList] .main-trackList-rowSectionVariable,
  .loading-state [class*=trackList] .main-trackList-rowTitle,
  .loading-state [class*=trackList] .main-trackList-rowSubTitle {
    opacity: calc(0.7 * 1.3);
    filter: contrast(1.2);
  }
}

.loading-state.main-entityHeader-container .main-entityHeader-image,
.loading-state.main-entityHeader-container .main-entityHeader-headerImage,
.loading-state [class*=entityHeader] .main-entityHeader-image,
.loading-state [class*=entityHeader] .main-entityHeader-headerImage {
  will-change: transform, opacity, filter;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
  contain: style paint;
  background: linear-gradient(90deg, var(--sn-bg-gradient-secondary, var(--spice-surface0)), transparent), linear-gradient(270deg, var(--sn-bg-gradient-accent, var(--spice-surface1)), transparent);
  background-size: 200% 100%;
  opacity: calc(0.6 * 1);
  animation: unified-gradient-shimmer calc(calc(1.5s * 1) * 1.3) ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .loading-state.main-entityHeader-container .main-entityHeader-image,
  .loading-state.main-entityHeader-container .main-entityHeader-headerImage,
  .loading-state [class*=entityHeader] .main-entityHeader-image,
  .loading-state [class*=entityHeader] .main-entityHeader-headerImage {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    opacity: calc(0.5 * 1) !important;
    filter: none !important;
    transform: none !important;
  }
}
@media (prefers-contrast: high) {
  .loading-state.main-entityHeader-container .main-entityHeader-image,
  .loading-state.main-entityHeader-container .main-entityHeader-headerImage,
  .loading-state [class*=entityHeader] .main-entityHeader-image,
  .loading-state [class*=entityHeader] .main-entityHeader-headerImage {
    opacity: calc(1 * 1.3);
    filter: contrast(1.2);
  }
}
.loading-state.main-entityHeader-container .main-entityHeader-title,
.loading-state.main-entityHeader-container .main-entityHeader-subtitle,
.loading-state [class*=entityHeader] .main-entityHeader-title,
.loading-state [class*=entityHeader] .main-entityHeader-subtitle {
  will-change: transform, opacity, filter;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
  contain: style paint;
  --text-shimmer-intensity: calc(0.3 * 0.7);
  opacity: var(--text-shimmer-intensity);
  text-shadow: 0 0 5px rgba(var(--sn-bg-gradient-accent-rgb), calc(0.2 * 0.7));
  animation: unified-text-shimmer calc(calc(1.5s * 1.3) * 1.5) ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .loading-state.main-entityHeader-container .main-entityHeader-title,
  .loading-state.main-entityHeader-container .main-entityHeader-subtitle,
  .loading-state [class*=entityHeader] .main-entityHeader-title,
  .loading-state [class*=entityHeader] .main-entityHeader-subtitle {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    opacity: calc(0.5 * 0.7) !important;
    filter: none !important;
    transform: none !important;
  }
}
@media (prefers-contrast: high) {
  .loading-state.main-entityHeader-container .main-entityHeader-title,
  .loading-state.main-entityHeader-container .main-entityHeader-subtitle,
  .loading-state [class*=entityHeader] .main-entityHeader-title,
  .loading-state [class*=entityHeader] .main-entityHeader-subtitle {
    opacity: calc(0.7 * 1.3);
    filter: contrast(1.2);
  }
}

.loading-state [class*=Card] .main-card-card .main-card-header,
.loading-state [class*=Card] .main-card-card .main-card-imageContainer,
.loading-state [class*=Card] .main-card-cardContainer .main-card-header,
.loading-state [class*=Card] .main-card-cardContainer .main-card-imageContainer,
.loading-state .main-card-card .main-card-header,
.loading-state .main-card-card .main-card-imageContainer,
.loading-state .main-card-cardContainer .main-card-header,
.loading-state .main-card-cardContainer .main-card-imageContainer {
  position: relative;
  isolation: isolate;
}
.loading-state [class*=Card] .main-card-card .main-card-header::after,
.loading-state [class*=Card] .main-card-card .main-card-imageContainer::after,
.loading-state [class*=Card] .main-card-cardContainer .main-card-header::after,
.loading-state [class*=Card] .main-card-cardContainer .main-card-imageContainer::after,
.loading-state .main-card-card .main-card-header::after,
.loading-state .main-card-card .main-card-imageContainer::after,
.loading-state .main-card-cardContainer .main-card-header::after,
.loading-state .main-card-cardContainer .main-card-imageContainer::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--sn-gradient-primary, var(--spice-accent)), transparent), linear-gradient(270deg, var(--spice-accent, var(--sn-gradient-primary)), transparent);
  background-size: 200% 100%;
  mix-blend-mode: overlay;
  opacity: 0.3;
  animation: unified-gradient-shimmer 1.95s ease-in-out infinite;
  will-change: transform, opacity;
  transform: translateZ(0);
  backface-visibility: hidden;
  contain: layout style paint;
}
.loading-state [class*=Card] .main-card-card .main-card-cardImage,
.loading-state [class*=Card] .main-card-card .main-cardImage-image,
.loading-state [class*=Card] .main-card-card .main-image-image,
.loading-state [class*=Card] .main-card-cardContainer .main-card-cardImage,
.loading-state [class*=Card] .main-card-cardContainer .main-cardImage-image,
.loading-state [class*=Card] .main-card-cardContainer .main-image-image,
.loading-state .main-card-card .main-card-cardImage,
.loading-state .main-card-card .main-cardImage-image,
.loading-state .main-card-card .main-image-image,
.loading-state .main-card-cardContainer .main-card-cardImage,
.loading-state .main-card-cardContainer .main-cardImage-image,
.loading-state .main-card-cardContainer .main-image-image {
  position: relative;
  z-index: 1;
  opacity: 1 !important;
  isolation: auto;
}
.loading-state [class*=Card] .main-card-card .main-cardHeader-text,
.loading-state [class*=Card] .main-card-cardContainer .main-cardHeader-text,
.loading-state .main-card-card .main-cardHeader-text,
.loading-state .main-card-cardContainer .main-cardHeader-text {
  position: relative;
  z-index: 3;
  will-change: transform, opacity, filter;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
  contain: style paint;
  --text-shimmer-intensity: calc(0.3 * 0.7);
  opacity: var(--text-shimmer-intensity);
  text-shadow: 0 0 5px rgba(var(--sn-bg-gradient-accent-rgb), calc(0.2 * 0.7));
  animation: unified-text-shimmer calc(calc(1.5s * 1.3) * 1.5) ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .loading-state [class*=Card] .main-card-card .main-cardHeader-text,
  .loading-state [class*=Card] .main-card-cardContainer .main-cardHeader-text,
  .loading-state .main-card-card .main-cardHeader-text,
  .loading-state .main-card-cardContainer .main-cardHeader-text {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    opacity: calc(0.5 * 0.7) !important;
    filter: none !important;
    transform: none !important;
  }
}
@media (prefers-contrast: high) {
  .loading-state [class*=Card] .main-card-card .main-cardHeader-text,
  .loading-state [class*=Card] .main-card-cardContainer .main-cardHeader-text,
  .loading-state .main-card-card .main-cardHeader-text,
  .loading-state .main-card-cardContainer .main-cardHeader-text {
    opacity: calc(0.7 * 1.3);
    filter: contrast(1.2);
  }
}
.loading-state [class*=Card] .main-card-card:not(:has(.main-card-header)),
.loading-state [class*=Card] .main-card-cardContainer:not(:has(.main-card-header)),
.loading-state .main-card-card:not(:has(.main-card-header)),
.loading-state .main-card-cardContainer:not(:has(.main-card-header)) {
  position: relative;
  isolation: isolate;
}
.loading-state [class*=Card] .main-card-card:not(:has(.main-card-header))::after,
.loading-state [class*=Card] .main-card-cardContainer:not(:has(.main-card-header))::after,
.loading-state .main-card-card:not(:has(.main-card-header))::after,
.loading-state .main-card-cardContainer:not(:has(.main-card-header))::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 60%;
  z-index: 2;
  pointer-events: none;
  border-radius: var(--card-border-radius, 12px) var(--card-border-radius, 12px) 0 0;
  background: linear-gradient(90deg, var(--sn-gradient-primary, var(--spice-accent)), transparent), linear-gradient(270deg, var(--spice-accent, var(--sn-gradient-primary)), transparent);
  background-size: 200% 100%;
  mix-blend-mode: overlay;
  opacity: 0.3;
  animation: unified-gradient-shimmer 1.95s ease-in-out infinite;
  will-change: transform, opacity;
  transform: translateZ(0);
  backface-visibility: hidden;
  contain: layout style paint;
}

.loading-state [data-testid*=search],
.loading-state .main-searchSection-searchSection {
  will-change: transform, opacity, filter;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
  contain: style paint;
  background: linear-gradient(90deg, var(--spice-surface0) 0%, var(--spice-surface1) 50%, var(--spice-surface0) 100%);
  background-size: 200% 100%;
  animation: unified-skeleton-shimmer calc(1.5s * 1.3) ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .loading-state [data-testid*=search],
  .loading-state .main-searchSection-searchSection {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    opacity: calc(0.5 * 0.7) !important;
    filter: none !important;
    transform: none !important;
  }
}
@media (prefers-contrast: high) {
  .loading-state [data-testid*=search],
  .loading-state .main-searchSection-searchSection {
    opacity: calc(0.7 * 1.3);
    filter: contrast(1.2);
  }
}

.loading-state [class*=nowPlaying],
.loading-state .main-nowPlayingWidget-nowPlaying {
  will-change: transform, opacity, filter;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
  contain: style paint;
  opacity: calc(0.5 * 1);
  animation: unified-pulse-shimmer calc(1.5s * 1) ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .loading-state [class*=nowPlaying],
  .loading-state .main-nowPlayingWidget-nowPlaying {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    opacity: calc(0.5 * 1) !important;
    filter: none !important;
    transform: none !important;
  }
}
@media (prefers-contrast: high) {
  .loading-state [class*=nowPlaying],
  .loading-state .main-nowPlayingWidget-nowPlaying {
    opacity: calc(1 * 1.3);
    filter: contrast(1.2);
  }
}

div.main-trackList-trackListRow[role=row]:not(.loading-state) {
  animation: loading-content-fadein 0.4s ease-out;
}

:not(.loading-state).main-entityHeader-container, :not(.loading-state)[class*=Card], :not(.loading-state)[class*=nowPlaying] {
  animation: loading-content-fadein 0.4s ease-out;
}

@keyframes loading-content-fadein {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
    filter: blur(2px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .loading-state {
    animation: none !important;
    opacity: 0.5 !important;
    background: var(--spice-surface0) !important;
    background-size: 100% 100% !important;
  }
  .loading-state .main-card-header::after, .loading-state:not(:has(.main-card-header))::after {
    animation: none !important;
    opacity: 0.2 !important;
  }
  :not(.loading-state) {
    animation: none !important;
  }
}
@media (prefers-contrast: high) {
  .loading-state {
    opacity: 0.9;
    filter: contrast(1.2);
    border: 1px solid var(--spice-text);
  }
  .loading-state .main-card-header::after, .loading-state:not(:has(.main-card-header))::after {
    opacity: 0.15 !important;
    mix-blend-mode: normal !important;
  }
}
@media (max-width: 768px) {
  .loading-state {
    animation-duration: 2s !important;
  }
  .loading-grain-texture {
    mask-image: none;
    animation: unified-skeleton-shimmer 2s ease-in-out infinite;
  }
}
.debug-loading-states .loading-state {
  outline: 2px dashed var(--spice-notification-error);
  outline-offset: 2px;
}
.debug-loading-states .loading-state::after {
  content: attr(class);
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
  color: var(--spice-notification-error);
  font-size: 10px;
  padding: 4px 8px;
  border-radius: 4px;
  z-index: 999999;
  pointer-events: none;
  white-space: nowrap;
}

:root {
  --z-galactic-backdrop: -1100;
  --z-cosmic-dust: -1090;
  --z-far-nebula: -1080;
  --z-far-stars: -1070;
  --z-mid-nebula: -1060;
  --z-mid-stars: -1050;
  --z-near-nebula: -1040;
  --z-near-stars: -1030;
  --z-local-nebula: -1020;
  --z-local-stars: -1010;
  --z-depth-layer-0: -20;
  --z-depth-layer-1: -10;
  --z-depth-layer-2: -5;
  --z-atmospheric-glow: -5;
  --z-starfield: -10;
  --z-crystals: -9;
  --z-content-base: 0;
  --z-content-hover: 2;
  --z-content-focus: 3;
  --z-right-sidebar-glow: 5;
  --z-right-sidebar-content: 6;
  --z-ui-overlays: 100;
}

.Root__main-view {
  position: relative;
  z-index: var(--z-content-base);
}

.sn-stars-container {
  z-index: 1 !important;
}

.shootingstar {
  z-index: 2 !important;
  position: fixed;
}

:root {
  --depth-layer-right-sidebar: 2.5;
  --sn-depth-right-sidebar-z: 4px;
  --sn-depth-right-sidebar-opacity: 0.06;
  --sn-depth-right-sidebar-blur: 1px;
  --sn-depth-layer-0-z: 75px;
  --sn-depth-layer-0-opacity: 0.05;
  --sn-depth-layer-0-blur: 2px;
  --sn-depth-layer-0-offset-y: 0px;
  --sn-depth-layer-0-hue-rotate: 0deg;
  --sn-depth-layer-0-scale: 1;
  --sn-depth-layer-1-z: 150px;
  --sn-depth-layer-1-opacity: 0.05;
  --sn-depth-layer-1-blur: 4px;
  --sn-depth-layer-1-offset-y: 0px;
  --sn-depth-layer-1-hue-rotate: 0deg;
  --sn-depth-layer-1-scale: 1;
  --sn-depth-layer-2-z: 225px;
  --sn-depth-layer-2-opacity: 0.04;
  --sn-depth-layer-2-blur: 6px;
  --sn-depth-layer-2-offset-y: 0px;
  --sn-depth-layer-2-hue-rotate: 0deg;
  --sn-depth-layer-2-scale: 1;
  --sn-depth-layer-3-z: 300px;
  --sn-depth-layer-3-opacity: 0.03;
  --sn-depth-layer-3-blur: 8px;
  --sn-depth-layer-3-offset-y: 0px;
  --sn-depth-layer-3-hue-rotate: 0deg;
  --sn-depth-layer-3-scale: 1;
  --sn-depth-layer-transition: opacity 700ms ease-out, transform 700ms ease-out,
    filter 700ms ease-out;
}

:root {
  --cosmic-depth-layer-1: translateZ(0px);
  --cosmic-depth-layer-2: translateZ(-100px);
  --cosmic-depth-layer-3: translateZ(-300px);
  --cosmic-depth-layer-4: translateZ(-600px);
  --cosmic-depth-layer-5: translateZ(-1000px);
  --cosmic-depth-layer-6: translateZ(-1500px);
  --cosmic-perspective: 2000px;
  --parallax-speed-1: 1;
  --parallax-speed-2: 0.8;
  --parallax-speed-3: 0.5;
  --parallax-speed-4: 0.3;
  --parallax-speed-5: 0.1;
  --parallax-speed-6: 0.05;
  --star-density-near: 50;
  --star-density-mid: 150;
  --star-density-far: 300;
  --star-density-infinite: 500;
  --nebula-scale-small: 200%;
  --nebula-scale-medium: 500%;
  --nebula-scale-large: 1000%;
  --nebula-scale-infinite: 2000%;
  --nebula-flow-speed: 60s;
  --galaxy-rotation-speed: 120s;
  --galaxy-spiral-arms: 4;
  --galaxy-core-brightness: 0.8;
  --galaxy-outer-dimness: 0.2;
  --cosmic-zoom-level: 1;
  --zoom-animation-speed: 15s;
  --zoom-depth-variance: 200px;
  --zoom-breathing-rhythm: 8s;
  --music-cosmic-expansion: calc(var(--sn-music-beat-pulse-intensity, 0) * 0.3 + 1);
  --music-stellar-intensity: calc(var(--sn-music-beat-pulse-intensity, 0) * 0.6 + 0.4);
  --music-galactic-rotation: calc(2 - var(--sn-music-beat-pulse-intensity, 0));
  --music-depth-perception: calc(var(--sn-music-energy, 0.5) * 1000px + 500px);
}

@keyframes infinite-star-field-drift {
  0% {
    transform: translate3d(0, 0, 0) rotateZ(0deg);
    opacity: 0.6;
  }
  25% {
    transform: translate3d(300px, -200px, 50px) rotateZ(90deg);
    opacity: 0.9;
  }
  50% {
    transform: translate3d(-150px, 400px, -100px) rotateZ(180deg);
    opacity: 0.4;
  }
  75% {
    transform: translate3d(-400px, -100px, 150px) rotateZ(270deg);
    opacity: 0.8;
  }
  100% {
    transform: translate3d(0, 0, 0) rotateZ(360deg);
    opacity: 0.6;
  }
}
@keyframes galactic-holographic-rotation {
  0% {
    filter: brightness(1) hue-rotate(0deg);
    background-position: 0% 50%;
  }
  25% {
    filter: brightness(1.2) hue-rotate(15deg);
    background-position: 25% 75%;
  }
  50% {
    filter: brightness(0.8) hue-rotate(30deg);
    background-position: 50% 100%;
  }
  75% {
    filter: brightness(1.1) hue-rotate(45deg);
    background-position: 75% 25%;
  }
  100% {
    filter: brightness(1) hue-rotate(60deg);
    background-position: 100% 50%;
  }
}
@keyframes nebula-holographic-flow {
  0% {
    background-position: 0% 0%, 100% 100%, 50% 0%, 0% 50%;
    filter: brightness(1) saturate(1.2) hue-rotate(0deg);
  }
  20% {
    background-position: 20% 80%, 80% 20%, 70% 30%, 30% 70%;
    filter: brightness(1.2) saturate(1.4) hue-rotate(72deg);
  }
  40% {
    background-position: 40% 60%, 60% 40%, 90% 60%, 10% 40%;
    filter: brightness(0.9) saturate(1.1) hue-rotate(144deg);
  }
  60% {
    background-position: 60% 40%, 40% 60%, 30% 90%, 70% 10%;
    filter: brightness(1.1) saturate(1.3) hue-rotate(216deg);
  }
  80% {
    background-position: 80% 20%, 20% 80%, 50% 50%, 50% 50%;
    filter: brightness(1) saturate(1) hue-rotate(288deg);
  }
  100% {
    background-position: 100% 0%, 0% 100%, 50% 0%, 0% 50%;
    filter: brightness(1) saturate(1.2) hue-rotate(360deg);
  }
}
@keyframes cosmic-holographic-pulse {
  0%, 100% {
    filter: brightness(1) blur(8px);
    perspective: var(--cosmic-perspective);
  }
  50% {
    filter: brightness(1.02) blur(9px);
    perspective: calc(var(--cosmic-perspective) * 1.2);
  }
}
@keyframes stellar-holographic-pulse {
  0% {
    filter: brightness(var(--music-stellar-intensity)) blur(0px);
    background-position: 0% 0%;
  }
  100% {
    filter: brightness(calc(var(--music-stellar-intensity) * 0.5)) blur(1px);
    background-position: 100% 100%;
  }
}
/**
 * Depth Layer System - Modern layered visual effects
 * Transforms blur into intentional depth layers with content protection
 * 
 * Features: Layered depth effects that enhance user experience while 
 * maintaining clarity and accessibility for content interaction.
 */
/* ═══════════════════════════════════════════════════════════════════════════════
   🏗️ DEPTH LAYER SYSTEM - Base Architecture
   ═══════════════════════════════════════════════════════════════════════════════ */
/* ============================================================================ */
/* LEGACY COMPATIBILITY - Consolidated */
/* ============================================================================ */
:root {
  --particle-network-density: 3;
  --particle-base-speed: 8s;
  --particle-energy-intensity: 0.8;
  --particle-connection-strength: 0.6;
  --particle-interface-influence: 1;
  --particle-flow-variance: 15deg;
  --particle-dynamic-curve: var(--sn-anim-easing-organic);
  --particle-life-cycle: 12s;
  --particle-emergence-delay: 3s;
  --particle-cluster-size: 4;
  --particle-cluster-radius: 80px;
  --particle-cluster-cohesion: 0.7;
  --particle-cluster-drift: 120px;
  --particle-primary-energy: rgba(
    var(--sn-accent-rgb, var(--sn-accent-rgb, 202,158,230)),
    0.8
  );
  --particle-secondary-energy: rgba(
    var(--sn-accent-rgb, var(--spice-rgb-surface0, 186,187,241)),
    0.6
  );
  --particle-accent-energy: rgba(
    var(--sn-accent-rgb, var(--sn-accent-rgb, 140,170,238)),
    0.7
  );
  --particle-focus-dampening: 0.3;
  --particle-discovery-amplification: 1.4;
  --particle-music-modulation: 1;
  --aurora-layer-1-intensity: 0.08;
  --aurora-layer-2-intensity: 0.05;
  --aurora-layer-3-intensity: 0.03;
  --aurora-flow-speed: calc(var(--particle-base-speed) * 3.2);
  --aurora-shimmer-speed: calc(var(--particle-base-speed) * 1.5);
}

@keyframes energy-stream-primary {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
  }
  20% {
    transform: translate(-50%, -50%) scale(0.3);
    opacity: 0.8;
  }
  80% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  85% {
    transform: translate(-50%, -50%) scale(1.1);
    opacity: 0.5;
  }
  95% {
    transform: translate(-50%, -50%) scale(0.9);
    opacity: 0.1;
  }
  100% {
    transform: translate(-50%, -50%) scale(0.3);
    opacity: 0;
  }
}
@keyframes energy-whisper-secondary {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
  }
  10% {
    transform: translate(-50%, -50%) scale(0.6);
    opacity: calc(var(--particle-energy-intensity) * 0.7);
  }
  30% {
    transform: translate(-50%, -50%) scale(0.8);
    opacity: calc(var(--particle-energy-intensity) * 0.9);
  }
  60% {
    transform: translate(-50%, -50%) scale(0.7);
    opacity: calc(var(--particle-energy-intensity) * 0.8);
  }
  85% {
    transform: translate(-50%, -50%) scale(0.4);
    opacity: 0;
  }
  100% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
  }
}
@keyframes animation-pulse-interface {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
  }
  20% {
    transform: translate(-50%, -50%) scale(1);
    opacity: calc(var(--particle-energy-intensity) * var(--particle-interface-influence));
  }
  40% {
    transform: translate(-50%, -50%) scale(1.2);
    opacity: calc(var(--particle-energy-intensity) * var(--particle-interface-influence) * 0.8);
  }
  60% {
    transform: translate(-50%, -50%) scale(0.9);
    opacity: calc(var(--particle-energy-intensity) * var(--particle-interface-influence) * 0.6);
  }
  80% {
    transform: translate(-50%, -50%) scale(0.5);
    opacity: calc(var(--particle-energy-intensity) * var(--particle-interface-influence) * 0.3);
  }
  100% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
  }
}
@keyframes energy-cluster-formation {
  0% {
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 0;
  }
  15% {
    transform: translate(-50%, -50%) scale(0.8);
    opacity: calc(var(--particle-energy-intensity) * var(--particle-cluster-cohesion));
  }
  30% {
    transform: translate(-50%, -50%) scale(1);
    opacity: calc(var(--particle-energy-intensity) * var(--particle-cluster-cohesion) * 1.1);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.1);
    opacity: calc(var(--particle-energy-intensity) * var(--particle-cluster-cohesion) * 1.2);
  }
  70% {
    transform: translate(-50%, -50%) scale(0.9);
    opacity: calc(var(--particle-energy-intensity) * var(--particle-cluster-cohesion) * 0.9);
  }
  85% {
    transform: translate(-50%, -50%) scale(0.6);
    opacity: calc(var(--particle-energy-intensity) * var(--particle-cluster-cohesion) * 0.5);
  }
  100% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
  }
}
@keyframes animation-twinkle-dynamic {
  0%, 100% {
    opacity: calc(var(--particle-energy-intensity) * 0.6);
    transform: scale(1);
  }
  25% {
    opacity: calc(var(--particle-energy-intensity) * 0.9);
    transform: scale(1.1);
  }
  50% {
    opacity: calc(var(--particle-energy-intensity) * 0.4);
    transform: scale(0.8);
  }
  75% {
    opacity: calc(var(--particle-energy-intensity) * 0.8);
    transform: scale(1.05);
  }
}
@keyframes aurora-background-flow {
  0% {
    background-position: 0% 50%, 100% 50%, 50% 0%;
    filter: hue-rotate(0deg) brightness(1);
  }
  25% {
    background-position: 50% 100%, 0% 0%, 100% 50%;
    filter: hue-rotate(8deg) brightness(1.05);
  }
  50% {
    background-position: 100% 50%, 50% 100%, 0% 100%;
    filter: hue-rotate(15deg) brightness(0.98);
  }
  75% {
    background-position: 50% 0%, 100% 50%, 50% 50%;
    filter: hue-rotate(23deg) brightness(1.02);
  }
  100% {
    background-position: 0% 50%, 100% 50%, 50% 0%;
    filter: hue-rotate(30deg) brightness(1);
  }
}
@keyframes nebula-particle-drift {
  0% {
    transform: translate3d(0, 0, 0) rotateZ(0deg);
    opacity: 0.3;
  }
  33% {
    transform: translate3d(50px, -40px, 15px) rotateZ(40deg);
    opacity: 0.5;
  }
  66% {
    transform: translate3d(-30px, 50px, -10px) rotateZ(80deg);
    opacity: 0.4;
  }
  100% {
    transform: translate3d(0, 0, 0) rotateZ(120deg);
    opacity: 0.3;
  }
}
.main-nowPlayingBar-nowPlayingBar {
  transform: scale(calc(var(--sn-music-breathing-scale, 1) * (1 + var(--sn-audio-emotional-intensity, 0.5) * 0.05)));
  transition: transform calc(var(--sn-audio-breathing-cycle, 4s) * 0.1) var(--sn-anim-easing-organic, cubic-bezier(0.4, 0, 0.2, 1));
}
.main-nowPlayingBar-nowPlayingBar:where(.smooth-emotion-calm, .smooth-emotion-energetic, .smooth-emotion-melancholy) {
  animation: beat-sync-breathing var(--sn-audio-breathing-cycle, 4s) ease-in-out infinite;
}
.main-nowPlayingBar-nowPlayingBar .main-addButton-button.control-button-heart {
  transform: scale(calc(1 + var(--sn-music-beat-pulse-intensity, 0) * 0.15 + var(--sn-audio-emotional-intensity, 0.5) * 0.08));
  animation: audio-element-breathing var(--sn-audio-breathing-cycle, 1s) ease-in-out infinite;
  --breathing-context-multiplier: var(--sn-audio-breathing-enhanced, 1.5);
  transition: transform 140ms var(--sn-anim-easing-organic, cubic-bezier(0.4, 0, 0.2, 1));
  filter: drop-shadow(0 0 calc(6px * var(--sn-music-beat-pulse-intensity, 0) * var(--sn-audio-emotional-intensity, 0.5)) rgba(var(--sn-emotion-romantic-accent, var(--spice-rgb-red, 243, 139, 168)), calc(0.6 * var(--sn-music-beat-pulse-intensity, 0) * var(--sn-audio-emotional-intensity, 0.5)))) saturate(var(--sn-audio-emotional-saturation, 1)) brightness(var(--sn-audio-temperature-brightness, 1));
}
.main-nowPlayingBar-nowPlayingBar .main-addButton-button.control-button-heart:where(.smooth-emotion-romantic, .smooth-emotion-happy) {
  filter: drop-shadow(0 0 calc(8px * var(--sn-music-beat-pulse-intensity, 0)) rgba(var(--sn-emotion-romantic-accent), 0.8)) saturate(1.2) brightness(1.1);
  animation: romantic-heart-pulse var(--sn-audio-breathing-cycle, 3s) ease-in-out infinite;
}
.main-nowPlayingBar-nowPlayingBar .main-addButton-button.control-button-heart:where(.smooth-emotion-energetic, .smooth-emotion-aggressive) {
  animation: energetic-heart-pulse calc(var(--sn-audio-breathing-cycle, 2s) * 0.8) ease-in-out infinite;
}
.main-nowPlayingBar-nowPlayingBar .main-addButton-button.control-button-heart:where(.smooth-emotion-calm, .smooth-emotion-ambient) {
  animation: calm-heart-pulse calc(var(--sn-audio-breathing-cycle, 6s) * 1.2) ease-in-out infinite;
}
.main-nowPlayingBar-nowPlayingBar .main-trackInfo-container,
.main-nowPlayingBar-nowPlayingBar .main-trackInfo-name {
  animation: audio-element-breathing var(--sn-audio-breathing-cycle, 1s) ease-in-out infinite;
  --breathing-context-multiplier: var(--sn-audio-breathing-standard, 1.0);
}

@keyframes beat-sync-breathing {
  0%, 100% {
    transform: scale(calc(var(--sn-music-breathing-scale, 1) * (1 + var(--sn-audio-emotional-intensity, 0.5) * 0.03)));
    filter: saturate(var(--sn-audio-emotional-saturation, 1)) brightness(var(--sn-audio-temperature-brightness, 1));
  }
  50% {
    transform: scale(calc(var(--sn-music-breathing-scale, 1) * (1 + var(--sn-audio-emotional-intensity, 0.5) * 0.08)));
    filter: saturate(calc(var(--sn-audio-emotional-saturation, 1) * 1.1)) brightness(calc(var(--sn-audio-temperature-brightness, 1) * 1.05));
  }
}
@keyframes romantic-heart-pulse {
  0%, 100% {
    transform: scale(calc(1 + var(--sn-music-beat-pulse-intensity, 0) * 0.15 + var(--natural-emotional-intensity, 0.7) * 0.05));
    filter: drop-shadow(0 0 6px rgba(var(--sn-emotion-romantic-accent), 0.6)) hue-rotate(var(--sn-audio-temperature-hue-shift, 0deg));
  }
  50% {
    transform: scale(calc(1 + var(--sn-music-beat-pulse-intensity, 0) * 0.2 + var(--natural-emotional-intensity, 0.7) * 0.1));
    filter: drop-shadow(0 0 10px rgba(var(--sn-emotion-romantic-accent), 0.8)) hue-rotate(var(--sn-audio-temperature-hue-shift, 0deg)) saturate(1.2);
  }
}
@keyframes energetic-heart-pulse {
  0%, 100% {
    transform: scale(calc(1 + var(--sn-music-beat-pulse-intensity, 0) * 0.12 + var(--natural-emotional-intensity, 1) * 0.06));
    filter: drop-shadow(0 0 4px rgba(var(--sn-emotion-energetic-accent), 0.7)) hue-rotate(var(--sn-audio-temperature-hue-shift, 0deg));
  }
  60% {
    transform: scale(calc(1 + var(--sn-music-beat-pulse-intensity, 0) * 0.2 + var(--natural-emotional-intensity, 1) * 0.12));
    filter: drop-shadow(0 0 12px rgba(var(--sn-emotion-energetic-accent), 1)) hue-rotate(calc(var(--sn-audio-temperature-hue-shift, 0deg) + 10deg)) saturate(1.4) brightness(1.15);
  }
}
@keyframes calm-heart-pulse {
  0%, 100% {
    transform: scale(calc(1 + var(--sn-music-beat-pulse-intensity, 0) * 0.08 + var(--natural-emotional-intensity, 0.6) * 0.04));
    filter: drop-shadow(0 0 3px rgba(var(--sn-emotion-calm-accent), 0.5)) hue-rotate(var(--sn-audio-temperature-hue-shift, 0deg)) blur(0.5px);
  }
  50% {
    transform: scale(calc(1 + var(--sn-music-beat-pulse-intensity, 0) * 0.12 + var(--natural-emotional-intensity, 0.6) * 0.06));
    filter: drop-shadow(0 0 6px rgba(var(--sn-emotion-calm-accent), 0.7)) hue-rotate(var(--sn-audio-temperature-hue-shift, 0deg)) blur(0.3px) saturate(1.1) brightness(1.05);
  }
}
.main-card-card,
.main-card-cardContainer {
  transition: transform 200ms var(--natural-ease-visual, cubic-bezier(0.4, 0, 0.2, 1));
}
.main-card-card:hover:where(.smooth-emotion-energetic, .smooth-emotion-happy, .smooth-emotion-epic),
.main-card-cardContainer:hover:where(.smooth-emotion-energetic, .smooth-emotion-happy, .smooth-emotion-epic) {
  animation: card-energetic-pulse calc(var(--sn-audio-breathing-cycle, 2s) * 0.8) ease-in-out infinite;
}
.main-card-card:hover:where(.smooth-emotion-calm, .smooth-emotion-ambient, .smooth-emotion-romantic),
.main-card-cardContainer:hover:where(.smooth-emotion-calm, .smooth-emotion-ambient, .smooth-emotion-romantic) {
  animation: card-calm-pulse calc(var(--sn-audio-breathing-cycle, 5s) * 1.2) ease-in-out infinite;
}

@keyframes card-energetic-pulse {
  0%, 100% {
    transform: translateY(-2px) scale(calc(1 + var(--sn-music-beat-pulse-intensity, 0) * 0.015));
  }
  50% {
    transform: translateY(-4px) scale(calc(1 + var(--sn-music-beat-pulse-intensity, 0) * 0.025));
  }
}
@keyframes card-calm-pulse {
  0%, 100% {
    transform: translateY(-1px) scale(calc(1 + var(--sn-music-beat-pulse-intensity, 0) * 0.01));
  }
  50% {
    transform: translateY(-2px) scale(calc(1 + var(--sn-music-beat-pulse-intensity, 0) * 0.015));
  }
}
@media (prefers-reduced-motion: reduce) {
  .main-nowPlayingBar-nowPlayingBar,
  .main-addButton-button.control-button-heart {
    animation: none !important;
    transition-duration: 0.1s !important;
  }
  .main-card-card,
  .main-card-cardContainer {
    animation: none !important;
    transition-duration: 0.1s !important;
  }
  .main-addButton-button.control-button-heart {
    transform: scale(calc(1 + var(--sn-music-beat-pulse-intensity, 0) * 0.05)) !important;
    filter: none !important;
  }
}
@media (prefers-contrast: high) {
  .main-addButton-button.control-button-heart {
    filter: drop-shadow(0 0 calc(8px * var(--sn-music-beat-pulse-intensity, 0)) rgba(var(--sn-emotion-romantic-accent), 1)) saturate(2) !important contrast(2) !important brightness(1.3) !important;
  }
}
.sn-performance-mode .main-nowPlayingBar-nowPlayingBar,
.sn-performance-mode .main-addButton-button.control-button-heart {
  animation: none !important;
  transition-duration: 100ms !important;
}
.sn-performance-mode .main-card-card,
.sn-performance-mode .main-card-cardContainer {
  animation: none !important;
  transition-duration: 100ms !important;
}
.sn-performance-mode .main-addButton-button.control-button-heart {
  filter: drop-shadow(0 0 calc(4px * var(--sn-music-beat-pulse-intensity, 0)) rgba(var(--spice-rgb-red, 243, 139, 168), 0.4)) !important;
}

.Root__main-view::before {
  content: "";
  position: fixed;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  margin: -50px 0 0 -50px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--sn-bg-gradient-primary-rgb), 0.1) 0%, rgba(var(--sn-bg-gradient-secondary-rgb), 0.05) 50%, transparent 100%);
  z-index: -12;
  pointer-events: none;
  will-change: transform, opacity, filter;
  transform: translateZ(0);
  backface-visibility: hidden;
  contain: layout style paint;
  transform: translate(-50%, -50%) scale(var(--sn-flux-visual-effects-pulse, 0));
  opacity: calc(var(--sn-flux-visual-effects-pulse, 0) * 0.8);
  transition: transform 0.1s var(--sn-anim-easing-organic, cubic-bezier(0.4, 0, 0.2, 1)), opacity 0.1s var(--sn-anim-easing-organic, cubic-bezier(0.4, 0, 0.2, 1));
}
.Root__main-view::before:where(.sn-flux-beat-active) {
  animation: flux-visual-effects-beat-pulse 0.5s ease-out;
}

.main-view-container::after {
  content: "";
  position: fixed;
  bottom: 20px;
  left: 20px;
  width: 240px;
  height: 200px;
  z-index: -11;
  pointer-events: none;
  will-change: opacity;
  background: linear-gradient(to top, rgba(var(--sn-bg-gradient-primary-rgb), var(--sn-flux-spectral-bass, 0)) 0px, transparent calc(var(--sn-flux-spectral-bass, 0) * 60px)) 0px 0px/60px 100% no-repeat, linear-gradient(to top, rgba(var(--sn-bg-gradient-secondary-rgb), var(--sn-flux-spectral-mid, 0)) 0px, transparent calc(var(--sn-flux-spectral-mid, 0) * 60px)) 60px 0px/60px 100% no-repeat, linear-gradient(to top, rgba(var(--sn-bg-gradient-accent-rgb), var(--sn-flux-spectral-treble, 0)) 0px, transparent calc(var(--sn-flux-spectral-treble, 0) * 60px)) 120px 0px/60px 100% no-repeat, linear-gradient(to top, rgba(var(--sn-bg-gradient-primary-rgb), var(--sn-flux-spectral-vocal, 0)) 0px, transparent calc(var(--sn-flux-spectral-vocal, 0) * 60px)) 180px 0px/60px 100% no-repeat;
  opacity: var(--sn-flux-spectral-enabled, 1);
  transition: opacity 0.3s var(--sn-anim-easing-organic, cubic-bezier(0.4, 0, 0.2, 1));
}

.Root__top-container::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(to right, rgba(var(--sn-bg-gradient-primary-rgb), 0.6) 0%, rgba(var(--sn-bg-gradient-accent-rgb), 0.4) 100%);
  z-index: -10;
  pointer-events: none;
  will-change: transform, opacity, filter;
  transform: translateZ(0);
  backface-visibility: hidden;
  contain: layout style paint;
  transform: scaleX(var(--sn-flux-temporal-flow-progress, 0));
  transform-origin: left;
  opacity: calc(var(--sn-flux-temporal-flow-progress, 0) * var(--sn-flux-energy-level, 0.5));
  transition: transform 0.2s var(--sn-anim-easing-organic, cubic-bezier(0.4, 0, 0.2, 1)), opacity 0.2s var(--sn-anim-easing-organic, cubic-bezier(0.4, 0, 0.2, 1));
}

.Root__top-container::after {
  content: "";
  position: fixed;
  top: 20px;
  right: 20px;
  width: 100px;
  height: 100px;
  background: conic-gradient(from 0deg, rgba(var(--sn-bg-gradient-primary-rgb), 0.3) 0deg, rgba(var(--sn-bg-gradient-secondary-rgb), 0.2) 120deg, rgba(var(--sn-bg-gradient-accent-rgb), 0.1) 240deg, rgba(var(--sn-bg-gradient-primary-rgb), 0.3) 360deg);
  border-radius: 50%;
  z-index: -11;
  pointer-events: none;
  will-change: transform, opacity, filter;
  transform: translateZ(0);
  backface-visibility: hidden;
  contain: layout style paint;
  transform: scale(calc(0.5 + var(--sn-flux-harmonic-resonance, 0) * 0.5)) rotate(var(--sn-flux-harmonic-rotation, 0deg));
  opacity: calc(var(--sn-flux-harmonic-resonance, 0) * 0.7);
  transition: transform 0.2s var(--sn-anim-easing-organic, cubic-bezier(0.4, 0, 0.2, 1)), opacity 0.2s var(--sn-anim-easing-organic, cubic-bezier(0.4, 0, 0.2, 1));
}

@keyframes flux-visual-effects-beat-pulse {
  0% {
    transform: translate(-50%, -50%) scale(var(--sn-flux-visual-effects-pulse, 0));
  }
  50% {
    transform: translate(-50%, -50%) scale(calc(var(--sn-flux-visual-effects-pulse, 0) * 1.5));
  }
  100% {
    transform: translate(-50%, -50%) scale(var(--sn-flux-visual-effects-pulse, 0));
  }
}
.sn-flux-beat-active .Root__main-view::before,
.sn-flux-beat-active .main-view-container::after,
.sn-flux-beat-active .Root__top-container::before,
.sn-flux-beat-active .Root__top-container::after {
  animation: flux-beat-pulse 0.2s ease-out;
}

@keyframes flux-beat-pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(calc(1 + var(--sn-flux-beat-intensity, 0.5) * 0.1));
  }
  100% {
    transform: scale(1);
  }
}
.sn-visual-mode-dormant .Root__main-view::before,
.sn-visual-mode-dormant .main-view-container::after,
.sn-visual-mode-dormant .Root__top-container::before,
.sn-visual-mode-dormant .Root__top-container::after {
  opacity: calc(var(--sn-flux-visual-effects-pulse, 0) * 0.3);
  filter: blur(1px);
}

.sn-visual-mode-aware .Root__main-view::before,
.sn-visual-mode-aware .main-view-container::after,
.sn-visual-mode-aware .Root__top-container::before,
.sn-visual-mode-aware .Root__top-container::after {
  opacity: calc(var(--sn-flux-visual-effects-pulse, 0) * 0.7);
}

.sn-visual-mode-enhanced .Root__main-view::before {
  background: radial-gradient(circle, rgba(var(--sn-bg-gradient-primary-rgb), 0.15) 0%, rgba(var(--sn-bg-gradient-secondary-rgb), 0.1) 30%, rgba(var(--sn-bg-gradient-accent-rgb), 0.05) 60%, transparent 100%);
  filter: drop-shadow(0 0 20px rgba(var(--sn-bg-gradient-primary-rgb), 0.3)) saturate(1.2) brightness(1.1);
}
.sn-visual-mode-enhanced .main-view-container::after {
  filter: drop-shadow(0 0 10px rgba(var(--sn-bg-gradient-primary-rgb), 0.2)) saturate(1.3);
}
.sn-visual-mode-enhanced .Root__top-container::before {
  height: 6px;
  filter: drop-shadow(0 0 8px rgba(var(--sn-bg-gradient-accent-rgb), 0.4)) brightness(1.2);
}
.sn-visual-mode-enhanced .Root__top-container::after {
  filter: drop-shadow(0 0 15px rgba(var(--sn-bg-gradient-primary-rgb), 0.4)) saturate(1.4) brightness(1.15);
}

.sn-temporal-linear .Root__top-container::before {
  transition: transform 0.1s linear;
}

.sn-temporal-natural .Root__top-container::before {
  transition: transform 0.2s var(--sn-anim-easing-organic, cubic-bezier(0.4, 0, 0.2, 1));
}

.sn-temporal-quantum .Root__top-container::before {
  transition: transform 0.05s steps(4, end);
}

.sn-harmonic-subtle .Root__top-container::after {
  transform: scale(calc(0.7 + var(--sn-flux-harmonic-resonance, 0) * 0.2)) rotate(calc(var(--sn-flux-harmonic-rotation, 0deg) * 0.5));
  opacity: calc(var(--sn-flux-harmonic-resonance, 0) * 0.4);
}

.sn-harmonic-responsive .Root__top-container::after {
  transform: scale(calc(0.5 + var(--sn-flux-harmonic-resonance, 0) * 0.5)) rotate(var(--sn-flux-harmonic-rotation, 0deg));
  opacity: calc(var(--sn-flux-harmonic-resonance, 0) * 0.7);
}

.sn-harmonic-dynamic .Root__top-container::after {
  transform: scale(calc(0.3 + var(--sn-flux-harmonic-resonance, 0) * 0.8)) rotate(calc(var(--sn-flux-harmonic-rotation, 0deg) * 1.5));
  opacity: calc(var(--sn-flux-harmonic-resonance, 0) * 1);
  filter: hue-rotate(calc(var(--sn-flux-harmonic-rotation, 0deg) * 0.5)) saturate(calc(1 + var(--sn-flux-harmonic-resonance, 0) * 0.5)) brightness(calc(1 + var(--sn-flux-harmonic-resonance, 0) * 0.2));
}

@media (prefers-reduced-motion: reduce) {
  .Root__main-view::before,
  .main-view-container::after,
  .Root__top-container::before,
  .Root__top-container::after {
    animation: none !important;
    transition-duration: 0.1s !important;
  }
  .Root__main-view::before {
    transform: translate(-50%, -50%) scale(calc(var(--sn-flux-visual-effects-pulse, 0) * 0.5)) !important;
  }
  .Root__top-container::after {
    transform: scale(0.5) !important;
  }
}
@media (prefers-contrast: high) {
  .Root__main-view::before {
    background: radial-gradient(circle, rgba(var(--sn-bg-gradient-primary-rgb), 0.3) 0%, rgba(var(--sn-bg-gradient-secondary-rgb), 0.15) 50%, transparent 100%) !important;
  }
  .main-view-container::after {
    filter: contrast(2) saturate(1.5) !important;
  }
  .Root__top-container::before {
    background: linear-gradient(to right, rgba(var(--sn-bg-gradient-primary-rgb), 1) 0%, rgba(var(--sn-bg-gradient-accent-rgb), 0.8) 100%) !important;
  }
  .Root__top-container::after {
    filter: contrast(1.5) saturate(2) brightness(1.2) !important;
  }
}
.sn-performance-mode .Root__main-view::before,
.sn-performance-mode .main-view-container::after,
.sn-performance-mode .Root__top-container::before,
.sn-performance-mode .Root__top-container::after {
  animation: none !important;
  transition-duration: 50ms !important;
  filter: none !important;
}
.sn-performance-mode .Root__main-view::before {
  background: rgba(var(--sn-bg-gradient-primary-rgb), 0.1) !important;
}
.sn-performance-mode .main-view-container::after {
  background: linear-gradient(to top, rgba(var(--sn-bg-gradient-primary-rgb), var(--sn-flux-spectral-bass, 0))) !important;
}

.sn-flux-disabled .Root__main-view::before,
.sn-flux-disabled .main-view-container::after,
.sn-flux-disabled .Root__top-container::before,
.sn-flux-disabled .Root__top-container::after {
  display: none !important;
}

:root {
  --sn-flux-visual-effects-pulse: 0;
  --sn-flux-temporal-flow-progress: 0;
  --sn-flux-harmonic-rotation: 0deg;
  --sn-flux-harmonic-resonance: 0;
  --sn-flux-energy-level: 0.5;
  --sn-flux-beat-intensity: 0.5;
  --sn-flux-spectral-bass: 0;
  --sn-flux-spectral-mid: 0;
  --sn-flux-spectral-treble: 0;
  --sn-flux-spectral-vocal: 0;
  --sn-flux-spectral-enabled: 1;
  --sn-flux-emotional-intensity: 0.5;
  --sn-flux-emotional-valence: 0.5;
}

@keyframes genre-background-pulse {
  0%, 100% {
    filter: brightness(1) saturate(1);
  }
  50% {
    filter: brightness(1.05) saturate(1.1);
  }
}
@keyframes genre-glow-pulse {
  0%, 100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.1);
  }
}
.Root__main-view[data-genre-active] {
  position: relative;
  transition: all var(--genre-transition-duration) var(--genre-transition-easing);
}
.Root__main-view[data-genre-active]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, hsl(var(--genre-primary-hue-min, 240), calc(var(--genre-saturation-base, 50%) * var(--genre-active-intensity, 0.8)), calc(var(--genre-brightness-base, 50%) * 1.2)) 0%, hsl(var(--genre-primary-hue-max, 280), calc(var(--genre-saturation-base, 50%) * var(--genre-active-intensity, 0.8) * 0.8), calc(var(--genre-brightness-base, 50%) * 0.9)) 100%);
  opacity: 0.12;
  pointer-events: none;
  z-index: -1;
  transition: background 0.6s ease-in-out, opacity 0.4s ease-in-out;
}
@media (prefers-reduced-motion: no-preference) {
  .Root__main-view[data-genre-active]::before {
    animation: genre-background-pulse calc(4s / var(--genre-gradient-complexity, 1)) ease-in-out infinite;
  }
}
.Root__main-view[data-genre-active].genre-oklab-enhanced {
  background: linear-gradient(135deg, rgba(var(--sn-oklab-primary-rgb), 0.3) 0%, rgba(var(--sn-oklab-accent-rgb), 0.2) 100%);
}
.Root__main-view[data-genre-active=electronic] {
  filter: saturate(calc(var(--sn-genre-electronic-oklab-chroma-boost) * 0.8)) brightness(calc(var(--sn-genre-electronic-oklab-lightness-boost) * 0.95));
}
.Root__main-view[data-genre-active=classical] {
  filter: saturate(calc(var(--sn-genre-classical-oklab-chroma-boost) * 0.9)) brightness(calc(var(--sn-genre-classical-oklab-lightness-boost) * 0.98));
}
.Root__main-view[data-genre-active=rock] {
  filter: saturate(calc(var(--sn-genre-rock-oklab-chroma-boost) * 0.85)) brightness(calc(var(--sn-genre-rock-oklab-lightness-boost) * 0.96)) contrast(calc(1 + (var(--sn-genre-rock-oklab-chroma-boost) - 1) * 0.2));
}

.Root__now-playing-bar[data-genre-active],
.player-controls[data-genre-active] {
  color: hsl(calc((var(--genre-primary-hue-min, 240) + var(--genre-primary-hue-max, 280)) / 2), calc(var(--genre-saturation-base, 50%) * var(--genre-active-intensity, 0.7)), calc(var(--genre-brightness-base, 50%) * 1.8));
  text-shadow: 0 0 calc(8px * var(--genre-active-intensity, 0.7)) hsla(var(--genre-primary-hue-min, 240), calc(var(--genre-saturation-base, 50%) * 1.2), calc(var(--genre-brightness-base, 50%) * 0.6), calc(0.3 * var(--genre-active-intensity, 0.7)));
  transition: color 0.4s ease-in-out, text-shadow 0.4s ease-in-out;
}
.Root__now-playing-bar[data-genre-active].player-controls--enhanced,
.player-controls[data-genre-active].player-controls--enhanced {
  box-shadow: inset 0 0 calc(6px * 0.5) hsla(var(--genre-primary-hue-min, 240), calc(var(--genre-saturation-base, 50%) * 1.2), calc(var(--genre-brightness-base, 50%) * 1.5), calc(0.15 * var(--genre-active-intensity, 0.7))), 0 0 calc(6px * 1) hsla(var(--genre-primary-hue-min, 240), calc(var(--genre-saturation-base, 50%) * 1.3), calc(var(--genre-brightness-base, 50%) * 1.2), calc(0.4 * var(--genre-active-intensity, 0.7))), 0 0 calc(6px * 2) hsla(var(--genre-primary-hue-max, 280), calc(var(--genre-saturation-base, 50%) * 1.1), calc(var(--genre-brightness-base, 50%) * 0.9), calc(0.2 * var(--genre-active-intensity, 0.7)));
  transition: box-shadow 0.4s ease-in-out;
}
@media (prefers-reduced-motion: no-preference) {
  .Root__now-playing-bar[data-genre-active].player-controls--enhanced,
  .player-controls[data-genre-active].player-controls--enhanced {
    animation: genre-glow-pulse calc(2s / var(--genre-gradient-complexity, 1)) ease-in-out infinite;
  }
}
@media (prefers-reduced-motion: reduce) {
  .Root__now-playing-bar[data-genre-active].player-controls--enhanced,
  .player-controls[data-genre-active].player-controls--enhanced {
    animation: none;
  }
}
.Root__now-playing-bar .control-button[data-genre-active],
.Root__now-playing-bar .player-controls__buttons button[data-genre-active],
.player-controls .control-button[data-genre-active],
.player-controls .player-controls__buttons button[data-genre-active] {
  color: hsl(calc((var(--genre-primary-hue-min, 240) + var(--genre-primary-hue-max, 280)) / 2), calc(var(--genre-saturation-base, 50%) * 0.6), calc(var(--genre-brightness-base, 50%) * 1.8));
  text-shadow: 0 0 calc(8px * 0.6) hsla(var(--genre-primary-hue-min, 240), calc(var(--genre-saturation-base, 50%) * 1.2), calc(var(--genre-brightness-base, 50%) * 0.6), calc(0.3 * 0.6));
  transition: color 0.4s ease-in-out, text-shadow 0.4s ease-in-out;
}
.Root__now-playing-bar .control-button[data-genre-active]:hover,
.Root__now-playing-bar .player-controls__buttons button[data-genre-active]:hover,
.player-controls .control-button[data-genre-active]:hover,
.player-controls .player-controls__buttons button[data-genre-active]:hover {
  box-shadow: inset 0 0 calc(4px * 0.5) hsla(var(--genre-primary-hue-min, 240), calc(var(--genre-saturation-base, 50%) * 1.2), calc(var(--genre-brightness-base, 50%) * 1.5), calc(0.15 * 0.8)), 0 0 calc(4px * 1) hsla(var(--genre-primary-hue-min, 240), calc(var(--genre-saturation-base, 50%) * 1.3), calc(var(--genre-brightness-base, 50%) * 1.2), calc(0.4 * 0.8)), 0 0 calc(4px * 2) hsla(var(--genre-primary-hue-max, 280), calc(var(--genre-saturation-base, 50%) * 1.1), calc(var(--genre-brightness-base, 50%) * 0.9), calc(0.2 * 0.8));
  transition: box-shadow 0.4s ease-in-out;
}
@media (prefers-reduced-motion: no-preference) {
  .Root__now-playing-bar .control-button[data-genre-active]:hover,
  .Root__now-playing-bar .player-controls__buttons button[data-genre-active]:hover,
  .player-controls .control-button[data-genre-active]:hover,
  .player-controls .player-controls__buttons button[data-genre-active]:hover {
    animation: genre-glow-pulse calc(2s / var(--genre-gradient-complexity, 1)) ease-in-out infinite;
  }
}
@media (prefers-reduced-motion: reduce) {
  .Root__now-playing-bar .control-button[data-genre-active]:hover,
  .Root__now-playing-bar .player-controls__buttons button[data-genre-active]:hover,
  .player-controls .control-button[data-genre-active]:hover,
  .player-controls .player-controls__buttons button[data-genre-active]:hover {
    animation: none;
  }
}

.Root__nav-bar[data-genre-active] {
  position: relative;
}
.Root__nav-bar[data-genre-active]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, hsl(var(--genre-primary-hue-min, 240), calc(var(--genre-saturation-base, 50%) * var(--genre-active-intensity, 0.5)), calc(var(--genre-brightness-base, 50%) * 1.2)) 0%, hsl(var(--genre-primary-hue-max, 280), calc(var(--genre-saturation-base, 50%) * var(--genre-active-intensity, 0.5) * 0.8), calc(var(--genre-brightness-base, 50%) * 0.9)) 100%);
  opacity: 0.06;
  pointer-events: none;
  z-index: -1;
  transition: background 0.6s ease-in-out, opacity 0.4s ease-in-out;
}
@media (prefers-reduced-motion: no-preference) {
  .Root__nav-bar[data-genre-active]::before {
    animation: genre-background-pulse calc(4s / var(--genre-gradient-complexity, 1)) ease-in-out infinite;
  }
}
.Root__nav-bar .main-navBar-navBarItem[data-genre-active] {
  color: hsl(calc((var(--genre-primary-hue-min, 240) + var(--genre-primary-hue-max, 280)) / 2), calc(var(--genre-saturation-base, 50%) * 0.5), calc(var(--genre-brightness-base, 50%) * 1.8));
  text-shadow: 0 0 calc(8px * 0.5) hsla(var(--genre-primary-hue-min, 240), calc(var(--genre-saturation-base, 50%) * 1.2), calc(var(--genre-brightness-base, 50%) * 0.6), calc(0.3 * 0.5));
  transition: color 0.4s ease-in-out, text-shadow 0.4s ease-in-out;
}
.Root__nav-bar .main-navBar-navBarItem[data-genre-active]:hover {
  color: hsl(calc((var(--genre-primary-hue-min, 240) + var(--genre-primary-hue-max, 280)) / 2), calc(var(--genre-saturation-base, 50%) * 0.8), calc(var(--genre-brightness-base, 50%) * 1.8));
  text-shadow: 0 0 calc(8px * 0.8) hsla(var(--genre-primary-hue-min, 240), calc(var(--genre-saturation-base, 50%) * 1.2), calc(var(--genre-brightness-base, 50%) * 0.6), calc(0.3 * 0.8));
  transition: color 0.4s ease-in-out, text-shadow 0.4s ease-in-out;
}
.Root__nav-bar .main-navBar-navBarItem[data-genre-active][aria-selected=true] {
  color: hsl(calc((var(--genre-primary-hue-min, 240) + var(--genre-primary-hue-max, 280)) / 2), calc(var(--genre-saturation-base, 50%) * 1), calc(var(--genre-brightness-base, 50%) * 1.8));
  text-shadow: 0 0 calc(8px * 1) hsla(var(--genre-primary-hue-min, 240), calc(var(--genre-saturation-base, 50%) * 1.2), calc(var(--genre-brightness-base, 50%) * 0.6), calc(0.3 * 1));
  transition: color 0.4s ease-in-out, text-shadow 0.4s ease-in-out;
  box-shadow: inset 0 0 calc(3px * 0.5) hsla(var(--genre-primary-hue-min, 240), calc(var(--genre-saturation-base, 50%) * 1.2), calc(var(--genre-brightness-base, 50%) * 1.5), calc(0.15 * 0.9)), 0 0 calc(3px * 1) hsla(var(--genre-primary-hue-min, 240), calc(var(--genre-saturation-base, 50%) * 1.3), calc(var(--genre-brightness-base, 50%) * 1.2), calc(0.4 * 0.9)), 0 0 calc(3px * 2) hsla(var(--genre-primary-hue-max, 280), calc(var(--genre-saturation-base, 50%) * 1.1), calc(var(--genre-brightness-base, 50%) * 0.9), calc(0.2 * 0.9));
  transition: box-shadow 0.4s ease-in-out;
}
@media (prefers-reduced-motion: no-preference) {
  .Root__nav-bar .main-navBar-navBarItem[data-genre-active][aria-selected=true] {
    animation: genre-glow-pulse calc(2s / var(--genre-gradient-complexity, 1)) ease-in-out infinite;
  }
}
@media (prefers-reduced-motion: reduce) {
  .Root__nav-bar .main-navBar-navBarItem[data-genre-active][aria-selected=true] {
    animation: none;
  }
}

.main-card[data-genre-active],
.card[data-genre-active],
.artist-card[data-genre-active],
.playlist-card[data-genre-active] {
  position: relative;
  animation: oklab-color-flow 4s ease-in-out infinite;
}
.main-card[data-genre-active]::before,
.card[data-genre-active]::before,
.artist-card[data-genre-active]::before,
.playlist-card[data-genre-active]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  position: relative;
  transition: background var(--genre-transition-duration) var(--genre-transition-easing);
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
}
.main-card[data-genre-active]::before::before,
.card[data-genre-active]::before::before,
.artist-card[data-genre-active]::before::before,
.playlist-card[data-genre-active]::before::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, hsl(var(--genre-primary-hue-min, 240), calc(var(--genre-saturation-base, 50%) * var(--genre-active-intensity, 0.6)), calc(var(--genre-brightness-base, 50%) * 1.2)) 0%, hsl(var(--genre-primary-hue-max, 280), calc(var(--genre-saturation-base, 50%) * var(--genre-active-intensity, 0.6) * 0.8), calc(var(--genre-brightness-base, 50%) * 0.9)) 100%);
  opacity: 0.08;
  pointer-events: none;
  z-index: -1;
  transition: background 0.6s ease-in-out, opacity 0.4s ease-in-out;
}
@media (prefers-reduced-motion: no-preference) {
  .main-card[data-genre-active]::before::before,
  .card[data-genre-active]::before::before,
  .artist-card[data-genre-active]::before::before,
  .playlist-card[data-genre-active]::before::before {
    animation: genre-background-pulse calc(4s / var(--genre-gradient-complexity, 1)) ease-in-out infinite;
  }
}
.main-card[data-genre-active] .main-cardHeader-text,
.main-card[data-genre-active] .main-type-heading,
.card[data-genre-active] .main-cardHeader-text,
.card[data-genre-active] .main-type-heading,
.artist-card[data-genre-active] .main-cardHeader-text,
.artist-card[data-genre-active] .main-type-heading,
.playlist-card[data-genre-active] .main-cardHeader-text,
.playlist-card[data-genre-active] .main-type-heading {
  color: hsl(calc((var(--genre-primary-hue-min, 240) + var(--genre-primary-hue-max, 280)) / 2), calc(var(--genre-saturation-base, 50%) * 0.8), calc(var(--genre-brightness-base, 50%) * 1.8));
  text-shadow: 0 0 calc(8px * 0.8) hsla(var(--genre-primary-hue-min, 240), calc(var(--genre-saturation-base, 50%) * 1.2), calc(var(--genre-brightness-base, 50%) * 0.6), calc(0.3 * 0.8));
  transition: color 0.4s ease-in-out, text-shadow 0.4s ease-in-out;
}
.main-card[data-genre-active]:hover,
.card[data-genre-active]:hover,
.artist-card[data-genre-active]:hover,
.playlist-card[data-genre-active]:hover {
  box-shadow: inset 0 0 calc(8px * 0.5) hsla(var(--genre-primary-hue-min, 240), calc(var(--genre-saturation-base, 50%) * 1.2), calc(var(--genre-brightness-base, 50%) * 1.5), calc(0.15 * var(--genre-active-intensity, 0.8))), 0 0 calc(8px * 1) hsla(var(--genre-primary-hue-min, 240), calc(var(--genre-saturation-base, 50%) * 1.3), calc(var(--genre-brightness-base, 50%) * 1.2), calc(0.4 * var(--genre-active-intensity, 0.8))), 0 0 calc(8px * 2) hsla(var(--genre-primary-hue-max, 280), calc(var(--genre-saturation-base, 50%) * 1.1), calc(var(--genre-brightness-base, 50%) * 0.9), calc(0.2 * var(--genre-active-intensity, 0.8)));
  transition: box-shadow 0.4s ease-in-out;
}
@media (prefers-reduced-motion: no-preference) {
  .main-card[data-genre-active]:hover,
  .card[data-genre-active]:hover,
  .artist-card[data-genre-active]:hover,
  .playlist-card[data-genre-active]:hover {
    animation: genre-glow-pulse calc(2s / var(--genre-gradient-complexity, 1)) ease-in-out infinite;
  }
}
@media (prefers-reduced-motion: reduce) {
  .main-card[data-genre-active]:hover,
  .card[data-genre-active]:hover,
  .artist-card[data-genre-active]:hover,
  .playlist-card[data-genre-active]:hover {
    animation: none;
  }
}
.main-card[data-genre-active]:hover::before,
.card[data-genre-active]:hover::before,
.artist-card[data-genre-active]:hover::before,
.playlist-card[data-genre-active]:hover::before {
  position: relative;
}
.main-card[data-genre-active]:hover::before::before,
.card[data-genre-active]:hover::before::before,
.artist-card[data-genre-active]:hover::before::before,
.playlist-card[data-genre-active]:hover::before::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, hsl(var(--genre-primary-hue-min, 240), calc(var(--genre-saturation-base, 50%) * var(--genre-active-intensity, 0.8)), calc(var(--genre-brightness-base, 50%) * 1.2)) 0%, hsl(var(--genre-primary-hue-max, 280), calc(var(--genre-saturation-base, 50%) * var(--genre-active-intensity, 0.8) * 0.8), calc(var(--genre-brightness-base, 50%) * 0.9)) 100%);
  opacity: 0.12;
  pointer-events: none;
  z-index: -1;
  transition: background 0.6s ease-in-out, opacity 0.4s ease-in-out;
}
@media (prefers-reduced-motion: no-preference) {
  .main-card[data-genre-active]:hover::before::before,
  .card[data-genre-active]:hover::before::before,
  .artist-card[data-genre-active]:hover::before::before,
  .playlist-card[data-genre-active]:hover::before::before {
    animation: genre-background-pulse calc(4s / var(--genre-gradient-complexity, 1)) ease-in-out infinite;
  }
}

div.main-trackList-trackListRow[role=row][data-genre-active] {
  color: hsl(calc((var(--genre-primary-hue-min, 240) + var(--genre-primary-hue-max, 280)) / 2), calc(var(--genre-saturation-base, 50%) * 0.4), calc(var(--genre-brightness-base, 50%) * 1.8));
  text-shadow: 0 0 calc(8px * 0.4) hsla(var(--genre-primary-hue-min, 240), calc(var(--genre-saturation-base, 50%) * 1.2), calc(var(--genre-brightness-base, 50%) * 0.6), calc(0.3 * 0.4));
  transition: color 0.4s ease-in-out, text-shadow 0.4s ease-in-out;
}
div.main-trackList-trackListRow[role=row][data-genre-active]:hover {
  position: relative;
  color: hsl(calc((var(--genre-primary-hue-min, 240) + var(--genre-primary-hue-max, 280)) / 2), calc(var(--genre-saturation-base, 50%) * 0.7), calc(var(--genre-brightness-base, 50%) * 1.8));
  text-shadow: 0 0 calc(8px * 0.7) hsla(var(--genre-primary-hue-min, 240), calc(var(--genre-saturation-base, 50%) * 1.2), calc(var(--genre-brightness-base, 50%) * 0.6), calc(0.3 * 0.7));
  transition: color 0.4s ease-in-out, text-shadow 0.4s ease-in-out;
}
div.main-trackList-trackListRow[role=row][data-genre-active]:hover::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, hsl(var(--genre-primary-hue-min, 240), calc(var(--genre-saturation-base, 50%) * 0.6), calc(var(--genre-brightness-base, 50%) * 1.2)) 0%, hsl(var(--genre-primary-hue-max, 280), calc(var(--genre-saturation-base, 50%) * 0.6 * 0.8), calc(var(--genre-brightness-base, 50%) * 0.9)) 100%);
  opacity: 0.06;
  pointer-events: none;
  z-index: -1;
  transition: background 0.6s ease-in-out, opacity 0.4s ease-in-out;
}
@media (prefers-reduced-motion: no-preference) {
  div.main-trackList-trackListRow[role=row][data-genre-active]:hover::before {
    animation: genre-background-pulse calc(4s / var(--genre-gradient-complexity, 1)) ease-in-out infinite;
  }
}
div.main-trackList-trackListRow[role=row][data-genre-active][aria-selected=true] {
  position: relative;
  color: hsl(calc((var(--genre-primary-hue-min, 240) + var(--genre-primary-hue-max, 280)) / 2), calc(var(--genre-saturation-base, 50%) * 1), calc(var(--genre-brightness-base, 50%) * 1.8));
  text-shadow: 0 0 calc(8px * 1) hsla(var(--genre-primary-hue-min, 240), calc(var(--genre-saturation-base, 50%) * 1.2), calc(var(--genre-brightness-base, 50%) * 0.6), calc(0.3 * 1));
  transition: color 0.4s ease-in-out, text-shadow 0.4s ease-in-out;
}
div.main-trackList-trackListRow[role=row][data-genre-active][aria-selected=true]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, hsl(var(--genre-primary-hue-min, 240), calc(var(--genre-saturation-base, 50%) * 0.8), calc(var(--genre-brightness-base, 50%) * 1.2)) 0%, hsl(var(--genre-primary-hue-max, 280), calc(var(--genre-saturation-base, 50%) * 0.8 * 0.8), calc(var(--genre-brightness-base, 50%) * 0.9)) 100%);
  opacity: 0.1;
  pointer-events: none;
  z-index: -1;
  transition: background 0.6s ease-in-out, opacity 0.4s ease-in-out;
}
@media (prefers-reduced-motion: no-preference) {
  div.main-trackList-trackListRow[role=row][data-genre-active][aria-selected=true]::before {
    animation: genre-background-pulse calc(4s / var(--genre-gradient-complexity, 1)) ease-in-out infinite;
  }
}

button[data-genre-active],
.Button[data-genre-active],
.main-playButton-PlayButton[data-genre-active] {
  color: hsl(calc((var(--genre-primary-hue-min, 240) + var(--genre-primary-hue-max, 280)) / 2), calc(var(--genre-saturation-base, 50%) * 0.7), calc(var(--genre-brightness-base, 50%) * 1.8));
  text-shadow: 0 0 calc(8px * 0.7) hsla(var(--genre-primary-hue-min, 240), calc(var(--genre-saturation-base, 50%) * 1.2), calc(var(--genre-brightness-base, 50%) * 0.6), calc(0.3 * 0.7));
  transition: color 0.4s ease-in-out, text-shadow 0.4s ease-in-out;
}
button[data-genre-active]:hover,
.Button[data-genre-active]:hover,
.main-playButton-PlayButton[data-genre-active]:hover {
  color: hsl(calc((var(--genre-primary-hue-min, 240) + var(--genre-primary-hue-max, 280)) / 2), calc(var(--genre-saturation-base, 50%) * 1), calc(var(--genre-brightness-base, 50%) * 1.8));
  text-shadow: 0 0 calc(8px * 1) hsla(var(--genre-primary-hue-min, 240), calc(var(--genre-saturation-base, 50%) * 1.2), calc(var(--genre-brightness-base, 50%) * 0.6), calc(0.3 * 1));
  transition: color 0.4s ease-in-out, text-shadow 0.4s ease-in-out;
  box-shadow: inset 0 0 calc(5px * 0.5) hsla(var(--genre-primary-hue-min, 240), calc(var(--genre-saturation-base, 50%) * 1.2), calc(var(--genre-brightness-base, 50%) * 1.5), calc(0.15 * 0.8)), 0 0 calc(5px * 1) hsla(var(--genre-primary-hue-min, 240), calc(var(--genre-saturation-base, 50%) * 1.3), calc(var(--genre-brightness-base, 50%) * 1.2), calc(0.4 * 0.8)), 0 0 calc(5px * 2) hsla(var(--genre-primary-hue-max, 280), calc(var(--genre-saturation-base, 50%) * 1.1), calc(var(--genre-brightness-base, 50%) * 0.9), calc(0.2 * 0.8));
  transition: box-shadow 0.4s ease-in-out;
}
@media (prefers-reduced-motion: no-preference) {
  button[data-genre-active]:hover,
  .Button[data-genre-active]:hover,
  .main-playButton-PlayButton[data-genre-active]:hover {
    animation: genre-glow-pulse calc(2s / var(--genre-gradient-complexity, 1)) ease-in-out infinite;
  }
}
@media (prefers-reduced-motion: reduce) {
  button[data-genre-active]:hover,
  .Button[data-genre-active]:hover,
  .main-playButton-PlayButton[data-genre-active]:hover {
    animation: none;
  }
}
button[data-genre-active]:active,
.Button[data-genre-active]:active,
.main-playButton-PlayButton[data-genre-active]:active {
  color: hsl(calc((var(--genre-primary-hue-min, 240) + var(--genre-primary-hue-max, 280)) / 2), calc(var(--genre-saturation-base, 50%) * 1.2), calc(var(--genre-brightness-base, 50%) * 1.8));
  text-shadow: 0 0 calc(8px * 1.2) hsla(var(--genre-primary-hue-min, 240), calc(var(--genre-saturation-base, 50%) * 1.2), calc(var(--genre-brightness-base, 50%) * 0.6), calc(0.3 * 1.2));
  transition: color 0.4s ease-in-out, text-shadow 0.4s ease-in-out;
}

.genre-switching * {
  transition: color calc(var(--genre-transition-duration) * 1.2) var(--genre-transition-easing), background calc(var(--genre-transition-duration) * 1.2) var(--genre-transition-easing), filter calc(var(--genre-transition-duration) * 1.2) var(--genre-transition-easing), box-shadow calc(var(--genre-transition-duration) * 1.2) var(--genre-transition-easing);
}

.genre-detection-indicator {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 8px 12px;
  background: rgba(var(--genre-current-primary-rgb), 0.9);
  color: rgb(var(--sn-musical-harmony-contrast-rgb));
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  z-index: 1000;
  box-shadow: inset 0 0 calc(4px * 0.5) hsla(var(--genre-primary-hue-min, 240), calc(var(--genre-saturation-base, 50%) * 1.2), calc(var(--genre-brightness-base, 50%) * 1.5), calc(0.15 * 1)), 0 0 calc(4px * 1) hsla(var(--genre-primary-hue-min, 240), calc(var(--genre-saturation-base, 50%) * 1.3), calc(var(--genre-brightness-base, 50%) * 1.2), calc(0.4 * 1)), 0 0 calc(4px * 2) hsla(var(--genre-primary-hue-max, 280), calc(var(--genre-saturation-base, 50%) * 1.1), calc(var(--genre-brightness-base, 50%) * 0.9), calc(0.2 * 1));
  transition: box-shadow 0.4s ease-in-out;
  opacity: 0;
  transform: translateX(100%);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
@media (prefers-reduced-motion: no-preference) {
  .genre-detection-indicator {
    animation: genre-glow-pulse calc(2s / var(--genre-gradient-complexity, 1)) ease-in-out infinite;
  }
}
@media (prefers-reduced-motion: reduce) {
  .genre-detection-indicator {
    animation: none;
  }
}
.genre-detection-indicator.visible {
  opacity: 1;
  transform: translateX(0);
}
.genre-detection-indicator.auto-hide {
  animation: genre-indicator-auto-hide 3s ease-in-out;
}

@keyframes genre-indicator-auto-hide {
  0% {
    opacity: 1;
    transform: translateX(0);
  }
  80% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    transform: translateX(100%);
  }
}
:root, :root.visual-effects-debug {
  --sn-visual-effects-enabled: 1;
  --sn-visual-effects-system-loaded: 1;
  --sn-visual-effects-active: 1;
  --sn-visual-effects-intensity: 0.7;
  --sn-visual-effects-mode: "balanced";
  --sn-visual-effects-quality: 1.0;
  --sn-visual-performance-mode: "optimal";
  --sn-visual-performance-animation-quality: 1.0;
  --sn-visual-effects-grid-gap: 1.5rem;
  --sn-visual-effects-hover-lift: 4px;
  --sn-visual-effects-transition-duration: 0.6s;
  --sn-visual-effects-float-range: 8px;
  --sn-visual-effects-animation-duration: 12s;
  --sn-visual-effects-stagger-delay: 0.1s;
  --sn-visual-effects-grid-scale: 1.02;
  --sn-visual-effects-emotional-intensity: var(--audio-emotional-intensity, 0.5);
  --sn-visual-effects-temperature-kelvin: var(--audio-temperature-kelvin, 4000);
  --sn-visual-effects-breathing-cycle: var(--audio-breathing-cycle, 8s);
  --sn-visual-effects-warmth: var(--audio-warmth-factor, 0.8);
  --sn-visual-effects-emotional-saturation: var(--audio-emotional-saturation, 1.0);
  --sn-visual-effects-temperature-brightness: var(--audio-temperature-brightness, 1.0);
  --sn-visual-effects-aura-influence: calc(
    var(--artist-aura-intensity, 0.6) * var(--aura-cascade-strength, 0.3)
  );
  --sn-visual-effects-aura-breathing: var(--artist-aura-breathing-sync, 8s);
  --sn-visual-effects-debug-mode: 0;
  --sn-visual-effects-development-mode: 0;
  --sn-audio-reactive-atmospherics-loaded: 1;
  --sn-visual-effects-system-ready: 1;
}

@keyframes visual-effects-global-field {
  0% {
    opacity: calc(var(--sn-visual-effects-fog-opacity, 0.02) * var(--sn-visual-effects-intensity, 0.7) * 2);
    background-size: 100% 100%;
  }
  50% {
    opacity: calc(var(--sn-visual-effects-fog-opacity, 0.02) * var(--sn-visual-effects-intensity, 0.7) * 3);
    background-size: 105% 105%;
  }
  100% {
    opacity: calc(var(--sn-visual-effects-fog-opacity, 0.02) * var(--sn-visual-effects-intensity, 0.7) * 2);
    background-size: 100% 100%;
  }
}
@keyframes visual-effects-main-view {
  0% {
    opacity: calc(var(--sn-visual-effects-shimmer-opacity, 0.05) * 2);
    background-position: 0% 0%;
  }
  33% {
    opacity: calc(var(--sn-visual-effects-shimmer-opacity, 0.05) * 3);
    background-position: 50% 50%;
  }
  66% {
    opacity: calc(var(--sn-visual-effects-shimmer-opacity, 0.05) * 2.5);
    background-position: 100% 100%;
  }
  100% {
    opacity: calc(var(--sn-visual-effects-shimmer-opacity, 0.05) * 2);
    background-position: 0% 0%;
  }
}
@keyframes floating {
  0%, 100% {
    transform: translateY(0px);
    filter: brightness(var(--sn-visual-effects-temperature-brightness, 1)) saturate(var(--sn-visual-effects-emotional-saturation, 1)) hue-rotate(calc(var(--audio-temperature-hue-shift, 0deg) * 0.3));
  }
  50% {
    transform: translateY(calc(-1 * var(--sn-visual-effects-float-range)));
    filter: brightness(calc(var(--sn-visual-effects-temperature-brightness, 1) * 1.05)) saturate(calc(var(--sn-visual-effects-emotional-saturation, 1) * 1.1)) hue-rotate(calc(var(--audio-temperature-hue-shift, 0deg) * 0.5));
  }
}
@keyframes floating-emotional-temperature {
  0%, 100% {
    transform: translateY(0px) scale(1);
    filter: brightness(var(--sn-visual-effects-temperature-brightness, 1)) saturate(var(--sn-visual-effects-emotional-saturation, 1)) hue-rotate(var(--audio-temperature-hue-shift, 0deg));
    box-shadow: 0 2px 8px rgba(var(--audio-emotion-ambient-primary), calc(var(--sn-visual-effects-emotional-intensity) * 0.1)), 0 0 20px rgba(var(--audio-emotion-ambient-accent), calc(var(--sn-visual-effects-emotional-intensity) * 0.05));
  }
  25% {
    transform: translateY(calc(-0.3 * var(--sn-visual-effects-float-range))) scale(1.01);
    filter: brightness(calc(var(--sn-visual-effects-temperature-brightness, 1) * 1.02)) saturate(calc(var(--sn-visual-effects-emotional-saturation, 1) * 1.05)) hue-rotate(calc(var(--audio-temperature-hue-shift, 0deg) * 1.2));
  }
  50% {
    transform: translateY(calc(-1 * var(--sn-visual-effects-float-range))) scale(1.02);
    filter: brightness(calc(var(--sn-visual-effects-temperature-brightness, 1) * 1.05)) saturate(calc(var(--sn-visual-effects-emotional-saturation, 1) * 1.1)) hue-rotate(calc(var(--audio-temperature-hue-shift, 0deg) * 1.5));
    box-shadow: 0 4px 16px rgba(var(--audio-emotion-ambient-primary), calc(var(--sn-visual-effects-emotional-intensity) * 0.15)), 0 0 30px rgba(var(--audio-emotion-ambient-accent), calc(var(--sn-visual-effects-emotional-intensity) * 0.08));
  }
  75% {
    transform: translateY(calc(-0.6 * var(--sn-visual-effects-float-range))) scale(1.01);
    filter: brightness(calc(var(--sn-visual-effects-temperature-brightness, 1) * 1.03)) saturate(calc(var(--sn-visual-effects-emotional-saturation, 1) * 1.07)) hue-rotate(calc(var(--audio-temperature-hue-shift, 0deg) * 1.2));
  }
}
@keyframes floating-subtle {
  0%, 100% {
    transform: translateY(0px);
    filter: brightness(var(--sn-visual-effects-temperature-brightness, 1)) saturate(var(--sn-visual-effects-emotional-saturation, 1)) hue-rotate(calc(var(--audio-temperature-hue-shift, 0deg) * 0.2));
  }
  50% {
    transform: translateY(calc(-0.7 * var(--sn-visual-effects-float-range)));
    filter: brightness(calc(var(--sn-visual-effects-temperature-brightness, 1) * 1.03)) saturate(calc(var(--sn-visual-effects-emotional-saturation, 1) * 1.05)) hue-rotate(calc(var(--audio-temperature-hue-shift, 0deg) * 0.3));
  }
}
@keyframes atmospheric-calm-breathing {
  0%, 100% {
    transform: translateY(0px) scale(1);
    filter: brightness(var(--audio-temperature-brightness, 1)) saturate(var(--audio-emotional-saturation, 1)) blur(0.5px);
  }
  50% {
    transform: translateY(calc(-0.5 * var(--sn-visual-effects-float-range))) scale(1.005);
    filter: brightness(calc(var(--audio-temperature-brightness, 1) * 1.02)) saturate(calc(var(--audio-emotional-saturation, 1) * 1.05)) blur(0.3px);
  }
}
@keyframes atmospheric-energetic-pulse {
  0%, 100% {
    transform: translateY(0px) scale(1);
    filter: brightness(var(--audio-temperature-brightness, 1)) saturate(var(--audio-emotional-saturation, 1)) hue-rotate(var(--audio-temperature-hue-shift, 0deg));
  }
  20% {
    transform: translateY(calc(-0.2 * var(--sn-visual-effects-float-range))) scale(1.01);
    filter: brightness(calc(var(--audio-temperature-brightness, 1) * 1.08)) saturate(calc(var(--audio-emotional-saturation, 1) * 1.15)) hue-rotate(calc(var(--audio-temperature-hue-shift, 0deg) * 1.3));
  }
  40% {
    transform: translateY(calc(-0.8 * var(--sn-visual-effects-float-range))) scale(1.02);
    filter: brightness(calc(var(--audio-temperature-brightness, 1) * 1.12)) saturate(calc(var(--audio-emotional-saturation, 1) * 1.25)) hue-rotate(calc(var(--audio-temperature-hue-shift, 0deg) * 1.5));
  }
  60% {
    transform: translateY(calc(-1.2 * var(--sn-visual-effects-float-range))) scale(1.025);
    filter: brightness(calc(var(--audio-temperature-brightness, 1) * 1.15)) saturate(calc(var(--audio-emotional-saturation, 1) * 1.3)) hue-rotate(calc(var(--audio-temperature-hue-shift, 0deg) * 1.8));
  }
  80% {
    transform: translateY(calc(-0.6 * var(--sn-visual-effects-float-range))) scale(1.01);
    filter: brightness(calc(var(--audio-temperature-brightness, 1) * 1.1)) saturate(calc(var(--audio-emotional-saturation, 1) * 1.2)) hue-rotate(calc(var(--audio-temperature-hue-shift, 0deg) * 1.4));
  }
}
@keyframes atmospheric-melancholy-drift {
  0%, 100% {
    transform: translateY(0px) scale(1);
    filter: brightness(calc(var(--audio-temperature-brightness, 1) * 0.95)) saturate(calc(var(--audio-emotional-saturation, 1) * 0.8)) hue-rotate(calc(var(--audio-temperature-hue-shift, 0deg) - 10deg)) sepia(0.1);
  }
  50% {
    transform: translateY(calc(-0.8 * var(--sn-visual-effects-float-range))) scale(1.01);
    filter: brightness(calc(var(--audio-temperature-brightness, 1) * 1)) saturate(calc(var(--audio-emotional-saturation, 1) * 0.9)) hue-rotate(calc(var(--audio-temperature-hue-shift, 0deg) - 5deg)) sepia(0.15);
  }
}
@keyframes atmospheric-fade-in {
  from {
    opacity: 0;
    transform: translateY(var(--sn-visual-effects-float-range, 20px));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes stagger-fade-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes navigation-orbital-drift {
  0% {
    transform: rotateY(0deg) translateX(2px) rotateY(0deg);
  }
  25% {
    transform: rotateY(90deg) translateX(4px) rotateY(-90deg);
  }
  50% {
    transform: rotateY(180deg) translateX(2px) rotateY(-180deg);
  }
  75% {
    transform: rotateY(270deg) translateX(4px) rotateY(-270deg);
  }
  100% {
    transform: rotateY(360deg) translateX(2px) rotateY(-360deg);
  }
}
.visual-effects-container, :root button.visual-effects-enabled,
:root .button.visual-effects-enabled,
:root .Button.visual-effects-enabled, :root .card.visual-effects-enabled,
:root .main-card.visual-effects-enabled,
:root .artist-card.visual-effects-enabled,
:root .playlist-card.visual-effects-enabled,
:root .playlist-playlist.visual-effects-enabled,
:root .artist-artist.visual-effects-enabled,
:root .album-album.visual-effects-enabled,
:root .track-row.visual-effects-enabled, :root .Root__main-view, :root .Root, .visual-effects-enabled {
  position: relative;
  will-change: transform, opacity, filter;
  transform: translateZ(0);
  backface-visibility: hidden;
  contain: layout style paint;
  filter: saturate(1) brightness(1);
  transition: all var(--sn-visual-effects-transition-duration, 0.5s) ease-out;
}

.visual-effects-audio-resonance, :root .Root__nav-bar.visual-effects-enabled,
:root .Root__now-playing-bar.visual-effects-enabled,
:root .player-controls.visual-effects-enabled, .visual-effects-audio-responsive, :root button.visual-effects-enabled,
:root .button.visual-effects-enabled,
:root .Button.visual-effects-enabled {
  filter: saturate(calc(1 + var(--sn-visual-effects-audio-resonance, 0.7) * 0.2)) brightness(calc(1 + var(--sn-visual-effects-audio-resonance, 0.7) * 0.1));
}

.visual-effects-beat-sync, :root .Root__nav-bar.visual-effects-enabled,
:root .Root__now-playing-bar.visual-effects-enabled,
:root .player-controls.visual-effects-enabled {
  transition: filter 0.1s ease-out;
}

.visual-effects-neon-theme, :root .Root[data-visual-effects-mode=cinematic] {
  filter: saturate(1.3) brightness(1.1);
}

.visual-effects-volumetric-fog, :root .Root[data-visual-effects-mode=cinematic] {
  backdrop-filter: blur(2px);
}

.visual-effects-holographic-display, :root .Root[data-visual-effects-mode=dynamic-tech] {
  mix-blend-mode: overlay;
}

.visual-effects-luminescent-tech, :root .Root[data-visual-effects-mode=dynamic-tech] {
  filter: saturate(1.2) brightness(1.05);
}

.visual-effects-crystalline-glassmorphism, :root .Root[data-visual-effects-mode=dynamic-tech] {
  backdrop-filter: blur(1px) saturate(1.2);
}

.dynamic-environmental-effects, :root .Root[data-visual-effects-mode=atmospheric] {
  filter: saturate(1.1) brightness(1.02);
}

:root .Root::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(ellipse at center, rgba(var(--sn-visual-effects-primary-rgb, 205, 214, 244), calc(var(--sn-visual-effects-fog-opacity, 0.02) * var(--sn-visual-effects-intensity, 0.7) * 2)) 0%, rgba(var(--sn-visual-effects-holographic-rgb, 116, 199, 236), calc(var(--sn-visual-effects-fog-opacity, 0.02) * var(--sn-visual-effects-intensity, 0.7) * 1)) 50%, transparent 80%);
  pointer-events: none;
  z-index: calc(var(--sn-visual-effects-depth-atmosphere, 0) - 10);
  will-change: transform, opacity, filter;
  transform: translateZ(0);
  backface-visibility: hidden;
  contain: layout style paint;
  contain: strict;
  mix-blend-mode: overlay;
}
:root .Root[data-visual-effects-mode=cinematic] {
  filter: saturate(calc(1 + var(--sn-visual-effects-cinematic-intensity, 0.8) * 0.3)) brightness(calc(1 + var(--sn-visual-effects-cinematic-intensity, 0.8) * 0.15)) contrast(calc(1 + var(--sn-visual-effects-cinematic-intensity, 0.8) * 0.1));
}
:root .Root[data-visual-effects-mode=atmospheric] {
  position: relative;
  background: radial-gradient(ellipse at center, rgba(var(--sn-accent-rgb, 128, 128, 128), 0.2) 0%, rgba(var(--sn-accent-rgb, 128, 128, 128), 0.05) 60%, transparent 100%);
  filter: blur(2px);
  filter: saturate(calc(1 + var(--sn-visual-effects-emotional-saturation, 1) * 0.3)) brightness(calc(1 + var(--sn-visual-effects-warmth, 0.8) * 0.15));
}
:root .Root[data-visual-effects-mode=atmospheric]::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: radial-gradient(circle at 20% 30%, rgba(var(--sn-accent-rgb, 128, 128, 128), 0.1) 2px, transparent 2px);
  background-size: 40px 40px;
  animation: particle-float 8s ease-in-out infinite;
}
:root .Root[data-visual-effects-mode=dynamic-tech] {
  backdrop-filter: blur(1px) saturate(1.2);
}
:root .Root__main-view.visual-effects-enabled {
  position: relative;
}
:root .Root__main-view.visual-effects-enabled::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(var(--sn-visual-effects-primary-rgb, 205, 214, 244), calc(var(--sn-visual-effects-shimmer-opacity, 0.05) * 2)) 0%, rgba(var(--sn-visual-effects-holographic-rgb, 116, 199, 236), calc(var(--sn-visual-effects-shimmer-opacity, 0.05) * 1)) 50%, rgba(var(--sn-visual-effects-accent-rgb, 203, 166, 247), calc(var(--sn-visual-effects-shimmer-opacity, 0.05) * 1.5)) 100%);
  pointer-events: none;
  z-index: calc(var(--sn-visual-effects-depth-atmosphere, 0) - 5);
  mix-blend-mode: overlay;
}
:root .Root__nav-bar.visual-effects-enabled,
:root .Root__now-playing-bar.visual-effects-enabled,
:root .player-controls.visual-effects-enabled {
  position: relative;
  filter: saturate(calc(1 + var(--sn-visual-effects-emotional-saturation, 1) * 0.3)) brightness(calc(1 + var(--sn-visual-effects-audio-resonance, 0.7) * 0.2));
}
:root .Root__nav-bar.visual-effects-enabled::before,
:root .Root__now-playing-bar.visual-effects-enabled::before,
:root .player-controls.visual-effects-enabled::before {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border: 2px solid rgba(var(--sn-visual-effects-neon-glow-rgb, 116, 199, 236), calc(var(--sn-visual-effects-border-opacity, 0.3) * 1.2));
  border-radius: inherit;
  background: rgba(var(--sn-visual-effects-primary-rgb, 205, 214, 244), var(--sn-visual-effects-fog-opacity, 0.02));
  pointer-events: none;
  z-index: var(--sn-visual-effects-depth-mid, 2);
}
:root .Root__nav-bar.visual-effects-enabled[data-fog-type=light] {
  background: linear-gradient(45deg, rgba(var(--sn-base-rgb), 0.9) 0%, rgba(var(--sn-accent-rgb, 128, 128, 128), 0.1) 50%, rgba(var(--sn-base-rgb), 0.9) 100%);
  backdrop-filter: blur(10px);
}
:root .Root__nav-bar.visual-effects-enabled::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, rgba(var(--sn-visual-effects-atmosphere-rgb, 88, 91, 112), calc(var(--sn-visual-effects-fog-opacity, 0.02) * 3)) 0%, rgba(var(--sn-visual-effects-primary-rgb, 205, 214, 244), calc(var(--sn-visual-effects-fog-opacity, 0.02) * 2)) 50%, rgba(var(--sn-visual-effects-atmosphere-rgb, 88, 91, 112), calc(var(--sn-visual-effects-fog-opacity, 0.02) * 3)) 100%);
  pointer-events: none;
  z-index: calc(var(--sn-visual-effects-depth-atmosphere, 0) - 3);
  mix-blend-mode: multiply;
}
:root .card.visual-effects-enabled::before,
:root .main-card.visual-effects-enabled::before,
:root .artist-card.visual-effects-enabled::before,
:root .playlist-card.visual-effects-enabled::before,
:root .playlist-playlist.visual-effects-enabled::before,
:root .artist-artist.visual-effects-enabled::before,
:root .album-album.visual-effects-enabled::before,
:root .track-row.visual-effects-enabled::before {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border: 2px solid rgba(var(--sn-visual-effects-primary-rgb, 205, 214, 244), var(--sn-visual-effects-border-opacity, 0.3));
  border-radius: inherit;
  background: rgba(var(--sn-visual-effects-primary-rgb, 205, 214, 244), var(--sn-visual-effects-fog-opacity, 0.02));
  pointer-events: none;
  z-index: var(--sn-visual-effects-depth-mid, 2);
  transition: all var(--sn-visual-effects-transition-duration, 0.5s) ease-out;
}
:root .card.visual-effects-enabled:hover,
:root .main-card.visual-effects-enabled:hover,
:root .artist-card.visual-effects-enabled:hover,
:root .playlist-card.visual-effects-enabled:hover,
:root .playlist-playlist.visual-effects-enabled:hover,
:root .artist-artist.visual-effects-enabled:hover,
:root .album-album.visual-effects-enabled:hover,
:root .track-row.visual-effects-enabled:hover {
  filter: saturate(calc(1 + var(--sn-visual-effects-emotional-saturation, 1) * 0.4)) brightness(calc(1 + var(--sn-visual-effects-hover-intensity, 0.3) * 0.2));
}
:root .card.visual-effects-enabled:hover::before,
:root .main-card.visual-effects-enabled:hover::before,
:root .artist-card.visual-effects-enabled:hover::before,
:root .playlist-card.visual-effects-enabled:hover::before,
:root .playlist-playlist.visual-effects-enabled:hover::before,
:root .artist-artist.visual-effects-enabled:hover::before,
:root .album-album.visual-effects-enabled:hover::before,
:root .track-row.visual-effects-enabled:hover::before {
  transform: scale(1.05);
  border-color: rgba(var(--sn-visual-effects-accent-rgb, 203, 166, 247), calc(var(--sn-visual-effects-border-opacity, 0.3) * 1.2));
}
:root .card.visual-effects-enabled:active::before,
:root .main-card.visual-effects-enabled:active::before,
:root .artist-card.visual-effects-enabled:active::before,
:root .playlist-card.visual-effects-enabled:active::before,
:root .playlist-playlist.visual-effects-enabled:active::before,
:root .artist-artist.visual-effects-enabled:active::before,
:root .album-album.visual-effects-enabled:active::before,
:root .track-row.visual-effects-enabled:active::before {
  transform: scale(0.95);
  border-color: rgba(var(--sn-visual-effects-neon-glow-rgb, 116, 199, 236), calc(var(--sn-visual-effects-border-opacity, 0.3) * 1.5));
}
:root button.visual-effects-enabled,
:root .button.visual-effects-enabled,
:root .Button.visual-effects-enabled {
  filter: saturate(1.2) brightness(1.05);
}
:root button.visual-effects-enabled:hover,
:root .button.visual-effects-enabled:hover,
:root .Button.visual-effects-enabled:hover {
  filter: brightness(1.1);
}
:root button.visual-effects-enabled:active,
:root .button.visual-effects-enabled:active,
:root .Button.visual-effects-enabled:active {
  filter: brightness(0.9);
}
:root button.visual-effects-enabled::before,
:root .button.visual-effects-enabled::before,
:root .Button.visual-effects-enabled::before {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border: 2px solid rgba(var(--sn-visual-effects-accent-rgb, 203, 166, 247), calc(var(--sn-visual-effects-border-opacity, 0.3) * 1.5));
  border-radius: inherit;
  background: rgba(var(--sn-visual-effects-primary-rgb, 205, 214, 244), var(--sn-visual-effects-fog-opacity, 0.02));
  pointer-events: none;
  z-index: var(--sn-visual-effects-depth-mid, 2);
  transition: all var(--sn-visual-effects-transition-duration, 0.5s) ease-out;
}
:root h1.visual-effects-enabled, :root h2.visual-effects-enabled, :root h3.visual-effects-enabled, :root h4.visual-effects-enabled, :root h5.visual-effects-enabled, :root h6.visual-effects-enabled,
:root .main-type-heading.visual-effects-enabled {
  filter: saturate(1.3) brightness(1.1);
}
:root p.visual-effects-enabled, :root span.visual-effects-enabled, :root div.visual-effects-enabled,
:root .main-type-body.visual-effects-enabled,
:root .main-type-bass.visual-effects-enabled {
  filter: saturate(1.2) brightness(1.05);
}
:root .text-small.visual-effects-enabled,
:root .description.visual-effects-enabled {
  filter: saturate(1.1) brightness(1.02);
}

body:not(:has(.main-searchPage-content)) .main-home-content,
body:not(:has(.main-searchPage-content)) .main-gridContainer-gridContainer {
  position: relative;
  transition: all var(--sn-gradient-transition, 0.8s ease-in-out);
  will-change: transform, opacity, filter;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
  contain: style paint;
}
body:not(:has(.main-searchPage-content)) .main-home-content > div,
body:not(:has(.main-searchPage-content)) .main-home-content > section,
body:not(:has(.main-searchPage-content)) .main-gridContainer-gridContainer > div,
body:not(:has(.main-searchPage-content)) .main-gridContainer-gridContainer > section {
  position: relative;
  opacity: 0;
  transform: translateY(var(--sn-visual-effects-float-range, 20px));
  animation: floating-emotional-temperature calc(var(--sn-visual-effects-breathing-cycle, 8s) * (1 + var(--sn-visual-effects-emotional-intensity) * 0.3)) var(--dynamic-ease-motion, cubic-bezier(0.4, 0, 0.2, 1)) infinite, atmospheric-fade-in 0.8s var(--sn-easing-emergence, var(--sn-anim-easing-organic)) forwards;
  animation-delay: calc(var(--sn-visual-effects-stagger-delay, 0.1s) * 0);
  will-change: transform, opacity, filter;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
  contain: style paint;
}
body:not(:has(.main-searchPage-content)) .main-home-content > div:hover,
body:not(:has(.main-searchPage-content)) .main-home-content > section:hover,
body:not(:has(.main-searchPage-content)) .main-gridContainer-gridContainer > div:hover,
body:not(:has(.main-searchPage-content)) .main-gridContainer-gridContainer > section:hover {
  filter: brightness(calc(var(--sn-visual-effects-temperature-brightness, 1.05) * 1.05)) saturate(calc(var(--sn-visual-effects-emotional-saturation, 1.15) * 1.1)) hue-rotate(calc(var(--audio-temperature-hue-shift, 0deg) * 0.8));
  transform: translateY(calc(-1 * var(--sn-visual-effects-hover-lift) * (1 + var(--sn-visual-effects-emotional-intensity) * 0.5)));
  box-shadow: 0 calc(var(--sn-visual-effects-hover-lift) * 2) calc(var(--sn-visual-effects-hover-lift) * 4) rgba(var(--audio-emotion-ambient-primary), calc(var(--sn-visual-effects-emotional-intensity) * 0.2)), 0 0 calc(var(--sn-visual-effects-hover-lift) * 6) rgba(var(--audio-emotion-ambient-accent), calc(var(--sn-visual-effects-emotional-intensity) * 0.1));
  transition: filter calc(var(--dynamic-transition-medium, 0.3s)) ease, transform calc(var(--dynamic-transition-medium, 0.3s)) ease, box-shadow calc(var(--dynamic-transition-medium, 0.3s)) ease;
}
body:not(:has(.main-searchPage-content)) .main-home-content > div:nth-child(1),
body:not(:has(.main-searchPage-content)) .main-home-content > section:nth-child(1),
body:not(:has(.main-searchPage-content)) .main-gridContainer-gridContainer > div:nth-child(1),
body:not(:has(.main-searchPage-content)) .main-gridContainer-gridContainer > section:nth-child(1) {
  animation-delay: calc(0 * var(--sn-visual-effects-stagger-delay));
}
body:not(:has(.main-searchPage-content)) .main-home-content > div:nth-child(1).loading,
body:not(:has(.main-searchPage-content)) .main-home-content > section:nth-child(1).loading,
body:not(:has(.main-searchPage-content)) .main-gridContainer-gridContainer > div:nth-child(1).loading,
body:not(:has(.main-searchPage-content)) .main-gridContainer-gridContainer > section:nth-child(1).loading {
  opacity: 0;
  transform: translateY(20px);
  animation: stagger-fade-in 0.8s ease-out forwards;
  animation-delay: calc(0 * var(--sn-visual-effects-stagger-delay));
}
body:not(:has(.main-searchPage-content)) .main-home-content > div:nth-child(2),
body:not(:has(.main-searchPage-content)) .main-home-content > section:nth-child(2),
body:not(:has(.main-searchPage-content)) .main-gridContainer-gridContainer > div:nth-child(2),
body:not(:has(.main-searchPage-content)) .main-gridContainer-gridContainer > section:nth-child(2) {
  animation-delay: calc(1 * var(--sn-visual-effects-stagger-delay));
}
body:not(:has(.main-searchPage-content)) .main-home-content > div:nth-child(2).loading,
body:not(:has(.main-searchPage-content)) .main-home-content > section:nth-child(2).loading,
body:not(:has(.main-searchPage-content)) .main-gridContainer-gridContainer > div:nth-child(2).loading,
body:not(:has(.main-searchPage-content)) .main-gridContainer-gridContainer > section:nth-child(2).loading {
  opacity: 0;
  transform: translateY(20px);
  animation: stagger-fade-in 0.8s ease-out forwards;
  animation-delay: calc(1 * var(--sn-visual-effects-stagger-delay));
}
body:not(:has(.main-searchPage-content)) .main-home-content > div:nth-child(3),
body:not(:has(.main-searchPage-content)) .main-home-content > section:nth-child(3),
body:not(:has(.main-searchPage-content)) .main-gridContainer-gridContainer > div:nth-child(3),
body:not(:has(.main-searchPage-content)) .main-gridContainer-gridContainer > section:nth-child(3) {
  animation-delay: calc(2 * var(--sn-visual-effects-stagger-delay));
}
body:not(:has(.main-searchPage-content)) .main-home-content > div:nth-child(3).loading,
body:not(:has(.main-searchPage-content)) .main-home-content > section:nth-child(3).loading,
body:not(:has(.main-searchPage-content)) .main-gridContainer-gridContainer > div:nth-child(3).loading,
body:not(:has(.main-searchPage-content)) .main-gridContainer-gridContainer > section:nth-child(3).loading {
  opacity: 0;
  transform: translateY(20px);
  animation: stagger-fade-in 0.8s ease-out forwards;
  animation-delay: calc(2 * var(--sn-visual-effects-stagger-delay));
}
body:not(:has(.main-searchPage-content)) .main-home-content > div:nth-child(4),
body:not(:has(.main-searchPage-content)) .main-home-content > section:nth-child(4),
body:not(:has(.main-searchPage-content)) .main-gridContainer-gridContainer > div:nth-child(4),
body:not(:has(.main-searchPage-content)) .main-gridContainer-gridContainer > section:nth-child(4) {
  animation-delay: calc(3 * var(--sn-visual-effects-stagger-delay));
}
body:not(:has(.main-searchPage-content)) .main-home-content > div:nth-child(4).loading,
body:not(:has(.main-searchPage-content)) .main-home-content > section:nth-child(4).loading,
body:not(:has(.main-searchPage-content)) .main-gridContainer-gridContainer > div:nth-child(4).loading,
body:not(:has(.main-searchPage-content)) .main-gridContainer-gridContainer > section:nth-child(4).loading {
  opacity: 0;
  transform: translateY(20px);
  animation: stagger-fade-in 0.8s ease-out forwards;
  animation-delay: calc(3 * var(--sn-visual-effects-stagger-delay));
}
body:not(:has(.main-searchPage-content)) .main-home-content > div:nth-child(5),
body:not(:has(.main-searchPage-content)) .main-home-content > section:nth-child(5),
body:not(:has(.main-searchPage-content)) .main-gridContainer-gridContainer > div:nth-child(5),
body:not(:has(.main-searchPage-content)) .main-gridContainer-gridContainer > section:nth-child(5) {
  animation-delay: calc(4 * var(--sn-visual-effects-stagger-delay));
}
body:not(:has(.main-searchPage-content)) .main-home-content > div:nth-child(5).loading,
body:not(:has(.main-searchPage-content)) .main-home-content > section:nth-child(5).loading,
body:not(:has(.main-searchPage-content)) .main-gridContainer-gridContainer > div:nth-child(5).loading,
body:not(:has(.main-searchPage-content)) .main-gridContainer-gridContainer > section:nth-child(5).loading {
  opacity: 0;
  transform: translateY(20px);
  animation: stagger-fade-in 0.8s ease-out forwards;
  animation-delay: calc(4 * var(--sn-visual-effects-stagger-delay));
}
body:not(:has(.main-searchPage-content)) .main-home-content > div:nth-child(6),
body:not(:has(.main-searchPage-content)) .main-home-content > section:nth-child(6),
body:not(:has(.main-searchPage-content)) .main-gridContainer-gridContainer > div:nth-child(6),
body:not(:has(.main-searchPage-content)) .main-gridContainer-gridContainer > section:nth-child(6) {
  animation-delay: calc(5 * var(--sn-visual-effects-stagger-delay));
}
body:not(:has(.main-searchPage-content)) .main-home-content > div:nth-child(6).loading,
body:not(:has(.main-searchPage-content)) .main-home-content > section:nth-child(6).loading,
body:not(:has(.main-searchPage-content)) .main-gridContainer-gridContainer > div:nth-child(6).loading,
body:not(:has(.main-searchPage-content)) .main-gridContainer-gridContainer > section:nth-child(6).loading {
  opacity: 0;
  transform: translateY(20px);
  animation: stagger-fade-in 0.8s ease-out forwards;
  animation-delay: calc(5 * var(--sn-visual-effects-stagger-delay));
}
body:not(:has(.main-searchPage-content)) .main-home-content > div:nth-child(7),
body:not(:has(.main-searchPage-content)) .main-home-content > section:nth-child(7),
body:not(:has(.main-searchPage-content)) .main-gridContainer-gridContainer > div:nth-child(7),
body:not(:has(.main-searchPage-content)) .main-gridContainer-gridContainer > section:nth-child(7) {
  animation-delay: calc(6 * var(--sn-visual-effects-stagger-delay));
}
body:not(:has(.main-searchPage-content)) .main-home-content > div:nth-child(7).loading,
body:not(:has(.main-searchPage-content)) .main-home-content > section:nth-child(7).loading,
body:not(:has(.main-searchPage-content)) .main-gridContainer-gridContainer > div:nth-child(7).loading,
body:not(:has(.main-searchPage-content)) .main-gridContainer-gridContainer > section:nth-child(7).loading {
  opacity: 0;
  transform: translateY(20px);
  animation: stagger-fade-in 0.8s ease-out forwards;
  animation-delay: calc(6 * var(--sn-visual-effects-stagger-delay));
}
body:not(:has(.main-searchPage-content)) .main-home-content > div:nth-child(8),
body:not(:has(.main-searchPage-content)) .main-home-content > section:nth-child(8),
body:not(:has(.main-searchPage-content)) .main-gridContainer-gridContainer > div:nth-child(8),
body:not(:has(.main-searchPage-content)) .main-gridContainer-gridContainer > section:nth-child(8) {
  animation-delay: calc(7 * var(--sn-visual-effects-stagger-delay));
}
body:not(:has(.main-searchPage-content)) .main-home-content > div:nth-child(8).loading,
body:not(:has(.main-searchPage-content)) .main-home-content > section:nth-child(8).loading,
body:not(:has(.main-searchPage-content)) .main-gridContainer-gridContainer > div:nth-child(8).loading,
body:not(:has(.main-searchPage-content)) .main-gridContainer-gridContainer > section:nth-child(8).loading {
  opacity: 0;
  transform: translateY(20px);
  animation: stagger-fade-in 0.8s ease-out forwards;
  animation-delay: calc(7 * var(--sn-visual-effects-stagger-delay));
}
body:not(:has(.main-searchPage-content)) .main-home-content .main-card-card,
body:not(:has(.main-searchPage-content)) .main-home-content .main-card-cardContainer,
body:not(:has(.main-searchPage-content)) .main-gridContainer-gridContainer .main-card-card,
body:not(:has(.main-searchPage-content)) .main-gridContainer-gridContainer .main-card-cardContainer {
  position: relative;
  opacity: 0;
  transform: translateY(var(--sn-visual-effects-float-range, 20px));
  animation: floating-emotional-temperature calc(var(--sn-visual-effects-breathing-cycle, 8s) * (1 + var(--sn-visual-effects-emotional-intensity) * 0.3)) var(--dynamic-ease-motion, cubic-bezier(0.4, 0, 0.2, 1)) infinite, atmospheric-fade-in 0.8s var(--sn-easing-emergence, var(--sn-anim-easing-organic)) forwards;
  animation-delay: calc(var(--sn-visual-effects-stagger-delay, 0.1s) * var(--sn-visual-effects-stagger-delay));
  will-change: transform, opacity, filter;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
  contain: style paint;
}
body:not(:has(.main-searchPage-content)) .main-home-content .main-card-card:hover,
body:not(:has(.main-searchPage-content)) .main-home-content .main-card-cardContainer:hover,
body:not(:has(.main-searchPage-content)) .main-gridContainer-gridContainer .main-card-card:hover,
body:not(:has(.main-searchPage-content)) .main-gridContainer-gridContainer .main-card-cardContainer:hover {
  filter: brightness(calc(var(--sn-visual-effects-temperature-brightness, 1.05) * 1.05)) saturate(calc(var(--sn-visual-effects-emotional-saturation, 1.15) * 1.1)) hue-rotate(calc(var(--audio-temperature-hue-shift, 0deg) * 0.8));
  transform: translateY(calc(-1 * var(--sn-visual-effects-hover-lift) * (1 + var(--sn-visual-effects-emotional-intensity) * 0.5)));
  box-shadow: 0 calc(var(--sn-visual-effects-hover-lift) * 2) calc(var(--sn-visual-effects-hover-lift) * 4) rgba(var(--audio-emotion-ambient-primary), calc(var(--sn-visual-effects-emotional-intensity) * 0.2)), 0 0 calc(var(--sn-visual-effects-hover-lift) * 6) rgba(var(--audio-emotion-ambient-accent), calc(var(--sn-visual-effects-emotional-intensity) * 0.1));
  transition: filter calc(var(--dynamic-transition-medium, 0.3s)) ease, transform calc(var(--dynamic-transition-medium, 0.3s)) ease, box-shadow calc(var(--dynamic-transition-medium, 0.3s)) ease;
}
.main-view-container:has([data-testid*=artist]) body:not(:has(.main-searchPage-content)) .main-home-content,
.main-view-container:has([data-testid*=artist]) body:not(:has(.main-searchPage-content)) .main-gridContainer-gridContainer {
  --sn-visual-effects-grid-gap: calc(1.5rem * (1 + var(--sn-visual-effects-aura-influence) * 0.2));
  --sn-visual-effects-hover-lift: calc(4px * (1 + var(--sn-visual-effects-aura-influence) * 0.5));
  --sn-visual-effects-float-range: calc(8px * (1 + var(--sn-visual-effects-aura-influence) * 0.3));
  --sn-visual-effects-animation-duration: var(--sn-visual-effects-aura-breathing);
}
.main-view-container:has([data-testid*=artist]) body:not(:has(.main-searchPage-content)) .main-home-content .main-card-card,
.main-view-container:has([data-testid*=artist]) body:not(:has(.main-searchPage-content)) .main-home-content .main-card-cardContainer,
.main-view-container:has([data-testid*=artist]) body:not(:has(.main-searchPage-content)) .main-gridContainer-gridContainer .main-card-card,
.main-view-container:has([data-testid*=artist]) body:not(:has(.main-searchPage-content)) .main-gridContainer-gridContainer .main-card-cardContainer {
  filter: brightness(calc(1 + 0.02 * var(--sn-visual-effects-aura-influence))) saturate(calc(1 + 0.1 * var(--sn-visual-effects-aura-influence)));
}
.main-view-container:has(.main-gridContainer-gridContainer) body:not(:has(.main-searchPage-content)) .main-home-content,
.main-view-container:has(.main-gridContainer-gridContainer) body:not(:has(.main-searchPage-content)) .main-gridContainer-gridContainer {
  --sn-visual-effects-grid-gap: var(--navigation-node-distance, 180px);
  --sn-visual-effects-transition-duration: calc(var(--navigation-orbit-speed, 8s) * 0.1);
  perspective: var(--navigation-depth-field, 1200px);
  transform-style: preserve-3d;
}
.main-view-container:has(.main-gridContainer-gridContainer) body:not(:has(.main-searchPage-content)) .main-home-content .main-card-card,
.main-view-container:has(.main-gridContainer-gridContainer) body:not(:has(.main-searchPage-content)) .main-home-content .main-card-cardContainer,
.main-view-container:has(.main-gridContainer-gridContainer) body:not(:has(.main-searchPage-content)) .main-gridContainer-gridContainer .main-card-card,
.main-view-container:has(.main-gridContainer-gridContainer) body:not(:has(.main-searchPage-content)) .main-gridContainer-gridContainer .main-card-cardContainer {
  animation: floating var(--navigation-animation-sync, 8s) ease-in-out infinite, navigation-orbital-drift calc(var(--navigation-orbit-speed) * 2) linear infinite;
}
.main-view-container:has(.main-gridContainer-gridContainer) body:not(:has(.main-searchPage-content)) .main-home-content .main-card-card:hover::before,
.main-view-container:has(.main-gridContainer-gridContainer) body:not(:has(.main-searchPage-content)) .main-home-content .main-card-cardContainer:hover::before,
.main-view-container:has(.main-gridContainer-gridContainer) body:not(:has(.main-searchPage-content)) .main-gridContainer-gridContainer .main-card-card:hover::before,
.main-view-container:has(.main-gridContainer-gridContainer) body:not(:has(.main-searchPage-content)) .main-gridContainer-gridContainer .main-card-cardContainer:hover::before {
  filter: brightness(1.2) blur(8px);
  transform: scale(1.3);
}
body:not(:has(.main-searchPage-content)) .main-gridContainer-gridContainer[data-testid*=grid] {
  position: relative;
  transition: all var(--sn-gradient-transition, 0.8s ease-in-out);
  will-change: transform, opacity, filter;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
  contain: style paint;
}
body:not(:has(.main-searchPage-content)) .main-gridContainer-gridContainer[data-testid*=grid] .main-card-card,
body:not(:has(.main-searchPage-content)) .main-gridContainer-gridContainer[data-testid*=grid] .main-card-cardContainer {
  position: relative;
  opacity: 0;
  transform: translateY(var(--sn-visual-effects-float-range, 20px));
  animation: floating-emotional-temperature calc(var(--sn-visual-effects-breathing-cycle, 8s) * (1 + var(--sn-visual-effects-emotional-intensity) * 0.3)) var(--dynamic-ease-motion, cubic-bezier(0.4, 0, 0.2, 1)) infinite, atmospheric-fade-in 0.8s var(--sn-easing-emergence, var(--sn-anim-easing-organic)) forwards;
  animation-delay: calc(var(--sn-visual-effects-stagger-delay, 0.1s) * 0);
  will-change: transform, opacity, filter;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
  contain: style paint;
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;
  perspective: 1000px;
  backface-visibility: hidden;
  will-change: transform, opacity, filter;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
  contain: style paint;
  transition: transform 0.4s var(--sn-transition-timing-default, var(--sn-anim-easing-standard)), box-shadow 0.4s var(--sn-transition-timing-default, var(--sn-anim-easing-standard)), background-color 0.4s var(--sn-transition-timing-default, var(--sn-anim-easing-standard)), backdrop-filter 0.4s var(--sn-transition-timing-default, var(--sn-anim-easing-standard)), opacity 0.4s var(--sn-transition-timing-default, var(--sn-anim-easing-standard));
}
body:not(:has(.main-searchPage-content)) .main-gridContainer-gridContainer[data-testid*=grid] .main-card-card:hover,
body:not(:has(.main-searchPage-content)) .main-gridContainer-gridContainer[data-testid*=grid] .main-card-cardContainer:hover {
  filter: brightness(calc(var(--sn-visual-effects-temperature-brightness, 1.05) * 1.05)) saturate(calc(var(--sn-visual-effects-emotional-saturation, 1.15) * 1.1)) hue-rotate(calc(var(--audio-temperature-hue-shift, 0deg) * 0.8));
  transform: translateY(calc(-1 * var(--sn-visual-effects-hover-lift) * (1 + var(--sn-visual-effects-emotional-intensity) * 0.5)));
  box-shadow: 0 calc(var(--sn-visual-effects-hover-lift) * 2) calc(var(--sn-visual-effects-hover-lift) * 4) rgba(var(--audio-emotion-ambient-primary), calc(var(--sn-visual-effects-emotional-intensity) * 0.2)), 0 0 calc(var(--sn-visual-effects-hover-lift) * 6) rgba(var(--audio-emotion-ambient-accent), calc(var(--sn-visual-effects-emotional-intensity) * 0.1));
  transition: filter calc(var(--dynamic-transition-medium, 0.3s)) ease, transform calc(var(--dynamic-transition-medium, 0.3s)) ease, box-shadow calc(var(--dynamic-transition-medium, 0.3s)) ease;
}
body:not(:has(.main-searchPage-content)) .main-gridContainer-gridContainer[data-testid*=grid] .main-card-card::before,
body:not(:has(.main-searchPage-content)) .main-gridContainer-gridContainer[data-testid*=grid] .main-card-cardContainer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, transparent 0%, rgba(var(--sn-oklab-highlight-rgb, 255, 255, 255), 0.05) 50%, transparent 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 1;
}
body:not(:has(.main-searchPage-content)) .main-gridContainer-gridContainer[data-testid*=grid] .main-card-card:hover::before,
body:not(:has(.main-searchPage-content)) .main-gridContainer-gridContainer[data-testid*=grid] .main-card-cardContainer:hover::before {
  opacity: 1;
}
body:not(:has(.main-searchPage-content)) .main-gridContainer-gridContainer[data-testid*=grid] .main-card-card:nth-child(even),
body:not(:has(.main-searchPage-content)) .main-gridContainer-gridContainer[data-testid*=grid] .main-card-cardContainer:nth-child(even) {
  animation-delay: var(--sn-visual-effects-stagger-delay);
}
body:not(:has(.main-searchPage-content)) .main-gridContainer-gridContainer[data-testid*=grid] .main-card-card:nth-child(3n),
body:not(:has(.main-searchPage-content)) .main-gridContainer-gridContainer[data-testid*=grid] .main-card-cardContainer:nth-child(3n) {
  animation-delay: calc(2 * var(--sn-visual-effects-stagger-delay));
}
body:not(:has(.main-searchPage-content)) .main-card-card,
body:not(:has(.main-searchPage-content)) .main-card-cardContainer {
  animation: floating-emotional-temperature var(--sn-visual-effects-breathing-cycle, 8s) var(--dynamic-ease-motion, cubic-bezier(0.4, 0, 0.2, 1)) infinite;
  transition: transform var(--sn-visual-effects-transition-duration);
}
body:not(:has(.main-searchPage-content)) .main-card-card:where(.audio-emotion-calm),
body:not(:has(.main-searchPage-content)) .main-card-cardContainer:where(.audio-emotion-calm) {
  animation-name: atmospheric-calm-breathing;
  animation-duration: calc(var(--audio-breathing-cycle, 6s) * 1.2);
}
body:not(:has(.main-searchPage-content)) .main-card-card:where(.audio-emotion-energetic, .audio-emotion-aggressive),
body:not(:has(.main-searchPage-content)) .main-card-cardContainer:where(.audio-emotion-energetic, .audio-emotion-aggressive) {
  animation-name: atmospheric-energetic-pulse;
  animation-duration: calc(var(--audio-breathing-cycle, 2s) * 0.8);
}
body:not(:has(.main-searchPage-content)) .main-card-card:where(.audio-emotion-melancholy, .audio-emotion-mysterious),
body:not(:has(.main-searchPage-content)) .main-card-cardContainer:where(.audio-emotion-melancholy, .audio-emotion-mysterious) {
  animation-name: atmospheric-melancholy-drift;
  animation-duration: calc(var(--audio-breathing-cycle, 8s) * 1.5);
}
body:not(:has(.main-searchPage-content)) .main-card-card:hover,
body:not(:has(.main-searchPage-content)) .main-card-cardContainer:hover {
  transform: translateY(calc(-1 * var(--sn-visual-effects-hover-lift) * (1 + var(--sn-visual-effects-emotional-intensity, 0.5) * 0.5)));
  box-shadow: 0 calc(var(--sn-visual-effects-hover-lift) * 3) calc(var(--sn-visual-effects-hover-lift) * 6) rgba(var(--audio-emotion-ambient-primary), calc(var(--sn-visual-effects-emotional-intensity, 0.5) * 0.15)), 0 0 calc(var(--sn-visual-effects-hover-lift) * 8) rgba(var(--audio-emotion-ambient-accent), calc(var(--sn-visual-effects-emotional-intensity, 0.5) * 0.08));
}
body:not(:has(.main-searchPage-content)) .main-gridContainer-gridContainer .main-card-card,
body:not(:has(.main-searchPage-content)) .main-gridContainer-gridContainer .main-card-cardContainer {
  opacity: 0;
  transform: translateY(20px);
  animation: stagger-fade-in 0.8s ease-out forwards;
}
body:not(:has(.main-searchPage-content)) .main-trackList-trackListContentWrapper .main-trackList-trackListRow {
  transition: all var(--sn-visual-effects-transition-duration);
  border-radius: 8px;
  margin: 2px 0;
  background: rgba(var(--spice-rgb-surface0), 0.3);
  will-change: transform, opacity, filter;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
  contain: style paint;
}
body:not(:has(.main-searchPage-content)) .main-trackList-trackListContentWrapper .main-trackList-trackListRow:nth-child(1) {
  animation-delay: calc(0 * var(--sn-visual-effects-stagger-delay));
}
body:not(:has(.main-searchPage-content)) .main-trackList-trackListContentWrapper .main-trackList-trackListRow:nth-child(1).loading {
  opacity: 0;
  transform: translateY(20px);
  animation: stagger-fade-in 0.8s ease-out forwards;
  animation-delay: calc(0 * var(--sn-visual-effects-stagger-delay));
}
body:not(:has(.main-searchPage-content)) .main-trackList-trackListContentWrapper .main-trackList-trackListRow:nth-child(2) {
  animation-delay: calc(1 * var(--sn-visual-effects-stagger-delay));
}
body:not(:has(.main-searchPage-content)) .main-trackList-trackListContentWrapper .main-trackList-trackListRow:nth-child(2).loading {
  opacity: 0;
  transform: translateY(20px);
  animation: stagger-fade-in 0.8s ease-out forwards;
  animation-delay: calc(1 * var(--sn-visual-effects-stagger-delay));
}
body:not(:has(.main-searchPage-content)) .main-trackList-trackListContentWrapper .main-trackList-trackListRow:nth-child(3) {
  animation-delay: calc(2 * var(--sn-visual-effects-stagger-delay));
}
body:not(:has(.main-searchPage-content)) .main-trackList-trackListContentWrapper .main-trackList-trackListRow:nth-child(3).loading {
  opacity: 0;
  transform: translateY(20px);
  animation: stagger-fade-in 0.8s ease-out forwards;
  animation-delay: calc(2 * var(--sn-visual-effects-stagger-delay));
}
body:not(:has(.main-searchPage-content)) .main-trackList-trackListContentWrapper .main-trackList-trackListRow:nth-child(4) {
  animation-delay: calc(3 * var(--sn-visual-effects-stagger-delay));
}
body:not(:has(.main-searchPage-content)) .main-trackList-trackListContentWrapper .main-trackList-trackListRow:nth-child(4).loading {
  opacity: 0;
  transform: translateY(20px);
  animation: stagger-fade-in 0.8s ease-out forwards;
  animation-delay: calc(3 * var(--sn-visual-effects-stagger-delay));
}
body:not(:has(.main-searchPage-content)) .main-trackList-trackListContentWrapper .main-trackList-trackListRow:nth-child(5) {
  animation-delay: calc(4 * var(--sn-visual-effects-stagger-delay));
}
body:not(:has(.main-searchPage-content)) .main-trackList-trackListContentWrapper .main-trackList-trackListRow:nth-child(5).loading {
  opacity: 0;
  transform: translateY(20px);
  animation: stagger-fade-in 0.8s ease-out forwards;
  animation-delay: calc(4 * var(--sn-visual-effects-stagger-delay));
}
body:not(:has(.main-searchPage-content)) .main-trackList-trackListContentWrapper .main-trackList-trackListRow:nth-child(6) {
  animation-delay: calc(5 * var(--sn-visual-effects-stagger-delay));
}
body:not(:has(.main-searchPage-content)) .main-trackList-trackListContentWrapper .main-trackList-trackListRow:nth-child(6).loading {
  opacity: 0;
  transform: translateY(20px);
  animation: stagger-fade-in 0.8s ease-out forwards;
  animation-delay: calc(5 * var(--sn-visual-effects-stagger-delay));
}
body:not(:has(.main-searchPage-content)) .main-trackList-trackListContentWrapper .main-trackList-trackListRow:nth-child(7) {
  animation-delay: calc(6 * var(--sn-visual-effects-stagger-delay));
}
body:not(:has(.main-searchPage-content)) .main-trackList-trackListContentWrapper .main-trackList-trackListRow:nth-child(7).loading {
  opacity: 0;
  transform: translateY(20px);
  animation: stagger-fade-in 0.8s ease-out forwards;
  animation-delay: calc(6 * var(--sn-visual-effects-stagger-delay));
}
body:not(:has(.main-searchPage-content)) .main-trackList-trackListContentWrapper .main-trackList-trackListRow:nth-child(8) {
  animation-delay: calc(7 * var(--sn-visual-effects-stagger-delay));
}
body:not(:has(.main-searchPage-content)) .main-trackList-trackListContentWrapper .main-trackList-trackListRow:nth-child(8).loading {
  opacity: 0;
  transform: translateY(20px);
  animation: stagger-fade-in 0.8s ease-out forwards;
  animation-delay: calc(7 * var(--sn-visual-effects-stagger-delay));
}
body:not(:has(.main-searchPage-content)) .main-trackList-trackListContentWrapper .main-trackList-trackListRow:nth-child(9) {
  animation-delay: calc(8 * var(--sn-visual-effects-stagger-delay));
}
body:not(:has(.main-searchPage-content)) .main-trackList-trackListContentWrapper .main-trackList-trackListRow:nth-child(9).loading {
  opacity: 0;
  transform: translateY(20px);
  animation: stagger-fade-in 0.8s ease-out forwards;
  animation-delay: calc(8 * var(--sn-visual-effects-stagger-delay));
}
body:not(:has(.main-searchPage-content)) .main-trackList-trackListContentWrapper .main-trackList-trackListRow:nth-child(10) {
  animation-delay: calc(9 * var(--sn-visual-effects-stagger-delay));
}
body:not(:has(.main-searchPage-content)) .main-trackList-trackListContentWrapper .main-trackList-trackListRow:nth-child(10).loading {
  opacity: 0;
  transform: translateY(20px);
  animation: stagger-fade-in 0.8s ease-out forwards;
  animation-delay: calc(9 * var(--sn-visual-effects-stagger-delay));
}
body:not(:has(.main-searchPage-content)) .main-trackList-trackListContentWrapper .main-trackList-trackListRow:nth-child(11) {
  animation-delay: calc(10 * var(--sn-visual-effects-stagger-delay));
}
body:not(:has(.main-searchPage-content)) .main-trackList-trackListContentWrapper .main-trackList-trackListRow:nth-child(11).loading {
  opacity: 0;
  transform: translateY(20px);
  animation: stagger-fade-in 0.8s ease-out forwards;
  animation-delay: calc(10 * var(--sn-visual-effects-stagger-delay));
}
body:not(:has(.main-searchPage-content)) .main-trackList-trackListContentWrapper .main-trackList-trackListRow:nth-child(12) {
  animation-delay: calc(11 * var(--sn-visual-effects-stagger-delay));
}
body:not(:has(.main-searchPage-content)) .main-trackList-trackListContentWrapper .main-trackList-trackListRow:nth-child(12).loading {
  opacity: 0;
  transform: translateY(20px);
  animation: stagger-fade-in 0.8s ease-out forwards;
  animation-delay: calc(11 * var(--sn-visual-effects-stagger-delay));
}
body:not(:has(.main-searchPage-content)) .main-trackList-trackListContentWrapper .main-trackList-trackListRow:nth-child(13) {
  animation-delay: calc(12 * var(--sn-visual-effects-stagger-delay));
}
body:not(:has(.main-searchPage-content)) .main-trackList-trackListContentWrapper .main-trackList-trackListRow:nth-child(13).loading {
  opacity: 0;
  transform: translateY(20px);
  animation: stagger-fade-in 0.8s ease-out forwards;
  animation-delay: calc(12 * var(--sn-visual-effects-stagger-delay));
}
body:not(:has(.main-searchPage-content)) .main-trackList-trackListContentWrapper .main-trackList-trackListRow:nth-child(14) {
  animation-delay: calc(13 * var(--sn-visual-effects-stagger-delay));
}
body:not(:has(.main-searchPage-content)) .main-trackList-trackListContentWrapper .main-trackList-trackListRow:nth-child(14).loading {
  opacity: 0;
  transform: translateY(20px);
  animation: stagger-fade-in 0.8s ease-out forwards;
  animation-delay: calc(13 * var(--sn-visual-effects-stagger-delay));
}
body:not(:has(.main-searchPage-content)) .main-trackList-trackListContentWrapper .main-trackList-trackListRow:nth-child(15) {
  animation-delay: calc(14 * var(--sn-visual-effects-stagger-delay));
}
body:not(:has(.main-searchPage-content)) .main-trackList-trackListContentWrapper .main-trackList-trackListRow:nth-child(15).loading {
  opacity: 0;
  transform: translateY(20px);
  animation: stagger-fade-in 0.8s ease-out forwards;
  animation-delay: calc(14 * var(--sn-visual-effects-stagger-delay));
}
body:not(:has(.main-searchPage-content)) .main-trackList-trackListContentWrapper .main-trackList-trackListRow:nth-child(16) {
  animation-delay: calc(15 * var(--sn-visual-effects-stagger-delay));
}
body:not(:has(.main-searchPage-content)) .main-trackList-trackListContentWrapper .main-trackList-trackListRow:nth-child(16).loading {
  opacity: 0;
  transform: translateY(20px);
  animation: stagger-fade-in 0.8s ease-out forwards;
  animation-delay: calc(15 * var(--sn-visual-effects-stagger-delay));
}
body:not(:has(.main-searchPage-content)) .main-trackList-trackListContentWrapper .main-trackList-trackListRow:nth-child(17) {
  animation-delay: calc(16 * var(--sn-visual-effects-stagger-delay));
}
body:not(:has(.main-searchPage-content)) .main-trackList-trackListContentWrapper .main-trackList-trackListRow:nth-child(17).loading {
  opacity: 0;
  transform: translateY(20px);
  animation: stagger-fade-in 0.8s ease-out forwards;
  animation-delay: calc(16 * var(--sn-visual-effects-stagger-delay));
}
body:not(:has(.main-searchPage-content)) .main-trackList-trackListContentWrapper .main-trackList-trackListRow:nth-child(18) {
  animation-delay: calc(17 * var(--sn-visual-effects-stagger-delay));
}
body:not(:has(.main-searchPage-content)) .main-trackList-trackListContentWrapper .main-trackList-trackListRow:nth-child(18).loading {
  opacity: 0;
  transform: translateY(20px);
  animation: stagger-fade-in 0.8s ease-out forwards;
  animation-delay: calc(17 * var(--sn-visual-effects-stagger-delay));
}
body:not(:has(.main-searchPage-content)) .main-trackList-trackListContentWrapper .main-trackList-trackListRow:hover {
  background: rgba(var(--spice-rgb-surface1), 0.4);
  transform: translateX(4px) scale(1.005);
}
body:not(:has(.main-searchPage-content)) .main-trackList-trackListContentWrapper .main-trackList-trackListRow.main-trackList-selected, body:not(:has(.main-searchPage-content)) .main-trackList-trackListContentWrapper .main-trackList-trackListRow:has(.main-trackList-playingIcon) {
  background: linear-gradient(135deg, rgba(var(--spice-rgb-accent), 0.1) 0%, rgba(var(--spice-rgb-surface1), 0.2) 100%);
  border: 1px solid rgba(var(--spice-rgb-accent), 0.3);
}
body:not(:has(.main-searchPage-content)) .main-yourLibrary-yourLibrary .main-rootlist-wrapper .spicetify-playlist-list li {
  transition: all var(--sn-visual-effects-transition-duration);
  border-radius: 6px;
  margin: 1px 0;
  will-change: transform, opacity, filter;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
  contain: style paint;
}
body:not(:has(.main-searchPage-content)) .main-yourLibrary-yourLibrary .main-rootlist-wrapper .spicetify-playlist-list li:hover {
  backdrop-filter: blur(12px) saturate(1.1);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
  background: rgba(var(--sn-oklab-highlight-rgb, 255, 255, 255), 0.08);
  border: 1px solid rgba(var(--sn-oklab-highlight-rgb, 255, 255, 255), 0.2);
  will-change: transform, opacity, filter;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
  transform: translateX(2px);
  background: rgba(var(--spice-rgb-surface1), 0.3);
}
@supports not (backdrop-filter: blur(1px)) {
  body:not(:has(.main-searchPage-content)) .main-yourLibrary-yourLibrary .main-rootlist-wrapper .spicetify-playlist-list li:hover {
    background: rgba(var(--spice-rgb-surface0), 0.16);
    border: 1px solid rgba(var(--spice-rgb-surface1), 0.3);
  }
}
body:not(:has(.main-searchPage-content)) .main-yourLibrary-yourLibrary .main-rootlist-wrapper .spicetify-playlist-list li[aria-selected=true], body:not(:has(.main-searchPage-content)) .main-yourLibrary-yourLibrary .main-rootlist-wrapper .spicetify-playlist-list li.main-rootlist-rootlistItemActive {
  background: linear-gradient(90deg, rgba(var(--spice-rgb-accent), 0.15) 0%, rgba(var(--spice-rgb-surface1), 0.1) 100%);
  border-left: 3px solid var(--spice-accent);
}
body:not(:has(.main-searchPage-content)) .main-navBar-navBar .main-navBar-navBarLink {
  transition: all var(--sn-visual-effects-transition-duration);
  border-radius: 8px;
  margin: 2px;
  will-change: transform, opacity, filter;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
  contain: style paint;
}
body:not(:has(.main-searchPage-content)) .main-navBar-navBar .main-navBar-navBarLink:hover {
  background: rgba(var(--spice-rgb-surface1), 0.3);
  transform: translateY(-1px);
}
body:not(:has(.main-searchPage-content)) .main-navBar-navBar .main-navBar-navBarLink.main-navBar-navBarLinkActive {
  background: linear-gradient(135deg, rgba(var(--spice-rgb-accent), 0.2) 0%, rgba(var(--spice-rgb-surface1), 0.1) 100%);
}
body:not(:has(.main-searchPage-content)) aside[data-testid=now-playing-bar],
body:not(:has(.main-searchPage-content)) .Root__now-playing-bar {
  --glass-blur: 6px;
  --glass-saturation: 1.3;
  --glass-opacity: 0.2;
  transition: all var(--sn-visual-effects-transition-duration);
  will-change: transform, opacity, filter;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
  contain: style paint;
  backdrop-filter: blur(calc(var(--glass-blur, 6px) + var(--sn-glass-beat-boost, 0) * 5px)) saturate(var(--glass-saturation, 1.2)) brightness(var(--glass-brightness, 1.1));
  -webkit-backdrop-filter: blur(calc(var(--glass-blur, 6px) + var(--sn-glass-beat-boost, 0) * 5px)) saturate(var(--glass-saturation, 1.2)) brightness(var(--glass-brightness, 1.1));
  background: var(--glass-background, rgba(var(--sn-oklab-highlight-rgb, 255, 255, 255), 0.1));
  border: 1px solid var(--glass-border, rgba(var(--sn-oklab-highlight-rgb, 255, 255, 255), 0.2));
  transition: backdrop-filter 400ms ease-out, -webkit-backdrop-filter 400ms ease-out, background var(--sn-bg-gradient-transition, 0.8s ease-in-out), border var(--sn-bg-gradient-transition, 0.8s ease-in-out);
  will-change: transform, opacity, filter;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
  contain: style paint;
  will-change: backdrop-filter, -webkit-backdrop-filter;
}
@supports not (backdrop-filter: blur(1px)) {
  body:not(:has(.main-searchPage-content)) aside[data-testid=now-playing-bar],
  body:not(:has(.main-searchPage-content)) .Root__now-playing-bar {
    background: rgba(var(--spice-rgb-surface0), var(--glass-opacity-fallback, 0.2));
    border: 1px solid rgba(var(--spice-rgb-surface1), 0.3);
  }
}
body:not(:has(.main-searchPage-content)) aside[data-testid=now-playing-bar]:hover,
body:not(:has(.main-searchPage-content)) .Root__now-playing-bar:hover {
  --glass-blur: 8px;
  --glass-saturation: 1.5;
  --glass-opacity: 0.25;
}
body:not(:has(.main-searchPage-content)) aside[data-testid=now-playing-bar] .main-trackInfo-container .main-trackInfo-name,
body:not(:has(.main-searchPage-content)) aside[data-testid=now-playing-bar] .main-trackInfo-container .main-trackInfo-artists,
body:not(:has(.main-searchPage-content)) .Root__now-playing-bar .main-trackInfo-container .main-trackInfo-name,
body:not(:has(.main-searchPage-content)) .Root__now-playing-bar .main-trackInfo-container .main-trackInfo-artists {
  transition: all var(--sn-visual-effects-transition-duration);
}
body:not(:has(.main-searchPage-content)) aside[data-testid=now-playing-bar] .main-trackInfo-container .main-trackInfo-name:hover,
body:not(:has(.main-searchPage-content)) aside[data-testid=now-playing-bar] .main-trackInfo-container .main-trackInfo-artists:hover,
body:not(:has(.main-searchPage-content)) .Root__now-playing-bar .main-trackInfo-container .main-trackInfo-name:hover,
body:not(:has(.main-searchPage-content)) .Root__now-playing-bar .main-trackInfo-container .main-trackInfo-artists:hover {
  transform: translateY(-1px);
  filter: brightness(1.1);
}
body:not(:has(.main-searchPage-content)) aside[data-testid=now-playing-bar] .main-playPauseButton-button,
body:not(:has(.main-searchPage-content)) aside[data-testid=now-playing-bar] .main-skipButton-button,
body:not(:has(.main-searchPage-content)) aside[data-testid=now-playing-bar] .main-shuffleButton-button,
body:not(:has(.main-searchPage-content)) .Root__now-playing-bar .main-playPauseButton-button,
body:not(:has(.main-searchPage-content)) .Root__now-playing-bar .main-skipButton-button,
body:not(:has(.main-searchPage-content)) .Root__now-playing-bar .main-shuffleButton-button {
  transition: all var(--sn-visual-effects-transition-duration);
  border-radius: 50%;
  will-change: transform, opacity, filter;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
  contain: style paint;
}
body:not(:has(.main-searchPage-content)) aside[data-testid=now-playing-bar] .main-playPauseButton-button:hover,
body:not(:has(.main-searchPage-content)) aside[data-testid=now-playing-bar] .main-skipButton-button:hover,
body:not(:has(.main-searchPage-content)) aside[data-testid=now-playing-bar] .main-shuffleButton-button:hover,
body:not(:has(.main-searchPage-content)) .Root__now-playing-bar .main-playPauseButton-button:hover,
body:not(:has(.main-searchPage-content)) .Root__now-playing-bar .main-skipButton-button:hover,
body:not(:has(.main-searchPage-content)) .Root__now-playing-bar .main-shuffleButton-button:hover {
  background: rgba(var(--spice-rgb-surface1), 0.3);
  transform: scale(1.05) translateY(-1px);
}
body:not(:has(.main-searchPage-content)) aside[data-testid=now-playing-bar] .main-playPauseButton-button:active,
body:not(:has(.main-searchPage-content)) aside[data-testid=now-playing-bar] .main-skipButton-button:active,
body:not(:has(.main-searchPage-content)) aside[data-testid=now-playing-bar] .main-shuffleButton-button:active,
body:not(:has(.main-searchPage-content)) .Root__now-playing-bar .main-playPauseButton-button:active,
body:not(:has(.main-searchPage-content)) .Root__now-playing-bar .main-skipButton-button:active,
body:not(:has(.main-searchPage-content)) .Root__now-playing-bar .main-shuffleButton-button:active {
  transform: scale(0.95);
}

:root[data-organic-performance-mode=minimal] .visual-effects-container, :root[data-organic-performance-mode=minimal] .visual-effects-enabled, :root[data-organic-performance-mode=minimal] .Root, :root[data-organic-performance-mode=minimal] .Root__main-view {
  animation: none !important;
  filter: none !important;
}
:root[data-organic-performance-mode=minimal] .visual-effects-container::before, :root[data-organic-performance-mode=minimal] .visual-effects-enabled::before, :root[data-organic-performance-mode=minimal] .Root::before, :root[data-organic-performance-mode=minimal] .Root__main-view::before {
  display: none !important;
}
:root[data-organic-performance-mode=minimal] .dynamic-atmospheric-particles::before, :root[data-organic-performance-mode=minimal] .dynamic-atmospheric-particles::after,
:root[data-organic-performance-mode=minimal] .dynamic-volumetric-lighting::before,
:root[data-organic-performance-mode=minimal] .dynamic-volumetric-lighting::after,
:root[data-organic-performance-mode=minimal] .dynamic-atmospheric-fog::before,
:root[data-organic-performance-mode=minimal] .dynamic-atmospheric-fog::after {
  display: none !important;
}

:root[data-organic-performance-mode=balanced] .visual-effects-container, :root[data-organic-performance-mode=balanced] .visual-effects-enabled, :root[data-organic-performance-mode=balanced] .Root, :root[data-organic-performance-mode=balanced] .Root__main-view {
  animation: none !important;
}
:root[data-organic-performance-mode=balanced] .dynamic-atmospheric-particles::before {
  opacity: calc(var(--sn-visual-effects-cinematic-intensity, 0.8) * 0.3) !important;
}
:root[data-organic-performance-mode=balanced] .dynamic-atmospheric-particles::after {
  opacity: calc(var(--sn-visual-effects-cinematic-intensity, 0.8) * 0.2) !important;
}

:root[data-visual-effects-performance-mode=maximum] .visual-effects-container, :root[data-visual-effects-performance-mode=maximum] .visual-effects-enabled, :root[data-visual-effects-performance-mode=maximum] .Root, :root[data-visual-effects-performance-mode=maximum] .Root__main-view {
  filter: saturate(calc(1 + var(--sn-visual-effects-emotional-saturation, 1) * 0.5)) !important brightness(calc(1 + var(--sn-visual-effects-warmth, 0.8) * 0.3)) !important;
}
:root[data-visual-effects-performance-mode=maximum] .visual-effects-container::before, :root[data-visual-effects-performance-mode=maximum] .visual-effects-enabled::before, :root[data-visual-effects-performance-mode=maximum] .Root::before, :root[data-visual-effects-performance-mode=maximum] .Root__main-view::before {
  opacity: calc(var(--sn-visual-effects-fog-opacity, 0.02) * 5) !important;
}
:root[data-visual-effects-performance-mode=maximum] .dynamic-atmospheric-particles[data-particle-density=dense] {
  position: relative;
}
:root[data-visual-effects-performance-mode=maximum] .dynamic-atmospheric-particles[data-particle-density=dense]::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: radial-gradient(circle at 20% 30%, rgba(var(--sn-accent-rgb, 128, 128, 128), 0.15) 1px, transparent 1px);
  background-size: 20px 20px;
  animation: particle-float 6s ease-in-out infinite;
}
:root[data-visual-effects-performance-mode=maximum] .dynamic-volumetric-lighting[data-light-intensity=dramatic] {
  background: radial-gradient(ellipse at center, rgba(var(--sn-accent-rgb, 128, 128, 128), 0.4) 0%, rgba(var(--sn-accent-rgb, 128, 128, 128), 0.1) 60%, transparent 100%);
  filter: blur(3px);
  mix-blend-mode: screen;
}

@media (prefers-reduced-motion: reduce) {
  :root, :root.visual-effects-debug {
    --sn-visual-effects-transition-duration: 0.1s;
    --sn-visual-effects-animation-duration: 0s;
    --sn-visual-effects-stagger-delay: 0s;
  }
  .visual-effects-container, .visual-effects-enabled, :root .Root, :root .Root__main-view, :root .card.visual-effects-enabled,
  :root .main-card.visual-effects-enabled,
  :root .artist-card.visual-effects-enabled,
  :root .playlist-card.visual-effects-enabled,
  :root .playlist-playlist.visual-effects-enabled,
  :root .artist-artist.visual-effects-enabled,
  :root .album-album.visual-effects-enabled,
  :root .track-row.visual-effects-enabled, :root button.visual-effects-enabled,
  :root .button.visual-effects-enabled,
  :root .Button.visual-effects-enabled,
  .Root__main-view,
  .Root__nav-bar,
  .player-controls,
  .card,
  button {
    animation: none !important;
    transition-duration: 0.1s !important;
  }
  .visual-effects-container::before, .visual-effects-enabled::before, :root .Root::before, :root .Root__main-view::before, :root .card.visual-effects-enabled::before,
  :root .main-card.visual-effects-enabled::before,
  :root .artist-card.visual-effects-enabled::before,
  :root .playlist-card.visual-effects-enabled::before,
  :root .playlist-playlist.visual-effects-enabled::before,
  :root .artist-artist.visual-effects-enabled::before,
  :root .album-album.visual-effects-enabled::before,
  :root .track-row.visual-effects-enabled::before, :root button.visual-effects-enabled::before,
  :root .button.visual-effects-enabled::before,
  :root .Button.visual-effects-enabled::before, .visual-effects-container::after, .visual-effects-enabled::after, :root .Root::after, :root .Root__main-view::after, :root .card.visual-effects-enabled::after,
  :root .main-card.visual-effects-enabled::after,
  :root .artist-card.visual-effects-enabled::after,
  :root .playlist-card.visual-effects-enabled::after,
  :root .playlist-playlist.visual-effects-enabled::after,
  :root .artist-artist.visual-effects-enabled::after,
  :root .album-album.visual-effects-enabled::after,
  :root .track-row.visual-effects-enabled::after, :root button.visual-effects-enabled::after,
  :root .button.visual-effects-enabled::after,
  :root .Button.visual-effects-enabled::after,
  .Root__main-view::before,
  .Root__main-view::after,
  .Root__nav-bar::before,
  .Root__nav-bar::after,
  .player-controls::before,
  .player-controls::after,
  .card::before,
  .card::after,
  button::before,
  button::after {
    animation: none !important;
    transition-duration: 0.1s !important;
  }
  .visual-effects-container, .visual-effects-enabled, :root .Root, :root .Root__main-view, :root .card.visual-effects-enabled,
  :root .main-card.visual-effects-enabled,
  :root .artist-card.visual-effects-enabled,
  :root .playlist-card.visual-effects-enabled,
  :root .playlist-playlist.visual-effects-enabled,
  :root .artist-artist.visual-effects-enabled,
  :root .album-album.visual-effects-enabled,
  :root .track-row.visual-effects-enabled, :root button.visual-effects-enabled,
  :root .button.visual-effects-enabled,
  :root .Button.visual-effects-enabled {
    filter: none !important;
  }
  .visual-effects-container::before, .visual-effects-enabled::before, :root .Root::before, :root .Root__main-view::before, :root .card.visual-effects-enabled::before,
  :root .main-card.visual-effects-enabled::before,
  :root .artist-card.visual-effects-enabled::before,
  :root .playlist-card.visual-effects-enabled::before,
  :root .playlist-playlist.visual-effects-enabled::before,
  :root .artist-artist.visual-effects-enabled::before,
  :root .album-album.visual-effects-enabled::before,
  :root .track-row.visual-effects-enabled::before, :root button.visual-effects-enabled::before,
  :root .button.visual-effects-enabled::before,
  :root .Button.visual-effects-enabled::before {
    opacity: 0.05 !important;
  }
  :root, :root.visual-effects-debug {
    --sn-visual-effects-growth-intensity: 0;
    --sn-visual-effects-border-thickness: 1px;
  }
  :root .Root::before,
  :root [class*=visual-effects-] {
    animation: none !important;
    transition-duration: 0.1s !important;
  }
  * {
    animation: none !important;
    transform: none !important;
  }
}
@media (prefers-contrast: high) {
  .visual-effects-container, .visual-effects-enabled, :root .Root, :root .Root__main-view, :root .card.visual-effects-enabled,
  :root .main-card.visual-effects-enabled,
  :root .artist-card.visual-effects-enabled,
  :root .playlist-card.visual-effects-enabled,
  :root .playlist-playlist.visual-effects-enabled,
  :root .artist-artist.visual-effects-enabled,
  :root .album-album.visual-effects-enabled,
  :root .track-row.visual-effects-enabled, :root button.visual-effects-enabled,
  :root .button.visual-effects-enabled,
  :root .Button.visual-effects-enabled {
    filter: contrast(2) !important saturate(1.5) !important;
  }
  h1.visual-effects-enabled, h2.visual-effects-enabled, h3.visual-effects-enabled, h4.visual-effects-enabled, h5.visual-effects-enabled, h6.visual-effects-enabled,
  p.visual-effects-enabled, span.visual-effects-enabled, div.visual-effects-enabled {
    text-shadow: 0 0 2px rgba(255, 255, 255, 0.8) !important, 0 0 4px rgba(var(--sn-visual-effects-primary-rgb, 205, 214, 244), 0.6) !important;
  }
  :root, :root.visual-effects-debug {
    --sn-visual-effects-border-thickness: 3px;
    --sn-visual-effects-emotional-saturation: 1.5;
    --sn-visual-effects-cinematic-contrast: 1.8;
  }
  :root .visual-effects-enabled {
    filter: contrast(var(--sn-visual-effects-cinematic-contrast, 1.8)) saturate(var(--sn-visual-effects-emotional-saturation, 1.5)) !important;
  }
}
@media (max-width: 768px) {
  :root, :root.visual-effects-debug {
    --sn-visual-effects-grid-gap: 1rem;
    --sn-visual-effects-hover-lift: 2px;
    --sn-visual-effects-transition-duration: 0.3s;
    --sn-visual-effects-float-range: 4px;
    --sn-visual-effects-grid-scale: 1.01;
  }
  .main-card-card:hover,
  .main-card-cardContainer:hover {
    transform: none;
  }
  .main-trackList-trackListRow:hover {
    transform: none;
  }
  .main-card-card,
  .main-card-cardContainer {
    backdrop-filter: none;
    background: rgba(var(--spice-rgb-surface0), 0.8) !important;
  }
  .main-trackList-trackListRow,
  .main-navBar-navBarLink {
    backdrop-filter: none;
    background: rgba(var(--spice-rgb-surface0), 0.8) !important;
  }
}
@media (prefers-reduced-motion: reduce) and (max-width: 768px) {
  .main-card-card,
  .main-card-cardContainer {
    backdrop-filter: none !important;
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
  .main-card-card:hover,
  .main-card-cardContainer:hover {
    backdrop-filter: none !important;
    transform: none !important;
    filter: brightness(1.05);
  }
  .main-trackList-trackListRow,
  .main-navBar-navBarLink {
    backdrop-filter: none !important;
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
  .main-trackList-trackListRow:hover,
  .main-navBar-navBarLink:hover {
    backdrop-filter: none !important;
    transform: none !important;
    filter: brightness(1.05);
  }
  aside[data-testid=now-playing-bar],
  .Root__now-playing-bar {
    backdrop-filter: none !important;
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
  aside[data-testid=now-playing-bar]:hover,
  .Root__now-playing-bar:hover {
    backdrop-filter: none !important;
    transform: none !important;
    filter: brightness(1.05);
  }
}
@layer audio-reactive.performance {
  .visual-effects-enabled {
    will-change: transform, opacity, filter;
    transform: translateZ(0);
    backface-visibility: hidden;
    contain: layout style paint;
    perspective: 1000px;
  }
  @media (prefers-reduced-motion: reduce), (update: slow) {
    .visual-effects-enabled {
      filter: none !important;
      animation: none !important;
      transition-duration: 0.1s !important;
    }
  }
}
:root.visual-effects-debug::before {
  content: "✨ AUDIO-REACTIVE ATMOSPHERICS ACTIVE";
  position: fixed;
  top: 10px;
  left: 10px;
  font-size: 12px;
  color: lime;
  background: rgba(0, 0, 0, 0.9);
  padding: 5px 10px;
  border-radius: 4px;
  z-index: 99999;
  pointer-events: none;
  border: 1px solid lime;
}
:root.visual-effects-debug::after {
  content: "🎵 Effects Intensity: " attr(data-visual-effects-intensity, "0.7");
  position: fixed;
  top: 50px;
  left: 10px;
  font-size: 11px;
  color: cyan;
  background: rgba(0, 0, 0, 0.9);
  padding: 4px 8px;
  border-radius: 3px;
  z-index: 99998;
  pointer-events: none;
  border: 1px solid cyan;
}
:root.visual-effects-debug .visual-effects-container, :root.visual-effects-debug .visual-effects-enabled, :root.visual-effects-debug .Root, :root.visual-effects-debug .Root__main-view {
  outline: 3px dashed lime !important;
  outline-offset: 2px;
}
:root.visual-effects-debug .visual-effects-container::after, :root.visual-effects-debug .visual-effects-enabled::after, :root.visual-effects-debug .Root::after, :root.visual-effects-debug .Root__main-view::after {
  content: "🚀 Performance: " attr(data-visual-effects-performance-mode, "optimal");
  position: fixed;
  top: 90px;
  left: 10px;
  font-size: 11px;
  color: rgb(var(--sn-musical-harmony-analogous-warm-rgb));
  background: rgba(var(--spice-rgb-base), 0.9);
  padding: 4px 8px;
  border-radius: 3px;
  z-index: 99997;
  pointer-events: none;
  border: 1px solid rgb(var(--sn-musical-harmony-analogous-warm-rgb));
}
:root.visual-effects-debug .visual-effects-enabled {
  position: relative;
}
:root.visual-effects-debug .visual-effects-enabled::after {
  content: "✨ VFX";
  position: absolute;
  top: 4px;
  right: 4px;
  font-size: 10px;
  color: rgb(var(--sn-musical-harmony-complementary-rgb));
  pointer-events: none;
  z-index: 9999;
  background: rgba(var(--spice-rgb-base), 0.9);
  padding: 2px 4px;
  border-radius: 2px;
}

@layer audio-reactive.debug {}
:root, :root.visual-effects-debug {
  --constellation-node-distance: var(--navigation-node-distance);
  --constellation-orbit-speed: var(--navigation-orbit-speed);
  --constellation-depth-field: var(--navigation-depth-field);
  --constellation-breathing-sync: var(--navigation-animation-sync);
  --visual-effects-enabled: var(--sn-visual-effects-enabled);
  --visual-effects-intensity: var(--sn-visual-effects-intensity);
  --visual-effects-mode: var(--sn-visual-effects-mode);
  --atmospheric-gap: var(--sn-visual-effects-grid-gap);
  --atmospheric-hover-lift: var(--sn-visual-effects-hover-lift);
  --atmospheric-transition: var(--sn-visual-effects-transition-duration);
  --ambient-float-range: var(--sn-visual-effects-float-range);
  --ambient-duration: var(--sn-visual-effects-animation-duration);
}

@keyframes constellation-orbital-drift {
  0% {
    transform: rotateY(0deg) translateX(2px) rotateY(0deg);
  }
  25% {
    transform: rotateY(90deg) translateX(4px) rotateY(-90deg);
  }
  50% {
    transform: rotateY(180deg) translateX(2px) rotateY(-180deg);
  }
  75% {
    transform: rotateY(270deg) translateX(4px) rotateY(-270deg);
  }
  100% {
    transform: rotateY(360deg) translateX(2px) rotateY(-360deg);
  }
}
@keyframes organic-membrane-breathing {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.95;
    transform: scale(1.01);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes dynamic-ambient-field {
  0% {
    opacity: 1;
    transform: translateX(0) translateY(0);
  }
  25% {
    opacity: 0.98;
    transform: translateX(1px) translateY(-0.5px);
  }
  50% {
    opacity: 0.96;
    transform: translateX(-0.5px) translateY(1px);
  }
  75% {
    opacity: 0.98;
    transform: translateX(-1px) translateY(-0.5px);
  }
  100% {
    opacity: 1;
    transform: translateX(0) translateY(0);
  }
}
.fluid-gradients-container {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  will-change: transform, opacity, filter;
  transform: translateZ(0);
  backface-visibility: hidden;
  contain: layout style paint;
  z-index: 0;
  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.fluid-gradients-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  will-change: transform, opacity, filter;
  transform: translateZ(0);
  backface-visibility: hidden;
  contain: layout style paint;
  mix-blend-mode: overlay;
  opacity: var(--sn-bg-gradient-opacity, 0.3);
  transition: opacity 300ms ease-out;
}

.liquid-oil-slick {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  will-change: transform, opacity, filter;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
  contain: style paint;
  backdrop-filter: blur(calc(calc(var(--sn-ui-glass-pulse-enabled, 0.5) * var(--sn-variant-energetic-scale, 1.5)) * var(--sn-unified-blur-amount))) saturate(calc(1 + calc(var(--sn-ui-glass-pulse-enabled, 0.5) * var(--sn-variant-energetic-scale, 1.5)) * var(--sn-unified-saturation-boost))) brightness(calc(1 + calc(var(--sn-ui-glass-pulse-enabled, 0.5) * var(--sn-variant-energetic-scale, 1.5)) * var(--sn-unified-brightness-delta)));
  -webkit-backdrop-filter: blur(calc(calc(var(--sn-ui-glass-pulse-enabled, 0.5) * var(--sn-variant-energetic-scale, 1.5)) * var(--sn-unified-blur-amount))) saturate(calc(1 + calc(var(--sn-ui-glass-pulse-enabled, 0.5) * var(--sn-variant-energetic-scale, 1.5)) * var(--sn-unified-saturation-boost))) brightness(calc(1 + calc(var(--sn-ui-glass-pulse-enabled, 0.5) * var(--sn-variant-energetic-scale, 1.5)) * var(--sn-unified-brightness-delta)));
  /* Phase 4C: explicit mauve for structural glass base */
  background: rgba(var(--oklab-mauve-rgb, var(--spice-rgb-surface0)), calc(0.08 * calc(var(--sn-ui-glass-pulse-enabled, 0.5) * var(--sn-variant-energetic-scale, 1.5))));
  /* Phase 4C: explicit blue for interactive accent border */
  border: 1px solid rgba(var(--oklab-blue-rgb, var(--spice-rgb-accent)), calc(0.2 * calc(var(--sn-ui-glass-pulse-enabled, 0.5) * var(--sn-variant-energetic-scale, 1.5))));
  transition: backdrop-filter 400ms ease-out, background 400ms ease-out, border-color 400ms ease-out;
  will-change: transform, opacity, filter;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
  contain: style paint;
  --breath-scale-min: 1;
  --breath-scale-max: calc(1 + calc(var(--sn-ui-glass-pulse-enabled, 0.5) * var(--sn-variant-energetic-scale, 1.5)) * var(--sn-unified-scale-delta));
  --breath-opacity-min: calc(var(--sn-unified-opacity-base) - calc(var(--sn-ui-glass-pulse-enabled, 0.5) * var(--sn-variant-energetic-scale, 1.5)) * 0.05);
  --breath-opacity-max: calc(var(--sn-unified-opacity-base) + calc(var(--sn-ui-glass-pulse-enabled, 0.5) * var(--sn-variant-energetic-scale, 1.5)) * var(--sn-unified-opacity-range));
  --breath-filter-min: brightness(1);
  --breath-filter-max: brightness(calc(1 + calc(var(--sn-ui-glass-pulse-enabled, 0.5) * var(--sn-variant-energetic-scale, 1.5)) * var(--sn-unified-brightness-delta)));
  animation: unified-breathing-keyframes var(--sn-anim-breathing-cosmic, 12s) ease-in-out infinite;
  /* Phase 4C: explicit blue for interactive accent glow */
  box-shadow: 0 0 calc(var(--sn-ui-glass-pulse-enabled, 0.5) * var(--sn-unified-glow-radius)) rgba(var(--oklab-blue-rgb, var(--spice-rgb-accent)), calc(var(--sn-ui-glass-pulse-enabled, 0.5) * 0.3));
  backdrop-filter: blur(calc(var(--sn-ui-glass-pulse-enabled, 0.5) * var(--sn-bg-gradient-blur, 20px))) saturate(calc(1 + var(--sn-ui-glass-pulse-enabled, 0.5) * var(--sn-bg-gradient-saturation, 0.3))) hue-rotate(calc(var(--sn-music-rhythm-phase, 0deg) * 0.5));
  background: conic-gradient(from var(--sn-music-rhythm-phase), rgba(var(--oklab-mauve-rgb), calc(var(--sn-ui-glass-pulse-enabled, 0.5) * 0.12)) 0%, rgba(var(--oklab-blue-rgb), calc(var(--sn-ui-glass-pulse-enabled, 0.5) * 0.14)) 25%, rgba(var(--oklab-pink-rgb), calc(var(--sn-ui-glass-pulse-enabled, 0.5) * 0.13)) 50%, rgba(var(--oklab-lavender-rgb), calc(var(--sn-ui-glass-pulse-enabled, 0.5) * 0.15)) 75%, rgba(var(--oklab-mauve-rgb), calc(var(--sn-ui-glass-pulse-enabled, 0.5) * 0.11)) 100%);
  will-change: transform, opacity, filter;
  transform: translateZ(0);
  backface-visibility: hidden;
  contain: layout style paint;
  transform: scale(calc(1 + var(--sn-music-intensity-boost, 1) * 0.02)) rotate(calc(var(--sn-music-rhythm-phase, 0deg) * 0.8));
}
@supports not (backdrop-filter: blur(1px)) {
  .liquid-oil-slick {
    background: rgba(var(--spice-rgb-surface0), calc(0.2 * calc(var(--sn-ui-glass-pulse-enabled, 0.5) * var(--sn-variant-energetic-scale, 1.5))));
    border: 1px solid rgba(var(--spice-rgb-surface1), 0.3);
  }
}
@media (prefers-reduced-motion: reduce) {
  .liquid-oil-slick {
    animation: none !important;
    transform: scale(1) translateZ(0) !important;
    opacity: var(--sn-unified-opacity-base) !important;
  }
}
.device-tier-low .liquid-oil-slick {
  backdrop-filter: none;
  box-shadow: none;
}
.device-tier-medium .liquid-oil-slick {
  backdrop-filter: blur(calc(var(--sn-ui-glass-pulse-enabled, 0.5) * 10px));
}
.liquid-surface-tension {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  will-change: transform, opacity, filter;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
  contain: style paint;
  --breath-scale-min: 1;
  --breath-scale-max: calc(1 + calc(0.4 * var(--sn-variant-gentle-scale, 0.5)) * var(--sn-unified-scale-delta));
  --breath-opacity-min: calc(var(--sn-unified-opacity-base) - calc(0.4 * var(--sn-variant-gentle-scale, 0.5)) * 0.05);
  --breath-opacity-max: calc(var(--sn-unified-opacity-base) + calc(0.4 * var(--sn-variant-gentle-scale, 0.5)) * var(--sn-unified-opacity-range));
  --breath-filter-min: brightness(1);
  --breath-filter-max: brightness(calc(1 + calc(0.4 * var(--sn-variant-gentle-scale, 0.5)) * var(--sn-unified-brightness-delta)));
  animation: unified-breathing-keyframes 8s ease-in-out infinite;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, calc(0.4 * 0.1)) 0%, rgba(255, 255, 255, calc(0.4 * 0.07)) 25%, rgba(255, 255, 255, calc(0.4 * 0.04)) 50%, rgba(255, 255, 255, calc(0.4 * 0.02)) 75%, transparent 100%);
  mix-blend-mode: soft-light;
  will-change: transform, opacity, filter;
  transform: translateZ(0);
  backface-visibility: hidden;
  contain: layout style paint;
  transform: scale(calc(1 + var(--sn-unified-effect-intensity, 0.5) * 0.05)) rotate(calc(var(--sn-music-rhythm-phase, 0deg) * 2deg));
}
@media (prefers-reduced-motion: reduce) {
  .liquid-surface-tension {
    animation: none !important;
    transform: scale(1) translateZ(0) !important;
    opacity: var(--sn-unified-opacity-base) !important;
  }
}

.liquid-interference-pattern {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  will-change: transform, opacity, filter;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
  contain: style paint;
  --breath-scale-min: 1;
  --breath-scale-max: calc(1 + calc(0.3 * var(--sn-variant-gentle-scale, 0.5)) * var(--sn-unified-scale-delta));
  --breath-opacity-min: calc(var(--sn-unified-opacity-base) - calc(0.3 * var(--sn-variant-gentle-scale, 0.5)) * 0.05);
  --breath-opacity-max: calc(var(--sn-unified-opacity-base) + calc(0.3 * var(--sn-variant-gentle-scale, 0.5)) * var(--sn-unified-opacity-range));
  --breath-filter-min: brightness(1);
  --breath-filter-max: brightness(calc(1 + calc(0.3 * var(--sn-variant-gentle-scale, 0.5)) * var(--sn-unified-brightness-delta)));
  animation: unified-breathing-keyframes 10s ease-in-out infinite;
  background: repeating-linear-gradient(calc(var(--sn-music-rhythm-phase, 0deg) * 0.9), transparent 0%, rgba(255, 255, 255, calc(0.3 * 0.05)) 1%, rgba(255, 255, 255, calc(0.3 * 0.025)) 2%, transparent 3%), repeating-linear-gradient(calc(var(--sn-music-rhythm-phase, 0deg) * 0.9 + 45deg), transparent 0%, rgba(255, 255, 255, calc(0.3 * 0.035)) 1.5%, rgba(255, 255, 255, calc(0.3 * 0.015)) 3%, transparent 4.5%);
  mix-blend-mode: overlay;
  will-change: background-position, opacity;
  contain: layout style paint;
  opacity: var(--sn-unified-effect-intensity, 0.7);
}
@media (prefers-reduced-motion: reduce) {
  .liquid-interference-pattern {
    animation: none !important;
    transform: scale(1) translateZ(0) !important;
    opacity: var(--sn-unified-opacity-base) !important;
  }
}

.liquid-chromatic-aberration {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  will-change: transform, opacity, filter;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
  contain: style paint;
  --breath-scale-min: 1;
  --breath-scale-max: calc(1 + calc(0.3 * var(--sn-variant-gentle-scale, 0.5)) * var(--sn-unified-scale-delta));
  --breath-opacity-min: calc(var(--sn-unified-opacity-base) - calc(0.3 * var(--sn-variant-gentle-scale, 0.5)) * 0.05);
  --breath-opacity-max: calc(var(--sn-unified-opacity-base) + calc(0.3 * var(--sn-variant-gentle-scale, 0.5)) * var(--sn-unified-opacity-range));
  --breath-filter-min: brightness(1);
  --breath-filter-max: brightness(calc(1 + calc(0.3 * var(--sn-variant-gentle-scale, 0.5)) * var(--sn-unified-brightness-delta)));
  animation: unified-breathing-keyframes 6s ease-in-out infinite;
  will-change: transform, opacity, filter;
  transform: translateZ(0);
  backface-visibility: hidden;
  contain: layout style paint;
  background: linear-gradient(90deg, rgba(255, 0, 0, calc(var(--sn-ui-glass-pulse-enabled, 0.5) * 0.08)) 0%, rgba(255, 0, 0, calc(var(--sn-ui-glass-pulse-enabled, 0.5) * 0.056)) 10%, transparent 20%, transparent 80%, rgba(0, 0, 255, calc(var(--sn-ui-glass-pulse-enabled, 0.5) * 0.056)) 90%, rgba(0, 0, 255, calc(var(--sn-ui-glass-pulse-enabled, 0.5) * 0.08)) 100%);
  mix-blend-mode: multiply;
  transform: translateX(calc(var(--sn-unified-music-energy, 0) * 1px)) translateY(calc(var(--sn-unified-music-energy, 0) * 0.5px));
}
@media (prefers-reduced-motion: reduce) {
  .liquid-chromatic-aberration {
    animation: none !important;
    transform: scale(1) translateZ(0) !important;
    opacity: var(--sn-unified-opacity-base) !important;
  }
}

.Root[style*="--sn-music-beat-pulse-intensity"] .liquid-oil-slick,
.Root[style*="--sn-music-beat-pulse-intensity"] .liquid-surface-tension,
.Root[style*="--sn-music-beat-pulse-intensity"] .liquid-interference-pattern,
.Root[style*="--sn-music-beat-pulse-intensity"] .liquid-chromatic-aberration {
  --sn-unified-music-energy: var(--sn-music-beat-pulse-intensity, 0.5);
  --sn-ui-glass-pulse-enabled: calc(0.5 + var(--sn-music-beat-pulse-intensity, 0) * 0.4);
}

@media (max-width: 768px) {
  :root {
    --sn-ui-glass-pulse-enabled: 0.3;
    --sn-bg-gradient-blur: 10px;
  }
  .liquid-interference-pattern {
    display: none;
  }
  .liquid-chromatic-aberration {
    opacity: 0.5;
  }
}
@media (prefers-contrast: high) {
  .fluid-gradients-layer {
    opacity: calc(var(--sn-bg-gradient-opacity, 0.3) * 0.5);
  }
  .liquid-oil-slick,
  .liquid-surface-tension,
  .liquid-interference-pattern,
  .liquid-chromatic-aberration {
    opacity: 0.7;
  }
}
.fluid-gradients-minimal .fluid-gradients-layer {
  opacity: calc(var(--sn-bg-gradient-opacity, 0.3) * 0.4);
}
.fluid-gradients-minimal .liquid-interference-pattern {
  display: none;
}
.fluid-gradients-minimal .liquid-chromatic-aberration {
  opacity: 0.3;
}

.fluid-gradients-intense .fluid-gradients-layer {
  opacity: calc(var(--sn-bg-gradient-opacity, 0.3) * 1.5);
}
.fluid-gradients-intense .liquid-oil-slick {
  --sn-unified-effect-intensity: 0.8;
}

.fluid-gradients-disabled .fluid-gradients-layer {
  display: none !important;
}

/* Living Gradient Base System - Phase 2.2 Base Transformation */
/* Transform static Catppuccin #1e1e2e into dynamic visual effects foundation */
/* ============================================================================ */
/* LIVING BASE VISUAL EFFECTS VARIABLES - CONSOLIDATED */
/* All variables now reference the unified design tokens from tokens.scss */
/* ============================================================================ */
:root {
  /* === Core Living Base Variables === */
  --living-base-gradient: linear-gradient(var(--spice-base), var(--spice-base)); /* Default fallback */
  /* === Animation Variables - Use Design System Values === */
  /* Reference unified breathing duration from design tokens */
  --visual-effects-breathing-duration: var(--sn-anim-breathing-effects); /* Music-responsive animation cycle */
  /* === Layer Control === */
  --visual-effects-layer-opacity: var(--sn-ui-glass-opacity, 0.1); /* Layer opacity from design system */
}

/* ============================================================================ */
/* LIVING BASE BACKGROUND TRANSFORMATION */
/* ============================================================================ */
/* Transform the base application background into living visual effects */
body,
.Root__main-view,
.main-rootContainer-rootContainer {
  position: relative;
  /* Apply living base gradient as foundation */
  background: var(--living-base-gradient);
  /* Ensure smooth transitions */
  transition: background 800ms var(--sn-anim-easing-organic);
}

/* Enhanced living visual effects layer for main application */
.Root__main-view {
  /* Living visual effects foundation layer */
}
.Root__main-view::before {
  /* Living visual effects background using design system tokens */
  background: var(--living-base-gradient), radial-gradient(ellipse at calc(50% + var(--sn-music-rhythm-phase, 0deg) * 8% + var(--sn-bg-gradient-flow-x, 0%)) calc(50% + var(--sn-music-rhythm-phase, 0deg) * 6% + var(--sn-bg-gradient-flow-y, 0%)), rgba(var(--ui-light-source-rgb), calc(var(--sn-bg-gradient-opacity, 0.8) * var(--sn-musical-oklab-intensity, 0.5))) 0%, rgba(var(--ui-structural-lit-rgb), calc(var(--sn-bg-gradient-opacity, 0.8) * 0.6 * var(--sn-musical-oklab-intensity, 0.5))) 40%, rgba(var(--ui-emphasis-reflected-rgb), calc(var(--sn-bg-gradient-opacity, 0.8) * 0.3 * var(--sn-musical-oklab-intensity, 0.5))) 70%, rgba(var(--ui-depth-moderate-rgb), 0.02) 85%, var(--spice-base) 100%);
  /* Breathing animation scale using design system */
  transform: translateZ(0) scale(var(--sn-bg-gradient-flow-scale, 1));
  /* Enhanced opacity with musical responsiveness using design system */
  opacity: calc(var(--sn-bg-gradient-opacity, 0.8) * (0.8 + var(--sn-music-breathing-scale, 1) * 0.2) * (0.8 + var(--sn-music-energy-level, 0.5) * 0.4));
  /* Color enhancement filters using design system */
  filter: saturate(var(--sn-bg-gradient-saturation, 1.1)) brightness(var(--sn-bg-gradient-brightness, 1)) hue-rotate(calc(var(--sn-music-rhythm-phase, 0deg) * 0.01)) contrast(var(--sn-bg-gradient-contrast, 1));
  /* Progressive loading state management */
  /* Hide gradient during loading, fade in once systems ready */
  /* Smooth fade-in transition once loading complete */
}
html[data-theme-loading] .Root__main-view::before {
  opacity: 0 !important;
  pointer-events: none;
}
html:not([data-theme-loading]) .Root__main-view::before {
  transition: opacity 600ms ease-out;
}

.Root__main-view[data-visualeffects-enhanced=true] {
  background: transparent;
}

.Root__main-view[data-visualeffects-enhanced=true]::before {
  content: none;
}

/* ============================================================================ */
/* OKLAB-ENHANCED VISUAL EFFECTS ANIMATIONS */
/* ============================================================================ */
/* OKLAB perceptually uniform color transitions for visual effects */
.living-gradient-oklab-animated {
  /* Apply OKLAB color transition mixins */
  transition: background var(--visual-effects-breathing-duration, 4000ms) ease-in-out;
  animation: visual-effects-color-flow var(--visual-effects-breathing-duration, 4000ms) ease-in-out infinite;
  /* Enhanced OKLAB animations with perceptual uniformity */
  animation: visual-effects-oklab-breathing var(--visual-effects-breathing-duration, 4000ms) ease-in-out infinite, visual-effects-oklab-color-flow calc(var(--visual-effects-breathing-duration, 4000ms) * 2) ease-in-out infinite;
}

/* Perceptual blending variants for living gradients */
.living-gradient-perceptual-blend {
  /* Apply perceptual gradient blending */
  background-blend-mode: screen;
  opacity: 0.8;
  /* Enhanced visual effects variant */
  /* Musical responsiveness with perceptual uniformity */
}
.living-gradient-perceptual-blend.visual-effects-enhanced {
  background-blend-mode: multiply;
  mix-blend-mode: screen;
  opacity: calc(var(--visual-effects-musical-intensity, 0.8) * 0.8);
}
.living-gradient-perceptual-blend.musical-responsive {
  background: linear-gradient(135deg, rgba(var(--sn-oklab-primary-rgb), 0.8) 0%, rgba(var(--sn-oklab-accent-rgb), 0.6) 100%);
  animation: visual-effects-oklab-breathing var(--visual-effects-breathing-duration, 4000ms) ease-in-out infinite, oklab-perceptual-gradient-flow calc(var(--visual-effects-breathing-duration, 4000ms) * 3) ease-in-out infinite;
}

/* Consolidated color flow animation using design system */
@keyframes visual-effects-color-flow {
  0%, 100% {
    filter: saturate(var(--sn-bg-gradient-saturation, 1.1)) brightness(var(--sn-bg-gradient-brightness, 1)) hue-rotate(0deg) contrast(var(--sn-bg-gradient-contrast, 1));
  }
  50% {
    filter: saturate(calc(var(--sn-bg-gradient-saturation, 1.1) * 1.2)) brightness(calc(var(--sn-bg-gradient-brightness, 1) * 1.05)) hue-rotate(calc(var(--sn-music-rhythm-phase, 0deg) * 0.02)) contrast(calc(var(--sn-bg-gradient-contrast, 1) * 1.05));
  }
}
/* Unified breathing animation using design system - NO SCALING */
@keyframes visual-effects-breathing {
  0%, 100% {
    transform: translateZ(0);
    opacity: calc(var(--visual-effects-layer-opacity) * 0.9);
  }
  50% {
    transform: translateZ(0);
    opacity: calc(var(--visual-effects-layer-opacity) * 1.1);
  }
}
/* ============================================================================ */
/* UNIFIED FLOW ANIMATION - Using Design System Variables */
/* ============================================================================ */
@keyframes visual-effects-flow-animation {
  0%, 100% {
    background-position: 0% 0%;
  }
  50% {
    background-position: calc(50% + var(--sn-bg-gradient-flow-x, 0%)) calc(50% + var(--sn-bg-gradient-flow-y, 0%));
  }
}
/* ============================================================================ */
/* UNIFIED BREATHING SYSTEM - Using Central Mixin System */
/* ============================================================================ */
/* Apply breathing animation to living visual effects */
@media (prefers-reduced-motion: no-preference) {
  .Root__main-view::before {
    will-change: transform, opacity, filter;
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
    contain: style paint;
    animation-duration: var(--visual-effects-breathing-duration, 4000ms);
    animation-timing-function: var(--sn-anim-easing-organic, ease-in-out);
    animation-iteration-count: infinite;
    animation-fill-mode: both;
    animation-name: breathing-gentle;
    animation-name: breathing-gentle, visual-effects-flow-animation;
    animation-duration: var(--visual-effects-breathing-duration), calc(var(--visual-effects-breathing-duration) * 2);
    animation-timing-function: ease-in-out, linear;
  }
}
@media (prefers-reduced-motion: no-preference) and (prefers-reduced-motion: reduce) {
  .Root__main-view::before {
    animation: none !important;
    transform: translateZ(0) scale(1) !important;
    opacity: var(--sn-ui-glass-opacity, 1) !important;
    filter: none !important;
  }
}
@media (prefers-reduced-motion: no-preference) {
  @keyframes breathing-gentle {
    0%, 100% {
      transform: translateZ(0);
      opacity: calc(var(--sn-ui-glass-opacity, 0.1) * 0.95 * 1);
      filter: brightness(var(--sn-bg-gradient-brightness, 1)) saturate(var(--sn-bg-gradient-saturation, 1.1)) contrast(var(--sn-bg-gradient-contrast, 1));
    }
    50% {
      transform: translateZ(0);
      opacity: calc(var(--sn-ui-glass-opacity, 0.1) * 1.05 * 1);
      filter: brightness(calc(var(--sn-bg-gradient-brightness, 1) * (1 + 0.03 * 1))) saturate(calc(var(--sn-bg-gradient-saturation, 1.1) * (1 + 0.08 * 1))) contrast(calc(var(--sn-bg-gradient-contrast, 1) * (1 + 0.02 * 1)));
    }
  }
}

/* ============================================================================ */
/* UNIFIED BREATHING CLASSES - Using Central Mixin System */
/* ============================================================================ */
.visual-effects-gentle-breathing {
  will-change: transform, opacity, filter;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
  contain: style paint;
  animation-duration: var(--visual-effects-breathing-duration, 4000ms);
  animation-timing-function: var(--sn-anim-easing-organic, ease-in-out);
  animation-iteration-count: infinite;
  animation-fill-mode: both;
  animation-name: breathing-gentle;
}
@media (prefers-reduced-motion: reduce) {
  .visual-effects-gentle-breathing {
    animation: none !important;
    transform: translateZ(0) scale(1) !important;
    opacity: var(--sn-ui-glass-opacity, 1) !important;
    filter: none !important;
  }
}
@keyframes breathing-gentle {
  0%, 100% {
    transform: translateZ(0);
    opacity: calc(var(--sn-ui-glass-opacity, 0.1) * 0.95 * 1);
    filter: brightness(var(--sn-bg-gradient-brightness, 1)) saturate(var(--sn-bg-gradient-saturation, 1.1)) contrast(var(--sn-bg-gradient-contrast, 1));
  }
  50% {
    transform: translateZ(0);
    opacity: calc(var(--sn-ui-glass-opacity, 0.1) * 1.05 * 1);
    filter: brightness(calc(var(--sn-bg-gradient-brightness, 1) * (1 + 0.03 * 1))) saturate(calc(var(--sn-bg-gradient-saturation, 1.1) * (1 + 0.08 * 1))) contrast(calc(var(--sn-bg-gradient-contrast, 1) * (1 + 0.02 * 1)));
  }
}

.visual-effects-energetic-breathing {
  will-change: transform, opacity, filter;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
  contain: style paint;
  animation-duration: var(--visual-effects-breathing-duration, 4000ms);
  animation-timing-function: var(--sn-anim-easing-organic, ease-in-out);
  animation-iteration-count: infinite;
  animation-fill-mode: both;
  animation-name: breathing-energetic;
  animation-duration: calc(var(--visual-effects-breathing-duration, 4000ms) * 0.6);
}
@media (prefers-reduced-motion: reduce) {
  .visual-effects-energetic-breathing {
    animation: none !important;
    transform: translateZ(0) scale(1) !important;
    opacity: var(--sn-ui-glass-opacity, 1) !important;
    filter: none !important;
  }
}
@keyframes breathing-energetic {
  0%, 100% {
    transform: translateZ(0);
    opacity: calc(var(--sn-ui-glass-opacity, 0.1) * 0.9 * 1);
    filter: brightness(var(--sn-bg-gradient-brightness, 1)) saturate(var(--sn-bg-gradient-saturation, 1.1)) contrast(var(--sn-bg-gradient-contrast, 1));
  }
  50% {
    transform: translateZ(0);
    opacity: calc(var(--sn-ui-glass-opacity, 0.1) * 1.15 * 1);
    filter: brightness(calc(var(--sn-bg-gradient-brightness, 1) * (1 + 0.08 * 1))) saturate(calc(var(--sn-bg-gradient-saturation, 1.1) * (1 + 0.25 * 1))) contrast(calc(var(--sn-bg-gradient-contrast, 1) * (1 + 0.08 * 1)));
  }
}

.visual-effects-meditative-breathing {
  will-change: transform, opacity, filter;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
  contain: style paint;
  animation-duration: var(--visual-effects-breathing-duration, 4000ms);
  animation-timing-function: var(--sn-anim-easing-organic, ease-in-out);
  animation-iteration-count: infinite;
  animation-fill-mode: both;
  animation-name: breathing-meditative;
  animation-duration: calc(var(--visual-effects-breathing-duration, 4000ms) * 1.5);
}
@media (prefers-reduced-motion: reduce) {
  .visual-effects-meditative-breathing {
    animation: none !important;
    transform: translateZ(0) scale(1) !important;
    opacity: var(--sn-ui-glass-opacity, 1) !important;
    filter: none !important;
  }
}
@keyframes breathing-meditative {
  0%, 100% {
    transform: translateZ(0);
    opacity: calc(var(--sn-ui-glass-opacity, 0.1) * 0.85 * 1);
  }
  50% {
    transform: translateZ(0);
    opacity: calc(var(--sn-ui-glass-opacity, 0.1) * 0.95 * 1);
  }
}

.visual-effects-cosmic-breathing {
  will-change: transform, opacity, filter;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
  contain: style paint;
  animation-duration: var(--visual-effects-breathing-duration, 4000ms);
  animation-timing-function: var(--sn-anim-easing-organic, ease-in-out);
  animation-iteration-count: infinite;
  animation-fill-mode: both;
  animation-name: breathing-cosmic;
  animation-duration: calc(var(--visual-effects-breathing-duration, 4000ms) * 0.75);
}
@media (prefers-reduced-motion: reduce) {
  .visual-effects-cosmic-breathing {
    animation: none !important;
    transform: translateZ(0) scale(1) !important;
    opacity: var(--sn-ui-glass-opacity, 1) !important;
    filter: none !important;
  }
}
@keyframes breathing-cosmic {
  0%, 100% {
    transform: translateZ(0);
    opacity: calc(var(--sn-ui-glass-opacity, 0.1) * 0.88 * 1);
    filter: brightness(var(--sn-bg-gradient-brightness, 1)) saturate(var(--sn-bg-gradient-saturation, 1.1)) contrast(var(--sn-bg-gradient-contrast, 1));
  }
  50% {
    transform: translateZ(0);
    opacity: calc(var(--sn-ui-glass-opacity, 0.1) * 1.25 * 1);
    filter: brightness(calc(var(--sn-bg-gradient-brightness, 1) * (1 + 0.12 * 1))) saturate(calc(var(--sn-bg-gradient-saturation, 1.1) * (1 + 0.4 * 1))) contrast(calc(var(--sn-bg-gradient-contrast, 1) * (1 + 0.1 * 1))) hue-rotate(calc(var(--sn-music-rhythm-phase, 0deg) * 0.08 * 1));
  }
}

/* Performance mode and accessibility handled by unified mixin system */
/* ============================================================================ */
/* VISUAL INTENSITY RESPONSIVE STYLING */
/* ============================================================================ */
/* High visual effects intensity - enhanced living base */
html[style*="--visual-effects-intensity-global: 1"],
html[data-visual-effects-level=high] {
  --visual-effects-layer-opacity: 0.12;
  --visual-effects-breathing-intensity: 0.15;
}
html[style*="--visual-effects-intensity-global: 1"] .Root__main-view::before,
html[data-visual-effects-level=high] .Root__main-view::before {
  /* OKLAB-enhanced high visual effects intensity with perceptual uniformity */
  filter: saturate(calc(1.2 + var(--sn-oklab-default-chroma) * 0.4)) brightness(calc(1.1 * var(--sn-oklab-accent-luminance))) contrast(calc(1.1 + var(--sn-oklab-default-chroma) * 0.2)) hue-rotate(calc(var(--sn-music-energy-level) * var(--sn-oklab-default-hue) * 0.03deg));
}

/* Medium visual effects intensity - balanced living base */
html[style*="--visual-effects-intensity-global: 0.5"],
html[data-visual-effects-level=medium] {
  --visual-effects-layer-opacity: 0.08;
  --visual-effects-breathing-intensity: 0.10;
}

/* Low visual effects intensity - subtle living base */
html[style*="--visual-effects-intensity-global: 0"],
html[data-visual-effects-level=low] {
  --visual-effects-layer-opacity: 0.04;
  --visual-effects-breathing-intensity: 0.06;
}
html[style*="--visual-effects-intensity-global: 0"] .Root__main-view::before,
html[data-visual-effects-level=low] .Root__main-view::before {
  filter: saturate(1) brightness(1) contrast(1);
}

/* ============================================================================ */
/* MUSIC ENERGY RESPONSIVE ENHANCEMENTS */
/* ============================================================================ */
/* High energy music - vibrant living base */
html[style*="--sn-music-energy-level: 1"] {
  --visual-effects-breathing-duration: var(--sn-anim-breathing-energetic); /* Faster breathing */
}
html[style*="--sn-music-energy-level: 1"] .Root__main-view::before {
  animation-duration: 2000ms, 4000ms; /* Faster animations */
  /* OKLAB-enhanced high energy music with perceptual color processing */
  filter: saturate(calc(1 + var(--sn-music-energy-level) * var(--sn-oklab-default-chroma) * 0.5)) brightness(calc(1 + var(--sn-music-energy-level) * var(--sn-oklab-accent-luminance) * 0.3)) contrast(calc(1 + var(--sn-music-energy-level) * var(--sn-oklab-default-chroma) * 0.3)) hue-rotate(calc(var(--sn-music-energy-level) * var(--sn-oklab-default-hue) * 0.02deg));
}

/* Low energy music - calm living base */
html[style*="--sn-music-energy-level: 0"] {
  --visual-effects-breathing-duration: var(--sn-anim-breathing-cosmic); /* Slower breathing */
}
html[style*="--sn-music-energy-level: 0"] .Root__main-view::before {
  animation-duration: 6000ms, 12000ms; /* Slower animations */
}

/* ============================================================================ */
/* ACCESSIBILITY AND PERFORMANCE OPTIMIZATIONS */
/* ============================================================================ */
/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .Root__main-view::before {
    animation: none !important;
    transform: translateZ(0) scale(1) !important;
    transition: opacity 300ms ease !important;
  }
  :root {
    --visual-effects-breathing-phase: 0 !important;
    --visual-effects-flow-x: 0% !important;
    --visual-effects-flow-y: 0% !important;
    --visual-effects-flow-scale: 1 !important;
  }
}
/* Performance mode - simplified living base */
.sn-performance-mode .Root__main-view::before {
  animation: none !important;
  transform: translateZ(0) !important;
  filter: none !important;
  background: var(--living-base-gradient) !important;
}
.sn-performance-mode :root {
  --visual-effects-breathing-duration: calc(var(--sn-anim-breathing-cosmic) * 1.3) !important; /* Slower for performance */
}

/* Battery optimization - minimal living base */
:root[data-sn-mode=battery-optimized] {
  --visual-effects-layer-opacity: 0.02 !important;
  --visual-effects-breathing-intensity: 0.01 !important;
  --visual-effects-breathing-duration: calc(var(--sn-anim-breathing-cosmic) * 1.7) !important;
}
:root[data-sn-mode=battery-optimized] .Root__main-view::before {
  animation: none !important;
  filter: none !important;
  transform: translateZ(0) !important;
}

/* ============================================================================ */
/* UTILITY CLASSES FOR DYNAMIC CONTROL */
/* ============================================================================ */
/* Disable living base system */
.living-base-disabled .Root__main-view::before {
  background: radial-gradient(ellipse at 50% 50%, rgba(var(--spice-rgb-accent), 0.1) 0%, var(--spice-base) 100%) !important;
  animation: none !important;
  transform: translateZ(0) !important;
}

/* OKLAB-enhanced living base for dramatic moments */
.living-base-enhanced {
  --visual-effects-layer-opacity: 0.15 !important;
  --visual-effects-breathing-intensity: 0.20 !important;
  --visual-effects-breathing-duration: calc(var(--sn-anim-breathing-energetic) * 1.5) !important;
}
.living-base-enhanced .Root__main-view::before {
  /* OKLAB-enhanced dramatic visual effects with perceptual uniformity */
  filter: saturate(calc(1.3 + var(--sn-oklab-default-chroma) * 0.5)) brightness(calc(1.2 * var(--sn-oklab-accent-luminance))) contrast(calc(1.2 + var(--sn-oklab-default-chroma) * 0.3)) hue-rotate(calc(var(--sn-music-energy-level) * var(--sn-oklab-default-hue) * 0.04deg)) !important;
  /* Enhanced OKLAB-based background for dramatic effect */
  background: radial-gradient(ellipse at center, rgba(var(--sn-oklab-primary-rgb), calc(0.15 * var(--sn-oklab-accent-luminance))) 0%, rgba(var(--sn-oklab-accent-rgb), calc(0.12 * var(--sn-oklab-default-chroma))) 30%, rgba(var(--sn-oklab-highlight-rgb), calc(0.08 * var(--sn-oklab-accent-luminance))) 60%, rgba(var(--sn-oklab-shadow-rgb), 0.03) 85%, var(--spice-base) 100%) !important;
}

/* Minimal living base for content focus */
.living-base-minimal {
  --visual-effects-layer-opacity: 0.03 !important;
  --visual-effects-breathing-intensity: 0.02 !important;
}
.living-base-minimal .Root__main-view::before {
  filter: saturate(1) brightness(1) contrast(1) !important;
}

/* ============================================================================ */
/* DEBUG AND DEVELOPMENT UTILITIES */
/* ============================================================================ */
/* Development mode - show OKLAB-enhanced visual effects boundaries */
html[data-debug=true] .Root__main-view::before {
  outline: 1px dashed rgba(var(--sn-oklab-primary-rgb), calc(0.3 * var(--sn-oklab-default-chroma)));
}
html[data-debug=true] .Root__main-view::after {
  outline: 1px dashed rgba(var(--sn-oklab-accent-rgb), calc(0.2 * var(--sn-oklab-accent-luminance)));
}

/* OKLAB-enhanced visual effects visualization for debugging */
.visual-effects-debug .Root__main-view::before {
  background: var(--living-base-gradient), radial-gradient(circle at 50% 50%, rgba(var(--sn-oklab-primary-rgb), calc(0.15 * var(--sn-oklab-default-chroma))) 0%, rgba(var(--sn-oklab-accent-rgb), calc(0.1 * var(--sn-oklab-accent-luminance))) 25%, rgba(var(--sn-oklab-highlight-rgb), calc(0.05 * var(--sn-oklab-default-chroma))) 50%, transparent 75%);
  /* OKLAB-enhanced debug filter */
  filter: saturate(calc(1.5 + var(--sn-oklab-default-chroma))) brightness(calc(1.3 * var(--sn-oklab-accent-luminance))) hue-rotate(calc(var(--sn-oklab-default-hue) * 0.05deg));
}

/* ============================================================================ */
/* STREAMLINED LEGACY COMPATIBILITY - Phase 4 Optimization */
/* Uses centralized legacy system from core/_mixins.scss */
/* ============================================================================ */
/* Breathing animation utility classes */
/* NOTE: All breathing classes use opacity/filter effects only - no scale transforms */
/* This preserves Year 3000 music-reactive design without UI shaking */
.breathing-gentle {
  will-change: transform, opacity, filter;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
  contain: style paint;
  animation-duration: var(--visual-effects-breathing-duration, 4000ms);
  animation-timing-function: var(--sn-anim-easing-organic, ease-in-out);
  animation-iteration-count: infinite;
  animation-fill-mode: both;
  animation-name: breathing-gentle;
}
@media (prefers-reduced-motion: reduce) {
  .breathing-gentle {
    animation: none !important;
    transform: translateZ(0) scale(1) !important;
    opacity: var(--sn-ui-glass-opacity, 1) !important;
    filter: none !important;
  }
}
@keyframes breathing-gentle {
  0%, 100% {
    transform: translateZ(0);
    opacity: calc(var(--sn-ui-glass-opacity, 0.1) * 0.95 * 1);
    filter: brightness(var(--sn-bg-gradient-brightness, 1)) saturate(var(--sn-bg-gradient-saturation, 1.1)) contrast(var(--sn-bg-gradient-contrast, 1));
  }
  50% {
    transform: translateZ(0);
    opacity: calc(var(--sn-ui-glass-opacity, 0.1) * 1.05 * 1);
    filter: brightness(calc(var(--sn-bg-gradient-brightness, 1) * (1 + 0.03 * 1))) saturate(calc(var(--sn-bg-gradient-saturation, 1.1) * (1 + 0.08 * 1))) contrast(calc(var(--sn-bg-gradient-contrast, 1) * (1 + 0.02 * 1)));
  }
}

.breathing-energetic {
  will-change: transform, opacity, filter;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
  contain: style paint;
  animation-duration: var(--visual-effects-breathing-duration, 4000ms);
  animation-timing-function: var(--sn-anim-easing-organic, ease-in-out);
  animation-iteration-count: infinite;
  animation-fill-mode: both;
  animation-name: breathing-energetic;
  animation-duration: calc(var(--visual-effects-breathing-duration, 4000ms) * 0.6);
}
@media (prefers-reduced-motion: reduce) {
  .breathing-energetic {
    animation: none !important;
    transform: translateZ(0) scale(1) !important;
    opacity: var(--sn-ui-glass-opacity, 1) !important;
    filter: none !important;
  }
}
@keyframes breathing-energetic {
  0%, 100% {
    transform: translateZ(0);
    opacity: calc(var(--sn-ui-glass-opacity, 0.1) * 0.9 * 1);
    filter: brightness(var(--sn-bg-gradient-brightness, 1)) saturate(var(--sn-bg-gradient-saturation, 1.1)) contrast(var(--sn-bg-gradient-contrast, 1));
  }
  50% {
    transform: translateZ(0);
    opacity: calc(var(--sn-ui-glass-opacity, 0.1) * 1.15 * 1);
    filter: brightness(calc(var(--sn-bg-gradient-brightness, 1) * (1 + 0.08 * 1))) saturate(calc(var(--sn-bg-gradient-saturation, 1.1) * (1 + 0.25 * 1))) contrast(calc(var(--sn-bg-gradient-contrast, 1) * (1 + 0.08 * 1)));
  }
}

.breathing-meditative {
  will-change: transform, opacity, filter;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
  contain: style paint;
  animation-duration: var(--visual-effects-breathing-duration, 4000ms);
  animation-timing-function: var(--sn-anim-easing-organic, ease-in-out);
  animation-iteration-count: infinite;
  animation-fill-mode: both;
  animation-name: breathing-meditative;
  animation-duration: calc(var(--visual-effects-breathing-duration, 4000ms) * 1.5);
}
@media (prefers-reduced-motion: reduce) {
  .breathing-meditative {
    animation: none !important;
    transform: translateZ(0) scale(1) !important;
    opacity: var(--sn-ui-glass-opacity, 1) !important;
    filter: none !important;
  }
}
@keyframes breathing-meditative {
  0%, 100% {
    transform: translateZ(0);
    opacity: calc(var(--sn-ui-glass-opacity, 0.1) * 0.85 * 1);
  }
  50% {
    transform: translateZ(0);
    opacity: calc(var(--sn-ui-glass-opacity, 0.1) * 0.95 * 1);
  }
}

.breathing-cosmic {
  will-change: transform, opacity, filter;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
  contain: style paint;
  animation-duration: var(--visual-effects-breathing-duration, 4000ms);
  animation-timing-function: var(--sn-anim-easing-organic, ease-in-out);
  animation-iteration-count: infinite;
  animation-fill-mode: both;
  animation-name: breathing-cosmic;
  animation-duration: calc(var(--visual-effects-breathing-duration, 4000ms) * 0.75);
}
@media (prefers-reduced-motion: reduce) {
  .breathing-cosmic {
    animation: none !important;
    transform: translateZ(0) scale(1) !important;
    opacity: var(--sn-ui-glass-opacity, 1) !important;
    filter: none !important;
  }
}
@keyframes breathing-cosmic {
  0%, 100% {
    transform: translateZ(0);
    opacity: calc(var(--sn-ui-glass-opacity, 0.1) * 0.88 * 1);
    filter: brightness(var(--sn-bg-gradient-brightness, 1)) saturate(var(--sn-bg-gradient-saturation, 1.1)) contrast(var(--sn-bg-gradient-contrast, 1));
  }
  50% {
    transform: translateZ(0);
    opacity: calc(var(--sn-ui-glass-opacity, 0.1) * 1.25 * 1);
    filter: brightness(calc(var(--sn-bg-gradient-brightness, 1) * (1 + 0.12 * 1))) saturate(calc(var(--sn-bg-gradient-saturation, 1.1) * (1 + 0.4 * 1))) contrast(calc(var(--sn-bg-gradient-contrast, 1) * (1 + 0.1 * 1))) hue-rotate(calc(var(--sn-music-rhythm-phase, 0deg) * 0.08 * 1));
  }
}

.breathing-base {
  will-change: transform, opacity, filter;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
  contain: style paint;
  animation-duration: var(--visual-effects-breathing-duration, 4000ms);
  animation-timing-function: var(--sn-anim-easing-organic, ease-in-out);
  animation-iteration-count: infinite;
  animation-fill-mode: both;
  animation-name: breathing-gentle;
}
@media (prefers-reduced-motion: reduce) {
  .breathing-base {
    animation: none !important;
    transform: translateZ(0) scale(1) !important;
    opacity: var(--sn-ui-glass-opacity, 1) !important;
    filter: none !important;
  }
}
@keyframes breathing-gentle {
  0%, 100% {
    transform: translateZ(0);
    opacity: calc(var(--sn-ui-glass-opacity, 0.1) * 0.95 * 1);
    filter: brightness(var(--sn-bg-gradient-brightness, 1)) saturate(var(--sn-bg-gradient-saturation, 1.1)) contrast(var(--sn-bg-gradient-contrast, 1));
  }
  50% {
    transform: translateZ(0);
    opacity: calc(var(--sn-ui-glass-opacity, 0.1) * 1.05 * 1);
    filter: brightness(calc(var(--sn-bg-gradient-brightness, 1) * (1 + 0.03 * 1))) saturate(calc(var(--sn-bg-gradient-saturation, 1.1) * (1 + 0.08 * 1))) contrast(calc(var(--sn-bg-gradient-contrast, 1) * (1 + 0.02 * 1)));
  }
}

/* Legacy flow animation bridge */
.legacy-visual-effects-flow {
  animation: visual-effects-flow-animation calc(var(--visual-effects-breathing-duration) * 2) linear infinite;
}

.main-card-card,
.main-card-cardContainer {
  will-change: transform, opacity, filter;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
  contain: style paint;
  backdrop-filter: blur(calc(calc(var(--sn-ui-glass-pulse-enabled, 0.6) * var(--sn-variant-crystalline-scale, 1.2)) * var(--sn-unified-blur-amount))) saturate(calc(1 + calc(var(--sn-ui-glass-pulse-enabled, 0.6) * var(--sn-variant-crystalline-scale, 1.2)) * var(--sn-unified-saturation-boost))) brightness(calc(1 + calc(var(--sn-ui-glass-pulse-enabled, 0.6) * var(--sn-variant-crystalline-scale, 1.2)) * var(--sn-unified-brightness-delta)));
  -webkit-backdrop-filter: blur(calc(calc(var(--sn-ui-glass-pulse-enabled, 0.6) * var(--sn-variant-crystalline-scale, 1.2)) * var(--sn-unified-blur-amount))) saturate(calc(1 + calc(var(--sn-ui-glass-pulse-enabled, 0.6) * var(--sn-variant-crystalline-scale, 1.2)) * var(--sn-unified-saturation-boost))) brightness(calc(1 + calc(var(--sn-ui-glass-pulse-enabled, 0.6) * var(--sn-variant-crystalline-scale, 1.2)) * var(--sn-unified-brightness-delta)));
  /* Phase 4C: explicit mauve for structural glass base */
  background: rgba(var(--oklab-mauve-rgb, var(--spice-rgb-surface0)), calc(0.08 * calc(var(--sn-ui-glass-pulse-enabled, 0.6) * var(--sn-variant-crystalline-scale, 1.2))));
  /* Phase 4C: explicit blue for interactive accent border */
  border: 1px solid rgba(var(--oklab-blue-rgb, var(--spice-rgb-accent)), calc(0.2 * calc(var(--sn-ui-glass-pulse-enabled, 0.6) * var(--sn-variant-crystalline-scale, 1.2))));
  transition: backdrop-filter 400ms ease-out, background 400ms ease-out, border-color 400ms ease-out;
  will-change: transform, opacity, filter;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
  contain: style paint;
  --breath-scale-min: 1;
  --breath-scale-max: calc(1 + calc(var(--sn-ui-glass-pulse-enabled, 0.6) * var(--sn-variant-crystalline-scale, 1.2)) * var(--sn-unified-scale-delta));
  --breath-opacity-min: calc(var(--sn-unified-opacity-base) - calc(var(--sn-ui-glass-pulse-enabled, 0.6) * var(--sn-variant-crystalline-scale, 1.2)) * 0.05);
  --breath-opacity-max: calc(var(--sn-unified-opacity-base) + calc(var(--sn-ui-glass-pulse-enabled, 0.6) * var(--sn-variant-crystalline-scale, 1.2)) * var(--sn-unified-opacity-range));
  --breath-filter-min: brightness(1);
  --breath-filter-max: brightness(calc(1 + calc(var(--sn-ui-glass-pulse-enabled, 0.6) * var(--sn-variant-crystalline-scale, 1.2)) * var(--sn-unified-brightness-delta)));
  animation: unified-breathing-keyframes var(--sn-anim-breathing-cosmic, 4s) ease-in-out infinite;
  /* Phase 4C: explicit blue for interactive accent glow */
  box-shadow: 0 0 calc(var(--sn-ui-glass-pulse-enabled, 0.6) * var(--sn-unified-glow-radius)) rgba(var(--oklab-blue-rgb, var(--spice-rgb-accent)), calc(var(--sn-ui-glass-pulse-enabled, 0.6) * 0.3));
  border-radius: 12px;
  overflow: visible;
  box-shadow: 0 calc(var(--sn-ui-glass-float-distance, 15px) * 0.5) 40px rgba(var(--ui-accent-base-rgb, var(--spice-rgb-accent)), calc(var(--sn-ui-glass-pulse-enabled, 0.6) * var(--sn-music-intensity-boost, 1) * 0.15));
  transition: transform 0.4s var(--sn-anim-easing-organic), box-shadow 0.4s ease-out;
}
@supports not (backdrop-filter: blur(1px)) {
  .main-card-card,
  .main-card-cardContainer {
    background: rgba(var(--spice-rgb-surface0), calc(0.2 * calc(var(--sn-ui-glass-pulse-enabled, 0.6) * var(--sn-variant-crystalline-scale, 1.2))));
    border: 1px solid rgba(var(--spice-rgb-surface1), 0.3);
  }
}
@media (prefers-reduced-motion: reduce) {
  .main-card-card,
  .main-card-cardContainer {
    animation: none !important;
    transform: scale(1) translateZ(0) !important;
    opacity: var(--sn-unified-opacity-base) !important;
  }
}
.device-tier-low .main-card-card,
.device-tier-low .main-card-cardContainer {
  backdrop-filter: none;
  box-shadow: none;
}
.device-tier-medium .main-card-card,
.device-tier-medium .main-card-cardContainer {
  backdrop-filter: blur(calc(var(--sn-ui-glass-pulse-enabled, 0.6) * 10px));
}
.main-card-card:hover,
.main-card-cardContainer:hover {
  --sn-unified-effect-intensity: 0.8;
  transform: translateY(calc(-1 * var(--sn-ui-glass-float-distance, 15px) * 0.3));
}
.main-card-card:nth-child(2n),
.main-card-cardContainer:nth-child(2n) {
  animation-delay: calc(var(--sn-anim-breathing-cosmic, 4s) * -0.3);
}
.main-card-card:nth-child(3n),
.main-card-cardContainer:nth-child(3n) {
  animation-delay: calc(var(--sn-anim-breathing-cosmic, 4s) * -0.6);
}
.main-card-card[data-testid*=artist],
.main-card-cardContainer[data-testid*=artist] {
  border-radius: 50%;
}
.main-card-card[data-testid*=artist]::before, .main-card-card[data-testid*=artist]::after,
.main-card-cardContainer[data-testid*=artist]::before,
.main-card-cardContainer[data-testid*=artist]::after {
  border-radius: 50%;
}

div.main-trackList-trackListRow[role=row] {
  will-change: transform, opacity, filter;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
  contain: style paint;
  backdrop-filter: blur(calc(calc(0.4 * var(--sn-variant-crystalline-scale, 1.2)) * var(--sn-unified-blur-amount))) saturate(calc(1 + calc(0.4 * var(--sn-variant-crystalline-scale, 1.2)) * var(--sn-unified-saturation-boost))) brightness(calc(1 + calc(0.4 * var(--sn-variant-crystalline-scale, 1.2)) * var(--sn-unified-brightness-delta)));
  -webkit-backdrop-filter: blur(calc(calc(0.4 * var(--sn-variant-crystalline-scale, 1.2)) * var(--sn-unified-blur-amount))) saturate(calc(1 + calc(0.4 * var(--sn-variant-crystalline-scale, 1.2)) * var(--sn-unified-saturation-boost))) brightness(calc(1 + calc(0.4 * var(--sn-variant-crystalline-scale, 1.2)) * var(--sn-unified-brightness-delta)));
  /* Phase 4C: explicit mauve for structural glass base */
  background: rgba(var(--oklab-mauve-rgb, var(--spice-rgb-surface0)), calc(0.08 * calc(0.4 * var(--sn-variant-crystalline-scale, 1.2))));
  /* Phase 4C: explicit blue for interactive accent border */
  border: 1px solid rgba(var(--oklab-blue-rgb, var(--spice-rgb-accent)), calc(0.2 * calc(0.4 * var(--sn-variant-crystalline-scale, 1.2))));
  transition: backdrop-filter 400ms ease-out, background 400ms ease-out, border-color 400ms ease-out;
  /* Phase 4C: explicit blue for interactive accent glow */
  box-shadow: 0 0 calc(0.4 * var(--sn-unified-glow-radius)) rgba(var(--oklab-blue-rgb, var(--spice-rgb-accent)), 0.12);
  border-radius: 8px;
  margin: 2px 0;
}
@supports not (backdrop-filter: blur(1px)) {
  div.main-trackList-trackListRow[role=row] {
    background: rgba(var(--spice-rgb-surface0), calc(0.2 * calc(0.4 * var(--sn-variant-crystalline-scale, 1.2))));
    border: 1px solid rgba(var(--spice-rgb-surface1), 0.3);
  }
}
.device-tier-low div.main-trackList-trackListRow[role=row] {
  backdrop-filter: none;
  box-shadow: none;
}
.device-tier-medium div.main-trackList-trackListRow[role=row] {
  backdrop-filter: blur(4px);
}
div.main-trackList-trackListRow[role=row]:hover {
  will-change: transform, opacity, filter;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
  contain: style paint;
  --breath-scale-min: 1;
  --breath-scale-max: calc(1 + calc(0.5 * var(--sn-variant-gentle-scale, 0.5)) * var(--sn-unified-scale-delta));
  --breath-opacity-min: calc(var(--sn-unified-opacity-base) - calc(0.5 * var(--sn-variant-gentle-scale, 0.5)) * 0.05);
  --breath-opacity-max: calc(var(--sn-unified-opacity-base) + calc(0.5 * var(--sn-variant-gentle-scale, 0.5)) * var(--sn-unified-opacity-range));
  --breath-filter-min: brightness(1);
  --breath-filter-max: brightness(calc(1 + calc(0.5 * var(--sn-variant-gentle-scale, 0.5)) * var(--sn-unified-brightness-delta)));
  animation: unified-breathing-keyframes 3s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  div.main-trackList-trackListRow[role=row]:hover {
    animation: none !important;
    transform: scale(1) translateZ(0) !important;
    opacity: var(--sn-unified-opacity-base) !important;
  }
}
div.main-trackList-trackListRow[role=row].main-trackList-selected, div.main-trackList-trackListRow[role=row]:has(.main-trackList-playingIcon) {
  will-change: transform, opacity, filter;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
  contain: style paint;
  backdrop-filter: blur(calc(calc(0.7 * var(--sn-variant-crystalline-scale, 1.2)) * var(--sn-unified-blur-amount))) saturate(calc(1 + calc(0.7 * var(--sn-variant-crystalline-scale, 1.2)) * var(--sn-unified-saturation-boost))) brightness(calc(1 + calc(0.7 * var(--sn-variant-crystalline-scale, 1.2)) * var(--sn-unified-brightness-delta)));
  -webkit-backdrop-filter: blur(calc(calc(0.7 * var(--sn-variant-crystalline-scale, 1.2)) * var(--sn-unified-blur-amount))) saturate(calc(1 + calc(0.7 * var(--sn-variant-crystalline-scale, 1.2)) * var(--sn-unified-saturation-boost))) brightness(calc(1 + calc(0.7 * var(--sn-variant-crystalline-scale, 1.2)) * var(--sn-unified-brightness-delta)));
  /* Phase 4C: explicit mauve for structural glass base */
  background: rgba(var(--oklab-mauve-rgb, var(--spice-rgb-surface0)), calc(0.08 * calc(0.7 * var(--sn-variant-crystalline-scale, 1.2))));
  /* Phase 4C: explicit blue for interactive accent border */
  border: 1px solid rgba(var(--oklab-blue-rgb, var(--spice-rgb-accent)), calc(0.2 * calc(0.7 * var(--sn-variant-crystalline-scale, 1.2))));
  transition: backdrop-filter 400ms ease-out, background 400ms ease-out, border-color 400ms ease-out;
  will-change: transform, opacity, filter;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
  contain: style paint;
  --breath-scale-min: 1;
  --breath-scale-max: calc(1 + calc(0.7 * var(--sn-variant-crystalline-scale, 1.2)) * var(--sn-unified-scale-delta));
  --breath-opacity-min: calc(var(--sn-unified-opacity-base) - calc(0.7 * var(--sn-variant-crystalline-scale, 1.2)) * 0.05);
  --breath-opacity-max: calc(var(--sn-unified-opacity-base) + calc(0.7 * var(--sn-variant-crystalline-scale, 1.2)) * var(--sn-unified-opacity-range));
  --breath-filter-min: brightness(1);
  --breath-filter-max: brightness(calc(1 + calc(0.7 * var(--sn-variant-crystalline-scale, 1.2)) * var(--sn-unified-brightness-delta)));
  animation: unified-breathing-keyframes 3s ease-in-out infinite;
  /* Phase 4C: explicit blue for interactive accent glow */
  box-shadow: 0 0 calc(0.7 * var(--sn-unified-glow-radius)) rgba(var(--oklab-blue-rgb, var(--spice-rgb-accent)), 0.21);
  border: 2px solid rgba(var(--ui-accent-lit-rgb, var(--spice-rgb-accent)), 0.4);
  --sn-music-intensity-boost: calc(1 + var(--sn-unified-music-energy, 0.5));
}
@supports not (backdrop-filter: blur(1px)) {
  div.main-trackList-trackListRow[role=row].main-trackList-selected, div.main-trackList-trackListRow[role=row]:has(.main-trackList-playingIcon) {
    background: rgba(var(--spice-rgb-surface0), calc(0.2 * calc(0.7 * var(--sn-variant-crystalline-scale, 1.2))));
    border: 1px solid rgba(var(--spice-rgb-surface1), 0.3);
  }
}
@media (prefers-reduced-motion: reduce) {
  div.main-trackList-trackListRow[role=row].main-trackList-selected, div.main-trackList-trackListRow[role=row]:has(.main-trackList-playingIcon) {
    animation: none !important;
    transform: scale(1) translateZ(0) !important;
    opacity: var(--sn-unified-opacity-base) !important;
  }
}
.device-tier-low div.main-trackList-trackListRow[role=row].main-trackList-selected, .device-tier-low div.main-trackList-trackListRow[role=row]:has(.main-trackList-playingIcon) {
  backdrop-filter: none;
  box-shadow: none;
}
.device-tier-medium div.main-trackList-trackListRow[role=row].main-trackList-selected, .device-tier-medium div.main-trackList-trackListRow[role=row]:has(.main-trackList-playingIcon) {
  backdrop-filter: blur(7px);
}
.main-yourLibrary-yourLibrary,
.main-navBar-navBar {
  will-change: transform, opacity, filter;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
  contain: style paint;
  backdrop-filter: blur(calc(calc(0.3 * var(--sn-variant-gentle-scale, 0.5)) * var(--sn-unified-blur-amount))) saturate(calc(1 + calc(0.3 * var(--sn-variant-gentle-scale, 0.5)) * var(--sn-unified-saturation-boost))) brightness(calc(1 + calc(0.3 * var(--sn-variant-gentle-scale, 0.5)) * var(--sn-unified-brightness-delta)));
  -webkit-backdrop-filter: blur(calc(calc(0.3 * var(--sn-variant-gentle-scale, 0.5)) * var(--sn-unified-blur-amount))) saturate(calc(1 + calc(0.3 * var(--sn-variant-gentle-scale, 0.5)) * var(--sn-unified-saturation-boost))) brightness(calc(1 + calc(0.3 * var(--sn-variant-gentle-scale, 0.5)) * var(--sn-unified-brightness-delta)));
  /* Phase 4C: explicit mauve for structural glass base */
  background: rgba(var(--oklab-mauve-rgb, var(--spice-rgb-surface0)), calc(0.08 * calc(0.3 * var(--sn-variant-gentle-scale, 0.5))));
  /* Phase 4C: explicit blue for interactive accent border */
  border: 1px solid rgba(var(--oklab-blue-rgb, var(--spice-rgb-accent)), calc(0.2 * calc(0.3 * var(--sn-variant-gentle-scale, 0.5))));
  transition: backdrop-filter 400ms ease-out, background 400ms ease-out, border-color 400ms ease-out;
  will-change: transform, opacity, filter;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
  contain: style paint;
  --breath-scale-min: 1;
  --breath-scale-max: calc(1 + calc(0.3 * var(--sn-variant-gentle-scale, 0.5)) * var(--sn-unified-scale-delta));
  --breath-opacity-min: calc(var(--sn-unified-opacity-base) - calc(0.3 * var(--sn-variant-gentle-scale, 0.5)) * 0.05);
  --breath-opacity-max: calc(var(--sn-unified-opacity-base) + calc(0.3 * var(--sn-variant-gentle-scale, 0.5)) * var(--sn-unified-opacity-range));
  --breath-filter-min: brightness(1);
  --breath-filter-max: brightness(calc(1 + calc(0.3 * var(--sn-variant-gentle-scale, 0.5)) * var(--sn-unified-brightness-delta)));
  animation: unified-breathing-keyframes 8s ease-in-out infinite;
  /* Phase 4C: explicit blue for interactive accent glow */
  box-shadow: 0 0 calc(0.3 * var(--sn-unified-glow-radius)) rgba(var(--oklab-blue-rgb, var(--spice-rgb-accent)), 0.09);
  border-radius: 0;
}
@supports not (backdrop-filter: blur(1px)) {
  .main-yourLibrary-yourLibrary,
  .main-navBar-navBar {
    background: rgba(var(--spice-rgb-surface0), calc(0.2 * calc(0.3 * var(--sn-variant-gentle-scale, 0.5))));
    border: 1px solid rgba(var(--spice-rgb-surface1), 0.3);
  }
}
@media (prefers-reduced-motion: reduce) {
  .main-yourLibrary-yourLibrary,
  .main-navBar-navBar {
    animation: none !important;
    transform: scale(1) translateZ(0) !important;
    opacity: var(--sn-unified-opacity-base) !important;
  }
}
.device-tier-low .main-yourLibrary-yourLibrary,
.device-tier-low .main-navBar-navBar {
  backdrop-filter: none;
  box-shadow: none;
}
.device-tier-medium .main-yourLibrary-yourLibrary,
.device-tier-medium .main-navBar-navBar {
  backdrop-filter: blur(3px);
}
.main-yourLibrary-yourLibrary nav[aria-label=Main] ul li a,
.main-navBar-navBar nav[aria-label=Main] ul li a {
  will-change: transform, opacity, filter;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
  contain: style paint;
  backdrop-filter: blur(calc(calc(0.2 * var(--sn-variant-gentle-scale, 0.5)) * var(--sn-unified-blur-amount))) saturate(calc(1 + calc(0.2 * var(--sn-variant-gentle-scale, 0.5)) * var(--sn-unified-saturation-boost))) brightness(calc(1 + calc(0.2 * var(--sn-variant-gentle-scale, 0.5)) * var(--sn-unified-brightness-delta)));
  -webkit-backdrop-filter: blur(calc(calc(0.2 * var(--sn-variant-gentle-scale, 0.5)) * var(--sn-unified-blur-amount))) saturate(calc(1 + calc(0.2 * var(--sn-variant-gentle-scale, 0.5)) * var(--sn-unified-saturation-boost))) brightness(calc(1 + calc(0.2 * var(--sn-variant-gentle-scale, 0.5)) * var(--sn-unified-brightness-delta)));
  /* Phase 4C: explicit mauve for structural glass base */
  background: rgba(var(--oklab-mauve-rgb, var(--spice-rgb-surface0)), calc(0.08 * calc(0.2 * var(--sn-variant-gentle-scale, 0.5))));
  /* Phase 4C: explicit blue for interactive accent border */
  border: 1px solid rgba(var(--oklab-blue-rgb, var(--spice-rgb-accent)), calc(0.2 * calc(0.2 * var(--sn-variant-gentle-scale, 0.5))));
  transition: backdrop-filter 400ms ease-out, background 400ms ease-out, border-color 400ms ease-out;
  /* Phase 4C: explicit blue for interactive accent glow */
  box-shadow: 0 0 calc(0.2 * var(--sn-unified-glow-radius)) rgba(var(--oklab-blue-rgb, var(--spice-rgb-accent)), 0.06);
  border-radius: 6px;
  margin: 1px 0;
}
@supports not (backdrop-filter: blur(1px)) {
  .main-yourLibrary-yourLibrary nav[aria-label=Main] ul li a,
  .main-navBar-navBar nav[aria-label=Main] ul li a {
    background: rgba(var(--spice-rgb-surface0), calc(0.2 * calc(0.2 * var(--sn-variant-gentle-scale, 0.5))));
    border: 1px solid rgba(var(--spice-rgb-surface1), 0.3);
  }
}
.device-tier-low .main-yourLibrary-yourLibrary nav[aria-label=Main] ul li a,
.device-tier-low .main-navBar-navBar nav[aria-label=Main] ul li a {
  backdrop-filter: none;
  box-shadow: none;
}
.device-tier-medium .main-yourLibrary-yourLibrary nav[aria-label=Main] ul li a,
.device-tier-medium .main-navBar-navBar nav[aria-label=Main] ul li a {
  backdrop-filter: blur(2px);
}
.main-yourLibrary-yourLibrary nav[aria-label=Main] ul li a:hover, .main-yourLibrary-yourLibrary nav[aria-label=Main] ul li a[aria-selected=true], .main-yourLibrary-yourLibrary nav[aria-label=Main] ul li a.main-rootlist-rootlistItemActive,
.main-navBar-navBar nav[aria-label=Main] ul li a:hover,
.main-navBar-navBar nav[aria-label=Main] ul li a[aria-selected=true],
.main-navBar-navBar nav[aria-label=Main] ul li a.main-rootlist-rootlistItemActive {
  --sn-unified-effect-intensity: 0.5;
}
.main-yourLibrary-yourLibrary .spicetify-playlist-list li,
.main-navBar-navBar .spicetify-playlist-list li {
  will-change: transform, opacity, filter;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
  contain: style paint;
  backdrop-filter: blur(calc(calc(0.2 * var(--sn-variant-gentle-scale, 0.5)) * var(--sn-unified-blur-amount))) saturate(calc(1 + calc(0.2 * var(--sn-variant-gentle-scale, 0.5)) * var(--sn-unified-saturation-boost))) brightness(calc(1 + calc(0.2 * var(--sn-variant-gentle-scale, 0.5)) * var(--sn-unified-brightness-delta)));
  -webkit-backdrop-filter: blur(calc(calc(0.2 * var(--sn-variant-gentle-scale, 0.5)) * var(--sn-unified-blur-amount))) saturate(calc(1 + calc(0.2 * var(--sn-variant-gentle-scale, 0.5)) * var(--sn-unified-saturation-boost))) brightness(calc(1 + calc(0.2 * var(--sn-variant-gentle-scale, 0.5)) * var(--sn-unified-brightness-delta)));
  /* Phase 4C: explicit mauve for structural glass base */
  background: rgba(var(--oklab-mauve-rgb, var(--spice-rgb-surface0)), calc(0.08 * calc(0.2 * var(--sn-variant-gentle-scale, 0.5))));
  /* Phase 4C: explicit blue for interactive accent border */
  border: 1px solid rgba(var(--oklab-blue-rgb, var(--spice-rgb-accent)), calc(0.2 * calc(0.2 * var(--sn-variant-gentle-scale, 0.5))));
  transition: backdrop-filter 400ms ease-out, background 400ms ease-out, border-color 400ms ease-out;
  /* Phase 4C: explicit blue for interactive accent glow */
  box-shadow: 0 0 calc(0.2 * var(--sn-unified-glow-radius)) rgba(var(--oklab-blue-rgb, var(--spice-rgb-accent)), 0.06);
  border-radius: 6px;
  margin: 1px 0;
}
@supports not (backdrop-filter: blur(1px)) {
  .main-yourLibrary-yourLibrary .spicetify-playlist-list li,
  .main-navBar-navBar .spicetify-playlist-list li {
    background: rgba(var(--spice-rgb-surface0), calc(0.2 * calc(0.2 * var(--sn-variant-gentle-scale, 0.5))));
    border: 1px solid rgba(var(--spice-rgb-surface1), 0.3);
  }
}
.device-tier-low .main-yourLibrary-yourLibrary .spicetify-playlist-list li,
.device-tier-low .main-navBar-navBar .spicetify-playlist-list li {
  backdrop-filter: none;
  box-shadow: none;
}
.device-tier-medium .main-yourLibrary-yourLibrary .spicetify-playlist-list li,
.device-tier-medium .main-navBar-navBar .spicetify-playlist-list li {
  backdrop-filter: blur(2px);
}
.main-yourLibrary-yourLibrary .spicetify-playlist-list li:hover, .main-yourLibrary-yourLibrary .spicetify-playlist-list li[aria-selected=true], .main-yourLibrary-yourLibrary .spicetify-playlist-list li.main-rootlist-rootlistItemActive,
.main-navBar-navBar .spicetify-playlist-list li:hover,
.main-navBar-navBar .spicetify-playlist-list li[aria-selected=true],
.main-navBar-navBar .spicetify-playlist-list li.main-rootlist-rootlistItemActive {
  --sn-unified-effect-intensity: 0.5;
}

aside[data-testid=now-playing-bar],
.Root__now-playing-bar {
  will-change: transform, opacity, filter;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
  contain: style paint;
  backdrop-filter: blur(calc(calc(0.4 * var(--sn-variant-crystalline-scale, 1.2)) * var(--sn-unified-blur-amount))) saturate(calc(1 + calc(0.4 * var(--sn-variant-crystalline-scale, 1.2)) * var(--sn-unified-saturation-boost))) brightness(calc(1 + calc(0.4 * var(--sn-variant-crystalline-scale, 1.2)) * var(--sn-unified-brightness-delta)));
  -webkit-backdrop-filter: blur(calc(calc(0.4 * var(--sn-variant-crystalline-scale, 1.2)) * var(--sn-unified-blur-amount))) saturate(calc(1 + calc(0.4 * var(--sn-variant-crystalline-scale, 1.2)) * var(--sn-unified-saturation-boost))) brightness(calc(1 + calc(0.4 * var(--sn-variant-crystalline-scale, 1.2)) * var(--sn-unified-brightness-delta)));
  /* Phase 4C: explicit mauve for structural glass base */
  background: rgba(var(--oklab-mauve-rgb, var(--spice-rgb-surface0)), calc(0.08 * calc(0.4 * var(--sn-variant-crystalline-scale, 1.2))));
  /* Phase 4C: explicit blue for interactive accent border */
  border: 1px solid rgba(var(--oklab-blue-rgb, var(--spice-rgb-accent)), calc(0.2 * calc(0.4 * var(--sn-variant-crystalline-scale, 1.2))));
  transition: backdrop-filter 400ms ease-out, background 400ms ease-out, border-color 400ms ease-out;
  /* Phase 4C: explicit blue for interactive accent glow */
  box-shadow: 0 0 calc(0.4 * var(--sn-unified-glow-radius)) rgba(var(--oklab-blue-rgb, var(--spice-rgb-accent)), 0.12);
  border-radius: 0;
  border-top: 2px solid rgba(var(--ui-accent-shadowed-rgb, var(--spice-rgb-accent)), 0.3);
}
@supports not (backdrop-filter: blur(1px)) {
  aside[data-testid=now-playing-bar],
  .Root__now-playing-bar {
    background: rgba(var(--spice-rgb-surface0), calc(0.2 * calc(0.4 * var(--sn-variant-crystalline-scale, 1.2))));
    border: 1px solid rgba(var(--spice-rgb-surface1), 0.3);
  }
}
.device-tier-low aside[data-testid=now-playing-bar],
.device-tier-low .Root__now-playing-bar {
  backdrop-filter: none;
  box-shadow: none;
}
.device-tier-medium aside[data-testid=now-playing-bar],
.device-tier-medium .Root__now-playing-bar {
  backdrop-filter: blur(4px);
}
aside[data-testid=now-playing-bar] .main-playButton-PlayButton,
aside[data-testid=now-playing-bar] .main-skipBackButton-button,
aside[data-testid=now-playing-bar] .main-skipForwardButton-button,
aside[data-testid=now-playing-bar] .main-shuffleButton-button,
.Root__now-playing-bar .main-playButton-PlayButton,
.Root__now-playing-bar .main-skipBackButton-button,
.Root__now-playing-bar .main-skipForwardButton-button,
.Root__now-playing-bar .main-shuffleButton-button {
  will-change: transform, opacity, filter;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
  contain: style paint;
  backdrop-filter: blur(calc(calc(0.3 * var(--sn-variant-crystalline-scale, 1.2)) * var(--sn-unified-blur-amount))) saturate(calc(1 + calc(0.3 * var(--sn-variant-crystalline-scale, 1.2)) * var(--sn-unified-saturation-boost))) brightness(calc(1 + calc(0.3 * var(--sn-variant-crystalline-scale, 1.2)) * var(--sn-unified-brightness-delta)));
  -webkit-backdrop-filter: blur(calc(calc(0.3 * var(--sn-variant-crystalline-scale, 1.2)) * var(--sn-unified-blur-amount))) saturate(calc(1 + calc(0.3 * var(--sn-variant-crystalline-scale, 1.2)) * var(--sn-unified-saturation-boost))) brightness(calc(1 + calc(0.3 * var(--sn-variant-crystalline-scale, 1.2)) * var(--sn-unified-brightness-delta)));
  /* Phase 4C: explicit mauve for structural glass base */
  background: rgba(var(--oklab-mauve-rgb, var(--spice-rgb-surface0)), calc(0.08 * calc(0.3 * var(--sn-variant-crystalline-scale, 1.2))));
  /* Phase 4C: explicit blue for interactive accent border */
  border: 1px solid rgba(var(--oklab-blue-rgb, var(--spice-rgb-accent)), calc(0.2 * calc(0.3 * var(--sn-variant-crystalline-scale, 1.2))));
  transition: backdrop-filter 400ms ease-out, background 400ms ease-out, border-color 400ms ease-out;
  will-change: transform, opacity, filter;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
  contain: style paint;
  --breath-scale-min: 1;
  --breath-scale-max: calc(1 + calc(0.3 * var(--sn-variant-crystalline-scale, 1.2)) * var(--sn-unified-scale-delta));
  --breath-opacity-min: calc(var(--sn-unified-opacity-base) - calc(0.3 * var(--sn-variant-crystalline-scale, 1.2)) * 0.05);
  --breath-opacity-max: calc(var(--sn-unified-opacity-base) + calc(0.3 * var(--sn-variant-crystalline-scale, 1.2)) * var(--sn-unified-opacity-range));
  --breath-filter-min: brightness(1);
  --breath-filter-max: brightness(calc(1 + calc(0.3 * var(--sn-variant-crystalline-scale, 1.2)) * var(--sn-unified-brightness-delta)));
  animation: unified-breathing-keyframes 3s ease-in-out infinite;
  /* Phase 4C: explicit blue for interactive accent glow */
  box-shadow: 0 0 calc(0.3 * var(--sn-unified-glow-radius)) rgba(var(--oklab-blue-rgb, var(--spice-rgb-accent)), 0.09);
  border-radius: 50%;
}
@supports not (backdrop-filter: blur(1px)) {
  aside[data-testid=now-playing-bar] .main-playButton-PlayButton,
  aside[data-testid=now-playing-bar] .main-skipBackButton-button,
  aside[data-testid=now-playing-bar] .main-skipForwardButton-button,
  aside[data-testid=now-playing-bar] .main-shuffleButton-button,
  .Root__now-playing-bar .main-playButton-PlayButton,
  .Root__now-playing-bar .main-skipBackButton-button,
  .Root__now-playing-bar .main-skipForwardButton-button,
  .Root__now-playing-bar .main-shuffleButton-button {
    background: rgba(var(--spice-rgb-surface0), calc(0.2 * calc(0.3 * var(--sn-variant-crystalline-scale, 1.2))));
    border: 1px solid rgba(var(--spice-rgb-surface1), 0.3);
  }
}
@media (prefers-reduced-motion: reduce) {
  aside[data-testid=now-playing-bar] .main-playButton-PlayButton,
  aside[data-testid=now-playing-bar] .main-skipBackButton-button,
  aside[data-testid=now-playing-bar] .main-skipForwardButton-button,
  aside[data-testid=now-playing-bar] .main-shuffleButton-button,
  .Root__now-playing-bar .main-playButton-PlayButton,
  .Root__now-playing-bar .main-skipBackButton-button,
  .Root__now-playing-bar .main-skipForwardButton-button,
  .Root__now-playing-bar .main-shuffleButton-button {
    animation: none !important;
    transform: scale(1) translateZ(0) !important;
    opacity: var(--sn-unified-opacity-base) !important;
  }
}
.device-tier-low aside[data-testid=now-playing-bar] .main-playButton-PlayButton,
.device-tier-low aside[data-testid=now-playing-bar] .main-skipBackButton-button,
.device-tier-low aside[data-testid=now-playing-bar] .main-skipForwardButton-button,
.device-tier-low aside[data-testid=now-playing-bar] .main-shuffleButton-button,
.device-tier-low .Root__now-playing-bar .main-playButton-PlayButton,
.device-tier-low .Root__now-playing-bar .main-skipBackButton-button,
.device-tier-low .Root__now-playing-bar .main-skipForwardButton-button,
.device-tier-low .Root__now-playing-bar .main-shuffleButton-button {
  backdrop-filter: none;
  box-shadow: none;
}
.device-tier-medium aside[data-testid=now-playing-bar] .main-playButton-PlayButton,
.device-tier-medium aside[data-testid=now-playing-bar] .main-skipBackButton-button,
.device-tier-medium aside[data-testid=now-playing-bar] .main-skipForwardButton-button,
.device-tier-medium aside[data-testid=now-playing-bar] .main-shuffleButton-button,
.device-tier-medium .Root__now-playing-bar .main-playButton-PlayButton,
.device-tier-medium .Root__now-playing-bar .main-skipBackButton-button,
.device-tier-medium .Root__now-playing-bar .main-skipForwardButton-button,
.device-tier-medium .Root__now-playing-bar .main-shuffleButton-button {
  backdrop-filter: blur(3px);
}
aside[data-testid=now-playing-bar] .main-playButton-PlayButton:hover,
aside[data-testid=now-playing-bar] .main-skipBackButton-button:hover,
aside[data-testid=now-playing-bar] .main-skipForwardButton-button:hover,
aside[data-testid=now-playing-bar] .main-shuffleButton-button:hover,
.Root__now-playing-bar .main-playButton-PlayButton:hover,
.Root__now-playing-bar .main-skipBackButton-button:hover,
.Root__now-playing-bar .main-skipForwardButton-button:hover,
.Root__now-playing-bar .main-shuffleButton-button:hover {
  --sn-unified-effect-intensity: 0.6;
}
aside[data-testid=now-playing-bar] .main-playButton-PlayButton,
.Root__now-playing-bar .main-playButton-PlayButton {
  will-change: transform, opacity, filter;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
  contain: style paint;
  backdrop-filter: blur(calc(calc(0.6 * var(--sn-variant-energetic-scale, 1.5)) * var(--sn-unified-blur-amount))) saturate(calc(1 + calc(0.6 * var(--sn-variant-energetic-scale, 1.5)) * var(--sn-unified-saturation-boost))) brightness(calc(1 + calc(0.6 * var(--sn-variant-energetic-scale, 1.5)) * var(--sn-unified-brightness-delta)));
  -webkit-backdrop-filter: blur(calc(calc(0.6 * var(--sn-variant-energetic-scale, 1.5)) * var(--sn-unified-blur-amount))) saturate(calc(1 + calc(0.6 * var(--sn-variant-energetic-scale, 1.5)) * var(--sn-unified-saturation-boost))) brightness(calc(1 + calc(0.6 * var(--sn-variant-energetic-scale, 1.5)) * var(--sn-unified-brightness-delta)));
  /* Phase 4C: explicit mauve for structural glass base */
  background: rgba(var(--oklab-mauve-rgb, var(--spice-rgb-surface0)), calc(0.08 * calc(0.6 * var(--sn-variant-energetic-scale, 1.5))));
  /* Phase 4C: explicit blue for interactive accent border */
  border: 1px solid rgba(var(--oklab-blue-rgb, var(--spice-rgb-accent)), calc(0.2 * calc(0.6 * var(--sn-variant-energetic-scale, 1.5))));
  transition: backdrop-filter 400ms ease-out, background 400ms ease-out, border-color 400ms ease-out;
  will-change: transform, opacity, filter;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
  contain: style paint;
  --breath-scale-min: 1;
  --breath-scale-max: calc(1 + calc(0.6 * var(--sn-variant-energetic-scale, 1.5)) * var(--sn-unified-scale-delta));
  --breath-opacity-min: calc(var(--sn-unified-opacity-base) - calc(0.6 * var(--sn-variant-energetic-scale, 1.5)) * 0.05);
  --breath-opacity-max: calc(var(--sn-unified-opacity-base) + calc(0.6 * var(--sn-variant-energetic-scale, 1.5)) * var(--sn-unified-opacity-range));
  --breath-filter-min: brightness(1);
  --breath-filter-max: brightness(calc(1 + calc(0.6 * var(--sn-variant-energetic-scale, 1.5)) * var(--sn-unified-brightness-delta)));
  animation: unified-breathing-keyframes 2s ease-in-out infinite;
  /* Phase 4C: explicit blue for interactive accent glow */
  box-shadow: 0 0 calc(0.6 * var(--sn-unified-glow-radius)) rgba(var(--oklab-blue-rgb, var(--spice-rgb-accent)), 0.18);
  --sn-music-intensity-boost: calc(1 + var(--sn-unified-music-energy, 0.5) * 0.5);
}
@supports not (backdrop-filter: blur(1px)) {
  aside[data-testid=now-playing-bar] .main-playButton-PlayButton,
  .Root__now-playing-bar .main-playButton-PlayButton {
    background: rgba(var(--spice-rgb-surface0), calc(0.2 * calc(0.6 * var(--sn-variant-energetic-scale, 1.5))));
    border: 1px solid rgba(var(--spice-rgb-surface1), 0.3);
  }
}
@media (prefers-reduced-motion: reduce) {
  aside[data-testid=now-playing-bar] .main-playButton-PlayButton,
  .Root__now-playing-bar .main-playButton-PlayButton {
    animation: none !important;
    transform: scale(1) translateZ(0) !important;
    opacity: var(--sn-unified-opacity-base) !important;
  }
}
.device-tier-low aside[data-testid=now-playing-bar] .main-playButton-PlayButton,
.device-tier-low .Root__now-playing-bar .main-playButton-PlayButton {
  backdrop-filter: none;
  box-shadow: none;
}
.device-tier-medium aside[data-testid=now-playing-bar] .main-playButton-PlayButton,
.device-tier-medium .Root__now-playing-bar .main-playButton-PlayButton {
  backdrop-filter: blur(6px);
}
.main-dropDown-dropDown,
input[type=text],
input[type=search],
.x-filterBox-filterInput {
  will-change: transform, opacity, filter;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
  contain: style paint;
  backdrop-filter: blur(calc(calc(0.3 * var(--sn-variant-gentle-scale, 0.5)) * var(--sn-unified-blur-amount))) saturate(calc(1 + calc(0.3 * var(--sn-variant-gentle-scale, 0.5)) * var(--sn-unified-saturation-boost))) brightness(calc(1 + calc(0.3 * var(--sn-variant-gentle-scale, 0.5)) * var(--sn-unified-brightness-delta)));
  -webkit-backdrop-filter: blur(calc(calc(0.3 * var(--sn-variant-gentle-scale, 0.5)) * var(--sn-unified-blur-amount))) saturate(calc(1 + calc(0.3 * var(--sn-variant-gentle-scale, 0.5)) * var(--sn-unified-saturation-boost))) brightness(calc(1 + calc(0.3 * var(--sn-variant-gentle-scale, 0.5)) * var(--sn-unified-brightness-delta)));
  /* Phase 4C: explicit mauve for structural glass base */
  background: rgba(var(--oklab-mauve-rgb, var(--spice-rgb-surface0)), calc(0.08 * calc(0.3 * var(--sn-variant-gentle-scale, 0.5))));
  /* Phase 4C: explicit blue for interactive accent border */
  border: 1px solid rgba(var(--oklab-blue-rgb, var(--spice-rgb-accent)), calc(0.2 * calc(0.3 * var(--sn-variant-gentle-scale, 0.5))));
  transition: backdrop-filter 400ms ease-out, background 400ms ease-out, border-color 400ms ease-out;
  /* Phase 4C: explicit blue for interactive accent glow */
  box-shadow: 0 0 calc(0.3 * var(--sn-unified-glow-radius)) rgba(var(--oklab-blue-rgb, var(--spice-rgb-accent)), 0.09);
  border-radius: 25px;
}
@supports not (backdrop-filter: blur(1px)) {
  .main-dropDown-dropDown,
  input[type=text],
  input[type=search],
  .x-filterBox-filterInput {
    background: rgba(var(--spice-rgb-surface0), calc(0.2 * calc(0.3 * var(--sn-variant-gentle-scale, 0.5))));
    border: 1px solid rgba(var(--spice-rgb-surface1), 0.3);
  }
}
.device-tier-low .main-dropDown-dropDown,
.device-tier-low input[type=text],
.device-tier-low input[type=search],
.device-tier-low .x-filterBox-filterInput {
  backdrop-filter: none;
  box-shadow: none;
}
.device-tier-medium .main-dropDown-dropDown,
.device-tier-medium input[type=text],
.device-tier-medium input[type=search],
.device-tier-medium .x-filterBox-filterInput {
  backdrop-filter: blur(3px);
}
.main-dropDown-dropDown:focus,
input[type=text]:focus,
input[type=search]:focus,
.x-filterBox-filterInput:focus {
  --sn-unified-effect-intensity: 0.6;
  outline: none;
  border-color: rgba(var(--ui-accent-lit-rgb, var(--spice-rgb-accent)), 0.6);
}

.main-contextMenu-menu {
  will-change: transform, opacity, filter;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
  contain: style paint;
  backdrop-filter: blur(calc(calc(0.5 * var(--sn-variant-crystalline-scale, 1.2)) * var(--sn-unified-blur-amount))) saturate(calc(1 + calc(0.5 * var(--sn-variant-crystalline-scale, 1.2)) * var(--sn-unified-saturation-boost))) brightness(calc(1 + calc(0.5 * var(--sn-variant-crystalline-scale, 1.2)) * var(--sn-unified-brightness-delta)));
  -webkit-backdrop-filter: blur(calc(calc(0.5 * var(--sn-variant-crystalline-scale, 1.2)) * var(--sn-unified-blur-amount))) saturate(calc(1 + calc(0.5 * var(--sn-variant-crystalline-scale, 1.2)) * var(--sn-unified-saturation-boost))) brightness(calc(1 + calc(0.5 * var(--sn-variant-crystalline-scale, 1.2)) * var(--sn-unified-brightness-delta)));
  /* Phase 4C: explicit mauve for structural glass base */
  background: rgba(var(--oklab-mauve-rgb, var(--spice-rgb-surface0)), calc(0.08 * calc(0.5 * var(--sn-variant-crystalline-scale, 1.2))));
  /* Phase 4C: explicit blue for interactive accent border */
  border: 1px solid rgba(var(--oklab-blue-rgb, var(--spice-rgb-accent)), calc(0.2 * calc(0.5 * var(--sn-variant-crystalline-scale, 1.2))));
  transition: backdrop-filter 400ms ease-out, background 400ms ease-out, border-color 400ms ease-out;
  /* Phase 4C: explicit blue for interactive accent glow */
  box-shadow: 0 0 calc(0.5 * var(--sn-unified-glow-radius)) rgba(var(--oklab-blue-rgb, var(--spice-rgb-accent)), 0.15);
  border-radius: 12px;
}
@supports not (backdrop-filter: blur(1px)) {
  .main-contextMenu-menu {
    background: rgba(var(--spice-rgb-surface0), calc(0.2 * calc(0.5 * var(--sn-variant-crystalline-scale, 1.2))));
    border: 1px solid rgba(var(--spice-rgb-surface1), 0.3);
  }
}
.device-tier-low .main-contextMenu-menu {
  backdrop-filter: none;
  box-shadow: none;
}
.device-tier-medium .main-contextMenu-menu {
  backdrop-filter: blur(5px);
}
.main-contextMenu-menu .main-contextMenu-menuItemButton {
  will-change: transform, opacity, filter;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
  contain: style paint;
  backdrop-filter: blur(calc(calc(0.2 * var(--sn-variant-gentle-scale, 0.5)) * var(--sn-unified-blur-amount))) saturate(calc(1 + calc(0.2 * var(--sn-variant-gentle-scale, 0.5)) * var(--sn-unified-saturation-boost))) brightness(calc(1 + calc(0.2 * var(--sn-variant-gentle-scale, 0.5)) * var(--sn-unified-brightness-delta)));
  -webkit-backdrop-filter: blur(calc(calc(0.2 * var(--sn-variant-gentle-scale, 0.5)) * var(--sn-unified-blur-amount))) saturate(calc(1 + calc(0.2 * var(--sn-variant-gentle-scale, 0.5)) * var(--sn-unified-saturation-boost))) brightness(calc(1 + calc(0.2 * var(--sn-variant-gentle-scale, 0.5)) * var(--sn-unified-brightness-delta)));
  /* Phase 4C: explicit mauve for structural glass base */
  background: rgba(var(--oklab-mauve-rgb, var(--spice-rgb-surface0)), calc(0.08 * calc(0.2 * var(--sn-variant-gentle-scale, 0.5))));
  /* Phase 4C: explicit blue for interactive accent border */
  border: 1px solid rgba(var(--oklab-blue-rgb, var(--spice-rgb-accent)), calc(0.2 * calc(0.2 * var(--sn-variant-gentle-scale, 0.5))));
  transition: backdrop-filter 400ms ease-out, background 400ms ease-out, border-color 400ms ease-out;
  /* Phase 4C: explicit blue for interactive accent glow */
  box-shadow: 0 0 calc(0.2 * var(--sn-unified-glow-radius)) rgba(var(--oklab-blue-rgb, var(--spice-rgb-accent)), 0.06);
  border-radius: 6px;
}
@supports not (backdrop-filter: blur(1px)) {
  .main-contextMenu-menu .main-contextMenu-menuItemButton {
    background: rgba(var(--spice-rgb-surface0), calc(0.2 * calc(0.2 * var(--sn-variant-gentle-scale, 0.5))));
    border: 1px solid rgba(var(--spice-rgb-surface1), 0.3);
  }
}
.device-tier-low .main-contextMenu-menu .main-contextMenu-menuItemButton {
  backdrop-filter: none;
  box-shadow: none;
}
.device-tier-medium .main-contextMenu-menu .main-contextMenu-menuItemButton {
  backdrop-filter: blur(2px);
}
.main-contextMenu-menu .main-contextMenu-menuItemButton:hover {
  --sn-unified-effect-intensity: 0.4;
}

.Root[style*="--sn-music-beat-pulse-intensity"] .main-card-card,
.Root[style*="--sn-music-beat-pulse-intensity"] .main-card-cardContainer {
  --sn-unified-music-energy: var(--sn-music-beat-pulse-intensity, 0.5);
  --sn-music-intensity-boost: calc(1 + var(--sn-music-beat-pulse-intensity, 0.5));
}
.Root[style*="--sn-music-beat-pulse-intensity"] div.main-trackList-trackListRow[role=row] {
  --sn-unified-music-energy: var(--sn-music-beat-pulse-intensity, 0.5);
  --sn-music-intensity-boost: calc(1 + var(--sn-music-beat-pulse-intensity, 0.5));
}
.Root[style*="--sn-music-beat-pulse-intensity"] .main-playButton-PlayButton {
  --sn-unified-music-energy: var(--sn-music-beat-pulse-intensity, 0.5);
  --sn-music-intensity-boost: calc(1 + var(--sn-music-beat-pulse-intensity, 0.5));
}

.Root[style*="--sn-dynamic-genre-hue-shift"] .main-card-card,
.Root[style*="--sn-dynamic-genre-hue-shift"] .main-card-cardContainer {
  filter: hue-rotate(var(--sn-dynamic-genre-hue-shift, 0deg));
}
.Root[style*="--sn-dynamic-genre-hue-shift"] div.main-trackList-trackListRow[role=row] {
  filter: hue-rotate(var(--sn-dynamic-genre-hue-shift, 0deg));
}

@media (max-width: 768px) {
  :root {
    --sn-ui-glass-pulse-enabled: 0.4;
    --sn-ui-glass-float-distance: 8px;
    --sn-unified-blur-amount: 15px;
  }
  .main-card-card,
  .main-card-cardContainer {
    margin: 4px;
  }
}
@media (prefers-contrast: high) {
  :root {
    --sn-ui-glass-pulse-enabled: 0.8;
    --sn-unified-brightness-delta: 0.15;
  }
  .main-card-card,
  .main-card-cardContainer {
    border-width: 2px;
    border-color: rgba(var(--ui-accent-lit-rgb, var(--spice-rgb-accent)), 0.6);
  }
  div.main-trackList-trackListRow[role=row] {
    border-width: 2px;
    border-color: rgba(var(--ui-accent-lit-rgb, var(--spice-rgb-accent)), 0.6);
  }
}
:root {
  --color-enhancement-saturation: 1.2;
  --color-enhancement-brightness: 1.1;
  --color-enhancement-opacity: 0.1;
  --sn-ui-glass-beat-opacity: calc(
    var(--color-enhancement-opacity) *
      (1 + var(--sn-music-beat-pulse-intensity, 0) * var(--sn-ui-glass-pulse-enabled) * 0.5)
  );
  --sn-glass-rhythm-hue: calc(var(--sn-music-rhythm-phase, 0) * var(--sn-ui-glass-pulse-enabled) * 20deg);
  --sn-glass-cosmic-blur: calc(var(--sn-music-beat-pulse-intensity, 0) * var(--sn-ui-glass-pulse-enabled) * 3px);
  --sn-glass-saturation: calc(1.2 + var(--sn-music-beat-pulse-intensity, 0) * var(--sn-ui-glass-pulse-enabled) * 0.3);
  --sn-glass-brightness: calc(1.1 + var(--sn-music-beat-pulse-intensity, 0) * var(--sn-ui-glass-pulse-enabled) * 0.2);
  --sn-glass-rhythm-shift: calc(var(--sn-music-rhythm-phase, 0) * var(--sn-ui-glass-pulse-enabled) * 0.1);
  --sn-ui-glass-pulse-enabled: var(--glass-pulse-toggle, 1);
  --sn-glass-user-base-intensity: var(--glass-user-intensity, 0.5);
  --glass-blur: calc(
    var(--sn-glass-user-base-intensity) * 20px +
    var(--sn-glass-beat-boost, 0) * var(--sn-ui-glass-pulse-enabled) * 5px
  );
  --glass-saturation: calc(
    1.2 + var(--sn-glass-beat-boost, 0) * var(--sn-ui-glass-pulse-enabled) * 0.2
  );
  --glass-brightness: calc(
    1.1 + var(--sn-glass-beat-boost, 0) * var(--sn-ui-glass-pulse-enabled) * 0.15
  );
  --glass-background: rgba(
    var(--sn-oklab-highlight-rgb),
    calc(
      var(--sn-glass-user-base-intensity) * 0.1 +
      var(--sn-glass-beat-boost, 0) * var(--sn-ui-glass-pulse-enabled) * 0.05
    )
  );
  --glass-border: rgba(
    var(--sn-oklab-highlight-rgb),
    calc(
      var(--sn-glass-user-base-intensity) * 0.2 +
      var(--sn-glass-beat-boost, 0) * var(--sn-ui-glass-pulse-enabled) * 0.1
    )
  );
  --sn-glass-refract-intensity: calc(var(--sn-music-beat-pulse-intensity, 0) * var(--sn-ui-glass-pulse-enabled) * 15deg);
  --sn-glass-spectrum-shift: calc(var(--sn-music-rhythm-phase, 0) * var(--sn-ui-glass-pulse-enabled) * 30deg);
  --sn-glass-energy-pulse: calc(0.8 + var(--sn-music-beat-pulse-intensity, 0) * var(--sn-ui-glass-pulse-enabled) * 0.4);
  --enhanced-background: rgba(
    var(--spice-rgb-surface0),
    var(--sn-ui-glass-beat-opacity)
  );
  --enhanced-border: rgba(
    var(--spice-rgb-surface1),
    calc(0.2 + var(--sn-music-beat-pulse-intensity, 0) * var(--sn-ui-glass-pulse-enabled) * 0.15)
  );
  --enhanced-shadow: rgba(
    var(--sn-oklab-shadow-rgb),
    calc(0.1 + var(--sn-music-beat-pulse-intensity, 0) * var(--sn-ui-glass-pulse-enabled) * 0.2)
  );
  --color-transition: all var(--sn-gradient-transition, 0.8s ease-in-out);
}

div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar,
.Root__nav-bar {
  background: var(--enhanced-background) !important;
  box-shadow: 0 8px 32px var(--enhanced-shadow), 0 2px calc(16px + var(--sn-music-beat-pulse-intensity, 0) * 8px) rgba(var(--sn-accent-rgb, var(--sn-accent-rgb, 202, 158, 230)), calc(var(--sn-music-beat-pulse-intensity, 0) * 0.2));
  filter: hue-rotate(var(--sn-glass-rhythm-hue)) saturate(var(--sn-glass-saturation)) brightness(var(--sn-glass-brightness));
  transition: var(--color-transition), filter 0.4s ease-out, box-shadow 0.3s ease-out;
}
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar::after,
.Root__nav-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(calc(135deg + var(--sn-glass-spectrum-shift)), rgba(var(--sn-accent-rgb, var(--sn-accent-rgb, 202, 158, 230)), calc(var(--sn-music-beat-pulse-intensity, 0) * 0.1)) 0%, transparent 40%, rgba(var(--sn-accent-rgb, var(--sn-accent-rgb, 140, 170, 238)), calc(var(--sn-music-beat-pulse-intensity, 0) * 0.08)) 100%);
  animation: glassVisualEffectsFlow calc(15s / max(var(--sn-glass-energy-pulse), 0.1)) linear infinite;
  opacity: var(--sn-music-beat-pulse-intensity, 0);
  transition: opacity 0.5s ease-out;
}
@media (max-width: 768px) {
  div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar,
  .Root__nav-bar {
    --sn-ui-glass-beat-opacity: calc(
      0.12 * (1 + var(--sn-music-beat-pulse-intensity, 0) * 0.3)
    );
  }
}

.GenericModal,
.main-contextMenu-container {
  box-shadow: 0 16px 64px rgba(var(--sn-oklab-shadow-rgb, 0, 0, 0), 0.2), 0 8px calc(32px + var(--sn-music-beat-pulse-intensity, 0) * 16px) rgba(var(--sn-accent-rgb, var(--sn-accent-rgb, 202, 158, 230)), calc(var(--sn-music-beat-pulse-intensity, 0) * 0.15));
  border: 1px solid rgba(var(--sn-accent-rgb, "140,170,238"), calc(0.2 + var(--sn-music-beat-pulse-intensity, 0) * 0.2));
  filter: hue-rotate(calc(var(--sn-glass-rhythm-hue) * 0.3));
  transition: all 0.4s ease-out;
}

body:not(.main-searchPage-content) .main-card-card,
body:not(.main-searchPage-content) .main-card-cardContainer {
  background: var(--enhanced-background);
  border: 1px solid var(--enhanced-border);
  box-shadow: 0 4px 12px var(--enhanced-shadow), 0 2px calc(8px + var(--sn-music-beat-pulse-intensity, 0) * 4px) rgba(var(--sn-accent-rgb, "140,170,238"), calc(var(--sn-music-beat-pulse-intensity, 0) * 0.1));
  filter: hue-rotate(calc(var(--sn-glass-rhythm-hue) * 0.2)) saturate(calc(1 + var(--sn-music-beat-pulse-intensity, 0) * 0.1));
  transition: all 0.3s ease-out, transform 0.2s ease-out, filter 0.4s ease-out;
}
body:not(.main-searchPage-content) .main-card-card:hover, body:not(.main-searchPage-content) .main-card-card[data-context-menu-open=true],
body:not(.main-searchPage-content) .main-card-cardContainer:hover,
body:not(.main-searchPage-content) .main-card-cardContainer[data-context-menu-open=true] {
  background: var(--dynamic-card-hover-bg, rgba(var(--spice-rgb-surface1), calc(0.15 + var(--sn-music-beat-pulse-intensity, 0) * 0.05))) !important;
  box-shadow: 0 8px 24px var(--enhanced-shadow), 0 4px calc(16px + var(--sn-music-beat-pulse-intensity, 0) * 8px) rgba(var(--sn-accent-rgb, "202,158,230"), calc(var(--sn-music-beat-pulse-intensity, 0) * 0.2));
  filter: hue-rotate(calc(var(--sn-glass-rhythm-hue) * 0.4)) saturate(calc(1.1 + var(--sn-music-beat-pulse-intensity, 0) * 0.2)) brightness(calc(1.05 + var(--sn-music-beat-pulse-intensity, 0) * 0.1));
}

div.Root__right-sidebar[data-testid=right-sidebar],
.Root__right-sidebar {
  background: var(--enhanced-background) !important;
  border-left: 1px solid var(--enhanced-border);
  filter: hue-rotate(calc(var(--sn-glass-rhythm-hue) * 0.2)) saturate(var(--sn-glass-saturation));
  transition: var(--color-transition), filter 0.4s ease-out;
}

.sn-glass-disabled div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar,
.sn-glass-disabled .Root__nav-bar {
  background: rgba(var(--spice-rgb-surface0), 0.8) !important;
}
.sn-glass-disabled div.Root__right-sidebar[data-testid=right-sidebar],
.sn-glass-disabled .Root__right-sidebar {
  background: rgba(var(--spice-rgb-surface0), 0.8) !important;
}
.sn-glass-disabled .main-card-card,
.sn-glass-disabled .main-card-cardContainer {
  background: rgba(var(--spice-rgb-surface0), 0.8) !important;
}

.sn-glass-minimal {
  --color-enhancement-opacity: 0.05;
  --color-enhancement-saturation: 1.05;
}

.sn-glass-intense {
  --color-enhancement-opacity: 0.15;
  --color-enhancement-saturation: 1.4;
  --color-enhancement-brightness: 1.2;
}

@keyframes glassVisualEffectsFlow {
  from {
    transform: translateX(-100%) rotate(0deg);
    opacity: 0.5;
  }
  to {
    transform: translateX(100%) rotate(5deg);
    opacity: 0.8;
  }
}
@keyframes glassVisualBreathing {
  0%, 100% {
    filter: hue-rotate(var(--sn-glass-rhythm-hue)) saturate(var(--sn-glass-saturation));
  }
  50% {
    filter: hue-rotate(calc(var(--sn-glass-rhythm-hue) * 1.2)) saturate(calc(var(--sn-glass-saturation) * 1.1));
  }
}
@media (prefers-reduced-motion: reduce) {
  .Root__nav-bar,
  .Root__right-sidebar {
    transition: none !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
  }
  .Root__nav-bar::before, .Root__nav-bar::after,
  .Root__right-sidebar::before,
  .Root__right-sidebar::after {
    animation: none !important;
    transition: none !important;
  }
  .main-card-card,
  .main-card-cardContainer {
    transition: none !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
  }
  .main-card-card::before, .main-card-card::after,
  .main-card-cardContainer::before,
  .main-card-cardContainer::after {
    animation: none !important;
    transition: none !important;
  }
}
@media (prefers-contrast: high) {
  :root {
    --sn-ui-glass-beat-opacity: calc(
      0.25 * (1 + var(--sn-music-beat-pulse-intensity, 0) * 0.3)
    );
    --enhanced-border: rgba(var(--spice-rgb-text), 0.4);
    --sn-glass-saturation: calc(1.4 + var(--sn-music-beat-pulse-intensity, 0) * 0.2);
  }
  .Root__nav-bar {
    border-width: 2px !important;
  }
  .main-card-card,
  .main-card-cardContainer {
    border-width: 2px !important;
  }
}
@media (max-width: 768px) {
  :root {
    --sn-ui-glass-beat-opacity: calc(
      0.08 * (1 + var(--sn-music-beat-pulse-intensity, 0) * 0.2)
    );
    --sn-glass-cosmic-blur: calc(var(--sn-music-beat-pulse-intensity, 0) * 2px);
    --sn-glass-refract-intensity: calc(
      var(--sn-music-beat-pulse-intensity, 0) * 10deg
    );
  }
  .sn-glass-intense {
    --sn-ui-glass-beat-opacity: calc(
      0.12 * (1 + var(--sn-music-beat-pulse-intensity, 0) * 0.2)
    );
  }
  .Root__nav-bar {
    filter: hue-rotate(calc(var(--sn-glass-rhythm-hue) * 0.5));
  }
  .main-card-card,
  .main-card-cardContainer {
    filter: hue-rotate(calc(var(--sn-glass-rhythm-hue) * 0.5));
  }
}
@media (max-resolution: 1dppx) {
  :root {
    --sn-glass-cosmic-blur: calc(var(--sn-music-beat-pulse-intensity, 0) * 1px);
  }
  .Root__nav-bar::after {
    display: none;
  }
}
.Root__nav-bar {
  background: rgba(var(--spice-rgb-surface0), 0.9) !important;
  border-bottom: 1px solid rgba(var(--spice-rgb-surface1), 0.5);
}

body:not(:has(.main-searchPage-content)) .main-card-card,
body:not(:has(.main-searchPage-content)) .main-card-cardContainer {
  background: rgba(var(--spice-rgb-surface0), 0.7) !important;
}
body:not(:has(.main-searchPage-content)) .main-card-card:hover,
body:not(:has(.main-searchPage-content)) .main-card-cardContainer:hover {
  background: rgba(var(--spice-rgb-surface1), 0.8) !important;
}

@keyframes glassConsciousnessFlow {
  from {
    transform: translateX(-100%) rotate(0deg);
    opacity: 0.5;
  }
  to {
    transform: translateX(100%) rotate(5deg);
    opacity: 0.8;
  }
}
@keyframes glassBreathing {
  0%, 100% {
    filter: hue-rotate(var(--sn-glass-rhythm-hue)) saturate(var(--sn-glass-saturation));
  }
  50% {
    filter: hue-rotate(calc(var(--sn-glass-rhythm-hue) * 1.2)) saturate(calc(var(--sn-glass-saturation) * 1.1));
  }
}
:root {
  --layered-effect-rgb: 100, 255, 200;
  --layered-scanline-rgb: 255, 150, 100;
  --layered-glow-intensity: 0.5;
  --layered-flicker-rate: 5Hz;
  --layered-atmospheric-depth: 0.3;
  --layered-chromatic-shift: 2px;
  --aberration-intensity: 0.5;
  --aberration-color-separation: 3px;
  --aberration-musical-sync: 0.7;
  --aberration-emotional-temperature: 6000K;
  --aberration-visual-effects-level: 0.8;
  --aberration-reading-mode-reduction: 0.2;
  --aberration-red-shift: 2px;
  --aberration-green-shift: 0px;
  --aberration-blue-shift: -2px;
  --aberration-wave-frequency: 0.5s;
  --aberration-pulse-intensity: 0.3;
  --aberration-webgl-active: 0;
  --aberration-css-enabled: 0;
  --aberration-hybrid-mode: 0;
  --aberration-css-opacity: calc(var(--aberration-css-enabled) * (1 - var(--aberration-webgl-active) * 0.7));
  --layered-perspective-depth: 1200px;
  --volumetric-layer-spacing: 20px;
  --volumetric-depth-intensity: 0.8;
  --visual-effects-depth-offset: 50px;
  --temperature-depth-offset: 25px;
  --volumetric-shadow-blur: 30px;
  --atmospheric-blur-distance: 4px;
  --visual-effects-data-opacity: 0.8;
  --data-stream-intensity: 0.5;
  --visual-effects-scanline-density: 0.5;
  --visual-effects-scanline-frequency: 4px;
  --visual-effects-scanline-opacity: 0.15;
  --visual-effects-scanline-speed: 1s;
  --visual-effects-scanline-resonance: 0.5;
  --visual-effects-scanline-temperature: 6000K;
  --visual-effects-scanline-musical-intensity: 0.5;
  --temperature-scanline-color-shift: 0deg;
  --musical-scanline-pulse: 0.5;
  --visual-effects-scanline-interference: none;
  --visual-effects-scanline-complexity: 0;
  --layered-music-flicker-intensity: 0.3;
  --layered-cosmic-glow: calc(var(--layered-glow-intensity) * 0.8);
  --layered-red-energy-burst-effects: calc(var(--layered-glow-intensity) * 1.2);
  --layered-ethereal-softness: calc(var(--layered-glow-intensity) * 0.6);
  --layered-natural-warmth: calc(var(--layered-glow-intensity) * 0.7);
}

@keyframes visual-effects-layered-flicker {
  0% {
    opacity: var(--layered-glow-intensity);
    filter: drop-shadow(0 0 5px rgba(var(--layered-effect-rgb), 0.4)) hue-rotate(0deg);
  }
  25% {
    opacity: calc(var(--layered-glow-intensity) + var(--layered-music-flicker-intensity) * 0.2);
    filter: drop-shadow(0 0 8px rgba(var(--layered-effect-rgb), 0.6)) hue-rotate(5deg);
  }
  50% {
    opacity: calc(var(--layered-glow-intensity) + var(--layered-music-flicker-intensity) * 0.3);
    filter: drop-shadow(0 0 12px rgba(var(--layered-effect-rgb), 0.8)) hue-rotate(10deg);
  }
  75% {
    opacity: calc(var(--layered-glow-intensity) + var(--layered-music-flicker-intensity) * 0.2);
    filter: drop-shadow(0 0 8px rgba(var(--layered-effect-rgb), 0.6)) hue-rotate(5deg);
  }
  100% {
    opacity: var(--layered-glow-intensity);
    filter: drop-shadow(0 0 5px rgba(var(--layered-effect-rgb), 0.4)) hue-rotate(0deg);
  }
}
@keyframes visual-effects-chromatic-aberration {
  0% {
    filter: drop-shadow(calc(var(--aberration-red-shift) * var(--aberration-intensity) * (1 - var(--reading-mode-active, 0) * var(--aberration-reading-mode-reduction))) 0 0 rgba(255, 0, 0, calc(0.3 * var(--aberration-intensity) * var(--aberration-css-opacity, 1)))) drop-shadow(calc(var(--aberration-blue-shift) * var(--aberration-intensity) * (1 - var(--reading-mode-active, 0) * var(--aberration-reading-mode-reduction))) 0 0 rgba(0, 100, 255, calc(0.3 * var(--aberration-intensity) * var(--aberration-css-opacity, 1))));
  }
  25% {
    filter: drop-shadow(calc(var(--aberration-green-shift) * var(--aberration-intensity) * (1 - var(--reading-mode-active, 0) * var(--aberration-reading-mode-reduction))) calc(var(--aberration-red-shift) * var(--aberration-intensity) * 0.5) 0 rgba(0, 255, 50, calc(0.25 * var(--aberration-intensity) * var(--aberration-css-opacity, 1)))) drop-shadow(calc(var(--aberration-red-shift) * var(--aberration-intensity) * -0.5) calc(var(--aberration-blue-shift) * var(--aberration-intensity) * (1 - var(--reading-mode-active, 0) * var(--aberration-reading-mode-reduction))) 0 rgba(255, 50, 150, calc(0.3 * var(--aberration-intensity) * var(--aberration-css-opacity, 1))));
  }
  50% {
    filter: drop-shadow(0 calc(var(--aberration-color-separation) * var(--aberration-intensity) * (1 - var(--reading-mode-active, 0) * var(--aberration-reading-mode-reduction))) 0 rgba(100, 255, 100, calc(0.2 * var(--aberration-intensity)))) drop-shadow(0 calc(var(--aberration-color-separation) * var(--aberration-intensity) * -1 * (1 - var(--reading-mode-active, 0) * var(--aberration-reading-mode-reduction))) 0 rgba(255, 100, 255, calc(0.25 * var(--aberration-intensity))));
  }
  75% {
    filter: drop-shadow(calc(var(--aberration-blue-shift) * var(--aberration-intensity) * 0.8 * (1 - var(--reading-mode-active, 0) * var(--aberration-reading-mode-reduction))) calc(var(--aberration-green-shift) * var(--aberration-intensity) * 0.3) 0 rgba(0, 150, 255, calc(0.35 * var(--aberration-intensity)))) drop-shadow(calc(var(--aberration-red-shift) * var(--aberration-intensity) * 0.6 * (1 - var(--reading-mode-active, 0) * var(--aberration-reading-mode-reduction))) 0 0 rgba(255, 200, 0, calc(0.25 * var(--aberration-intensity))));
  }
  100% {
    filter: drop-shadow(calc(var(--aberration-red-shift) * var(--aberration-intensity) * (1 - var(--reading-mode-active, 0) * var(--aberration-reading-mode-reduction))) 0 0 rgba(255, 0, 0, calc(0.3 * var(--aberration-intensity) * var(--aberration-css-opacity, 1)))) drop-shadow(calc(var(--aberration-blue-shift) * var(--aberration-intensity) * (1 - var(--reading-mode-active, 0) * var(--aberration-reading-mode-reduction))) 0 0 rgba(0, 100, 255, calc(0.3 * var(--aberration-intensity) * var(--aberration-css-opacity, 1))));
  }
}
@keyframes musical-aberration-pulse {
  0% {
    filter: drop-shadow(calc(var(--aberration-red-shift) * var(--aberration-intensity) * var(--musical-scanline-pulse, 0.5)) 0 0 rgba(255, 0, 0, calc(0.2 * var(--aberration-intensity) * var(--musical-scanline-pulse, 0.5))));
  }
  50% {
    filter: drop-shadow(calc(var(--aberration-red-shift) * var(--aberration-intensity) * var(--musical-scanline-pulse, 0.5) * 1.5) 0 0 rgba(255, 0, 0, calc(0.4 * var(--aberration-intensity) * var(--musical-scanline-pulse, 0.5)))) drop-shadow(calc(var(--aberration-blue-shift) * var(--aberration-intensity) * var(--musical-scanline-pulse, 0.5) * 1.2) 0 0 rgba(0, 150, 255, calc(0.3 * var(--aberration-intensity) * var(--musical-scanline-pulse, 0.5))));
  }
  100% {
    filter: drop-shadow(calc(var(--aberration-red-shift) * var(--aberration-intensity) * var(--musical-scanline-pulse, 0.5)) 0 0 rgba(255, 0, 0, calc(0.2 * var(--aberration-intensity) * var(--musical-scanline-pulse, 0.5))));
  }
}
@keyframes visual-effects-aberration-waves {
  0% {
    filter: drop-shadow(calc(var(--aberration-red-shift) * var(--aberration-intensity) * 0) calc(var(--aberration-green-shift) * var(--aberration-intensity) * 1) 0 rgba(255, 100, 100, calc(0.25 * var(--aberration-intensity))));
  }
  25% {
    filter: drop-shadow(calc(var(--aberration-red-shift) * var(--aberration-intensity) * 0.707) calc(var(--aberration-green-shift) * var(--aberration-intensity) * 0.707) 0 rgba(100, 255, 100, calc(0.25 * var(--aberration-intensity))));
  }
  50% {
    filter: drop-shadow(calc(var(--aberration-red-shift) * var(--aberration-intensity) * 1) calc(var(--aberration-green-shift) * var(--aberration-intensity) * 0) 0 rgba(100, 100, 255, calc(0.25 * var(--aberration-intensity))));
  }
  75% {
    filter: drop-shadow(calc(var(--aberration-red-shift) * var(--aberration-intensity) * 0.707) calc(var(--aberration-green-shift) * var(--aberration-intensity) * -0.707) 0 rgba(255, 255, 100, calc(0.25 * var(--aberration-intensity))));
  }
  100% {
    filter: drop-shadow(calc(var(--aberration-red-shift) * var(--aberration-intensity) * 0) calc(var(--aberration-green-shift) * var(--aberration-intensity) * -1) 0 rgba(255, 100, 255, calc(0.25 * var(--aberration-intensity))));
  }
}
@keyframes visual-effects-atmospheric-depth {
  0% {
    box-shadow: 0 0 calc(var(--layered-atmospheric-depth) * 20px) rgba(var(--layered-effect-rgb), 0.2), inset 0 0 calc(var(--layered-atmospheric-depth) * 10px) rgba(var(--layered-effect-rgb), 0.1);
  }
  50% {
    box-shadow: 0 0 calc(var(--layered-atmospheric-depth) * 30px) rgba(var(--layered-effect-rgb), 0.3), inset 0 0 calc(var(--layered-atmospheric-depth) * 15px) rgba(var(--layered-effect-rgb), 0.15);
  }
  100% {
    box-shadow: 0 0 calc(var(--layered-atmospheric-depth) * 20px) rgba(var(--layered-effect-rgb), 0.2), inset 0 0 calc(var(--layered-atmospheric-depth) * 10px) rgba(var(--layered-effect-rgb), 0.1);
  }
}
@keyframes layered-lens-enhancement {
  0% {
    backdrop-filter: contrast(calc(1 + var(--visual-effects-scanline-density) * 0.15)) saturate(calc(1 + var(--visual-effects-scanline-density) * 0.2)) brightness(calc(1 + var(--visual-effects-scanline-density) * 0.05)) hue-rotate(calc(var(--temperature-scanline-color-shift) * 0.3));
    opacity: calc(var(--visual-effects-scanline-opacity) * (1 - var(--musical-scanline-pulse) * 0.05));
  }
  25% {
    backdrop-filter: contrast(calc(1 + var(--visual-effects-scanline-density) * 0.18)) saturate(calc(1 + var(--visual-effects-scanline-density) * 0.25)) brightness(calc(1 + var(--visual-effects-scanline-density) * 0.08)) hue-rotate(calc(var(--temperature-scanline-color-shift) * 0.4));
    opacity: calc(var(--visual-effects-scanline-opacity) * (1 + var(--musical-scanline-pulse) * 0.1));
  }
  50% {
    backdrop-filter: contrast(calc(1 + var(--visual-effects-scanline-density) * 0.22)) saturate(calc(1 + var(--visual-effects-scanline-density) * 0.3)) brightness(calc(1 + var(--visual-effects-scanline-density) * 0.12)) hue-rotate(calc(var(--temperature-scanline-color-shift) * 0.5));
    opacity: calc(var(--visual-effects-scanline-opacity) * (1 + var(--musical-scanline-pulse) * 0.15));
  }
  75% {
    backdrop-filter: contrast(calc(1 + var(--visual-effects-scanline-density) * 0.18)) saturate(calc(1 + var(--visual-effects-scanline-density) * 0.25)) brightness(calc(1 + var(--visual-effects-scanline-density) * 0.08)) hue-rotate(calc(var(--temperature-scanline-color-shift) * 0.4));
    opacity: calc(var(--visual-effects-scanline-opacity) * (1 + var(--musical-scanline-pulse) * 0.1));
  }
  100% {
    backdrop-filter: contrast(calc(1 + var(--visual-effects-scanline-density) * 0.15)) saturate(calc(1 + var(--visual-effects-scanline-density) * 0.2)) brightness(calc(1 + var(--visual-effects-scanline-density) * 0.05)) hue-rotate(calc(var(--temperature-scanline-color-shift) * 0.3));
    opacity: calc(var(--visual-effects-scanline-opacity) * (1 - var(--musical-scanline-pulse) * 0.05));
  }
}
@keyframes visual-effects-interference {
  0% {
    transform: scale(calc(1 + var(--visual-effects-scanline-complexity) * 0.01)) rotate(calc(var(--visual-effects-scanline-complexity) * -0.5deg));
    filter: contrast(calc(1 + var(--visual-effects-scanline-complexity) * 0.05)) saturate(calc(1 + var(--visual-effects-scanline-complexity) * 0.1)) hue-rotate(calc(var(--temperature-scanline-color-shift) * 0.8));
    opacity: calc(var(--visual-effects-scanline-complexity) * 0.4);
  }
  33% {
    transform: scale(calc(1 + var(--visual-effects-scanline-complexity) * 0.015)) rotate(calc(var(--visual-effects-scanline-complexity) * 0.3deg));
    filter: contrast(calc(1 + var(--visual-effects-scanline-complexity) * 0.08)) saturate(calc(1 + var(--visual-effects-scanline-complexity) * 0.15)) hue-rotate(calc(var(--temperature-scanline-color-shift) * 1.1));
    opacity: calc(var(--visual-effects-scanline-complexity) * 0.5);
  }
  67% {
    transform: scale(calc(1 + var(--visual-effects-scanline-complexity) * 0.02)) rotate(calc(var(--visual-effects-scanline-complexity) * 0.8deg));
    filter: contrast(calc(1 + var(--visual-effects-scanline-complexity) * 0.1)) saturate(calc(1 + var(--visual-effects-scanline-complexity) * 0.2)) hue-rotate(calc(var(--temperature-scanline-color-shift) * 1.3));
    opacity: calc(var(--visual-effects-scanline-complexity) * 0.6);
  }
  100% {
    transform: scale(calc(1 + var(--visual-effects-scanline-complexity) * 0.01)) rotate(calc(var(--visual-effects-scanline-complexity) * -0.5deg));
    filter: contrast(calc(1 + var(--visual-effects-scanline-complexity) * 0.05)) saturate(calc(1 + var(--visual-effects-scanline-complexity) * 0.1)) hue-rotate(calc(var(--temperature-scanline-color-shift) * 0.8));
    opacity: calc(var(--visual-effects-scanline-complexity) * 0.4);
  }
}
.aesthetic-mode-cosmic {
  --aberration-intensity: 0.6;
  --aberration-color-separation: 2.5px;
  --aberration-red-shift: 2px;
  --aberration-blue-shift: -2px;
  --aberration-green-shift: 0px;
  --aberration-wave-frequency: 2s;
}
.aesthetic-mode-cosmic .layered-element, .aesthetic-mode-cosmic .Root__main-view .main-view-container__scroll-node-child, .Root__main-view .aesthetic-mode-cosmic .main-view-container__scroll-node-child, .aesthetic-mode-cosmic .main-view-container__scroll-node, .aesthetic-mode-cosmic .Root__now-playing-bar, .aesthetic-mode-cosmic .Root__nav-bar, .aesthetic-mode-cosmic .main-view-container {
  animation: visual-effects-layered-flicker calc(1s / var(--layered-flicker-rate, 5)) ease-in-out infinite, visual-effects-atmospheric-depth 2s ease-in-out infinite, visual-effects-chromatic-aberration calc(3s / var(--layered-flicker-rate, 5)) ease-in-out infinite;
}
.aesthetic-mode-cosmic .layered-element::before, .aesthetic-mode-cosmic .Root__main-view .main-view-container__scroll-node-child::before, .Root__main-view .aesthetic-mode-cosmic .main-view-container__scroll-node-child::before, .aesthetic-mode-cosmic .main-view-container__scroll-node::before, .aesthetic-mode-cosmic .Root__now-playing-bar::before, .aesthetic-mode-cosmic .Root__nav-bar::before, .aesthetic-mode-cosmic .main-view-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(0deg, transparent 0px, transparent 3px, rgba(var(--layered-effect-rgb), 0.1) 4px);
  pointer-events: none;
}

.aesthetic-mode-cinematic {
  --aberration-intensity: 0.8;
  --aberration-color-separation: 4px;
  --aberration-red-shift: 3px;
  --aberration-blue-shift: -3px;
  --aberration-musical-sync: 1.0;
}
.aesthetic-mode-cinematic .layered-element, .aesthetic-mode-cinematic .Root__main-view .main-view-container__scroll-node-child, .Root__main-view .aesthetic-mode-cinematic .main-view-container__scroll-node-child, .aesthetic-mode-cinematic .main-view-container__scroll-node, .aesthetic-mode-cinematic .Root__now-playing-bar, .aesthetic-mode-cinematic .Root__nav-bar, .aesthetic-mode-cinematic .main-view-container {
  animation: visual-effects-layered-flicker calc(0.5s / var(--layered-flicker-rate, 8)) ease-in-out infinite, visual-effects-chromatic-aberration calc(2s / var(--layered-flicker-rate, 8)) ease-in-out infinite, musical-aberration-pulse calc(0.3s / var(--layered-flicker-rate, 10)) ease-in-out infinite;
}
.aesthetic-mode-cinematic .layered-element::after, .aesthetic-mode-cinematic .Root__main-view .main-view-container__scroll-node-child::after, .Root__main-view .aesthetic-mode-cinematic .main-view-container__scroll-node-child::after, .aesthetic-mode-cinematic .main-view-container__scroll-node::after, .aesthetic-mode-cinematic .Root__now-playing-bar::after, .aesthetic-mode-cinematic .Root__nav-bar::after, .aesthetic-mode-cinematic .main-view-container::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, rgba(255, 0, 100, var(--layered-red-energy-burst-effects)) 0%, transparent 30%, transparent 70%, rgba(0, 255, 255, var(--layered-red-energy-burst-effects)) 100%);
  mix-blend-mode: screen;
  pointer-events: none;
}

.aesthetic-mode-ethereal {
  --aberration-intensity: 0.3;
  --aberration-color-separation: 1.5px;
  --aberration-red-shift: 1px;
  --aberration-blue-shift: -1px;
  --aberration-green-shift: 0.5px;
  --aberration-wave-frequency: 3s;
}
.aesthetic-mode-ethereal .layered-element:not(.main-view-container):not(.main-view-container__scroll-node), .aesthetic-mode-ethereal .Root__main-view .main-view-container__scroll-node-child:not(.main-view-container):not(.main-view-container__scroll-node), .Root__main-view .aesthetic-mode-ethereal .main-view-container__scroll-node-child:not(.main-view-container):not(.main-view-container__scroll-node), .aesthetic-mode-ethereal .main-view-container__scroll-node:not(.main-view-container):not(.main-view-container__scroll-node), .aesthetic-mode-ethereal .Root__now-playing-bar:not(.main-view-container):not(.main-view-container__scroll-node), .aesthetic-mode-ethereal .Root__nav-bar:not(.main-view-container):not(.main-view-container__scroll-node), .aesthetic-mode-ethereal .main-view-container:not(.main-view-container):not(.main-view-container__scroll-node) {
  animation: visual-effects-atmospheric-depth 6s ease-in-out infinite, visual-effects-aberration-waves calc(var(--aberration-wave-frequency)) ease-in-out infinite;
  filter: blur(calc(var(--layered-ethereal-softness) * 0.5px)) brightness(calc(1 + var(--layered-ethereal-softness) * 0.2));
}
.aesthetic-mode-ethereal .layered-element:not(.main-view-container):not(.main-view-container__scroll-node)::before, .aesthetic-mode-ethereal .Root__main-view .main-view-container__scroll-node-child:not(.main-view-container):not(.main-view-container__scroll-node)::before, .Root__main-view .aesthetic-mode-ethereal .main-view-container__scroll-node-child:not(.main-view-container):not(.main-view-container__scroll-node)::before, .aesthetic-mode-ethereal .main-view-container__scroll-node:not(.main-view-container):not(.main-view-container__scroll-node)::before, .aesthetic-mode-ethereal .Root__now-playing-bar:not(.main-view-container):not(.main-view-container__scroll-node)::before, .aesthetic-mode-ethereal .Root__nav-bar:not(.main-view-container):not(.main-view-container__scroll-node)::before, .aesthetic-mode-ethereal .main-view-container:not(.main-view-container):not(.main-view-container__scroll-node)::before {
  content: "";
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  background: radial-gradient(circle at 20% 80%, rgba(var(--layered-effect-rgb), 0.1) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(var(--layered-scanline-rgb), 0.1) 0%, transparent 50%), radial-gradient(circle at 40% 40%, rgba(var(--layered-effect-rgb), 0.05) 0%, transparent 30%);
  pointer-events: none;
}

.aesthetic-mode-natural {
  --aberration-intensity: 0.4;
  --aberration-color-separation: 2px;
  --aberration-red-shift: 1.5px;
  --aberration-blue-shift: -1.5px;
  --aberration-green-shift: 0px;
  --aberration-wave-frequency: 4s;
}
.aesthetic-mode-natural .layered-element, .aesthetic-mode-natural .Root__main-view .main-view-container__scroll-node-child, .Root__main-view .aesthetic-mode-natural .main-view-container__scroll-node-child, .aesthetic-mode-natural .main-view-container__scroll-node, .aesthetic-mode-natural .Root__now-playing-bar, .aesthetic-mode-natural .Root__nav-bar, .aesthetic-mode-natural .main-view-container {
  animation: visual-effects-layered-flicker calc(1.5s / var(--layered-flicker-rate, 4)) ease-in-out infinite, visual-effects-aberration-waves calc(var(--aberration-wave-frequency)) ease-in-out infinite;
}
.aesthetic-mode-natural .layered-element::before, .aesthetic-mode-natural .Root__main-view .main-view-container__scroll-node-child::before, .Root__main-view .aesthetic-mode-natural .main-view-container__scroll-node-child::before, .aesthetic-mode-natural .main-view-container__scroll-node::before, .aesthetic-mode-natural .Root__now-playing-bar::before, .aesthetic-mode-natural .Root__nav-bar::before, .aesthetic-mode-natural .main-view-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(120deg, rgba(var(--layered-effect-rgb), var(--layered-natural-warmth)) 0%, transparent 50%, rgba(var(--layered-scanline-rgb), var(--layered-natural-warmth)) 100%);
  background-size: 200% 200%;
  background-position: 0% 0%;
  animation: simple-gradient-flow 10s linear infinite;
  opacity: 0.3;
  pointer-events: none;
}

.music-energy-high .layered-element, .music-energy-high .Root__main-view .main-view-container__scroll-node-child, .Root__main-view .music-energy-high .main-view-container__scroll-node-child, .music-energy-high .main-view-container__scroll-node, .music-energy-high .Root__now-playing-bar, .music-energy-high .Root__nav-bar, .music-energy-high .main-view-container {
  --layered-music-flicker-intensity: 0.8;
  animation-duration: calc(0.3s / var(--layered-flicker-rate, 10)) !important;
}

.music-energy-medium .layered-element, .music-energy-medium .Root__main-view .main-view-container__scroll-node-child, .Root__main-view .music-energy-medium .main-view-container__scroll-node-child, .music-energy-medium .main-view-container__scroll-node, .music-energy-medium .Root__now-playing-bar, .music-energy-medium .Root__nav-bar, .music-energy-medium .main-view-container {
  --layered-music-flicker-intensity: 0.5;
}

.music-energy-low .layered-element, .music-energy-low .Root__main-view .main-view-container__scroll-node-child, .Root__main-view .music-energy-low .main-view-container__scroll-node-child, .music-energy-low .main-view-container__scroll-node, .music-energy-low .Root__now-playing-bar, .music-energy-low .Root__nav-bar, .music-energy-low .main-view-container {
  --layered-music-flicker-intensity: 0.2;
  animation-duration: calc(2s / var(--layered-flicker-rate, 3)) !important;
}

.beat-detected .layered-element, .beat-detected .Root__main-view .main-view-container__scroll-node-child, .Root__main-view .beat-detected .main-view-container__scroll-node-child, .beat-detected .main-view-container__scroll-node, .beat-detected .Root__now-playing-bar, .beat-detected .Root__nav-bar, .beat-detected .main-view-container {
  animation: visual-effects-layered-flicker 0.1s ease-out, visual-effects-atmospheric-depth 2s ease-in-out infinite !important;
}

.main-view-container {
  perspective: var(--layered-perspective-depth);
  transform-style: preserve-3d;
  background: rgba(var(--layered-effect-rgb), calc(var(--layered-glow-intensity) * 0.05)), linear-gradient(135deg, transparent 0%, rgba(var(--layered-effect-rgb), calc(var(--layered-glow-intensity) * 0.02)) 50%, transparent 100%);
  transform: translateZ(calc(var(--layered-depth-offset) * var(--volumetric-depth-intensity)));
  box-shadow: 0 0 calc(var(--layered-atmospheric-depth) * 25px) rgba(var(--layered-effect-rgb), calc(var(--layered-glow-intensity) * 1)), inset 0 0 calc(var(--layered-atmospheric-depth) * 12px) rgba(var(--layered-effect-rgb), calc(var(--layered-glow-intensity) * 1 * 0.3)), 0 calc(var(--layered-depth-offset) * 0.3) calc(var(--volumetric-shadow-blur)) rgba(var(--layered-effect-rgb), calc(var(--volumetric-depth-intensity) * 1 * 0.3));
}
.main-view-container[data-visualeffects-enhanced=true] {
  background: transparent;
  background-color: transparent;
}
.main-view-container[data-visualeffects-enhanced=true]::before, .main-view-container[data-visualeffects-enhanced=true]::after {
  content: none;
}
.main-view-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 1;
  clip-path: polygon(0% 0%, 100% 0%, 100% 15%, 85% 15%, 85% 85%, 100% 85%, 100% 100%, 0% 100%, 0% 85%, 15% 85%, 15% 15%, 0% 15%);
  backdrop-filter: contrast(calc(1 + var(--visual-effects-scanline-density, 0.5) * 0.03)) saturate(calc(1 + var(--visual-effects-scanline-density, 0.5) * 0.05)) brightness(calc(1 + var(--visual-effects-scanline-density, 0.5) * 0.01));
  background: radial-gradient(ellipse 100px 60px at 10% 20%, hsla(calc(180 + var(--temperature-scanline-color-shift, 0)), 60%, 70%, calc(var(--visual-effects-scanline-opacity, 0.15) * 0.04)) 0%, transparent 70%), radial-gradient(ellipse 100px 60px at 90% 80%, hsla(calc(200 + var(--temperature-scanline-color-shift, 0)), 70%, 60%, calc(var(--visual-effects-scanline-opacity, 0.15) * 0.04)) 0%, transparent 70%);
  mix-blend-mode: color-dodge;
  opacity: calc(var(--visual-effects-scanline-opacity, 0.15) * 0.3 * (1 - var(--reading-mode-active, 0) * 0.8) * (1 - var(--user-interaction-detected, 0) * 0.3));
  filter: none;
}
.main-view-container::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 2;
  opacity: calc(var(--visual-effects-scanline-complexity) * 0.3);
  backdrop-filter: sepia(calc(var(--visual-effects-scanline-complexity) * 0.1)) contrast(calc(1 + var(--visual-effects-scanline-complexity) * 0.1)) saturate(calc(1 + var(--visual-effects-scanline-complexity) * 0.15));
  background: linear-gradient(45deg, transparent 0%, hsla(calc(220 + var(--temperature-scanline-color-shift)), 80%, 60%, calc(var(--visual-effects-scanline-complexity) * 0.03)) 30%, transparent 70%, hsla(calc(160 + var(--temperature-scanline-color-shift)), 80%, 60%, calc(var(--visual-effects-scanline-complexity) * 0.02)) 85%, transparent 100%);
  mix-blend-mode: overlay;
  animation-play-state: var(--visual-effects-scanline-interference);
}

.Root__nav-bar {
  position: relative;
}
.Root__nav-bar::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(90deg, transparent 0px, rgba(var(--layered-scanline-rgb), 0.1) 2px, transparent 4px, transparent 20px);
  background-size: 40px 100%;
  animation: simple-gradient-flow 4s linear infinite;
  pointer-events: none;
}

.Root__now-playing-bar {
  transform: translateZ(calc(var(--layered-depth-offset) * var(--volumetric-depth-intensity) * 1.2));
  box-shadow: 0 0 calc(var(--layered-atmospheric-depth) * 30px) rgba(var(--layered-effect-rgb), calc(var(--layered-glow-intensity) * 1 * 1.2)), inset 0 0 calc(var(--layered-atmospheric-depth) * 12px) rgba(var(--layered-effect-rgb), calc(var(--layered-glow-intensity) * 1 * 0.3)), 0 calc(var(--layered-depth-offset) * 0.4) calc(var(--volumetric-shadow-blur) * 1.2) rgba(var(--layered-effect-rgb), calc(var(--volumetric-depth-intensity) * 1 * 0.4));
}
.Root__now-playing-bar[data-visual-effects-level=high] {
  animation: visual-effects-atmospheric-depth 0.5s ease-in-out infinite;
}

.main-view-container__scroll-node .main-trackList-trackListRow {
  transition: all 0.3s ease-out;
}
.main-view-container__scroll-node .main-trackList-trackListRow:hover, .main-view-container__scroll-node .main-trackList-trackListRow.main-trackList-selected {
  background: rgba(var(--layered-effect-rgb), calc(var(--layered-glow-intensity) * 0.1));
  box-shadow: 0 0 calc(var(--layered-atmospheric-depth) * 15px) rgba(var(--layered-effect-rgb), calc(var(--layered-glow-intensity) * 0.75 * 0.6)), inset 0 0 calc(var(--layered-atmospheric-depth) * 6px) rgba(var(--layered-effect-rgb), calc(var(--layered-glow-intensity) * 0.75 * 0.2));
}

.Root__main-view .main-view-container__scroll-node-child::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(0deg, transparent 0px, transparent 1px, rgba(var(--layered-scanline-rgb), calc(var(--layered-glow-intensity) * 0.08)) 2px, rgba(var(--layered-scanline-rgb), calc(var(--layered-glow-intensity) * 0.08)) 2px);
  pointer-events: none;
  opacity: 0.6;
}

.layered-element[data-visual-effects-level=high], [data-visual-effects-level=high].main-view-container, [data-visual-effects-level=high].Root__nav-bar, [data-visual-effects-level=high].Root__now-playing-bar, [data-visual-effects-level=high].main-view-container__scroll-node, .Root__main-view [data-visual-effects-level=high].main-view-container__scroll-node-child,
.layered-element[style*="--aberration-intensity"][style*="0.7"],
[style*="--aberration-intensity"][style*="0.7"].main-view-container,
[style*="--aberration-intensity"][style*="0.7"].Root__nav-bar,
[style*="--aberration-intensity"][style*="0.7"].Root__now-playing-bar,
[style*="--aberration-intensity"][style*="0.7"].main-view-container__scroll-node,
.Root__main-view [style*="--aberration-intensity"][style*="0.7"].main-view-container__scroll-node-child {
  position: relative;
}
.layered-element[data-visual-effects-level=high]::before, [data-visual-effects-level=high].main-view-container::before, [data-visual-effects-level=high].Root__nav-bar::before, [data-visual-effects-level=high].Root__now-playing-bar::before, [data-visual-effects-level=high].main-view-container__scroll-node::before, .Root__main-view [data-visual-effects-level=high].main-view-container__scroll-node-child::before,
.layered-element[style*="--aberration-intensity"][style*="0.7"]::before,
[style*="--aberration-intensity"][style*="0.7"].main-view-container::before,
[style*="--aberration-intensity"][style*="0.7"].Root__nav-bar::before,
[style*="--aberration-intensity"][style*="0.7"].Root__now-playing-bar::before,
[style*="--aberration-intensity"][style*="0.7"].main-view-container__scroll-node::before,
.Root__main-view [style*="--aberration-intensity"][style*="0.7"].main-view-container__scroll-node-child::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: -1;
  background: linear-gradient(45deg, rgba(255, 50, 50, calc(var(--aberration-intensity, 0.5) * 0.1)) 0%, transparent 30%, transparent 70%, rgba(50, 150, 255, calc(var(--aberration-intensity, 0.5) * 0.1)) 100%);
  filter: drop-shadow(calc(var(--aberration-red-shift, 2px) * 0.5) calc(var(--aberration-red-shift, 2px) * 0.3) 0 rgba(255, 0, 0, calc(var(--aberration-intensity, 0.5) * 0.2))) drop-shadow(calc(var(--aberration-blue-shift, -2px) * 0.7) calc(var(--aberration-blue-shift, -2px) * -0.2) 0 rgba(0, 100, 255, calc(var(--aberration-intensity, 0.5) * 0.2)));
  animation: visual-effects-aberration-waves calc(var(--aberration-wave-frequency, 2s)) ease-in-out infinite, visual-effects-chromatic-aberration calc(var(--aberration-wave-frequency, 2s) * 1.5) ease-in-out infinite;
}
.layered-element[data-visual-effects-level=high]::after, [data-visual-effects-level=high].main-view-container::after, [data-visual-effects-level=high].Root__nav-bar::after, [data-visual-effects-level=high].Root__now-playing-bar::after, [data-visual-effects-level=high].main-view-container__scroll-node::after, .Root__main-view [data-visual-effects-level=high].main-view-container__scroll-node-child::after,
.layered-element[style*="--aberration-intensity"][style*="0.7"]::after,
[style*="--aberration-intensity"][style*="0.7"].main-view-container::after,
[style*="--aberration-intensity"][style*="0.7"].Root__nav-bar::after,
[style*="--aberration-intensity"][style*="0.7"].Root__now-playing-bar::after,
[style*="--aberration-intensity"][style*="0.7"].main-view-container__scroll-node::after,
.Root__main-view [style*="--aberration-intensity"][style*="0.7"].main-view-container__scroll-node-child::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: -2;
  background: radial-gradient(ellipse 200px 100px at 30% 70%, rgba(var(--layered-effect-rgb), calc(var(--aberration-intensity, 0.5) * 0.08)) 0%, transparent 60%), radial-gradient(ellipse 150px 200px at 70% 30%, rgba(var(--layered-scanline-rgb), calc(var(--aberration-intensity, 0.5) * 0.06)) 0%, transparent 60%);
  filter: drop-shadow(calc(var(--aberration-green-shift, 0px) * 2) calc(var(--aberration-red-shift, 2px) * -0.5) 0 rgba(100, 255, 100, calc(var(--aberration-intensity, 0.5) * 0.15)));
  animation: musical-aberration-pulse calc(var(--aberration-wave-frequency, 2s) * 0.7) ease-in-out infinite;
  mix-blend-mode: color-dodge;
}

.beat-detected .layered-element, .beat-detected .main-view-container, .beat-detected .Root__nav-bar, .beat-detected .Root__now-playing-bar, .beat-detected .main-view-container__scroll-node, .beat-detected .Root__main-view .main-view-container__scroll-node-child, .Root__main-view .beat-detected .main-view-container__scroll-node-child,
.music-energy-high .layered-element,
.music-energy-high .main-view-container,
.music-energy-high .Root__nav-bar,
.music-energy-high .Root__now-playing-bar,
.music-energy-high .main-view-container__scroll-node,
.music-energy-high .Root__main-view .main-view-container__scroll-node-child,
.Root__main-view .music-energy-high .main-view-container__scroll-node-child {
  --aberration-intensity: calc(var(--aberration-intensity, 0.5) * 1.4);
  --aberration-color-separation: calc(var(--aberration-color-separation, 3px) * 1.2);
}
.beat-detected .layered-element::before, .beat-detected .main-view-container::before, .beat-detected .Root__nav-bar::before, .beat-detected .Root__now-playing-bar::before, .beat-detected .main-view-container__scroll-node::before, .beat-detected .Root__main-view .main-view-container__scroll-node-child::before, .Root__main-view .beat-detected .main-view-container__scroll-node-child::before, .beat-detected .layered-element::after, .beat-detected .main-view-container::after, .beat-detected .Root__nav-bar::after, .beat-detected .Root__now-playing-bar::after, .beat-detected .main-view-container__scroll-node::after, .beat-detected .Root__main-view .main-view-container__scroll-node-child::after, .Root__main-view .beat-detected .main-view-container__scroll-node-child::after,
.music-energy-high .layered-element::before,
.music-energy-high .main-view-container::before,
.music-energy-high .Root__nav-bar::before,
.music-energy-high .Root__now-playing-bar::before,
.music-energy-high .main-view-container__scroll-node::before,
.music-energy-high .Root__main-view .main-view-container__scroll-node-child::before,
.Root__main-view .music-energy-high .main-view-container__scroll-node-child::before,
.music-energy-high .layered-element::after,
.music-energy-high .main-view-container::after,
.music-energy-high .Root__nav-bar::after,
.music-energy-high .Root__now-playing-bar::after,
.music-energy-high .main-view-container__scroll-node::after,
.music-energy-high .Root__main-view .main-view-container__scroll-node-child::after,
.Root__main-view .music-energy-high .main-view-container__scroll-node-child::after {
  animation-duration: calc(var(--aberration-wave-frequency, 2s) * 0.3) !important;
}

@media (min-width: 1200px) and (min-height: 800px) {
  .layered-element, .main-view-container, .Root__nav-bar, .Root__now-playing-bar, .main-view-container__scroll-node, .Root__main-view .main-view-container__scroll-node-child {
    --aberration-color-separation: calc(var(--aberration-color-separation, 3px) * 1.2);
    --aberration-red-shift: calc(var(--aberration-red-shift, 2px) * 1.1);
    --aberration-blue-shift: calc(var(--aberration-blue-shift, -2px) * 1.1);
  }
}
@media (max-width: 768px) {
  .layered-element, .main-view-container, .Root__nav-bar, .Root__now-playing-bar, .main-view-container__scroll-node, .Root__main-view .main-view-container__scroll-node-child {
    --aberration-intensity: calc(var(--aberration-intensity, 0.5) * 0.7);
    --aberration-color-separation: calc(var(--aberration-color-separation, 3px) * 0.8);
  }
  .layered-element::before, .main-view-container::before, .Root__nav-bar::before, .Root__now-playing-bar::before, .main-view-container__scroll-node::before, .Root__main-view .main-view-container__scroll-node-child::before, .layered-element::after, .main-view-container::after, .Root__nav-bar::after, .Root__now-playing-bar::after, .main-view-container__scroll-node::after, .Root__main-view .main-view-container__scroll-node-child::after {
    display: none;
  }
}
.main-view-container[data-reading-mode=active],
.main-view-container[style*="--reading-mode-active: 1"] {
  backdrop-filter: contrast(1.1) brightness(1.02) saturate(0.95);
}
.main-view-container[data-reading-mode=active]::before,
.main-view-container[style*="--reading-mode-active: 1"]::before {
  opacity: calc(var(--visual-effects-scanline-opacity, 0.15) * 0.1);
  animation-duration: 8s;
}
.main-view-container[data-reading-mode=active]::after,
.main-view-container[style*="--reading-mode-active: 1"]::after {
  opacity: calc(var(--visual-effects-scanline-complexity) * 0.05);
}
.main-view-container[data-reading-mode=active] .main-trackList-trackListRow,
.main-view-container[data-reading-mode=active] .main-entityHeader-titleText,
.main-view-container[data-reading-mode=active] .main-entityHeader-subtitle,
.main-view-container[data-reading-mode=active] .Type__TypeElement,
.main-view-container[style*="--reading-mode-active: 1"] .main-trackList-trackListRow,
.main-view-container[style*="--reading-mode-active: 1"] .main-entityHeader-titleText,
.main-view-container[style*="--reading-mode-active: 1"] .main-entityHeader-subtitle,
.main-view-container[style*="--reading-mode-active: 1"] .Type__TypeElement {
  text-shadow: 0 0 1px rgba(0, 0, 0, 0.8), 0 0 2px rgba(0, 0, 0, 0.4);
  backdrop-filter: contrast(1.15);
}

.main-view-container .main-trackList-trackList::before,
.main-view-container .main-entityHeader::before,
.main-view-container [class*=lyrics]::before {
  opacity: calc(var(--visual-effects-scanline-opacity, 0.15) * 0.05);
  clip-path: polygon(0% 0%, 100% 0%, 100% 5%, 95% 5%, 95% 95%, 100% 95%, 100% 100%, 0% 100%, 0% 95%, 5% 95%, 5% 5%, 0% 5%);
}

@media (prefers-reduced-motion: reduce) {
  .layered-element, .main-view-container, .Root__nav-bar, .Root__now-playing-bar, .main-view-container__scroll-node, .Root__main-view .main-view-container__scroll-node-child {
    animation: none !important;
  }
  .layered-element::before, .main-view-container::before, .Root__nav-bar::before, .Root__now-playing-bar::before, .main-view-container__scroll-node::before, .Root__main-view .main-view-container__scroll-node-child::before, .layered-element::after, .main-view-container::after, .Root__nav-bar::after, .Root__now-playing-bar::after, .main-view-container__scroll-node::after, .Root__main-view .main-view-container__scroll-node-child::after {
    animation: none !important;
  }
  .main-view-container,
  .Root__now-playing-bar {
    box-shadow: 0 0 10px rgba(var(--layered-effect-rgb), calc(var(--layered-glow-intensity) * 0.5)), inset 0 0 5px rgba(var(--layered-effect-rgb), calc(var(--layered-glow-intensity) * 0.2));
  }
}
@media (max-width: 768px) {
  :root {
    --layered-atmospheric-depth-mobile: calc(var(--layered-atmospheric-depth) * 0.7);
    --layered-chromatic-shift-mobile: calc(var(--layered-chromatic-shift) * 0.5);
  }
  .layered-element, .main-view-container, .Root__nav-bar, .Root__now-playing-bar, .main-view-container__scroll-node, .Root__main-view .main-view-container__scroll-node-child {
    animation-duration: 4s !important;
  }
  .layered-element::before, .main-view-container::before, .Root__nav-bar::before, .Root__now-playing-bar::before, .main-view-container__scroll-node::before, .Root__main-view .main-view-container__scroll-node-child::before, .layered-element::after, .main-view-container::after, .Root__nav-bar::after, .Root__now-playing-bar::after, .main-view-container__scroll-node::after, .Root__main-view .main-view-container__scroll-node-child::after {
    opacity: calc(var(--layered-glow-intensity) * 0.5) !important;
  }
}
@media (prefers-contrast: high) {
  :root {
    --layered-glow-intensity-contrast: 0.8;
    --layered-atmospheric-depth-contrast: 0.6;
  }
  .layered-element, .main-view-container, .Root__nav-bar, .Root__now-playing-bar, .main-view-container__scroll-node, .Root__main-view .main-view-container__scroll-node-child {
    box-shadow: 0 0 20px rgba(var(--layered-effect-rgb), 0.6), inset 0 0 10px rgba(var(--layered-effect-rgb), 0.3) !important;
  }
}
@keyframes visual-layered-flicker {
  0% {
    opacity: var(--layered-glow-intensity);
    filter: drop-shadow(0 0 5px rgba(var(--layered-effect-rgb), 0.4)) hue-rotate(0deg);
  }
  50% {
    opacity: calc(var(--layered-glow-intensity) * 0.7);
    filter: drop-shadow(0 0 8px rgba(var(--layered-effect-rgb), 0.6)) hue-rotate(10deg);
  }
  100% {
    opacity: var(--layered-glow-intensity);
    filter: drop-shadow(0 0 5px rgba(var(--layered-effect-rgb), 0.4)) hue-rotate(0deg);
  }
}
@keyframes visual-chromatic-aberration {
  0% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(var(--aberration-red-shift));
  }
  50% {
    transform: translateX(0);
  }
  75% {
    transform: translateX(var(--aberration-blue-shift));
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes natural-aberration-waves {
  0% {
    transform: translateY(0) scaleY(1);
  }
  50% {
    transform: translateY(2px) scaleY(0.98);
  }
  100% {
    transform: translateY(0) scaleY(1);
  }
}
@keyframes visual-atmospheric-depth {
  0% {
    transform: translateZ(0);
    opacity: 1;
  }
  50% {
    transform: translateZ(var(--visual-effects-depth-offset));
    opacity: 0.9;
  }
  100% {
    transform: translateZ(0);
    opacity: 1;
  }
}
@keyframes natural-visual-interference {
  0% {
    filter: opacity(1);
  }
  33% {
    filter: opacity(0.9);
  }
  66% {
    filter: opacity(0.95);
  }
  100% {
    filter: opacity(1);
  }
}
/**
 * White Layer Fixes - Prevents white layer interference with gradients
 * Part of the Reality Bleeding Gradients system
 * 
 * Fixes common sources of white layer interference:
 * - Chromatic aberration white textures
 * - Screen blend mode white bleeding
 * - Backdrop filter white fallbacks
 * - WebGL context failure white renders
 */
/* Fix chromatic aberration white texture issues */
.sn-chromatic-aberration-fix, body {
  /* Override screen blend mode with safer overlay - only for canvas backgrounds */
  /* Ensure transparent backgrounds instead of white - only canvas elements */
}
.sn-chromatic-aberration-fix canvas[style*="mix-blend-mode: screen"]:not(.sn-shimmer-layer):not(.sn-fluid-gradients), body canvas[style*="mix-blend-mode: screen"]:not(.sn-shimmer-layer):not(.sn-fluid-gradients) {
  mix-blend-mode: overlay;
  opacity: 0.6;
}
.sn-chromatic-aberration-fix canvas[style*=mix-blend-mode]:not(.sn-shimmer-layer), body canvas[style*=mix-blend-mode]:not(.sn-shimmer-layer) {
  background: transparent;
}

/* Fix screen blend mode white bleeding */
.sn-screen-blend-fix, body {
  /* Limit screen blend mode usage - only for background layers, not UI */
  /* Reduce intensity of screen blend modes - canvas/background only */
}
.sn-screen-blend-fix [style*="mix-blend-mode: screen"]:not(.main-card-card):not(.main-card-cardContainer):not(.main-trackList-trackListRow):not(:first-of-type), body [style*="mix-blend-mode: screen"]:not(.main-card-card):not(.main-card-cardContainer):not(.main-trackList-trackListRow):not(:first-of-type) {
  mix-blend-mode: overlay;
  opacity: 0.8;
}
.sn-screen-blend-fix canvas[style*="mix-blend-mode: screen"], body canvas[style*="mix-blend-mode: screen"],
.sn-screen-blend-fix .sn-depth-background-container [style*="mix-blend-mode: screen"],
body .sn-depth-background-container [style*="mix-blend-mode: screen"] {
  opacity: 0.7;
}

/* Fix backdrop filter white fallbacks */
.sn-backdrop-filter-fix, body {
  /* Provide transparent fallbacks for backdrop-filter - background layers only */
  /* Ensure backdrop filters don't create white layers - scoped to backgrounds */
}
@supports not (backdrop-filter: blur(1px)) {
  .sn-backdrop-filter-fix .sn-depth-background-container [style*=backdrop-filter], body .sn-depth-background-container [style*=backdrop-filter],
  .sn-backdrop-filter-fix canvas[style*=backdrop-filter],
  body canvas[style*=backdrop-filter] {
    background: rgba(0, 0, 0, 0.1);
    backdrop-filter: none;
  }
}
.sn-backdrop-filter-fix .sn-depth-background-container [style*=backdrop-filter]:not(.main-card-card):not(.main-card-cardContainer):not(.main-button-primary), body .sn-depth-background-container [style*=backdrop-filter]:not(.main-card-card):not(.main-card-cardContainer):not(.main-button-primary),
.sn-backdrop-filter-fix .sn-cosmic-ambient-layer [style*=backdrop-filter]:not(.main-card-card):not(.main-card-cardContainer):not(.main-button-primary),
body .sn-cosmic-ambient-layer [style*=backdrop-filter]:not(.main-card-card):not(.main-card-cardContainer):not(.main-button-primary) {
  background: transparent;
}
.sn-backdrop-filter-fix .sn-depth-background-container [style*=backdrop-filter]:not(.main-card-card):not(.main-card-cardContainer):not(.main-button-primary)::before, body .sn-depth-background-container [style*=backdrop-filter]:not(.main-card-card):not(.main-card-cardContainer):not(.main-button-primary)::before,
.sn-backdrop-filter-fix .sn-cosmic-ambient-layer [style*=backdrop-filter]:not(.main-card-card):not(.main-card-cardContainer):not(.main-button-primary)::before,
body .sn-cosmic-ambient-layer [style*=backdrop-filter]:not(.main-card-card):not(.main-card-cardContainer):not(.main-button-primary)::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.05);
  z-index: -1;
}

/* Fix WebGL context failure white renders */
.sn-webgl-context-fix, body {
  /* Hide WebGL canvases that might render white on failure - background only */
}
.sn-webgl-context-fix canvas[style*=mix-blend-mode]:not(.sn-shimmer-layer), body canvas[style*=mix-blend-mode]:not(.sn-shimmer-layer) {
  /* Ensure transparent background for WebGL canvases */
  background: transparent;
  /* Hide canvas if WebGL context is lost */
}
.sn-webgl-context-fix canvas[style*=mix-blend-mode]:not(.sn-shimmer-layer):not([data-webgl-ready=true]), body canvas[style*=mix-blend-mode]:not(.sn-shimmer-layer):not([data-webgl-ready=true]) {
  opacity: 0;
}

/* Fix floating crystal white backgrounds */
.sn-floating-crystal-fix, body {
  /* Override white gradients in floating crystals - background layer only */
}
.sn-floating-crystal-fix .sn-depth-background-container .floating-crystal, body .sn-depth-background-container .floating-crystal {
  background: radial-gradient(ellipse at center, rgba(203, 166, 247, 0.1) 0%, rgba(203, 166, 247, 0) 70%);
}

/* Fix white layer z-index conflicts */
.sn-z-index-fix, body {
  /* Ensure gradient layers have proper z-index hierarchy - background systems only */
  /* Ensure aberration canvas stays below other effects but above deep backgrounds */
  /* Fix Reality Bleeding Gradients system z-index hierarchy */
  /* Ensure consciousness layers don't conflict */
  /* Fix cosmic consciousness background layers */
  /* Ensure floating crystals don't interfere with gradients */
}
.sn-z-index-fix .sn-webgl-gradient, body .sn-webgl-gradient,
.sn-z-index-fix .sn-css-gradient,
body .sn-css-gradient {
  z-index: -10;
}
.sn-z-index-fix .sn-depth-background-container, body .sn-depth-background-container {
  z-index: -20;
}
.sn-z-index-fix .sn-shimmer-layer, body .sn-shimmer-layer {
  z-index: 1;
}
.sn-z-index-fix canvas[style*=mix-blend-mode]:not(.sn-interactive), body canvas[style*=mix-blend-mode]:not(.sn-interactive) {
  z-index: -5;
}
.sn-z-index-fix .sn-fluid-gradients-layer, body .sn-fluid-gradients-layer {
  z-index: -8;
}
.sn-z-index-fix .sn-flow-gradient-layer, body .sn-flow-gradient-layer {
  z-index: -7;
}
.sn-z-index-fix .sn-iridescent-shimmer-layer, body .sn-iridescent-shimmer-layer {
  z-index: -6;
}
.sn-z-index-fix .sn-ambient-layer, body .sn-ambient-layer {
  z-index: -10;
}
.sn-z-index-fix .sn-temporal-layer, body .sn-temporal-layer {
  z-index: -9;
}
.sn-z-index-fix .sn-cosmic-ambient-layer, body .sn-cosmic-ambient-layer {
  z-index: -1000;
}
.sn-z-index-fix .floating-crystal, body .floating-crystal {
  z-index: -15;
}

/* Emergency white layer suppression */
.sn-emergency-white-fix, body.sn-white-layer-emergency {
  /* Hide background elements that might be causing white layer issues - exclude UI */
  /* Ensure mix-blend-mode effects don't cause white bleeding - background only */
}
.sn-emergency-white-fix .sn-depth-background-container *[style*="background: white"], body.sn-white-layer-emergency .sn-depth-background-container *[style*="background: white"],
.sn-emergency-white-fix .sn-depth-background-container *[style*="background-color: white"],
body.sn-white-layer-emergency .sn-depth-background-container *[style*="background-color: white"],
.sn-emergency-white-fix .sn-depth-background-container *[style*="background-color: #fff"],
body.sn-white-layer-emergency .sn-depth-background-container *[style*="background-color: #fff"],
.sn-emergency-white-fix .sn-depth-background-container *[style*="background-color: #ffffff"],
body.sn-white-layer-emergency .sn-depth-background-container *[style*="background-color: #ffffff"],
.sn-emergency-white-fix canvas[style*="background: white"]:not(.sn-interactive),
body.sn-white-layer-emergency canvas[style*="background: white"]:not(.sn-interactive) {
  background: transparent !important;
}
.sn-emergency-white-fix .sn-depth-background-container *[style*=mix-blend-mode]:not(.sn-shimmer-layer):not(.sn-fluid-gradients), body.sn-white-layer-emergency .sn-depth-background-container *[style*=mix-blend-mode]:not(.sn-shimmer-layer):not(.sn-fluid-gradients),
.sn-emergency-white-fix canvas[style*=mix-blend-mode]:not(.sn-interactive):not(.sn-shimmer-layer):not(.sn-fluid-gradients),
body.sn-white-layer-emergency canvas[style*=mix-blend-mode]:not(.sn-interactive):not(.sn-shimmer-layer):not(.sn-fluid-gradients) {
  mix-blend-mode: overlay !important;
  opacity: 0.6 !important;
}

/* Apply fixes globally - classes are used by TypeScript WhiteLayerDiagnosticSystem */
body {
  /* Apply emergency fixes if white layers are detected */
}
/* CSS variables for white layer diagnostics */
:root {
  --sn-white-layer-critical-issues: 0;
  --sn-white-layer-high-issues: 0;
  --sn-white-layer-total-issues: 0;
  --sn-white-layer-status: "ok";
}

/* Visual indicator for white layer issues */
.sn-white-layer-indicator {
  position: fixed;
  top: 10px;
  right: 10px;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  z-index: 9999;
  pointer-events: none;
  transition: all 0.3s ease;
}
.sn-white-layer-indicator[data-status=ok] {
  background: rgba(166, 227, 161, 0.2);
  color: var(--spice-green);
  border: 1px solid var(--spice-green);
  opacity: 0;
}
.sn-white-layer-indicator[data-status=warning] {
  background: rgba(250, 179, 135, 0.2);
  color: var(--spice-peach);
  border: 1px solid var(--spice-peach);
  opacity: 1;
}
.sn-white-layer-indicator[data-status=critical] {
  background: rgba(243, 139, 168, 0.2);
  color: var(--spice-pink);
  border: 1px solid var(--spice-pink);
  opacity: 1;
}

/* Hide white layer indicator in production */
body:not(.sn-debug-mode) .sn-white-layer-indicator {
  display: none;
}

section[data-testid=component-shelf] .main-gridContainer-gridContainer,
.main-shelf-shelf .main-gridContainer-gridContainer,
.main-gridContainer-gridContainer.main-shelf-shelfGrid {
  animation: year3000-stream-breathe var(--temporal-evolution-speed, 90s) ease-in-out infinite alternate;
  transform-style: preserve-3d;
}

@keyframes year3000-stream-breathe {
  0%, 100% {
    transform: rotateY(0deg) rotateX(0deg) translateZ(0);
  }
  50% {
    transform: rotateY(6deg) rotateX(1deg) translateZ(12px);
  }
}
@media (prefers-reduced-motion: reduce) {
  section[data-testid=component-shelf] .main-gridContainer-gridContainer,
  .main-shelf-shelf .main-gridContainer-gridContainer,
  .main-gridContainer-gridContainer.main-shelf-shelfGrid {
    animation: none !important;
    transform: none !important;
  }
}
:root {
  --dynamic-interface-intensity: calc(
    var(--visual-effects-breach-intensity, 1) * 0.6
  );
  --dynamic-animation-rate: 8s;
  --dynamic-response-depth: 0.4;
  --ethereal-glow-base: calc(
    var(--quantum-field-opacity, 0.25) * 0.8
  );
  --ethereal-flow-speed: 12s;
  --ethereal-shimmer-subtlety: 0.3;
  --cosmic-saturation: 1.3;
  --cosmic-blur-poetry: 8px;
  --cosmic-depth-layers: 60px;
  --interface-primary: rgba(
    var(--sn-accent-rgb, var(--spice-rgb-accent)),
    var(--ethereal-glow-base)
  );
  --interface-secondary: rgba(
    var(--sn-accent-rgb, var(--spice-rgb-surface0)),
    calc(var(--ethereal-glow-base) * 0.9)
  );
  --interface-accent: rgba(
    var(--sn-accent-rgb, var(--spice-rgb-accent)),
    calc(var(--ethereal-glow-base) * 1.1)
  );
  --interface-subtle: rgba(
    var(--sn-accent-rgb, var(--spice-rgb-accent)),
    calc(var(--ethereal-glow-base) * 0.3)
  );
}

@media (min-width: 1200px) and (min-resolution: 1.5dppx) {
  :root {
    --dynamic-interface-intensity: 0.8;
    --cosmic-blur-poetry: 12px;
    --cosmic-depth-layers: 80px;
  }
}
@media (min-width: 768px) and (max-width: 1199px) {
  :root {
    --dynamic-interface-intensity: 0.6;
    --cosmic-blur-poetry: 8px;
    --cosmic-depth-layers: 60px;
  }
}
@media (max-width: 767px) {
  :root {
    --dynamic-interface-intensity: 0.3;
    --cosmic-blur-poetry: 4px;
    --cosmic-depth-layers: 30px;
    --dynamic-animation-rate: 16s;
  }
}
.main-card-card,
.main-card-cardContainer {
  position: relative;
  will-change: transform, opacity, filter;
  transform: translateZ(0);
  backface-visibility: hidden;
  contain: layout style paint;
  position: relative;
  position: relative;
  border-radius: 12px 16px 14px 18px;
  transition: transform 0.3s var(--sn-anim-easing-organic), box-shadow 0.3s ease, filter 0.3s ease;
  will-change: transform, opacity, filter;
  transform: translateZ(0);
  backface-visibility: hidden;
  contain: layout style paint;
}
.main-card-card::before,
.main-card-cardContainer::before {
  content: "";
  position: absolute;
  top: -16px;
  left: -16px;
  right: -16px;
  bottom: -16px;
  z-index: -1;
  background: radial-gradient(ellipse 250% 120% at 40% 60%, var(--interface-primary) 0%, var(--interface-secondary) 40%, transparent 70%);
  border-radius: 16px 24px 20px 28px;
  filter: blur(var(--cosmic-blur-poetry)) saturate(var(--cosmic-saturation));
  animation: dynamic-animation var(--dynamic-animation-rate) ease-in-out infinite;
  opacity: 0;
  transform: scale(1.02);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.main-card-card:hover::before,
.main-card-cardContainer:hover::before {
  opacity: calc(var(--dynamic-interface-intensity) * 0.8);
  transform: scale(1.04);
}
@media (min-width: 1200px) and (prefers-reduced-motion: no-preference) {
  .main-card-card::after,
  .main-card-cardContainer::after {
    content: "";
    position: absolute;
    top: -6px;
    left: -6px;
    right: -6px;
    bottom: -6px;
    z-index: -2;
    background-image: radial-gradient(circle 1px at 25% 25%, var(--interface-accent) 1px, transparent 1px);
    background-size: 60px 60px;
    border-radius: 50%;
    filter: blur(1px);
    animation: ethereal-particle-gentle calc(var(--ethereal-flow-speed) * 2) ease-in-out infinite;
    opacity: 0;
    transition: opacity 0.4s ease;
    will-change: opacity;
  }
  .main-card-card:hover::after,
  .main-card-cardContainer:hover::after {
    opacity: calc(var(--dynamic-interface-intensity) * 0.5);
  }
}
.main-card-card:hover,
.main-card-cardContainer:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 8px 32px rgba(var(--sn-accent-rgb, var(--spice-rgb-accent)), calc(var(--dynamic-interface-intensity) * 0.3));
  filter: saturate(var(--cosmic-saturation));
}
.main-card-card:focus-visible,
.main-card-cardContainer:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(var(--sn-accent-rgb, var(--spice-rgb-accent)), 0.5);
}

div.main-trackList-trackListRow[role=row] {
  position: relative;
  border-radius: 8px;
  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
div.main-trackList-trackListRow[role=row]:hover {
  background: var(--interface-primary);
  transform: translateX(4px);
}
@media (min-width: 1200px) {
  div.main-trackList-trackListRow[role=row]:hover {
    box-shadow: -2px 0 8px rgba(var(--sn-accent-rgb, var(--spice-rgb-accent)), calc(var(--dynamic-interface-intensity) * 0.1));
  }
}
div.main-trackList-trackListRow[role=row][aria-selected=true]::before, div.main-trackList-trackListRow[role=row]:has(.main-trackList-playingIcon)::before {
  content: "";
  position: absolute;
  left: -3px;
  top: 25%;
  bottom: 25%;
  width: 2px;
  background: var(--interface-accent);
  border-radius: 1px;
}
@media (min-width: 768px) {
  div.main-trackList-trackListRow[role=row][aria-selected=true]::before, div.main-trackList-trackListRow[role=row]:has(.main-trackList-playingIcon)::before {
    animation: dynamic-pulse-simple var(--dynamic-animation-rate) ease-in-out infinite;
  }
}

.main-yourLibrary-yourLibrary .main-rootlist-wrapper .spicetify-playlist-list li {
  transition: background-color 0.2s ease, transform 0.2s ease;
  border-radius: 6px;
}
.main-yourLibrary-yourLibrary .main-rootlist-wrapper .spicetify-playlist-list li:hover {
  background: var(--interface-primary);
  transform: translateX(3px);
}
.main-yourLibrary-yourLibrary .main-rootlist-wrapper .spicetify-playlist-list li[aria-selected=true] {
  background: var(--interface-accent);
  border-left: 2px solid var(--interface-primary);
}

@keyframes dynamic-animation {
  0%, 100% {
    transform: scale(1.02);
    opacity: 0.7;
  }
  50% {
    transform: scale(1.04);
    opacity: 1;
  }
}
@keyframes dynamic-animation-simple {
  0%, 100% {
    opacity: 0.2;
  }
  50% {
    opacity: 0.4;
  }
}
@keyframes dynamic-pulse-simple {
  0%, 100% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
}
@keyframes ethereal-particle-gentle {
  0%, 100% {
    transform: translate(0, 0);
    opacity: 0.4;
  }
  50% {
    transform: translate(2px, -2px);
    opacity: 0.7;
  }
}
@media (prefers-reduced-motion: reduce) {
  :root {
    --dynamic-interface-intensity: 0.2;
    --dynamic-animation-rate: 30s;
  }
  * {
    animation: none !important;
  }
}
@media (prefers-reduced-data: reduce) {
  :root {
    --dynamic-interface-intensity: 0.1;
    --cosmic-blur-poetry: 2px;
  }
  .main-card-card::before, .main-card-card::after,
  .main-card-cardContainer::before,
  .main-card-cardContainer::after {
    display: none;
  }
}
@media (prefers-contrast: high) {
  :root {
    --cosmic-saturation: 1;
    --ethereal-glow-base: calc(
      var(--quantum-field-opacity, 0.25) * 1.5
    );
  }
}
:root {
  --conscious-elegance-intensity: var(--dynamic-interface-intensity);
  --conscious-breath-rate: var(--dynamic-animation-rate);
  --conscious-emotion-depth: var(--dynamic-response-depth);
  --soul-primary: var(--interface-primary);
  --soul-secondary: var(--interface-secondary);
  --soul-accent: var(--interface-accent);
  --soul-whisper: var(--interface-subtle);
}

@keyframes conscious-breathing {
  0%, 100% {
    transform: scale(1.02);
    opacity: 0.7;
  }
  50% {
    transform: scale(1.04);
    opacity: 1;
  }
}
@keyframes conscious-breathing-simple {
  0%, 100% {
    opacity: 0.2;
  }
  50% {
    opacity: 0.4;
  }
}
@keyframes conscious-pulse-simple {
  0%, 100% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
}
:root {
  --visual-effects-chromatic-intensity: var(--music-aberration-strength, 1px);
  --visual-effects-chromatic-speed: var(--living-pulse-speed, 8s);
  --visual-effects-prism-intensity: var(--music-prism-intensity, 0.4);
  --text-shimmer-intensity: 0.3;
  --text-shimmer-speed: var(--living-pulse-speed, 8s);
  --text-glow-strength: 0.2;
  --music-text-intensity: calc(
    var(--text-shimmer-intensity) +
    var(--sn-music-beat-pulse-intensity, 0) * 0.3
  );
  --music-glow-strength: calc(
    var(--text-glow-strength) +
    var(--sn-music-energy, 0) * 0.4
  );
}

h1,
h2,
h3,
.main-entityHeader-title,
.main-trackList-trackListHeaderRow th,
.main-cardHeader-text,
[data-encore-id=cardTitle] {
  color: rgba(var(--sn-bg-gradient-primary-rgb), 0.95);
  --local-shimmer-strength: 0.15;
  text-shadow: 0 0 calc(var(--local-shimmer-strength) * 10px) rgba(var(--sn-bg-gradient-accent-rgb), var(--music-glow-strength, 0.2));
  will-change: transform, opacity, filter;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
  contain: style paint;
  --text-shimmer-intensity: calc(0.3 * 0.7);
  opacity: var(--text-shimmer-intensity);
  text-shadow: 0 0 5px rgba(var(--sn-bg-gradient-accent-rgb), calc(0.2 * 0.7));
  animation: unified-text-shimmer calc(calc(1.5s * 1.3) * 1.5) ease-in-out infinite;
  animation-duration: var(--text-shimmer-speed, 8s);
  transition: text-shadow 0.3s ease-out, opacity 0.2s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  h1,
  h2,
  h3,
  .main-entityHeader-title,
  .main-trackList-trackListHeaderRow th,
  .main-cardHeader-text,
  [data-encore-id=cardTitle] {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    opacity: calc(0.5 * 0.7) !important;
    filter: none !important;
    transform: none !important;
  }
}
@media (prefers-contrast: high) {
  h1,
  h2,
  h3,
  .main-entityHeader-title,
  .main-trackList-trackListHeaderRow th,
  .main-cardHeader-text,
  [data-encore-id=cardTitle] {
    opacity: calc(0.7 * 1.3);
    filter: contrast(1.2);
  }
}

.main-nowPlayingBar-trackInfo strong,
.main-trackInfo-name,
.main-cardHeader-cardHeaderTitle,
.main-entityHeader-subtitle {
  --local-gradient-speed: calc(var(--text-shimmer-speed, 8s) * 1.5);
  background: linear-gradient(45deg, rgba(var(--sn-bg-gradient-primary-rgb), 1) 0%, rgba(var(--sn-bg-gradient-accent-rgb), 1) 50%, rgba(var(--sn-bg-gradient-secondary-rgb), 1) 100%);
  background-size: 200% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  animation: simple-gradient-flow var(--local-gradient-speed) linear infinite;
  transition: background-size 0.3s ease-out;
  transition: box-shadow 0.3s ease-out, transform 0.2s ease-out;
}
.main-nowPlayingBar-trackInfo strong:hover, .main-nowPlayingBar-trackInfo strong:focus, .main-nowPlayingBar-trackInfo strong[aria-selected=true],
.main-trackInfo-name:hover,
.main-trackInfo-name:focus,
.main-trackInfo-name[aria-selected=true],
.main-cardHeader-cardHeaderTitle:hover,
.main-cardHeader-cardHeaderTitle:focus,
.main-cardHeader-cardHeaderTitle[aria-selected=true],
.main-entityHeader-subtitle:hover,
.main-entityHeader-subtitle:focus,
.main-entityHeader-subtitle[aria-selected=true] {
  box-shadow: 0 0 15px rgba(var(--sn-bg-gradient-accent-rgb), 0.3), 0 0 30px rgba(var(--sn-bg-gradient-accent-rgb), 0.1);
  transform: scale(1.02);
}

.main-navBar-navBarLink,
.main-rootlist-rootlistItemLink,
.main-contextMenu-menuItemButton,
.spicetify-playlist-list li a {
  color: rgba(var(--sn-bg-gradient-primary-rgb), 0.95);
  --local-shimmer-strength: 0.15;
  text-shadow: 0 0 calc(var(--local-shimmer-strength) * 10px) rgba(var(--sn-bg-gradient-accent-rgb), var(--music-glow-strength, 0.2));
  will-change: transform, opacity, filter;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
  contain: style paint;
  --text-shimmer-intensity: calc(0.3 * 0.7);
  opacity: var(--text-shimmer-intensity);
  text-shadow: 0 0 5px rgba(var(--sn-bg-gradient-accent-rgb), calc(0.2 * 0.7));
  animation: unified-text-shimmer calc(calc(1.5s * 1.3) * 1.5) ease-in-out infinite;
  animation-duration: var(--text-shimmer-speed, 8s);
  transition: text-shadow 0.3s ease-out, opacity 0.2s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .main-navBar-navBarLink,
  .main-rootlist-rootlistItemLink,
  .main-contextMenu-menuItemButton,
  .spicetify-playlist-list li a {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    opacity: calc(0.5 * 0.7) !important;
    filter: none !important;
    transform: none !important;
  }
}
@media (prefers-contrast: high) {
  .main-navBar-navBarLink,
  .main-rootlist-rootlistItemLink,
  .main-contextMenu-menuItemButton,
  .spicetify-playlist-list li a {
    opacity: calc(0.7 * 1.3);
    filter: contrast(1.2);
  }
}
.main-navBar-navBarLink[aria-selected=true], .main-navBar-navBarLink.main-rootlist-rootlistItemActive,
.main-rootlist-rootlistItemLink[aria-selected=true],
.main-rootlist-rootlistItemLink.main-rootlist-rootlistItemActive,
.main-contextMenu-menuItemButton[aria-selected=true],
.main-contextMenu-menuItemButton.main-rootlist-rootlistItemActive,
.spicetify-playlist-list li a[aria-selected=true],
.spicetify-playlist-list li a.main-rootlist-rootlistItemActive {
  --local-gradient-speed: calc(var(--text-shimmer-speed, 8s) * 0.7);
  background: linear-gradient(45deg, rgba(var(--sn-bg-gradient-primary-rgb), 1) 0%, rgba(var(--sn-bg-gradient-accent-rgb), 1) 50%, rgba(var(--sn-bg-gradient-secondary-rgb), 1) 100%);
  background-size: 200% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  animation: simple-gradient-flow var(--local-gradient-speed) linear infinite;
  transition: background-size 0.3s ease-out;
}
.main-navBar-navBarLink:hover,
.main-rootlist-rootlistItemLink:hover,
.main-contextMenu-menuItemButton:hover,
.spicetify-playlist-list li a:hover {
  transition: box-shadow 0.3s ease-out, transform 0.2s ease-out;
}
.main-navBar-navBarLink:hover:hover, .main-navBar-navBarLink:hover:focus, .main-navBar-navBarLink:hover[aria-selected=true],
.main-rootlist-rootlistItemLink:hover:hover,
.main-rootlist-rootlistItemLink:hover:focus,
.main-rootlist-rootlistItemLink:hover[aria-selected=true],
.main-contextMenu-menuItemButton:hover:hover,
.main-contextMenu-menuItemButton:hover:focus,
.main-contextMenu-menuItemButton:hover[aria-selected=true],
.spicetify-playlist-list li a:hover:hover,
.spicetify-playlist-list li a:hover:focus,
.spicetify-playlist-list li a:hover[aria-selected=true] {
  box-shadow: 0 0 15px rgba(var(--sn-bg-gradient-accent-rgb), 0.3), 0 0 30px rgba(var(--sn-bg-gradient-accent-rgb), 0.1);
  transform: scale(1.02);
}

.main-trackList-trackName,
.main-trackList-rowTitle a,
.main-card-cardMetadata-title,
.main-cardHeader-link,
[data-encore-id=cardSubtitle] {
  color: rgba(var(--sn-bg-gradient-primary-rgb), 0.95);
  --local-shimmer-strength: 0.15;
  text-shadow: 0 0 calc(var(--local-shimmer-strength) * 10px) rgba(var(--sn-bg-gradient-accent-rgb), var(--music-glow-strength, 0.2));
  will-change: transform, opacity, filter;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
  contain: style paint;
  --text-shimmer-intensity: calc(0.3 * 0.7);
  opacity: var(--text-shimmer-intensity);
  text-shadow: 0 0 5px rgba(var(--sn-bg-gradient-accent-rgb), calc(0.2 * 0.7));
  animation: unified-text-shimmer calc(calc(1.5s * 1.3) * 1.5) ease-in-out infinite;
  animation-duration: var(--text-shimmer-speed, 8s);
  transition: text-shadow 0.3s ease-out, opacity 0.2s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .main-trackList-trackName,
  .main-trackList-rowTitle a,
  .main-card-cardMetadata-title,
  .main-cardHeader-link,
  [data-encore-id=cardSubtitle] {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    opacity: calc(0.5 * 0.7) !important;
    filter: none !important;
    transform: none !important;
  }
}
@media (prefers-contrast: high) {
  .main-trackList-trackName,
  .main-trackList-rowTitle a,
  .main-card-cardMetadata-title,
  .main-cardHeader-link,
  [data-encore-id=cardSubtitle] {
    opacity: calc(0.7 * 1.3);
    filter: contrast(1.2);
  }
}
.main-trackList-selected .main-trackList-trackName, .main-trackList-trackListRow:has(.main-trackList-playingIcon) .main-trackList-trackName,
.main-trackList-selected .main-trackList-rowTitle a,
.main-trackList-trackListRow:has(.main-trackList-playingIcon) .main-trackList-rowTitle a,
.main-trackList-selected .main-card-cardMetadata-title,
.main-trackList-trackListRow:has(.main-trackList-playingIcon) .main-card-cardMetadata-title,
.main-trackList-selected .main-cardHeader-link,
.main-trackList-trackListRow:has(.main-trackList-playingIcon) .main-cardHeader-link,
.main-trackList-selected [data-encore-id=cardSubtitle],
.main-trackList-trackListRow:has(.main-trackList-playingIcon) [data-encore-id=cardSubtitle] {
  --local-gradient-speed: var(--text-shimmer-speed, 8s);
  background: linear-gradient(45deg, rgba(var(--sn-bg-gradient-primary-rgb), 1) 0%, rgba(var(--sn-bg-gradient-accent-rgb), 1) 50%, rgba(var(--sn-bg-gradient-secondary-rgb), 1) 100%);
  background-size: 200% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  animation: simple-gradient-flow var(--local-gradient-speed) linear infinite;
  transition: background-size 0.3s ease-out;
  transition: box-shadow 0.3s ease-out, transform 0.2s ease-out;
}
.main-trackList-selected .main-trackList-trackName:hover, .main-trackList-selected .main-trackList-trackName:focus, .main-trackList-selected .main-trackList-trackName[aria-selected=true], .main-trackList-trackListRow:has(.main-trackList-playingIcon) .main-trackList-trackName:hover, .main-trackList-trackListRow:has(.main-trackList-playingIcon) .main-trackList-trackName:focus, .main-trackList-trackListRow:has(.main-trackList-playingIcon) .main-trackList-trackName[aria-selected=true],
.main-trackList-selected .main-trackList-rowTitle a:hover,
.main-trackList-selected .main-trackList-rowTitle a:focus,
.main-trackList-selected .main-trackList-rowTitle a[aria-selected=true],
.main-trackList-trackListRow:has(.main-trackList-playingIcon) .main-trackList-rowTitle a:hover,
.main-trackList-trackListRow:has(.main-trackList-playingIcon) .main-trackList-rowTitle a:focus,
.main-trackList-trackListRow:has(.main-trackList-playingIcon) .main-trackList-rowTitle a[aria-selected=true],
.main-trackList-selected .main-card-cardMetadata-title:hover,
.main-trackList-selected .main-card-cardMetadata-title:focus,
.main-trackList-selected .main-card-cardMetadata-title[aria-selected=true],
.main-trackList-trackListRow:has(.main-trackList-playingIcon) .main-card-cardMetadata-title:hover,
.main-trackList-trackListRow:has(.main-trackList-playingIcon) .main-card-cardMetadata-title:focus,
.main-trackList-trackListRow:has(.main-trackList-playingIcon) .main-card-cardMetadata-title[aria-selected=true],
.main-trackList-selected .main-cardHeader-link:hover,
.main-trackList-selected .main-cardHeader-link:focus,
.main-trackList-selected .main-cardHeader-link[aria-selected=true],
.main-trackList-trackListRow:has(.main-trackList-playingIcon) .main-cardHeader-link:hover,
.main-trackList-trackListRow:has(.main-trackList-playingIcon) .main-cardHeader-link:focus,
.main-trackList-trackListRow:has(.main-trackList-playingIcon) .main-cardHeader-link[aria-selected=true],
.main-trackList-selected [data-encore-id=cardSubtitle]:hover,
.main-trackList-selected [data-encore-id=cardSubtitle]:focus,
.main-trackList-selected [data-encore-id=cardSubtitle][aria-selected=true],
.main-trackList-trackListRow:has(.main-trackList-playingIcon) [data-encore-id=cardSubtitle]:hover,
.main-trackList-trackListRow:has(.main-trackList-playingIcon) [data-encore-id=cardSubtitle]:focus,
.main-trackList-trackListRow:has(.main-trackList-playingIcon) [data-encore-id=cardSubtitle][aria-selected=true] {
  box-shadow: 0 0 15px rgba(var(--sn-bg-gradient-accent-rgb), 0.3), 0 0 30px rgba(var(--sn-bg-gradient-accent-rgb), 0.1);
  transform: scale(1.02);
}

.main-playButton-PlayButton,
.main-skipBackButton-button,
.main-skipForwardButton-button,
.main-shuffleButton-button,
.main-repeatButton-button {
  color: rgba(var(--sn-bg-gradient-primary-rgb), 0.95);
  --local-shimmer-strength: 0.5;
  text-shadow: 0 0 calc(var(--local-shimmer-strength) * 10px) rgba(var(--sn-bg-gradient-accent-rgb), var(--music-glow-strength, 0.2));
  will-change: transform, opacity, filter;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
  contain: style paint;
  --text-shimmer-intensity: calc(0.3 * 0.7);
  opacity: var(--text-shimmer-intensity);
  text-shadow: 0 0 5px rgba(var(--sn-bg-gradient-accent-rgb), calc(0.2 * 0.7));
  animation: unified-text-shimmer calc(calc(1.5s * 1.3) * 1.5) ease-in-out infinite;
  animation-duration: var(--text-shimmer-speed, 8s);
  transition: text-shadow 0.3s ease-out, opacity 0.2s ease-out;
  transition: box-shadow 0.3s ease-out, transform 0.2s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .main-playButton-PlayButton,
  .main-skipBackButton-button,
  .main-skipForwardButton-button,
  .main-shuffleButton-button,
  .main-repeatButton-button {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    opacity: calc(0.5 * 0.7) !important;
    filter: none !important;
    transform: none !important;
  }
}
@media (prefers-contrast: high) {
  .main-playButton-PlayButton,
  .main-skipBackButton-button,
  .main-skipForwardButton-button,
  .main-shuffleButton-button,
  .main-repeatButton-button {
    opacity: calc(0.7 * 1.3);
    filter: contrast(1.2);
  }
}
.main-playButton-PlayButton:hover, .main-playButton-PlayButton:focus, .main-playButton-PlayButton[aria-selected=true],
.main-skipBackButton-button:hover,
.main-skipBackButton-button:focus,
.main-skipBackButton-button[aria-selected=true],
.main-skipForwardButton-button:hover,
.main-skipForwardButton-button:focus,
.main-skipForwardButton-button[aria-selected=true],
.main-shuffleButton-button:hover,
.main-shuffleButton-button:focus,
.main-shuffleButton-button[aria-selected=true],
.main-repeatButton-button:hover,
.main-repeatButton-button:focus,
.main-repeatButton-button[aria-selected=true] {
  box-shadow: 0 0 15px rgba(var(--sn-bg-gradient-accent-rgb), 0.3), 0 0 30px rgba(var(--sn-bg-gradient-accent-rgb), 0.1);
  transform: scale(1.02);
}
.main-playButton-PlayButton.main-playButton-PlayButton,
.main-skipBackButton-button.main-playButton-PlayButton,
.main-skipForwardButton-button.main-playButton-PlayButton,
.main-shuffleButton-button.main-playButton-PlayButton,
.main-repeatButton-button.main-playButton-PlayButton {
  --local-gradient-speed: calc(var(--text-shimmer-speed, 8s) * 0.7);
  background: linear-gradient(45deg, rgba(var(--sn-bg-gradient-primary-rgb), 1) 0%, rgba(var(--sn-bg-gradient-accent-rgb), 1) 50%, rgba(var(--sn-bg-gradient-secondary-rgb), 1) 100%);
  background-size: 200% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  animation: simple-gradient-flow var(--local-gradient-speed) linear infinite;
  transition: background-size 0.3s ease-out;
}

.main-search-searchCategory h2,
.main-shelf-header h2 {
  --local-gradient-speed: calc(var(--text-shimmer-speed, 8s) * 1.5);
  background: linear-gradient(45deg, rgba(var(--sn-bg-gradient-primary-rgb), 1) 0%, rgba(var(--sn-bg-gradient-accent-rgb), 1) 50%, rgba(var(--sn-bg-gradient-secondary-rgb), 1) 100%);
  background-size: 200% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  animation: simple-gradient-flow var(--local-gradient-speed) linear infinite;
  transition: background-size 0.3s ease-out;
  transition: box-shadow 0.3s ease-out, transform 0.2s ease-out;
}
.main-search-searchCategory h2:hover, .main-search-searchCategory h2:focus, .main-search-searchCategory h2[aria-selected=true],
.main-shelf-header h2:hover,
.main-shelf-header h2:focus,
.main-shelf-header h2[aria-selected=true] {
  box-shadow: 0 0 15px rgba(var(--sn-bg-gradient-accent-rgb), 0.3), 0 0 30px rgba(var(--sn-bg-gradient-accent-rgb), 0.1);
  transform: scale(1.02);
}

.main-trackList-duration,
.main-playbackBarRemainingTime-container,
.main-playbackBarDisplay-bar {
  color: rgba(var(--sn-bg-gradient-primary-rgb), 0.95);
  --local-shimmer-strength: 0.15;
  text-shadow: 0 0 calc(var(--local-shimmer-strength) * 10px) rgba(var(--sn-bg-gradient-accent-rgb), var(--music-glow-strength, 0.2));
  will-change: transform, opacity, filter;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
  contain: style paint;
  --text-shimmer-intensity: calc(0.3 * 0.7);
  opacity: var(--text-shimmer-intensity);
  text-shadow: 0 0 5px rgba(var(--sn-bg-gradient-accent-rgb), calc(0.2 * 0.7));
  animation: unified-text-shimmer calc(calc(1.5s * 1.3) * 1.5) ease-in-out infinite;
  animation-duration: var(--text-shimmer-speed, 8s);
  transition: text-shadow 0.3s ease-out, opacity 0.2s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .main-trackList-duration,
  .main-playbackBarRemainingTime-container,
  .main-playbackBarDisplay-bar {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    opacity: calc(0.5 * 0.7) !important;
    filter: none !important;
    transform: none !important;
  }
}
@media (prefers-contrast: high) {
  .main-trackList-duration,
  .main-playbackBarRemainingTime-container,
  .main-playbackBarDisplay-bar {
    opacity: calc(0.7 * 1.3);
    filter: contrast(1.2);
  }
}
.main-nowPlayingBar-nowPlayingBar:hover .main-trackList-duration,
.main-nowPlayingBar-nowPlayingBar:hover .main-playbackBarRemainingTime-container,
.main-nowPlayingBar-nowPlayingBar:hover .main-playbackBarDisplay-bar {
  --local-gradient-speed: calc(var(--text-shimmer-speed, 8s) * 0.7);
  background: linear-gradient(45deg, rgba(var(--sn-bg-gradient-primary-rgb), 1) 0%, rgba(var(--sn-bg-gradient-accent-rgb), 1) 50%, rgba(var(--sn-bg-gradient-secondary-rgb), 1) 100%);
  background-size: 200% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  animation: simple-gradient-flow var(--local-gradient-speed) linear infinite;
  transition: background-size 0.3s ease-out;
}

.Root[style*="--sn-music-beat-pulse-intensity"] h1, .Root[style*="--sn-music-beat-pulse-intensity"] h2, .Root[style*="--sn-music-beat-pulse-intensity"] h3,
.Root[style*="--sn-music-beat-pulse-intensity"] .main-entityHeader-title,
.Root[style*="--sn-music-beat-pulse-intensity"] .main-trackList-trackName,
.Root[style*="--sn-music-beat-pulse-intensity"] .main-cardHeader-text,
.Root[style*="--sn-music-beat-pulse-intensity"] [data-encore-id=cardTitle] {
  animation-duration: calc(var(--text-shimmer-speed) / max(var(--sn-music-beat-pulse-intensity, 0.3), 0.3));
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --text-shimmer-speed: 20s;
    --text-shimmer-intensity: 0.1;
  }
  h1, h2, h3,
  .main-entityHeader-title,
  .main-trackList-trackName,
  .main-cardHeader-text,
  [data-encore-id=cardTitle],
  .main-navBar-navBarLink {
    animation: none !important;
  }
  .main-nowPlayingBar-trackInfo strong,
  .main-cardHeader-cardHeaderTitle {
    background: linear-gradient(45deg, rgba(var(--sn-bg-gradient-primary-rgb), 1) 0%, rgba(var(--sn-bg-gradient-accent-rgb), 1) 50%, rgba(var(--sn-bg-gradient-secondary-rgb), 1) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    animation: none !important;
  }
}
@media (max-width: 768px) {
  :root {
    --text-shimmer-intensity: 0.2;
    --text-glow-strength: 0.1;
  }
  .main-trackList-trackName,
  .main-cardHeader-text,
  [data-encore-id=cardTitle] {
    animation-duration: calc(var(--text-shimmer-speed) * 2) !important;
  }
}
@media (prefers-contrast: high) {
  :root {
    --text-shimmer-intensity: 0.8;
    --text-glow-strength: 0.6;
  }
  h1, h2, h3,
  .main-entityHeader-title,
  .main-trackList-trackName {
    text-shadow: 2px 0 rgba(255, 255, 255, 0.8), -2px 0 rgba(0, 0, 0, 0.8), 0 2px rgba(255, 255, 255, 0.6), 0 -2px rgba(0, 0, 0, 0.6);
  }
}
:root {
  --holographic-chromatic-intensity: var(--visual-effects-chromatic-intensity);
  --holographic-chromatic-speed: var(--visual-effects-chromatic-speed);
  --holographic-prism-intensity: var(--visual-effects-prism-intensity);
}

.Root[style*="--sn-music-beat-pulse-intensity"] :root {
  --ripple-opacity: calc(0.3 + var(--sn-music-beat-pulse-intensity, 0) * 0.2);
  --focus-glow-intensity: calc(0.4 + var(--sn-music-energy, 0) * 0.3);
  --hover-glow-intensity: calc(0.2 + var(--sn-music-beat-pulse-intensity, 0) * 0.2);
}
.Root[style*="--sn-music-beat-pulse-intensity"] button,
.Root[style*="--sn-music-beat-pulse-intensity"] .main-playButton-PlayButton,
.Root[style*="--sn-music-beat-pulse-intensity"] .main-trackList-trackListRow {
  --ripple-duration: calc(600ms / max(var(--sn-music-energy, 0.5), 0.5));
  --hover-transition-speed: calc(200ms / max(var(--sn-music-beat-pulse-intensity, 0.5), 0.5));
}
.Root[style*="--sn-music-beat-pulse-intensity"] .main-card-card,
.Root[style*="--sn-music-beat-pulse-intensity"] .main-card-cardContainer {
  --ripple-duration: calc(600ms / max(var(--sn-music-energy, 0.5), 0.5));
  --hover-transition-speed: calc(200ms / max(var(--sn-music-beat-pulse-intensity, 0.5), 0.5));
}

.main-playButton-PlayButton,
.main-skipBackButton-button,
.main-skipForwardButton-button,
.main-shuffleButton-button,
.main-repeatButton-button {
  position: relative;
  overflow: hidden;
  --local-ripple-opacity: 0.5;
  --local-ripple-scale: 4;
  transition: box-shadow var(--focus-flow-duration) ease-out, transform var(--focus-flow-duration) ease-out, filter var(--focus-flow-duration) ease-out;
  --local-focus-glow: 0.6;
  transition: transform var(--hover-transition-speed) ease-out, box-shadow var(--hover-transition-speed) ease-out, filter var(--hover-transition-speed) ease-out;
  --local-lift-distance: var(--hover-lift-distance);
  --local-hover-scale: var(--hover-scale-factor);
  --local-hover-glow: var(--hover-glow-intensity);
  animation: musical-interaction-boost calc(var(--living-pulse-speed, 4s) / max(var(--sn-music-beat-pulse-intensity, 0.5), 0.5)) ease-in-out infinite;
}
.main-playButton-PlayButton::after,
.main-skipBackButton-button::after,
.main-skipForwardButton-button::after,
.main-shuffleButton-button::after,
.main-repeatButton-button::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: radial-gradient(circle, var(--ripple-color) 0%, rgba(var(--sn-bg-gradient-accent-rgb), 0) 70%);
  transform: translate(-50%, -50%) scale(0);
  pointer-events: none;
  z-index: 1;
}
.main-playButton-PlayButton:active::after,
.main-skipBackButton-button:active::after,
.main-skipForwardButton-button:active::after,
.main-shuffleButton-button:active::after,
.main-repeatButton-button:active::after {
  width: 100%;
  height: 100%;
  animation: css-interaction-ripple var(--ripple-duration) ease-out;
}
.main-playButton-PlayButton:focus, .main-playButton-PlayButton:focus-visible,
.main-skipBackButton-button:focus,
.main-skipBackButton-button:focus-visible,
.main-skipForwardButton-button:focus,
.main-skipForwardButton-button:focus-visible,
.main-shuffleButton-button:focus,
.main-shuffleButton-button:focus-visible,
.main-repeatButton-button:focus,
.main-repeatButton-button:focus-visible {
  outline: none;
  animation: focus-flow-pulse 2s ease-in-out infinite;
  z-index: 10;
}
.main-playButton-PlayButton:focus:not(:focus-visible),
.main-skipBackButton-button:focus:not(:focus-visible),
.main-skipForwardButton-button:focus:not(:focus-visible),
.main-shuffleButton-button:focus:not(:focus-visible),
.main-repeatButton-button:focus:not(:focus-visible) {
  animation: none;
  box-shadow: 0 0 0 var(--focus-ring-thickness) var(--focus-ring-color), 0 0 10px var(--focus-ring-color);
}
.main-playButton-PlayButton:hover,
.main-skipBackButton-button:hover,
.main-skipForwardButton-button:hover,
.main-shuffleButton-button:hover,
.main-repeatButton-button:hover {
  transform: translateY(calc(-1 * var(--local-lift-distance))) scale(var(--local-hover-scale));
  box-shadow: 0 calc(var(--local-lift-distance) * 2) calc(var(--local-lift-distance) * 8) rgba(var(--sn-bg-gradient-accent-rgb), var(--local-hover-glow));
  filter: brightness(1.05) saturate(1.1);
}
.main-playButton-PlayButton:hover, .main-playButton-PlayButton:focus,
.main-skipBackButton-button:hover,
.main-skipBackButton-button:focus,
.main-skipForwardButton-button:hover,
.main-skipForwardButton-button:focus,
.main-shuffleButton-button:hover,
.main-shuffleButton-button:focus,
.main-repeatButton-button:hover,
.main-repeatButton-button:focus {
  animation-duration: calc(var(--living-pulse-speed, 4s) * 0.7);
  filter: brightness(calc(1.05 + var(--interaction-energy-boost))) saturate(calc(1.1 + var(--interaction-beat-sync)));
}
.main-playButton-PlayButton.main-playButton-PlayButton,
.main-skipBackButton-button.main-playButton-PlayButton,
.main-skipForwardButton-button.main-playButton-PlayButton,
.main-shuffleButton-button.main-playButton-PlayButton,
.main-repeatButton-button.main-playButton-PlayButton {
  transition: transform var(--hover-transition-speed) ease-out, box-shadow var(--hover-transition-speed) ease-out, filter var(--hover-transition-speed) ease-out;
  --local-lift-distance: 4px;
  --local-hover-scale: 1.05;
  --local-hover-glow: 0.4;
  --ripple-color: rgba(var(--sn-bg-gradient-primary-rgb), 0.4);
}
.main-playButton-PlayButton.main-playButton-PlayButton:hover,
.main-skipBackButton-button.main-playButton-PlayButton:hover,
.main-skipForwardButton-button.main-playButton-PlayButton:hover,
.main-shuffleButton-button.main-playButton-PlayButton:hover,
.main-repeatButton-button.main-playButton-PlayButton:hover {
  transform: translateY(calc(-1 * var(--local-lift-distance))) scale(var(--local-hover-scale));
  box-shadow: 0 calc(var(--local-lift-distance) * 2) calc(var(--local-lift-distance) * 8) rgba(var(--sn-bg-gradient-accent-rgb), var(--local-hover-glow));
  filter: brightness(1.05) saturate(1.1);
}

.main-card-card,
.main-card-cardContainer {
  position: relative;
  overflow: hidden;
  --local-ripple-opacity: 0.15;
  --local-ripple-scale: 2;
  transition: box-shadow var(--focus-flow-duration) ease-out, transform var(--focus-flow-duration) ease-out, filter var(--focus-flow-duration) ease-out;
  --local-focus-glow: var(--focus-glow-intensity);
  transition: transform var(--hover-transition-speed) ease-out, box-shadow var(--hover-transition-speed) ease-out, filter var(--hover-transition-speed) ease-out;
  --local-lift-distance: 1px;
  --local-hover-scale: 1.005;
  --local-hover-glow: 0.1;
  animation: musical-interaction-boost calc(var(--living-pulse-speed, 4s) / max(var(--sn-music-beat-pulse-intensity, 0.5), 0.5)) ease-in-out infinite;
}
.main-card-card::after,
.main-card-cardContainer::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: radial-gradient(circle, var(--ripple-color) 0%, rgba(var(--sn-bg-gradient-accent-rgb), 0) 70%);
  transform: translate(-50%, -50%) scale(0);
  pointer-events: none;
  z-index: 1;
}
.main-card-card:active::after,
.main-card-cardContainer:active::after {
  width: 100%;
  height: 100%;
  animation: css-interaction-ripple var(--ripple-duration) ease-out;
}
.main-card-card:focus, .main-card-card:focus-visible,
.main-card-cardContainer:focus,
.main-card-cardContainer:focus-visible {
  outline: none;
  animation: focus-flow-pulse 2s ease-in-out infinite;
  z-index: 10;
}
.main-card-card:focus:not(:focus-visible),
.main-card-cardContainer:focus:not(:focus-visible) {
  animation: none;
  box-shadow: 0 0 0 var(--focus-ring-thickness) var(--focus-ring-color), 0 0 10px var(--focus-ring-color);
}
.main-card-card:hover,
.main-card-cardContainer:hover {
  transform: translateY(calc(-1 * var(--local-lift-distance))) scale(var(--local-hover-scale));
  box-shadow: 0 calc(var(--local-lift-distance) * 2) calc(var(--local-lift-distance) * 8) rgba(var(--sn-bg-gradient-accent-rgb), var(--local-hover-glow));
  filter: brightness(1.05) saturate(1.1);
}
.main-card-card:hover, .main-card-card:focus,
.main-card-cardContainer:hover,
.main-card-cardContainer:focus {
  animation-duration: calc(var(--living-pulse-speed, 4s) * 0.7);
  filter: brightness(calc(1.05 + var(--interaction-energy-boost))) saturate(calc(1.1 + var(--interaction-beat-sync)));
}
.main-card-card[data-testid*=artist],
.main-card-cardContainer[data-testid*=artist] {
  transition: transform var(--hover-transition-speed) ease-out, box-shadow var(--hover-transition-speed) ease-out, filter var(--hover-transition-speed) ease-out;
  --local-lift-distance: var(--hover-lift-distance);
  --local-hover-scale: var(--hover-scale-factor);
  --local-hover-glow: var(--hover-glow-intensity);
}
.main-card-card[data-testid*=artist]:hover,
.main-card-cardContainer[data-testid*=artist]:hover {
  transform: translateY(calc(-1 * var(--local-lift-distance))) scale(var(--local-hover-scale));
  box-shadow: 0 calc(var(--local-lift-distance) * 2) calc(var(--local-lift-distance) * 8) rgba(var(--sn-bg-gradient-accent-rgb), var(--local-hover-glow));
  filter: brightness(1.05) saturate(1.1);
}

.main-trackList-trackListRow {
  position: relative;
  overflow: hidden;
  --local-ripple-opacity: 0.15;
  --local-ripple-scale: 2;
  transition: box-shadow var(--focus-flow-duration) ease-out, transform var(--focus-flow-duration) ease-out, filter var(--focus-flow-duration) ease-out;
  --local-focus-glow: 0.2;
  transition: transform var(--hover-transition-speed) ease-out, box-shadow var(--hover-transition-speed) ease-out, filter var(--hover-transition-speed) ease-out;
  --local-lift-distance: 1px;
  --local-hover-scale: 1.005;
  --local-hover-glow: 0.1;
}
.main-trackList-trackListRow::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: radial-gradient(circle, var(--ripple-color) 0%, rgba(var(--sn-bg-gradient-accent-rgb), 0) 70%);
  transform: translate(-50%, -50%) scale(0);
  pointer-events: none;
  z-index: 1;
}
.main-trackList-trackListRow:active::after {
  width: 100%;
  height: 100%;
  animation: css-interaction-ripple var(--ripple-duration) ease-out;
}
.main-trackList-trackListRow:focus, .main-trackList-trackListRow:focus-visible {
  outline: none;
  animation: focus-flow-pulse 2s ease-in-out infinite;
  z-index: 10;
}
.main-trackList-trackListRow:focus:not(:focus-visible) {
  animation: none;
  box-shadow: 0 0 0 var(--focus-ring-thickness) var(--focus-ring-color), 0 0 10px var(--focus-ring-color);
}
.main-trackList-trackListRow:hover {
  transform: translateY(calc(-1 * var(--local-lift-distance))) scale(var(--local-hover-scale));
  box-shadow: 0 calc(var(--local-lift-distance) * 2) calc(var(--local-lift-distance) * 8) rgba(var(--sn-bg-gradient-accent-rgb), var(--local-hover-glow));
  filter: brightness(1.05) saturate(1.1);
}
.main-trackList-trackListRow.main-trackList-selected, .main-trackList-trackListRow:has(.main-trackList-playingIcon) {
  animation: musical-interaction-boost calc(var(--living-pulse-speed, 4s) / max(var(--sn-music-beat-pulse-intensity, 0.5), 0.5)) ease-in-out infinite;
  transition: transform var(--hover-transition-speed) ease-out, box-shadow var(--hover-transition-speed) ease-out, filter var(--hover-transition-speed) ease-out;
  --local-lift-distance: var(--hover-lift-distance);
  --local-hover-scale: var(--hover-scale-factor);
  --local-hover-glow: var(--hover-glow-intensity);
  --ripple-color: rgba(var(--sn-bg-gradient-primary-rgb), 0.3);
}
.main-trackList-trackListRow.main-trackList-selected:hover, .main-trackList-trackListRow.main-trackList-selected:focus, .main-trackList-trackListRow:has(.main-trackList-playingIcon):hover, .main-trackList-trackListRow:has(.main-trackList-playingIcon):focus {
  animation-duration: calc(var(--living-pulse-speed, 4s) * 0.7);
  filter: brightness(calc(1.05 + var(--interaction-energy-boost))) saturate(calc(1.1 + var(--interaction-beat-sync)));
}
.main-trackList-trackListRow.main-trackList-selected:hover, .main-trackList-trackListRow:has(.main-trackList-playingIcon):hover {
  transform: translateY(calc(-1 * var(--local-lift-distance))) scale(var(--local-hover-scale));
  box-shadow: 0 calc(var(--local-lift-distance) * 2) calc(var(--local-lift-distance) * 8) rgba(var(--sn-bg-gradient-accent-rgb), var(--local-hover-glow));
  filter: brightness(1.05) saturate(1.1);
}

.main-navBar-navBarLink,
.main-rootlist-rootlistItemLink,
.main-contextMenu-menuItemButton,
.spicetify-playlist-list li a {
  position: relative;
  overflow: hidden;
  --local-ripple-opacity: 0.15;
  --local-ripple-scale: 2;
  transition: box-shadow var(--focus-flow-duration) ease-out, transform var(--focus-flow-duration) ease-out, filter var(--focus-flow-duration) ease-out;
  --local-focus-glow: 0.2;
  transition: transform var(--hover-transition-speed) ease-out, box-shadow var(--hover-transition-speed) ease-out, filter var(--hover-transition-speed) ease-out;
  --local-lift-distance: 1px;
  --local-hover-scale: 1.005;
  --local-hover-glow: 0.1;
}
.main-navBar-navBarLink::after,
.main-rootlist-rootlistItemLink::after,
.main-contextMenu-menuItemButton::after,
.spicetify-playlist-list li a::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: radial-gradient(circle, var(--ripple-color) 0%, rgba(var(--sn-bg-gradient-accent-rgb), 0) 70%);
  transform: translate(-50%, -50%) scale(0);
  pointer-events: none;
  z-index: 1;
}
.main-navBar-navBarLink:active::after,
.main-rootlist-rootlistItemLink:active::after,
.main-contextMenu-menuItemButton:active::after,
.spicetify-playlist-list li a:active::after {
  width: 100%;
  height: 100%;
  animation: css-interaction-ripple var(--ripple-duration) ease-out;
}
.main-navBar-navBarLink:focus, .main-navBar-navBarLink:focus-visible,
.main-rootlist-rootlistItemLink:focus,
.main-rootlist-rootlistItemLink:focus-visible,
.main-contextMenu-menuItemButton:focus,
.main-contextMenu-menuItemButton:focus-visible,
.spicetify-playlist-list li a:focus,
.spicetify-playlist-list li a:focus-visible {
  outline: none;
  animation: focus-flow-pulse 2s ease-in-out infinite;
  z-index: 10;
}
.main-navBar-navBarLink:focus:not(:focus-visible),
.main-rootlist-rootlistItemLink:focus:not(:focus-visible),
.main-contextMenu-menuItemButton:focus:not(:focus-visible),
.spicetify-playlist-list li a:focus:not(:focus-visible) {
  animation: none;
  box-shadow: 0 0 0 var(--focus-ring-thickness) var(--focus-ring-color), 0 0 10px var(--focus-ring-color);
}
.main-navBar-navBarLink:hover,
.main-rootlist-rootlistItemLink:hover,
.main-contextMenu-menuItemButton:hover,
.spicetify-playlist-list li a:hover {
  transform: translateY(calc(-1 * var(--local-lift-distance))) scale(var(--local-hover-scale));
  box-shadow: 0 calc(var(--local-lift-distance) * 2) calc(var(--local-lift-distance) * 8) rgba(var(--sn-bg-gradient-accent-rgb), var(--local-hover-glow));
  filter: brightness(1.05) saturate(1.1);
}
.main-navBar-navBarLink[aria-selected=true], .main-navBar-navBarLink.main-rootlist-rootlistItemActive,
.main-rootlist-rootlistItemLink[aria-selected=true],
.main-rootlist-rootlistItemLink.main-rootlist-rootlistItemActive,
.main-contextMenu-menuItemButton[aria-selected=true],
.main-contextMenu-menuItemButton.main-rootlist-rootlistItemActive,
.spicetify-playlist-list li a[aria-selected=true],
.spicetify-playlist-list li a.main-rootlist-rootlistItemActive {
  animation: musical-interaction-boost calc(var(--living-pulse-speed, 4s) / max(var(--sn-music-beat-pulse-intensity, 0.5), 0.5)) ease-in-out infinite;
}
.main-navBar-navBarLink[aria-selected=true]:hover, .main-navBar-navBarLink[aria-selected=true]:focus, .main-navBar-navBarLink.main-rootlist-rootlistItemActive:hover, .main-navBar-navBarLink.main-rootlist-rootlistItemActive:focus,
.main-rootlist-rootlistItemLink[aria-selected=true]:hover,
.main-rootlist-rootlistItemLink[aria-selected=true]:focus,
.main-rootlist-rootlistItemLink.main-rootlist-rootlistItemActive:hover,
.main-rootlist-rootlistItemLink.main-rootlist-rootlistItemActive:focus,
.main-contextMenu-menuItemButton[aria-selected=true]:hover,
.main-contextMenu-menuItemButton[aria-selected=true]:focus,
.main-contextMenu-menuItemButton.main-rootlist-rootlistItemActive:hover,
.main-contextMenu-menuItemButton.main-rootlist-rootlistItemActive:focus,
.spicetify-playlist-list li a[aria-selected=true]:hover,
.spicetify-playlist-list li a[aria-selected=true]:focus,
.spicetify-playlist-list li a.main-rootlist-rootlistItemActive:hover,
.spicetify-playlist-list li a.main-rootlist-rootlistItemActive:focus {
  animation-duration: calc(var(--living-pulse-speed, 4s) * 0.7);
  filter: brightness(calc(1.05 + var(--interaction-energy-boost))) saturate(calc(1.1 + var(--interaction-beat-sync)));
}

input[type=text],
input[type=search],
.x-filterBox-filterInput,
.main-dropDown-dropDown {
  transition: box-shadow var(--focus-flow-duration) ease-out, transform var(--focus-flow-duration) ease-out, filter var(--focus-flow-duration) ease-out;
  --local-focus-glow: var(--focus-glow-intensity);
  transition: transform var(--hover-transition-speed) ease-out, box-shadow var(--hover-transition-speed) ease-out, filter var(--hover-transition-speed) ease-out;
  --local-lift-distance: 1px;
  --local-hover-scale: 1.005;
  --local-hover-glow: 0.1;
  transition: border-color var(--focus-flow-duration) ease-out, box-shadow var(--focus-flow-duration) ease-out;
}
input[type=text]:focus, input[type=text]:focus-visible,
input[type=search]:focus,
input[type=search]:focus-visible,
.x-filterBox-filterInput:focus,
.x-filterBox-filterInput:focus-visible,
.main-dropDown-dropDown:focus,
.main-dropDown-dropDown:focus-visible {
  outline: none;
  animation: focus-flow-pulse 2s ease-in-out infinite;
  z-index: 10;
}
input[type=text]:focus:not(:focus-visible),
input[type=search]:focus:not(:focus-visible),
.x-filterBox-filterInput:focus:not(:focus-visible),
.main-dropDown-dropDown:focus:not(:focus-visible) {
  animation: none;
  box-shadow: 0 0 0 var(--focus-ring-thickness) var(--focus-ring-color), 0 0 10px var(--focus-ring-color);
}
input[type=text]:hover,
input[type=search]:hover,
.x-filterBox-filterInput:hover,
.main-dropDown-dropDown:hover {
  transform: translateY(calc(-1 * var(--local-lift-distance))) scale(var(--local-hover-scale));
  box-shadow: 0 calc(var(--local-lift-distance) * 2) calc(var(--local-lift-distance) * 8) rgba(var(--sn-bg-gradient-accent-rgb), var(--local-hover-glow));
  filter: brightness(1.05) saturate(1.1);
}
input[type=text]:focus,
input[type=search]:focus,
.x-filterBox-filterInput:focus,
.main-dropDown-dropDown:focus {
  border-color: rgba(var(--sn-bg-gradient-accent-rgb), 0.6);
}

.main-contextMenu-menu .main-contextMenu-menuItemButton {
  position: relative;
  overflow: hidden;
  --local-ripple-opacity: var(--ripple-opacity);
  --local-ripple-scale: var(--ripple-max-scale);
  transition: transform var(--hover-transition-speed) ease-out, box-shadow var(--hover-transition-speed) ease-out, filter var(--hover-transition-speed) ease-out;
  --local-lift-distance: 1px;
  --local-hover-scale: 1.005;
  --local-hover-glow: 0.1;
}
.main-contextMenu-menu .main-contextMenu-menuItemButton::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: radial-gradient(circle, var(--ripple-color) 0%, rgba(var(--sn-bg-gradient-accent-rgb), 0) 70%);
  transform: translate(-50%, -50%) scale(0);
  pointer-events: none;
  z-index: 1;
}
.main-contextMenu-menu .main-contextMenu-menuItemButton:active::after {
  width: 100%;
  height: 100%;
  animation: css-interaction-ripple var(--ripple-duration) ease-out;
}
.main-contextMenu-menu .main-contextMenu-menuItemButton:hover {
  transform: translateY(calc(-1 * var(--local-lift-distance))) scale(var(--local-hover-scale));
  box-shadow: 0 calc(var(--local-lift-distance) * 2) calc(var(--local-lift-distance) * 8) rgba(var(--sn-bg-gradient-accent-rgb), var(--local-hover-glow));
  filter: brightness(1.05) saturate(1.1);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --ripple-duration: 200ms;
    --focus-flow-duration: 100ms;
    --hover-transition-speed: 100ms;
    --ripple-opacity: 0.1;
    --focus-glow-intensity: 0.2;
  }
  * {
    animation-duration: 200ms !important;
    animation-iteration-count: 1 !important;
  }
  .main-playButton-PlayButton,
  input:focus,
  button:focus {
    animation: none !important;
    box-shadow: 0 0 0 2px rgba(var(--sn-bg-gradient-accent-rgb), 0.6) !important;
  }
}
@media (max-width: 768px) {
  :root {
    --hover-lift-distance: 1px;
    --ripple-max-scale: 2;
    --focus-glow-intensity: 0.3;
  }
  .main-trackList-trackListRow {
    --hover-transition-speed: 300ms;
  }
  .main-card-card,
  .main-card-cardContainer {
    --hover-transition-speed: 300ms;
  }
}
@media (prefers-contrast: high) {
  :root {
    --focus-glow-intensity: 0.8;
    --focus-ring-thickness: 3px;
    --ripple-opacity: 0.6;
  }
  button:focus,
  input:focus,
  a:focus {
    box-shadow: 0 0 0 var(--focus-ring-thickness) rgba(255, 255, 255, 0.8), 0 0 0 calc(var(--focus-ring-thickness) + 2px) rgba(0, 0, 0, 0.8) !important;
  }
}
:root {
  --micro-beat-intensity: var(--sn-music-beat-pulse-intensity, 0);
  --micro-breathing-scale: 1;
  --micro-glow-radius: calc(8px + (12px * var(--micro-beat-intensity)));
  --micro-scale-enhancement: calc(1 + (var(--micro-beat-intensity) * 0.02));
  --micro-hue-shift: calc(var(--sn-music-rhythm-phase, 0) * 1deg);
}

.main-card-card,
.main-card-cardContainer {
  transform: translateZ(0);
  transition: transform var(--micro-medium) var(--sn-easing-explorer, ease-out);
  will-change: transform, opacity, filter;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
  contain: style paint;
  transition: transform 0.2s var(--sn-transition-timing-default, var(--sn-anim-easing-standard)), box-shadow 0.2s var(--sn-transition-timing-default, var(--sn-anim-easing-standard)), background-color 0.2s var(--sn-transition-timing-default, var(--sn-anim-easing-standard)), backdrop-filter 0.2s var(--sn-transition-timing-default, var(--sn-anim-easing-standard)), opacity 0.2s var(--sn-transition-timing-default, var(--sn-anim-easing-standard));
  position: relative;
  overflow: hidden;
  will-change: transform, opacity, filter;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
  contain: style paint;
  position: relative;
  filter: hue-rotate(var(--micro-hue-shift)) saturate(calc(1 + var(--micro-beat-intensity) * 0.1)) brightness(calc(1 + var(--micro-beat-intensity) * 0.05));
}
.main-card-card::after,
.main-card-cardContainer::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--spice-rgb-accent), var(--ripple-intensity)) 0%, rgba(var(--spice-rgb-accent), calc(var(--ripple-intensity) * 0.5)) 30%, transparent 70%);
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  pointer-events: none;
  z-index: 2;
  transition: all var(--ripple-duration, 0.4s) var(--sn-anim-easing-standard);
}
.main-card-card:active::after,
.main-card-cardContainer:active::after {
  transform: translate(-50%, -50%) scale(20);
  opacity: 1;
  transition-duration: 0s;
}
.main-card-card::before,
.main-card-cardContainer::before {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(135deg, rgba(var(--sn-dynamic-accent-rgb, var(--spice-rgb-accent)), var(--feedback-subtle)) 0%, transparent 40%, transparent 60%, rgba(var(--sn-dynamic-accent-rgb, var(--spice-rgb-accent)), calc(var(--feedback-subtle) * 0.7)) 100%);
  border-radius: inherit;
  z-index: -1;
  opacity: 0;
  transition: opacity var(--sn-bg-gradient-transition, 0.8s ease-in-out);
  pointer-events: none;
}
.main-card-card:hover::before,
.main-card-cardContainer:hover::before {
  opacity: 1;
}
.main-card-card:hover,
.main-card-cardContainer:hover {
  transform: translateZ(0);
  box-shadow: 0 0 var(--micro-glow-radius) rgba(var(--sn-accent-rgb, var(--spice-rgb-accent)), var(--feedback-moderate));
}
.main-card-card .main-card-PlayButtonContainer,
.main-card-card .main-playButton-PlayButton,
.main-card-cardContainer .main-card-PlayButtonContainer,
.main-card-cardContainer .main-playButton-PlayButton {
  transition: transform 0.2s var(--sn-transition-timing-default, var(--sn-anim-easing-standard)), box-shadow 0.2s var(--sn-transition-timing-default, var(--sn-anim-easing-standard)), background-color 0.2s var(--sn-transition-timing-default, var(--sn-anim-easing-standard)), backdrop-filter 0.2s var(--sn-transition-timing-default, var(--sn-anim-easing-standard)), opacity 0.2s var(--sn-transition-timing-default, var(--sn-anim-easing-standard));
  --ripple-color: var(--spice-accent);
  --ripple-intensity: var(--feedback-prominent);
  box-shadow: 0 0 calc(var(--micro-glow-radius) * 0.8) rgba(var(--spice-rgb-accent), calc(var(--feedback-moderate) * var(--micro-beat-intensity)));
}
.main-card-card .main-card-PlayButtonContainer:hover,
.main-card-card .main-playButton-PlayButton:hover,
.main-card-cardContainer .main-card-PlayButtonContainer:hover,
.main-card-cardContainer .main-playButton-PlayButton:hover {
  transform: scale(calc(1.05 + var(--micro-beat-intensity) * 0.03)) translateZ(0);
  will-change: transform, opacity, filter;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
  contain: style paint;
  position: relative;
}
.main-card-card .main-card-PlayButtonContainer:hover::before,
.main-card-card .main-playButton-PlayButton:hover::before,
.main-card-cardContainer .main-card-PlayButtonContainer:hover::before,
.main-card-cardContainer .main-playButton-PlayButton:hover::before {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(135deg, rgba(var(--sn-dynamic-accent-rgb, var(--spice-rgb-accent)), 0.2) 0%, transparent 40%, transparent 60%, rgba(var(--sn-dynamic-accent-rgb, var(--spice-rgb-accent)), 0.14) 100%);
  border-radius: inherit;
  z-index: -1;
  opacity: 0;
  transition: opacity var(--sn-bg-gradient-transition, 0.8s ease-in-out);
  pointer-events: none;
}
.main-card-card .main-card-PlayButtonContainer:hover:hover::before,
.main-card-card .main-playButton-PlayButton:hover:hover::before,
.main-card-cardContainer .main-card-PlayButtonContainer:hover:hover::before,
.main-card-cardContainer .main-playButton-PlayButton:hover:hover::before {
  opacity: 1;
}
.main-card-card .main-card-PlayButtonContainer:active,
.main-card-card .main-playButton-PlayButton:active,
.main-card-cardContainer .main-card-PlayButtonContainer:active,
.main-card-cardContainer .main-playButton-PlayButton:active {
  transform: scale(0.98);
  transition-duration: 0.1s;
}
.main-card-card .main-card-PlayButtonContainer:focus-visible,
.main-card-card .main-playButton-PlayButton:focus-visible,
.main-card-cardContainer .main-card-PlayButtonContainer:focus-visible,
.main-card-cardContainer .main-playButton-PlayButton:focus-visible {
  outline: 2px solid rgba(var(--spice-rgb-accent), 0.8);
  outline-offset: 2px;
}

.spicetify-playlist-list li {
  will-change: transform, opacity, filter;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
  contain: style paint;
  transition: transform 0.2s var(--sn-transition-timing-default, var(--sn-anim-easing-standard)), box-shadow 0.2s var(--sn-transition-timing-default, var(--sn-anim-easing-standard)), background-color 0.2s var(--sn-transition-timing-default, var(--sn-anim-easing-standard)), backdrop-filter 0.2s var(--sn-transition-timing-default, var(--sn-anim-easing-standard)), opacity 0.2s var(--sn-transition-timing-default, var(--sn-anim-easing-standard));
  position: relative;
  overflow: hidden;
}
.spicetify-playlist-list li::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--spice-rgb-accent), var(--ripple-intensity)) 0%, rgba(var(--spice-rgb-accent), calc(var(--ripple-intensity) * 0.5)) 30%, transparent 70%);
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  pointer-events: none;
  z-index: 2;
  transition: all var(--ripple-duration, 0.4s) var(--sn-anim-easing-standard);
}
.spicetify-playlist-list li:active::after {
  transform: translate(-50%, -50%) scale(20);
  opacity: 1;
  transition-duration: 0s;
}
.spicetify-playlist-list li:hover {
  background-color: var(--spice-main);
  position: relative;
}
.spicetify-playlist-list li:hover::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, rgba(var(--spice-rgb-accent), 0.05) 0%, rgba(var(--spice-rgb-accent), 0.1) 50%, rgba(var(--spice-rgb-accent), 0.05) 100%);
  border-radius: 4px;
  pointer-events: none;
  z-index: 1;
}
.spicetify-playlist-list li:focus-visible {
  outline: 2px solid rgba(var(--spice-rgb-accent), 0.6);
  outline-offset: 2px;
}

.main-createPlaylistButton-button {
  transition: transform 0.2s var(--sn-transition-timing-default, var(--sn-anim-easing-standard)), box-shadow 0.2s var(--sn-transition-timing-default, var(--sn-anim-easing-standard)), background-color 0.2s var(--sn-transition-timing-default, var(--sn-anim-easing-standard)), backdrop-filter 0.2s var(--sn-transition-timing-default, var(--sn-anim-easing-standard)), opacity 0.2s var(--sn-transition-timing-default, var(--sn-anim-easing-standard));
  will-change: transform, opacity, filter;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
  contain: style paint;
  transition: transform 0.2s var(--sn-transition-timing-default, var(--sn-anim-easing-standard)), box-shadow 0.2s var(--sn-transition-timing-default, var(--sn-anim-easing-standard)), background-color 0.2s var(--sn-transition-timing-default, var(--sn-anim-easing-standard)), backdrop-filter 0.2s var(--sn-transition-timing-default, var(--sn-anim-easing-standard)), opacity 0.2s var(--sn-transition-timing-default, var(--sn-anim-easing-standard));
  position: relative;
  overflow: hidden;
  border-radius: 6px;
}
.main-createPlaylistButton-button:hover {
  transform: scale(1.02) translateZ(0);
  will-change: transform, opacity, filter;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
  contain: style paint;
  position: relative;
}
.main-createPlaylistButton-button:hover::before {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(135deg, rgba(var(--sn-dynamic-accent-rgb, var(--spice-rgb-accent)), 0.2) 0%, transparent 40%, transparent 60%, rgba(var(--sn-dynamic-accent-rgb, var(--spice-rgb-accent)), 0.14) 100%);
  border-radius: inherit;
  z-index: -1;
  opacity: 0;
  transition: opacity var(--sn-bg-gradient-transition, 0.8s ease-in-out);
  pointer-events: none;
}
.main-createPlaylistButton-button:hover:hover::before {
  opacity: 1;
}
.main-createPlaylistButton-button:active {
  transform: scale(0.98);
  transition-duration: 0.1s;
}
.main-createPlaylistButton-button:focus-visible {
  outline: 2px solid rgba(var(--spice-rgb-accent), 0.8);
  outline-offset: 2px;
}
.main-createPlaylistButton-button::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--spice-rgb-accent), var(--ripple-intensity)) 0%, rgba(var(--spice-rgb-accent), calc(var(--ripple-intensity) * 0.5)) 30%, transparent 70%);
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  pointer-events: none;
  z-index: 2;
  transition: all var(--ripple-duration, 0.4s) var(--sn-anim-easing-standard);
}
.main-createPlaylistButton-button:active::after {
  transform: translate(-50%, -50%) scale(20);
  opacity: 1;
  transition-duration: 0s;
}
.main-createPlaylistButton-button:hover {
  box-shadow: 0 0 12px rgba(var(--spice-rgb-accent), 0.3);
}

.main-navBar-navBarLink {
  transition: transform 0.2s var(--sn-transition-timing-default, var(--sn-anim-easing-standard)), box-shadow 0.2s var(--sn-transition-timing-default, var(--sn-anim-easing-standard)), background-color 0.2s var(--sn-transition-timing-default, var(--sn-anim-easing-standard)), backdrop-filter 0.2s var(--sn-transition-timing-default, var(--sn-anim-easing-standard)), opacity 0.2s var(--sn-transition-timing-default, var(--sn-anim-easing-standard));
  border-radius: 4px;
  will-change: transform, opacity, filter;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
  contain: style paint;
  transition: transform 0.2s var(--sn-transition-timing-default, var(--sn-anim-easing-standard)), box-shadow 0.2s var(--sn-transition-timing-default, var(--sn-anim-easing-standard)), background-color 0.2s var(--sn-transition-timing-default, var(--sn-anim-easing-standard)), backdrop-filter 0.2s var(--sn-transition-timing-default, var(--sn-anim-easing-standard)), opacity 0.2s var(--sn-transition-timing-default, var(--sn-anim-easing-standard));
  position: relative;
  overflow: hidden;
}
.main-navBar-navBarLink:hover {
  transform: scale(1.01) translateZ(0);
}
.main-navBar-navBarLink:active {
  transform: scale(0.98);
  transition-duration: 0.1s;
}
.main-navBar-navBarLink:focus-visible {
  outline: 2px solid rgba(var(--spice-rgb-accent), 0.8);
  outline-offset: 2px;
}
.main-navBar-navBarLink::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--spice-rgb-accent), var(--ripple-intensity)) 0%, rgba(var(--spice-rgb-accent), calc(var(--ripple-intensity) * 0.5)) 30%, transparent 70%);
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  pointer-events: none;
  z-index: 2;
  transition: all var(--ripple-duration, 0.4s) var(--sn-anim-easing-standard);
}
.main-navBar-navBarLink:active::after {
  transform: translate(-50%, -50%) scale(20);
  opacity: 1;
  transition-duration: 0s;
}

.main-shuffleButton-button,
.main-skipForwardButton-button,
.main-skipBackButton-button {
  transform: translateZ(0);
  transition: transform 0.2s var(--sn-transition-timing-default, var(--sn-anim-easing-standard)), box-shadow 0.2s var(--sn-transition-timing-default, var(--sn-anim-easing-standard)), background-color 0.2s var(--sn-transition-timing-default, var(--sn-anim-easing-standard)), backdrop-filter 0.2s var(--sn-transition-timing-default, var(--sn-anim-easing-standard)), opacity 0.2s var(--sn-transition-timing-default, var(--sn-anim-easing-standard));
  will-change: transform, opacity, filter;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
  contain: style paint;
  transition: transform 0.2s var(--sn-transition-timing-default, var(--sn-anim-easing-standard)), box-shadow 0.2s var(--sn-transition-timing-default, var(--sn-anim-easing-standard)), background-color 0.2s var(--sn-transition-timing-default, var(--sn-anim-easing-standard)), backdrop-filter 0.2s var(--sn-transition-timing-default, var(--sn-anim-easing-standard)), opacity 0.2s var(--sn-transition-timing-default, var(--sn-anim-easing-standard));
  position: relative;
  overflow: hidden;
  filter: hue-rotate(var(--micro-hue-shift)) brightness(calc(1 + var(--micro-beat-intensity) * 0.08));
  transition: all var(--micro-fast) var(--sn-easing-explorer, ease-out);
}
.main-shuffleButton-button:hover,
.main-skipForwardButton-button:hover,
.main-skipBackButton-button:hover {
  transform: scale(calc(1.05 + var(--micro-beat-intensity) * 0.03)) translateZ(0);
  will-change: transform, opacity, filter;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
  contain: style paint;
  position: relative;
}
.main-shuffleButton-button:hover::before,
.main-skipForwardButton-button:hover::before,
.main-skipBackButton-button:hover::before {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(135deg, rgba(var(--sn-dynamic-accent-rgb, var(--spice-rgb-accent)), 0.2) 0%, transparent 40%, transparent 60%, rgba(var(--sn-dynamic-accent-rgb, var(--spice-rgb-accent)), 0.14) 100%);
  border-radius: inherit;
  z-index: -1;
  opacity: 0;
  transition: opacity var(--sn-bg-gradient-transition, 0.8s ease-in-out);
  pointer-events: none;
}
.main-shuffleButton-button:hover:hover::before,
.main-skipForwardButton-button:hover:hover::before,
.main-skipBackButton-button:hover:hover::before {
  opacity: 1;
}
.main-shuffleButton-button:active,
.main-skipForwardButton-button:active,
.main-skipBackButton-button:active {
  transform: scale(0.98);
  transition-duration: 0.1s;
}
.main-shuffleButton-button:focus-visible,
.main-skipForwardButton-button:focus-visible,
.main-skipBackButton-button:focus-visible {
  outline: 2px solid rgba(var(--spice-rgb-accent), 0.8);
  outline-offset: 2px;
}
.main-shuffleButton-button::after,
.main-skipForwardButton-button::after,
.main-skipBackButton-button::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--spice-rgb-accent), var(--ripple-intensity)) 0%, rgba(var(--spice-rgb-accent), calc(var(--ripple-intensity) * 0.5)) 30%, transparent 70%);
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  pointer-events: none;
  z-index: 2;
  transition: all var(--ripple-duration, 0.4s) var(--sn-anim-easing-standard);
}
.main-shuffleButton-button:active::after,
.main-skipForwardButton-button:active::after,
.main-skipBackButton-button:active::after {
  transform: translate(-50%, -50%) scale(20);
  opacity: 1;
  transition-duration: 0s;
}
.main-shuffleButton-button:hover,
.main-skipForwardButton-button:hover,
.main-skipBackButton-button:hover {
  transform: translateZ(0);
  box-shadow: 0 0 var(--micro-glow-radius) rgba(var(--spice-rgb-accent), var(--feedback-moderate));
}
.main-shuffleButton-button.main-shuffleButton-active,
.main-skipForwardButton-button.main-shuffleButton-active,
.main-skipBackButton-button.main-shuffleButton-active {
  --ripple-color: var(--spice-accent);
  box-shadow: 0 0 calc(var(--micro-glow-radius) * 1.2) rgba(var(--spice-rgb-accent), calc(0.4 + var(--micro-beat-intensity) * 0.3));
  text-shadow: 0 0 calc(4px * var(--micro-beat-intensity)) rgba(var(--spice-rgb-accent), var(--micro-beat-intensity));
}

.main-playButton-PlayButton.main-playButton-primary {
  transform: scale(calc(var(--micro-breathing-scale) * (1 + var(--micro-beat-intensity) * 0.05)));
  transition: transform 0.2s var(--sn-transition-timing-default, var(--sn-anim-easing-standard)), box-shadow 0.2s var(--sn-transition-timing-default, var(--sn-anim-easing-standard)), background-color 0.2s var(--sn-transition-timing-default, var(--sn-anim-easing-standard)), backdrop-filter 0.2s var(--sn-transition-timing-default, var(--sn-anim-easing-standard)), opacity 0.2s var(--sn-transition-timing-default, var(--sn-anim-easing-standard));
  will-change: transform, opacity, filter;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
  contain: style paint;
  transition: transform 0.2s var(--sn-transition-timing-default, var(--sn-anim-easing-standard)), box-shadow 0.2s var(--sn-transition-timing-default, var(--sn-anim-easing-standard)), background-color 0.2s var(--sn-transition-timing-default, var(--sn-anim-easing-standard)), backdrop-filter 0.2s var(--sn-transition-timing-default, var(--sn-anim-easing-standard)), opacity 0.2s var(--sn-transition-timing-default, var(--sn-anim-easing-standard));
  position: relative;
  overflow: hidden;
  filter: hue-rotate(var(--micro-hue-shift)) brightness(calc(1 + var(--micro-beat-intensity) * 0.12)) saturate(calc(1.1 + var(--micro-beat-intensity) * 0.2));
  transition: all var(--micro-fast) var(--sn-anim-easing-bounce-smooth);
}
.main-playButton-PlayButton.main-playButton-primary:hover {
  transform: scale(calc(1.08 + var(--micro-beat-intensity) * 0.05)) translateZ(0);
  will-change: transform, opacity, filter;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
  contain: style paint;
  position: relative;
}
.main-playButton-PlayButton.main-playButton-primary:hover::before {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(135deg, rgba(var(--sn-dynamic-accent-rgb, var(--spice-rgb-accent)), 0.2) 0%, transparent 40%, transparent 60%, rgba(var(--sn-dynamic-accent-rgb, var(--spice-rgb-accent)), 0.14) 100%);
  border-radius: inherit;
  z-index: -1;
  opacity: 0;
  transition: opacity var(--sn-bg-gradient-transition, 0.8s ease-in-out);
  pointer-events: none;
}
.main-playButton-PlayButton.main-playButton-primary:hover:hover::before {
  opacity: 1;
}
.main-playButton-PlayButton.main-playButton-primary:active {
  transform: scale(0.98);
  transition-duration: 0.1s;
}
.main-playButton-PlayButton.main-playButton-primary:focus-visible {
  outline: 2px solid rgba(var(--spice-rgb-accent), 0.8);
  outline-offset: 2px;
}
.main-playButton-PlayButton.main-playButton-primary::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--spice-rgb-accent), var(--ripple-intensity)) 0%, rgba(var(--spice-rgb-accent), calc(var(--ripple-intensity) * 0.5)) 30%, transparent 70%);
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  pointer-events: none;
  z-index: 2;
  transition: all var(--ripple-duration, 0.4s) var(--sn-anim-easing-standard);
}
.main-playButton-PlayButton.main-playButton-primary:active::after {
  transform: translate(-50%, -50%) scale(20);
  opacity: 1;
  transition-duration: 0s;
}
.main-playButton-PlayButton.main-playButton-primary:hover {
  box-shadow: 0 0 calc(var(--micro-glow-radius) * 2) rgba(var(--spice-rgb-accent), calc(0.5 + var(--micro-beat-intensity) * 0.3));
  transform: translateZ(0);
}

.x-filterBox-filterInput {
  transition: transform 0.2s var(--sn-transition-timing-default, var(--sn-anim-easing-standard)), box-shadow 0.2s var(--sn-transition-timing-default, var(--sn-anim-easing-standard)), background-color 0.2s var(--sn-transition-timing-default, var(--sn-anim-easing-standard)), backdrop-filter 0.2s var(--sn-transition-timing-default, var(--sn-anim-easing-standard)), opacity 0.2s var(--sn-transition-timing-default, var(--sn-anim-easing-standard));
  border-radius: 6px;
}
.x-filterBox-filterInput:hover {
  transform: scale(1.01) translateZ(0);
}
.x-filterBox-filterInput:active {
  transform: scale(0.98);
  transition-duration: 0.1s;
}
.x-filterBox-filterInput:focus-visible {
  outline: 2px solid rgba(var(--spice-rgb-accent), 0.8);
  outline-offset: 2px;
}
.x-filterBox-filterInput:focus {
  box-shadow: 0 0 8px rgba(var(--spice-rgb-accent), 0.3);
  border-color: rgba(var(--spice-rgb-accent), 0.6);
}

.main-dropDown-dropDown {
  transition: transform 0.2s var(--sn-transition-timing-default, var(--sn-anim-easing-standard)), box-shadow 0.2s var(--sn-transition-timing-default, var(--sn-anim-easing-standard)), background-color 0.2s var(--sn-transition-timing-default, var(--sn-anim-easing-standard)), backdrop-filter 0.2s var(--sn-transition-timing-default, var(--sn-anim-easing-standard)), opacity 0.2s var(--sn-transition-timing-default, var(--sn-anim-easing-standard));
}
.main-dropDown-dropDown:hover {
  transform: scale(1.01) translateZ(0);
}
.main-dropDown-dropDown:active {
  transform: scale(0.98);
  transition-duration: 0.1s;
}
.main-dropDown-dropDown:focus-visible {
  outline: 2px solid rgba(var(--spice-rgb-accent), 0.8);
  outline-offset: 2px;
}
.main-dropDown-dropDown:focus {
  box-shadow: 0 0 6px rgba(var(--spice-rgb-accent), 0.2);
}

.main-trackList-playingIcon {
  will-change: transform, opacity, filter;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
  contain: style paint;
  transition: transform 0.2s var(--sn-transition-timing-default, var(--sn-anim-easing-standard)), box-shadow 0.2s var(--sn-transition-timing-default, var(--sn-anim-easing-standard)), background-color 0.2s var(--sn-transition-timing-default, var(--sn-anim-easing-standard)), backdrop-filter 0.2s var(--sn-transition-timing-default, var(--sn-anim-easing-standard)), opacity 0.2s var(--sn-transition-timing-default, var(--sn-anim-easing-standard));
  position: relative;
  overflow: hidden;
  border-radius: 4px;
}
.main-trackList-playingIcon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--spice-rgb-accent), var(--ripple-intensity)) 0%, rgba(var(--spice-rgb-accent), calc(var(--ripple-intensity) * 0.5)) 30%, transparent 70%);
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  pointer-events: none;
  z-index: 2;
  transition: all var(--ripple-duration, 0.4s) var(--sn-anim-easing-standard);
}
.main-trackList-playingIcon:active::after {
  transform: translate(-50%, -50%) scale(20);
  opacity: 1;
  transition-duration: 0s;
}
.main-trackList-playingIcon::before {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(45deg, rgba(var(--spice-rgb-accent), 0.2) 0%, transparent 50%, rgba(var(--spice-rgb-accent), 0.2) 100%);
  border-radius: inherit;
  z-index: -1;
  animation: playing-glow 2s ease-in-out infinite;
}
@keyframes playing-glow {
  0%, 100% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.7;
  }
}

.main-contextMenu-menuItemButton {
  transition: transform 0.2s var(--sn-transition-timing-default, var(--sn-anim-easing-standard)), box-shadow 0.2s var(--sn-transition-timing-default, var(--sn-anim-easing-standard)), background-color 0.2s var(--sn-transition-timing-default, var(--sn-anim-easing-standard)), backdrop-filter 0.2s var(--sn-transition-timing-default, var(--sn-anim-easing-standard)), opacity 0.2s var(--sn-transition-timing-default, var(--sn-anim-easing-standard));
  will-change: transform, opacity, filter;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
  contain: style paint;
  transition: transform 0.2s var(--sn-transition-timing-default, var(--sn-anim-easing-standard)), box-shadow 0.2s var(--sn-transition-timing-default, var(--sn-anim-easing-standard)), background-color 0.2s var(--sn-transition-timing-default, var(--sn-anim-easing-standard)), backdrop-filter 0.2s var(--sn-transition-timing-default, var(--sn-anim-easing-standard)), opacity 0.2s var(--sn-transition-timing-default, var(--sn-anim-easing-standard));
  position: relative;
  overflow: hidden;
  border-radius: 4px;
}
.main-contextMenu-menuItemButton:hover {
  transform: scale(1.02) translateZ(0);
}
.main-contextMenu-menuItemButton:active {
  transform: scale(0.98);
  transition-duration: 0.1s;
}
.main-contextMenu-menuItemButton:focus-visible {
  outline: 2px solid rgba(var(--spice-rgb-accent), 0.8);
  outline-offset: 2px;
}
.main-contextMenu-menuItemButton::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--spice-rgb-accent), var(--ripple-intensity)) 0%, rgba(var(--spice-rgb-accent), calc(var(--ripple-intensity) * 0.5)) 30%, transparent 70%);
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  pointer-events: none;
  z-index: 2;
  transition: all var(--ripple-duration, 0.4s) var(--sn-anim-easing-standard);
}
.main-contextMenu-menuItemButton:active::after {
  transform: translate(-50%, -50%) scale(20);
  opacity: 1;
  transition-duration: 0s;
}
.main-contextMenu-menuItemButton:hover {
  background: linear-gradient(90deg, rgba(var(--spice-rgb-surface1), 0.8) 0%, rgba(var(--spice-rgb-surface2), 0.6) 100%);
}

@media (max-width: 768px) {
  :root {
    --ripple-intensity: var(--feedback-subtle);
    --interaction-feedback-delay: 0.05s;
  }
  .main-card-card::after,
  .main-card-cardContainer::after {
    transform: translate(-50%, -50%) scale(0);
  }
  .main-card-card:active::after,
  .main-card-cardContainer:active::after {
    transform: translate(-50%, -50%) scale(15);
  }
  .spicetify-playlist-list li::after {
    transform: translate(-50%, -50%) scale(0);
  }
  .spicetify-playlist-list li:active::after {
    transform: translate(-50%, -50%) scale(15);
  }
}
@media (prefers-reduced-motion: reduce) {
  .main-card-card,
  .main-card-cardContainer {
    transition: opacity var(--micro-medium) ease, background-color var(--micro-medium) ease;
  }
  .main-card-card::after,
  .main-card-cardContainer::after {
    display: none;
  }
  .main-card-card:hover,
  .main-card-cardContainer:hover {
    transform: none;
  }
  .spicetify-playlist-list li,
  .main-createPlaylistButton-button,
  .main-shuffleButton-button,
  .main-playButton-PlayButton {
    transition: opacity var(--micro-medium) ease, background-color var(--micro-medium) ease;
  }
  .spicetify-playlist-list li::after,
  .main-createPlaylistButton-button::after,
  .main-shuffleButton-button::after,
  .main-playButton-PlayButton::after {
    display: none;
  }
  .spicetify-playlist-list li:hover,
  .main-createPlaylistButton-button:hover,
  .main-shuffleButton-button:hover,
  .main-playButton-PlayButton:hover {
    transform: none;
  }
}
@media (prefers-contrast: high) {
  :root {
    --ripple-intensity: var(--feedback-prominent);
    --feedback-subtle: 0.2;
    --feedback-moderate: 0.4;
    --feedback-prominent: 0.6;
  }
}
div.main-trackList-trackListRow[role=row] {
  position: relative;
  overflow: visible;
}
div.main-trackList-trackListRow[role=row]::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: radial-gradient(circle, rgba(var(--sn-bg-gradient-primary-rgb), 0.3) 0%, rgba(var(--sn-bg-gradient-accent-rgb), 0.2) 30%, transparent 100%);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: -1;
  opacity: 0;
  transition: all 0.3s ease-out;
}
div.main-trackList-trackListRow[role=row]:hover::before, div.main-trackList-trackListRow[role=row]:focus::before, div.main-trackList-trackListRow[role=row][aria-selected=true]::before {
  width: 200%;
  height: 200%;
  opacity: 1;
  animation: fluid-ripple 8s ease-out infinite;
}

.main-navBar-navBarLink {
  position: relative;
  overflow: visible;
}
.main-navBar-navBarLink::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: radial-gradient(circle, rgba(var(--sn-bg-gradient-primary-rgb), 0.3) 0%, rgba(var(--sn-bg-gradient-accent-rgb), 0.2) 30%, transparent 100%);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: -1;
  opacity: 0;
  transition: all 0.3s ease-out;
}
.main-navBar-navBarLink:hover::before, .main-navBar-navBarLink:focus::before, .main-navBar-navBarLink[aria-selected=true]::before {
  width: 200%;
  height: 200%;
  opacity: 1;
  animation: fluid-ripple 8s ease-out infinite;
}

.main-playButton-PlayButton,
.main-playPauseButton-button,
.main-card-PlayButtonContainer button {
  position: relative;
  overflow: visible;
}
.main-playButton-PlayButton::before,
.main-playPauseButton-button::before,
.main-card-PlayButtonContainer button::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: radial-gradient(circle, rgba(var(--sn-bg-gradient-primary-rgb), 0.3) 0%, rgba(var(--sn-bg-gradient-accent-rgb), 0.2) 30%, transparent 100%);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: -1;
  opacity: 0;
  transition: all 0.3s ease-out;
}
.main-playButton-PlayButton:hover::before, .main-playButton-PlayButton:focus::before, .main-playButton-PlayButton[aria-selected=true]::before,
.main-playPauseButton-button:hover::before,
.main-playPauseButton-button:focus::before,
.main-playPauseButton-button[aria-selected=true]::before,
.main-card-PlayButtonContainer button:hover::before,
.main-card-PlayButtonContainer button:focus::before,
.main-card-PlayButtonContainer button[aria-selected=true]::before {
  width: 200%;
  height: 200%;
  opacity: 1;
  animation: fluid-ripple 8s ease-out infinite;
}

.main-yourLibrary-entryPoints button,
.main-createPlaylistButton-button {
  position: relative;
  overflow: visible;
}
.main-yourLibrary-entryPoints button::before,
.main-createPlaylistButton-button::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: radial-gradient(circle, rgba(var(--sn-bg-gradient-primary-rgb), 0.3) 0%, rgba(var(--sn-bg-gradient-accent-rgb), 0.2) 30%, transparent 100%);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: -1;
  opacity: 0;
  transition: all 0.3s ease-out;
}
.main-yourLibrary-entryPoints button:hover::before, .main-yourLibrary-entryPoints button:focus::before, .main-yourLibrary-entryPoints button[aria-selected=true]::before,
.main-createPlaylistButton-button:hover::before,
.main-createPlaylistButton-button:focus::before,
.main-createPlaylistButton-button[aria-selected=true]::before {
  width: 200%;
  height: 200%;
  opacity: 1;
  animation: fluid-ripple 8s ease-out infinite;
}

.sn-crystalline-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
}
.sn-crystalline-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(var(--sn-oklab-highlight-rgb, 255, 255, 255), 0.1) 0%, rgba(var(--sn-oklab-highlight-rgb, 255, 255, 255), 0) 70%);
  opacity: 0.5;
  z-index: var(--z-starfield, -10);
}

.sn-atmospheric-crystal {
  position: absolute;
  opacity: 0.3;
  transform-style: preserve-3d;
  z-index: var(--z-crystals, -9);
  animation: float 30s ease-in-out infinite alternate;
}
.sn-atmospheric-crystal--a {
  width: 30vw;
  top: 5vh;
  left: -5vw;
  animation-duration: 45s;
  background: url("../../assets/icons/crystal_a.svg") no-repeat center center/contain;
}
.sn-atmospheric-crystal--b {
  width: 40vw;
  bottom: -10vh;
  right: -8vw;
  animation-duration: 60s;
  background: url("../../assets/icons/crystal_b.svg") no-repeat center center/contain;
}
.sn-atmospheric-crystal--c {
  width: 25vw;
  top: 20vh;
  right: 10vw;
  animation-duration: 35s;
  animation-delay: -10s;
  background: url("../../assets/icons/crystal_c.svg") no-repeat center center/contain;
}

@keyframes float {
  from {
    transform: translate3d(0, 0, -40px);
  }
  to {
    transform: translate3d(5vw, -5vh, -40px);
  }
}
@media (prefers-color-scheme: dark) {
  .sn-atmospheric-crystal {
    filter: hue-rotate(180deg) brightness(0.8);
  }
}
@media (prefers-reduced-motion: reduce) {
  .sn-atmospheric-crystal {
    animation: none;
    transform: translateZ(-40px);
  }
}
/* ████████████████████████████████████████████████████████████████████████████████*/
/* SIDEBAR INTERACTIVE SYSTEM MODULE*/
/* Advanced Interactive Effects, Meditation Modes & Visual Effects Field*/
/* ████████████████████████████████████████████████████████████████████████████████*/
/**/
/* This module contains advanced sidebar effects that complement the base*/
/* SidebarVisualEffectsSystem, including:*/
/* - Atmospheric effects (hue shifting, saturation control, vibration)*/
/* - Advanced visual effects field coordination*/
/**/
/**/
/* Dependencies:*/
/* - Base sidebar visual effects system (_sidebar_visual_effects.scss)*/
/* - Year 3000 gradient variables (--sn-gradient-*-rgb)*/
/* - Spicetify theme variables (--spice-rgb-*)*/
/**/
/* ████████████████████████████████████████████████████████████████████████████████*/
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar,
.Root__nav-bar {
  /* Links in library header*/
}
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar nav[aria-label=Main] a,
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar div[data-testid=left-sidebar-footer] a,
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar a.link-subtle.main-navBar-navBarLink,
.Root__nav-bar nav[aria-label=Main] a,
.Root__nav-bar div[data-testid=left-sidebar-footer] a,
.Root__nav-bar a.link-subtle.main-navBar-navBarLink {
  /* Common class for Home, Search etc.*/
  position: relative;
  display: flex; /* Use flex for better alignment of icons and text*/
  align-items: center;
  padding: 8px 24px; /* Standard Spicetify padding*/
  margin: 2px 0;
  border-radius: 6px;
  opacity: var(--sn-nav-item-base-opacity);
  transform: scale(var(--sn-nav-item-transform-scale));
  transition: opacity var(--sn-nav-item-transition-duration) ease, background-color var(--sn-nav-item-transition-duration) ease, transform var(--sn-nav-item-transition-duration) var(--sn-anim-easing-dynamic), box-shadow var(--sn-nav-item-transition-duration) ease;
  /* Quantum glow effect via pseudo-element*/
  /* Hover and active states*/
  /* Active/current page additional styling*/
}
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar nav[aria-label=Main] a::before,
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar div[data-testid=left-sidebar-footer] a::before,
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar a.link-subtle.main-navBar-navBarLink::before,
.Root__nav-bar nav[aria-label=Main] a::before,
.Root__nav-bar div[data-testid=left-sidebar-footer] a::before,
.Root__nav-bar a.link-subtle.main-navBar-navBarLink::before {
  content: "";
  position: absolute;
  inset: -1px; /* Slightly larger than the element*/
  border-radius: inherit;
  background: radial-gradient(ellipse at center, rgba(var(--sn-nav-item-glow-color-rgb), calc(var(--sn-nav-item-glow-intensity) * 0.6)) 0%, rgba(var(--sn-nav-item-glow-color-rgb), calc(var(--sn-nav-item-glow-intensity) * 0.2)) 40%, transparent 70%);
  opacity: 0;
  transition: opacity var(--sn-nav-item-transition-duration) ease;
  z-index: -1; /* Behind the element*/
}
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar nav[aria-label=Main] a:hover, div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar nav[aria-label=Main] a:focus, div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar nav[aria-label=Main] a[aria-current=page], div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar nav[aria-label=Main] a.main-navBar-navBarLinkActive,
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar div[data-testid=left-sidebar-footer] a:hover,
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar div[data-testid=left-sidebar-footer] a:focus,
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar div[data-testid=left-sidebar-footer] a[aria-current=page],
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar div[data-testid=left-sidebar-footer] a.main-navBar-navBarLinkActive,
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar a.link-subtle.main-navBar-navBarLink:hover,
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar a.link-subtle.main-navBar-navBarLink:focus,
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar a.link-subtle.main-navBar-navBarLink[aria-current=page],
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar a.link-subtle.main-navBar-navBarLink.main-navBar-navBarLinkActive,
.Root__nav-bar nav[aria-label=Main] a:hover,
.Root__nav-bar nav[aria-label=Main] a:focus,
.Root__nav-bar nav[aria-label=Main] a[aria-current=page],
.Root__nav-bar nav[aria-label=Main] a.main-navBar-navBarLinkActive,
.Root__nav-bar div[data-testid=left-sidebar-footer] a:hover,
.Root__nav-bar div[data-testid=left-sidebar-footer] a:focus,
.Root__nav-bar div[data-testid=left-sidebar-footer] a[aria-current=page],
.Root__nav-bar div[data-testid=left-sidebar-footer] a.main-navBar-navBarLinkActive,
.Root__nav-bar a.link-subtle.main-navBar-navBarLink:hover,
.Root__nav-bar a.link-subtle.main-navBar-navBarLink:focus,
.Root__nav-bar a.link-subtle.main-navBar-navBarLink[aria-current=page],
.Root__nav-bar a.link-subtle.main-navBar-navBarLink.main-navBar-navBarLinkActive {
  background-color: rgba(var(--sn-nav-item-glow-color-rgb), var(--sn-nav-item-hover-bg-opacity));
  transform: scale(var(--sn-nav-item-transform-scale)) translateY(-0.5px); /* Slight lift*/
  box-shadow: 0 2px 8px -2px rgba(var(--sn-nav-item-glow-color-rgb), calc(var(--sn-nav-item-glow-intensity) * 0.4));
  /* Text glow enhancement for high-energy states*/
}
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar nav[aria-label=Main] a:hover::before, div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar nav[aria-label=Main] a:focus::before, div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar nav[aria-label=Main] a[aria-current=page]::before, div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar nav[aria-label=Main] a.main-navBar-navBarLinkActive::before,
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar div[data-testid=left-sidebar-footer] a:hover::before,
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar div[data-testid=left-sidebar-footer] a:focus::before,
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar div[data-testid=left-sidebar-footer] a[aria-current=page]::before,
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar div[data-testid=left-sidebar-footer] a.main-navBar-navBarLinkActive::before,
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar a.link-subtle.main-navBar-navBarLink:hover::before,
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar a.link-subtle.main-navBar-navBarLink:focus::before,
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar a.link-subtle.main-navBar-navBarLink[aria-current=page]::before,
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar a.link-subtle.main-navBar-navBarLink.main-navBar-navBarLinkActive::before,
.Root__nav-bar nav[aria-label=Main] a:hover::before,
.Root__nav-bar nav[aria-label=Main] a:focus::before,
.Root__nav-bar nav[aria-label=Main] a[aria-current=page]::before,
.Root__nav-bar nav[aria-label=Main] a.main-navBar-navBarLinkActive::before,
.Root__nav-bar div[data-testid=left-sidebar-footer] a:hover::before,
.Root__nav-bar div[data-testid=left-sidebar-footer] a:focus::before,
.Root__nav-bar div[data-testid=left-sidebar-footer] a[aria-current=page]::before,
.Root__nav-bar div[data-testid=left-sidebar-footer] a.main-navBar-navBarLinkActive::before,
.Root__nav-bar a.link-subtle.main-navBar-navBarLink:hover::before,
.Root__nav-bar a.link-subtle.main-navBar-navBarLink:focus::before,
.Root__nav-bar a.link-subtle.main-navBar-navBarLink[aria-current=page]::before,
.Root__nav-bar a.link-subtle.main-navBar-navBarLink.main-navBar-navBarLinkActive::before {
  opacity: 1; /* Activate glow*/
}
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar nav[aria-label=Main] a:hover .Type__TypeElement-sc-goliZz-0,
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar nav[aria-label=Main] a:hover span, div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar nav[aria-label=Main] a:focus .Type__TypeElement-sc-goliZz-0,
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar nav[aria-label=Main] a:focus span, div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar nav[aria-label=Main] a[aria-current=page] .Type__TypeElement-sc-goliZz-0,
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar nav[aria-label=Main] a[aria-current=page] span, div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar nav[aria-label=Main] a.main-navBar-navBarLinkActive .Type__TypeElement-sc-goliZz-0,
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar nav[aria-label=Main] a.main-navBar-navBarLinkActive span,
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar div[data-testid=left-sidebar-footer] a:hover .Type__TypeElement-sc-goliZz-0,
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar div[data-testid=left-sidebar-footer] a:hover span,
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar div[data-testid=left-sidebar-footer] a:focus .Type__TypeElement-sc-goliZz-0,
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar div[data-testid=left-sidebar-footer] a:focus span,
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar div[data-testid=left-sidebar-footer] a[aria-current=page] .Type__TypeElement-sc-goliZz-0,
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar div[data-testid=left-sidebar-footer] a[aria-current=page] span,
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar div[data-testid=left-sidebar-footer] a.main-navBar-navBarLinkActive .Type__TypeElement-sc-goliZz-0,
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar div[data-testid=left-sidebar-footer] a.main-navBar-navBarLinkActive span,
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar a.link-subtle.main-navBar-navBarLink:hover .Type__TypeElement-sc-goliZz-0,
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar a.link-subtle.main-navBar-navBarLink:hover span,
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar a.link-subtle.main-navBar-navBarLink:focus .Type__TypeElement-sc-goliZz-0,
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar a.link-subtle.main-navBar-navBarLink:focus span,
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar a.link-subtle.main-navBar-navBarLink[aria-current=page] .Type__TypeElement-sc-goliZz-0,
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar a.link-subtle.main-navBar-navBarLink[aria-current=page] span,
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar a.link-subtle.main-navBar-navBarLink.main-navBar-navBarLinkActive .Type__TypeElement-sc-goliZz-0,
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar a.link-subtle.main-navBar-navBarLink.main-navBar-navBarLinkActive span,
.Root__nav-bar nav[aria-label=Main] a:hover .Type__TypeElement-sc-goliZz-0,
.Root__nav-bar nav[aria-label=Main] a:hover span,
.Root__nav-bar nav[aria-label=Main] a:focus .Type__TypeElement-sc-goliZz-0,
.Root__nav-bar nav[aria-label=Main] a:focus span,
.Root__nav-bar nav[aria-label=Main] a[aria-current=page] .Type__TypeElement-sc-goliZz-0,
.Root__nav-bar nav[aria-label=Main] a[aria-current=page] span,
.Root__nav-bar nav[aria-label=Main] a.main-navBar-navBarLinkActive .Type__TypeElement-sc-goliZz-0,
.Root__nav-bar nav[aria-label=Main] a.main-navBar-navBarLinkActive span,
.Root__nav-bar div[data-testid=left-sidebar-footer] a:hover .Type__TypeElement-sc-goliZz-0,
.Root__nav-bar div[data-testid=left-sidebar-footer] a:hover span,
.Root__nav-bar div[data-testid=left-sidebar-footer] a:focus .Type__TypeElement-sc-goliZz-0,
.Root__nav-bar div[data-testid=left-sidebar-footer] a:focus span,
.Root__nav-bar div[data-testid=left-sidebar-footer] a[aria-current=page] .Type__TypeElement-sc-goliZz-0,
.Root__nav-bar div[data-testid=left-sidebar-footer] a[aria-current=page] span,
.Root__nav-bar div[data-testid=left-sidebar-footer] a.main-navBar-navBarLinkActive .Type__TypeElement-sc-goliZz-0,
.Root__nav-bar div[data-testid=left-sidebar-footer] a.main-navBar-navBarLinkActive span,
.Root__nav-bar a.link-subtle.main-navBar-navBarLink:hover .Type__TypeElement-sc-goliZz-0,
.Root__nav-bar a.link-subtle.main-navBar-navBarLink:hover span,
.Root__nav-bar a.link-subtle.main-navBar-navBarLink:focus .Type__TypeElement-sc-goliZz-0,
.Root__nav-bar a.link-subtle.main-navBar-navBarLink:focus span,
.Root__nav-bar a.link-subtle.main-navBar-navBarLink[aria-current=page] .Type__TypeElement-sc-goliZz-0,
.Root__nav-bar a.link-subtle.main-navBar-navBarLink[aria-current=page] span,
.Root__nav-bar a.link-subtle.main-navBar-navBarLink.main-navBar-navBarLinkActive .Type__TypeElement-sc-goliZz-0,
.Root__nav-bar a.link-subtle.main-navBar-navBarLink.main-navBar-navBarLinkActive span {
  text-shadow: 0 0 6px rgba(var(--sn-nav-text-energy-color-rgb), var(--sn-nav-text-energy-opacity));
}
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar nav[aria-label=Main] a[aria-current=page], div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar nav[aria-label=Main] a.main-navBar-navBarLinkActive,
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar div[data-testid=left-sidebar-footer] a[aria-current=page],
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar div[data-testid=left-sidebar-footer] a.main-navBar-navBarLinkActive,
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar a.link-subtle.main-navBar-navBarLink[aria-current=page],
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar a.link-subtle.main-navBar-navBarLink.main-navBar-navBarLinkActive,
.Root__nav-bar nav[aria-label=Main] a[aria-current=page],
.Root__nav-bar nav[aria-label=Main] a.main-navBar-navBarLinkActive,
.Root__nav-bar div[data-testid=left-sidebar-footer] a[aria-current=page],
.Root__nav-bar div[data-testid=left-sidebar-footer] a.main-navBar-navBarLinkActive,
.Root__nav-bar a.link-subtle.main-navBar-navBarLink[aria-current=page],
.Root__nav-bar a.link-subtle.main-navBar-navBarLink.main-navBar-navBarLinkActive {
  background-color: rgba(var(--sn-nav-item-glow-color-rgb), var(--sn-nav-item-active-bg-opacity));
  box-shadow: inset 0 1px 3px rgba(var(--sn-nav-item-glow-color-rgb), calc(var(--sn-nav-item-glow-intensity) * 0.3)), 0 2px 8px -2px rgba(var(--sn-nav-item-glow-color-rgb), calc(var(--sn-nav-item-glow-intensity) * 0.5));
}
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar .main-yourLibraryX-header a,
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar .main-yourLibrary-header a,
.Root__nav-bar .main-yourLibraryX-header a,
.Root__nav-bar .main-yourLibrary-header a {
  position: relative;
  display: flex;
  align-items: center;
  padding: 8px 24px;
  margin: 2px 0;
  border-radius: 6px;
  opacity: var(--sn-nav-item-base-opacity);
  transform: scale(var(--sn-nav-item-transform-scale));
  transition: opacity var(--sn-nav-item-transition-duration) ease, background-color var(--sn-nav-item-transition-duration) ease, transform var(--sn-nav-item-transition-duration) var(--sn-anim-easing-dynamic), box-shadow var(--sn-nav-item-transition-duration) ease;
}
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar .main-yourLibraryX-header a::before,
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar .main-yourLibrary-header a::before,
.Root__nav-bar .main-yourLibraryX-header a::before,
.Root__nav-bar .main-yourLibrary-header a::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: radial-gradient(ellipse at center, rgba(var(--sn-nav-item-glow-color-rgb), calc(var(--sn-nav-item-glow-intensity) * 0.6)) 0%, rgba(var(--sn-nav-item-glow-color-rgb), calc(var(--sn-nav-item-glow-intensity) * 0.2)) 40%, transparent 70%);
  opacity: 0;
  transition: opacity var(--sn-nav-item-transition-duration) ease;
  z-index: -1;
}
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar .main-yourLibraryX-header a:hover, div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar .main-yourLibraryX-header a:focus, div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar .main-yourLibraryX-header a[aria-current=page], div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar .main-yourLibraryX-header a.main-navBar-navBarLinkActive,
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar .main-yourLibrary-header a:hover,
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar .main-yourLibrary-header a:focus,
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar .main-yourLibrary-header a[aria-current=page],
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar .main-yourLibrary-header a.main-navBar-navBarLinkActive,
.Root__nav-bar .main-yourLibraryX-header a:hover,
.Root__nav-bar .main-yourLibraryX-header a:focus,
.Root__nav-bar .main-yourLibraryX-header a[aria-current=page],
.Root__nav-bar .main-yourLibraryX-header a.main-navBar-navBarLinkActive,
.Root__nav-bar .main-yourLibrary-header a:hover,
.Root__nav-bar .main-yourLibrary-header a:focus,
.Root__nav-bar .main-yourLibrary-header a[aria-current=page],
.Root__nav-bar .main-yourLibrary-header a.main-navBar-navBarLinkActive {
  background-color: rgba(var(--sn-nav-item-glow-color-rgb), var(--sn-nav-item-hover-bg-opacity));
  transform: scale(var(--sn-nav-item-transform-scale)) translateY(-0.5px);
  box-shadow: 0 2px 8px -2px rgba(var(--sn-nav-item-glow-color-rgb), calc(var(--sn-nav-item-glow-intensity) * 0.4));
}
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar .main-yourLibraryX-header a:hover::before, div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar .main-yourLibraryX-header a:focus::before, div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar .main-yourLibraryX-header a[aria-current=page]::before, div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar .main-yourLibraryX-header a.main-navBar-navBarLinkActive::before,
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar .main-yourLibrary-header a:hover::before,
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar .main-yourLibrary-header a:focus::before,
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar .main-yourLibrary-header a[aria-current=page]::before,
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar .main-yourLibrary-header a.main-navBar-navBarLinkActive::before,
.Root__nav-bar .main-yourLibraryX-header a:hover::before,
.Root__nav-bar .main-yourLibraryX-header a:focus::before,
.Root__nav-bar .main-yourLibraryX-header a[aria-current=page]::before,
.Root__nav-bar .main-yourLibraryX-header a.main-navBar-navBarLinkActive::before,
.Root__nav-bar .main-yourLibrary-header a:hover::before,
.Root__nav-bar .main-yourLibrary-header a:focus::before,
.Root__nav-bar .main-yourLibrary-header a[aria-current=page]::before,
.Root__nav-bar .main-yourLibrary-header a.main-navBar-navBarLinkActive::before {
  opacity: 1;
}
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar .main-yourLibraryX-header a:hover .Type__TypeElement-sc-goliZz-0,
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar .main-yourLibraryX-header a:hover span, div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar .main-yourLibraryX-header a:focus .Type__TypeElement-sc-goliZz-0,
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar .main-yourLibraryX-header a:focus span, div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar .main-yourLibraryX-header a[aria-current=page] .Type__TypeElement-sc-goliZz-0,
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar .main-yourLibraryX-header a[aria-current=page] span, div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar .main-yourLibraryX-header a.main-navBar-navBarLinkActive .Type__TypeElement-sc-goliZz-0,
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar .main-yourLibraryX-header a.main-navBar-navBarLinkActive span,
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar .main-yourLibrary-header a:hover .Type__TypeElement-sc-goliZz-0,
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar .main-yourLibrary-header a:hover span,
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar .main-yourLibrary-header a:focus .Type__TypeElement-sc-goliZz-0,
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar .main-yourLibrary-header a:focus span,
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar .main-yourLibrary-header a[aria-current=page] .Type__TypeElement-sc-goliZz-0,
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar .main-yourLibrary-header a[aria-current=page] span,
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar .main-yourLibrary-header a.main-navBar-navBarLinkActive .Type__TypeElement-sc-goliZz-0,
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar .main-yourLibrary-header a.main-navBar-navBarLinkActive span,
.Root__nav-bar .main-yourLibraryX-header a:hover .Type__TypeElement-sc-goliZz-0,
.Root__nav-bar .main-yourLibraryX-header a:hover span,
.Root__nav-bar .main-yourLibraryX-header a:focus .Type__TypeElement-sc-goliZz-0,
.Root__nav-bar .main-yourLibraryX-header a:focus span,
.Root__nav-bar .main-yourLibraryX-header a[aria-current=page] .Type__TypeElement-sc-goliZz-0,
.Root__nav-bar .main-yourLibraryX-header a[aria-current=page] span,
.Root__nav-bar .main-yourLibraryX-header a.main-navBar-navBarLinkActive .Type__TypeElement-sc-goliZz-0,
.Root__nav-bar .main-yourLibraryX-header a.main-navBar-navBarLinkActive span,
.Root__nav-bar .main-yourLibrary-header a:hover .Type__TypeElement-sc-goliZz-0,
.Root__nav-bar .main-yourLibrary-header a:hover span,
.Root__nav-bar .main-yourLibrary-header a:focus .Type__TypeElement-sc-goliZz-0,
.Root__nav-bar .main-yourLibrary-header a:focus span,
.Root__nav-bar .main-yourLibrary-header a[aria-current=page] .Type__TypeElement-sc-goliZz-0,
.Root__nav-bar .main-yourLibrary-header a[aria-current=page] span,
.Root__nav-bar .main-yourLibrary-header a.main-navBar-navBarLinkActive .Type__TypeElement-sc-goliZz-0,
.Root__nav-bar .main-yourLibrary-header a.main-navBar-navBarLinkActive span {
  text-shadow: 0 0 6px rgba(var(--sn-nav-text-energy-color-rgb), var(--sn-nav-text-energy-opacity));
}
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar .main-yourLibraryX-header a[aria-current=page], div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar .main-yourLibraryX-header a.main-navBar-navBarLinkActive,
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar .main-yourLibrary-header a[aria-current=page],
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar .main-yourLibrary-header a.main-navBar-navBarLinkActive,
.Root__nav-bar .main-yourLibraryX-header a[aria-current=page],
.Root__nav-bar .main-yourLibraryX-header a.main-navBar-navBarLinkActive,
.Root__nav-bar .main-yourLibrary-header a[aria-current=page],
.Root__nav-bar .main-yourLibrary-header a.main-navBar-navBarLinkActive {
  background-color: rgba(var(--sn-nav-item-glow-color-rgb), var(--sn-nav-item-active-bg-opacity));
  box-shadow: inset 0 1px 3px rgba(var(--sn-nav-item-glow-color-rgb), calc(var(--sn-nav-item-glow-intensity) * 0.3)), 0 2px 8px -2px rgba(var(--sn-nav-item-glow-color-rgb), calc(var(--sn-nav-item-glow-intensity) * 0.5));
}

/* ████████████████████████████████████████████████████████████████████████████████*/
/* DIGITAL MEDITATION STATE & BIOMETRIC FEEDBACK*/
/* ████████████████████████████████████████████████████████████████████████████████*/
/* Sidebar Digital Meditation State*/
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar,
.Root__nav-bar {
  /* Apply desaturation and slowdown when --sn-sidebar-meditation-desaturation > 0*/
  /* This requires careful application to not break other filter effects.*/
  /* We might need to adjust how filters are composed in the ::before/::after layers.*/
  /* For now, a simple approach targeting the main layers' filter property:*/
}
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar.sn-digital-meditation,
.Root__nav-bar.sn-digital-meditation {
  /* This class will be added by JS*/
  /* Reduce animation speed for specific animations*/
  /* This is tricky without a global animation speed control on the parent.*/
  /* Individual animation-duration properties would need to be targeted or vars used.*/
  /* For example, if --sn-neural-flow-speed is used by an animation:*/
  /* --sn-neural-flow-speed: calc(var(--original-neural-flow-speed, 20s) / var(--sn-sidebar-meditation-slowdown));*/
}
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar.sn-digital-meditation .sn-visual-effects-layer,
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar.sn-digital-meditation .sn-neural-flow-layer,
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar.sn-digital-meditation .sn-quantum-foam-layer, div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar.sn-digital-meditation::before, div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar.sn-digital-meditation::after,
.Root__nav-bar.sn-digital-meditation .sn-visual-effects-layer,
.Root__nav-bar.sn-digital-meditation .sn-neural-flow-layer,
.Root__nav-bar.sn-digital-meditation .sn-quantum-foam-layer,
.Root__nav-bar.sn-digital-meditation::before,
.Root__nav-bar.sn-digital-meditation::after {
  /* and ::after*/
  filter: blur(var(--sn-sidebar-blur-intensity, 3px)) saturate(calc(var(--sn-gradient-saturation) * (1 - var(--sn-sidebar-meditation-desaturation)))) brightness(var(--sn-gradient-brightness)) contrast(var(--sn-gradient-contrast));
  animation-duration: calc(var(--original-animation-duration, 20s) / var(--sn-sidebar-meditation-slowdown));
  /* Need to ensure other animation properties also respect this slowdown if not using a single duration property.*/
}

/* Item Energy Absorption Feedback (applied to nav items by JS)*/
.main-yourLibraryX-navLink.sn-absorbing-energy {
  transition: transform 0.1s var(--sn-anim-easing-bounce-playful); /* Quick, bouncy feel*/
  transform: scale(var(--sn-item-energy-absorption-scale));
  /* Potentially add a subtle glow change too*/
  box-shadow: 0 0 calc(5px + 8px * var(--sn-nav-item-glow-intensity)) rgba(var(--sn-nav-item-glow-color-rgb), calc(var(--sn-nav-item-glow-intensity) * 0.3)), inset 0 0 3px rgba(var(--sn-nav-item-glow-color-rgb), calc(var(--sn-nav-item-glow-intensity) * 0.15));
}

.main-yourLibraryX-listItem.sn-absorbing-energy,
.main-yourLibrary-listItem.sn-absorbing-energy {
  transition: transform 0.1s var(--sn-anim-easing-bounce-playful);
  transform: scale(var(--sn-item-energy-absorption-scale));
  box-shadow: 0 0 calc(5px + 8px * var(--sn-nav-item-glow-intensity)) rgba(var(--sn-nav-item-glow-color-rgb), calc(var(--sn-nav-item-glow-intensity) * 0.3)), inset 0 0 3px rgba(var(--sn-nav-item-glow-color-rgb), calc(var(--sn-nav-item-glow-intensity) * 0.15));
}

nav[aria-label=Main] ul li a.sn-absorbing-energy {
  transition: transform 0.1s var(--sn-anim-easing-bounce-playful);
  transform: scale(var(--sn-item-energy-absorption-scale));
  box-shadow: 0 0 calc(5px + 8px * var(--sn-nav-item-glow-intensity)) rgba(var(--sn-nav-item-glow-color-rgb), calc(var(--sn-nav-item-glow-intensity) * 0.3)), inset 0 0 3px rgba(var(--sn-nav-item-glow-color-rgb), calc(var(--sn-nav-item-glow-intensity) * 0.15));
}

/* ████████████████████████████████████████████████████████████████████████████████*/
/* ATMOSPHERIC EFFECTS & QUANTUM ENTANGLEMENT*/
/* ████████████████████████████████████████████████████████████████████████████████*/
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar,
.Root__nav-bar {
  /* Or whichever element holds the main sidebar background layers*/
  /* Apply atmospheric hue shift and saturation to the whole sidebar or specific layers*/
  /* This example applies it to the main sidebar container. Be careful with specificity.*/
  filter: hue-rotate(var(--sn-sidebar-atmosphere-hue-shift, 0deg)) saturate(var(--sn-sidebar-atmosphere-saturation-factor, 1));
  transition: filter 1.5s ease-in-out; /* Smooth transition for atmospheric changes*/
  /* Entanglement: Add a pseudo-element for the color bleed effect*/
  /* Vibration Effect (applied to a background layer, e.g., ::before or a dedicated div)*/
  /* Assuming .sn-sidebar-vibration-layer is a child or pseudo of .Root__nav-bar*/
}
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar::after,
.Root__nav-bar::after {
  /* Or another pseudo-element if ::after is already in use*/
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(var(--sn-sidebar-entanglement-color-rgb, 48, 52, 70), var(--sn-sidebar-entanglement-intensity, 0));
  mix-blend-mode: color-dodge; /* Or other blend modes like soft-light, overlay*/
  pointer-events: none;
  z-index: 0; /* Ensure it's above base background but below content if needed*/
  transition: background-color 1.2s ease-in-out;
  opacity: var(--sn-sidebar-entanglement-intensity, 0); /* Control via intensity var*/
}
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar .sn-sidebar-vibration-layer, div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar::before,
.Root__nav-bar .sn-sidebar-vibration-layer,
.Root__nav-bar::before {
  /* Example targets*/
  /* If var is 0, no animation. If > 0, animation runs.*/
  /* JS could add/remove a class to control animation play state too.*/
  animation-name: sn-sidebar-vibrate;
  animation-duration: 0.3s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-play-state: var(--_sidebar-vibration-play-state, paused);
  /* Helper variable to control play state based on intensity*/
}

/* ████████████████████████████████████████████████████████████████████████████████*/
/* PREDICTIVE MATERIALIZATION SYSTEM EFFECTS*/
/* ████████████████████████████████████████████████████████████████████████████████*/
/* Styles for a generic predictive echo item (applied by JS)*/
.sn-predictive-echo-item {
  opacity: var(--sn-predictive-echo-opacity, 0);
  transform: scale(var(--sn-predictive-echo-scale, 1));
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
  /* Add a subtle shimmer or pulse if desired*/
  will-change: transform, opacity, filter;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
  contain: style paint;
  animation: unified-filter-shimmer calc(calc(1.5s * 1.3) * 2) ease-in-out infinite;
  animation-duration: 3s;
}
@media (prefers-reduced-motion: reduce) {
  .sn-predictive-echo-item {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    opacity: calc(0.5 * 0.7) !important;
    filter: none !important;
    transform: none !important;
  }
}
@media (prefers-contrast: high) {
  .sn-predictive-echo-item {
    opacity: calc(0.7 * 1.3);
    filter: contrast(1.2);
  }
}

/* Styles for a dimensional rift effect (conceptual, likely a pseudo-element on a target)*/
.sn-dimensional-rift-target {
  /* Example target class JS might add this to*/
  position: relative;
  overflow: visible; /* Allow pseudo-element to extend*/
}
.sn-dimensional-rift-target::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--sn-dimensional-rift-color-rgb), 0.8) 0%, rgba(var(--sn-dimensional-rift-color-rgb), 0.2) 40%, transparent 70%);
  transform: translate(-50%, -50%) scale(calc(0.5 + var(--sn-dimensional-rift-intensity, 0) * 0.6));
}

/* ████████████████████████████████████████████████████████████████████████████████*/
/* TEMPORAL ECHO LAYER STYLING (from _sn_advanced_visual_effects.scss)*/
/* ████████████████████████████████████████████████████████████████████████████████*/
/* Note: Color harmony and music energy classes moved to consolidated section below */
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar,
.Root__nav-bar {
  /* --- Temporal Echo Layer Styling ---*/
  /* This uses the --sn-sidebar-temporal-shift variable set by JS*/
  /* Applied to a pseudo-element if existing ones are not sufficient, or integrated into existing ones.*/
  /* Assuming ::after is available or one of the existing ::before/::after from Dimensional Nexus can be augmented.*/
  /* This example augments the ::after from Dimensional Nexus Phase 1 (Quantum Foam & Temporal Displacement)*/
}
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar::after,
.Root__nav-bar::after {
  /* Keep existing Dimensional Nexus ::after styles (Quantum Foam, Temporal Displacement)*/
  /* Add new properties or modify existing ones related to the temporal echo*/
  transition: opacity 1s ease, filter 1s ease, transform var(--sn-sidebar-current-temporal-shift) ease-out; /* Added transform*/
  /* Example: Make the temporal echo more pronounced when shift is active*/
  /* The --sn-sidebar-temporal-shift is a duration, not direct opacity/blur value.*/
  /* JS sets this. We can use it to modify animation speed or other properties if needed.*/
  /* For a visual echo effect, we might need another variable from JS for opacity/blur of the echo itself.*/
  /* Let's assume --sn-sidebar-temporal-echo-opacity and --sn-sidebar-temporal-blur are set by JS if needed.*/
  opacity: calc(var(--sn-quantum-foam-opacity, 0.03) + var(--sn-sidebar-temporal-echo-opacity, 0));
  filter: blur(var(--sn-sidebar-temporal-blur, 0px)); /* Add blur for echo*/
}

/* ████████████████████████████████████████████████████████████████████████████████*/
/* KINETIC NAVIGATION PATTERNS (Consolidated from _navbar.scss)*/
/* Uses semantic kinetic verb mixins for consistency and maintainability*/
/* ████████████████████████████████████████████████████████████████████████████████*/
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar .main-rootlist-wrapper div:nth-child(2) > li > div,
.Root__nav-bar .main-rootlist-wrapper div:nth-child(2) > li > div {
  transition: transform var(--hover-transition-speed) ease-out, box-shadow var(--hover-transition-speed) ease-out, filter var(--hover-transition-speed) ease-out;
  --local-lift-distance: 1px;
  --local-hover-scale: 1.005;
  --local-hover-glow: 0.1;
  animation: musical-interaction-boost calc(var(--living-pulse-speed, 4s) / max(var(--sn-music-beat-pulse-intensity, 0.5), 0.5)) ease-in-out infinite;
}
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar .main-rootlist-wrapper div:nth-child(2) > li > div:hover,
.Root__nav-bar .main-rootlist-wrapper div:nth-child(2) > li > div:hover {
  transform: translateY(calc(-1 * var(--local-lift-distance))) scale(var(--local-hover-scale));
  box-shadow: 0 calc(var(--local-lift-distance) * 2) calc(var(--local-lift-distance) * 8) rgba(var(--sn-bg-gradient-accent-rgb), var(--local-hover-glow));
  filter: brightness(1.05) saturate(1.1);
}
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar .main-rootlist-wrapper div:nth-child(2) > li > div:hover, div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar .main-rootlist-wrapper div:nth-child(2) > li > div:focus,
.Root__nav-bar .main-rootlist-wrapper div:nth-child(2) > li > div:hover,
.Root__nav-bar .main-rootlist-wrapper div:nth-child(2) > li > div:focus {
  animation-duration: calc(var(--living-pulse-speed, 4s) * 0.7);
  filter: brightness(calc(1.05 + var(--interaction-energy-boost))) saturate(calc(1.1 + var(--interaction-beat-sync)));
}
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar .main-rootlist-wrapper div:nth-child(2) > li > div:active::after,
.Root__nav-bar .main-rootlist-wrapper div:nth-child(2) > li > div:active::after {
  background-color: rgba(var(--sn-accent-rgb, 128, 128, 128), calc(0.15 + var(--sn-music-beat-pulse-intensity, 0) * 0.1));
  transition: background-color 0.2s ease-out;
}
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar .main-rootlist-wrapper div:nth-child(2) > li > div p.TypeElement-ballad-textBrightAccent-type,
.Root__nav-bar .main-rootlist-wrapper div:nth-child(2) > li > div p.TypeElement-ballad-textBrightAccent-type {
  color: rgba(var(--sn-bg-gradient-primary-rgb), 0.95);
  --local-shimmer-strength: 0.15;
  text-shadow: 0 0 calc(var(--local-shimmer-strength) * 10px) rgba(var(--sn-bg-gradient-accent-rgb), var(--music-glow-strength, 0.2));
  will-change: transform, opacity, filter;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
  contain: style paint;
  --text-shimmer-intensity: calc(0.3 * 0.7);
  opacity: var(--text-shimmer-intensity);
  text-shadow: 0 0 5px rgba(var(--sn-bg-gradient-accent-rgb), calc(0.2 * 0.7));
  animation: unified-text-shimmer calc(calc(1.5s * 1.3) * 1.5) ease-in-out infinite;
  animation-duration: var(--text-shimmer-speed, 8s);
  transition: text-shadow 0.3s ease-out, opacity 0.2s ease-out;
  text-shadow: 0 0 calc(4px * var(--sn-music-beat-pulse-intensity, 0)) rgba(var(--sn-accent-rgb, 140, 170, 238), calc(0.4 * var(--sn-music-beat-pulse-intensity, 0)));
}
@media (prefers-reduced-motion: reduce) {
  div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar .main-rootlist-wrapper div:nth-child(2) > li > div p.TypeElement-ballad-textBrightAccent-type,
  .Root__nav-bar .main-rootlist-wrapper div:nth-child(2) > li > div p.TypeElement-ballad-textBrightAccent-type {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    opacity: calc(0.5 * 0.7) !important;
    filter: none !important;
    transform: none !important;
  }
}
@media (prefers-contrast: high) {
  div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar .main-rootlist-wrapper div:nth-child(2) > li > div p.TypeElement-ballad-textBrightAccent-type,
  .Root__nav-bar .main-rootlist-wrapper div:nth-child(2) > li > div p.TypeElement-ballad-textBrightAccent-type {
    opacity: calc(0.7 * 1.3);
    filter: contrast(1.2);
  }
}
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar .main-navBar-navBar li:hover > div:hover,
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar .main-navBar-navBar li:hover > a:not(.main-navBar-navBarLinkActive):hover,
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar .spicetify-playlist-list li:hover:hover,
.Root__nav-bar .main-navBar-navBar li:hover > div:hover,
.Root__nav-bar .main-navBar-navBar li:hover > a:not(.main-navBar-navBarLinkActive):hover,
.Root__nav-bar .spicetify-playlist-list li:hover:hover {
  background: linear-gradient(calc(90deg + var(--sn-music-rhythm-phase, 0) * 3deg), rgba(var(--sn-accent-rgb, 140, 170, 238), 0.8) 0%, rgba(var(--sn-accent-rgb, 140, 170, 238), 0.6) 100%);
  transition: background 0.3s ease-out;
}
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar .main-navBar-navBarLink,
.Root__nav-bar .main-navBar-navBarLink {
  transition: transform var(--hover-transition-speed) ease-out, box-shadow var(--hover-transition-speed) ease-out, filter var(--hover-transition-speed) ease-out;
  --local-lift-distance: var(--hover-lift-distance);
  --local-hover-scale: var(--hover-scale-factor);
  --local-hover-glow: var(--hover-glow-intensity);
}
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar .main-navBar-navBarLink:hover,
.Root__nav-bar .main-navBar-navBarLink:hover {
  transform: translateY(calc(-1 * var(--local-lift-distance))) scale(var(--local-hover-scale));
  box-shadow: 0 calc(var(--local-lift-distance) * 2) calc(var(--local-lift-distance) * 8) rgba(var(--sn-bg-gradient-accent-rgb), var(--local-hover-glow));
  filter: brightness(1.05) saturate(1.1);
}
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar .main-navBar-navBarLink:hover,
.Root__nav-bar .main-navBar-navBarLink:hover {
  text-shadow: 0 0 calc(6px * var(--sn-music-beat-pulse-intensity, 0)) rgba(var(--sn-accent-rgb, 140, 170, 238), calc(0.5 * var(--sn-music-beat-pulse-intensity, 0)));
}
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar .Svg-img-24-icon.collection-icon,
.Root__nav-bar .Svg-img-24-icon.collection-icon {
  filter: drop-shadow(0 0 calc(4px * var(--sn-music-beat-pulse-intensity, 0)) rgba(var(--sn-accent-rgb, 140, 170, 238), calc(0.3 * var(--sn-music-beat-pulse-intensity, 0))));
  transition: filter 0.3s ease-out;
}
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar .main-createPlaylistButton-button,
.Root__nav-bar .main-createPlaylistButton-button {
  transition: transform var(--hover-transition-speed) ease-out, box-shadow var(--hover-transition-speed) ease-out, filter var(--hover-transition-speed) ease-out;
  --local-lift-distance: 4px;
  --local-hover-scale: 1.05;
  --local-hover-glow: 0.4;
  animation: musical-interaction-boost calc(var(--living-pulse-speed, 4s) / max(var(--sn-music-beat-pulse-intensity, 0.5), 0.5)) ease-in-out infinite;
}
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar .main-createPlaylistButton-button:hover,
.Root__nav-bar .main-createPlaylistButton-button:hover {
  transform: translateY(calc(-1 * var(--local-lift-distance))) scale(var(--local-hover-scale));
  box-shadow: 0 calc(var(--local-lift-distance) * 2) calc(var(--local-lift-distance) * 8) rgba(var(--sn-bg-gradient-accent-rgb), var(--local-hover-glow));
  filter: brightness(1.05) saturate(1.1);
}
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar .main-createPlaylistButton-button:hover, div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar .main-createPlaylistButton-button:focus,
.Root__nav-bar .main-createPlaylistButton-button:hover,
.Root__nav-bar .main-createPlaylistButton-button:focus {
  animation-duration: calc(var(--living-pulse-speed, 4s) * 0.7);
  filter: brightness(calc(1.05 + var(--interaction-energy-boost))) saturate(calc(1.1 + var(--interaction-beat-sync)));
}
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar .main-navBar-navBarLinkActive,
.Root__nav-bar .main-navBar-navBarLinkActive {
  box-shadow: 0 8px 16px rgba(var(--sn-oklab-shadow-rgb, 0, 0, 0), 0.15), 0 16px 32px rgba(var(--sn-oklab-shadow-rgb, 0, 0, 0), 0.12), 0 24px 48px rgba(var(--sn-oklab-shadow-rgb, 0, 0, 0), 0.08), 0 32px 64px rgba(var(--sn-oklab-shadow-rgb, 0, 0, 0), 0.04), inset 0 1px 0 rgba(var(--sn-oklab-highlight-rgb, 255, 255, 255), 0.15);
  background: linear-gradient(135deg, rgba(var(--sn-accent-rgb, 128, 128, 128), 0.9) 0%, rgba(var(--sn-accent-rgb, 128, 128, 128), 0.7) 100%);
  border-left: 3px solid rgba(var(--sn-accent-rgb, 128, 128, 128), 0.8);
  transform: scale(calc(1 + var(--sn-music-beat-pulse-intensity, 0) * 0.02));
  transition: all 0.4s var(--sn-easing-explorer, ease-out);
}

/* ████████████████████████████████████████████████████████████████████████████████*/
/* ENHANCED NAVIGATION ITEMS WITH DIMENSIONAL EFFECTS*/
/* ████████████████████████████████████████████████████████████████████████████████*/
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar,
.Root__nav-bar {
  /* Target general navigation links. Adapt selectors as needed.*/
  /* For library items in grid/list view */
  /* Specificity for Your Library items if different selectors are needed*/
  /* Active library item when parent has active class */
  /* Musical DNA Visualization (Placeholder - requires JS to add specific classes like .sn-item-type-playlist)*/
}
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar .main-rootlist-rootlistItem a,
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar .main-playlistFolder-textLink,
.Root__nav-bar .main-rootlist-rootlistItem a,
.Root__nav-bar .main-playlistFolder-textLink {
  position: relative;
  transition: all 0.4s var(--sn-easing-explorer);
  padding: 8px 12px; /* Consistent padding*/
  margin: 2px 4px;
  border-radius: var(--border-radius, 6px);
  /* Energy-based text glow for high energy music*/
}
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar .main-rootlist-rootlistItem a::before,
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar .main-playlistFolder-textLink::before,
.Root__nav-bar .main-rootlist-rootlistItem a::before,
.Root__nav-bar .main-playlistFolder-textLink::before {
  /* For bloom/glow effect*/
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: radial-gradient(ellipse at center, rgba(var(--sn-accent-rgb, var(--spice-rgb-accent)), calc(var(--sn-sidebar-item-bloom-intensity) * 0.7)) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.4s var(--sn-easing-explorer);
  z-index: -1;
  transform: scale(0.95);
}
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar .main-rootlist-rootlistItem a:hover, div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar .main-rootlist-rootlistItem a.main-navBar-navBarLinkActive, div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar .main-rootlist-rootlistItem a[aria-current=page],
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar .main-playlistFolder-textLink:hover,
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar .main-playlistFolder-textLink.main-navBar-navBarLinkActive,
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar .main-playlistFolder-textLink[aria-current=page],
.Root__nav-bar .main-rootlist-rootlistItem a:hover,
.Root__nav-bar .main-rootlist-rootlistItem a.main-navBar-navBarLinkActive,
.Root__nav-bar .main-rootlist-rootlistItem a[aria-current=page],
.Root__nav-bar .main-playlistFolder-textLink:hover,
.Root__nav-bar .main-playlistFolder-textLink.main-navBar-navBarLinkActive,
.Root__nav-bar .main-playlistFolder-textLink[aria-current=page] {
  background-color: rgba(var(--sn-accent-rgb, var(--spice-rgb-accent)), 0.15);
  color: var(--spice-text);
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 3px 15px -5px rgba(var(--sn-accent-rgb, var(--spice-rgb-accent)), 0.3);
}
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar .main-rootlist-rootlistItem a:hover::before, div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar .main-rootlist-rootlistItem a.main-navBar-navBarLinkActive::before, div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar .main-rootlist-rootlistItem a[aria-current=page]::before,
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar .main-playlistFolder-textLink:hover::before,
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar .main-playlistFolder-textLink.main-navBar-navBarLinkActive::before,
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar .main-playlistFolder-textLink[aria-current=page]::before,
.Root__nav-bar .main-rootlist-rootlistItem a:hover::before,
.Root__nav-bar .main-rootlist-rootlistItem a.main-navBar-navBarLinkActive::before,
.Root__nav-bar .main-rootlist-rootlistItem a[aria-current=page]::before,
.Root__nav-bar .main-playlistFolder-textLink:hover::before,
.Root__nav-bar .main-playlistFolder-textLink.main-navBar-navBarLinkActive::before,
.Root__nav-bar .main-playlistFolder-textLink[aria-current=page]::before {
  /* Activate bloom*/
  opacity: 1;
  transform: scale(1);
}
.sn-music-high-energy div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar .main-rootlist-rootlistItem a .Type__TypeElement-sc-goliZz-0,
.sn-music-high-energy div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar .main-rootlist-rootlistItem a span,
.sn-music-high-energy div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar .main-playlistFolder-textLink .Type__TypeElement-sc-goliZz-0,
.sn-music-high-energy div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar .main-playlistFolder-textLink span,
.sn-music-high-energy .Root__nav-bar .main-rootlist-rootlistItem a .Type__TypeElement-sc-goliZz-0,
.sn-music-high-energy .Root__nav-bar .main-rootlist-rootlistItem a span,
.sn-music-high-energy .Root__nav-bar .main-playlistFolder-textLink .Type__TypeElement-sc-goliZz-0,
.sn-music-high-energy .Root__nav-bar .main-playlistFolder-textLink span {
  text-shadow: 0 0 8px rgba(var(--sn-accent-rgb, var(--spice-rgb-accent)), calc(0.5 * var(--sn-sidebar-energy-glow-opacity)));
}
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar .main-yourLibraryX-navLinkContainer a,
.Root__nav-bar .main-yourLibraryX-navLinkContainer a {
  position: relative;
  transition: all 0.4s var(--sn-easing-explorer);
  padding: 8px 12px;
  margin: 2px 4px;
  border-radius: var(--border-radius, 6px);
}
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar .main-yourLibraryX-navLinkContainer a::before,
.Root__nav-bar .main-yourLibraryX-navLinkContainer a::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: radial-gradient(ellipse at center, rgba(var(--sn-accent-rgb, var(--spice-rgb-accent)), calc(var(--sn-sidebar-item-bloom-intensity) * 0.7)) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.4s var(--sn-easing-explorer);
  z-index: -1;
  transform: scale(0.95);
}
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar .main-yourLibraryX-navLinkContainer a:hover, div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar .main-yourLibraryX-navLinkContainer a.main-navBar-navBarLinkActive, div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar .main-yourLibraryX-navLinkContainer a[aria-current=page],
.Root__nav-bar .main-yourLibraryX-navLinkContainer a:hover,
.Root__nav-bar .main-yourLibraryX-navLinkContainer a.main-navBar-navBarLinkActive,
.Root__nav-bar .main-yourLibraryX-navLinkContainer a[aria-current=page] {
  background-color: rgba(var(--sn-accent-rgb, var(--spice-rgb-accent)), 0.15);
  color: var(--spice-text);
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 3px 15px -5px rgba(var(--sn-accent-rgb, var(--spice-rgb-accent)), 0.3);
}
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar .main-yourLibraryX-navLinkContainer a:hover::before, div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar .main-yourLibraryX-navLinkContainer a.main-navBar-navBarLinkActive::before, div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar .main-yourLibraryX-navLinkContainer a[aria-current=page]::before,
.Root__nav-bar .main-yourLibraryX-navLinkContainer a:hover::before,
.Root__nav-bar .main-yourLibraryX-navLinkContainer a.main-navBar-navBarLinkActive::before,
.Root__nav-bar .main-yourLibraryX-navLinkContainer a[aria-current=page]::before {
  opacity: 1;
  transform: scale(1);
}
.sn-music-high-energy div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar .main-yourLibraryX-navLinkContainer a .Type__TypeElement-sc-goliZz-0,
.sn-music-high-energy div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar .main-yourLibraryX-navLinkContainer a span,
.sn-music-high-energy .Root__nav-bar .main-yourLibraryX-navLinkContainer a .Type__TypeElement-sc-goliZz-0,
.sn-music-high-energy .Root__nav-bar .main-yourLibraryX-navLinkContainer a span {
  text-shadow: 0 0 8px rgba(var(--sn-accent-rgb, var(--spice-rgb-accent)), calc(0.5 * var(--sn-sidebar-energy-glow-opacity)));
}
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar .main-yourLibraryX-listItem .main-useDropTarget-base,
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar .main-yourLibrary-listItem .main-useDropTarget-base,
.Root__nav-bar .main-yourLibraryX-listItem .main-useDropTarget-base,
.Root__nav-bar .main-yourLibrary-listItem .main-useDropTarget-base {
  /* Common wrapper for library items*/
  transition: all 0.4s var(--sn-easing-explorer);
  border-radius: var(--border-radius, 4px);
  padding: 6px 8px;
  margin: 1px 4px;
  /* Active library item*/
}
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar .main-yourLibraryX-listItem .main-useDropTarget-base:hover,
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar .main-yourLibrary-listItem .main-useDropTarget-base:hover,
.Root__nav-bar .main-yourLibraryX-listItem .main-useDropTarget-base:hover,
.Root__nav-bar .main-yourLibrary-listItem .main-useDropTarget-base:hover {
  background-color: rgba(var(--sn-accent-rgb, var(--spice-rgb-accent)), 0.1);
  transform: scale(1.01);
  box-shadow: 0 2px 10px -4px rgba(var(--sn-accent-rgb, var(--spice-rgb-accent)), 0.25);
}
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar .main-yourLibraryX-listItem .main-useDropTarget-base[aria-current=true],
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar .main-yourLibrary-listItem .main-useDropTarget-base[aria-current=true],
.Root__nav-bar .main-yourLibraryX-listItem .main-useDropTarget-base[aria-current=true],
.Root__nav-bar .main-yourLibrary-listItem .main-useDropTarget-base[aria-current=true] {
  background-color: rgba(var(--sn-accent-rgb, var(--spice-rgb-accent)), 0.15);
  box-shadow: inset 0 0 10px -5px rgba(var(--sn-accent-rgb, 128, 128, 128), calc(0.3 * var(--sn-sidebar-harmonic-intensity-multiplier)));
}
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar .main-yourLibraryX-navLinkActive .main-yourLibraryX-listItem .main-useDropTarget-base,
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar .main-yourLibraryX-navLinkActive .main-yourLibrary-listItem .main-useDropTarget-base,
.Root__nav-bar .main-yourLibraryX-navLinkActive .main-yourLibraryX-listItem .main-useDropTarget-base,
.Root__nav-bar .main-yourLibraryX-navLinkActive .main-yourLibrary-listItem .main-useDropTarget-base {
  background-color: rgba(var(--sn-accent-rgb, var(--spice-rgb-accent)), 0.15);
  box-shadow: inset 0 0 10px -5px rgba(var(--sn-accent-rgb, 128, 128, 128), calc(0.3 * var(--sn-sidebar-harmonic-intensity-multiplier)));
}
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar .sn-item-type-playlist::after,
.Root__nav-bar .sn-item-type-playlist::after {
  content: "🎧"; /* 🎧 */
}
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar .sn-item-type-album::after,
.Root__nav-bar .sn-item-type-album::after {
  content: "💿"; /* 💿 */
}
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar .sn-item-type-artist::after,
.Root__nav-bar .sn-item-type-artist::after {
  content: "🎤"; /* 🎤 */
}
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar .sn-item-type-folder::after,
.Root__nav-bar .sn-item-type-folder::after {
  content: "📁"; /* 📁 */
}
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar [class*=sn-item-type-]::after,
.Root__nav-bar [class*=sn-item-type-]::after {
  font-size: 0.8em;
  margin-left: 8px;
  opacity: 0.5;
}

/* Closes the .Root__nav-bar block for navigation item enhancements*/
/* ████████████████████████████████████████████████████████████████████████████████*/
/* ADVANCED ANIMATIONS & KEYFRAMES*/
/* ████████████████████████████████████████████████████████████████████████████████*/
/* Vibration Animation*/
@keyframes sn-sidebar-vibrate {
  0% {
    transform: translate(calc(var(--sn-sidebar-atmosphere-vibration-intensity, 0) * 0.2px), calc(var(--sn-sidebar-atmosphere-vibration-intensity, 0) * 0.2px));
  }
  25% {
    transform: translate(calc(var(--sn-sidebar-atmosphere-vibration-intensity, 0) * -0.2px), calc(var(--sn-sidebar-atmosphere-vibration-intensity, 0) * 0.3px));
  }
  50% {
    transform: translate(calc(var(--sn-sidebar-atmosphere-vibration-intensity, 0) * 0.3px), calc(var(--sn-sidebar-atmosphere-vibration-intensity, 0) * -0.2px));
  }
  75% {
    transform: translate(calc(var(--sn-sidebar-atmosphere-vibration-intensity, 0) * -0.1px), calc(var(--sn-sidebar-atmosphere-vibration-intensity, 0) * -0.3px));
  }
  100% {
    transform: translate(calc(var(--sn-sidebar-atmosphere-vibration-intensity, 0) * 0.2px), calc(var(--sn-sidebar-atmosphere-vibration-intensity, 0) * 0.2px));
  }
}
/* Predictive Echo Shimmer*/
/* Dynamic Harmonic & Energy Responsive UI*/
:root {
  /* Base variables for Advanced Sidebar. These can be adjusted.*/
  --sn-sidebar-base-bg-opacity: 0.1;
  /* Default time-based shift, JS will update this with --sn-sidebar-temporal-shift*/
}

/* --- Color Harmony Mode Styling ---*/
/* Define a mixin for common color harmony mode background properties*/
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar,
.Root__nav-bar {
  /* Base transition for all dynamic effects*/
  transition: background-color 0.7s var(--sn-easing-explorer), box-shadow 0.7s var(--sn-easing-explorer), filter 0.7s var(--sn-easing-explorer);
  /* Apply backgrounds per color harmony mode (JS adds these classes)*/
  /* Add more .sn-color-harmony-* classes as needed for other modes from COLOR_HARMONY_MODES*/
  /* --- Music Energy Styling ---*/
  /* (JS adds these classes: sn-music-low-energy, sn-music-mid-energy, sn-music-high-energy)*/
  /* Subtle pulsing animation for the sidebar background based on energy*/
}
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar.sn-color-harmony-analogous-flow,
.Root__nav-bar.sn-color-harmony-analogous-flow {
  background: linear-gradient(170deg, rgba(var(--sn-accent-rgb, "202,158,230"), calc(var(--sn-sidebar-base-bg-opacity) * 0.7 * var(--sn-sidebar-harmonic-intensity-multiplier))) 0%, rgba(var(--sn-accent-rgb, "186,187,241"), calc(var(--sn-sidebar-base-bg-opacity) * 0.5 * var(--sn-sidebar-harmonic-intensity-multiplier))) 40%, rgba(var(--sn-accent-rgb, "140,170,238"), calc(var(--sn-sidebar-base-bg-opacity) * 0.8 * var(--sn-sidebar-harmonic-intensity-multiplier))) 100%);
  box-shadow: inset 0 0 80px -20px rgba(var(--sn-accent-rgb, 128, 128, 128), calc(0.15 * var(--sn-sidebar-harmonic-intensity-multiplier))), inset 0 0 30px 5px rgba(var(--sn-accent-rgb, 128, 128, 128), calc(0.099 * var(--sn-sidebar-harmonic-intensity-multiplier)));
}
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar.sn-color-harmony-triadic-scheme,
.Root__nav-bar.sn-color-harmony-triadic-scheme {
  /* Example: Use Primary, Accent, and a shifted Primary for Triadic relationship*/
  background: linear-gradient(170deg, rgba(var(--sn-accent-rgb, "203,166,247"), calc(var(--sn-sidebar-base-bg-opacity) * 0.7 * var(--sn-sidebar-harmonic-intensity-multiplier))) 0%, rgba(var(--sn-accent-rgb, "148,226,213"), calc(var(--sn-sidebar-base-bg-opacity) * 0.5 * var(--sn-sidebar-harmonic-intensity-multiplier))) 40%, rgba(var(--sn-accent-rgb, "245,194,231"), calc(var(--sn-sidebar-base-bg-opacity) * 0.8 * var(--sn-sidebar-harmonic-intensity-multiplier))) 100%);
  box-shadow: inset 0 0 80px -20px rgba(var(--sn-accent-rgb, 128, 128, 128), calc(0.15 * var(--sn-sidebar-harmonic-intensity-multiplier))), inset 0 0 30px 5px rgba(var(--sn-accent-rgb, 128, 128, 128), calc(0.099 * var(--sn-sidebar-harmonic-intensity-multiplier)));
}
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar.sn-color-harmony-complementary-contrast,
.Root__nav-bar.sn-color-harmony-complementary-contrast {
  /* Primary and Accent (often complementary)*/
  background: linear-gradient(170deg, rgba(var(--sn-accent-rgb, "239,159,118"), calc(var(--sn-sidebar-base-bg-opacity) * 0.7 * var(--sn-sidebar-harmonic-intensity-multiplier))) 0%, rgba(var(--sn-accent-rgb, "137,180,250"), calc(var(--sn-sidebar-base-bg-opacity) * 0.5 * var(--sn-sidebar-harmonic-intensity-multiplier))) 40%, rgba(var(--spice-rgb-surface1, "69,71,90"), calc(var(--sn-sidebar-base-bg-opacity) * 0.8 * var(--sn-sidebar-harmonic-intensity-multiplier))) 100%);
  box-shadow: inset 0 0 80px -20px rgba(var(--sn-accent-rgb, 128, 128, 128), calc(0.15 * var(--sn-sidebar-harmonic-intensity-multiplier))), inset 0 0 30px 5px rgba(var(--sn-accent-rgb, 128, 128, 128), calc(0.099 * var(--sn-sidebar-harmonic-intensity-multiplier)));
}
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar.sn-color-harmony-tetradic-cross,
.Root__nav-bar.sn-color-harmony-tetradic-cross {
  /* Example*/
  background: linear-gradient(170deg, rgba(var(--spice-rgb-green), calc(var(--sn-sidebar-base-bg-opacity) * 0.7 * var(--sn-sidebar-harmonic-intensity-multiplier))) 0%, rgba(var(--spice-rgb-red), calc(var(--sn-sidebar-base-bg-opacity) * 0.5 * var(--sn-sidebar-harmonic-intensity-multiplier))) 40%, rgba(var(--spice-rgb-yellow), calc(var(--sn-sidebar-base-bg-opacity) * 0.8 * var(--sn-sidebar-harmonic-intensity-multiplier))) 100%);
  box-shadow: inset 0 0 80px -20px rgba(var(--sn-accent-rgb, 128, 128, 128), calc(0.15 * var(--sn-sidebar-harmonic-intensity-multiplier))), inset 0 0 30px 5px rgba(var(--sn-accent-rgb, 128, 128, 128), calc(0.099 * var(--sn-sidebar-harmonic-intensity-multiplier)));
}
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar.sn-color-harmony-split-complementary-spectrum,
.Root__nav-bar.sn-color-harmony-split-complementary-spectrum {
  /* Example*/
  background: linear-gradient(170deg, rgba(var(--spice-rgb-peach), calc(var(--sn-sidebar-base-bg-opacity) * 0.7 * var(--sn-sidebar-harmonic-intensity-multiplier))) 0%, rgba(var(--spice-rgb-sky), calc(var(--sn-sidebar-base-bg-opacity) * 0.5 * var(--sn-sidebar-harmonic-intensity-multiplier))) 40%, rgba(var(--spice-rgb-teal), calc(var(--sn-sidebar-base-bg-opacity) * 0.8 * var(--sn-sidebar-harmonic-intensity-multiplier))) 100%);
  box-shadow: inset 0 0 80px -20px rgba(var(--sn-accent-rgb, 128, 128, 128), calc(0.15 * var(--sn-sidebar-harmonic-intensity-multiplier))), inset 0 0 30px 5px rgba(var(--sn-accent-rgb, 128, 128, 128), calc(0.099 * var(--sn-sidebar-harmonic-intensity-multiplier)));
}
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar.sn-color-harmony-monochromatic-calm,
.Root__nav-bar.sn-color-harmony-monochromatic-calm {
  /* Example*/
  background: linear-gradient(170deg, rgba(var(--sn-accent-rgb), calc(var(--sn-sidebar-base-bg-opacity) * 0.7 * var(--sn-sidebar-harmonic-intensity-multiplier))) 0%, rgba(var(--sn-accent-rgb), calc(var(--sn-sidebar-base-bg-opacity) * 0.5 * var(--sn-sidebar-harmonic-intensity-multiplier))) 40%, rgba(var(--sn-accent-rgb), calc(var(--sn-sidebar-base-bg-opacity) * 0.8 * var(--sn-sidebar-harmonic-intensity-multiplier))) 100%);
  box-shadow: inset 0 0 80px -20px rgba(var(--sn-accent-rgb, 128, 128, 128), calc(0.15 * var(--sn-sidebar-harmonic-intensity-multiplier))), inset 0 0 30px 5px rgba(var(--sn-accent-rgb, 128, 128, 128), calc(0.099 * var(--sn-sidebar-harmonic-intensity-multiplier)));
  --sn-sidebar-base-bg-opacity: 0.2; /* More intense for monochromatic*/
}
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar.sn-music-low-energy,
.Root__nav-bar.sn-music-low-energy {
  filter: saturate(0.85) brightness(0.95);
  animation: sn-sidebar-pulse-slow 8s infinite ease-in-out alternate;
}
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar.sn-music-mid-energy,
.Root__nav-bar.sn-music-mid-energy {
  filter: saturate(1) brightness(1);
  animation: sn-sidebar-pulse-mid 5s infinite ease-in-out alternate;
}
div[data-testid=Desktop_LeftSidebar_Id].Root__nav-bar.sn-music-high-energy,
.Root__nav-bar.sn-music-high-energy {
  filter: saturate(1.15) brightness(1.05);
  animation: sn-sidebar-pulse-fast 3s infinite ease-in-out alternate;
}
@keyframes sn-sidebar-pulse-slow {
  0%, 100% {
    box-shadow: inset 0 0 70px -25px rgba(var(--sn-accent-rgb, 128, 128, 128), calc(0.1 * var(--sn-sidebar-harmonic-intensity-multiplier) * 0.7));
  }
  50% {
    box-shadow: inset 0 0 80px -20px rgba(var(--sn-accent-rgb, 128, 128, 128), calc(0.15 * var(--sn-sidebar-harmonic-intensity-multiplier) * 0.7));
  }
}
@keyframes sn-sidebar-pulse-mid {
  0%, 100% {
    box-shadow: inset 0 0 80px -20px rgba(var(--sn-accent-rgb, 128, 128, 128), calc(0.2 * var(--sn-sidebar-harmonic-intensity-multiplier)));
  }
  50% {
    box-shadow: inset 0 0 90px -15px rgba(var(--sn-accent-rgb, 128, 128, 128), calc(0.25 * var(--sn-sidebar-harmonic-intensity-multiplier)));
  }
}
@keyframes sn-sidebar-pulse-fast {
  0%, 100% {
    box-shadow: inset 0 0 90px -15px rgba(var(--sn-accent-rgb, 128, 128, 128), calc(0.3 * var(--sn-sidebar-harmonic-intensity-multiplier) * 1.2));
  }
  50% {
    box-shadow: inset 0 0 100px -10px rgba(var(--sn-accent-rgb, 128, 128, 128), calc(0.35 * var(--sn-sidebar-harmonic-intensity-multiplier) * 1.2));
  }
}

@keyframes year3000-future-preview {
  0% {
    opacity: 0;
    transform: scale(0.95);
    filter: blur(2px);
  }
  50% {
    opacity: calc(var(--sn-kinetic-intensity, 1) * 0.2);
    transform: scale(1);
    filter: blur(1px);
  }
  100% {
    opacity: 0;
    transform: scale(1.05);
    filter: blur(0px);
  }
}
.sn-future-preview {
  animation: year3000-future-preview 2000ms ease-in-out;
  -webkit-animation: year3000-future-preview 2000ms ease-in-out;
}

/* === Digital Meditation Support (Phase 5) ===*/
.sn-digital-meditation {
  filter: grayscale(var(--sn-sidebar-meditation-desaturation)) brightness(calc(1 - var(--sn-sidebar-meditation-desaturation) * 0.2));
  transition: filter calc(var(--sn-sidebar-meditation-slowdown) * 2000ms) ease-out;
  /* Slow down all sidebar animations during meditation*/
  /* Apply meditation blur effect to sidebar links*/
  /* Soften the sidebar background during meditation*/
}
.sn-digital-meditation * {
  animation-duration: calc(var(--sn-sidebar-meditation-slowdown, 1) * 1s) !important;
  transition-duration: calc(var(--sn-sidebar-meditation-slowdown, 1) * 400ms) !important;
}
.sn-digital-meditation .main-navBar-navBarLink {
  filter: blur(calc(var(--sn-sidebar-meditation-desaturation) * 2px));
  opacity: calc(1 - var(--sn-sidebar-meditation-desaturation) * 0.3);
}
.sn-digital-meditation::before {
  background: linear-gradient(180deg, rgba(var(--spice-rgb-sidebar, 48, 52, 70), calc(1 - var(--sn-sidebar-meditation-desaturation) * 0.5)) 0%, rgba(var(--spice-rgb-sidebar, 48, 52, 70), 1) 100%);
}

/* === End Digital Meditation Support ===*/
/* ═══════════════════════════════════════════════════════════════════════════════
   🌊 DEPTH LAYER VARIABLES - Foundation Architecture
   ═══════════════════════════════════════════════════════════════════════════════ */
:root {
  /* Depth layer system using design tokens */
  --depth-foreground-clarity: 1.0;
  --depth-background-blur: var(--sn-ui-glass-blur, 20px);
  /* Content protection system */
  --content-protection-level: 0.95;
  --chrome-enhancement-level: 2.0;
  --reading-mode-active: 0;
  /* Animation timing using design system */
  --depth-animation-duration: var(--sn-anim-transition-cosmic, 1200ms);
  --musical-sync-intensity: var(--sn-music-energy-level, 0.5);
  /* Layer management */
  --content-layer-index: var(--sn-layout-z-ui, 10);
  --chrome-layer-index: var(--sn-layout-z-content, 0);
  --background-layer-index: var(--sn-layout-z-background, -11);
  /* Unified intensity using design system */
  --depth-effects-intensity: calc(
    var(--sn-bg-gradient-opacity, 0.8) *
    var(--sn-perf-quality-blur, 1.0) *
    (1 - var(--reading-mode-active) * 0.9)
  );
}

.audio-depth-system, .main-view-container {
  position: relative;
  /* Content Sanctuary - Protected Area for Text & Interactions */
  /* Enhanced Chrome - Enhanced UI Areas */
  /* Background Layer - Deep Atmospheric Layer */
}
.audio-depth-system .content-sanctuary,
.audio-depth-system .main-view-container__scroll-node-child, .main-view-container .content-sanctuary,
.main-view-container .main-view-container__scroll-node-child, .audio-depth-system .text-content-area, .main-view-container .text-content-area,
.audio-depth-system .main-trackList-trackListRow,
.main-view-container .main-trackList-trackListRow,
.audio-depth-system .main-view-container__scroll-node,
.main-view-container .main-view-container__scroll-node,
.audio-depth-system [data-testid*=tracklist],
.main-view-container [data-testid*=tracklist],
.audio-depth-system [data-testid*=playlist],
.main-view-container [data-testid*=playlist] {
  position: relative;
  z-index: var(--content-layer-index);
  backdrop-filter: none; /* No effects on content */
  /* Text clarity enhancement */
  text-shadow: none;
  filter: none;
  /* Ensure content is always accessible */
  /* Emergency clarity mode - complete effect disable */
  /* Interactive element clarity boost */
}
.audio-depth-system .content-sanctuary,
.audio-depth-system .main-view-container__scroll-node-child, .main-view-container .content-sanctuary,
.main-view-container .main-view-container__scroll-node-child, .audio-depth-system .text-content-area, .main-view-container .text-content-area,
.audio-depth-system .main-trackList-trackListRow,
.main-view-container .main-trackList-trackListRow,
.audio-depth-system .main-view-container__scroll-node,
.main-view-container .main-view-container__scroll-node,
.audio-depth-system [data-testid*=tracklist],
.main-view-container [data-testid*=tracklist],
.audio-depth-system [data-testid*=playlist],
.main-view-container [data-testid*=playlist], .audio-depth-system .content-sanctuary *,
.audio-depth-system .main-view-container__scroll-node-child *, .main-view-container .content-sanctuary *,
.main-view-container .main-view-container__scroll-node-child *, .audio-depth-system .text-content-area *, .main-view-container .text-content-area *,
.audio-depth-system .main-trackList-trackListRow *,
.main-view-container .main-trackList-trackListRow *,
.audio-depth-system .main-view-container__scroll-node *,
.main-view-container .main-view-container__scroll-node *,
.audio-depth-system [data-testid*=tracklist] *,
.main-view-container [data-testid*=tracklist] *,
.audio-depth-system [data-testid*=playlist] *,
.main-view-container [data-testid*=playlist] * {
  /* Override any inherited blur or distortion */
  backdrop-filter: none !important;
  filter: contrast(1) saturate(1) brightness(1) !important;
}
.audio-depth-system .content-sanctuary.reading-mode-active,
.audio-depth-system .reading-mode-active.main-view-container__scroll-node-child, .main-view-container .content-sanctuary.reading-mode-active,
.main-view-container .reading-mode-active.main-view-container__scroll-node-child, .audio-depth-system .reading-mode-active.text-content-area, .main-view-container .reading-mode-active.text-content-area,
.audio-depth-system .reading-mode-active.main-trackList-trackListRow,
.main-view-container .reading-mode-active.main-trackList-trackListRow,
.audio-depth-system .reading-mode-active.main-view-container__scroll-node,
.main-view-container .reading-mode-active.main-view-container__scroll-node,
.audio-depth-system .reading-mode-active[data-testid*=tracklist],
.main-view-container .reading-mode-active[data-testid*=tracklist],
.audio-depth-system .reading-mode-active[data-testid*=playlist],
.main-view-container .reading-mode-active[data-testid*=playlist] {
  --holographic-intensity: 0.01;
  --depth-scanline-opacity: 0.01;
  --depth-scanline-density: 0.01;
  /* Force clarity on all descendants */
}
.audio-depth-system .content-sanctuary.reading-mode-active *,
.audio-depth-system .reading-mode-active.main-view-container__scroll-node-child *, .main-view-container .content-sanctuary.reading-mode-active *,
.main-view-container .reading-mode-active.main-view-container__scroll-node-child *, .audio-depth-system .reading-mode-active.text-content-area *, .main-view-container .reading-mode-active.text-content-area *,
.audio-depth-system .reading-mode-active.main-trackList-trackListRow *,
.main-view-container .reading-mode-active.main-trackList-trackListRow *,
.audio-depth-system .reading-mode-active.main-view-container__scroll-node *,
.main-view-container .reading-mode-active.main-view-container__scroll-node *,
.audio-depth-system .reading-mode-active[data-testid*=tracklist] *,
.main-view-container .reading-mode-active[data-testid*=tracklist] *,
.audio-depth-system .reading-mode-active[data-testid*=playlist] *,
.main-view-container .reading-mode-active[data-testid*=playlist] * {
  opacity: 1 !important;
  backdrop-filter: none !important;
  filter: none !important;
}
.audio-depth-system .content-sanctuary:hover,
.audio-depth-system .main-view-container__scroll-node-child:hover, .main-view-container .content-sanctuary:hover,
.main-view-container .main-view-container__scroll-node-child:hover, .audio-depth-system .text-content-area:hover, .main-view-container .text-content-area:hover,
.audio-depth-system .main-trackList-trackListRow:hover,
.main-view-container .main-trackList-trackListRow:hover,
.audio-depth-system .main-view-container__scroll-node:hover,
.main-view-container .main-view-container__scroll-node:hover,
.audio-depth-system [data-testid*=tracklist]:hover,
.main-view-container [data-testid*=tracklist]:hover,
.audio-depth-system [data-testid*=playlist]:hover,
.main-view-container [data-testid*=playlist]:hover, .audio-depth-system .content-sanctuary:focus-within,
.audio-depth-system .main-view-container__scroll-node-child:focus-within, .main-view-container .content-sanctuary:focus-within,
.main-view-container .main-view-container__scroll-node-child:focus-within, .audio-depth-system .text-content-area:focus-within, .main-view-container .text-content-area:focus-within,
.audio-depth-system .main-trackList-trackListRow:focus-within,
.main-view-container .main-trackList-trackListRow:focus-within,
.audio-depth-system .main-view-container__scroll-node:focus-within,
.main-view-container .main-view-container__scroll-node:focus-within,
.audio-depth-system [data-testid*=tracklist]:focus-within,
.main-view-container [data-testid*=tracklist]:focus-within,
.audio-depth-system [data-testid*=playlist]:focus-within,
.main-view-container [data-testid*=playlist]:focus-within {
  --depth-layer-intensity: calc(var(--depth-effects-intensity) * 0.5);
  /* Immediate clarity for interactive elements */
  transition: all 0.2s ease-out;
}
.audio-depth-system .audio-chrome, .audio-depth-system .main-view-container::before, .main-view-container .audio-chrome, .main-view-container .main-view-container::before, .audio-depth-system .ui-chrome-area::before, .main-view-container .ui-chrome-area::before,
.audio-depth-system .Root__nav-bar::before,
.main-view-container .Root__nav-bar::before,
.audio-depth-system .Root__top-bar::before,
.main-view-container .Root__top-bar::before,
.audio-depth-system .Root__now-playing-bar::before,
.main-view-container .Root__now-playing-bar::before,
.audio-depth-system .main-topBar-container::before,
.main-view-container .main-topBar-container::before,
.audio-depth-system .main-navBar-navBar::before,
.main-view-container .main-navBar-navBar::before {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--chrome-layer-index);
  pointer-events: none; /* Don't interfere with interactions */
  /* Visual enhancement lens using design system */
  backdrop-filter: contrast(calc(1 + var(--depth-effects-intensity) * 0.05)) saturate(calc(1 + var(--depth-effects-intensity) * 0.08)) brightness(calc(1 + var(--depth-effects-intensity) * 0.02));
  /* Subtle depth breathing using unified system */
  will-change: transform, opacity, filter;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
  contain: style paint;
  animation-duration: var(--depth-animation-duration, 4000ms);
  animation-timing-function: var(--sn-anim-easing-organic, ease-in-out);
  animation-iteration-count: infinite;
  animation-fill-mode: both;
  animation-name: breathing-depth;
  /* Enhanced effects in non-content areas only */
}
@media (prefers-reduced-motion: reduce) {
  .audio-depth-system .audio-chrome, .audio-depth-system .main-view-container::before, .main-view-container .audio-chrome, .main-view-container .main-view-container::before, .audio-depth-system .ui-chrome-area::before, .main-view-container .ui-chrome-area::before,
  .audio-depth-system .Root__nav-bar::before,
  .main-view-container .Root__nav-bar::before,
  .audio-depth-system .Root__top-bar::before,
  .main-view-container .Root__top-bar::before,
  .audio-depth-system .Root__now-playing-bar::before,
  .main-view-container .Root__now-playing-bar::before,
  .audio-depth-system .main-topBar-container::before,
  .main-view-container .main-topBar-container::before,
  .audio-depth-system .main-navBar-navBar::before,
  .main-view-container .main-navBar-navBar::before {
    animation: none !important;
    transform: translateZ(0) scale(1) !important;
    opacity: var(--sn-ui-glass-opacity, 1) !important;
    filter: none !important;
  }
}
@keyframes breathing-depth {
  0%, 100% {
    transform: translateZ(0);
    opacity: calc(var(--depth-effects-intensity, 0.5) * 0.6 * 1);
    backdrop-filter: contrast(calc(1 + var(--depth-effects-intensity, 0.5) * 0.02 * 1)) saturate(calc(1 + var(--depth-effects-intensity, 0.5) * 0.03 * 1));
  }
  50% {
    transform: translateZ(0);
    opacity: calc(var(--depth-effects-intensity, 0.5) * 0.8 * 1);
    backdrop-filter: contrast(calc(1 + var(--depth-effects-intensity, 0.5) * 0.05 * 1)) saturate(calc(1 + var(--depth-effects-intensity, 0.5) * 0.08 * 1));
  }
}
.audio-depth-system .audio-chrome:not(.content-area-detected), .audio-depth-system .main-view-container:not(.content-area-detected)::before, .main-view-container .audio-chrome:not(.content-area-detected), .main-view-container .main-view-container:not(.content-area-detected)::before, .audio-depth-system .ui-chrome-area:not(.content-area-detected)::before, .main-view-container .ui-chrome-area:not(.content-area-detected)::before,
.audio-depth-system .Root__nav-bar:not(.content-area-detected)::before,
.main-view-container .Root__nav-bar:not(.content-area-detected)::before,
.audio-depth-system .Root__top-bar:not(.content-area-detected)::before,
.main-view-container .Root__top-bar:not(.content-area-detected)::before,
.audio-depth-system .Root__now-playing-bar:not(.content-area-detected)::before,
.main-view-container .Root__now-playing-bar:not(.content-area-detected)::before,
.audio-depth-system .main-topBar-container:not(.content-area-detected)::before,
.main-view-container .main-topBar-container:not(.content-area-detected)::before,
.audio-depth-system .main-navBar-navBar:not(.content-area-detected)::before,
.main-view-container .main-navBar-navBar:not(.content-area-detected)::before {
  backdrop-filter: contrast(calc(1 + var(--depth-effects-intensity) * 0.15)) saturate(calc(1 + var(--depth-effects-intensity) * 0.2)) brightness(calc(1 + var(--depth-effects-intensity) * 0.05));
  opacity: calc(var(--depth-effects-intensity) * var(--chrome-enhancement-level) * 0.3);
}
.audio-depth-system .audio-background, .main-view-container .audio-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--background-layer-index);
  pointer-events: none;
  /* Beautiful deep atmospheric effects using design system */
  backdrop-filter: blur(var(--depth-background-blur)) contrast(calc(1 + var(--depth-effects-intensity) * 0.1)) saturate(calc(1 + var(--depth-effects-intensity) * 0.2));
  /* Cinematic depth enhancement using design system colors */
  /* Phase 4C: explicit atmospheric depth colors (mauve structural + lavender atmospheric) */
  background: radial-gradient(ellipse 40% 30% at 30% 70%, rgba(var(--oklab-mauve-rgb), calc(var(--depth-effects-intensity) * 0.08)) 0%, transparent 70%), radial-gradient(ellipse 50% 40% at 70% 30%, rgba(var(--oklab-lavender-rgb), calc(var(--depth-effects-intensity) * 0.06)) 0%, transparent 80%);
  /* Cinematic blend modes for depth */
  mix-blend-mode: color-dodge;
  opacity: calc(var(--depth-effects-intensity) * 0.4);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   🎵 UNIFIED DEPTH BREATHING ANIMATIONS - Using Central Mixin System
   ═══════════════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════════════
   🎯 CONTENT-AWARE ENHANCEMENT ZONES
   ═══════════════════════════════════════════════════════════════════════════════ */
/* Text-heavy content areas - Maximum protection */
.text-content-area,
.main-trackList-trackListRow,
.main-view-container__scroll-node,
[data-testid*=tracklist],
[data-testid*=playlist] {
  /* Enhanced text protection using design system */
  --holographic-intensity: calc(var(--sn-ui-glass-opacity, 0.5) * 0.1);
  --depth-scanline-opacity: calc(var(--sn-ui-glass-opacity, 0.15) * 0.1);
  --depth-effects-intensity: calc(var(--depth-effects-intensity) * 0.1);
  /* Subtle background enhancement only */
}
.text-content-area::before,
.main-trackList-trackListRow::before,
.main-view-container__scroll-node::before,
[data-testid*=tracklist]::before,
[data-testid*=playlist]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  pointer-events: none;
  /* Minimal atmospheric enhancement using design system colors */
  /* Phase 4C: explicit mauve for subtle structural base */
  background: rgba(var(--oklab-mauve-rgb), 0.01);
  will-change: transform, opacity, filter;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
  contain: style paint;
  animation-duration: var(--depth-animation-duration, 4000ms);
  animation-timing-function: var(--sn-anim-easing-organic, ease-in-out);
  animation-iteration-count: infinite;
  animation-fill-mode: both;
  animation-name: breathing-gentle;
}
@media (prefers-reduced-motion: reduce) {
  .text-content-area::before,
  .main-trackList-trackListRow::before,
  .main-view-container__scroll-node::before,
  [data-testid*=tracklist]::before,
  [data-testid*=playlist]::before {
    animation: none !important;
    transform: translateZ(0) scale(1) !important;
    opacity: var(--sn-ui-glass-opacity, 1) !important;
    filter: none !important;
  }
}
@keyframes breathing-gentle {
  0%, 100% {
    transform: translateZ(0);
    opacity: calc(var(--sn-ui-glass-opacity, 0.1) * 0.95 * 0.3);
    filter: brightness(var(--sn-bg-gradient-brightness, 1)) saturate(var(--sn-bg-gradient-saturation, 1.1)) contrast(var(--sn-bg-gradient-contrast, 1));
  }
  50% {
    transform: translateZ(0);
    opacity: calc(var(--sn-ui-glass-opacity, 0.1) * 1.05 * 0.3);
    filter: brightness(calc(var(--sn-bg-gradient-brightness, 1) * (1 + 0.03 * 0.3))) saturate(calc(var(--sn-bg-gradient-saturation, 1.1) * (1 + 0.08 * 0.3))) contrast(calc(var(--sn-bg-gradient-contrast, 1) * (1 + 0.02 * 0.3)));
  }
}

/* UI Chrome areas - Enhanced depth effects */
.ui-chrome-area,
.Root__nav-bar,
.Root__top-bar,
.Root__now-playing-bar,
.main-topBar-container,
.main-navBar-navBar {
  /* Enhanced visual effects for UI chrome using design system */
  --holographic-intensity: calc(var(--sn-ui-glass-opacity, 0.5) * var(--chrome-enhancement-level));
  --depth-scanline-opacity: calc(var(--sn-ui-glass-opacity, 0.15) * var(--chrome-enhancement-level));
  --depth-effects-intensity: calc(var(--depth-effects-intensity) * var(--chrome-enhancement-level));
  /* Full chrome enhancement */
}
.ui-chrome-area::before,
.Root__nav-bar::before,
.Root__top-bar::before,
.Root__now-playing-bar::before,
.main-topBar-container::before,
.main-navBar-navBar::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  pointer-events: none;
  /* Enhanced chrome effects */
  /* Stronger atmospheric effects for chrome using design system colors */
  /* Phase 4C: explicit blue for UI chrome enhancement */
  background: linear-gradient(135deg, transparent 0%, rgba(var(--oklab-blue-rgb), calc(var(--depth-effects-intensity) * 0.1)) 30%, transparent 70%);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   🌊 ADAPTIVE DEPTH LAYER BEHAVIOR - Using Design System
   ═══════════════════════════════════════════════════════════════════════════════ */
/* High energy music - More chrome effects, same content protection */
.music-energy-high {
  --depth-effects-intensity: calc(var(--depth-effects-intensity) * 1.3);
  --chrome-enhancement-level: 2.5;
  --depth-animation-duration: calc(var(--depth-animation-duration) * 0.7);
  /* Content protection increases with energy */
}
.music-energy-high .content-sanctuary,
.music-energy-high .main-view-container__scroll-node-child, .music-energy-high .text-content-area,
.music-energy-high .main-trackList-trackListRow,
.music-energy-high .main-view-container__scroll-node,
.music-energy-high [data-testid*=tracklist],
.music-energy-high [data-testid*=playlist] {
  --content-protection-level: 0.98;
  --holographic-intensity: calc(var(--sn-ui-glass-opacity, 0.5) * 0.05);
}

/* Calm music - Gentle effects everywhere */
.music-energy-calm {
  --depth-effects-intensity: calc(var(--depth-effects-intensity) * 0.6);
  --chrome-enhancement-level: 1.2;
  --depth-animation-duration: calc(var(--depth-animation-duration) * 1.8);
}
.music-energy-calm .content-sanctuary,
.music-energy-calm .main-view-container__scroll-node-child, .music-energy-calm .text-content-area,
.music-energy-calm .main-trackList-trackListRow,
.music-energy-calm .main-view-container__scroll-node,
.music-energy-calm [data-testid*=tracklist],
.music-energy-calm [data-testid*=playlist] {
  --content-protection-level: 0.9;
  --holographic-intensity: calc(var(--sn-ui-glass-opacity, 0.5) * 0.15);
}

/* User interaction detected - Reduce all effects */
:root[data-user-interacting=true] {
  --depth-effects-intensity: calc(var(--depth-effects-intensity) * 0.7);
  --user-interaction-detected: 1;
}

/* Reading mode - Emergency clarity */
:root[data-reading-mode=true] {
  --reading-mode-active: 1;
  --depth-effects-intensity: calc(var(--depth-effects-intensity) * 0.1);
}
:root[data-reading-mode=true] .audio-chrome, :root[data-reading-mode=true] .main-view-container::before, :root[data-reading-mode=true] .ui-chrome-area::before,
:root[data-reading-mode=true] .Root__nav-bar::before,
:root[data-reading-mode=true] .Root__top-bar::before,
:root[data-reading-mode=true] .Root__now-playing-bar::before,
:root[data-reading-mode=true] .main-topBar-container::before,
:root[data-reading-mode=true] .main-navBar-navBar::before {
  opacity: 0.02;
  animation: none;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   ♿ ACCESSIBILITY & PERFORMANCE OPTIMIZATIONS
   ═══════════════════════════════════════════════════════════════════════════════ */
/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .audio-depth-system *, .main-view-container * {
    animation: none !important;
    transition: none !important;
  }
  .audio-chrome, .main-view-container::before, .ui-chrome-area::before,
  .Root__nav-bar::before,
  .Root__top-bar::before,
  .Root__now-playing-bar::before,
  .main-topBar-container::before,
  .main-navBar-navBar::before {
    opacity: calc(var(--depth-effects-intensity) * 0.3);
  }
}
/* High contrast mode - Enhanced clarity */
@media (prefers-contrast: high) {
  :root {
    --content-protection-level: 0.99;
    --depth-effects-intensity: calc(var(--depth-effects-intensity) * 0.5);
  }
  .content-sanctuary,
  .main-view-container__scroll-node-child, .text-content-area,
  .main-trackList-trackListRow,
  .main-view-container__scroll-node,
  [data-testid*=tracklist],
  [data-testid*=playlist] {
    background: var(--spice-base);
    border: 1px solid var(--spice-text);
  }
}
/* Low-end device optimization */
@media (max-width: 768px), (max-height: 600px) {
  :root {
    --device-capability-scaling: 0.6;
    --depth-animation-duration: calc(var(--depth-animation-duration) * 2);
  }
  .audio-background {
    display: none; /* Remove heavy background effects on mobile */
  }
}
/* ═══════════════════════════════════════════════════════════════════════════════
   🎬 CINEMATIC DEPTH LAYER INTEGRATION - Using Design System
   "Interface layers that enhance visual experience while serving the user."
   ═══════════════════════════════════════════════════════════════════════════════ */
/* Integration with existing visual system */
.main-view-container {
  /* Override previous effects with depth layer system */
}
.main-view-container::before {
  /* Replace old enhancement lens with content-aware depth layers */
  /* Content-aware positioning - avoid text overlap */
  clip-path: polygon(0% 0%, 100% 0%, 100% 20%, 80% 20%, 80% 80%, 100% 80%, 100% 100%, 0% 100%);
  /* Enhanced depth effects only in non-content areas using design system */
  backdrop-filter: contrast(calc(1 + var(--sn-ui-glass-opacity, 0.5) * 0.03)) saturate(calc(1 + var(--sn-ui-glass-opacity, 0.5) * 0.05)) brightness(calc(1 + var(--sn-ui-glass-opacity, 0.5) * 0.01));
}

/* Ensure all content areas are protected */
.Root__main-view .main-view-container__scroll-node {
  perspective: 1000px;
  overflow: hidden;
}
.Root__main-view .main-view-container__scroll-node::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: var(--z-depth-layer-0);
  transform: translateZ(calc(var(--sn-depth-layer-0-z, 75px) * -1)) translateY(var(--sn-depth-layer-0-offset-y, 0px)) scale(var(--sn-depth-layer-0-scale, 1));
  filter: blur(var(--sn-depth-layer-0-blur, 2px)) hue-rotate(var(--sn-depth-layer-0-hue-rotate, 0deg));
  transition: var(--sn-depth-layer-transition);
}
.Root__main-view .main-view-container__scroll-node::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: var(--z-depth-layer-1);
  background: radial-gradient(ellipse at center, rgba(var(--sn-oklab-highlight-rgb, 255, 255, 255), 0.015) 0%, transparent 50%);
  transform: translateZ(calc(var(--sn-depth-layer-1-z, 150px) * -1)) translateY(var(--sn-depth-layer-1-offset-y, 0px)) scale(var(--sn-depth-layer-1-scale, 1));
  filter: blur(var(--sn-depth-layer-1-blur, 4px)) hue-rotate(var(--sn-depth-layer-1-hue-rotate, 0deg));
  transition: var(--sn-depth-layer-transition);
}

.Root {
  position: relative;
  perspective: var(--cosmic-perspective);
  perspective-origin: 50% 50%;
  transform-style: preserve-3d;
  overflow: hidden;
}
.Root::before {
  content: "";
  position: fixed;
  top: -200%;
  left: -200%;
  width: 500%;
  height: 500%;
  z-index: -1020;
  pointer-events: none;
  background: radial-gradient(circle 15% at 50% 50%, rgba(var(--sn-bg-gradient-primary-rgb), var(--galaxy-core-brightness)) 0%, rgba(var(--sn-bg-gradient-accent-rgb), calc(var(--galaxy-core-brightness) * 0.8)) 30%, rgba(var(--sn-bg-gradient-secondary-rgb), calc(var(--galaxy-core-brightness) * 0.6)) 60%, transparent 100%), conic-gradient(from 0deg, transparent 0deg, rgba(var(--sn-bg-gradient-primary-rgb), 0.2) 45deg, transparent 90deg, rgba(var(--sn-bg-gradient-accent-rgb), 0.15) 135deg, transparent 180deg, rgba(var(--sn-bg-gradient-secondary-rgb), 0.1) 225deg, transparent 270deg, rgba(var(--sn-bg-gradient-primary-rgb), 0.2) 315deg, transparent 360deg), conic-gradient(from 90deg, transparent 0deg, rgba(var(--sn-bg-gradient-accent-rgb), 0.18) 45deg, transparent 90deg, rgba(var(--sn-bg-gradient-secondary-rgb), 0.12) 135deg, transparent 180deg, rgba(var(--sn-bg-gradient-primary-rgb), 0.08) 225deg, transparent 270deg, rgba(var(--sn-bg-gradient-accent-rgb), 0.18) 315deg, transparent 360deg), radial-gradient(ellipse 80% 60% at 50% 50%, transparent 0%, rgba(var(--sn-bg-gradient-primary-rgb), 0.05) 40%, rgba(var(--sn-bg-gradient-accent-rgb), 0.08) 70%, rgba(var(--sn-bg-gradient-secondary-rgb), var(--galaxy-outer-dimness)) 100%);
  animation: galactic-holographic-rotation calc(var(--galaxy-rotation-speed) / var(--music-galactic-rotation)) linear infinite, cosmic-holographic-pulse var(--zoom-breathing-rhythm) ease-in-out infinite;
  filter: blur(8px) brightness(calc(0.7 * var(--music-cosmic-expansion)));
  z-index: var(--z-galactic-backdrop);
}
.Root::after {
  content: "";
  position: fixed;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  z-index: calc(-1000 - 6);
  pointer-events: none;
  background: radial-gradient(0.09px circle at 5% 8%, rgba(var(--sn-bg-gradient-primary-rgb), 0.15) 0%, transparent 50%), radial-gradient(0.09px circle at 95% 92%, rgba(var(--sn-bg-gradient-accent-rgb), 0.1) 0%, transparent 50%), radial-gradient(0.09px circle at 25% 35%, rgba(var(--sn-bg-gradient-secondary-rgb), 0.2) 0%, transparent 50%), radial-gradient(0.09px circle at 75% 65%, rgba(var(--sn-bg-gradient-primary-rgb), 0.1) 0%, transparent 50%), radial-gradient(0.09px circle at 45% 85%, rgba(var(--sn-bg-gradient-accent-rgb), 0.15) 0%, transparent 50%), radial-gradient(0.09px circle at 85% 15%, rgba(var(--sn-bg-gradient-secondary-rgb), 0.1) 0%, transparent 50%), radial-gradient(0.09px circle at 15% 55%, rgba(var(--sn-bg-gradient-primary-rgb), 0.2) 0%, transparent 50%), radial-gradient(0.09px circle at 55% 45%, rgba(var(--sn-bg-gradient-accent-rgb), 0.1) 0%, transparent 50%), radial-gradient(0.09px circle at 35% 75%, rgba(var(--sn-bg-gradient-secondary-rgb), 0.15) 0%, transparent 50%), radial-gradient(0.09px circle at 75% 25%, rgba(var(--sn-bg-gradient-primary-rgb), 0.1) 0%, transparent 50%), radial-gradient(0.09px circle at 65% 85%, rgba(var(--sn-bg-gradient-accent-rgb), 0.2) 0%, transparent 50%), radial-gradient(0.09px circle at 85% 35%, rgba(var(--sn-bg-gradient-secondary-rgb), 0.1) 0%, transparent 50%);
  animation: infinite-star-field-drift calc(var(--zoom-animation-speed) / 0.05) linear infinite, stellar-holographic-pulse calc(120s / 0.05) linear infinite;
  filter: blur(calc(6 * 0.5px)) brightness(calc(1 - 6 * 0.1));
  opacity: calc(1 - 6 * 0.1);
  z-index: var(--z-cosmic-dust);
}

.Root .main-view-container::before {
  content: "";
  position: fixed;
  top: -100%;
  left: -100%;
  width: 300%;
  height: 300%;
  z-index: calc(-1000 - 5 - 10);
  pointer-events: none;
  background: radial-gradient(ellipse var(--nebula-scale-infinite) 80% at 30% 40%, rgba(var(--sn-bg-gradient-primary-rgb), 0.03) 0%, rgba(var(--sn-bg-gradient-accent-rgb), 0.021) 30%, rgba(var(--sn-bg-gradient-secondary-rgb), 0.015) 60%, transparent 100%), radial-gradient(ellipse calc(var(--nebula-scale-infinite) * 0.7) 60% at 70% 60%, rgba(var(--sn-bg-gradient-accent-rgb), 0.024) 0%, rgba(var(--sn-bg-gradient-secondary-rgb), 0.018) 40%, transparent 80%), linear-gradient(calc(135deg + var(--visual-flow-angle, 0deg)), rgba(var(--sn-bg-gradient-secondary-rgb), 0.018) 0%, rgba(var(--sn-bg-gradient-primary-rgb), 0.012) 30%, transparent 70%, rgba(var(--sn-bg-gradient-accent-rgb), 0.009) 100%);
  background-size: 400% 300%, 350% 250%, 500% 200%;
  animation: nebula-holographic-flow calc(var(--nebula-flow-speed) * (1 + 5 * 0.3)) ease-in-out infinite;
  will-change: transform, opacity, filter;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
  contain: style paint;
  animation: advanced-cosmic-depth-music calc(8s * 1) ease-in-out infinite;
  animation-duration: calc(var(--zoom-breathing-rhythm) * (1 + 5 * 0.2));
  opacity: calc(1 - 5 * 0.1);
  filter: blur(calc(5 * 2px)) brightness(calc(1 - 5 * 0.05));
  z-index: var(--z-far-nebula);
}
@media (prefers-reduced-motion: reduce) {
  .Root .main-view-container::before {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    filter: none !important;
    transform: none !important;
    border-radius: inherit !important;
    perspective: none !important;
  }
}
@media (prefers-contrast: high) {
  .Root .main-view-container::before {
    filter: contrast(1.3) brightness(1.1);
  }
}

.Root .main-view-container::after {
  content: "";
  position: fixed;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  z-index: calc(-1000 - 4);
  pointer-events: none;
  background: radial-gradient(0.25px circle at 8% 12%, rgba(var(--sn-bg-gradient-primary-rgb), 0.3) 0%, transparent 50%), radial-gradient(0.25px circle at 92% 88%, rgba(var(--sn-bg-gradient-accent-rgb), 0.2) 0%, transparent 50%), radial-gradient(0.25px circle at 28% 38%, rgba(var(--sn-bg-gradient-secondary-rgb), 0.4) 0%, transparent 50%), radial-gradient(0.25px circle at 72% 62%, rgba(var(--sn-bg-gradient-primary-rgb), 0.2) 0%, transparent 50%), radial-gradient(0.25px circle at 44% 84%, rgba(var(--sn-bg-gradient-accent-rgb), 0.3) 0%, transparent 50%), radial-gradient(0.25px circle at 84% 16%, rgba(var(--sn-bg-gradient-secondary-rgb), 0.2) 0%, transparent 50%), radial-gradient(0.25px circle at 16% 56%, rgba(var(--sn-bg-gradient-primary-rgb), 0.3) 0%, transparent 50%), radial-gradient(0.25px circle at 56% 44%, rgba(var(--sn-bg-gradient-accent-rgb), 0.4) 0%, transparent 50%), radial-gradient(0.25px circle at 36% 76%, rgba(var(--sn-bg-gradient-secondary-rgb), 0.2) 0%, transparent 50%), radial-gradient(0.25px circle at 76% 24%, rgba(var(--sn-bg-gradient-primary-rgb), 0.3) 0%, transparent 50%);
  animation: infinite-star-field-drift calc(var(--zoom-animation-speed) / 0.3) linear infinite, stellar-holographic-pulse calc(120s / 0.3) linear infinite;
  filter: blur(calc(4 * 0.5px)) brightness(calc(1 - 4 * 0.1));
  opacity: calc(1 - 4 * 0.1);
  z-index: var(--z-far-stars);
}

.Root .main-topBar-container::before {
  content: "";
  position: fixed;
  top: -100%;
  left: -100%;
  width: 300%;
  height: 300%;
  z-index: calc(-1000 - 3 - 10);
  pointer-events: none;
  background: radial-gradient(ellipse var(--nebula-scale-large) 80% at 30% 40%, rgba(var(--sn-bg-gradient-primary-rgb), 0.05) 0%, rgba(var(--sn-bg-gradient-accent-rgb), 0.035) 30%, rgba(var(--sn-bg-gradient-secondary-rgb), 0.025) 60%, transparent 100%), radial-gradient(ellipse calc(var(--nebula-scale-large) * 0.7) 60% at 70% 60%, rgba(var(--sn-bg-gradient-accent-rgb), 0.04) 0%, rgba(var(--sn-bg-gradient-secondary-rgb), 0.03) 40%, transparent 80%), linear-gradient(calc(135deg + var(--visual-flow-angle, 0deg)), rgba(var(--sn-bg-gradient-secondary-rgb), 0.03) 0%, rgba(var(--sn-bg-gradient-primary-rgb), 0.02) 30%, transparent 70%, rgba(var(--sn-bg-gradient-accent-rgb), 0.015) 100%);
  background-size: 400% 300%, 350% 250%, 500% 200%;
  animation: nebula-holographic-flow calc(var(--nebula-flow-speed) * (1 + 3 * 0.3)) ease-in-out infinite;
  will-change: transform, opacity, filter;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
  contain: style paint;
  animation: advanced-cosmic-depth-music calc(8s * 1) ease-in-out infinite;
  animation-duration: calc(var(--zoom-breathing-rhythm) * (1 + 3 * 0.2));
  opacity: calc(1 - 3 * 0.1);
  filter: blur(calc(3 * 2px)) brightness(calc(1 - 3 * 0.05));
  z-index: var(--z-mid-nebula);
}
@media (prefers-reduced-motion: reduce) {
  .Root .main-topBar-container::before {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    filter: none !important;
    transform: none !important;
    border-radius: inherit !important;
    perspective: none !important;
  }
}
@media (prefers-contrast: high) {
  .Root .main-topBar-container::before {
    filter: contrast(1.3) brightness(1.1);
  }
}

.Root .main-topBar-container::after {
  content: "";
  position: fixed;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  z-index: calc(-1000 - 3);
  pointer-events: none;
  background: radial-gradient(0.8px circle at 12% 18%, rgba(var(--sn-bg-gradient-primary-rgb), 0.6) 0%, transparent 50%), radial-gradient(0.8px circle at 88% 82%, rgba(var(--sn-bg-gradient-accent-rgb), 0.5) 0%, transparent 50%), radial-gradient(0.8px circle at 32% 42%, rgba(var(--sn-bg-gradient-secondary-rgb), 0.7) 0%, transparent 50%), radial-gradient(0.8px circle at 78% 28%, rgba(var(--sn-bg-gradient-primary-rgb), 0.4) 0%, transparent 50%), radial-gradient(0.8px circle at 48% 88%, rgba(var(--sn-bg-gradient-accent-rgb), 0.6) 0%, transparent 50%), radial-gradient(0.8px circle at 18% 68%, rgba(var(--sn-bg-gradient-secondary-rgb), 0.5) 0%, transparent 50%), radial-gradient(0.8px circle at 92% 52%, rgba(var(--sn-bg-gradient-primary-rgb), 0.4) 0%, transparent 50%), radial-gradient(0.8px circle at 58% 22%, rgba(var(--sn-bg-gradient-accent-rgb), 0.7) 0%, transparent 50%);
  animation: infinite-star-field-drift calc(var(--zoom-animation-speed) / 0.5) linear infinite, stellar-holographic-pulse calc(120s / 0.5) linear infinite;
  filter: blur(calc(3 * 0.5px)) brightness(calc(1 - 3 * 0.1));
  opacity: calc(1 - 3 * 0.1);
  z-index: var(--z-mid-stars);
}

.Root .main-navBar-navBar::before {
  content: "";
  position: fixed;
  top: -100%;
  left: -100%;
  width: 300%;
  height: 300%;
  z-index: calc(-1000 - 2 - 10);
  pointer-events: none;
  background: radial-gradient(ellipse var(--nebula-scale-medium) 80% at 30% 40%, rgba(var(--sn-bg-gradient-primary-rgb), 0.08) 0%, rgba(var(--sn-bg-gradient-accent-rgb), 0.056) 30%, rgba(var(--sn-bg-gradient-secondary-rgb), 0.04) 60%, transparent 100%), radial-gradient(ellipse calc(var(--nebula-scale-medium) * 0.7) 60% at 70% 60%, rgba(var(--sn-bg-gradient-accent-rgb), 0.064) 0%, rgba(var(--sn-bg-gradient-secondary-rgb), 0.048) 40%, transparent 80%), linear-gradient(calc(135deg + var(--visual-flow-angle, 0deg)), rgba(var(--sn-bg-gradient-secondary-rgb), 0.048) 0%, rgba(var(--sn-bg-gradient-primary-rgb), 0.032) 30%, transparent 70%, rgba(var(--sn-bg-gradient-accent-rgb), 0.024) 100%);
  background-size: 400% 300%, 350% 250%, 500% 200%;
  animation: nebula-holographic-flow calc(var(--nebula-flow-speed) * (1 + 2 * 0.3)) ease-in-out infinite;
  will-change: transform, opacity, filter;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
  contain: style paint;
  animation: advanced-cosmic-depth-music calc(8s * 1) ease-in-out infinite;
  animation-duration: calc(var(--zoom-breathing-rhythm) * (1 + 2 * 0.2));
  opacity: calc(1 - 2 * 0.1);
  filter: blur(calc(2 * 2px)) brightness(calc(1 - 2 * 0.05));
  z-index: var(--z-near-nebula);
}
@media (prefers-reduced-motion: reduce) {
  .Root .main-navBar-navBar::before {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    filter: none !important;
    transform: none !important;
    border-radius: inherit !important;
    perspective: none !important;
  }
}
@media (prefers-contrast: high) {
  .Root .main-navBar-navBar::before {
    filter: contrast(1.3) brightness(1.1);
  }
}

.Root .main-navBar-navBar::after {
  content: "";
  position: fixed;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  z-index: calc(-1000 - 2);
  pointer-events: none;
  background: radial-gradient(2px circle at 15% 25%, rgba(var(--sn-bg-gradient-primary-rgb), 0.9) 0%, transparent 50%), radial-gradient(3px circle at 85% 15%, rgba(var(--sn-bg-gradient-accent-rgb), 0.8) 0%, transparent 50%), radial-gradient(1px circle at 45% 75%, rgba(var(--sn-bg-gradient-secondary-rgb), 1) 0%, transparent 50%), radial-gradient(2px circle at 75% 85%, rgba(var(--sn-bg-gradient-primary-rgb), 0.7) 0%, transparent 50%), radial-gradient(4px circle at 25% 55%, rgba(var(--sn-bg-gradient-accent-rgb), 0.6) 0%, transparent 50%);
  animation: infinite-star-field-drift calc(var(--zoom-animation-speed) / 0.8) linear infinite, stellar-holographic-pulse calc(120s / 0.8) linear infinite;
  filter: blur(calc(2 * 0.5px)) brightness(calc(1 - 2 * 0.1));
  opacity: calc(1 - 2 * 0.1);
  z-index: var(--z-near-stars);
}

.main-entityHeader-entityHeader {
  position: relative;
  transform-style: preserve-3d;
}
.main-entityHeader-entityHeader::before {
  content: "";
  position: fixed;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  z-index: calc(-1000 - 1);
  pointer-events: none;
  background: radial-gradient(0.45px circle at 5% 8%, rgba(var(--sn-bg-gradient-primary-rgb), 0.15) 0%, transparent 50%), radial-gradient(0.45px circle at 95% 92%, rgba(var(--sn-bg-gradient-accent-rgb), 0.1) 0%, transparent 50%), radial-gradient(0.45px circle at 25% 35%, rgba(var(--sn-bg-gradient-secondary-rgb), 0.2) 0%, transparent 50%), radial-gradient(0.45px circle at 75% 65%, rgba(var(--sn-bg-gradient-primary-rgb), 0.1) 0%, transparent 50%), radial-gradient(0.45px circle at 45% 85%, rgba(var(--sn-bg-gradient-accent-rgb), 0.15) 0%, transparent 50%), radial-gradient(0.45px circle at 85% 15%, rgba(var(--sn-bg-gradient-secondary-rgb), 0.1) 0%, transparent 50%), radial-gradient(0.45px circle at 15% 55%, rgba(var(--sn-bg-gradient-primary-rgb), 0.2) 0%, transparent 50%), radial-gradient(0.45px circle at 55% 45%, rgba(var(--sn-bg-gradient-accent-rgb), 0.1) 0%, transparent 50%), radial-gradient(0.45px circle at 35% 75%, rgba(var(--sn-bg-gradient-secondary-rgb), 0.15) 0%, transparent 50%), radial-gradient(0.45px circle at 75% 25%, rgba(var(--sn-bg-gradient-primary-rgb), 0.1) 0%, transparent 50%), radial-gradient(0.45px circle at 65% 85%, rgba(var(--sn-bg-gradient-accent-rgb), 0.2) 0%, transparent 50%), radial-gradient(0.45px circle at 85% 35%, rgba(var(--sn-bg-gradient-secondary-rgb), 0.1) 0%, transparent 50%);
  animation: infinite-star-field-drift calc(var(--zoom-animation-speed) / 1) linear infinite, stellar-holographic-pulse calc(120s / 1) linear infinite;
  filter: blur(calc(1 * 0.5px)) brightness(calc(1 - 1 * 0.1));
  opacity: calc(1 - 1 * 0.1);
  z-index: var(--z-local-stars);
}
.main-entityHeader-entityHeader::after {
  content: "";
  position: fixed;
  top: -100%;
  left: -100%;
  width: 300%;
  height: 300%;
  z-index: calc(-1000 - 1 - 10);
  pointer-events: none;
  background: radial-gradient(ellipse var(--nebula-scale-small) 80% at 30% 40%, rgba(var(--sn-bg-gradient-primary-rgb), 0.12) 0%, rgba(var(--sn-bg-gradient-accent-rgb), 0.084) 30%, rgba(var(--sn-bg-gradient-secondary-rgb), 0.06) 60%, transparent 100%), radial-gradient(ellipse calc(var(--nebula-scale-small) * 0.7) 60% at 70% 60%, rgba(var(--sn-bg-gradient-accent-rgb), 0.096) 0%, rgba(var(--sn-bg-gradient-secondary-rgb), 0.072) 40%, transparent 80%), linear-gradient(calc(135deg + var(--visual-flow-angle, 0deg)), rgba(var(--sn-bg-gradient-secondary-rgb), 0.072) 0%, rgba(var(--sn-bg-gradient-primary-rgb), 0.048) 30%, transparent 70%, rgba(var(--sn-bg-gradient-accent-rgb), 0.036) 100%);
  background-size: 400% 300%, 350% 250%, 500% 200%;
  animation: nebula-holographic-flow calc(var(--nebula-flow-speed) * (1 + 1 * 0.3)) ease-in-out infinite;
  will-change: transform, opacity, filter;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
  contain: style paint;
  animation: advanced-cosmic-depth-music calc(8s * 1) ease-in-out infinite;
  animation-duration: calc(var(--zoom-breathing-rhythm) * (1 + 1 * 0.2));
  opacity: calc(1 - 1 * 0.1);
  filter: blur(calc(1 * 2px)) brightness(calc(1 - 1 * 0.05));
  z-index: var(--z-local-nebula);
}
@media (prefers-reduced-motion: reduce) {
  .main-entityHeader-entityHeader::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    filter: none !important;
    transform: none !important;
    border-radius: inherit !important;
    perspective: none !important;
  }
}
@media (prefers-contrast: high) {
  .main-entityHeader-entityHeader::after {
    filter: contrast(1.3) brightness(1.1);
  }
}

.main-nowPlayingBar-nowPlayingBar {
  position: relative;
  transform-style: preserve-3d;
}
.main-nowPlayingBar-nowPlayingBar::before {
  content: "";
  position: absolute;
  top: -100%;
  left: -50%;
  width: 200%;
  height: 300%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse 150% 100% at 50% 50%, rgba(var(--sn-bg-gradient-primary-rgb), 0.15) 0%, rgba(var(--sn-bg-gradient-accent-rgb), 0.1) 40%, rgba(var(--sn-bg-gradient-secondary-rgb), 0.08) 70%, transparent 100%);
  animation: nebula-holographic-flow calc(var(--nebula-flow-speed) * 0.5) ease-in-out infinite, cosmic-holographic-pulse calc(var(--zoom-breathing-rhythm) * 0.8) ease-in-out infinite;
  filter: brightness(var(--music-cosmic-expansion));
}

.Root[style*="--sn-music-beat-pulse-intensity"] {
  --music-cosmic-expansion: calc(var(--sn-music-beat-pulse-intensity, 0) * 0.4 + 1);
  --music-stellar-intensity: calc(
    var(--sn-music-beat-pulse-intensity, 0) * 0.8 + 0.4
  );
  --music-galactic-rotation: calc(
    2 - var(--sn-music-beat-pulse-intensity, 0) * 1.5
  );
}
.Root[style*="--sn-music-beat-pulse-intensity"]::before, .Root[style*="--sn-music-beat-pulse-intensity"]::after {
  animation-duration: calc(var(--galaxy-rotation-speed) / var(--music-galactic-rotation)), calc(var(--zoom-animation-speed) / max(var(--music-stellar-intensity), 0.3));
}
.Root[style*="--sn-music-beat-pulse-intensity"] .main-view-container::before, .Root[style*="--sn-music-beat-pulse-intensity"] .main-view-container::after,
.Root[style*="--sn-music-beat-pulse-intensity"] .main-topBar-container::before,
.Root[style*="--sn-music-beat-pulse-intensity"] .main-topBar-container::after,
.Root[style*="--sn-music-beat-pulse-intensity"] .main-navBar-navBar::before,
.Root[style*="--sn-music-beat-pulse-intensity"] .main-navBar-navBar::after {
  filter: brightness(calc(1 + var(--sn-music-beat-pulse-intensity, 0) * 0.3)) saturate(calc(1.2 + var(--sn-music-beat-pulse-intensity, 0) * 0.4));
}

.Root[style*="--sn-dynamic-genre-hue-shift"] {
  --visual-flow-angle: calc(
    var(--sn-dynamic-genre-hue-shift, 0deg) +
      var(--sn-music-rhythm-phase, 0) * 180deg
  );
}
.Root[style*="--sn-dynamic-genre-hue-shift"]::before {
  filter: blur(8px) brightness(0.7) hue-rotate(calc(var(--sn-dynamic-genre-hue-shift, 0deg) * 0.5));
}
.Root[style*="--sn-dynamic-genre-hue-shift"] .main-entityHeader-entityHeader::before, .Root[style*="--sn-dynamic-genre-hue-shift"] .main-entityHeader-entityHeader::after,
.Root[style*="--sn-dynamic-genre-hue-shift"] .main-nowPlayingBar-nowPlayingBar::before,
.Root[style*="--sn-dynamic-genre-hue-shift"] .main-nowPlayingBar-nowPlayingBar::after {
  filter: hue-rotate(var(--sn-dynamic-genre-hue-shift, 0deg));
}

.Root[style*="--sn-music-energy"] {
  --music-depth-perception: calc(
    var(--sn-music-energy, 0.5) * 1500px + 500px
  );
  perspective: calc(var(--cosmic-perspective) + var(--music-depth-perception));
}
.Root[style*="--sn-music-energy"] .main-view-container,
.Root[style*="--sn-music-energy"] .main-topBar-container {
  filter: brightness(calc(1 - var(--music-depth-perception) * 0.0003));
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --galaxy-rotation-speed: 300s;
    --nebula-flow-speed: 120s;
    --zoom-animation-speed: 45s;
    --zoom-breathing-rhythm: 20s;
    --cosmic-perspective: 1000px;
  }
  .Root {
    perspective: none !important;
  }
  .Root::before, .Root::after {
    animation: none !important;
  }
  .main-view-container::before, .main-view-container::after,
  .main-topBar-container::before,
  .main-topBar-container::after,
  .main-navBar-navBar::before,
  .main-navBar-navBar::after,
  .main-entityHeader-entityHeader::before,
  .main-entityHeader-entityHeader::after {
    animation: none !important;
    transform: none !important;
  }
  .Root::before {
    background: radial-gradient(circle 30% at 50% 50%, rgba(var(--sn-bg-gradient-primary-rgb), 0.1) 0%, rgba(var(--sn-bg-gradient-accent-rgb), 0.05) 50%, transparent 100%);
    animation: none !important;
  }
}
@media (max-width: 768px) {
  :root {
    --cosmic-perspective: 1200px;
    --star-density-near: 25;
    --star-density-mid: 75;
    --star-density-far: 150;
    --star-density-infinite: 250;
    --zoom-depth-variance: 100px;
  }
  .main-view-container::before, .main-view-container::after,
  .main-topBar-container::before,
  .main-topBar-container::after {
    display: none;
  }
  .main-entityHeader-entityHeader::after {
    display: none;
  }
}
@media (prefers-contrast: high) {
  :root {
    --galaxy-core-brightness: 1.2;
    --galaxy-outer-dimness: 0.4;
    --music-stellar-intensity: calc(
      var(--sn-music-beat-pulse-intensity, 0) * 1 + 0.6
    );
  }
  .Root::before {
    filter: blur(4px) brightness(1) contrast(1.3);
  }
  .main-entityHeader-entityHeader::before,
  .main-nowPlayingBar-nowPlayingBar::before {
    opacity: 1.5;
  }
}
@media (max-resolution: 1.5dppx) {
  :root {
    --star-density-near: 15;
    --star-density-mid: 50;
    --star-density-far: 100;
    --star-density-infinite: 150;
    --cosmic-perspective: 800px;
  }
  .Root::before {
    background: radial-gradient(circle 40% at 50% 50%, rgba(var(--sn-bg-gradient-primary-rgb), 0.15) 0%, rgba(var(--sn-bg-gradient-accent-rgb), 0.1) 60%, transparent 100%);
    animation: none !important;
  }
  .main-view-container::after,
  .main-topBar-container::after,
  .main-navBar-navBar::after {
    display: none;
  }
}
.Root,
.main-view-container,
.main-topBar-container,
.main-navBar-navBar,
.main-entityHeader-entityHeader {
  will-change: auto;
}

.Root::before {
  content: "";
  position: fixed;
  top: -10%;
  left: -10%;
  width: 120%;
  height: 120%;
  z-index: -6;
  pointer-events: none;
  background: radial-gradient(ellipse 100% 60% at 20% 30%, rgba(var(--sn-bg-gradient-primary-rgb), var(--aurora-layer-1-intensity)) 0%, transparent 70%), radial-gradient(ellipse 80% 90% at 80% 60%, rgba(var(--sn-bg-gradient-secondary-rgb), var(--aurora-layer-2-intensity)) 0%, transparent 60%), radial-gradient(ellipse 120% 50% at 50% 90%, rgba(var(--sn-bg-gradient-accent-rgb), var(--aurora-layer-3-intensity)) 0%, transparent 80%);
  background-size: 300% 300%, 250% 400%, 400% 200%;
  animation: aurora-background-flow var(--aurora-flow-speed) ease-in-out infinite;
  filter: blur(60px);
}

.sn-stars-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -5;
  overflow: hidden;
  will-change: transform, opacity, filter;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
  contain: style paint;
  transform-style: preserve-3d;
  perspective: 1000px;
}
.sn-stars-container .star {
  position: absolute;
  width: calc(var(--particle-cluster-size) * 1px);
  height: calc(var(--particle-cluster-size) * 1px);
  border-radius: 50%;
  background: radial-gradient(circle, var(--particle-primary-energy) 0%, var(--particle-secondary-energy) 50%, transparent 100%);
  will-change: transform, opacity, filter;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
  contain: style paint;
  transform-style: preserve-3d;
  animation: energy-stream-primary calc(var(--particle-base-speed) * var(--particle-music-modulation)) var(--particle-dynamic-curve) infinite;
}
.sn-stars-container .star::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--particle-cluster-radius) * 1px);
  height: 2px;
  transform: translate(-50%, -50%) rotate(-45deg);
  background: linear-gradient(90deg, var(--particle-primary-energy) 0%, var(--particle-accent-energy) 30%, transparent 100%);
  opacity: calc(var(--particle-energy-intensity) * 0.8);
  filter: blur(0.5px);
  border-radius: 1px;
  will-change: transform, opacity, filter;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
}
.sn-stars-container .star::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--particle-cluster-size) * 3px);
  height: calc(var(--particle-cluster-size) * 3px);
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, var(--particle-accent-energy) 0%, transparent 70%);
  border-radius: 50%;
  opacity: calc(var(--particle-energy-intensity) * 0.4);
  filter: blur(2px);
  will-change: transform, opacity, filter;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
}
.sn-stars-container .star:nth-child(1) {
  --particle-cluster-size: 3;
  top: 15%;
  left: -10%;
  animation: energy-stream-primary calc(var(--particle-base-speed) * 1.2) var(--particle-dynamic-curve) infinite;
  animation-delay: 0s;
  background: radial-gradient(circle, var(--particle-primary-energy) 0%, var(--particle-accent-energy) 70%, transparent 100%);
}
.sn-stars-container .star:nth-child(2) {
  --particle-cluster-size: 2;
  top: 25%;
  left: -15%;
  animation: energy-whisper-secondary calc(var(--particle-base-speed) * 0.8) var(--particle-dynamic-curve) infinite;
  animation-delay: calc(var(--particle-emergence-delay) * 1);
  background: radial-gradient(circle, var(--particle-secondary-energy) 0%, var(--particle-primary-energy) 60%, transparent 100%);
}
.sn-stars-container .star:nth-child(3) {
  --particle-cluster-size: 4;
  top: 65%;
  left: -5%;
  animation: energy-stream-primary calc(var(--particle-base-speed) * 1.5) var(--particle-dynamic-curve) infinite;
  animation-delay: calc(var(--particle-emergence-delay) * 2);
  background: radial-gradient(circle, var(--particle-accent-energy) 0%, var(--particle-secondary-energy) 50%, transparent 100%);
}
.sn-stars-container .star:nth-child(4) {
  --particle-cluster-size: 2.5;
  top: 85%;
  left: -20%;
  animation: animation-pulse-interface calc(var(--particle-base-speed) * 1.1) var(--particle-dynamic-curve) infinite;
  animation-delay: calc(var(--particle-emergence-delay) * 0.5);
  background: radial-gradient(circle, var(--particle-primary-energy) 0%, var(--particle-accent-energy) 40%, transparent 100%);
}
.sn-stars-container .star:nth-child(5) {
  --particle-cluster-size: 3.5;
  top: 45%;
  left: -8%;
  animation: energy-cluster-formation calc(var(--particle-base-speed) * 0.9) var(--particle-dynamic-curve) infinite;
  animation-delay: calc(var(--particle-emergence-delay) * 1.8);
  background: radial-gradient(circle, var(--particle-accent-energy) 0%, var(--particle-primary-energy) 65%, transparent 100%);
}
.sn-stars-container .star:nth-child(6) {
  --particle-cluster-size: 1.5;
  top: 35%;
  left: 25%;
  animation: animation-twinkle-dynamic calc(var(--particle-life-cycle)) ease-in-out infinite;
  animation-delay: calc(var(--particle-emergence-delay) * 0.3);
  background: radial-gradient(circle, var(--particle-secondary-energy) 0%, transparent 80%);
}
.sn-stars-container .star:nth-child(7) {
  --particle-cluster-size: 2;
  top: 75%;
  left: 60%;
  animation: animation-twinkle-dynamic calc(var(--particle-life-cycle) * 1.3) ease-in-out infinite;
  animation-delay: calc(var(--particle-emergence-delay) * 2.2);
  background: radial-gradient(circle, var(--particle-accent-energy) 0%, transparent 75%);
}
.sn-stars-container .star:nth-child(8) {
  --particle-cluster-size: 1.8;
  top: 55%;
  left: 80%;
  animation: animation-twinkle-dynamic calc(var(--particle-life-cycle) * 0.7) ease-in-out infinite;
  animation-delay: calc(var(--particle-emergence-delay) * 1.5);
  background: radial-gradient(circle, var(--particle-primary-energy) 0%, transparent 85%);
}
.sn-stars-container .star:nth-child(9) {
  --particle-cluster-size: 2.5;
  top: 20%;
  left: 40%;
  animation: nebula-particle-drift calc(var(--particle-base-speed) * 7.5) linear infinite;
  animation-delay: 0s;
  opacity: 0.4;
  background: radial-gradient(circle, var(--particle-secondary-energy) 0%, transparent 70%);
}
.sn-stars-container .star:nth-child(10) {
  --particle-cluster-size: 3;
  top: 70%;
  left: 15%;
  animation: nebula-particle-drift calc(var(--particle-base-speed) * 9) linear infinite reverse;
  animation-delay: calc(var(--particle-emergence-delay) * 2);
  opacity: 0.3;
  background: radial-gradient(circle, var(--particle-accent-energy) 0%, transparent 65%);
}

.main-searchPage-content,
[data-context=focus],
.search-focused {
  --particle-energy-intensity: calc(
    var(--particle-energy-intensity) * var(--particle-focus-dampening)
  );
  --particle-network-density: 2;
  --particle-base-speed: calc(var(--particle-base-speed) * 2);
}
.main-searchPage-content .sn-stars-container .star:nth-child(n+4),
[data-context=focus] .sn-stars-container .star:nth-child(n+4),
.search-focused .sn-stars-container .star:nth-child(n+4) {
  animation-play-state: paused;
  opacity: 0.2;
}

.main-entityHeader-container,
section[data-testid=component-shelf],
.main-shelf-shelf,
[data-context=discovery] {
  --particle-energy-intensity: calc(
    var(--particle-energy-intensity) * var(--particle-discovery-amplification)
  );
  --particle-network-density: 5;
  --particle-interface-influence: 1.3;
}

.Root__now-playing-bar:has(.main-trackList-playingIcon),
[data-context=playing] {
  --particle-music-modulation: 0.7;
  --particle-energy-intensity: calc(var(--particle-energy-intensity) * 1.2);
  --particle-interface-influence: 1.5;
}
.Root__now-playing-bar:has(.main-trackList-playingIcon) .sn-stars-container .star,
[data-context=playing] .sn-stars-container .star {
  animation-duration: calc(var(--particle-base-speed) * 0.6) !important;
}

.Root[style*="--sn-music-beat-pulse-intensity"] .Root::before {
  animation-duration: calc(var(--aurora-flow-speed) / max(var(--sn-music-beat-pulse-intensity, 1), 0.7));
  filter: blur(60px) brightness(calc(1 + var(--sn-music-beat-pulse-intensity, 0) * 0.15)) saturate(calc(1 + var(--sn-music-beat-pulse-intensity, 0) * 0.2));
}
.Root[style*="--sn-music-beat-pulse-intensity"] .sn-stars-container .star {
  animation-duration: calc(var(--particle-base-speed) * 0.8 / max(var(--sn-music-beat-pulse-intensity, 1), 0.5)) !important;
  filter: brightness(calc(1 + var(--sn-music-beat-pulse-intensity, 0) * 0.3)) saturate(calc(1.2 + var(--sn-music-beat-pulse-intensity, 0) * 0.4));
}

.Root[style*="--sn-dynamic-genre-hue-shift"] .Root::before {
  filter: blur(60px) hue-rotate(var(--sn-dynamic-genre-hue-shift, 0deg)) brightness(calc(1 + var(--sn-music-energy, 0) * 0.1));
}
.Root[style*="--sn-dynamic-genre-hue-shift"] .sn-stars-container .star {
  filter: hue-rotate(calc(var(--sn-dynamic-genre-hue-shift, 0deg) * 0.3)) saturate(calc(1.2 + var(--sn-music-valence, 0) * 0.3));
}

.sn-stars-disabled .sn-stars-container {
  display: none;
}

.sn-stars-minimal {
  --particle-network-density: 1;
  --particle-energy-intensity: 0.4;
  --particle-base-speed: calc(var(--particle-base-speed) * 1.5);
}
.sn-stars-minimal .sn-stars-container .star:nth-child(n+3) {
  display: none;
}

.sn-stars-intense {
  --particle-network-density: 8;
  --particle-energy-intensity: 1.2;
  --particle-base-speed: calc(var(--particle-base-speed) * 0.7);
  --particle-cluster-size: 5;
  --particle-interface-influence: 1.8;
}

.interface-active, .nexus-active {
  --particle-interface-influence: 2;
  --particle-cluster-cohesion: 1.2;
}
.interface-active .sn-stars-container .star:nth-child(even), .nexus-active .sn-stars-container .star:nth-child(even) {
  animation-name: animation-pulse-interface;
}

@media (max-width: 768px) {
  .sn-stars-container {
    --particle-network-density: 2;
    --particle-base-speed: calc(var(--particle-base-speed) * 1.3);
    --particle-cluster-size: 2;
  }
  .sn-stars-container .star:nth-child(n+4) {
    display: none;
  }
}
@media (max-width: 480px) {
  .sn-stars-container {
    --particle-network-density: 1;
  }
  .sn-stars-container .star:nth-child(n+3) {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sn-stars-container .star {
    animation: animation-twinkle-dynamic calc(var(--particle-life-cycle) * 2) ease-in-out infinite !important;
  }
  .sn-stars-container .star::before, .sn-stars-container .star::after {
    animation: none !important;
    opacity: 0.3 !important;
  }
}
@media (prefers-contrast: high) {
  .sn-stars-container {
    --particle-energy-intensity: 1.5;
  }
  .sn-stars-container .star {
    background: radial-gradient(circle, rgba(var(--sn-oklab-highlight-rgb, 255, 255, 255), 0.9) 0%, rgba(var(--sn-oklab-highlight-rgb, 255, 255, 255), 0.3) 70%, transparent 100%) !important;
  }
}
@media (prefers-reduced-data: reduce) {
  .sn-stars-container {
    --particle-network-density: 1;
    --particle-base-speed: calc(var(--particle-base-speed) * 3);
  }
  .sn-stars-container .star:nth-child(n+3) {
    display: none;
  }
}
:root {
  --particle-nexus-influence: var(--particle-interface-influence);
  --particle-organic-curve: var(--particle-dynamic-curve);
}

@keyframes energy-pulse-nexus {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
  }
  20% {
    transform: translate(-50%, -50%) scale(1);
    opacity: calc(var(--particle-energy-intensity) * var(--particle-nexus-influence));
  }
  40% {
    transform: translate(-50%, -50%) scale(1.2);
    opacity: calc(var(--particle-energy-intensity) * var(--particle-nexus-influence) * 0.8);
  }
  60% {
    transform: translate(-50%, -50%) scale(0.9);
    opacity: calc(var(--particle-energy-intensity) * var(--particle-nexus-influence) * 0.6);
  }
  80% {
    transform: translate(-50%, -50%) scale(0.5);
    opacity: calc(var(--particle-energy-intensity) * var(--particle-nexus-influence) * 0.3);
  }
  100% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
  }
}
@keyframes energy-twinkle-organic {
  0%, 100% {
    opacity: calc(var(--particle-energy-intensity) * 0.6);
    transform: scale(1);
  }
  25% {
    opacity: calc(var(--particle-energy-intensity) * 0.9);
    transform: scale(1.1);
  }
  50% {
    opacity: calc(var(--particle-energy-intensity) * 0.4);
    transform: scale(0.8);
  }
  75% {
    opacity: calc(var(--particle-energy-intensity) * 0.8);
    transform: scale(1.05);
  }
}
:root {
  --interface-gap-base: 24px;
  --interface-gap-range: 6px;
  --interface-drift-range: 2px;
}

[data-layout=navigation] .main-gridContainer-gridContainer, [data-layout=constellation] .main-gridContainer-gridContainer {
  gap: calc(var(--interface-gap-base) + var(--interface-gap-range) * var(--sn-music-beat-pulse-intensity, 0));
  transition: gap 400ms var(--sn-easing-explorer, ease-out);
  transform-origin: center;
}
[data-layout=navigation] .main-gridContainer-gridContainer .main-card-card, [data-layout=constellation] .main-gridContainer-gridContainer .main-card-card,
[data-layout=navigation] .main-gridContainer-gridContainer .main-card-cardContainer,
[data-layout=constellation] .main-gridContainer-gridContainer .main-card-cardContainer {
  transform: translate3d(calc(var(--interface-drift-range) * (var(--sn-music-beat-pulse-intensity, 0) - 0.5)), calc(var(--interface-drift-range) * var(--sn-music-rhythm-phase, 0) * 0.002), 0);
  transition: transform 400ms ease-out;
}
[data-layout=navigation] .main-gridContainer-gridContainer .main-card-card:hover, [data-layout=constellation] .main-gridContainer-gridContainer .main-card-card:hover,
[data-layout=navigation] .main-gridContainer-gridContainer .main-card-cardContainer:hover,
[data-layout=constellation] .main-gridContainer-gridContainer .main-card-cardContainer:hover {
  transform: translate3d(0, 0, 0);
}

@media (prefers-reduced-motion: reduce) {
  [data-layout=navigation] .main-gridContainer-gridContainer, [data-layout=constellation] .main-gridContainer-gridContainer {
    gap: var(--interface-gap-base);
    transform: none;
    transition: none;
  }
  [data-layout=navigation] .main-card-card, [data-layout=constellation] .main-card-card,
  [data-layout=navigation] .main-card-cardContainer,
  [data-layout=constellation] .main-card-cardContainer {
    transform: none !important;
    transition: none !important;
  }
}
:root {
  --stellar-gap-base: var(--interface-gap-base);
  --stellar-gap-range: var(--interface-gap-range);
  --stellar-drift-range: var(--interface-drift-range);
}

[data-genre-active=electronic] .main-playButton-PlayButton {
  box-shadow: inset 0 0 calc(10px * 0.5) hsla(var(--genre-primary-hue-min, 240), calc(var(--genre-saturation-base, 50%) * 1.2), calc(var(--genre-brightness-base, 50%) * 1.5), calc(0.15 * 1.2)), 0 0 calc(10px * 1) hsla(var(--genre-primary-hue-min, 240), calc(var(--genre-saturation-base, 50%) * 1.3), calc(var(--genre-brightness-base, 50%) * 1.2), calc(0.4 * 1.2)), 0 0 calc(10px * 2) hsla(var(--genre-primary-hue-max, 280), calc(var(--genre-saturation-base, 50%) * 1.1), calc(var(--genre-brightness-base, 50%) * 0.9), calc(0.2 * 1.2));
  transition: box-shadow 0.4s ease-in-out;
  animation: musical-breathing var(--music-sync-breath-duration, 4s) ease-in-out infinite;
  animation: genre-electronic-pulse calc(var(--sn-anim-musical-beat-duration, 500ms) * 2) ease-in-out infinite, oklab-musical-consciousness-breathing calc(var(--sn-anim-musical-beat-duration, 500ms) * 4) ease-in-out infinite;
}
@media (prefers-reduced-motion: no-preference) {
  [data-genre-active=electronic] .main-playButton-PlayButton {
    animation: genre-glow-pulse calc(2s / var(--genre-gradient-complexity, 1)) ease-in-out infinite;
  }
}
@media (prefers-reduced-motion: reduce) {
  [data-genre-active=electronic] .main-playButton-PlayButton {
    animation: none;
  }
}
[data-genre-active=electronic] .main-trackList-trackListRow:hover {
  transform: translateX(2px);
  transition: transform 0.2s ease;
}
[data-genre-active=electronic] .main-card {
  background: linear-gradient(90deg, transparent 0%, rgba(var(--sn-accent-rgb, 128, 128, 128), 0.1) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: shimmer 2s linear infinite;
}
[data-genre-active=electronic] .main-card:hover {
  transform: scale(1.02) translateY(-2px);
  transition: transform 0.3s ease;
}

[data-genre-active=classical] .main-playButton-PlayButton {
  box-shadow: inset 0 0 calc(6px * 0.5) hsla(var(--genre-primary-hue-min, 240), calc(var(--genre-saturation-base, 50%) * 1.2), calc(var(--genre-brightness-base, 50%) * 1.5), calc(0.15 * 0.8)), 0 0 calc(6px * 1) hsla(var(--genre-primary-hue-min, 240), calc(var(--genre-saturation-base, 50%) * 1.3), calc(var(--genre-brightness-base, 50%) * 1.2), calc(0.4 * 0.8)), 0 0 calc(6px * 2) hsla(var(--genre-primary-hue-max, 280), calc(var(--genre-saturation-base, 50%) * 1.1), calc(var(--genre-brightness-base, 50%) * 0.9), calc(0.2 * 0.8));
  transition: box-shadow 0.4s ease-in-out;
  animation: genre-classical-elegance calc(var(--sn-anim-musical-phrase-duration, 8s)) ease-in-out infinite;
}
@media (prefers-reduced-motion: no-preference) {
  [data-genre-active=classical] .main-playButton-PlayButton {
    animation: genre-glow-pulse calc(2s / var(--genre-gradient-complexity, 1)) ease-in-out infinite;
  }
}
@media (prefers-reduced-motion: reduce) {
  [data-genre-active=classical] .main-playButton-PlayButton {
    animation: none;
  }
}
[data-genre-active=classical] .main-trackList-trackListRow:hover {
  backdrop-filter: blur(1px) saturate(1.1);
}

[data-genre-active=rock] .main-playButton-PlayButton {
  box-shadow: inset 0 0 calc(12px * 0.5) hsla(var(--genre-primary-hue-min, 240), calc(var(--genre-saturation-base, 50%) * 1.2), calc(var(--genre-brightness-base, 50%) * 1.5), calc(0.15 * 1.4)), 0 0 calc(12px * 1) hsla(var(--genre-primary-hue-min, 240), calc(var(--genre-saturation-base, 50%) * 1.3), calc(var(--genre-brightness-base, 50%) * 1.2), calc(0.4 * 1.4)), 0 0 calc(12px * 2) hsla(var(--genre-primary-hue-max, 280), calc(var(--genre-saturation-base, 50%) * 1.1), calc(var(--genre-brightness-base, 50%) * 0.9), calc(0.2 * 1.4));
  transition: box-shadow 0.4s ease-in-out;
  animation: genre-rock-energy calc(var(--sn-anim-musical-beat-duration, 400ms) * 1.5) cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
}
@media (prefers-reduced-motion: no-preference) {
  [data-genre-active=rock] .main-playButton-PlayButton {
    animation: genre-glow-pulse calc(2s / var(--genre-gradient-complexity, 1)) ease-in-out infinite;
  }
}
@media (prefers-reduced-motion: reduce) {
  [data-genre-active=rock] .main-playButton-PlayButton {
    animation: none;
  }
}
[data-genre-active=rock] .main-trackList-trackListRow:hover {
  transform: translateX(3px);
  transition: transform 0.15s ease;
}
[data-genre-active=rock] .main-card:hover {
  transform: scale(1.03) translateY(-3px);
  transition: transform 0.2s ease;
}

[data-genre-active=jazz] .main-playButton-PlayButton {
  box-shadow: inset 0 0 calc(8px * 0.5) hsla(var(--genre-primary-hue-min, 240), calc(var(--genre-saturation-base, 50%) * 1.2), calc(var(--genre-brightness-base, 50%) * 1.5), calc(0.15 * 0.9)), 0 0 calc(8px * 1) hsla(var(--genre-primary-hue-min, 240), calc(var(--genre-saturation-base, 50%) * 1.3), calc(var(--genre-brightness-base, 50%) * 1.2), calc(0.4 * 0.9)), 0 0 calc(8px * 2) hsla(var(--genre-primary-hue-max, 280), calc(var(--genre-saturation-base, 50%) * 1.1), calc(var(--genre-brightness-base, 50%) * 0.9), calc(0.2 * 0.9));
  transition: box-shadow 0.4s ease-in-out;
  animation: genre-jazz-sophistication calc(var(--sn-anim-musical-measure-duration, 2s) * 2) ease-in-out infinite;
}
@media (prefers-reduced-motion: no-preference) {
  [data-genre-active=jazz] .main-playButton-PlayButton {
    animation: genre-glow-pulse calc(2s / var(--genre-gradient-complexity, 1)) ease-in-out infinite;
  }
}
@media (prefers-reduced-motion: reduce) {
  [data-genre-active=jazz] .main-playButton-PlayButton {
    animation: none;
  }
}
[data-genre-active=jazz] .main-trackList-trackListRow:hover {
  filter: sepia(10%) saturate(1.1);
}

[data-genre-active=hiphop] .main-playButton-PlayButton {
  box-shadow: inset 0 0 calc(10px * 0.5) hsla(var(--genre-primary-hue-min, 240), calc(var(--genre-saturation-base, 50%) * 1.2), calc(var(--genre-brightness-base, 50%) * 1.5), calc(0.15 * 1.3)), 0 0 calc(10px * 1) hsla(var(--genre-primary-hue-min, 240), calc(var(--genre-saturation-base, 50%) * 1.3), calc(var(--genre-brightness-base, 50%) * 1.2), calc(0.4 * 1.3)), 0 0 calc(10px * 2) hsla(var(--genre-primary-hue-max, 280), calc(var(--genre-saturation-base, 50%) * 1.1), calc(var(--genre-brightness-base, 50%) * 0.9), calc(0.2 * 1.3));
  transition: box-shadow 0.4s ease-in-out;
  animation: genre-hiphop-rhythm calc(var(--sn-anim-musical-beat-duration, 300ms) * 2) cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
}
@media (prefers-reduced-motion: no-preference) {
  [data-genre-active=hiphop] .main-playButton-PlayButton {
    animation: genre-glow-pulse calc(2s / var(--genre-gradient-complexity, 1)) ease-in-out infinite;
  }
}
@media (prefers-reduced-motion: reduce) {
  [data-genre-active=hiphop] .main-playButton-PlayButton {
    animation: none;
  }
}
[data-genre-active=hiphop] .main-trackList-trackListRow:hover {
  transform: translateX(4px) scale(1.01);
  transition: transform 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

[data-genre-active=ambient] .main-playButton-PlayButton {
  box-shadow: inset 0 0 calc(16px * 0.5) hsla(var(--genre-primary-hue-min, 240), calc(var(--genre-saturation-base, 50%) * 1.2), calc(var(--genre-brightness-base, 50%) * 1.5), calc(0.15 * 0.6)), 0 0 calc(16px * 1) hsla(var(--genre-primary-hue-min, 240), calc(var(--genre-saturation-base, 50%) * 1.3), calc(var(--genre-brightness-base, 50%) * 1.2), calc(0.4 * 0.6)), 0 0 calc(16px * 2) hsla(var(--genre-primary-hue-max, 280), calc(var(--genre-saturation-base, 50%) * 1.1), calc(var(--genre-brightness-base, 50%) * 0.9), calc(0.2 * 0.6));
  transition: box-shadow 0.4s ease-in-out;
  animation: genre-ambient-flow calc(var(--sn-anim-musical-phrase-duration, 12s)) ease-in-out infinite;
}
@media (prefers-reduced-motion: no-preference) {
  [data-genre-active=ambient] .main-playButton-PlayButton {
    animation: genre-glow-pulse calc(2s / var(--genre-gradient-complexity, 1)) ease-in-out infinite;
  }
}
@media (prefers-reduced-motion: reduce) {
  [data-genre-active=ambient] .main-playButton-PlayButton {
    animation: none;
  }
}
[data-genre-active=ambient] .main-trackList-trackListRow:hover {
  backdrop-filter: blur(2px) saturate(0.9);
}
[data-genre-active=ambient] .main-card:hover {
  transform: translateY(-4px);
  transition: transform 0.5s ease;
}

[data-genre-active=folk] .main-playButton-PlayButton {
  box-shadow: inset 0 0 calc(5px * 0.5) hsla(var(--genre-primary-hue-min, 240), calc(var(--genre-saturation-base, 50%) * 1.2), calc(var(--genre-brightness-base, 50%) * 1.5), calc(0.15 * 0.7)), 0 0 calc(5px * 1) hsla(var(--genre-primary-hue-min, 240), calc(var(--genre-saturation-base, 50%) * 1.3), calc(var(--genre-brightness-base, 50%) * 1.2), calc(0.4 * 0.7)), 0 0 calc(5px * 2) hsla(var(--genre-primary-hue-max, 280), calc(var(--genre-saturation-base, 50%) * 1.1), calc(var(--genre-brightness-base, 50%) * 0.9), calc(0.2 * 0.7));
  transition: box-shadow 0.4s ease-in-out;
  animation: genre-folk-organic calc(var(--sn-anim-musical-measure-duration, 3s) * 1.5) ease-in-out infinite;
}
@media (prefers-reduced-motion: no-preference) {
  [data-genre-active=folk] .main-playButton-PlayButton {
    animation: genre-glow-pulse calc(2s / var(--genre-gradient-complexity, 1)) ease-in-out infinite;
  }
}
@media (prefers-reduced-motion: reduce) {
  [data-genre-active=folk] .main-playButton-PlayButton {
    animation: none;
  }
}
[data-genre-active=folk] .main-trackList-trackListRow:hover {
  filter: sepia(5%) brightness(1.05);
}

[data-genre-active=pop] .main-playButton-PlayButton {
  box-shadow: inset 0 0 calc(8px * 0.5) hsla(var(--genre-primary-hue-min, 240), calc(var(--genre-saturation-base, 50%) * 1.2), calc(var(--genre-brightness-base, 50%) * 1.5), calc(0.15 * 1)), 0 0 calc(8px * 1) hsla(var(--genre-primary-hue-min, 240), calc(var(--genre-saturation-base, 50%) * 1.3), calc(var(--genre-brightness-base, 50%) * 1.2), calc(0.4 * 1)), 0 0 calc(8px * 2) hsla(var(--genre-primary-hue-max, 280), calc(var(--genre-saturation-base, 50%) * 1.1), calc(var(--genre-brightness-base, 50%) * 0.9), calc(0.2 * 1));
  transition: box-shadow 0.4s ease-in-out;
  animation: genre-pop-vibrant calc(var(--sn-anim-musical-beat-duration, 500ms) * 3) ease-in-out infinite;
}
@media (prefers-reduced-motion: no-preference) {
  [data-genre-active=pop] .main-playButton-PlayButton {
    animation: genre-glow-pulse calc(2s / var(--genre-gradient-complexity, 1)) ease-in-out infinite;
  }
}
@media (prefers-reduced-motion: reduce) {
  [data-genre-active=pop] .main-playButton-PlayButton {
    animation: none;
  }
}
[data-genre-active=pop] .main-trackList-trackListRow:hover {
  filter: saturate(1.2) brightness(1.05);
}
[data-genre-active=pop] .main-card:hover {
  transform: scale(1.02) translateY(-1px);
  transition: transform 0.25s ease;
}

@media (max-width: 768px) {
  [data-genre-active] .main-card:hover,
  [data-genre-active] .main-trackList-trackListRow:hover {
    transform: none !important;
  }
  [data-genre-active] .main-playButton-PlayButton {
    box-shadow: none !important;
  }
}
.sn-performance-mode [data-genre-active] {
  animation: none !important;
}
.sn-performance-mode [data-genre-active] .main-playButton-PlayButton,
.sn-performance-mode [data-genre-active] .main-card,
.sn-performance-mode [data-genre-active] .main-trackList-trackListRow {
  animation: none !important;
  transform: none !important;
  filter: none !important;
}

@media (prefers-reduced-motion: reduce) {
  [data-genre-active] {
    animation: none !important;
    transition-duration: 0.1s !important;
  }
  [data-genre-active] .main-playButton-PlayButton,
  [data-genre-active] .main-card,
  [data-genre-active] .main-trackList-trackListRow {
    animation: none !important;
    transition-duration: 0.1s !important;
  }
  .genre-detection-indicator {
    animation: none !important;
    transition-duration: 0.1s !important;
  }
}
@media (prefers-contrast: high) {
  [data-genre-active] {
    filter: contrast(1.5) saturate(1.3) !important;
  }
  [data-genre-active] .main-playButton-PlayButton {
    box-shadow: 0 0 4px rgba(255, 255, 255, 0.8), 0 0 8px rgba(var(--genre-current-primary-rgb), 0.9) !important;
  }
}
.sn-quick-add-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(0, 0, 0, 0.2) 0%, transparent 70%);
  pointer-events: none;
}
@supports (backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px)) {
  .sn-quick-add-overlay {
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
}

.sn-quick-add-btn {
  transition: transform 150ms ease, box-shadow 150ms ease;
  transform-style: preserve-3d;
}
@media (prefers-reduced-motion: reduce) {
  .sn-quick-add-btn {
    transition: none;
  }
}
.sn-quick-add-btn:hover {
  transform: scale(1.1) translateZ(0);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
}

.sn-prune-out {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease-out;
}

:root .encore-dark-theme .encore-inverted-light-set {
  --background-highlight: var(--spice-overlay2) !important;
  --background-press: var(--spice-subtext) !important;
}
:root .x-filterBox-searchIcon {
  color: var(--spice-subtext);
}
:root .x-filterBox-filterInput {
  background-color: var(--spice-surface0);
  color: var(--spice-subtext);
}
:root .main-dropDown-dropDown {
  color: var(--spice-text);
  background-color: var(--spice-surface0);
}
:root .main-dropDown-dropDown:disabled {
  color: var(--spice-button-disabled);
}
:root .x-toggle-indicatorWrapper {
  background-color: var(--spice-surface0);
}
:root .x-toggle-indicatorWrapper .x-toggle-indicator {
  background-color: var(--spice-text);
}
:root input:checked ~ .x-toggle-indicatorWrapper,
:root input:hover:not([disabled], :active) ~ .x-toggle-indicatorWrapper {
  background-color: var(--spice-surface1);
}
:root input:checked:hover:not([disabled], :active) ~ .x-toggle-indicatorWrapper {
  background-color: var(--spice-overlay0);
}
:root select option:checked {
  color: var(--spice-text);
  font-weight: bold;
}
:root .TypeElement-mesto-type {
  color: var(--spice-subtext) !important;
}
:root .main-trackList-playingIcon {
  background-size: cover;
  padding-left: 100%;
  background-image: var(--spice-equalizer);
}
:root .view-homeShortcutsGrid-equaliser {
  background-image: var(--spice-equalizer);
  background-size: cover;
  padding-left: 35%;
}
:root .os-scrollbar-track,
:root ::-webkit-scrollbar {
  width: 0.5em;
}
:root .os-scrollbar-handle,
:root ::-webkit-scrollbar-thumb {
  background-color: var(--spice-text) !important;
  border-radius: 6px;
}
:root .GenericModal .main-duplicateTrackModal-container {
  background-color: var(--spice-card);
  color: var(--spice-subtext);
}
:root .GenericModal .main-duplicateTrackModal-container button:first-child {
  color: var(--spice-button-active);
}
:root .GenericModal .main-duplicateTrackModal-container button:first-child:hover {
  color: var(--spice-notification-error);
}
:root .GenericModal .main-duplicateTrackModal-container button:last-child > div {
  background-color: var(--spice-button);
}
:root .main-contextMenu-menuItemButton:hover,
:root .main-contextMenu-menuItemButton:not([aria-checked=true]):focus {
  color: var(--spice-subtext);
}

@layer theme.settings {
  .Root.settings,
  [data-testid=settings-view] {
    background: var(--spice-main) !important;
    color: var(--spice-text);
  }
  @container (min-width: 600px) {
    [data-testid=settings-option] {
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: center;
      padding-inline: 24px;
    }
  }
  [data-testid=settings-option] input[type=checkbox]:checked {
    accent-color: var(--spice-accent) !important;
  }
  @media (prefers-color-scheme: dark) {
    h2[data-testid=settings-section-header] {
      border-bottom: 1px solid var(--spice-subdued);
    }
  }
}

/*# sourceMappingURL=user.css.map */