/* Burned CDs: the wallet, the discs, the drive and the player. Classes prefixed cd-.
   The close button, the hover arrows and the buttons are the gallery's (gallery.css). */
.cd-host {
  --u: min(1px, calc((100vw - 64px) / 300)); /* the drive's scale: 300u wide */
  --side: calc(300 * var(--u) + 28px);
  --paper: #fcf9f0;
  --hand: "Permanent Marker", "Marker Felt", "Comic Sans MS", cursive;
  --pen: "Caveat", "Bradley Hand", "Segoe Print", cursive;
  position: fixed; inset: 0; z-index: 8;
  display: none;
  padding: 24px 16px;
  font: 14px/1.45 Arial, Helvetica, sans-serif; color: #333;
}
/* sideways only the close button's finger target reaches past the edge: clip it, don't slide */
.cd-host.cd-open { display: grid; overflow: hidden auto; }
.cd-host *, .cd-host *::before, .cd-host *::after { box-sizing: border-box; }
@media (max-height: 520px) { .cd-host { --u: 0.8px; } }

.cd-back { position: fixed; inset: 0; background: rgba(8, 10, 14, 0.84); animation: cd-fade 0.25s ease-out both; }
/* from the gallery, whose backdrop (0.82) was up a moment ago: this one is simply there */
.cd-host.cd-handoff .cd-back { animation: none; }
@keyframes cd-fade { from { opacity: 0; } }
@keyframes cd-pop { from { transform: scale(0.94); opacity: 0; } }
/* the player's white frame, faded in with what's in it */
@keyframes cd-frame { from { background-color: rgba(255, 255, 255, 0); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0), 0 12px 50px rgba(0, 0, 0, 0); } }

