/* GENERATED from public/app.jsx by scripts/gen-next-themes.js — do not edit. */ /* Every theme, both faces. The new UI sets data-theme and data-mode on . */ /* ── Midnight ───────────────────────────────────────────── */ html[data-theme="midnight"][data-mode="dark"]{ --bg:#0A0A0F; --bgAlt:#111118; --surface:#16161E; --card:#1C1C26; --border:rgba(255,255,255,0.11); --border2:rgba(255,255,255,0.17); --glass:rgba(255,255,255,0.07); --glass2:rgba(255,255,255,0.04); --accent:#0071EB; --accentDim:rgba(0,113,235,0.15); --accentDeep:rgb(0,62,129); --accentGlow:rgba(0,113,235,.36); --ring:#0071EB; --text:#FFFFFF; --sub:#B3B3B3; --muted:#6B6B7B; --gold:#F5C518; --green:#1DB954; --danger:#E5484D; --navRgb:10,10,15; --bgRgb:10,10,15; --accentRgb:0,113,235; --logo-filter:hue-rotate(360deg) saturate(1.00) drop-shadow(0 0 3px rgba(0,113,235,0.55)) drop-shadow(0 0 9px rgba(0,113,235,0.38)); --accentInk:#0071EB; --chipOnBg:#0071EB; --chipOnInk:#fff; --navOn:rgba(0,113,235,0.15); --navOnInk:#0071EB; --lift:rgba(255,255,255,.14); --liftOn:rgba(255,255,255,.08); --cardShadow:0 10px 26px rgba(0,0,0,.5); --cardShadowHov:0 16px 34px rgba(0,0,0,.6); --progTrack:rgba(255,255,255,.22); --badgeBg:rgba(10,10,15,.78); --badgeInk:#fff; --sheetBg:rgba(22,22,30,.97); --btnInk:#fff; --barInk:#fff; --skel1:rgba(255,255,255,.05); --skel2:rgba(255,255,255,.12); --dockBg:rgba(10,10,15,.88); --scrimSide:linear-gradient(90deg,rgba(10,10,15,.97) 0%,rgba(10,10,15,.86) 34%,rgba(10,10,15,.35) 62%,rgba(10,10,15,.05) 88%); --heroScrimB:linear-gradient(0deg,#0A0A0F 1%,rgba(10,10,15,.92) 14%,rgba(10,10,15,.25) 48%,rgba(10,10,15,0) 72%); --heroFadeB:linear-gradient(0deg,transparent,transparent); --heroBodyBottom:159px; --titleScrim:linear-gradient(0deg,#0A0A0F 2%,rgba(10,10,15,.88) 26%,rgba(10,10,15,.18) 66%,rgba(10,10,15,.5) 100%); --titleFade:linear-gradient(0deg,transparent,transparent); --titleBodyBottom:34px; --titleScrimD:linear-gradient(0deg,#0A0A0F 1%,rgba(10,10,15,.92) 14%,rgba(10,10,15,.25) 48%,rgba(10,10,15,0) 72%); --titleFadeD:linear-gradient(0deg,transparent,transparent); --heroScrim:linear-gradient(0deg,#0A0A0F 2%,rgba(10,10,15,.86) 22%,rgba(10,10,15,.15) 62%,rgba(10,10,15,.45)); --heroFade:linear-gradient(0deg,transparent,transparent); --scrimTop:linear-gradient(180deg,rgba(10,10,15,.58) 0%,rgba(10,10,15,0) 100%); } html[data-theme="midnight"][data-mode="light"]{ --bg:rgb(247,250,254); --bgAlt:rgb(242,247,253); --surface:rgb(252,253,254); --card:rgb(253,254,255); --border:rgba(0,103,214,0.22); --border2:rgba(0,103,214,0.30); --glass:rgba(0,103,214,0.05); --glass2:rgba(0,103,214,0.03); --accent:#0067D6; --accentDim:rgba(0,103,214,0.1); --accentDeep:rgb(0,57,118); --accentGlow:rgba(0,103,214,.24); --ring:#0067D6; --text:rgb(15,23,42); --sub:rgb(79,85,100); --muted:rgb(109,115,128); --gold:#C7920A; --green:#15A34A; --danger:#D6204A; --navRgb:246,250,254; --bgRgb:247,250,254; --accentRgb:0,103,214; --logo-filter:hue-rotate(360deg) saturate(1.00) drop-shadow(0 0 3px rgba(0,103,214,0.55)) drop-shadow(0 0 9px rgba(0,103,214,0.38)); --accentInk:rgb(0,103,214); --chipOnBg:#0067D6; --chipOnInk:#fff; --navOn:rgba(0,103,214,0.1); --navOnInk:#0067D6; --lift:rgba(15,23,42,.06); --liftOn:rgba(15,23,42,.07); --cardShadow:0 1px 3px rgba(15,23,42,0.10), 0 4px 14px rgba(15,23,42,0.06); --cardShadowHov:0 4px 10px rgba(15,23,42,0.16), 0 16px 36px rgba(15,23,42,0.14); --progTrack:rgba(15,23,42,.16); --badgeBg:rgba(252,253,254,.88); --badgeInk:rgb(15,23,42); --sheetBg:rgba(252,253,254,.98); --btnInk:rgb(15,23,42); --barInk:rgb(15,23,42); --skel1:rgba(15,23,42,.05); --skel2:rgba(15,23,42,.11); --dockBg:rgba(246,250,254,.92); --scrimSide:linear-gradient(90deg,rgba(15,23,42,.90) 0%,rgba(15,23,42,.68) 34%,rgba(15,23,42,.28) 62%,rgba(15,23,42,.04) 88%); --heroScrimB:linear-gradient(0deg,rgba(15,23,42,0) 28%,rgba(15,23,42,.60) 38%,rgba(15,23,42,.34) 55%,rgba(15,23,42,0) 74%); --heroFadeB:linear-gradient(0deg,rgb(247,250,254) 0%,rgba(247,250,254,.98) 20%,rgba(247,250,254,.75) 26%,rgba(247,250,254,0) 36%); --heroBodyBottom:200px; --titleScrim:linear-gradient(0deg,rgba(15,23,42,.60) 0%,rgba(15,23,42,.88) 14%,rgba(15,23,42,.74) 46%,rgba(15,23,42,.16) 80%,rgba(15,23,42,.14) 100%); --titleFade:linear-gradient(0deg,rgb(247,250,254) 0%,rgba(247,250,254,.45) 4%,rgba(247,250,254,0) 9%); --titleBodyBottom:44px; --titleScrimD:linear-gradient(0deg,rgba(15,23,42,0) 12%,rgba(15,23,42,.72) 21%,rgba(15,23,42,.62) 48%,rgba(15,23,42,.12) 78%,rgba(15,23,42,.10) 100%); --titleFadeD:linear-gradient(0deg,rgb(247,250,254) 0%,rgba(247,250,254,.95) 7%,rgba(247,250,254,.60) 11%,rgba(247,250,254,0) 16%); --heroScrim:linear-gradient(0deg,rgba(15,23,42,0) 4%,rgba(15,23,42,.55) 12%,rgba(15,23,42,.90) 22%,rgba(15,23,42,.82) 36%,rgba(15,23,42,.44) 58%,rgba(15,23,42,.10) 80%,rgba(15,23,42,.10) 100%); --heroFade:linear-gradient(0deg,rgb(247,250,254) 0%,rgba(247,250,254,.62) 6%,rgba(247,250,254,0) 15%); --scrimTop:linear-gradient(180deg,rgba(246,250,254,.88) 0%,rgba(246,250,254,0) 100%); } /* ── Slate ───────────────────────────────────────────── */ html[data-theme="slate"][data-mode="dark"]{ --bg:#0E1117; --bgAlt:#141820; --surface:#1A1F2C; --card:#202534; --border:rgba(255,255,255,0.12); --border2:rgba(255,255,255,0.18); --glass:rgba(255,255,255,0.07); --glass2:rgba(255,255,255,0.04); --accent:#2DD4BF; --accentDim:rgba(45,212,191,0.15); --accentDeep:rgb(25,117,105); --accentGlow:rgba(45,212,191,.36); --ring:#2DD4BF; --text:#F0F4FF; --sub:#9BA8C0; --muted:#5A6480; --gold:#FBBF24; --green:#22C55E; --danger:#F43F5E; --navRgb:14,17,23; --bgRgb:14,17,23; --accentRgb:45,212,191; --logo-filter:hue-rotate(321deg) saturate(1.00) drop-shadow(0 0 3px rgba(45,212,191,0.55)) drop-shadow(0 0 9px rgba(45,212,191,0.38)); --accentInk:#2DD4BF; --chipOnBg:#2DD4BF; --chipOnInk:#fff; --navOn:rgba(45,212,191,0.15); --navOnInk:#2DD4BF; --lift:rgba(255,255,255,.14); --liftOn:rgba(255,255,255,.08); --cardShadow:0 10px 26px rgba(0,0,0,.5); --cardShadowHov:0 16px 34px rgba(0,0,0,.6); --progTrack:rgba(255,255,255,.22); --badgeBg:rgba(14,17,23,.78); --badgeInk:#fff; --sheetBg:rgba(26,31,44,.97); --btnInk:#fff; --barInk:#fff; --skel1:rgba(255,255,255,.05); --skel2:rgba(255,255,255,.12); --dockBg:rgba(14,17,23,.88); --scrimSide:linear-gradient(90deg,rgba(14,17,23,.97) 0%,rgba(14,17,23,.86) 34%,rgba(14,17,23,.35) 62%,rgba(14,17,23,.05) 88%); --heroScrimB:linear-gradient(0deg,#0E1117 1%,rgba(14,17,23,.92) 14%,rgba(14,17,23,.25) 48%,rgba(14,17,23,0) 72%); --heroFadeB:linear-gradient(0deg,transparent,transparent); --heroBodyBottom:159px; --titleScrim:linear-gradient(0deg,#0E1117 2%,rgba(14,17,23,.88) 26%,rgba(14,17,23,.18) 66%,rgba(14,17,23,.5) 100%); --titleFade:linear-gradient(0deg,transparent,transparent); --titleBodyBottom:34px; --titleScrimD:linear-gradient(0deg,#0E1117 1%,rgba(14,17,23,.92) 14%,rgba(14,17,23,.25) 48%,rgba(14,17,23,0) 72%); --titleFadeD:linear-gradient(0deg,transparent,transparent); --heroScrim:linear-gradient(0deg,#0E1117 2%,rgba(14,17,23,.86) 22%,rgba(14,17,23,.15) 62%,rgba(14,17,23,.45)); --heroFade:linear-gradient(0deg,transparent,transparent); --scrimTop:linear-gradient(180deg,rgba(14,17,23,.58) 0%,rgba(14,17,23,0) 100%); } html[data-theme="slate"][data-mode="light"]{ --bg:rgb(248,252,251); --bgAlt:rgb(243,250,249); --surface:rgb(252,254,253); --card:rgb(253,254,254); --border:rgba(13,148,136,0.22); --border2:rgba(13,148,136,0.30); --glass:rgba(13,148,136,0.05); --glass2:rgba(13,148,136,0.03); --accent:#0D9488; --accentDim:rgba(13,148,136,0.1); --accentDeep:rgb(7,81,75); --accentGlow:rgba(13,148,136,.24); --ring:#0D9488; --text:rgb(17,24,33); --sub:rgb(81,87,93); --muted:rgb(111,116,121); --gold:#C7920A; --green:#15A34A; --danger:#D6204A; --navRgb:247,251,251; --bgRgb:248,252,251; --accentRgb:13,148,136; --logo-filter:hue-rotate(323deg) saturate(1.00) drop-shadow(0 0 3px rgba(13,148,136,0.55)) drop-shadow(0 0 9px rgba(13,148,136,0.38)); --accentInk:rgb(11,130,120); --chipOnBg:#0D9488; --chipOnInk:#fff; --navOn:rgba(13,148,136,0.1); --navOnInk:#0D9488; --lift:rgba(17,24,33,.06); --liftOn:rgba(17,24,33,.07); --cardShadow:0 1px 3px rgba(17,24,33,0.10), 0 4px 14px rgba(17,24,33,0.06); --cardShadowHov:0 4px 10px rgba(17,24,33,0.16), 0 16px 36px rgba(17,24,33,0.14); --progTrack:rgba(17,24,33,.16); --badgeBg:rgba(252,254,253,.88); --badgeInk:rgb(17,24,33); --sheetBg:rgba(252,254,253,.98); --btnInk:rgb(17,24,33); --barInk:rgb(17,24,33); --skel1:rgba(17,24,33,.05); --skel2:rgba(17,24,33,.11); --dockBg:rgba(247,251,251,.92); --scrimSide:linear-gradient(90deg,rgba(17,24,33,.90) 0%,rgba(17,24,33,.68) 34%,rgba(17,24,33,.28) 62%,rgba(17,24,33,.04) 88%); --heroScrimB:linear-gradient(0deg,rgba(17,24,33,0) 28%,rgba(17,24,33,.60) 38%,rgba(17,24,33,.34) 55%,rgba(17,24,33,0) 74%); --heroFadeB:linear-gradient(0deg,rgb(248,252,251) 0%,rgba(248,252,251,.98) 20%,rgba(248,252,251,.75) 26%,rgba(248,252,251,0) 36%); --heroBodyBottom:200px; --titleScrim:linear-gradient(0deg,rgba(17,24,33,.60) 0%,rgba(17,24,33,.88) 14%,rgba(17,24,33,.74) 46%,rgba(17,24,33,.16) 80%,rgba(17,24,33,.14) 100%); --titleFade:linear-gradient(0deg,rgb(248,252,251) 0%,rgba(248,252,251,.45) 4%,rgba(248,252,251,0) 9%); --titleBodyBottom:44px; --titleScrimD:linear-gradient(0deg,rgba(17,24,33,0) 12%,rgba(17,24,33,.72) 21%,rgba(17,24,33,.62) 48%,rgba(17,24,33,.12) 78%,rgba(17,24,33,.10) 100%); --titleFadeD:linear-gradient(0deg,rgb(248,252,251) 0%,rgba(248,252,251,.95) 7%,rgba(248,252,251,.60) 11%,rgba(248,252,251,0) 16%); --heroScrim:linear-gradient(0deg,rgba(17,24,33,0) 4%,rgba(17,24,33,.55) 12%,rgba(17,24,33,.90) 22%,rgba(17,24,33,.82) 36%,rgba(17,24,33,.44) 58%,rgba(17,24,33,.10) 80%,rgba(17,24,33,.10) 100%); --heroFade:linear-gradient(0deg,rgb(248,252,251) 0%,rgba(248,252,251,.62) 6%,rgba(248,252,251,0) 15%); --scrimTop:linear-gradient(180deg,rgba(247,251,251,.88) 0%,rgba(247,251,251,0) 100%); } /* ── Ember ───────────────────────────────────────────── */ html[data-theme="ember"][data-mode="dark"]{ --bg:#0F0A06; --bgAlt:#18120A; --surface:#1E1710; --card:#261E14; --border:rgba(255,200,100,0.13); --border2:rgba(255,200,100,0.19); --glass:rgba(255,200,100,0.06); --glass2:rgba(255,200,100,0.03); --accent:#F59E0B; --accentDim:rgba(245,158,11,0.15); --accentDeep:rgb(135,87,6); --accentGlow:rgba(245,158,11,.36); --ring:#F59E0B; --text:#FFF8F0; --sub:#C4A882; --muted:#7A6048; --gold:#F59E0B; --green:#22C55E; --danger:#EF4444; --navRgb:15,10,6; --bgRgb:15,10,6; --accentRgb:245,158,11; --logo-filter:hue-rotate(186deg) saturate(1.00) drop-shadow(0 0 3px rgba(245,158,11,0.55)) drop-shadow(0 0 9px rgba(245,158,11,0.38)); --accentInk:#F59E0B; --chipOnBg:#F59E0B; --chipOnInk:#fff; --navOn:rgba(245,158,11,0.15); --navOnInk:#F59E0B; --lift:rgba(255,255,255,.14); --liftOn:rgba(255,255,255,.08); --cardShadow:0 10px 26px rgba(0,0,0,.5); --cardShadowHov:0 16px 34px rgba(0,0,0,.6); --progTrack:rgba(255,255,255,.22); --badgeBg:rgba(15,10,6,.78); --badgeInk:#fff; --sheetBg:rgba(30,23,16,.97); --btnInk:#fff; --barInk:#fff; --skel1:rgba(255,255,255,.05); --skel2:rgba(255,255,255,.12); --dockBg:rgba(15,10,6,.88); --scrimSide:linear-gradient(90deg,rgba(15,10,6,.97) 0%,rgba(15,10,6,.86) 34%,rgba(15,10,6,.35) 62%,rgba(15,10,6,.05) 88%); --heroScrimB:linear-gradient(0deg,#0F0A06 1%,rgba(15,10,6,.92) 14%,rgba(15,10,6,.25) 48%,rgba(15,10,6,0) 72%); --heroFadeB:linear-gradient(0deg,transparent,transparent); --heroBodyBottom:159px; --titleScrim:linear-gradient(0deg,#0F0A06 2%,rgba(15,10,6,.88) 26%,rgba(15,10,6,.18) 66%,rgba(15,10,6,.5) 100%); --titleFade:linear-gradient(0deg,transparent,transparent); --titleBodyBottom:34px; --titleScrimD:linear-gradient(0deg,#0F0A06 1%,rgba(15,10,6,.92) 14%,rgba(15,10,6,.25) 48%,rgba(15,10,6,0) 72%); --titleFadeD:linear-gradient(0deg,transparent,transparent); --heroScrim:linear-gradient(0deg,#0F0A06 2%,rgba(15,10,6,.86) 22%,rgba(15,10,6,.15) 62%,rgba(15,10,6,.45)); --heroFade:linear-gradient(0deg,transparent,transparent); --scrimTop:linear-gradient(180deg,rgba(15,10,6,.58) 0%,rgba(15,10,6,0) 100%); } html[data-theme="ember"][data-mode="light"]{ --bg:rgb(253,250,248); --bgAlt:rgb(252,247,243); --surface:rgb(254,253,252); --card:rgb(255,254,253); --border:rgba(194,98,14,0.22); --border2:rgba(194,98,14,0.30); --glass:rgba(194,98,14,0.05); --glass2:rgba(194,98,14,0.03); --accent:#C2620E; --accentDim:rgba(194,98,14,0.1); --accentDeep:rgb(107,54,8); --accentGlow:rgba(194,98,14,.24); --ring:#C2620E; --text:rgb(60,45,30); --sub:rgb(97,84,71); --muted:rgb(125,114,103); --gold:#C7920A; --green:#15A34A; --danger:#D6204A; --navRgb:253,250,247; --bgRgb:253,250,248; --accentRgb:194,98,14; --logo-filter:hue-rotate(177deg) saturate(1.00) drop-shadow(0 0 3px rgba(194,98,14,0.55)) drop-shadow(0 0 9px rgba(194,98,14,0.38)); --accentInk:rgb(178,90,13); --chipOnBg:#C2620E; --chipOnInk:#fff; --navOn:rgba(194,98,14,0.1); --navOnInk:#C2620E; --lift:rgba(60,45,30,.06); --liftOn:rgba(60,45,30,.07); --cardShadow:0 1px 3px rgba(60,45,30,0.10), 0 4px 14px rgba(60,45,30,0.06); --cardShadowHov:0 4px 10px rgba(60,45,30,0.16), 0 16px 36px rgba(60,45,30,0.14); --progTrack:rgba(60,45,30,.16); --badgeBg:rgba(254,253,252,.88); --badgeInk:rgb(60,45,30); --sheetBg:rgba(254,253,252,.98); --btnInk:rgb(60,45,30); --barInk:rgb(60,45,30); --skel1:rgba(60,45,30,.05); --skel2:rgba(60,45,30,.11); --dockBg:rgba(253,250,247,.92); --scrimSide:linear-gradient(90deg,rgba(60,45,30,.90) 0%,rgba(60,45,30,.68) 34%,rgba(60,45,30,.28) 62%,rgba(60,45,30,.04) 88%); --heroScrimB:linear-gradient(0deg,rgba(60,45,30,0) 28%,rgba(60,45,30,.60) 38%,rgba(60,45,30,.34) 55%,rgba(60,45,30,0) 74%); --heroFadeB:linear-gradient(0deg,rgb(253,250,248) 0%,rgba(253,250,248,.98) 20%,rgba(253,250,248,.75) 26%,rgba(253,250,248,0) 36%); --heroBodyBottom:200px; --titleScrim:linear-gradient(0deg,rgba(60,45,30,.60) 0%,rgba(60,45,30,.88) 14%,rgba(60,45,30,.74) 46%,rgba(60,45,30,.16) 80%,rgba(60,45,30,.14) 100%); --titleFade:linear-gradient(0deg,rgb(253,250,248) 0%,rgba(253,250,248,.45) 4%,rgba(253,250,248,0) 9%); --titleBodyBottom:44px; --titleScrimD:linear-gradient(0deg,rgba(60,45,30,0) 12%,rgba(60,45,30,.72) 21%,rgba(60,45,30,.62) 48%,rgba(60,45,30,.12) 78%,rgba(60,45,30,.10) 100%); --titleFadeD:linear-gradient(0deg,rgb(253,250,248) 0%,rgba(253,250,248,.95) 7%,rgba(253,250,248,.60) 11%,rgba(253,250,248,0) 16%); --heroScrim:linear-gradient(0deg,rgba(60,45,30,0) 4%,rgba(60,45,30,.55) 12%,rgba(60,45,30,.90) 22%,rgba(60,45,30,.82) 36%,rgba(60,45,30,.44) 58%,rgba(60,45,30,.10) 80%,rgba(60,45,30,.10) 100%); --heroFade:linear-gradient(0deg,rgb(253,250,248) 0%,rgba(253,250,248,.62) 6%,rgba(253,250,248,0) 15%); --scrimTop:linear-gradient(180deg,rgba(253,250,247,.88) 0%,rgba(253,250,247,0) 100%); } /* ── Crimson ───────────────────────────────────────────── */ html[data-theme="crimson"][data-mode="dark"]{ --bg:#0C0809; --bgAlt:#140B0C; --surface:#1A1013; --card:#20141A; --border:rgba(255,100,100,0.13); --border2:rgba(255,100,100,0.19); --glass:rgba(255,100,100,0.06); --glass2:rgba(255,100,100,0.03); --accent:#E5484D; --accentDim:rgba(229,72,77,0.15); --accentDeep:rgb(126,40,42); --accentGlow:rgba(229,72,77,.36); --ring:#E5484D; --text:#FFF0F0; --sub:#C4A0A2; --muted:#7A5558; --gold:#F5C518; --green:#22C55E; --danger:#E5484D; --navRgb:12,8,9; --bgRgb:12,8,9; --accentRgb:229,72,77; --logo-filter:hue-rotate(147deg) saturate(1.12) drop-shadow(0 0 3px rgba(229,72,77,0.55)) drop-shadow(0 0 9px rgba(229,72,77,0.38)); --accentInk:#E5484D; --chipOnBg:#E5484D; --chipOnInk:#fff; --navOn:rgba(229,72,77,0.15); --navOnInk:#E5484D; --lift:rgba(255,255,255,.14); --liftOn:rgba(255,255,255,.08); --cardShadow:0 10px 26px rgba(0,0,0,.5); --cardShadowHov:0 16px 34px rgba(0,0,0,.6); --progTrack:rgba(255,255,255,.22); --badgeBg:rgba(12,8,9,.78); --badgeInk:#fff; --sheetBg:rgba(26,16,19,.97); --btnInk:#fff; --barInk:#fff; --skel1:rgba(255,255,255,.05); --skel2:rgba(255,255,255,.12); --dockBg:rgba(12,8,9,.88); --scrimSide:linear-gradient(90deg,rgba(12,8,9,.97) 0%,rgba(12,8,9,.86) 34%,rgba(12,8,9,.35) 62%,rgba(12,8,9,.05) 88%); --heroScrimB:linear-gradient(0deg,#0C0809 1%,rgba(12,8,9,.92) 14%,rgba(12,8,9,.25) 48%,rgba(12,8,9,0) 72%); --heroFadeB:linear-gradient(0deg,transparent,transparent); --heroBodyBottom:159px; --titleScrim:linear-gradient(0deg,#0C0809 2%,rgba(12,8,9,.88) 26%,rgba(12,8,9,.18) 66%,rgba(12,8,9,.5) 100%); --titleFade:linear-gradient(0deg,transparent,transparent); --titleBodyBottom:34px; --titleScrimD:linear-gradient(0deg,#0C0809 1%,rgba(12,8,9,.92) 14%,rgba(12,8,9,.25) 48%,rgba(12,8,9,0) 72%); --titleFadeD:linear-gradient(0deg,transparent,transparent); --heroScrim:linear-gradient(0deg,#0C0809 2%,rgba(12,8,9,.86) 22%,rgba(12,8,9,.15) 62%,rgba(12,8,9,.45)); --heroFade:linear-gradient(0deg,transparent,transparent); --scrimTop:linear-gradient(180deg,rgba(12,8,9,.58) 0%,rgba(12,8,9,0) 100%); } html[data-theme="crimson"][data-mode="light"]{ --bg:rgb(254,248,248); --bgAlt:rgb(253,244,244); --surface:rgb(255,252,252); --card:rgb(255,253,253); --border:rgba(220,38,38,0.22); --border2:rgba(220,38,38,0.30); --glass:rgba(220,38,38,0.05); --glass2:rgba(220,38,38,0.03); --accent:#DC2626; --accentDim:rgba(220,38,38,0.1); --accentDeep:rgb(121,21,21); --accentGlow:rgba(220,38,38,.24); --ring:#DC2626; --text:rgb(45,25,28); --sub:rgb(98,82,84); --muted:rgb(125,111,113); --gold:#C7920A; --green:#15A34A; --danger:#D6204A; --navRgb:254,247,247; --bgRgb:254,248,248; --accentRgb:220,38,38; --logo-filter:hue-rotate(149deg) saturate(1.10) drop-shadow(0 0 3px rgba(220,38,38,0.55)) drop-shadow(0 0 9px rgba(220,38,38,0.38)); --accentInk:rgb(220,38,38); --chipOnBg:#DC2626; --chipOnInk:#fff; --navOn:rgba(220,38,38,0.1); --navOnInk:#DC2626; --lift:rgba(45,25,28,.06); --liftOn:rgba(45,25,28,.07); --cardShadow:0 1px 3px rgba(45,25,28,0.10), 0 4px 14px rgba(45,25,28,0.06); --cardShadowHov:0 4px 10px rgba(45,25,28,0.16), 0 16px 36px rgba(45,25,28,0.14); --progTrack:rgba(45,25,28,.16); --badgeBg:rgba(255,252,252,.88); --badgeInk:rgb(45,25,28); --sheetBg:rgba(255,252,252,.98); --btnInk:rgb(45,25,28); --barInk:rgb(45,25,28); --skel1:rgba(45,25,28,.05); --skel2:rgba(45,25,28,.11); --dockBg:rgba(254,247,247,.92); --scrimSide:linear-gradient(90deg,rgba(45,25,28,.90) 0%,rgba(45,25,28,.68) 34%,rgba(45,25,28,.28) 62%,rgba(45,25,28,.04) 88%); --heroScrimB:linear-gradient(0deg,rgba(45,25,28,0) 28%,rgba(45,25,28,.60) 38%,rgba(45,25,28,.34) 55%,rgba(45,25,28,0) 74%); --heroFadeB:linear-gradient(0deg,rgb(254,248,248) 0%,rgba(254,248,248,.98) 20%,rgba(254,248,248,.75) 26%,rgba(254,248,248,0) 36%); --heroBodyBottom:200px; --titleScrim:linear-gradient(0deg,rgba(45,25,28,.60) 0%,rgba(45,25,28,.88) 14%,rgba(45,25,28,.74) 46%,rgba(45,25,28,.16) 80%,rgba(45,25,28,.14) 100%); --titleFade:linear-gradient(0deg,rgb(254,248,248) 0%,rgba(254,248,248,.45) 4%,rgba(254,248,248,0) 9%); --titleBodyBottom:44px; --titleScrimD:linear-gradient(0deg,rgba(45,25,28,0) 12%,rgba(45,25,28,.72) 21%,rgba(45,25,28,.62) 48%,rgba(45,25,28,.12) 78%,rgba(45,25,28,.10) 100%); --titleFadeD:linear-gradient(0deg,rgb(254,248,248) 0%,rgba(254,248,248,.95) 7%,rgba(254,248,248,.60) 11%,rgba(254,248,248,0) 16%); --heroScrim:linear-gradient(0deg,rgba(45,25,28,0) 4%,rgba(45,25,28,.55) 12%,rgba(45,25,28,.90) 22%,rgba(45,25,28,.82) 36%,rgba(45,25,28,.44) 58%,rgba(45,25,28,.10) 80%,rgba(45,25,28,.10) 100%); --heroFade:linear-gradient(0deg,rgb(254,248,248) 0%,rgba(254,248,248,.62) 6%,rgba(254,248,248,0) 15%); --scrimTop:linear-gradient(180deg,rgba(254,247,247,.88) 0%,rgba(254,247,247,0) 100%); } /* ── Forest ───────────────────────────────────────────── */ html[data-theme="forest"][data-mode="dark"]{ --bg:#060D0A; --bgAlt:#0C1610; --surface:#111E16; --card:#16261C; --border:rgba(100,255,150,0.12); --border2:rgba(100,255,150,0.17); --glass:rgba(100,255,150,0.06); --glass2:rgba(100,255,150,0.03); --accent:#4ADE80; --accentDim:rgba(74,222,128,0.15); --accentDeep:rgb(41,122,70); --accentGlow:rgba(74,222,128,.36); --ring:#4ADE80; --text:#F0FFF4; --sub:#9ABEA8; --muted:#507060; --gold:#F5C518; --green:#4ADE80; --danger:#EF4444; --navRgb:6,13,10; --bgRgb:6,13,10; --accentRgb:74,222,128; --logo-filter:hue-rotate(291deg) saturate(1.00) drop-shadow(0 0 3px rgba(74,222,128,0.55)) drop-shadow(0 0 9px rgba(74,222,128,0.38)); --accentInk:#4ADE80; --chipOnBg:#4ADE80; --chipOnInk:#fff; --navOn:rgba(74,222,128,0.15); --navOnInk:#4ADE80; --lift:rgba(255,255,255,.14); --liftOn:rgba(255,255,255,.08); --cardShadow:0 10px 26px rgba(0,0,0,.5); --cardShadowHov:0 16px 34px rgba(0,0,0,.6); --progTrack:rgba(255,255,255,.22); --badgeBg:rgba(6,13,10,.78); --badgeInk:#fff; --sheetBg:rgba(17,30,22,.97); --btnInk:#fff; --barInk:#fff; --skel1:rgba(255,255,255,.05); --skel2:rgba(255,255,255,.12); --dockBg:rgba(6,13,10,.88); --scrimSide:linear-gradient(90deg,rgba(6,13,10,.97) 0%,rgba(6,13,10,.86) 34%,rgba(6,13,10,.35) 62%,rgba(6,13,10,.05) 88%); --heroScrimB:linear-gradient(0deg,#060D0A 1%,rgba(6,13,10,.92) 14%,rgba(6,13,10,.25) 48%,rgba(6,13,10,0) 72%); --heroFadeB:linear-gradient(0deg,transparent,transparent); --heroBodyBottom:159px; --titleScrim:linear-gradient(0deg,#060D0A 2%,rgba(6,13,10,.88) 26%,rgba(6,13,10,.18) 66%,rgba(6,13,10,.5) 100%); --titleFade:linear-gradient(0deg,transparent,transparent); --titleBodyBottom:34px; --titleScrimD:linear-gradient(0deg,#060D0A 1%,rgba(6,13,10,.92) 14%,rgba(6,13,10,.25) 48%,rgba(6,13,10,0) 72%); --titleFadeD:linear-gradient(0deg,transparent,transparent); --heroScrim:linear-gradient(0deg,#060D0A 2%,rgba(6,13,10,.86) 22%,rgba(6,13,10,.15) 62%,rgba(6,13,10,.45)); --heroFade:linear-gradient(0deg,transparent,transparent); --scrimTop:linear-gradient(180deg,rgba(6,13,10,.58) 0%,rgba(6,13,10,0) 100%); } html[data-theme="forest"][data-mode="light"]{ --bg:rgb(248,251,249); --bgAlt:rgb(243,249,245); --surface:rgb(252,253,252); --card:rgb(253,254,254); --border:rgba(21,128,61,0.22); --border2:rgba(21,128,61,0.30); --glass:rgba(21,128,61,0.05); --glass2:rgba(21,128,61,0.03); --accent:#15803D; --accentDim:rgba(21,128,61,0.1); --accentDeep:rgb(12,70,34); --accentGlow:rgba(21,128,61,.24); --ring:#15803D; --text:rgb(20,40,28); --sub:rgb(74,90,80); --muted:rgb(104,118,110); --gold:#C7920A; --green:#15A34A; --danger:#D6204A; --navRgb:247,251,248; --bgRgb:248,251,249; --accentRgb:21,128,61; --logo-filter:hue-rotate(291deg) saturate(1.00) drop-shadow(0 0 3px rgba(21,128,61,0.55)) drop-shadow(0 0 9px rgba(21,128,61,0.38)); --accentInk:rgb(21,128,61); --chipOnBg:#15803D; --chipOnInk:#fff; --navOn:rgba(21,128,61,0.1); --navOnInk:#15803D; --lift:rgba(20,40,28,.06); --liftOn:rgba(20,40,28,.07); --cardShadow:0 1px 3px rgba(20,40,28,0.10), 0 4px 14px rgba(20,40,28,0.06); --cardShadowHov:0 4px 10px rgba(20,40,28,0.16), 0 16px 36px rgba(20,40,28,0.14); --progTrack:rgba(20,40,28,.16); --badgeBg:rgba(252,253,252,.88); --badgeInk:rgb(20,40,28); --sheetBg:rgba(252,253,252,.98); --btnInk:rgb(20,40,28); --barInk:rgb(20,40,28); --skel1:rgba(20,40,28,.05); --skel2:rgba(20,40,28,.11); --dockBg:rgba(247,251,248,.92); --scrimSide:linear-gradient(90deg,rgba(20,40,28,.90) 0%,rgba(20,40,28,.68) 34%,rgba(20,40,28,.28) 62%,rgba(20,40,28,.04) 88%); --heroScrimB:linear-gradient(0deg,rgba(20,40,28,0) 28%,rgba(20,40,28,.60) 38%,rgba(20,40,28,.34) 55%,rgba(20,40,28,0) 74%); --heroFadeB:linear-gradient(0deg,rgb(248,251,249) 0%,rgba(248,251,249,.98) 20%,rgba(248,251,249,.75) 26%,rgba(248,251,249,0) 36%); --heroBodyBottom:200px; --titleScrim:linear-gradient(0deg,rgba(20,40,28,.60) 0%,rgba(20,40,28,.88) 14%,rgba(20,40,28,.74) 46%,rgba(20,40,28,.16) 80%,rgba(20,40,28,.14) 100%); --titleFade:linear-gradient(0deg,rgb(248,251,249) 0%,rgba(248,251,249,.45) 4%,rgba(248,251,249,0) 9%); --titleBodyBottom:44px; --titleScrimD:linear-gradient(0deg,rgba(20,40,28,0) 12%,rgba(20,40,28,.72) 21%,rgba(20,40,28,.62) 48%,rgba(20,40,28,.12) 78%,rgba(20,40,28,.10) 100%); --titleFadeD:linear-gradient(0deg,rgb(248,251,249) 0%,rgba(248,251,249,.95) 7%,rgba(248,251,249,.60) 11%,rgba(248,251,249,0) 16%); --heroScrim:linear-gradient(0deg,rgba(20,40,28,0) 4%,rgba(20,40,28,.55) 12%,rgba(20,40,28,.90) 22%,rgba(20,40,28,.82) 36%,rgba(20,40,28,.44) 58%,rgba(20,40,28,.10) 80%,rgba(20,40,28,.10) 100%); --heroFade:linear-gradient(0deg,rgb(248,251,249) 0%,rgba(248,251,249,.62) 6%,rgba(248,251,249,0) 15%); --scrimTop:linear-gradient(180deg,rgba(247,251,248,.88) 0%,rgba(247,251,248,0) 100%); } /* ── Dusk ───────────────────────────────────────────── */ html[data-theme="dusk"][data-mode="dark"]{ --bg:#0C0A14; --bgAlt:#13101E; --surface:#1A1628; --card:#211C32; --border:rgba(200,180,255,0.12); --border2:rgba(200,180,255,0.18); --glass:rgba(200,180,255,0.07); --glass2:rgba(200,180,255,0.03); --accent:#A78BFA; --accentDim:rgba(167,139,250,0.15); --accentDeep:rgb(92,76,138); --accentGlow:rgba(167,139,250,.36); --ring:#A78BFA; --text:#F5F0FF; --sub:#B0A8CC; --muted:#6A6080; --gold:#F5C518; --green:#34D399; --danger:#F43F5E; --navRgb:12,10,20; --bgRgb:12,10,20; --accentRgb:167,139,250; --logo-filter:hue-rotate(44deg) saturate(1.33) drop-shadow(0 0 3px rgba(167,139,250,0.55)) drop-shadow(0 0 9px rgba(167,139,250,0.38)); --accentInk:#A78BFA; --chipOnBg:#A78BFA; --chipOnInk:#fff; --navOn:rgba(167,139,250,0.15); --navOnInk:#A78BFA; --lift:rgba(255,255,255,.14); --liftOn:rgba(255,255,255,.08); --cardShadow:0 10px 26px rgba(0,0,0,.5); --cardShadowHov:0 16px 34px rgba(0,0,0,.6); --progTrack:rgba(255,255,255,.22); --badgeBg:rgba(12,10,20,.78); --badgeInk:#fff; --sheetBg:rgba(26,22,40,.97); --btnInk:#fff; --barInk:#fff; --skel1:rgba(255,255,255,.05); --skel2:rgba(255,255,255,.12); --dockBg:rgba(12,10,20,.88); --scrimSide:linear-gradient(90deg,rgba(12,10,20,.97) 0%,rgba(12,10,20,.86) 34%,rgba(12,10,20,.35) 62%,rgba(12,10,20,.05) 88%); --heroScrimB:linear-gradient(0deg,#0C0A14 1%,rgba(12,10,20,.92) 14%,rgba(12,10,20,.25) 48%,rgba(12,10,20,0) 72%); --heroFadeB:linear-gradient(0deg,transparent,transparent); --heroBodyBottom:159px; --titleScrim:linear-gradient(0deg,#0C0A14 2%,rgba(12,10,20,.88) 26%,rgba(12,10,20,.18) 66%,rgba(12,10,20,.5) 100%); --titleFade:linear-gradient(0deg,transparent,transparent); --titleBodyBottom:34px; --titleScrimD:linear-gradient(0deg,#0C0A14 1%,rgba(12,10,20,.92) 14%,rgba(12,10,20,.25) 48%,rgba(12,10,20,0) 72%); --titleFadeD:linear-gradient(0deg,transparent,transparent); --heroScrim:linear-gradient(0deg,#0C0A14 2%,rgba(12,10,20,.86) 22%,rgba(12,10,20,.15) 62%,rgba(12,10,20,.45)); --heroFade:linear-gradient(0deg,transparent,transparent); --scrimTop:linear-gradient(180deg,rgba(12,10,20,.58) 0%,rgba(12,10,20,0) 100%); } html[data-theme="dusk"][data-mode="light"]{ --bg:rgb(251,249,254); --bgAlt:rgb(248,245,254); --surface:rgb(253,252,255); --card:rgb(254,254,255); --border:rgba(124,58,237,0.22); --border2:rgba(124,58,237,0.30); --glass:rgba(124,58,237,0.05); --glass2:rgba(124,58,237,0.03); --accent:#7C3AED; --accentDim:rgba(124,58,237,0.1); --accentDeep:rgb(68,32,130); --accentGlow:rgba(124,58,237,.24); --ring:#7C3AED; --text:rgb(40,32,60); --sub:rgb(89,82,105); --muted:rgb(118,112,132); --gold:#C7920A; --green:#15A34A; --danger:#D6204A; --navRgb:250,248,254; --bgRgb:251,249,254; --accentRgb:124,58,237; --logo-filter:hue-rotate(51deg) saturate(1.31) drop-shadow(0 0 3px rgba(124,58,237,0.55)) drop-shadow(0 0 9px rgba(124,58,237,0.38)); --accentInk:rgb(124,58,237); --chipOnBg:#7C3AED; --chipOnInk:#fff; --navOn:rgba(124,58,237,0.1); --navOnInk:#7C3AED; --lift:rgba(40,32,60,.06); --liftOn:rgba(40,32,60,.07); --cardShadow:0 1px 3px rgba(40,32,60,0.10), 0 4px 14px rgba(40,32,60,0.06); --cardShadowHov:0 4px 10px rgba(40,32,60,0.16), 0 16px 36px rgba(40,32,60,0.14); --progTrack:rgba(40,32,60,.16); --badgeBg:rgba(253,252,255,.88); --badgeInk:rgb(40,32,60); --sheetBg:rgba(253,252,255,.98); --btnInk:rgb(40,32,60); --barInk:rgb(40,32,60); --skel1:rgba(40,32,60,.05); --skel2:rgba(40,32,60,.11); --dockBg:rgba(250,248,254,.92); --scrimSide:linear-gradient(90deg,rgba(40,32,60,.90) 0%,rgba(40,32,60,.68) 34%,rgba(40,32,60,.28) 62%,rgba(40,32,60,.04) 88%); --heroScrimB:linear-gradient(0deg,rgba(40,32,60,0) 28%,rgba(40,32,60,.60) 38%,rgba(40,32,60,.34) 55%,rgba(40,32,60,0) 74%); --heroFadeB:linear-gradient(0deg,rgb(251,249,254) 0%,rgba(251,249,254,.98) 20%,rgba(251,249,254,.75) 26%,rgba(251,249,254,0) 36%); --heroBodyBottom:200px; --titleScrim:linear-gradient(0deg,rgba(40,32,60,.60) 0%,rgba(40,32,60,.88) 14%,rgba(40,32,60,.74) 46%,rgba(40,32,60,.16) 80%,rgba(40,32,60,.14) 100%); --titleFade:linear-gradient(0deg,rgb(251,249,254) 0%,rgba(251,249,254,.45) 4%,rgba(251,249,254,0) 9%); --titleBodyBottom:44px; --titleScrimD:linear-gradient(0deg,rgba(40,32,60,0) 12%,rgba(40,32,60,.72) 21%,rgba(40,32,60,.62) 48%,rgba(40,32,60,.12) 78%,rgba(40,32,60,.10) 100%); --titleFadeD:linear-gradient(0deg,rgb(251,249,254) 0%,rgba(251,249,254,.95) 7%,rgba(251,249,254,.60) 11%,rgba(251,249,254,0) 16%); --heroScrim:linear-gradient(0deg,rgba(40,32,60,0) 4%,rgba(40,32,60,.55) 12%,rgba(40,32,60,.90) 22%,rgba(40,32,60,.82) 36%,rgba(40,32,60,.44) 58%,rgba(40,32,60,.10) 80%,rgba(40,32,60,.10) 100%); --heroFade:linear-gradient(0deg,rgb(251,249,254) 0%,rgba(251,249,254,.62) 6%,rgba(251,249,254,0) 15%); --scrimTop:linear-gradient(180deg,rgba(250,248,254,.88) 0%,rgba(250,248,254,0) 100%); } /* ── Cinema ───────────────────────────────────────────── */ html[data-theme="cinema"][data-mode="dark"]{ --bg:#0C0F14; --bgAlt:#0F141C; --surface:#131922; --card:#19212C; --border:rgba(255,255,255,0.12); --border2:rgba(255,173,59,0.25); --glass:rgba(255,255,255,0.05); --glass2:rgba(255,255,255,0.03); --accent:#FFAD3B; --accentDim:rgba(255,173,59,0.14); --accentDeep:rgb(140,95,32); --accentGlow:rgba(255,173,59,.36); --ring:#FFAD3B; --text:#E9EDF3; --sub:#8B95A7; --muted:#5A6478; --gold:#FFAD3B; --green:#46C66E; --danger:#E5484D; --navRgb:12,15,20; --bgRgb:12,15,20; --accentRgb:255,173,59; --logo-filter:hue-rotate(184deg) saturate(1.00) drop-shadow(0 0 3px rgba(255,173,59,0.55)) drop-shadow(0 0 9px rgba(255,173,59,0.38)); --accentInk:#FFAD3B; --chipOnBg:#FFAD3B; --chipOnInk:#fff; --navOn:rgba(255,173,59,0.14); --navOnInk:#FFAD3B; --lift:rgba(255,255,255,.14); --liftOn:rgba(255,255,255,.08); --cardShadow:0 10px 26px rgba(0,0,0,.5); --cardShadowHov:0 16px 34px rgba(0,0,0,.6); --progTrack:rgba(255,255,255,.22); --badgeBg:rgba(12,15,20,.78); --badgeInk:#fff; --sheetBg:rgba(19,25,34,.97); --btnInk:#fff; --barInk:#fff; --skel1:rgba(255,255,255,.05); --skel2:rgba(255,255,255,.12); --dockBg:rgba(12,15,20,.88); --scrimSide:linear-gradient(90deg,rgba(12,15,20,.97) 0%,rgba(12,15,20,.86) 34%,rgba(12,15,20,.35) 62%,rgba(12,15,20,.05) 88%); --heroScrimB:linear-gradient(0deg,#0C0F14 1%,rgba(12,15,20,.92) 14%,rgba(12,15,20,.25) 48%,rgba(12,15,20,0) 72%); --heroFadeB:linear-gradient(0deg,transparent,transparent); --heroBodyBottom:159px; --titleScrim:linear-gradient(0deg,#0C0F14 2%,rgba(12,15,20,.88) 26%,rgba(12,15,20,.18) 66%,rgba(12,15,20,.5) 100%); --titleFade:linear-gradient(0deg,transparent,transparent); --titleBodyBottom:34px; --titleScrimD:linear-gradient(0deg,#0C0F14 1%,rgba(12,15,20,.92) 14%,rgba(12,15,20,.25) 48%,rgba(12,15,20,0) 72%); --titleFadeD:linear-gradient(0deg,transparent,transparent); --heroScrim:linear-gradient(0deg,#0C0F14 2%,rgba(12,15,20,.86) 22%,rgba(12,15,20,.15) 62%,rgba(12,15,20,.45)); --heroFade:linear-gradient(0deg,transparent,transparent); --scrimTop:linear-gradient(180deg,rgba(12,15,20,.58) 0%,rgba(12,15,20,0) 100%); } html[data-theme="cinema"][data-mode="light"]{ --bg:rgb(253,250,248); --bgAlt:rgb(251,246,242); --surface:rgb(254,253,252); --card:rgb(254,254,253); --border:rgba(180,83,9,0.22); --border2:rgba(180,83,9,0.30); --glass:rgba(180,83,9,0.05); --glass2:rgba(180,83,9,0.03); --accent:#B45309; --accentDim:rgba(180,83,9,0.1); --accentDeep:rgb(99,46,5); --accentGlow:rgba(180,83,9,.24); --ring:#B45309; --text:rgb(40,33,20); --sub:rgb(91,85,75); --muted:rgb(120,114,106); --gold:#C7920A; --green:#15A34A; --danger:#D6204A; --navRgb:252,249,246; --bgRgb:253,250,248; --accentRgb:180,83,9; --logo-filter:hue-rotate(175deg) saturate(1.00) drop-shadow(0 0 3px rgba(180,83,9,0.55)) drop-shadow(0 0 9px rgba(180,83,9,0.38)); --accentInk:rgb(180,83,9); --chipOnBg:#B45309; --chipOnInk:#fff; --navOn:rgba(180,83,9,0.1); --navOnInk:#B45309; --lift:rgba(40,33,20,.06); --liftOn:rgba(40,33,20,.07); --cardShadow:0 1px 3px rgba(40,33,20,0.10), 0 4px 14px rgba(40,33,20,0.06); --cardShadowHov:0 4px 10px rgba(40,33,20,0.16), 0 16px 36px rgba(40,33,20,0.14); --progTrack:rgba(40,33,20,.16); --badgeBg:rgba(254,253,252,.88); --badgeInk:rgb(40,33,20); --sheetBg:rgba(254,253,252,.98); --btnInk:rgb(40,33,20); --barInk:rgb(40,33,20); --skel1:rgba(40,33,20,.05); --skel2:rgba(40,33,20,.11); --dockBg:rgba(252,249,246,.92); --scrimSide:linear-gradient(90deg,rgba(40,33,20,.90) 0%,rgba(40,33,20,.68) 34%,rgba(40,33,20,.28) 62%,rgba(40,33,20,.04) 88%); --heroScrimB:linear-gradient(0deg,rgba(40,33,20,0) 28%,rgba(40,33,20,.60) 38%,rgba(40,33,20,.34) 55%,rgba(40,33,20,0) 74%); --heroFadeB:linear-gradient(0deg,rgb(253,250,248) 0%,rgba(253,250,248,.98) 20%,rgba(253,250,248,.75) 26%,rgba(253,250,248,0) 36%); --heroBodyBottom:200px; --titleScrim:linear-gradient(0deg,rgba(40,33,20,.60) 0%,rgba(40,33,20,.88) 14%,rgba(40,33,20,.74) 46%,rgba(40,33,20,.16) 80%,rgba(40,33,20,.14) 100%); --titleFade:linear-gradient(0deg,rgb(253,250,248) 0%,rgba(253,250,248,.45) 4%,rgba(253,250,248,0) 9%); --titleBodyBottom:44px; --titleScrimD:linear-gradient(0deg,rgba(40,33,20,0) 12%,rgba(40,33,20,.72) 21%,rgba(40,33,20,.62) 48%,rgba(40,33,20,.12) 78%,rgba(40,33,20,.10) 100%); --titleFadeD:linear-gradient(0deg,rgb(253,250,248) 0%,rgba(253,250,248,.95) 7%,rgba(253,250,248,.60) 11%,rgba(253,250,248,0) 16%); --heroScrim:linear-gradient(0deg,rgba(40,33,20,0) 4%,rgba(40,33,20,.55) 12%,rgba(40,33,20,.90) 22%,rgba(40,33,20,.82) 36%,rgba(40,33,20,.44) 58%,rgba(40,33,20,.10) 80%,rgba(40,33,20,.10) 100%); --heroFade:linear-gradient(0deg,rgb(253,250,248) 0%,rgba(253,250,248,.62) 6%,rgba(253,250,248,0) 15%); --scrimTop:linear-gradient(180deg,rgba(252,249,246,.88) 0%,rgba(252,249,246,0) 100%); } /* Default before the mode is known. */ :root{ --bg:#0A0A0F; --bgAlt:#111118; --surface:#16161E; --card:#1C1C26; --border:rgba(255,255,255,0.11); --border2:rgba(255,255,255,0.17); --glass:rgba(255,255,255,0.07); --glass2:rgba(255,255,255,0.04); --accent:#0071EB; --accentDim:rgba(0,113,235,0.15); --accentDeep:rgb(0,62,129); --accentGlow:rgba(0,113,235,.36); --ring:#0071EB; --text:#FFFFFF; --sub:#B3B3B3; --muted:#6B6B7B; --gold:#F5C518; --green:#1DB954; --danger:#E5484D; --navRgb:10,10,15; --bgRgb:10,10,15; --accentRgb:0,113,235; --logo-filter:hue-rotate(360deg) saturate(1.00) drop-shadow(0 0 3px rgba(0,113,235,0.55)) drop-shadow(0 0 9px rgba(0,113,235,0.38)); --accentInk:#0071EB; --chipOnBg:#0071EB; --chipOnInk:#fff; --navOn:rgba(0,113,235,0.15); --navOnInk:#0071EB; --lift:rgba(255,255,255,.14); --liftOn:rgba(255,255,255,.08); --cardShadow:0 10px 26px rgba(0,0,0,.5); --cardShadowHov:0 16px 34px rgba(0,0,0,.6); --progTrack:rgba(255,255,255,.22); --badgeBg:rgba(10,10,15,.78); --badgeInk:#fff; --sheetBg:rgba(22,22,30,.97); --btnInk:#fff; --barInk:#fff; --skel1:rgba(255,255,255,.05); --skel2:rgba(255,255,255,.12); --dockBg:rgba(10,10,15,.88); --scrimSide:linear-gradient(90deg,rgba(10,10,15,.97) 0%,rgba(10,10,15,.86) 34%,rgba(10,10,15,.35) 62%,rgba(10,10,15,.05) 88%); --heroScrimB:linear-gradient(0deg,#0A0A0F 1%,rgba(10,10,15,.92) 14%,rgba(10,10,15,.25) 48%,rgba(10,10,15,0) 72%); --heroFadeB:linear-gradient(0deg,transparent,transparent); --heroBodyBottom:159px; --titleScrim:linear-gradient(0deg,#0A0A0F 2%,rgba(10,10,15,.88) 26%,rgba(10,10,15,.18) 66%,rgba(10,10,15,.5) 100%); --titleFade:linear-gradient(0deg,transparent,transparent); --titleBodyBottom:34px; --titleScrimD:linear-gradient(0deg,#0A0A0F 1%,rgba(10,10,15,.92) 14%,rgba(10,10,15,.25) 48%,rgba(10,10,15,0) 72%); --titleFadeD:linear-gradient(0deg,transparent,transparent); --heroScrim:linear-gradient(0deg,#0A0A0F 2%,rgba(10,10,15,.86) 22%,rgba(10,10,15,.15) 62%,rgba(10,10,15,.45)); --heroFade:linear-gradient(0deg,transparent,transparent); --scrimTop:linear-gradient(180deg,rgba(10,10,15,.58) 0%,rgba(10,10,15,0) 100%); } /* OLED: the dark face, true black. */ html[data-oled][data-mode="dark"]{ --bg:#000000; --bgAlt:#050507; --surface:#0A0A0D; --card:#101015; --navRgb:0,0,0; --heroScrim:linear-gradient(0deg,#000 2%,rgba(0,0,0,.86) 22%,rgba(0,0,0,.15) 62%,rgba(0,0,0,.45)); --scrimTop:linear-gradient(180deg,rgba(0,0,0,.58) 0%,rgba(0,0,0,0) 100%); --heroFade:linear-gradient(0deg,transparent,transparent); --dockBg:rgba(0,0,0,.90); }