:root{color-scheme:dark;--ink:#080a0b;--surface:#121517;--surface-2:#191d1f;--line:rgba(219,159,91,.31);--line-soft:rgba(255,255,255,.11);--bronze:#dc9b54;--bronze-light:#f3c17e;--cyan:#69d8ce;--magenta:#d353b9;--text:#f6f3ed;--muted:#aaa9a4;--success:#63d69d;--danger:#ff847d}*{box-sizing:border-box}html{scroll-behavior:smooth}body{min-height:100vh;margin:0;color:var(--text);background:linear-gradient(rgba(4,6,7,.82),rgba(4,6,7,.96)),url("../images/magic407-depth-background.jpg") center top/cover fixed;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}body:before{position:fixed;inset:0;z-index:-1;content:"";pointer-events:none;background-image:linear-gradient(rgba(105,216,206,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(220,155,84,.04) 1px,transparent 1px);background-size:84px 84px;mask-image:linear-gradient(to bottom,#000,transparent 78%)}a{color:inherit;text-decoration:none}button{font:inherit}.chart-shell{width:min(100%,1460px);margin:auto;padding:0 28px 32px}.chart-header{position:sticky;top:0;z-index:20;display:grid;grid-template-columns:minmax(220px,1fr) auto minmax(100px,1fr);align-items:center;min-height:78px;border-bottom:1px solid var(--line);background:rgba(8,10,11,.92);box-shadow:0 18px 42px rgba(0,0,0,.34);backdrop-filter:blur(18px)}.chart-brand{display:inline-flex;align-items:center;width:max-content;gap:12px}.chart-brand img{width:52px;height:52px;border:1px solid rgba(243,193,126,.45);border-radius:50%;object-fit:cover}.chart-brand span,.chart-brand strong,.chart-brand small{display:block}.chart-brand strong{font-size:1.12rem}.chart-brand small{margin-top:2px;color:var(--bronze);font-size:.74rem;font-weight:900;text-transform:uppercase}.chart-header nav{display:flex;gap:6px}.chart-header nav a{display:inline-flex;align-items:center;min-height:42px;gap:8px;padding:0 13px;border:1px solid transparent;border-radius:5px;color:var(--muted);font-size:.84rem;font-weight:800}.chart-header nav a:hover,.chart-header nav a:focus-visible{border-color:var(--line);color:var(--text);background:rgba(255,255,255,.05);outline:0}.chart-header nav svg{width:17px}.chart-language{display:flex;justify-self:end;overflow:hidden;border:1px solid var(--line-soft);border-radius:5px}.chart-language button{width:43px;height:36px;border:0;color:var(--muted);background:rgba(255,255,255,.04);font-size:.76rem;font-weight:900;cursor:pointer}.chart-language button+button{border-left:1px solid var(--line-soft)}.chart-language button.is-active{color:#17110c;background:var(--bronze-light)}.chart-hero{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(260px,.7fr);align-items:end;gap:40px;min-height:390px;padding:65px 48px 45px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);border-left:1px solid var(--line);background:linear-gradient(90deg,rgba(5,7,8,.99),rgba(5,7,8,.78) 52%,rgba(5,7,8,.34)),url("../images/magic407-studio-banner-v1.png") right center/cover no-repeat;box-shadow:inset 0 -26px 55px rgba(0,0,0,.38),0 24px 64px rgba(0,0,0,.32)}.eyebrow{margin:0 0 11px;color:var(--bronze);font-size:.72rem;font-weight:900;letter-spacing:0;text-transform:uppercase}.chart-hero h1{margin:0;font-size:6.2rem;line-height:.9;letter-spacing:0;text-transform:uppercase}.chart-hero>div>p:last-child{max-width:690px;margin:23px 0 0;color:#d1cdc6;font-size:1rem;line-height:1.65}.chart-round{display:grid;gap:5px;padding:4px 0 4px 24px;border-left:2px solid var(--bronze)}.chart-round span,.chart-round small{color:var(--muted);font-size:.74rem;font-weight:700}.chart-round strong{font-size:1.55rem}.chart-intro{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:34px;padding:42px 6px 31px;border-bottom:1px solid var(--line-soft)}.chart-intro h2,.section-heading h2,.chart-empty h2,.chart-footer-cta h2{margin:0;letter-spacing:0}.chart-intro h2{font-size:2rem}.chart-intro>div>p:last-child{max-width:680px;margin:12px 0 0;color:var(--muted);line-height:1.6}.chart-intro dl{display:grid;grid-template-columns:repeat(3,minmax(120px,1fr));margin:0}.chart-intro dl div{min-width:135px;padding:5px 18px;border-left:1px solid var(--line-soft)}.chart-intro dt{color:var(--muted);font-size:.67rem;font-weight:900;text-transform:uppercase}.chart-intro dd{margin:6px 0 0;color:var(--bronze-light);font-size:1.25rem;font-weight:900}.chart-status{display:flex;align-items:center;justify-content:center;min-height:150px;gap:10px;color:var(--muted);font-weight:800}.chart-status svg{width:22px;color:var(--bronze);animation:spin 1.2s linear infinite}.chart-status.is-error{color:var(--danger)}.chart-status.is-error svg{animation:none}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:24px;padding:34px 2px 18px}.section-heading h2{font-size:1.75rem}.section-heading>span{color:var(--muted);font-size:.75rem;font-weight:800}.ranking-list{display:grid;border-top:1px solid var(--line-soft)}.chart-track{display:grid;grid-template-columns:58px 82px minmax(0,1fr) 90px 118px;align-items:center;gap:18px;min-height:118px;padding:17px 14px 17px 4px;border-bottom:1px solid var(--line-soft);background:linear-gradient(90deg,rgba(255,255,255,.015),rgba(255,255,255,.035),rgba(255,255,255,.015));transition:background 160ms ease}.chart-track:hover{background:rgba(255,255,255,.052)}.track-rank{color:var(--bronze);font-size:2rem;font-weight:900;text-align:center}.track-rank:before{content:"#";color:#77634e;font-size:.85rem;vertical-align:top}.track-cover-wrap{position:relative;width:82px;height:82px}.track-cover-wrap img{width:100%;height:100%;border:1px solid var(--line);border-radius:6px;object-fit:cover;background:#111}.preview-button{position:absolute;inset:auto 7px 7px auto;display:grid;width:34px;height:34px;place-items:center;border:1px solid var(--bronze-light);border-radius:50%;color:#17110c;background:var(--bronze-light);cursor:pointer;box-shadow:0 8px 18px rgba(0,0,0,.42)}.preview-button svg{width:16px;fill:currentColor}.preview-button.is-playing{color:#07110d;background:var(--cyan);border-color:var(--cyan)}.track-copy{min-width:0}.track-copy>span{display:block;color:var(--cyan);font-size:.67rem;font-weight:900;text-transform:uppercase}.track-copy h3{margin:5px 0 2px;overflow:hidden;color:var(--text);font-size:1.18rem;letter-spacing:0;text-overflow:ellipsis;white-space:nowrap}.track-copy p{margin:0;color:var(--bronze-light);font-size:.88rem;font-weight:800}.track-copy small{display:flex;align-items:center;gap:6px;margin-top:8px;color:#81847f;font-size:.68rem}.track-copy small svg{width:14px}.track-votes{text-align:center}.track-votes strong,.track-votes span{display:block}.track-votes strong{font-size:1.55rem}.track-votes span{color:var(--muted);font-size:.66rem;font-weight:800}.vote-button,.chart-empty a,.chart-footer-cta a{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;border:1px solid var(--bronze);border-radius:5px;color:#17110c;background:var(--bronze-light);font-weight:900;cursor:pointer}.vote-button svg,.chart-empty a svg,.chart-footer-cta a svg{width:17px}.vote-button:hover,.vote-button:focus-visible,.chart-empty a:hover,.chart-footer-cta a:hover{filter:brightness(1.07);transform:translateY(-1px);outline:0}.vote-button.is-voted{border-color:rgba(99,214,157,.5);color:var(--success);background:rgba(99,214,157,.08);cursor:default}.vote-button.is-voted svg{fill:currentColor}.vote-button:disabled{opacity:.65;cursor:wait;transform:none}.is-contenders .chart-track{grid-template-columns:58px 70px minmax(0,1fr) 90px 118px;min-height:102px}.is-contenders .track-cover-wrap{width:70px;height:70px}.contenders-section{padding-top:10px}.chart-empty{display:grid;min-height:390px;place-items:center;align-content:center;padding:55px 20px;text-align:center;border-bottom:1px solid var(--line-soft)}.chart-empty>svg{width:58px;height:58px;margin-bottom:18px;color:var(--bronze)}.chart-empty h2{font-size:2rem}.chart-empty>p:not(.eyebrow){max-width:620px;margin:13px 0 24px;color:var(--muted)}.chart-empty a{padding:0 17px}.chart-footer-cta{display:flex;align-items:center;justify-content:space-between;gap:35px;margin-top:54px;padding:34px 4px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.chart-footer-cta h2{font-size:1.65rem}.chart-footer-cta p:last-child{margin:10px 0 0;color:var(--muted)}.chart-footer-cta a{flex:0 0 auto;padding:0 19px}footer{display:flex;justify-content:space-between;gap:20px;padding:22px 4px 0;color:#787c79;font-size:.75rem;font-weight:700}@keyframes spin{to{transform:rotate(360deg)}}[hidden]{display:none!important}@media(max-width:980px){.chart-header{grid-template-columns:1fr auto}.chart-header nav{display:none}.chart-hero{grid-template-columns:1fr;min-height:340px}.chart-intro{grid-template-columns:1fr}.chart-intro dl{width:100%}.chart-track{grid-template-columns:46px 72px minmax(0,1fr) 78px 106px;gap:12px}.track-cover-wrap{width:72px;height:72px}}@media(max-width:680px){body{background-attachment:scroll}.chart-shell{padding:0 14px 24px}.chart-header{min-height:68px}.chart-brand img{width:44px;height:44px}.chart-hero{min-height:360px;padding:42px 21px 30px;background:linear-gradient(rgba(5,7,8,.72),rgba(5,7,8,.96)),url("../images/magic407-studio-banner-v1.png") center/cover}.chart-hero h1{font-size:3.45rem;overflow-wrap:anywhere}.chart-round{padding:16px 0 0;border-top:1px solid var(--line);border-left:0}.chart-intro{padding-top:30px}.chart-intro dl{grid-template-columns:1fr}.chart-intro dl div{display:flex;align-items:center;justify-content:space-between;min-width:0;padding:9px 0;border-top:1px solid var(--line-soft);border-left:0}.chart-intro dd{margin:0}.section-heading{display:grid}.section-heading>span{display:none}.chart-track,.is-contenders .chart-track{grid-template-columns:38px 62px minmax(0,1fr);gap:10px;padding:14px 2px}.track-cover-wrap,.is-contenders .track-cover-wrap{width:62px;height:62px}.track-copy h3{font-size:1rem}.track-votes{grid-column:2;text-align:left}.track-votes strong,.track-votes span{display:inline}.track-votes strong{font-size:1rem}.vote-button{grid-column:3;grid-row:2;justify-self:end;min-width:102px;min-height:38px}.chart-footer-cta{display:grid}.chart-footer-cta a{width:100%}footer{display:grid;gap:5px}.chart-language button{width:38px}}@media(max-width:390px){.chart-shell{padding-inline:9px}.chart-brand small{display:none}.chart-hero h1{font-size:3rem}.chart-track,.is-contenders .chart-track{grid-template-columns:32px 56px minmax(0,1fr)}.track-cover-wrap,.is-contenders .track-cover-wrap{width:56px;height:56px}.vote-button{min-width:94px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition-duration:.01ms!important}.chart-status svg{animation:none}}