.hero--dial{max-width:62rem;margin:.5rem auto 0;padding-inline:1rem}.hero--dial .faceplate{background:repeating-linear-gradient(90deg, #ffffff12 0 1px, #00000009 1px 2px, transparent 2px 4px), linear-gradient(color-mix(in srgb, var(--hero) 94%, #fff), color-mix(in srgb, var(--hero) 94%, #000));box-shadow:0 0 0 14px var(--band-1), 0 0 0 15px color-mix(in srgb, var(--band-1) 80%, #000), 0 24px 40px -18px #00000073;border-radius:4px;grid-template-columns:minmax(0,13rem) minmax(0,1fr);gap:1.25rem;margin:15px;padding:1.25rem;display:grid}.hero--dial .cover{border-radius:3px;box-shadow:0 0 0 1px #00000059,0 6px 14px -6px #00000080}.hero--dial .dial{--p:1.25rem;padding:var(--p);color:var(--band-3);background:radial-gradient(120% 90% at 50% 45%, color-mix(in srgb, var(--band-2) 88%, var(--band-3)) 0%, var(--band-2) 62%, color-mix(in srgb, var(--band-2) 70%, #000) 100%);text-shadow:0 0 10px color-mix(in srgb, var(--band-3) 55%, transparent);border-radius:4px;position:relative;overflow:hidden;box-shadow:inset 0 2px 10px #000c,0 0 0 2px #000000d9}.hero--dial .scale{border-bottom:1px solid color-mix(in srgb, var(--band-3) 65%, var(--band-2));font-family:var(--display);font-stretch:var(--display-stretch);text-align:center;color:color-mix(in srgb, var(--band-3) 75%, var(--band-2));grid-template-columns:repeat(7,minmax(0,1fr));margin:0;padding:0 0 .6rem;font-size:.8rem;line-height:1.2;list-style:none;display:grid}.hero--dial .scale li{padding-bottom:.5rem;position:relative}.hero--dial .scale li span{display:block}.hero--dial .scale li:after{content:"";background:currentColor;width:1px;height:.5rem;position:absolute;bottom:-.6rem;left:50%}.hero--dial .scale .on{color:var(--band-3);font-weight:700}.hero--dial .needle{top:calc(var(--p) - .5rem);left:calc(var(--p) + (var(--pos) + .5) * (100% - 2 * var(--p)) / 7);background:var(--band-4);width:3px;height:5.25rem;box-shadow:0 0 6px var(--band-4), 0 0 18px color-mix(in srgb, var(--band-4) 60%, transparent);border-radius:2px;margin-left:-1.5px;position:absolute}@media (prefers-reduced-motion:no-preference){.hero--dial .needle{animation:1.4s cubic-bezier(.3,.7,.2,1) .2s both tune}}@keyframes tune{0%{left:var(--p)}}.hero--dial .lamp{right:var(--p);bottom:var(--p);color:var(--band-4);text-shadow:0 0 8px var(--band-4);border:1px solid;border-radius:2px;padding:.1rem .5rem;font-size:.75rem;font-weight:700;position:absolute}.hero--dial .today{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.hero--dial .ident{padding-top:1.5rem}.hero--dial .when{margin-bottom:.4rem;font-size:.85rem}.hero--dial .title{font-size:clamp(1.9rem,4.2vw,2.9rem);line-height:1.05}.hero--dial .artist{margin-top:.5rem;font-size:1.2rem}.hero--dial .facts{margin-right:4.5rem;font-size:.9rem}.hero--dial .platforms{grid-column:1/-1;margin:0;padding:.25rem 0 .35rem}.hero--dial .platform{--button-radius:3px;box-shadow:0 3px 0 color-mix(in srgb, var(--hero-ink) 70%, #000);padding:.55rem .9rem .5rem;font-size:.85rem}.hero--dial .platform:active{box-shadow:0 1px 0 color-mix(in srgb, var(--hero-ink) 70%, #000);translate:0 2px}.hero--dial .led{background:var(--band-5);width:.5rem;height:.5rem;box-shadow:0 0 6px var(--band-5);border-radius:50%;display:inline-block}.hero--dial .platform--search .led{background:color-mix(in srgb, var(--hero-ink) 35%, var(--hero));box-shadow:inset 0 1px 2px #00000080}@media (width<=40rem){.hero--dial{padding-inline:.5rem}.hero--dial .faceplate{box-shadow:0 0 0 8px var(--band-1), 0 0 0 9px color-mix(in srgb, var(--band-1) 80%, #000), 0 18px 30px -16px #00000073;grid-template-columns:minmax(0,1fr);gap:.9rem;margin:9px;padding:.9rem}.hero--dial .faceplate>.cover{max-width:14rem}.hero--dial .dial{--p:.9rem}.hero--dial .scale{font-size:.68rem}.hero--dial .needle{height:4.6rem}}.hero--rings{background:var(--hero);border-radius:0 0 3rem 3rem;overflow:hidden}.hero--rings .hero-inner{grid-template:"disc ident""disc keys"1fr/minmax(0,26rem) minmax(0,1fr);align-items:start;column-gap:3rem;max-width:64rem;margin-inline:auto;padding:2rem 1rem 4rem;display:grid}.hero--rings .disc{aspect-ratio:1;background:radial-gradient(circle closest-side, transparent 0 50%, var(--band-5) 50% 60%, var(--band-4) 60% 70%, var(--band-3) 70% 80%, var(--band-2) 80% 90%, var(--band-1) 90% 100%, transparent 100%);border-radius:50%;grid-area:disc;place-items:center;width:100%;display:grid;position:relative}.hero--rings .disc .cover{border-radius:50%;width:50%}.hero--rings .disc:after{content:"";aspect-ratio:1;background:var(--hero);border-radius:50%;width:3.5%;position:absolute;top:50%;left:50%;translate:-50% -50%;box-shadow:0 0 0 3px #00000026}@media (prefers-reduced-motion:no-preference){.hero--rings .disc:hover .cover{animation:1.8s linear infinite spin}}@keyframes spin{to{rotate:1turn}}.hero--rings .ident{grid-area:ident;padding-top:1.5rem}.hero--rings .title{font-size:clamp(2.2rem,4.8vw,3.6rem);line-height:1.02}.hero--rings .platforms{grid-area:keys}@media (width<=44rem){.hero--rings{border-radius:0 0 2rem 2rem}.hero--rings .hero-inner{grid-template-columns:minmax(0,1fr);grid-template-areas:"disc""ident""keys"}.hero--rings .disc{justify-self:center;width:min(100%,22rem);margin-bottom:1rem}.hero--rings .ident{padding-top:0}}.hero--stripes{--stripe:12px;--band:calc(var(--stripe) * 5);--bend:9rem;--reach:max(1rem, calc(50% - 23rem - var(--band) - 1.75rem));isolation:isolate;background:var(--hero);position:relative}.hero--stripes .band{z-index:-1;top:0;bottom:0;left:calc(-1 * var(--band) - 2px);right:var(--reach);border:var(--stripe) solid var(--band-1);border-radius:0 var(--bend) var(--bend) 0;box-shadow:inset 0 0 0 var(--stripe) var(--band-2), inset 0 0 0 calc(var(--stripe) * 2) var(--band-3), inset 0 0 0 calc(var(--stripe) * 3) var(--band-4), inset 0 0 0 calc(var(--stripe) * 4) var(--band-5);pointer-events:none;position:absolute}.hero--stripes .hero-inner{max-width:46rem;padding:calc(var(--band) + 2.25rem) 1rem;margin-inline:auto}.hero--stripes .song{grid-template-columns:minmax(0,16rem) minmax(0,1fr);align-items:end;gap:2rem;display:grid}.hero--stripes .cover{border-radius:1.25rem}.hero--stripes .title{font-size:clamp(2.4rem,5.5vw,3.75rem)}@media (width<=58rem){.hero--stripes .hero-inner{padding-right:calc(var(--reach) + var(--band) + 1.25rem)}}@media (width<=36rem){.hero--stripes{--stripe:6px;--bend:4.5rem}.hero--stripes .song{grid-template-columns:minmax(0,1fr);gap:1.5rem}.hero--stripes .cover{max-width:15rem}}.hero--sunburst{--echo:.04em;isolation:isolate;background:var(--hero);text-align:center;position:relative;overflow:hidden}.hero--sunburst:after{content:"";background:linear-gradient(var(--band-5) 0 4px, var(--band-2) 4px 8px, var(--band-3) 8px 12px);height:12px;position:absolute;inset:auto 0 0}.hero--sunburst .hero-inner{max-width:46rem;margin-inline:auto;padding:2.5rem 1rem 4rem}.hero--sunburst .song{--cover:min(18rem, 70vw);flex-direction:column;align-items:center;display:flex;position:relative}.hero--sunburst .song:before{content:"";z-index:-1;width:240vmax;height:240vmax;left:50%;top:calc(var(--cover) / 2);background:repeating-conic-gradient(from 3deg, var(--band-1) 0deg 5deg, transparent 5deg 12deg);pointer-events:none;position:absolute;translate:-50% -50%;-webkit-mask:radial-gradient(closest-side,#000 4%,#0000 38%);mask:radial-gradient(closest-side,#000 4%,#0000 38%)}.hero--sunburst .cover{width:var(--cover);box-shadow:8px 8px 0 var(--band-2), 16px 16px 0 var(--band-3), 24px 24px 0 var(--band-4);border-radius:.75rem;margin-right:24px}.hero--sunburst .ident{margin-top:3rem}.hero--sunburst .when,.hero--sunburst .platforms{justify-content:center}.hero--sunburst .title{text-shadow:var(--echo) var(--echo) 0 var(--band-2), calc(var(--echo) * 2) calc(var(--echo) * 2) 0 var(--band-3), calc(var(--echo) * 3) calc(var(--echo) * 3) 0 var(--band-4);padding-inline:.2em;font-size:clamp(2.6rem,8vw,4.75rem);line-height:1.02}@media (prefers-reduced-motion:no-preference){.hero--sunburst .title{animation:.9s cubic-bezier(.2,.8,.2,1) .15s both echo-out}}@keyframes echo-out{0%{text-shadow:0 0 0 var(--band-2), 0 0 0 var(--band-3), 0 0 0 var(--band-4)}}.hero--sunburst .platforms{max-width:36rem;margin-inline:auto}@media (width<=36rem){.hero--sunburst .cover{box-shadow:5px 5px 0 var(--band-2), 10px 10px 0 var(--band-3), 15px 15px 0 var(--band-4);margin-right:15px}}.hero--type{background:var(--hero)}.hero--type .hero-inner{border-block:3px solid var(--hero-ink);max-width:64rem;margin-inline:auto;padding:1.5rem 1rem 3rem}.hero--type .song{grid-template-columns:minmax(0,1fr) minmax(0,20rem);align-items:end;gap:2.5rem;display:grid}.hero--type .title{font-size:clamp(3.4rem,9.5vw,8rem);line-height:.84}.hero--type .platform{--button-radius:0}@media (width<=40rem){.hero--type .song{grid-template-columns:minmax(0,1fr);gap:1.5rem}.hero--type .cover{max-width:15rem}}