.record-entry{--case:80px;--record-label:url('/music/assets/covers/01.webp');position:fixed;left:clamp(18px,3vw,44px);bottom:calc(max(18px,env(safe-area-inset-bottom)) + 64px);z-index:80;display:block;width:calc(var(--case) + 24px);height:var(--case);color:#f4ff00;text-decoration:none;isolation:isolate;filter:drop-shadow(0 8px 12px #0009);transition:transform .3s}
.record-entry:hover{transform:translateY(-3px)}.record-entry:focus-visible{outline:2px solid #f4ff00;outline-offset:7px;border-radius:3px}
.record-entry-art{position:relative;display:block;width:var(--case);height:var(--case);perspective:400px}
.record-entry-sleeve{position:absolute;inset:0;overflow:hidden;border-radius:3px;border:1px solid #fff7;background:#181818;box-shadow:inset 0 0 0 3px #ffffff14,3px 3px 0 #0006;transform:rotate(-3deg);transition:transform .7s;z-index:2}
.record-entry-sleeve img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;aspect-ratio:1;opacity:0;transition:opacity 1.2s;filter:saturate(.9)}.record-entry-sleeve img.is-current{opacity:1}
.record-entry-sleeve::after{content:'';position:absolute;inset:0;background:linear-gradient(105deg,#ffffff36,#fff0 30%,#fff0 60%,#ffffff12);border-left:5px solid #ffffff21;box-shadow:inset 1px 0 0 #fff5;pointer-events:none}
.record-entry-disc{position:absolute;width:92%;height:92%;top:4%;left:25%;border-radius:50%;background:repeating-radial-gradient(circle,#101010 0 1px,#333 1px 2px,#151515 2px 3px);box-shadow:0 0 0 1px #fff3,3px 3px 6px #0008;animation:record-turn 12s linear infinite;transition:left .8s}
.record-entry-disc::before{content:'';position:absolute;inset:32%;border-radius:50%;background:var(--record-label) center/cover;border:1px solid #f4ff0066}.record-entry-disc::after{content:'';position:absolute;inset:48%;border-radius:50%;background:#e4dcc7}
.record-entry-spine{position:absolute;z-index:3;bottom:5px;left:6px;font:600 5px/1 ui-monospace,monospace;letter-spacing:.15em;background:#080808d9;color:#fffef0;padding:3px 4px;border-radius:1px;transform:rotate(-3deg)}
.record-entry.is-changing .record-entry-disc,.record-entry:hover .record-entry-disc{left:38%}.record-entry.is-changing .record-entry-sleeve{transform:rotate(-6deg) rotateY(-8deg)}
.record-entry-copy{position:absolute;left:calc(100% + 12px);top:50%;transform:translateY(-50%);white-space:nowrap;padding:8px 12px;font-size:12px;background:#101310ed;border:1px solid #f4ff0055;border-radius:4px;opacity:0;pointer-events:none;transition:opacity .2s}.record-entry:hover .record-entry-copy,.record-entry:focus-visible .record-entry-copy{opacity:1}
@keyframes record-turn{to{transform:rotate(360deg)}}
@media(max-width:600px){.record-entry{--case:64px;left:18px}.record-entry-copy{font-size:11px}}
@media(prefers-reduced-motion:reduce){.record-entry-disc{animation:none}.record-entry,.record-entry-sleeve,.record-entry-disc,.record-entry-copy,.record-entry-sleeve img{transition:none}.record-entry:hover{transform:none}}