.bg-music{position:fixed;left:18px;bottom:18px;z-index:21;display:flex;align-items:center;gap:13px;width:310px;max-width:calc(100vw - 36px);padding:14px 16px;background:#151711f5;border:1px solid #545d46;border-radius:12px;box-shadow:0 8px 30px #0004;backdrop-filter:blur(14px);color:#f3f4ed}
.bg-music #bg-play{flex:none;display:grid;place-items:center;width:42px;height:42px;border:1px solid var(--accent);border-radius:50%;background:var(--accent);color:#111210;font-size:18px;cursor:pointer;transition:background .2s,scale .2s}
.bg-music #bg-play:hover{scale:1.07}.bg-music #bg-play[aria-pressed="true"]{background:transparent;color:var(--accent)}
.bg-track{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}.bg-track strong{font-size:14px;letter-spacing:.5px}.bg-track>span{font-size:12px;color:#b3bca5;line-height:1.5}
.bg-settings summary{font-size:14px;cursor:pointer;list-style:none;padding:10px 0}.bg-settings summary::-webkit-details-marker{display:none}.bg-settings[open] summary{color:var(--accent)}.bg-settings-panel{position:absolute;bottom:calc(100% + 12px);right:0;width:230px;padding:18px;background:#151711;border:1px solid #545d46;border-radius:12px;box-shadow:0 8px 30px #0004}.bg-settings-panel label{display:flex;justify-content:space-between;font-size:14px}.bg-settings-panel input{display:block;width:100%;height:28px;margin:12px 0;accent-color:var(--accent);cursor:pointer}.bg-settings-panel>span{font-size:12px;color:#b3bca5}
.bg-timeline{position:absolute;bottom:0;left:12px;right:12px;height:2px;overflow:hidden;background:#414735}.bg-timeline>div{width:100%;height:100%;background:var(--accent);transform:scaleX(var(--play-progress,0));transform-origin:left}
.bg-music :focus-visible{outline:2px solid var(--accent);outline-offset:4px}footer{padding-bottom:112px}
@media(max-width:600px){.bg-music{left:12px;bottom:12px;width:calc(100vw - 24px);max-width:none;padding:12px 14px}.motion-toggle{bottom:103px}.bg-settings-panel{right:0}footer{padding-bottom:170px}}