/* CREATEXP light mode, "Blue Wind" (chosen 2026-11-13): paper #F2F1EC, ink #141414, Blue Wind #1468FD.
   Everything below the toggle only acts under html[data-theme="light"].
   Blue Wind is the one accent: #1468FD for buttons (white text), headline words and graphics,
   #0D52D1 for small accent text. Problems and waiting states are ink, so blue always means
   "AI did this". No glows: depth comes from hairlines and neutral shadows.
   (Token names --or* are kept from the earlier orange version so nothing else had to change.) */

/* ---------- theme toggle (both themes) ---------- */
.thm { position: relative; display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%; border: 1px solid var(--line-2); color: var(--soft); transition: border-color .25s var(--e), color .25s var(--e), background-color .25s var(--e); }
.thm:hover { color: var(--text); border-color: rgba(var(--va), .6); background: rgba(var(--vt), calc(.06 * var(--vtk))); }
.thm svg { grid-area: 1 / 1; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: opacity .3s var(--e), transform .5s var(--e); }
.thm__moon { opacity: 0; transform: rotate(-60deg) scale(.6); }
[data-theme="light"] .thm__sun { opacity: 0; transform: rotate(60deg) scale(.6); }
[data-theme="light"] .thm__moon { opacity: 1; transform: none; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .45s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
@media (max-width: 760px) {
  .thm { width: 36px; height: 36px; }
  .thm svg { width: 16px; height: 16px; }
}
@media (max-width: 360px) {
  .nav__right { gap: 10px; }
}

/* ---------- light tokens ---------- */
html[data-theme="light"] {
  color-scheme: light;
  --bg: #F2F1EC;
  --s1: #FFFFFF;
  --s2: #FAF9F6;
  --s3: #EEEDE7;
  --s4: #E6E4DD;
  --text: #141414;
  --soft: #3A3936;
  --mute: #57554F;
  --dim: #66645D;
  --or: #1468FD;           /* brand blue: surfaces */
  --or-big: #1468FD;       /* headline words, large numbers, graphics */
  --volt: var(--or-big);
  --volt-ink: #0D52D1;     /* small accent text */
  --btn-hov: #0D55DB;      /* primary button on hover */
  --or-btn: #1468FD;       /* blue surfaces that carry white text */
  --volt-hl: var(--or-btn);
  --on-volt: #FFFFFF;
  --alert: #141414;
  --alert-2: #3A3936;
  --line: rgba(20, 20, 20, .1);
  --line-2: rgba(20, 20, 20, .15);
  --n1: #F7F6F2; --n2: #F4F3EE; --n3: #F5F4F0; --faint: #6E6C65;
  --ink: 20, 20, 20;
  --vt: 20, 104, 253; --vtk: .8;
  --va: 20, 104, 253;
  --vg: 20, 104, 253; --vgk: 0;
  --al: 20, 20, 20;
  --bgr: 242, 241, 236; --s1r: 255, 255, 255; --pnr: 250, 249, 246;
  --muter: 87, 85, 79; --softr: 58, 57, 54; --dimr: 102, 100, 93;
  --shd: 20, 20, 20; --shk: .3;
  --led: 20, 20, 20; --leda: .085;
  --block: #FFFFFF;
  --hx-acc: #1468FD; --hx-pk: #1468FD; --hx-spark: #1468FD;
  --hx-plate: #FFFFFF; --hx-aplate: #EEF4FF; --hx-card: #FFFFFF;
  --hx-dotT: rgba(20, 20, 20, .16); --hx-glow: 0; --hx-cglow: 0;
}
[data-theme="light"] .logo span { color: var(--or-big); }
[data-theme="light"] :focus-visible { outline-color: var(--volt-ink); }

/* ---------- headline words and big numbers: orange on paper ---------- */
[data-theme="light"] :is(.h1, .h2, .uh h1, .uh2, .lend) em { color: var(--or-big); }
[data-theme="light"] :is(.pnum, .cnum b, .rt__score b, .aq__stage b, .ures b, .si-big b, .aic__val:not(.aic__val--alert) b, .is-ai .fm--done b, .cnt-done) { color: var(--or-big); }

/* ---------- buttons: orange with white text ---------- */
[data-theme="light"] .btn--volt { background: var(--or-btn); color: var(--on-volt); }
[data-theme="light"] .btn--volt .arr { color: inherit; }
[data-theme="light"] .btn--volt:hover { background: var(--btn-hov); box-shadow: 0 10px 24px -14px rgba(20, 20, 20, .45); }
[data-theme="light"] .btn--ghost { background: #FFFFFF; border-color: rgba(20, 20, 20, .18); }
[data-theme="light"] .btn--ghost:hover { border-color: rgba(20, 20, 20, .45); }
[data-theme="light"] .btn--ghost .arr { color: var(--or-big); }

/* ---------- surfaces: white cards on paper, hairlines and neutral shadows ---------- */
[data-theme="light"] :is(.pcard, .ucard, .udrift, .uarch, .ufeat li, .ures li, .lcta, .aq__o, .rt__box, .fm, .aicard, .lc, .fswitch, .mlayer, .fq, .faq__help) {
  box-shadow: 0 1px 2px rgba(20, 20, 20, .05), 0 14px 32px -20px rgba(20, 20, 20, .22);
}
[data-theme="light"] .pcard::before { display: none; }
[data-theme="light"] .pcard.lit { border-color: var(--or-big); box-shadow: 0 1px 2px rgba(20, 20, 20, .05), 0 22px 44px -24px rgba(20, 20, 20, .3); }
[data-theme="light"] .pcard.lit .tag { color: var(--volt-ink); border-color: rgba(var(--va), .5); }
[data-theme="light"] .lcta { border-color: rgba(20, 20, 20, .12); }
[data-theme="light"] .fm--wait { border-color: rgba(20, 20, 20, .35); }
[data-theme="light"] .is-ai .fm--wait { border-color: rgba(20, 20, 20, .1); }
[data-theme="light"] .is-ai .fm--done { border-color: var(--or-big); }
[data-theme="light"] .aicard { border-color: var(--or-big); box-shadow: 0 1px 2px rgba(20, 20, 20, .06), 0 26px 60px -28px rgba(20, 20, 20, .4); }
[data-theme="light"] .aic__head { background: var(--hx-aplate); }
[data-theme="light"] .is-ai .fswitch { border-color: var(--or-big); }
[data-theme="light"] .is-ai .fswitch__track i { background: #FFFFFF; }
[data-theme="light"] .panel { background: #FAF9F6; }
[data-theme="light"] .panel::after { display: none; }
[data-theme="light"] .panel .fi { background: #FFFFFF; box-shadow: 0 1px 2px rgba(20, 20, 20, .06), 0 24px 50px -26px rgba(20, 20, 20, .35); }
[data-theme="light"] .pcard__pic { background: var(--bg); }
[data-theme="light"] .pcard__pic .si { background: #FFFFFF; box-shadow: 0 1px 2px rgba(20, 20, 20, .05), 0 14px 30px -20px rgba(20, 20, 20, .3); }
[data-theme="light"] .ucard__vis { background: #FAF9F6; }
[data-theme="light"] .ucard:hover { border-color: rgba(var(--va), .55); }
[data-theme="light"] :is(.uig__mem, .umem) { background: #FFFFFF; border-color: var(--or-big); }
[data-theme="light"] .utree { background: var(--s2); box-shadow: inset 0 0 0 1px rgba(20, 20, 20, .07); }
[data-theme="light"] :is(.uchip, .unode, .uev, .uig__doc) { background: #FFFFFF; }
[data-theme="light"] .ures li { border-color: rgba(20, 20, 20, .1); }
[data-theme="light"] .mlayer { background: #FFFFFF; border-color: var(--or-big); }
[data-theme="light"] .fi-ai { background: var(--hx-aplate); border-color: var(--or-big); }
[data-theme="light"] .fi-ai::after { display: none; }
[data-theme="light"] .rt::backdrop { background: rgba(20, 20, 20, .4); }
[data-theme="light"] :is(.nav.is-scrolled, .nav.is-open) { background: rgba(242, 241, 236, .86); }

/* ---------- the founder: ink while it waits on you, orange once the [AI Layer] runs ---------- */
[data-theme="light"] .fnode__ring--a { background: radial-gradient(circle, rgba(20, 20, 20, .07), rgba(20, 20, 20, .02)); border-color: rgba(20, 20, 20, .55); box-shadow: 0 0 0 14px rgba(20, 20, 20, .04); animation: none; }
[data-theme="light"] .fnode__wave { border-color: rgba(20, 20, 20, .35); }
[data-theme="light"] .fnode__ring--b { background: var(--hx-aplate); border-color: var(--or-big); box-shadow: 0 0 0 14px rgba(var(--vt), .08); }
[data-theme="light"] .is-ai .fnode__ring--b, [data-theme="light"] .fmob.is-ai .fnode__ring--b { animation: none; }
[data-theme="light"] .lc { border-color: rgba(20, 20, 20, .16); }
[data-theme="light"] .is-ai .lc[data-b="done"] { border-color: rgba(var(--va), .5); }
[data-theme="light"] .mt { border-color: rgba(20, 20, 20, .2); }
[data-theme="light"] .fmob.is-ai .mt { border-color: rgba(var(--va), .55); }
[data-theme="light"] .bdg--done { background: var(--hx-aplate); }
[data-theme="light"] .bdg--wait { border-color: rgba(20, 20, 20, .35); }
[data-theme="light"] .bdg--needs { background: rgba(20, 20, 20, .07); }

/* ---------- layers and process ---------- */
[data-theme="light"] .lline { background: rgba(20, 20, 20, .14); }
[data-theme="light"] .lrow.lit .ls__top { fill: var(--hx-aplate); stroke: var(--or-big); }
[data-theme="light"] .lrow.on .ls__top { fill: #FFE6E0; }
[data-theme="light"] .lrow.lit .ls__front { stroke: rgba(var(--va), .6); }
[data-theme="light"] .lrow.lit .ls__side { stroke: rgba(var(--va), .45); }
[data-theme="light"] .lrow.on .lslab { filter: none; }
[data-theme="light"] .lrow.lit text { fill: var(--volt-ink); }
[data-theme="light"] .lrow.lit .lbadge { background: var(--hx-aplate); border-color: var(--or-big); }
[data-theme="light"] .pdot { border-color: rgba(var(--va), .7); }
[data-theme="light"] .pcard.lit .pdot::after { background: rgba(var(--va), .6); }

/* ---------- small infographic graphics ---------- */
[data-theme="light"] .fi-ticks i { background: rgba(var(--va), .45); }
[data-theme="light"] .si-cols .now i { background: var(--or-big); }
[data-theme="light"] .si-bars i { background: rgba(var(--va), calc(.3 + var(--h) / 100)); }
[data-theme="light"] .mx-line { background: rgba(var(--va), .6); }
[data-theme="light"] .fm-arrows i { color: var(--dim); }
[data-theme="light"] .fm-arrows i.on { color: var(--volt-ink); }
[data-theme="light"] .fa-row.scan { background: var(--hx-aplate); }
[data-theme="light"] .chips span { background: var(--hx-aplate); }
[data-theme="light"] .fstage.seen:not(.is-ai) .fnote { opacity: .95; }
[data-theme="light"] .si-keep { background: rgba(20, 20, 20, .06); color: var(--soft); }
[data-theme="light"] .ubel { background: var(--s2); border-style: dashed; border-color: rgba(20, 20, 20, .3); }
[data-theme="light"] .uev--alert { border-color: rgba(20, 20, 20, .6); border-style: dashed; }
[data-theme="light"] .ugate { background: var(--s2); border-color: rgba(20, 20, 20, .5); }
[data-theme="light"] .uck circle { fill: var(--or-btn); }
[data-theme="light"] .uck path { stroke: #FFFFFF; stroke-width: 2; }

/* ---------- hero art: white plates on paper, orange work, no glow ---------- */
[data-theme="light"] .hx-beams { filter: none; }
[data-theme="light"] .hx-beam { stroke-opacity: .55; }
[data-theme="light"] .hx-spark { filter: none; stroke: #FFFFFF; stroke-width: 1.5; }
[data-theme="light"] .hx-card__bg, [data-theme="light"] .hx-aplate, [data-theme="light"] .hx-tplate { filter: drop-shadow(0 10px 18px rgba(20, 20, 20, .1)); }