:root {
  color-scheme:light dark;
  --paper:#f3efe7;
  --ink:#22241f;
  --accent:#315fa8;
  --muted:rgba(34,36,31,.52);
  --line:rgba(34,36,31,.18);
  --grain:rgba(30,31,27,.2);
  --shelf:#383e48;
  --shelf-edge:#1d222a;
}
* { box-sizing:border-box; }
html { min-height:100%; background:var(--paper); }
body { margin:0; min-height:100%; background:var(--paper); color:var(--ink); font-family:"Iowan Old Style","Palatino Linotype",Palatino,serif; }
body::before { content:""; position:fixed; inset:0; z-index:50; pointer-events:none; opacity:.24; background-image:radial-gradient(var(--grain) .5px,transparent .7px); background-size:5px 5px; }
a { color:inherit; text-decoration-color:rgba(49,95,168,.62); text-decoration-thickness:1px; text-underline-offset:.18em; }
a:hover,a:focus-visible { color:var(--accent); outline:none; }
button,select { color:inherit; font:inherit; }
.page-header { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:28px 5vw 0; }
.site-name { font-size:14px; text-decoration:none; }
.discogs-profile { font:10px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace; color:var(--muted); }
main { width:min(1480px,100%); margin:0 auto; padding:clamp(58px,8vh,112px) 5vw 88px; }
.title-row { display:flex; align-items:baseline; gap:22px; margin-bottom:clamp(38px,6vh,72px); }
h1 { margin:0; font-weight:400; font-size:clamp(68px,10vw,154px); line-height:.78; letter-spacing:-.065em; }
.title-row p { margin:0; font:10px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace; color:var(--muted); }
.controls { display:flex; align-items:center; gap:20px; min-height:32px; margin-bottom:9px; font:10px/1 ui-monospace,SFMono-Regular,Menlo,monospace; color:var(--muted); }
.sorts { display:flex; gap:14px; }
.controls button,.controls select { appearance:none; border:0; border-radius:0; padding:4px 0; background:transparent; cursor:pointer; }
.controls button { border-bottom:1px solid transparent; }
.controls button:hover,.controls button:focus-visible,.controls button.active { color:var(--ink); border-color:var(--accent); outline:none; }
.genre-control { position:relative; padding-right:12px; }
.genre-control::after { content:"⌄"; position:absolute; right:0; top:3px; pointer-events:none; }
.controls select { max-width:142px; padding-right:4px; }
.controls select:focus-visible { color:var(--ink); outline:1px solid var(--accent); outline-offset:4px; }
.shuffle { margin-left:auto; }
.collection { position:relative; }

