.playlist-discovery{width:min(100%,530px);margin:.65rem auto .5rem;color:#f7f4ef;text-align:center;flex:none}
.playlist-discovery>summary{width:fit-content;margin:auto;padding:.4rem .65rem;list-style:none;color:#d99641;text-decoration:underline;text-underline-offset:4px;font:700 1rem/1.4 Inter,"Source Sans 3",sans-serif;cursor:pointer}
.playlist-discovery>summary::-webkit-details-marker{display:none}
.playlist-discovery[open]>summary{display:none}
.playlist-content{padding:.5rem .35rem 1rem;border-bottom:1px solid #d9964155;animation:playlist-reveal .28s ease-out}
.playlist-discovery .playlist-content h2{margin:.1rem 0 .4rem;color:#d99641;font:800 clamp(1.2rem,5.5vw,1.8rem)/1.12 "Barlow Condensed",Inter,sans-serif;text-transform:uppercase;letter-spacing:.015em}
.playlist-discovery .playlist-intro{max-width:380px;margin:0 auto .8rem;color:#f7f4ef;font:400 1rem/1.4 Inter,"Source Sans 3",sans-serif}
.playlist-discovery .playlist-playback{margin:0 0 .5rem;color:#f7f4ef;font:600 .88rem/1.4 Inter,"Source Sans 3",sans-serif}
.playlist-playback[hidden]{display:none}
.playlist-services{display:grid;gap:.55rem}
.playlist-service{display:flex;align-items:center;gap:.8rem;width:100%;min-height:56px;padding:.5rem 1rem;border:2px solid #d99641;border-radius:999px;background:#1e1713;color:#f7f4ef;text-decoration:none;font:700 clamp(.95rem,3.8vw,1.15rem)/1.25 Inter,"Source Sans 3",sans-serif;box-shadow:0 5px 12px #0005}
.playlist-icon{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:8px;font-size:1.7rem;line-height:1}
.playlist-icon svg{display:block;width:30px;height:30px}
.playlist-service--spotify .playlist-icon{color:#1ed760}
.playlist-service--apple .playlist-icon{background:#e82d76;color:white}
.playlist-service--youtube .playlist-icon{color:#ff2727}
.playlist-arrow{margin-left:auto;font-size:1.7rem;line-height:1}
.playlist-service:hover{background:#39281b;border-color:#f0ba75}
.playlist-discovery .playlist-onsite{display:inline-block;margin-top:.8rem;padding:.3rem;color:#d99641;text-decoration:underline;text-underline-offset:4px;font:700 1rem/1.4 Inter,"Source Sans 3",sans-serif}
.playlist-discovery a:focus-visible,.playlist-discovery>summary:focus-visible{outline:3px solid #f7f4ef;outline-offset:4px}
.song-swipe-hint{margin:.4rem 0 0;color:#d8c9bb;font:400 .8rem/1.4 Inter,"Source Sans 3",sans-serif;text-align:center}
.song-swipe-hint .swipe-mobile{display:none}
@media(max-width:700px){.song-swipe-hint .swipe-mobile{display:inline}.song-swipe-hint .swipe-desktop{display:none}}
@keyframes playlist-reveal{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.playlist-content{animation:none}}
.song-page-viewport{display:flex;align-items:flex-start;width:min(100%,700px);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-behavior:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;overflow-anchor:none}
.song-page-viewport::-webkit-scrollbar{display:none}
.song-page-viewport>.song-panel{flex:0 0 100%;width:100%;min-width:0;max-width:none;scroll-snap-align:start;scroll-snap-stop:always;touch-action:auto}
.song-heading{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;flex:none;width:100%;min-height:var(--song-heading-height,0px)}
.song-page-viewport .art-frame img{-webkit-user-drag:none;user-select:none}
.song-page-dots{display:flex;flex-wrap:wrap;justify-content:center;gap:0;margin:0 0 .35rem}
.song-page-dots button{display:grid;place-items:center;width:28px;height:28px;border:0;background:transparent;padding:0;cursor:pointer}
.song-page-dots button::after{content:"";display:block;width:9px;height:9px;border:1px solid #d99641;border-radius:50%;background:transparent}
.song-page-dots button.is-active::after{background:#d99641}
.song-page-dots button:focus-visible{outline:2px solid #f7f4ef;outline-offset:-2px;border-radius:50%}
.song-page-shell{position:relative;width:min(100%,700px)}
.song-page-shell>.song-page-viewport{width:100%}
.song-page-shell>.desktop-song-arrow{top:var(--song-arrow-top,200px);z-index:5}
@media(max-width:700px){.song-page-shell>.desktop-song-arrow{display:grid;width:30px;height:44px;background:#181613a8;font-size:2rem}}