.shell { overflow:clip; }
header { position:sticky; top:14px; z-index:30; }
.menu-brand { display:flex; align-items:center; gap:12px; flex-shrink:0; }
.site-player { position:relative; display:flex; align-items:center; gap:3px; color:#121016; }
.player-button { display:grid; place-items:center; width:30px; height:30px; padding:6.75px; border:0; background:transparent; color:inherit; cursor:pointer; }
.player-button svg { width:15.75px; height:15.75px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.player-button:hover { color:#65606e; }
.player-button:focus-visible,.player-volume input:focus-visible { outline:2px solid currentColor; outline-offset:3px; }
.player-volume { display:flex; align-items:center; }
.player-volume input { width:0; opacity:0; margin:0; padding:0; height:22.5px; appearance:none; -webkit-appearance:none; background:transparent; cursor:pointer; transition:width .2s,opacity .2s; }
.player-volume:hover input,.player-volume:focus-within input,.player-volume.is-open input { width:75px; opacity:1; margin-right:6px; }
.player-volume input::-webkit-slider-runnable-track { height:1.5px; background:currentColor; }
.player-volume input::-moz-range-track { height:1.5px; background:currentColor; }
.player-volume input::-webkit-slider-thumb { -webkit-appearance:none; width:7.5px; height:7.5px; border-radius:50%; background:#121016; margin-top:-3px; }
.player-volume input::-moz-range-thumb { width:7.5px; height:7.5px; border:0; border-radius:50%; background:#121016; }
.player-message { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
@media(max-width:600px) { header { top:10px; } .menu-brand { gap:9px; } .player-volume:hover input,.player-volume:focus-within input,.player-volume.is-open input { width:60px; } }
@media(prefers-reduced-motion:reduce) { .player-volume input { transition:none; } }

.player-track-title { display:inline-flex; align-items:center; flex:none; max-width:0; overflow:hidden; white-space:nowrap; padding-block:8px; font:11px/1.5 'DM Sans',sans-serif; letter-spacing:.01em; transition:max-width .8s cubic-bezier(.22,.61,.36,1); }
.player-track-title span { display:inline-block; opacity:0; transform:translateY(12px); }
.site-player.is-title-open .player-track-title { max-width:160px; }
.site-player.is-title-open .player-track-title span { animation:player-letter-rise .5s cubic-bezier(.22,.61,.36,1) both; animation-delay:calc(var(--letter-order) * 15ms); }
@keyframes player-letter-rise { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
@media(max-width:600px) { .player-track-title { font-size:10px; } .site-player.is-title-open .player-track-title { max-width:120px; } }
@media(prefers-reduced-motion:reduce) { .player-track-title { transition:none; } .site-player.is-title-open .player-track-title span { animation:none; opacity:1; transform:none; } }

.site-player.is-title-closing .player-track-title span { animation:player-letter-fall .5s cubic-bezier(.64,0,.78,.39) both; animation-delay:calc((var(--title-letter-count) - 1 - var(--letter-order)) * 15ms); }
@media(prefers-reduced-motion:reduce) { .site-player.is-title-closing .player-track-title span { animation:none; opacity:0; transform:none; } }

@keyframes player-letter-fall { from { opacity:1; transform:translateY(0); } to { opacity:0; transform:translateY(12px); } }