* { box-sizing: border-box; }
:root { font-family: system-ui, sans-serif; color: #39414b; letter-spacing: 0; }
body { margin: 0; overflow: hidden; background: #e3dff7; }
.scene { position: fixed; inset: 0; overflow: hidden; }
.background { width: 100%; height: 100%; object-fit: cover; display: block; }
.music-toggle { position: absolute; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.music-toggle:focus-visible { outline: 2px solid #758294; outline-offset: -6px; background: rgb(255 255 255 / 8%); }
dialog { position: fixed; inset: 24px auto auto 24px; margin: 0; width: min(360px, calc(100vw - 48px)); max-width: none; max-height: calc(100dvh - 48px); padding: 0; border: 1px solid rgb(255 255 255 / 70%); border-radius: 8px; background: rgb(250 250 252 / 96%); color: inherit; box-shadow: 0 12px 40px rgb(46 44 67 / 14%); overflow: hidden; }
dialog[open] { display: flex; flex-direction: column; }
dialog::backdrop { background: transparent; }
header { display: flex; align-items: center; justify-content: space-between; padding: 12px 12px 12px 20px; gap: 12px; flex-shrink: 0; }
h1 { margin: 0; font-size: 16px; font-weight: 500; }
button { font: inherit; color: inherit; }
.icon-button { width: 36px; height: 36px; flex: 0 0 36px; display: inline-flex; justify-content: center; align-items: center; padding: 0; border: 0; border-radius: 4px; background: transparent; cursor: pointer; }
.icon-button:hover { background: #e9ecef; }
.icon-button:focus-visible, .track:focus-visible { outline: 2px solid #668a83; outline-offset: -2px; }
svg { width: 18px; height: 18px; stroke-width: 1.6; flex-shrink: 0; }
.tracks { overflow: auto; overscroll-behavior: contain; padding: 0 8px 8px; scrollbar-width: thin; }
.track { display: flex; align-items: center; gap: 12px; min-height: 43px; width: 100%; text-align: left; border: 0; border-radius: 4px; background: transparent; padding: 10px 12px; cursor: pointer; font-size: 14px; }
.track:hover { background: #edf0f2; }
.track[aria-pressed="true"] { background: #e0ebe6; color: #304e45; }
.track span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.track svg { width: 15px; height: 15px; opacity: 0.7; }
footer { border-top: 1px solid #e0e3e8; padding: 10px 18px 14px; flex-shrink: 0; }
.player { display: flex; align-items: center; gap: 4px; }
.play-button { background: #e0ebe6; color: #304e45; }
.volume-icon { margin-left: auto; color: #7b8590; width: 17px; }
input[type="range"] { accent-color: #6f8d82; cursor: pointer; min-width: 0; }
#volume { width: 95px; margin-left: 5px; }
#seek { width: 100%; margin: 13px 0 0; height: 12px; display: block; }
.timing { display: flex; justify-content: space-between; font-size: 11px; color: #7b8590; margin-top: 3px; font-variant-numeric: tabular-nums; }
#status { margin: 9px 0 0; font-size: 12px; color: #9b3544; }
@media (max-width: 520px) {
  .background { object-position: 65% center; }
  dialog { inset: max(12px, env(safe-area-inset-top)) auto auto 12px; width: calc(100vw - 24px); max-height: calc(100dvh - 32px); }
}