.shelf-window { position:relative; overflow-x:auto; overflow-y:hidden; padding:72px 28px 25px; margin:0 -28px; scroll-behavior:smooth; scrollbar-width:thin; scrollbar-color:var(--line) transparent; perspective:1400px; perspective-origin:50% 38%; overscroll-behavior-x:contain; }
.shelf { --sleeve-size:clamp(230px,22vw,304px); --sleeve-depth:14px; position:relative; display:flex; align-items:flex-end; width:max-content; min-width:100%; height:calc(var(--sleeve-size) + 70px); padding:0 24px 29px; isolation:isolate; transform-style:preserve-3d; }
.shelf::before { content:""; position:absolute; left:0; right:0; bottom:4px; height:10px; z-index:30; border-radius:2px; background:linear-gradient(180deg,#59616d 0,var(--shelf) 45%,var(--shelf-edge) 100%); box-shadow:0 12px 20px rgba(18,22,28,.25),inset 0 1px rgba(255,255,255,.25); }
.shelf::after { content:""; position:absolute; left:2px; right:2px; bottom:13px; height:15px; z-index:29; background:linear-gradient(180deg,rgba(255,255,255,.23),rgba(255,255,255,.03)),var(--shelf); clip-path:polygon(.5% 0,99.5% 0,100% 100%,0 100%); box-shadow:0 -1px rgba(15,20,26,.24); }

.record-slot { --fallback:#596c84; --spine-ink:#fff; --spine-shadow:rgba(0,0,0,.78); --slot-width:13px; --lean:89deg; --record-size:var(--sleeve-size); --tilt-x:-7deg; --tilt-y:24deg; position:relative; z-index:1; flex:0 0 var(--slot-width); width:var(--slot-width); height:var(--sleeve-size); margin:0 1px 0 0; padding:0; overflow:visible; border:0; background:transparent; cursor:pointer; transform-style:preserve-3d; }
.record-object { position:absolute; left:50%; bottom:0; width:var(--record-size); height:var(--record-size); pointer-events:none; transform-style:preserve-3d; transform:translateX(-50%) translateY(0) translateZ(0); transform-origin:bottom center; transition:left .72s cubic-bezier(.18,.78,.18,1),transform .72s cubic-bezier(.18,.78,.18,1),filter .3s ease; will-change:left,transform; }
.record-model { position:absolute; inset:0; display:block; transform-style:preserve-3d; transform:rotateX(0) rotateY(var(--lean)); transition:transform .78s cubic-bezier(.18,.78,.18,1); will-change:transform; }
.record-media { position:absolute; display:block; backface-visibility:hidden; pointer-events:none; transform:translateZ(0); }
.vinyl-media { top:1%; left:18%; width:98%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle at center,var(--fallback) 0 9%,#eee9df 9.5% 11.5%,transparent 12%),repeating-radial-gradient(circle at center,transparent 0 3px,rgba(255,255,255,.08) 3px 3.8px),linear-gradient(135deg,var(--disc-color-a,#111315),var(--disc-color-b,#111315)); box-shadow:0 3px 7px rgba(0,0,0,.42),inset 0 0 0 1px rgba(255,255,255,.12); }
.disc-clear .vinyl-media { opacity:.78; box-shadow:0 3px 7px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.52); }
.disc-marble .vinyl-media { background:radial-gradient(circle at center,var(--fallback) 0 9%,#eee9df 9.5% 11.5%,transparent 12%),repeating-radial-gradient(circle at center,transparent 0 3px,rgba(255,255,255,.08) 3px 3.8px),conic-gradient(from 38deg,var(--disc-color-a) 0 12%,var(--disc-color-b) 18% 28%,var(--disc-color-a) 38% 56%,var(--disc-color-b) 65% 78%,var(--disc-color-a) 88%); }
.disc-splatter .vinyl-media { background:radial-gradient(circle at center,var(--fallback) 0 9%,#eee9df 9.5% 11.5%,transparent 12%),radial-gradient(circle at 26% 31%,var(--disc-color-b) 0 2%,transparent 2.8%),radial-gradient(circle at 72% 24%,var(--disc-color-b) 0 3%,transparent 3.8%),radial-gradient(circle at 67% 72%,var(--disc-color-b) 0 2.4%,transparent 3.2%),radial-gradient(circle at 31% 77%,var(--disc-color-b) 0 3.6%,transparent 4.3%),repeating-radial-gradient(circle at center,transparent 0 3px,rgba(255,255,255,.07) 3px 3.8px),var(--disc-color-a); }
.disc-picture .vinyl-media { background-image:radial-gradient(circle at center,var(--fallback) 0 7%,#eee9df 7.5% 10%,transparent 10.5%),var(--cover); background-position:center; background-size:cover; }
.cd-media { top:7%; left:28%; width:86%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle at center,transparent 0 4.5%,rgba(250,251,248,.96) 5% 10%,rgba(143,151,154,.42) 10.5% 11.5%,transparent 12%),radial-gradient(circle at 31% 27%,rgba(255,255,255,.92),transparent 25%),conic-gradient(from 18deg,#c8cfd1,#f7eaf1 13%,#b9ddda 25%,#ecebd8 39%,#c2c6d2 53%,#efdde9 67%,#bad7dc 82%,#d9dcda); box-shadow:0 4px 9px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.72); }
.cassette-media { top:28%; left:30%; width:72%; height:45%; border-radius:6%; background:radial-gradient(circle at 31% 48%,#e9e5dc 0 7%,#272b30 7.5% 15%,#b9b6ad 15.5% 19%,transparent 19.5%),radial-gradient(circle at 69% 48%,#e9e5dc 0 7%,#272b30 7.5% 15%,#b9b6ad 15.5% 19%,transparent 19.5%),linear-gradient(155deg,rgba(255,255,255,.72),rgba(112,125,134,.5)); border:1px solid rgba(255,255,255,.7); box-shadow:0 4px 9px rgba(0,0,0,.3),inset 0 0 0 2px rgba(33,39,45,.14); }
.media-cd { --sleeve-depth:10px; }
.media-cassette { --sleeve-depth:12px; }
.record-face { position:absolute; display:block; overflow:hidden; backface-visibility:hidden; background-color:var(--fallback); }
.record-front,.record-back { inset:0; background-image:var(--cover,linear-gradient(135deg,var(--fallback),#23272b)); background-position:center; background-size:cover; box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),0 0 0 1px rgba(16,17,16,.24); }
.record-front { transform:translateZ(calc(var(--sleeve-depth) / 2)); }
.record-front::after { content:""; position:absolute; inset:0; background:linear-gradient(115deg,rgba(255,255,255,.16),transparent 22% 77%,rgba(0,0,0,.12)); opacity:.42; }
.record-back { transform:rotateY(180deg) translateZ(calc(var(--sleeve-depth) / 2)); filter:brightness(.45) saturate(.72); }
.record-spine-left,.record-spine-right { top:0; left:50%; width:var(--sleeve-depth); height:100%; box-shadow:inset 0 0 0 1px rgba(255,255,255,.22); }
.record-spine-left { background:linear-gradient(90deg,rgba(0,0,0,.3),rgba(255,255,255,.28) 22%,transparent 45% 76%,rgba(0,0,0,.24)),var(--fallback); }
.record-spine-left::after { content:""; position:absolute; top:0; bottom:0; right:1px; width:1px; background:rgba(244,239,226,.56); box-shadow:-1px 0 rgba(0,0,0,.14); }
.record-spine-right { background:linear-gradient(90deg,#d7cfc1 0 16%,#f4ede2 16% 23%,#101112 24% 76%,#ede5d9 77% 84%,#b8afa1 85% 100%); }
.record-spine-right::after { content:""; position:absolute; inset:12% 35%; background:repeating-linear-gradient(90deg,#080909 0 1px,#262728 1px 2px); opacity:.9; }
.record-spine-left { transform:translateX(-50%) rotateY(-90deg) translateZ(calc(var(--record-size) / 2)); }
.record-spine-right { transform:translateX(-50%) rotateY(90deg) translateZ(calc(var(--record-size) / 2)); }
.record-edge { left:0; top:50%; width:100%; height:var(--sleeve-depth); background:repeating-linear-gradient(90deg,#f0e9dc 0 4px,#d2c9bb 4px 5px),linear-gradient(180deg,#f7f1e7,#9d9589); box-shadow:inset 0 0 0 1px rgba(70,63,55,.2); }
.record-edge-top { transform:translateY(-50%) rotateX(90deg) translateZ(calc(var(--record-size) / 2)); }
.record-edge-bottom { transform:translateY(-50%) rotateX(-90deg) translateZ(calc(var(--record-size) / 2)); }
.spine-type { position:absolute; inset:9px 2px; display:block; overflow:hidden; color:var(--spine-ink); font:600 5.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.01em; text-align:left; text-shadow:0 1px 2px var(--spine-shadow),0 0 3px var(--spine-shadow); writing-mode:vertical-rl; transform:rotate(180deg); white-space:nowrap; text-overflow:ellipsis; opacity:1; }
.record-slot:hover,.record-slot:focus-visible { z-index:2; outline:none; }
.record-slot.selected { z-index:1; }
.record-slot.selected .record-spine-left { box-shadow:inset 0 0 0 1px rgba(255,255,255,.32),0 0 0 1px var(--accent); }
.shelf-hint { min-height:1.3em; margin:8px 0 0; font:9px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace; color:var(--muted); }
.hover-preview { --record-size:118px; --sleeve-depth:6px; --tilt-x:-6deg; --tilt-y:28deg; position:fixed; z-index:70; width:var(--record-size); height:var(--record-size); pointer-events:none; perspective:900px; transform:translateX(-50%) translateY(8px) scale(.94); transform-style:preserve-3d; opacity:0; transition:opacity .1s ease,transform .24s cubic-bezier(.18,.78,.18,1); }
.hover-preview.visible { opacity:1; transform:translateX(-50%) translateY(0) scale(1); }
.hover-preview.media-cd { --sleeve-depth:5px; }
.hover-preview.media-cassette { --sleeve-depth:5px; }
.hover-preview .record-object { position:relative; left:auto; bottom:auto; display:block; width:100%; height:100%; transform:none; filter:drop-shadow(10px 12px 9px rgba(18,22,28,.24)); }
.hover-preview .record-model { transform:rotateX(var(--tilt-x)) rotateY(var(--tilt-y)); }

.record-detail { display:grid; grid-template-columns:minmax(280px,420px) minmax(0,1fr); align-items:center; gap:clamp(54px,8vw,128px); max-width:1080px; margin:clamp(64px,9vh,112px) auto 24px; text-align:left; }
.record-detail[hidden] { display:none; }
.record-stage { --record-size:clamp(280px,31vw,390px); --sleeve-depth:6px; --tilt-x:-7deg; --tilt-y:24deg; position:relative; width:var(--record-size); height:var(--record-size); justify-self:center; padding:0; border:0; background:transparent; perspective:1300px; transform-style:preserve-3d; cursor:grab; touch-action:none; }
.record-stage.media-cd { --sleeve-depth:7px; }
.record-stage.media-cassette { --sleeve-depth:9px; }
.record-stage:focus-visible { outline:1px solid var(--accent); outline-offset:14px; }
.record-stage .record-object { position:relative; left:auto; bottom:auto; display:block; width:100%; height:100%; pointer-events:auto; transform:none; filter:drop-shadow(22px 26px 20px rgba(18,22,28,.36)); }
.record-stage .record-model { transform:rotateX(var(--tilt-x)) rotateY(var(--tilt-y)); }
.record-stage .vinyl-media { --media-depth:2px; transform:translateZ(calc(var(--media-depth) / 2)); transform-style:preserve-3d; backface-visibility:visible; }
.record-stage .cd-media { --media-depth:1px; transform:translateZ(calc(var(--media-depth) / 2)); transform-style:preserve-3d; backface-visibility:visible; }
.record-stage .vinyl-media.has-depth::before,.record-stage .cd-media.has-depth::before { content:""; position:absolute; inset:0; border-radius:50%; transform:translateZ(calc(-1 * var(--media-depth))) rotateY(180deg); backface-visibility:hidden; box-shadow:inset 0 0 0 1px rgba(255,255,255,.1); }
.record-stage .vinyl-media.has-depth::before { background:repeating-radial-gradient(circle at center,transparent 0 3px,rgba(255,255,255,.06) 3px 3.8px),linear-gradient(135deg,var(--disc-color-a,#111315),var(--disc-color-b,#111315)); }
.record-stage .cd-media.has-depth::before { background:radial-gradient(circle at center,transparent 0 4.5%,rgba(245,247,245,.9) 5% 10%,transparent 10.5%),conic-gradient(from 190deg,#bfc8ca,#eee3eb 18%,#b5d5d3 38%,#e6e5d5 57%,#bcc1cd 76%,#d9dcda); }
.media-cylinder-edge { position:absolute; inset:0; transform:translateZ(calc(-.5 * var(--media-depth))); transform-style:preserve-3d; pointer-events:none; }
.media-edge-facet { position:absolute; display:block; width:6.58%; height:var(--media-depth); margin:0; background:color-mix(in srgb,var(--disc-color-a,#111315) 38%,#090a0b); box-shadow:inset 0 1px rgba(255,255,255,.1); backface-visibility:visible; }
.record-stage .cd-media .media-edge-facet { background:linear-gradient(180deg,#f0f3f1,#8f999e 45%,#d8dddc); }
.record-stage.dragging { cursor:grabbing; }
.record-stage.dragging .record-object { filter:drop-shadow(28px 32px 24px rgba(18,22,28,.42)); }
.record-stage.dragging .record-model { transition:none; }
.record-detail:not([hidden]) .record-stage { animation:stage-arrive .36s ease-out both; }
.record-detail:not([hidden]) .record-copy { animation:copy-arrive .55s .14s ease-out both; }
.record-copy.is-refreshing { animation:none !important; opacity:0; }
@keyframes stage-arrive { from { opacity:0; } to { opacity:1; } }
@keyframes copy-arrive { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
.eyebrow { margin:0; font:10px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace; color:var(--muted); }
.record-copy h2 { margin:20px 0 7px; max-width:12ch; font-size:clamp(46px,6.4vw,88px); font-weight:400; line-height:.92; letter-spacing:-.052em; text-wrap:balance; }
.artist { margin:0; font-size:clamp(20px,2.2vw,31px); color:var(--accent); }
footer { display:flex; justify-content:space-between; gap:36px; padding:24px 5vw 32px; border-top:1px solid var(--line); font:8px/1.45 ui-monospace,SFMono-Regular,Menlo,monospace; color:var(--muted); }
.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(max-width:700px) {
  .page-header { padding:22px 22px 0; }
  .discogs-profile { font-size:8px; }
  main { padding:68px 22px 62px; overflow:hidden; }
  .title-row { align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:44px; }
  h1 { font-size:clamp(62px,22vw,100px); }
  .title-row p { padding-bottom:2px; text-align:right; }
  .controls { flex-wrap:wrap; gap:13px 18px; margin-bottom:4px; }
  .shuffle { margin-left:auto; }
  .genre-control { order:3; width:100%; margin-top:2px; }
  .genre-control::after { left:118px; right:auto; }
  .shelf-window { padding:58px 22px 18px; margin:0 -22px; scroll-padding:50%; perspective:900px; }
  .shelf { --sleeve-size:210px; --sleeve-depth:11px; height:292px; padding-left:12px; padding-right:calc(50vw - 18px); }
  .record-slot { --slot-width:11px; --tilt-x:-5deg; --tilt-y:20deg; }
  .record-slot:hover .record-object { transform:translateX(-50%); filter:none; }
  .record-slot:hover .record-model { transform:rotateY(var(--lean)); }
  .hover-preview { display:none; }
  .record-detail { grid-template-columns:1fr; gap:48px; margin-top:62px; text-align:left; }
  .record-stage { --record-size:min(76vw,310px); }
  .record-copy h2 { margin-left:0; font-size:clamp(43px,14vw,68px); }
  footer { flex-direction:column; padding:22px; }
}
@media(prefers-color-scheme:dark) {
  :root { --paper:#15181d; --ink:#edf0f5; --accent:#79a9f5; --muted:rgba(237,240,245,.56); --line:rgba(237,240,245,.2); --grain:rgba(237,240,245,.15); --shelf:#4b5360; --shelf-edge:#242a33; }
  a { text-decoration-color:rgba(121,169,245,.74); }
  .record-stage .record-object { filter:drop-shadow(20px 25px 24px rgba(0,0,0,.58)); }
}
@media(prefers-reduced-motion:reduce) {
  * { scroll-behavior:auto !important; }
  .record-object,.record-model { transition:none !important; }
  .record-stage,.record-copy { animation:none !important; }
}

/* Cosmic collection pass — the interaction and physical media stay intact,
   while the room around the shelf now belongs to the same night sky. */
:root {
  color-scheme: dark;
  --paper:#02040b;
  --ink:#f4f6ff;
  --accent:#a8c8ff;
  --muted:rgba(224,230,248,.6);
  --line:rgba(196,213,255,.18);
  --grain:transparent;
  --shelf:#171e2e;
  --shelf-edge:#070a12;
}
html,body { background:transparent; color:var(--ink); }
body::before { z-index:-1; opacity:1; background:rgba(1,3,10,.25); }
a { text-decoration-color:rgba(158,194,255,.74); }
main { position:relative; }
.page-header { position:relative; z-index:40; }
.title-row h1 { color:#f8f9ff; text-shadow:0 0 38px rgba(115,158,255,.1); }
.title-row p,.discogs-profile { color:var(--muted); }
.controls { color:rgba(224,230,248,.54); }
.controls button:hover,.controls button:focus-visible,.controls button.active { color:#fff; border-color:var(--accent); text-shadow:0 0 10px rgba(120,169,255,.38); }
.controls select option { background:#0b1020; color:#fff; }
.shelf-window { scrollbar-color:rgba(164,191,255,.26) transparent; }
.shelf::before {
  background:linear-gradient(180deg,#2b354a 0,#151b29 42%,#070a11 100%);
  box-shadow:0 18px 36px rgba(0,0,0,.65),0 0 28px rgba(67,104,190,.1),inset 0 1px rgba(223,232,255,.22);
}
.shelf::after {
  background:linear-gradient(180deg,rgba(212,225,255,.19),rgba(79,101,151,.05)),#151b28;
  box-shadow:0 -1px rgba(202,217,255,.16),0 -9px 35px rgba(74,111,200,.07);
}
.record-slot.selected .record-spine-left { box-shadow:inset 0 0 0 1px rgba(255,255,255,.32),0 0 0 1px var(--accent),0 0 12px rgba(120,169,255,.26); }
.hover-preview .record-object { filter:drop-shadow(12px 15px 12px rgba(0,0,0,.58)); }
.record-stage .record-object { filter:drop-shadow(22px 28px 24px rgba(0,0,0,.68)); }
.record-stage.dragging .record-object { filter:drop-shadow(28px 34px 28px rgba(0,0,0,.72)); }
.record-copy h2 { color:#fff; text-shadow:0 0 26px rgba(120,166,255,.1); }
.artist { color:var(--accent); }
footer { border-color:var(--line); }

/* Orbital listening room. The shelf is the interface; everything around it
   recedes into one compact control rail and a single selected-record view. */
body::before {
  background:
    radial-gradient(ellipse 48% 22% at 50% 66%,rgba(77,119,218,.11),transparent 72%),
    rgba(1,3,10,.18);
}
.page-header { padding-top:30px; }
main {
  width:100%;
  padding:clamp(42px,7vh,92px) 0 96px;
}
.title-row {
  display:block;
  margin:0 5vw clamp(28px,4vh,46px);
  text-align:center;
}
h1 {
  font-size:clamp(78px,11.4vw,168px);
  line-height:.84;
  letter-spacing:-.072em;
}
.collection { isolation:isolate; }
.collection::before {
  content:"";
  position:absolute;
  z-index:-1;
  top:112px;
  right:4vw;
  bottom:6px;
  left:4vw;
  pointer-events:none;
  background:radial-gradient(ellipse at 50% 72%,rgba(96,140,255,.13),transparent 56%);
  filter:blur(18px);
}
.controls {
  width:max-content;
  max-width:calc(100% - 44px);
  min-height:44px;
  margin:0 auto;
  padding:7px 10px;
  gap:4px;
  border:1px solid rgba(192,211,255,.16);
  border-radius:999px;
  background:linear-gradient(180deg,rgba(23,32,54,.76),rgba(8,13,25,.72));
  box-shadow:0 16px 46px rgba(0,0,0,.25),inset 0 1px rgba(255,255,255,.08),0 0 38px rgba(91,139,255,.055);
  color:rgba(231,237,255,.72);
  font:13px/1 var(--serif);
  backdrop-filter:blur(18px) saturate(1.2);
  -webkit-backdrop-filter:blur(18px) saturate(1.2);
}
.sorts { gap:2px; }
.controls button,.controls select {
  min-height:30px;
  padding:6px 12px;
  border-radius:999px;
  transition:color .2s ease,background .2s ease,box-shadow .2s ease;
}
.controls button { border:0; }
.controls button:hover,.controls button:focus-visible,.controls button.active {
  border:0;
  background:rgba(155,190,255,.11);
  color:#fff;
  box-shadow:inset 0 0 0 1px rgba(176,205,255,.12),0 0 18px rgba(95,145,255,.09);
  text-shadow:none;
}
.genre-control {
  margin-left:5px;
  padding:0 6px 0 7px;
  border-left:1px solid rgba(195,213,255,.13);
}
.genre-control::after { right:9px; top:9px; color:rgba(224,233,255,.48); }
.controls select { max-width:154px; padding-right:25px; }
.controls select:focus-visible { outline:0; background:rgba(155,190,255,.11); }
.shuffle {
  margin-left:0;
  border-left:1px solid rgba(195,213,255,.13) !important;
  border-radius:0 999px 999px 0 !important;
}
.shelf-window {
  margin:0;
  padding:clamp(94px,12vh,142px) 5vw 48px;
  perspective:1600px;
  perspective-origin:50% 42%;
  scrollbar-width:none;
  mask-image:linear-gradient(90deg,transparent 0,#000 3.5%,#000 96.5%,transparent 100%);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 3.5%,#000 96.5%,transparent 100%);
}
.shelf-window::-webkit-scrollbar { display:none; }
.shelf {
  --sleeve-size:clamp(158px,14vw,205px);
  min-width:100%;
  height:calc(var(--sleeve-size) + 56px);
  padding-right:5vw;
  padding-bottom:27px;
  padding-left:5vw;
}
.shelf::before {
  right:1.2vw;
  left:1.2vw;
  bottom:1px;
  height:15px;
  border:1px solid rgba(191,213,255,.16);
  border-radius:999px;
  background:linear-gradient(180deg,rgba(90,111,155,.72),rgba(20,28,45,.92) 43%,rgba(4,7,14,.98));
  box-shadow:0 22px 40px rgba(0,0,0,.68),0 8px 45px rgba(68,110,222,.16),inset 0 1px rgba(235,242,255,.28);
}
.shelf::after {
  right:1.8vw;
  left:1.8vw;
  bottom:15px;
  height:22px;
  border-radius:5px 5px 1px 1px;
  background:linear-gradient(180deg,rgba(164,190,247,.18),rgba(42,56,90,.08) 45%,rgba(7,12,23,.74));
  box-shadow:inset 0 1px rgba(227,237,255,.2),0 -12px 48px rgba(80,126,237,.08);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.hover-preview { --record-size:142px; }
.record-detail {
  grid-template-columns:minmax(280px,440px) minmax(0,520px);
  justify-content:center;
  gap:clamp(54px,8vw,132px);
  min-height:clamp(270px,38vh,350px);
  margin:clamp(8px,1.8vh,18px) 5vw 8px;
}
.record-stage { --record-size:clamp(242px,34vh,340px); }
.record-copy h2 { margin:0 0 9px; max-width:13ch; }
.artist { margin:0; }
footer {
  justify-content:center;
  padding:20px 5vw 34px;
  border:0;
  font:11px/1.4 var(--serif);
}
footer a { color:rgba(216,226,249,.44); text-decoration:none; }
footer a:hover,footer a:focus-visible { color:#fff; }

@media(max-width:700px) {
  main { padding-top:56px; }
  .title-row { margin-bottom:30px; }
  h1 { font-size:clamp(72px,24vw,112px); }
  .controls {
    display:grid;
    grid-template-columns:auto auto;
    width:calc(100% - 44px);
    padding:8px;
    border-radius:24px;
  }
  .sorts { grid-column:1 / -1; justify-content:center; }
  .genre-control { margin:0; padding:0; border:0; }
  .genre-control { grid-column:1; grid-row:2; order:0; }
  .genre-control::after { right:12px; left:auto; top:9px; }
  .controls select { width:100%; max-width:none; }
  .shuffle { grid-column:2; grid-row:2; order:0; margin:0; border-left:1px solid rgba(195,213,255,.13) !important; }
  .shelf-window {
    margin:0;
    padding:82px 22px 38px;
    mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  }
  .shelf {
    --sleeve-size:220px;
    height:308px;
    padding-right:calc(50vw - 18px);
    padding-left:22px;
  }
  .record-detail { gap:42px; margin:54px 22px 0; text-align:center; }
  .record-detail { grid-template-columns:1fr; justify-items:center; }
  .record-copy { width:100%; min-width:0; text-align:center; }
  .record-copy h2 { margin-right:auto; margin-left:auto; }
  .record-copy h2 { max-width:11ch; font-size:clamp(42px,14vw,70px); }
  footer { flex-direction:row; align-items:center; text-align:center; }
}

/* Quiet orbital shelf: the collection itself is the page title. */
.page-header {
  position:fixed;
  z-index:100;
  top:0;
  right:0;
  left:0;
  padding:28px 5vw 0;
  pointer-events:none;
}
.record-home-link { pointer-events:auto; }
main { padding:clamp(54px,6vh,72px) 0 96px; }
.shelf-window { padding-top:clamp(30px,4.5vh,48px); padding-bottom:22px; }
.collection::before { top:42px; }
.record-stage::before {
  content:"";
  position:absolute;
  z-index:-1;
  inset:13%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(105,153,255,.19),rgba(75,112,213,.07) 42%,transparent 72%);
  filter:blur(22px);
  transform:translateY(13%) scale(.9);
  animation:record-orbit-glow 9.5s ease-in-out infinite;
  pointer-events:none;
}
.record-detail:not([hidden]) .record-stage .record-object {
  animation:record-orbit-float 9.5s ease-in-out infinite;
}
.record-stage.dragging .record-object { animation-play-state:paused; }
.record-stage {
  transition:opacity .22s ease,transform .22s cubic-bezier(.2,.72,.2,1);
}

/* The shelf is a fixed piece of the room. Selecting changes only the object
   below it, so the collection never reshapes or shifts under the pointer. */

@keyframes record-orbit-float {
  0%,100% { transform:translate3d(0,1px,0); }
  50% { transform:translate3d(0,-5px,0); }
}
@keyframes record-orbit-glow {
  0%,100% { opacity:.54; transform:translateY(12%) scale(.98); }
  50% { opacity:.72; transform:translateY(11%) scale(1.02); }
}

@media(max-width:700px) {
  .page-header { top:0; padding:22px 22px 0; }
  main { padding-top:70px; }
  .shelf-window { padding-top:34px; padding-bottom:16px; }
  .shelf { --sleeve-size:150px; height:205px; }
  .record-detail { min-height:0; margin-top:16px; }
  .record-stage { --record-size:min(72vw,280px); }
}
@media(min-width:701px) and (max-height:650px) {
  /* The expanded home constellation occupies the upper-left sky. Keep the
     physical shelf below that navigation footprint on short desktop windows. */
  .shelf-window { padding-top:78px; }
}
@media(prefers-reduced-motion:reduce) {
  .record-stage::before,.record-stage .record-object { animation:none !important; }
}