:root { color-scheme: light; --ink: #111; --muted: #6c6c6c; }
* { box-sizing: border-box; }
html, body { margin: 0; min-width: 320px; min-height: 100%; background: #fff; }
body { color: var(--ink); font-family: Arial, Helvetica, sans-serif; overflow-x: hidden; }
.player { min-height: 100svh; padding: max(2.5rem, env(safe-area-inset-top) + 1rem) max(1.5rem, 6vw) max(2.5rem, env(safe-area-inset-bottom) + 1rem); display: grid; grid-template-rows: minmax(0, 1fr) auto auto auto; align-items: center; }
.record-wrap { display: grid; place-items: center; min-height: 0; }
.record { width: min(64vw, 430px); aspect-ratio: 1; border-radius: 50%; overflow: hidden; position: relative; background: radial-gradient(circle at 50% 50%, #444 0 1%, #111 1.2% 2%, #292929 2.2% 4%, #151515 4.5% 100%); box-shadow: 0 1px 0 #ddd; transform: translateZ(0); }
.record::before { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 50%; background: repeating-radial-gradient(circle, transparent 0 10px, rgba(255,255,255,.11) 10.5px 11px, transparent 11.5px 18px); opacity: .65; pointer-events: none; }
.record img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity 2.5s ease; }
.record img.is-visible { opacity: .82; }
.record img:not([src]) { opacity: 0; }
.record-hole { position: absolute; z-index: 2; inset: 47.5%; border-radius: 50%; background: #fff; }
.track-info { width: min(100%, 760px); margin: clamp(1.5rem, 5vh, 4rem) auto 0; }
.track-info.is-transitioning { animation: track-info-in 2.5s ease both; }
@keyframes track-info-in { from { opacity: .35; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.now-playing { color: #929292; font-size: .7rem; font-weight: 700; letter-spacing: .08em; margin: 0 0 .65rem; }
.now-playing span { color: #aaa; }
.progress { display: flex; align-items: center; margin-bottom: 1.35rem; }
.progress-line { height: 6px; width: 100%; background: #d4d4d4; overflow: hidden; }
#progress-fill { display: block; height: 100%; width: 0; background: var(--ink); transform-origin: left; }
h1 { font-size: clamp(2.1rem, 9vw, 6.5rem); line-height: .92; letter-spacing: -.065em; margin: 0; text-transform: uppercase; overflow-wrap: normal; word-break: normal; hyphens: none; }
#artist { font-size: clamp(1rem, 2.5vw, 1.4rem); font-weight: 700; text-align: left; text-transform: uppercase; margin: 1rem 0 0; }
.controls { width: min(100%, 760px); margin: clamp(2rem, 8vh, 6rem) auto 0; display: flex; align-items: center; gap: .75rem; }
.volume-button { border: 0; background: transparent; color: var(--ink); cursor: pointer; }
.volume-button { width: 60px; height: 60px; padding: 6px; flex: 0 0 auto; }
.volume-button svg { width: 100%; height: 100%; fill: currentColor; }
.volume-slider { width: 0; opacity: 0; overflow: visible; transition: width .25s ease, opacity .25s ease; }
.controls.volume-open .volume-slider { width: min(320px, calc(100% - 75px)); opacity: 1; }
input[type=range] { display: block; width: 100%; height: 16px; margin: 0; accent-color: var(--ink); cursor: pointer; }
.status { min-height: 1.2em; color: var(--muted); font-size: .82rem; text-align: center; margin: 1rem 0 0; }
.social-links { width: min(100%, 760px); display: flex; flex-wrap: wrap; gap: .35rem 1rem; margin: 1rem auto 0; }
.social-links a { color: #888; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-decoration: none; text-transform: uppercase; }
.social-links a:hover, .social-links a:focus-visible { color: var(--ink); text-decoration: underline; }
.start-overlay { position: fixed; z-index: 10; inset: 0; width: 100%; height: 100%; border: 0; padding: max(2rem, env(safe-area-inset-top)) max(1.5rem, 6vw) max(2rem, env(safe-area-inset-bottom)); display: grid; place-items: center; background: rgba(145, 137, 137, .72); color: #fff; cursor: pointer; text-align: left; }
.start-overlay span { width: min(100%, 680px); font-size: clamp(3.3rem, 13vw, 9rem); font-weight: 800; line-height: .88; letter-spacing: -.08em; }
.start-overlay.is-hidden { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
button:focus-visible, input:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
@media (orientation: landscape) and (max-height: 600px) { .player { grid-template-columns: 40% 60%; grid-template-rows: 1fr auto auto; gap: 0 2rem; } .record { width: min(38vw, 300px); } .track-info { margin: 0; } .controls { margin: 1rem 0 0; } .social-links { grid-column: 2; } .status { grid-column: 1 / -1; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .001ms !important; } }