.vintage-player,.vintage-player *{box-sizing:border-box}.vintage-player{--progress: 35%;--vu-angle: -32deg;position:relative;width:100%;aspect-ratio:1671 / 300;overflow:visible;user-select:none;-webkit-user-select:none;container-type:inline-size}.vintage-player__time{position:absolute;left:4.43%;top:60%;width:46.38%;display:flex;justify-content:space-between;font:700 clamp(11px,2.3cqw,17px) / 1 ui-monospace,"SF Mono",Menlo,Consolas,monospace;letter-spacing:.06em;font-variant-numeric:tabular-nums;color:#2b2520;text-shadow:0 1px 0 rgb(255 255 255 / 65%);pointer-events:none}.vintage-player__base{position:absolute;inset:0;display:block;width:100%;height:100%;pointer-events:none}.vintage-player__progress{position:absolute;left:4.43%;top:43%;width:46.38%;height:14%;cursor:pointer;touch-action:none;background:url(/player/assets/progress-track.webp) center / 100% 100% no-repeat}.vintage-player__progress-fill{position:absolute;inset:0 auto 0 0;width:var(--progress);overflow:hidden;border-radius:999px;background:url(/player/assets/progress-fill.webp) left center / 100% 100% no-repeat}.vintage-player__progress-thumb{position:absolute;left:var(--progress);top:50%;width:6.2%;height:auto;transform:translate(-50%,-50%);pointer-events:none}.vintage-player__vu{position:absolute;left:55.12%;top:30.33%;width:11.49%;height:40%;pointer-events:none}.vintage-player__vu-face{display:block;width:100%;height:100%}.vintage-player__vu-needle{position:absolute;left:44.5%;top:8%;width:11%;height:84%;transform:rotate(var(--vu-angle));transform-origin:50% 89%;transition:transform 70ms linear}.vintage-player__transport{position:absolute;left:74.03%;top:34.67%;width:21.78%;height:27%;display:grid;grid-template-columns:repeat(4,1fr);gap:.55%}.vintage-player__button{display:grid;place-items:stretch;min-width:0;padding:0;border:0;background:none;cursor:pointer;filter:drop-shadow(0 .12rem .12rem rgb(0 0 0 / 38%));transition:filter 90ms ease,transform 90ms ease}.vintage-player__button img{grid-area:1 / 1;display:block;width:100%;height:100%;transition:opacity 70ms linear}.vintage-player__button-image--normal{opacity:1}.vintage-player__button-image--pressed{opacity:0}.vintage-player__button:hover{filter:brightness(1.07) drop-shadow(0 .14rem .14rem rgb(0 0 0 / 42%))}.vintage-player__button:active,.vintage-player__button[aria-pressed=true]{transform:translateY(3%);filter:drop-shadow(0 .03rem .04rem rgb(0 0 0 / 28%))}.vintage-player__button:active .vintage-player__button-image--normal,.vintage-player__button[aria-pressed=true] .vintage-player__button-image--normal{opacity:0}.vintage-player__button:active .vintage-player__button-image--pressed,.vintage-player__button[aria-pressed=true] .vintage-player__button-image--pressed{opacity:1}.vintage-player__progress:focus-visible{outline:3px solid #b3121b;outline-offset:4px;border-radius:999px}.vintage-player__button:focus-visible{outline:3px solid #b3121b;outline-offset:3px;border-radius:10px}@media(prefers-reduced-motion:reduce){.vintage-player__vu-needle,.vintage-player__button{transition:none}}@media(max-width:639px){.vintage-player{aspect-ratio:auto;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"vu time" "bar bar" "btns btns";align-items:center;gap:6px 14px;padding:6px 10px 10px;border:20px solid transparent;border-image:url(/player/assets/player-base-mobile.webp) 50 fill / 20px stretch}.vintage-player__base{display:none}.vintage-player__vu{position:relative;inset:auto;grid-area:vu;width:108px;height:auto;aspect-ratio:192 / 105}.vintage-player__time{position:static;grid-area:time;width:auto;flex-direction:column;align-items:flex-end;gap:6px;font-size:14px}.vintage-player__time [data-time-current]{font-size:28px}.vintage-player__time [data-time-total]:before{content:"/ "}.vintage-player__progress{position:relative;inset:auto;grid-area:bar;width:100%;height:44px;background-size:100% 18px;touch-action:pan-y}.vintage-player__progress-fill{top:50%;bottom:auto;height:18px;transform:translateY(-50%)}.vintage-player__progress-thumb{width:32px}.vintage-player__transport{position:relative;inset:auto;grid-area:btns;width:100%;height:auto;grid-template-columns:repeat(4,1fr);gap:8px}.vintage-player__button{aspect-ratio:90 / 81}.vintage-player__button img{height:auto}}