:root[data-theme=dark]{--color-drawer-bg: #161616;--color-drawer-border: rgba(255, 255, 255, .07);--color-drawer-link: rgba(255, 255, 255, .55);--color-drawer-link-hover-bg: rgba(255, 255, 255, .06);--color-drawer-link-hover: rgba(255, 255, 255, .9);--color-drawer-link-active-bg: rgba(255, 255, 255, .08);--color-drawer-link-active: #E3EAFF;--color-drawer-close: rgba(255, 255, 255, .45);--color-drawer-close-hover: rgba(255, 255, 255, .9);--color-overlay: rgba(0, 0, 0, .6);--color-text-heading: #E3EAFF;--color-tab-active: #C8D0FF;--color-separator: #888888;--color-text-muted: #B2B2B2;--color-bg: #060708;--color-input-bg: #060708;--color-header-bg: #161616;--color-border: rgba(255, 255, 255, .08);--color-border-input: #2A2A2A;--color-border-input-focus: #444444;--color-text: rgba(255, 255, 255, .7);--color-text-placeholder: #555555;--color-card-bg: #060708;--color-card-border: #222222;--color-card-title: #E3EAFF;--color-card-band: #E8E8E8;--color-card-meta: #8C8C8C;--color-card-separator: #393A3C;--color-card-hover-glow: rgba(255, 255, 255, .55);--color-star: #F8F9FA;--color-genre-card-bg: #17181A;--color-genre-card-border: #222222;--color-genre-card-cover-bg: #212224;--color-genre-card-name: #E3EAFF}:root[data-theme=light]{--color-drawer-bg: #F1F1FF;--color-drawer-border: rgba(0, 0, 0, .08);--color-drawer-link: rgba(0, 0, 0, .5);--color-drawer-link-hover-bg: rgba(0, 0, 0, .05);--color-drawer-link-hover: rgba(0, 0, 0, .9);--color-drawer-link-active-bg: rgba(26, 26, 46, .1);--color-drawer-link-active: #1A1A2E;--color-drawer-close: rgba(0, 0, 0, .35);--color-drawer-close-hover: rgba(0, 0, 0, .8);--color-overlay: rgba(0, 0, 0, .35);--color-text-heading: #1A1A2E;--color-tab-active: #1A1A2E;--color-separator: rgba(0, 0, 0, .2);--color-bg: #E6E6F2;--color-input-bg: #E6E6F2;--color-header-bg: #F1F1FF;--color-border: rgba(0, 0, 0, .08);--color-border-input: rgba(0, 0, 0, .15);--color-border-input-focus: rgba(0, 0, 0, .35);--color-text: rgba(0, 0, 0, .75);--color-text-muted: #5A5A5A;--color-text-placeholder: rgba(0, 0, 0, .35);--color-card-bg: #E6E6F2;--color-card-border: rgba(0, 0, 0, .1);--color-card-title: #1A1A2E;--color-card-band: #2A2A2A;--color-card-meta: #5A5A5A;--color-card-separator: rgba(0, 0, 0, .2);--color-card-hover-glow: rgba(0, 0, 0, 0);--color-star: #1A1A2E;--color-genre-card-bg: #EAEAF5;--color-genre-card-border: rgba(0, 0, 0, .1);--color-genre-card-cover-bg: #D8D8EC;--color-genre-card-name: #1A1A2E}:root[data-theme=pink]{--color-drawer-bg: #FFD7EF;--color-drawer-border: rgba(0, 0, 0, .08);--color-drawer-link: rgba(60, 20, 40, .55);--color-drawer-link-hover-bg: rgba(60, 20, 40, .06);--color-drawer-link-hover: rgba(60, 20, 40, .9);--color-drawer-link-active-bg: rgba(60, 20, 40, .1);--color-drawer-link-active: #3C1428;--color-drawer-close: rgba(60, 20, 40, .35);--color-drawer-close-hover: rgba(60, 20, 40, .8);--color-overlay: rgba(0, 0, 0, .3);--color-text-heading: #3C1428;--color-tab-active: #A0305A;--color-separator: rgba(160, 48, 90, .25);--color-text-muted: #9A5070;--color-bg: #FFE2EF;--color-input-bg: #FFE2EF;--color-header-bg: #FFD7EF;--color-border: rgba(0, 0, 0, .08);--color-border-input: rgba(0, 0, 0, .15);--color-border-input-focus: rgba(0, 0, 0, .3);--color-text: rgba(60, 20, 40, .75);--color-text-placeholder: rgba(60, 20, 40, .3);--color-card-bg: #FFE2EF;--color-card-hover-bg: #FFD7EF;--color-card-border: rgba(0, 0, 0, .1);--color-card-title: #3C1428;--color-card-band: #4A1E30;--color-card-meta: #9A5070;--color-card-separator: rgba(0, 0, 0, .15);--color-card-hover-glow: rgba(255, 100, 160, .2);--color-star: #3C1428;--color-genre-card-bg: #FFCCE6;--color-genre-card-border: rgba(0, 0, 0, .1);--color-genre-card-cover-bg: #FFB8DA;--color-genre-card-name: #3C1428}@media(prefers-color-scheme:dark){:root:not([data-theme]){--color-bg: #0B0D10}}@media(prefers-color-scheme:light){:root:not([data-theme]){--color-bg: #F5F5F5}}:root{--font-family-base: Cinzel, serif;--font-family-heading: Cinzel, serif;--font-family-body: Inter, sans-serif;--font-size-xs: .75rem;--font-size-sm: .875rem;--font-size-md: 1rem;--font-size-lg: 1.125rem;--font-size-xl: 1.25rem;--font-size-2xl: 1.5rem;--font-size-3xl: 2rem;--font-size-4xl: 2.375rem;--font-size-5xl: 3.375rem;--line-height-tight: 1.2;--line-height-base: 1.5;--line-height-loose: 1.75;--font-weight-regular: 400;--font-weight-medium: 500;--font-weight-bold: 700;--radius-sm: 4px;--radius-md: 6px;--radius-lg: 16px;--radius-full: 50%;--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--spacing-2xl: 3rem}*,*:before,*:after{box-sizing:border-box}input,button,textarea,select{appearance:none;-webkit-appearance:none;border-radius:0;font-family:inherit}body{background-color:var(--color-bg);font-family:var(--font-family-base);font-size:var(--font-size-md);line-height:var(--line-height-base);margin:0;min-height:100vh;display:flex;flex-direction:column}app-root{display:flex;flex-direction:column;flex:1}main,router-outlet+*{flex:1}.container{max-width:90rem;width:100%;margin:0 auto;padding:4.125rem clamp(1rem,4.86vw,4.375rem) 6rem}