.cassette-console{display:none}.music[data-player-view=cassette] .cassette-console{display:block;margin-bottom:22px}.cassette-deck{width:min(100%,720px);margin:auto;padding:24px;border:1px solid color-mix(in srgb,var(--text) 25%,var(--line));border-radius:16px;background:repeating-linear-gradient(0deg,#ffffff03 0 1px,transparent 1px 3px),linear-gradient(145deg,color-mix(in srgb,var(--panel) 80%,#888),var(--panel) 50%,var(--bg));box-shadow:0 18px 35px #0005,inset 0 1px 2px #fff3,inset 0 -4px 8px #0006}.cassette-top,.cassette-foot{display:flex;justify-content:space-between;gap:12px;font:10px ui-monospace,monospace;letter-spacing:2px;color:var(--muted)}#cassette-state{color:var(--cyan)}.cassette-bay{perspective:850px;margin:20px auto;width:84%;padding:16px;background:linear-gradient(#030609,#17212a);border:3px solid #12181d;border-radius:12px;box-shadow:inset 0 7px 15px #0009,0 1px 0 #ffffff26}.cassette-door{position:relative;aspect-ratio:1.65;transform-origin:50% 100%;transition:transform .25s cubic-bezier(.3,0,.3,1);border:4px solid #252e36;border-radius:8px;padding:12px;background:#0a1016;box-shadow:0 3px 5px #0008,inset 0 0 0 1px #76818b80}.cassette-door.ejecting{transform:rotateX(-32deg) translateY(5px)}.cassette-glass{position:absolute;inset:0;border-radius:4px;background:linear-gradient(135deg,#ffffff14,transparent 25%,#ffffff04 53%,#ffffff20 54%,#ffffff02 61%,transparent);box-shadow:inset 0 0 18px #0006;pointer-events:none}.cassette-door-mark{position:absolute;bottom:4px;left:0;right:0;text-align:center;font:7px ui-monospace,monospace;letter-spacing:2px;color:#b5c0c4}.cassette-tape{position:relative;height:100%;border-radius:9px;background:linear-gradient(145deg,#273039,#0c1218);border:1px solid #73818c;box-shadow:inset 0 0 0 4px #ffffff08,0 2px 7px #0008;padding:8% 6% 3%;transition:opacity .12s}.ejecting .cassette-tape{opacity:.3}.cassette-label{position:absolute;top:5%;left:6%;right:6%;height:37%;padding:3% 5%;background:linear-gradient(110deg,color-mix(in srgb,var(--cyan) 75%,#ddd),color-mix(in srgb,var(--pink) 65%,#777));border-radius:4px 4px 0 0;color:#101a23;display:flex;flex-direction:column;justify-content:center}.cassette-label small{font-size:7px;letter-spacing:1px}.cassette-label strong{font-size:clamp(12px,2vw,23px);font-weight:900}.cassette-label>span{font-size:clamp(10px,1.4vw,17px);font-weight:600}.handwritten .cassette-label{background:repeating-linear-gradient(#eee0ca 0 19px,#7186a555 20px,#eee0ca 21px);color:#233b5d}.handwritten .cassette-label strong,.handwritten .cassette-label>span{font-family:'Segoe Print','Comic Sans MS',cursive;font-style:italic}.cassette-tape[data-identity=western]{background:linear-gradient(135deg,#a29074,#53463a)}.cassette-tape[data-identity=metal]{background:linear-gradient(135deg,#858c92,#252c32)}.cassette-tape[data-identity=metal] .cassette-label{background:linear-gradient(#bbbfc2,#80878e);font-family:Impact,sans-serif}.cassette-tape[data-identity=synthpop]{background:linear-gradient(145deg,#202535,#080b11)}.cassette-tape[data-identity=synthpop] .cassette-label{background:linear-gradient(25deg,#dfd4c3 40%,#843348 41% 55%,#272b40 56%);color:#151b26}.cassette-tape[data-identity=basketball]{background:linear-gradient(140deg,#633b21,#151c24)}.cassette-tape[data-identity=basketball] .cassette-label{background:linear-gradient(110deg,#eaa15e,#b86a32);font-family:Impact,sans-serif}.cassette-tape[data-identity=pop]{background:linear-gradient(130deg,#785567,#29202f)}.cassette-tape[data-identity=beach]{background:linear-gradient(135deg,#bbcfc5,#638b84)}.cassette-tape[data-identity=rock]{background:linear-gradient(130deg,#884b31,#291c17)}.cassette-tape-window{position:absolute;top:43%;left:7%;right:7%;height:40%;display:flex;align-items:center;justify-content:space-between;border:3px solid #0c1015;border-radius:35px;background:linear-gradient(#080a0e,#20272d);padding:1% 8%;overflow:hidden}.cassette-ribbon{position:absolute;left:24%;right:24%;height:28%;background:linear-gradient(#21120b,#744929 49%,#382014 50%);box-shadow:0 1px 1px #fff2}.cassette-reel{width:34%;aspect-ratio:1;border-radius:50%;background:repeating-radial-gradient(#342519 0 1px,#61472c 1px 2px);box-shadow:inset 0 0 0 1px #a3846144;position:relative;z-index:1}.cassette-reel i{position:absolute;inset:23%;border-radius:50%;border:2px solid #aeb6b8;background:repeating-conic-gradient(#d4d8d5 0 25deg,#313b41 25deg 55deg,#7d898c 55deg 60deg);animation:cassette-spin 2s linear infinite;animation-play-state:paused;box-shadow:0 0 0 2px #171e23}.cassette-reel i:after{content:'';position:absolute;inset:30%;border-radius:50%;background:#11181f;border:1px solid #a0aeb2}.cassette-reel.right i{animation-duration:2.4s}.playing .cassette-reel i{animation-play-state:running}.winding .cassette-reel i{animation-duration:.15s;animation-play-state:running}.rewinding .cassette-reel i{animation-direction:reverse}.cassette-bottom{position:absolute;bottom:2%;left:8%;right:8%;height:13%;display:flex;align-items:center;justify-content:space-between;color:#c0c6c8;font:8px monospace}.cassette-bottom i{width:6%;aspect-ratio:1;border-radius:50%;background:radial-gradient(#060b0f 45%,#859094 49%,#111a20 65%)}.tape-screw{position:absolute;width:2%;aspect-ratio:1;border-radius:50%;background:linear-gradient(45deg,#a7b1b8 44%,#182026 45% 55%,#75818b 56%);box-shadow:0 0 0 1px #0008}.s1{top:4%;left:2%}.s2{top:4%;right:2%}.s3{bottom:5%;left:2%}.s4{bottom:5%;right:2%}.cassette-keys{display:flex;justify-content:center;gap:5px}.cassette-keys button{width:75px;height:46px;flex-shrink:0;border-radius:3px 3px 6px 6px;background:linear-gradient(#55616a,#252f38);border:1px solid #6f7b83;box-shadow:0 4px 0 #10171d,inset 0 1px 0 #ffffff55;color:#f0f3f4;font-size:19px;text-shadow:0 1px 1px #000}.cassette-keys button:active,.cassette-keys button[aria-pressed=true]{transform:translateY(2px);box-shadow:0 2px 0 #10171d;color:var(--cyan)}.cassette-foot{margin-top:20px;font-size:8px}.cassette-foot>span:last-child{padding:2px 6px;background:#081019;color:var(--cyan);font-size:12px;letter-spacing:3px}
@keyframes cassette-spin{to{transform:rotate(360deg)}}
@media(max-width:740px){.cassette-deck{padding:16px}.cassette-top{font-size:7px;letter-spacing:1px}.cassette-bay{width:100%;padding:8px;margin:15px auto}.cassette-door{padding:7px}.cassette-label small{font-size:5px;letter-spacing:0}.cassette-label strong{font-size:13px}.cassette-label>span{font-size:10px}.cassette-door-mark{font-size:5px;letter-spacing:1px;bottom:2px}.cassette-keys button{width:20%;height:40px;font-size:16px}.cassette-foot{font-size:6px;letter-spacing:1px}.cassette-bottom{font-size:6px}}
@media(prefers-reduced-motion:reduce){.cassette-reel i{animation:none}.cassette-door,.cassette-tape{transition:none}}

/* Photographic hi-fi hardware with live controls and cassette behind the glass. */
.cassette-deck{position:relative;width:100%;max-width:none;aspect-ratio:2;padding:0;border:0;border-radius:0;background:url('/assets/cassette-deck-photo-v2.webp') center/100% 100% no-repeat;box-shadow:none}
.cassette-top,.cassette-foot,.cassette-door-mark,.cassette-bottom,.tape-screw{display:none}
.cassette-bay{position:absolute;left:13.5%;top:22.2%;width:45.5%;height:39.5%;margin:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;perspective:900px}
.cassette-door{height:100%;width:100%;aspect-ratio:auto;padding:0;border:0;background:transparent;box-shadow:none;border-radius:0}
.cassette-tape{position:absolute;height:94%;width:auto;aspect-ratio:1.6;top:2%;left:50%;transform:translateX(-50%);padding:0;border:0;border-radius:0;background:url('/assets/cassette-shell-photo-v2.webp') center/100% 100% no-repeat!important;box-shadow:0 4px 12px #0009}
.cassette-label,.handwritten .cassette-label{top:8%;left:7%;right:7%;height:23%;padding:2% 5%;border-radius:8px;background:transparent!important;color:#20231d;gap:0;box-shadow:none}
.cassette-label small{font-size:clamp(4px,.65vw,9px);letter-spacing:.5px}.cassette-label strong{font-size:clamp(8px,1.25vw,19px);line-height:1.1}.cassette-label>span{font-size:clamp(7px,1vw,16px);line-height:1.1}
.cassette-tape:not(.handwritten) .cassette-label{background:linear-gradient(115deg,color-mix(in srgb,var(--cyan) 65%,#efdfbf),color-mix(in srgb,var(--pink) 25%,#efdfbf))!important;opacity:.9}
.cassette-tape-window{position:absolute;inset:0;display:block;border:0;background:none;padding:0;overflow:visible;border-radius:0}.cassette-ribbon{display:none}.cassette-reel{position:absolute;top:31.5%;width:18%;height:auto;aspect-ratio:1;border-radius:50%;background:none;box-shadow:none}.cassette-reel.left{left:17%}.cassette-reel.right{left:66%}.cassette-reel i{inset:0;border:0;box-shadow:none;background-image:url('/assets/cassette-shell-photo-v2.webp');background-size:555.55% auto;background-position:20.7% 44.4%;background-color:#c5c3b6}.cassette-reel.right i{background-position:80.5% 44.4%}.cassette-reel i:after{display:none}
.cassette-glass{background:linear-gradient(120deg,#ffffff02,transparent 35%,#ffffff08 54%,#ffffff17 55%,#ffffff02 66%,transparent);box-shadow:inset 0 0 18px #0007;border:1px solid #ffffff0c;z-index:2}
.cassette-keys{position:absolute;left:17.2%;top:70.8%;width:39.8%;height:7.9%;gap:0;display:grid;grid-template-columns:repeat(4,1fr)}
.cassette-keys button{width:100%;height:100%;min-height:0;border:0;background:transparent!important;box-shadow:none;border-radius:0;font-size:0;color:transparent;transform:none!important;text-shadow:none}
.cassette-keys button:active,.cassette-keys button[aria-pressed=true]{background:#0003!important;box-shadow:inset 0 2px 4px #0008}.cassette-keys button:focus-visible{outline:2px solid var(--cyan);outline-offset:-3px}.cassette-console{border-bottom:1px solid var(--line);padding-bottom:12px}.cassette-deck:after{content:'';position:absolute;left:68%;top:21%;width:28%;height:22%;pointer-events:none;background:var(--cyan);mix-blend-mode:color;opacity:.12}
@media(max-width:740px){.cassette-label small{font-size:4px;letter-spacing:0}.cassette-label strong{font-size:8px}.cassette-label>span{font-size:7px}.cassette-label{padding:1% 4%}.cassette-console{margin-inline:-8px}.cassette-deck{min-height:0}}

.cassette-tape-window{height:100%;width:100%;top:0;left:0;right:0;bottom:0}
.cassette-tape:before{content:'';position:absolute;inset:0;background:var(--shell-tint,#6f7990);opacity:.25;mix-blend-mode:color;pointer-events:none}.cassette-tape[data-identity=western]{--shell-tint:#b47d43}.cassette-tape[data-identity=synthpop]{--shell-tint:#6473a9}.cassette-tape[data-identity=basketball]{--shell-tint:#d57531}.cassette-tape[data-identity=pop]{--shell-tint:#955e93}.cassette-tape[data-identity=beach]{--shell-tint:#61b9ac}.cassette-tape[data-identity=rock]{--shell-tint:#ba6550}.cassette-tape[data-identity=metal]{--shell-tint:#b1b8be}
.cassette-keys{height:max(44px,7.9%);top:calc(74.75% - max(22px,3.95%))}
@media(max-width:450px){.cassette-keys{left:14%;width:52%}}

/* Alpha hardware frame sits in front of the tape; only the window reveals it. */
.cassette-console{overflow:hidden}.cassette-deck{aspect-ratio:2.7;background:none;margin-top:-4.3%;margin-bottom:-1%;isolation:isolate}.cassette-deck:before{content:'';position:absolute;left:0;right:0;top:-12%;height:135%;background:url('/assets/cassette-deck-cutout-v3.webp') center/100% 100% no-repeat;z-index:3;pointer-events:none}.cassette-deck:after{display:none}.cassette-bay{left:13.5%;top:18%;width:45.5%;height:53.3%;z-index:1;overflow:hidden;background:#080b0e}.cassette-tape{height:103%;top:-1%;filter:brightness(.74) saturate(.8)}.cassette-glass{background:linear-gradient(115deg,#c2d8e71c,transparent 34%,#82969d0c 53%,#c9d9e314 54%,transparent 68%);box-shadow:inset 0 0 22px #000c;z-index:2}.cassette-keys{top:calc(88.9% - max(22px,5.3%));height:max(44px,10.6%);z-index:4}.cassette-vu{position:absolute;left:0;top:-12%;width:100%;height:135%;z-index:4;pointer-events:none}.cassette-vu path{stroke:#302011;stroke-width:3;stroke-linecap:round;transition:transform .09s linear}#vu-left{transform-origin:1312px 365px}#vu-right{transform-origin:1560px 365px}
@media(max-width:740px){.cassette-deck{margin-top:-4%;margin-bottom:0}}

.cassette-deck{aspect-ratio:2.55;margin-top:0;margin-bottom:0}.cassette-deck:before,.cassette-vu{top:-11.5%;height:127.5%}.cassette-bay{top:16.8%;height:50.3%}.cassette-keys{top:calc(83.45% - max(22px,5%));height:max(44px,10%)}

/* Measured hub centres and meter pivots in the photographic source coordinates. */
.cassette-reel{top:29.6%;width:20%;aspect-ratio:1;transform:none;border-radius:50%;background:#241b14}.cassette-reel.left{left:15.8%}.cassette-reel.right{left:64.8%}.cassette-reel i,.cassette-reel.right i{inset:0;background:url('/assets/cassette-hub-centered-v4.webp') center/100% 100% no-repeat;transform-origin:50% 50%;border-radius:50%}
#vu-left{transform-origin:1342px 373px}#vu-right{transform-origin:1590px 373px}

/* Original cassette proportions: centres fixed, hubs clear of the paper label. */
.cassette-reel{width:17.4%;top:31.68%}.cassette-reel.left{left:17.1%}.cassette-reel.right{left:66.1%}

/* Native image button bounds, mapped through the same hardware projection. */
.cassette-keys{inset:0;width:100%;height:100%;display:block;pointer-events:none}
.cassette-keys button{position:absolute;top:79.06%;height:8.91%;width:9.3%;padding:0;min-width:0;min-height:0;pointer-events:auto;box-sizing:border-box}
#cassette-back{left:17.3%}#cassette-play{left:27.28%}#cassette-stop{left:37.26%}#cassette-next{left:47.69%}
.cassette-keys button:active,.cassette-keys button[aria-pressed=true]{background:transparent!important;box-shadow:none}
.cassette-keys button:after{content:'';position:absolute;inset:5% 3%;pointer-events:none;opacity:0;transition:opacity .12s;background:#00000012;box-shadow:inset 0 1px 2px #0005}
.cassette-keys button:active:after,.cassette-keys button[aria-pressed=true]:after{opacity:1}
.cassette-reel i{animation-duration:2.7s;animation-direction:reverse}
.cassette-reel.right i{animation-duration:3.2s}
.winding .cassette-reel i{animation-duration:.2s;animation-direction:reverse}
.rewinding .cassette-reel i{animation-direction:normal}
.cassette-tape{container-type:inline-size}
.cassette-label small{font-size:2.1cqw;letter-spacing:.12cqw;line-height:1.1}
.cassette-label strong{font-size:4.5cqw;line-height:1.1}
.cassette-label>span{font-size:3.4cqw;line-height:1.1}
.cassette-tape[data-identity=dance]{--tape-body:#202b43;--tape-label:#d1ede9}.cassette-tape[data-identity=dance] .cassette-label{background:linear-gradient(120deg,#d2f6ef,#d7c8ef);color:#193245}

.cassette-tape[data-identity=cinematic]{--tape:#252b32;--label:#cfb47e;--ink:#17212c}.cassette-tape[data-identity=cinematic] .cassette-label{font-family:Georgia,serif}