/* ══════════════════════════════════════════════════════════════════════
   Abdohoo.App Solutions — shared design system.

   Jade and deep teal come from the shipped products (Credit Khata
   --success #2dd4a6, --accent #146c5f) so the umbrella site and the apps
   read as one system. Brass means one thing only, everywhere: written but
   not yet settled.

   Each product sets its own --accent. That is not decoration — the three
   developer tools take the colour of the database they serve, and each
   product's preview is drawn in its own vocabulary rather than one row
   component reskinned six times.
   ═══════════════════════════════════════════════════════════════════ */
:root{
  --void:#04070A;
  --panel:#0B1215;
  --rule:rgba(174,209,200,.13);
  --rule-strong:rgba(174,209,200,.26);
  --mist:#A9BFB9;
  --mist-dim:#7A918C;
  --chalk:#EAF3F0;
  --jade:#2DD4A6;
  --teal:#146C5F;
  --brass:#E8B04B;
  --indigo:#2A2A63;

  /* per-product accents */
  --sl:#2DD4A6;        /* Salah Locator  — emerald */
  --ck:#37C9A8;        /* Credit Khata   — jade    */
  --sc:#E8B04B;        /* Shadecard      — brass   */
  --scylla:#4FC0F0;    /* ScyllaDB       — azure   */
  --mongo:#57C86E;     /* MongoDB        — leaf    */
  --redis:#F0605F;     /* Redis          — red     */
  --accent:var(--jade);

  --font-display:"Archivo","Arial Narrow",system-ui,sans-serif;
  --font-body:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Consolas,monospace;

  --gutter:clamp(20px,5vw,64px);
  --measure:1220px;
  --radius:18px;
  --ease:cubic-bezier(.22,.8,.28,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:88px}
body{
  margin:0;background:var(--void);color:var(--mist);
  font-family:var(--font-body);
  font-size:clamp(15.5px,.42vw + 14.6px,17px);
  line-height:1.62;overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;display:block}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}

h1,h2,h3{
  font-family:var(--font-display);font-variation-settings:"wdth" 112;font-weight:700;
  color:var(--chalk);letter-spacing:-.02em;line-height:1.06;margin:0;text-wrap:balance;
}

/* ── Ambient ───────────────────────────────────────────────────────── */
.aurora{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
/* No filter:blur() on purpose — a 90px blur over a 60vw box pins the
   compositor on mid-range phones. Multi-stop radial gradients give the
   same falloff for free, and only transform is animated. */
.aurora i{position:absolute;display:block;border-radius:50%}
.aurora .a1{width:86vw;height:86vw;left:-28vw;top:-34vw;
  background:radial-gradient(circle at 50% 50%,rgba(45,212,166,.30) 0%,rgba(45,212,166,.16) 30%,rgba(45,212,166,.05) 54%,rgba(45,212,166,0) 72%);
  animation:drift1 34s var(--ease) infinite alternate}
.aurora .a2{width:78vw;height:78vw;right:-26vw;top:-8vw;
  background:radial-gradient(circle at 50% 50%,rgba(20,108,95,.52) 0%,rgba(20,108,95,.26) 30%,rgba(20,108,95,.07) 55%,rgba(20,108,95,0) 74%);
  animation:drift2 44s var(--ease) infinite alternate}
.aurora .a3{width:96vw;height:74vw;left:6vw;top:38vh;
  background:radial-gradient(ellipse at 50% 50%,rgba(42,42,99,.44) 0%,rgba(42,42,99,.22) 32%,rgba(42,42,99,.06) 58%,rgba(42,42,99,0) 76%);
  animation:drift3 52s var(--ease) infinite alternate}
@keyframes drift1{to{transform:translate3d(14vw,10vh,0) scale(1.18)}}
@keyframes drift2{to{transform:translate3d(-12vw,16vh,0) scale(.86)}}
@keyframes drift3{to{transform:translate3d(10vw,-14vh,0) scale(1.14)}}
/* Developer-tools pages run cooler and dimmer — a workshop, not a shopfront */
body.tone-dev .aurora .a1{background:radial-gradient(circle at 50% 50%,rgba(79,192,240,.16) 0%,rgba(79,192,240,.08) 32%,rgba(79,192,240,0) 68%)}
body.tone-dev .aurora .a2{background:radial-gradient(circle at 50% 50%,rgba(20,108,95,.34) 0%,rgba(20,108,95,.16) 32%,rgba(20,108,95,0) 70%)}
body.tone-dev .aurora .a3{opacity:.7}

.grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.4;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")}
.vignette{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(125% 85% at 50% 0%,transparent 46%,rgba(4,7,10,.55) 100%)}

/* ── Shell ─────────────────────────────────────────────────────────── */
.page{position:relative;z-index:2}
.wrap{width:100%;max-width:var(--measure);margin-inline:auto;padding-inline:var(--gutter)}
.band{padding-block:clamp(60px,6.4vw,100px)}
.band--tight{padding-block:clamp(44px,4.6vw,72px)}
.skip{position:absolute;left:-9999px;top:0;background:var(--jade);color:#04120D;
  padding:12px 18px;border-radius:0 0 10px 0;font-weight:600;z-index:99}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}

/* ── Nav ───────────────────────────────────────────────────────────── */
.nav{position:sticky;top:0;z-index:40;border-bottom:1px solid transparent;
  transition:background .4s,border-color .4s,backdrop-filter .4s}
.nav.is-stuck{background:rgba(5,10,12,.74);backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);border-bottom-color:var(--rule)}
.nav__in{display:flex;align-items:center;gap:18px;height:70px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;flex:0 0 auto}
.brand__mark{width:32px;height:32px;flex:0 0 auto}
.brand__name{font-family:var(--font-display);font-variation-settings:"wdth" 108;
  font-weight:700;font-size:16px;color:var(--chalk);letter-spacing:-.015em}
.brand__name span{color:var(--mist-dim);font-weight:500}
.nav__links{display:flex;gap:26px;margin-left:auto;align-items:center}
.nav__links a{font-size:14.5px;text-decoration:none;color:var(--mist);transition:color .25s}
.nav__links a:hover{color:var(--chalk)}
.nav__cta{font-family:var(--font-mono);font-size:12px;font-weight:500;letter-spacing:.06em;
  text-transform:uppercase;text-decoration:none;color:var(--chalk);white-space:nowrap;
  border:1px solid var(--rule-strong);border-radius:999px;padding:9px 17px;
  transition:border-color .3s,background .3s,color .3s}
