:root {
  color-scheme: light;
  --ink:#3a3b30;
  --player-scale:1;
  --wood:#69402a;
  --angle:39deg;
  --view-x:61deg;
  --view-z:0deg;
  font-family:
    Arial,
    "PingFang SC",
    "Microsoft YaHei",
    sans-serif;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: #dcd2bf;
  color: var(--ink);
  overflow: hidden;
}
button,
input,
select {
  font: inherit;
  color: inherit;
}
button,
a,
input,
select {
  -webkit-tap-highlight-color: transparent;
}
button,
a {
  touch-action: manipulation;
}
button {
  cursor: pointer;
}
button:disabled {
  cursor: default;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  border: 0;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
[role=slider]:focus-visible {
  outline: 3px solid #d7b77c;
  outline-offset: 5px;
}
button svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}
svg {
  display: block;
}
[hidden] {
  display: none !important;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.room-view {
  position: fixed;
  inset: 0;
  overflow: hidden;
  perspective: 2000px;
  background:
    radial-gradient(
      ellipse at 16% 3%,
      #fff8e1a8,
      transparent 58%),
    linear-gradient(
      115deg,
      #ece4d5,
      #d7cbb6 83%,
      #bfb098);
}
.home-button {
  position: absolute;
  top: 26px;
  left: 30px;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 7px 13px 7px 9px;
  border: 1px solid #78654d88;
  border-radius: 4px;
  color: #4b4538;
  background: #f5eddaee;
  box-shadow: 2px 3px 0 #78634b3b, inset 0 1px 0 #fffaf0;
  font: 11px monospace;
  letter-spacing: .5px;
  transition: transform .18s, background .18s, box-shadow .18s;
}
.home-button span {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border: 1px solid #826b4d;
  border-radius: 50%;
  font: 20px/18px Georgia, serif;
}
.home-button:hover {
  background: #fff8e8;
  box-shadow: 1px 2px 0 #78634b3b, inset 0 1px 0 #fff;
  transform: translateY(-1px);
}
.home-button:active {
  transform: translateY(1px);
  box-shadow: 0 1px 0 #78634b3b, inset 0 1px 2px #78634b22;
}
.room-view:after,
.wall-view:before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .2;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23877b62' opacity='.25' filter='url(%23n)' d='M0 0h160v160H0z'/%3E%3C/svg%3E");
}
.background-wall {
  position: absolute;
  left: 50%;
  top: 5vh;
  width: min(840px, 80vw);
  height: 270px;
  transform: translateX(-50%);
  transition: opacity .65s, filter .65s;
  opacity: .72;
  filter: blur(.35px);
  z-index: 1;
}
.background-wall:hover {
  opacity: 1;
  filter: none;
}
.background-records {
  position: absolute;
  inset: 0 5%;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 20px 24px;
  align-content: start;
}
.background-record {
  aspect-ratio: 1;
  transform: rotate(var(--lean,-2deg));
  box-shadow: 5px 5px 6px #3d321b38;
  transition: transform .5s;
  position: relative;
  max-height: 118px;
  align-self: end;
}
.background-record:nth-child(2n) {
  --lean:1.5deg;
}
.background-record:nth-child(3n) {
  --lean:-.5deg;
}
.background-record:nth-child(n+6) {
  margin-top: 12px;
}
.background-wall:hover .background-record {
  transform: translateY(-5px) rotate(var(--lean,-2deg));
}
.wall-shelf {
  position: absolute;
  left: 0;
  right: 0;
  height: 17px;
  border-radius: 1px 1px 3px 3px;
  background:
    linear-gradient(
      #d3a16b70,
      transparent 25%,
      #32190970),
    url(/assets/wood-grain.svg) center / 720px 110px;
  border-top: 1px solid #e0b780;
  border-bottom: 2px solid #563420;
  box-shadow:
    inset 0 2px 1px #ecc39455,
    0 3px 2px #47291744,
    0 13px 15px #422d242d;
  z-index: 2;
}
.shelf-one {
  top: 118px;
}
.shelf-two {
  top: 263px;
}
.wall-shelf:before {
  content: "";
  position: absolute;
  inset: -7px 0 auto;
  height: 7px;
  background: linear-gradient(#d9b58344, #ba8a5955), url(/assets/wood-grain.svg) center / 720px 90px;
  border-top: 1px solid #cda673;
  transform: perspective(400px) rotateX(30deg);
  transform-origin: bottom;
}
.table-surface {
  position: absolute;
  left: -20%;
  right: -20%;
  top: 57%;
  bottom: -20%;
  background:
    repeating-linear-gradient(
      178deg,
      transparent 0 19px,
      #66503409 20px,
      transparent 21px 42px),
    linear-gradient(
      168deg,
      #c0ad8b,
      #d7c3a0 30%,
      #b7a07d 89%);
  box-shadow: 0 -3px 7px #48351f1c;
  border-top: 2px solid #e4d5b5;
  transform: none;
  transition: top .8s;
}
.turntable-stage {
  position: absolute;
  left: 50%;
  top: 59%;
  width: 760px;
  height: 440px;
  transform: translate(-50%, -50%) scale(var(--player-scale));
  perspective: 1800px;
  z-index: 4;
  transition: top .85s, transform .85s;
  transform-style: preserve-3d;
}
.turntable {
  position: absolute;
  width: 760px;
  height: 440px;
  transform: rotateX(var(--view-x)) rotateZ(var(--view-z));
  transform-style: preserve-3d;
  transition: transform .25s ease-out;
}
.turntable * {
  transform-style: preserve-3d;
}
.player-shadow {
  position: absolute;
  left: 20px;
  top: 405px;
  width: 720px;
  height: 95px;
  border-radius: 50%;
  background:
    radial-gradient(
      ellipse,
      #3221138a,
      #35241455 50%,
      transparent 75%);
  filter: blur(17px);
  pointer-events: none;
}
.case-face {
  position: absolute;
  background:
    repeating-linear-gradient(
      0deg,
      #492b1c08 0 3px,
      #ac714123 4px,
      transparent 5px 14px),
    linear-gradient(
      90deg,
      #492b1d,
      #775036 45%,
      #4c2e1d);
  box-shadow: inset 0 0 4px #291809, inset 0 3px 1px #ba896047;
  height: 175px;
}
.case-left {
  width: 440px;
  left: 0;
  top: 0;
  transform-origin: top left;
  transform: rotateZ(90deg) rotateX(-90deg);
}
.case-right {
  width: 440px;
  left: 760px;
  top: 0;
  transform-origin: top left;
  transform: rotateZ(90deg) rotateX(-90deg);
  background:
    repeating-linear-gradient(
      0deg,
      transparent 0 3px,
      #20140944 4px,
      transparent 5px 13px),
    linear-gradient(
      90deg,
      #543723,
      #342118);
}
.case-back {
  width: 760px;
  left: 0;
  top: 0;
  transform-origin: top;
  transform: rotateX(-90deg);
}
.case-bottom {
  position: absolute;
  inset: 0;
  background: #33271a;
  transform: translateZ(-175px);
  box-shadow: 0 0 0 2px #3c2618;
}
.foot {
  position: absolute;
  width: 68px;
  height: 65px;
  background:
    radial-gradient(
      ellipse,
      #32352b 45%,
      #10150e 65%,
      #3a3c31 67%,
      #171c14 75%);
  border-radius: 15px;
  transform: translateZ(-193px);
  box-shadow: 0 0 0 3px #252c20;
}
.foot-fl {
  left: 45px;
  top: 348px;
}
.foot-fr {
  left: 650px;
  top: 348px;
}
.foot-bl {
  left: 45px;
  top: 32px;
}
.foot-br {
  left: 650px;
  top: 32px;
}
.deck {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      1deg,
      transparent 0 2px,
      #d4a1661a 3px,
      transparent 5px 12px,
      #2c1a121c 13px,
      transparent 15px 38px),
    linear-gradient(
      115deg,
      #91623d,
      #a77448 40%,
      #684028 93%);
  border: 9px solid #785033;
  border-color: #c3935f #6d4126 #aa7449 #8e623e;
  border-radius: 5px;
  box-shadow: inset 0 0 0 2px #422d1f, 0 1px 0 #cc9562;
  transform: translateZ(1px);
}
.deck-inset {
  position: absolute;
  inset: 21px 20px 22px;
  background:
    linear-gradient(
      110deg,
      #3f4034,
      #5a5544 42%,
      #32372e);
  border: 2px solid #473c2c;
  border-radius: 3px;
  box-shadow: 0 0 0 1px #c49b66, inset 0 4px 7px #181d1a88;
  transform: translateZ(1px);
}
.platter-base,
.platter-rim,
.platter-mat {
  position: absolute;
  left: 90px;
  top: 45px;
  width: 354px;
  height: 354px;
  border-radius: 50%;
  padding: 0;
  transform: translateZ(7px);
}
.platter-base {
  box-shadow: 4px 12px 12px #11191199, 0 0 0 8px #252d22;
  background: #2d332a;
}
.platter-rim {
  transform: translateZ(13px);
  background:
    repeating-conic-gradient(
      #51564b 0deg 1deg,
      #d4d6bd 1.4deg 2deg,
      #8a9380 2.5deg 3deg);
  box-shadow: 0 0 0 3px #c5c7b4, 0 0 0 5px #69705e;
}
.platter-mat {
  left: 96px;
  top: 51px;
  width: 342px;
  height: 342px;
  transform: translateZ(17px);
  background:
    repeating-radial-gradient(
      circle,
      #343b2d 0 3px,
      #3c4231 4px,
      #30372a 5px);
  box-shadow: inset 0 0 0 2px #161e16;
  cursor: pointer;
}
.record-on-deck {
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background:
    repeating-radial-gradient(
      circle,
      #151b17 0 1px,
      #353b31 1.5px,
      #151b16 2px,
      #20291e 3px);
  box-shadow: 0 0 0 1px #151e16, 0 3px 4px #0d180a;
  animation: spin 1.8s linear infinite paused;
  transition: opacity .25s;
}
.playing .record-on-deck {
  animation-play-state: running;
}
.no-record .record-on-deck {
  opacity: 0;
}
.vinyl-sheen {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    conic-gradient(
      from 20deg,
      transparent 0deg,
      #dde2c914 37deg,
      transparent 51deg,
      transparent 158deg,
      #fff6d522 185deg,
      transparent 207deg);
  box-shadow: inset 0 0 4px #c0c8af66;
}
.record-label {
  position: absolute;
  inset: 34%;
  background: #b37d57;
  border: 1px solid #d0b687;
  border-radius: 50%;
  box-shadow: 0 0 0 2px #263522;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: space-around;
  padding: 13px 8px;
  color: #efe6c9;
  font-family:
    Georgia,
    "Songti SC",
    serif;
}
.record-label:after {
  content: "";
  position: absolute;
  inset: 43%;
  border-radius: 50%;
  background: #1d261a;
  border: 2px solid #ae9166;
}
.record-label #disc-title {
  font-size: 12px;
  line-height: 1.2;
  max-width: 85px;
}
.record-side {
  position: absolute;
  right: 9px;
  top: 45px;
  font: 8px Arial;
}
.record-speed {
  font: 8px monospace;
  letter-spacing: 1px;
}
.spindle {
  position: absolute;
  left: 261px;
  top: 216px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  transform: translateZ(33px);
  background:
    radial-gradient(
      circle at 30% 20%,
      #fffce6,
      #b4bba3 45%,
      #4e5a45 75%);
  box-shadow: 2px 5px 3px #0a1908aa, 0 0 0 1px #e0e5cc;
  pointer-events: none;
}
.arm-base {
  position: absolute;
  left: 575px;
  top: 48px;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background:
    conic-gradient(
      #858d7a,
      #ececd7,
      #747e6a,
      #dde0c9,
      #7b846f);
  box-shadow: 0 0 0 5px #253122, 3px 6px 8px #182314;
  transform: translateZ(14px);
}
.arm-base-ring {
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  border: 6px solid #677660;
  box-shadow: 0 0 0 2px #d7dec6, inset 0 0 0 3px #22321c;
}
.arm-pivot {
  position: absolute;
  inset: 26px;
  border-radius: 50%;
  background: #99a08b;
  border: 3px solid #e8ead5;
  transform: translateZ(12px);
}
.tonearm {
  position: absolute;
  left: 614px;
  top: 87px;
  width: 0;
  height: 0;
  transform: translateZ(41px) rotateZ(-10deg);
  transform-origin: 0 0;
  transition: transform 1.3s cubic-bezier(.4, 0, .2, 1);
  pointer-events: none;
}
.playing .tonearm,
.paused .tonearm {
  transform: translateZ(36px) rotateZ(50deg);
}
.arm-rod {
  position: absolute;
  left: -5px;
  top: -5px;
  width: 11px;
  height: 280px;
  border-radius: 5px;
  background:
    linear-gradient(
      90deg,
      #39483b,
      #edf0d9 28%,
      #a8b19b 53%,
      #f1f0db 68%,
      #4a5a44);
  box-shadow: 4px 8px 5px #122b1544;
  transform: translateZ(6px);
}
.arm-wire {
  position: absolute;
  left: 5px;
  top: 5px;
  width: 2px;
  height: 260px;
  background: #222d23;
  transform: translateZ(3px);
}
.counterweight {
  position: absolute;
  left: -23px;
  top: -54px;
  width: 46px;
  height: 37px;
  border-radius: 7px;
  background:
    repeating-linear-gradient(
      0deg,
      transparent 0 3px,
      #2d3c2c88 4px,
      transparent 5px),
    linear-gradient(
      90deg,
      #4b5c46,
      #dce4cc 30%,
      #85987d 60%,
      #354a30);
  box-shadow: 2px 5px 5px #13291166;
  transform: translateZ(5px);
}
.arm-bearing {
  position: absolute;
  left: -14px;
  top: -12px;
  width: 28px;
  height: 24px;
  border-radius: 5px;
  background:
    linear-gradient(
      90deg,
      #66765c,
      #dbe6c8 45%,
      #53654a);
  transform: translateZ(13px);
}
.headshell {
  position: absolute;
  left: -16px;
  top: 256px;
  width: 33px;
  height: 57px;
  border-radius: 3px 3px 6px 6px;
  background:
    linear-gradient(
      90deg,
      #243222,
      #47543a 50%,
      #1f2a1c);
  box-shadow: 2px 3px 2px #172714;
  transform: translateZ(4px);
  display: flex;
  justify-content: center;
  gap: 5px;
  padding-top: 9px;
}
.headshell i {
  height: 25px;
  width: 3px;
  background: #0f1c10;
  box-shadow: 1px 0 #748063;
}
.headshell:after {
  content: "";
  position: absolute;
  left: 27px;
  top: 27px;
  width: 25px;
  height: 4px;
  background: #bdc4a8;
  transform: rotate(-25deg);
}
.stylus {
  position: absolute;
  left: -12px;
  top: 303px;
  width: 25px;
  height: 11px;
  background: linear-gradient(#bb533b, #732f20);
  box-shadow: 0 3px 0 #433a27;
  transform: translateZ(1px);
}
.arm-rest {
  position: absolute;
  left: 650px;
  top: 326px;
  width: 31px;
  height: 18px;
  border: 4px solid #c4cbb3;
  border-top: 0;
  background: #32442b;
  transform: translateZ(31px);
  box-shadow: 0 5px #526347;
}
.hinge {
  position: absolute;
  top: -5px;
  width: 62px;
  height: 29px;
  background:
    repeating-linear-gradient(
      90deg,
      #4c554a 0 4px,
      #949d87 5px,
      #404d3c 8px);
  border: 2px solid #303d2c;
  border-radius: 4px;
  transform: translateZ(14px);
}
.hinge-left {
  left: 73px;
}
.hinge-right {
  right: 65px;
}
.speed-switch {
  position: absolute;
  left: 502px;
  top: 320px;
  display: flex;
  align-items: center;
  gap: 7px;
  transform: translateZ(4px);
  font: 9px monospace;
  color: #c3c5ac;
}
.speed-switch i {
  width: 22px;
  height: 37px;
  background:
    linear-gradient(
      90deg,
      #1a281c,
      #56644c);
  border: 3px solid #68765b;
  border-radius: 3px;
  box-shadow: inset 0 0 3px #071406;
}
.speed-switch i:after {
  content: "";
  display: block;
  height: 13px;
  margin-top: 3px;
  background: repeating-linear-gradient(#cad2b6 0 2px, #69765c 3px);
  box-shadow: 0 3px 4px #111d0e;
}
.deck-screw,
.panel-screw {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background:
    linear-gradient(
      130deg,
      #394831,
      #e0e4c7 40%,
      #8d987c 60%,
      #3f4c33);
  box-shadow: 0 0 0 1px #39442d;
}
.deck-screw:after,
.panel-screw:after {
  content: "";
  position: absolute;
  left: 1px;
  right: 1px;
  top: 4px;
  height: 1px;
  background: #404b35;
  transform: rotate(-32deg);
}
.screw-a {
  top: 29px;
  left: 29px;
}
.screw-b {
  top: 29px;
  right: 29px;
}
.screw-c {
  bottom: 31px;
  left: 29px;
}
.screw-d {
  bottom: 31px;
  right: 29px;
}
.machine-front {
  position: absolute;
  left: 0;
  top: 440px;
  width: 760px;
  height: 175px;
  transform-origin: top;
  transform: rotateX(-90deg);
  border: 10px solid #805136;
  border-color: #bd8b58 #633c25 #5d3823 #956540;
  border-radius: 0 0 5px 5px;
  background:
    repeating-linear-gradient(
      0deg,
      #ffffff14 0 1px,
      transparent 1px 3px),
    linear-gradient(
      110deg,
      #c7c9b8,
      #ede9d8 28%,
      #b5bcaa 64%,
      #d0d2bf);
  box-shadow:
    inset 0 0 0 2px #5b6752,
    inset 0 4px 3px #fff9,
    0 2px 0 #321e14;
}
.panel-screw-a {
  top: 8px;
  left: 8px;
}
.panel-screw-b {
  top: 8px;
  right: 8px;
}
.panel-screw-c {
  bottom: 8px;
  left: 8px;
}
.panel-screw-d {
  bottom: 8px;
  right: 8px;
}
.speaker-grille {
  position: absolute;
  left: 29px;
  top: 24px;
  width: 126px;
  height: 92px;
  border-radius: 3px;
  background:
    radial-gradient(
      circle,
      #233322 1px,
      transparent 1.8px) 0 0/4px 4px,
    linear-gradient(#a2ad97, #bdc3aa);
  border: 3px solid #76836b;
  box-shadow: inset 0 0 14px #364833aa, 0 1px 0 #fff8;
}
.maker-plate {
  position: absolute;
  left: 34px;
  top: 124px;
  width: 130px;
  text-align: center;
  color: #56614e;
  font: 9px Georgia, serif;
  text-shadow: 0 1px #fff8;
}
.maker-plate span {
  display: block;
  font: 5px Arial;
  letter-spacing: 1.5px;
  margin-top: 4px;
}
.machine-display {
  position: absolute;
  left: 184px;
  top: 18px;
  width: 285px;
  height: 67px;
  background:
    linear-gradient(
      130deg,
      #2e4638,
      #1c352c 67%,
      #2d4635);
  border: 5px solid #52644d;
  border-radius: 3px;
  box-shadow:
    inset 0 0 8px #0b2018,
    0 1px 1px #f8f6db,
    0 -1px 1px #35432d;
  color: #c5d6a1;
  padding: 6px 10px;
  text-shadow: 0 0 4px #d1eea54d;
  overflow: hidden;
  transform: translateZ(2px);
}
.machine-display:after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(
      155deg,
      #fffa 0,
      transparent 1% 45%,
      #fff1 46%,
      transparent 47%);
  opacity: .2;
}
.display-top {
  display: flex;
  justify-content: space-between;
  gap: 9px;
  font-size: 10px;
  line-height: 14px;
}
.display-top #now-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.display-stereo {
  font: 5px monospace;
  letter-spacing: 1px;
  opacity: .5;
  padding-top: 3px;
}
.display-bottom {
  display: flex;
  align-items: end;
  gap: 15px;
  height: 25px;
  padding-bottom: 2px;
}
.display-bottom #lcd-time {
  font: 20px "Courier New", monospace;
  letter-spacing: 2px;
}
.lcd-bars {
  display: flex;
  gap: 3px;
  align-items: end;
  height: 17px;
  opacity: .2;
  margin-left: auto;
}
.lcd-bars i {
  width: 4px;
  height: 8px;
  background:
    repeating-linear-gradient(
      0deg,
      #b5cf90 0 2px,
      transparent 2px 3px);
  transform-origin: bottom;
}
.lcd-bars i:nth-child(3n) {
  height: 15px;
}
.lcd-bars i:nth-child(3n+1) {
  height: 11px;
}
.playing .lcd-bars {
  opacity: 1;
}
.playing .lcd-bars i {
  animation: level .7s ease-in-out infinite alternate;
}
.playing .lcd-bars i:nth-child(2n) {
  animation-delay: -.35s;
}
.playing .lcd-bars i:nth-child(3n) {
  animation-duration: 1.1s;
}
#machine-status {
  font: 9px monospace;
  color: #a5ba88;
  width: 13px;
  padding-bottom: 3px;
}
.machine-display.is-error #machine-status {
  color: #edb08b;
}
.display-seek {
  appearance: none;
  position: absolute;
  bottom: 0;
  left: 9px;
  right: 9px;
  width: calc(100% - 18px);
  height: 6px;
  margin: 0;
  background:
    linear-gradient(
      90deg,
      #abc787 var(--fill,0%),
      #52664b var(--fill,0%));
  cursor: ew-resize;
  opacity: .8;
  transform: translateZ(2px);
}
.display-seek::-webkit-slider-thumb {
  appearance: none;
  width: 5px;
  height: 9px;
  background: #d8dfba;
  border: 1px solid #819370;
}
.display-seek::-moz-range-thumb {
  width: 5px;
  height: 9px;
  background: #d8dfba;
  border: 1px solid #819370;
  border-radius: 0;
}
.display-seek:disabled {
  opacity: .2;
}
.key-bed {
  position: absolute;
  left: 181px;
  top: 98px;
  display: flex;
  gap: 3px;
  padding: 5px;
  background: #3c4a35;
  border: 1px solid #a8b196;
  border-radius: 3px;
  box-shadow: inset 0 3px 5px #152211, 0 1px 0 #f2f0d3;
  transform: translateZ(2px);
}
.mechanical-key {
  width: 44px;
  height: 33px;
  padding: 0;
  border: 1px solid #c1c8ad;
  border-radius: 2px;
  background:
    linear-gradient(
      #efeddb,
      #bec6ad 60%,
      #a6b298);
  box-shadow:
    0 5px 0 #77856b,
    0 6px 1px #25351f,
    inset 0 2px 0 #fff9;
  display: grid;
  place-items: center;
  transform: translateZ(6px) translateY(-3px);
  transition: transform .12s, box-shadow .12s;
  color: #4c5e43;
}
.mechanical-key svg {
  width: 16px;
  height: 16px;
  stroke-width: 1.6;
}
.mechanical-key:hover {
  background:
    linear-gradient(
      #fff9e6,
      #d3d9bc 60%,
      #bdc6aa);
}
.mechanical-key:active,
.mechanical-key[aria-pressed=true] {
  transform: translateZ(2px) translateY(1px);
  box-shadow: 0 1px 0 #76866a, inset 0 1px 2px #54654855;
}
.play-key svg,
#stop-button svg,
#previous-track svg,
#next-track svg {
  fill: currentColor;
  stroke-width: 1;
}
.source-knob {
  position: absolute;
  left: 494px;
  top: 32px;
  width: 64px;
  height: 64px;
  background: #617256;
  border-radius: 50%;
  padding: 4px;
  box-shadow: 0 2px 0 #f8f5d5, 0 0 0 2px #9aa58b;
  transform: translateZ(6px);
}
.knob-face {
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background:
    conic-gradient(
      from 35deg,
      #dce1c9,
      #859576 27deg,
      #e8ead2 76deg,
      #a6b28e 125deg,
      #eef0d7 170deg,
      #738764 225deg,
      #d3dec0 280deg,
      #f1f0d5);
  box-shadow:
    1px 5px 4px #2f42284d,
    inset 0 0 0 2px #dce4c6,
    inset 0 0 0 5px #9aa989;
  transform: translateZ(8px);
}
.source-knob .knob-face i {
  position: absolute;
  left: 25px;
  top: 9px;
  width: 2px;
  height: 8px;
  background: #566b46;
  transform: rotate(-40deg);
  transform-origin: 1px 18px;
}
.source-knob > svg {
  position: absolute;
  left: 22px;
  top: 77px;
  width: 17px;
  height: 17px;
  color: #6a795e;
}
.status-dot {
  position: absolute;
  left: 28px;
  top: 104px;
  width: 5px;
  height: 5px;
  background: #8a977a;
  border-radius: 50%;
  box-shadow: inset 1px 1px 2px #263a2077;
}
.status-dot.connected {
  background: #adc27f;
  box-shadow: 0 0 7px #b8d58a;
}
.status-dot.testing {
  background: #d9ae63;
  box-shadow: 0 0 7px #e7b964;
  animation: source-testing 1.1s ease-in-out infinite alternate;
}
.status-dot.failed { background: #bb705b; box-shadow: 0 0 5px #bb705b77; }
@keyframes source-testing { to { opacity: .35; box-shadow: 0 0 2px #e7b964; } }
.source-knob:hover .knob-face {
  filter: brightness(1.08);
}
.volume-assembly {
  position: absolute;
  left: 594px;
  top: 18px;
  width: 112px;
  height: 127px;
}
.volume-ticks {
  position: absolute;
  inset: 0 0 15px;
  border-radius: 50%;
  background:
    repeating-conic-gradient(
      from -140deg,
      #637453 0 1deg,
      transparent 1deg 12deg);
  mask:
    radial-gradient(
      transparent 0 65%,
      #000 67% 70%,
      transparent 72%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 80% 100%, 50% 60%, 20% 100%, 0 100%);
}
.volume-knob {
  position: absolute;
  left: 14px;
  top: 13px;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: #718261;
  box-shadow: 0 0 0 2px #839475, 0 2px 0 3px #e5e7cd;
  cursor: grab;
  touch-action: none;
  transform: translateZ(7px);
}
.volume-knob:active {
  cursor: grabbing;
}
.volume-knob .knob-face {
  inset: 3px;
  background:
    conic-gradient(
      from 20deg,
      #f0eed9,
      #a0ad8c 24deg,
      #ebedd4 74deg,
      #98a983 126deg,
      #d8e1c2 176deg,
      #72865f 219deg,
      #f4f1d9 266deg,
      #bdccab 305deg,
      #e6e8cf);
  transform: translateZ(13px) rotate(var(--angle));
  transition: transform .08s linear;
}
.volume-knob .knob-face:before {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  border: 1px solid #627a4b55;
  box-shadow: inset 0 0 0 1px #ffffdf66;
}
.volume-knob .knob-face i {
  position: absolute;
  left: 35px;
  top: 10px;
  width: 3px;
  height: 12px;
  border-radius: 2px;
  background: #536b3d;
  box-shadow: 1px 0 #ffffdf80;
}
.mute-switch {
  position: absolute;
  bottom: 0;
  left: 43px;
  width: 26px;
  height: 22px;
  display: grid;
  place-items: center;
  background: linear-gradient(#dce2c9, #a9b69a);
  border: 1px solid #8b9e79;
  border-radius: 2px;
  box-shadow: 0 2px 0 #5c724c;
  transform: translateZ(4px);
}
.mute-switch svg {
  width: 13px;
  height: 13px;
}
.mute-switch[aria-pressed=true] {
  box-shadow: inset 0 2px 3px #526546;
  transform: translateZ(1px);
  color: #b07954;
}
.power-lamp {
  position: absolute;
  left: 24px;
  top: 132px;
  width: 10px;
  height: 10px;
  border: 2px solid #859775;
  border-radius: 50%;
  background: #31472a;
}
.power-lamp i {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #869d60;
  box-shadow: inset 1px 1px 1px #283d2188;
}
.playing .power-lamp i {
  background: #c9da93;
  box-shadow: 0 0 6px #d0e395;
}
.busy .power-lamp i {
  animation: pulse .8s infinite;
}
.jack {
  position: absolute;
  top: 127px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #1f301b;
  box-shadow:
    inset 1px 2px 2px #070e04,
    0 0 0 2px #819570,
    0 0 0 3px #c5d0b1;
}
.jack-left {
  left: 556px;
}
.jack-right {
  left: 577px;
}
.panel-bottom-line {
  position: absolute;
  left: 180px;
  right: 236px;
  bottom: 6px;
  border-top: 1px solid #72856566;
  box-shadow: 0 1px #fff4;
}
.dust-cover {
  position: absolute;
  left: 0;
  top: 0;
  width: 760px;
  height: 440px;
  background: transparent;
  border: 0;
  border-radius: 5px;
  transform-origin: 50% 0;
  transform: translateZ(25px) rotateX(77deg);
  transition: transform 1.3s cubic-bezier(.4, 0, .2, 1);
  padding: 0;
  cursor: pointer;
}
.lid-closed .dust-cover {
  transform: translateZ(25px) rotateX(0deg);
}
.dust-cover:disabled {
  cursor: wait;
}
.lid-glass {
  position: absolute;
  inset: 0;
  border: 5px solid #444f42aa;
  border-top-color: #243325c9;
  border-left-color: #9ba58e9c;
  border-radius: 5px;
  background:
    linear-gradient(
      115deg,
      #f3f5df22,
      transparent 30%,
      #b4c7ac14 60%,
      #34453125),
    linear-gradient(
      35deg,
      transparent 41%,
      #f4f4e720 42% 44%,
      transparent 45% 79%,
      #eef2e91c 80% 83%,
      transparent 84%);
  box-shadow: inset 0 0 0 2px #d0d9c34d, inset 0 0 22px #76877219;
  transform: translateZ(5px);
}
.lid-edge {
  position: absolute;
  background: linear-gradient(#76856a77, #343f3155);
  border: 1px solid #bec7b166;
  height: 29px;
}
.lid-edge-left {
  left: 0;
  top: 0;
  width: 440px;
  transform-origin: top left;
  transform: rotateZ(90deg) rotateX(-90deg);
}
.lid-edge-right {
  left: 760px;
  top: 0;
  width: 440px;
  transform-origin: top left;
  transform: rotateZ(90deg) rotateX(-90deg);
}
.lid-edge-front {
  left: 0;
  top: 440px;
  width: 760px;
  transform-origin: top;
  transform: rotateX(-90deg);
}
.lid-handle {
  position: absolute;
  left: 326px;
  bottom: -2px;
  width: 108px;
  height: 19px;
  border: 2px solid #c4cdb77a;
  border-radius: 0 0 4px 4px;
  background: linear-gradient(#3e503faa, #96a18b55);
  box-shadow: 0 0 0 1px #3b4b38;
  transform: translateZ(7px);
}
.dust-cover:hover .lid-handle {
  border-color: #d6dfc9d9;
  background: #b4bfa355;
}
.machine-drawer {
  position: absolute;
  left: 15px;
  right: 15px;
  top: 11px;
  padding: 24px 25px 19px;
  min-height: 153px;
  background:
    repeating-linear-gradient(
      0deg,
      #ffffff0b 0 1px,
      transparent 2px 4px),
    linear-gradient(
      110deg,
      #cdd3bc,
      #eee9d4 25%,
      #bec7af);
  border: 5px solid #697b5b;
  border-color: #dce2c9 #728365 #4b603f #a7b998;
  border-radius: 3px;
  box-shadow:
    0 5px 0 #526246,
    0 10px 0 #35482f,
    2px 20px 18px #132a144d;
  transform: translateZ(65px);
  z-index: 10;
  animation: drawer-out .55s cubic-bezier(.2, .7, .3, 1);
  overflow: auto;
  max-height: 280px;
}
.machine-drawer[hidden] {
  display: none;
}
.drawer-close {
  position: absolute;
  top: 1px;
  right: 4px;
  background: none;
  font-size: 21px;
  line-height: 22px;
  color: #6d805c;
  transform: translateZ(2px);
}
.drawer-grip {
  position: absolute;
  left: calc(50% - 30px);
  top: 5px;
  width: 60px;
  height: 4px;
  border-radius: 2px;
  background: #536647;
  box-shadow: 0 1px #f0f2d8;
}
.search-form {
  display: flex;
  gap: 9px;
}
.search-form input {
  width: 100%;
  min-width: 0;
  height: 33px;
  padding: 5px 11px;
  border: 3px solid #6b7f5b;
  border-radius: 2px;
  background: #263f2b;
  color: #d1dcac;
  font-size: 14px;
  box-shadow: inset 0 2px 4px #172e1b;
  outline: none;
}
.search-form input::placeholder {
  color: #a7b588;
}
.panel-button {
  min-width: 32px;
  height: 30px;
  padding: 5px 8px;
  background: linear-gradient(#e9ecd4, #b3c3a2);
  border: 1px solid #809670;
  border-radius: 2px;
  box-shadow: 0 3px 0 #688258;
  font-size: 19px;
  display: grid;
  place-items: center;
}
.panel-button:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #688258;
}
.panel-button svg {
  width: 17px;
  height: 17px;
}
.panel-status {
  font: 11px monospace;
  color: #6a7b59;
  min-height: 0;
  margin: 7px 0;
  line-height: 1.4;
}
.panel-status:empty {
  display: none;
}
.search-results {
  display: flex;
  flex-direction: column;
}
.search-result {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border-bottom: 1px solid #8a9b7844;
  padding: 8px 0;
}
.result-cover {
  width: 34px;
  height: 34px;
}
.result-info {
  min-width: 0;
}
.result-info strong {
  display: block;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.result-info p {
  font-size: 9px;
  color: #7d8b6d;
  margin: 3px 0 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.add-record {
  width: 30px;
  height: 25px;
  display: grid;
  place-items: center;
  padding: 0;
  background: linear-gradient(#dfe6cc, #a7ba94);
  border: 1px solid #859b74;
  border-radius: 2px;
  box-shadow: 0 2px 0 #6c865b;
  font-size: 18px;
}
.add-record.saved {
  background: #bbc9a7;
  box-shadow: inset 0 1px 2px #62785266;
  color: #647e52;
}
.load-more {
  margin: 12px auto 0;
  width: 44px;
}
.source-fields {
  display: flex;
  gap: 12px;
  align-items: center;
  margin: 16px 15px 13px 54px;
}
.source-fields select {
  min-width: 0;
  flex: 1;
  background: #2e4530;
  color: #d1dcae;
  border: 3px solid #718863;
  border-radius: 2px;
  padding: 7px;
  font-size: 14px;
  outline: none;
}
.source-fields select:first-child {
  flex: 1.5;
}
.source-fields .panel-button {
  width: 40px;
  height: 38px;
}
.source-symbol {
  position: absolute;
  left: 21px;
  top: 39px;
  width: 28px;
  height: 28px;
  fill: none;
  stroke: #697e57;
  stroke-width: 1.4;
}
.source-drawer .panel-status {
  margin-left: 69px;
}
.view-wall .background-wall {
  opacity: 0;
  pointer-events: none;
}
.view-wall .table-surface {
  top: 91%;
}
.view-wall .turntable-stage {
  top: 90%;
  transform: translate(-50%, -50%) scale(calc(var(--player-scale)*.46));
}
.view-wall .turntable-stage:hover {
  transform: translate(-50%, -50%) scale(calc(var(--player-scale)*.52));
}
.view-wall .dust-cover {
  transform: translateZ(25px) rotateX(0deg);
}
.wall-view {
  position: fixed;
  inset: 0 0 24%;
  z-index: 3;
  overflow: auto;
  padding: 7vh max(7vw, calc((100vw - 1300px)/2)) 70px;
  background:
    radial-gradient(
      ellipse at 5% 0%,
      #f0e7d6,
      #daceb7);
  mask-image: linear-gradient(#000 0 92%, transparent);
}
.wall-view:before {
  position: fixed;
  bottom: 24%;
  z-index: -1;
}
.record-collection {
  position: relative;
}
.collection-row {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 35px;
  align-items: end;
  padding: 0 24px 18px;
  margin-bottom: 50px;
  min-height: 140px;
}
.collection-row:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 20px;
  border-radius: 2px;
  background:
    linear-gradient(
      #d7ab7666 0 3px,
      transparent 4px 13px,
      #4e2c1977),
    url(/assets/wood-grain.svg) center / 900px 120px;
  border-top: 2px solid #d2ab79;
  border-bottom: 2px solid #56331e;
  box-shadow:
    inset 0 2px #f0ce9e44,
    0 3px 2px #39241855,
    0 15px 15px #45341b30;
  pointer-events: none;
}
.record-card {
  background: none;
  position: relative;
  padding: 0;
  text-align: left;
  min-width: 0;
  aspect-ratio: 1;
  transform: rotate(var(--lean,-1deg));
  transform-origin: bottom;
  transition: transform .4s;
}
.record-card:nth-child(2n) {
  --lean:1.6deg;
}
.record-card:hover,
.record-card:focus-visible {
  transform: translateY(-16px) rotate(0);
}
.record-card > .cover {
  box-shadow: 5px 7px 9px #37271142;
  border: 1px solid #8a806822;
}
.empty-slot {
  aspect-ratio: 1;
  background: #dbcfb53d;
  border: 1px solid #a69a7d66;
  box-shadow: inset 0 0 0 7px #e6d9bd55, 3px 5px 7px #56412418;
  display: grid;
  place-items: center;
  color: #8e8165;
  font-size: 36px;
  font-weight: 200;
  transform: rotate(1deg);
}
.empty-slot:hover {
  transform: translateY(-6px);
  color: #6c654e;
}
.cover {
  position: relative;
  isolation: isolate;
  display: block;
  overflow: hidden;
  width: 100%;
  height: 100%;
  background: var(--cover-bg,#bca98a);
  color: var(--cover-ink,#f3ecd8);
}
.cover:after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid #fff3;
  pointer-events: none;
  background:
    linear-gradient(
      120deg,
      #fff2,
      transparent 45%,
      #0000000c);
  box-shadow: inset 0 0 8px #171f1422;
}
.cover img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cover.fallback img {
  display: none;
}
.cover-name {
  position: absolute;
  left: 9%;
  right: 7%;
  bottom: 15%;
  font-family:
    Georgia,
    "Songti SC",
    serif;
  font-size: clamp(14px, 1.7vw, 24px);
  letter-spacing: .05em;
  line-height: 1.25;
  text-wrap: balance;
  font-weight: 500;
}
.cover-artist {
  position: absolute;
  left: 9%;
  bottom: 7%;
  font-size: 8px;
  letter-spacing: 1px;
  opacity: .75;
}
.background-record .cover-name {
  font-size: 14px;
}
.background-record .cover-artist {
  font-size: 5px;
}
.cover-geometry {
  position: absolute;
  inset: 0;
  opacity: .85;
}
.cover-geometry:before {
  content: "";
  position: absolute;
  width: 65%;
  height: 65%;
  border-radius: 50%;
  top: 3%;
  left: 37%;
  background: var(--cover-shape,#6f735d);
  box-shadow: inset -12px -6px 0 #ffffff18;
}
.cover-geometry:after {
  content: "";
  position: absolute;
  inset: 28% -30% -15% -30%;
  background:
    repeating-linear-gradient(
      0deg,
      transparent 0 5px,
      #ebe1c522 6px 7px);
  transform: rotate(-22deg);
}
.cover-pattern-1 .cover-geometry:before {
  border-radius: 0;
  transform: rotate(30deg);
  left: 48%;
  top: -3%;
  width: 38%;
  height: 115%;
  box-shadow: -24px 0 #e1d2a522;
}
.cover-pattern-2 .cover-geometry:before {
  width: 90%;
  height: 90%;
  left: 22%;
  top: 20%;
  background:
    repeating-radial-gradient(
      circle,
      transparent 0 10px,
      #e7dbc655 11px 12px);
}
.cover-pattern-3 .cover-geometry:before {
  width: 58%;
  height: 58%;
  top: 16%;
  left: 34%;
  background:
    linear-gradient(
      45deg,
      #554d3c,
      var(--cover-shape));
  border-radius: 50% 50% 0 0;
}
.cover-pattern-3 .cover-geometry:after {
  background:
    linear-gradient(
      140deg,
      transparent 40%,
      #ddd0a355 41% 42%,
      transparent 43%);
  transform: none;
}
.cover.has-image .cover-name,
.cover.has-image .cover-artist {
  opacity: 0;
}
.cover.has-image.fallback .cover-name,
.cover.has-image.fallback .cover-artist {
  opacity: 1;
}
.result-cover .cover-name {
  font-size: 7px;
}
.result-cover .cover-artist {
  display: none;
}
.flying-vinyl {
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  background:
    repeating-radial-gradient(
      circle,
      #141b18 0 2px,
      #333a34 3px,
      #151c18 4px);
  box-shadow: 2px 5px 14px #19251b55;
}
.flying-vinyl:before {
  content: "";
  position: absolute;
  inset: 32%;
  border-radius: 50%;
  background: var(--label,#ac644b);
  border: 1px solid #dfcaa277;
}
.flying-vinyl:after {
  content: "";
  position: absolute;
  inset: 48%;
  border-radius: 50%;
  background: #141b18;
}
.drawer-is-open .turntable-stage {
  top: 53%;
  transform: translate(-50%, -50%) scale(calc(var(--player-scale)*1.03));
}
.drawer-is-open .dust-cover {
  pointer-events: none;
}
.busy .play-key {
  animation: pulse 1s infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes level {
  from {
    transform: scaleY(.3);
  }
  to {
    transform: scaleY(1);
  }
}
@keyframes pulse {
  50% {
    opacity: .45;
  }
}
@keyframes drawer-out {
  from {
    transform: translateZ(0) translateY(-10px);
    opacity: 0;
  }
  to {
    transform: translateZ(65px);
    opacity: 1;
  }
}
@media (max-width: 800px) {
  .background-wall {
    top: 10vh;
    width: 90vw;
    height: 210px;
  }
  .background-records {
    gap: 15px;
  }
  .background-record {
    max-height: 95px;
  }
  .shelf-one {
    top: 95px;
  }
  .shelf-two {
    top: 210px;
  }
  .background-record .cover-name {
    font-size: 11px;
  }
  .turntable-stage {
    top: 57%;
  }
  .table-surface {
    top: 56%;
  }
  .collection-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 23px;
  }
  .wall-view {
    padding: 7vh 6vw 50px;
  }
  .drawer-is-open .turntable-stage {
    top: 51%;
    transform: translate(-50%, -50%) scale(calc(var(--player-scale)*1.08));
  }
  .view-wall .turntable-stage {
    top: 88%;
    transform: translate(-50%, -50%) scale(calc(var(--player-scale)*.64));
  }
}
@media (max-width: 500px) {
  .background-wall {
    top: 12vh;
    opacity: .65;
  }
  .background-records {
    gap: 12px;
    inset: 0 5%;
  }
  .background-record {
    max-height: 65px;
  }
  .background-record:nth-child(n+6) {
    margin-top: 8px;
  }
  .background-record .cover-name {
    font-size: 9px;
  }
  .background-record .cover-artist {
    font-size: 4px;
  }
  .shelf-one {
    top: 66px;
  }
  .shelf-two {
    top: 155px;
  }
  .turntable-stage {
    top: 55%;
  }
  .table-surface {
    top: 56%;
  }
  .collection-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 27px;
    padding: 0 15px 18px;
    margin-bottom: 40px;
  }
  .wall-view {
    inset: 0 0 30%;
    padding: 6vh 7vw 40px;
  }
  .view-wall .turntable-stage {
    top: 81%;
    transform: translate(-50%, -50%) scale(calc(var(--player-scale)*.8));
  }
  .view-wall .turntable-stage:hover {
    transform: translate(-50%, -50%) scale(calc(var(--player-scale)*.8));
  }
  .view-wall .table-surface {
    top: 79%;
  }
  .drawer-is-open .turntable-stage {
    top: 50%;
    transform: translate(-50%, -50%) scale(calc(var(--player-scale)*1.08));
  }
  .machine-drawer {
    max-height: 325px;
    padding: 27px 20px 18px;
  }
  .search-form input,
  .source-fields select {
    font-size: 20px;
    height: 42px;
  }
  .source-fields {
    margin-left: 38px;
    gap: 9px;
  }
  .source-symbol {
    left: 12px;
  }
  .search-result {
    grid-template-columns: 46px minmax(0, 1fr) auto;
    padding: 10px 0;
  }
  .result-cover {
    width: 46px;
    height: 46px;
  }
  .result-info strong {
    font-size: 18px;
  }
  .result-info p {
    font-size: 13px;
  }
  .add-record {
    width: 39px;
    height: 35px;
    font-size: 24px;
  }
  .panel-status {
    font-size: 16px;
  }
  .drawer-close {
    font-size: 30px;
    line-height: 30px;
  }
  .mechanical-key {
    height: 42px;
  }
  .mechanical-key svg {
    width: 21px;
    height: 21px;
  }
  .key-bed {
    top: 91px;
  }
  .display-top #now-title {
    font-size: 13px;
  }
  .machine-display {
    height: 68px;
  }
  .display-stereo {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *:before,
  *:after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}
@media (max-width: 500px) {
  .key-bed {
    left: 26px;
    top: 101px;
  }
  .mechanical-key {
    width: 68px;
    height: 36px;
  }
  .speaker-grille {
    height: 58px;
  }
  .maker-plate {
    top: 87px;
  }
  .display-top #now-title {
    font-size: 18px;
    line-height: 18px;
  }
  .display-bottom #lcd-time {
    font-size: 22px;
  }
  .search-form input,
  .source-fields select {
    font-size: 26px;
    height: 48px;
  }
  .result-info strong {
    font-size: 24px;
  }
  .result-info p {
    font-size: 18px;
  }
  .search-result {
    grid-template-columns: 56px minmax(0, 1fr) auto;
  }
  .result-cover {
    width: 56px;
    height: 56px;
  }
  .add-record {
    width: 46px;
    height: 39px;
  }
}
.deck {
  background:
    linear-gradient(
      110deg,
      #dfb98533,
      transparent 42%,
      #35211435),
    url(/assets/wood-grain.svg) center / 760px 440px;
  border-color: #c89b68 #794d2d #a57245 #996a42;
  box-shadow:
    inset 0 0 0 2px #50321e,
    inset 0 0 0 3px #d7af7666,
    0 1px 0 #e1b684;
}
.case-face {
  background:
    linear-gradient(
      90deg,
      #321d1255,
      transparent 40%,
      #35201288),
    url(/assets/wood-grain.svg) center / 540px 175px;
}
.case-right {
  background-position: right;
}
.machine-front {
  background:
    repeating-linear-gradient(
      0deg,
      #ffffff25 0 1px,
      transparent 1px 3px),
    linear-gradient(
      100deg,
      #b3b6ae,
      #edeae0 25%,
      #c3c5ba 56%,
      #d6d7cb 82%,
      #a3aaa0);
  border-color: #b88a55 #724829 #56351f #90603a;
  box-shadow:
    inset 0 0 0 1px #6a7163,
    inset 0 3px 1px #fff8,
    inset 0 -2px 3px #66705b66,
    0 2px 0 #321e14;
}
.machine-front:before {
  content: "";
  position: absolute;
  left: -9px;
  right: -9px;
  bottom: -10px;
  height: 9px;
  border-bottom: 1px solid #321c10;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(#492a1455, #26160d66), url(/assets/wood-grain.svg) center / 740px 90px;
  pointer-events: none;
}
.machine-display {
  border-color: #6b7565 #808977 #b3b9a7 #63705e;
  box-shadow:
    inset 0 0 10px #061a12,
    0 0 0 1px #4e5c43,
    0 2px 0 #fbf6df;
}
.knob-face,
.volume-knob .knob-face {
  background:
    conic-gradient(
      from 25deg,
      #e4e5db,
      #9a9f94 28deg,
      #f5f2e7 76deg,
      #afb3a6 125deg,
      #f1efe1 171deg,
      #828b7c 225deg,
      #d1d6c7 279deg,
      #fff9ec 310deg,
      #e4e5db);
  box-shadow:
    1px 5px 4px #28312255,
    inset 0 0 0 2px #e5e8d9,
    inset 0 0 0 5px #a5ad9c;
}
.volume-knob .knob-face:after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background:
    repeating-radial-gradient(
      circle,
      transparent 0 2px,
      #68716314 2.5px 3px);
  pointer-events: none;
}
.mechanical-key {
  background:
    linear-gradient(
      #f1f0e7,
      #cbcec1 60%,
      #a8b09f);
  border-color: #ebede2 #a8b29c #829174 #dce2cf;
  box-shadow:
    0 5px 0 #7f8972,
    0 6px 1px #28341e,
    inset 0 2px 0 #fffb;
}
.speaker-grille {
  background:
    radial-gradient(
      circle,
      #252e21 1px,
      transparent 1.7px) 0 0 / 4px 4px,
    radial-gradient(
      ellipse at center,
      #7a8172 0 35%,
      #aab09d 63%,
      #c8cbb9);
  border-color: #808c75 #b5bea5 #dce1ca #7d8b72;
  box-shadow: inset 0 0 12px #313b2477, 0 0 0 1px #6a775d;
}
.arm-bearing:after {
  content: "";
  position: absolute;
  left: 9px;
  top: 7px;
  width: 10px;
  height: 10px;
  border: 2px solid #d7decb;
  border-radius: 50%;
  background:
    linear-gradient(
      135deg,
      #62715a 40%,
      #d4ddc5 42% 53%,
      #6c7a63 55%);
  transform: translateZ(2px);
}
.headshell:before {
  content: "";
  position: absolute;
  left: 4px;
  bottom: 8px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #b9c5a8;
  box-shadow: 20px 0 #b9c5a8;
}
.anti-skate {
  position: absolute;
  left: 679px;
  top: 136px;
  width: 29px;
  height: 29px;
  border-radius: 50%;
  border: 3px solid #87967c;
  background: repeating-conic-gradient(#303e29 0 12deg, #66765a 13deg 20deg);
  box-shadow: 1px 4px 3px #18261188, 0 0 0 1px #adb79f;
  transform: translateZ(10px);
}
.anti-skate:after {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background:
    linear-gradient(
      90deg,
      #35472a 40%,
      #d3dec3 42% 57%,
      #435535 59%);
}
.cue-lever {
  position: absolute;
  left: 677px;
  top: 217px;
  width: 6px;
  height: 54px;
  border-radius: 3px;
  background:
    linear-gradient(
      90deg,
      #5d7153,
      #e3e8d5 40%,
      #9da98b 70%,
      #354d2a);
  box-shadow: 2px 4px 3px #15280e55;
  transform: translateZ(20px) rotateZ(-18deg);
}
.cue-lever:after {
  content: "";
  position: absolute;
  left: -3px;
  bottom: 0;
  width: 12px;
  height: 19px;
  border-radius: 3px;
  background:
    linear-gradient(
      90deg,
      #23321c,
      #546a42,
      #25391d);
}
.lid-glass {
  border-color: #5060519c #6171609c #889682ad #c2cbb77a;
  background:
    linear-gradient(
      110deg,
      #f8f8ea25,
      transparent 28%,
      #8ba38e0c 60%,
      #324c3522),
    linear-gradient(
      30deg,
      transparent 40%,
      #f8f8e819 41% 43%,
      transparent 44% 78%,
      #fffff013 79% 82%,
      transparent 83%);
  box-shadow:
    inset 0 0 0 1px #eff5e199,
    inset 0 0 0 3px #6b7f5f44,
    inset 0 0 20px #6d86641a;
}
.lid-handle {
  box-shadow:
    0 0 0 1px #3d5037,
    inset 0 1px 0 #d7e0c5aa,
    0 2px 0 #2e442c88;
}
.player-shadow:after {
  content: "";
  position: absolute;
  inset: 28px 40px 15px;
  border-radius: 50%;
  background: #26180e44;
}
.deck {
  background:
    linear-gradient(
      105deg,
      #f0cea22c,
      transparent 43%,
      #23160c33),
    url(/assets/materials/walnut-veneer.svg) center / 1100px 440px;
  box-shadow:
    inset 0 0 0 1px #3b291b,
    inset 0 0 0 2px #dbb07c9c,
    inset 0 0 0 4px #54352166,
    0 1px 0 #e4bb84;
}
.case-face {
  background:
    linear-gradient(
      90deg,
      #35211555,
      transparent 45%,
      #22170e88),
    url(/assets/materials/walnut-veneer.svg) center / 820px 220px;
}
.deck-inset {
  background:
    url(/assets/materials/surface-grain.svg),
    radial-gradient(
      ellipse at 24% 10%,
      #656152,
      #4a4b3e 55%,
      #30382f);
  border-color: #34372a #6d6b54 #80775c #3f4432;
  box-shadow:
    0 0 0 1px #c8a775,
    inset 0 3px 5px #111c14a6,
    inset 0 -1px 0 #b7b09455;
}
.machine-front {
  background:
    url(/assets/materials/brushed-metal.svg) center / 740px 155px,
    linear-gradient(
      102deg,
      #b2b5ab,
      #f1eee2 24%,
      #cacebf 48%,
      #dfe0d2 77%,
      #a9b1a2);
  box-shadow:
    inset 0 0 0 1px #6f7564,
    inset 0 1px 0 2px #fff9,
    inset 0 -2px 3px #4c5a4659,
    0 2px 0 #27190e;
}
.machine-front:before {
  background: linear-gradient(#291a1033, #20130988), url(/assets/materials/walnut-veneer.svg) center / 900px 100px;
}
.walnut-rail {
  position: absolute;
  pointer-events: none;
  background: url(/assets/materials/walnut-veneer.svg) center / 1100px 170px;
}
.walnut-rail-top {
  left: -9px;
  right: -9px;
  top: -10px;
  height: 8px;
  border-top: 1px solid #dfb37c;
  border-bottom: 1px solid #412817;
  box-shadow: inset 0 1px #e5c0905c, 0 1px 1px #33211566;
}
.walnut-rail-left {
  left: -10px;
  top: -2px;
  bottom: 0;
  width: 9px;
  border-left: 1px solid #be956a;
  border-right: 1px solid #523721;
  background-position: 15% 50%;
}
.walnut-rail-right {
  right: -10px;
  top: -2px;
  bottom: 0;
  width: 9px;
  border-right: 1px solid #4c321f;
  border-left: 1px solid #e4b88155;
  background-position: 82% 50%;
}
.platter-base {
  background:
    linear-gradient(
      120deg,
      #424a3c,
      #121d15);
  box-shadow:
    4px 10px 12px #0a180d88,
    0 0 0 4px #1b281c,
    0 0 0 7px #7a8270,
    0 0 0 8px #273826;
}
.platter-rim {
  background:
    conic-gradient(
      from 15deg,
      #e7e9db,
      #737d69 40deg,
      #ccd6ba 99deg,
      #8b987c 140deg,
      #f6f0de 185deg,
      #66785b 240deg,
      #dde2cc 299deg,
      #eef0df);
  box-shadow:
    0 0 0 1px #e5e5d3,
    0 0 0 3px #6d7a5d,
    0 0 0 5px #2a3a23;
}
.platter-rim:before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background:
    repeating-conic-gradient(
      #293b2566 0deg 1deg,
      #f6f4de 1.3deg 1.8deg,
      transparent 2deg 4deg);
  mask: radial-gradient(transparent 0 66%, #000 67%);
  animation: spin 1.8s linear infinite paused;
  pointer-events: none;
}
.playing .platter-rim:before {
  animation-play-state: running;
}
.platter-mat {
  background:
    url(/assets/materials/surface-grain.svg),
    repeating-radial-gradient(
      circle,
      #31372b 0 4px,
      #454b3b 5px,
      #292f25 6px 11px);
  box-shadow: inset 0 0 0 2px #152118, inset 0 0 6px #111c10;
}
.record-on-deck {
  background:
    repeating-radial-gradient(
      circle at center,
      #111913 0 1px,
      #32392b 1.4px 1.8px,
      #131a13 2.2px 3.1px);
  box-shadow:
    0 0 0 1px #090e09,
    inset 0 0 0 2px #61664c55,
    0 3px 2px #0d180abb;
}
.record-on-deck:before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      transparent 0 34%,
      #182016 34.5% 37%,
      transparent 37.5% 45%,
      #090f0a99 45.5% 46.1%,
      transparent 46.5% 53%,
      #050d0799 53.5% 54.1%,
      transparent 54.5% 61%,
      #060d0688 61.5% 62.1%,
      transparent 62.5% 67.5%,
      #5b624b44 68% 69%,
      transparent 69.5%);
}
.vinyl-sheen {
  inset: 4px;
  background:
    conic-gradient(
      from -34deg,
      transparent 0deg,
      #f0ead731 25deg,
      #e0e1bd0a 37deg,
      transparent 62deg 166deg,
      #c3d0ae1f 193deg,
      transparent 220deg 327deg,
      #ffffff0d 348deg,
      transparent 360deg);
  mask:
    radial-gradient(
      transparent 0 23%,
      #000 24% 70%,
      transparent 71%);
  transform: translateZ(1px);
  box-shadow: none;
  pointer-events: none;
  transition: opacity .25s;
}
.no-record .vinyl-sheen {
  opacity: 0;
}
.record-label {
  background-image: url(/assets/materials/surface-grain.svg);
  background-size: 95px 95px;
  border-color: #debd8299;
  box-shadow:
    0 0 0 1px #141d10,
    0 0 0 2px #73774a55,
    inset 0 0 0 4px #e8dbab22,
    inset 0 0 8px #6c482a44;
  text-shadow: 0 1px #34280a33;
}
.record-label:after {
  box-shadow: 0 0 0 1px #fff4, inset 1px 2px 2px #0009;
}
.spindle {
  background:
    radial-gradient(
      circle at 28% 18%,
      #fff,
      #efedcf 20%,
      #8d9a7a 48%,
      #455c36 76%);
  box-shadow: 2px 5px 3px #0a1908aa, 0 0 0 1px #e0e5cc;
}
.arm-rod {
  background:
    linear-gradient(
      90deg,
      #293a2b 0%,
      #7f9078 16%,
      #f7f4df 33%,
      #c5cbb7 43%,
      #91a182 58%,
      #e1e5ce 71%,
      #647951 83%,
      #2d4424);
  box-shadow:
    1px 0 #f0efd8aa,
    -1px 0 #21381e99,
    5px 8px 5px #122b1544;
}
.counterweight {
  background:
    repeating-linear-gradient(
      0deg,
      transparent 0 3px,
      #26321d66 3.5px 4.5px,
      #f2efd442 5px 6px),
    linear-gradient(
      90deg,
      #506045,
      #e2e5d1 24%,
      #bdc7ac 49%,
      #7a8c68 74%,
      #344b2a);
  border-top: 1px solid #e8e8d3aa;
  border-bottom: 2px solid #22371b;
}
.arm-base-ring:after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px dashed #ecedd37a;
}
.cartridge-contacts {
  position: absolute;
  top: 255px;
  left: -10px;
  width: 3px;
  height: 14px;
  background: #876d3e;
  border-radius: 2px;
  box-shadow: 7px 0 #8e4234, 14px 0 #46676d;
  transform: translateZ(2px);
}
.stylus {
  background:
    linear-gradient(#e18f6555, transparent 45%),
    linear-gradient(
      90deg,
      #853c27,
      #c86a46 38%,
      #9e442a 74%,
      #612d20);
  border-bottom: 1px solid #43261c;
}
.stylus:after {
  content: "";
  position: absolute;
  left: 10px;
  bottom: -7px;
  width: 2px;
  height: 7px;
  background: linear-gradient(#e4dcc4, #737664);
  transform: rotateX(-35deg);
  transform-origin: top;
}
.hinge {
  background:
    repeating-linear-gradient(
      90deg,
      #465340 0 3px,
      #87977a 4px,
      #d5ddc3 6px,
      #586d49 8px 12px);
  border-color: #98a989 #30432a #26361f #899b77;
  box-shadow: 0 4px 4px #15261077, inset 0 1px #eef1d8aa;
}
.hinge:after {
  content: "";
  position: absolute;
  left: -5px;
  right: -5px;
  top: 8px;
  height: 7px;
  border-radius: 4px;
  background:
    linear-gradient(
      #384b2a,
      #e3e4cb 42%,
      #98a782 58%,
      #354c29);
  box-shadow: 0 2px 2px #17270e88;
}
.lid-glass:before {
  content: "";
  position: absolute;
  top: 18px;
  left: 25px;
  width: 36%;
  height: 68%;
  background:
    linear-gradient(
      90deg,
      #f9f7de14 0 47%,
      transparent 48% 51%,
      #f9f7de11 52%),
    linear-gradient(
      0deg,
      transparent 0 48%,
      #ffffff0c 49% 50%,
      transparent 51%);
  transform: skewX(-17deg);
  opacity: .8;
  pointer-events: none;
  transition: opacity 1.3s;
}
.lid-closed .lid-glass:before {
  opacity: .38;
}
.lid-glass:after {
  content: "";
  position: absolute;
  inset: 0;
  background: url(/assets/materials/surface-grain.svg);
  opacity: .13;
  pointer-events: none;
}
.lid-edge {
  background:
    linear-gradient(
      #e4ebd649,
      #667b5466 18%,
      #2e442939 74%,
      #d4dfbb4d);
  border-color: #cad7b77a;
  box-shadow: inset 0 1px #fbf8e34d;
}
.volume-knob,
.source-knob {
  background:
    repeating-conic-gradient(
      #72816a 0deg 2deg,
      #c4ceb6 3deg 4deg,
      #606f5644 5deg 6deg);
  box-shadow:
    0 0 0 1px #627256,
    0 2px 0 3px #e5e7cd,
    1px 7px 6px #43522f55;
}
.knob-face {
  background-color: #cdd4be;
}
.knob-face:after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background:
    repeating-radial-gradient(
      circle,
      transparent 0 1.5px,
      #414f3424 2px,
      #fff7d52b 2.5px,
      transparent 3px);
  pointer-events: none;
}
.volume-knob .knob-face:after {
  background:
    repeating-radial-gradient(
      circle,
      transparent 0 1.5px,
      #414f3424 2px,
      #fff7d52b 2.5px,
      transparent 3px);
}
.mechanical-key {
  background:
    url(/assets/materials/brushed-metal.svg) center / 200px 50px,
    linear-gradient(
      #f3f0e3 0 6%,
      #dce0d0 12%,
      #c3cbb6 65%,
      #a5b094 90%,
      #e0e5d1 94%);
}
.mechanical-key:before {
  content: "";
  position: absolute;
  inset: 1px;
  border-top: 1px solid #fff9;
  border-left: 1px solid #ffffeb55;
  border-right: 1px solid #4c5e3433;
  border-bottom: 1px solid #53653d66;
  border-radius: 1px;
  pointer-events: none;
}
.mechanical-key svg {
  filter: drop-shadow(0 1px 0 #ffffffa6);
}
.machine-display:after {
  background:
    linear-gradient(
      115deg,
      #f3f0d421,
      transparent 28% 73%,
      #f8f5df10 74%,
      transparent 77%),
    repeating-linear-gradient(
      0deg,
      transparent 0 2px,
      #06160c22 3px);
  opacity: .8;
}
.display-seek {
  box-shadow: inset 0 1px 2px #0c1d0799;
}
.power-lamp i {
  background:
    radial-gradient(
      circle at 30% 25%,
      #d2d7a3 0%,
      #879663 31%,
      #4c6132 78%);
}
.playing .power-lamp i {
  background:
    radial-gradient(
      circle at 30% 25%,
      #ffffd0,
      #d0dd90 34%,
      #819e43 77%);
  box-shadow: 0 0 4px #deeca68a, 0 0 10px #c2d78955;
}
.deck-screw,
.panel-screw {
  background:
    conic-gradient(
      from 20deg,
      #d4dcc3,
      #718565 30deg,
      #f6efd4 85deg,
      #637855 150deg,
      #d6ddc3 230deg,
      #889c74 290deg,
      #d4dcc3);
  box-shadow:
    0 0 0 1px #293d2177,
    1px 1px 2px #21331566,
    inset 0 0 0 1px #ebf0d380;
}
.foot {
  background:
    repeating-linear-gradient(
      0deg,
      #1b2416 0 3px,
      #303b2544 4px 6px),
    radial-gradient(
      ellipse,
      #4d5740,
      #162211 70%);
  border: 3px solid #758067;
  border-color: #7f8a71 #29391d #16200f #4a5c39;
}
.foot:after {
  content: "";
  position: absolute;
  left: -3px;
  right: -3px;
  top: 59px;
  height: 16px;
  background:
    repeating-linear-gradient(
      0deg,
      #1b2215 0 2px,
      #465039 3px,
      #161e11 4px 6px);
  border-radius: 0 0 8px 8px;
  transform-origin: top;
  transform: rotateX(-90deg);
}
.maker-plate {
  text-shadow: 0 1px #ffffddcc, 0 -1px #4f5c3944;
}
.table-surface {
  left: -6%;
  right: -6%;
  bottom: 5vh;
  background:
    linear-gradient(
      180deg,
      #ddc7a779,
      #e2c9a247 45%,
      #ad875228),
    url(/assets/materials/walnut-veneer.svg) center / 1550px 680px;
  border-top: 3px solid #e0bf8e;
  box-shadow: inset 0 2px #f2d5a999, 0 -3px 8px #58402324;
  overflow: visible;
}
.table-surface:before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      ellipse at 55% 95%,
      #ffedbb1a,
      transparent 60%),
    linear-gradient(
      90deg,
      #48322116,
      transparent 22% 78%,
      #33231222);
  pointer-events: none;
}
.table-surface:after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 26px;
  background:
    linear-gradient(
      #d2aa7866 0 2px,
      #76533577 3px,
      #472e1b99),
    url(/assets/materials/walnut-veneer.svg) center / 1450px 160px;
  border-top: 1px solid #f3cf9966;
  border-bottom: 3px solid #513922;
  box-shadow: 0 8px 13px #45332055, inset 0 -1px #bb8b5944;
}
.turntable-stage {
  top: 56%;
}
.desk-props {
  position: absolute;
  inset: 0;
  transform: translateZ(-211px);
  pointer-events: none;
  user-select: none;
  transition: opacity .65s;
}
.view-wall .desk-props {
  opacity: 0;
}
.floppy-stack {
  position: absolute;
  left: -190px;
  top: 240px;
  width: 123px;
  height: 126px;
  transform: rotateZ(-12deg);
}
.floppy {
  position: absolute;
  inset: 0;
  border-radius: 3px 7px 3px 3px;
  background:
    url(/assets/materials/surface-grain.svg),
    linear-gradient(
      130deg,
      #314656,
      #192c39 70%,
      #172834);
  border: 2px solid #162833;
  box-shadow:
    inset 1px 2px #76899766,
    inset -1px -2px #081827aa,
    3px 6px 2px #291e1455,
    8px 12px 12px #392a172d;
}
.floppy:before {
  content: "";
  position: absolute;
  inset: 6px 7px auto;
  height: 45px;
  border: 1px solid #111f29;
  border-radius: 0 0 3px 3px;
  background: #1c2b3355;
}
.floppy:after {
  content: "";
  position: absolute;
  left: 8px;
  bottom: 4px;
  width: 9px;
  height: 6px;
  background: #0c1a20;
  box-shadow: 90px 0 #0c1a20, inset 1px 1px #74899755;
}
.floppy-back {
  transform: translate(7px, -7px) rotateZ(11deg);
  background-color: #55564b;
  background-image:
    url(/assets/materials/surface-grain.svg),
    linear-gradient(
      130deg,
      #767466,
      #41463c);
}
.floppy-front {
  transform: translateZ(5px);
}
.floppy-shutter {
  position: absolute;
  top: -1px;
  left: 37px;
  width: 63px;
  height: 44px;
  background:
    url(/assets/materials/brushed-metal.svg),
    linear-gradient(
      110deg,
      #8f9b9c,
      #e3e5df 45%,
      #a6b0af 72%,
      #d9ddd5);
  border-radius: 0 0 4px 4px;
  border: 1px solid #b4c0bc;
  box-shadow: 1px 2px 2px #091f2680;
}
.floppy-shutter:after {
  content: "";
  position: absolute;
  right: 8px;
  top: 6px;
  width: 16px;
  height: 29px;
  border: 1px solid #677678;
  background: #25323a;
  box-shadow: inset 2px 2px 2px #101b23;
}
.floppy-label {
  position: absolute;
  left: 11px;
  right: 11px;
  bottom: 16px;
  height: 53px;
  background: url(/assets/materials/surface-grain.svg), #e5dfc5;
  border: 1px solid #c4bca2;
  border-radius: 1px 1px 3px 3px;
  color: #41505a;
  padding: 7px 8px;
  font: 12px "Courier New", monospace;
  box-shadow: 0 1px 1px #18283288;
}
.floppy-label b {
  font:
    italic 14px "Comic Sans MS",
    "KaiTi",
    cursive;
  color: #2e4863;
}
.floppy-label i {
  display: block;
  height: 1px;
  background: #acb0a6;
  margin: 5px 0 3px;
}
.floppy-label small {
  font: 7px monospace;
  letter-spacing: 1px;
}
.floppy-notch {
  position: absolute;
  top: 8px;
  left: 9px;
  width: 9px;
  height: 4px;
  background: #61778a;
  border: 1px solid #162938;
}
.cd-stack {
  position: absolute;
  left: 809px;
  top: 235px;
  width: 149px;
  height: 137px;
  transform: rotateZ(13deg);
}
.jewel-case {
  position: absolute;
  inset: 0;
  border: 3px solid #a0aaa18c;
  border-radius: 2px;
  background:
    linear-gradient(
      130deg,
      #eff1df77,
      #7f91852b 60%,
      #e7ecdb55);
  box-shadow:
    inset 0 0 0 1px #eff5e099,
    0 4px 0 #50615780,
    3px 8px 5px #2e321f55,
    9px 14px 12px #382c1a33;
}
.jewel-case:after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      127deg,
      #fff6 0 1%,
      transparent 2% 45%,
      #ffffef26 46% 49%,
      transparent 50% 90%,
      #ffffef36 91%);
  border: 1px solid #f8f9ed88;
  pointer-events: none;
}
.jewel-under {
  transform: translate(-6px, -9px) rotateZ(-9deg);
  background: #41535a;
}
.cd-booklet {
  position: absolute;
  inset: 4px 3px 4px 12px;
  background:
    linear-gradient(
      125deg,
      #516b70,
      #293e42);
  color: #d8d1b4;
  padding: 10px;
}
.cd-booklet small {
  font: 6px monospace;
  letter-spacing: 2px;
}
.cd-booklet b {
  display: block;
  margin-top: 26px;
  font: 28px "Songti SC", serif;
}
.jewel-top {
  transform: translateZ(6px);
}
.jewel-spine {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 12px;
  background:
    repeating-linear-gradient(
      0deg,
      #48564f66 0 2px,
      #c1d0be66 3px,
      transparent 4px 5px);
  border-right: 1px solid #edf3dc88;
}
.desk-compact-disc {
  position: absolute;
  width: 118px;
  height: 118px;
  left: 15px;
  top: 7px;
  border-radius: 50%;
  background:
    conic-gradient(
      from 25deg,
      #c8d5ce,
      #c6d3ae 18deg,
      #78b0ae 35deg,
      #c2b2c2 61deg,
      #dfe3c9 90deg,
      #95b7c4 122deg,
      #e3c5ab 148deg,
      #e1e2d4 183deg,
      #b1c9a3 216deg,
      #86b6c1 241deg,
      #c5aec9 269deg,
      #e6ddbc 300deg,
      #b3c8c5 330deg,
      #d3dad2);
  box-shadow: 0 0 0 1px #939e9588, 1px 2px 4px #344d3855;
}
.desk-compact-disc:before {
  content: "";
  position: absolute;
  inset: 33%;
  border: 1px solid #eaf2e199;
  border-radius: 50%;
  background: #ccd5c56b;
  box-shadow: 0 0 0 3px #a1b4a680, 0 0 0 4px #f0f5e080;
}
.desk-compact-disc i {
  position: absolute;
  inset: 44%;
  background: #526b5955;
  border-radius: 50%;
  border: 1px solid #e3ecd2;
  box-shadow: inset 1px 1px #59775c77;
}
.cd-marker {
  position: absolute;
  left: 38px;
  top: 32px;
  transform: rotateZ(-13deg);
  font: italic 10px "Comic Sans MS", cursive;
  letter-spacing: .5px;
  color: #3d4561;
}
.jewel-latch {
  position: absolute;
  right: -3px;
  top: 57px;
  width: 5px;
  height: 17px;
  border: 1px solid #d8e0d26b;
  background: #6d837066;
}
.mixtape-group {
  position: absolute;
  left: -155px;
  top: 400px;
  width: 151px;
  height: 93px;
  transform: rotateZ(8deg);
}
.paper-ticket {
  position: absolute;
  left: -15px;
  top: 21px;
  width: 172px;
  height: 59px;
  background: url(/assets/materials/surface-grain.svg), #c6bd93;
  color: #71654d;
  border-right: 2px dotted #927c54;
  box-shadow: 2px 4px 3px #49391f33;
  transform: rotateZ(-19deg);
  padding: 6px;
}
.paper-ticket span {
  display: block;
  font: 7px monospace;
  letter-spacing: 2px;
}
.paper-ticket b {
  position: absolute;
  right: 7px;
  bottom: 6px;
  font: 7px monospace;
}
.paper-ticket i {
  display: block;
  width: 62px;
  height: 16px;
  margin-top: 8px;
  background:
    repeating-linear-gradient(
      90deg,
      #73664c 0 1px,
      transparent 1px 2px,
      #73664c 2px 4px,
      transparent 4px 6px);
}
.desk-cassette {
  position: absolute;
  inset: 0;
  background:
    url(/assets/materials/surface-grain.svg),
    linear-gradient(
      135deg,
      #51564a,
      #292e27 70%);
  border: 2px solid #283125;
  border-radius: 6px;
  box-shadow:
    inset 0 1px #b2b5a255,
    inset 0 -2px #121b10,
    0 4px 0 #232b1e,
    3px 8px 5px #27271777;
  transform: translateZ(5px);
}
.cassette-sticker {
  position: absolute;
  left: 12px;
  right: 12px;
  top: 8px;
  height: 33px;
  background:
    linear-gradient(
      #cec3a2 0 76%,
      #aa694f 77% 86%,
      #d4c5a5 87%);
  border-radius: 3px 3px 9px 9px;
  padding: 5px 6px;
  color: #464f3b;
}
.cassette-sticker b {
  font: italic 11px "Comic Sans MS", cursive;
}
.cassette-sticker small {
  display: block;
  font: 6px monospace;
  margin-top: 2px;
}
.cassette-sticker i {
  margin: 0 7px;
  font-style: normal;
}
.cassette-tape-window {
  position: absolute;
  left: 27px;
  right: 27px;
  top: 42px;
  height: 22px;
  border: 2px solid #65705a;
  border-radius: 12px;
  background: #736d5444;
  box-shadow: inset 0 2px 2px #101a0da8;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px;
}
.cassette-tape-window i {
  position: relative;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 4px solid #8e9075;
  background: repeating-conic-gradient(#e2d9b8 0 25deg, #50513e 26deg 60deg);
}
.cassette-tape-window b {
  width: 29px;
  height: 10px;
  border-top: 2px solid #28291b;
  border-bottom: 2px solid #272819;
}
.cassette-bottom {
  position: absolute;
  left: 34px;
  right: 34px;
  bottom: 0;
  height: 17px;
  background: linear-gradient(#333c2c, #59614e);
  clip-path: polygon(9% 0, 91% 0, 100% 100%, 0 100%);
}
.cassette-bottom:after {
  content: "";
  position: absolute;
  left: 12px;
  bottom: 4px;
  width: 7px;
  height: 5px;
  border-radius: 50%;
  background: #192013;
  box-shadow: 41px 0 #192013;
}
.cassette-screw {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background:
    linear-gradient(
      40deg,
      #aeb39d 40%,
      #36452c 41% 55%,
      #b5b6a2 56%);
}
.tape-screw-a {
  left: 4px;
  top: 4px;
}
.tape-screw-b {
  right: 4px;
  top: 4px;
}
.tape-screw-c {
  left: 4px;
  bottom: 4px;
}
.tape-screw-d {
  right: 4px;
  bottom: 4px;
}
.note-group {
  position: absolute;
  left: 813px;
  top: 380px;
  width: 159px;
  height: 108px;
  transform: rotateZ(-9deg);
}
.desk-note {
  position: absolute;
  left: 0;
  top: 0;
  width: 107px;
  height: 101px;
  background:
    url(/assets/materials/surface-grain.svg),
    linear-gradient(#c9ba7288 0 16px, transparent 25px),
    #e2d593;
  color: #526773;
  box-shadow:
    1px 1px #eedf9f,
    0 7px 7px -5px #59492899,
    9px 13px 10px -8px #3d322c77;
  padding: 25px 12px 9px;
  transform: translateZ(1px);
}
.desk-note span {
  display: block;
  font:
    12px "KaiTi",
    "Kaiti SC",
    cursive;
  line-height: 1.65;
  transform: rotateZ(-3deg);
  white-space: nowrap;
}
.desk-note small {
  display: block;
  margin-top: 5px;
  font: 7px "Courier New", monospace;
  opacity: .7;
}
.desk-note:after {
  content: "";
  position: absolute;
  bottom: -2px;
  right: 0;
  width: 22px;
  height: 14px;
  border-radius: 80% 0 0 0;
  background:
    linear-gradient(
      150deg,
      #efdfa18a,
      #d1c381);
  box-shadow: 1px 2px 2px #63573026;
}
.ballpoint-pen {
  position: absolute;
  left: 130px;
  top: -25px;
  width: 9px;
  height: 135px;
  background:
    linear-gradient(
      90deg,
      #a9b8a966,
      #eaf0dd9c 35%,
      #6b877766 58%,
      #c7d6bd55);
  border: 1px solid #a6bba28c;
  border-radius: 2px;
  transform: translateZ(4px) rotateZ(11deg);
  box-shadow: 2px 4px 2px #42382150;
}
.ballpoint-pen:before {
  content: "";
  position: absolute;
  left: 3px;
  width: 2px;
  top: 25px;
  bottom: 8px;
  background: #27485a;
}
.pen-cap {
  position: absolute;
  top: -9px;
  left: -1px;
  width: 9px;
  height: 46px;
  border-radius: 4px 4px 1px 1px;
  background:
    linear-gradient(
      90deg,
      #1f4255,
      #547884 38%,
      #254956 69%,
      #193546);
  border: 1px solid #1b4052;
}
.pen-clip {
  position: absolute;
  left: 6px;
  top: -4px;
  width: 3px;
  height: 37px;
  background: #264e61;
  border-right: 1px solid #6e8e95;
  border-radius: 0 3px 2px 0;
}
.pen-tip {
  position: absolute;
  left: 0;
  top: 100%;
  width: 7px;
  height: 11px;
  clip-path: polygon(0 0, 100% 0, 53% 100%);
  background:
    linear-gradient(
      90deg,
      #647d76,
      #e2e7d4 45%,
      #486960);
}
.paper-clip {
  position: absolute;
  left: 105px;
  top: 95px;
  width: 13px;
  height: 30px;
  border: 2px solid #a0a89a;
  border-radius: 8px;
  transform: rotateZ(44deg);
  box-shadow: 1px 2px 1px #494a3944, inset 1px 0 #eceddd;
}
.paper-clip:after {
  content: "";
  position: absolute;
  inset: 2px 1px 3px 2px;
  border: 1px solid #b6bdac;
  border-bottom: 0;
  border-radius: 5px;
}
@media (max-width: 1100px) {
  .floppy-stack {
    left: -115px;
    top: 260px;
    transform: rotateZ(-12deg) scale(.85);
  }
  .cd-stack {
    left: 743px;
    top: 260px;
    transform: rotateZ(13deg) scale(.87);
  }
  .mixtape-group {
    left: -92px;
    top: 446px;
    transform: rotateZ(8deg) scale(.9);
  }
  .note-group {
    left: 751px;
    top: 437px;
    transform: rotateZ(-9deg) scale(.9);
  }
}
@media (max-width: 800px) {
  .turntable-stage {
    top: 54%;
  }
  .floppy-stack {
    left: 13px;
    top: 491px;
    transform: rotateZ(-13deg) scale(.9);
  }
  .mixtape-group {
    left: 181px;
    top: 515px;
    transform: rotateZ(9deg) scale(.85);
  }
  .cd-stack {
    left: 445px;
    top: 493px;
    transform: rotateZ(12deg) scale(.9);
  }
  .note-group {
    left: 632px;
    top: 509px;
    transform: rotateZ(-10deg) scale(.87);
  }
  .table-surface {
    bottom: 5vh;
  }
}
@media (max-width: 500px) {
  .turntable-stage {
    top: 53%;
  }
  .table-surface {
    top: 54%;
    bottom: 7vh;
  }
  .floppy-stack {
    left: 16px;
    top: 541px;
    transform: rotateZ(-13deg) scale(.9);
  }
  .mixtape-group {
    left: 213px;
    top: 560px;
    transform: rotateZ(9deg) scale(.92);
  }
  .cd-stack {
    left: 438px;
    top: 544px;
    transform: rotateZ(12deg) scale(.95);
  }
  .note-group {
    left: 649px;
    top: 560px;
    transform: rotateZ(-10deg) scale(.85);
  }
  .note-group .ballpoint-pen,
  .paper-clip {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .desk-props {
    transition: none;
  }
}
@media(max-height:650px){.table-surface{bottom:-35px}.table-surface:after{height:20px}}

/* Pressed paper sleeves: printed face, folded spine and a visible inner liner. */
.record-card,
.background-record {
  isolation: isolate;
  border-radius: 1px 3px 2px 1px;
}
.record-card::before,
.background-record::before {
  content: "";
  position: absolute;
  inset: 1px -4px -1px 3px;
  border-radius: 1px 3px 3px 1px;
  background: repeating-linear-gradient(90deg, #82715a 0 1px, #cfbc98 1px 2px, #453c31 2px 3px);
  box-shadow: 3px 4px 4px #22180f35;
  z-index: -1;
}
.record-card::after,
.background-record::after {
  content: "";
  position: absolute;
  inset: 3% 0 2% 8%;
  border-radius: 2px;
  background: url(/assets/materials/surface-grain.svg), linear-gradient(95deg, #d5c9ad, #f3e8d2 60%, #c0ae8f);
  border-right: 1px solid #99886a;
  box-shadow: 2px 1px 3px #281c1640;
  z-index: -1;
  transition: transform .65s cubic-bezier(.2,.7,.2,1);
}
.record-card.record-is-playing::after,
.background-record.record-is-playing::after {
  transform: translateX(7%);
}
.record-card > .cover,
.background-record > .cover {
  border: none;
  border-radius: 1px 3px 2px 1px;
  box-shadow: 1px 0 #f7e5bf88, -1px 0 #3a302988, 2px 3px 3px #20170f55, 6px 9px 12px #24150e35;
  transition: opacity .2s, filter .4s, box-shadow .4s;
}
.record-card:hover > .cover,
.record-card:focus-visible > .cover {
  filter: brightness(1.035);
  box-shadow: 1px 0 #f7e5bf88, -1px 0 #3a302988, 3px 6px 5px #20170f44, 8px 20px 18px #24150e32;
}
.cover::after {
  z-index: 5;
  border: 1px solid #e6d8b72e;
  background: linear-gradient(112deg, #fff9e925, transparent 18% 68%, #ffffff0c 78%, #25190712);
  box-shadow: inset 2px 0 2px #f8e6be55, inset -2px 0 2px #251d2444, inset 0 1px #fff6dd77, inset 0 -2px 2px #1e181936;
}
.cover-paper {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: .38;
  mix-blend-mode: soft-light;
  background: url(/assets/materials/surface-grain.svg);
  background-size: 145px 145px;
}
.cover-paper::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 49%, transparent 0 58%, #e9ddbd66 59%, transparent 60% 61%, #291f3233 62%, transparent 63%), linear-gradient(177deg, #f7edd855, transparent 4% 96%, #120d0b55);
}
.cover-seam {
  position: absolute;
  z-index: 4;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, #e5d3b188, #4a392344 1%, #f1dbb044 1.4%, transparent 2.6% 97.5%, #16151c44 98.6%, #e8d4ac66 99.2%), radial-gradient(ellipse at 0 0, #e8d5abbb, transparent 4%), radial-gradient(ellipse at 100% 100%, #e8d5ab99, transparent 3%);
}
.background-record:nth-child(3n) .cover-paper { opacity: .55; }
.record-card:nth-child(3n+1) .cover-paper { opacity: .5; }
.sleeve-in-hand > .cover { opacity: 0; }
.sleeve-in-hand::before,
.sleeve-in-hand::after { opacity: 0; }

/* Sleeve and disc move separately; all coordinates are viewport positions. */
.record-transfer {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
}
.transfer-sleeve,
.transfer-disc {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--transfer-size);
  height: var(--transfer-size);
  transform-origin: center;
  will-change: transform;
}
.transfer-sleeve {
  z-index: 2;
  border-radius: 2px;
  box-shadow: 2px 0 0 #a8997b, 4px 2px 0 #514232, 10px 18px 22px #221a1440;
}
.transfer-sleeve > .cover { border-radius: 2px; }
.transfer-disc {
  inset: auto;
  top: 0;
  left: 0;
  z-index: 1;
  background: conic-gradient(from -35deg, transparent, #ede9cf33 28deg, transparent 62deg 166deg, #d3dcc733 193deg, transparent 226deg), repeating-radial-gradient(circle, #111512 0 1px, #404236 1.3px 1.6px, #161a15 2px 3px);
  box-shadow: 0 0 0 1px #0b110e, inset 0 0 0 2px #797e5e77, 1px 3px 0 #090c09, 8px 16px 20px #16201738;
}
.transfer-disc::before {
  background: url(/assets/materials/surface-grain.svg), radial-gradient(circle, transparent 0 62%, #ece0bb66 63% 64%, transparent 65%), var(--label);
  box-shadow: 0 0 0 3px #0d150a, 0 0 0 4px #66715866;
}
.transfer-disc::after { inset: 49%; background: #e0d8bd; }
.transfer-label {
  position: absolute;
  z-index: 1;
  top: 39%;
  left: 37%;
  right: 37%;
  overflow: hidden;
  max-height: 8%;
  text-align: center;
  font: 6px Georgia, serif;
  letter-spacing: .3px;
  color: #f3e7c9;
}
.turntable .tonearm {
  transition: transform .8s cubic-bezier(.4,0,.2,1);
}
.turntable.playing .tonearm,
.turntable.paused .tonearm,
.turntable.arm-over-record .tonearm {
  transform: translateZ(36px) rotateZ(var(--arm-angle,50deg));
}
.turntable.arm-raised .tonearm {
  transform: translateZ(54px) rotateZ(-10deg);
}
.turntable.arm-raised.arm-over-record .tonearm {
  transform: translateZ(54px) rotateZ(var(--arm-angle,50deg));
}
.turntable.arm-over-record:not(.arm-raised) .tonearm { transition-duration: .4s; }
.turntable.arm-lifting .tonearm { transition-duration: .26s; }
.motor-starting .record-on-deck,
.motor-starting .platter-rim::before { animation-play-state: running; }
.no-record .record-on-deck,
.no-record .vinyl-sheen { transition: none; }
.no-record .record-on-deck { animation-name: none; }
@media (prefers-reduced-motion: reduce) {
  .record-card, .background-record, .record-card > .cover,
  .background-record > .cover, .record-card::after, .background-record::after,
  .turntable .tonearm { transition: none !important; }
}

/* Small hardware uses real folded faces within the existing 3D chassis. */
.deck-vents,
.adapter-spindle,
.strobe-housing,
.lid-bumper,
.acrylic-scuffs,
.lid-hinge-tab { position: absolute; pointer-events: none; }
.deck-vents {
  left: 474px;
  top: 67px;
  width: 48px;
  height: 56px;
  border-radius: 3px;
  background: repeating-linear-gradient(0deg, transparent 0 6px, #17211c 6px 8px, #9b9c8066 8px 9px);
  transform: translateZ(3px);
  opacity: .7;
}
.adapter-spindle {
  left: 516px;
  top: 230px;
  width: 47px;
  height: 47px;
  border-radius: 50%;
  background: radial-gradient(circle, #1f2820 0 12%, #777d6977 13% 15%, transparent 16% 59%, #f0e8cd99 60% 63%, transparent 64%), conic-gradient(from 22deg, #8f9586, #eee9d6 60deg, #b2b6a7 120deg, #687466 190deg, #e1dfcc 275deg, #8f9586);
  box-shadow: inset 0 0 0 2px #b1b5a1, 0 2px #4d5948, 0 4px #747e67, 2px 7px 5px #101a1588;
  transform: translateZ(9px);
}
.adapter-spindle::after {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  border: 1px solid #d4d7bc77;
  box-shadow: inset 0 0 0 2px #6a756422, 0 0 0 2px #424e3922;
}
.strobe-housing {
  left: 48px;
  top: 293px;
  width: 25px;
  height: 42px;
  border: 1px solid #777c66;
  border-radius: 5px 5px 3px 3px;
  background: linear-gradient(90deg, #263229, #606856 38%, #394a38 80%);
  box-shadow: 2px 5px 4px #10200c88, inset 0 1px #d2cfb477;
  transform: translateZ(9px);
}
.strobe-housing i {
  position: absolute;
  inset: 8px 5px 9px;
  border-radius: 3px;
  border: 1px solid #2e211b;
  background: repeating-linear-gradient(0deg, #7a4632 0 2px, #583526 3px 4px);
  box-shadow: inset 1px 1px 3px #181a10;
  transition: background .4s, box-shadow .4s;
}
.playing .strobe-housing i,
.motor-starting .strobe-housing i {
  background: repeating-linear-gradient(0deg, #d58b4b 0 2px, #a16335 3px 4px);
  box-shadow: inset 1px 0 #f3be7999, 0 0 7px #d9873866, 8px 0 17px #d9873822;
}
.lid-bumper {
  top: 408px;
  width: 15px;
  height: 11px;
  border-radius: 5px;
  background: linear-gradient(90deg, #3d4536, #626451 40%, #2f392c);
  border: 1px solid #323a2d;
  box-shadow: 0 2px #192218, inset 0 1px #c0b99855;
  transform: translateZ(5px);
}
.bumper-left { left: 25px; }
.bumper-right { right: 25px; }
.arm-yoke {
  position: absolute;
  left: -25px;
  top: -18px;
  width: 50px;
  height: 39px;
  border: 6px solid #a6af99;
  border-color: #d8dcc8 #5a6b55 #b3bba1 #71826a;
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px #253c28, 1px 3px 3px #172d2266;
  transform: translateZ(17px);
}
.arm-yoke::before,
.arm-yoke::after {
  content: "";
  position: absolute;
  top: 8px;
  width: 8px;
  height: 10px;
  border-radius: 3px;
  background: linear-gradient(90deg, #304230, #e3e4cc 40%, #6c8060);
  box-shadow: 0 1px 1px #1a251a;
  transform: translateZ(3px);
}
.arm-yoke::before { left: -8px; }
.arm-yoke::after { right: -8px; }
.arm-bearing { transform: translateZ(20px); }
.tracking-collar {
  position: absolute;
  left: -20px;
  top: -21px;
  width: 40px;
  height: 10px;
  background: repeating-linear-gradient(90deg, transparent 0 5px, #e0e2cc 5px 6px, transparent 6px 8px), linear-gradient(#40503a, #202f24);
  border: 1px solid #8b9a7e;
  border-radius: 2px;
  box-shadow: 0 2px 2px #10211488;
  transform: translateZ(10px);
}
.counterweight-face {
  position: absolute;
  left: 0;
  top: 0;
  width: 46px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid #e0e3ce;
  background: radial-gradient(ellipse, #43513d 0 9%, #bdc5ac 10% 12%, transparent 13%), repeating-radial-gradient(ellipse, #c8ceb9 0 2px, #a7b19b 2.5px 3px, #dee0cd 3.5px 4px);
  box-shadow: inset 0 -2px 2px #30452c88;
  transform-origin: top;
  transform: rotateX(90deg);
}
.headshell {
  background: url(/assets/materials/surface-grain.svg), linear-gradient(90deg, #1b2720, #455044 19%, #313e32 70%, #17271d);
  border: 1px solid #546348;
  border-color: #8b9679 #253b29 #14271c #5d6e50;
  box-shadow: 1px 0 #afbaa055, 2px 3px 2px #10251a99;
}
.headshell i { border-radius: 2px; box-shadow: inset 1px 0 1px #020d07, 1px 0 #89937988; }
.headshell::after {
  left: 29px;
  top: 25px;
  width: 22px;
  height: 13px;
  background: none;
  border-right: 3px solid #bec6ae;
  border-bottom: 3px solid #e4e5cf;
  border-radius: 0 0 6px 0;
  transform: translateZ(7px) rotateZ(-18deg) rotateY(-22deg);
  box-shadow: 1px 1px 0 #394b34;
}
.cartridge-body {
  position: absolute;
  left: -12px;
  top: 288px;
  width: 25px;
  height: 23px;
  border-radius: 2px;
  background: #333d31;
  transform: translateZ(-5px);
}
.cartridge-front,
.cartridge-side { position: absolute; height: 15px; transform-origin: top left; }
.cartridge-front {
  top: 23px;
  left: 0;
  width: 25px;
  background: linear-gradient(90deg, #b1b8a2, #e3e0c9 26%, #7f8d72 84%, #465d42);
  border: 1px solid #62775b;
  transform: rotateX(-90deg);
}
.cartridge-front::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 8px;
  width: 7px;
  height: 4px;
  border-radius: 1px;
  background: #292a23;
  box-shadow: inset 0 1px #080f08;
}
.cartridge-side {
  left: 25px;
  top: 0;
  width: 23px;
  background: linear-gradient(#747f68, #3c5036 50%, #203a27);
  border: 1px solid #56714a;
  transform: rotateZ(90deg) rotateX(-90deg);
}
.stylus { transform: translateZ(-8px); box-shadow: 0 1px #dc9b7566, 0 3px 0 #3b3125; }
.cartridge-contacts {
  background: linear-gradient(#b3a06b, #705b32);
  box-shadow: 5px 0 #883d30, 10px 0 #547065, 15px 0 #d3c7a1;
}
.cue-lever { transform-origin: 50% 0; transition: transform .4s ease; }
.playing .cue-lever,
.paused .cue-lever,
.arm-over-record:not(.arm-raised) .cue-lever { transform: translateZ(13px) rotateZ(-34deg); }
.arm-raised .cue-lever { transform: translateZ(20px) rotateZ(-18deg); }

/* Acrylic edges catch light differently from the broad, slightly hazy face. */
.lid-glass { border-radius: 7px; border-width: 4px; }
.lid-glass::after { opacity: .085; }
.acrylic-scuffs {
  inset: 9% 8%;
  background: linear-gradient(167deg, transparent 0 35%, #f0f2df2b 35.1%, transparent 35.25%) 7% 82% / 100px 30px no-repeat, linear-gradient(18deg, transparent 0 51%, #f0f2df20 51.1%, transparent 51.25%) 88% 12% / 80px 40px no-repeat;
  transform: translateZ(1px);
}
.lid-edge {
  border-bottom: 2px solid #d4dbc28a;
  border-top: 1px solid #eef0dcaa;
  background: linear-gradient(90deg, #e9eed535, transparent 24% 74%, #62765e33), linear-gradient(#d0d9c259, #84947b19 14% 75%, #435a4366 90%, #d2dbc39c);
  box-shadow: inset 0 -2px #1d352c33, inset 0 1px #f5f2de55;
}
.lid-edge-front::after {
  content: "";
  position: absolute;
  left: 11px;
  right: 11px;
  bottom: 5px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #f5f1dc77 15%, #dce6ce22 65%, transparent);
}
.lid-hinge-tab {
  top: -3px;
  width: 53px;
  height: 30px;
  border: 1px solid #c9d4bb99;
  border-radius: 3px;
  background: linear-gradient(90deg, #69836a44, #d9e3cf55 12%, #60816433 22% 80%, #e2e8d355 91%, #445f4966);
  transform: translateZ(3px);
  box-shadow: inset 0 0 0 3px #9baf9333;
}
.hinge-tab-left { left: 86px; }
.hinge-tab-right { right: 79px; }
.lid-handle {
  background: linear-gradient(90deg, #394d3b99, #acb6a277 13%, #546c4f66 28% 74%, #b8c1ae77 86%, #314a3999);
  border-bottom: 3px solid #4b624d99;
  box-shadow: 0 1px #d6e0c466, inset 0 1px #e2e8d199, inset 0 -2px #253e3288, 0 3px 2px #263c2444;
}
.hinge::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 17px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: linear-gradient(45deg, #cdd6bd 40%, #2c422c 43% 54%, #a2b391 58%);
  box-shadow: 38px 0 #adbb9d, 0 0 0 1px #34472f;
}
.speaker-grille {
  background: radial-gradient(circle, #101c15cc 1px, transparent 1.6px) 0 0 / 4px 4px, radial-gradient(circle at 50% 48%, #5f6a59 0 12%, #8b9580 13% 15%, #58674f 17% 29%, #9da28f 31% 32%, #737e66 34% 38%, #b4b9a4 40% 60%, #cdd0bd 85%);
  box-shadow: inset 0 1px 3px #142514aa, inset 0 -1px #e6e6ccbb, 0 0 0 1px #6a775d;
}
.knob-face,
.volume-knob .knob-face {
  box-shadow: 1px 5px 4px #27322166, inset 0 0 0 1px #f7f0dd, inset 0 0 0 2px #65765b, inset 0 0 0 3px #d9ddc8, inset 0 -2px 2px 5px #6b7b5f55;
}
.knob-face i { box-shadow: 1px 0 #ffffff66, inset 0 1px #253820; }
.key-bed { border-top-color: #617257; box-shadow: inset 0 3px 5px #152211, inset 1px 0 #293d2499, 0 1px #f2f0d3; }
.mechanical-key::after {
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 3px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #fff9 35% 65%, transparent);
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .cue-lever, .strobe-housing i { transition: none; }
}

/* Offscreen sleeves and background tabs do not need continuous painting. */
.collection-row {
  content-visibility: auto;
  contain-intrinsic-block-size: auto 250px;
  overflow-clip-margin: 30px;
}
.is-backgrounded *,
.is-backgrounded *::before,
.is-backgrounded *::after { animation-play-state: paused !important; }

/* Search lives in an upright paper catalogue, outside the scaled 3D machine. */
.catalog-book{position:fixed;right:5vw;bottom:6vh;z-index:6;width:122px;height:149px;padding:22px 14px 15px 22px;display:flex;flex-direction:column;align-items:center;gap:13px;transform:rotate(7deg);border:1px solid #6b694a;border-left:9px solid #454e3a;border-radius:2px 5px 5px 2px;background:url(/assets/materials/surface-grain.svg),linear-gradient(110deg,#6c7759,#4d5b43);color:#e9dec0;box-shadow:2px 2px #ede2c7,4px 4px #9d9278,5px 5px #e8ddc3,8px 12px 15px #372d2545;transition:transform .25s}
.catalog-book:hover{transform:translateY(-6px) rotate(3deg)}
.catalog-book>span{font:28px Georgia,serif}.catalog-book strong{font:15px 'Songti SC',serif;letter-spacing:2px}.catalog-book i{width:60px;border-top:1px solid #c4c19a88;border-bottom:1px solid #c4c19a55;height:5px}
.catalog-is-open .catalog-book{visibility:hidden}
.record-catalog.machine-drawer{position:fixed;z-index:30;left:auto;right:clamp(16px,4vw,70px);top:50%;bottom:auto;width:min(470px,calc(100vw - 32px));height:min(720px,calc(100dvh - 48px));max-height:calc(100dvh - 48px);min-height:0;padding:24px 24px 20px 35px;display:flex;flex-direction:column;overflow:visible;transform:translateY(-50%);border:1px solid #b9ad90;border-left:10px solid #555d43;border-radius:3px 8px 8px 3px;background:linear-gradient(90deg,#b5a78955,transparent 26px),url(/assets/materials/surface-grain.svg),#eee4cf;color:#424938;box-shadow:3px 3px 0 #ded1b5,5px 5px 0 #938971,7px 7px 0 #dbceb1,12px 22px 45px #27261e45;animation:catalog-unfold .25s ease-out}
.catalog-header{display:flex;align-items:center;justify-content:space-between;flex-shrink:0;padding-bottom:16px;border-bottom:1px solid #a89e8077}.catalog-edition{font:9px 'Courier New',monospace;letter-spacing:1.8px;color:#89836c}.catalog-header h2{margin:7px 0 0;font:26px 'Songti SC',Georgia,serif;letter-spacing:4px;font-weight:500}
.record-catalog .drawer-close{position:static;flex:0 0 44px;width:44px;height:44px;transform:none;line-height:44px;color:#686c55;font-size:27px;border:1px solid #b4ad9044;border-radius:50%;background:#d7cdb344}
.catalog-tabs{display:flex;gap:8px;margin:17px 0 14px;flex-shrink:0}.catalog-tabs button{min-height:40px;padding:8px 16px;background:#d9cfb8;color:#69705a;border:1px solid #bcb195;border-radius:4px 4px 0 0;font-size:13px;box-shadow:0 2px #c6b99b}.catalog-tabs button[aria-pressed=true]{background:#606d50;color:#f5ead3;border-color:#4f6043;box-shadow:0 2px #405237}
.record-catalog .search-form{gap:9px;flex-shrink:0;align-items:stretch}.catalog-query{position:relative;flex:1;min-width:0}.record-catalog .search-form input{height:46px;padding:9px 38px 9px 10px;border:0;border-bottom:2px solid #8a9378;border-radius:0;background:#faf3e4;color:#394632;box-shadow:inset 0 1px 3px #68563c15;font-size:16px}.record-catalog .search-form input::placeholder{color:#9b9b84}.record-catalog .search-form input:focus{outline:2px solid #81956b;outline-offset:2px}.record-catalog input::-webkit-search-cancel-button{display:none}
#search-clear{position:absolute;right:0;top:0;width:38px;height:46px;background:none;font-size:23px;color:#878975}.catalog-search-button{height:46px;padding:0 17px;background:#596d4e;color:#f6ecd5;border:1px solid #455e3e;border-radius:3px;box-shadow:0 2px #384e32;font-size:14px;flex-shrink:0}
.catalog-status{display:flex;align-items:center;justify-content:space-between;min-height:38px;gap:10px;flex-shrink:0}.record-catalog .panel-status{display:block;font-size:12px;line-height:1.5;margin:9px 0;color:#858571}.catalog-status>button{background:none;padding:6px;color:#8b6044;font-size:13px;text-decoration:underline;text-underline-offset:3px}
.record-catalog .search-results{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#b4b39a transparent;padding-right:5px;gap:0}.record-catalog .search-result{display:grid;grid-template-columns:64px minmax(0,1fr) 78px;gap:12px;padding:15px 0;border-bottom:1px solid #b8b49b66;align-items:center}.record-catalog .result-cover{position:relative;width:64px;height:64px;padding:0;background:none;box-shadow:2px 3px 5px #55462e35;transform:rotate(-2deg)}.record-catalog .result-cover .cover-name{font-size:10px}.record-catalog .cover-play{position:absolute;inset:0;display:grid;place-items:center;background:#18241755;color:#f6efd7;opacity:0;transition:opacity .15s}.record-catalog .result-cover:hover .cover-play,.record-catalog .result-cover:focus-visible .cover-play{opacity:1}
.record-catalog .result-title{display:block;padding:0;text-align:left;background:none;font-size:15px;font-weight:600;line-height:1.45;color:#394735;word-break:break-word}.record-catalog .result-info p{font-size:12px;line-height:1.5;margin:5px 0 2px;white-space:normal;color:#6f7561}.record-catalog .result-info small{display:block;font-size:10px;line-height:1.4;color:#92907a;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.result-actions{display:flex;flex-direction:column;gap:9px}.record-catalog .catalog-play,.record-catalog .add-record{display:grid;place-items:center;width:78px;min-height:36px;height:auto;padding:7px 4px;font-size:12px;border-radius:3px;white-space:nowrap}.record-catalog .catalog-play{color:#f0e7d0;background:#627450;border:1px solid #4f6340;box-shadow:0 2px #405736}.record-catalog .add-record{background:#e6dfc8;color:#58654a;border:1px solid #a3ac8e;box-shadow:0 2px #a4ad91}.record-catalog .add-record.saved{background:transparent;box-shadow:none;color:#788368;border-style:dashed}.record-catalog .add-record:disabled{cursor:default;opacity:.8}
.catalog-more{flex-shrink:0;margin:16px auto 0;min-height:38px;padding:8px 20px;background:none;border-bottom:1px solid #9ca187;color:#697657;font-size:13px}.catalog-empty{padding:40px 12px;opacity:.4}.catalog-empty span{display:block;text-align:center;font:40px Georgia,serif;color:#9b9c7f;margin-bottom:30px}.catalog-empty i{display:block;height:35px;border-bottom:1px solid #b6af96}
@keyframes catalog-unfold{from{opacity:0;transform:translate(16px,-48%) rotate(2deg)}to{opacity:1;transform:translate(0,-50%) rotate(0)}}
@media(max-width:600px){.catalog-book{right:20px;bottom:22px;width:92px;height:112px;padding:12px 9px;gap:9px;border-left-width:6px}.catalog-book strong{font-size:12px;letter-spacing:1px}.catalog-book>span{font-size:23px}.record-catalog.machine-drawer{top:16px;right:12px;width:calc(100vw - 24px);height:calc(100dvh - 32px);max-height:calc(100dvh - 32px);transform:none;padding:20px 14px 16px 20px;border-left-width:7px;animation:none}.catalog-header h2{font-size:23px}.record-catalog .search-result{grid-template-columns:52px minmax(0,1fr) 74px;gap:10px}.record-catalog .result-cover{width:52px;height:52px}.record-catalog .catalog-play,.record-catalog .add-record{width:74px;min-height:42px}.record-catalog .result-title{font-size:14px}.catalog-tabs{margin-top:12px}.catalog-tabs button{min-height:42px}.catalog-status{min-height:40px}}
@media(prefers-reduced-motion:reduce){.record-catalog.machine-drawer{animation:none}.catalog-book,.record-catalog .cover-play{transition:none}}

.record-catalog.machine-drawer[hidden]{display:none}

/* Cloth boards, a sewn hinge and separate cut-paper edges. Text stays flat. */
.catalog-book {
  isolation: isolate;
  overflow: visible;
  border-left-width: 10px;
  border-color: #788168 #485440 #354734 #384d38;
  border-radius: 3px 5px 5px 3px;
  background:
    linear-gradient(90deg, #162d2855, transparent 7%, #dde1b633 9%, #263f3033 11%, transparent 15%),
    repeating-linear-gradient(0deg, #d4d3ae0c 0 1px, transparent 1px 3px),
    url(/assets/materials/surface-grain.svg),
    linear-gradient(115deg, #748064, #4f644b 65%, #40563f);
  box-shadow: inset 0 1px #e2dfb955, inset -1px 0 #1c392b88, 2px 9px 0 -1px #354e39, 3px 11px 1px -1px #253a2c, 9px 16px 17px #312f2440;
}
.catalog-book::before {
  content: "";
  position: absolute;
  left: 0;
  right: -2px;
  bottom: -8px;
  height: 8px;
  border-radius: 0 0 4px 1px;
  border-bottom: 1px solid #95896b;
  background: repeating-linear-gradient(0deg, #c0b79b 0 1px, #e9e0c7 1px 2px, #d4c9ab 2px 3px);
  transform: skewX(23deg);
  transform-origin: top;
  box-shadow: inset 6px 0 3px #5b674677;
  z-index: -1;
}
.catalog-book::after {
  content: "";
  position: absolute;
  left: -8px;
  top: 12px;
  bottom: 12px;
  width: 4px;
  border-top: 2px solid #a7b08a77;
  border-bottom: 2px solid #a7b08a77;
  background: linear-gradient(90deg, #c3c5a033, #1b372a77);
  border-radius: 2px;
  pointer-events: none;
}
.catalog-book strong,
.catalog-book > span {
  color: #e3d5a1;
  text-shadow: 0 1px #f2e6bd44, 0 -1px #263b2988;
}
.catalog-book > span { border: 1px solid #c1be8d55; border-radius: 50%; width: 39px; height: 39px; line-height: 38px; }
.record-catalog.machine-drawer {
  isolation: isolate;
  border-left: 13px solid #4f6148;
  border-top-color: #fff7df;
  border-right-color: #b3ac8c;
  border-bottom-color: #9a8c6f;
  border-radius: 3px 9px 14px 3px;
  background:
    linear-gradient(90deg, #625b444a, #d0c4a54d 12px, #fff9e23b 26px, transparent 46px),
    radial-gradient(ellipse at 96% 96%, #b6a17a22, transparent 40%),
    url(/assets/materials/surface-grain.svg),
    #eee4cf;
  box-shadow: -2px 0 #86916b, -4px 1px #364d38, 9px 11px 0 -2px #53664a, 10px 13px 0 -2px #344b34, 15px 25px 38px #27261e45, inset 2px 0 #f6edcd88;
}
.record-catalog::before,
.record-catalog::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: -1;
}
.record-catalog::before {
  left: 3px;
  right: -5px;
  bottom: -9px;
  height: 9px;
  background: repeating-linear-gradient(0deg, #c8ba97 0 1px, #eee4c9 1px 2px, #ddd1b2 2px 3px);
  border-bottom: 1px solid #918364;
  border-radius: 0 0 11px 1px;
  transform: skewX(20deg);
  transform-origin: top;
  box-shadow: inset 14px 0 5px #756d4866;
}
.record-catalog::after {
  right: -7px;
  top: 5px;
  bottom: -1px;
  width: 7px;
  background: repeating-linear-gradient(90deg, #e4d9bb 0 1px, #b0a383 1px 2px, #f4e9ce 2px 3px);
  border-right: 1px solid #a69978;
  border-radius: 0 7px 8px 0;
  box-shadow: inset 2px 0 #74694c44;
}
.catalog-binding {
  position: absolute;
  left: -17px;
  top: 21%;
  bottom: 17%;
  width: 34px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  pointer-events: none;
}
.catalog-binding i {
  position: relative;
  width: 29px;
  height: 14px;
  border: 3px solid #b7bfa9;
  border-color: #ecebd2 #88977b #586a51 #c1c6ae;
  border-radius: 50%;
  background: transparent;
  box-shadow: 0 1px #263e2d99, 1px 3px 2px #514f3655, inset 0 1px #53644b;
}
.catalog-binding i::after {
  content: "";
  position: absolute;
  right: -5px;
  top: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #3e4733;
  box-shadow: 1px 0 #fff5d799;
  z-index: -1;
}
.catalog-ribbon {
  position: absolute;
  top: -2px;
  right: 79px;
  width: 16px;
  height: 37px;
  background: repeating-linear-gradient(90deg, transparent 0 2px, #e0b08422 2px 3px), linear-gradient(90deg, #914e37, #b97851 50%, #8b4f35);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 82%, 0 100%);
  box-shadow: inset 1px 0 #e6b48477, inset -1px 0 #592d1f55;
  pointer-events: none;
}
.catalog-header { padding-top: 5px; border-bottom: 3px double #a7a08377; }
.catalog-header h2 { text-shadow: 0 1px #fff7e199; }
.record-catalog .drawer-close {
  border: 1px solid #a5977255;
  background: radial-gradient(circle at 35% 25%, #eee4c9, #d4c6a7 72%, #b2a487);
  box-shadow: inset 0 1px #fff3d8aa, 0 2px 1px #776e5244;
  color: #77765d;
}
.catalog-tabs { border-bottom: 1px solid #bbb19466; padding-bottom: 2px; }
.catalog-tabs button {
  border-radius: 6px 9px 0 0;
  background: url(/assets/materials/surface-grain.svg), linear-gradient(110deg, #eee0c3, #d8c6a3);
  border-top: 1px solid #fcf1d9;
  box-shadow: inset 1px 0 #fff2d180, 1px 2px 2px #695d4033;
}
.catalog-tabs button[aria-pressed=true] {
  background: url(/assets/materials/surface-grain.svg), linear-gradient(105deg, #788564, #596f4b);
  border-top-color: #adb896;
  box-shadow: inset 1px 0 #c3c8a655, 1px 2px 2px #41543566;
}
.record-catalog .search-form input {
  background: linear-gradient(90deg, #e4d8bb33, transparent 20%), #faf3e4;
  box-shadow: inset 0 1px 3px #8b7d5c22, 0 1px #fff8e199;
}
.record-catalog .result-cover::before {
  content: "";
  position: absolute;
  z-index: 4;
  top: -5px;
  left: 26%;
  width: 47%;
  height: 11px;
  background: linear-gradient(100deg, #e5d5a97a, #f3e6be9c 45%, #d0c29577);
  border: 1px solid #c5b79155;
  transform: rotate(-5deg);
  box-shadow: 0 1px 1px #51432a18;
  pointer-events: none;
}
.record-catalog .result-cover { box-shadow: 1px 1px #c6b796, 2px 4px 5px #55462e32; }
.record-catalog .search-result { border-bottom: 1px solid #b8ad8b55; }
.record-catalog .add-record { background: url(/assets/materials/surface-grain.svg), #e6dfc8; }
.record-catalog .add-record.saved { background: transparent; }
@media(max-width:600px) {
  .catalog-book { border-left-width: 7px; }
  .catalog-book > span { width: 31px; height: 31px; line-height: 30px; }
  .record-catalog.machine-drawer { border-left-width: 9px; }
  .catalog-binding { left: -13px; width: 24px; }
  .catalog-binding i { width: 24px; height: 12px; border-width: 2px; }
  .catalog-binding i::after { width: 5px; height: 5px; right: -4px; }
  .catalog-ribbon { right: 71px; width: 13px; height: 29px; }
}

/* One-shot book and page motions; these layers never intercept controls. */
.record-catalog.machine-drawer{animation:none;transform-origin:50% 50%}
.catalog-cover-motion,.catalog-leaf-motion{position:absolute;pointer-events:none;opacity:0;transform-origin:left center;backface-visibility:hidden}
.catalog-cover-motion{z-index:9;inset:-1px -1px -1px -10px;display:grid;place-items:center;border:1px solid #839072;border-left:10px solid #3c503c;border-radius:3px 9px 9px 3px;background:linear-gradient(90deg,#1b302a66,transparent 8%),url(/assets/materials/surface-grain.svg),linear-gradient(110deg,#748064,#40563f);box-shadow:inset 0 1px #dfdfb577,4px 3px 8px #26352055;color:#ded1a0;font:62px Georgia,serif;text-shadow:0 -1px #2a402b}
.catalog-leaf-motion{z-index:6;top:219px;left:28px;right:18px;bottom:57px;border-right:1px solid #b0a381;border-radius:0 3px 7px 0;background:linear-gradient(90deg,#968d7033,transparent 12%,#fff7df44 75%,#b6a48033),repeating-linear-gradient(0deg,transparent 0 69px,#bbb29955 69px 70px),url(/assets/materials/surface-grain.svg),#eee4cf;box-shadow:5px 4px 12px #463c2b25}
.catalog-tabs button{transition:transform .2s,box-shadow .2s}
.catalog-tabs button[aria-pressed=true]{transform:translateY(-3px)}
.catalog-search-button:active,.record-catalog .catalog-play:active,.record-catalog .add-record:active{transform:translateY(2px)}
@media(max-width:600px){.catalog-cover-motion{left:-7px;border-left-width:7px}.catalog-leaf-motion{top:216px;left:16px;right:12px;bottom:50px}}
@media(prefers-reduced-motion:reduce){.catalog-tabs button{transition:none}}

/* The room embeds this same player; only outer navigation belongs to the host. */
.shared-listening .home-button,.shared-listening .together-link{display:none}