.nav-song{display:grid;grid-template-columns:28px minmax(0,1fr) 28px;align-items:center;gap:0 6px;position:relative;flex:0 0 154px;width:154px;height:44px;min-height:44px;padding:4px 6px 6px;border:1px solid var(--line);border-left:3px solid var(--orange);border-radius:4px;background:var(--paper);box-shadow:2px 2px 0 #dce6d6;color:var(--ink)}
.navlinks .nav-song button{display:flex;align-items:center;justify-content:center;flex:none;width:28px;height:28px;min-width:28px;min-height:28px;padding:3px;border:1px solid transparent;border-radius:3px;background:transparent;color:var(--green);cursor:pointer}
.navlinks .nav-song button:hover{border-color:var(--line);background:#e7efe6;color:var(--teal)}
.navlinks .nav-song button:focus-visible,.nav-song input:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.navlinks .nav-song svg{display:block;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.nav-song .nav-song-toggle{grid-column:1;grid-row:1}
.song-meta{grid-column:2;grid-row:1;display:grid;grid-template-rows:12px 3px;gap:4px;align-content:center;min-width:0;overflow:hidden}
.song-title,.song-time{grid-row:1;overflow:hidden;color:var(--green);font-size:10px;font-weight:650;font-variant-numeric:tabular-nums;line-height:12px;text-overflow:ellipsis;white-space:nowrap}
.song-time{color:var(--ink)}
.song-progress{grid-row:2;display:block;width:100%;height:3px;overflow:hidden;border-radius:1px;background:#d4ded5}
.song-progress span{display:block;width:0;height:100%;background:var(--teal);transition:width .2s linear}
.navlinks .nav-song .song-volume-toggle{grid-column:3;grid-row:1}
.nav-song [hidden]{display:none!important}
.song-volume-panel[hidden]{display:none!important}
.song-volume-panel{position:absolute;z-index:40;top:calc(100% + 8px);right:0;display:grid;gap:10px;width:220px;padding:12px;border:1px solid var(--line);border-top:3px solid var(--teal);border-radius:4px;background:var(--paper);box-shadow:0 8px 24px #17393124;color:var(--ink)}
.song-volume-panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px}
.navlinks .nav-song .song-volume-panel-head button{width:auto;min-width:46px;height:28px;padding:0 8px;border:1px solid var(--line);border-radius:3px;background:#e7efe6;font-size:11px;font-weight:650}
.song-volume-label{display:grid;gap:5px;color:var(--muted);font-size:11px}
.song-volume{width:100%;margin:0;accent-color:var(--teal)}
@media(max-width:899px){.navlinks{gap:0 8px}}
@media(max-width:760px){.navlinks .nav-song{flex-basis:74px;width:74px;grid-template-columns:24px minmax(0,1fr) 24px;gap:0 2px;padding:3px 4px 6px}.navlinks .nav-song button{width:24px;height:28px;min-width:24px;min-height:28px;padding:2px}.navlinks .nav-song svg{display:block;width:17px;height:17px}.song-meta{position:absolute;right:5px;bottom:3px;left:5px;display:block;height:2px;overflow:hidden}.song-title,.song-time{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.song-progress{height:2px}}
@media(max-width:620px){.navlinks{gap:0 5px}.navlinks .nav-cta{padding:0 9px}}
@media(max-width:420px){.navlinks{font-size:12px;gap:0 4px}.navlinks .nav-cta{padding:0 8px}.navlinks .nav-song{flex-basis:70px;width:70px}}
@media(max-width:350px){.navlinks{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 70px}.navlinks a:nth-child(1){grid-column:1;grid-row:1}.navlinks a:nth-child(2){grid-column:2;grid-row:1}.navlinks a:nth-child(3){grid-column:1;grid-row:2}.navlinks a:nth-child(4){grid-column:2;grid-row:2}.navlinks .nav-song{grid-column:3;grid-row:1/3;justify-self:end}}
@media(prefers-reduced-motion:reduce){.song-progress span{transition:none}}