/* Maestro Radio brand layer (2026-11-08). Load LAST on every server-rendered page so it matches the homepage:
   same near-black, warm white, cyan + violet, Syne headlines, Inter Tight body, JetBrains Mono eyebrows.
   Homepage tokens (src/index.css .dark): bg hsl(225 22% 4%), card 7%, border 15%, fg hsl(40 27% 93%), primary hsl(194 87% 60%). */
:root{
  color-scheme:dark;
  --bg:#08090d; --panel:#0e1016; --card:#0b0d12; --line:#22252e; --text:#f2eee8; --muted:#a3a7b2;
  --lime:#40c8f2; --accent:#40c8f2; --sky:#7fdcf7; --violet:#8b5cf6; --err:#ff9e9e;
  --brand-grad:linear-gradient(90deg,#40c8f2,#8b5cf6);
  --font-display:Syne,"Inter Tight",system-ui,sans-serif;
  --font-body:"Inter Tight",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,monospace;
}
html{background:var(--bg)}
body{
  font-family:var(--font-body)!important; color:var(--text);
  background:
    radial-gradient(60% 45% at 85% -5%,rgba(64,200,242,.16),transparent 70%),
    radial-gradient(45% 40% at -5% 20%,rgba(139,92,246,.14),transparent 70%),
    var(--bg) !important;
  background-attachment:fixed!important;
}
h1,h2,h3,.brand{font-family:var(--font-display)!important;letter-spacing:-.02em}
h1 em,h2 em{background:var(--brand-grad);-webkit-background-clip:text;background-clip:text;color:transparent!important}
.eyebrow,.steplabel,.tag,.choice .tag{font-family:var(--font-mono)!important;color:var(--lime)!important;letter-spacing:.2em;text-transform:uppercase}

/* header: same glassy bar as the main site */
body>header{position:sticky;top:0;z-index:40;background:rgba(8,9,13,.78)!important;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid var(--line)!important}
header .brand{color:var(--text)!important;font-weight:800;letter-spacing:.06em}
header .brand span{background:var(--brand-grad);-webkit-background-clip:text;background-clip:text;color:transparent!important}
header nav a{color:var(--muted)!important;font-family:var(--font-body)}
header nav a:hover,header nav a[aria-current]{color:var(--text)!important}

/* primary actions: cyan to violet like the homepage buttons */
.btn:not(.ghost),button.primary,.primary-btn{background:var(--brand-grad)!important;color:#05121a!important;border:0!important;box-shadow:0 0 34px -12px rgba(64,200,242,.75)}
.btn.ghost{border-color:var(--line)!important;color:var(--text)!important}
.chip.sel,.toggle button.on{background:var(--lime)!important;color:#05121a!important;border-color:var(--lime)!important}
.dots li.on,.bar i{background:var(--brand-grad)!important}
.choice.sel{border-color:var(--lime)!important;box-shadow:0 0 0 1px var(--lime) inset,0 0 30px -14px rgba(64,200,242,.8)!important}
.slide,details,dialog,.card{border-color:var(--line)!important}
.slide{background:linear-gradient(140deg,rgba(64,200,242,.06),rgba(139,92,246,.05) 60%,transparent),var(--panel)!important}
a{color:var(--sky)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--lime)!important;box-shadow:0 0 0 3px rgba(64,200,242,.2)}
.ok,.done .mt,.files li.done .mt{color:#5ee0a0!important}
.files li.done{border-color:#2c5f49!important}
.drop.over,.drop:hover,.drop:focus-within{background:rgba(64,200,242,.07)!important;border-color:var(--lime)!important}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}