/* Shared visual hierarchy. Audio track colors and provider sign-in branding stay distinct. */
:root{
 --page:#191c20;--surface:#2b3037;--surface-hover:#353c45;--line:#505964;
 --text:#f7f9fb;--muted:#c6ced8;--accent:#9bbbf0;--accent-hover:#b0caf4;--accent-ink:#203858;
 background:var(--page);color:var(--text);font-size:16px;color-scheme:dark;
}
body{background:var(--page);color:var(--text)}
header{background:#202429;border-color:#414952}
.header-label,.filename{color:var(--muted);font-size:15px}
header #new{font-size:15px}
.home-nav a,.account-header>a:not(.brand){font-size:17px;color:var(--text)}
.home-nav a:hover{background:var(--surface);color:var(--accent)}
:is(button,input,select,summary,a):focus-visible{outline:2px solid var(--accent);outline-offset:3px}
::selection{background:#9bbbf040;color:var(--text)}
.primary,.mint{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.primary:hover:enabled,.mint:hover:enabled{background:var(--accent-hover);border-color:var(--accent-hover)}

/* Home and processing: clear copy and a shared blue action. */
.home-hero h1{color:var(--text);font-size:48px}
.home-hero h1 .hero-feature{display:inline-block}
.home-hero .hero-description{color:#d9dfe6;font-size:19px;line-height:1.75}
.home-hero .hero-eyebrow{font-size:15px;color:var(--muted)}
.upload-card .primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-size:18px;font-weight:600;min-height:50px}
.upload-card .primary:hover:enabled{background:var(--accent-hover);border-color:var(--accent-hover)}
.drop-hint,.upload-card small{color:var(--muted);font-size:15px;line-height:1.7}
.hero-lane>span{background:var(--surface);font-size:16px;color:var(--text)}
.how-it-works h2{color:var(--text);font-size:28px}
.how-it-works h3{color:var(--text);font-size:20px;font-weight:600}
.how-it-works p,.how-it-works .how-intro{color:var(--muted);font-size:17px}
.how-it-works li>span{color:var(--accent);font-size:14px}
.home-hero .quota-notice strong{font-size:18px;color:#ffc39f}
.home-hero .quota-notice>span{font-size:16px;color:#f3d5bf}
.home-hero .quota-notice .quota-actions a{color:#ffe3cd}
.processing-simple .ring-base{stroke:#3d454f}
.processing-simple .ring-value{stroke:var(--accent)}
.processing-simple .progress-wave i{background:var(--accent)}
.processing-simple #processing-title{color:var(--text)}
.processing-simple .progress-hint{font-size:18px;color:#d9dfe6}
.processing-simple .progress-current{font-size:17px;color:var(--muted)}
.processing-simple #cancel{font-size:15px;color:var(--muted);min-height:44px}
.home-confirm{background:var(--page)}
.home-confirm::backdrop{background:#191c20ed}
.home-confirm p{color:#d9dfe6;font-size:17px}
.home-confirm-actions button{font-size:16px;min-height:44px}
#toast.visible{background:var(--surface);color:var(--text);border-color:var(--line);font-size:15px}

/* Shared information pages. */
.info-page h1{font-size:34px;font-weight:600;color:var(--text)}
.info-page h2{font-size:22px;color:var(--text)}
.info-page p,.info-page li{font-size:17px;line-height:1.85;color:#d9dfe6}
.info-page .back-link{font-size:15px;color:var(--muted)}
.info-page a,.site-footer a{color:var(--accent)}
.info-page summary{font-size:18px;color:var(--text)}
.info-page details p{font-size:17px;color:#d9dfe6}
.info-page small,.info-page .contact-email{font-size:15px;color:var(--muted)}
.info-page .info-button{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-size:16px}
.info-page .info-button.secondary{background:var(--surface);border-color:var(--line);color:var(--text)}
.site-footer{font-size:14px;color:var(--muted);border-color:#414952;line-height:1.7}
.site-footer a{color:#d9dfe6}

/* Pricing: larger figures, brighter text, clear surfaces. */
.info-page.pricing-page{max-width:1120px}
.pricing-page .pricing-intro{font-size:17px;color:#d9dfe6;line-height:1.8}
.pricing-card{background:var(--surface);border-color:#57616d}
.pricing-card.pro-card{background:var(--surface);border-color:#759e8f}
.pricing-page .pricing-card h2{font-size:20px;color:var(--text)}
.pricing-saving{font-size:14px;color:#b3e5d2}
.pricing-page .pricing-price{font-size:34px;color:var(--text)}
.pricing-price small{font-size:16px;color:var(--muted)}
.pricing-page .pricing-period{font-size:15px;color:var(--muted)}
.pricing-allowance{border-color:#505964}
.pricing-allowance strong{font-size:18px;color:var(--text)}
.pricing-allowance span{font-size:15px;color:var(--muted)}
.pricing-page .pricing-start{font-size:17px;min-height:52px;background:var(--accent);color:var(--accent-ink)}
.pricing-page .pricing-start:hover{background:var(--accent-hover)}
.pricing-page .pricing-start.secondary{background:#353c45;border-color:#687480;color:var(--text)}
.pricing-page .pricing-start.secondary:hover{background:#414a55}
.pricing-page .pricing-checkout-note{font-size:15px;color:var(--muted)}
.pricing-page .pricing-notes h2{font-size:18px;color:var(--text)}
.pricing-page .pricing-notes li{font-size:16px;color:#d9dfe6}

/* Accounts and login: readable at rest and while choosing an action. */
.account-page,.account-page:has(#member-panel:not([hidden])){font-size:17px}
.account-page h1,#member-panel h1,#login-panel h1{font-size:32px;color:var(--text)}
#login-panel .account-intro{font-size:16px;color:var(--muted)}
#member-email{font-size:17px;color:#d9dfe6;line-height:1.7}
#member-panel .account-plan strong{font-size:23px;color:var(--text)}
#member-panel .account-plan p{font-size:17px;color:#d9dfe6}
.account-page .account-button,#login-panel .account-button{font-size:17px;background:var(--accent);color:var(--accent-ink)}
.account-page .account-button:hover:not(:disabled){background:var(--accent-hover);color:var(--accent-ink)}
.account-page .account-button.secondary{background:var(--surface);border-color:#65717e;color:var(--text)}
.account-page .account-button.secondary:hover:not(:disabled){background:var(--surface-hover);color:var(--text)}
#login-panel .account-button.google{background:#f2f2f2;color:#1f1f1f;font-size:16px}
#login-panel .account-button.apple{background:#fff;color:#000;font-size:16px}
#login-panel .account-button.google:hover:not(:disabled),#login-panel .account-button.apple:hover:not(:disabled){background:#fff;color:#1f1f1f}
.account-page input[type=email],#email-login input{background:var(--surface);border-color:#697580;font-size:17px;color:var(--text)}
#email-login label{font-size:16px;color:#d9dfe6}
#email-login input::placeholder{color:#b8c2ce}
#login-panel .login-divider{font-size:14px;color:var(--muted)}
.login-policy,#login-panel .account-hint{font-size:14px;color:var(--muted);line-height:1.8}
.account-page a,.login-policy a{color:var(--accent)}
#member-panel .account-actions .account-text-button{font-size:16px;color:#d9dfe6}
.account-page:has(#member-panel:not([hidden])) .account-support,.account-page:has(#login-panel:not([hidden])) .account-support{font-size:15px}
.checkout-continuation,.selected-plan,#cancel-dialog{background:var(--surface);border-color:#65717e;color:var(--text)}
#member-selection{font-size:18px;color:var(--text)}
.change-plan{font-size:15px}
#member-reset,#account-message,#cancel-dialog p,#cancel-error{font-size:15px;color:var(--muted)}
#account-message[data-kind=success]{color:#b3e5d2}
#account-message[data-kind=error],#cancel-error{color:#ffc39f}

/* Editor: leave the blue and orange audio tracks intact. */
.result:not(.comparison-dashboard) .timeline{background:var(--surface);border-color:#626e7b}
.result:not(.comparison-dashboard) .stem-controls,.result:not(.comparison-dashboard) .ruler-label{background:var(--surface);border-color:#626e7b}
.result:not(.comparison-dashboard) .stem-name{color:var(--text);font-size:19px}
.result:not(.comparison-dashboard) .ruler span{font-size:13px;color:#d9dfe6}
.result:not(.comparison-dashboard) .volume-value,.result:not(.comparison-dashboard) .volume-display{font-size:14px;color:var(--text)}
.result:not(.comparison-dashboard) .music-stat{background:var(--surface);border-color:#5c6775;padding:6px 10px}
.result:not(.comparison-dashboard) .music-label,.result:not(.comparison-dashboard) .music-approx{font-size:14px;color:var(--muted)}
.result:not(.comparison-dashboard) .music-value{font-size:18px;color:var(--text)}
.result:not(.comparison-dashboard) .edit-actions button{color:#e3e9f0}
.result:not(.comparison-dashboard) .play{background:var(--accent);color:var(--accent-ink)}
.result:not(.comparison-dashboard) #clock{font-size:18px;color:var(--text)}
.result:not(.comparison-dashboard) #speed-settings>summary,.result:not(.comparison-dashboard) #pitch-down,.result:not(.comparison-dashboard) #pitch-up,.result:not(.comparison-dashboard) .speed-panel{background:var(--surface);border-color:#65717e}
.result:not(.comparison-dashboard) .control-label,.result:not(.comparison-dashboard) .pitch-control>span{font-size:16px;color:var(--muted)}
.result:not(.comparison-dashboard) .control-value,.result:not(.comparison-dashboard) #pitch-reset{font-size:18px;color:var(--text)}
.result:not(.comparison-dashboard) .speed-row>label,.result:not(.comparison-dashboard) .bpm-disclosure>summary,.result:not(.comparison-dashboard) .bpm-settings label{font-size:15px;color:#d9dfe6}
.result:not(.comparison-dashboard) .speed-presets button,.result:not(.comparison-dashboard) .bpm-settings p{font-size:14px;color:var(--muted)}
.result:not(.comparison-dashboard) .speed-presets button[aria-pressed=true]{background:#365748;color:#d7f5e8;border-color:#759e8f}
.result:not(.comparison-dashboard) .selection-hint{font-size:14px!important;color:var(--muted)!important;line-height:1.6}
.result:not(.comparison-dashboard) .selection-times,.result:not(.comparison-dashboard) .selection-times input{font-size:14px}
.result:not(.comparison-dashboard) .downloads{border-color:#505964}
.result:not(.comparison-dashboard) .download-note,.result:not(.comparison-dashboard) .export-format{font-size:16px;color:#d9dfe6}
.result:not(.comparison-dashboard) .downloads button{font-size:16px;min-height:44px}
.result:not(.comparison-dashboard) .export-format select{font-size:16px;min-height:44px;background:var(--surface);color:transparent;border-color:#65717e}
.result:not(.comparison-dashboard) .export-caption{font-size:16px;color:var(--text)}
.result:not(.comparison-dashboard) .export-format select option{background:var(--surface);color:var(--text)}
.result:not(.comparison-dashboard) .export-select{min-width:174px}
.result:not(.comparison-dashboard) .downloads #instrumental{background:#3d5779;color:#f2f6fc;border-color:#7599c3}
.result:not(.comparison-dashboard) .downloads #vocal{background:#78543d;color:#fff0e4;border-color:#c48b60}
.result:not(.comparison-dashboard) .downloads #mix{background:var(--surface);color:var(--text);border-color:#65717e}

@media(max-width:980px){.pricing-grid{grid-template-columns:1fr}.info-page.pricing-page{max-width:540px}.pricing-page .pricing-price{font-size:32px}}
@media(max-width:650px){
 .home-nav a,.account-header>a:not(.brand){font-size:15px}
 .home-hero h1{font-size:34px}.home-hero .hero-description{font-size:17px}
 .home-hero .hero-eyebrow{font-size:14px}.how-it-works h2{font-size:25px}
 .how-it-works p,.how-it-works .how-intro{font-size:16px}
 .info-page h1,.account-page h1,#login-panel h1,#member-panel h1{font-size:30px}
 .pricing-page .pricing-intro{font-size:16px}.pricing-saving{font-size:14px}
 .processing-simple .progress-hint{font-size:17px}
 .result:not(.comparison-dashboard) .stem-name{font-size:18px}
 .result:not(.comparison-dashboard) .downloads button,.result:not(.comparison-dashboard) .export-format{font-size:15px}
 .result:not(.comparison-dashboard) .ruler span{font-size:12px}
 .home-hero .quota-notice strong{font-size:17px}.home-hero .quota-notice>span{font-size:15px}
}