.bgm-control{position:fixed;right:max(18px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));z-index:150;display:flex;align-items:center;gap:11px;min-width:157px;padding:10px 12px;border:1px solid rgba(157,217,226,.46);background:linear-gradient(145deg,rgba(12,31,43,.95),rgba(7,17,27,.96));box-shadow:0 10px 36px rgba(0,0,0,.35),inset 0 1px rgba(209,250,252,.09);backdrop-filter:blur(14px);color:#e4f6f5;text-align:left;cursor:pointer;transition:border-color .25s,background .25s,transform .25s}
.bgm-control:hover{border-color:#c6f5f5;background:linear-gradient(145deg,rgba(24,60,73,.98),rgba(9,27,39,.98));transform:translateY(-2px)}
.bgm-control:focus-visible{outline:2px solid #c6f5f5;outline-offset:3px}
.bgm-control:disabled{cursor:not-allowed;opacity:.55;transform:none}
.bgm-icon{display:grid;place-items:center;flex:none;width:30px;height:30px;border:1px solid rgba(160,222,229,.36);color:#b7e9ee}
.bgm-icon svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.bgm-icon .bgm-slash{opacity:0;transition:opacity .2s}
.bgm-control[data-state="muted"] .bgm-slash,.bgm-control[data-state="paused"] .bgm-slash{opacity:1}
.bgm-copy{display:grid;gap:3px;min-width:0;flex:1}
.bgm-copy b{font:500 11px/1.2 var(--sans,Arial,sans-serif);letter-spacing:.1em}
.bgm-copy small{font:400 9px/1.2 var(--sans,Arial,sans-serif);letter-spacing:.04em;color:#91b9c2;white-space:nowrap}
.bgm-bars{display:flex;align-items:end;justify-content:center;gap:2px;width:13px;height:15px;color:#9edee5}
.bgm-bars i{width:2px;height:5px;background:currentColor;animation:bgm-meter .72s ease-in-out infinite alternate}
.bgm-bars i:nth-child(2){height:12px;animation-duration:.56s;animation-delay:-.3s}
.bgm-bars i:nth-child(3){height:8px;animation-duration:.91s;animation-delay:-.5s}
.bgm-control:not([data-state="playing"]) .bgm-bars i{animation:none;height:2px;opacity:.5}
@keyframes bgm-meter{to{height:14px}}
@media(max-width:620px){.bgm-control{right:12px;bottom:12px;min-width:0;padding:9px}.bgm-copy{display:none}.bgm-bars{width:11px}}
@media(prefers-reduced-motion:reduce){.bgm-bars i{animation:none!important;height:7px}.bgm-control{transition:none}}
.bgm-next{position:fixed;right:calc(max(18px,env(safe-area-inset-right)) + 184px);bottom:max(18px,env(safe-area-inset-bottom));z-index:150;width:72px;height:52px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;border:1px solid rgba(157,217,226,.46);background:linear-gradient(145deg,rgba(12,31,43,.95),rgba(7,17,27,.96));box-shadow:0 10px 36px rgba(0,0,0,.28);backdrop-filter:blur(14px);color:#d6f2f2;cursor:pointer;transition:border-color .25s,background .25s,transform .25s}
.bgm-next:not(:disabled):hover{border-color:#c6f5f5;background:#1a3c49;transform:translateY(-2px)}
.bgm-next:focus-visible{outline:2px solid #c6f5f5;outline-offset:3px}
.bgm-next:disabled{cursor:not-allowed;opacity:.55;transform:none}
.bgm-next>span{font:25px/1 Arial,sans-serif}
.bgm-next small{font:9px/1 Arial,sans-serif;letter-spacing:.03em;color:#91b9c2;white-space:nowrap}
.bgm-next small b{font-weight:400;color:#d6f2f2}
@media(max-width:620px){.bgm-next{right:90px;bottom:12px;width:58px;height:50px}}
@media(prefers-reduced-motion:reduce){.bgm-next{transition:none}}