/* Clear portable CD player. A single audio element drives every case. */
.player-chassis { display: contents; }
.cd-mechanism { display: none; }
.hardware[data-style=cd], .listener .hardware[data-style=cd] {
  --case: #dbe3df;
  --ink: #25352e;
  color-scheme: light;
  color: var(--ink);
  width: 100%; max-width: 640px; margin-inline: auto; padding: 0;
  background: none; border: 0; border-radius: 0; box-shadow: none;
  container-type: inline-size;
}
.hardware[data-style=cd] .player-chassis {
  display: block; position: relative; isolation: isolate; aspect-ratio: 1 / 1.04;
  border: 2px solid #faffff; border-radius: 49% 49% 44% 44% / 47% 47% 46% 46%;
  background:
    radial-gradient(ellipse at 50% 78%,#f5f8f0 0 10%,transparent 49%),
    repeating-conic-gradient(from 2deg,#fff1 0deg 2deg,transparent 2deg 16deg),
    linear-gradient(135deg,#faffffb8,#aebdbbb0 27%,#edf3f1b5 46%,#b8c6c5a0 72%,#edf3f1c9);
  box-shadow: inset 0 0 0 4px #a3b0b170,inset 0 0 0 8px #f8ffffb0,
    inset 0 -9px 6px #576d6d60,inset 0 9px 4px #fff,
    0 3px 0 #728887,0 6px 0 #a1b2b0,0 23px 26px -14px #304f5055;
}
.hardware[data-style=cd] .player-chassis::before {
  content: ''; position: absolute; inset: 10px; border: 1px solid #a0b6b4;
  border-radius: inherit; box-shadow: 0 1px 2px white,inset 0 0 0 2px #fff7; pointer-events: none;
}
.hardware[data-style=cd] .player-chassis::after { content: none; }
.hardware[data-style=cd] .deck-top,
.hardware[data-style=cd] .speaker,
.hardware[data-style=cd] .lcd .tape { display: none; }
.hardware[data-style=cd] .cd-mechanism { display: block; position: absolute; inset: 4.5% 4.5% auto; aspect-ratio: 1; }
.cd-tray {
  position: absolute; inset: 2.5%; border-radius: 50%;
  background: repeating-conic-gradient(#4f6462 0deg 1deg,transparent 1deg 30deg),
    radial-gradient(circle,#192e2d 0 57%,#668580 58%,#293e3e 59% 62%,#a6b8b3 63%,#eff8f170 65% 70%);
  border: 1px solid #819794;
  box-shadow: 0 0 0 2px #f5fffc,0 0 0 4px #829a9780,inset 0 0 0 5px #e6f4ed66,inset 0 0 13px #263f3b;
}
.cd-rotor {
  position: absolute; inset: 5%; overflow: hidden; border-radius: 50%;
  background:
    radial-gradient(circle,transparent 0 16%,#fff8 16.3% 16.8%,transparent 17% 60%,#739f9680 61%,#e9fff9 61.6% 62%,transparent 62.5%),
    repeating-radial-gradient(circle,#fcfffe13 0 .6px,#7e9d9a12 .8px 1.2px,transparent 1.5px 3px),
    conic-gradient(from 15deg,#e1e8df 0deg,#f3f7ef 32deg,#c3d4d4 55deg,#b6d6cd 61deg,#e5dfbe 69deg,#f8e4dc 75deg,#d5c9dd 82deg,#c6d5dd 89deg,#f9fcf6 110deg,#b8c9c9 160deg,#e7ece4 193deg,#b9d4ce 228deg,#e2e2be 240deg,#e6cdd5 249deg,#c6cbdf 258deg,#e6f6ea 276deg,#a9c2c4 320deg,#e1e8df 360deg);
  border: 2px solid #e8f5ef; outline: 1px solid #2d5658;
  box-shadow: 0 4px 8px #001c23b0,inset 0 0 0 2px #c1d4ca,inset 0 0 0 4px #f3fff699;
  animation: cd-spin var(--disc-period,9s) linear infinite; animation-play-state: paused;
}
.hardware[data-style=cd][data-playing=true] .cd-rotor { animation-play-state: running; }
.cd-disc-label { position: absolute; inset: 27%; border-radius: 50%; overflow: hidden; }
.hardware[data-style=cd] .cd-disc-label .deck-art {
  position: absolute; inset: 0; width: 100%; height: 100%; opacity: .94;
  border: 0; filter: none; object-fit: cover; border-radius: 50%;
}
.cd-disc-print { position: absolute; top: 75%; left: 32%; width: 36%; text-align: center; color: #3a666669; font-size: 3cqw; line-height: 1.1; letter-spacing: 1px; }
.cd-disc-print small { font-size: 1cqw; letter-spacing: 1.5px; }
.cd-spindle {
  position: absolute; inset: 37.5%; z-index: 2; border-radius: 50%;
  border: 1px solid #9fb8b3; background: radial-gradient(circle,#0b1418 0 25%,#486260 27%,#131f22 29% 41%,#607a73 43%,#233332 46% 56%,#bad0c8 58% 60%,#64797299 61% 64%,#d9eee355 66%);
  box-shadow: 0 3px 5px #0b242a90,inset 0 0 0 3px #ecfff666;
}
.cd-spindle i { position: absolute; inset: 39%; border-radius: 50%; background: linear-gradient(120deg,#c9d6d3,#253c3b 45%,#758986 70%,#d2e3dd); border: 1px solid #243e3e; box-shadow: 0 0 0 2px #021919; }
.cd-lid {
  position: absolute; z-index: 3; inset: -1%; border-radius: 50%; pointer-events: none;
  border: 3px solid #f5ffff99;
  background: linear-gradient(125deg,#fff0 17%,#fff5 18%,#fff1 19%,transparent 34%,#efffff30 35%,transparent 53%,#fff3 75%,transparent 76%);
  box-shadow: inset 0 0 0 3px #647f7540,inset 0 0 0 8px #e9ffff60,0 0 0 1px #97b1b0;
}
.cd-lid::after { content: ''; position: absolute; inset: 8%; border: 1px solid #f4fffe66; border-radius: 50%; box-shadow: 0 0 0 1px #728f8540; }
.cd-hinge { position: absolute; z-index: 4; top: 0; left: 39%; right: 39%; height: 4.5%; border-radius: 6px 6px 2px 2px; border: 1px solid #879f9b; background: repeating-linear-gradient(90deg,#bbcec766 0 15%,#fafdf8cc 16% 18%,#758e8b88 19% 21%,#d9e4e077 22% 25%); box-shadow: inset 0 2px 2px white,0 2px 2px #193a3655; }
.cd-latch { position: absolute; z-index: 4; bottom: 2%; left: 43%; width: 14%; height: 3%; border: 1px solid #708b81; background: linear-gradient(#ffffffc0,#a8c0b5b0); border-radius: 3px 3px 6px 6px; }
.cd-fastener { position: absolute; z-index: 4; top: 53%; width: 2.8%; aspect-ratio: 1; border-radius: 50%; border: 1px solid #67897e; background: linear-gradient(135deg,#effaf4 42%,#55766c 43% 53%,#d5e7dd 54%); box-shadow: 0 0 0 2px #e3f2e77a; }
.cd-fastener-left { left: 0; }.cd-fastener-right { right: 0; }
.hardware[data-style=cd] .deck-face {
  display: block; position: absolute; z-index: 5; top: 66%; left: 20%; width: 60%;
}
.hardware[data-style=cd] .lcd {
  display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 8px;
  min-height: 0; height: 13cqw; padding: 1.8cqw 2.4cqw; margin: 0;
  border: 3px solid #63776e; border-bottom-color: #e9f3e5; border-right-color: #b8c7bb;
  border-radius: 12px; background: repeating-linear-gradient(0deg,#0b201208 0 1px,transparent 1px 3px),linear-gradient(115deg,#b3c3a2,#c7d0ae 60%,#a9ba97);
  box-shadow: 0 0 0 4px #c9d7ca,0 0 0 5px #f8fffba0,inset 1px 3px 5px #2a422d60,0 5px 7px #203d3940;
  color: #263d2c; overflow: hidden;
}
.hardware[data-style=cd] .lcd .now-playing { min-height: 0; padding: 0; display: flex; gap: 2px; overflow: hidden; }
.hardware[data-style=cd] .lcd #track-number { font-size: 1.4cqw; letter-spacing: 1px; }
.hardware[data-style=cd] .lcd h1 { font-size: 2cqw; margin: 0; font-weight: 500; text-transform: none; white-space: nowrap; letter-spacing: -.5px; }
.hardware[data-style=cd] .lcd #track-source { font-size: 1.45cqw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hardware[data-style=cd] .lcd .muted { color: #496044; }
.hardware[data-style=cd] .lcd .time-display { display: block; margin: 0; text-align: right; }
.hardware[data-style=cd] .lcd #elapsed { display: block; font-size: 3.5cqw; letter-spacing: -1px; text-shadow: none; }
.hardware[data-style=cd] .lcd .time-display > .muted { font-size: 1.25cqw; }
.hardware[data-style=cd] .waveform {
  position: absolute; z-index: 6; top: 80%; left: 26%; width: 48%; height: 3.5cqw; margin: 0;
  border-color: #99afa244; border-radius: 4px; overflow: hidden;
}
.hardware[data-style=cd] .waveform-unplayed { fill: #8ba393; }
.hardware[data-style=cd] .waveform-notes { margin-top:12px;justify-content:center; }
.hardware[data-style=cd]:has(.waveform-notes) .deck-bottom { margin-top:8px; }
.hardware[data-style=cd] #waveform-played { fill: #345749; }
.hardware[data-style=cd] #waveform-cursor { stroke: #294f43; }
.hardware[data-style=cd] .waveform-status { top: 0; font-size: 1.5cqw; background: #dbe5d9; }
.hardware[data-style=cd] .deck-controls { display: contents; }
.hardware[data-style=cd] .transport {
  display: flex; align-items: center; justify-content: center; gap: 1.9cqw;
  position: absolute; z-index: 6; top: 86%; left: 20%; width: 60%; max-width: none;
}
.hardware[data-style=cd] .transport button {
  display: grid; place-items: center; flex: none; width: 7cqw; height: 7cqw; min-width: 0; min-height: 0;
  margin: 0; padding: 0; border-radius: 50%; font-size: 2cqw;
  background: linear-gradient(135deg,#ffffffdb,#b3c8c1a0 50%,#e9f3edcc);
  border: 1px solid #90a59b; color: #2e5044;
  box-shadow: inset 0 2px 1px #fff,inset 0 -2px 2px #879e9499,0 0 0 3px #edf7ed90,0 4px 3px #34584b44;
}
.hardware[data-style=cd] .transport button:hover:not(:disabled) { background: #f8fff7; }
.hardware[data-style=cd] #mute { order: 0; }
.hardware[data-style=cd] #previous { order: 1; }
.hardware[data-style=cd] #play-pause { order: 2; }
.hardware[data-style=cd] #next { order: 3; }
.hardware[data-style=cd] #repeat { order: 4; }
.hardware[data-style=cd] .transport #play-pause {
  width: 9cqw; height: 9cqw; min-height: 0; min-width: 0; align-self: auto;
  background: linear-gradient(145deg,#edf7e8,#809e8c); color: #193d2d; border: 1px solid #738f7d;
  box-shadow: inset 0 2px 2px white,inset 0 -3px 3px #5f806b70,0 0 0 3px #effbeccc,0 4px 4px #34584b55;
}
.hardware[data-style=cd] .transport #play-pause::before { border-top-width: 1.8cqw; border-bottom-width: 1.8cqw; border-left-width: 2.7cqw; transform: translate(-50%,-50%) translateX(1px); }
.hardware[data-style=cd] .transport #play-pause[data-active=true]::before { width: 2.8cqw; height: 3.6cqw; border-width: 0 .9cqw; transform: translate(-50%,-50%); }
.hardware[data-style=cd] .transport #mute,.hardware[data-style=cd] .transport #repeat { font-size: 0; }
.hardware[data-style=cd] #mute::before { content: '♪'; font-size: 3cqw; }
.hardware[data-style=cd] #mute[aria-label=Unmute]::before { content: '×'; }
.hardware[data-style=cd] #repeat::before { content: '↻'; font-size: 3.5cqw; }
.hardware[data-style=cd] #repeat[aria-pressed=true] { background: #829f8a; box-shadow: inset 0 2px 4px #2a453b55,0 0 0 2px #f7fff0; }
.hardware[data-style=cd] .dial {
  position: absolute; z-index: 6; top: 72%; left: 7%; width: 9.5cqw; height: 9.5cqw;
  border: 2px solid #99afa2; color: #3d5747;
  background: radial-gradient(circle,#dae6d7 0 54%,#a3b5a4 55%,#f2fcf0 60% 68%,#889f8e 70%);
  box-shadow: inset 0 1px 2px white,0 2px 3px #45664f55;
}
.hardware[data-style=cd] .dial:last-child { left: auto; right: 7%; }
.hardware[data-style=cd] .dial > span { font-size: 1.1cqw; letter-spacing: .3px; }
.hardware[data-style=cd] .dial output { font-size: 1.6cqw; font-weight: 400; }
.hardware[data-style=cd] .dial::after { background: linear-gradient(#53705c,#53705c) center top / 2px 11% no-repeat; inset: 7%; }
.hardware[data-style=cd] .deck-bottom { border: 0; box-shadow: none; margin: 26px 14px 0; padding: 0; color: var(--muted); }
.hardware[data-style=cd] .deck-bottom > span { display: none; }
.hardware[data-style=cd] .deck-bottom > label { margin-left: auto; }
.hardware[data-style=cd] select { background: #e0e6de; border-color: #b0bcb0; box-shadow: none; color: #354b3d; }
.hardware[data-style=cd] .track-actions,.hardware[data-style=cd] .song-versions,.hardware[data-style=cd] .track-message { margin-left: 14px; margin-right: 14px; }
@keyframes cd-spin { to { transform: rotate(360deg); } }
@media(prefers-reduced-motion:reduce) { .cd-rotor { animation: none; } }
@media(max-width:600px) {
  .hardware[data-style=cd] .lcd { height: 15.5cqw; border-width: 2px; border-radius: 7px; gap: 5px; box-shadow: 0 0 0 2px #c9d7ca,0 0 0 3px #f8fffba0,inset 1px 2px 3px #2a422d60; }
  .hardware[data-style=cd] .lcd h1 { font-size: max(10px,2.4cqw); }
  .hardware[data-style=cd] .lcd #track-source { font-size: max(8px,1.8cqw); }
  .hardware[data-style=cd] .lcd #track-number,.hardware[data-style=cd] .lcd .time-display > .muted { font-size: 7px; }
  .hardware[data-style=cd] .lcd #elapsed { font-size: 18px; }
  .hardware[data-style=cd] .deck-face { top: 64%; left: 17%; width: 66%; }
  .hardware[data-style=cd] .dial { left: 2%; top: 73%; width: 40px; height: 40px; }
  .hardware[data-style=cd] .dial:last-child { right: 2%; }
  .hardware[data-style=cd] .dial > span { font-size: 5px; }
  .hardware[data-style=cd] .dial output { font-size: 8px; }
  .hardware[data-style=cd] .transport { top: 85%; gap: 2cqw; left: 15%; width: 70%; }
  .hardware[data-style=cd] .transport button { width: max(34px,9cqw); height: max(34px,9cqw); }
  .hardware[data-style=cd] .transport #play-pause { width: max(44px,12cqw); height: max(44px,12cqw); }
  .hardware[data-style=cd] .deck-bottom { margin-top: 24px; }
}