.mastering-landing-hero{display:grid;width:100%;max-width:none;grid-template-columns:minmax(0,1fr) minmax(25rem,1fr);align-items:center;gap:var(--space-4);min-height:34rem;padding:var(--space-5) 0 var(--space-4);border-bottom:1px solid var(--border)}
.mastering-hero-copy{position:relative;z-index:1;max-width:39rem}.mastering-eyebrow{margin:0 0 var(--space-2);color:var(--success);font-size:var(--font-small);font-weight:800;letter-spacing:.1em;text-transform:uppercase}.mastering-landing-hero h1{margin:0 0 var(--space-3);font-size:clamp(3rem,5.5vw,4.5rem);line-height:1.03;letter-spacing:-.045em}.mastering-hero-copy>p:not(.mastering-eyebrow){max-width:37rem;margin:0;color:var(--text-muted);font-size:1.08rem;line-height:1.65}.mastering-hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);margin-top:var(--space-4)}.mastering-primary-cta,.mastering-secondary-cta{display:inline-flex;align-items:center;justify-content:center;min-height:3rem;padding:.65rem 1.25rem;border-radius:var(--radius-small);font-weight:750;text-decoration:none!important}.design-page>main .mastering-primary-cta{border:1px solid var(--button-background);background:var(--button-background);color:var(--white)}.design-page>main .mastering-secondary-cta{border:1px solid var(--link);background:transparent;color:var(--link)}.mastering-text-cta{padding:.65rem .25rem;font-weight:700}.mastering-trust-list{display:flex;flex-wrap:wrap;gap:.7rem 1.1rem;margin:var(--space-4) 0 0;padding:0;list-style:none;color:var(--text-muted);font-size:.78rem}.mastering-trust-list li::before{content:'✓';display:inline-grid;width:1.15rem;height:1.15rem;margin-right:.35rem;place-items:center;border:1px solid var(--success);border-radius:50%;color:var(--success);font-weight:900}.mastering-hero-visual{display:grid;min-width:0;min-height:31rem;place-items:end center;overflow:hidden}.mastering-hero-visual > .web-image-picture{display:block;width:min(100%,43rem);height:auto;max-height:34rem;object-fit:contain;object-position:center bottom}
.mastering-explainer-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(20rem,.75fr);gap:var(--space-3);margin:var(--space-5) 0}.mastering-voting-explainer,.mastering-steps{border:1px solid var(--border);border-radius:var(--radius-card);background:var(--surface)}.mastering-voting-explainer{display:grid;grid-template-columns:minmax(18rem,.9fr) minmax(22rem,1.1fr);align-items:center;gap:var(--space-4);padding:var(--space-4)}.mastering-explainer-copy h2,.mastering-steps h2,.mastering-list-heading h2{margin:0 0 var(--space-2);font-size:clamp(1.6rem,3vw,2rem);line-height:1.2}.mastering-explainer-copy>p:not(.mastering-eyebrow){color:var(--text-muted);line-height:1.65}.mastering-vote-note{margin-top:var(--space-3);padding:var(--space-2) var(--space-3);border-left:3px solid var(--success);background:color-mix(in srgb,var(--success) 8%,transparent)}.mastering-vote-note strong{display:block;color:var(--text)}.mastering-vote-note p{margin:.35rem 0 0;color:var(--text-muted);font-size:var(--font-small);line-height:1.55}.mastering-circle-figure{margin:0}.mastering-circle-asset{display:block;width:100%;height:auto;max-height:28rem;object-fit:contain}.mastering-circle-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:.45rem var(--space-2);margin-top:var(--space-2);color:var(--text-muted);font-size:.75rem}.mastering-circle-legend span{display:inline-flex;align-items:center;gap:.35rem}.mastering-legend-dot{width:.65rem;height:.65rem;border-radius:50%}.mastering-legend-dot--original{background:#2563eb}.mastering-legend-dot--votes{background:#ef4444}.mastering-legend-dot--favorite{background:#8b5cf6}.mastering-steps{padding:var(--space-4)}.mastering-steps ol{display:grid;gap:var(--space-3);margin:var(--space-3) 0 0;padding:0;list-style:none}.mastering-steps li{display:grid;grid-template-columns:3rem 1fr;align-items:start;gap:var(--space-2)}.mastering-step-icon{display:grid;width:2.75rem;height:2.75rem;place-items:center;border-radius:50%;background:color-mix(in srgb,#8b5cf6 9%,var(--surface));color:#8b5cf6;-webkit-mask:none;mask:none}.mastering-steps li:last-child .mastering-step-icon{background:color-mix(in srgb,#22c55e 9%,var(--surface));color:#22c55e}.mastering-step-icon::before{content:'';display:block;width:1.4rem;height:1.4rem;background:currentColor;-webkit-mask:var(--ph-icon) center/contain no-repeat;mask:var(--ph-icon) center/contain no-repeat}.mastering-steps strong{display:block;margin:.15rem 0 .2rem}.mastering-steps p{margin:0;color:var(--text-muted);font-size:var(--font-small);line-height:1.45}
.mastering-community{margin-top:var(--space-6);padding:var(--space-5) 0;border-block:1px solid var(--border)}.mastering-list-heading{display:flex;align-items:end;justify-content:space-between;gap:var(--space-4);margin-bottom:var(--space-4)}.mastering-list-heading p:not(.mastering-eyebrow){margin:0;color:var(--text-muted)}.mastering-list-heading form{display:block;font-size:var(--font-small)}.mastering-list-heading select{min-width:10rem;min-height:2.75rem}.mastering-track-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3)}.mastering-track-card{position:relative;min-width:0;border:1px solid var(--border);border-radius:var(--radius-card);background:var(--surface);overflow:hidden}.mastering-track-main{display:grid;grid-template-columns:5.5rem 5.5rem minmax(0,1fr);align-items:center;gap:var(--space-3);padding:var(--space-3);color:inherit!important;text-decoration:none!important}.mastering-track-main::after{position:absolute;inset:0;content:""}.mastering-track-main:hover strong{text-decoration:underline}.mastering-track-cover{width:5.5rem;height:5.5rem;border-radius:var(--radius-small);object-fit:cover;background:var(--surface)}.mastering-track-cover--empty{display:grid;place-items:center;border:1px solid var(--border);color:var(--text-muted);font-size:1.7rem}.mastering-track-copy{display:grid;min-width:0;line-height:1.35}.mastering-track-copy strong,.mastering-track-copy>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mastering-track-copy>span:first-child{color:var(--text-muted);font-size:var(--font-small)}.mastering-track-meta{margin-top:.3rem;color:var(--text-muted);font-size:.78rem}.mastering-track-listen{margin-top:.65rem;color:var(--link);font-size:.8rem;font-weight:750}.mastering-mini-circle{width:5.5rem;height:5.5rem;overflow:visible}.mastering-mini-boundary{fill:var(--surface);stroke:var(--border);stroke-width:2}.mastering-mini-vote{fill:var(--danger);stroke:var(--text);stroke-width:.7}.mastering-mini-favorite{fill:#f3c84b;stroke:var(--text);stroke-width:1}.mastering-social-links{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:var(--space-2);margin:-.35rem var(--space-3) var(--space-3);padding-left:11rem}.mastering-social-links a{color:var(--text-muted);font-size:.78rem}.mastering-empty{padding:var(--space-4);border:1px solid var(--border);border-radius:var(--radius-card);color:var(--text-muted)}
.mastering-values{margin:var(--space-4) 0 var(--space-5)}.mastering-values .ph-icon{width:2rem;height:2rem;color:var(--violet)}
@media(max-width:62rem){.mastering-landing-hero{grid-template-columns:minmax(0,1.1fr) minmax(20rem,.9fr)}.mastering-hero-visual{min-height:27rem}.mastering-explainer-grid{grid-template-columns:1fr}.mastering-voting-explainer{grid-template-columns:minmax(18rem,1fr) minmax(20rem,1fr)}}
@media(max-width:48rem){.mastering-landing-hero{grid-template-columns:1fr;gap:0;padding-top:var(--space-4)}.mastering-hero-copy{max-width:44rem}.mastering-hero-visual{min-height:25rem}.mastering-hero-visual > .web-image-picture{max-height:27rem}.mastering-voting-explainer{grid-template-columns:1fr}.mastering-circle-asset{max-height:23rem}.mastering-list-heading{align-items:start;flex-direction:column}.mastering-list-heading form,.mastering-list-heading select{width:100%}.mastering-track-grid{grid-template-columns:1fr}}

.mastering-sound-preview{position:relative;width:min(100%,28rem);aspect-ratio:1;margin-inline:auto;border:2px solid var(--accent);border-radius:50%;background:radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--accent) 10%,transparent),transparent 48%),var(--mastering-canvas);box-shadow:inset 0 0 4rem color-mix(in srgb,var(--accent) 10%,transparent)}
.mastering-processing-badge{position:absolute;z-index:3;left:7%;top:4%;display:grid;max-width:43%;gap:.08rem;padding:.45rem .7rem;border:1px solid transparent;border-radius:var(--radius-small);background:linear-gradient(#0f172a,#0f172a) padding-box,linear-gradient(90deg,#22d3ee 0%,var(--accent) 52%,var(--violet) 100%) border-box;box-shadow:0 0 .55rem color-mix(in srgb,#22d3ee 48%,transparent),0 0 1rem color-mix(in srgb,var(--violet) 34%,transparent);color:var(--white);line-height:1.1;pointer-events:none;white-space:nowrap}
.mastering-processing-badge strong{font-size:1rem;font-weight:800;letter-spacing:-.015em}.mastering-processing-badge small{color:#cbd5e1;font-size:.58rem;font-weight:500;letter-spacing:.01em}
.mastering-preview-center{position:absolute;left:50%;top:50%;width:1.55rem;height:1.55rem;border:2px solid var(--accent);border-radius:50%;background:color-mix(in srgb,var(--accent) 18%,transparent);transform:translate(-50%,-50%)}
.mastering-preview-label{position:absolute;left:50%;top:50%;transform:translate(-50%,1rem);color:var(--text-muted);font-size:.75rem;font-weight:700}
.mastering-preview-vote{position:absolute;width:.7rem;height:.7rem;border:1px solid var(--white);border-radius:50%;background:var(--success);transform:translate(-50%,-50%)}
.mastering-preview-vote:nth-of-type(1){left:24%;top:28%}.mastering-preview-vote:nth-of-type(2){left:72%;top:25%}.mastering-preview-vote:nth-of-type(3){left:82%;top:48%}.mastering-preview-vote:nth-of-type(4){left:65%;top:67%}.mastering-preview-vote:nth-of-type(5){left:37%;top:73%}.mastering-preview-vote:nth-of-type(6){left:75%;top:62%}
.mastering-preview-selection{position:absolute;left:69%;top:58%;width:1.25rem;height:1.25rem;border:3px solid var(--white);border-radius:50%;background:var(--danger);box-shadow:0 0 0 .35rem color-mix(in srgb,var(--danger) 35%,transparent);transform:translate(-50%,-50%)}

.mastering-sort-menu{position:relative;min-width:11rem;font-size:var(--font-small)}
.mastering-sort-menu>summary{display:flex;min-height:2.75rem;align-items:center;justify-content:space-between;gap:var(--space-2);padding:.6rem .8rem;border:1px solid var(--border);border-radius:var(--radius-small);background:var(--surface);color:var(--text);cursor:pointer;list-style:none}
.mastering-sort-menu summary::-webkit-details-marker{display:none}
.mastering-sort-panel{position:absolute;z-index:10;right:0;display:grid;width:max-content;min-width:100%;max-width:min(22rem,calc(100vw - 2rem));margin-top:.3rem;padding:.35rem;border:1px solid var(--border-strong);border-radius:var(--radius-small);background:var(--surface);box-shadow:0 .7rem 1.8rem #0002}
.mastering-sort-panel>a,.mastering-genre-menu>summary,.mastering-genre-menu a{display:flex;min-height:2.25rem;align-items:center;padding:.4rem .7rem;color:var(--text);line-height:1.25;text-decoration:none}
.mastering-sort-panel>a:hover,.mastering-sort-panel>a:focus-visible,.mastering-sort-panel>a[aria-current="page"],.mastering-genre-menu a:hover,.mastering-genre-menu a:focus-visible,.mastering-genre-menu a[aria-current="page"]{background:var(--surface-muted)}
.mastering-genre-menu>summary{display:flex;align-items:center;justify-content:space-between;cursor:pointer;list-style:none}
.mastering-genre-menu>div{display:grid;grid-template-columns:minmax(0,1fr);max-height:min(26rem,70vh);overflow:auto;padding:.15rem}.mastering-genre-menu a{white-space:nowrap}

@media(max-width:48rem){.mastering-sort-menu{width:100%}.mastering-sort-panel{right:auto;left:0;width:100%}}
@media(max-width:32rem){.mastering-landing-hero h1{font-size:clamp(2.5rem,12vw,3.25rem)}.mastering-hero-actions>a{width:100%}.mastering-text-cta{text-align:center}.mastering-hero-visual{min-height:19rem}.mastering-voting-explainer,.mastering-steps{padding:var(--space-3)}.mastering-processing-badge{left:6%;top:5%;max-width:48%;padding:.35rem .5rem}.mastering-processing-badge strong{font-size:.75rem}.mastering-processing-badge small{font-size:.5rem}.mastering-track-main{grid-template-columns:4rem 4rem minmax(0,1fr);gap:.7rem}.mastering-track-cover,.mastering-mini-circle{width:4rem;height:4rem}.mastering-social-links{padding-left:8rem}}
.mastering-track-cover--empty{background:var(--surface-muted) url('/assets/icons/custom/web_track-default-artwork-listing.webp') center/cover no-repeat;color:transparent;font-size:0}