:root {
  --cream:#f4efe5; --orange:#f15c37; --muted:#aa9c91;
}
* { box-sizing:border-box; }
body { margin:0; background:#171211; color:var(--cream); font-family:Manrope,Arial,sans-serif; }
.app-shell { min-height:100vh; overflow:hidden; background:radial-gradient(ellipse 70% 70% at 73% 44%,#533426,#251916 45%,#15100f 80%); }
.topbar { height:82px; padding:0 clamp(22px,5vw,86px); display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #ffffff18; }
.wordmark { color:var(--cream); text-decoration:none; font:32px Georgia,serif; display:flex; gap:7px; align-items:center; }
.wordmark i { display:block; width:15px; height:15px; border:4px solid var(--orange); border-radius:50%; }
.session-status { margin-left:100px; color:var(--muted); font:10px monospace; letter-spacing:.14em; text-transform:uppercase; }
.session-status span { display:inline-block; width:7px; height:7px; margin-right:8px; border-radius:50%; background:#dc7655; }
.topbar-actions { display:flex; align-items:center; gap:9px; }
.fullscreen-toggle { display:flex; align-items:center; gap:8px; padding:10px 13px; border:1px solid #ffffff30; border-radius:2px; background:#ffffff0b; color:#f4ede4; cursor:pointer; }
.fullscreen-toggle span { font-size:18px; line-height:1; }
.fullscreen-toggle em { font:600 10px Manrope; font-style:normal; letter-spacing:.04em; text-transform:uppercase; }
.fullscreen-toggle:hover { background:#ffffff18; }
.fullscreen-toggle.unavailable { display:none; }
.spotify-connect,.spotify-auth { padding:11px 16px; border:1px solid #ffffff30; border-radius:2px; background:#ffffff10; color:white; font:600 12px Manrope; cursor:pointer; }
.spotify-connect b,.spotify-auth b { color:#1ed760; font-size:17px; margin-right:5px; }
.listening-room { min-height:610px; max-width:1500px; margin:auto; padding:45px clamp(22px,7vw,130px) 52px; display:grid; grid-template-columns:42% 58%; align-items:center; }
.room-copy { z-index:3; }
.eyebrow { margin:0 0 16px; color:#d77b5e; font:10px monospace; letter-spacing:.16em; }
.room-copy h1,.collection h2,dialog h2 { margin:0; font:clamp(45px,5vw,78px)/.96 Georgia,serif; letter-spacing:-.045em; }
.artist { margin:18px 0 50px; color:#b7aa9f; font:15px monospace; }
.artist span { padding:0 5px; color:var(--orange); }
.track-reading { width:min(330px,90%); padding-left:17px; border-left:1px solid #cf775b; }
.track-reading p { margin:0 0 12px; font-size:15px; }
.time-row { display:flex; align-items:center; gap:9px; color:#a99a8f; font:10px monospace; }
.scrub { flex:1; height:2px; background:#ffffff2a; cursor:pointer; }.scrub i { display:block; height:100%; width:0; background:#e77b56; }
.transport { display:flex; align-items:center; gap:21px; margin-top:35px; }.transport button { border:0; background:none; color:white; font:24px Georgia; cursor:pointer; }
.transport .play-pause { position:relative; width:47px; height:47px; padding:0; border-radius:50%; background:var(--orange); }.play-pause span { position:absolute; top:15px; left:19px; border-top:9px solid transparent; border-bottom:9px solid transparent; border-left:14px solid #241b18; }
.is-playing .play-pause span { top:15px; left:17px; width:13px; height:17px; border:0; border-left:4px solid #241b18; border-right:4px solid #241b18; }.hint { margin-top:30px; color:#8c7d71; font-size:11px; }
.turntable-wrap { position:relative; display:flex; height:510px; align-items:center; justify-content:center; }.ambient-glow { position:absolute; bottom:0; width:520px; height:390px; background:#ec755845; filter:blur(70px); }
.turntable { position:relative; width:min(560px,46vw); height:400px; transform:rotateX(5deg) rotateZ(-3deg); filter:drop-shadow(16px 38px 27px #0009); }
.deck-surface { position:relative; height:355px; border:7px solid #171211; border-radius:10px 10px 6px 6px; background:repeating-linear-gradient(95deg,#654635 0 2px,#3e2b23 2px 5px); box-shadow:inset 0 0 0 1px #9f725845,inset 0 0 35px #0009; }
.front-panel { display:flex; align-items:center; gap:25px; height:57px; margin:-2px 11px 0; padding:0 28px; border-radius:0 0 8px 8px; background:#170f0e; }.knob { width:25px; height:25px; border:4px solid #5d463c; border-radius:50%; }.speaker-grille { width:150px; height:26px; opacity:.55; background:repeating-linear-gradient(90deg,#000 0 2px,#6a5146 2px 3px); }.volume { margin-left:auto; color:#a9988d; font:8px monospace; }
.lid { position:absolute; z-index:3; top:-158px; left:13%; width:77%; height:180px; border:2px solid #e8d9c070; background:linear-gradient(135deg,#f8e3c714,#ffffff03); transform:rotateX(-17deg) rotateY(-4deg); transform-origin:bottom; box-shadow:inset 0 0 30px #fff2; }.lid:after { content:''; position:absolute; inset:9px; border:1px solid #fff3; }.lid-hinge { position:absolute; bottom:-10px; width:34px; height:11px; background:#33251f; border:1px solid #846253; }.lid-hinge.left{left:17%}.lid-hinge.right{right:17%}
.branding { position:absolute; top:24px; left:31px; color:#c4a78f; font:20px Georgia; opacity:.7; }.branding small { font:6px monospace; letter-spacing:1.4px; }
.platter-shadow,.platter { position:absolute; top:33px; left:40px; width:310px; height:310px; border-radius:50%; }.platter-shadow { background:#050404; transform:translate(7px,11px); filter:blur(7px); }.platter { background:radial-gradient(circle,#b9a894 0 5%,#292221 5.5% 63%,#a89380 64% 66%,#151111 67%); box-shadow:0 7px 5px #0008; }
.record { position:absolute; inset:12px; border-radius:50%; background:radial-gradient(circle,#332922 0 9%,#111 9.5%); box-shadow:0 0 0 2px #020202,0 4px 4px #000; }.is-playing .record { animation:spin 1.8s linear infinite; }.grooves { position:absolute; inset:12px; border-radius:50%; background:repeating-radial-gradient(circle,#ffffff0d 0 1px,transparent 2px 5px),conic-gradient(from 80deg,transparent,#fff1,transparent 35%,#fff1,transparent 70%); }.label { position:absolute; inset:34%; display:grid; place-content:center; border-radius:50%; background:#c77459; color:#261a16; text-align:center; text-transform:uppercase; font:8px monospace; box-shadow:inset 0 0 0 2px #f1bd9b; }.label small { font-size:6px; margin-top:4px; }.label i { position:absolute; inset:45%; border-radius:50%; background:#281b18; }.spindle { position:absolute; z-index:2; top:144px; left:149px; width:12px; height:23px; border-radius:50% 50% 4px 4px; background:linear-gradient(90deg,#503d34,#d5c0a7,#372923); }
.record-track { position:absolute; z-index:3; top:50%; left:50%; width:14px; height:14px; margin:-7px; border:0; border-radius:50%; background:#edb59a; color:#211816; font:7px monospace; cursor:pointer; transform:rotate(var(--angle)) translateX(calc(var(--reach)*-1)) rotate(calc(var(--angle)*-1)); opacity:.55; }.record-track.active { opacity:1; box-shadow:0 0 0 4px #f07b5538; }
.tonearm-base { position:absolute; z-index:4; top:55px; right:38px; width:48px; height:48px; border-radius:50%; background:radial-gradient(circle at 40% 40%,#c6b6a3,#392c27 45%,#191413 48%); box-shadow:1px 4px 5px #0009; }.tonearm-base i { position:absolute; inset:15px; border-radius:50%; background:#0f0c0c; }
.tonearm { --arm-angle:-35deg; position:absolute; z-index:6; top:67px; right:50px; width:246px; height:16px; transform-origin:calc(100% - 7px) 8px; transform:rotate(var(--arm-angle)); transition:transform .12s linear; }.arm-pivot { position:absolute; top:1px; right:-1px; width:15px; height:15px; border-radius:50%; background:#a89b8d; }.arm-bar { position:absolute; top:5px; right:8px; width:210px; height:8px; border-radius:8px; background:linear-gradient(#dad4cb,#77716b 48%,#e4dcd1); box-shadow:0 2px 3px #0008; }.cartridge { position:absolute; top:-1px; left:17px; width:27px; height:18px; border-radius:2px; background:#24201e; }.cartridge i { position:absolute; bottom:-9px; left:5px; width:1px; height:10px; background:#d6c7b5; }
.speed-control { position:absolute; right:33px; bottom:28px; display:flex; align-items:center; gap:6px; color:#bfaa9b; font:8px monospace; }.speed { width:23px; height:23px; border:1px solid #806556; border-radius:50%; background:#29201d; color:#d5c1b1; font:8px monospace; cursor:pointer; }.speed.active { background:#df6848; color:#231916; }.power { position:absolute; bottom:24px; left:25px; padding:8px; border:1px solid #8c6554; background:#2d211c; color:#c9b09e; font:7px monospace; cursor:pointer; }.power-light { position:absolute; bottom:54px; left:27px; width:5px; height:5px; border-radius:50%; background:#5d382e; }.is-playing .power-light { background:var(--orange); box-shadow:0 0 9px var(--orange); }
@keyframes spin { to { transform:rotate(360deg); } }
.collection { display:grid; grid-template-columns:1fr 2fr; gap:40px; align-items:center; padding:55px clamp(22px,7vw,130px) 63px; background:#eee8dc; color:#211b17; }.collection .eyebrow { color:#bc5138; }.collection h2 { font-size:40px; }.album-list { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }.album { position:relative; min-height:108px; padding:14px; overflow:hidden; border:0; background:#ded5c7; color:#271d19; text-align:left; cursor:pointer; }.album:before { content:''; position:absolute; inset:0 45% 0 0; background:var(--cover); opacity:.85; }.album span,.album small { position:relative; display:block; margin-left:43%; }.album span { font:600 11px Manrope; }.album small { margin-top:4px; color:#6e5d53; font:9px monospace; }
dialog { width:min(440px,90vw); padding:38px; border:0; background:#f3ebde; color:#251b17; box-shadow:0 25px 80px #0009; }dialog::backdrop { background:#110d0dbb; backdrop-filter:blur(6px); }dialog h2 { font-size:43px; }dialog p:not(.eyebrow) { color:#66554b; font-size:14px; line-height:1.7; }.spotify-auth { width:100%; background:#1db954; border:0; padding:14px; }.close { position:absolute; top:8px; right:12px; border:0; background:none; color:#6a5d54; font-size:27px; cursor:pointer; }dialog small { display:block; margin-top:18px; color:#8e7d70; font-size:10px; line-height:1.5; }
@media(max-width:800px) { .session-status{display:none}.listening-room{grid-template-columns:1fr;padding-top:35px}.turntable-wrap{height:410px}.turntable{width:min(560px,88vw);transform:scale(.87) rotateX(5deg) rotateZ(-3deg)}.collection{grid-template-columns:1fr} }
@media(max-width:480px) { .topbar{height:65px;padding:0 18px}.spotify-connect{font-size:0;padding:10px}.spotify-connect b{margin:0}.listening-room{padding:30px 22px 0}.artist{margin-bottom:30px}.turntable-wrap{height:330px}.turntable{transform:scale(.62) rotateX(5deg) rotateZ(-3deg);margin-top:-40px}.collection{padding:36px 22px}.album-list{gap:7px}.album{min-height:94px;padding:8px} }

/* Real Spotify metadata can be much longer than the original demo records. */
.room-copy h1 {
  max-width: 560px;
  font-size: clamp(40px, 4vw, 62px);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.artist {
  max-width: 520px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.album {
  min-width: 0;
  display: block;
}
.album span,.album small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Crate browser: artwork and metadata live in separate card columns. */
.crate-browser { min-width:0; }
.album-search { display:flex; align-items:center; gap:10px; width:100%; margin:0 0 16px; padding:0 14px; height:44px; border:1px solid #b7aa9d; background:#f7f2e9; color:#9d4b35; }
.album-search span { font:24px Georgia; line-height:1; }
.album-search input { width:100%; border:0; outline:0; background:transparent; color:#241b17; font:12px Manrope; }
.album-search input::placeholder { color:#8f8176; }
.album { display:grid; grid-template-columns:110px minmax(0,1fr); min-width:0; padding:0; align-items:stretch; }
.album:before { display:none; }
.album-cover { display:block; min-height:108px; background:var(--cover); background-size:cover; background-position:center; }
.album-meta { display:flex !important; min-width:0; margin:0 !important; padding:14px; flex-direction:column; justify-content:center; gap:4px; }
.album-meta b,.album-meta small { display:block; min-width:0; margin:0 !important; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.album-meta b { font:600 11px Manrope; }.album-meta small { color:#6e5d53; font:9px monospace; }
.empty-crate { grid-column:1 / -1; margin:10px 0; color:#746257; font-size:12px; }
.round-display-connect { align-self:start; width:max-content; margin:0 0 18px; padding:9px 13px; border:1px solid #9d4b35; background:#f7f2e9; color:#6d2c1e; font:10px monospace; letter-spacing:.05em; cursor:pointer; }
.round-display-connect.connected { border-color:#287754; color:#17613e; }
@media(max-width:800px) { .album{grid-template-columns:94px minmax(0,1fr)}.album-cover{min-height:94px} }

/* Hero hierarchy: the turntable is the product, metadata is supporting context. */
.listening-room {
  min-height: 760px;
  max-width: 1720px;
  grid-template-columns: minmax(330px,.72fr) minmax(700px,1.28fr);
  gap: 24px;
  padding-top: 86px;
  padding-bottom: 76px;
}
.room-copy { align-self:center; max-width:520px; padding-left:clamp(0px,2vw,34px); }
.room-copy h1 { max-width:500px; font-size:clamp(42px,3.45vw,60px); }
.artist { margin-bottom:42px; }
.turntable-wrap { height:650px; justify-content:center; }
.vinyl-hero-label { position:absolute; z-index:5; top:8px; right:8%; margin:0; color:#b9aa9c; font:9px monospace; letter-spacing:.16em; }
.vinyl-hero-label span { display:inline-block; width:5px; height:5px; margin:0 8px 1px 0; border-radius:50%; background:var(--orange); }
.ambient-glow { width:720px; height:520px; background:#e85f3b32; filter:blur(90px); }
.turntable { width:min(700px,55vw); height:500px; transform:rotateX(4deg) rotateZ(-2deg); filter:drop-shadow(24px 48px 38px #000b); }
.deck-surface { height:430px; border-width:8px; }
.front-panel { height:70px; margin:-2px 14px 0; }
.lid { top:-182px; height:210px; }
.platter-shadow,.platter { top:40px; left:55px; width:400px; height:400px; }
.record { inset:14px; }
.spindle { top:229px; left:249px; width:13px; height:25px; }
.label { inset:35%; box-shadow:inset 0 0 0 2px #f1bd9b,0 0 28px #0008; }
.tonearm-base { top:70px; right:45px; width:54px; height:54px; }
.tonearm { top:83px; right:57px; width:315px; transform-origin:calc(100% - 7px) 8px; }
.arm-bar { width:280px; }
.cartridge { left:8px; width:34px; height:21px; }
.branding { top:30px; left:34px; }
.speed-control { right:36px; bottom:34px; }
.power { left:28px; bottom:29px; }
.power-light { left:30px; bottom:62px; }
.collection { padding-top:64px; padding-bottom:76px; }
.transport button { transition:transform .18s,color .18s; }
.transport button:hover { color:var(--orange); transform:scale(1.08); }
.scrub { height:3px; }

@media(max-width:1200px) {
  .listening-room { grid-template-columns:minmax(300px,.8fr) minmax(560px,1.2fr); }
  .turntable { transform:scale(.86) rotateX(4deg) rotateZ(-2deg); }
}
@media(max-width:900px) {
  .listening-room { min-height:auto; grid-template-columns:1fr; padding-top:48px; }
  .room-copy { max-width:640px; padding-left:0; }
  .turntable-wrap { height:570px; }
  .turntable { width:700px; transform:scale(.78) rotateX(4deg) rotateZ(-2deg); }
}
@media(max-width:520px) {
  .turntable-wrap { height:430px; }
  .turntable { transform:scale(.56) rotateX(4deg) rotateZ(-2deg); }
  .vinyl-hero-label { display:none; }
}

/* Physical turntable pass — lower camera, raised platter, walnut and metal. */
.turntable {
  perspective: 1200px;
  transform: none;
  transform-style: preserve-3d;
  filter: drop-shadow(28px 48px 42px #000c);
}
.deck-surface {
  transform: rotateX(13deg) rotateZ(-2deg);
  transform-origin: center bottom;
  transform-style: preserve-3d;
  overflow: visible;
  border-color: #100c0b;
  border-radius: 8px;
  background:
    radial-gradient(ellipse at 24% 9%,#77503a88 0,transparent 35%),
    radial-gradient(ellipse at 82% 85%,#110b09aa 0,transparent 45%),
    repeating-linear-gradient(2deg,#2b1a14 0 2px,#4c3022 3px,#241610 6px,#352118 8px);
  box-shadow:
    inset 0 0 0 1px #bd8a6540,
    inset 0 18px 38px #ae74491c,
    inset 0 -25px 44px #050303a8,
    0 25px 38px #0009;
}
.deck-surface:before {
  content:"";
  position:absolute;
  inset:16px;
  pointer-events:none;
  background:
    radial-gradient(circle at 0 0,#bba28b 0 2px,#17100d 3px 5px,transparent 6px),
    radial-gradient(circle at 100% 0,#bba28b 0 2px,#17100d 3px 5px,transparent 6px),
    radial-gradient(circle at 0 100%,#bba28b 0 2px,#17100d 3px 5px,transparent 6px),
    radial-gradient(circle at 100% 100%,#bba28b 0 2px,#17100d 3px 5px,transparent 6px);
}
.front-panel {
  position:relative;
  z-index:4;
  margin:-9px 24px 0;
  height:78px;
  transform:perspective(900px) rotateX(-9deg) rotateZ(-2deg);
  transform-origin:center top;
  border:1px solid #4f3427;
  border-top-color:#8c624b;
  border-radius:0 0 10px 10px;
  background:linear-gradient(180deg,#2b1b16 0%,#120c0b 58%,#080606 100%);
  box-shadow:inset 0 1px #d5a27a22,inset 0 -16px 24px #0008,0 22px 32px #000b;
}
.platter-shadow,.platter { transform:translateZ(18px); }
.platter-shadow { transform:translate(9px,13px) translateZ(12px); filter:blur(10px); }
.platter {
  background:radial-gradient(circle,#b5a797 0 3%,#282322 3.5% 62.5%,#d0c2b0 63% 64%,#5b534d 64.5% 66%,#0d0b0b 67%);
  box-shadow:0 0 0 2px #050404,0 11px 9px #000b,0 18px 22px #0008,inset 0 0 20px #000;
}
.platter-shadow,.platter { top:30px; left:65px; width:380px; height:380px; }
.record {
  background:
    radial-gradient(circle at 32% 23%,#ffffff15 0 1%,transparent 18%),
    radial-gradient(circle,#251b18 0 8.8%,#070707 9.2% 100%);
  box-shadow:0 0 0 1px #000,0 8px 9px #000c,inset 0 0 40px #000;
}
.grooves {
  inset:8px;
  opacity:.9;
  background:
    conic-gradient(from 12deg,transparent 0 7%,#ffffff0e 12%,transparent 20% 42%,#ffffff16 48%,transparent 54% 78%,#ffffff0b 84%,transparent 92%),
    repeating-radial-gradient(circle,#ffffff0b 0 1px,#00000008 2px 3px,transparent 4px 6px);
}
.label {
  overflow:hidden;
  border:1px solid #d9c6b6;
  box-shadow:inset 0 0 0 2px #0005,0 3px 8px #000b;
  background-size:cover !important;
  background-position:center !important;
}
.label:after { content:""; position:absolute; inset:0; background:radial-gradient(circle,transparent 0 12%,#00000008 13% 60%,#00000042 100%); pointer-events:none; }
.label span,.label small { position:relative; z-index:2; padding:1px 4px; border-radius:2px; background:#f0e4d2c4; color:#211612; text-shadow:none; }
.label i { z-index:5; inset:46%; background:#17100d; box-shadow:0 0 0 2px #d5c2ad,0 2px 3px #000; }
.spindle {
  z-index:9;
  top:50%;
  left:50%;
  width:11px;
  height:24px;
  transform:translate(-50%,-58%) translateZ(32px);
  border-radius:50% 50% 3px 3px;
  background:linear-gradient(90deg,#4b4037,#f0e5d4 44%,#8e8174 70%,#322a25);
  box-shadow:2px 4px 5px #000b;
}
.tonearm-base { transform:translateZ(26px); box-shadow:2px 9px 10px #000b; }
.tonearm { transform:translateZ(35px) rotate(var(--arm-angle)); }
.arm-bar { height:7px; background:linear-gradient(#f3ede5,#837e78 48%,#ddd5cb); box-shadow:0 4px 5px #0009; }
.cartridge { background:linear-gradient(145deg,#3b3430,#0e0c0b 70%); box-shadow:2px 5px 6px #0009; }
.lid {
  top:-174px;
  z-index:1;
  transform:perspective(1000px) rotateX(-13deg) rotateY(-3deg) rotateZ(-2deg);
  border-color:#e7dfd17a;
  background:linear-gradient(145deg,#ffffff0d,#b5c6c80b 55%,#00000016);
  box-shadow:inset 0 0 45px #ffffff0d,0 8px 20px #0005;
}
.knob { background:radial-gradient(circle at 35% 30%,#82756a,#25201d 44%,#080707 50%); box-shadow:0 4px 8px #000; }
.speaker-grille { border:1px solid #49352d; background:repeating-linear-gradient(90deg,#080606 0 2px,#5e4438 2px 3px); box-shadow:inset 0 2px 6px #000; }

@media(max-width:1200px) { .turntable{transform:scale(.86)} }
@media(max-width:900px) { .turntable{width:700px;transform:scale(.76)} }
@media(max-width:520px) { .turntable{transform:scale(.54)} }

/* Photographic chassis skin with live record and tonearm overlays. */
.turntable {
  width:min(820px,60vw);
  height:auto;
  aspect-ratio:4 / 3;
  perspective:none;
  transform:none;
  background:url('assets/turntable-photoreal-v2.webp') center/contain no-repeat;
  filter:drop-shadow(20px 38px 36px #000b);
}
.ambient-glow { display:none; }
.lid,.front-panel,.branding,.platter-shadow,.tonearm-base,.speed-control,.power-light,.power { display:none; }
.deck-surface {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  border-radius:0;
  background:none;
  box-shadow:none;
  transform:none;
  overflow:visible;
}
.deck-surface:before { display:none; }
.platter {
  top:27.65%;
  left:19.15%;
  width:45.35%;
  height:auto;
  aspect-ratio:1;
  transform:none;
  background:none;
  box-shadow:none;
}
.record {
  inset:5.5%;
  box-shadow:0 0 0 1px #000,0 5px 8px #000a,inset 0 0 38px #000;
}
.spindle { top:50%; left:50%; transform:translate(-50%,-58%); }
.tonearm {
  --arm-angle:-56deg;
  top:calc(40.3% - 10px);
  right:24.8%;
  width:32.5%;
  height:16px;
  transform-origin:calc(100% - 7px) 8px;
  transform:rotate(var(--arm-angle));
  transition:transform .1s linear;
}
.tonearm-lift {
  position:absolute;
  inset:0;
  transform-origin:calc(100% - 7px) 8px;
  transition:transform .42s cubic-bezier(.22,.8,.22,1),filter .42s ease;
}
body.is-paused .tonearm-lift {
  transform:scaleX(.985);
  filter:drop-shadow(0 10px 5px #000b) brightness(1.06);
}
.arm-bar { z-index:3; right:8px; left:23px; width:auto; }
.arm-bar { top:3px; height:11px; border-radius:8px; background:linear-gradient(180deg,#fffaf2 0%,#b9b4ae 30%,#68645f 62%,#ddd6cc 100%); box-shadow:0 4px 7px #000b,0 0 0 1px #ffffff38; }
.rear-stub {
  position:absolute;
  z-index:3;
  top:4px;
  right:-43px;
  width:48px;
  height:9px;
  border-radius:7px;
  background:linear-gradient(180deg,#eee8df,#938d86 48%,#4f4a45 68%,#c9c1b8);
  box-shadow:0 4px 7px #000b,0 0 0 1px #ffffff2b;
}
.counterweight {
  position:absolute;
  z-index:4;
  top:-13px;
  right:-94px;
  width:57px;
  height:42px;
  border-radius:11px 18px 18px 11px;
  background:
    repeating-linear-gradient(90deg,transparent 0 7px,#2c292620 7px 9px),
    linear-gradient(180deg,#e2d9ce 0%,#847b72 24%,#3f3a35 52%,#b5aaa0 76%,#675f58 100%);
  border:1px solid #bdb3a85c;
  box-shadow:3px 8px 12px #000b,inset 0 2px 2px #fff5,inset 0 -3px 5px #211d1a;
}
.counterweight:before,.counterweight:after {
  content:"";
  position:absolute;
  top:2px;
  bottom:2px;
  width:5px;
  border-radius:50%;
  background:linear-gradient(180deg,#d9d0c7,#554f49 55%,#aaa097);
  box-shadow:1px 0 2px #0008;
}
.counterweight:before { left:8px; }
.counterweight:after { right:9px; }
.counterweight i {
  position:absolute;
  inset:10px 17px;
  border-radius:50%;
  background:radial-gradient(circle at 42% 38%,#302b27 0 25%,#9e958c 28% 45%,#272320 49% 100%);
  box-shadow:inset 1px 2px 3px #000b;
}
.pivot-hub {
  position:absolute;
  z-index:6;
  top:-12px;
  right:-13px;
  width:40px;
  height:40px;
  border:1px solid #c8bdb05c;
  border-radius:50%;
  background:
    radial-gradient(circle at 43% 37%,#f0e7dc 0 8%,#8f877f 12% 24%,#302c28 27% 34%,#b8aea4 38% 56%,#514b45 60% 73%,#1c1917 76%);
  box-shadow:2px 7px 10px #000a,inset 1px 2px 2px #fff4;
}
.pivot-hub i {
  position:absolute;
  inset:14px;
  border-radius:50%;
  background:radial-gradient(circle at 40% 35%,#e8ddd1,#514b45 42%,#171412 48%);
  box-shadow:0 1px 2px #000;
}
.cartridge { left:5px; }
.cartridge i { transition:transform .38s ease,opacity .3s ease; transform-origin:top; }
body.is-paused .cartridge i { transform:scaleY(.28); opacity:.45; }
.vinyl-hero-label { top:6%; right:2%; }

@media(max-width:1200px) { .turntable{transform:scale(.9)} }
@media(max-width:900px) { .turntable{width:820px;transform:scale(.76)} }
@media(max-width:520px) { .turntable{transform:scale(.5)} }

/* Immersive application shell: the turntable is the entire room. */
html,body { width:100%; height:100%; overflow:hidden; }
.app-shell { position:relative; width:100%; height:100vh; min-height:0; overflow:hidden; background:#100b09; }
.topbar { position:fixed; z-index:60; top:0; left:0; right:0; height:72px; padding:0 34px; border:0; background:linear-gradient(180deg,#090706c7 0%,transparent 100%); }
.wordmark { text-shadow:0 2px 14px #000; }.session-status { color:#d3c7bb; text-shadow:0 2px 8px #000; }.spotify-connect,.fullscreen-toggle { background:#0b0908a6; backdrop-filter:blur(16px); border-color:#ffffff30; }
.listening-room { position:absolute; inset:0; display:block; width:100%; height:100%; min-height:0; max-width:none; padding:0; }
.turntable-wrap { position:absolute; z-index:1; inset:0; display:block; width:100%; height:100%; overflow:hidden; }
.turntable { position:absolute; top:50%; left:50%; width:max(100vw,133.334vh); height:calc(max(100vw,133.334vh) * .75); max-width:none; transform:translate(-50%,-50%); filter:none; }
.vinyl-hero-label { display:none; }
.room-copy { position:absolute; z-index:30; top:50%; right:clamp(24px,4vw,76px); width:min(360px,28vw); max-width:none; padding:30px 30px 27px; transform:translateY(-48%); border:1px solid #ffffff24; border-radius:4px; background:linear-gradient(145deg,#160f0ccf,#0b0806a8); box-shadow:0 24px 70px #0009,inset 0 1px #ffffff1c; backdrop-filter:blur(24px) saturate(120%); }
.room-copy h1 { max-width:100%; font-size:clamp(34px,3vw,50px); -webkit-line-clamp:3; }.artist { max-width:100%; margin:14px 0 34px; color:#d1c4b9; }.track-reading { width:100%; }.transport { margin-top:27px; }.hint { display:none; }
.crate-toggle { position:fixed; z-index:50; left:50%; bottom:20px; display:flex; align-items:center; gap:10px; height:42px; padding:0 18px; transform:translateX(-50%); border:1px solid #ffffff30; border-radius:24px; background:#0c0907b8; color:#f1e9dd; box-shadow:0 12px 35px #0008,inset 0 1px #ffffff20; backdrop-filter:blur(18px); font:10px monospace; letter-spacing:.12em; text-transform:uppercase; cursor:pointer; transition:opacity .25s,transform .25s,background .2s; }
.crate-toggle span { color:var(--orange); font-size:17px; }.crate-toggle:hover { background:#211511dc; transform:translateX(-50%) translateY(-2px); }.crate-open .crate-toggle { opacity:0; pointer-events:none; transform:translateX(-50%) translateY(20px); }
.collection { position:fixed; z-index:70; left:18px; right:18px; bottom:18px; display:grid; grid-template-columns:minmax(260px,.75fr) minmax(0,2.25fr); gap:36px; max-height:60vh; padding:30px 32px 32px; overflow:auto; border:1px solid #ffffff26; border-radius:8px; background:linear-gradient(145deg,#17110fe8,#0b0807e2); color:#f3ebdf; box-shadow:0 -20px 80px #000a,inset 0 1px #ffffff1f; backdrop-filter:blur(28px) saturate(120%); transform:translateY(calc(100% + 30px)); opacity:0; visibility:hidden; transition:transform .48s cubic-bezier(.22,.8,.22,1),opacity .3s,visibility 0s linear .5s; }
.collection.open { transform:translateY(0); opacity:1; visibility:visible; transition-delay:0s; }.drawer-heading { position:relative; min-width:0; }.drawer-heading h2 { color:#f3ebdf; font-size:clamp(32px,3.3vw,48px); }.drawer-heading .eyebrow { color:#ef7552; }
.drawer-close { position:absolute; top:-12px; right:0; width:38px; height:38px; border:1px solid #ffffff2c; border-radius:50%; background:#ffffff0b; color:#f4ece0; font-size:18px; cursor:pointer; }
.album-search { border-color:#ffffff26; background:#ffffff0a; color:#f07b58; }.album-search input { color:#f4ece2; }.album-search input::placeholder { color:#9f9187; }.album-list { grid-template-columns:repeat(3,minmax(0,1fr)); }
.album { background:#ffffff0b; color:#f4ece2; border:1px solid #ffffff12; }.album-meta small { color:#aa9c91; }.album:hover,.album.current { background:#ffffff16; box-shadow:0 8px 20px #0006; }

@media(max-width:1050px) { .room-copy { right:24px; width:340px; }.collection { grid-template-columns:1fr; gap:22px; }.drawer-heading { padding-right:50px; } }
@media(max-width:700px) { .topbar { height:62px; padding:0 18px; }.session-status { display:none; }.room-copy { top:auto; right:16px; bottom:72px; left:16px; width:auto; padding:22px; transform:none; }.room-copy h1 { font-size:34px; -webkit-line-clamp:2; }.artist { margin-bottom:22px; }.transport { margin-top:20px; }.collection { left:8px; right:8px; bottom:8px; max-height:72vh; padding:22px 18px; }.album-list { grid-template-columns:1fr; } }

/* Responsive immersive layout. */
.app-shell { height:100dvh; }
.topbar { padding-top:env(safe-area-inset-top); }
.crate-toggle { bottom:max(20px,env(safe-area-inset-bottom)); }
.collection { bottom:max(18px,env(safe-area-inset-bottom)); }
.transport button,.drawer-close,.crate-toggle,.spotify-connect,.fullscreen-toggle { min-height:42px; }

@media(max-width:1100px) and (orientation:portrait) {
  .turntable { top:31%; left:60%; }
  .room-copy { top:auto; right:24px; bottom:74px; left:24px; width:auto; max-width:460px; margin-left:auto; padding:24px 26px; transform:none; }
  .room-copy h1 { font-size:clamp(34px,6vw,46px); -webkit-line-clamp:2; }
  .artist { margin:12px 0 24px; }.transport { margin-top:20px; }
  .collection { max-height:68dvh; }
  .album-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media(max-width:700px) {
  .topbar { height:58px; padding-right:14px; padding-left:14px; }
  .wordmark { font-size:27px; }.wordmark i { width:12px; height:12px; border-width:3px; }
  .spotify-connect { padding:8px 10px; font-size:10px; }
  .fullscreen-toggle { width:42px; justify-content:center; padding:0; }.fullscreen-toggle em { display:none; }
  .turntable { top:28%; left:68%; }
  .room-copy { right:12px; bottom:68px; left:12px; max-width:none; margin:0; padding:18px 18px 16px; border-radius:6px; }
  .room-copy h1 { font-size:clamp(28px,9vw,36px); line-height:.96; -webkit-line-clamp:2; }
  .eyebrow { margin-bottom:10px; font-size:8px; }.artist { margin:9px 0 17px; font-size:11px; }
  .track-reading { padding-left:12px; }.track-reading p { margin-bottom:8px; font-size:13px; }.time-row { font-size:8px; }
  .transport { gap:18px; margin-top:14px; }.transport .play-pause { width:44px; height:44px; }
  .crate-toggle { bottom:max(12px,env(safe-area-inset-bottom)); height:40px; }
  .collection { left:6px; right:6px; bottom:max(6px,env(safe-area-inset-bottom)); max-height:78dvh; padding:20px 14px 16px; border-radius:10px; }
  .drawer-heading h2 { font-size:34px; }.album-list { grid-template-columns:1fr; gap:8px; }
  .album-search { height:46px; }.album { grid-template-columns:86px minmax(0,1fr); }.album-cover { min-height:86px; }
}

@media(max-width:390px) {
  .spotify-connect { width:42px; overflow:hidden; white-space:nowrap; color:transparent; }.spotify-connect b { color:#1ed760; }
  .topbar-actions { gap:6px; }
  .room-copy { padding:16px; }.room-copy h1 { font-size:28px; }
}

@media(max-height:700px) and (min-width:701px) {
  .room-copy { width:320px; padding:20px 22px; }.room-copy h1 { font-size:36px; -webkit-line-clamp:2; }.artist { margin:10px 0 20px; }.transport { margin-top:18px; }
  .crate-toggle { bottom:10px; }
}