.tracks{grid-template-columns:repeat(auto-fit,minmax(235px,1fr))!important;gap:18px!important;align-items:start}
.tracks article.cassette-player{position:relative;overflow:hidden;padding:17px;background:linear-gradient(145deg,#fffdfa,#f3efe7);color:#35485a;border:1px solid #d9d1c3;border-radius:18px;box-shadow:0 13px 30px #263b4c12}
.cassette-player .track-heading{margin-bottom:7px;gap:8px}.cassette-player .music-icon{display:none}.cassette-player h2{max-width:none;margin:0;font:20px/1.2 Georgia,serif;color:#304a61}.cassette-player>p{min-height:0;margin:0 0 9px;color:#687987;font-size:13px;line-height:1.45}.cassette-player .sound-bars{flex-shrink:0;transform:scale(.82);transform-origin:right center}
.cassette-bay{position:relative;overflow:hidden;margin:9px auto 11px;padding:5px 8px 18px;max-width:230px;border:1px solid #d5cbbb;border-radius:13px;background:linear-gradient(160deg,#e8e2d9,#fbfaf7 45%,#d9d5ce);box-shadow:inset 0 4px 13px #7d74651c,0 7px 16px #394c5d13}
.cassette-tape{position:relative;width:100%;transform:translateY(-5px) scale(.95);transform-origin:center;transition:transform .72s cubic-bezier(.2,.8,.3,1),filter .72s}
.cassette-tape>img{display:block;width:100%;height:auto;border-radius:8px;opacity:.97;filter:saturate(.9) contrast(.98)}
.cassette-label{position:absolute;top:18%;left:19%;right:19%;display:grid;grid-template-columns:40px minmax(0,1fr);grid-template-rows:auto auto;align-items:center;column-gap:5px;text-align:left;color:#3d403e;pointer-events:none;transform:rotate(-.25deg)}
.cassette-brand{grid-row:1/3;position:relative;display:grid;place-items:center;width:40px;height:28px;overflow:hidden;border-right:1px solid #8094a257;padding-right:4px}
.cassette-brand img{display:block;width:36px!important;height:auto!important;max-height:23px;object-fit:contain;filter:saturate(1.15) contrast(1.05);animation:json-cassette-reveal 4.8s steps(6,end) infinite}
.cassette-label strong{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:700 10px/1.1 "Courier New",monospace;letter-spacing:-.02em;color:#374352}
.cassette-label small{display:block;margin-top:2px;font:700 6.5px/1.1 Arial,sans-serif;letter-spacing:.09em;color:#866849}
.tape-inserted .cassette-tape{transform:translateY(5px) scale(.91);filter:brightness(.94)}.tape-loading .cassette-tape{animation:tape-slide-in .9s cubic-bezier(.2,.8,.3,1) both}
.cassette-indicator{position:absolute;bottom:5px;left:0;right:0;text-align:center;color:#64766e;font:700 8px/1.3 Arial,sans-serif;letter-spacing:.13em}
.cassette-player .compact-player{margin:9px 0 11px;padding:8px;gap:7px;background:#e8e5de;border:1px solid #d1cabf;border-radius:9px;box-shadow:inset 0 2px 5px #6c675918}
.cassette-player .tape-key,.cassette-player .tape-rewind{display:grid;place-items:center;width:36px;height:36px;flex:0 0 36px;padding:0;border:1px solid #d1c6b3;border-radius:7px;background:linear-gradient(#fffdf6,#ded8cc);color:#344b5c;box-shadow:0 3px 0 #aba598;font-size:16px}
.cassette-player.playing .tape-key{transform:translateY(2px);box-shadow:0 1px 0 #aba598}.cassette-player .track-times{font-size:10px;color:#63717c}.cassette-player .track-progress{accent-color:#6187a8}.cassette-player .download{display:block;padding:8px 10px;color:#3e5a70;background:#f8f5ee;border-color:#d5ccbe;font-size:12px;text-align:center}.cassette-player .download:hover{background:#e6eef2}.cassette-player.playing{border-color:#8ba6ba;box-shadow:0 15px 32px #426d8a20}
@keyframes tape-slide-in{0%{transform:translateY(-18px) scale(.98);filter:brightness(1)}65%{transform:translateY(8px) scale(.92)}100%{transform:translateY(5px) scale(.91);filter:brightness(.94)}}
@keyframes json-cassette-reveal{0%,8%{clip-path:inset(0 100% 0 0);opacity:.2;filter:saturate(1.15) contrast(1.05) blur(1px)}28%,68%{clip-path:inset(0 0 0 0);opacity:1;filter:saturate(1.15) contrast(1.05) blur(0)}82%,100%{clip-path:inset(0 0 0 100%);opacity:.18}}
@media(max-width:650px){.tracks{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}.tracks article.cassette-player{padding:11px;border-radius:14px}.cassette-player h2{font-size:16px}.cassette-player>p{display:none}.cassette-bay{padding:4px 5px 15px;margin:7px auto 8px}.cassette-label{left:17%;right:17%;grid-template-columns:31px minmax(0,1fr)}.cassette-brand{width:31px;height:22px}.cassette-brand img{width:28px!important;max-height:18px}.cassette-label strong{font-size:8px}.cassette-label small{font-size:5.5px}.cassette-player .compact-player{padding:6px;gap:5px}.cassette-player .tape-key,.cassette-player .tape-rewind{width:31px;height:32px;flex-basis:31px}.cassette-player .playback-detail{min-width:0}.cassette-player .download{font-size:10px;padding:7px 5px}}
@media(max-width:390px){.tracks{grid-template-columns:1fr!important}.cassette-bay{max-width:215px}}
@media(prefers-reduced-motion:reduce){.cassette-tape,.tape-inserted .cassette-tape,.tape-loading .cassette-tape,.cassette-brand img{animation:none!important;transition:none!important}.cassette-brand img{clip-path:none!important;opacity:1!important}}