.music-controls{position:relative;display:flex;align-items:center;flex-shrink:0;gap:1px;padding:3px 2px 3px 7px;border:1px solid #c5b47826;border-radius:8px;background:#d6c48207;color:#cec9af}
.music-toggle{display:flex;align-items:center;gap:5px;min-height:28px;padding:0 3px 0 0;border:0;background:none;color:inherit;font:inherit;font-size:10px;white-space:nowrap;cursor:pointer}
.music-note{color:#d4c080;font-size:18px;line-height:1;transition:color .2s}
.music-controls.is-playing .music-note{color:#e6d294;text-shadow:0 0 9px #d8c98945}
.music-controls.is-muted .music-note{color:#838c7f;text-shadow:none}
.music-controls.is-muted .music-toggle-label{color:#909887}
.music-settings{position:relative}
.music-settings>summary{display:grid;place-items:center;width:21px;height:28px;list-style:none;border-radius:5px;color:#a6ab96;cursor:pointer;font-size:16px;user-select:none}
.music-settings>summary::-webkit-details-marker{display:none}
.music-settings>summary:hover,.music-settings[open]>summary{background:#bca97018;color:#e6d398}
.music-toggle:focus-visible,.music-settings>summary:focus-visible,.music-slider:focus-visible{outline:2px solid #dcc888;outline-offset:3px}
.music-popover{position:absolute;z-index:80;top:calc(100% + 13px);right:-6px;width:220px;padding:16px;border:1px solid #c6b47a60;border-radius:12px;background:linear-gradient(145deg,#27382b,#17231b);box-shadow:0 12px 34px #0008;text-align:left}
.music-popover:before{position:absolute;right:12px;top:-5px;width:8px;height:8px;transform:rotate(45deg);border-left:1px solid #c6b47a60;border-top:1px solid #c6b47a60;background:#233328;content:''}
.music-popover-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:11px;color:#e5dec2;font-size:11px}
.music-volume-value{color:#dbc68d;font-variant-numeric:tabular-nums;font-size:10px}
.music-slider{display:block;width:100%;height:20px;margin:0;accent-color:#d4bf7f;cursor:pointer}
.music-status{margin:10px 0 6px;color:#b6c6a8;font-size:10px;line-height:1.6}
.music-popover>small{display:block;padding-top:9px;border-top:1px solid #e0d19714;color:#8c9a86;font-size:8px;line-height:1.6}
@media(max-width:1200px){.top-actions{gap:12px}.music-controls{padding-left:6px}.music-toggle{font-size:9px;gap:4px}}
@media(max-width:560px){.topbar .top-actions{gap:5px;flex-wrap:wrap;padding-top:5px;padding-bottom:5px}.topbar{height:auto;min-height:50px}.music-controls{border-radius:6px;padding:1px 1px 1px 5px}.music-toggle{min-height:25px;font-size:9px;gap:3px}.music-note{font-size:15px}.music-settings>summary{width:16px;height:25px;font-size:13px}.music-popover{width:210px;right:-42px;top:calc(100% + 12px)}.music-popover:before{right:47px}.top-actions .sound-button{padding-left:1px;padding-right:1px;font-size:9px}.top-actions .sound-button>span:first-child{font-size:15px}.top-actions .account-button{padding-left:6px;gap:4px}.music-popover-heading{font-size:12px}.music-slider{height:28px}}
@media(prefers-reduced-motion:reduce){.music-note{transition:none}}