/* auto margins centre it when it fits and let the host scroll from the top when it doesn't */
.cd-box {
  position: relative; z-index: 1; margin: auto; width: fit-content; max-width: 100%;
  animation: cd-pop 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.15) both;
}
.cd-box:focus { outline: none; }
.cd-x { top: -14px; right: -14px; }
.cd-host[data-mode="player"] .cd-wallet, .cd-host[data-mode="wallet"] .cd-player { display: none; }
.cd-wallet, .cd-player { animation: cd-fade 0.22s ease-out both; }
.cd-host button:focus-visible, .cd-host a:focus-visible { outline: 2px solid #f5b66e; outline-offset: 2px; }
.cd-host .gl-nav:focus-visible { outline: none; } /* the circle gets the ring (gallery.css), not the whole strip round it */
.cd-cap a:focus-visible, .cd-cap button:focus-visible, .cd-jcard button:focus-visible { outline-color: #1B5790; }
.cd-drive button:focus-visible { outline-color: #1B5790; } /* amber vanishes on the beige bezel */
.cd-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ------------------------------------------------ a burned CD-R */
/* Radii below are shares of the disc's radius: hole 12.5%, clear hub to 28%, a mirror
   band to 37%, the burnable face to 97.5%, then the rim. */
.cd-disc {
  --d: 200px;
  position: relative; display: block; width: var(--d); aspect-ratio: 1; border-radius: 50%;
  container-type: inline-size;
  background: radial-gradient(circle closest-side,
    transparent 12.5%,
    rgba(215, 225, 233, 0.34) 12.5% 20.5%,  /* clear polycarbonate round the hole */
    rgba(255, 255, 255, 0.6) 21% 21.8%,     /* the clamping ring's edge catching the light */
    rgba(205, 216, 226, 0.26) 22.3% 27%,
    rgba(110, 122, 134, 0.6) 27.4% 28.2%,   /* the stacking ring */
    transparent 28.6%);
  -webkit-mask: radial-gradient(circle closest-side, transparent 12.2%, #000 12.9%);
  mask: radial-gradient(circle closest-side, transparent 12.2%, #000 12.9%);
}
/* the silver: brushed spokes, the brighter mirror band, the groove where the burn starts, the rim */
.cd-disc::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background:
    radial-gradient(circle closest-side,
      transparent 36.4%, rgba(60, 68, 76, 0.35) 36.8% 37.6%, transparent 38.2%,
      transparent 96.4%, rgba(70, 78, 86, 0.45) 97.2%, rgba(255, 255, 255, 0.55) 98.6%, rgba(90, 98, 106, 0.55) 100%),
    radial-gradient(circle closest-side, transparent 28.6%, rgba(255, 255, 255, 0.45) 29.5% 36%, transparent 36.6%),
    conic-gradient(from 12deg, #dfe3e7, #f7f8f9 7%, #bcc3ca 16%, #e6e9ec 26%, #c7cdd3 37%, #f3f4f5 49%, #b8bfc6 61%, #e2e5e8 72%, #cbd1d6 84%, #dfe3e7);
  -webkit-mask: radial-gradient(circle closest-side, transparent 28.4%, #000 28.9%);
  mask: radial-gradient(circle closest-side, transparent 28.4%, #000 28.9%);
}
/* the rainbow: two spectra on the diagonal, lit from the upper left, stronger toward the rim,
   clear of the label. It turns to catch the light on hover; spinning, the disc turns under
   it and it stays put, as on a real one. */
.cd-disc::after {
  content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 50%;
  background: conic-gradient(from 0deg,
    transparent 0 3%, rgba(255, 255, 255, 0.55) 6%, transparent 9%,
    rgba(255, 60, 170, 0.34) 11%, rgba(255, 196, 52, 0.36) 14%, rgba(80, 240, 150, 0.34) 17%, rgba(50, 160, 255, 0.36) 20%, rgba(150, 80, 255, 0.3) 23%, transparent 27%,
    transparent 53%, rgba(255, 255, 255, 0.5) 56%, transparent 59%,
    rgba(255, 60, 170, 0.3) 61%, rgba(255, 196, 52, 0.32) 64%, rgba(80, 240, 150, 0.3) 67%, rgba(50, 160, 255, 0.32) 70%, rgba(150, 80, 255, 0.26) 73%, transparent 77%);
  -webkit-mask: radial-gradient(circle closest-side, transparent 38%, rgba(0, 0, 0, 0.45) 52%, #000 78% 96%, transparent 97.5%);
  mask: radial-gradient(circle closest-side, transparent 38%, rgba(0, 0, 0, 0.45) 52%, #000 78% 96%, transparent 97.5%);
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* the side you write on: the blank's ring print and the marker. Multiply lets the silver
   and the rainbow show through the ink, the way marker sits on a disc. */
.cd-top { position: absolute; inset: 0; z-index: 2; transform: rotate(var(--turn, 0deg)); mix-blend-mode: multiply; }
.cd-print { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cd-print text { font: bold 2.3px/1 Arial, Helvetica, sans-serif; fill: rgba(40, 46, 54, 0.55); }
.cd-ink {
  position: absolute; left: 17%; right: 17%; bottom: 66.5%;
  display: flex; flex-direction: column; align-items: center;
  transform: translateX(var(--lx, 0%)) rotate(var(--tilt, 0deg));
  font: var(--fs, 9.4cqw)/0.98 var(--hand); color: var(--ink); text-align: center;
}
.cd-name { display: block; max-width: 100%; overflow-wrap: anywhere; text-wrap: balance; }
.cd-line { display: block; width: 88%; aspect-ratio: 10; margin-top: -1.2cqw; overflow: visible; }
.cd-line path { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.cd-date {
  position: absolute; left: 27%; right: 21%; top: 69.5%;
  transform: rotate(var(--tilt, 0deg));
  font: 7.2cqw/1 var(--hand); color: var(--ink); text-align: center; white-space: nowrap;
}

/* ------------------------------------------------ the wallet */
/* black nylon, a stitched edge and a zip round it; sleeves in two pages either side of the spine */
.cd-wallet {
  --r: 22px;
  position: relative; width: min(600px, calc(100vw - 32px));
  padding: 26px 30px 20px;
  border-radius: var(--r);
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0.22) 0 1px, transparent 1px 3px),
    radial-gradient(120% 80% at 50% 0%, #3a3d42, #232528 70%);
  /* a lighter rim so the silhouette reads on the dark backdrop, then the binding the zip sits in */
  box-shadow: 0 0 0 1px #0c0d0f, 0 0 0 2.5px #4a4d53, inset 0 0 0 9px #1a1b1d, inset 0 0 0 10px rgba(255, 255, 255, 0.07), 0 14px 50px rgba(0, 0, 0, 0.65);
  color: #f3eee2;
}
/* Short windows: the pockets shrink until the whole wallet fits the height (discs.js sets
   --rows). 210px is the host's padding and the wallet's own chrome, 25px a pocket's note,
   18px the gap between rows, 116px the wallet's width that isn't pockets. */
@supports (height: 100dvh) {
  .cd-wallet { width: min(600px, calc(100vw - 32px), max(300px, calc(2 * (100dvh - 210px - var(--rows) * 25px - (var(--rows) - 1) * 18px) / var(--rows) + 116px))); }
}
.cd-wallet::before {
  content: ""; position: absolute; inset: 12px; border-radius: 15px; pointer-events: none;
  border: 1.5px dashed rgba(255, 255, 255, 0.2);
}
/* the zip: a band of teeth round the edge, each run of them square to its side */
.cd-wallet::after {
  content: ""; position: absolute; inset: 3px; padding: 4px; border-radius: calc(var(--r) - 3px); pointer-events: none;
  background:
    repeating-linear-gradient(90deg, #9a9ea4 0 1.5px, #2a2c2f 1.5px 3px) top / 100% 4px no-repeat,
    repeating-linear-gradient(90deg, #9a9ea4 0 1.5px, #2a2c2f 1.5px 3px) bottom / 100% 4px no-repeat,
    repeating-linear-gradient(0deg, #9a9ea4 0 1.5px, #2a2c2f 1.5px 3px) left / 4px 100% no-repeat,
    repeating-linear-gradient(0deg, #9a9ea4 0 1.5px, #2a2c2f 1.5px 3px) right / 4px 100% no-repeat;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
/* its pull, hanging off the track (centred on it, 5px in) and over the teeth */
.cd-pull {
  position: absolute; z-index: 1; right: -3px; top: 44%; width: 16px; height: 40px; border-radius: 4px;
  background: linear-gradient(90deg, #8d9197, #e3e6ea 45%, #9a9ea4);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.35);
}
.cd-pull::after { content: ""; position: absolute; left: 5px; top: 6px; width: 6px; height: 22px; border-radius: 3px; background: #2a2c2f; }

/* the title on a strip of masking tape, torn at both ends */
.cd-head { display: flex; justify-content: center; margin: 0 0 20px; filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.55)); }
.cd-tape {
  max-width: 100%; padding: 9px 26px 7px; text-align: center; color: #1c1c1c;
  background: linear-gradient(rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.05)), #e9ddb7;
  transform: rotate(-1.6deg);
  clip-path: polygon(1.5% 0, 98.5% 0, 100% 14%, 98.8% 30%, 100% 47%, 98.6% 64%, 100% 82%, 98.7% 100%, 1.2% 100%, 0 84%, 1.4% 66%, 0 50%, 1.3% 33%, 0 16%);
}
.cd-title { margin: 0; font: 26px/1.1 var(--hand); letter-spacing: 0.01em; text-wrap: balance; }
.cd-tally { margin: 3px 0 0; font: 15px/1 var(--hand); color: #4a4a4a; }

.cd-sleeves {
  position: relative; list-style: none; margin: 0; padding: 0 6px;
  display: grid; grid-template-columns: 1fr 1fr; column-gap: 44px; row-gap: 18px;
}
.cd-sleeves::before {
  content: ""; position: absolute; top: -10px; bottom: -10px; left: calc(50% - 5px); width: 10px; border-radius: 5px;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.55), rgba(255, 255, 255, 0.08) 50%, rgba(0, 0, 0, 0.55));
}
.cd-sleeve { position: relative; min-width: 0; }
/* a pocket: soft white backing behind a clear front, welded round the edge */
.cd-pick {
  position: relative; display: block; width: 100%; aspect-ratio: 1; padding: 0; border-radius: 6px;
  background: radial-gradient(circle at 30% 20%, #f4f3ef, #dedcd5 70%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25), 0 1px 0 rgba(255, 255, 255, 0.06);
}
.cd-pick::after {
  content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none;
  background: linear-gradient(125deg, rgba(255, 255, 255, 0.34) 0 16%, rgba(255, 255, 255, 0.06) 30% 62%, rgba(255, 255, 255, 0.2) 75%, rgba(255, 255, 255, 0.04));
  box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 0.16), inset 0 0 0 5px rgba(0, 0, 0, 0.12);
}
.cd-blank { opacity: 0.8; }
.cd-seat {
  position: absolute; left: 6%; top: 6%; width: 88%; z-index: 1;
  transform: translate(var(--dx, 0%), var(--dy, 0%));
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
  transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.28s;
}
.cd-seat .cd-disc, .cd-flying .cd-disc { --d: 100%; }
/* pulled halfway out of its sleeve, catching the light as it comes */
.cd-pick:hover .cd-seat, .cd-pick:focus-visible .cd-seat {
  transform: translate(var(--dx, 0%), calc(var(--dy, 0%) - 13%));
  filter: drop-shadow(0 7px 9px rgba(0, 0, 0, 0.42)) brightness(1.06);
}
.cd-pick:hover .cd-disc::after, .cd-pick:focus-visible .cd-disc::after { transform: rotate(38deg); }
/* chosen: drawn up out of the pocket, over the sleeves above, before it flies (T.lift in discs.js) */
.cd-pick.cd-lift { z-index: 3; }
.cd-pick.cd-lift .cd-seat {
  transform: translate(var(--dx, 0%), calc(var(--dy, 0%) - 35%));
  filter: drop-shadow(0 9px 11px rgba(0, 0, 0, 0.45)) brightness(1.06);
  transition-duration: 0.15s;
}
.cd-away .cd-seat { opacity: 0; }
.cd-busy .cd-pick { cursor: default; }
.cd-note { display: block; margin-top: 6px; text-align: center; font: 500 19px/1 var(--pen); color: rgba(246, 241, 231, 0.72); }
.cd-hint { margin: 18px 0 0; text-align: center; font: 11px/1.4 var(--mono, monospace); letter-spacing: 0.1em; text-transform: uppercase; color: rgba(246, 241, 231, 0.55); }
.cd-coarse { display: none; }
@media (pointer: coarse) { .cd-fine { display: none; } .cd-coarse { display: inline; } }

/* a disc in the air between the wallet and the drive (discs.js moves it) */
.cd-flying { position: fixed; z-index: 5; margin: 0; pointer-events: none; transform-origin: 50% 50%; filter: drop-shadow(0 10px 12px rgba(0, 0, 0, 0.45)); }

/* ------------------------------------------------ the player */
.cd-host[data-mode="player"] .cd-box {
  padding: 10px; background: #fff; border-radius: 10px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2), 0 12px 50px rgba(0, 0, 0, 0.6);
  /* the frame fades in with the player rather than a frame ahead of it; cd-pop keeps its
     place in the list, so it doesn't replay */
  animation: cd-pop 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.15) both, cd-frame 0.25s ease-out both;
}
.cd-player {
  display: grid; column-gap: 10px;
  grid-template-columns: var(--side) auto;
  grid-template-rows: auto 1fr;
  grid-template-areas: "deck main" "list main";
}
/* the drive and its discs sit on the wallet's nylon */
.cd-deck, .cd-list {
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0.22) 0 1px, transparent 1px 3px),
    #2a2c30;
  color: #f3eee2;
}
.cd-deck { grid-area: deck; position: relative; z-index: 2; padding: 14px 14px 10px; border-radius: 6px 6px 0 0; }
.cd-list { grid-area: list; padding: 6px 14px 14px; border-radius: 0 0 6px 6px; }
.cd-main { grid-area: main; align-self: center; min-width: 0; }
/* short windows: the drive and J-card outgrow the screen beside them, which stays at the top, in sight */
@media (max-height: 520px) { .cd-main { align-self: start; } }

/* the drive: a beige 5¼" bay, face on, with the tray seen from a little above as it comes out.
   Everything is in u, so it scales as one piece. */
.cd-drive { position: relative; width: calc(300 * var(--u)); height: calc(104 * var(--u)); margin: 0 auto; }
.cd-plate {
  position: absolute; inset: 0; border-radius: calc(3 * var(--u));
  background: linear-gradient(#ebe5d6, #d9d1bd 60%, #cdc4ae);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), inset 0 -2px 0 rgba(0, 0, 0, 0.12), 0 0 0 1px #8e8672, 0 3px 8px rgba(0, 0, 0, 0.5);
}
.cd-plate::before { /* the recess the tray's front closes into */
  content: ""; position: absolute; left: calc(13 * var(--u)); top: calc(9 * var(--u)); width: calc(274 * var(--u)); height: calc(46 * var(--u));
  border-radius: calc(3 * var(--u)); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.32), 0 1px 0 rgba(255, 255, 255, 0.6);
}
.cd-jack {
  position: absolute; left: calc(18 * var(--u)); top: calc(74 * var(--u)); width: calc(11 * var(--u)); height: calc(11 * var(--u)); border-radius: 50%;
  background: radial-gradient(circle, #111 0 32%, #555 38%, #bdb5a0 58%, #a79f8a);
}
.cd-vol {
  position: absolute; left: calc(36 * var(--u)); top: calc(76 * var(--u)); width: calc(26 * var(--u)); height: calc(7 * var(--u)); border-radius: calc(2 * var(--u));
  background: repeating-linear-gradient(90deg, #8f8773 0 calc(1 * var(--u)), #c9c1ab calc(1 * var(--u)) calc(3 * var(--u)));
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.3);
}
.cd-model {
  position: absolute; left: 0; right: 0; top: calc(74 * var(--u)); text-align: center;
  font: bold calc(9 * var(--u))/1 Arial, Helvetica, sans-serif; letter-spacing: 0.14em; color: #8c846f;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.65);
}
.cd-led {
  position: absolute; right: calc(68 * var(--u)); top: calc(78 * var(--u)); width: calc(9 * var(--u)); height: calc(5 * var(--u)); border-radius: 1.5px;
  background: #6d6a4a; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.45), 0 1px 0 rgba(255, 255, 255, 0.6);
}
.cd-led-on .cd-led { background: #ffc23d; box-shadow: 0 0 calc(6 * var(--u)) rgba(255, 178, 40, 0.9), inset 0 0 1px #fff3c4; }
.cd-led-blink .cd-led { animation: cd-blink 0.42s step-end infinite; }
@keyframes cd-blink { 0% { opacity: 1; } 18% { opacity: 0.25; } 30% { opacity: 1; } 52% { opacity: 0.2; } 60% { opacity: 1; } 84% { opacity: 0.3; } }
.cd-ej {
  position: absolute; z-index: 1; right: calc(16 * var(--u)); top: calc(72 * var(--u)); width: calc(40 * var(--u)); height: calc(16 * var(--u));
  display: grid; place-items: center; padding: 0; border-radius: calc(2 * var(--u));
  background: linear-gradient(#f3eee2, #d6ceb9); color: #6f6857;
  box-shadow: 0 0 0 1px #9c937d, 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px 0 #fff;
}
.cd-ej::before { content: ""; position: absolute; inset: -14px -6px; } /* a finger-sized target round a small button */
.cd-ej:hover { background: linear-gradient(#f8f4ea, #ddd6c3); }
.cd-ej:active { box-shadow: 0 0 0 1px #9c937d, inset 0 1px 2px rgba(0, 0, 0, 0.3); }
/* ⏏ drawn, not typed, so no platform turns it into an emoji */
.cd-ejglyph { display: inline-grid; justify-items: center; gap: 1.5px; width: 10px; vertical-align: -1px; }
.cd-ejglyph::before { content: ""; width: 10px; height: 6px; background: currentColor; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.cd-ejglyph::after { content: ""; width: 10px; height: 2px; background: currentColor; }
.cd-ej .cd-ejglyph { transform: scale(0.8); }

/* The tray. Closed, only its front shows, in the recess; out, its bed covers the face below
   it, as a drawer seen from above does. The clip hides what's still inside the drive. */
.cd-trayclip {
  position: absolute; z-index: 2; left: calc(14 * var(--u)); top: calc(10 * var(--u));
  width: calc(272 * var(--u)); height: calc(168 * var(--u));
  overflow: hidden; pointer-events: none;
}
.cd-tray { position: absolute; inset: 0; transform: translateY(calc(-124 * var(--u))); transition: transform 0.44s cubic-bezier(0.55, 0, 0.3, 1); }
.cd-out .cd-tray { transform: none; }
.cd-bed {
  position: absolute; left: calc(6 * var(--u)); right: calc(6 * var(--u)); top: 0; height: calc(124 * var(--u));
  background: linear-gradient(#0c0d0e, #26282b calc(16 * var(--u)), #303338 70%, #2a2c30);
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.07), inset -1px 0 0 rgba(255, 255, 255, 0.07);
}
.cd-well {
  position: absolute; left: calc(50% - 110 * var(--u)); top: calc(7 * var(--u)); width: calc(220 * var(--u)); height: calc(110 * var(--u)); border-radius: 50%;
  background: radial-gradient(closest-side, #111214 0 8%, #4a4d52 9% 11%, #1d1f22 13% 94%, #45484d 98%);
}
.cd-traydisc {
  position: absolute; left: calc(50% - 105 * var(--u)); top: calc(62 * var(--u) - 105 * var(--u)); width: calc(210 * var(--u));
  transform: scaleY(0.5); opacity: 0;
}
.cd-traydisc .cd-disc { --d: 100%; }
.cd-full .cd-traydisc { opacity: 1; }
.cd-lip {
  position: absolute; left: 0; right: 0; bottom: 0; height: calc(44 * var(--u)); border-radius: calc(2 * var(--u));
  background: linear-gradient(#efe9db, #dcd4c0 55%, #cfc6b0);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), inset 0 -1px 0 rgba(0, 0, 0, 0.18), 0 1px 0 rgba(0, 0, 0, 0.2);
}
/* a smoked window in the tray's front, onto the top of the disc: the label goes round in it */
.cd-win {
  --wd: calc(160 * var(--u));
  position: absolute; left: calc(50% - 76 * var(--u)); top: calc(3 * var(--u)); width: calc(152 * var(--u)); height: calc(38 * var(--u));
  overflow: hidden; border-radius: calc(4 * var(--u));
  background: #16181b;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.8), 0 1px 0 rgba(255, 255, 255, 0.7);
}
.cd-win::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(170deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 38%), rgba(24, 20, 16, 0.28);
}
.cd-windisc { position: absolute; left: calc(50% - var(--wd) / 2); top: calc(var(--wd) * -0.1); width: var(--wd); opacity: 0; transition: opacity 0.18s; }
.cd-windisc .cd-disc { --d: 100%; }
.cd-in .cd-windisc { opacity: 1; }

/* ------------------------------------------------ the screen and its caption */
.cd-stage { position: relative; width: fit-content; max-width: 100%; margin-inline: auto; } /* the arrows sit on the screen's edges, not the column's */
/* dark like the drive's screen reading a disc: a screen smaller than the held frame, or a
   film, sits in it as on a player, not on a grey mat */
.cd-view {
  position: relative; overflow: hidden; margin: 0 auto;
  background: #1d2024; border-radius: 3px;
  cursor: zoom-in; touch-action: pan-y;
}
.cd-zoomed .cd-view { cursor: grab; touch-action: none; }
.cd-zoomed .cd-view:active { cursor: grabbing; }
.cd-nozoom .cd-view { cursor: default; }
.cd-nozoom [data-cd="zoom"] { display: none; }
.cd-img { position: absolute; left: 0; top: 0; max-width: none; user-select: none; -webkit-user-drag: none; transition: opacity 0.25s; }
.cd-box.cd-swap .cd-img { animation: cd-fade 0.25s ease-out both; }
.cd-zoomed .gl-nav, .cd-single .gl-nav { display: none; }
/* while the disc reads: the screen dark, "Reading disc…", and nothing to click */
.cd-status {
  position: absolute; inset: 0; margin: 0; display: grid; place-items: center;
  background: #1d2024; color: #c9d1d9; font: bold 12px/1 Arial, Helvetica, sans-serif; letter-spacing: 0.14em; text-transform: uppercase;
  opacity: 0; pointer-events: none; transition: opacity 0.25s;
}
.cd-reading .cd-img { opacity: 0; }
.cd-reading .cd-status { opacity: 1; }
.cd-reading .cd-view, .cd-reading .gl-nav { pointer-events: none; }
.cd-reading .cd-cap { opacity: 0.4; }
.cd-broken .cd-img, .cd-broken .cd-fullsize { display: none; }
.cd-broken .cd-view::after { content: "This track didn't load."; position: absolute; inset: 0; display: grid; place-items: center; color: #c9d1d9; }

/* a video track: its poster fitted in the frame like a screen, a big play button over it,
   then YouTube's player in the poster's place (discs.js sets --vw and --vh to its size) */
.cd-vid { position: absolute; inset: 0; display: none; }
.cd-video .cd-vid { display: block; }
.cd-reading .cd-vid { visibility: hidden; }
.cd-play, .cd-vid iframe { position: absolute; inset: 0; margin: auto; width: var(--vw, 100%); }
/* YouTube wants 200px of height at least: on a phone the player borrows some of the frame's bands */
.cd-vid iframe { display: block; height: max(var(--vh, 100%), min(100%, 200px)); border: 0; }
.cd-play { height: var(--vh, 100%); display: grid; place-items: center; padding: 0; }
.cd-playing .cd-play { display: none; }
/* on a phone the player is short and the edge arrows land on its own controls (full screen,
   the time): they step aside while it plays, and the J-card and Eject still change tracks */
@media (max-width: 700px) { .cd-playing .gl-nav { display: none; } }
.cd-host .cd-play:focus-visible { outline-offset: -4px; }
.cd-box.cd-swap .cd-play { animation: cd-fade 0.25s ease-out both; }
/* the 2000s player's play button: smoked glass in a white ring, going red under the pointer */
.cd-play-btn {
  position: relative; width: clamp(56px, 16%, 88px); aspect-ratio: 1; border-radius: 50%;
  background-image: linear-gradient(rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0.06) 50%, transparent 51%);
  background-color: rgba(20, 20, 20, 0.72);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.9), 0 4px 18px rgba(0, 0, 0, 0.55);
  transition: background-color 0.15s, transform 0.15s;
}
.cd-play-btn::before { content: ""; position: absolute; left: 38%; top: 29%; width: 34%; height: 42%; background: #fff; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.cd-play:hover .cd-play-btn, .cd-play:focus-visible .cd-play-btn { background-color: #cc0000; transform: scale(1.06); }
.cd-play:active .cd-play-btn { transform: scale(0.97); }
/* the running time in the corner, as the video sites had it on a thumbnail */
.cd-play-len {
  position: absolute; right: 8px; bottom: 8px; padding: 3px 5px; border-radius: 3px;
  background: rgba(0, 0, 0, 0.78); color: #fff; font: bold 11px/1 Arial, Helvetica, sans-serif;
}
.cd-play-len:empty { display: none; }

.cd-cap {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 8px 16px;
  padding: 10px 4px 2px; transition: opacity 0.2s;
}
.cd-cap-l { min-width: 0; flex: 1 1 260px; }
.cd-set { font-size: 16px; color: #1B5790; }
.cd-sub { font-size: 13px; color: #5c5c5c; }
.cd-text { margin: 4px 0 0; color: #444; }
.cd-trk { font-weight: bold; color: #222; white-space: nowrap; }
.cd-cap-r { flex: 0 1 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 2px; }
.cd-count { font-size: 12px; color: #5c5c5c; white-space: nowrap; }

/* ------------------------------------------------ the J-card and the shelf */
/* the insert out of the jewel case: the tracklist, handwritten on its ruled lines, now playing highlighted */
.cd-jcard {
  --row: 30px;
  position: relative; margin: 14px 2px 0; padding: 8px 10px 10px 32px;
  background: linear-gradient(var(--paper), #f3eedf);
  border-radius: 2px; color: #283044;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.45), 0 8px 18px rgba(0, 0, 0, 0.3);
  transform: rotate(-0.7deg);
}
/* its spine, the strip that folds round the case's edge, with the disc's name down it
   (discs.js sets data-label). Turned over with the text, the fold shadow faces the tracks. */
.cd-jcard::before {
  content: attr(data-label); position: absolute; left: 0; top: 0; bottom: 0; width: 20px;
  display: flex; align-items: center; justify-content: center;
  font: 12px/1 var(--hand); color: var(--ink, #1d1d1d);
  writing-mode: vertical-rl; transform: rotate(180deg); overflow: hidden; white-space: nowrap;
  box-shadow: -1px 0 0 rgba(0, 0, 0, 0.12), -2px 0 0 #fff;
}
.cd-jhead { margin: 0 0 4px; font: 19px/1.15 var(--hand); color: var(--ink, #1d1d1d); }
.cd-jdate { font-size: 14px; opacity: 0.8; margin-left: 4px; white-space: nowrap; }
.cd-tracks {
  list-style: none; margin: 0; padding: 0;
  min-height: calc(var(--row) * var(--most, 1)); /* ruled for the longest disc (discs.js sets --most) */
  background: repeating-linear-gradient(transparent 0 calc(var(--row) - 1px), rgba(80, 130, 210, 0.32) calc(var(--row) - 1px) var(--row));
}
.cd-song {
  display: flex; align-items: center; gap: 8px; width: 100%; height: var(--row); padding: 0 4px 0 0;
  text-align: left; font: 500 20px/1 var(--pen); color: inherit;
}
.cd-no { flex: none; width: 22px; font-size: 17px; color: #6a7384; }
.cd-song-name { min-width: 0; padding: 1px 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-radius: 2px; }
.cd-song:hover .cd-song-name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.cd-song[aria-current="true"] { font-weight: 700; }
/* a video's running time at the end of its line, after a small play mark */
.cd-len { flex: none; margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: 17px; color: #6a7384; }
.cd-mark { width: 7px; height: 8px; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.cd-song[aria-current="true"] .cd-song-name {
  background: linear-gradient(100deg, rgba(255, 232, 60, 0) 0 1%, rgba(255, 232, 60, 0.75) 3% 96%, rgba(255, 232, 60, 0) 99%);
}
.cd-shelf { margin-top: 16px; }
/* the player's printed labels are the lightbox's Arial; the marker and pen stay on the handwritten things */
.cd-shelf-h { margin: 0 0 6px; font: bold 11px/1.3 Arial, Helvetica, sans-serif; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(246, 241, 231, 0.6); }
.cd-others { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.cd-other {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 4px 8px 4px 4px;
  border-radius: 6px; text-align: left; color: #f3eee2;
}
.cd-other:hover { background: rgba(255, 255, 255, 0.07); }
.cd-other .cd-disc { --d: 36px; flex: none; }
.cd-oname { min-width: 0; font: 17px/1.1 var(--hand); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cd-otrk { margin-left: auto; font: bold 11px/1.3 Arial, Helvetica, sans-serif; letter-spacing: 0.08em; color: rgba(246, 241, 231, 0.6); white-space: nowrap; }
/* the one in the drive: its slot on the shelf sits empty */
.cd-other[aria-current="true"] { cursor: default; }
.cd-other[aria-current="true"]:hover { background: none; }
.cd-other[aria-current="true"] .cd-disc { opacity: 0.25; }
.cd-shelf-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 10px; }
.cd-eject { display: inline-flex; align-items: center; gap: 6px; }
.cd-keys { font: bold 10px/1.3 Arial, Helvetica, sans-serif; letter-spacing: 0.06em; color: rgba(246, 241, 231, 0.62); }

/* ------------------------------------------------ phones and narrow windows */
/* stacked: drive, then the screen, then the J-card and shelf; phones held sideways too, where
   the drive and J-card beside the screen are taller than the window (discs.js has the same query) */
@media (max-width: 599px), (max-width: 859px) and (orientation: portrait), (max-height: 520px) and (max-width: 959px) {
  .cd-player { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "deck" "main" "list"; row-gap: 10px; }
  .cd-host[data-mode="player"] .cd-box { width: 100%; }
  .cd-deck, .cd-list { border-radius: 6px; }
  .cd-deck { padding: 12px 10px 10px; }
  .cd-list { padding-top: 2px; }
  .cd-main { align-self: start; }
}
@media (min-width: 600px) and (max-width: 859px) and (orientation: portrait), (min-width: 600px) and (max-width: 959px) and (max-height: 520px) {
  .cd-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; align-items: start; }
}
@media (max-width: 599px) {
  .cd-wallet { --r: 18px; padding: 20px 14px 16px; }
  .cd-sleeves { column-gap: 22px; padding: 0; }
  .cd-title { font-size: 20px; }
  .cd-tally { font-size: 13px; }
  .cd-note { font-size: 17px; }
  /* in a column the left half's basis would be a height: it takes what it needs, and the
     count and buttons follow straight on */
  .cd-cap { flex-direction: column; justify-content: flex-start; gap: 6px; }
  .cd-cap-l { flex: none; }
  .cd-x { top: -8px; right: -8px; }
}
/* phones held sideways: the screen first, as big as the window, then the drive, J-card and
   shelf below the fold (discs.js has the same query) */
@media (max-height: 520px) and (max-width: 959px) and (orientation: landscape) {
  .cd-player { grid-template-areas: "main" "deck" "list"; }
}
/* and the wallet in one row, every pocket as tall as the window allows, the spine between
   the pages (discs.js sets --n, the pockets) */
@media (max-height: 520px) and (orientation: landscape) {
  .cd-sleeves { grid-template-columns: repeat(var(--n), minmax(0, 1fr)); column-gap: 14px; }
  @supports (height: 100dvh) {
    .cd-wallet { width: min(600px, calc(100vw - 32px), calc(var(--n) * (100dvh - 235px) + 116px)); }
  }
}
/* fingers: rows and buttons big enough to hit, 44px or more */
@media (pointer: coarse) {
  .cd-jcard { --row: 44px; }
  .cd-cap .gl-btn { padding: 15px 14px; } /* 12px type + 30px + the border: 44px, without touching their display */
  .cd-eject { padding: 10px 14px; min-height: 44px; }
  .cd-host .gl-nav span { width: 44px; height: 44px; }
  .cd-x::before { content: ""; position: absolute; inset: -10px; border-radius: 50%; } /* 46px round a 32px button */
  .cd-keys { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cd-back, .cd-wallet, .cd-player, .cd-box.cd-swap .cd-img, .cd-box.cd-swap .cd-play { animation: cd-fade 0.2s ease-out both; }
  .cd-play-btn { transition: none; }
  .cd-play:hover .cd-play-btn, .cd-play:focus-visible .cd-play-btn, .cd-play:active .cd-play-btn { transform: none; }
  .cd-box { animation: cd-fade 0.2s ease-out both; }
  .cd-host[data-mode="player"] .cd-box { animation: cd-fade 0.2s ease-out both, cd-frame 0.2s ease-out both; }
  .cd-seat, .cd-disc::after, .cd-tray { transition: none; }
  .cd-pick:hover .cd-seat, .cd-pick:focus-visible .cd-seat { transform: translate(var(--dx, 0%), var(--dy, 0%)); filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3)) brightness(1.08); }
  .cd-pick:hover .cd-disc::after, .cd-pick:focus-visible .cd-disc::after { transform: none; }
  .cd-led-blink .cd-led { animation: none; }
}