@property --rotation { syntax: '<angle>'; initial-value: 0deg; inherits: true; }

:root {
  color-scheme: light;
  --paper: #f2f3f4;
  --ink: #252729;
  --muted: #666a6e;
  --accent: #cb4e22;
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); min-height: 100svh; display: flex; flex-direction: column; }
button, input, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; cursor: pointer; }
button:focus-visible, a:focus-visible, input:focus-visible, [role='slider']:focus-visible { outline: 3px solid var(--accent); outline-offset: 5px; }
main { display: grid; place-items: center; flex: 1; min-width: 0; padding: 16px 20px 8px; }
.listening-room { width: 100%; min-width: 0; display: grid; justify-items: center; text-align: center; }
.deck-frame { position: relative; width: min(100%, 1640px, calc((100svh - 96px) * 1.765517)); aspect-ratio: 1536/870; overflow: clip; }
.deck { position: absolute; top: -6.896552%; left: 0; width: 100%; aspect-ratio: 3/2; isolation: isolate; }
.boombox { width: 100%; height: 100%; object-fit: contain; display: block; user-select: none; mask-image: linear-gradient(to right, transparent, black 3%, black 97%, transparent), linear-gradient(to bottom, transparent, black 7%, black 86%, transparent 99%); mask-composite: intersect; }
.hardware { position: absolute; inset: 0; pointer-events: none; }
.hardware-key { pointer-events: auto; position: absolute; padding: 0; border: 0; background: #262728; border-radius: 1.5px; overflow: hidden; touch-action: manipulation; }
.hardware-key .key-face { position: absolute; inset: 0; background-image: url('./assets/boombox-basf-1986.png'); background-repeat: no-repeat; transform-origin: center bottom; transition: transform 105ms cubic-bezier(.2,.8,.25,1), filter 105ms; }
.hardware-key::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px #fff0; transition: box-shadow .14s; pointer-events: none; }
.hardware-key:hover::after { box-shadow: inset 0 0 0 1px #ffffff75; }
.hardware-key:hover .key-face { filter: brightness(1.075); }
.hardware-key:active .key-face, .hardware-key.is-down .key-face, .hardware-key[aria-pressed='true'] .key-face { transform: translateY(10%) scaleY(.9); filter: brightness(.78); }
.hardware-key[aria-pressed='true']::after { box-shadow: inset 0 2px 4px #0009; }
.hardware-key:focus-visible { overflow: visible; z-index: 5; }
button[data-action='rewind'], button[data-action='forward'] { touch-action: none; user-select: none; -webkit-user-select: none; }
.spool { position: absolute; border-radius: 50%; pointer-events: none; }
.spool span { display: block; width: 100%; height: 100%; border-radius: inherit; background-image: url('./assets/boombox-basf-1986.png'); background-repeat: no-repeat; will-change: transform; }
.meter-panel { position: absolute; pointer-events: none; overflow: hidden; border-radius: 2px; background: #171b1cf0; box-shadow: inset 0 1px 2px #000a, 0 1px 0 #ffffff65; }
.meter-panel canvas { display: block; width: 100%; height: 100%; }
.volume-knob { position: absolute; border-radius: 50%; cursor: ns-resize; touch-action: none; }
.knob-face { display: block; width: 100%; height: 100%; border-radius: inherit; background: url('./assets/boombox-basf-1986.png') no-repeat; transform: rotate(var(--rotation, 0deg)); }
.volume-knob:hover { filter: brightness(1.07); }
.footer { display: flex; align-items: center; justify-content: center; padding: 16px 24px 24px; font-size: 12px; line-height: 1.5; color: var(--muted); }
.footer-caption { letter-spacing: .1px; }
.volume-control { display: none; align-items: center; gap: 12px; color: var(--muted); }
.volume-control svg { height: 17px; width: 17px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.volume-control input { --volume: 45%; width: 85px; height: 26px; appearance: none; background: transparent; cursor: pointer; }
.volume-control input::-webkit-slider-runnable-track { height: 2px; background: linear-gradient(to right, #64676a var(--volume), #cbd0d3 var(--volume)); }
.volume-control input::-webkit-slider-thumb { appearance: none; width: 9px; height: 9px; border-radius: 50%; background: #55585b; margin-top: -3.5px; }
.volume-control input::-moz-range-track { height: 2px; background: #cbd0d3; }
.volume-control input::-moz-range-progress { height: 2px; background: #64676a; }
.volume-control input::-moz-range-thumb { width: 9px; height: 9px; border: 0; border-radius: 50%; background: #55585b; }
.mobile-transport { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-width: 680px) {
  main { padding: 16px 16px 8px; }
  .deck-frame { width: calc(100% + 32px); }
  .mobile-transport { display: flex; justify-content: center; gap: 8px; margin: 22px auto 0; }
  .transport-button { border: 1px solid #bfc3c6; width: 48px; height: 46px; background: linear-gradient(#fdfdfe,#e1e3e5); box-shadow: 0 3px 0 #a7aaad, 0 4px 5px #0000000d; border-radius: 3px; display: grid; place-items: center; transition: transform .1s, box-shadow .1s; padding: 0; touch-action: manipulation; }
  .transport-button svg { width: 17px; height: 17px; fill: #414448; }
  .transport-button.play-button { background: linear-gradient(#ef8948,#d8662e); border-color: #c35a27; box-shadow: 0 3px 0 #a24925, 0 4px 5px #0000000d; }
  .transport-button.play-button svg { fill: #fff7f0; }
  .transport-button:active, .transport-button.is-down, .transport-button[aria-pressed='true'] { transform: translateY(3px); box-shadow: inset 0 1px 3px #0002; }
  .footer { padding: 16px 24px 24px; }
  .volume-control { display: flex; margin-top: 24px; gap: 10px; }
  .volume-control input { width: 80px; }
  .hardware-key { pointer-events: none; }
  .volume-knob { display: none; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0s !important; } }