body{min-height:100vh;margin:0;font-family:system-ui,sans-serif}.text-bg{z-index:-1;color:#0e130f;-webkit-user-select:none;user-select:none;background:#0a0f0c;font-family:Anton,Arial,Helvetica,sans-serif;font-weight:400;position:fixed;inset:0;overflow:hidden}.text-bg-row{white-space:nowrap;gap:var(--word-gap);margin-bottom:var(--row-gap);letter-spacing:.02em;font-size:1.8rem;line-height:1;display:flex}.player{--art-fade:.7s;color:#e8e8e8;flex-direction:column;align-items:center;gap:2rem;font-family:Space Mono,ui-monospace,monospace;display:flex}.player-cover-shadow{cursor:pointer;background:0 0;border:none;border-radius:50%;width:50vmin;height:50vmin;padding:0;position:relative;box-shadow:0 0 0 1px #0006,0 1.5rem 3rem #0009}.player-cover-shadow:focus-visible{outline-offset:6px;outline:2px solid #e8e8e8}.player-cover-windup{width:100%;height:100%;animation:2.5s cubic-bezier(.333,0,.667,.333) forwards windup}.player-cover{background-color:#070707;background-image:radial-gradient(circle closest-side,#101010 0 13%,#0000 13.5%);border-radius:50%;width:100%;height:100%;animation:16s linear 2.5s infinite spin;position:relative;-webkit-mask-image:radial-gradient(circle,#0000 0 2%,#000 2.5% 100%);mask-image:radial-gradient(circle,#0000 0 2%,#000 2.5% 100%)}.player-cover-art{z-index:1;background-position:50%;background-size:cover;border-radius:50%;position:absolute;inset:0}.player-cover-art[data-in=true]{animation:art-in var(--art-fade) ease forwards}.player-cover-art[data-out=true]{animation:art-out var(--art-fade) ease forwards}@keyframes art-in{0%{opacity:0}to{opacity:1}}@keyframes art-out{0%{opacity:1}to{opacity:0}}.player-cover[data-empty=true]{box-shadow:inset 0 0 0 1px #ffffff0f}.player-cover-windup,.player-cover{animation-play-state:paused}.player-cover-windup[data-spinning=true],.player-cover-windup[data-spinning=true] .player-cover{animation-play-state:running}.player-cover-transport{color:#e8e8e8;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:0;pointer-events:none;background:#0505059e;border-radius:50%;justify-content:center;align-items:center;width:22%;height:22%;transition:opacity .25s;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.player-cover-transport svg{width:45%;height:45%}.player-cover-transport[data-idle=true],.player-cover-shadow:hover .player-cover-transport,.player-cover-shadow:focus-visible .player-cover-transport{opacity:1}.player-cover:before{content:"";z-index:2;pointer-events:none;background:repeating-radial-gradient(circle closest-side,#0003 0 1px,#ffffff0a 1px 2px,#00000014 2px 3.5px);border-radius:50%;position:absolute;inset:0;-webkit-mask-image:radial-gradient(circle closest-side,#0000 0 12%,#000 15% 93%,#0000 97%);mask-image:radial-gradient(circle closest-side,#0000 0 12%,#000 15% 93%,#0000 97%)}.player-cover-hole{z-index:3;background:#050505;border-radius:50%;width:10%;height:10%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:inset 0 2px 4px #000000e6,0 1px 1px #ffffff14}@keyframes spin{to{transform:rotate(360deg)}}@keyframes windup{to{transform:rotate(28.125deg)}}.player-info{text-align:center;max-width:min(90vw,34rem)}.player-title{letter-spacing:.03em;text-transform:uppercase;overflow-wrap:anywhere;font-family:Anton,Arial,Helvetica,sans-serif;font-size:clamp(1.5rem,6vw,2.4rem);line-height:1.1}.player-artist{color:#999;letter-spacing:.05em;text-transform:uppercase;margin-top:.4rem;font-size:1rem}.player-progress{align-items:center;gap:1rem;width:min(62vmin,420px);display:flex}.player-time{color:#999;text-align:center;font-variant-numeric:tabular-nums;width:3rem;font-size:.85rem}.player-bar{background:#3a3a3a;border-radius:2px;flex:1;height:4px;position:relative}.player-bar-fill{background:#e8e8e8;border-radius:2px;height:100%;transition:width .25s linear}.player-bar:after{content:"";pointer-events:none;opacity:0;border-radius:2px;position:absolute;inset:0}.player-progress[data-status=connecting] .player-bar:after{opacity:1;background:linear-gradient(90deg,#0000,#e8e8e88c,#0000) 0 0/40% 100% no-repeat;animation:1.2s ease-in-out infinite sweep}.player-progress[data-status=error] .player-bar-fill{background:#b3872f;animation:1s ease-in-out infinite pulse}.player-progress[data-status=error] .player-time{color:#b3872f}.player-progress[data-timeline=false] .player-time{color:#5a5a5a}.player-progress[data-timeline=false] .player-bar{background:#2a2a2a}@keyframes sweep{0%{background-position:-40% 0}to{background-position:140% 0}}@keyframes pulse{50%{opacity:.3}}.player-volume{align-items:center;gap:.75rem;width:min(40vmin,220px);display:flex}.player-volume-btn{color:#999;cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;padding:0;transition:color .15s;display:flex}.player-volume-btn:hover{color:#e8e8e8}.player-volume-btn svg{width:1.25rem;height:1.25rem}.player-volume-slider{appearance:none;background:linear-gradient(to right, #e8e8e8 0 var(--level), #3a3a3a var(--level) 100%);cursor:pointer;border-radius:2px;flex:1;height:4px}.player-volume-slider::-webkit-slider-thumb{-webkit-appearance:none;background:#e8e8e8;border:none;border-radius:50%;width:10px;height:10px}.player-volume-slider::-moz-range-thumb{background:#e8e8e8;border:none;border-radius:50%;width:10px;height:10px}@media (prefers-reduced-motion:reduce){.player-cover-windup[data-spinning=true],.player-cover-windup[data-spinning=true] .player-cover,.player-progress[data-status=connecting] .player-bar:after,.player-progress[data-status=error] .player-bar-fill{animation:none}.player-progress[data-status=connecting] .player-bar:after{background:#e8e8e840}}.player-wrap{justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.footer{color:#2d2d2d;letter-spacing:.05em;text-transform:uppercase;flex-wrap:wrap;justify-content:center;align-items:center;gap:.6rem;font-family:Space Mono,ui-monospace,monospace;font-size:.75rem;display:flex;position:fixed;bottom:.75rem;left:0;right:0}.footer-link{color:inherit;text-decoration:none;transition:color .15s}.footer-link:hover{color:#999}.footer-sep{opacity:.5}