:root[data-palette]{color-scheme:dark;--copy:#f3f0eb;--muted:#c1c6c4}
:root[data-palette="tiffany"]{--bg:#171717;--panel:#222222;--line:#21F1A830;--ink:#21F1A8;--accent:#21F1A8;--sand:#171717}
:root[data-palette="violet"]{--bg:#3C1A47;--panel:#492653;--line:#B6FF0035;--ink:#B6FF00;--accent:#B6FF00;--sand:#3C1A47;--muted:#d7c8dc}
:root[data-palette="volcano"]{--bg:#001621;--panel:#082632;--line:#FF410345;--ink:#FF4103;--accent:#FF4103;--sand:#001621;--muted:#bbcbd0}
[data-palette] body{color:var(--copy)}
[data-palette] .intro,[data-palette] .stat{background:var(--ink);color:var(--sand)}
[data-palette] .intro p,[data-palette] .stat small{color:var(--sand);opacity:.8}
[data-palette] nav{background:var(--panel)}
[data-palette] .card h2,[data-palette] .section-heading h2,[data-palette] dialog h2{color:var(--copy)}
[data-palette] .preview{background:var(--panel)}
[data-palette] .badge{background:var(--ink);color:var(--sand)}
[data-palette] input{color:var(--copy)}
[data-palette] dialog{background:var(--bg);color:var(--copy)}
[data-palette] dialog::backdrop{background:#000b}
[data-palette] input::file-selector-button{color:var(--sand)}
[data-palette] footer strong{color:var(--ink)}

/* Yatto reference: dark foundation, violet surfaces, lime actions. */
:root[data-palette="neon"]{--bg:#0D0B18;--panel:#171225;--line:#8B35F536;--ink:#C5FF47;--accent:#C5FF47;--sand:#0D0B18;--copy:#F5F2FB;--muted:#B5A8CA;--violet:#8B35F5}
[data-palette="neon"] .brand span{color:#BF87FF;border-color:#8B35F580}
[data-palette="neon"] nav{background:#110E1F;border-color:#8B35F52b}
[data-palette="neon"] nav button.active{background:var(--violet);color:#fff;box-shadow:0 0 18px #8B35F52b}
[data-palette="neon"] .intro{background:#241039;color:var(--copy);border:1px solid #A54AFF95;box-shadow:inset -22px -12px 54px #7420C760,0 0 24px #751CD515}
[data-palette="neon"] .intro h1{font-weight:700;line-height:1.12;letter-spacing:-2.2px}
[data-palette="neon"] .intro em{color:var(--ink);font-weight:650}
[data-palette="neon"] .eyebrow{color:#E0C4FF;opacity:1;border:1px solid #B475E875;border-radius:9px;padding:5px 9px;display:inline-block;font-size:9px;letter-spacing:1.3px}
[data-palette="neon"] .intro p{color:#D8BCEB;opacity:1}
[data-palette="neon"] .card{border-color:#8B35F54d;background:#13101F}
[data-palette="neon"] .card:hover{border-color:#A851FF}
[data-palette="neon"] .badge{background:#F1EAFB;color:#231231}
[data-palette="neon"] .meta strong{color:var(--ink)}
[data-palette="neon"] .stat{background:#231333;color:var(--ink);border:1px solid #8B35F54a}
[data-palette="neon"] .stat small{color:var(--muted);opacity:1}
[data-palette="neon"] .close{color:#C997FF;border-color:#8B35F55c}
[data-palette="neon"] .search input{background:#120E1F}
[data-palette="neon"] .notice{border-color:#8B35F52b;color:var(--muted);background:#100D1B}
[data-palette="neon"] details{border-color:#8B35F53a}
[data-palette="neon"] button:hover{border-color:#B66EFF}
[data-palette="neon"] .primary{box-shadow:0 0 16px #C5FF4710}
[data-palette="neon"] input:focus-visible{outline-color:#B16CFF}
@media(max-width:650px){[data-palette="neon"] .intro h1{font-size:32px;letter-spacing:-1.5px}}
[data-palette="neon"] .dialog-video{background:#090610}
[data-palette="neon"] .brand span{color:#CF9AFF;background:#29123E;border-color:#8B35F5}

/* The user requested the reference's gradients, retaining the existing layout. */
[data-palette="neon"] .intro{
  background:radial-gradient(ellipse at 106% 0%,#9637FF 0%,#7922D9B0 24%,transparent 58%),radial-gradient(ellipse at -8% 115%,#9225E8B3 0%,transparent 55%),linear-gradient(115deg,#160C2A 5%,#29103F 62%,#471072);
  border-color:#B44DFFB0;
  box-shadow:inset 0 0 30px #8B35F522,0 0 24px #751CD51A;
}
[data-palette="tiffany"] .intro{
  background:radial-gradient(ellipse at 106% 0%,#21F1A8 0%,#138B64B0 24%,transparent 58%),radial-gradient(ellipse at -8% 115%,#1ACC8C70 0%,transparent 55%),linear-gradient(115deg,#0B211C 5%,#10362C 62%,#07523D);
  color:var(--copy);border:1px solid #21F1A885;box-shadow:inset 0 0 30px #21F1A818,0 0 24px #21F1A80C;
}
[data-palette="tiffany"] .intro h1{font-weight:700;line-height:1.12;letter-spacing:-2.2px}
[data-palette="tiffany"] .intro em{color:#C0FFE6;font-weight:650}
[data-palette="tiffany"] .intro p{color:#C0DED3;opacity:1}
[data-palette="tiffany"] .eyebrow{color:#C0DED3;opacity:1;border:1px solid #80DAB875;border-radius:9px;padding:5px 9px;display:inline-block;font-size:9px;letter-spacing:1.3px}
@media(max-width:650px){[data-palette="tiffany"] .intro h1{font-size:32px;letter-spacing:-1.5px}}
[data-palette="neon"] .stat{background:linear-gradient(135deg,#1C112B,#361348)}
[data-palette="tiffany"] .stat{background:linear-gradient(135deg,#12271F,#1C503D);color:var(--ink);border:1px solid #21F1A840}
[data-palette="tiffany"] .stat small{color:#C0DED3;opacity:1}