/* ============================================================================
   explainer.css — homepage scrollytelling: "what is custom acquisition &
   retention software", illustrated with rebuilt, animated product UIs.
   Loads alongside the inline design tokens (var(--primary) etc.).
   acquisition = indigo (--primary) ; retention = emerald (--win)
   ============================================================================ */
.acq{color:var(--primary)} .ret{color:var(--win-deep)}
.acq-t{color:var(--primary)} .ret-t{color:var(--win-deep)}

/* ---------- hero ---------- */
.ex-hero{position:relative;isolation:isolate;padding:96px 0 64px;text-align:center;overflow:hidden;
  background:radial-gradient(60% 60% at 30% 0%,rgba(79,70,229,.10),transparent 60%),
             radial-gradient(60% 60% at 78% 8%,rgba(16,185,129,.09),transparent 60%),
             linear-gradient(#fff,var(--paper))}
.ex-hero-in{max-width:920px}
.ex-hero h1{font-size:clamp(34px,6vw,72px);font-weight:700;letter-spacing:-.03em;line-height:1.04;margin-top:14px}
.ex-lede{font-size:clamp(17px,1.7vw,22px);line-height:1.55;color:var(--ink-mid);max-width:760px;margin:24px auto 30px}
.ex-lede b{font-weight:700}
.ex-hero .btn .ar{font-size:18px}
@media(prefers-reduced-motion:no-preference){.ex-hero .btn .ar{animation:exbob 1.8s ease-in-out infinite}}
@keyframes exbob{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}

/* ---------- definition + pillars ---------- */
.ex-def .sec-head{text-align:center;margin-left:auto}
.ex-def .sec-head h2 em{font-style:normal;color:var(--primary)}
.ex-pillars{display:grid;grid-template-columns:1fr auto 1fr;gap:24px;align-items:stretch;margin-top:36px}
.ex-pillar{position:relative;background:var(--card);border:1px solid var(--border);border-radius:18px;padding:30px;box-shadow:var(--shadow-sm)}
.ex-pillar.acq{border-top:3px solid var(--primary)} .ex-pillar.ret{border-top:3px solid var(--win)}
.ex-pillar h3{font-size:24px;margin:6px 0 10px}
.ex-pillar.acq h3{color:var(--primary)} .ex-pillar.ret h3{color:var(--win-deep)}
.ex-pillar p{color:var(--ink-mid);font-size:15.5px;line-height:1.6}
.ex-pnum{font:700 12px/1 'JetBrains Mono',monospace;letter-spacing:.12em;color:var(--ink-faint)}
.ex-flow{display:flex;flex-direction:column;justify-content:center;gap:10px;padding:0 6px}
.ex-flow .ex-dot{width:9px;height:9px;border-radius:50%;background:var(--primary)}
.ex-flow .ex-dot.b{background:#8b8bf0} .ex-flow .ex-dot.c{background:var(--win)}
@media(prefers-reduced-motion:no-preference){
  .ex-flow .ex-dot{animation:exflow 1.5s ease-in-out infinite}
  .ex-flow .ex-dot.b{animation-delay:.2s} .ex-flow .ex-dot.c{animation-delay:.4s}
}
@keyframes exflow{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(-5px);opacity:1}}
@media(max-width:820px){.ex-pillars{grid-template-columns:1fr;gap:16px}.ex-flow{flex-direction:row;justify-content:center}}

/* ---------- part bands ---------- */
.ex-band{padding:72px 0 40px}
.ex-band.acq{background:linear-gradient(var(--paper),rgba(79,70,229,.05))}
.ex-band.ret{background:linear-gradient(var(--paper),rgba(16,185,129,.05))}
.ex-band-num{font:700 12px/1 'JetBrains Mono',monospace;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint)}
.ex-band-h{font-size:clamp(28px,4.4vw,46px);font-weight:700;letter-spacing:-.02em;margin:12px 0 14px;max-width:900px}
.ex-band p{color:var(--ink-mid);font-size:17px;line-height:1.6;max-width:680px}

/* ---------- scroll steps (copy + rebuilt UI) ---------- */
.ex-step{padding:40px 0}
.ex-step-in{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(28px,4vw,56px);align-items:center}
.ex-step.alt .ex-step-copy{order:2}
.ex-step-copy{max-width:440px}
.ex-step-copy .eyebrow{margin-top:8px}
.ex-step-copy h3{font-size:clamp(22px,2.6vw,30px);font-weight:700;letter-spacing:-.02em;margin:10px 0 12px;line-height:1.15}
.ex-step-copy p{color:var(--ink-mid);font-size:16px;line-height:1.6}
.ex-step-copy p b{color:var(--ink)} .ex-step-copy i{font-style:italic;color:var(--ink-soft)}
.ex-step.acq .ex-pnum{color:var(--primary)} .ex-step.ret .ex-pnum{color:var(--win-deep)}
.ex-step-foot{margin-top:16px;font:600 11.5px/1.4 'JetBrains Mono',monospace;letter-spacing:.04em;
  color:var(--ink-faint);display:inline-flex;gap:7px;align-items:center}
.ex-step-foot:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--win-bright)}
@media(max-width:880px){
  .ex-step-in{grid-template-columns:1fr;gap:24px}
  .ex-step.alt .ex-step-copy{order:0}
  .ex-step-copy{max-width:none}
}

