body{padding-bottom:270px}
.cassette-player{position:fixed;z-index:40;right:22px;bottom:16px;width:min(350px,calc(100vw - 24px));aspect-ratio:3/2;font-family:system-ui,sans-serif;line-height:1.2;isolation:isolate;filter:drop-shadow(0 9px 9px #0007)}
.cassette-bay,.cassette-machine{position:absolute;inset:0;display:block;width:100%;height:100%;user-select:none;pointer-events:none}
.cassette-bay{z-index:1}
.cassette-machine{z-index:3;-webkit-mask:url('textures/cassette-front-mask-v5.svg') center/100% 100% no-repeat;mask:url('textures/cassette-front-mask-v5.svg') center/100% 100% no-repeat}
/* Keep the upward path open while hiding the part below the machine's base. */
.cassette-track{position:absolute;inset:0;z-index:2;pointer-events:none;clip-path:polygon(-5% -180%,105% -180%,105% 94.5%,-5% 94.5%)}
.cassette-player .cassette-tape{position:absolute;left:13%;top:38.1%;width:74%;height:auto;min-width:0;margin:0;padding:0;background:transparent;border:0;border-radius:0;line-height:0;pointer-events:none;transform:translateY(0);transition:transform 750ms cubic-bezier(.35,.05,.2,1);will-change:transform;filter:drop-shadow(0 2px 2px #0007)}
.cassette-tape img{display:block;width:100%;height:auto;user-select:none;pointer-events:none}
.cassette-player.is-ejected .cassette-tape{transform:translateY(-145%);pointer-events:auto;cursor:pointer}
.cassette-window-glass{position:absolute;z-index:4;left:23.05%;top:51.27%;width:53.97%;height:28.13%;border-radius:2px;pointer-events:none;background:linear-gradient(127deg,#d7e3df08,transparent 40%,#e1ebdf0c 42%,transparent 68%);box-shadow:inset 0 0 5px #0008}
.cassette-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.cassette-player .cassette-key{position:absolute;z-index:5;top:4.2%;height:8.1%;width:7%;min-width:24px;min-height:28px;margin:0;padding:0;background:transparent;border:0;border-radius:2px;cursor:pointer;transition:background .12s,box-shadow .12s}
.cassette-rewind{left:45%}.cassette-forward{left:54.3%}.cassette-play{left:65.6%}.cassette-stop{left:77.7%}
.cassette-player .cassette-key:hover:enabled{background:#fff2;box-shadow:0 0 5px #eaf2ed35}
.cassette-player .cassette-key:active:enabled,.cassette-player.is-playing .cassette-play{background:linear-gradient(#0006,#0001);box-shadow:inset 0 2px 2px #0008}
.cassette-player .cassette-key:disabled{cursor:default}
.cassette-volume{position:absolute;z-index:5;left:9%;top:4.4%;width:11.8%;height:7%;display:block;cursor:ew-resize}
.cassette-player input[type=range]{appearance:none;-webkit-appearance:none;width:100%;height:100%;min-width:0;display:block;margin:0;padding:0;border:0;border-radius:0;background:transparent;opacity:1;cursor:ew-resize}
.cassette-player input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:2px;height:8px;background:#bbc2ba;border:0;border-radius:0;box-shadow:1px 0 1px #0009}
.cassette-player input[type=range]::-moz-range-thumb{width:2px;height:8px;background:#bbc2ba;border:0;border-radius:0;box-shadow:1px 0 1px #0009}
.cassette-player input[type=range]::-moz-range-track{background:transparent;border:0}
.cassette-player input:disabled{cursor:default}
.cassette-player .cassette-key:focus-visible,.cassette-player input:focus-visible,.cassette-player .cassette-eject:focus-visible,.cassette-player .cassette-tape:focus-visible{outline:2px solid #d3c49b;outline-offset:3px}
.cassette-led{position:absolute;z-index:5;left:92.4%;top:16.5%;width:1.5%;aspect-ratio:1;background:#591b1b;border-radius:50%;box-shadow:inset 0 1px 2px #0009;pointer-events:none}
.cassette-player.is-playing .cassette-led{background:#e84832;box-shadow:0 0 5px #e54832}
#cassette-status,.cassette-time{position:absolute;z-index:5;bottom:7.5%;font:8px/1.1 system-ui,sans-serif;color:#303a3a;text-shadow:0 1px #eee7;pointer-events:none}
#cassette-status{left:8%;max-width:70%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cassette-time{right:7%;font-family:monospace}
.cassette-player .cassette-eject{position:absolute;z-index:5;left:23.05%;top:51.27%;width:53.97%;height:28.13%;margin:0;padding:0;background:transparent;border:0;border-radius:2px;cursor:pointer}
.cassette-player noscript{display:block;color:#a6adb5;font-size:10px;text-align:right}
@media(prefers-reduced-motion:reduce){.cassette-player .cassette-key,.cassette-player .cassette-tape{transition:none}}
@media(max-width:600px){body{padding-bottom:225px}.cassette-player{width:min(292px,calc(100vw - 24px));right:12px;bottom:10px}#cassette-status,.cassette-time{font-size:7px}}