.song-control { position: absolute; left: 35%; bottom: 10%; z-index: 98; }
.song-control[hidden] { display: none; }
.song-toggle { width: 48px; height: 48px; border: 0; padding: 4px; background: transparent; color: #d0be92; cursor: pointer; }
.song-toggle svg { width: 100%; height: 100%; filter: drop-shadow(0 3px 4px #132b32aa); transition: filter .8s; }
.song-toggle:hover svg,.song-toggle:focus-visible svg,.song-toggle[data-playing="true"] svg { filter: drop-shadow(0 0 6px #e8ce9666); }
.song-toggle:focus-visible { outline: 1px solid #e8ce96; border-radius: 8px; outline-offset: 4px; }
.song-panel { width: min(420px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 38px 32px 28px; border: 1px solid #a2926940; border-radius: 10px 26px 10px 18px; color: #e8deca; background: radial-gradient(ellipse at 0 0,#59645555,transparent 65%),#203b36; box-shadow: 0 25px 80px #071d2580; overflow: auto; font-family: Georgia,serif; }
.song-panel::backdrop { background: #0c202b80; }
.song-close { display: block; margin: -24px -16px 20px auto; padding: 12px; min-height: 44px; }
.song-panel button { cursor: pointer; font: inherit; color: inherit; }
.song-close,.song-mute { border: 0; background: transparent; font-size: .8rem !important; }
.song-close span { margin-left: 8px; font-size: 1.1rem; }
.song-eyebrow { color: #c2b48d; font: .7rem system-ui,sans-serif; letter-spacing: .13em; text-transform: uppercase; }
.song-title { margin: 12px 0 22px; font-size: 2rem; font-weight: 400; }
.song-title:focus { outline: none; }
.song-note { margin: 0 0 28px; line-height: 1.8; font-size: 1rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.song-player { display: flex; align-items: center; gap: 20px; padding-top: 22px; border-top: 1px solid #bfb08930; }
.song-play { padding: 12px 24px; min-height: 44px; border: 1px solid #b8a98280; border-radius: 24px; background: #64725b40; }
.song-play:disabled { opacity: .6; cursor: wait; }
.song-time { color: #bdc5b5; font: .75rem system-ui,sans-serif; font-variant-numeric: tabular-nums; }
.song-volume-row { display: flex; gap: 12px; align-items: center; margin-top: 20px; font: .75rem system-ui,sans-serif; }
.song-volume { min-width: 0; flex: 1; min-height: 44px; accent-color: #c7b583; cursor: pointer; }
.song-volume-value { min-width: 4ch; text-align: right; }
.song-mute { min-height: 44px; padding: 8px 0; color: #c9bc99 !important; }
.song-panel button:focus-visible,.song-volume:focus-visible { outline: 2px solid #d8c79a; outline-offset: 4px; }
.song-status { margin: 0; font: .8rem/1.5 system-ui,sans-serif; color: #e6c2a9; }
.song-status:empty { display: none; }
@media (max-width:720px) and (orientation:portrait) { .song-control { left: 20%; bottom: 8%; } }
@media (prefers-reduced-motion:reduce) { .song-toggle svg { transition: none; } }