/* The cover colors the entire listening space; illumination drifts very slowly. */
@property --track-primary-color{syntax:'<color>';inherits:true;initial-value:#605274}
@property --track-secondary-color{syntax:'<color>';inherits:true;initial-value:#344458}
:root{transition:--track-primary-color 1.8s ease,--track-secondary-color 1.8s ease}
:root[data-artwork=active]{--accent:var(--track-accent);--accent-rgb:var(--track-accent-rgb);--ribbon-light:var(--track-accent);--ribbon-mid:var(--track-primary-color);--ribbon-dark:var(--track-secondary-color);--hero-a:var(--track-top);--hero-b:var(--track-middle)}
body{isolation:isolate;background:#100e14;background-image:none}.app-atmosphere{position:fixed;inset:0;pointer-events:none;z-index:-1;overflow:hidden}.app-atmosphere-layer{position:absolute;inset:0;opacity:0;transition:opacity 1.8s ease}.app-atmosphere-layer.visible{opacity:1}
.app-atmosphere:before,.app-atmosphere:after,.art-atmosphere:before,.art-atmosphere:after{content:'';position:absolute;inset:-30%;z-index:2;pointer-events:none;background:radial-gradient(ellipse at 25% 45%,color-mix(in srgb,var(--track-primary-color) 26%,transparent),transparent 53%);filter:blur(65px);opacity:.45;animation:light-flow-a 48s ease-in-out infinite alternate;will-change:transform}
.app-atmosphere:after,.art-atmosphere:after{background:radial-gradient(ellipse at 78% 60%,color-mix(in srgb,var(--track-secondary-color) 35%,transparent),transparent 49%);opacity:.4;animation:light-flow-b 61s ease-in-out infinite alternate}
@keyframes light-flow-a{0%{transform:translate(-5%,3%) scale(.95)}50%{transform:translate(8%,-6%) scale(1.09)}100%{transform:translate(17%,9%) scale(1.03)}}
@keyframes light-flow-b{0%{transform:translate(6%,-3%) scale(1.03)}50%{transform:translate(-8%,9%) scale(.94)}100%{transform:translate(-16%,-7%) scale(1.14)}}
.atmosphere-layer img{animation-duration:54s;opacity:.19}.atmosphere-layer{transition-duration:1.8s}.sidebar.glass{background:#1a1822a8}.mode-card{background:#17131d4d;backdrop-filter:blur(15px)}.search-box{background:#17131d59}.bottom-note{background:#17131d45}.page-bottom{color:#ffffff50}
.player.glass{background:linear-gradient(115deg,var(--track-bar,#292232) 0%,var(--track-bar-secondary,#262030) 100%);border-color:#ffffff26;box-shadow:0 12px 44px #0006,inset 0 1px 1px #ffffff29;transition:background 1.8s ease,border-color .35s}
.player.glass:before{background:radial-gradient(ellipse at var(--glass-x,25%) 0,#ffffff17,transparent 57%),linear-gradient(120deg,#ffffff08,transparent 50%,#ffffff08)}
.player .now-meta>span{color:#ffffffa3}.player .icon-button{color:#ffffffe0}.player .icon-button.active{color:var(--accent)}.player .play-button{background:var(--accent);color:#141018;border-color:#ffffff23;box-shadow:0 3px 16px #0003,inset 0 1px 1px #ffffff35}.player .play-button:hover{background:#f6edff}.player .seek-row span{color:#ffffffad}.player .player-rating-label{color:#ffffff80}.player .iem-rating button{color:#ffffff42}.player .iem-rating button.selected{color:var(--accent)}
.player .transport{position:absolute;left:50%;transform:translateX(-50%);width:clamp(230px,26vw,380px)}.player .player-rating{margin-left:auto}.player .player-tools{margin-left:0}.player .now-meta{flex:none}.player .transport-buttons{gap:17px}
.full-dock{background:linear-gradient(110deg,color-mix(in srgb,var(--track-bar,#292232) 68%,transparent),color-mix(in srgb,var(--track-bar-secondary,#262030) 64%,transparent));border-color:#ffffff30}
.full-dock .full-controls{display:block;position:relative;gap:0}.full-controls>button{position:absolute;top:50%;translate:0 -50%;margin:0}.full-controls>[data-action=toggle]{left:50%;translate:-50% -50%}.full-controls>[data-action=previous]{left:calc(50% - 84px)}.full-controls>[data-action=next]{left:calc(50% + 50px)}.full-controls>[data-action=like]{left:calc(50% - 140px)}.full-controls>[data-action=eq]{left:calc(50% + 106px)}
.full-controls>.play-button{background:var(--art-accent);color:#17131c;box-shadow:0 4px 22px #0004,inset 0 1px 1px #ffffff50;border-color:#ffffff32}.full-controls>.play-button:hover{background:white}.full-controls>.icon-button{color:#ffffffe6}.full-controls>.icon-button.active{color:var(--art-accent)}.full-info .iem-rating button.selected{filter:drop-shadow(0 0 5px #ffffff15)}.full-dock .waveform-caption{color:#ffffffa0}.full-dock .full-times{color:#ffffffc7}
/* Keep the hit area constant while the visible rail and thumb expand. */
.player input[type=range],.full-volume input[type=range]{height:18px;margin:0;background:transparent;--range-fill:0%;--rail-size:3px;--thumb-opacity:0;--thumb-size:12px;cursor:pointer}
.player input[type=range]:hover,.player input[type=range]:focus-visible,.player input[type=range].is-dragging,.full-volume input[type=range]:hover,.full-volume input[type=range]:focus-visible,.full-volume input[type=range].is-dragging{--rail-size:6px;--thumb-opacity:1}
.player input[type=range]::-webkit-slider-runnable-track,.full-volume input[type=range]::-webkit-slider-runnable-track{height:var(--rail-size);border-radius:9px;background:linear-gradient(to right,var(--accent) 0 var(--range-fill),#ffffff26 var(--range-fill) 100%);transition:height .18s ease}
.player input[type=range]::-webkit-slider-thumb,.full-volume input[type=range]::-webkit-slider-thumb{width:var(--thumb-size);height:var(--thumb-size);margin-top:calc((var(--rail-size) - var(--thumb-size))/2);border:0;border-radius:50%;background:var(--accent);opacity:var(--thumb-opacity);box-shadow:0 2px 8px #0003;transition:opacity .15s ease,margin-top .18s ease,transform .15s}
.player input[type=range]::-moz-range-track,.full-volume input[type=range]::-moz-range-track{height:var(--rail-size);border-radius:9px;background:#ffffff26;transition:height .18s ease}
.player input[type=range]::-moz-range-progress,.full-volume input[type=range]::-moz-range-progress{height:var(--rail-size);border-radius:9px;background:var(--accent)}
.player input[type=range]::-moz-range-thumb,.full-volume input[type=range]::-moz-range-thumb{width:var(--thumb-size);height:var(--thumb-size);border:0;background:var(--accent);opacity:var(--thumb-opacity);transition:opacity .15s ease}
.full-volume input[type=range]{--accent:var(--art-accent)}.player input[type=range].is-dragging::-webkit-slider-thumb,.full-volume input[type=range].is-dragging::-webkit-slider-thumb{transform:scale(1.12)}
.player input[type=range]:focus-visible,.full-volume input[type=range]:focus-visible{outline:none}
.waveform-wrap canvas{transition:filter .2s}.waveform-wrap:hover canvas,.waveform-wrap.dragging canvas{filter:brightness(1.16)}.full-dock .waveform-wrap input{height:58px;opacity:0}.full-dock .waveform-wrap input:focus-visible{opacity:0;outline:none}.waveform-wrap:focus-within{outline:1px solid #ffffff40;outline-offset:5px;border-radius:6px}
.waveform-wrap:focus-within{outline:none}
@media(max-width:1100px){.player .transport{width:230px}.player .transport-buttons{gap:10px}.player .now-meta{width:115px}.player .player-tools{gap:4px}.player .player-tools input{width:45px}}
@media(max-width:800px){.player .transport{width:215px}.player .now-meta{width:80px}.full-controls .full-volume{right:0}.full-volume input{width:65px}.full-controls>[data-action=like]{left:calc(50% - 128px)}.full-controls>[data-action=eq]{left:calc(50% + 94px)}}
@media(max-width:540px){.player .transport{width:91px}.player .transport-buttons{gap:0}.player .now-meta{width:60px}.player .player-rating{margin-left:auto}.player .seek-row{position:fixed;left:13px;right:13px;bottom:2px;transform:translateX(-50%);width:calc(100vw - 42px);margin-left:50%;height:18px}.player .transport .seek-row{left:0;right:auto;bottom:-16px}.player .player-tools{margin-left:0}.full-controls>[data-action=previous]{left:calc(50% - 73px)}.full-controls>[data-action=next]{left:calc(50% + 44px)}.full-controls>[data-action=like]{left:calc(50% - 124px)}.full-controls>[data-action=eq]{left:calc(50% + 95px)}.full-dock .waveform-wrap input{height:48px}}
@media(max-height:700px) and (min-width:801px){.full-dock .waveform-wrap input{height:42px}}
@media(hover:none){.player input[type=range],.full-volume input[type=range]{--rail-size:4px;--thumb-opacity:1;--thumb-size:11px}}
@media(prefers-reduced-motion:reduce){:root{transition:none}.app-atmosphere:before,.app-atmosphere:after,.art-atmosphere:before,.art-atmosphere:after{animation:none;will-change:auto}*,*:before,*:after{animation:none!important;transition:none!important}}