.nav__cta:hover{border-color:var(--accent);background:rgba(45,212,166,.1);color:var(--accent)}
@media (max-width:900px){
  .nav__links a:not(.nav__cta){display:none}
  .nav__cta{padding:8px 14px;font-size:11px}
}
@media (max-width:420px){.brand__name span{display:none}}

/* ── Shared bits ───────────────────────────────────────────────────── */
.eyebrow{font-family:var(--font-mono);font-size:11.5px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mist-dim);margin:0}
.sec-head{margin-bottom:clamp(34px,4vw,54px)}
.sec-head__rule{display:flex;align-items:center;gap:16px;margin-bottom:24px}
.sec-head__rule::after{content:"";flex:1;height:1px;background:var(--rule);
  transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--ease)}
.reveal.is-in .sec-head__rule::after{transform:scaleX(1)}
.sec-head h2{font-size:clamp(28px,3.7vw,45px);max-width:21ch}
.sec-head p{margin:16px 0 0;max-width:58ch;color:var(--mist)}

.btn{display:inline-flex;align-items:center;gap:9px;text-decoration:none;font-weight:600;
  font-size:15px;border-radius:12px;padding:13px 22px;border:1px solid transparent;cursor:pointer;
  transition:transform .3s var(--ease),box-shadow .3s,background .3s,border-color .3s,color .3s}
.btn:hover{transform:translateY(-2px)}
.btn--solid{background:var(--accent);color:#04140F;box-shadow:0 8px 30px -10px rgba(45,212,166,.7)}
.btn--solid:hover{box-shadow:0 16px 40px -12px rgba(45,212,166,.85)}
.btn--ghost{border-color:var(--rule-strong);color:var(--chalk);background:rgba(255,255,255,.02)}
.btn--ghost:hover{border-color:var(--accent);color:var(--accent);background:rgba(255,255,255,.05)}
.btn svg{width:16px;height:16px;flex:0 0 auto;transition:transform .3s var(--ease)}
.btn:hover svg{transform:translateX(3px)}
.btn[disabled]{opacity:.6;cursor:progress;transform:none}

.glass{background:linear-gradient(168deg,rgba(18,32,36,.9),rgba(8,15,18,.88));
  border:1px solid var(--rule);border-radius:var(--radius);
  box-shadow:0 30px 70px -40px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.05)}
.reveal{opacity:0;transform:translateY(26px);
  transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.is-in{opacity:1;transform:none}

.tag{font-family:var(--font-mono);font-size:9.5px;font-weight:500;letter-spacing:.11em;
  text-transform:uppercase;padding:4px 9px;border-radius:999px;
  border:1px solid var(--rule-strong);color:var(--mist-dim)}
.tag--live{color:var(--jade);border-color:rgba(45,212,166,.4);background:rgba(45,212,166,.08)}
.tag--soon{color:var(--brass);border-color:rgba(232,176,75,.36);background:rgba(232,176,75,.07)}
.tag--accent{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,transparent);
  background:color-mix(in srgb,var(--accent) 10%,transparent)}
.pulse{width:7px;height:7px;border-radius:50%;background:var(--accent);flex:0 0 auto;
  box-shadow:0 0 0 0 rgba(45,212,166,.6);animation:pulse 2.6s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(45,212,166,0)}100%{box-shadow:0 0 0 0 rgba(45,212,166,0)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* ── Hero ──────────────────────────────────────────────────────────── */
.hero{padding-top:clamp(40px,5.4vw,74px);padding-bottom:clamp(48px,5.6vw,80px)}
.hero__grid{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
  gap:clamp(34px,4.4vw,60px);align-items:center}
@media (max-width:1040px){.hero__grid{grid-template-columns:1fr;gap:42px}}
.hero__eyebrow{display:flex;align-items:flex-start;gap:12px;margin-bottom:24px}
/* keeps the dot on the first line when the eyebrow wraps */
.hero__eyebrow .pulse{margin-top:6px}
h1{font-size:clamp(31px,4.05vw,52px);letter-spacing:-.028em}
h1 .ln{display:block;overflow:hidden}
h1 .ln > span{display:block;transform:translateY(102%);animation:riseIn 1s var(--ease) forwards}
h1 .ln:nth-child(1) > span{animation-delay:.12s}
h1 .ln:nth-child(2) > span{animation-delay:.22s}
h1 .ln:nth-child(3) > span{animation-delay:.32s}
@keyframes riseIn{to{transform:translateY(0)}}
.hl{color:var(--accent);font-style:normal}
.hero__lede{font-size:clamp(16px,1.1vw,18px);max-width:53ch;margin:24px 0 0;color:var(--mist);
  opacity:0;animation:fadeUp .9s var(--ease) .48s forwards}
.hero__actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px;
  opacity:0;animation:fadeUp .9s var(--ease) .6s forwards}
@media (max-width:540px){
  .hero__actions .btn{flex:1 1 100%;justify-content:center}
  .hero__eyebrow{font-size:10px;letter-spacing:.1em}
}

/* ── Showcase: one product at a time, each in its own vocabulary ───── */
.showcase{padding:0;overflow:hidden;opacity:0;animation:fadeUp 1s var(--ease) .38s forwards}
.show__hd{display:flex;align-items:center;gap:12px;padding:15px 18px;
  border-bottom:1px solid var(--rule)}
.show__name{font-family:var(--font-display);font-variation-settings:"wdth" 106;font-weight:700;
  font-size:16px;color:var(--chalk);letter-spacing:-.012em;line-height:1.2}
.show__host{display:block;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--mist-dim);margin-top:3px}
.show__chip{margin-left:auto;font-family:var(--font-mono);font-size:9px;letter-spacing:.11em;
  text-transform:uppercase;padding:4px 9px;border-radius:999px;
  border:1px solid color-mix(in srgb,var(--accent) 42%,transparent);color:var(--accent);
  background:color-mix(in srgb,var(--accent) 9%,transparent);white-space:nowrap}
.show__stage{min-height:342px;position:relative}
.show__panel{display:none}
.show__panel.is-on{display:block;animation:fadeUp .5s var(--ease)}
/* Three across, two rows. The product order puts the everyday apps on the
   top row and the developer tools on the bottom, which is the grouping the
   page is arguing for anyway. */
.show__rail{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--rule);border-top:1px solid var(--rule)}
.show__tab{min-width:0;background:rgba(8,15,18,.9);border:0;cursor:pointer;
  padding:11px 6px;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--mist-dim);position:relative;
  transition:color .3s,background .3s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.show__tab:hover{color:var(--mist)}
