:root{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--bg:#fff;--surface:#f5f5f7;--ink:#242426;--muted:#6b6b76;--line:#e6e6ec;--primary:#4659c7;--glass:#ffffffed;color:var(--ink);background:var(--bg);font-synthesis:none}html[data-theme=dark]{--bg:#000;--surface:#111116;--ink:#f5f5f7;--muted:#a7a7b5;--line:#ffffff1a;--primary:#8b9dff;--glass:#08080bed}*{box-sizing:border-box}body{margin:0}html{scroll-behavior:smooth;scroll-padding-top:100px}a{color:inherit;text-decoration:none}img{display:block;max-width:100%}h1,h2,p{margin:0}button,select{font:inherit}a,summary,select{-webkit-tap-highlight-color:transparent}a:focus-visible,summary:focus-visible,select:focus-visible{outline:3px solid var(--primary);outline-offset:5px}section[id]{scroll-margin-top:100px}.wrap{width:min(1180px,calc(100% - 80px));margin-inline:auto}.logo{width:94px;height:auto}html[data-theme=dark] .logo{filter:brightness(0) invert(1)}.header{position:sticky;top:0;z-index:10;height:76px;padding:0 max(40px,calc((100vw - 1180px)/2));display:flex;align-items:center;justify-content:space-between;gap:24px;background:var(--glass);backdrop-filter:blur(20px);border-bottom:1px solid var(--line)}.header nav{display:flex;gap:28px;font-size:13px;color:var(--muted)}.header nav a:hover{color:var(--ink)}.button{display:inline-flex;align-items:center;justify-content:center;gap:14px;padding:15px 25px;border-radius:99px;background:var(--primary);color:#fff;font-size:14px;font-weight:600;transition:filter .2s}.button:hover{filter:brightness(1.1)}html[data-theme=dark] .button{color:#111322}.button.small{padding:10px 17px;font-size:12px}.eyebrow{display:block;font-size:13px;font-weight:600;letter-spacing:.02em;margin-bottom:20px;color:var(--muted)}.hero{text-align:center;padding:74px 0 0;overflow:hidden}.hero h1{font-size:clamp(58px,7.8vw,112px);letter-spacing:-.065em;line-height:1.02;font-weight:750}.hero h1 em{font-style:normal;color:var(--primary)}.hero>p{font-size:19px;color:var(--muted);line-height:1.6;margin:26px 20px}.portrait-stage{display:flex;align-items:center;justify-content:center;gap:18px;width:min(1340px,110%);margin:64px auto 0;height:360px;position:relative;left:50%;transform:translateX(-50%);margin-left:0}.portrait{position:relative;overflow:hidden;flex:1;min-width:0;border-radius:16px;height:82%;background:var(--surface)}.portrait img{width:100%;height:100%;object-fit:cover;object-position:center 25%;transition:transform .7s}.portrait:hover img{transform:scale(1.035)}.portrait:after{content:'';position:absolute;inset:50% 0 0;background:linear-gradient(transparent,#0009)}.portrait span{position:absolute;bottom:19px;left:20px;color:white;z-index:1;font-size:14px;font-weight:600}.p1,.p3{height:93%}.p2{height:100%}.hero-caption{display:flex;justify-content:space-between;width:min(1180px,calc(100% - 80px));margin:25px auto 0;color:var(--muted);font-size:12px}.intro{text-align:center;padding:130px 0}.intro h2,h2{font-size:clamp(36px,4.5vw,62px);letter-spacing:-.045em;line-height:1.08;font-weight:720}.intro p{max-width:710px;margin:28px auto 0;font-size:19px;line-height:1.7;color:var(--muted)}.intro p+p{font-size:16px;max-width:630px;margin-top:18px}.section-top{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:38px}.section-top p{color:var(--muted);font-size:15px;line-height:1.7}.cover-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px;margin-bottom:25px}.cover-grid img{aspect-ratio:1;object-fit:cover;border-radius:10px}.cover-grid span{display:block;font-size:12px;margin-top:10px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.text-link{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--primary);font-weight:600}.text-link:hover{text-decoration:underline;text-underline-offset:4px}.feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:100px}.feature{border-radius:24px;padding:44px;overflow:hidden;min-width:0}.feature h2{font-size:clamp(36px,4vw,54px)}.feature>p{font-size:16px;line-height:1.6;margin-top:22px;max-width:370px;color:var(--muted)}.local,.personal{background:var(--surface)}.chart-pair{display:flex;justify-content:center;gap:16px;margin:40px 0 32px}.chart{width:46%;aspect-ratio:1;border-radius:12px;padding:16px;background:#42306d;color:#fff;display:flex;flex-direction:column;overflow:hidden}.chart img{width:50px;margin-bottom:16px}.chart strong{font-size:30px;letter-spacing:-1px}.chart span{font-size:13px;margin-top:3px}.chart i{flex:1;min-height:25px;margin-top:16px;background:repeating-linear-gradient(90deg,#fff5 0 8px,transparent 8px 17px);border-radius:40%}.chart.two{background:#24585c;transform:translateY(15px)}.library-art{position:relative;height:250px;display:grid;place-items:center}.record{height:190px;width:190px;border-radius:50%;background:repeating-radial-gradient(#17171d 0 2px,#29292f 3px 4px);display:grid;place-items:center;box-shadow:0 15px 30px #0002}.record span{width:68px;height:68px;border-radius:50%;background:#ffba92;color:#32221a;display:grid;place-items:center;font-size:40px;font-weight:750}.saved{position:absolute;bottom:10px;display:flex;align-items:center;gap:15px;width:100%;padding:17px 20px;border-radius:12px;box-shadow:0 10px 40px #0001;background:var(--bg)}.saved>span{font-size:30px;color:var(--primary)}.saved strong,.saved small{display:block;font-size:13px}.saved small{font-size:11px;color:var(--muted);margin-top:5px}.saved b{margin-left:auto;color:var(--primary)}.film{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:70px;margin-top:120px}.film-visual{height:520px;border-radius:20px;overflow:hidden;position:relative;background:#19191f}.film-visual img{width:100%;height:100%;object-fit:cover;object-position:center 25%}.film-visual:after{content:'';position:absolute;inset:50% 0 0;background:linear-gradient(transparent,#000b)}.film-visual>span{position:absolute;bottom:28px;left:28px;right:28px;color:white;z-index:1;font-size:15px}.film-copy p,.radio p{font-size:17px;line-height:1.7;color:var(--muted);margin:25px 0}.inline-links{display:flex;flex-wrap:wrap;gap:24px}.radio{margin-top:120px;padding:64px;border-radius:24px;background:var(--surface);display:grid;grid-template-columns:1.2fr 1fr;align-items:center;gap:60px}.radio h2{font-size:clamp(36px,4vw,54px)}.wave{height:240px;display:flex;align-items:center;justify-content:center;gap:10px}.wave i{display:block;height:var(--h);width:14px;background:var(--primary);border-radius:99px}.account{text-align:center;padding:130px 0 110px}.account p{max-width:640px;margin:25px auto;color:var(--muted);line-height:1.7;font-size:17px}.device-line{display:flex;justify-content:center;gap:40px;margin:50px 0 0;color:var(--ink);font-size:14px;font-weight:600}.account p.fine{font-size:12px;margin:18px auto}.faq{display:grid;grid-template-columns:.9fr 1.1fr;gap:70px;padding:60px 0 110px;border-top:1px solid var(--line)}.faq h2{font-size:40px}.faq details{border-bottom:1px solid var(--line)}.faq summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 0;font-size:16px;font-weight:600;cursor:pointer}.faq summary::-webkit-details-marker{display:none}.faq summary span{font-size:24px;font-weight:400;color:var(--muted);transition:transform .2s}.faq details[open] summary span{transform:rotate(45deg)}.faq details p{padding:0 30px 22px 0;color:var(--muted);font-size:14px;line-height:1.8}.closing{text-align:center;background:var(--surface);padding:90px 20px}.closing .logo{margin:0 auto 30px;width:115px}.closing h2{margin-bottom:30px}.footer{display:grid;grid-template-columns:1fr auto auto;gap:35px;padding:55px 0 30px;align-items:start}.footer .logo{width:76px}.footer p{color:var(--muted);font-size:12px;margin-top:14px}.footer nav{display:flex;gap:24px;font-size:12px}.appearance{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:12px}.appearance select{color:var(--ink);background:var(--surface);border:1px solid var(--line);padding:8px;border-radius:8px;font-size:12px}.footer small{grid-column:1/-1;border-top:1px solid var(--line);padding-top:22px;color:var(--muted);font-size:11px}.skip{position:absolute;top:-100px}.skip:focus{top:10px;left:10px;z-index:30;padding:12px;background:var(--bg)}
@media(max-width:1000px){.header{padding-inline:30px}.wrap{width:calc(100% - 60px)}.portrait-stage{height:300px;gap:12px}.feature{padding:30px}.feature-grid{gap:18px}.film{gap:35px}.film-visual{height:430px}.radio{padding:40px;gap:25px}.faq{gap:35px}.footer{grid-template-columns:1fr auto}.appearance{grid-column:2}.footer nav{flex-wrap:wrap}.chart strong{font-size:25px}}
@media(max-width:700px){.header{height:66px;padding-inline:20px}.header .logo{width:80px}.header nav{display:none}.wrap{width:calc(100% - 40px)}.hero{padding-top:55px}.hero h1{font-size:60px}.hero>p{font-size:16px}.portrait-stage{width:125%;height:250px;gap:10px;margin-top:45px}.portrait{flex:0 0 29%}.p0,.p4{display:none}.portrait span{font-size:11px;left:12px;bottom:14px}.hero-caption{width:calc(100% - 40px);gap:20px;font-size:10px}.intro{padding:85px 0}.intro p{font-size:16px}.intro p+p{font-size:14px}.section-top{display:block}.section-top p{margin-top:22px}.cover-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 12px}.feature-grid{grid-template-columns:1fr;margin-top:65px}.feature{padding:30px}.chart-pair{max-width:360px;margin-inline:auto}.library-art{max-width:350px;margin:auto}.film{grid-template-columns:1fr;margin-top:65px;gap:30px}.film-visual{height:400px}.film-copy p{font-size:15px}.radio{margin-top:65px;padding:30px;grid-template-columns:1fr}.wave{height:130px;grid-row:1}.wave i{width:12px}.radio p{font-size:15px}.account{padding:85px 0 65px}.account p{font-size:15px}.device-line{gap:25px}.faq{grid-template-columns:1fr;padding:40px 0 65px;gap:20px}.faq h2{font-size:34px}.faq summary{font-size:14px}.closing{padding:65px 20px}.footer{grid-template-columns:1fr;gap:28px}.footer nav{gap:20px}.appearance{grid-column:1}.footer small{grid-column:1}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

.record span img{width:48px;height:auto}
/* Chart markup is generated from the web player's chartArt renderer. */
.chart-pair{gap:16px;align-items:center}.chart-pair>a{display:block;width:calc(50% - 8px);min-width:0}.chart-pair>a:nth-child(2){transform:translateY(15px)}
.chart-art{--chart-color:#b39aff;--artwork-logo-width:28%;container-type:inline-size;position:relative;display:block;width:100%;aspect-ratio:1;overflow:hidden;text-align:left;border-radius:9px;background:#231b3b;color:#fff;box-shadow:inset 0 0 0 1px #ffffff12}
.chart-cover-top>img,.chart-art>img.city-chart-logo{position:absolute;left:7%;top:7%;width:var(--artwork-logo-width);height:auto}
.chart-cover-type{display:flex;flex-direction:column;position:absolute;left:7%;right:7%;top:24%;gap:5cqw;align-items:flex-start}
.chart-cover-type>strong,.city-chart-top strong{font-size:clamp(16px,12cqw,40px);font-weight:750;line-height:1.03;letter-spacing:-.045em}
.chart-cover-type>span,.city-chart-heading>span{font-size:clamp(11px,7.5cqw,25px);font-weight:550;line-height:1.18;letter-spacing:-.02em;color:#ffffffd9;text-wrap:pretty}
.chart-mosaic{position:absolute;left:7%;right:7%;bottom:7%;height:32%;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr));border-radius:2px;overflow:hidden;background:#ffffff08}
.chart-mosaic i{background:var(--chart-color);opacity:var(--tile)}
.city-chart-art{--city-ink:#266d77;--city-soft:#dbe8e4;background:#f1efea;color:#171719}
.city-chart-heading{position:absolute;left:7%;right:7%;top:24%;display:flex;flex-direction:column;align-items:flex-start;gap:5cqw}.city-chart-heading>span{color:#28282b}
.city-rhythm{position:absolute;left:7%;right:7%;bottom:7%;height:32%;display:flex;align-items:flex-end;gap:2.3%;overflow:hidden;background:var(--city-soft);border-radius:2px;padding:0 4%;isolation:isolate}
.city-rhythm:before{content:'';position:absolute;left:-5%;right:-5%;top:46%;height:34%;border-top:1px solid #ffffffaa;border-bottom:1px solid #ffffffaa;transform:rotate(-18deg);z-index:2}
.city-rhythm i{display:block;flex:1;height:var(--rise);background:var(--city-ink);opacity:var(--shade);border-radius:20px 20px 0 0;position:relative}.city-rhythm i:nth-child(3n){border-radius:1px}.city-rhythm i:nth-child(4n):after{content:'';position:absolute;inset:15% 35% 0;background:repeating-linear-gradient(to bottom,#ffffff70 0 2px,transparent 2px 9px)}
/* Restrained entrance and interaction motion; no continuous movement. */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}.reveal.is-visible{opacity:1;transform:none}
.hero h1{animation:hero-arrive .85s cubic-bezier(.2,.7,.2,1) both}.hero>p{animation:hero-arrive .85s .08s both}.hero>.button{animation:hero-arrive .85s .15s both}.cover-grid img{transition:filter .3s,box-shadow .3s}.cover-grid a:hover img{filter:brightness(1.06);box-shadow:0 8px 25px #0002}.button:active{filter:brightness(.92)}
.faq details[open] p{animation:answer-in .25s ease-out both}
@keyframes hero-arrive{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes answer-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}
.portrait-stage-second{margin-top:18px;height:300px}.portrait-stage-second .p0,.portrait-stage-second .p4{height:100%}.portrait-stage-second .p1,.portrait-stage-second .p3{height:90%}.portrait-stage-second .p2{height:82%}.portrait img.portrait-transition{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;pointer-events:none}.portrait-stage .portrait:after{z-index:1}.portrait-stage .portrait>span{z-index:2}
.about-cinema{position:relative;isolation:isolate;overflow:hidden;border-radius:22px;min-height:480px;aspect-ratio:2.3;background:#121218;margin-top:100px;color:#fff}.about-cinema>.promotion-poster,.about-cinema>.promotion-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .8s ease}.about-cinema>.promotion-film{opacity:0}.about-cinema.film-playing>.promotion-film{opacity:1}.about-cinema.film-playing>.promotion-poster{opacity:0}.about-cinema:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#0001 20%,#0003 55%,#0009);z-index:1;pointer-events:none}.about-cinema .promotion-center{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:35px;transform:translateY(45px);z-index:2;text-align:center}.promotion-center>img{width:120px;margin-bottom:18px}.promotion-center p{font-size:18px;font-weight:500;line-height:1.5;margin-bottom:20px;text-shadow:0 2px 20px #0008}.about-cinema .button{background:#fff;color:#18181d;font-size:13px;padding:12px 23px}.about-cinema+.feature-grid{margin-top:40px}
@media(max-width:1000px){.portrait-stage-second{height:260px}.about-cinema{min-height:400px}}
@media(max-width:700px){.portrait-stage,.portrait-stage-second{width:calc(100% - 40px);left:auto;transform:none;margin-inline:auto;justify-content:flex-start;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;height:225px}.portrait-stage .portrait{display:block;flex:0 0 42%;height:100%;scroll-snap-align:start}.portrait-stage-second{margin-top:12px;height:200px}.about-cinema{margin-top:65px;min-height:360px;aspect-ratio:1.1;border-radius:16px}.about-cinema .promotion-center{padding:20px;transform:translateY(32px)}.promotion-center>img{width:95px;margin-bottom:14px}.promotion-center p{font-size:15px}}
/* A single wordmark and sentence, scaled directly by scroll position. */
.hero{padding-top:72px}.hero-brand-stage{width:min(1060px,calc(100% - 48px));margin:0 auto;position:relative;padding:12px 0 18px;overflow:visible}.hero-brand-motion{transform:scale(var(--brand-scale,1));transform-origin:50% 35%;will-change:transform}.hero .hero-brand-title{display:flex;flex-direction:column;align-items:center;gap:32px;font-size:inherit;line-height:1.2;letter-spacing:normal;animation:none}.hero .hero-wordmark{width:clamp(240px,44vw,640px);height:auto;max-width:100%;animation:brand-arrive 1.1s cubic-bezier(.16,1,.3,1) both}.hero-brand-phrase{display:block;min-height:2.4em;max-width:100%;font-size:clamp(24px,3.3vw,44px);line-height:1.2;letter-spacing:-.035em;font-weight:550;color:var(--primary);text-wrap:balance}.hero>p{margin-top:8px}.hero-brand-stage+.hero>p{margin-top:8px}
@keyframes brand-arrive{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}
@media(max-width:700px){.hero{padding-top:50px}.hero-brand-stage{width:calc(100% - 40px);padding-top:12px;padding-bottom:4px}.hero .hero-brand-title{gap:26px}.hero .hero-wordmark{width:min(82vw,410px)}.hero-brand-phrase{font-size:clamp(23px,5.8vw,32px);min-height:2.4em;max-width:340px}.hero>p{font-size:14px;margin-top:4px}.hero>p br{display:none}}
@media(prefers-reduced-motion:reduce){.hero-brand-motion{transform:none!important;will-change:auto}.hero .hero-wordmark{animation:none!important}}

.hero-brand-description{margin:28px auto 20px;font-size:19px;line-height:1.6;color:var(--muted);font-weight:400;letter-spacing:normal}.hero-brand-stage{padding-bottom:0}@media(max-width:700px){.hero-brand-description{font-size:15px;margin:24px auto 20px;max-width:360px}}

/* Exact chart artwork rules from the Zamar player. */
.chart-art{--chart-color:#b4a0f5;position:relative;isolation:isolate;aspect-ratio:1;border-radius:12px;overflow:hidden;background:#27213e;color:#f9f7ff;padding:22px;display:flex;flex-direction:column;align-items:flex-start;box-shadow:inset 0 0 0 1px #ffffff10}
.chart-art>img{width:72px;height:auto;position:relative;z-index:2}.chart-art-label{font-size:8px;letter-spacing:1.8px;margin-top:22px;position:relative;z-index:2}.chart-art>strong{font-size:clamp(65px,8vw,140px);line-height:1;letter-spacing:-8px;font-weight:800;position:relative;z-index:2}.chart-art-region{font-size:17px;font-weight:650;line-height:1.2;margin-top:auto;max-width:90%;position:relative;z-index:2}
.chart-art i{position:absolute;z-index:0;width:110%;height:110%;border:28px solid var(--chart-color);border-radius:50%;top:12%;left:48%;opacity:.34;box-shadow:0 0 0 14px #ffffff09,0 0 0 38px #ffffff08;transform:rotate(-25deg)}
.chart-blue{background:#152d4a;--chart-color:#6dbde8}.chart-blue i{border-radius:22%;transform:rotate(35deg);left:40%;top:27%}
.chart-amber{background:#462a20;--chart-color:#f1b17b}.chart-amber i{border-radius:0;transform:rotate(-35deg);border-width:40px;left:50%}
.chart-green{background:#173c32;--chart-color:#7cceb0}.chart-green i{width:95%;height:95%;left:55%;top:40%;border-width:45px}
.charts-feature{display:grid;grid-template-columns:minmax(200px,280px) minmax(0,1fr);gap:36px;align-items:center;margin:24px 0 38px}.charts-feature .chart-art>strong{font-size:120px}.charts-feature-copy h1,.charts-feature-copy h2{font-size:clamp(30px,4vw,50px);letter-spacing:-1.5px;line-height:1.1;margin:12px 0 18px}.charts-feature-copy>p{color:var(--muted);font-size:14px;line-height:1.7;max-width:540px}.charts-feature-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:24px}.charts-meta{display:block;color:#9a9aaa;font-size:12px;margin-top:14px}.charts-note{font-size:11px;color:#92929e;line-height:1.6;margin:34px 0}
@media(min-width:1600px){.chart-cards{grid-template-columns:repeat(7,minmax(0,1fr))}.chart-art{padding:18px}.chart-art>strong{font-size:90px}}
@media(max-width:1100px){.chart-art{padding:17px}.chart-art-label{margin-top:16px;letter-spacing:1px}.chart-art-region{font-size:14px}.chart-art>strong{letter-spacing:-4px}}
@media(max-width:767px){.chart-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 14px}.charts-heading{align-items:flex-start;flex-direction:column;gap:12px}.charts-feature{grid-template-columns:145px minmax(0,1fr);gap:18px}.charts-feature .chart-art>strong{font-size:64px;letter-spacing:-4px}.charts-feature .chart-art{padding:13px}.charts-feature .chart-art-label{font-size:6px;margin-top:10px}.charts-feature .chart-art>img{width:48px}.charts-feature-copy h1,.charts-feature-copy h2{font-size:27px;letter-spacing:-.7px;margin:8px 0 12px}.charts-feature-copy>p{font-size:12px}.charts-feature-actions{gap:8px;margin-top:16px}.charts-feature-actions .pill{font-size:11px;padding:9px 12px}.charts-feature .chart-art-region{font-size:12px}.mobile-nav{grid-template-columns:repeat(7,minmax(0,1fr))}.mobile-nav a{font-size:9px}}
@media(max-width:450px){.charts-feature{grid-template-columns:1fr}.charts-feature>.chart-art,.charts-feature>div:first-child,.charts-feature>a:first-child{max-width:210px}.charts-feature .chart-art>strong{font-size:96px}}

/* Chart covers use their own dimensions, so no text can fall below the artwork. */
.chart-art{container-type:inline-size;display:grid;grid-template-rows:auto minmax(0,1fr) 42%;gap:0;width:100%;aspect-ratio:1;padding:7%;background:#231b3b;--chart-color:#b39aff;color:#fff;border-radius:9px;box-shadow:inset 0 0 0 1px #ffffff12}
.chart-cover-top{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0}
.chart-cover-top>span{font-size:clamp(6px,3.5cqw,10px);font-weight:650;letter-spacing:1.4px;line-height:1;color:#f1eaff}
.chart-cover-top>img{width:30%;height:auto;flex-shrink:0}
.chart-cover-type{display:flex;flex-direction:column;justify-content:center;gap:5px;min-height:0;padding:8px 0}
.chart-cover-type>strong{font-size:clamp(15px,12cqw,36px);line-height:1.06;letter-spacing:-.7px;font-weight:750}
.chart-cover-type>span{display:block;color:#fff;font-size:clamp(11px,8cqw,23px);font-weight:550;line-height:1.12;letter-spacing:-.3px;overflow-wrap:anywhere;text-wrap:balance}
.chart-mosaic{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr));overflow:hidden;background:#ffffff08;border-radius:3px;min-height:0}
.chart-art .chart-mosaic i{position:static;width:auto;height:auto;border:0;border-radius:0;box-shadow:none;transform:none;background:var(--chart-color);opacity:var(--tile)}
.chart-blue{background:#152d48;--chart-color:#89caff}.chart-amber{background:#422918;--chart-color:#f7bd79}.chart-green{background:#16382e;--chart-color:#88dfb8}.chart-rose{background:#421d33;--chart-color:#fba6cf}.chart-teal{background:#153b40;--chart-color:#85dce1}
.chart-card .card-title{font-size:14px;font-weight:550;white-space:normal;line-height:1.4;margin-top:10px;overflow:visible;text-overflow:clip;color:#f5f5f7}
.chart-card .card-desc{font-size:11px;line-height:1.5;white-space:normal;color:#b5b5c0;margin-top:4px}
.chart-cards{grid-template-columns:repeat(7,minmax(0,1fr));gap:22px 18px}
.charts-country-label{display:flex;align-items:center;gap:8px;font-size:12px;color:#dadbed;padding-bottom:4px}.charts-country-label svg{width:16px;height:16px}
.charts-section-description{font-size:12px;line-height:1.5;color:#b1b1bd;margin-top:7px}.charts-country-section{margin-top:36px}.charts-heading{border-bottom:1px solid var(--line);padding-bottom:26px}.charts-note{color:#ababba}
.charts-feature .chart-art{padding:7%}.charts-feature .chart-cover-type>strong{font-size:clamp(15px,12cqw,36px)}
@media(max-width:1400px){.chart-cards{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media(max-width:1100px){.chart-cards{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:767px){.chart-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 14px}.chart-art{padding:7%}.chart-card .card-title{font-size:13px}.chart-card .card-desc{font-size:11px}.charts-heading{gap:16px}}

/* Photography-led City Charts. The light artwork stays within the dark catalog. */
.city-chart-art{padding:0;grid-template-rows:38% 62%;background:#f1efea;color:#171719;overflow:hidden;border:1px solid #ffffff0d}
.city-chart-heading{padding:7% 8% 5%;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:5%}
.city-chart-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.city-chart-top strong{font-size:clamp(18px,12cqw,38px);font-weight:750;letter-spacing:-.055em;line-height:1.05;white-space:nowrap}
.city-chart-top img{width:27%;height:auto;object-fit:contain}
.city-chart-heading>span{font-size:clamp(13px,8.2cqw,27px);font-weight:650;letter-spacing:-.035em;line-height:1.15;overflow-wrap:normal}
.city-chart-photo{width:100%;height:100%;min-height:0;object-fit:cover;object-position:center}
.city-charts-section .chart-card .card-title{line-height:1.4;margin-top:10px}

/* Shared playlist logo placement, with an inset landscape city photograph. */
.chart-art{position:relative}
.chart-cover-top{flex-direction:row-reverse}
.chart-cover-top>img{position:absolute;left:7%;top:6%;width:21%;height:auto}
.city-chart-art{grid-template-rows:34% 66%;padding:0 4% 4%;border:0}
.city-chart-logo{position:absolute;z-index:2;left:7%;top:6%;width:21%;height:auto}
.city-chart-heading{padding:5% 3% 5%;justify-content:space-between;gap:0}
.city-chart-top{justify-content:flex-end;min-height:40%}
.city-chart-top strong{font-size:clamp(15px,9cqw,30px);letter-spacing:-.055em}
.city-chart-heading>span{font-size:clamp(13px,9cqw,30px);line-height:1.1;letter-spacing:-.045em;white-space:nowrap}
.city-chart-photo{aspect-ratio:1.5;object-position:center;border-radius:0}

/* City chart artwork uses typography only. */
.city-chart-art{grid-template-rows:1fr;padding:0 4% 4%}
.city-chart-heading{padding:5% 3% 7%;justify-content:space-between}
.city-chart-top{min-height:18%}
.city-chart-heading>span{white-space:normal;font-size:clamp(20px,15cqw,48px);line-height:1.04;max-width:95%}

/* One editorial alignment system across all chart covers. */
.chart-art,.charts-feature .chart-art{display:block;position:relative;padding:0;overflow:hidden;text-align:left}
.chart-cover-top{position:static}
.chart-cover-top>img,.city-chart-logo{left:7%;top:7%;width:21%}
.chart-cover-type{position:absolute;left:7%;right:7%;top:24%;padding:0;gap:5cqw;justify-content:flex-start;align-items:flex-start}
.chart-cover-type>strong,.charts-feature .chart-cover-type>strong{font-size:clamp(16px,12cqw,40px);font-weight:750;line-height:1.03;letter-spacing:-.045em;text-wrap:balance}
.chart-cover-type>span{font-size:clamp(11px,7.5cqw,25px);font-weight:550;line-height:1.18;letter-spacing:-.02em;text-wrap:pretty;overflow-wrap:normal;max-width:100%;color:#ffffffd9}
.chart-mosaic{position:absolute;left:7%;right:7%;bottom:7%;height:32%;border-radius:2px}
.city-chart-heading{position:absolute;left:7%;right:7%;top:28%;bottom:auto;padding:0;gap:7cqw;align-items:flex-start;justify-content:flex-start}
.city-chart-top{min-height:0;justify-content:flex-start;gap:0}
.city-chart-top strong{font-size:clamp(23px,19cqw,64px);line-height:1;letter-spacing:-.06em;font-weight:750}
.city-chart-heading>span{font-size:clamp(15px,10.5cqw,36px);font-weight:550;line-height:1.12;letter-spacing:-.03em;max-width:100%;white-space:normal;text-wrap:pretty;color:#28282b}

/* Override legacy direct-image sizing in both city tiles and detail covers. */
.chart-art>img.city-chart-logo,.charts-feature .chart-art>img.city-chart-logo{position:absolute;left:7%;top:7%;width:21%;height:auto;max-width:none;object-fit:contain}

/* Shared artwork branding size across collections. */
:root{--artwork-logo-width:28%}
.playlist-cover .cover-logo,.chart-cover-top>img,.chart-art>img.city-chart-logo,.charts-feature .chart-art>img.city-chart-logo{width:var(--artwork-logo-width);height:auto}
.feature-logo,.featured-section .feature-logo{width:82px;height:auto}
@media(max-width:767px){.feature-logo,.featured-section .feature-logo{width:70px}}

/* City typography follows the same scale and rhythm as other chart covers. */
.city-chart-heading{top:24%;gap:5cqw}
.city-chart-top strong{font-size:clamp(16px,12cqw,40px);font-weight:750;line-height:1.03;letter-spacing:-.045em}
.city-chart-heading>span{font-size:clamp(11px,7.5cqw,25px);font-weight:550;line-height:1.18;letter-spacing:-.02em}

/* City Rhythm: architectural silhouettes meet the rhythm of an equalizer. */
.city-chart-art{--city-ink:#266d77;--city-soft:#dbe8e4}
.city-chart-art[data-city="chart-city-nairobi"]{--city-ink:#526f3c;--city-soft:#e2e7d9}
.city-chart-art[data-city="chart-city-kampala"]{--city-ink:#a36542;--city-soft:#eee0d5}
.city-chart-art[data-city="chart-city-kigali"]{--city-ink:#6d5a91;--city-soft:#e4deed}
.city-chart-art[data-city="chart-city-new-york"]{--city-ink:#426285;--city-soft:#dde4ed}
.city-rhythm{position:absolute;left:7%;right:7%;bottom:7%;height:32%;display:flex;align-items:flex-end;gap:2.3%;overflow:hidden;background:var(--city-soft);border-radius:2px;padding:0 4%;isolation:isolate}
.city-rhythm::before{content:"";position:absolute;left:-5%;right:-5%;top:46%;height:34%;border-top:1px solid #ffffffaa;border-bottom:1px solid #ffffffaa;transform:rotate(-18deg);z-index:2;pointer-events:none}
.city-rhythm i{display:block;flex:1;height:var(--rise);background:var(--city-ink);opacity:var(--shade);border-radius:20px 20px 0 0;position:relative}
.city-rhythm i:nth-child(3n){border-radius:1px}
.city-rhythm i:nth-child(4n)::after{content:"";position:absolute;inset:15% 35% 0;background:repeating-linear-gradient(to bottom,#ffffff70 0 2px,transparent 2px 9px)}


.chart-pair>a:nth-child(2){transform:none}.chart-pair{align-items:center}
.radio-artists{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:center;gap:30px;min-width:0}.radio-person{display:block;min-width:0;text-align:center}.radio-orbit{position:relative;padding:20px 6px;margin-bottom:16px}.radio-face{position:relative;aspect-ratio:1;border-radius:50%;overflow:hidden;background:var(--bg);box-shadow:0 8px 32px #0002;z-index:1}.radio-face img{width:100%;height:100%;object-fit:cover;object-position:center 25%}.radio-face .radio-transition{position:absolute;inset:0}.radio-badge{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);z-index:2;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--primary);color:var(--bg);border:4px solid var(--surface)}.radio-badge svg{width:23px;height:23px}.radio-person strong{display:block;font-size:14px;font-weight:600;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.radio-person small{display:block;font-size:11px;margin-top:6px;color:var(--muted)}.radio-frequency{position:absolute;top:27%;height:46%;width:20px;border:1.5px solid var(--primary);opacity:.4;animation:radio-frequency 3.6s ease-out infinite}.radio-frequency.left{left:-9px;border-right:0;border-top-left-radius:100%;border-bottom-left-radius:100%;--direction:-1}.radio-frequency.right{right:-9px;border-left:0;border-top-right-radius:100%;border-bottom-right-radius:100%;--direction:1}.radio-person:nth-child(2) .radio-frequency{animation-delay:1.8s}@keyframes radio-frequency{0%{opacity:0;transform:translateX(0) scaleY(.72)}25%{opacity:.45}100%{opacity:0;transform:translateX(calc(var(--direction) * 14px)) scaleY(1.35)}}
@media(max-width:1000px){.radio-artists{gap:22px}.radio-person strong{font-size:12px}.radio-badge{width:38px;height:38px}.radio-badge svg{width:20px;height:20px}}
@media(max-width:700px){.radio-artists{grid-row:1;width:100%;max-width:340px;justify-self:center;gap:36px;margin-bottom:12px}.radio-person strong{font-size:13px}}
@media(prefers-reduced-motion:reduce){.radio-frequency{animation:none;opacity:.25}}
/* Circular side arcs follow the portrait's geometry. */
.radio-orbit .radio-frequency{inset:11px -3px;aspect-ratio:1;height:auto;width:auto;border:1.5px solid transparent;border-radius:50%;animation:radio-circle 3.6s ease-out infinite;pointer-events:none}.radio-orbit .radio-frequency.left{border-left-color:var(--primary)}.radio-orbit .radio-frequency.right{border-right-color:var(--primary)}
@keyframes radio-circle{0%{opacity:0;transform:scale(1)}25%{opacity:.5}100%{opacity:0;transform:scale(1.2)}}
.cover-grid>a{position:relative}.about-play{position:absolute;z-index:4;width:46px;height:46px;display:grid;place-items:center;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;background:#fff;color:#16161d;box-shadow:0 3px 20px #0004;opacity:0;transition:opacity .22s;pointer-events:none}.about-play svg{width:24px;height:24px}.portrait:hover .about-play,.portrait:focus-visible .about-play,.cover-grid>a:hover .about-play,.cover-grid>a:focus-visible .about-play,.radio-person:hover .about-play,.radio-person:focus-visible .about-play{opacity:1}.cover-grid .about-play{margin-top:-14px}.radio-face .about-play{width:40px;height:40px}
.artist-invite{padding:0;width:min(680px,calc(100vw - 32px));max-height:calc(100dvh - 40px);overflow:auto;border:1px solid #ffffff16;border-radius:22px;background:#17171d;color:#f5f5f7;box-shadow:0 24px 100px #0007}.artist-invite::backdrop{background:#0009;backdrop-filter:blur(8px)}.artist-invite[open]{animation:invite-enter .28s cubic-bezier(.2,.7,.2,1)}.invite-close{position:absolute;right:16px;top:14px;width:32px;height:32px;border:0;border-radius:50%;background:#ffffff10;color:#ddd;font-size:24px;z-index:5;cursor:pointer}.invite-body{text-align:center;padding:26px 0 38px;overflow:hidden}.invite-logo{width:76px;margin:0 auto 28px}.invite-art{display:flex;align-items:center;justify-content:center;gap:12px;width:110%;margin-left:-5%;height:230px;margin-bottom:28px}.invite-stack{flex:1;min-width:0;display:flex;flex-direction:column;gap:12px;transform:rotate(-7deg)}.invite-stack:nth-last-child(-n+2){transform:rotate(7deg)}.invite-stack img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:9px}.invite-portrait{width:32%;height:100%;object-fit:cover;object-position:center 25%;border-radius:13px;flex-shrink:0;z-index:1}.invite-body h2{font-size:30px;letter-spacing:-.8px;line-height:1.2;padding:0 30px}.invite-body p{font-size:14px;line-height:1.7;color:#aaaab8;margin:16px 24px 24px}.artist-invite .invite-open{background:#8b9dff;color:#111322;min-width:190px}.invite-close:focus-visible{outline:2px solid #8b9dff;outline-offset:3px}
@keyframes invite-enter{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
@media(max-width:600px){.invite-art{height:180px;gap:8px}.invite-stack{gap:8px}.invite-body h2{font-size:25px}.invite-body{padding-bottom:28px}.about-play{width:38px;height:38px}}
@media(hover:none){.about-play{opacity:1}}
@media(prefers-reduced-motion:reduce){.radio-orbit .radio-frequency{animation:none;opacity:.25}.artist-invite[open]{animation:none}}
.cover-grid .about-play{display:grid;overflow:visible;white-space:normal}.portrait .about-play{left:50%;bottom:auto;font-size:initial}

/* Keep play glyphs dark on white, independent of portrait caption colors. */
.portrait-stage .portrait .about-play,.cover-grid>a .about-play,.chart-pair>a .about-play{left:auto;right:14px;top:auto;bottom:14px;transform:none;margin:0;width:42px;height:42px;color:#16161d;background:#fff;display:grid;place-items:center;z-index:4}
.portrait-stage .portrait .about-play svg,.cover-grid>a .about-play svg,.chart-pair>a .about-play svg{display:block;width:23px;height:23px;color:#16161d;fill:#16161d}
.portrait-stage .portrait>span:not(.about-play){right:65px;max-width:calc(100% - 85px)}
.cover-grid>a .about-play{bottom:40px}.chart-pair>a{position:relative}.chart-pair>a:hover .about-play,.chart-pair>a:focus-visible .about-play{opacity:1}
.radio-face .about-play{left:auto;right:12%;top:auto;bottom:12%;transform:none;color:#16161d}.radio-face .about-play svg{color:#16161d}
@media(max-width:600px){.portrait-stage .portrait .about-play,.cover-grid>a .about-play,.chart-pair>a .about-play{width:36px;height:36px;right:10px;bottom:12px}.cover-grid>a .about-play{bottom:36px}}
/* Theme-aware invitations. */
.artist-invite{background:var(--surface);color:var(--ink);border-color:var(--line)}.invite-body p{color:var(--muted)}.invite-close{background:var(--line);color:var(--ink)}.artist-invite .invite-open{background:var(--primary);color:#fff}html[data-theme=dark] .artist-invite .invite-open{color:#111322}html[data-theme=light] .invite-logo{filter:brightness(0)}html[data-theme=light] .artist-invite{box-shadow:0 24px 100px #13112530}html[data-theme=light] .artist-invite::backdrop{background:#24243655}
.invite-chart-cover{width:180px;margin:0 auto 24px}.invite-chart-tracks{list-style:none;padding:0;margin:0 30px 26px;text-align:left}.invite-chart-tracks li{display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--line);padding:10px 0;min-width:0}.invite-chart-tracks li>span{width:16px;text-align:center;color:var(--muted);font-size:12px}.invite-chart-tracks img{width:42px;height:42px;border-radius:5px;object-fit:cover}.invite-chart-tracks li>div{min-width:0}.invite-chart-tracks strong,.invite-chart-tracks small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}.invite-chart-tracks small{font-size:11px;color:var(--muted);margin-top:4px}
/* Compact footer appearance menu, opening above its trigger. */
.footer{align-items:center}.appearance-menu{position:relative;justify-self:end}.appearance-menu button{font:inherit;cursor:pointer}#appearance-trigger{display:flex;align-items:center;gap:9px;padding:8px 0;border:0;color:var(--ink);background:transparent;font-size:12px}#appearance-trigger>svg{width:17px;height:17px}#appearance-value{color:var(--muted);font-size:11px;margin-left:4px}#appearance-options{position:absolute;right:0;bottom:calc(100% + 12px);width:244px;padding:6px;border:1px solid var(--line);border-radius:14px;background:var(--bg);box-shadow:0 12px 45px #0002;z-index:30;animation:answer-in .18s ease}#appearance-options[hidden]{display:none}#appearance-options button{display:flex;align-items:center;gap:12px;text-align:left;width:100%;border:0;border-radius:9px;padding:12px;background:transparent;color:var(--ink)}#appearance-options button:hover,#appearance-options button:focus-visible{background:var(--surface)}#appearance-options strong,#appearance-options small{display:block}#appearance-options strong{font-size:13px;font-weight:550}#appearance-options small{font-size:11px;color:var(--muted);margin-top:3px}.theme-dot{width:22px;height:22px;border-radius:50%;border:1px solid #8886;flex-shrink:0}.theme-dot.system{background:linear-gradient(90deg,#f5f5f7 50%,#272730 50%)}.theme-dot.light{background:#f5f5f7}.theme-dot.dark{background:#272730}.theme-check{margin-left:auto;color:var(--primary);opacity:0}#appearance-options [aria-checked=true] .theme-check{opacity:1}#appearance-options [aria-checked=true]{background:var(--surface)}
@media(max-width:700px){.appearance-menu{justify-self:start}#appearance-options{right:auto;left:0}.invite-chart-cover{width:150px}}
.hero{padding-top:0}.hero-cinema{position:relative;isolation:isolate;width:100%;height:calc(100svh - 76px);min-height:560px;max-height:1100px;background:#101015;color:white;overflow:hidden}.hero-cinema-media,.hero-cinema-slide,.hero-cinema-slide>img,.hero-cinema-slide>video{position:absolute;inset:0;width:100%;height:100%}.hero-cinema-slide{opacity:0;transition:opacity 1s ease;pointer-events:none}.hero-cinema-slide.active{opacity:1}.hero-cinema-slide>img,.hero-cinema-slide>video{object-fit:cover;object-position:center 30%}.hero-cinema-slide>video{opacity:0;transition:opacity .7s}.hero-cinema-slide.playing>video{opacity:1}.hero-cinema-slide.playing>img{opacity:0}.hero-cinema:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#0002,#0002 30%,#0005 65%,#000a);z-index:1;pointer-events:none}.hero-cinema-content{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 24px 90px;transform:scale(var(--hero-scale,1));will-change:transform}.hero .hero-cinema h1{width:clamp(260px,48vw,680px);margin:0;animation:none;line-height:1}.hero-cinema h1 img{width:100%;height:auto;filter:none}.hero-cinema-content p{font-size:clamp(16px,1.5vw,21px);line-height:1.6;margin:30px 0 26px;text-shadow:0 2px 16px #0008}.hero-cinema .button{background:white;color:#17171d;padding:14px 28px;font-size:14px}.hero-cinema-bottom{position:absolute;bottom:28px;left:40px;right:40px;z-index:3;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px}.hero-cinema-artist{font-size:13px;text-align:left}.hero-cinema-dots{display:flex;gap:9px}.hero-cinema-dots button{border:0;border-radius:99px;width:24px;height:24px;background:transparent;padding:8px 0;cursor:pointer}.hero-cinema-dots button:after{content:'';display:block;width:100%;height:3px;border-radius:99px;background:#ffffff55}.hero-cinema-dots button[aria-pressed=true]:after{background:#fff}.hero-cinema-motion{justify-self:end;background:#0003;border:1px solid #ffffff40;border-radius:99px;color:#fff;font-size:11px;padding:8px 14px;cursor:pointer}.hero-cinema button:focus-visible{outline:2px solid white;outline-offset:4px}
.footer{grid-template-columns:minmax(150px,1fr) auto auto;column-gap:28px;align-items:center}.footer nav{align-items:center;gap:22px}.appearance-menu{min-width:0}#appearance-trigger{gap:7px;white-space:nowrap;padding:8px 0}#appearance-value{display:none}#appearance-options{box-sizing:border-box;width:224px;padding:6px;bottom:calc(100% + 8px);border-radius:12px}#appearance-options button{box-sizing:border-box;display:grid;grid-template-columns:22px minmax(0,1fr) 16px;gap:10px;padding:10px;min-height:52px}#appearance-options button>span:nth-child(2){min-width:0}#appearance-options strong{line-height:1.2;font-size:12px}#appearance-options small{line-height:1.3;font-size:10px;margin-top:3px;white-space:normal}.theme-check{margin:0;justify-self:center;font-size:13px}
@media(max-width:1000px){.footer{grid-template-columns:1fr auto}.footer nav{gap:16px}.appearance-menu{grid-column:2;grid-row:2}.footer small{grid-row:3}.hero-cinema-bottom{left:25px;right:25px}}
@media(max-width:700px){.hero-cinema{height:calc(100svh - 66px);min-height:520px;max-height:900px}.hero .hero-cinema h1{width:min(82vw,460px)}.hero-cinema-content{padding-inline:22px}.hero-cinema-content p{font-size:15px;max-width:360px;margin-top:26px}.hero-cinema-content p br{display:none}.hero-cinema-bottom{left:20px;right:20px;bottom:20px;grid-template-columns:1fr auto;gap:15px}.hero-cinema-dots{grid-row:2;grid-column:1/-1;justify-content:center}.hero-cinema-artist{font-size:12px}.hero-cinema-motion{grid-row:1;grid-column:2}.footer{grid-template-columns:1fr;gap:24px}.footer nav{flex-wrap:wrap;gap:18px}.appearance-menu{grid-column:1;grid-row:auto;justify-self:start}.footer small{grid-row:auto}#appearance-options{left:0;right:auto}}
@media(prefers-reduced-motion:reduce){.hero-cinema-content{transform:none!important}.hero-cinema-slide,.hero-cinema-slide>video{transition:none}}
/* Header arrives as the large wordmark leaves the opening view. */
.header{position:fixed;left:0;right:0;top:0;opacity:0;transform:translateY(-100%);pointer-events:none;transition:opacity .3s ease,transform .35s cubic-bezier(.2,.7,.2,1)}.header.header-revealed,.header:focus-within{opacity:1;transform:none;pointer-events:auto}.hero-cinema{height:100svh}.hero-cinema-content p{margin-top:18px}.hero-cinema h1 img{animation:hero-wordmark-enter 1.25s cubic-bezier(.16,1,.3,1) both;will-change:transform,opacity}
@keyframes hero-wordmark-enter{from{opacity:0;transform:translateX(-45px);clip-path:inset(0 100% 0 0)}to{opacity:1;transform:translateX(0);clip-path:inset(0 0 0 0)}}
@media(max-width:700px){.hero-cinema{height:100svh}.hero-cinema-content p{margin-top:16px}.hero-cinema-bottom{grid-template-columns:1fr}.hero-cinema-dots{grid-column:1}.hero-cinema-artist{text-align:center}}
@media(prefers-reduced-motion:reduce){.header{transition:none}.hero-cinema h1 img{animation:none;will-change:auto}}

.hero-cinema h1 img{animation:none}.hero-cinema-avatar{justify-self:end;display:block;width:50px;height:50px;border-radius:50%;padding:3px;border:1px solid #ffffff70;background:#0003;box-shadow:0 3px 20px #0003;transition:border-color .2s}.hero-cinema-avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:center 25%}.hero-cinema-avatar:hover{border-color:white}.hero-cinema-avatar:focus-visible{outline:2px solid white;outline-offset:4px}@media(max-width:700px){.hero-cinema-bottom{grid-template-columns:1fr auto}.hero-cinema-artist{text-align:left}.hero-cinema-avatar{grid-row:1;grid-column:2;width:44px;height:44px}.hero-cinema-dots{grid-row:2;grid-column:1/-1}}

/* Keep one continuous navigation above the film as the header joins it. */
.header,.header:focus-within{opacity:1;transform:none;pointer-events:none;background:transparent;backdrop-filter:none;border-bottom:0;isolation:isolate;transition:none}
.header::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--glass);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--line);opacity:0;transform:translateY(-100%);transition:opacity .4s ease,transform .5s cubic-bezier(.2,.7,.2,1)}
.header>a{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-12px);transition:opacity .35s ease,transform .5s cubic-bezier(.2,.7,.2,1),visibility .35s}
.header nav{display:flex;position:absolute;left:50%;top:0;height:76px;align-items:center;justify-content:center;gap:28px;white-space:nowrap;transform:translate(-50%,8px);color:#fff;text-shadow:0 1px 12px #000b;pointer-events:auto;transition:transform .5s cubic-bezier(.2,.7,.2,1),color .35s ease,text-shadow .35s ease}
.header nav a{display:flex;align-items:center;min-height:44px;transition:opacity .2s ease}
.header nav a:hover{color:inherit;opacity:.75}
.header.header-revealed::before{opacity:1;transform:none}
.header.header-revealed>a{opacity:1;visibility:visible;pointer-events:auto;transform:none}
.header.header-revealed nav{transform:translate(-50%,0);color:var(--muted);text-shadow:none}
.header.header-revealed nav a:hover{color:var(--ink);opacity:1}
@media(max-width:700px){.header{height:112px;align-items:flex-start;padding-top:15px}.header nav{top:60px;height:44px;gap:26px;font-size:12px;transform:translate(-50%,-45px)}.header.header-revealed nav{transform:translate(-50%,0)}.header>a:first-child{margin-top:5px}html{scroll-padding-top:128px}section[id]{scroll-margin-top:128px}}
@media(prefers-reduced-motion:reduce){.header::before,.header>a,.header nav{transition:none}}

/* Text-only appearance choices. */
#appearance-options{width:180px;padding:4px 14px;border-radius:10px;box-shadow:0 10px 28px #0002}
#appearance-options button{display:block;width:100%;min-height:44px;padding:12px 0;border:0;border-radius:0;background:transparent;color:var(--muted);font-size:13px;font-weight:400;text-align:left;line-height:20px}
#appearance-options button+button{border-top:1px solid var(--line)}
#appearance-options button[aria-checked=true]{background:transparent;color:var(--ink);font-weight:600}
#appearance-options button:hover{background:transparent;color:var(--ink)}
#appearance-options button:focus-visible{outline:2px solid var(--primary);outline-offset:2px}

/* Collection invitations share the artist artwork arrangement. */
.invite-collection-center{width:32%;flex-shrink:0;z-index:1;filter:drop-shadow(0 10px 22px #0004)}
.invite-collection-center>.chart-art,.invite-stack>.chart-art{width:100%;aspect-ratio:1;border-radius:9px;overflow:hidden;container-type:inline-size}
.invite-collection-center>.chart-art{border-radius:13px}
.invite-collection-art .invite-stack .chart-art img{aspect-ratio:auto;border-radius:0;object-fit:contain}
.invite-library-cover{aspect-ratio:1;display:flex;flex-direction:column;justify-content:space-between;padding:16px;border-radius:13px;color:#fff;background:linear-gradient(145deg,#384987,#7761ab);text-align:left}
.invite-library-cover img{width:58%;height:auto;filter:none!important}
.invite-library-cover span{font-size:clamp(22px,4vw,36px);font-weight:650;letter-spacing:-.04em;line-height:1.08}
@media(max-width:700px){.invite-library-cover{padding:12px}}

/* Artwork logos retain their cover proportions inside the collage. */
.invite-collection-art .chart-cover-top>img,.invite-collection-art .chart-art>img.city-chart-logo{position:absolute;left:7%;top:7%;width:var(--artwork-logo-width,28%);height:auto;max-width:none;aspect-ratio:auto;object-fit:contain;border-radius:0;margin:0}

/* Centre the discovery introduction above the releases. */
.discovery .section-top{flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:22px}
.discovery .section-top>div,.discovery .section-top>p{width:100%;text-align:center}

/* A restrained musical signature above the discovery heading. */
.discovery .section-top .discovery-soundwave{display:flex;align-items:center;justify-content:center;gap:5px;width:min(270px,80%);height:94px;margin:0 auto 12px;pointer-events:none}
.discovery-soundwave i{display:block;flex:0 0 4px;height:var(--wave-height);border-radius:99px;background:var(--primary);opacity:.7;transform-origin:center;animation:discovery-pulse 3.6s ease-in-out var(--wave-delay) infinite}
@keyframes discovery-pulse{0%,100%{transform:scaleY(.55);opacity:.45}50%{transform:scaleY(1);opacity:.85}}
@media(max-width:700px){.discovery .section-top .discovery-soundwave{height:80px;margin-bottom:6px;transform:scale(.85)}}
@media(prefers-reduced-motion:reduce){.discovery-soundwave i{animation:none;opacity:.65}}

/* A mirrored waveform and wordmark breathe as one balanced signature. */
.discovery .section-top .discovery-soundwave{width:min(360px,90%);height:100px;gap:22px;animation:discovery-signature 3.6s ease-in-out infinite;transform-origin:center}
.discovery-wave-side{display:flex;align-items:center;justify-content:center;gap:5px;flex:0 0 auto;height:84px}
.discovery-wave-right{flex-direction:row-reverse}
.discovery-soundwave .discovery-wave-logo{width:122px;height:auto;flex:0 0 auto;opacity:.85;animation:discovery-logo-pulse 3.6s ease-in-out infinite}
html[data-theme=dark] .discovery-wave-logo{filter:brightness(0) invert(1)}
.discovery-soundwave i{animation-duration:3.6s;background:var(--primary)}
@keyframes discovery-signature{0%,100%{transform:scale(.97)}50%{transform:scale(1.025)}}
@keyframes discovery-logo-pulse{0%,100%{opacity:.65;transform:scale(.98)}50%{opacity:1;transform:scale(1.025)}}
@media(max-width:700px){.discovery .section-top .discovery-soundwave{height:86px;gap:16px;width:min(310px,100%)}.discovery-soundwave .discovery-wave-logo{width:100px}.discovery-wave-side{gap:4px}.discovery-soundwave i{flex-basis:3px;height:calc(var(--wave-height)*.85)}}
@media(prefers-reduced-motion:reduce){.discovery .section-top .discovery-soundwave,.discovery-soundwave .discovery-wave-logo{animation:none;transform:none;opacity:1}}

.invite-collection-center>img{width:100%;aspect-ratio:1;object-fit:cover;object-position:center 25%;border-radius:13px}
.invite-video-cover{position:relative;aspect-ratio:1;overflow:hidden;border-radius:13px;background:#17171d}
.invite-video-cover>img{width:100%;height:100%;object-fit:cover}
.invite-video-cover>span{position:absolute;bottom:12px;right:12px;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#fff;color:#17171d;box-shadow:0 3px 14px #0003}
.invite-video-cover svg{width:22px;height:22px}