body { padding-bottom: 176px; }
.record-player { position: fixed; z-index: 20; right: 24px; bottom: 24px; width: 96px; height: 96px; border: 0; padding: 0; border-radius: 50%; background: transparent; }
.record-turntable { position: relative; width: 100%; height: 100%; border-radius: 50%; }
.record-platter { position: absolute; inset: 0; border-radius: 50%; background: repeating-radial-gradient(circle,#111c24 0 1px,#2d3a43 1.4px 2px,#18252e 2.5px 3.4px); box-shadow: 0 5px 16px #0e243546, inset 0 0 0 2px #405159; overflow: hidden; animation: record-spin 12s linear infinite; animation-play-state: paused; }
.record-shine { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 20deg,transparent 0deg,#ffffff25 30deg,transparent 60deg,transparent 175deg,#ffffff1a 205deg,transparent 240deg); }
.record-label { position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; transform: translate(-50%,-50%); border: 3px solid #e8cd8e; border-radius: 50%; object-fit: cover; object-position: 28% 40%; }
.record-toggle { position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%,-50%); display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 2px solid #fff5dc; border-radius: 50%; background: #efd495; color: #223e35; box-shadow: 0 2px 8px #10243340; cursor: pointer; }
.record-toggle:hover { background: #ffe5ab; }
.record-toggle:focus-visible { outline: 3px solid #edc568; outline-offset: 5px; }
.record-play-icon { margin-left: 1px; }
.record-pause-icon, .record-loading-icon { display: none; }
.record-player[data-state="playing"] .record-platter { animation-play-state: running; }
.record-player[data-state="playing"] .record-play-icon, .record-player[data-state="loading"] .record-play-icon { display: none; }
.record-player[data-state="playing"] .record-pause-icon { display: block; }
.record-player[data-state="loading"] .record-loading-icon { display: block; width: 19px; height: 19px; border: 2px solid #29423844; border-top-color: #294238; border-radius: 50%; animation: record-spin .8s linear infinite; }
.record-player[data-state="error"] .record-toggle { border-color: #d58c72; }
.record-volume-dock { position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 7px; width: 112px; height: 42px; padding: 0 9px; color: #58704e; background: #fff8e8f2; border: 1px solid #e3d2ab; border-radius: 999px; box-shadow: 0 3px 12px #1933451c; backdrop-filter: blur(8px); }
.record-volume-dock svg { flex: 0 0 15px; }
.record-volume { --volume-fill: 25%; flex: 1; min-width: 0; width: 100% !important; height: 44px !important; margin: 0 !important; padding: 0; accent-color: #8e713c; }
.record-volume::-webkit-slider-runnable-track { height: 4px !important; border-radius: 6px; background: linear-gradient(to right,#977542 0 var(--volume-fill),#c6d0b9 var(--volume-fill) 100%) !important; }
.record-volume::-webkit-slider-thumb { width: 14px !important; height: 14px !important; margin-top: -5px !important; border: 2px solid #fff8e7 !important; background: #8a6c38 !important; box-shadow: 0 1px 3px #263e3526; }
.record-volume::-moz-range-track { height: 4px !important; border-radius: 6px; background: #c6d0b9 !important; }
.record-volume::-moz-range-progress { height: 4px; border-radius: 6px; background: #977542; }
.record-volume::-moz-range-thumb { width: 11px !important; height: 11px !important; border: 2px solid #fff8e7 !important; background: #8a6c38 !important; }
.record-volume:focus-visible { outline: 2px solid #8a6c38; outline-offset: 2px; border-radius: 6px; }
.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; }
.music-credits { grid-column: 1 / -1; max-width: 900px; color: #536147; font-size: 14px; line-height: 1.8; }
.music-credits a { text-decoration: underline; text-underline-offset: 3px; }
@keyframes record-spin { to { transform: rotate(360deg); } }
@media (max-width: 760px) {
  body { padding-bottom: 160px; }
  .record-player { width: 78px; height: 78px; right: 18px; bottom: max(18px,env(safe-area-inset-bottom)); }
  .record-label { width: 56px; height: 56px; }
  .record-volume-dock { width: 100px; height: 40px; gap: 5px; padding-inline: 8px; }
}
@media (prefers-reduced-motion: reduce) { .record-platter,.record-loading-icon { animation: none !important; } }