/* A walnut cabinet and brass hardware, drawn as an interactive object. */
.record-room-top{align-items:flex-start;margin-bottom:4px}
#record-room-title{font-size:25px;font-weight:400;line-height:1.22;letter-spacing:-.035em;margin:0;max-width:290px}
#close-record{flex:0 0 28px;margin:0 -6px 0 8px;line-height:28px}
.cabinet-turntable{position:relative;display:block;width:100%;padding:0;margin:0 auto 15px;border:0;border-radius:4px;background:transparent;color:inherit;cursor:pointer;touch-action:manipulation}
.cabinet-turntable:disabled{cursor:default}
.cabinet-turntable svg{display:block;width:100%;height:auto;overflow:visible}
.cabinet-turntable:hover svg{filter:brightness(1.04)}
@media(max-width:370px){#record-room-title{font-size:23px}}

/* Inline SVG hooks; the parent button owns the hit area and accessible label. */
.antique-cabinet{display:block;width:100%;height:auto;overflow:visible}
.cabinet-vinyl-disc{transform-box:fill-box;transform-origin:center;animation:cabinet-record-turn 1.8s linear infinite;animation-play-state:paused}
.record-is-playing .cabinet-vinyl-disc{animation-play-state:running}
.cabinet-arm{transform-box:view-box;transform-origin:410px 85px;transform:rotate(-7deg);transition:transform .85s cubic-bezier(.2,.65,.2,1)}
.record-is-playing .cabinet-arm{transform:rotate(0deg)}
.cabinet-status-light{transition:fill .4s}
.record-is-playing .cabinet-status-light{fill:#d5aa55}
@keyframes cabinet-record-turn{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.cabinet-vinyl-disc{animation:none}.cabinet-arm,.cabinet-status-light{transition:none}}