/* Keep the artwork intact. Live controls sit directly over controls drawn in the SVG. */
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#1e1e1e}
body{display:grid;place-items:center;color:#f6f2ff;font-family:Kedebideri,Arial,sans-serif}
.station{position:relative;width:min(100vw,130.048svh,1280px);aspect-ratio:1082/832;container-type:inline-size;isolation:isolate;overflow:hidden;background:#262626}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.design-art{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none;z-index:0}
.session-controls{position:absolute;z-index:2;left:0;top:0;right:auto;bottom:auto;width:100%;height:100%;pointer-events:none}
.session-controls select{position:absolute;left:23.8%;width:14.1%;height:3.55%;padding:0 1.2%;pointer-events:auto;appearance:none;border:0;border-radius:0;background:transparent;color:#111;font:clamp(10px,1.35cqw,16px) Arial,sans-serif;outline-offset:1px;cursor:pointer}
#duration{top:25.7%}#screensaver{top:30.8%;width:14.1%;text-overflow:ellipsis}
.player{position:absolute;z-index:2;left:2.55%;top:53.9%;width:35.5%;height:25.4%;margin:0;pointer-events:none}
.player::before{content:"";position:absolute;z-index:1;left:4.2%;top:6%;width:91%;height:38%;background:#121212;pointer-events:none}
.player::after{content:"";position:absolute;z-index:5;left:16%;top:39.2%;width:4.5%;height:4.5%;background:#121212;pointer-events:none}
.track-picker{position:absolute;z-index:2;left:11%;top:21%;width:55%;height:20%;padding:0;border:0;background:transparent;cursor:pointer;pointer-events:auto}
.track-picker:focus-visible{outline:2px solid #fff;outline-offset:-2px}
.track-display{display:flex;position:absolute;z-index:2;left:11%;top:21%;width:55%;height:20%;flex-direction:column;align-items:stretch;justify-content:center;overflow:hidden;background:#121212;color:#f2ed4f;text-align:left;font:clamp(9px,1cqw,13px)/1.2 Arial,sans-serif;pointer-events:none}
#music-name,#music-ticker{display:block;width:100%;max-width:100%;overflow:hidden;white-space:nowrap}
#music-name{color:#f2ed4f}
#music-ticker{color:#39ff14;font-size:1.25em;line-height:1;letter-spacing:0;transform:translateY(-.5em)}
#music-ticker .marquee-copy{padding-right:.28em}
#music-ticker .marquee-content{animation-name:track-marquee-reverse}
@keyframes track-marquee-reverse{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.marquee-line{padding-inline:3%}
.marquee-content{display:flex;width:max-content;white-space:nowrap;will-change:transform}
.marquee-copy{display:block;flex:none;width:max-content;padding-right:2em}
.marquee-copy:nth-child(2){visibility:hidden}.station[data-state="playing"] .marquee-copy:nth-child(2){visibility:visible}
.marquee-content{animation:track-marquee var(--marquee-duration,10s) linear infinite;animation-play-state:paused}
.station[data-state="playing"] .marquee-content{animation-play-state:running}
.station[data-state="ready"] .marquee-content{animation-name:none;transform:translateX(0)}
.station[data-state="ready"] #music-ticker .marquee-content{animation-name:none;transform:translateX(0)}
@keyframes track-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* The original static meter is masked and replaced with playback-reactive bars. */
.music-meter{position:absolute;z-index:2;left:68.3%;top:15%;width:23.8%;height:23.5%;display:flex;align-items:flex-end;justify-content:space-between;gap:0;background:#121212;pointer-events:none;overflow:hidden}
.music-meter span{display:block;flex:0 0 16.4%;height:var(--rest-height);background:#0000ff;transform-origin:bottom;will-change:height}
.music-meter span:nth-child(1){--rest-height:61%}
.music-meter span:nth-child(2){--rest-height:36%}
.music-meter span:nth-child(3){--rest-height:83%}
.music-meter span:nth-child(4){--rest-height:83%}
.music-meter span:nth-child(1){--low-height:53%;--high-height:69%}
.music-meter span:nth-child(2){--low-height:28%;--high-height:44%}
.music-meter span:nth-child(3){--low-height:75%;--high-height:91%}
.music-meter span:nth-child(4){--low-height:75%;--high-height:91%}
.station[data-state="playing"] .music-meter span:nth-child(1){animation:meter-one 2.3s ease-in-out -0.4s infinite alternate}
.station[data-state="playing"] .music-meter span:nth-child(2){animation:meter-two 2.7s ease-in-out -1.6s infinite alternate}
.station[data-state="playing"] .music-meter span:nth-child(3){animation:meter-three 2.2s ease-in-out -1s infinite alternate}
.station[data-state="playing"] .music-meter span:nth-child(4){animation:meter-four 2.9s ease-in-out -2.2s infinite alternate}
@keyframes meter-one{from{height:var(--low-height)}to{height:var(--high-height)}}
@keyframes meter-two{from{height:var(--low-height)}to{height:var(--high-height)}}
@keyframes meter-three{from{height:var(--low-height)}to{height:var(--high-height)}}
@keyframes meter-four{from{height:var(--low-height)}to{height:var(--high-height)}}
.transport{position:absolute;z-index:3;left:4.3%;top:53%;width:91.3%;height:19.8%;display:grid;grid-template-columns:repeat(5,1fr);gap:0;pointer-events:auto}
.transport::before{content:"";position:absolute;z-index:0;inset:0;background:#5F645F;pointer-events:none}
.transport button{position:relative;z-index:1;display:grid;place-items:center;appearance:none;min-width:0;padding:0;border:0;border-radius:0;background:none!important;color:transparent;cursor:pointer;outline-offset:1px;transition:none}
.transport button>.button-unpressed-art{display:block;width:100%!important;height:100%!important;object-fit:fill;pointer-events:none}
.transport button>.button-pressed-art{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:fill;opacity:0;pointer-events:none}
.transport button:active>.button-pressed-art,.transport button[aria-pressed="true"]>.button-pressed-art{opacity:1}
.transport button:active>.button-unpressed-art,.transport button[aria-pressed="true"]>.button-unpressed-art{opacity:0}
.transport:active button[aria-pressed="true"]:not(:active)>.button-pressed-art{opacity:0}
.transport:active button[aria-pressed="true"]:not(:active)>.button-unpressed-art{opacity:1}
.transport #help::after{content:"Start";position:absolute;left:45%;top:50%;transform:translateY(-50%);color:#111;font:400 clamp(9px,1.05cqw,13px)/1 Arial,sans-serif;white-space:nowrap;pointer-events:none}
.transport #help:active::after{display:none}
.transport button:disabled{cursor:default;opacity:1!important;filter:none!important}
.transport button:focus-visible,.start-menu-hotspot:focus-visible{outline:2px solid #fff}
#music-upload{position:absolute;left:-10000px;width:1px;height:1px;opacity:0}
#progress{position:absolute;left:5.3%;top:80.6%;width:89.5%;height:7.2%;overflow:hidden;background:#151515;border:1px solid #777;pointer-events:none}
#progress-fill{width:0;height:100%;background:#2828ff;transition:width .15s linear}
#volume{position:absolute;z-index:4;left:15.45%;top:76.55%;width:10.1%;height:2.1%;margin:0;appearance:none;background:transparent;cursor:pointer}
#volume::-webkit-slider-runnable-track{height:100%;background:transparent;border:0}
#volume::-webkit-slider-thumb{-webkit-appearance:none;width:1.15cqw;height:1.6cqw;max-height:16px;min-height:8px;margin-top:0;border:1px solid #24152d;border-radius:0;background:linear-gradient(90deg,#fff 0 24%,#f12fe9 24% 100%);box-shadow:0 0 0 1px #fff}
#volume::-moz-range-track{height:100%;background:transparent;border:0}
#volume::-moz-range-thumb{width:1.15cqw;height:1.6cqw;max-height:16px;min-height:8px;border:1px solid #24152d;border-radius:0;background:linear-gradient(90deg,#fff 0 24%,#f12fe9 24% 100%);box-shadow:0 0 0 1px #fff}
.orb-workspace{position:absolute;z-index:1;left:44%;top:21.4%;width:50%}
.orb{position:relative;left:auto;top:auto;width:100%;aspect-ratio:1;border-radius:50%;overflow:hidden;background:#05050d;box-shadow:0 0 0 2px #ff9dff66,0 0 38px #ff9dff35,inset 0 0 50px #000}
.orb video{width:100%;height:100%;display:block;object-fit:cover;filter:brightness(.87);transition:filter .8s}
.orb .glass{position:absolute;inset:0;border-radius:50%;pointer-events:none;background:radial-gradient(ellipse at 28% 18%,#ffffff12,transparent 42%),radial-gradient(circle at 50% 40%,transparent 51%,#0006 88%,#000a 100%);box-shadow:inset 0 0 35px #0008}
.intention-form{position:absolute;left:8%;top:50%;width:84%;transform:translateY(-50%);text-align:center;z-index:3}
.intention-entry{display:flex;align-items:stretch;background:#11121edb;border:1px solid #c4b8ff;border-radius:4px;box-shadow:inset 1px 1px 2px #000b,0 4px 18px #0006;transition:border-color .2s,box-shadow .2s}
.intention-entry:focus-within{border-color:#fff;box-shadow:0 0 18px #dd9dff73}
#words{display:block;min-width:0;flex:1;resize:none;border:0;background:transparent;color:#fff;padding:max(0px,calc((4.5cqw - 1.4em)/2 + .45cqw)) 1cqw max(0px,calc((4.5cqw - 1.4em)/2 - .45cqw));font:400 clamp(14px,1.55cqw,19px)/1.4 Kedebideri,Arial,sans-serif;min-height:4.5cqw;max-height:8cqw;outline:none;scrollbar-width:thin}
#words::placeholder{color:rgba(255,255,255,.42);opacity:1}#words:focus-visible{outline:none}
#send{display:flex;align-items:center;justify-content:center;gap:.1em;width:auto;min-width:5.8cqw;padding:0 .6cqw;border:0;border-left:1px solid #c4b8ff70;color:#000;text-shadow:none;background:#302447;font:400 clamp(13px,1.4cqw,17px) Kedebideri,Arial,sans-serif;white-space:nowrap}
#send:hover:not(:disabled){background:#594276}#send:disabled{opacity:1;color:#000}
.send-arrow{position:relative;display:inline-block;flex:0 0 1.5em;width:1.5em;height:1.5em;overflow:hidden}
.send-arrow img{position:absolute;left:-.54em;top:-1.2em;width:2.51em;height:auto;max-width:none}
#enter-hint{display:inline-block;margin-top:.7cqw;padding:.25cqw .5cqw;color:#fff;font:clamp(10px,1cqw,13px) Kedebideri,Arial,sans-serif;text-shadow:0 1px 5px #000;background:#17141dcc;border-radius:3px}
#save-error{font:12px/1.4 Arial;color:#ffe2d5;background:#261820;padding:6px;margin-top:6px}#save-error:not([hidden]){display:block}
#releases{position:absolute;inset:0;pointer-events:none;z-index:4}.release-window{position:absolute;inset:0;pointer-events:none}
.collection-access{display:contents}.archive-launch{position:absolute;z-index:3;left:87%;top:83.7%;width:10.5%;height:10%;padding:0;border:0;background:transparent;box-shadow:none;opacity:0;font-size:0;cursor:pointer}.archive-launch:focus-visible{opacity:1;outline:3px solid #fff;outline-offset:2px;background:#0004}
.station[data-state="finished"] .orb video{filter:brightness(.65)}#video-error{position:absolute;z-index:5;left:44%;top:83%;width:50%;font:14px/1.4 Kedebideri,Arial,sans-serif;background:#201c28;padding:8px}
#archive-dialog{z-index:20}.widget-menu{z-index:20}
@media(max-width:740px){
 html,body{height:auto;min-height:100%;overflow:auto}body{display:block;padding:0}
 .station{width:100vw;aspect-ratio:1082/832;margin:0 auto;overflow:hidden}
 .session-controls select{font-size:2.2cqw}#screensaver{width:14.1%}
 .orb-workspace{left:44%;top:21.4%;width:50%}
 #words{font-size:2.2cqw}#send{font-size:2cqw}#enter-hint{font-size:1.6cqw}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
.track-details{width:min(360px,calc(100vw - 36px));padding:0;border:2px solid;border-color:#fff #555 #555 #fff;background:#c6c6c6;color:#111;box-shadow:5px 6px 0 #0008;font:14px Arial,sans-serif}
.track-details::backdrop{background:#0505119c}
.track-details form{display:grid;gap:9px;padding:16px}
.track-details h2{margin:-16px -16px 5px;padding:9px 12px;background:#25148d;color:#fff;font-size:16px;font-weight:600}
.track-details label{font-weight:600}
.track-details input{min-width:0;padding:8px;border:1px solid #777;background:#fff;color:#111;font:14px Arial,sans-serif}
.track-details-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:5px}
.track-details button{padding:7px 12px;border:2px solid;border-color:#fff #666 #666 #fff;border-radius:0;background:#c6c6c6;color:#111;font:600 13px Arial,sans-serif}
.track-details button:active{border-color:#666 #fff #fff #666}
.track-library{width:min(450px,calc(100vw - 32px));max-width:none;max-height:calc(100vh - 32px);padding:0;border:2px solid;border-color:#fff #555 #555 #fff;background:#d7d5dd;color:#17151c;box-shadow:7px 8px 0 #0009;font:15px/1.45 Arial,sans-serif}
.track-library::backdrop{background:#070711b8}
.track-library header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;background:linear-gradient(100deg,#25148d,#176cc0);color:#fff}
.track-library h2{margin:0;font-size:18px;font-weight:600}
.track-library header button,.track-library-actions button,.track-remove{padding:7px 11px;border:2px solid;border-color:#fff #666 #666 #fff;border-radius:0;background:#c6c6c6;color:#111;font:600 13px Arial,sans-serif;cursor:pointer}
.track-library>p{margin:12px 16px;color:#332c3e}
.track-library #track-list{display:grid;gap:6px;margin:0 16px;max-height:min(42vh,330px);overflow:auto}
.track-row{display:flex;gap:6px;align-items:stretch}
.track-choice{flex:1;min-width:0;text-align:left;padding:9px 11px;border:1px solid #81788c;background:#f5f1fa;color:#241c32;font:14px/1.35 Arial,sans-serif;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;cursor:pointer}
.track-choice[aria-pressed="true"]{border:2px solid #25148d;background:#e6ddf5;font-weight:700}
.track-remove{flex:none;font-weight:400}
.track-library-actions{display:flex;justify-content:flex-end;gap:8px;margin:14px 16px}
#track-library-status{min-height:1.4em;font-size:13px}
.track-library button:disabled{opacity:.5;cursor:default}
/* Use Janna's supplied folder art as the complete, clickable Downloads control. */
.archive-launch{left:85.5%;top:83.2%;width:14.1%;height:10.8%;opacity:1;color:transparent;font-size:0;background:transparent;border:0;box-shadow:none;overflow:visible;display:block}
.archive-launch .downloads-folder-art{display:block;width:100%;height:100%;object-fit:fill;pointer-events:none}
.archive-launch:focus-visible{outline:2px solid #fff;outline-offset:1px;background:#0004;border-radius:2px}