.show__tab[aria-selected="true"]{color:var(--chalk);background:rgba(20,38,40,.95)}
.show__tab::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:var(--tab-accent,var(--jade));transform:scaleX(0);
  transition:transform .5s var(--ease)}
.show__tab[aria-selected="true"]::after{transform:scaleX(1)}
@media (max-width:560px){.show__tab{font-size:8.5px;padding:10px 4px;letter-spacing:.05em}}

/* ── Artifact 1 · timetable (Salah Locator) ────────────────────────── */
.tt__hd,.led__hd,.col__hd{display:flex;align-items:center;gap:10px;padding:13px 20px;
  border-bottom:1px solid var(--rule);font-family:var(--font-mono);font-size:10.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--mist-dim)}
.tt__hd span:last-child,.led__hd span:last-child,.col__hd span:last-child{margin-left:auto}
.tt__row{display:flex;align-items:center;gap:13px;padding:13px 20px;
  border-bottom:1px solid var(--rule);font-size:15px;color:var(--mist)}
.tt__row b{margin-left:auto;font-family:var(--font-mono);font-weight:500;font-size:15px;
  color:var(--chalk);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.tt__dot{width:5px;height:5px;border-radius:50%;background:var(--rule-strong);flex:0 0 auto}
.tt__row--now{background:linear-gradient(90deg,rgba(45,212,166,.12),transparent);color:var(--chalk)}
.tt__row--now .tt__dot{background:var(--sl);box-shadow:0 0 8px var(--sl)}
.tt__row--now b{color:var(--sl)}
.tt__flag{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--sl)}
.meter{height:2px;background:var(--rule);position:relative;overflow:hidden}
.meter i{position:absolute;inset:0;transform-origin:left;background:var(--sl);
  transform:scaleX(0);animation:fill 7s linear infinite}
@keyframes fill{to{transform:scaleX(1)}}
.art__ft{display:flex;align-items:center;gap:9px;padding:13px 20px;border-top:1px solid var(--rule);
  font-family:var(--font-mono);font-size:clamp(9px,2.2vw,10.5px);letter-spacing:.07em;
  text-transform:uppercase;color:var(--mist-dim);white-space:nowrap}
.art__ft b{color:var(--accent);font-weight:500}

/* ── Artifact 2 · ledger (Credit Khata) ────────────────────────────── */
.led__row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:baseline;
  gap:13px;padding:12px 20px;border-bottom:1px solid var(--rule);font-size:15px;color:var(--mist)}
.led__dot{width:5px;height:5px;border-radius:50%;background:var(--rule-strong);
  transform:translateY(-2px)}
.led__row b{font-family:var(--font-mono);font-weight:500;font-size:14.5px;color:var(--chalk);
  font-variant-numeric:tabular-nums;text-align:right}
.led__row .neg{color:var(--ck)}
.led__date{display:block;font-family:var(--font-mono);font-size:10px;color:var(--mist-dim);
  letter-spacing:.04em;margin-top:2px}
.led__row--bal{background:linear-gradient(90deg,rgba(55,201,168,.13),transparent);color:var(--chalk);
  border-bottom:0}
.led__row--bal .led__dot{background:var(--ck);box-shadow:0 0 8px var(--ck)}
.led__row--bal b{color:var(--ck);font-size:16px}
.chip-sync{font-family:var(--font-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;
  padding:3px 8px;border-radius:999px;border:1px solid rgba(232,176,75,.4);color:var(--brass);
  animation:flip 5s infinite;margin-left:auto}
@keyframes flip{
  0%,44%{color:var(--brass);border-color:rgba(232,176,75,.4)}
  50%,100%{color:var(--jade);border-color:rgba(45,212,166,.4)}
}

/* ── Artifact 3 · colour instrument (Shadecard) ────────────────────── */
/* Nothing here is a row. A colour tool shows colour. */
.col__body{padding:20px}
.col__read{display:grid;grid-template-columns:96px minmax(0,1fr);gap:18px;align-items:center}
@media (max-width:420px){.col__read{grid-template-columns:72px minmax(0,1fr);gap:14px}}
.col__swatch{aspect-ratio:1;border-radius:12px;border:1px solid rgba(255,255,255,.14);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.35),0 10px 26px -14px rgba(0,0,0,.9);
  background:#9E9776;position:relative;overflow:hidden}
.col__swatch::after{content:"";position:absolute;inset:0;
  background:linear-gradient(145deg,rgba(255,255,255,.16),transparent 55%)}
.col__lab{font-family:var(--font-mono);font-size:12px;color:var(--chalk);
  font-variant-numeric:tabular-nums;letter-spacing:.02em}
.col__lab span{color:var(--mist-dim)}
.col__meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.col__meta i{font-style:normal;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--mist-dim);border:1px solid var(--rule);
  border-radius:999px;padding:3px 9px}
.col__label{font-family:var(--font-mono);font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--mist-dim);margin:22px 0 10px;display:block}
.col__chips{display:flex;gap:10px}
.col__chip{flex:1 1 0;min-width:0;text-align:center}
.col__chip i{display:block;height:38px;border-radius:9px;border:1px solid rgba(255,255,255,.1)}
.col__chip b{display:block;font-family:var(--font-mono);font-size:10px;font-weight:500;
  color:var(--mist-dim);margin-top:7px;letter-spacing:.04em}
.col__chip--hit i{border-color:var(--sc);box-shadow:0 0 0 2px color-mix(in srgb,var(--sc) 45%,transparent)}
.col__chip--hit b{color:var(--sc)}
.col__mix{display:flex;height:26px;border-radius:8px;overflow:hidden;
  border:1px solid rgba(255,255,255,.1)}
.col__mix i{display:flex;align-items:center;justify-content:center;font-style:normal;
  font-family:var(--font-mono);font-size:10px;font-weight:700;color:rgba(0,0,0,.62)}
