.tape-room{padding:27px 6% 0;background:radial-gradient(ellipse at 50% 30%,#89734713,transparent 70%)}
.tape-meta{display:flex;align-items:center;justify-content:space-between;font-size:11px;color:#9b927d;gap:20px;margin-bottom:24px}
.tape-meta>span:first-child{display:flex;gap:9px;align-items:center}
.tape-meta i{display:inline-block;width:5px;height:5px;border-radius:50%;background:#674536;box-shadow:0 0 0 3px #7f4e3212;transition:background .4s,box-shadow .4s}
.tape-active .tape-meta i{background:#be7950;box-shadow:0 0 10px #c9854a55}
#tape-track{font:11px Georgia,serif;letter-spacing:2px;font-variant-numeric:tabular-nums}
.tape-deck{position:relative;max-width:490px;margin:0 auto 30px;padding:12px 20px 15px;background:repeating-linear-gradient(0deg,#ffffff03 0 1px,transparent 1px 3px),linear-gradient(130deg,#514a36,#2c2d22 30%,#36372a 65%,#29271d);border:6px solid #262219;outline:1px solid #89765055;box-shadow:0 14px 28px #0005,inset 0 0 0 1px #c2ac7540,inset 0 0 20px #0006;border-radius:5px}
.tape-transport{position:relative;aspect-ratio:480/228;direction:ltr}
.tape-path{position:absolute;inset:0;width:100%;height:100%}
.tape-reel{position:absolute;top:44%;left:25.5%;width:30%;aspect-ratio:1;transform:translate(-50%,-50%);filter:drop-shadow(2px 5px 4px #000a)}
.reel-right{left:74.5%}
.reel-wheel{display:block;width:100%;height:100%;animation:reel-turn 9s linear infinite;animation-play-state:paused}
.reel-right .reel-wheel{animation-duration:11s;animation-direction:reverse}
.tape-active .reel-wheel{animation-play-state:running}
.moving-tape{animation:tape-travel 1.2s linear infinite;animation-play-state:paused}
.tape-active .moving-tape{animation-play-state:running}
.deck-label{display:flex;align-items:center;justify-content:space-between;gap:15px;border-top:1px solid #a895622a;padding-top:10px;font-size:9px;color:#b1a17e}
.deck-label>span:last-child{font:9px Georgia,serif;letter-spacing:1.5px}
.deck-screw{position:absolute;width:5px;height:5px;border:1px solid #a491695c;border-radius:50%;background:linear-gradient(45deg,#4b4635 40%,#100f0b 40% 60%,#4b4635 60%)}
.screw-one{top:8px;left:8px}.screw-two{top:8px;right:8px}.screw-three{bottom:8px;left:8px}.screw-four{bottom:8px;right:8px}
.tape-meter{display:flex;gap:3px;align-items:end;height:12px;direction:ltr}
.tape-meter i{display:block;width:3px;height:4px;background:#aa8f57;opacity:.3;transform-origin:bottom;animation:tape-level .9s ease-in-out infinite alternate;animation-play-state:paused}
.tape-meter i:nth-child(2n){height:9px;animation-delay:-.4s}.tape-meter i:nth-child(3n){height:12px;animation-delay:-.7s}
.tape-active .tape-meter i{animation-play-state:running}
.tape-seeking .reel-wheel{animation-duration:.65s}.tape-seeking .moving-tape{animation-duration:.2s}
.tape-room .quote-stage{min-height:220px;padding:10px 0;gap:18px}
.tape-room .quote-stage p{font-size:clamp(29px,3.1vw,44px);line-height:1.7}
.tape-room .quote-controls{margin-top:18px}
.tape-awaiting .quote-stage{opacity:0}
@keyframes reel-turn{to{transform:rotate(360deg)}}
@keyframes tape-travel{to{stroke-dashoffset:-34}}
@keyframes tape-level{from{transform:scaleY(.35);opacity:.35}to{transform:scaleY(1);opacity:.8}}
@media(max-width:650px){.tape-room{padding:22px 7% 0;margin-top:32px}.tape-meta{font-size:10px;margin-bottom:20px}.tape-deck{margin-bottom:22px;padding:10px 8px 12px;border-width:5px}.deck-label{font-size:8px;gap:8px;padding-top:9px}.deck-label>span:last-child{font-size:8px}.tape-meter{gap:2px}.tape-meter i{width:2px}.tape-room .quote-stage{min-height:240px}.tape-room .quote-stage p{font-size:29px}.tape-room .quote-stage>span{font-size:10px}.tape-room .quote-controls{margin-top:14px}}
@media(prefers-reduced-motion:reduce){.reel-wheel,.moving-tape,.tape-meter i{animation:none!important}.tape-awaiting .quote-stage{opacity:1}}