.listening{padding:85px 6% 70px;border-bottom:1px solid var(--line);background:radial-gradient(ellipse at 10% 30%,#16242955,transparent 65%)}
.player-layout{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(320px,1fr);gap:40px;align-items:start}
.player-main{min-width:0}.player-screen{position:relative;width:100%;min-width:0;aspect-ratio:16/9;min-height:200px;background:#060809;isolation:isolate;border:1px solid #344148}
#youtube-player{width:100%;height:100%;display:block;border:0}.player-cover{position:absolute;inset:0;padding:0;width:100%;height:100%;overflow:hidden}.player-cover img{width:100%;height:100%;object-fit:cover;opacity:.48;transition:opacity .3s}.player-cover:hover img{opacity:.7}.cover-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:68px;height:68px;display:grid;place-items:center;border:1px solid #e3ffeb88;background:#0a171cb0;border-radius:50%;color:var(--acid);font-size:23px;padding-left:3px}.cover-label{position:absolute;bottom:20px;left:0;right:0;font:11px var(--cond);letter-spacing:4px}
.now-playing{display:flex;align-items:center;gap:17px;padding:23px 0 18px}.now-playing>img{width:58px;height:68px;object-fit:cover;object-position:center 18%;border:1px solid #ffffff20}.now-playing>div{min-width:0;flex:1}.now-playing .eyebrow{font-size:9px;letter-spacing:1.5px;margin:0 0 5px}.now-playing h3{margin:0 0 6px;font-size:23px;font-weight:500;line-height:1.35;overflow-wrap:anywhere}.now-playing #now-artist{font-size:11px;color:#b6bfc2;margin:0}.now-playing>button{font-size:26px;padding:12px}.now-playing>button[aria-pressed=true]{color:var(--acid)}
.player-timeline{display:flex;align-items:center;gap:12px;font:12px var(--cond);font-variant-numeric:tabular-nums;color:#b9c3c4}.player-timeline span{min-width:28px}.player-timeline span:last-child{text-align:right}.player-timeline input{flex:1;min-width:0}.listening input[type=range]{accent-color:var(--acid);height:22px;cursor:pointer;margin:0}.listening input:disabled{opacity:.35;cursor:default}
.transport{display:flex;align-items:center;justify-content:center;gap:22px;padding:15px 0 18px}.transport button{display:grid;place-items:center;width:42px;height:42px;padding:10px;position:relative;border-radius:50%;transition:background .15s,color .15s}.transport button:hover{background:#ffffff12}.transport svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.transport .transport-play{width:56px;height:56px;background:var(--acid);color:#0b1713;font-size:20px;padding:0}.transport .transport-play:hover{background:#e0ffe4}.mode-button{color:#89989b}.mode-button[aria-pressed=true],#player-repeat[data-mode=all],#player-repeat[data-mode=one]{color:var(--acid)}.mode-button[aria-pressed=true]:after,#player-repeat[data-mode=all]:after,#player-repeat[data-mode=one]:after{content:'';position:absolute;width:3px;height:3px;background:currentColor;border-radius:50%;bottom:0}.mode-button small{position:absolute;right:3px;top:1px;font-size:9px;background:var(--bg);padding:0 2px}.transport button:disabled{opacity:.35}
.playback-footer{display:flex;align-items:center;gap:18px;border-top:1px solid var(--line);padding-top:15px;color:#a5b1b4;font-size:10px;min-height:38px}.playback-footer #playback-status{flex:1}.playback-footer a{white-space:nowrap}.volume-control{display:flex;align-items:center;gap:8px;font:10px var(--cond);letter-spacing:1px}.volume-control input{width:65px}.playback-error{font-size:11px;color:#f0c6a3;line-height:1.8;margin:12px 0 0}
.queue-panel{border:1px solid #344148;background:#101619;min-width:0}.queue-heading{display:flex;align-items:center;justify-content:space-between;padding:22px 23px 16px}.queue-heading .eyebrow{font-size:10px;letter-spacing:2px;margin:0 0 6px}.queue-heading h3{font-size:18px;font-weight:500;margin:0}.queue-heading h3 span{font:17px var(--cond);margin-left:8px;color:var(--acid)}.queue-heading>button{font-size:10px;color:#99aaaf;padding:10px 0 10px 10px}.queue-tools{display:flex;gap:9px;padding:0 23px 17px}.queue-tools select{min-width:0;flex:1;background:#172025;color:var(--ink);border:1px solid #3c4a50;padding:10px;font:12px var(--sans);border-radius:0}.queue-tools>button{background:var(--acid);color:#10251a;padding:8px 17px;font-size:12px}.queue-summary{display:flex;justify-content:space-between;padding:12px 23px;border-block:1px solid var(--line);font-size:10px;color:#99aaaf}.queue-summary #queue-position{font:13px var(--cond);letter-spacing:1px;color:var(--acid)}
.play-queue{list-style:none;padding:0;margin:0;max-height:445px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#4b6164 #0d1519}.queue-track{display:flex;align-items:center;gap:2px;border-bottom:1px solid #263236;min-width:0}.queue-track.is-current{background:#c5f5cc0d;box-shadow:inset 2px 0 var(--acid)}.queue-select{display:flex;align-items:center;gap:12px;padding:11px 10px 11px 16px;text-align:left;flex:1;min-width:0}.queue-select:hover{background:#ffffff05}.queue-number{font:12px var(--cond);width:17px;flex-shrink:0;color:#84979d}.queue-track.is-current .queue-number{color:var(--acid)}.queue-select img{width:35px;height:44px;object-fit:cover;object-position:center 18%;flex-shrink:0}.queue-label{min-width:0;display:flex;flex-direction:column;gap:5px}.queue-label strong{font-weight:400;font-size:12px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.queue-label small{font-size:10px;color:#99aaaf}.queue-edit{display:flex;align-items:center;padding-right:8px}.queue-edit button{font-size:13px;width:25px;height:36px;color:#91a1a5;padding:0}.queue-edit button:hover{color:var(--acid);background:#ffffff08}.queue-edit button:disabled{opacity:.2;cursor:default}.queue-edit .queue-remove{font-size:17px}.queue-panel #queue-empty{padding:20px;font-size:12px;color:var(--muted);line-height:1.8}
.collection-play{display:flex;gap:24px;align-items:center;padding:19px 0 6px}.collection-play button{font-size:11px;color:var(--acid);padding:9px 0}.collection-play button span{margin-left:10px}.collection-play button:disabled{color:var(--muted)}.track-card-actions{display:flex;gap:12px;margin-top:12px}.track-card-actions button{font-size:10px;padding:6px 0;color:var(--acid)}.track-card-actions button+button{color:#99aaaf}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(min-width:1500px){.play-queue{max-height:540px}}
@media(max-width:1000px){.player-layout{gap:24px;grid-template-columns:minmax(0,1.35fr) minmax(300px,1fr)}.listening{padding-inline:5%}.transport{gap:13px}.queue-heading{padding-inline:16px}.queue-tools{padding-inline:16px}.queue-summary{padding-inline:16px}.queue-select{gap:9px;padding-left:10px}.playback-footer{gap:10px}}
@media(max-width:760px){.listening{padding:55px 6%}.listening .section-title{margin-bottom:26px}.listening .section-num{display:none}.player-layout{grid-template-columns:1fr;gap:27px}.now-playing h3{font-size:22px}.transport{gap:22px}.queue-panel{width:100%}.play-queue{max-height:405px}.queue-select{padding:12px 12px 12px 16px}.queue-edit button{width:29px;min-height:44px}.queue-label strong{font-size:13px}.queue-tools select{padding:12px}.queue-tools>button{padding:10px 20px}.volume-control{display:none}.player-screen{min-height:200px}.header nav{gap:16px!important;font-size:10px!important;letter-spacing:0!important}.brand img{width:125px!important}.collection-play{gap:22px}.playback-footer{font-size:10px}}
@media(prefers-reduced-motion:reduce){.player-cover img,.transport button{transition:none}}