.music-player{left:50%;right:auto;bottom:16px;transform:translateX(-50%);width:min(620px,calc(100% - 32px));max-width:none;padding:10px 14px;border-radius:12px;background:#10201dea;border:1px solid #ffffff1a;box-shadow:0 6px 28px #0003;backdrop-filter:blur(22px);color:#f3f1e7}
.music-shell{display:grid;grid-template-columns:40px minmax(115px,1fr) 190px 75px 16px;align-items:center;gap:13px}
.music-cover{width:40px;height:40px;display:grid;place-items:center;border-radius:6px;background:linear-gradient(#18392b55,#0d251b66),url('assets/natal-hero-real.png') 80% 60%/cover;color:#e8cd92;font-size:24px}
.music-track{display:flex;flex-direction:column-reverse;gap:3px;min-width:0}
.music-track label{font-size:9px;letter-spacing:0;color:#9baaa2;margin:0;white-space:nowrap}
.music-track select{font-size:12px;font-weight:500;color:#f1f1e7;max-width:100%;text-overflow:ellipsis;line-height:1.4;outline-offset:3px}
.music-track select option{background:#10201d}
.music-buttons{display:flex;align-items:center;justify-content:center;gap:17px}
.music-buttons button{border:0;background:none;color:#b6c0b9;font-size:22px;line-height:1;padding:0 3px;cursor:pointer}
.music-buttons .music-play{width:26px;height:26px;border:0;border-radius:50%;background:#f1f2e8;color:#14271e;font-size:13px;display:grid;place-items:center;padding:0;transition:transform .2s}
.music-play:hover{transform:scale(1.08)}
.music-timeline{display:flex;align-items:center;gap:7px;margin-top:5px}
.music-timeline span{font-size:8px;color:#a7b2ab;font-variant-numeric:tabular-nums;line-height:1}
.music-progress{appearance:none;-webkit-appearance:none;width:100%;height:3px;min-width:0;border:0;border-radius:8px;background:linear-gradient(to right,#b7c895 var(--played,0%),#ffffff2b var(--played,0%));margin:0;cursor:pointer}
.music-progress::-webkit-slider-thumb{appearance:none;width:7px;height:7px;border-radius:50%;background:#d9e5c4}
.music-progress::-moz-range-thumb{width:7px;height:7px;border:0;border-radius:50%;background:#d9e5c4}
.music-volume{margin-left:0;gap:7px;color:#9baaa2;font-size:18px}
.music-volume input{width:48px;height:3px;accent-color:#b7c895}
.music-close{padding:0;font-size:17px;color:#8d9d93;align-self:center}
.music-status{font-size:9px;text-align:center;margin:5px 0 0;color:#d8c79e}
@media(max-width:600px){.music-player{left:50%;bottom:12px;width:calc(100% - 24px);max-width:520px;padding:10px 11px;border-radius:10px}.music-shell{grid-template-columns:32px minmax(80px,1fr) 108px 40px 12px;gap:8px}.music-cover{width:32px;height:36px;font-size:20px}.music-track select{font-size:11px}.music-track label{font-size:8px}.music-buttons{gap:12px}.music-buttons .music-play{width:24px;height:24px;font-size:12px}.music-buttons button{font-size:20px}.music-timeline{margin-top:5px}.music-timeline span{display:none}.music-volume{gap:0}.music-volume>span{display:none}.music-volume input{width:36px}.music-close{font-size:16px}}
@media(max-width:360px){.music-shell{grid-template-columns:28px minmax(70px,1fr) 86px 12px;gap:7px}.music-cover{width:28px;height:32px}.music-volume{display:none}.music-buttons{gap:9px}}