.tonearm{position:absolute;z-index:4;left:calc(50% + 205px);top:calc(50% - 235px);width:34px;height:310px;transform-origin:17px 17px;transform:rotate(-21deg);transition:transform .85s cubic-bezier(.18,.8,.18,1);pointer-events:none;filter:drop-shadow(8px 10px 5px #0009)}
.tonearm-pivot{position:absolute;z-index:3;top:0;left:0;width:34px;height:34px;border-radius:50%;background:radial-gradient(circle at 38% 32%,#e5e9df 0 10%,#758075 25%,#222a26 50%,#a8aea3 68%,#232923 70%);border:3px solid #171d17;box-shadow:0 0 0 4px #676e60,0 0 0 8px #1b201a,0 9px 10px #0009}
.tonearm-shaft{position:absolute;top:22px;left:13px;width:9px;height:230px;border-radius:5px;background:linear-gradient(90deg,#222a25 0,#f3f4df 34%,#98a098 61%,#333b36 100%);box-shadow:2px 0 1px #0006;transform:rotate(1deg);transform-origin:top center}
.tonearm-shaft:after{content:'';position:absolute;left:-7px;top:45px;width:23px;height:23px;border-radius:3px;background:linear-gradient(120deg,#394139,#bfc7ad,#3a4239);box-shadow:1px 3px 3px #0008}
.tonearm-head{position:absolute;left:3px;top:244px;width:29px;height:62px;border-radius:5px 5px 8px 8px;transform:rotate(-10deg);background:linear-gradient(90deg,#1b1f1b 0,#515c50 16%,#d3d9c6 47%,#717b6c 74%,#202620 100%);border:1px solid #101510;box-shadow:3px 3px 7px #0008}
.tonearm-head:before{content:'';position:absolute;left:4px;right:4px;top:9px;height:4px;background:#202820;box-shadow:0 9px #202820,0 18px #202820}
.tonearm-stylus{position:absolute;left:12px;bottom:-12px;width:5px;height:15px;background:var(--orange);clip-path:polygon(0 0,100% 0,55% 100%);filter:drop-shadow(0 2px 1px #000)}
.hero-art.needle-engaged .tonearm{transform:rotate(19deg)}
.hero-art.needle-engaged .record{animation-play-state:running}
.hint-active{display:none}.hero-art.needle-engaged .hint-idle{display:none}.hero-art.needle-engaged .hint-active{display:inline;color:var(--orange)}
.record-wrap{cursor:crosshair}
@media(max-width:1100px){.tonearm{left:calc(50% + 16vw);top:calc(50% - 18vw);scale:.78;transform-origin:17px 17px}}
@media(max-width:760px){.tonearm{left:calc(50% + 29vw);top:calc(50% - 34vw);scale:.55}.record-wrap{cursor:default}.art-note-bottom .hint-idle{display:none}}
@media(prefers-reduced-motion:reduce){.tonearm{transition:none}.hero-art.needle-engaged .record{animation-play-state:paused}}