/* shell/base.css */
@media (min-width:1000px) {
.cd-player { left:0; top:calc(50% - 20px); transform:rotate(-9deg); }
}

/* retro.css */
.cd-player { width:clamp(180px,19vw,235px); }
.cd-player:hover .walkman-photo { transform:rotate(7deg); }
.object-dialog[data-room="music"]{ background:#e8e6df; }
.object-dialog[data-room="music"] { width:min(620px,calc(100vw - 24px)); }
.object-dialog[data-room="music"] .dialog-head > div{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.retro-player { --shell:#cbd3df; --edge:#738399; --light:#fcffff; --panel:#050f31; --glow:#82d8ff; --ink:#1a2639; padding:13px; border:2px solid var(--edge); border-radius:25px 25px 55px 25px; background:linear-gradient(115deg,var(--light),var(--shell) 26%,var(--light) 28%,var(--shell) 31%,var(--shell) 75%,var(--light)); color:var(--ink); box-shadow:inset 0 0 0 3px #fff7,inset 0 -6px 9px #0003,0 15px 25px #15202a28; transition:background .3s,border-radius .3s; }
.player-display{ font-family:var(--digital); }
.player-display { padding:14px 18px 8px; border:4px ridge var(--edge); border-radius:20px 20px 30px 8px; background:radial-gradient(ellipse at 30% 0%,#ffffff20,transparent 65%),var(--panel); color:var(--glow); box-shadow:inset 0 3px 14px #0009; text-shadow:0 0 9px color-mix(in srgb,var(--glow) 40%,transparent); }
.track-title { margin:0 0 8px; font-size:18px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.retro-player label { font-size:14px; }
.retro-player input[type="range"] { accent-color:var(--glow); }
.retro-player button,.skin-controls select { border:2px outset var(--light); border-radius:8px; padding:5px 10px; background:linear-gradient(var(--light),var(--shell)); color:var(--ink); cursor:pointer; font-size:15px; }
.retro-player button:active,.retro-player button[aria-pressed="true"] { border-style:inset; background:var(--shell); }
.player-transport #audio-play { width:58px; border-radius:50%; font-size:22px; }
.player-transport #audio-shuffle { margin-left:auto; }
.audio-volume { display:flex; align-items:center; gap:12px; margin:12px 5px; }
.audio-volume input { flex:1; }
.skin-controls { display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; padding:8px 5px 10px; }
.skin-controls select { max-width:180px; margin-left:5px; }
.skin-credit { text-align:center; font-size:13px; line-height:1.5; margin:16px 10px 2px; }
.retro-player[data-skin="darkstar"] { --shell:#24292a; --light:#626c6e; --edge:#090e10; --panel:#080e0c; --glow:#9bff72; --ink:#e5f1e5; border-radius:50px 12px 50px 12px; padding:20px 18px; background:repeating-linear-gradient(130deg,#0000 0 22px,#0003 23px 24px),linear-gradient(120deg,#5b6666,#182022 48%,#424e50); box-shadow:inset 0 0 0 5px #0f1518,0 14px 28px #0004; }
[data-skin="darkstar"] .player-display { border-radius:10px 40px 10px 40px; border-width:7px; }
.retro-player[data-skin="mint"] { --shell:#a9c7aa; --light:#f0f1c9; --edge:#426257; --panel:#142d26; --glow:#d3f393; --ink:#1f382b; border-radius:4px; padding:14px; background:linear-gradient(#f0efd1 0 36px,#a9c7aa 37px); box-shadow:6px 7px 0 #344d3845,inset 0 0 0 2px #fff8; }
[data-skin="mint"] .player-display { border-radius:0; border-width:3px; }
.spotify-link { margin-left:auto; font-size:14px; text-underline-offset:3px; }
.spotify-embed { min-height:352px; border:2px inset var(--edge); border-radius:12px; overflow:hidden; background:var(--panel); }
.spotify-embed iframe { display:block; width:100%; height:352px; border:0; }
#audio-progress { display:block; width:100%; height:5px; margin:16px 0 8px; accent-color:var(--glow); }
@media (max-width:999px) {
.cd-player { transform:rotate(-9deg); }
}
@media (max-width:650px) {
.retro-player { padding:10px; }
.retro-player[data-skin="darkstar"] { padding:16px 10px; }
.player-display { padding:12px; }
.skin-controls label { width:100%; }
}

/* desk-v2.css */
.stage .cd-player { transform:rotate(-8deg); }

/* skins.css */
.object-dialog[data-room="music"] { width:min(710px,calc(100vw - 20px)); background:transparent; border:0; box-shadow:none; overflow:auto; }
[data-room="music"] .dialog-inner { padding:18px; }
[data-room="music"] .dialog-head { margin-bottom:10px; }
[data-room="music"] .dialog-close { background:#e5e8eddc; }
#music-room { position:relative; }
#retro-player { container-type:inline-size; position:relative; width:100%; max-width:600px; margin:0 auto; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; color:var(--readout-ink); filter:drop-shadow(0 16px 15px #07120e65); transition:aspect-ratio .3s; }
#retro-player[data-skin="darkstar"] { max-width:465px; }
#retro-player[data-skin="reactor"] { max-width:385px; }
#retro-player[data-skin="classic"] { border:2px outset #dedede; }
#skin-art { position:absolute; inset:0; width:100%; height:100%; display:block; pointer-events:none; }
#player-display { position:absolute; display:flex; flex-direction:column; align-items:stretch; justify-content:center; min-width:0; padding:var(--display-pad); border:0; border-radius:0; background:transparent; box-shadow:none; text-align:center; text-shadow:0 0 5px #7ea0cc50; color:var(--readout-ink); font-family:var(--readout-font); line-height:var(--readout-line); letter-spacing:var(--readout-spacing); overflow:hidden; }
#audio-status { flex:none; font:600 calc(var(--readout-size) * .62)/1 var(--readout-font); letter-spacing:max(.04em,var(--readout-spacing)); text-transform:var(--readout-transform); white-space:nowrap; }
#audio-time { flex:none; font:400 var(--clock-size)/.94 var(--readout-font); font-variant-numeric:tabular-nums; letter-spacing:var(--readout-spacing); white-space:nowrap; }
#track-title { flex:none; width:100%; min-width:0; margin:.18em 0 0; font:400 var(--readout-size)/var(--readout-line) var(--readout-font); letter-spacing:var(--readout-spacing); text-transform:var(--readout-transform); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#audio-progress { flex:none; width:100%; height:2px; margin:.3em 0 0; accent-color:var(--readout-ink); }
[data-skin="darkstar"] #audio-status,[data-skin="darkstar"] #audio-progress { display:none; }
[data-skin="darkstar"] #player-display { justify-content:center; }
[data-skin="quicksilver"] #audio-status { display:none; }
[data-skin="quicksilver"] #audio-progress { margin-top:.12em; }
[data-skin="reactor"] #audio-status { opacity:.8; }
[data-skin="series9"] #track-title { font-weight:600; }
[data-skin="classic"] #audio-status { font-weight:400; }
#retro-player .skin-hit { position:absolute; padding:0; border:0; border-radius:3px; background:transparent; color:inherit; min-height:0; cursor:pointer; }
.skin-hit > span { opacity:0; }
#retro-player .skin-hit:hover { background:#edf8ff20; box-shadow:inset 0 0 0 1px #d8ecff80; }
#retro-player .skin-hit:active { background:#03182750; }
#retro-player .skin-hit:disabled { background:#1114; }
#retro-player[data-playing="true"][data-skin="reactor"] #audio-play { background:#314724; }
#retro-player[data-playing="true"][data-skin="reactor"] #audio-play span { opacity:1; font-size:0; }
#retro-player[data-playing="true"][data-skin="reactor"] #audio-play span::after { content:'Ⅱ'; font-size:18px; }
.music-toolbar { display:flex; align-items:center; justify-content:center; gap:9px; width:fit-content; max-width:100%; margin:20px auto 0; padding:9px 12px; background:#e0e2e7ed; border:2px outset #f4f4f6; box-shadow:0 4px 12px #14231d30; color:#23262a; font:12px Tahoma,sans-serif; }
.music-toolbar select { min-width:0; max-width:270px; padding:4px; font:12px Tahoma,sans-serif; background:white; color:#26292e; border:2px inset #ddd; }
.music-toolbar button { border:2px outset #eee; background:#dddfe3; min-height:28px; padding:0 7px; cursor:pointer; }
.music-source { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:15px; margin:12px auto; color:#fff; font:12px/1.5 Tahoma,sans-serif; text-shadow:0 1px 3px #000; }
.music-source button { padding:0; background:none; border:0; color:inherit; text-decoration:underline; min-height:25px; font:inherit; cursor:pointer; }
.spotify-host { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); opacity:0; pointer-events:none; }
.spotify-host[data-expanded="true"] { position:relative; width:100%; height:352px; clip-path:none; opacity:1; pointer-events:auto; margin:10px 0; border-radius:12px; }
.spotify-host iframe { width:100%; height:352px; border:0; }
#music-room .media-message,#skin-error { font:13px/1.5 Tahoma,sans-serif; color:white; text-shadow:0 1px 3px #000; text-align:center; }
#music-room .skin-credit { color:#e2e7e5; text-shadow:0 1px 3px #000; font:11px Tahoma,sans-serif; margin-top:12px; }
@media(max-width:650px) {
[data-room="music"] .dialog-inner { padding:8px; }
#retro-player { max-width:min(100%,600px); }
.music-toolbar { gap:6px; padding:8px; }
.music-toolbar select { max-width:220px; }
}
@media(max-height:760px) {
#retro-player[data-skin="darkstar"] { max-width:350px; }
#retro-player[data-skin="reactor"] { max-width:300px; }
}

/* interactions.css */
.music-toolbar { gap:8px; border:0; padding:0; box-shadow:none; background:none; margin-top:14px; }
.music-toolbar button { font:14px Tahoma,sans-serif; min-height:38px; padding:5px 14px; color:#26292e; background:linear-gradient(#f9fafb,#bfc5cb); border:1px solid #727980; border-radius:4px; box-shadow:inset 1px 1px 0 #fff,0 2px 4px #0003; }
.music-toolbar button:active { background:#bfc5cb; box-shadow:inset 1px 1px 3px #313b4b50; }
.music-toolbar button:disabled { opacity:.45; cursor:default; }
#music-room .skin-credit { margin-top:6px; opacity:.65; }
.music-source { margin-bottom:5px; }

#voice-memos { max-width:460px; margin:14px auto 0; padding:10px 16px; color:#252b31; background:linear-gradient(120deg,#e5e9ed,#c3c9cf); border:1px solid #a5aeb7; border-radius:8px; box-shadow:0 6px 18px #0003; font:13px/1.4 Tahoma,Arial,sans-serif; }
#voice-memos .memo-controls { display:flex; align-items:center; justify-content:center; gap:12px; padding:3px 0; }
#voice-memos button { border:0; background:transparent; color:inherit; cursor:pointer; font:inherit; }
#voice-memos button:disabled { opacity:.4; cursor:default; }
#voice-memos #memo-record,#voice-memos #memo-stop { width:34px; height:34px; padding:0; border:1px solid #a5adb5; border-radius:50%; background:#ecedef; color:#a32323; font-size:23px; line-height:1; }
#voice-memos #memo-stop { font-size:15px; }
#memo-time { color:#4b545d; font:14px monospace; font-variant-numeric:tabular-nums; }
#memo-status { margin:8px 0; font-size:12px; }
#memo-status:empty { display:none; }
#memo-list { list-style:none; margin:0; padding:0; max-height:270px; overflow:auto; }
#memo-list li { position:relative; display:grid; grid-template-columns:30px minmax(0,1fr) 30px; align-items:center; gap:7px; padding:9px 0; border-top:1px solid #a9b1b955; }
#memo-list input { grid-column:2; grid-row:1; width:100%; min-width:0; box-sizing:border-box; padding:5px 0; color:#303840; background:transparent; border:0; border-bottom:1px solid transparent; border-radius:0; font:13px Tahoma,Arial,sans-serif; text-overflow:ellipsis; }
#memo-list input:focus { outline:none; border-bottom-color:#697988; }
#memo-list .memo-play { grid-column:1; grid-row:1; padding:0; width:30px; height:32px; font-size:14px; }
#voice-memos .memo-actions { grid-column:3; grid-row:1; }
#voice-memos summary { display:flex; align-items:center; justify-content:center; list-style:none; cursor:pointer; width:30px; height:32px; font-size:20px; }
#voice-memos summary::-webkit-details-marker { display:none; }
#voice-memos .memo-actions[open] { grid-column:1 / -1; display:grid; grid-template-columns:1fr 30px; }
#voice-memos .memo-actions[open] summary { grid-column:2; }
#voice-memos .memo-actions[open] > div { grid-column:1 / -1; display:flex; justify-content:flex-end; gap:18px; padding:8px 4px 0; }
#voice-memos .memo-actions:not([open]) > div { display:none; }
#voice-memos a { color:#3e5062; font-size:12px; }
#voice-memos .memo-actions button { font-size:12px; padding:0; }

/* A little more depth, with the original skin artwork and controls intact. */
#retro-player { filter:drop-shadow(0 2px 1px #07120e55) drop-shadow(0 18px 18px #07120e70); }
#player-display { text-shadow:0 0 7px color-mix(in srgb,var(--readout-ink) 35%,transparent); }
#audio-time { -webkit-font-smoothing:antialiased; }
#track-title { opacity:.9; }
[data-skin="quicksilver"] #player-display {
  border-radius:3px 12px 12px 3px;
  background:linear-gradient(180deg,#03152638,#03152612 48%,#d9efff0a);
  box-shadow:inset 0 2px 4px #06122138,inset 0 -1px 0 #deefff30;
}
#audio-progress {
  appearance:none; border:0; border-radius:2px; overflow:hidden;
  background:#030b164d; box-shadow:0 1px 0 #ffffff15;
}
#audio-progress::-webkit-progress-bar { background:#030b164d; border-radius:2px; }
#audio-progress::-webkit-progress-value { background:var(--readout-ink); border-radius:2px; box-shadow:0 0 4px var(--readout-ink); }
#audio-progress::-moz-progress-bar { background:var(--readout-ink); border-radius:2px; }
#retro-player .skin-hit { transition:background .12s,box-shadow .12s; -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
#retro-player .skin-hit:hover:not(:disabled) { background:#edf8ff12; box-shadow:inset 0 1px 2px #eff9ff70,inset 0 -1px 2px #07172c55; }
#retro-player .skin-hit:active:not(:disabled) { background:#03182738; box-shadow:inset 0 2px 5px #020b1c80; }
#retro-player .skin-hit:focus-visible { outline:2px solid var(--readout-ink); outline-offset:3px; }
#retro-player .skin-hit:disabled { background:transparent; box-shadow:none; cursor:default; }
#retro-player[data-skin="quicksilver"] #audio-play { border-radius:50%; }
.music-toolbar { gap:4px; margin-top:8px; }
#music-room #memo-toggle[aria-expanded="true"]::before { filter:drop-shadow(0 2px 3px #0a162a99) brightness(1.15); transform:translateY(2px); }
#music-room .media-message:empty { display:none; }
#voice-memos {
  margin-top:10px; padding:12px 18px; border-color:#939da7; border-radius:12px;
  background:repeating-linear-gradient(0deg,#ffffff0b 0 1px,#00000003 1px 2px),linear-gradient(115deg,#edf0f2,#c4cbd1 48%,#dce1e5);
  box-shadow:inset 0 1px 0 #fff,inset 0 -1px 2px #55616c55,0 3px 4px #07120e25,0 12px 24px #07120e30;
}
#voice-memos .memo-controls { gap:14px; padding:4px 0 6px; }
#voice-memos #memo-record,#voice-memos #memo-stop {
  width:38px; height:38px; border-color:#8f989f;
  background:radial-gradient(ellipse at 40% 20%,#fff,#e2e6e9 65%,#b1b9c0);
  box-shadow:inset 0 1px 1px #fff,0 2px 3px #26344140;
  text-shadow:0 1px 0 #fff8;
}
#voice-memos #memo-record:active,#voice-memos #memo-stop:active { box-shadow:inset 0 2px 4px #26344155; }
#memo-time { padding:6px 10px; border:1px solid #9ba7a5; border-radius:3px; background:#b8c6bb; color:#35483e; box-shadow:inset 0 1px 3px #263b3540,0 1px 0 #fff9; letter-spacing:.08em; }
#voice-memos button:focus-visible,#voice-memos summary:focus-visible { outline:2px solid #405f76; outline-offset:3px; }
#memo-list li { border-top-color:#8e9aa34d; }
#memo-list input:focus { background:#ffffff26; }
@media(prefers-reduced-motion:reduce) {
  #retro-player,#retro-player .skin-hit { transition:none; }
}

/* The novelty skins keep their own materials, proportions, and tiny readouts. */
#retro-player[data-skin="radio"] { max-width:500px; }
#retro-player[data-skin="treasure"] { max-width:min(383px,calc((100dvh - 180px) * .782)); }
#retro-player[data-skin="ducky"] { max-width:min(440px,calc((100dvh - 180px) * 1.052)); }
#retro-player[data-skin="zen"] { max-width:550px; }
:is([data-skin="radio"],[data-skin="treasure"],[data-skin="davinci"]) #track-title { white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
:is([data-skin="radio"],[data-skin="treasure"],[data-skin="davinci"]) .skin-hit { border-radius:50%; }
:is([data-skin="ducky"],[data-skin="zen"]) #player-display { text-shadow:none; }
:is([data-skin="ducky"],[data-skin="zen"]) #audio-status,
:is([data-skin="ducky"],[data-skin="zen"]) #audio-progress { display:none; }
:is([data-skin="ducky"],[data-skin="zen"]) #track-title { order:-1; margin:0 0 .2em; }
[data-skin="radio"] #player-display { border-radius:50%; background:#061515; }
[data-skin="radio"] #audio-status { display:none; }

[data-skin="ducky"] #audio-time { align-self:flex-start; width:40%; margin-left:13%; }
#retro-player[data-skin="headspace"] { max-width:min(420px,calc((100dvh - 180px) * .868)); }
#retro-player[data-skin="hardboiled"] { max-width:min(500px,calc((100dvh - 180px) * 1.115)); }
[data-skin="headspace"] #track-title { white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
[data-skin="headspace"] .skin-hit { border-radius:50%; }
[data-skin="hardboiled"] #audio-status,[data-skin="hardboiled"] #audio-progress { display:none; }
[data-skin="hardboiled"] #player-display { align-items:flex-start; text-align:left; text-shadow:0 0 3px #ff5c3040; }

/* The desk player remains a working object after the listening room closes. */
.stage .cd-player .music-open { display:block; width:100%; margin:0; padding:0; border:0; background:none; color:inherit; cursor:grab; }
.stage .cd-player .music-open:focus-visible { outline:2px solid #ffdf90; outline-offset:4px; border-radius:12px; }

/* Playback keeps the same skin and controls when the listening room closes. */
#music-room .music-toolbar { position:absolute; z-index:2; top:-18px; right:0; margin:0; }
#music-room #retro-player { width:min(100%,calc((100dvh - 240px) * var(--skin-ratio))); }
.music-skin-picker { display:flex; justify-content:center; margin-top:12px; }
#music-skin { max-width:100%; min-height:44px; padding:6px 28px 6px 10px; border:2px outset #eee; border-radius:3px; background:#d9dde1; color:#20262d; font:13px Tahoma,Verdana,sans-serif; cursor:pointer; }
#music-skin:focus-visible { outline:2px solid #ffe5a8; outline-offset:3px; }
#music-dock { position:fixed; z-index:50000; inset:auto max(14px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) auto; width:min(310px,calc(100vw - 28px)); margin:0; padding:0; border:0; background:transparent; filter:drop-shadow(0 10px 16px #0009); }
#music-dock[hidden] { display:none; }
#music-dock:has(#retro-player:is([data-skin="darkstar"],[data-skin="treasure"],[data-skin="ducky"],[data-skin="headspace"])) { width:min(205px,calc(100vw - 28px)); }
#music-dock #retro-player { width:100%; max-width:none; margin:0; }
#music-dock-expand { position:absolute; z-index:2; top:-15px; right:-7px; display:grid; place-items:center; width:38px; height:38px; border:1px solid #aeb9c6; border-radius:50%; background:#233344; color:#fff; box-shadow:0 2px 7px #0008; font:22px/1 Tahoma,sans-serif; cursor:pointer; }
#music-dock-expand:focus-visible { outline:2px solid #ffe5a8; outline-offset:3px; }
.music-site-view { position:fixed; z-index:40000; inset:0; width:100%; height:100%; border:0; background:#26231f; }
@media(max-width:650px) {
  #music-dock { width:min(220px,calc(100vw - 28px)); }
  #music-dock:has(#retro-player:is([data-skin="darkstar"],[data-skin="treasure"],[data-skin="ducky"],[data-skin="headspace"])) { width:min(160px,calc(100vw - 28px)); }
}