.col__mix .y{background:#E3C34A}
.col__mix .r{background:#D0584B}
.col__mix .b{background:#3E6FB0;color:rgba(255,255,255,.85)}

/* ── IDE chrome — the three developer tools ────────────────────────── */
.ide{background:#0A0F14;border-radius:0;font-family:var(--font-mono)}
.ide__bar{display:flex;align-items:center;gap:9px;padding:9px 14px;
  background:#0D141A;border-bottom:1px solid rgba(160,190,210,.11);
  font-size:10.5px;color:#8FA6B4;letter-spacing:.04em}
.ide__bar .dot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex:0 0 auto}
.ide__bar .sp{margin-left:auto;display:flex;gap:7px;align-items:center}
.ide__pill{border:1px solid rgba(160,190,210,.22);border-radius:5px;padding:2px 7px;
  font-size:9px;letter-spacing:.06em;color:#A9C0CC}
.ide__pill--accent{border-color:color-mix(in srgb,var(--accent) 50%,transparent);
  color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent)}
.ide__body{padding:0;min-height:216px}
.ide__status{display:flex;align-items:center;gap:10px;padding:8px 14px;
  border-top:1px solid rgba(160,190,210,.11);background:#0D141A;
  font-size:9.5px;color:#7D94A2;letter-spacing:.05em;white-space:nowrap;overflow:hidden}
.ide__status .sp{margin-left:auto}
.ide__status b{color:var(--accent);font-weight:500}

/* Artifact 4 · key tree (RedisDesk) */
.tree{padding:6px 0;font-size:12.5px}
.tree__row{display:flex;align-items:center;gap:9px;padding:5px 16px;color:#9FB6C2}
.tree__row b{margin-left:auto;font-weight:400;color:#6E8492;font-size:11px}
.tree__row.is-sel{background:rgba(240,96,95,.13);color:#E9F1F4;
  box-shadow:inset 2px 0 0 var(--redis)}
.tree__caret{color:#5E7484;font-size:9px;width:8px}
.tree__folder{color:#7FA3B4}
.tree__type{font-size:8.5px;letter-spacing:.09em;text-transform:uppercase;padding:1px 5px;
  border-radius:3px;background:rgba(240,96,95,.16);color:#F0908F;flex:0 0 auto}
.tree__type--str{background:rgba(120,180,220,.15);color:#8FC3E0}
.tree__type--zset{background:rgba(200,160,240,.15);color:#C2A6E8}
.tree__indent{padding-left:34px}
.tree__type--cql{background:rgba(79,192,240,.16);color:#8FD1F0}
.tree__type--mongo{background:rgba(87,200,110,.16);color:#8FD9A0}
.tree__row--cql.is-sel{background:rgba(79,192,240,.13);box-shadow:inset 2px 0 0 var(--scylla)}

/* Artifact 5 · CQL workbench (ScyllaDesk) */
.cql{font-size:12.5px}
.cql__code{padding:14px 16px;border-bottom:1px solid rgba(160,190,210,.11);line-height:1.85;
  color:#C6D6E0;white-space:pre-wrap;word-break:break-word}
.cql__k{color:#79B8FF;font-weight:500}      /* keyword  */
.cql__f{color:#E9C46A}                      /* field    */
.cql__s{color:#8FD8A8}                      /* string   */
.cql__n{color:#F0908F}                      /* number   */
.cql__lint--info{background:rgba(79,192,240,.07);color:#8FD1F0}
.cql__lint{display:flex;align-items:center;gap:9px;padding:9px 16px;
  border-bottom:1px solid rgba(160,190,210,.11);background:rgba(232,176,75,.08);
  font-size:10px;color:var(--brass);letter-spacing:.04em}
.grid{width:100%;border-collapse:collapse;font-size:11.5px}
.grid th{text-align:left;padding:7px 12px;color:#7D94A2;font-weight:500;font-size:9.5px;
  letter-spacing:.09em;text-transform:uppercase;border-bottom:1px solid rgba(160,190,210,.14);
  background:rgba(160,190,210,.04)}
.grid td{padding:7px 12px;color:#B6C9D4;border-bottom:1px solid rgba(160,190,210,.07);
  white-space:nowrap}
.grid td.num{color:#E9C46A;text-align:right;font-variant-numeric:tabular-nums}
.grid tr:last-child td{border-bottom:0}

/* Artifact 6 · document view (MongoDesk) */
.doc{padding:14px 16px;font-size:12.5px;line-height:1.85;color:#B6C9D4}
.doc__k{color:#7FD99A}                      /* key      */
.doc__s{color:#E9C46A}                      /* string   */
.doc__n{color:#79B8FF}                      /* number   */
.doc__t{color:#C2A6E8}                      /* BSON type*/
.doc__p{color:#5E7484}                      /* punctuation */
.doc__i{padding-left:20px;display:block}
.doc__shape{display:flex;gap:1px;margin:0;border-top:1px solid rgba(160,190,210,.11)}
.doc__shape i{flex:1;padding:8px 10px;font-style:normal;font-size:9px;letter-spacing:.07em;
  text-transform:uppercase;color:#7D94A2;background:rgba(160,190,210,.04);text-align:center}
.doc__shape i b{display:block;color:var(--mongo);font-weight:500;font-size:11px;margin-top:3px}

/* ── Stat rail ─────────────────────────────────────────────────────── */
.rail{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.rail__in{display:grid;grid-template-columns:repeat(4,1fr)}
@media (max-width:760px){.rail__in{grid-template-columns:repeat(2,1fr)}}
.stat{padding:26px 8px 26px 0;border-right:1px solid var(--rule)}
.stat:last-child{border-right:0}
@media (max-width:760px){
  .stat{padding:22px 8px}
  .stat:nth-child(2n){border-right:0}
  .stat:nth-child(-n+2){border-bottom:1px solid var(--rule)}
}
.stat__n{font-family:var(--font-display);font-variation-settings:"wdth" 118;font-weight:700;
  font-size:clamp(25px,3.2vw,36px);color:var(--chalk);line-height:1;font-variant-numeric:tabular-nums}
.stat__l{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mist-dim);margin-top:9px;display:block}

/* ── Product cards ─────────────────────────────────────────────────── */
.prods{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,1.8vw,22px)}
@media (max-width:1040px){.prods{grid-template-columns:repeat(2,1fr)}}
@media (max-width:700px){.prods{grid-template-columns:1fr}}

.card{position:relative;padding:clamp(22px,2.3vw,30px);display:flex;flex-direction:column;
  overflow:hidden;transition:transform .5s var(--ease),border-color .5s,box-shadow .5s}
.card::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  transition:opacity .5s;border-radius:inherit;
  background:radial-gradient(90% 60% at 50% 0%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 70%)}
.card:hover{transform:translateY(-5px);border-color:var(--rule-strong);
  box-shadow:0 44px 90px -50px rgba(0,0,0,1)}
.card:hover::after{opacity:1}
.card__addr{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:18px}
.card__host{font-family:var(--font-mono);font-size:12px;letter-spacing:.02em;color:var(--accent)}
.card__host b{color:var(--mist-dim);font-weight:400}
.card h3{font-size:clamp(23px,2.4vw,29px);margin-bottom:7px}
.card__sub{display:inline-block;margin-left:10px;vertical-align:middle;font-family:var(--font-mono);
  font-variation-settings:normal;font-weight:500;font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--mist-dim)}
.card__tag{font-size:15.5px;color:var(--chalk);opacity:.9;margin:0 0 12px}
.card__body{margin:0;font-size:14.8px}
.card__list{list-style:none;margin:20px 0 0;padding:0;border-top:1px solid var(--rule)}
.card__list li{display:flex;gap:11px;align-items:baseline;padding:9px 0;
  border-bottom:1px solid var(--rule);font-size:13.8px;color:var(--mist)}
.card__list li::before{content:"";width:5px;height:5px;border-radius:50%;
  background:color-mix(in srgb,var(--accent) 70%,#0B1215);flex:0 0 auto;transform:translateY(-2px)}
.card__acts{display:flex;flex-wrap:wrap;gap:11px;margin-top:auto;padding-top:22px;align-items:center}

.facts{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule);
  border:1px solid var(--rule);border-radius:13px;overflow:hidden;margin-top:20px}
.facts div{background:rgba(4,9,11,.55);padding:12px 14px;transition:background .4s}
.card:hover .facts div{background:rgba(6,14,16,.62)}
.facts b{display:block;font-family:var(--font-display);font-variation-settings:"wdth" 114;
  font-weight:700;font-size:17.5px;color:var(--chalk);line-height:1.1;letter-spacing:-.015em}
.facts small{display:block;font-family:var(--font-mono);font-size:9px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--mist-dim);margin-top:5px}

.gplay{display:inline-flex;align-items:center;gap:11px;text-decoration:none;
  padding:8px 18px 8px 14px;border-radius:13px;border:1px solid var(--rule-strong);
  background:linear-gradient(150deg,rgba(255,255,255,.075),rgba(255,255,255,.015));
  transition:transform .3s var(--ease),border-color .3s,background .3s,box-shadow .3s}
.gplay:hover{transform:translateY(-2px);border-color:rgba(45,212,166,.5);
  background:linear-gradient(150deg,rgba(45,212,166,.15),rgba(255,255,255,.03));
  box-shadow:0 16px 36px -20px rgba(45,212,166,.8)}
.gplay svg{width:21px;height:21px;flex:0 0 auto}
.gplay small{display:block;font-family:var(--font-mono);font-size:8.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mist-dim);line-height:1.5}
.gplay strong{display:block;font-family:var(--font-display);font-variation-settings:"wdth" 106;
  font-weight:700;font-size:15px;color:var(--chalk);line-height:1.15;letter-spacing:-.012em}
.soon{display:inline-flex;align-items:center;gap:8px;border:1px dashed rgba(232,176,75,.4);
  border-radius:12px;padding:10px 14px;font-family:var(--font-mono);font-size:10.5px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--brass)}

/* Open slot */
.slot{display:flex;flex-direction:column;justify-content:center;padding:clamp(22px,2.3vw,30px);
  border:1px dashed var(--rule-strong);border-radius:var(--radius);
  background:linear-gradient(150deg,rgba(20,34,38,.4),rgba(9,17,20,.3));
  transition:border-color .5s,background .5s}
.slot:hover{border-color:rgba(45,212,166,.45);
  background:linear-gradient(150deg,rgba(20,44,42,.5),rgba(9,17,20,.3))}
.slot h3{font-size:clamp(20px,2vw,25px);margin-bottom:8px}
.slot p{margin:0;font-size:14.4px}
.slot .card__host{color:var(--mist-dim)}
.caret{display:inline-flex;align-self:flex-start;align-items:center;gap:9px;margin-top:22px;
  text-decoration:none;color:var(--accent);font-weight:600;font-size:15px;white-space:nowrap}
.caret svg{width:16px;height:16px;transition:transform .3s var(--ease)}
.slot:hover .caret svg,.caret:hover svg{transform:translateX(4px)}

/* ── Developer-tools band ──────────────────────────────────────────── */
.devband{position:relative;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  background:linear-gradient(180deg,rgba(7,13,17,.86),rgba(5,9,12,.92))}
.devband::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(90deg,transparent 0 3px,rgba(160,190,210,.022) 3px 4px)}
.devband > *{position:relative}
.devcard{padding:0;overflow:hidden;display:flex;flex-direction:column;
  transition:transform .5s var(--ease),border-color .5s,box-shadow .5s}
.devcard:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--accent) 34%,transparent);
  box-shadow:0 44px 90px -50px rgba(0,0,0,1)}
.devcard__top{padding:clamp(20px,2.1vw,26px)}
.devcard__addr{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:14px}
.devcard h3{font-size:clamp(22px,2.2vw,27px);margin-bottom:6px}
.devcard__for{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.08em;
  color:var(--accent);margin:0 0 12px}
.devcard__body{margin:0;font-size:14.4px}
.devcard__art{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.devcard__ft{padding:clamp(18px,1.9vw,24px);display:flex;flex-wrap:wrap;gap:11px;
  align-items:center;margin-top:auto}
.devcard__ft .btn{font-size:14px;padding:11px 18px}

.plat{display:flex;gap:10px;align-items:center;font-family:var(--font-mono);font-size:9.5px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--mist-dim)}
.plat svg{width:13px;height:13px;opacity:.75}

/* ── Principles ────────────────────────────────────────────────────── */
.princ{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--rule);
  border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden}
@media (max-width:760px){.princ{grid-template-columns:1fr}}
.princ__c{background:linear-gradient(160deg,rgba(14,24,27,.9),rgba(7,13,15,.9));
  padding:clamp(22px,2.5vw,34px);transition:background .5s}
.princ__c:hover{background:linear-gradient(160deg,rgba(19,36,38,.95),rgba(8,16,18,.95))}
.princ__n{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:#63BCA6;display:block;margin-bottom:14px}
.princ__c h3{font-size:clamp(18.5px,1.8vw,22px);margin-bottom:10px}
.princ__c p{margin:0;font-size:14.6px}

/* ── Forms ─────────────────────────────────────────────────────────── */
.contact{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(32px,4vw,64px);align-items:start}
@media (max-width:920px){.contact{grid-template-columns:1fr}}
.contact__aside h2{font-size:clamp(28px,3.4vw,42px)}
.contact__aside p{max-width:46ch}
.contact__direct{margin-top:28px;padding-top:22px;border-top:1px solid var(--rule)}
.contact__direct a{font-family:var(--font-mono);font-size:15px;color:var(--accent);
  text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--accent) 35%,transparent);
  padding-bottom:2px;transition:border-color .3s}
.contact__direct a:hover{border-color:var(--accent)}

.form{padding:clamp(22px,2.6vw,34px)}
.f-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:560px){.f-grid{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.field label{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--mist-dim)}
.field input,.field select,.field textarea{
  background:rgba(4,9,11,.6);border:1px solid var(--rule);border-radius:11px;
  padding:13px 15px;font-size:15px;color:var(--chalk);width:100%;
  font-family:var(--font-body);transition:border-color .3s,background .3s}
.field textarea{resize:vertical;min-height:128px;line-height:1.6}
.field select{appearance:none;cursor:pointer;padding-right:40px;background-repeat:no-repeat;
  background-position:right 15px center;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%237A918C' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E")}
.field option{background:#0B1215;color:var(--chalk)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent);
  background:color-mix(in srgb,var(--accent) 6%,transparent);outline:none}
.field input::placeholder,.field textarea::placeholder{color:#5C716C}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__foot{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:8px}
.form__note{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em;
  color:var(--mist-dim);text-transform:uppercase}
.msg{margin-top:16px;padding:13px 16px;border-radius:11px;font-size:14.2px;display:none;
  border:1px solid var(--rule)}
.msg.is-on{display:block;animation:fadeUp .5s var(--ease)}
.msg.ok{color:var(--jade);border-color:rgba(45,212,166,.4);background:rgba(45,212,166,.08)}
.msg.err{color:var(--brass);border-color:rgba(232,176,75,.4);background:rgba(232,176,75,.08)}

/* Compact notify-me row */
.notify{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.notify input{flex:1 1 200px;min-width:0;background:rgba(4,9,11,.65);
  border:1px solid var(--rule);border-radius:11px;padding:11px 14px;font-size:14.5px;
  color:var(--chalk);transition:border-color .3s,background .3s}
.notify input:focus{border-color:var(--accent);outline:none;
  background:color-mix(in srgb,var(--accent) 6%,transparent)}
.notify input::placeholder{color:#5C716C}
.notify .btn{padding:11px 18px;font-size:14px;flex:0 0 auto}
.notify__note{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--mist-dim);margin:10px 0 0;flex-basis:100%}

/* ── Footer ────────────────────────────────────────────────────────── */
.foot{border-top:1px solid var(--rule);padding-block:clamp(44px,4.8vw,62px) 32px}
.foot__grid{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:34px}
@media (max-width:860px){.foot__grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.foot__grid{grid-template-columns:1fr}}
.foot__blurb{margin:15px 0 0;font-size:14.2px;max-width:36ch}
.foot h4{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mist-dim);margin:0 0 15px;font-weight:500}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.foot a{text-decoration:none;font-size:14.2px;color:var(--mist);transition:color .25s}
.foot a:hover{color:var(--jade)}
.foot__base{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;
  margin-top:clamp(34px,3.6vw,52px);padding-top:22px;border-top:1px solid var(--rule);
  font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--mist-dim)}

/* ══ Developer-tool product pages ═════════════════════════════════════ */
.crumb{display:flex;align-items:center;gap:9px;font-family:var(--font-mono);font-size:10.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--mist-dim);margin-bottom:22px}
.crumb a{text-decoration:none;transition:color .25s}
.crumb a:hover{color:var(--accent)}
.crumb svg{width:11px;height:11px;opacity:.6}

.specs{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule);
  border:1px solid var(--rule);border-radius:14px;overflow:hidden;margin-top:30px}
@media (max-width:820px){.specs{grid-template-columns:repeat(2,1fr)}}
.specs div{background:rgba(6,12,15,.75);padding:16px 18px}
.specs b{display:block;font-family:var(--font-display);font-variation-settings:"wdth" 114;
  font-weight:700;font-size:17px;color:var(--chalk);letter-spacing:-.012em;line-height:1.15}
.specs small{display:block;font-family:var(--font-mono);font-size:9px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--mist-dim);margin-top:6px}

.feats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);
  border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden}
@media (max-width:980px){.feats{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.feats{grid-template-columns:1fr}}
.feat{background:linear-gradient(160deg,rgba(12,20,25,.92),rgba(6,11,14,.92));
  padding:clamp(20px,2.2vw,28px);transition:background .5s}
.feat:hover{background:linear-gradient(160deg,rgba(16,29,35,.96),rgba(7,13,17,.96))}
.feat__n{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);display:block;margin-bottom:12px}
.feat h3{font-size:18.5px;margin-bottom:9px}
.feat ul{list-style:none;margin:0;padding:0}
.feat li{position:relative;padding-left:16px;font-size:13.9px;margin-top:8px;color:var(--mist)}
.feat li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;
  border-radius:50%;background:color-mix(in srgb,var(--accent) 65%,#0B1215)}

.trial{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:clamp(26px,3vw,48px);
  align-items:center}
@media (max-width:880px){.trial{grid-template-columns:1fr}}
.gate{border:1px solid var(--rule);border-radius:14px;overflow:hidden}
.gate__row{display:grid;grid-template-columns:minmax(0,1fr) 72px 72px;align-items:center;
  gap:10px;padding:11px 16px;border-bottom:1px solid var(--rule);font-size:14px}
.gate__row:last-child{border-bottom:0}
.gate__row--hd{background:rgba(160,190,210,.05);font-family:var(--font-mono);font-size:9.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--mist-dim)}
.gate__row span:not(:first-child){text-align:center;font-family:var(--font-mono);font-size:11px;
  letter-spacing:.06em;text-transform:uppercase}
.yes{color:var(--jade)}
.no{color:var(--brass)}

.callout{border-left:2px solid var(--accent);padding:2px 0 2px 18px;margin:26px 0 0;
  color:var(--mist);font-size:15px;max-width:62ch}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  h1 .ln > span{transform:none}
  .hero__lede,.hero__actions,.showcase{opacity:1}
  .reveal{opacity:1;transform:none}
  .sec-head__rule::after{transform:scaleX(1)}
  .meter i{transform:scaleX(.55)}
}

/* Full-width variant of the open slot, used between the two collections */
.slot--wide{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:26px;align-items:center}
.slot--wide .caret{margin-top:0;align-self:center}
@media (max-width:760px){
  .slot--wide{grid-template-columns:1fr;gap:18px}
  .slot--wide .caret{margin-top:4px;align-self:flex-start}
}

/* A result message inside the compact notify row needs its own line */
.notify .msg{flex-basis:100%;margin-top:12px}

/* ══════════════════════════════════════════════════════════════════════
   Light theme.

   Dark stays the base above; light is an override stamped on <html> by a
   tiny script in the head, before first paint. Not an inversion: the
   accents are re-picked for contrast on paper (every one clears 4.5:1 on
   the page background), the IDE chrome becomes a real light editor theme
   rather than a dark one bleached, and Shadecard's swatches, chips and
   mix bar are left exactly alone — there, colour is the data.
   ═══════════════════════════════════════════════════════════════════ */
:root{color-scheme:dark;--on-accent:#04140F}

:root[data-theme="light"]{
  color-scheme:light;
  --void:#F1F5F4;
  --panel:#FFFFFF;
  --rule:rgba(13,38,33,.13);
  --rule-strong:rgba(13,38,33,.26);
  --mist:#3F5751;
  --mist-dim:#657C76;
  --chalk:#0A1F1B;
  --jade:#0A7A5E;
  --teal:#0B5F52;
  --brass:#8A5F0E;
  --indigo:#3A3A7A;
  --on-accent:#FFFFFF;

  --sl:#0A7A5E;
  --ck:#0C7A63;
  --sc:#8A5F0E;
  --scylla:#0A6E9E;
  --mongo:#1C7F38;
  --redis:#BE2F2E;
  --accent:var(--jade);
}

/* ── Ambient: washes on paper, not glows in the dark ───────────────── */
[data-theme="light"] .aurora .a1{
  background:radial-gradient(circle at 50% 50%,rgba(45,212,166,.24) 0%,rgba(45,212,166,.11) 32%,rgba(45,212,166,0) 68%)}
[data-theme="light"] .aurora .a2{
  background:radial-gradient(circle at 50% 50%,rgba(20,140,120,.20) 0%,rgba(20,140,120,.09) 32%,rgba(20,140,120,0) 70%)}
[data-theme="light"] .aurora .a3{
  background:radial-gradient(ellipse at 50% 50%,rgba(120,124,210,.18) 0%,rgba(120,124,210,.08) 34%,rgba(120,124,210,0) 72%)}
[data-theme="light"].tone-dev .aurora .a1{
  background:radial-gradient(circle at 50% 50%,rgba(79,160,220,.20) 0%,rgba(79,160,220,.09) 34%,rgba(79,160,220,0) 70%)}
[data-theme="light"].tone-dev .aurora .a2{
  background:radial-gradient(circle at 50% 50%,rgba(20,140,120,.14) 0%,rgba(20,140,120,.06) 34%,rgba(20,140,120,0) 72%)}
[data-theme="light"] .vignette{
  background:radial-gradient(125% 85% at 50% 0%,transparent 48%,rgba(120,146,140,.20) 100%)}
[data-theme="light"] .grain{mix-blend-mode:multiply;opacity:.14}

/* ── Surfaces ──────────────────────────────────────────────────────── */
[data-theme="light"] .glass{
  background:#FFFFFF;border-color:rgba(13,38,33,.11);
  box-shadow:0 24px 50px -34px rgba(10,40,34,.32),0 2px 6px -2px rgba(10,40,34,.06)}
[data-theme="light"] .nav.is-stuck{background:rgba(241,245,244,.84);border-bottom-color:var(--rule)}
[data-theme="light"] .nav__cta:hover{background:color-mix(in srgb,var(--accent) 10%,transparent)}
[data-theme="light"] .skip{color:#FFFFFF}
[data-theme="light"] .pulse{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 55%,transparent)}

[data-theme="light"] .btn--solid{color:var(--on-accent);
  box-shadow:0 10px 24px -12px color-mix(in srgb,var(--accent) 65%,transparent)}
[data-theme="light"] .btn--solid:hover{box-shadow:0 16px 32px -14px color-mix(in srgb,var(--accent) 75%,transparent)}
[data-theme="light"] .btn--ghost{background:#FFFFFF}
[data-theme="light"] .btn--ghost:hover{background:color-mix(in srgb,var(--accent) 8%,#FFFFFF)}

[data-theme="light"] .card{background:#FFFFFF}
[data-theme="light"] .card::after{
  background:radial-gradient(90% 60% at 50% 0%,color-mix(in srgb,var(--accent) 9%,transparent),transparent 70%)}
[data-theme="light"] .card:hover,[data-theme="light"] .devcard:hover{
  box-shadow:0 40px 70px -46px rgba(10,40,34,.45)}
[data-theme="light"] .facts div,[data-theme="light"] .specs div{background:#F6FAF9}
[data-theme="light"] .card:hover .facts div{background:#F1F7F5}
[data-theme="light"] .princ,[data-theme="light"] .feats,[data-theme="light"] .facts,
[data-theme="light"] .specs,[data-theme="light"] .gate{background:var(--rule)}
[data-theme="light"] .princ__c,[data-theme="light"] .feat{background:#FFFFFF}
[data-theme="light"] .princ__c:hover,[data-theme="light"] .feat:hover{background:#F7FBFA}
[data-theme="light"] .princ__n{color:#0B6E56}
[data-theme="light"] .gplay{background:#FFFFFF}
[data-theme="light"] .gplay:hover{background:color-mix(in srgb,var(--jade) 8%,#FFFFFF);
  box-shadow:0 14px 28px -18px rgba(10,40,34,.5)}
[data-theme="light"] .slot{background:linear-gradient(150deg,rgba(255,255,255,.82),rgba(246,250,249,.6))}
[data-theme="light"] .slot:hover{background:linear-gradient(150deg,#FFFFFF,rgba(240,250,247,.7))}
[data-theme="light"] .gate__row--hd{background:rgba(13,38,33,.04)}

[data-theme="light"] .devband{background:linear-gradient(180deg,#E8EEED,#F1F5F4)}
[data-theme="light"] .devband::before{
  background:repeating-linear-gradient(90deg,transparent 0 3px,rgba(13,38,33,.03) 3px 4px)}

/* ── Product artifacts ─────────────────────────────────────────────── */
[data-theme="light"] .tt__row--now{
  background:linear-gradient(90deg,color-mix(in srgb,var(--sl) 13%,transparent),transparent)}
[data-theme="light"] .led__row--bal{
  background:linear-gradient(90deg,color-mix(in srgb,var(--ck) 13%,transparent),transparent)}
[data-theme="light"] .row--now{
  background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 12%,transparent),transparent)}
[data-theme="light"] .chip-sync{animation:flipLight 5s infinite}
@keyframes flipLight{
  0%,44%{color:#8A5F0E;border-color:rgba(138,95,14,.45)}
  50%,100%{color:#0A7A5E;border-color:rgba(10,122,94,.45)}
}
/* Shadecard: the swatch, the chips and the mix bar are measurements.
   Only the furniture around them changes. */
[data-theme="light"] .col__swatch{
  border-color:rgba(13,38,33,.18);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.3),0 8px 20px -12px rgba(10,40,34,.45)}
[data-theme="light"] .col__chip i,[data-theme="light"] .col__mix{border-color:rgba(13,38,33,.18)}
[data-theme="light"] .col__mix i{color:rgba(0,0,0,.66)}
[data-theme="light"] .col__mix .b{color:rgba(255,255,255,.92)}

/* ── IDE chrome: a real light editor theme ─────────────────────────── */
[data-theme="light"] .ide{background:#FFFFFF}
[data-theme="light"] .ide__bar,[data-theme="light"] .ide__status{
  background:#F4F8F7;border-color:rgba(13,38,33,.12);color:#5A716B}
[data-theme="light"] .ide__pill{border-color:rgba(13,38,33,.2);color:#4A615C}
[data-theme="light"] .ide__pill--accent{
  border-color:color-mix(in srgb,var(--accent) 45%,transparent);color:var(--accent);
  background:color-mix(in srgb,var(--accent) 9%,transparent)}

[data-theme="light"] .cql__code{color:#243733;border-bottom-color:rgba(13,38,33,.12)}
[data-theme="light"] .cql__k{color:#0B5FA8}
[data-theme="light"] .cql__f{color:#8A5F0E}
[data-theme="light"] .cql__s{color:#0F7A3D}
[data-theme="light"] .cql__n{color:#BE2F2E}
[data-theme="light"] .cql__lint{
  background:rgba(138,95,14,.10);color:#7A5410;border-bottom-color:rgba(13,38,33,.12)}

[data-theme="light"] .grid th{color:#5A716B;background:rgba(13,38,33,.035);
  border-bottom-color:rgba(13,38,33,.16)}
[data-theme="light"] .grid td{color:#334742;border-bottom-color:rgba(13,38,33,.08)}
[data-theme="light"] .grid td.num{color:#8A5F0E}

[data-theme="light"] .doc{color:#334742}
[data-theme="light"] .doc__k{color:#0F7A3D}
[data-theme="light"] .doc__s{color:#8A5F0E}
[data-theme="light"] .doc__n{color:#0B5FA8}
[data-theme="light"] .doc__t{color:#6B3FA0}
[data-theme="light"] .doc__p{color:#87999B}
[data-theme="light"] .doc__shape{border-top-color:rgba(13,38,33,.12)}
[data-theme="light"] .doc__shape i{color:#5A716B;background:rgba(13,38,33,.035)}

[data-theme="light"] .tree__row{color:#3F5751}
[data-theme="light"] .tree__row b{color:#7A908A}
[data-theme="light"] .tree__caret{color:#8FA39D}
[data-theme="light"] .tree__folder{color:#2A5F72}
[data-theme="light"] .tree__type{background:rgba(190,47,46,.11);color:#A82B2A}
[data-theme="light"] .tree__type--str{background:rgba(11,95,168,.10);color:#0B5FA8}
[data-theme="light"] .tree__type--zset{background:rgba(107,63,160,.10);color:#6B3FA0}
[data-theme="light"] .tree__row.is-sel{
  background:rgba(190,47,46,.09);color:#1A2E2A;box-shadow:inset 2px 0 0 var(--redis)}

[data-theme="light"] .show__tab{background:#F6FAF9}
[data-theme="light"] .show__tab[aria-selected="true"]{background:#FFFFFF;color:var(--chalk)}

/* ── Forms ─────────────────────────────────────────────────────────── */
[data-theme="light"] .field input,[data-theme="light"] .field select,
[data-theme="light"] .field textarea,[data-theme="light"] .notify input{background:#FFFFFF}
[data-theme="light"] .field input:focus,[data-theme="light"] .field select:focus,
[data-theme="light"] .field textarea:focus,[data-theme="light"] .notify input:focus{
  background:color-mix(in srgb,var(--accent) 5%,#FFFFFF)}
[data-theme="light"] .field input::placeholder,[data-theme="light"] .field textarea::placeholder,
[data-theme="light"] .notify input::placeholder{color:#8FA39D}
[data-theme="light"] .field option{background:#FFFFFF;color:var(--chalk)}
[data-theme="light"] .field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%23657C76' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E")}
[data-theme="light"] .msg.ok{color:#0A6E56;border-color:rgba(10,122,94,.42);background:rgba(10,122,94,.08)}
[data-theme="light"] .msg.err{color:#7A5410;border-color:rgba(138,95,14,.42);background:rgba(138,95,14,.08)}

/* ── The toggle itself ─────────────────────────────────────────────── */
.themetoggle{
  flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;padding:0;border-radius:999px;cursor:pointer;
  border:1px solid var(--rule-strong);background:transparent;color:var(--mist);
  transition:color .3s,border-color .3s,background .3s,transform .3s var(--ease)}
.themetoggle:hover{color:var(--accent);border-color:var(--accent);
  background:color-mix(in srgb,var(--accent) 10%,transparent);transform:translateY(-1px)}
.themetoggle svg{width:16px;height:16px}
.themetoggle .t-sun{display:none}
.themetoggle .t-moon{display:block}
[data-theme="light"] .themetoggle .t-sun{display:block}
[data-theme="light"] .themetoggle .t-moon{display:none}

[data-theme="light"] .tree__type--cql{background:rgba(10,110,158,.10);color:#0A6E9E}
[data-theme="light"] .tree__type--mongo{background:rgba(28,127,56,.10);color:#1C7F38}
[data-theme="light"] .tree__row--cql.is-sel{background:rgba(10,110,158,.09);color:#1A2E2A}
[data-theme="light"] .cql__lint--info{background:rgba(10,110,158,.08);color:#0A6E9E}

/* Per-product accent, as a class rather than an inline hex, so the light
   theme's re-picked accents actually take effect. */
.a-ck{--accent:var(--ck)}
.a-mongo{--accent:var(--mongo)}
.a-redis{--accent:var(--redis)}
.a-sc{--accent:var(--sc)}
.a-scylla{--accent:var(--scylla)}
.a-sl{--accent:var(--sl)}