:root{--color-green:#1ed760;--color-near-black:#121212;--color-dark-surface:#181818;--color-mid-dark:#1f1f1f;--text-base:#fff;--text-silver:#b3b3b3;--text-near-white:#cbcbcb;--text-light:#fdfdfd;--text-negative:#f3727f;--text-warning:#ffa42b;--text-announcement:#539df5;--color-dark-card:#252525;--color-mid-card:#272727;--color-border-gray:#4d4d4d;--color-light-border:#7c7c7c;--color-separator:#b3b3b3;--color-light-surface:#eee;--color-green-border:#1db954;--shadow-heavy:#00000080 0px 8px 24px;--shadow-medium:#0000004d 0px 8px 8px;--shadow-inset-border:#121212 0px 1px 0px, #7c7c7c 0px 0px 0px 1px inset;--font-fallbacks:CircularSp-Arab, CircularSp-Hebr, CircularSp-Cyrl, CircularSp-Grek, CircularSp-Deva, "Helvetica Neue", helvetica, arial, "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "MS Gothic";--font-title:SpotifyMixUITitle, var(--font-fallbacks);--font-ui:SpotifyMixUI, var(--font-fallbacks);--space-1:1px;--space-2:2px;--space-3:3px;--space-4:4px;--space-5:5px;--space-6:6px;--space-8:8px;--space-10:10px;--space-12:12px;--space-14:14px;--space-15:15px;--space-16:16px;--space-20:20px;--radius-minimal:2px;--radius-subtle:4px;--radius-standard:6px;--radius-comfortable:8px;--radius-medium:10px;--radius-large:100px;--radius-pill:500px;--radius-full-pill:9999px;--radius-circle:50%}*,:before,:after{box-sizing:border-box}html{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;-webkit-text-size-adjust:100%}body{background:var(--color-near-black);color:var(--text-base);font-family:var(--font-ui);-webkit-font-smoothing:antialiased;margin:0;font-size:16px;font-weight:400;line-height:normal}img{max-width:100%;display:block}button,input{font:inherit;color:inherit}:focus-visible{outline:1px solid var(--text-base);outline-offset:var(--space-2)}.t-section-title{font-family:var(--font-title);margin:0;font-size:24px;font-weight:700}.t-feature{margin:0;font-size:18px;font-weight:600;line-height:1.3}.t-body-bold{font-size:16px;font-weight:700}.t-body{font-size:16px;font-weight:400}.t-caption-bold{font-size:14px;font-weight:700;line-height:1.5}.t-caption{font-size:14px;font-weight:400}.t-small-bold{font-size:12px;font-weight:700;line-height:1.5}.t-small{font-size:12px;font-weight:400}.muted{color:var(--text-silver)}.negative{color:var(--text-negative)}.ellipsis{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.btn{justify-content:center;align-items:center;gap:var(--space-8);border-radius:var(--radius-full-pill);letter-spacing:1.4px;text-transform:uppercase;cursor:pointer;border:none;font-size:14px;font-weight:700;line-height:1;display:inline-flex}.btn:disabled{cursor:default;color:var(--text-silver)}.btn-primary{border-radius:var(--radius-pill);background:var(--color-green);color:#000;min-height:48px;padding:0 43px}.btn-primary:disabled{background:var(--color-mid-dark)}.btn-dark{padding:var(--space-8) var(--space-16);background:var(--color-mid-dark);color:var(--text-base)}.btn-dark-large{border-radius:var(--radius-pill);background:var(--color-dark-surface);min-height:48px;color:var(--text-base);padding:0 43px}.btn-outlined{padding:var(--space-4) var(--space-16);color:var(--text-base);border:1px solid var(--color-light-border);background:0 0}.icon-btn{padding:var(--space-12);border-radius:var(--radius-circle);background:var(--color-mid-dark);color:var(--text-base);cursor:pointer;border:none;justify-content:center;align-items:center;display:inline-flex}.icon-btn:disabled{cursor:default;color:var(--text-silver)}.search-field{position:relative}.search-field .field-icon{top:50%;left:var(--space-16);color:var(--text-silver);pointer-events:none;position:absolute;transform:translateY(-50%)}.search-input{width:100%;padding:var(--space-12) 96px var(--space-12) 48px;border-radius:var(--radius-pill);background:var(--color-mid-dark);color:var(--text-base);box-shadow:var(--shadow-inset-border);border:1px solid #0000;font-size:16px}.search-input::placeholder{color:var(--text-silver)}.search-input:focus{outline:1px solid var(--text-base);border-color:#000}.card{background:var(--color-dark-surface);border-radius:var(--radius-comfortable);padding:var(--space-16)}.progress{height:var(--space-4);border-radius:var(--radius-full-pill);background:var(--color-border-gray);overflow:hidden}.progress-fill{border-radius:var(--radius-full-pill);background:var(--color-green);height:100%;transition:width .3s}.app{min-height:100dvh}.main{padding:var(--space-16);padding-bottom:calc(80px + env(safe-area-inset-bottom))}.page{gap:var(--space-20);flex-direction:column;max-width:960px;display:flex}.nav{z-index:10;background:var(--color-near-black);padding:var(--space-8) 0 calc(var(--space-8) + env(safe-area-inset-bottom));position:fixed;inset:auto 0 0}.nav-brand{display:none}.nav-list{grid-template-columns:repeat(5,1fr);margin:0;padding:0;list-style:none;display:grid}.nav-item{align-items:center;gap:var(--space-4);width:100%;padding:var(--space-4) 0;color:var(--text-silver);cursor:pointer;background:0 0;border:none;flex-direction:column;font-size:12px;font-weight:400;display:flex}.nav-item[aria-current=page]{color:var(--text-base);font-weight:700}@media (width>=896px){.app{grid-template-columns:240px 1fr;display:grid}.main{padding:var(--space-20)}.nav{height:100dvh;padding:var(--space-20) var(--space-12);align-self:start;position:sticky;inset:0 auto auto}.nav-brand{padding:0 var(--space-12) var(--space-20);display:block}.nav-list{gap:var(--space-4);flex-direction:column;display:flex}.nav-item{gap:var(--space-16);padding:var(--space-8) var(--space-12);flex-direction:row;font-size:14px}.nav-item:hover{color:var(--text-base)}}.onboarding{min-height:100dvh;padding:var(--space-20) var(--space-16);place-items:center;display:grid}.onboarding-inner{gap:var(--space-20);flex-direction:column;width:100%;max-width:420px;display:flex}.onboarding-form{gap:var(--space-12);flex-direction:column;display:flex}.onboarding p{margin:0}.onboarding-intro{gap:var(--space-8);flex-direction:column;display:flex}.profile-header{align-items:center;gap:var(--space-16);display:flex}.profile-header p{margin:var(--space-4) 0 0}.avatar{border-radius:var(--radius-circle);background:var(--color-dark-card);object-fit:cover;width:64px;height:64px;font-family:var(--font-title);box-shadow:var(--shadow-heavy);flex:none;place-items:center;font-size:24px;font-weight:700;display:grid}.sync-row{justify-content:space-between;align-items:center;gap:var(--space-12);display:flex}.sync-text{gap:var(--space-8);flex-direction:column;flex:1;min-width:0;display:flex}.now-playing{align-items:center;gap:var(--space-12);display:flex}.now-playing-label{color:var(--color-green)}.section{gap:var(--space-12);flex-direction:column;display:flex}.section-head{justify-content:space-between;align-items:baseline;gap:var(--space-12);display:flex}.track-list{margin:0 calc(var(--space-8) * -1);padding:0;list-style:none}.track-row{align-items:center;gap:var(--space-12);padding:var(--space-8);border-radius:var(--radius-standard);grid-template-columns:48px minmax(0,1fr) auto;display:grid}.track-row:hover{background:var(--color-mid-dark)}.track-text{gap:var(--space-2);flex-direction:column;min-width:0;display:flex}.art{border-radius:var(--radius-standard);background:var(--color-dark-card);object-fit:cover;width:48px;height:48px}.empty{padding:var(--space-20) var(--space-16);text-align:center}.empty p{margin:0}.account{justify-content:space-between;align-items:center;gap:var(--space-12);flex-wrap:wrap;display:flex}.stat-grid{gap:var(--space-12);grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.stat-card{gap:var(--space-4);flex-direction:column;display:flex}.link-btn{color:var(--color-light-border);cursor:pointer;background:0 0;border:none;flex:none;padding:0;font-size:14px;font-weight:700}.link-btn:hover{color:var(--text-base)}.artist-image{border-radius:var(--radius-circle);background:var(--color-dark-card);object-fit:cover;width:48px;height:48px;font-family:var(--font-title);color:var(--text-silver);flex:none;place-items:center;font-size:18px;font-weight:700;display:grid}.artist-image.fluid{aspect-ratio:1;width:100%;height:auto;box-shadow:var(--shadow-medium)}.artist-grid{gap:var(--space-12);grid-template-columns:repeat(5,minmax(0,120px));margin:0;padding:0;list-style:none;display:grid}.artist-cell{align-items:center;gap:var(--space-4);text-align:center;flex-direction:column;min-width:0;display:flex}.artist-cell .artist-image{margin-bottom:var(--space-4)}.artist-cell .ellipsis{max-width:100%}.page-head{gap:var(--space-4);flex-direction:column;display:flex}.page-head p{margin:0}.filters{gap:var(--space-8);flex-direction:column;display:flex}.pill-group{gap:var(--space-8);scrollbar-width:none;display:flex;overflow-x:auto}.pill-group::-webkit-scrollbar{display:none}.pill{padding:var(--space-8) var(--space-16);background:var(--color-mid-dark);color:var(--text-base);flex:none}.pill-keep-case{text-transform:none;letter-spacing:.14px}.pill[aria-pressed=true]{background:var(--color-green);color:#000}.rank-list{margin:0 calc(var(--space-8) * -1);padding:0;list-style:none}.rank-row{align-items:center;gap:var(--space-12);padding:var(--space-8);border-radius:var(--radius-standard);grid-template-columns:24px 48px minmax(0,1fr) auto;display:grid}.rank-row:hover{background:var(--color-mid-dark)}.rank{text-align:right;font-variant-numeric:tabular-nums}.heatmap{gap:var(--space-8);flex-direction:column;display:flex}.heatmap p{margin:0}.heatmap-scroll{scrollbar-width:none;overflow-x:auto}.heatmap-scroll::-webkit-scrollbar{display:none}.heatmap-scroll svg{display:block}.heatmap-foot{justify-content:space-between;align-items:center;gap:var(--space-8);flex-wrap:wrap;display:flex}.week-hour{width:100%;max-width:640px;height:auto;display:block}.hm-text{fill:var(--text-silver);font-size:10px}.hm-0{fill:var(--color-mid-dark)}.hm-1,.hm-2,.hm-3,.hm-4{fill:var(--color-green)}.hm-1{fill-opacity:.25}.hm-2{fill-opacity:.5}.hm-3{fill-opacity:.75}.hm-4{fill-opacity:1}.hm-selected{stroke:var(--text-base);stroke-width:1px}.legend{align-items:center;gap:var(--space-6);display:flex}.stat-card .ellipsis{display:block}.list-row,.popularity-row{align-items:center;gap:var(--space-12);padding:var(--space-8);border-radius:var(--radius-standard);grid-template-columns:48px minmax(0,1fr) auto;display:grid}.list-row:hover{background:var(--color-mid-dark)}.popularity{gap:var(--space-16);flex-direction:column;display:flex}.popularity-score{gap:var(--space-8);flex-direction:column;display:flex}.popularity-score p{margin:0}.popularity-score .progress{height:var(--space-8)}.popularity-extremes{margin:0 calc(var(--space-8) * -1);flex-direction:column;display:flex}.popularity-extremes dd{margin:0}.favorites-chart{gap:var(--space-12);flex-direction:column;display:flex}.chart-placeholder{height:220px}.chart-box{margin-left:calc(var(--space-8) * -1)}.month-row{align-items:center;gap:var(--space-12);padding:var(--space-8);border-radius:var(--radius-standard);grid-template-columns:88px 48px minmax(0,1fr) auto;display:grid}.month-row:hover{background:var(--color-mid-dark)}.month-empty{grid-column:2/-1}.date-fields{gap:var(--space-12);grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.date-field{gap:var(--space-4);flex-direction:column;min-width:0;display:flex}.date-input{width:100%;min-width:0;padding:var(--space-12) var(--space-16);border-radius:var(--radius-pill);background:var(--color-mid-dark);color:var(--text-base);box-shadow:var(--shadow-inset-border);--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;border:1px solid #0000;font-size:16px}.date-input:focus{outline:1px solid var(--text-base);border-color:#000}.wrapped-inline{gap:var(--space-16);flex-direction:column;width:100%;max-width:560px;display:flex}.wsp{gap:var(--space-20);padding:var(--space-16);border-radius:var(--radius-comfortable);background:var(--color-dark-surface);box-shadow:var(--shadow-medium);flex-direction:column;display:flex}.wsp h2,.wsp h3,.wsp p{margin:0}.wsp-head{gap:var(--space-4);flex-direction:column;display:flex}.wsp-stat{gap:var(--space-4);min-width:0;padding:var(--space-16);border-radius:var(--radius-comfortable);background:var(--color-dark-card);flex-direction:column;display:flex}.wsp-section{gap:var(--space-12);flex-direction:column;display:flex}.wsp-artists{gap:var(--space-12);grid-template-columns:repeat(5,minmax(0,1fr));display:grid}.wsp-artist{align-items:center;gap:var(--space-4);min-width:0;color:var(--text-silver);cursor:pointer;background:0 0;border:none;flex-direction:column;padding:0;display:flex}.wsp-artist .artist-image{margin-bottom:var(--space-4)}.wsp-artist-name{max-width:100%}.wsp-artist[aria-pressed=true] .artist-image{outline:2px solid var(--color-green);outline-offset:var(--space-3)}.wsp-artist[aria-pressed=true] .wsp-artist-name{color:var(--text-base);font-weight:700}.wsp-artist:hover .wsp-artist-name{color:var(--text-base)}.wsp-detail{gap:var(--space-8);padding:var(--space-16);border-radius:var(--radius-comfortable);background:var(--color-dark-card);flex-direction:column;animation:.18s ease-out card-in;display:flex}.wsp-detail-head{justify-content:space-between;align-items:baseline;gap:var(--space-12);min-width:0;display:flex}.wsp-tracks{margin:0 calc(var(--space-8) * -1);padding:0;list-style:none}.wsp-track-item{border-radius:var(--radius-standard)}.wsp-track-item.open{background:var(--color-dark-card)}.wsp-track{align-items:center;gap:var(--space-12);width:100%;padding:var(--space-8);border-radius:var(--radius-standard);color:var(--text-base);text-align:left;cursor:pointer;background:0 0;border:none;grid-template-columns:24px 48px minmax(0,1fr) auto;display:grid}.wsp-track-item:not(.open) .wsp-track:hover{background:var(--color-mid-dark)}.wsp-track-detail{padding:0 var(--space-8) var(--space-12) calc(24px + 48px + var(--space-12) * 2 + var(--space-8))}@media (width<=575px){.wsp{box-shadow:none;background:0 0;padding:0}.wsp-stat,.wsp-detail,.wsp-track-item.open{background:var(--color-dark-surface)}}.wrapped-inline p{margin:0}.wrapped-actions{align-items:center;gap:var(--space-12);flex-wrap:wrap;display:flex}.wrapped-actions .btn{flex:auto}.wrapped-overlay{z-index:50;background:var(--color-near-black);place-items:center;display:grid;position:fixed;inset:0}.wrapped-frame{gap:var(--space-16);width:100%;height:100%;padding:calc(var(--space-12) + env(safe-area-inset-top)) var(--space-16) calc(var(--space-16) + env(safe-area-inset-bottom));outline:none;flex-direction:column;display:flex}@media (width>=576px){.wrapped-frame{width:420px;height:min(760px,100dvh - 40px);padding:var(--space-16);border-radius:var(--radius-comfortable);background:var(--color-dark-surface);box-shadow:var(--shadow-heavy)}}.wrapped-top,.wrapped-bottom{align-items:center;gap:var(--space-12);display:flex}.wrapped-bottom{justify-content:space-between}.segments{gap:var(--space-4);flex:1;display:flex}.segment{height:var(--space-4);border-radius:var(--radius-full-pill);background:var(--color-border-gray);flex:1}.segment.on{background:var(--color-green)}.wrapped-card{justify-content:center;gap:var(--space-16);cursor:pointer;-webkit-user-select:none;user-select:none;flex-direction:column;flex:1;min-height:0;animation:.18s ease-out card-in;display:flex;overflow-y:auto}.wrapped-card.static{cursor:default}.wrapped-card.static .btn-primary{flex:none}.wrapped-card p,.wrapped-card h2{margin:0}@keyframes card-in{0%{opacity:0}}.wc-hero{width:min(200px,55vw)}.wc-hero .artist-image{box-shadow:var(--shadow-heavy)}.wc-hero.square .art{aspect-ratio:1;width:100%;height:auto;box-shadow:var(--shadow-heavy)}.wc-list{gap:var(--space-8);flex-direction:column;margin:0;padding:0;list-style:none;display:flex}.wc-list-row{gap:var(--space-12);grid-template-columns:16px minmax(0,1fr) auto;align-items:baseline;display:grid}.weekday-bars{width:100%;max-width:320px;height:auto;display:block}.bar{fill:var(--color-border-gray)}.bar-max{fill:var(--color-green)}.wc-new{gap:var(--space-12);grid-template-columns:repeat(3,minmax(0,96px));margin:0;padding:0;list-style:none;display:grid}.wc-new-item{align-items:center;gap:var(--space-4);text-align:center;flex-direction:column;min-width:0;display:flex}.wc-new-item .ellipsis{max-width:100%}.wc-meter{height:var(--space-8)}.wrapped-card.static{justify-content:flex-start;overflow:hidden}.wc-preview{flex:1;min-height:120px;position:relative}.wc-preview p{place-items:center;display:grid;position:absolute;inset:0}.wc-preview img{border-radius:var(--radius-comfortable);max-width:100%;max-height:100%;box-shadow:var(--shadow-heavy);margin:auto;position:absolute;inset:0}@media (prefers-reduced-motion:reduce){.progress-fill{transition:none}.wrapped-card,.wsp-detail{animation:none}}