.cassette-player{width:min(740px,100%);color:var(--surface-ink,#252722);font-family:var(--font-app);perspective:1600px;perspective-origin:50% 12%;--insert-rise:-120px;--insert-slide:0px;--insert-scale:1;--insert-depth:70px;--insert-swallow:-70px;margin-inline:auto;padding:28px 10px 0;position:relative;container-type:inline-size}.crt-scene{--crt-depth:clamp(56px,32cqw,190px);--crt-pad:clamp(11px,3cqw,22px);width:89%;transform-style:preserve-3d;transform-origin:50% clamp(100px,33cqw,230px);margin-inline:auto;transition:transform .6s cubic-bezier(.22,.61,.36,1);position:relative;transform:rotateX(-7deg)rotateY(-18deg)}.crt-unit{transform-style:preserve-3d;position:relative}.crt-front-panel{padding:var(--crt-pad);background:linear-gradient(118deg,#ece8dc,#d9d6c9 55%,#c5c4b6);border:1px solid #b1afa0;border-radius:clamp(8px,2.5cqw,16px);position:relative;transform:translateZ(1px);box-shadow:inset 1px 2px 1px #ffffffe6,inset -2px -3px 2px #72786a5c,0 1px #777d6b}.crt-front-panel:before{content:"";pointer-events:none;background:#fff9;height:1px;position:absolute;inset:5px 8px auto}.crt-body-top,.crt-body-right,.crt-body-bottom,.crt-body-back{-webkit-backface-visibility:hidden;backface-visibility:hidden;background:#b5baaa;border:1px solid #a3a593;display:block;position:absolute}.crt-body-top{left:0;right:0;top:calc(-1*var(--crt-depth));height:var(--crt-depth);transform-origin:bottom;background:linear-gradient(#a4ad99,#c4c9b8 55%,#e8e8db);border-radius:12px 12px 0 0;transform:rotateX(90deg)}.crt-body-top>span{background:repeating-linear-gradient(90deg,#555f4b 0 2px,#b8bfa9 2px 6px);border:1px solid #99a08d66;border-radius:4px;position:absolute;inset:24% 12% 20%;box-shadow:inset 0 2px 3px #525d4444}.crt-body-right{width:var(--crt-depth);transform-origin:0;background:linear-gradient(90deg,#c4c9b9,#b3bca8 50%,#818f78);border-radius:0 12px 12px 0;height:100%;top:0;left:100%;transform:rotateY(90deg)}.crt-body-right>span{background:repeating-linear-gradient(0deg,#536148 0 2px,#a7b199 2px 6px);border-radius:4px;position:absolute;inset:14% 16% 18%;box-shadow:inset 1px 0 3px #53614888}.crt-body-bottom{height:var(--crt-depth);transform-origin:top;background:#7c8871;top:100%;left:0;right:0;transform:rotateX(-90deg)}.crt-body-back{transform:translateZ(calc(-1*var(--crt-depth))) rotateY(180deg);background:#8f9b81;border-radius:10px;inset:0}.crt-foot{background:linear-gradient(#515b49,#242c21);border-radius:0 0 3px 3px;width:12%;height:clamp(6px,1.7cqw,12px);position:absolute;top:100%;transform:translateZ(-12px);box-shadow:0 4px 5px #242d2324}.crt-foot-left{left:12%}.crt-foot-right{right:12%}.crt-front{grid-template-columns:minmax(0,1fr) clamp(32px,9cqw,68px);align-items:stretch;gap:clamp(9px,2.2cqw,16px);display:grid}.crt-bezel{background:linear-gradient(130deg,#737667,#3e4539 18%,#292f26 72%,#5b6252);border:1px solid #969e8877;border-radius:clamp(14px,4cqw,27px);padding:clamp(9px,2.3cqw,17px);box-shadow:inset 3px 4px 6px #151c12b3,inset -2px -2px 2px #bac2aa7a,0 1px #ffffeacc,0 -1px #757e6877}.crt-screen{aspect-ratio:4/3;color:#b6c8ad;background:#101812;border-radius:11%/9%;position:relative;overflow:hidden;box-shadow:0 0 0 2px #1b2419,inset 0 0 25px #020602}.crt-screen:after{content:"";pointer-events:none;border-radius:inherit;z-index:2;background:radial-gradient(at 15% 8%,#eff7df25,#0000 47%),linear-gradient(130deg,#f6ffe914,#0000 34%);position:absolute;inset:0;box-shadow:inset 0 0 18px 3px #0007,inset 1px 1px 2px #e4efd04d}.crt-screen:before{content:"";pointer-events:none;z-index:2;opacity:0;background:radial-gradient(#d9e9c0 0%,#a4c98b 12%,#0000 70%);position:absolute;inset:0;transform:scaleY(.005)}.crt-screen video{object-fit:contain;opacity:0;background:#081009;width:100%;height:100%;transition:opacity .35s;display:block}.cassette-player[data-stage=loaded] .crt-screen video{opacity:1}.crt-idle{text-align:center;font:400 clamp(10px,2.9cqw,15px)/1.5 var(--font-interface);text-shadow:0 0 5px #b9d7a152;background:radial-gradient(at 45% 40%,#233326,#111c14 85%);flex-direction:column;justify-content:center;align-items:center;gap:12px;padding:16px;display:flex;position:absolute;inset:0}.crt-idle:after{content:"";pointer-events:none;opacity:.5;background:repeating-linear-gradient(#0000 0 3px,#0610083d 3px 4px);position:absolute;inset:0}.crt-osd{font:10px/1.3 var(--font-interface);letter-spacing:.1em;position:absolute;top:12px;left:14px}.crt-standby-line{background:#97b384;width:25px;height:1px;box-shadow:0 0 6px #b1d19a}.crt-demo small{color:#a7bda0;font-size:11px}.crt-unavailable{color:#c7cbbf}.crt-play-prompt{z-index:3;color:#f5f4ef;cursor:pointer;background:#071008aa;border:0;justify-content:center;align-items:center;gap:8px;min-height:44px;font-size:14px;display:flex;position:absolute;inset:0}.crt-side{flex-direction:column;align-items:center;gap:clamp(8px,2cqw,16px);padding-top:4px;display:flex}.crt-brand{font:500 clamp(5px,1.4cqw,9px)/1 var(--font-interface);letter-spacing:.04em;white-space:nowrap;color:#4b5742;text-shadow:0 1px #fff8}.crt-dial{aspect-ratio:1;background:radial-gradient(circle at 35% 25%,#eeecdf,#c3c6b6 65%,#a0aa93);border:1px solid #8d9980;border-radius:50%;flex-shrink:0;width:72%;position:relative;box-shadow:1px 3px 3px #3f4b3444,inset 1px 1px #ffffeccc,0 0 0 2px #c8cebd,0 0 0 3px #8d967f}.crt-dial:after{content:"";background:#5f6b54;border-radius:1px;width:2px;height:27%;position:absolute;top:10%;left:47%}.crt-dial-small{width:53%;rotate:25deg}.crt-speaker{background:repeating-linear-gradient(0deg,#6e7b5f 0 1px,#aeb99f 1px 2px,#d0d4c0 2px 5px);border-radius:2px;flex:1;width:72%;min-height:22px;box-shadow:inset 1px 1px 3px #62774f66}.crt-indicator{background:#435537;border-radius:50%;width:5px;height:5px;margin:4px 0;box-shadow:0 0 0 2px #a7b39b,inset 0 1px #293c21}.cassette-player[data-stage=loaded] .crt-indicator{background:#b8cc86;box-shadow:0 0 0 2px #8f9e7e,0 0 5px #a8cc75}.cassette-player[data-playing=true] .crt-indicator{background:#e5f7b9;box-shadow:0 0 0 2px #8f9e7e,0 0 9px #b8e88f}.crt-deck{color:#4c5942;border-top:1px solid #929f8255;justify-content:space-between;align-items:center;gap:10px;margin-top:clamp(9px,2cqw,16px);padding:clamp(12px,3cqw,22px) 2% 8px;display:flex;position:relative;box-shadow:inset 0 1px #faffec80}.crt-vhs{font:700 italic clamp(9px,2.7cqw,16px)/1 var(--font-interface);letter-spacing:-.06em}.crt-deck-label{font:500 clamp(6px,1.9cqw,10px)/1 var(--font-interface);letter-spacing:.1em}.crt-slot{perspective:400px;background:#0a1309;border:2px solid #7a886b;border-radius:2px;width:64%;height:clamp(18px,6cqw,34px);position:relative;box-shadow:inset 0 3px 4px #000,0 1px #ffffe2,0 -1px #526044}.crt-flap{transform-origin:50% 0;background:linear-gradient(#bcc5ae,#d3dac5 60%,#8f9f7d);border-radius:1px;transition:transform .25s;display:block;position:absolute;inset:0;box-shadow:inset 0 1px #eef4de,0 1px 1px #2b3b21}.crt-slot-lip{background:#dbe4c8;height:2px;position:absolute;bottom:-3px;left:-2px;right:-2px;box-shadow:0 1px #7b8f65}.crt-chin{color:#6a775b;font:clamp(4px,1.3cqw,7px)/1 var(--font-interface);letter-spacing:.05em;align-items:center;gap:5px;padding:8px 0 0;display:flex}.crt-chin>span{margin-right:auto}.crt-chin>i{background:#c0cbb0;border:1px solid #9fac90;width:8%;height:3px;box-shadow:0 1px #f5ffe5}.cassette-insert-area{height:var(--insert-space,190px);pointer-events:none;transform-style:preserve-3d;transition:height .55s cubic-bezier(.22,.61,.36,1);position:relative}.cassette-insert-area:before{content:"";filter:blur(10px);background:#25331f21;border-radius:50%;height:12%;transition:opacity .3s;position:absolute;bottom:8%;left:20%;right:20%;transform:rotateX(80deg)translateZ(-20px)}.cassette-player:not([data-stage=ready]) .cassette-insert-area:before{opacity:0}.cassette-player[data-stage=loaded] .cassette-insert-area{height:18px}.cassette-insert{pointer-events:auto;text-align:left;cursor:pointer;width:56%;max-width:330px;transform-style:preserve-3d;background:0 0;border:0;border-radius:3px;padding:0;transition:transform .55s cubic-bezier(.22,.61,.36,1);position:absolute;top:26px;left:50%;transform:translate(-50%)translateZ(30px)rotateX(-12deg)rotateY(-6deg)rotate(-4deg)}.cassette-insert .cassette-jacket{transform-style:preserve-3d;--tape-depth:clamp(9px,7cqw,24px)}.cassette-insert:focus-visible{outline:2px solid var(--focus-color,#536a55);outline-offset:6px}.cassette-player[data-stage=loaded] .cassette-insert{visibility:hidden}.cassette-player-controls{min-height:44px;font:12px/1.4 var(--font-interface);justify-content:center;align-items:center;gap:10px;margin-top:12px;display:flex}.cassette-player-controls button{min-width:44px;min-height:44px;color:inherit;font:inherit;cursor:pointer;background:0 0;border:1px solid #c9cec2;justify-content:center;align-items:center;gap:8px;padding:10px 14px;transition:background .2s,border-color .2s;display:flex}.cassette-player-controls svg{flex-shrink:0;width:16px;height:16px}.cassette-player-controls output{color:var(--surface-muted,#77786d);font-size:12px}.cassette-player[data-stage=ready] .cassette-player-controls button{color:#f6f8ef;background:#222c20;border-color:#222c20}.cassette-player[data-stage=inserting] .cassette-insert{animation:cassette-load var(--cassette-load-time) cubic-bezier(.3,.65,.25,1) both}.cassette-player[data-stage=ejecting] .cassette-insert{animation:cassette-eject var(--cassette-eject-time) cubic-bezier(.22,.61,.36,1) both}.cassette-player[data-stage=inserting] .crt-flap{animation:deck-insert var(--cassette-load-time) ease both}.cassette-player[data-stage=ejecting] .crt-flap{animation:deck-eject var(--cassette-eject-time) ease both}.cassette-player[data-stage=loaded] .crt-screen:before{animation:.48s ease-out both crt-wake}.cassette-player[data-stage=ejecting] .crt-screen:before{animation:.28s ease-in both crt-sleep}@keyframes cassette-load{0%{transform:translate(-50%)translateZ(30px)rotateX(-12deg)rotateY(-6deg)rotate(-4deg)}22%{transform:translate(calc(-50% + var(--insert-slide)*.6),calc(var(--insert-rise)*.32)) translateZ(85px) rotateX(24deg) rotateY(-3deg) rotateZ(-1deg)}48%,57%{transform:translate(calc(-50% + var(--insert-slide)),var(--insert-rise)) translateZ(var(--insert-depth)) rotateX(90deg) scale(var(--insert-scale))}88%,to{transform:translate(calc(-50% + var(--insert-slide)),var(--insert-rise)) translateZ(var(--insert-swallow)) rotateX(90deg) scale(var(--insert-scale))}}@keyframes cassette-eject{0%,12%{transform:translate(calc(-50% + var(--insert-slide)),var(--insert-rise)) translateZ(var(--insert-swallow)) rotateX(90deg) scale(var(--insert-scale))}48%,58%{transform:translate(calc(-50% + var(--insert-slide)),var(--insert-rise)) translateZ(var(--insert-depth)) rotateX(90deg) scale(var(--insert-scale))}to{transform:translate(-50%)translateZ(30px)rotateX(-12deg)rotateY(-6deg)rotate(-4deg)}}@keyframes deck-insert{0%,49%{transform:rotateX(0)}58%,88%{transform:rotateX(-82deg)}99%,to{transform:rotateX(0)}}@keyframes deck-eject{0%{transform:rotateX(0)}12%,54%{transform:rotateX(-82deg)}72%,to{transform:rotateX(0)}}@keyframes crt-wake{0%{opacity:.85;transform:scaleY(.005)}45%{opacity:.6;transform:scaleY(1)}to{opacity:0;transform:scaleY(1)}}@keyframes crt-sleep{0%{opacity:0;transform:scaleY(1)}55%{opacity:.8;transform:scaleY(.005)}to{opacity:0;transform:scaleY(.005)}}@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){.crt-scene{transform:rotateX(calc(-7deg + var(--pointer-y,0)*-3deg)) rotateY(calc(-18deg + var(--pointer-x,0)*5deg))}.cassette-player[data-stage=ready] .cassette-insert:hover{transform:translate(-50%,-6px)translateZ(38px)rotateX(-5deg)rotateY(-3deg)rotate(-2deg)}.cassette-player-controls button:hover{background:#29372409;border-color:#798b6a}.cassette-player[data-stage=ready] .cassette-player-controls button:hover{background:#3b4a34}}@media (max-width:600px){.cassette-player{padding:18px 0 0}.crt-scene{width:87%}.cassette-insert{width:59%;top:22px}.cassette-player-controls{gap:8px;font-size:11px}.cassette-player-controls button{padding-inline:12px}.crt-osd{font-size:8px;top:10px;left:11px}.crt-demo small{font-size:10px}}@media (prefers-reduced-motion:reduce){.cassette-player *,.cassette-player :before,.cassette-player :after{transition:none!important;animation:none!important}.cassette-player[data-stage=inserting] .cassette-insert{visibility:hidden}.crt-scene{transform:rotateX(-7deg)rotateY(-18deg)}}.cassette-reader{background:var(--surface,#f5f4ef);min-height:100svh;color:var(--surface-ink,#252722);font:16px/1.6 var(--font-app);padding:0 32px 70px}.cassette-reader-header{border-bottom:1px solid var(--surface-line);justify-content:space-between;align-items:center;gap:20px;width:min(1100px,100%);min-height:82px;margin:auto;display:flex}.cassette-reader-header a{color:inherit;font-size:14px;text-decoration:none}.cassette-reader-header>div{gap:12px;display:flex}.cassette-reader-header button{cursor:pointer;width:44px;height:44px;color:inherit;background:0 0;border:1px solid #0000;border-radius:2px;place-items:center;display:grid}.cassette-reader-header button:hover{background:var(--surface-stage)}.cassette-reader .cassette-player{width:min(600px,100%)}.cassette-reader-heading{text-align:center;width:min(700px,100%);margin:28px auto 20px}.cassette-reader-heading>span{color:var(--surface-muted);font-size:13px}.cassette-reader-heading h1{letter-spacing:-.03em;overflow-wrap:anywhere;margin:14px 0;font-size:clamp(28px,3.2vw,38px);font-weight:500;line-height:1.22}.cassette-reader-heading p{max-width:55ch;color:var(--surface-muted);overflow-wrap:anywhere;margin:auto;font-size:15px}.cassette-upload{border-top:1px solid var(--surface-line,#d9d9cf);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;width:min(670px,100%);margin:30px auto 0;padding:26px 0;display:flex}.cassette-upload h2{margin:0 0 6px;font-size:19px;font-weight:500}.cassette-upload p{color:var(--surface-muted);margin:0;font-size:14px}.cassette-upload-label{cursor:pointer;border:1px solid #b7b7ab;border-radius:2px;align-items:center;gap:9px;min-height:44px;padding:11px 18px;font-size:13px;font-weight:500;display:inline-flex;position:relative}.cassette-upload-label input{opacity:0;cursor:pointer;width:100%;height:100%;position:absolute;inset:0}.cassette-upload-label:focus-within{outline:2px solid var(--focus-color,#9d4635);outline-offset:4px}.cassette-upload-label:has(input:disabled){opacity:.5;cursor:wait}.cassette-file{background:var(--surface-stage,#eae9e1);border:1px solid var(--surface-line,#d9d9cf);border-radius:2px;width:100%;min-width:0;padding:20px}.cassette-file>div:first-child{justify-content:space-between;gap:16px;margin-bottom:18px;font-size:14px;display:flex}.cassette-file strong{overflow-wrap:anywhere;min-width:0;font-weight:500}.cassette-file span{color:var(--surface-muted);flex-shrink:0}.cassette-file video{object-fit:contain;background:#121b15;border-radius:3px;width:100%;height:220px;display:block}.cassette-file-actions{flex-wrap:wrap;align-items:center;gap:18px;margin:18px 0 12px;display:flex}.cassette-file-actions button:not(.cab-primary){cursor:pointer;background:0 0;min-width:44px;min-height:44px;padding:10px 0;font-size:13px}.cassette-upload progress{accent-color:#9d4635;width:100%;height:4px}.cassette-upload>output{width:100%}.cassette-error{overflow-wrap:anywhere;width:100%;margin:14px 0;font-size:14px;line-height:1.6;color:#9d4635!important}.cassette-error button{color:inherit;background:0 0;padding:8px 0;text-decoration:underline;display:block}.cassette-discard{background:#eee5dc;border:1px solid #d3bdad;margin-top:20px;padding:18px}.cassette-discard button{background:0 0;min-height:44px;margin-right:18px;text-decoration:underline}@media (max-width:600px){.cassette-reader{padding-inline:18px}.cassette-reader-header{gap:12px;min-height:66px}.cassette-reader-heading{margin:28px auto 18px}.cassette-upload{margin-top:24px;padding-top:22px}.cassette-upload h2{font-size:18px}.cassette-upload p{font-size:13px}.cassette-file{padding:14px}.cassette-file>div:first-child{display:block}.cassette-file span{margin-top:4px;display:block}.cassette-file video{height:190px}.cassette-reader-header:focus-visible{outline-offset:4px;outline:2px solid #526b46}.cassette-player button:focus-visible{outline-offset:4px;outline:2px solid #526b46}}.cassette-reader-header button:disabled{opacity:.4;cursor:default}:is(.cassette-reader :focus-visible,.cassette-player :focus-visible){outline:2px solid var(--focus-color,#536a55);outline-offset:4px}.cassette-cancel{min-height:44px;color:inherit;text-underline-offset:4px;background:0 0;border:0;justify-self:start;padding:8px 0;text-decoration:underline}.cassette-reader-heading>span{letter-spacing:.12em;text-transform:uppercase;font-size:10px;font-weight:500}.cassette-reader-heading h1{letter-spacing:-.045em;line-height:1.18}.cassette-reader-header a{align-items:center;min-height:44px;font-size:13px;display:inline-flex}.cassette-reader-header>div{flex-shrink:0;gap:8px}.cassette-upload h2{letter-spacing:-.025em;font-size:17px}.cassette-upload>output{color:var(--surface-muted,#77786d);font-size:13px}.cassette-error button{text-underline-offset:4px;cursor:pointer;min-height:44px}@media (hover:hover){.cassette-upload-label:hover:not(:has(input:disabled)){border-color:#77796c}}@media (max-width:600px){.cassette-reader{padding-bottom:42px}}@media (max-width:360px){.cassette-reader{padding-inline:16px}.cassette-reader-heading h1{font-size:26px}.cassette-reader-heading p{font-size:13px}.cassette-upload{align-items:flex-start}.cassette-upload-label{width:100%}.cassette-file-actions{gap:8px 14px}.cassette-file-actions .cab-primary{white-space:normal;justify-content:center;width:100%}}.cassette-reader{--font-app:var(--font-interface);--surface:#fff;--surface-ink:#111;--surface-muted:#858585;--surface-line:#e7e7e7;--surface-stage:#f3f3f1;color:#111;background:#fff}.cassette-reader-heading h1,.cassette-upload h2{letter-spacing:-.03em;font-weight:400}.cassette-reader-heading>span,.cassette-reader-header a{text-transform:uppercase;letter-spacing:0}