/* Shared crossfade for all eight genres. */
[data-skin-art]{opacity:0!important;pointer-events:none;transition:opacity .85s!important}
[data-skin-art][data-visible=true]{opacity:1!important}
.skin-image img[data-skin-art]{position:absolute;inset:0;width:100%;height:100%}
.skin-image img[data-skin-art=synthwave]{position:relative}
body[data-skin=metal]{--bg:#111214;--panel:#1c1d20;--line:#55565b;--cyan:#e56b61;--pink:#b73632;--muted:#bbb7b5;--text:#f8f4ef}
body[data-skin=pop]{--bg:#191424;--panel:#282037;--line:#775a81;--cyan:#ffc7ad;--pink:#e894c3;--muted:#c7b8d3;--text:#fff4f7}
body[data-skin=rock]{--bg:#181615;--panel:#28231f;--line:#6b5946;--cyan:#e7b56d;--pink:#c67e51;--muted:#c0b3a6;--text:#fff1dd}
body[data-skin=synthpop]{--bg:#121226;--panel:#20203a;--line:#5d517f;--cyan:#83ece0;--pink:#c4a6f8;--muted:#b4b4d1;--text:#f3f3ff}
body[data-skin=beach]{--bg:#edf6f3;--panel:#fffaf0;--line:#9cbdb6;--cyan:#167c7d;--pink:#ba7940;--muted:#516b69;--text:#173f40}
body:is([data-skin=metal],[data-skin=pop],[data-skin=rock],[data-skin=synthpop],[data-skin=beach],[data-skin=dance],[data-skin=cinematic]){background:var(--bg);color:var(--text)}
body:is([data-skin=metal],[data-skin=pop],[data-skin=rock],[data-skin=synthpop],[data-skin=beach],[data-skin=dance],[data-skin=cinematic]) :is(.topbar,.player,.library,footer){background:var(--panel);border-color:var(--line)}
body:is([data-skin=metal],[data-skin=pop],[data-skin=rock],[data-skin=synthpop],[data-skin=beach],[data-skin=dance],[data-skin=cinematic]) :is(input:not([type=range]),textarea,select,.track,button){background:var(--bg);color:var(--text);border-color:var(--line)}
body:is([data-skin=metal],[data-skin=pop],[data-skin=rock],[data-skin=synthpop],[data-skin=beach],[data-skin=dance],[data-skin=cinematic]) :is(.track.active,button:hover,.transport .play){background:color-mix(in srgb,var(--cyan) 15%,var(--panel));border-color:var(--cyan)}
body:is([data-skin=metal],[data-skin=pop],[data-skin=rock],[data-skin=synthpop],[data-skin=beach],[data-skin=dance],[data-skin=cinematic]) .brand span{color:var(--text)}
body:is([data-skin=metal],[data-skin=pop],[data-skin=rock],[data-skin=synthpop],[data-skin=beach],[data-skin=dance],[data-skin=cinematic]) .brand em{color:var(--cyan)}
body[data-skin=metal] :is(h1,h2){font-family:Impact,'Arial Narrow',sans-serif;letter-spacing:1px}
body[data-skin=rock] :is(h1,h2){font-family:Georgia,serif}
body[data-skin=beach] .hero-scene{object-position:center 55%}
@media(prefers-reduced-motion:reduce){[data-skin-art]{transition:none!important}}

body[data-skin=dance]{--bg:#111323;--panel:#1b2034;--line:#4f617d;--cyan:#72e9e2;--pink:#db9af8;--muted:#b6c3d5;--text:#f4f6ff}

body[data-skin=cinematic]{--bg:#09121b;--panel:#111e2a;--line:#3a4a56;--cyan:#d7b878;--pink:#a57464;--muted:#acb8be;--text:#f5efdf}
body[data-skin=cinematic] :is(h1,h2){font-family:Georgia,serif;letter-spacing:.3px}