/* Copyright (c) 2026 Clancy. Based on Serenity-Grace, Copyright (c) 2026 Serenity (https://github.com/atangccc/Serenity-Grace). Licensed under GPL-3.0 (see LICENSE). */
.nav-music [hidden],.music-panel [hidden]{display:none!important}.nav-music{position:absolute;left:25px;top:25px;z-index:2;flex-shrink:0}.nav-music-btn{position:relative;width:22px;height:22px;padding:0;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.34);border-radius:50%;background:#1d2030;color:color-mix(in srgb,var(--color-accent) 62%,#ffffff);cursor:pointer;transition:background var(--duration-fast, .2s),color var(--duration-fast, .2s),border-color var(--duration-fast, .2s),transform var(--duration-fast, .2s)}.nav-music-btn:after{content:"";position:absolute;inset:-6px}.nav-music-btn:hover{background:color-mix(in srgb,var(--color-accent) 40%,#eef2ef);border-color:transparent;color:#1a1c26}.nav-music-btn:active{transform:scale(.92)}.nav-music-btn:focus-visible{outline:2px solid var(--btn-ring);outline-offset:2px}.nav-music-icon{width:11px;height:11px}.nav-music-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border-radius:inherit;opacity:0;pointer-events:none;transition:opacity var(--dur-1) ease}.nav-music-overlay svg{width:11px;height:11px}.nav-music[data-state=playing] .nav-music-icon,.nav-music[data-state=paused] .nav-music-icon{display:none}.nav-music[data-state=playing] .nav-music-overlay,.nav-music[data-state=paused] .nav-music-overlay{opacity:1}.nav-music[data-state=playing] .nav-music-btn{background:color-mix(in srgb,var(--color-accent) 42%,#eef2ef);border-color:transparent;color:#1a1c26}.nav-id[data-music=playing] .logo:after{content:"";position:absolute;inset:0;border-radius:var(--radius-full);box-shadow:0 0 14px 0 var(--color-accent);opacity:0;pointer-events:none;animation:navMusicGlow 5s ease-in-out infinite}@keyframes navMusicGlow{0%,to{opacity:0}50%{opacity:.85}}.music-panel{position:absolute;top:calc(100% + 14px);left:-25px;width:286px;opacity:0;visibility:hidden;transform:translateY(-8px) scale(.97);transform-origin:top left;transition:opacity var(--dur-1) ease,transform var(--dur-2) var(--ease-enter),visibility var(--dur-2);z-index:20}.music-panel:before{content:"";position:absolute;top:-12px;left:0;right:0;height:12px}.nav-music.is-open .music-panel{opacity:1;visibility:visible;transform:translateY(0) scale(1)}.music-panel-inner{padding:var(--space-4);border-radius:var(--radius-lg);background:#1416229e;backdrop-filter:blur(22px) saturate(150%);-webkit-backdrop-filter:blur(22px) saturate(150%);border:1px solid var(--surface-photo-border);box-shadow:0 18px 50px #06081a59,inset 0 1px #ffffff2e;color:#fff;display:flex;flex-direction:column;gap:var(--space-3);box-sizing:border-box}[data-theme=light] .music-panel-inner{backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%)}@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))){.music-panel-inner{background:#141622f0}}.mp-header{display:flex;align-items:center;gap:var(--space-3)}.mp-cover{width:46px;height:46px;border-radius:var(--radius-sm);overflow:hidden;flex-shrink:0;background:#7dcde829}.mp-cover img{width:100%;height:100%;object-fit:cover;display:block}.mp-song-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.mp-title{font-size:var(--t-text);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.35}.mp-artist{font-size:var(--t-small);color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.35}.mp-header-actions{display:flex;gap:var(--space-1);flex-shrink:0}.mp-btn{position:relative;background:none;border:none;cursor:pointer;padding:0;width:var(--btn-h-m);height:var(--btn-h-m);border-radius:50%;color:var(--ink-3);transition:background var(--dur-1),color var(--dur-1),transform var(--dur-1);display:flex;align-items:center;justify-content:center}.mp-btn:hover{background:#ffffff29;color:#fff}.mp-btn:active{transform:scale(.92)}.mp-btn:focus-visible{outline:2px solid var(--btn-ring);outline-offset:1px}.mp-btn.active{color:#fff;background:#ffffff40}.mp-btn svg{width:18px;height:18px}.mp-header-actions .mp-btn{width:var(--btn-h-s);height:var(--btn-h-s)}.mp-header-actions .mp-btn svg{width:15px;height:15px}.mp-list-area{max-height:148px;overflow-y:auto;overflow-x:hidden;border-radius:var(--radius-sm);background:#ffffff1a;overscroll-behavior:contain}.mp-list-area::-webkit-scrollbar{width:4px}.mp-list-area::-webkit-scrollbar-thumb{background:#ffffff47;border-radius:var(--radius-xs)}.mp-playlist{list-style:none;margin:0;padding:var(--space-1) 0}.mp-playlist li{display:flex;align-items:center;padding:var(--space-2) var(--space-3);font-size:var(--t-small);color:var(--ink-3);cursor:pointer;transition:background var(--dur-1),color var(--dur-1);gap:var(--space-2)}.mp-playlist li:hover{background:#ffffff1a}.mp-playlist li.mp-list-active{color:#fff;font-weight:600;background:#ffffff1f}.mp-playlist li .mp-list-idx{width:16px;text-align:center;flex-shrink:0;font-size:var(--t-small);opacity:.7;font-variant-numeric:tabular-nums}.mp-playlist li .mp-list-name{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mp-playlist li .mp-list-artist{flex-shrink:0;max-width:80px;font-size:var(--t-small);opacity:.65;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mp-progress-wrap{display:flex;flex-direction:column;gap:var(--space-2)}.mp-progress{position:relative;height:4px;background:#ffffff38;border-radius:var(--radius-xs);cursor:pointer;transition:height var(--dur-1)}.mp-progress:hover{height:6px}.mp-progress:focus-visible{outline:2px solid var(--btn-ring);outline-offset:3px}.mp-progress-played{position:absolute;left:0;top:0;height:100%;background:#fff;border-radius:var(--radius-xs);width:0%;transition:width var(--dur-1) linear}.mp-progress-thumb{position:absolute;top:50%;left:0%;transform:translate(-50%,-50%) scale(0);width:11px;height:11px;background:#fff;border-radius:50%;box-shadow:0 0 6px #0003;transition:transform var(--dur-1)}.mp-progress:hover .mp-progress-thumb,.mp-progress:focus-visible .mp-progress-thumb{transform:translate(-50%,-50%) scale(1)}.mp-time{display:flex;justify-content:space-between;font-size:var(--t-meta);color:var(--ink-3);font-variant-numeric:tabular-nums}.mp-controls{display:flex;align-items:center;justify-content:center;gap:var(--space-2)}.mp-btn-play{width:var(--btn-h-l);height:var(--btn-h-l);border-radius:50%;background:#ffffff38;color:#fff}.mp-btn-play:hover{background:#ffffff52;transform:scale(1.06)}.mp-btn-play:active{transform:scale(.95)}.mp-btn-play svg{width:20px;height:20px}.mp-btn-prev svg,.mp-btn-next svg{width:19px;height:19px}.mp-footer{display:flex;align-items:center;gap:var(--space-2)}.mp-btn-vol{width:var(--btn-h-s);height:var(--btn-h-s)}.mp-btn-vol svg{width:16px;height:16px}.mp-volume-wrap{flex:1}.mp-volume-bar{position:relative;height:4px;background:#ffffff38;border-radius:var(--radius-xs);cursor:pointer}.mp-volume-level{position:absolute;left:0;top:0;height:100%;background:#fff;border-radius:var(--radius-xs);width:70%;transition:width var(--dur-1)}.music-scrim{position:fixed;inset:0;z-index:99;background:#080c1457;opacity:0;visibility:hidden;transition:opacity var(--dur-1) ease,visibility var(--dur-1)}.music-scrim.is-open{opacity:1;visibility:visible}@media(max-width:768px){.nav-music-btn{width:28px;height:28px}.nav-music{left:22px;top:22px}.nav-music-btn{width:26px;height:26px}.nav-music-btn:after{inset:-6px}.nav-music-icon{width:13px;height:13px}.nav-music-overlay svg{width:13px;height:13px}.music-panel{position:fixed;top:calc(var(--header-height, 64px) + 6px);left:8px;right:8px;width:auto;transform:translateY(-10px);transform-origin:top center;z-index:100}.music-panel:before{display:none}.nav-music.is-open .music-panel{transform:translateY(0)}.music-panel-inner{padding:var(--space-4);border-radius:var(--radius-lg);gap:var(--space-3)}.mp-cover{width:52px;height:52px}.mp-title{font-size:var(--t-text)}.mp-artist{font-size:var(--t-small)}.mp-btn{width:var(--btn-h-m);height:var(--btn-h-m)}.mp-btn svg{width:20px;height:20px}.mp-btn-play{width:var(--btn-h-l);height:var(--btn-h-l)}.mp-btn-play svg{width:22px;height:22px}.mp-header-actions .mp-btn,.mp-btn-vol{width:var(--btn-h-m);height:var(--btn-h-m)}.mp-btn:not(.mp-btn-play):before{content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%)}.mp-controls{gap:var(--space-3)}.mp-progress{height:5px}.mp-playlist li{padding:var(--space-2) var(--space-3);font-size:var(--t-meta)}.mp-list-area{max-height:176px}}@media(prefers-reduced-motion:reduce){.nav-id[data-music=playing] .logo:after{animation:none!important;opacity:0}.nav-music,.nav-music-btn,.music-panel{transition-duration:var(--dur-1)!important}}html[data-reading-motion=reduce] .nav-id[data-music=playing] .logo:after{animation:none!important;opacity:0}.hero-music-caption{display:none}.hero-music-inline{display:contents}.b2-music-toggle{display:none}