/* Themes. Every color the app uses is a token here, set per theme on <html data-theme>.
   Ambient light (the "live background") is three soft glows, two light shafts, an edge glow, and
   film grain, all positioned by tokens. Dad's seven themes come straight from his Prosper. */

:root{
  --paper:#f5f7fb; --sheet:#ffffff; --sheet-2:#f0f3fa; --solid:#ffffff; --ink:#1b2440; --muted:#5d6782; --faint:#8a93ab;
  --rule:#d9deea; --accent:#2f4fd6; --accent-ink:#ffffff; --accent-soft:#e6ebfd;
  --hl:#fff1b8; --hl-ink:#5a4700; --done:#1f8a5b; --done-ink:#ffffff; --done-soft:#e3f4ec; --warn:#b45309; --danger:#c02626;
  --sun:#e0a100; --rain:#2563eb; --storm:#ea580c;
  --shadow:0 1px 2px rgba(27,36,64,.06), 0 8px 24px rgba(27,36,64,.06);
  --bg-treatment:var(--paper); --blend:screen; --grain-opacity:0;
  color-scheme:light;
}
/* Classic follows the device */
@media (prefers-color-scheme: dark){
  :root:not([data-theme]),:root[data-theme="auto"]{
    --paper:#0f1219; --sheet:#171b26; --sheet-2:#1d2230; --solid:#171b26; --ink:#e7eaf4; --muted:#9aa3bd; --faint:#6f7894;
    --rule:#2a3042; --accent:#8fa6ff; --accent-ink:#0f1219; --accent-soft:#1e2742;
    --hl:#3a3216; --hl-ink:#f3dc86; --done:#4fcf95; --done-ink:#0f1219; --done-soft:#14291f; --warn:#f0a35a; --danger:#ff7a7a;
    --sun:#f2c66d; --rain:#7aa7ff; --storm:#ff8f66;
    --shadow:0 1px 2px rgba(0,0,0,.3); --bg-treatment:var(--paper);
    color-scheme:dark;
  }
}

/* ---------- Clean ---------- */
:root[data-theme="paper"]{
  --paper:#ffffff; --sheet:#ffffff; --sheet-2:#f6f6f4; --solid:#ffffff; --ink:#161616; --muted:#5c5c5c; --faint:#8c8c8c;
  --rule:#e6e6e3; --accent:#1c1c1c; --accent-ink:#ffffff; --accent-soft:#efefec;
  --hl:#fdf3c4; --hl-ink:#4d3d00; --done:#1d7a50; --done-ink:#ffffff; --done-soft:#e6f3ec;
  --shadow:none; --bg-treatment:#ffffff;
}
:root[data-theme="ink"]{
  --paper:#0b0b0c; --sheet:#141416; --sheet-2:#1b1b1e; --solid:#141416; --ink:#ededed; --muted:#a3a3a8; --faint:#75757b;
  --rule:#26262a; --accent:#f2f2f2; --accent-ink:#0b0b0c; --accent-soft:#232327;
  --hl:#2e2a17; --hl-ink:#f1dc8f; --done:#5fd49c; --done-ink:#0b0b0c; --done-soft:#132219; --warn:#f0a35a; --danger:#ff7a7a;
  --sun:#f2c66d; --rain:#7aa7ff; --storm:#ff8f66;
  --shadow:none; --bg-treatment:#0b0b0c; color-scheme:dark;
}

