@layer pages{.playlist-page{min-width:0;padding-bottom:calc(32px + var(--audio-dock-height,0px));align-content:start;gap:32px;display:grid;container:playlist-page/inline-size}.playlist-section__head{flex-wrap:wrap;align-items:center;gap:8px 16px;min-width:0;display:flex}.playlist-section__head>h2{margin:0;min-width:0;font:var(--md-sys-typescale-emphasized-title-large-weight) var(--md-sys-typescale-title-large-size) / var(--md-sys-typescale-title-large-line-height) var(--app-font);margin-inline-end:auto}.playlist-section__count{color:var(--md-sys-color-on-surface-variant);font-size:var(--md-sys-typescale-title-medium-size);font-variant-numeric:tabular-nums}.playlist-cover{aspect-ratio:1;width:100%;color:var(--md-sys-color-on-secondary-container);border-radius:var(--md-sys-shape-corner-large);background:var(--md-sys-color-secondary-container);grid-template:minmax(0,1fr)/minmax(0,1fr);display:grid;position:relative;overflow:hidden}.playlist-cover>img{object-fit:cover;width:100%;height:100%;display:block}.playlist-cover--mosaic{grid-template:repeat(2,minmax(0,1fr))/repeat(2,minmax(0,1fr))}.playlist-cover__empty{place-items:center;display:grid}.playlist-cover--create{color:var(--md-sys-color-on-surface-variant);border:2px dashed var(--md-sys-color-outline-variant);background:var(--md-sys-color-surface-container-low);place-items:center}.playlist-cover__band{pointer-events:none;background:linear-gradient(#0000,#0000009e);align-items:flex-end;height:45%;padding:10px 12px;display:flex;position:absolute;inset:auto 0 0}.playlist-cover__band>img{object-fit:contain;object-position:left bottom;filter:drop-shadow(0 1px 3px #00000080);width:auto;max-width:78%;height:auto;max-height:34px}.playlist-cover--hero{border-radius:var(--md-sys-shape-corner-extra-large);box-shadow:var(--md-sys-elevation-level2)}.playlist-cover--hero .playlist-cover__band>img{max-height:44px}.playlist-cover--tile{border-radius:var(--md-sys-shape-corner-small);flex:none;width:48px}.playlist-cover--tile .playlist-cover__band{display:none}.playlist-owner{min-width:0;color:var(--md-sys-color-on-surface-variant);font:var(--md-sys-typescale-body-small-weight) var(--md-sys-typescale-body-small-size) / var(--md-sys-typescale-body-small-line-height) var(--app-font);align-items:center;gap:6px;display:inline-flex}.playlist-owner--official{color:var(--md-sys-color-primary)}.playlist-owner__avatar{object-fit:cover;background:var(--md-sys-color-surface-container-highest);border-radius:50%;flex:none;place-items:center;width:20px;height:20px;display:grid;overflow:hidden}.playlist-owner__name{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}.playlist-source{border-radius:var(--md-sys-shape-corner-extra-small);font:var(--md-sys-typescale-emphasized-label-weight) 10px / 16px var(--app-font);letter-spacing:.02em;white-space:nowrap;flex:none;padding:0 5px;display:inline-block}.playlist-source--our-notes{color:var(--md-sys-color-on-primary-container);background:var(--md-sys-color-primary-container)}.playlist-source--bestdori{color:var(--md-sys-color-on-tertiary-container);background:var(--md-sys-color-tertiary-container)}.playlist-shelf,.playlist-community{gap:16px;min-width:0;display:grid}.playlist-shelf__nav{gap:4px;display:none}@media (hover:hover) and (pointer:fine){.playlist-shelf__nav{display:inline-flex}}.playlist-shelf__track{--tile:clamp(8.5rem, 34cqi, 10.5rem);grid-auto-columns:var(--tile);overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;grid-auto-flow:column;gap:16px;min-width:0;margin:0 -16px;padding:4px 16px 8px;scroll-padding-inline:16px;list-style:none;display:grid;overflow-x:auto}.playlist-shelf__track::-webkit-scrollbar{display:none}.playlist-shelf__track--feature{--tile:clamp(10.5rem, 44cqi, 13.5rem)}.playlist-wall{grid-template-columns:repeat(auto-fill,minmax(min(100%,9.5rem),1fr));gap:24px 16px;min-width:0;margin:0;padding:0;list-style:none;display:grid}.playlist-tile{scroll-snap-align:start;min-width:0;position:relative}.playlist-tile__link{width:100%;min-width:0;color:inherit;font:inherit;text-align:start;cursor:pointer;background:0 0;border:0;gap:8px;padding:0;text-decoration:none;display:grid}.playlist-tile__art,.playlist-tile__overlay{transition:transform var(--motion-spatial)}.playlist-tile__art{border-radius:var(--md-sys-shape-corner-large);transition:transform var(--motion-spatial), border-radius var(--motion-spatial);display:block;position:relative}.playlist-tile--feature .playlist-tile__art,.playlist-tile--feature .playlist-cover{border-radius:var(--md-sys-shape-corner-extra-large)}.playlist-tile__count,.playlist-tile__lock{color:#fff;border-radius:var(--md-sys-shape-corner-full);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font:var(--md-sys-typescale-emphasized-label-weight) var(--md-sys-typescale-label-small-size) / 18px var(--app-font);font-variant-numeric:tabular-nums;background:#0006;align-items:center;gap:2px;padding:2px 8px 2px 6px;display:inline-flex;position:absolute;top:8px}.playlist-tile__count{right:8px}.playlist-tile__lock{padding-inline:4px;left:8px}.playlist-tile__title{-webkit-line-clamp:2;min-width:0;font:var(--md-sys-typescale-body-medium-weight) var(--md-sys-typescale-body-medium-size) / var(--md-sys-typescale-body-medium-line-height) var(--app-font);overflow-wrap:anywhere;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.playlist-tile--feature .playlist-tile__title{font:var(--md-sys-typescale-emphasized-title-weight) var(--md-sys-typescale-title-medium-size) / var(--md-sys-typescale-title-medium-line-height) var(--app-font)}.playlist-tile__meta{min-width:0;margin-top:-4px;display:flex}.playlist-tile__overlay{aspect-ratio:1;pointer-events:none;position:absolute;inset:0 0 auto}.playlist-tile__play{width:40px;height:40px;color:var(--md-sys-color-on-primary);border-radius:var(--md-sys-shape-corner-full);background:var(--md-sys-color-primary);box-shadow:var(--md-sys-elevation-level2);cursor:pointer;pointer-events:auto;transition:opacity var(--motion-effects), transform var(--motion-spatial), border-radius var(--motion-spatial);border:0;place-items:center;padding:0;display:grid;position:absolute;bottom:8px;right:8px}.playlist-tile__play:disabled{display:none}.playlist-tile__play:active{border-radius:var(--md-sys-shape-corner-medium)}@media (hover:hover) and (pointer:fine){.playlist-tile__play{opacity:0}.playlist-tile:hover .playlist-tile__play,.playlist-tile:focus-within .playlist-tile__play{opacity:1}.playlist-tile:hover .playlist-tile__art,.playlist-tile:hover .playlist-tile__overlay{transform:translateY(-4px)}}.playlist-tile__link:focus-visible{outline:none}.playlist-tile__link:focus-visible .playlist-tile__art{outline:3px solid var(--md-sys-color-secondary);outline-offset:3px}.playlist-tile--create .playlist-tile__title{color:var(--md-sys-color-on-surface-variant)}.playlist-more{justify-content:center;display:flex}.playlist-invite{border-radius:var(--md-sys-shape-corner-extra-large);background:var(--md-sys-color-surface-container-low);flex-wrap:wrap;align-items:center;gap:16px 20px;padding:20px 24px;display:flex}.playlist-invite>div{flex:1;gap:4px;min-width:min(100%,16rem);display:grid}.playlist-invite h2{font:var(--md-sys-typescale-emphasized-title-weight) var(--md-sys-typescale-title-medium-size) / var(--md-sys-typescale-title-medium-line-height) var(--app-font);margin:0}.playlist-invite p{color:var(--md-sys-color-on-surface-variant);font:var(--md-sys-typescale-body-medium-weight) var(--md-sys-typescale-body-medium-size) / var(--md-sys-typescale-body-medium-line-height) var(--app-font);margin:0}.playlist-invite__mark{width:56px;height:56px;color:var(--md-sys-color-on-tertiary-container);background:var(--md-sys-color-tertiary-container);place-items:center;display:grid}.playlist-view{gap:16px;min-width:0;display:grid}.playlist-head{isolation:isolate;border-radius:var(--md-sys-shape-corner-extra-large);background:var(--md-sys-color-surface-container);gap:20px;margin-inline:-8px;padding:24px;display:grid;position:relative;overflow:hidden}.playlist-head__backdrop{z-index:-1;filter:blur(56px)saturate(1.5);opacity:.6;background-position:50%;background-size:cover;position:absolute;inset:-48px}.playlist-head:after{z-index:-1;background:linear-gradient(180deg, color-mix(in srgb, var(--md-sys-color-surface-container) 30%, transparent), color-mix(in srgb, var(--md-sys-color-surface-container) 88%, transparent));content:"";position:absolute;inset:0}.playlist-head__content{grid-template-columns:clamp(8.5rem,30cqi,13.5rem) minmax(0,1fr);align-items:center;gap:24px;min-width:0;display:grid}.playlist-head__copy{align-content:center;justify-items:start;gap:10px;min-width:0;display:grid}.playlist-head__eyebrow{color:var(--md-sys-color-primary);font:var(--md-sys-typescale-emphasized-label-weight) var(--md-sys-typescale-label-large-size) / var(--md-sys-typescale-label-large-line-height) var(--app-font);flex-wrap:wrap;align-items:center;gap:8px;margin:0;display:inline-flex}.playlist-head__private{color:var(--md-sys-color-on-surface-variant);align-items:center;gap:2px;display:inline-flex}.playlist-head__title{-webkit-line-clamp:3;min-width:0;font:var(--md-sys-typescale-emphasized-headline-weight) var(--md-sys-typescale-headline-medium-size) / var(--md-sys-typescale-headline-medium-line-height) var(--app-font);overflow-wrap:anywhere;-webkit-box-orient:vertical;margin:0;display:-webkit-box;overflow:hidden}.playlist-head__owner{min-width:0;max-width:100%;color:inherit;text-decoration:none}.playlist-head__owner .playlist-owner{font-size:var(--md-sys-typescale-body-medium-size)}a.playlist-head__owner:hover .playlist-owner__name{text-decoration:underline}.playlist-head__owner .playlist-owner__avatar{width:24px;height:24px}.playlist-head__description{max-width:60ch;color:var(--md-sys-color-on-surface-variant);-webkit-line-clamp:2;font:var(--md-sys-typescale-body-medium-weight) var(--md-sys-typescale-body-medium-size) / var(--md-sys-typescale-body-medium-line-height) var(--app-font);text-align:start;white-space:pre-line;overflow-wrap:anywhere;cursor:pointer;background:0 0;border:0;-webkit-box-orient:vertical;padding:0;display:-webkit-box;overflow:hidden}.playlist-head__description.is-open{display:block}.playlist-head__stats{color:var(--md-sys-color-on-surface-variant);font:var(--md-sys-typescale-body-small-weight) var(--md-sys-typescale-body-small-size) / var(--md-sys-typescale-body-small-line-height) var(--app-font);font-variant-numeric:tabular-nums;flex-wrap:wrap;gap:4px 12px;margin:0;display:flex}.playlist-head__actions{flex-wrap:wrap;gap:8px;min-width:0;display:flex}.playlist-head__actions>.button{background-color:color-mix(in srgb, var(--md-sys-color-surface) 55%, transparent);min-height:48px}.playlist-head__actions>.button:not(.button--outlined):not(.button--tonal){background-color:var(--md-sys-color-primary)}.playlist-head__actions>.button.is-selected{background-color:var(--md-sys-color-secondary-container)}.playlist-head__play{font-size:var(--md-sys-typescale-title-medium-size);padding-inline:20px 24px}.playlist-head__play:active{border-radius:var(--md-sys-shape-corner-medium)}@container playlist-page (width<=30rem){.playlist-head{padding:20px 16px}.playlist-head__content{grid-template-columns:8rem minmax(0,1fr);gap:16px}.playlist-head__title{font-size:var(--md-sys-typescale-title-large-size);line-height:var(--md-sys-typescale-title-large-line-height)}.playlist-head__actions>.button{flex:auto}.playlist-head__play{flex-basis:100%}}.playlist-songlist{min-width:0;display:grid}.playlist-songlist__bar{z-index:1;border-bottom:1px solid var(--md-sys-color-outline-variant);background:var(--md-sys-color-surface);align-items:center;gap:8px;margin-inline:-8px;padding:8px;display:flex;position:sticky;top:0}.playlist-songlist__play{min-height:48px;color:var(--md-sys-color-on-surface);border-radius:var(--md-sys-shape-corner-full);font:var(--md-sys-typescale-emphasized-title-weight) var(--md-sys-typescale-title-medium-size) / var(--md-sys-typescale-title-medium-line-height) var(--app-font);cursor:pointer;background:0 0;border:0;align-items:center;gap:12px;padding:0 16px 0 4px;display:inline-flex}.playlist-songlist__play:hover{background:var(--md-sys-color-surface-container-high)}.playlist-songlist__play:disabled{opacity:.38;cursor:default}.playlist-songlist__play-icon{width:36px;height:36px;color:var(--md-sys-color-on-primary);background:var(--md-sys-color-primary);border-radius:50%;place-items:center;display:grid}.playlist-songlist__count{color:var(--md-sys-color-on-surface-variant);font-weight:var(--md-sys-typescale-body-medium-weight);font-variant-numeric:tabular-nums}.playlist-songs{min-width:0;margin:0 -8px;padding:4px 0;list-style:none;display:grid}.playlist-song{border-radius:var(--md-sys-shape-corner-large);min-width:0;transition:background-color var(--motion-effects);align-items:center;display:flex}@media (hover:hover){.playlist-song:hover{background:var(--md-sys-color-surface-container)}}.playlist-song__main{min-width:0;min-height:64px;color:inherit;border-radius:inherit;font:inherit;text-align:start;cursor:pointer;background:0 0;border:0;flex:1;align-items:center;gap:12px;padding:8px;display:flex}.playlist-song__main:disabled{cursor:default}.playlist-song__main:focus-visible{outline:3px solid var(--md-sys-color-secondary);outline-offset:-3px}.playlist-song>.playlist-song__index,.playlist-song>.playlist-song__art,.playlist-song>.playlist-song__handle{margin-inline-start:8px}.playlist-song__index{width:2rem;color:var(--md-sys-color-on-surface-variant);font:var(--md-sys-typescale-body-large-weight) var(--md-sys-typescale-body-large-size) / var(--md-sys-typescale-body-large-line-height) var(--app-font);font-variant-numeric:tabular-nums;flex:none;place-items:center;display:grid}.playlist-song__art{width:48px;height:48px;color:var(--md-sys-color-on-surface-variant);border-radius:var(--md-sys-shape-corner-small);background:var(--md-sys-color-surface-container-highest);flex:none;place-items:center;display:grid;overflow:hidden}.playlist-song__art>img{object-fit:cover;width:100%;height:100%}.playlist-song__text{flex:1;gap:2px;min-width:0;display:grid}.playlist-song__title{font:var(--md-sys-typescale-body-large-weight) var(--md-sys-typescale-body-large-size) / var(--md-sys-typescale-body-large-line-height) var(--app-font);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.playlist-song__artist{min-width:0;color:var(--md-sys-color-on-surface-variant);font:var(--md-sys-typescale-body-small-weight) var(--md-sys-typescale-body-small-size) / var(--md-sys-typescale-body-small-line-height) var(--app-font);text-overflow:ellipsis;white-space:nowrap;align-items:center;gap:6px;display:flex;overflow:hidden}.playlist-song__actions{flex:none;align-items:center;padding-inline-end:4px;display:flex}.playlist-song.is-playing .playlist-song__title,.playlist-song.is-playing .playlist-song__index{color:var(--md-sys-color-primary)}.playlist-song.is-silent .playlist-song__text,.playlist-song.is-unavailable{opacity:.5}.playlist-song.is-unavailable{gap:12px;min-height:64px}@container playlist-page (width<=30rem){.playlist-song__index{width:1.5rem}.playlist-song:not(.playlist-song--edit) .playlist-song__actions>a{display:none}}.playlist-editor{gap:32px;min-width:0;display:grid}.playlist-editor__head{grid-template-columns:clamp(8rem,28cqi,12rem) minmax(0,1fr);align-items:start;gap:24px;min-width:0;display:grid}.playlist-editor__cover{position:relative}.playlist-editor__progress{color:#fff;border-radius:var(--md-sys-shape-corner-extra-large);font:var(--md-sys-typescale-emphasized-title-weight) var(--md-sys-typescale-title-large-size) / 1 var(--app-font);font-variant-numeric:tabular-nums;background:#00000073;place-items:center;display:grid;position:absolute;inset:0}.playlist-editor__fields{gap:16px;min-width:0;display:grid}.playlist-editor__fields md-outlined-text-field{width:100%}.playlist-editor__switch{border-radius:var(--md-sys-shape-corner-large);background:var(--md-sys-color-surface-container-low);cursor:pointer;justify-content:space-between;align-items:center;gap:16px;padding:12px 16px;display:flex}.playlist-editor__switch>span{gap:2px;display:grid}.playlist-editor__switch small{color:var(--md-sys-color-on-surface-variant);font-size:var(--md-sys-typescale-body-small-size)}@container playlist-page (width<=34rem){.playlist-editor__head{grid-template-columns:minmax(0,1fr);justify-items:center}.playlist-editor__cover{width:min(60%,12rem)}.playlist-editor__fields{width:100%}}.playlist-editor__section{gap:16px;min-width:0;display:grid}.playlist-editor__hint{color:var(--md-sys-color-on-surface-variant);font:var(--md-sys-typescale-body-medium-weight) var(--md-sys-typescale-body-medium-size) / var(--md-sys-typescale-body-medium-line-height) var(--app-font);flex-wrap:wrap;align-items:center;gap:8px;margin:0;display:flex}.playlist-editor__jackets{grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:8px;margin:0;padding:0;list-style:none;display:grid}.playlist-editor__jackets button{aspect-ratio:1;border-radius:var(--md-sys-shape-corner-medium);background:var(--md-sys-color-surface-container-highest);cursor:pointer;width:100%;transition:border-radius var(--motion-spatial);border:0;padding:0;display:block;position:relative;overflow:hidden}.playlist-editor__jackets img{object-fit:cover;width:100%;height:100%}.playlist-editor__jackets button[aria-selected=true]{border-radius:var(--md-sys-shape-corner-extra-large);outline:3px solid var(--md-sys-color-primary);outline-offset:2px}.playlist-editor__check{width:24px;height:24px;color:var(--md-sys-color-on-primary);background:var(--md-sys-color-primary);border-radius:50%;place-items:center;display:grid;position:absolute;bottom:4px;right:4px}.playlist-song--edit{gap:12px;min-height:64px}.playlist-song--edit.is-dragging{background:var(--md-sys-color-secondary-container);box-shadow:var(--md-sys-elevation-level2)}.playlist-song__handle{width:32px;height:48px;color:var(--md-sys-color-on-surface-variant);cursor:grab;touch-action:none;flex:none;place-items:center;display:grid}@container playlist-page (width<=30rem){.playlist-song--edit .playlist-song__handle{display:none}}.playlist-editor__danger{border-top:1px solid var(--md-sys-color-outline-variant);justify-content:flex-start;padding-top:8px;display:flex}.playlist-picker{width:min(640px,100vw - 32px);max-height:min(88dvh,760px)}.playlist-picker__header{gap:12px;padding-bottom:8px}.playlist-picker__title{justify-content:space-between;align-items:center;gap:8px;display:flex}.playlist-picker__title>h2{font:var(--md-sys-typescale-headline-small-weight) var(--md-sys-typescale-headline-small-size) / var(--md-sys-typescale-headline-small-line-height) var(--app-font);margin:0}.playlist-picker__search{min-height:48px;color:var(--md-sys-color-on-surface-variant);border-radius:var(--md-sys-shape-corner-full);background:var(--md-sys-color-surface-container-highest);align-items:center;gap:8px;padding-inline:16px;display:flex}.playlist-picker__search>input{min-width:0;color:var(--md-sys-color-on-surface);font:var(--md-sys-typescale-body-large-weight) var(--md-sys-typescale-body-large-size) / var(--md-sys-typescale-body-large-line-height) var(--app-font);background:0 0;border:0;outline:0;flex:1}.playlist-picker__bands{scrollbar-width:none;gap:8px;margin-inline:-24px;padding:0 24px 4px;display:flex;overflow-x:auto}.playlist-picker__bands>.chip{flex:none}.playlist-picker__body{padding:0 16px}.playlist-picker__body .playlist-songs{margin:0}.playlist-song--pick.is-selected{background:var(--md-sys-color-secondary-container)}.playlist-song__toggle{width:40px;height:40px;color:var(--md-sys-color-primary);flex:none;place-items:center;display:grid}.playlist-picker__selected{color:var(--md-sys-color-on-surface-variant);font:var(--md-sys-typescale-body-medium-weight) var(--md-sys-typescale-body-medium-size) / var(--md-sys-typescale-body-medium-line-height) var(--app-font);align-self:center;margin-inline-end:auto}.playlist-add__song{color:var(--md-sys-color-on-surface-variant);margin:0}.playlist-add__list{gap:4px;margin:0 -16px;padding:0;list-style:none;display:grid}.playlist-add__item{width:100%;min-height:64px;color:var(--md-sys-color-on-surface);border-radius:var(--md-sys-shape-corner-large);font:var(--md-sys-typescale-body-large-weight) var(--md-sys-typescale-body-large-size) / var(--md-sys-typescale-body-large-line-height) var(--app-font);text-align:start;cursor:pointer;background:0 0;border:0;align-items:center;gap:16px;padding:8px 16px;display:flex}.playlist-add__item:hover{background:var(--md-sys-color-surface-container-highest)}.playlist-add__item>span:last-child{min-width:0;display:grid}.playlist-add__item small{color:var(--md-sys-color-on-surface-variant);font-size:var(--md-sys-typescale-body-small-size)}.playlist-add__item .playlist-cover--create{border-width:1px}.playlist-save{min-height:40px}}