/* Photorealistic chassis remains fixed. Only the label and inner grooves rotate.
   The crop stops before the tonearm: never rotate the arm or the whole deck. */
.deck{grid-template-columns:1.12fr 1fr;align-items:center;gap:28px}
.vintage-turntable{display:flex;flex-direction:column;min-height:0;padding:0;align-self:center;background:none}
.turntable-photo{position:relative;width:100%;isolation:isolate;overflow:hidden;border-radius:5px}
.turntable-photo img{width:100%;height:auto;max-width:none;display:block}
.turntable-photo .spinning-vinyl{position:absolute;inset:0;clip-path:circle(16.6% at 44.0755% 44.53125%);transform-origin:44.0755% 44.53125%;animation:vinyl-rpm 1.8s linear infinite;animation-play-state:paused;will-change:auto}
.is-playing .spinning-vinyl{animation-play-state:running;will-change:transform}
.vintage-turntable .deck-signature{bottom:5px;font-size:11px;letter-spacing:.04em}
@keyframes vinyl-rpm{to{transform:rotate(360deg)}}
@media(max-width:1000px){.deck{grid-template-columns:1fr;gap:24px}.vintage-turntable{width:min(100%,660px);margin:auto}}
@media(max-width:700px){.deck{gap:24px}.vintage-turntable{padding-bottom:29px}.vintage-turntable .deck-signature{font-size:9px}}
@media(prefers-reduced-motion:reduce){.turntable-photo .spinning-vinyl{animation:none!important}}
.turntable-photo{--lamp:#fff;--lamp-filter:grayscale(1) brightness(1.9)}
.turntable-photo[data-light=red]{--lamp:#ff493e;--lamp-filter:none}
.turntable-photo[data-light=blue]{--lamp:#55aaff;--lamp-filter:hue-rotate(190deg) saturate(1.8)}
.turntable-photo[data-light=green]{--lamp:#66ff93;--lamp-filter:hue-rotate(105deg) saturate(1.6)}
.turntable-photo .lamp-tint{position:absolute;inset:0;pointer-events:none;filter:var(--lamp-filter);mask-image:radial-gradient(ellipse 5% 8% at 20.7% 62.3%,#000 55%,transparent 100%)}
.deck-start,.deck-light{position:absolute;transform:translate(-50%,-50%);min-width:44px;min-height:44px;padding:0;border:0;background:none;z-index:3;border-radius:3px}
.deck-start{left:17.95%;top:79.55%;width:7.6%;height:8.8%}
.deck-start span{position:absolute;inset:7%;display:grid;place-items:center;background:linear-gradient(120deg,#c8c2af,#99978e);border:1px solid #42443f;box-shadow:inset 0 0 0 2px #ddd5bf55,0 1px 2px #0008;color:#151b1a;font-size:clamp(5px,.65vw,10px);white-space:nowrap;line-height:1}
.deck-start[aria-pressed=true] span{box-shadow:inset 1px 2px 4px #0007;background:linear-gradient(120deg,#aaa898,#c4bdab)}
.deck-start:hover span{outline:1px solid #f1dab0}
.deck-light{left:20.7%;top:62.3%;width:7%;height:12%}
.deck-light span{display:block;position:absolute;width:14%;height:20%;top:40%;left:43%;background:var(--lamp);border-radius:50%;box-shadow:0 0 8px 3px var(--lamp),0 0 21px 7px var(--lamp);opacity:.9}
.deck-light:hover{outline:1px solid var(--lamp)}
.pitch-shell{position:absolute;left:78.8%;top:47.8%;width:8.9%;height:27.8%;background:linear-gradient(90deg,#d9d3c2,#c6bfad 60%,#a6a195);border:1px solid #59594f;border-radius:2px;z-index:2}
.pitch-marks{position:absolute;inset:5% 55% 5% 3%;display:flex;flex-direction:column;justify-content:space-between;color:#101714;font:700 clamp(9px,.85vw,13px)/1 var(--sans);text-align:center;pointer-events:none;z-index:3}
.pitch-marks span{display:block;text-shadow:0 1px #fff8}
#deck-pitch{position:absolute;top:3%;left:77%;transform:translateX(-50%);height:94%;width:44px;margin:0;padding:0;writing-mode:vertical-lr;direction:rtl;appearance:none;-webkit-appearance:none;background:transparent;cursor:ns-resize;touch-action:none}
#deck-pitch::-webkit-slider-runnable-track{width:3px;height:100%;background:#171d1b;border-radius:2px}
#deck-pitch::-webkit-slider-thumb{-webkit-appearance:none;width:clamp(14px,2vw,30px);height:clamp(12px,1.4vw,21px);margin-left:calc((3px - clamp(14px,2vw,30px))/2);border:1px solid #66665b;border-radius:2px;background:linear-gradient(#d9d5c7,#8d8d83 43%,#ece8d9 46%,#393f38 53%,#bfb9a7 57%,#d9d3c0);box-shadow:0 2px 3px #0005}
#deck-pitch::-moz-range-track{width:3px;background:#171d1b;border-radius:2px}
#deck-pitch::-moz-range-thumb{width:24px;height:17px;border:1px solid #66665b;border-radius:2px;background:linear-gradient(#d9d5c7,#8d8d83 43%,#ece8d9 46%,#393f38 53%,#bfb9a7 57%,#d9d3c0)}
#deck-pitch:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.deck-readouts{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px 14px;font-size:11px;margin-top:8px;color:#c2c8c0}
.deck-readouts button{border:0;border-bottom:1px solid #c2c8c055;background:none;padding:4px;font-size:11px;color:inherit}
#deck-help{font-size:11px;text-align:center;margin:4px 0 0;color:#adb6af}
@media(max-width:700px){.vintage-turntable{padding-bottom:0}.deck-start span{inset:auto;left:50%;top:50%;transform:translate(-50%,-50%);width:55%;height:55%;font-size:5px}.deck-readouts{font-size:10px;gap:2px 10px}.deck-readouts button{font-size:10px}#deck-help{font-size:10px}}
.quick-guide{display:grid;grid-template-columns:1fr 145px;gap:18px;align-items:center;padding:17px 0 22px;margin-bottom:26px;border-bottom:1px solid var(--line)}
.quick-guide h3{font:500 16px var(--sans);margin:0 0 10px;color:var(--paper)}
.quick-guide ul{padding:0;margin:0;list-style:none;color:#c2c8bf;font-size:12px;line-height:1.6}
.quick-guide li+li{margin-top:5px}.quick-guide strong{font-weight:500;color:#efdfbf}
#open-guide{display:block;border:1px solid #b99b6766;border-radius:5px;background:#08171a;padding:0 0 9px;overflow:hidden;text-align:center}
#open-guide img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}#open-guide span{display:block;font-size:10px;margin:6px 4px 2px;color:var(--paper)}#open-guide i{font-style:normal;color:var(--accent);margin-right:4px}#open-guide small{font-size:9px;color:#c0c7bf}
#guide-dialog>p{max-width:85ch;line-height:1.6}#guide-player{aspect-ratio:16/9}
@media(max-width:700px){.quick-guide{grid-template-columns:1fr 115px;gap:12px;padding-top:4px;margin-bottom:22px}.quick-guide h3{font-size:14px}.quick-guide ul{font-size:11px}#open-guide span{font-size:9px}#open-guide small{font-size:8px}}