/* ---------- Bright ---------- */
:root[data-theme="citrus"]{
  --paper:#fff8ec; --sheet:rgba(255,255,255,.84); --sheet-2:rgba(255,244,226,.9); --solid:#fffaf2; --ink:#2b1a0e; --muted:#6f5240; --faint:#97786a;
  --rule:rgba(194,65,12,.16); --accent:#c2410c; --accent-ink:#ffffff; --accent-soft:#ffe6d2;
  --hl:#fff0b0; --hl-ink:#5a4100; --done:#2f7d32; --done-ink:#ffffff; --done-soft:#e5f3e1;
  --shadow:0 1px 2px rgba(120,60,10,.06), 0 10px 26px rgba(194,65,12,.08);
  --bg-treatment:linear-gradient(160deg,#fff3dc 0%,#fff8ec 45%,#ffeef0 100%);
  --blend:multiply; --g-blur:70px;
  --g1:rgba(255,190,80,.55); --g1-t:-18%; --g1-l:-14%; --g1-w:62vw; --g1-h:58vh; --g1-o:1;
  --g2:rgba(255,140,120,.40); --g2-b:-20%; --g2-r:-12%; --g2-w:56vw; --g2-h:56vh; --g2-o:1;
  --g3:rgba(255,226,120,.40); --g3-t:30%; --g3-r:10%; --g3-w:34vw; --g3-h:34vh; --g3-o:.8;
  --s-blur:60px; --s1:rgba(255,200,120,.35); --s1-t:8vh; --s1-r:-10vw; --s1-w:70vw; --s1-h:8vh; --s1-rot:-30deg; --s1-o:1;
}
:root[data-theme="lagoon"]{
  --paper:#eefaff; --sheet:rgba(255,255,255,.84); --sheet-2:rgba(232,248,255,.92); --solid:#f6fcff; --ink:#0b2a36; --muted:#3f6271; --faint:#6f8f9b;
  --rule:rgba(14,116,144,.16); --accent:#0e7490; --accent-ink:#ffffff; --accent-soft:#d5f2f8;
  --hl:#fff4b8; --hl-ink:#4f4200; --done:#15803d; --done-ink:#ffffff; --done-soft:#dcf5e5;
  --shadow:0 1px 2px rgba(8,60,80,.05), 0 10px 26px rgba(14,116,144,.08);
  --bg-treatment:linear-gradient(170deg,#e3f7ff 0%,#f2fcff 50%,#e9fbf4 100%);
  --blend:multiply; --g-blur:76px;
  --g1:rgba(94,234,212,.42); --g1-b:-20%; --g1-l:-14%; --g1-w:64vw; --g1-h:60vh; --g1-o:1;
  --g2:rgba(125,211,252,.50); --g2-t:-22%; --g2-r:-10%; --g2-w:60vw; --g2-h:56vh; --g2-o:1;
  --s-blur:70px; --s1:rgba(56,189,248,.22); --s1-t:30vh; --s1-r:-20vw; --s1-w:120vw; --s1-h:18vh; --s1-rot:-14deg; --s1-o:1;
}
:root[data-theme="blossom"]{
  --paper:#fff4f8; --sheet:rgba(255,255,255,.85); --sheet-2:rgba(255,238,246,.92); --solid:#fff8fb; --ink:#3a1028; --muted:#734660; --faint:#9c7488;
  --rule:rgba(190,24,93,.14); --accent:#be185d; --accent-ink:#ffffff; --accent-soft:#fde0ec;
  --hl:#fff0b8; --hl-ink:#5a4100; --done:#1f7a4d; --done-ink:#ffffff; --done-soft:#e1f4ea;
  --shadow:0 1px 2px rgba(110,20,60,.05), 0 10px 26px rgba(190,24,93,.08);
  --bg-treatment:linear-gradient(155deg,#ffeaf2 0%,#fff6f9 50%,#f3edff 100%);
  --blend:multiply; --g-blur:74px;
  --g1:rgba(249,168,212,.55); --g1-t:-20%; --g1-r:-14%; --g1-w:60vw; --g1-h:58vh; --g1-o:1;
  --g2:rgba(253,186,116,.40); --g2-b:-18%; --g2-l:-12%; --g2-w:54vw; --g2-h:52vh; --g2-o:1;
  --g3:rgba(196,181,253,.45); --g3-t:35%; --g3-l:30%; --g3-w:36vw; --g3-h:36vh; --g3-o:.8;
}

/* ---------- In between ---------- */
:root[data-theme="dusk"]{
  --paper:#34304d; --sheet:rgba(46,42,70,.80); --sheet-2:rgba(58,53,86,.86); --solid:#2f2b48; --ink:#f4effc; --muted:#cbc2e0; --faint:#a59cbd;
  --rule:rgba(255,200,170,.16); --accent:#ffb38a; --accent-ink:#2a2440; --accent-soft:rgba(255,179,138,.16);
  --hl:rgba(255,214,140,.16); --hl-ink:#ffdc9a; --done:#7ee0ad; --done-ink:#1f2a24; --done-soft:rgba(126,224,173,.14); --warn:#ffd08a; --danger:#ff9a9a;
  --sun:#ffd27a; --rain:#9fc2ff; --storm:#ffa07a;
  --shadow:0 1px 2px rgba(0,0,0,.2); color-scheme:dark;
  --bg-treatment:linear-gradient(180deg,#2c2944 0%,#3b3558 48%,#5a4466 78%,#7a4f5f 100%);
  --g-blur:90px;
  --g1:rgba(255,150,110,.30); --g1-b:-22%; --g1-l:10%; --g1-w:80vw; --g1-h:46vh; --g1-o:1;
  --g2:rgba(150,130,255,.22); --g2-t:-20%; --g2-r:-14%; --g2-w:54vw; --g2-h:52vh; --g2-o:1;
  --s-blur:40px; --s1:rgba(255,190,150,.18); --s1-t:70vh; --s1-r:-10vw; --s1-w:120vw; --s1-h:4vh; --s1-rot:0deg; --s1-o:1;
  --grain-opacity:.05;
}
:root[data-theme="slate"]{
  --paper:#4d586c; --sheet:rgba(60,69,86,.86); --sheet-2:rgba(70,80,99,.9); --solid:#3f4859; --ink:#f2f5f9; --muted:#d0d7e2; --faint:#a9b3c3;
  --rule:rgba(220,230,245,.14); --accent:#a8cbff; --accent-ink:#1d2533; --accent-soft:rgba(168,203,255,.16);
  --hl:rgba(255,220,140,.16); --hl-ink:#ffe2a0; --done:#86e0b0; --done-ink:#1d2533; --done-soft:rgba(134,224,176,.14); --warn:#ffd08a; --danger:#ffa3a3;
  --sun:#ffd27a; --rain:#b5d0ff; --storm:#ffab85;
  --shadow:0 1px 2px rgba(0,0,0,.18); color-scheme:dark;
  --bg-treatment:linear-gradient(165deg,#5a6680 0%,#4d586c 50%,#434c5e 100%);
  --g-blur:96px;
  --g1:rgba(190,215,255,.16); --g1-t:-26%; --g1-l:-10%; --g1-w:70vw; --g1-h:60vh; --g1-o:1;
  --g2:rgba(150,240,220,.10); --g2-b:-24%; --g2-r:-14%; --g2-w:60vw; --g2-h:56vh; --g2-o:1;
}
:root[data-theme="sage"]{
  --paper:#cbd5c6; --sheet:rgba(240,245,237,.88); --sheet-2:rgba(226,234,222,.94); --solid:#eef3ea; --ink:#1d2a1f; --muted:#4b5b4d; --faint:#6e7d70;
  --rule:rgba(40,70,45,.16); --accent:#3f6b47; --accent-ink:#ffffff; --accent-soft:#dbe8d8;
  --hl:#f5ecb8; --hl-ink:#4d4200; --done:#2f6f45; --done-ink:#ffffff; --done-soft:#dcecdf;
  --shadow:0 1px 2px rgba(30,50,30,.06), 0 8px 22px rgba(30,50,30,.07);
  --bg-treatment:linear-gradient(170deg,#d5dece 0%,#c8d3c2 55%,#bfcab9 100%);
  --blend:multiply; --g-blur:90px;
  --g1:rgba(150,180,130,.40); --g1-t:-22%; --g1-l:-12%; --g1-w:66vw; --g1-h:60vh; --g1-o:1;
  --g2:rgba(230,215,160,.45); --g2-b:-20%; --g2-r:-12%; --g2-w:56vw; --g2-h:54vh; --g2-o:1;
}

/* ---------- Dad's seven (from his Prosper) ---------- */
:root[data-theme="abyssal"],:root[data-theme="bioluminescent"],:root[data-theme="sea-glass"],:root[data-theme="moonlit"],
:root[data-theme="synth-grid"],:root[data-theme="synth-drive"],:root[data-theme="synth-sunset"]{
  --ink:#E4F6F5; --faint:#789399;
  --hl:rgba(242,198,109,.13); --hl-ink:#F2C66D; --warn:#F2C66D; --danger:#ff9a8a;
  --done:#4fd69c; --done-soft:rgba(79,214,156,.13);
  --sun:#F2C66D; --rain:#5b9dff; --storm:#FF8F66;
  --shadow:0 1px 2px rgba(0,0,0,.35); --grain-opacity:.07; --edge-display:block;
  color-scheme:dark;
}
:root[data-theme="abyssal"]{
  --paper:#020A12; --sheet:rgba(3,18,25,.78); --sheet-2:rgba(6,24,32,.86); --solid:#061820;
  --accent:#54CEE1; --accent-ink:#020A12; --done-ink:#020A12; --accent-soft:rgba(84,206,225,.14); --muted:#A3BDC2;
  --rule:rgba(104,195,201,.15); --edge-rgb:71,190,221;
  --bg-treatment:linear-gradient(155deg,rgba(17,93,123,.34) 0%,rgba(4,28,43,.18) 31%,rgba(2,10,18,.94) 70%),#020A12;
  --g-blur:84px;
  --g1:rgba(71,190,221,.42); --g1-t:-22%; --g1-l:-16%; --g1-w:66vw; --g1-h:62vh; --g1-o:.9;
  --s-blur:70px;
  --s1:rgba(104,220,235,.15); --s1-t:6vh; --s1-r:-14vw; --s1-w:80vw; --s1-h:9vh; --s1-rot:-56deg; --s1-o:1;
}
:root[data-theme="bioluminescent"]{
  --paper:#030D14; --sheet:rgba(3,20,28,.80); --sheet-2:rgba(4,24,31,.84); --solid:#061820;
  --accent:#42DCB8; --accent-ink:#030D14; --done-ink:#030D14; --accent-soft:rgba(66,220,184,.14); --muted:#A0BCBA;
  --rule:rgba(75,226,201,.16); --edge-rgb:27,211,170;
  --bg-treatment:radial-gradient(circle at 88% 4%,rgba(102,74,211,.30),transparent 38%),linear-gradient(150deg,rgba(4,71,74,.54),rgba(2,17,24,.90) 52%,rgba(5,8,20,.98)),#030D14;
  --g-blur:88px;
  --g1:rgba(27,211,170,.35); --g1-b:-24%; --g1-l:-16%; --g1-w:64vw; --g1-h:62vh; --g1-o:.9;
  --g2:rgba(107,82,231,.30); --g2-t:-20%; --g2-r:-14%; --g2-w:52vw; --g2-h:52vh; --g2-o:.9;
}
:root[data-theme="sea-glass"]{
  --paper:#06151B; --sheet:rgba(8,29,34,.82); --sheet-2:rgba(10,35,39,.85); --solid:#0A2327;
  --accent:#91D8C5; --accent-ink:#06151B; --done-ink:#06151B; --accent-soft:rgba(145,216,197,.14); --muted:#A6C0BF;
  --rule:rgba(141,207,191,.16); --edge-rgb:133,216,194;
  --bg-treatment:radial-gradient(ellipse at 22% -5%,rgba(133,216,194,.22),transparent 46%),linear-gradient(160deg,rgba(20,79,78,.62),rgba(7,34,39,.90) 44%,rgba(5,18,24,.98)),#06151B;
  --g-blur:96px;
  --g1:rgba(133,216,194,.22); --g1-t:-28%; --g1-l:-20%; --g1-w:84vw; --g1-h:72vh; --g1-o:.8;
  --s-blur:92px;
  --s1:rgba(71,135,164,.12); --s1-t:34vh; --s1-r:-24vw; --s1-w:130vw; --s1-h:30vh; --s1-rot:-17deg; --s1-o:1;
}
:root[data-theme="moonlit"]{
  --paper:#030F18; --sheet:rgba(4,19,30,.80); --sheet-2:rgba(6,25,38,.86); --solid:#06192A;
  --accent:#5AB0E0; --accent-ink:#030F18; --done-ink:#030F18; --accent-soft:rgba(90,176,224,.14);
  --ink:#E6F2F8; --muted:#A5BCC9; --faint:#7B96A4;
  --rule:rgba(120,185,225,.15); --edge-rgb:150,205,235;
  --bg-treatment:radial-gradient(ellipse at 50% -14%,rgba(160,208,236,.20),transparent 52%),linear-gradient(180deg,rgba(16,74,104,.46) 0%,rgba(6,32,48,.70) 38%,rgba(3,12,20,.97) 78%),#030F18;
  --g-blur:86px;
  --g1:rgba(170,215,240,.22); --g1-t:-30%; --g1-l:22vw; --g1-w:58vw; --g1-h:54vh; --g1-o:1;
  --g2:rgba(22,98,150,.32); --g2-b:-24%; --g2-r:-16%; --g2-w:62vw; --g2-h:58vh; --g2-o:.9;
  --s-blur:64px;
  --s1:rgba(170,215,240,.12); --s1-t:10vh; --s1-r:18vw; --s1-w:70vh; --s1-h:6vw; --s1-rot:-78deg; --s1-o:1;
  --s2:rgba(170,215,240,.08); --s2-t:14vh; --s2-r:30vw; --s2-w:64vh; --s2-h:4vw; --s2-rot:-72deg; --s2-o:1;
}
:root[data-theme="synth-grid"]{
  --paper:#0A0618; --sheet:rgba(14,9,34,.93); --sheet-2:rgba(20,12,44,.95); --solid:#120B2A;
  --accent:#2DE2E6; --accent-ink:#0A0618; --done-ink:#0A0618; --accent-soft:rgba(45,226,230,.14);
  --ink:#F2ECFF; --muted:#BCB2DA; --faint:#8F85B3;
  --rule:rgba(178,120,255,.20); --edge-rgb:255,62,165;
  --bg-treatment:linear-gradient(180deg,#07040F 0%,#110828 40%,#2E0E55 62%,#4A1070 64%,#0A0618 66%,#0A0618 100%),#0A0618;
  --g-blur:90px;
  --g1:rgba(178,59,255,.28); --g1-t:-24%; --g1-l:-14%; --g1-w:60vw; --g1-h:56vh; --g1-o:.9;
  --g2:rgba(45,226,230,.10); --g2-t:-20%; --g2-r:-18%; --g2-w:50vw; --g2-h:50vh; --g2-o:1;
  --grain-opacity:.06;
}
:root[data-theme="synth-grid"] .aurora::before{
  content:"";position:absolute;left:-100%;right:-100%;top:64vh;height:80vh;
  background-image:linear-gradient(rgba(255,62,165,.9) 2px,transparent 2px),linear-gradient(90deg,rgba(255,62,165,.75) 2px,transparent 2px);
  background-size:80px 80px;background-position:center 0;
  transform:perspective(36vh) rotateX(72deg);transform-origin:50% 0;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 30%);mask-image:linear-gradient(to bottom,transparent 0%,#000 30%);
  opacity:.42;animation:synth-roll 26s linear infinite}
:root[data-theme="synth-grid"] .aurora::after{
  content:"";position:absolute;left:50%;top:64vh;width:34vw;max-width:460px;aspect-ratio:1;
  transform:translate(-50%,-50%);border-radius:50%;
  background:linear-gradient(180deg,#FF5FB8 0%,#D23BFF 55%,#6A2BFF 100%);
  -webkit-mask-image:linear-gradient(to bottom,#000 48%,transparent 50%),repeating-linear-gradient(180deg,#000 0 14px,transparent 14px 20px);
  mask-image:linear-gradient(to bottom,#000 48%,transparent 50%),repeating-linear-gradient(180deg,#000 0 14px,transparent 14px 20px);
  -webkit-mask-composite:source-in;mask-composite:intersect;
  opacity:.34;filter:blur(.3px) drop-shadow(0 0 40px rgba(210,59,255,.6))}
:root[data-theme="synth-drive"]{
  --paper:#060716; --sheet:rgba(10,11,32,.88); --sheet-2:rgba(14,15,40,.92); --solid:#0C0D26;
  --accent:#8FA8FF; --accent-ink:#060716; --done-ink:#060716; --accent-soft:rgba(143,168,255,.14);
  --ink:#EAEEFF; --muted:#B2B7D8; --faint:#858BB0;
  --rule:rgba(143,168,255,.17); --edge-rgb:120,90,255;
  --bg-treatment:linear-gradient(180deg,#05060F 0%,#0B0B24 48%,#1A0F3C 86%,#060716 100%),#060716;
  --g-blur:96px;
  --g1:rgba(110,80,255,.22); --g1-b:-26%; --g1-l:-10%; --g1-w:70vw; --g1-h:50vh; --g1-o:1;
  --s-blur:26px;
  --s1:rgba(45,226,230,.55); --s1-t:72vh; --s1-r:-10vw; --s1-w:120vw; --s1-h:3px; --s1-rot:0deg; --s1-o:.9;
  --s2:rgba(255,62,165,.42); --s2-t:79vh; --s2-r:-30vw; --s2-w:110vw; --s2-h:2px; --s2-rot:0deg; --s2-o:.9;
  --grain-opacity:.05;
}
:root[data-theme="synth-drive"] .grain{background-image:repeating-linear-gradient(180deg,rgba(255,255,255,.55) 0 1px,transparent 1px 3px);opacity:.035}
:root[data-theme="synth-drive"] .ribbons span{border-radius:2px}
:root[data-theme="synth-drive"] .aurora::before{
  content:"";position:absolute;left:0;right:0;top:76vh;height:1px;
  background:linear-gradient(90deg,transparent,rgba(143,168,255,.55),rgba(255,62,165,.45),transparent);
  box-shadow:0 0 24px 4px rgba(120,90,255,.35)}
:root[data-theme="synth-sunset"]{
  --paper:#0D0221; --sheet:rgba(18,6,40,.93); --sheet-2:rgba(24,8,50,.95); --solid:#16072E;
  --accent:#2DE2E6; --accent-ink:#0D0221; --done-ink:#0D0221; --accent-soft:rgba(45,226,230,.14);
  --ink:#FFF1FA; --muted:#C9B4D8; --faint:#9A85B0;
  --rule:rgba(255,62,165,.20); --edge-rgb:255,46,136;
  --bg-treatment:linear-gradient(180deg,#0D0221 0%,#261447 45%,#5A1463 70%,#8E1F6B 79%,#0D0221 80%,#0D0221 100%),#0D0221;
  --g-blur:100px;
  --g1:rgba(255,46,136,.20); --g1-b:10%; --g1-l:10%; --g1-w:80vw; --g1-h:40vh; --g1-o:1;
  --grain-opacity:.05;
}
:root[data-theme="synth-sunset"] .aurora::before{
  content:"";position:absolute;left:-100%;right:-100%;top:80vh;height:70vh;
  background-image:linear-gradient(rgba(45,226,230,.9) 2px,transparent 2px),linear-gradient(90deg,rgba(255,46,136,.85) 2px,transparent 2px);
  background-size:80px 80px;background-position:center 0;background-color:#0D0221;
  transform:perspective(24vh) rotateX(72deg);transform-origin:50% 0;
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.35) 0%,#000 25%);mask-image:linear-gradient(to bottom,rgba(0,0,0,.35) 0%,#000 25%);
  opacity:.6;animation:synth-roll 24s linear infinite}
:root[data-theme="synth-sunset"] .aurora::after{
  content:"";position:absolute;left:50%;top:80vh;width:40vw;max-width:560px;aspect-ratio:1;
  transform:translate(-50%,-50%);border-radius:50%;
  background:linear-gradient(180deg,#FFE66D 0%,#FF9E4A 38%,#FF2E88 72%,#B01E8F 100%);
  -webkit-mask-image:linear-gradient(to bottom,#000 49.5%,transparent 50%),repeating-linear-gradient(180deg,#000 0 18px,transparent 18px 26px);
  mask-image:linear-gradient(to bottom,#000 49.5%,transparent 50%),repeating-linear-gradient(180deg,#000 0 18px,transparent 18px 26px);
  -webkit-mask-composite:source-in;mask-composite:intersect;
  opacity:.72;filter:drop-shadow(0 0 60px rgba(255,46,136,.55))}

/* ---------- the ambient layers ---------- */
.amb{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:var(--bg-treatment)}
.aurora,.ribbons{position:absolute;inset:0;overflow:hidden}
.aurora span,.ribbons span{position:absolute;display:block;border-radius:50%;mix-blend-mode:var(--blend);will-change:transform}
.aurora .a1{top:var(--g1-t,auto);left:var(--g1-l,auto);right:var(--g1-r,auto);bottom:var(--g1-b,auto);
  width:var(--g1-w,0);height:var(--g1-h,0);opacity:var(--g1-o,1);filter:blur(var(--g-blur,80px));
  background:radial-gradient(closest-side,var(--g1,transparent),transparent 100%);animation:amb-drift-a 26s ease-in-out infinite alternate}
.aurora .a2{top:var(--g2-t,auto);left:var(--g2-l,auto);right:var(--g2-r,auto);bottom:var(--g2-b,auto);
  width:var(--g2-w,0);height:var(--g2-h,0);opacity:var(--g2-o,1);filter:blur(var(--g-blur,80px));
  background:radial-gradient(closest-side,var(--g2,transparent),transparent 100%);animation:amb-drift-b 22s ease-in-out infinite alternate}
.aurora .a3{top:var(--g3-t,auto);left:var(--g3-l,auto);right:var(--g3-r,auto);bottom:var(--g3-b,auto);
  width:var(--g3-w,0);height:var(--g3-h,0);opacity:var(--g3-o,1);filter:blur(var(--g-blur,80px));
  background:radial-gradient(closest-side,var(--g3,transparent),transparent 100%);animation:amb-drift-a 29s ease-in-out infinite alternate-reverse}
.aurora .edge{display:var(--edge-display,none);inset:0;border-radius:0;filter:none;mix-blend-mode:normal;
  background:linear-gradient(to right,rgba(var(--edge-rgb),.10),transparent 14%),linear-gradient(to left,rgba(var(--edge-rgb),.07),transparent 14%),linear-gradient(to bottom,rgba(var(--edge-rgb),.06),transparent 10%);
  animation:amb-breathe 24s ease-in-out infinite alternate}
.ribbons .r1{top:var(--s1-t,0);right:var(--s1-r,0);width:var(--s1-w,0);height:var(--s1-h,0);rotate:var(--s1-rot,0deg);opacity:var(--s1-o,0);filter:blur(var(--s-blur,72px));
  background:linear-gradient(90deg,transparent,var(--s1,transparent) 74%,transparent);animation:amb-shaft 21s ease-in-out infinite alternate}
.ribbons .r2{top:var(--s2-t,0);right:var(--s2-r,0);width:var(--s2-w,0);height:var(--s2-h,0);rotate:var(--s2-rot,0deg);opacity:var(--s2-o,0);filter:blur(var(--s-blur,72px));
  background:linear-gradient(90deg,transparent,var(--s2,transparent) 74%,transparent);animation:amb-shaft 27s ease-in-out infinite alternate-reverse}
.grain{position:absolute;inset:0;opacity:var(--grain-opacity,0);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='220' height='220' filter='url(%23n)' opacity='.55'/></svg>")}
@keyframes amb-drift-a{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(3%,2%,0) scale(1.05)}}
@keyframes amb-drift-b{from{transform:translate3d(0,0,0) scale(1.03)}to{transform:translate3d(-3%,-2%,0) scale(.98)}}
@keyframes amb-breathe{from{opacity:.8}to{opacity:1}}
@keyframes amb-shaft{from{transform:translate3d(0,0,0) scaleX(1)}to{transform:translate3d(-2%,1.5%,0) scaleX(1.04)}}
@keyframes synth-roll{from{background-position:center 0}to{background-position:center 80px}}
@media (prefers-reduced-motion:reduce){ .amb *,.amb *::before,.amb *::after{animation:none!important} }

/* ---------- swatches (always show their own theme) ---------- */
[data-sw]{--sw:#ccc}
[data-sw="auto"]{--sw:linear-gradient(135deg,#f5f7fb 0 50%,#0f1219 50% 100%)}
[data-sw="paper"]{--sw:radial-gradient(circle at 34% 30%,#ffffff 0,#f1f1ee 55%,#cfcfca 100%)}
[data-sw="ink"]{--sw:radial-gradient(circle at 34% 30%,#4a4a50 0,#1b1b1e 50%,#050506 100%)}
[data-sw="citrus"]{--sw:radial-gradient(circle at 34% 30%,#ffe08a 0,#ffb15c 45%,#e8642c 100%)}
[data-sw="lagoon"]{--sw:radial-gradient(circle at 34% 30%,#c6f6ff 0,#5ed6e8 45%,#0e7490 100%)}
[data-sw="blossom"]{--sw:radial-gradient(circle at 34% 30%,#ffe0ee 0,#f9a8d4 45%,#be185d 100%)}
[data-sw="dusk"]{--sw:linear-gradient(180deg,#3b3558 0%,#5a4466 55%,#ff9b6e 100%)}
[data-sw="slate"]{--sw:radial-gradient(circle at 34% 30%,#a8cbff 0,#5a6680 50%,#3a4252 100%)}
[data-sw="sage"]{--sw:radial-gradient(circle at 34% 30%,#eef3ea 0,#b5c4ad 50%,#3f6b47 100%)}
[data-sw="abyssal"]{--sw:radial-gradient(circle at 34% 30%,#8DE8EE 0,#54CEE1 38%,#0D4B66 100%)}
[data-sw="bioluminescent"]{--sw:radial-gradient(circle at 34% 30%,#72EFCF 0,#42DCB8 38%,#075457 100%)}
[data-sw="sea-glass"]{--sw:radial-gradient(circle at 34% 30%,#BAE7DA 0,#91D8C5 38%,#144F4E 100%)}
[data-sw="moonlit"]{--sw:radial-gradient(circle at 34% 30%,#CFE9F7 0,#5AB0E0 40%,#0F3A56 100%)}
[data-sw="synth-grid"]{--sw:linear-gradient(180deg,#FF5FB8 0%,#D23BFF 48%,#2DE2E6 52%,#120B2A 100%)}
[data-sw="synth-drive"]{--sw:linear-gradient(180deg,#0B0B24 0%,#27235A 55%,#8FA8FF 60%,#060716 100%)}
[data-sw="synth-sunset"]{--sw:linear-gradient(180deg,#FFE66D 0%,#FF9E4A 30%,#FF2E88 58%,#2DE2E6 62%,#0D0221 100%)}