/* ---------- own ---------- */
.ex-own{background:linear-gradient(var(--paper),#fff)}
.ex-own-in{text-align:center;max-width:760px;margin:0 auto}
.ex-own-in h2{font-size:clamp(28px,4.4vw,48px);font-weight:700;letter-spacing:-.02em}
.ex-own-in .ul{position:relative;white-space:nowrap}
.ex-own-in .ul:after{content:"";position:absolute;left:-2px;right:-2px;bottom:.08em;height:.32em;
  background:linear-gradient(90deg,var(--primary),var(--win));opacity:.3;z-index:-1;border-radius:3px}
.ex-own-in p{color:var(--ink-mid);font-size:17px;line-height:1.6;margin:16px auto 22px}
.ex-own-tags{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.ex-own-tags span{font:600 13px/1 'Inter',sans-serif;color:var(--ink-soft);background:var(--card);
  border:1px solid var(--border);border-radius:999px;padding:9px 15px}

/* =========================================================================
   REBUILT PRODUCT UI WIDGETS — faithful, animated recreations
   ========================================================================= */
.ux{border-radius:16px;overflow:hidden;border:1px solid var(--border);box-shadow:var(--shadow-xl);
  font-family:'Inter',sans-serif;line-height:1.4;opacity:0;transform:translateY(26px) scale(.99);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.ux.in{opacity:1;transform:none}
.ux *{box-sizing:border-box}
.ux-live{display:inline-flex;align-items:center;gap:6px;font:700 10px/1 'JetBrains Mono',monospace;
  letter-spacing:.08em;color:var(--win-deep)}
.ux-live i{width:7px;height:7px;border-radius:50%;background:var(--win-bright);box-shadow:0 0 0 0 rgba(52,211,153,.6)}
@media(prefers-reduced-motion:no-preference){.ux-live i{animation:uxping 1.6s ease-out infinite}}
@keyframes uxping{0%{box-shadow:0 0 0 0 rgba(52,211,153,.6)}70%,100%{box-shadow:0 0 0 7px rgba(52,211,153,0)}}
.ux-av{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;
  background:var(--primary);color:#fff;font:700 10px/1 'Inter';letter-spacing:.02em}

/* stat row shared */
.ux-stats{display:flex;gap:10px;padding:14px 16px;flex-wrap:wrap}
.uxs{flex:1 1 0;min-width:78px}
.uxs b{display:block;font:800 21px/1 'Inter';letter-spacing:-.02em;color:var(--ink)}
.uxs span{display:block;font-size:10.5px;color:var(--ink-faint);margin-top:5px}

/* ---- Gravitational (light, acquisition fleet) ---- */
.ux-grav{background:#fff}
.ux-bar{display:flex;align-items:center;gap:12px;padding:11px 14px;border-bottom:1px solid var(--border)}
.ux-brand{display:inline-flex;align-items:center;gap:8px;font:800 13px/1 'Inter';color:var(--ink)}
.ux-brand em{font-style:normal;font:600 9.5px/1 'JetBrains Mono',monospace;letter-spacing:.12em;color:var(--ink-faint)}
.ux-logo{width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#f59e0b,#b45309)}
.ux-logo.g{background:radial-gradient(circle at 35% 30%,#fbbf24,#d97706)}
.ux-bar-r{margin-left:auto;display:inline-flex;align-items:center;gap:9px;color:var(--ink-faint);font-size:14px}
.ux-ic{opacity:.7}
.ux-body{display:grid;grid-template-columns:132px minmax(0,1fr)}
.ux-nav{background:#fbfaf8;border-right:1px solid var(--border);padding:12px 8px;display:flex;flex-direction:column;gap:2px}
.ux-nav span{font:600 12px/1 'Inter';color:var(--ink-mid);padding:8px 9px;border-radius:7px;display:flex;align-items:center;gap:7px}
.ux-nav span b{margin-left:auto;font:700 9px/1 'JetBrains Mono';background:var(--primary-soft);color:var(--primary);padding:2px 5px;border-radius:5px}
.ux-nav span.on{background:var(--primary-soft);color:var(--primary)}
.ux-main{min-width:0;padding:4px 0 14px}
.ux-mh{padding:14px 16px 4px}
.ux-mh h4{font:800 17px/1 'Inter';color:var(--ink)}
.ux-mh span{display:block;font-size:11px;color:var(--ink-faint);margin-top:6px}
.ux-tag-live{font-style:normal;color:var(--win-deep);font-weight:700}
.ux-split{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:12px;padding:6px 16px 0}
.ux-accts{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-content:start}
.ux-acct{border:1px solid var(--border);border-radius:11px;padding:11px;background:#fff}
.ux-acct-top{display:flex;align-items:center;gap:6px}
.ux-acct-name{display:inline-flex;align-items:center;gap:6px;font:700 12px/1.1 'Inter';color:var(--ink)}
.ux-d{width:7px;height:7px;border-radius:50%;background:var(--win)}
.st-flagged .ux-d{background:#ef4444} .st-scaling .ux-d{background:var(--primary)}
.ux-badge{margin-left:auto;font:700 8.5px/1 'JetBrains Mono';text-transform:uppercase;letter-spacing:.05em;
  padding:3px 6px;border-radius:5px;background:var(--win-soft);color:var(--win-deep)}
.st-scaling .ux-badge{background:var(--primary-soft);color:var(--primary)}
.st-flagged .ux-badge{background:#fef2f2;color:#dc2626}
.ux-acct-sub{font:500 10px/1 'JetBrains Mono';color:var(--ink-faint);margin:7px 0}
.ux-acct-m{display:flex;gap:8px;margin:4px 0 8px}
.ux-acct-m div{flex:1}
.ux-acct-m span{display:block;font-size:9px;color:var(--ink-faint)}
.ux-acct-m b{font:700 12px/1.2 'Inter';color:var(--ink)}
.ux-spark{width:100%;height:26px;color:var(--primary);stroke-dasharray:240;stroke-dashoffset:240}
.st-flagged .ux-spark{color:#ef4444} .st-optimized .ux-spark{color:var(--win)}
.ux.in .ux-spark{animation:uxdraw 1.4s var(--ease) .3s forwards}
@keyframes uxdraw{to{stroke-dashoffset:0}}
.ux-acct-foot{display:flex;align-items:center;justify-content:space-between;margin-top:8px;font-size:9.5px;color:var(--ink-faint)}
.ux-ai{font:700 9px/1 'JetBrains Mono';color:var(--win-deep);background:var(--win-soft);padding:3px 6px;border-radius:5px}
.ux-feed{border:1px solid var(--border);border-radius:11px;overflow:hidden;display:flex;flex-direction:column;max-height:330px}
.ux-feed-h{display:flex;align-items:center;gap:7px;padding:9px 11px;border-bottom:1px solid var(--border);
  font:700 9.5px/1 'JetBrains Mono';letter-spacing:.1em;color:var(--ink-mid)}
.ux-feed-h i{width:6px;height:6px;border-radius:50%;background:var(--win-bright)}
.ux-feed-list{padding:6px;overflow:hidden;flex:1}
.ux-frow{padding:7px 6px;border-bottom:1px solid var(--border-soft);animation:uxfeedin .5s var(--ease)}
.ux-ft{font:600 9px/1 'JetBrains Mono';color:var(--primary)}
.ux-fb{display:block;font-size:11px;color:var(--ink-soft);line-height:1.45;margin-top:3px}
.ux-fb b{color:var(--ink);font-weight:700;margin-right:5px}
@keyframes uxfeedin{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@media(max-width:560px){.ux-split{grid-template-columns:1fr}.ux-accts{grid-template-columns:1fr}.ux-body{grid-template-columns:1fr}.ux-nav{flex-direction:row;overflow-x:auto;border-right:0;border-bottom:1px solid var(--border)}}

/* ---- Command Center (dark, retention) ---- */
.ux-cc{background:#14151a;color:#e7e7ea;border-color:#26272f}
.ux-cc-bar{display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid #26272f}
.ux-cc-search{flex:1;max-width:300px;display:flex;align-items:center;gap:8px;background:#1c1d24;border:1px solid #2b2c35;
  border-radius:8px;padding:7px 10px;font-size:11px;color:#9a9ba6}
.ux-cc-search kbd{margin-left:auto;font:600 9px/1 'JetBrains Mono';background:#2b2c35;padding:2px 5px;border-radius:4px}
.ux-cc-user{margin-left:auto;display:inline-flex;align-items:center;gap:7px;font-size:11.5px;color:#cfcfd6}
.ux-cc-user em{font-style:normal;font:700 8px/1 'JetBrains Mono';color:#7c7e8a;letter-spacing:.1em}
.ux-cc-body{display:grid;grid-template-columns:148px minmax(0,1fr)}
.ux-cc-nav{background:#101116;border-right:1px solid #26272f;padding:12px 8px;display:flex;flex-direction:column;gap:1px}
.ux-cc-logo{display:flex;align-items:center;gap:8px;font:800 12px/1 'Inter';color:#fff;padding:4px 8px 10px}
.ux-cc-logo i{width:18px;height:18px;border-radius:6px;background:linear-gradient(135deg,var(--primary),#7c75f0)}
.ux-cc-lbl{font:700 8.5px/1 'JetBrains Mono';letter-spacing:.12em;color:#5d5f6b;padding:6px 8px}
.ux-cc-nav span{font:600 11.5px/1 'Inter';color:#a6a7b2;padding:7px 9px;border-radius:7px}
.ux-cc-nav span.on{background:rgba(79,70,229,.18);color:#c7c4fb}
.ux-cc-main{min-width:0;padding:14px 16px}
.ux-cc-greet h4{font:800 18px/1 'Inter';color:#fff}
.ux-cc-greet span{display:block;font-size:11px;color:#7c7e8a;margin-top:5px}
.ux-cc .ux-stats{padding:14px 0}
.ux-cc .uxs b{color:#fff} .ux-cc .uxs span{color:#7c7e8a}
.ux-cc .uxs.warn b{color:#fbbf24} .ux-cc .uxs.good b{color:var(--win-bright)}
.ux-cc-quick{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.ux-chip{font:600 10.5px/1 'Inter';color:#cfcfd6;background:#1c1d24;border:1px solid #2b2c35;padding:6px 9px;border-radius:7px}
.ux-cc-cols{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:12px}
.ux-panel-h{font:700 9.5px/1 'JetBrains Mono';letter-spacing:.08em;color:#9a9ba6;margin-bottom:10px}
.ux-cc-pipe,.ux-cc-act{background:#1a1b21;border:1px solid #26272f;border-radius:11px;padding:13px}
.ux-pipe{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.ux-pcol-h{font:600 9px/1 'JetBrains Mono';color:#9a9ba6;margin-bottom:7px;display:flex;justify-content:space-between}
.ux-pcol-h b{color:#fff}
.ux-pcard{height:22px;border-radius:6px;background:#23242c;margin-bottom:6px;border-left:2px solid var(--primary)}
.ux-pcol:nth-child(3) .ux-pcard{border-left-color:#fbbf24}
.ux-pcol:nth-child(4) .ux-pcard{border-left-color:var(--win-bright)}
.ux-actrow{display:flex;align-items:flex-start;gap:9px;padding:8px 0;border-bottom:1px solid #23242c;animation:uxfeedin .5s var(--ease)}
.ux-actdot{width:7px;height:7px;border-radius:50%;background:var(--win-bright);margin-top:4px;flex-shrink:0}
.ux-actbody{flex:1;min-width:0}
.ux-actbody b{display:block;font:600 12px/1.3 'Inter';color:#e7e7ea}
.ux-actbody span{font-size:10.5px;color:#7c7e8a}
.ux-actt{font:600 9px/1 'JetBrains Mono';color:#5d5f6b;flex-shrink:0}
@media(max-width:620px){.ux-cc-body{grid-template-columns:1fr}.ux-cc-cols{grid-template-columns:1fr}.ux-cc-nav{display:none}}

/* ---- DoorLoop mission control (dark) ---- */
.ux-dl{background:#0d1326;color:#dbe3f4;border-color:#1e2a44;padding:0}
.ux-dl-h{display:flex;align-items:center;gap:12px;padding:13px 16px;border-bottom:1px solid #1e2a44;flex-wrap:wrap}
.ux-dl-h .ux-live{color:#7dd3a8}
.ux-dl-t{font:700 11px/1 'JetBrains Mono';letter-spacing:.12em;color:#dbe3f4}
.ux-dl-h em{margin-left:auto;font-style:normal;font:600 9.5px/1 'JetBrains Mono';color:#5f6f93}
.ux-dl-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#1e2a44}
.ux-dlm{background:#0d1326;padding:16px}
.ux-dlm span{display:block;font:600 9px/1.2 'JetBrains Mono';letter-spacing:.05em;color:#5f6f93;text-transform:uppercase}
.ux-dlm b{display:block;font:800 28px/1 'Inter';color:#fff;margin-top:9px;letter-spacing:-.02em}
.ux-agents{padding:12px 16px 16px;display:grid;grid-template-columns:1fr 1fr;gap:6px 18px}
.ux-agent{display:flex;align-items:center;gap:9px;font-size:11.5px;color:#aab6d0}
.ux-agent-n{font:700 9px/1 'JetBrains Mono';color:#5f6f93}
.ux-agent-l{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ux-agent-bar{width:54px;height:4px;border-radius:2px;background:#1e2a44;overflow:hidden;flex-shrink:0}
.ux-agent-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--primary),#7dd3a8);border-radius:2px}
.ux.in .ux-agent-bar i{animation:uxbar 1.2s var(--ease) forwards;animation-delay:calc(var(--i) * .12s)}
@keyframes uxbar{to{width:100%}}
.ux-agent-ok{color:#7dd3a8;opacity:0}
.ux.in .ux-agent-ok{animation:uxok .3s var(--ease) forwards;animation-delay:calc(var(--i) * .12s + 1.1s)}
@keyframes uxok{to{opacity:1}}
@media(max-width:620px){.ux-dl-stats{grid-template-columns:1fr 1fr}.ux-agents{grid-template-columns:1fr}}

/* ---- Houses deal map (light) ---- */
.ux-hs{background:#f8fafc}
.ux-hs-bar{display:flex;align-items:baseline;gap:10px;padding:12px 15px;border-bottom:1px solid var(--border);background:#fff}
.ux-hs-bar b{font:800 13px/1 'Inter';color:var(--ink)}
.ux-hs-bar span{font-size:10.5px;color:var(--ink-faint)}
.ux-hs-filters{display:flex;gap:7px;padding:11px 15px;flex-wrap:wrap;background:#fff;border-bottom:1px solid var(--border)}
.ux-fchip{font:600 10.5px/1 'Inter';color:var(--ink-mid);border:1px solid var(--border);border-radius:999px;padding:6px 11px;background:#fff}
.ux-fchip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.ux-hs-split{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
.ux-hs-map{position:relative;min-height:300px;overflow:hidden;
  background:
   radial-gradient(circle at 30% 40%,#d7e9d3,transparent 38%),
   radial-gradient(circle at 65% 60%,#cfe3ea,transparent 42%),
   repeating-linear-gradient(58deg,transparent 0 26px,rgba(120,140,160,.10) 26px 28px),
   repeating-linear-gradient(150deg,transparent 0 34px,rgba(120,140,160,.08) 34px 36px),
   #e8eef0}
.ux-cluster{position:absolute;transform:translate(-50%,-50%);min-width:30px;height:30px;padding:0 7px;border-radius:999px;
  background:rgba(217,119,6,.92);color:#fff;font:800 11px/30px 'Inter';text-align:center;
  box-shadow:0 3px 10px rgba(180,83,9,.4);border:2px solid #fff}
@media(prefers-reduced-motion:no-preference){.ux-cluster{animation:uxpop .5s var(--ease-spring) backwards}
  .ux-cluster:nth-child(2){animation-delay:.1s}.ux-cluster:nth-child(3){animation-delay:.2s}
  .ux-cluster:nth-child(4){animation-delay:.3s}.ux-cluster:nth-child(5){animation-delay:.4s}}
@keyframes uxpop{from{transform:translate(-50%,-50%) scale(0)}to{transform:translate(-50%,-50%) scale(1)}}
.ux-hs-scan{position:absolute;inset:0;background:linear-gradient(120deg,transparent 40%,rgba(79,70,229,.10) 50%,transparent 60%);
  transform:translateX(-100%)}
@media(prefers-reduced-motion:no-preference){.ux.in .ux-hs-scan{animation:uxscan 3.5s ease-in-out infinite}}
@keyframes uxscan{0%{transform:translateX(-100%)}55%,100%{transform:translateX(100%)}}
.ux-hs-list{background:#fff;border-left:1px solid var(--border);max-height:360px;overflow:hidden}
.ux-prop{display:flex;justify-content:space-between;gap:10px;padding:12px 14px;border-bottom:1px solid var(--border-soft);animation:uxfeedin .5s var(--ease)}
.ux-prop-l b{display:block;font:700 12.5px/1.2 'Inter';color:var(--ink)}
.ux-prop-l span{font-size:10px;color:var(--ink-faint)}
.ux-prop-tag{display:inline-block;margin-top:6px;font-style:normal;font:600 9px/1 'JetBrains Mono';
  color:#b45309;background:#fff7ed;border:1px solid #fed7aa;padding:3px 6px;border-radius:5px}
.ux-prop-r{text-align:right}
.ux-prop-r b{display:block;font:800 15px/1 'Inter';color:var(--win-deep)}
.ux-prop-r span{font:700 10px/1 'JetBrains Mono';color:var(--ink-soft)}
.ux-prop-r em{display:block;font-style:normal;font-size:9px;color:var(--ink-faint);margin-top:4px}
@media(max-width:560px){.ux-hs-split{grid-template-columns:1fr}.ux-hs-list{border-left:0;border-top:1px solid var(--border)}}

/* ---- Send / lead engine (dark, ops) ---- */
.ux-eng{background:#0c0d10;color:#dcdce2;border-color:#23242c}
.ux-eng-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:18px}
.ux-eng .uxs b{color:#fff} .ux-eng .uxs span{color:#7c7e8a}
.ux-eng .uxs.eng b{color:var(--win-bright)}
.ux-switch{display:inline-flex;align-items:center;width:38px;height:21px;border-radius:999px;background:var(--win-deep);padding:2px}
.ux-switch span{width:17px;height:17px;border-radius:50%;background:#fff;margin-left:auto}
.ux-eng-log{margin:0 18px 18px;border:1px solid #23242c;border-radius:11px;overflow:hidden;background:#0a0b0e}
.ux-eng-h{display:flex;align-items:center;gap:7px;padding:9px 12px;border-bottom:1px solid #23242c;
  font:700 9.5px/1 'JetBrains Mono';letter-spacing:.1em;color:#9a9ba6}
.ux-eng-h i{width:6px;height:6px;border-radius:50%;background:var(--win-bright)}
.ux-eng-rows{padding:8px 12px;font:500 11px/1.7 'JetBrains Mono';color:#8b8d97;min-height:150px}
.ux-eng-rows .er{animation:uxfeedin .4s var(--ease)}
.ux-eng-rows .er b{color:#dcdce2} .ux-eng-rows .er em{font-style:normal;color:var(--win-bright)}
@media(max-width:620px){.ux-eng-stats{grid-template-columns:1fr 1fr}}

/* reduced motion: show everything, kill loops */
@media(prefers-reduced-motion:reduce){
  .ux{opacity:1!important;transform:none!important}
  .ux-spark{stroke-dashoffset:0!important}
  .ux *{animation:none!important}
}