/* A small local CD deck; the portfolio keeps its existing scenery and loop. */
.music-player{position:fixed;right:max(24px,env(safe-area-inset-right));bottom:max(24px,env(safe-area-inset-bottom));z-index:30;width:326px;max-width:calc(100vw - 24px);color:#edf1ff;font-family:var(--mono);filter:drop-shadow(0 12px 24px #0005)}
.music-player[hidden],.music-library[hidden]{display:none}
.music-deck{position:relative;display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;padding:15px 14px;background:linear-gradient(135deg,#182039,#101529 65%);border:1px solid #8f7cf661;border-radius:6px;box-shadow:inset 0 1px 0 #c5ceff14,0 0 20px #8f7cf60d;isolation:isolate}
.music-deck::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0 3px,#00000012 3px 4px);z-index:-1}
.music-disc{position:relative;width:96px;height:96px;align-self:center;border-radius:50%;background:#070b1b;box-shadow:0 0 0 1px #b5c5f733,0 0 16px #8f7cf626,inset 0 0 0 4px #060914}
.music-disc-face{position:absolute;inset:3px;border:3px solid #bac9ed80;border-radius:50%;overflow:hidden;background:#4e365c;animation:music-disc-spin 12s linear infinite;animation-play-state:paused;mask-image:radial-gradient(circle,transparent 0 7px,#000 7.5px)}
.music-disc-face img{display:block;width:100%;height:100%;object-fit:cover}
.music-disc-shine{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 15deg,transparent 0 32deg,#bbffff25 37deg,#f7cdff2c 53deg,transparent 63deg 210deg,#d6edff29 235deg,transparent 251deg);box-shadow:inset 0 0 0 1px #e9eaff5e,inset 0 0 0 5px #a4b5cc2b}
.music-disc-hub{position:absolute;left:50%;top:50%;width:22px;height:22px;transform:translate(-50%,-50%);border:5px solid #c5cce389;box-shadow:0 0 0 1px #bdeaff77;border-radius:50%;background:#080c20}
.music-information{min-width:0}
.music-station{display:flex;align-items:center;gap:6px;color:var(--cyan);font-size:13px;letter-spacing:1.3px;white-space:nowrap}
.music-station>span:last-child{margin-left:auto;color:#909fbc;font-size:13px;letter-spacing:.8px}
.music-led{width:4px;height:4px;background:#7f8fa9;flex:none}
#music-title{font-family:"Segoe UI",Arial,sans-serif;font-size:15px;font-weight:600;line-height:1.25;margin:8px 0 3px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:#edf1ff}
#music-artist{font-size:13px;line-height:1.6;margin:0;color:#a4adc7;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.music-controls{display:flex;gap:2px;margin-top:6px}
.music-controls button{display:grid;place-items:center;width:42px;height:40px;min-height:40px;padding:9px;flex:none;border:1px solid transparent;border-radius:3px;background:transparent;color:#cad5eb;cursor:pointer;touch-action:manipulation}
.music-controls button:hover,.music-controls button:focus-visible{color:var(--cyan);background:#75eaf310;border-color:#75eaf344}
.music-controls svg{width:19px;height:19px;fill:currentColor;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
#music-list-toggle{margin-left:auto;color:#9babca}
#music-list-toggle svg,.music-pause-icon{fill:none}
#music-toggle{color:#92f3df;background:#75eaf30d;border-color:#75eaf333}
.music-controls .music-pause-icon{display:none}
.music-player.playback-requested .music-play-icon{display:none}
.music-player.playback-requested .music-pause-icon{display:block}
.music-player.is-playing .music-disc-face{animation-play-state:running}
.music-player.is-playing .music-led{background:#8aead3;box-shadow:0 0 6px #8aead380}
.music-deck-footer{grid-column:1/-1;display:flex;justify-content:space-between;gap:10px;font-size:13px;letter-spacing:1px;color:#b5bdd5;line-height:1.4}
.music-player.is-playing #music-state{color:#8aead3}
.music-library{position:absolute;bottom:calc(100% + 8px);right:0;width:min(360px,calc(100vw - 24px));padding:16px 14px 12px;background:#11172bfA;border:1px solid #8f7cf66b;border-radius:6px;box-shadow:0 0 26px #0004;max-height:calc(100svh - 190px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:#455a7a #11172b}
.music-library-heading{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 10px;font-size:13px;letter-spacing:1px;color:#9fe8ec;padding-bottom:12px;border-bottom:1px solid #8094b52c}
.music-library-heading>span:last-child{color:#929bb9;white-space:nowrap}
#music-tracks{padding:0;margin:8px 0 10px;list-style:none}
.music-track{display:flex;align-items:center;gap:11px;width:100%;min-height:44px;border:0;border-left:2px solid transparent;padding:8px;color:#afb9d0;background:transparent;text-align:left;cursor:pointer;font:13px/1.4 var(--mono)}
.music-track>span:first-child{font-size:13px;color:#b5bdd5}
.music-track>span:nth-child(2){flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.music-track>span:last-child{font-size:13px;letter-spacing:.5px;color:#8391ac}
.music-track:hover{background:#91a0ff0c;color:#edf1ff}
.music-track[aria-current=true]{background:#75eaf30c;border-left-color:#75eaf3;color:#a5f4e9}
.music-track[aria-current=true]>span:first-child{color:#75eaf3}
.music-timeline{display:flex;align-items:center;gap:8px;margin-top:12px;color:#9eabc4;font-size:13px}
.music-timeline>span{min-width:30px;text-align:center}
.music-player input[type=range]{width:100%;min-width:0;accent-color:#75eaf3;cursor:pointer;height:22px;touch-action:pan-x}
.music-player input[type=range]:disabled{cursor:default;opacity:.5}
.music-player input:focus-visible{outline:2px solid #75eaf3;outline-offset:3px;border-radius:3px}
.music-settings{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px;border-top:1px solid #8094b526;padding-top:8px;font-size:13px;letter-spacing:.6px;color:#99a8c1}
#music-volume{width:72px;flex:none}
.music-settings a{margin-left:auto;white-space:normal;color:#c6b7f4;padding:10px 0}
.music-settings a:hover{color:#75eaf3}
.music-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}
body.arcade-transition .music-player{visibility:hidden;pointer-events:none}
@keyframes music-disc-spin{to{transform:rotate(360deg)}}
@media(max-width:760px){.music-player{right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));width:288px}.music-deck{grid-template-columns:72px minmax(0,1fr);gap:10px;padding:12px 10px}.music-disc{width:72px;height:72px}.music-station{font-size:13px;letter-spacing:1px}.music-station>span:last-child{font-size:13px}#music-title{font-size:13px;margin-top:6px}#music-artist{font-size:13px}.music-controls{margin-top:4px;gap:0}.music-controls button{width:42px;height:44px;padding:12px}.music-deck-footer{left:11px;right:11px;bottom:7px;font-size:13px}.music-library{max-height:calc(100svh - 160px)}}
@media(prefers-reduced-motion:reduce){.music-disc-face{animation:none}}
.animation-paused .music-disc-face{animation-play-state:paused}
/* Phones: a compact bar (disc + controls) so the deck never hides the content it plays over. */
@media(max-width:560px){.music-player{width:auto;max-width:calc(100vw - 24px)}.music-deck{grid-template-columns:44px auto;align-items:center;gap:8px;padding:8px 8px 8px 8px}.music-disc{width:44px;height:44px}.music-disc-hub{width:14px;height:14px;border-width:3px}.music-station,#music-title,#music-artist,.music-deck-footer{display:none}.music-controls{margin-top:0}.music-controls button{width:40px;height:40px;min-height:40px;padding:10px}}

/* The disc is the tuck button: one click folds the radio down to just the spinning disc in the corner, the next click
   pops the controls back out of it (music-player.js). The animation is a view transition scoped to the radio:
   html.radio-vt names the disc and the deck only for its duration, so page transitions are untouched. */
button.music-disc{display:block;padding:0;border:0;color:inherit;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
button.music-disc:focus-visible{outline:2px solid #75eaf3;outline-offset:4px}
button.music-disc:hover .music-disc-hub,button.music-disc:focus-visible .music-disc-hub{border-color:#75eaf3cc;box-shadow:0 0 0 1px #75eaf3,0 0 12px #75eaf3aa}
.music-player.is-collapsed{width:auto}
.music-player.is-collapsed .music-library,.music-player.is-collapsed .music-information,.music-player.is-collapsed .music-deck-footer{display:none}
.music-player.is-collapsed .music-deck{display:block;padding:0;background:none;border-color:transparent;box-shadow:none}
.music-player.is-collapsed .music-deck::after{display:none}
.music-player.is-collapsed .music-disc{box-shadow:0 0 0 1px #b5c5f744,0 0 26px #8f7cf666,0 10px 24px #000b,inset 0 0 0 4px #060914}
.music-player.is-collapsed.is-playing .music-disc{box-shadow:0 0 0 1px #75eaf366,0 0 30px #75eaf355,0 10px 24px #000b,inset 0 0 0 4px #060914}
html.radio-vt .music-disc{view-transition-name:radio-disc}
html.radio-vt .music-deck{view-transition-name:radio-deck}
html.radio-vt::view-transition{background:none}
html.radio-vt::view-transition-old(root){display:none}
html.radio-vt::view-transition-new(root){animation:none}
html.radio-vt::view-transition-group(radio-deck),html.radio-vt::view-transition-group(radio-disc){animation-duration:.42s;animation-timing-function:cubic-bezier(.2,.9,.3,1.12)}

/* Waiting on the browser sound rule (music-player.js): the footer line says a click, tap or key brings the sound. Phones
   fold the deck to a bar without that line, so it comes back for as long as the deck waits. */
.music-player[data-playback=waiting-for-interaction] #music-state{color:#9fe8ec}
@media(max-width:560px){.music-player[data-playback=waiting-for-interaction]:not(.is-collapsed) .music-deck{padding-bottom:8px}.music-player[data-playback=waiting-for-interaction]:not(.is-collapsed) .music-deck-footer{display:flex;justify-content:center;left:8px;right:8px;bottom:7px;font-size:13px}.music-player[data-playback=waiting-for-interaction]:not(.is-collapsed) #music-track-number{display:none}}
/* The radio rides along on every page. Like the home page (styles.css), the other pages end with room under the footer,
   so their last links and the footer scroll clear of the deck parked in the corner. */
@media(min-width:561px){body.page .site-footer{padding-bottom:190px}}
@media(max-width:560px){body.page .site-footer{padding-bottom:96px}}

/* Footer text can wrap without overlapping the playback controls. */
#music-track-number{flex:none;white-space:nowrap}