@import url('assets/fonts.css');

:root{--paper:#f7f8fa;--ink:#202528;--muted:#737a84;--line:#e3e6ea;--blue:#235cec;--blue-soft:#eaf0ff;--serif:'DM Serif Display',Georgia,serif;--sans:'DM Sans','Segoe UI',sans-serif;--ease:cubic-bezier(.23,1,.32,1)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:26px}body{margin:0;color:var(--ink);background:radial-gradient(ellipse at 70% 15%,#fff 0,transparent 65%),var(--paper);font-family:var(--sans);font-size:15px;-webkit-font-smoothing:antialiased}button,input,a{-webkit-tap-highlight-color:transparent}button,a,input{font:inherit}button{border:0;background:none;color:inherit;cursor:pointer}a{color:inherit;text-decoration:none}button{touch-action:manipulation}button:disabled{opacity:.4;cursor:default}button:not(:disabled):active{transform:translateY(1px)}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--blue);outline-offset:5px}svg{width:20px;height:20px;display:block;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}img{display:block;max-width:100%}h1,h2,h3,p{margin:0}h1,h2,h3{font-family:var(--serif);font-weight:400}ol{list-style:none;padding:0;margin:0}[hidden]{display:none!important}.muted{color:var(--muted);font-size:14px}.overline{font-size:10px;letter-spacing:.13em;font-weight:600;color:var(--muted)}.skip-link{position:fixed;top:-80px;left:20px;background:var(--ink);color:white;padding:14px;z-index:100}.skip-link:focus{top:10px}
.header{min-height:96px;display:flex;align-items:center;justify-content:space-between;gap:30px;padding:0 4.4%;border-bottom:1px solid var(--line)}.brand{font-family:var(--serif);font-size:36px;letter-spacing:-1.6px;white-space:nowrap}.brand span{font-size:.77em;letter-spacing:-1px}.header nav{display:flex;align-items:center;gap:32px}.nav-link{font-size:14px;line-height:96px;position:relative;padding:0;white-space:nowrap}.nav-link.active{font-weight:600}.nav-link.active:after{content:'';position:absolute;width:4px;height:4px;border-radius:50%;background:var(--blue);bottom:21px;left:50%}#saved-count{font-size:11px;color:var(--muted);margin-left:3px}.search{display:flex;align-items:center;gap:11px;padding:11px 14px;border:1px solid var(--line);border-radius:24px;width:265px}.search svg{width:17px;height:17px;color:var(--muted)}.search input{min-width:0;width:100%;border:0;outline:0;background:none;font-size:12px;color:var(--ink)}.search:focus-within{border-color:var(--blue)}.search kbd{color:#858c96;font-family:inherit;font-size:11px;border:1px solid var(--line);border-radius:3px;padding:0 4px}
main{max-width:1700px;margin:auto}.listening-room{display:grid;grid-template-columns:minmax(235px,1fr) minmax(315px,1.36fr) minmax(225px,.92fr);gap:3.2vw;padding:42px 4.4% 43px;align-items:center;min-height:438px}.album{aspect-ratio:1;position:relative;overflow:hidden;border-radius:5px;background:#536065;color:white;isolation:isolate;box-shadow:0 12px 28px #16273512;animation:enter .7s var(--ease) both}.album>img{width:100%;height:100%;object-fit:cover;filter:saturate(.65) brightness(.8);transition:opacity .2s}.album:after{content:'';position:absolute;inset:0;z-index:-0;background:linear-gradient(180deg,#101e2830,transparent 42%,#12191f40);pointer-events:none}.album-label{position:absolute;inset:29px 27px auto;z-index:1;display:flex;flex-direction:column;gap:8px;text-shadow:0 1px 5px #0002}.album-label>span{font-size:11px;letter-spacing:.27em}.album-label strong{font-family:var(--serif);font-weight:400;font-size:29px;letter-spacing:-.4px}.edition{position:absolute;z-index:1;bottom:23px;left:27px;right:20px;font-size:8px;letter-spacing:.15em}.hero-player{min-width:0;animation:enter .7s .08s var(--ease) both}.eyebrow{display:flex;gap:9px;align-items:center;font-size:10px;font-weight:600;letter-spacing:.12em;color:var(--blue);margin-bottom:16px;height:15px}.signal{height:13px;display:flex;align-items:center;gap:2px}.signal i{display:block;width:2px;height:6px;background:currentColor;border-radius:2px}.signal i:nth-child(2){height:12px}.is-playing .signal i{animation:signal .95s ease-in-out infinite alternate}.is-playing .signal i:nth-child(2){animation-delay:-.4s}.is-playing .signal i:nth-child(3){animation-delay:-.65s}h1{font-size:clamp(38px,4vw,65px);line-height:1.08;letter-spacing:-2px}.collection-subtitle{font-size:14px;color:var(--muted);margin-top:10px}.now-track{margin-top:27px}.now-track h2{font-family:var(--sans);font-size:20px;font-weight:500;letter-spacing:-.4px;margin:7px 0 5px;line-height:1.25}.now-track p{color:var(--muted);font-size:13px}.hero-controls{display:flex;gap:15px;align-items:center;margin-top:22px}.round{border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .18s,color .18s,transform .18s}.primary{width:52px;height:52px;background:var(--blue);color:white;margin-right:9px;box-shadow:0 5px 15px #235cec1c}.primary:hover{background:#134add}.primary svg{width:22px;height:22px}.icon-button{width:38px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:50%;position:relative;flex-shrink:0;transition:background .15s}.icon-button:hover,.text-button:hover{background:#20252808}.control-divider{height:24px;width:1px;background:var(--line);margin:0 7px}.text-button{display:flex;align-items:center;justify-content:center;gap:8px;font-size:12px;color:var(--muted);padding:9px 7px;border-radius:5px}.text-button svg{width:19px;height:19px}.text-button[aria-pressed=true],.icon-button[aria-pressed=true]{color:var(--blue)}[data-action=save-current][aria-pressed=true] svg,.track-save[aria-pressed=true] svg{fill:var(--blue);stroke:var(--blue)}.timeline{display:flex;align-items:center;gap:11px;margin-top:23px}.timeline time{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;min-width:29px}.timeline time:last-child{text-align:right}.timeline input{flex:1;min-width:30px}input[type=range]{appearance:none;-webkit-appearance:none;height:3px;border-radius:4px;cursor:pointer;background:linear-gradient(to right,var(--blue) var(--progress,0%),#dfe2e6 var(--progress,0%));padding:0;margin:8px 0;touch-action:pan-y}input[type=range]::-webkit-slider-thumb{appearance:none;width:10px;height:10px;background:var(--blue);border-radius:50%;border:0;transition:box-shadow .15s}input[type=range]::-moz-range-thumb{width:10px;height:10px;background:var(--blue);border-radius:50%;border:0}input[type=range]:hover::-webkit-slider-thumb{box-shadow:0 0 0 4px #235cec18}.player-hint{margin-top:12px;font-size:11px;color:var(--muted);min-height:17px}
.up-next{align-self:stretch;border-left:1px solid var(--line);padding-left:30px;display:flex;flex-direction:column;min-width:0;animation:enter .7s .16s var(--ease) both}.section-head{display:flex;align-items:center;justify-content:space-between;gap:16px}.section-head h2{font-size:24px;letter-spacing:-.5px}.up-next .section-head h2{font-family:var(--sans);font-size:13px;letter-spacing:0;font-weight:500}.quiet-button{padding:10px 0;color:var(--muted);font-size:11px;display:flex;align-items:center;gap:7px}.quiet-button svg{width:12px;height:12px}.queue-context{font-size:11px;color:var(--muted);margin:5px 0 15px}.queue-list li button{display:flex;width:100%;align-items:center;gap:12px;padding:9px 0;text-align:left}.queue-list img{width:42px;height:42px;object-fit:cover;border-radius:4px;filter:saturate(.7)}.queue-track-copy{display:flex;flex:1;min-width:0;flex-direction:column;gap:4px}.queue-track-copy strong{font-size:12px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.queue-track-copy small{font-size:10px;color:var(--muted)}.queue-list time{font-size:10px;color:var(--muted);font-variant-numeric:tabular-nums}.queue-list button:hover .queue-track-copy strong{color:var(--blue)}.queue-list li.current{color:var(--blue)}.listening-note{display:flex;gap:12px;margin-top:auto;padding-top:20px;color:#939ba4}.listening-note svg{width:27px;height:27px;stroke-width:1.2}.listening-note p{font-size:11px;line-height:1.6}
.moods{border-top:1px solid var(--line);padding:25px 4.4% 30px}.moods>.section-head{margin-bottom:17px}.moods .muted{font-size:11px}.mood-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.mood-card{position:relative;text-align:left;overflow:hidden;border-radius:5px;height:115px;isolation:isolate;padding:21px 20px;color:white;background:#303c45}.mood-card>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .45s var(--ease);filter:saturate(.6)}.mood-card:after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#07111acf,#0d16282e)}.mood-card:hover>img{transform:scale(1.04)}.mood-card h3{font-size:23px;letter-spacing:-.4px;margin-bottom:9px}.mood-card .mood-meta{font-size:10px;color:#fff9;display:flex;gap:7px;align-items:center}.mood-play{position:absolute;right:18px;top:calc(50% - 18px);width:36px;height:36px;border:1px solid #fff9;border-radius:50%;display:grid;place-items:center}.mood-play svg{width:17px;height:17px}.mood-card[aria-pressed=true]{outline:2px solid var(--blue);outline-offset:3px}.mood-card[aria-pressed=true] .mood-play{background:white;color:var(--blue);border-color:white}
.library{padding:17px 4.4% 30px;scroll-margin-top:22px}.library-heading{margin-bottom:23px}.library-heading h2{font-size:28px}.library-heading p{font-size:12px;margin-top:5px}.outline-button{display:flex;align-items:center;gap:8px;border:1px solid #d4d9e1;border-radius:20px;padding:9px 16px;font-size:12px;white-space:nowrap}.outline-button:hover{border-color:var(--blue);color:var(--blue)}.outline-button svg{width:13px;height:13px}.library-tools{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding-bottom:17px;gap:14px}.filters{display:flex;gap:5px;flex-wrap:wrap}.filter{padding:7px 13px;border-radius:18px;font-size:11px;color:var(--muted);border:1px solid transparent}.filter:hover{color:var(--ink)}.filter.active{color:var(--blue);background:var(--blue-soft);border-color:#d4dfff}.library-total{font-size:11px}.table-head,.track-row{display:grid;grid-template-columns:42px minmax(160px,1fr) 190px 65px 43px;align-items:center;gap:12px}.table-head{height:43px;font-size:9px;letter-spacing:.12em;color:#9198a1}.table-head>span:first-child{text-align:center}.table-head svg{width:13px;height:13px;margin-left:auto;margin-right:8px}.track-row{border-bottom:1px solid #e8ebef;min-height:64px;border-radius:3px;position:relative;transition:background .15s}.track-row:hover{background:#fff}.track-row.active{background:#edf2ff}.track-number{font-size:11px;color:var(--muted);padding:0;width:38px;height:42px;display:grid;place-items:center}.track-number .row-play{display:none}.track-number svg{width:16px;height:16px}.track-row:hover .track-number .number,.track-row.active .track-number .number{display:none}.track-row:hover .track-number .row-play,.track-row.active .track-number .row-play{display:block;color:var(--blue)}.track-name{display:flex;align-items:center;gap:13px;text-align:left;padding:8px 0;min-width:0}.track-name img{width:39px;height:39px;object-fit:cover;border-radius:3px;filter:saturate(.6)}.track-copy{min-width:0;display:flex;flex-direction:column;gap:4px}.track-copy strong{font-weight:500;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.track-copy small{font-size:10px;color:var(--muted)}.track-row.active .track-copy strong{color:var(--blue)}.track-mood{font-size:11px;color:var(--muted)}.track-time{font-size:11px;color:var(--muted);text-align:right;margin-right:8px;font-variant-numeric:tabular-nums}.track-save{color:#8b949f}.track-save svg{width:17px;height:17px}.empty{text-align:center;padding:50px 20px;color:var(--muted);font-size:14px}.footer{padding:35px 4.4% 148px;display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:11px;color:var(--muted);border-top:1px solid var(--line)}.brand.small{font-size:24px;color:var(--ink);letter-spacing:-1px}
.dock{position:fixed;bottom:0;left:0;right:0;min-height:100px;background:#fafbfdf5;backdrop-filter:blur(20px);border-top:1px solid #e0e4ea;display:grid;grid-template-columns:minmax(220px,1fr) minmax(270px,1fr) minmax(190px,1fr);align-items:center;gap:35px;padding:13px 4.4% max(13px,env(safe-area-inset-bottom));z-index:10;box-shadow:0 -5px 28px #20334404}.dock-info{display:flex;align-items:center;gap:14px;min-width:0}.dock-info>img{width:49px;height:49px;object-fit:cover;border-radius:4px;filter:saturate(.65)}.dock-info>div{min-width:0;display:flex;flex-direction:column;gap:5px}.dock-info strong{font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dock-info>div>span{font-size:10px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dock-save{margin-left:6px;width:31px}.dock-save svg{width:17px;height:17px}.dock-controls{display:flex;justify-content:center;align-items:center;gap:16px}.dock-play{width:35px;height:35px;background:var(--ink);color:white}.dock-play:hover{background:var(--blue)}.dock-play svg{width:18px;height:18px}.dock-controls>.icon-button{height:32px;width:28px}.dock-controls>.icon-button svg{width:17px;height:17px}.dock-controls>.small-control{color:var(--muted)}.dock-controls>.is-on{color:var(--blue)}#repeat-one{font-size:8px;position:absolute;inset:auto 0 0;bottom:-3px}.dock-timeline{margin-top:5px;gap:8px}.dock-timeline time{font-size:9px}.dock-timeline input{height:2px}.dock-timeline input::-webkit-slider-thumb{width:7px;height:7px}.dock-extra{display:flex;justify-content:flex-end;align-items:center;gap:5px}.dock-extra input{width:77px;background:linear-gradient(to right,var(--ink) var(--progress,70%),#dfe2e6 var(--progress,70%))}.dock-extra input::-webkit-slider-thumb{background:var(--ink);width:8px;height:8px}.dock-extra svg{width:18px;height:18px}.dock-extra .control-divider{margin:0 13px}
dialog{border:1px solid var(--line);border-radius:12px;padding:27px;width:min(470px,calc(100vw - 32px));max-height:80svh;box-shadow:0 20px 100px #14243928;background:var(--paper);color:var(--ink)}dialog::backdrop{background:#111b334d;backdrop-filter:blur(4px)}dialog[open]{animation:enter .22s var(--ease)}dialog h2{margin-top:6px;font-size:31px}dialog>.section-head{margin-bottom:22px}dialog .queue-list li{border-top:1px solid var(--line)}dialog .queue-list button{padding:12px 0}dialog .queue-track-copy strong{font-size:13px}.notice{position:fixed;bottom:117px;left:50%;transform:translate(-50%,8px);background:var(--ink);color:white;padding:12px 19px;border-radius:6px;font-size:13px;opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;z-index:50;max-width:calc(100vw - 30px)}.notice.visible{opacity:1;transform:translate(-50%,0)}
@keyframes enter{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}@keyframes signal{from{transform:scaleY(.5)}to{transform:scaleY(1)}}
@media(min-width:1600px){.listening-room{padding-top:54px;padding-bottom:54px}.hero-controls{margin-top:30px}.now-track{margin-top:37px}.album-label strong{font-size:35px}.mood-card{height:138px}.up-next{padding-left:40px}.queue-list li button{padding:13px 0}.queue-track-copy strong{font-size:14px}.queue-track-copy small{font-size:12px}}
@media(max-width:1100px){.header{gap:24px;padding:0 4%}.brand{font-size:30px}.header nav{gap:23px}.search{width:220px}.listening-room{grid-template-columns:minmax(230px,1fr) minmax(290px,1.1fr);padding:35px 4%;gap:6%}.up-next{display:none}.moods,.library{padding-left:4%;padding-right:4%}.mood-grid{gap:13px}.mood-card{padding:17px 15px;height:103px}.mood-card h3{font-size:20px}.mood-play{right:12px;width:30px;height:30px;top:calc(50% - 15px)}.mood-card .mood-meta{font-size:9px}.dock{gap:20px;padding-left:4%;padding-right:4%;grid-template-columns:minmax(180px,1fr) minmax(225px,1fr) 150px}.dock-extra .text-button>span:last-child,.dock-extra .control-divider{display:none}.dock-extra input{width:58px}.dock-save{display:none}.dock-controls{gap:12px}.table-head,.track-row{grid-template-columns:32px minmax(150px,1fr) 150px 48px 35px;gap:8px}}
@media(max-width:700px){.header{min-height:114px;flex-wrap:wrap;padding:17px 22px 0;gap:0}.brand{font-size:31px}.header nav{order:3;width:100%;gap:28px;justify-content:center;margin-top:5px}.nav-link{line-height:47px;font-size:13px}.nav-link.active:after{bottom:6px}.search{width:40px;height:37px;padding:9px;border-color:transparent}.search input,.search kbd{display:none}.search:focus-within{position:absolute;top:19px;left:21px;right:21px;width:auto;background:var(--paper);z-index:3;border-color:var(--blue)}.search:focus-within input{display:block}.search:focus-within kbd{display:none}.search:has(input:not(:placeholder-shown)){width:125px;border-color:var(--line)}.search:has(input:not(:placeholder-shown)) input{display:block}.search>span{display:block}.listening-room{display:flex;flex-direction:column;gap:24px;padding:25px 24px 27px;min-height:0}.album{width:min(100%,310px)}.album-label{inset:25px 24px auto}.album-label strong{font-size:31px}.hero-player{width:100%;max-width:420px;text-align:center}.eyebrow{justify-content:center;margin-bottom:10px;font-size:9px}.hero-player h1{font-size:42px;letter-spacing:-1.5px}.collection-subtitle{font-size:13px;margin-top:7px}.now-track{margin-top:22px}.now-track h2{font-size:18px}.now-track .overline{font-size:9px}.now-track p{font-size:12px}.hero-controls{justify-content:center;margin-top:17px;gap:15px}.primary{width:51px;height:51px;margin-right:5px}.hero-controls .text-button{width:40px;padding:8px}.hero-controls .text-button>span:last-child{display:none}.hero-controls .control-divider{margin:0 4px}.timeline{margin-top:18px}.player-hint{font-size:10px}.moods{padding:23px 20px 23px}.moods>.section-head{margin-bottom:15px}.section-head h2{font-size:24px}.moods .muted{display:none}.mood-grid{grid-template-columns:1fr 1fr;gap:12px}.mood-card{height:105px;padding:18px 13px}.mood-card h3{font-size:22px;line-height:1}.mood-play{width:23px;height:23px;right:12px;top:auto;bottom:16px}.mood-play svg{width:11px;height:11px}.mood-card .mood-meta{font-size:9px;display:block;line-height:1.7;padding-right:20px}.mood-meta>span:nth-child(2){display:none}.mood-meta>span:last-child{display:block}.library{padding:17px 16px 26px}.library-heading{padding:0 4px;margin-bottom:17px}.library-heading h2{font-size:28px}.library-heading p{font-size:11px}.outline-button{padding:8px 12px;font-size:11px}.library-tools{padding:0 4px 13px;flex-wrap:wrap;gap:10px}.filters{gap:4px}.filter{padding:6px 9px;font-size:10px}.library-total{font-size:10px}.table-head{display:none}.tracks{padding-top:8px}.track-row{grid-template-columns:24px minmax(130px,1fr) 32px 32px;gap:6px;min-height:67px}.track-mood{display:none}.track-number{width:24px}.track-number .number{font-size:10px}.track-copy strong{font-size:12px}.track-copy small{font-size:9px}.track-name{gap:9px}.track-name img{width:35px;height:35px}.track-time{font-size:10px;margin:0}.track-save{width:32px;height:44px}.track-save svg{width:16px;height:16px}.footer{padding:26px 22px 122px;flex-wrap:wrap;gap:12px;font-size:10px}.footer>span:nth-child(2){width:100%;order:3}.footer>span:last-child{margin-left:auto}.dock{min-height:78px;display:flex;justify-content:space-between;gap:12px;padding:11px 16px max(11px,env(safe-area-inset-bottom));background:#fafbfd}.dock-info{gap:10px;flex:1;min-width:0}.dock-info>img{width:43px;height:43px}.dock-info strong{font-size:11px}.dock-info>div>span{font-size:9px}.dock-extra,.dock-timeline,.dock-controls .small-control,.dock-controls [data-action=previous]{display:none}.dock-controls{gap:6px}.dock-play{width:38px;height:38px}.dock-controls [data-action=next]{width:32px;height:44px}.dock-center{flex-shrink:0}.notice{bottom:94px;text-align:center;width:max-content;max-width:calc(100vw - 32px)}dialog{padding:23px}input[type=range]{margin:10px 0;height:4px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}
.mobile-search,.dock-controls>.mobile-queue{display:none}.queue-options{display:flex;gap:18px;margin:-5px 0 15px}.track-copy strong{font-size:14px}.track-copy small{font-size:11px}.queue-track-copy strong{font-size:13px}.queue-track-copy small{font-size:11px}.track-mood,.track-time{font-size:12px}
@media(max-width:700px){
  .dock{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;row-gap:6px;min-height:108px}
  .dock .dock-info{grid-column:1;grid-row:1}
  .dock .dock-center{display:contents}
  .dock .dock-controls{grid-column:2;grid-row:1}
  .dock .dock-timeline{display:flex;grid-column:1/-1;grid-row:2;gap:10px;margin:0;min-width:0}
  .dock-timeline time{font-size:10px;min-width:30px}
  .dock-timeline input[type=range]{height:24px;margin:0;background:transparent}
  .dock-timeline input::-webkit-slider-runnable-track{height:3px;border-radius:4px;background:linear-gradient(to right,var(--blue) var(--progress,0%),#dfe2e6 var(--progress,0%))}
  .dock-timeline input::-moz-range-track{height:3px;border-radius:4px;background:linear-gradient(to right,var(--blue) var(--progress,0%),#dfe2e6 var(--progress,0%))}
  .dock-timeline input::-webkit-slider-thumb{width:10px;height:10px;margin-top:-3.5px}
  .dock-timeline input::-moz-range-thumb{width:10px;height:10px}
  .footer{padding-bottom:calc(155px + env(safe-area-inset-bottom))}
  .notice{bottom:calc(125px + env(safe-area-inset-bottom))}
}
@media(max-width:700px){.mobile-search{display:flex}.header .search{display:none}.header .search.is-open,.header .search.is-open:focus-within,.header .search.is-open:has(input:not(:placeholder-shown)){display:flex;position:absolute;top:18px;left:21px;right:65px;width:auto;background:var(--paper);z-index:3;border-color:var(--line)}.header .search.is-open input{display:block;font-size:14px}.dock-controls>.mobile-queue{display:flex;width:28px}.dock-controls{gap:3px}.dock-info strong{font-size:12px}.dock-info>div>span{font-size:10px}.track-copy strong{font-size:13px}.track-copy small{font-size:10px}.track-time{font-size:11px}}