*{box-sizing:border-box;margin:0;padding:0}

/* ── Theme: Dark Grey (default) ────
   Secondary text bumped toward AA on the dark-grey backdrop (was
   .65 white = readable but borderline; .85 lands cleanly). Nav-link
   .6 → .82 fixes the jumpnav rail being a faint wash. Border .08 →
   .18 so cards have clear edges. Same shape as the crimson pass. */
:root,[data-theme="grey"]{
  --bg:#1a1c20;--bg-card:rgba(255,255,255,.04);--border:rgba(255,255,255,.18);
  --text:#fff;--text-dim:rgba(255,255,255,.85);--text-ghost:rgba(255,255,255,.68);
  --accent:#ef4444;--accent-glow:rgba(239,68,68,.42);--accent-glow2:rgba(239,68,68,.22);
  --hero-grad:linear-gradient(177deg,#202228 0%,#191b1f 100%);
  --nav-link:rgba(255,255,255,.82);--cta-bg:#fff;--cta-text:#111;
  --stroke-ghost:1.5px rgba(255,255,255,.32);--ghost-fill:rgba(255,255,255,.08);
  --sketch-stroke:rgba(255,255,255,.6);
}
/* Grey-theme overrides for the same elements that needed crimson
   overrides. The hero-cta-secondary buttons (Voice AI / Debate humans
   live / Prep) were nearly invisible because the default styling
   relies on themes that don't apply to grey. Force readable contrast. */
[data-theme="grey"] .landing-jumpnav{
  background:none !important;border:none !important;box-shadow:none !important;
}
[data-theme="grey"] .hero-cta-secondary{
  background:rgba(255,255,255,.08) !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.32) !important;
}
[data-theme="grey"] .hero-cta-secondary:hover{
  background:rgba(255,255,255,.14) !important;
  border-color:rgba(255,255,255,.5) !important;
}
[data-theme="grey"] .hero-promo{
  background:linear-gradient(135deg,rgba(239,68,68,.16),rgba(239,68,68,.06)) !important;
  border-color:rgba(239,68,68,.45) !important;
  color:#fff !important;
}
[data-theme="grey"] .hero-orb-hint{color:#fff;font-weight:800;text-shadow:0 1px 2px rgba(0,0,0,.5)}

/* ── Theme: Crimson (sharp black/red)
   Secondary text was failing AA on the radial-gradient backdrop
   (.68 white + slight red tint reads ~3.5:1). Bumped --text-dim and
   --nav-link toward .85/.78 so body copy and the left-rail jumpnav
   are clearly legible. --text-ghost goes from .42 → .72 — was
   essentially invisible before. --border bumped so card/section
   separators actually exist. */
[data-theme="crimson"]{
  --bg:#15171c;--bg-card:rgba(255,40,40,.04);--border:rgba(239,68,68,.22);
  --text:#fff;--text-dim:rgba(255,255,255,.85);--text-ghost:rgba(255,255,255,.72);
  --accent:#ef4444;--accent-glow:rgba(239,68,68,.52);--accent-glow2:rgba(239,68,68,.28);
  --hero-grad:linear-gradient(177deg,#1d1418 0%,#15171c 100%);
  --nav-link:rgba(255,255,255,.78);--cta-bg:#ef4444;--cta-text:#fff;
  --stroke-ghost:1.5px rgba(239,68,68,.45);--ghost-fill:rgba(239,68,68,.08);
  --sketch-stroke:rgba(239,68,68,.6);
}
/* Crimson-theme overrides for elements that were under-contrast on
   the dark gradient backdrop. The base --text-dim bump above gets us
   most of the way; these handle the specific spots where a hard-coded
   color or low-opacity stack was leaving text barely visible. */
[data-theme="crimson"] .landing-jumpnav{
  background:none !important;border:none !important;box-shadow:none !important;
}
[data-theme="crimson"] .hero-cta-secondary{
  background:rgba(255,255,255,.06) !important;
  color:#fff !important;
  border:1px solid rgba(239,68,68,.45) !important;
}
[data-theme="crimson"] .hero-cta-secondary:hover{
  background:rgba(239,68,68,.14) !important;
  border-color:rgba(239,68,68,.7) !important;
}
[data-theme="crimson"] .hero-orb-hint{color:#fff;font-weight:800;text-shadow:0 1px 2px rgba(0,0,0,.45)}
[data-theme="crimson"] .hero-promo{
  background:linear-gradient(135deg,rgba(239,68,68,.22),rgba(239,68,68,.08)) !important;
  border-color:rgba(239,68,68,.55) !important;
  color:#fff !important;
  box-shadow:0 4px 18px rgba(239,68,68,.22) !important;
}

/* ── Theme: Light (off-white + warm red accents) ─────
   Real light mode, not just inverted dark. Backgrounds use a warm
   off-white (#fafaf7) that doesn't glare like pure white. Text is
   near-black for AAA contrast. The accent stays red but slightly
   deeper (#dc2626) so it reads as a confident link/CTA on light
   instead of looking radioactive. Card surfaces use a faint warm
   tint so the depth hierarchy still works. */
[data-theme="light"]{
  --bg:#fafaf7;--bg-card:rgba(0,0,0,.03);--border:rgba(0,0,0,.08);
  --text:#1a1a1f;--text-dim:rgba(0,0,0,.68);--text-ghost:rgba(0,0,0,.64);
  --accent:#dc2626;--accent-glow:rgba(220,38,38,.18);--accent-glow2:rgba(220,38,38,.10);
  /* 2026-06-14: flat cream, not a gradient. .hero-bg paints --hero-grad
     over the hero box and mask-fades into the body (which paints the same
     var over the whole page). ANY gradient makes those two misalign by
     element height, so the fade edge (~78%, just below the hero card)
     shows as a horizontal "cut." A flat color is identical at every y, so
     the fade is invisible and the seam is gone. */
  --hero-grad:#fafaf7;
  --nav-link:rgba(0,0,0,.55);--cta-bg:#1a1a1f;--cta-text:#fff;
  --stroke-ghost:1.5px rgba(0,0,0,.18);--ghost-fill:rgba(0,0,0,.04);
  --sketch-stroke:rgba(0,0,0,.5);
}
/* Light-mode-specific overrides for places where dark-only colors
   were hard-coded outside the token system. Catches the most common
   offenders (rgba(255,255,255) backgrounds, hard #fff text on cards,
   the neural-net canvas constellation lines that need contrast). */
/* Re-bind body's CSS custom properties when html has [data-theme] set,
   regardless of whether body has the matching class yet. ui.css ships a
   `body{...--text:#fff;...}` fallback for older pages without [data-theme],
   and that rule wins over html's [data-theme="light"] {--text:#1a1a1f}
   on body specifically because the selector targets the body element
   directly. Without these overrides, body-class-less paint flashes
   (e.g., topbar.js sets html data-theme before landing.html's bottom
   script applies the body class) leave you with a cream backdrop and
   white text. Specificity (0,0,1,1) beats body{} (0,0,0,1). */
[data-theme="light"] body{
  color:#1a1a1f;
  --text:#1a1a1f;--text-dim:rgba(0,0,0,.68);--text-ghost:rgba(0,0,0,.64);
  --bg:#fafaf7;--bg-card:rgba(0,0,0,.03);--border:rgba(0,0,0,.08);
  --accent-glow2:rgba(220,38,38,.10);
}
[data-theme="crimson"] body{
  --text:#fff;--text-dim:rgba(255,255,255,.85);--text-ghost:rgba(255,255,255,.72);
  --bg:#15171c;--border:rgba(239,68,68,.22);
  --accent-glow2:rgba(239,68,68,.20);
}
[data-theme="grey"] body{
  --text:#fff;--text-dim:rgba(255,255,255,.85);--text-ghost:rgba(255,255,255,.68);
  --bg:#1a1c20;--border:rgba(255,255,255,.18);
  --accent-glow2:rgba(239,68,68,.22);
}

/* ── Theme: Stone (warm graphite, third option after crimson + light) ──
   Sits between the cold #111 "grey" theme and the pure-black "crimson"
   theme. Warm dark graphite (#1f1d1b) with off-white warm text. The vibe
   is "editorial study at night" — sophisticated, less cyberpunk than
   crimson, less office-monitor than the legacy grey. Same brand red
   accent at slightly reduced glow so the warmth doesn't compete. */
[data-theme="stone"]{
  --bg:#1f1d1b;--bg-card:rgba(255,247,235,.045);--border:rgba(255,247,235,.16);
  --text:#f0eae0;--text-dim:rgba(240,234,224,.82);--text-ghost:rgba(240,234,224,.6);
  --accent:#ef4444;--accent-glow:rgba(239,68,68,.40);--accent-glow2:rgba(239,68,68,.20);
  --hero-grad:linear-gradient(177deg,#252220 0%,#1f1c1a 100%);
  --nav-link:rgba(240,234,224,.80);--cta-bg:#f0eae0;--cta-text:#1f1d1b;
  --stroke-ghost:1.5px rgba(240,234,224,.30);--ghost-fill:rgba(240,234,224,.08);
  --sketch-stroke:rgba(240,234,224,.58);
}
[data-theme="stone"] body{
  --text:#f0eae0;--text-dim:rgba(240,234,224,.82);--text-ghost:rgba(240,234,224,.6);
  --bg:#1f1d1b;--border:rgba(255,247,235,.16);
  --accent-glow2:rgba(239,68,68,.20);
}
[data-theme="stone"] .landing-jumpnav{
  background:none !important;border:none !important;box-shadow:none !important;
}
[data-theme="stone"] .hero-cta-secondary{
  background:rgba(240,234,224,.06) !important;
  color:#f0eae0 !important;
  border:1px solid rgba(240,234,224,.30) !important;
}
[data-theme="stone"] .hero-cta-secondary:hover{
  background:rgba(240,234,224,.12) !important;
  border-color:rgba(240,234,224,.48) !important;
}
[data-theme="stone"] .hero-orb-hint{color:#f0eae0;font-weight:800;text-shadow:0 1px 2px rgba(0,0,0,.45)}
[data-theme="stone"] .hero-promo{
  background:linear-gradient(135deg,rgba(239,68,68,.18),rgba(239,68,68,.06)) !important;
  border-color:rgba(239,68,68,.40) !important;
  color:#f0eae0 !important;
}
[data-theme="stone"] .ui-topbar{background:rgba(31,29,27,.85);border-bottom:1px solid rgba(255,247,235,.10)}
[data-theme="stone"] .ui-card{background:rgba(255,247,235,.04);border-color:rgba(255,247,235,.14)}
[data-theme="stone"] .faq-item{border-color:rgba(255,247,235,.14);background:rgba(255,247,235,.03)}
[data-theme="stone"] .faq-q{color:#f0eae0}
[data-theme="stone"] .faq-a{color:rgba(240,234,224,.74)}
[data-theme="stone"] .faq-a strong{color:#f0eae0}
[data-theme="light"] .ui-card{background:#fff;border-color:rgba(0,0,0,.08);box-shadow:0 1px 3px rgba(0,0,0,.04)}
[data-theme="light"] .ui-topbar{background:rgba(250,250,247,.85);border-bottom:1px solid rgba(0,0,0,.06)}
[data-theme="light"] .faq-item{border-color:rgba(0,0,0,.08);background:#fff}
[data-theme="light"] .faq-q{color:#1a1a1f}
[data-theme="light"] .faq-a{color:rgba(0,0,0,.65)}
[data-theme="light"] .faq-a strong{color:#1a1a1f}
/* The constellation is permanent on the light landing surface. Full
   opacity per the founder (2026-08-19, "background animations should be a bit
   stronger"): with the hero headline gone the web is the page's texture,
   and at .8 it read as noise rather than structure. */
[data-theme="light"][data-lightweb="web"] .ui-neural-canvas{opacity:1}
[data-theme="light"] .theme-dot{border-color:rgba(0,0,0,.18)}
[data-theme="light"] .theme-dot.active{border-color:#1a1a1f}
[data-theme="light"] .hero-promo{background:linear-gradient(135deg,rgba(220,38,38,.10),rgba(220,38,38,.04)) !important;color:#1a1a1f !important;border-color:rgba(220,38,38,.32) !important}
/* Card surfaces explicitly white on light so the 3% tint doesn't
   leave them looking like ghosts. Hover state uses a faint warm
   tint instead of the dark-mode red glow which reads as a smudge. */
[data-theme="light"] .topic-card,
[data-theme="light"] .tool,
[data-theme="light"] .ui-section .ui-card{
  background:#fff !important;border-color:rgba(0,0,0,.08) !important;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}
[data-theme="light"] .topic-card:hover,
[data-theme="light"] .tool:hover{
  background:#fff !important;border-color:rgba(220,38,38,.45) !important;
  box-shadow:0 6px 18px rgba(220,38,38,.10);
}
[data-theme="light"] .topic-card h3{color:#1a1a1f}
[data-theme="light"] .topic-card .topic-period{color:rgba(0,0,0,.64)}
[data-theme="light"] .tool h3{color:#1a1a1f}
[data-theme="light"] .tool p{color:rgba(0,0,0,.64)}
/* Topic-card inner text classes weren't covered before — body text
   inherited from .topic-card's color:inherit cascade, but in light
   mode the cascade resolved to white (because the inline <style>
   block scoped to the section ran AFTER the [data-theme="light"]
   block and re-bound color tokens). Force explicit dark-on-white
   colors so the resolution + arg lines are legible regardless of
   token cascade order. */
[data-theme="light"] .topic-card{color:#1a1a1f}
[data-theme="light"] .topic-card-res{color:#1a1a1f !important}
[data-theme="light"] .topic-card-args{color:rgba(0,0,0,.72) !important}
[data-theme="light"] .topic-card-args > div{color:rgba(0,0,0,.72)}
[data-theme="light"] .topic-card-month{color:rgba(0,0,0,.64) !important}
[data-theme="light"] .topic-card-cta{color:#dc2626 !important}
[data-theme="light"] .topic-card-fmt{background:rgba(0,0,0,.02)}[data-theme="light"] .hero-cta-secondary{background:transparent !important;color:#1a1a1f !important;border:1px solid rgba(0,0,0,.18) !important}
/* Body paragraphs in narrative sections use --text-dim which is
   correct, but a few inline-styled paragraphs hard-code colors
   that don't flip — catch them with a low-specificity override. */
[data-theme="light"] section p{color:rgba(0,0,0,.65)}
[data-theme="light"] section p strong{color:#1a1a1f}
[data-theme="light"] section h2{color:#1a1a1f}
/* #current-topics has a hard-coded inline `background:#070709` for
   the dark-strip look. In light mode, flip it to the page background
   so it blends with surrounding sections — the white topic cards
   pop on their own via border + shadow. Text colors inherit the
   standard light-mode section rules above. */
[data-theme="light"] #current-topics{background:var(--bg) !important}
/* Mini-chat widget — was hard-coded dark via inline `background:
   rgba(15,15,18,.92)` etc. on every child. Override with !important
   so the chrome flips to white-on-light without rewriting the inline
   styles inside the React-ish demo. Inputs and side-pick buttons get
   subtle dark borders + dark text so they read on a white panel. */
[data-theme="light"] #miniChat{
  background:#fff !important;
  border:1px solid rgba(0,0,0,.08) !important;
  box-shadow:0 12px 36px rgba(0,0,0,.08) !important;
}
[data-theme="light"] #miniChat > div:first-child{background:rgba(0,0,0,.02) !important;border-bottom:1px solid rgba(0,0,0,.06) !important}
[data-theme="light"] #miniChat input,
[data-theme="light"] #miniChat textarea,
[data-theme="light"] #miniChat .mini-chat-side{
  background:rgba(0,0,0,.03) !important;
  border:1px solid rgba(0,0,0,.10) !important;
  color:#1a1a1f !important;
}
[data-theme="light"] #miniChat input::placeholder,
[data-theme="light"] #miniChat textarea::placeholder{color:rgba(0,0,0,.64) !important}
[data-theme="light"] #miniChat .mini-chat-side.active{
  background:rgba(220,38,38,.10) !important;
  border-color:rgba(220,38,38,.45) !important;
  color:#dc2626 !important;
}
[data-theme="light"] #miniChat .mini-chat-msg.you .mini-chat-avatar{background:rgba(220,38,38,.10);border-color:rgba(220,38,38,.32);color:#dc2626}
[data-theme="light"] #miniChat .mini-chat-msg.ai .mini-chat-avatar{background:rgba(0,0,0,.04);border-color:rgba(0,0,0,.10);color:rgba(0,0,0,.64)}
[data-theme="light"] #miniChat .mini-chat-body-txt{color:#1a1a1f}
[data-theme="light"] #miniChat .mini-chat-label{color:rgba(0,0,0,.64)}
[data-theme="light"] #miniChatInputWrap{background:rgba(0,0,0,.02) !important;border-top-color:rgba(0,0,0,.06) !important}
/* Landing jump-nav (floating dark rail on the left) flips to a light
   card with proper border/shadow in light mode so it doesn't look
   like a foreign black box on the cream background. The previous
   pass targeted `.side-nav`, which doesn't exist — actual element
   is `.landing-jumpnav`. */
/* Calm TOC: no card on light theme — just quiet ink on the cream page.
   Link colors are left to the base rule's var(--text-dim)/var(--text) so
   they always track the active theme; here we only kill the old white
   card so it can't out-specificity the airy base. */
[data-theme="light"] .landing-jumpnav{
  background:none !important;border:none !important;box-shadow:none !important;
}

/* 2026-05-19: FB-style community-card treatment for #story and
   #build-with-me removed. #build-with-me was retired earlier;
   #story is now nested inline inside #founder-video as editorial
   prose under the centered video, so the standalone feed-card
   chrome (white panel, FB-blue shadow, 760px max) no longer
   applies. Keeping this comment so the historical "FB tones"
   request isn't ambiguous if it comes back. */

/* HTML gets the base bg color too so overscroll / any area not covered
   by the body's gradient (e.g. when the cached body height is shorter
   than the rendered content) falls back to the theme bg instead of the
   browser's default canvas color (which is dark in headless Chrome and
   on some dark-OS configurations). */
/* 2026-05-18: bumped root font-size 16px -> 20px (125%) so the page
   reads at the larger scale by default. Every rem-based size (hero
   headline, body copy, sec-titles, etc.) inherits the bump; layout
   elements keep their proportional relationship. Was previously
   requiring users to manually zoom to 125% to get a nice frame. */
html{background:var(--bg);font-size:125%}
/* 2026-05-20: ease the 125% editorial bump on phones. At 125% the root
   is 20px, so every rem-based block (body copy, pills, cards, the bell
   dropdown) renders ~43% larger than the rest of the site's 14px mobile
   root — it reads cramped and "closeup," text crowding the screen edges.
   110% (≈17.6px) keeps the large-type character while giving the phone
   layout room to breathe. Desktop keeps the full 125%. The vw-based hero
   headlines are unaffected; this only relaxes the rem cascade. */
@media(max-width:640px){html{font-size:110%}}
/* Body uses hero-grad so the gradient bleeds behind the topbar and there
   isn't a visible seam where the hero starts. The shared ui-neural-canvas
   (fixed, 100vw×100vh) draws the constellation across the entire viewport,
   so the hero no longer needs its own duplicate #neuralNet canvas. */
body{font-family:var(--font-display);background:var(--hero-grad);color:var(--text);font-size:16px;line-height:1.55;overflow-x:hidden;transition:background .4s,color .4s}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}

/* ── Nav ──────────────────────────── */
.beta-strip{position:fixed;top:0;left:0;right:0;z-index:101;background:#b91c1cee;padding:7px 16px;text-align:center;font-size:.74rem;color:#fff;font-weight:600;letter-spacing:.02em;border-bottom:1px solid #00000030;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.beta-strip a{color:#fff;text-decoration:underline;font-weight:800}
.beta-strip a:hover{color:#fff8dc}
@media(max-width:640px){.beta-strip{font-size:.68rem;padding:6px 10px}}
.nav{
  position:fixed;top:34px;left:0;right:0;z-index:100;
  padding:20px 40px;
  display:flex;align-items:center;justify-content:space-between;
}
.nav-left{display:flex;align-items:center;gap:10px;flex-shrink:0;min-width:0}
/* Vertical side-nav: secondary links live on the far-left rail so the logo stays clean. */
.side-nav{
  position:fixed;left:24px;top:50%;transform:translateY(-50%);
  z-index:50;
  display:flex;flex-direction:column;align-items:flex-start;gap:18px;
  padding:22px 16px;
  background:color-mix(in srgb,var(--bg) 92%,transparent);
  border:1px solid var(--border);
  border-radius:18px;
  max-height:calc(100vh - 120px);overflow-y:auto;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.side-nav a{
  font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-dim);text-decoration:none;transition:color .2s;
}
.side-nav a:hover{color:var(--text)}
.side-nav-version{
  align-self:stretch;text-align:center;
  padding:4px 10px;border:1px solid var(--border-strong);border-radius:999px;
  font-size:.6rem!important;color:var(--text-dim)!important;
}
[data-theme="light"] .side-nav{background:rgba(255,255,255,.92)}
@media(max-width:1100px){.side-nav{display:none}}
.nav-logo{font-size:1.6rem;font-weight:900;color:var(--text);letter-spacing:-.02em;white-space:nowrap;line-height:1;display:inline-block;flex-shrink:0}
.nav-logo span{color:var(--accent)}
/* Tiny version pill next to the logo (Linear/Vercel pattern). Clicks
   through to /changelog. Replaces the old nav "Changelog" link. */
.nav-version{display:inline-block;margin-left:10px;padding:3px 10px;border:1px solid var(--border);border-radius:999px;font-size:.62rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-dim);background:var(--bg-card);transition:color .2s,border-color .2s;vertical-align:middle}
.nav-version:hover{color:var(--text);border-color:var(--text)}
.nav-right{display:flex;align-items:center;gap:10px;flex-wrap:nowrap}
.nav-links{display:flex;align-items:center;gap:18px;flex-shrink:0}
.nav-contact{white-space:nowrap}
.nav-for-debaters{font-size:.68rem;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.08em;white-space:nowrap;opacity:.85}
@media (max-width:1280px){ .nav-links{display:none} }
@media (max-width:900px){ .nav-for-debaters{display:none} }
.nav-links a{font-size:.78rem;font-weight:600;color:var(--nav-link);text-transform:uppercase;letter-spacing:.08em;transition:color .2s}
.nav-links a:hover{color:var(--text)}
.nav-contact{
  padding:8px 20px;background:transparent;color:var(--text);
  border:1px solid var(--border);
  border-radius:100px;font-size:.75rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.06em;
  transition:border-color .2s,background .2s;
}
.nav-contact:hover{border-color:var(--text);background:var(--bg-card)}

/* ── Theme Switcher ──────────────── */
/* Three theme picker dots. Wrapped in a subtle tray so they read as
   a grouped widget, not free-floating blobs (the unwrapped white
   light-mode dot used to look like a stray pill next to whichever
   topbar link was on its left). Tray + smaller dots + ring-on-dark
   keep all three visually balanced regardless of active theme. */
.theme-dots{
  display:inline-flex;gap:5px;align-items:center;
  padding:4px 6px;border-radius:999px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  position:relative;
}
.theme-dot{
  width:13px;height:13px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.2);
  cursor:pointer;transition:border-color .2s,transform .2s;
  padding:0;box-shadow:0 0 0 1px rgba(0,0,0,.2);
}
.theme-dot:hover{transform:scale(1.18);border-color:rgba(255,255,255,.45)}
.theme-dot.active{border-color:var(--text);box-shadow:0 0 0 2px var(--accent-glow,rgba(239,68,68,.4))}
.theme-dot[data-t="grey"]{background:#666}
.theme-dot[data-t="crimson"]{background:#ef4444}
/* Light dot: keep the off-white fill but add a stronger edge ring so
   it has contrast against any backdrop. The inner dark border + the
   tray's outer border form a clear two-tone outline. */
.theme-dot[data-t="light"]{background:#f5f5ee;border-color:rgba(0,0,0,.45)}
[data-theme="crimson"] .theme-dots{background:rgba(239,68,68,.08);border-color:rgba(239,68,68,.25)}
[data-theme="grey"]    .theme-dots{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.1)}
[data-theme="light"]   .theme-dots{background:rgba(0,0,0,.04);border-color:rgba(0,0,0,.1)}