/* A persistent, collapsible record player. The audio never leaves the page. */
.bgm-widget {
  position:fixed;inset:auto auto max(20px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));
  z-index:60;display:flex;align-items:center;gap:16px;width:max-content;max-width:calc(100% - 40px);
  margin:0;padding:10px;background:var(--surface);border:1px solid var(--line);border-radius:18px;
  box-shadow:0 8px 38px #12263822,0 2px 7px #1226380c;line-height:1.5;
  transition:background-color .65s,border-color .65s,box-shadow .2s;
}
.dark .bgm-widget{box-shadow:0 12px 45px #05061766,0 0 0 1px #b5a1ef08}
.bgm-record-toggle{position:relative;display:block;flex:none;border:0;padding:0;background:none;border-radius:8px;color:var(--muted)}
.bgm-record-toggle .bgm-turntable{display:block;width:76px;height:72px;border-radius:9px;transition:box-shadow .2s}
.bgm-record-toggle:hover .bgm-turntable{box-shadow:inset 0 0 0 3px #253440,0 0 0 2px var(--gold)}
.bgm-dock-hint{position:absolute;right:5px;bottom:5px;display:flex;align-items:center;gap:2px;font:6px var(--sans);letter-spacing:.8px;color:#e3d0ad;pointer-events:none}
.bgm-dock-hint svg{width:9px;height:9px;fill:none;stroke:currentColor;stroke-width:1.5;transition:transform .25s}
.bgm-widget.is-expanded .bgm-dock-hint svg{transform:rotate(180deg)}
.bgm-record-toggle .bgm-power{right:auto;left:7px;bottom:6px}
.bgm-widget .bgm-panel{position:static;display:grid;grid-template-columns:130px 108px 138px 92px 64px;align-items:center;gap:14px;
  width:auto;max-width:none;max-height:none;overflow:visible;margin:0;padding:0 4px 0 0;background:none;border:0;border-radius:0;box-shadow:none;
  animation:dock-unfold .25s ease-out;
}
.bgm-widget .bgm-now{display:block;min-width:0}
.bgm-widget .bgm-kicker{font:7px var(--sans);letter-spacing:1.6px;margin-bottom:6px;white-space:nowrap}
.bgm-widget .bgm-now strong{display:block;font:500 18px/1.35 var(--serif);letter-spacing:.4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bgm-widget .bgm-now #bgm-status{display:block;margin-top:5px;font-size:8px;color:var(--muted);line-height:1.6;max-width:130px}
.bgm-widget .bgm-controls{display:block;margin:0}
.bgm-widget .bgm-transport{gap:4px}
.bgm-widget .bgm-transport button{width:30px;height:40px;border-radius:9px}
.bgm-widget .bgm-transport button:hover{background:var(--soft)}
.bgm-widget .bgm-transport .bgm-main{width:40px;height:40px;border-radius:50%;background:var(--navy);border:1px solid var(--gold);color:#fff}
.bgm-widget .bgm-transport .bgm-main:hover{filter:brightness(1.15)}
.bgm-widget .bgm-timeline{margin:0;min-width:0}
.bgm-widget .bgm-timeline>div{font-size:9px;margin-top:3px}
.bgm-widget .bgm-repeat{font-size:14px;color:var(--gold);line-height:1}
.bgm-widget input[type=range]{height:4px;margin:10px 0;min-width:0}
.bgm-widget .bgm-volume{display:grid;grid-template-columns:28px 1fr;gap:0 5px;align-items:center;margin:0;min-width:0}
.bgm-widget .bgm-volume>span{grid-column:2;width:auto;text-align:right;font-size:8px;line-height:1}
.bgm-tool{display:grid;place-items:center;width:32px;height:36px;flex:none;padding:7px;border:0;border-radius:8px;background:none;color:var(--muted)}
.bgm-tool:hover,.bgm-tool[aria-expanded=true]{background:var(--soft);color:var(--gold)}
.bgm-tool svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.bgm-volume .bgm-tool{width:28px;padding:5px}
.bgm-tool .sound-off{display:none}
.bgm-tool.is-muted .sound-off{display:block}
.bgm-tool.is-muted .sound-on{display:none}
.bgm-dock-actions{display:flex;border-left:1px solid var(--line);padding-left:5px}
.bgm-playlist{position:absolute;bottom:calc(100% + 12px);left:0;width:330px;max-width:calc(100vw - 40px);max-height:calc(100dvh - 132px);
  overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:17px 16px 10px;background:var(--surface);color:var(--ink);
  border:1px solid var(--line);border-radius:18px;box-shadow:0 12px 40px #12263825;animation:playlist-unfold .2s ease-out;
}
.bgm-playlist-heading{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.bgm-playlist-heading>div{flex:1;min-width:0}
.bgm-playlist-heading strong{font:500 17px var(--serif)}
.bgm-playlist-heading #bgm-count{width:auto;white-space:nowrap}
.bgm-widget .bgm-list{border-bottom:0;padding:8px 0 0}
.bgm-widget .bgm-track{padding:11px 9px;gap:10px;min-height:40px}
.bgm-widget .bgm-track[aria-current=true]{box-shadow:inset 2px 0 var(--gold)}
.bgm-widget .bgm-track strong{font-size:11px}
body>footer{padding-bottom:126px}
@keyframes dock-unfold{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
@keyframes playlist-unfold{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(max-width:960px){body>header #theme{margin-left:auto}}
@media(max-width:780px){
  .bgm-widget{left:max(12px,env(safe-area-inset-left));bottom:max(12px,env(safe-area-inset-bottom));max-width:calc(100% - 24px);gap:12px;padding:9px;border-radius:15px;align-items:flex-start}
  .bgm-widget.is-expanded{width:370px}
  .bgm-widget .bgm-panel{flex:1;min-width:0;grid-template-columns:1fr 64px;gap:12px 6px;padding:1px 0 0}
  .bgm-widget .bgm-now{grid-column:1;grid-row:1}
  .bgm-widget .bgm-now strong{font-size:17px}
  .bgm-widget .bgm-kicker{font-size:6px;letter-spacing:1.1px}
  .bgm-widget .bgm-now #bgm-status{max-width:none}
  .bgm-widget .bgm-dock-actions{grid-column:2;grid-row:1;align-self:start;border:0;padding:0}
  .bgm-widget .bgm-timeline{grid-column:1 / -1;grid-row:2}
  .bgm-widget .bgm-controls{grid-column:1;grid-row:3}
  .bgm-widget .bgm-volume{grid-column:2;grid-row:3;grid-template-columns:23px 1fr;gap:0 2px}
  .bgm-widget .bgm-volume .bgm-tool{width:23px;padding:3px}
  .bgm-widget .bgm-volume input{width:100%}
  .bgm-playlist{width:100%;max-width:calc(100vw - 24px);max-height:calc(100dvh - 245px);bottom:calc(100% + 8px)}
  body>footer{padding-bottom:220px}
}
@media(max-width:350px){
  .bgm-widget.is-expanded{gap:8px}
  .bgm-widget.is-expanded .bgm-record-toggle{width:58px;height:55px}
  .bgm-widget.is-expanded .bgm-record-toggle .bgm-turntable{transform:scale(.76);transform-origin:top left}
  .bgm-widget.is-expanded .bgm-dock-hint{display:none}
}
@media(prefers-reduced-motion:reduce){.bgm-widget .bgm-panel,.bgm-playlist{animation:none}.bgm-vinyl{animation:none!important}}