/* Cassette player from Oleg's red cassette: the shell is the plate, the hubs rotate, the tape packs breathe. Small keys under the cassette. */
.tape-stage{position:relative;max-width:980px;margin:0 auto}
.tape{position:relative;aspect-ratio:1536/1024;width:100%;overflow:hidden;background:#000;user-select:none;-webkit-user-select:none;touch-action:manipulation}
.tape>*{position:absolute;display:block}
.tape img{pointer-events:none;-webkit-user-drag:none}
.tape .plate{left:0;top:0;width:100%;height:100%}
.tape .pack{mix-blend-mode:multiply;opacity:.8;transform-origin:50% 50%;will-change:transform,width,height}
.tape .hub{transform-origin:50% 50%;will-change:transform}
.tape .lamp{pointer-events:none;border-radius:50%;background:radial-gradient(closest-side,rgba(255,120,60,.22),rgba(255,120,60,0));opacity:0;transition:opacity .5s}
.tape.playing .lamp{opacity:1}
.tape-keys{display:flex;justify-content:center;gap:6px;padding:18px 0 6px}
.tape-keys button{appearance:none;font:600 10px/1 ui-monospace,Menlo,monospace;letter-spacing:.14em;color:#9a9a9a;background:linear-gradient(#1c1c1c,#0f0f0f);border:1px solid #2a2a2a;border-bottom-color:#050505;border-radius:2px;min-width:56px;height:30px;padding:0 10px;cursor:pointer;box-shadow:0 2px 0 #000,0 3px 6px rgba(0,0,0,.6);transition:transform .08s,box-shadow .08s,color .2s}
.tape-keys button:active,.tape-keys button.down{transform:translateY(2px);box-shadow:0 0 0 #000,inset 0 2px 4px rgba(0,0,0,.7);color:#f1f1f1}
.tape-keys button.lit{color:#f1f1f1}
.tape-meta{display:flex;justify-content:space-between;gap:16px;font:500 12px/1.4 ui-monospace,Menlo,monospace;letter-spacing:.06em;color:#8c8c8c;padding:8px 0 14px}
.tape-meta b{font-weight:600;color:#f1f1f1}
@media (prefers-reduced-motion:reduce){.tape .hub,.tape .pack{transition:none}}