/* ════════════════════════════════════════════════════════════
   syrix.css — the SYRIX section
   The aura it opens with and keeps behind it, the explorers, and the five
   in-app scenes. Each scene's colours are that application's own tokens,
   copied from its stylesheet rather than chosen to match this page, which
   is why the scenes do not share a palette with each other.
   ════════════════════════════════════════════════════════════ */

/* ─────────── the aura behind the whole section ───────────
   A fixed layer of slow colour that fades in while the SYRIX section is on
   screen. The body class is set by js/syrix.js. */
/* Exactly the size of the screen, and it drifts by moving its gradients
   rather than itself: a fixed layer larger than the viewport, or one moved
   by a transform, widens the page on a phone and makes it draggable
   sideways. */
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(42% 38% at 18% 30%, rgba(150,132,255,.16), transparent 70%),
    radial-gradient(40% 40% at 82% 26%, rgba(110,196,255,.12), transparent 70%),
    radial-gradient(48% 42% at 60% 82%, rgba(233,201,140,.14), transparent 72%);
  background-size:130% 130%; background-position:0% 0%;
  opacity:0; transition:opacity 1.4s var(--ease-out);
  animation:sx-pan 28s ease-in-out infinite alternate;
}
body.in-syrix::before{ opacity:1; }
@keyframes sx-pan{ 0%{ background-position:0% 0%; } 100%{ background-position:100% 60%; } }
/* the pinned scenes' own aura fields drift the same way */
@keyframes sx-drift{ 0%{ background-position:0% 0%; } 100%{ background-position:100% 60%; } }
@media (prefers-reduced-motion:reduce){ body::before{ animation:none; } }

/* ─────────── the opening ─────────── */
.sxa{ position:relative; height:320vh; height:320svh; --a:0; --f:0; --o:0; --t:0; }
.sxa__pin{
  position:sticky; top:0; height:100vh; height:100svh; overflow:hidden;
  display:grid; place-items:center; isolation:isolate;
}
.sxa__cv{ position:absolute; inset:0; width:100%; height:100%; z-index:0; filter:blur(2px); }
.sxa__rays{
  position:absolute; left:50%; top:50%; width:220vmax; height:220vmax; margin:-110vmax 0 0 -110vmax; z-index:1;
  background:repeating-conic-gradient(from 0deg, rgba(242,224,187,.05) 0deg 1.6deg, transparent 1.6deg 8deg);
  -webkit-mask:radial-gradient(circle, #000 0, transparent 34%); mask:radial-gradient(circle, #000 0, transparent 34%);
  opacity:calc(var(--a) * (1 - var(--o) * .6));
  transform:rotate(calc(var(--f) * 40deg)) scale(calc(.7 + var(--a) * .3 + var(--o) * .4));
}
/* The mark: four quarters of the real icon, each folding shut along the
   edge it shares with the centre. --f closes them; --o then stretches the
   seam they leave into a horizon. */
.sxa__mark{
  position:relative; z-index:2;
  width:min(46vmin,420px); aspect-ratio:1; perspective:1100px;
  transform:scale(calc(.62 + var(--a) * .38)) translateY(calc((1 - var(--a)) * 40px));
  opacity:calc(var(--a) * (1 - var(--o)));
  filter:drop-shadow(0 0 calc(30px + var(--f) * 60px) rgba(242,224,187,calc(.25 + var(--f) * .4)));
}
/* each quarter holds the whole icon at twice its size, offset so only its
   own quarter shows — an <img>, so the single-file build can inline it */
.sxa__q{ position:absolute; width:50%; height:50%; overflow:hidden; backface-visibility:hidden; }
.sxa__q img{ position:absolute; width:200%; height:200%; max-width:none; display:block; }
.sxa__q--tl{ left:0; top:0; border-radius:28% 0 0 0; transform-origin:100% 50%; transform:rotateY(calc(var(--f) * 92deg)); }
.sxa__q--tr{ right:0; top:0; border-radius:0 28% 0 0; transform-origin:0 50%; transform:rotateY(calc(var(--f) * -92deg)); }
.sxa__q--bl{ left:0; bottom:0; border-radius:0 0 0 28%; transform-origin:100% 50%; transform:rotateY(calc(var(--f) * 92deg)); }
.sxa__q--br{ right:0; bottom:0; border-radius:0 0 28% 0; transform-origin:0 50%; transform:rotateY(calc(var(--f) * -92deg)); }
.sxa__q--tl img{ left:0; top:0; } .sxa__q--tr img{ right:0; top:0; }
.sxa__q--bl img{ left:0; bottom:0; } .sxa__q--br img{ right:0; bottom:0; }
.sxa__seam{
  position:absolute; left:50%; top:-10%; bottom:-10%; width:2px; margin-left:-1px;
  background:linear-gradient(180deg, transparent, #fff8e6 20%, #fff 50%, #fff8e6 80%, transparent);
  box-shadow:0 0 24px 6px rgba(242,224,187,.7), 0 0 80px 20px rgba(203,169,107,.35);
  opacity:var(--f); transform:scaleY(calc(.3 + var(--f) * .7));
}
/* the horizon the seam opens into, drawn on the pin so it can outgrow the mark */
.sxa__pin::after{
  content:""; position:absolute; left:50%; top:50%; z-index:2;
  width:calc(2px + var(--o) * 100vw); height:2px; transform:translate(-50%,-50%);
  background:linear-gradient(90deg, transparent, rgba(242,224,187,.9) 30%, #fff 50%, rgba(242,224,187,.9) 70%, transparent);
  box-shadow:0 0 40px 10px rgba(242,224,187,calc(var(--o) * .5));
  opacity:calc(var(--o) * (1 - var(--t) * .7));
}
.sxa__title{
  position:absolute; z-index:3; left:0; right:0; top:50%; transform:translateY(-50%);
  display:grid; justify-items:center; gap:clamp(12px,2vh,22px); text-align:center; padding-inline:var(--gutter);
  opacity:var(--t); pointer-events:none;
}
.sxa__kicker{ font-family:var(--mono); font-size:11px; letter-spacing:.32em; text-transform:uppercase; color:var(--gold); }
.sxa__word{ display:flex; gap:clamp(4px,1.2vw,18px); }
.sxa__word b{
  font-family:var(--serif); font-weight:400; font-size:clamp(64px,13vw,200px); line-height:.9; letter-spacing:-.02em;
  background:linear-gradient(180deg,#fff 10%,#f2e0bb 55%,#b38a49); -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 30px rgba(242,224,187,.35));
  transform:translateY(calc((1 - var(--t)) * 40px)); opacity:calc(var(--t) * 1.2);
}
.sxa__word b:nth-child(2){ transform:translateY(calc((1 - var(--t)) * 60px)); }
.sxa__word b:nth-child(3){ transform:translateY(calc((1 - var(--t)) * 80px)); }
.sxa__word b:nth-child(4){ transform:translateY(calc((1 - var(--t)) * 100px)); }
.sxa__word b:nth-child(5){ transform:translateY(calc((1 - var(--t)) * 120px)); }
.sxa__sub{ font-family:var(--mono); font-size:clamp(10px,1vw,12px); letter-spacing:.16em; text-transform:uppercase; color:rgba(239,237,231,.7); max-width:70ch; }
@media (hover:none), (prefers-reduced-motion:reduce){
  .sxa{ height:auto; }
  .sxa__pin{ position:relative; height:auto; min-height:80vh; padding-block:clamp(60px,12vh,120px); }
}

/* the section itself sits above the fixed aura */
.proj--syrix{ position:relative; z-index:1; }

/* ─────────── shared heading for the explorers ─────────── */
.sxh{ max-width:72ch; margin-bottom:clamp(22px,3vw,38px); }
.sxh__k{
  display:inline-block; font-family:var(--mono); font-size:10.5px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--gold); margin-bottom:10px;
}
.sxh h3, .sxv__txt h3, .sxd__txt h3{ font-family:var(--serif); font-weight:400; font-size:clamp(26px,3.2vw,44px); letter-spacing:-.02em; line-height:1.08; }
.sxh p, .sxv__txt p, .sxd__txt p{ margin:12px 0 0; color:var(--muted); font-size:15px; line-height:1.7; }

/* a frosted panel, used by every explorer so they read as one family */
.sxm__grid, .sxv, .sxr__board, .sxd__pad, .sxi__stage{
  border:1px solid rgba(242,224,187,.12);
  background:linear-gradient(160deg, rgba(255,246,228,.045), rgba(255,246,228,.012) 45%, rgba(255,246,228,.03));
  -webkit-backdrop-filter:blur(24px) saturate(1.4); backdrop-filter:blur(24px) saturate(1.4);
  box-shadow:0 40px 100px -50px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,241,214,.10);
  border-radius:22px;
}

/* ─────────── the two depths, v3 ─────────── */
.two--v3 .two__bar{ align-items:center; }
.two--v3 .two__bar img{ border-radius:5px; }
.two--v3 .two__v{ aspect-ratio:16 / 9; }
.two--v3 figcaption em{ color:var(--gold-hi); font-style:normal; }
.shot--inset .shot__frame{ max-width:1100px; }
.shot--inset figcaption code{ color:var(--gold); font-size:.92em; }
.trio__one figcaption em{ color:var(--muted-2); font-style:normal; }

/* ─────────── modes ─────────── */
.sxm{ margin:clamp(60px,9vw,120px) 0 0; }
.sxm__grid{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr); gap:clamp(16px,2.6vw,36px); padding:clamp(16px,2.4vw,30px); }
.sxm__menu{
  display:grid; gap:4px; align-content:start; padding:8px;
  background:#121214; border:1px solid rgba(255,255,255,.08); border-radius:16px;
  box-shadow:0 24px 60px -24px rgba(0,0,0,.9);
}
.sxm__item{
  display:flex; align-items:center; gap:12px; text-align:left;
  padding:10px 12px; border:0; border-radius:11px; background:transparent; color:#f2f2f3; font:inherit; cursor:pointer;
  transition:background-color .25s ease, transform .35s var(--ease-out);
}
.sxm__item img{ width:34px; height:34px; border-radius:9px; flex:none; }
.sxm__item b{ display:block; font-weight:600; font-size:14px; }
.sxm__item b i{ font-style:normal; font-weight:400; color:rgba(242,242,243,.45); font-size:12px; margin-left:3px; }
.sxm__item em{ display:block; font-style:normal; font-size:12px; color:rgba(242,242,243,.55); margin-top:2px; }
.sxm__item:hover{ background:rgba(255,255,255,.05); }
.sxm__item.is-sel{ background:rgba(255,255,255,.09); }
.sxm__item.is-sel::after{ content:"✓"; margin-left:auto; color:#f2f2f3; font-size:13px; }
.sxm__item--static{ cursor:default; opacity:.75; }
.sxm__sep{ height:1px; background:rgba(255,255,255,.08); margin:4px 6px; }
.sxm__table{ display:grid; gap:14px; align-content:start; }
.sxm__bar{ display:grid; grid-template-columns:minmax(0,10rem) minmax(0,1fr) minmax(0,9rem); align-items:center; gap:14px; }
.sxm__bar span{ font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.sxm__bar i{ position:relative; height:10px; border-radius:10px; background:rgba(239,237,231,.06); overflow:hidden; }
.sxm__bar s, .sxm__bar u{ position:absolute; left:0; top:0; bottom:0; border-radius:10px; transition:width .9s var(--ease-out), opacity .5s ease; }
/* the faint pair are Spark and Zenith side by side; the bright one is the chosen mode */
.sxm__bar s{ width:calc(var(--ze,0) * 100%); background:rgba(150,132,255,.22); }
.sxm__bar u{ width:calc(var(--v,0) * 100%); background:linear-gradient(90deg, #b38a49, #f2e0bb); box-shadow:0 0 18px rgba(242,224,187,.4); }
.sxm[data-sel="auto"] .sxm__bar u{ width:calc(var(--sp,0) * 100%); opacity:.55; }
.sxm__bar b{ justify-self:end; font-family:var(--serif); font-weight:400; font-size:19px; color:var(--ivory); white-space:nowrap; }
.sxm[data-sel="auto"] .sxm__bar b{ font-family:var(--mono); font-size:11px; color:var(--muted); }
.sxm__facts{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:6px; }
.sxm__facts div{ padding:12px 14px; border:1px solid rgba(255,255,255,.07); border-radius:12px; background:rgba(0,0,0,.25); }
.sxm__facts em{ display:block; font-style:normal; font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted-2); }
.sxm__facts b{ display:block; margin-top:4px; font-weight:400; font-family:var(--serif); font-size:22px; color:var(--gold-hi); }
.sxm__note{ margin:4px 0 0; font-size:14px; line-height:1.6; color:var(--muted); min-height:3.2em; }
@media (max-width:860px){
  .sxm__grid{ grid-template-columns:minmax(0,1fr); }
  .sxm__bar{ grid-template-columns:minmax(0,1fr) auto; }
  .sxm__bar i{ grid-column:1 / -1; grid-row:2; }
}

/* ─────────── voice ─────────── */
.sxv{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:clamp(18px,3vw,48px);
  margin:clamp(60px,9vw,120px) 0 0; padding:clamp(18px,2.6vw,36px); align-items:center;
}
.sxv__stage{
  position:relative; min-height:440px; border-radius:16px; overflow:hidden;
  background:#000; border:1px solid rgba(255,255,255,.07);
  display:flex; flex-direction:column; justify-content:flex-end;
}
.sxv__chat{ position:absolute; left:0; right:0; top:0; padding:22px 24px; display:grid; gap:14px; opacity:.38; filter:blur(.4px); }
.sxv__line{ font-size:13.5px; line-height:1.55; color:#e6e6e8; max-width:80%; }
.sxv__line--me{ justify-self:end; background:#1c1c1f; border-radius:16px 16px 4px 16px; padding:9px 13px; }
.sxv__dock{ position:relative; display:grid; justify-items:center; gap:14px; padding:26px 18px 22px;
  background:linear-gradient(180deg, transparent, rgba(0,0,0,.9) 30%); }
.sxv__orb{ width:min(220px,56%); aspect-ratio:1; display:block; cursor:pointer; }
.sxv__status{ display:grid; justify-items:center; gap:3px; text-align:center; }
.sxv__status b{ font-weight:500; font-size:16px; color:#f4f4f5; }
.sxv__status span{ font-size:12.5px; color:rgba(244,244,245,.5); min-height:1.2em; }
.sxv__ctls{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px; }
.sxv__ctls button{
  padding:7px 12px; border-radius:100px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.03);
  color:rgba(244,244,245,.75); font:inherit; font-size:12px; cursor:pointer; transition:background-color .2s, color .2s, border-color .2s;
}
.sxv__ctls button:hover{ background:rgba(255,255,255,.08); }
.sxv__ctls button.on{ border-color:rgba(233,201,140,.7); color:#f6e2b3; background:rgba(233,201,140,.08); }
.sxv__facts{ list-style:none; padding:0; margin:18px 0 0; display:grid; gap:10px; }
.sxv__facts li{ display:grid; grid-template-columns:8.5rem minmax(0,1fr); gap:12px; align-items:baseline; padding-top:10px; border-top:1px solid var(--line-2); }
.sxv__facts b{ font-family:var(--serif); font-weight:400; font-size:19px; color:var(--gold-hi); }
.sxv__facts span{ font-size:13.5px; color:var(--muted); line-height:1.55; }
.sxv__note{ font-size:12.5px !important; color:var(--muted-2) !important; }
@media (max-width:900px){ .sxv{ grid-template-columns:minmax(0,1fr); } .sxv__stage{ min-height:400px; } }

/* ─────────── the lane race ─────────── */
.sxr{ margin:clamp(60px,9vw,120px) 0 0; }
.sxr__board{ display:grid; gap:2px; padding:clamp(12px,1.6vw,18px); overflow:hidden; }
.sxr__lane{
  --run:1s;
  display:grid; grid-template-columns:minmax(0,15rem) 6rem minmax(0,1fr) 5.5rem; align-items:center; gap:14px;
  padding:10px 12px; border-radius:12px; transition:background-color .4s ease, opacity .4s ease;
}
.sxr__who{ font-family:var(--mono); font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sxr__who b{ font-weight:400; color:var(--ivory); margin-right:8px; }
.sxr__hedge{ font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; color:var(--muted-2); }
.sxr__track{ position:relative; height:6px; border-radius:6px; background:rgba(239,237,231,.06); overflow:hidden; }
.sxr__track s{ position:absolute; left:0; top:0; bottom:0; width:0; border-radius:6px; background:linear-gradient(90deg, rgba(150,132,255,.5), rgba(110,196,255,.7)); }
.sxr__tag{ font-style:normal; font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; justify-self:end; color:transparent; transition:color .3s ease; }
.sxr__lane.is-run .sxr__track s{ width:100%; transition:width var(--run) linear; }
.sxr__lane.is-run .sxr__tag::before{ content:"racing"; }
.sxr__lane.is-run .sxr__tag{ color:#9fb6ff; }
.sxr__lane.is-win{ background:rgba(233,201,140,.07); }
.sxr__lane.is-win .sxr__track s{ width:100%; background:linear-gradient(90deg,#b38a49,#f2e0bb); box-shadow:0 0 16px rgba(242,224,187,.5); }
.sxr__lane.is-win .sxr__tag::before{ content:"streaming"; }
.sxr__lane.is-win .sxr__tag{ color:var(--gold-hi); }
.sxr__lane.is-cut{ opacity:.45; }
.sxr__lane.is-cut .sxr__track s{ width:60%; background:rgba(239,237,231,.2); }
.sxr__lane.is-cut .sxr__tag::before{ content:"cancelled"; }
.sxr__lane.is-cut .sxr__tag{ color:var(--muted-2); }
.sxr__lane.is-out{ opacity:.5; }
.sxr__lane.is-out .sxr__tag::before{ content:"out of minute"; }
.sxr__lane.is-out .sxr__tag{ color:#e08a7c; }
.sxr__cap{ margin:14px 2px 0; font-size:14px; color:var(--ivory); min-height:1.6em; }
.sxr__facts{ list-style:none; padding:0; margin:22px 0 0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.sxr__facts li{ padding:14px 16px; border:1px solid var(--line-2); border-radius:14px; background:rgba(0,0,0,.2); }
.sxr__facts b{ display:block; font-family:var(--mono); font-weight:400; font-size:12px; color:var(--gold-hi); margin-bottom:6px; }
.sxr__facts span{ font-size:13.5px; color:var(--muted); line-height:1.55; }
@media (max-width:860px){
  .sxr__lane{ grid-template-columns:minmax(0,1fr) auto; }
  .sxr__hedge{ grid-column:2; grid-row:1; }
  .sxr__track{ grid-column:1 / -1; }
  .sxr__tag{ grid-column:1 / -1; justify-self:start; }
  .sxr__facts{ grid-template-columns:minmax(0,1fr); }
}

/* ─────────── the Deck ─────────── */
.sxd{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(18px,3vw,48px); align-items:center; margin:clamp(60px,9vw,120px) 0 0; }
.sxd__pad{ --aura:#d6a94b; position:relative; overflow:hidden; padding:20px; }
.sxd__aura{
  position:absolute; inset:-30%; z-index:0; pointer-events:none;
  background:radial-gradient(40% 40% at 50% 45%, var(--aura), transparent 70%);
  opacity:.22; filter:blur(30px); transition:background .6s ease;
}
.sxd__head{ position:relative; display:flex; align-items:baseline; gap:10px; margin-bottom:14px; }
.sxd__head b{ font-weight:600; font-size:16px; color:#f4f4f5; }
.sxd__head span{ font-size:12.5px; color:rgba(244,244,245,.5); }
.sxd__grid{ position:relative; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.sxd__key{
  display:grid; justify-items:center; gap:8px; padding:16px 8px 12px;
  border-radius:16px; border:1px solid rgba(255,255,255,.07); background:rgba(0,0,0,.35);
  color:#e9e9ee; font:inherit; font-size:12.5px; cursor:pointer;
  transition:transform .45s var(--ease-out), border-color .3s ease, box-shadow .3s ease, background-color .3s ease;
}
.sxd__key img{ width:56px; height:56px; border-radius:15px; box-shadow:0 10px 26px -10px rgba(0,0,0,.9); transition:transform .45s var(--ease-out); }
.sxd__key:hover, .sxd__key.on{ border-color:rgba(255,255,255,.18); background:rgba(255,255,255,.04); transform:translateY(-3px); }
.sxd__key.on{ box-shadow:0 0 0 1px var(--aura), 0 18px 44px -18px var(--aura); }
.sxd__key.on img{ transform:scale(1.06); }
.sxd__out{ position:relative; margin-top:14px; padding:12px 14px; border-radius:12px; background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.06); min-height:64px; }
.sxd__out b{ display:block; font-weight:500; font-size:13.5px; color:#f4f4f5; }
.sxd__out span{ display:block; margin-top:3px; font-size:12.5px; color:rgba(244,244,245,.6); line-height:1.5; }
@media (max-width:860px){ .sxd{ grid-template-columns:minmax(0,1fr); } }
@media (max-width:420px){ .sxd__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* ═══════════ SYRIX INSIDE EVERY APP ═══════════ */
.sxi{ margin:clamp(70px,10vw,140px) 0 0; }
.sxi__tabs{ position:relative; display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px; }
.sxi__tab{
  display:flex; align-items:center; gap:8px; padding:7px 14px 7px 7px; border-radius:100px;
  border:1px solid var(--line); background:rgba(0,0,0,.25); color:var(--muted); font:inherit; font-size:13px; cursor:pointer;
  transition:color .25s, border-color .25s, background-color .25s;
}
.sxi__tab img{ width:26px; height:26px; border-radius:8px; }
.sxi__tab.on{ color:var(--ivory); border-color:rgba(242,224,187,.4); background:rgba(242,224,187,.06); }
.sxi__bar{ position:absolute; left:0; right:0; bottom:-8px; height:2px; background:rgba(239,237,231,.06); border-radius:2px; overflow:hidden; }
.sxi__bar s{ position:absolute; left:0; top:0; bottom:0; width:0; background:linear-gradient(90deg,#b38a49,#f2e0bb); transition:width .2s linear; }
.sxi__stage{ position:relative; margin-top:18px; padding:clamp(14px,2vw,24px); min-height:640px; }
.sxi__pane{
  display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); gap:clamp(18px,3vw,40px); align-items:center;
  position:absolute; inset:clamp(14px,2vw,24px);
  opacity:0; visibility:hidden; transform:translateY(14px) scale(.985);
  transition:opacity .6s var(--ease-out), transform .7s var(--ease-out), visibility 0s linear .6s;
}
.sxi__pane.on{ position:relative; inset:auto; opacity:1; visibility:visible; transform:none; transition:opacity .6s var(--ease-out), transform .7s var(--ease-out); }
.sxi__scene{ display:grid; place-items:center; min-height:600px; }
.sxi__say b{ display:block; font-family:var(--serif); font-weight:400; font-size:clamp(22px,2.4vw,32px); color:var(--ivory); letter-spacing:-.01em; }
.sxi__say p{ margin:12px 0 0; font-size:14.5px; line-height:1.7; color:var(--muted); }
.sxi__say ul{ list-style:none; padding:0; margin:16px 0 0; display:grid; gap:7px; }
.sxi__say li{ font-family:var(--mono); font-size:11.5px; color:var(--gold-hi); padding-left:16px; position:relative; }
.sxi__say li::before{ content:""; position:absolute; left:0; top:.55em; width:6px; height:6px; border-radius:50%; background:var(--gold); box-shadow:0 0 10px var(--gold); }
.sxi__say code{ color:var(--gold-hi); }
.sxi__note{ margin:14px 2px 0; font-size:12.5px; color:var(--muted-2); max-width:90ch; }
@media (max-width:980px){
  .sxi__pane{ grid-template-columns:minmax(0,1fr); }
  .sxi__stage{ min-height:0; }
  .sxi__scene{ min-height:560px; }
}

/* shared scene mechanics: [data-show] appears with .in; steps light .live then .done */
.sxi__pane [data-show]{ opacity:0; transform:translateY(8px); transition:opacity .45s var(--ease-out), transform .5s var(--ease-out); }
.sxi__pane [data-show].in{ opacity:1; transform:none; }
.is-press{ animation:sx-press .5s var(--ease-out); }
@keyframes sx-press{ 0%{ transform:scale(1); } 40%{ transform:scale(.95); filter:brightness(1.35); } 100%{ transform:scale(1); } }

/* ── Kohli: dark theme tokens from css/base.css ── */
.kz-phone{
  width:min(330px,100%); aspect-ratio:9 / 19.2; border-radius:44px; padding:10px;
  background:linear-gradient(160deg,#2a2a2e,#0b0b0c); box-shadow:0 50px 110px -40px #000, inset 0 0 0 1px rgba(255,255,255,.08);
}
.kz-scr{
  position:relative; height:100%; border-radius:35px; overflow:hidden; background:#000; color:#fff;
  font-family:-apple-system,"SF Pro Text","Segoe UI",system-ui,sans-serif; font-size:13px;
  display:flex; flex-direction:column;
}
.kz-top{ padding:16px 16px 8px; }
.kz-back{ font-size:12px; color:rgba(235,235,245,.6); }
.kz-top b{ display:block; font-family:"Iowan Old Style",Georgia,serif; font-weight:600; font-size:24px; margin-top:6px; letter-spacing:.01em; }
.kz-top small{ display:block; color:rgba(235,235,245,.6); font-size:11.5px; }
.kz-bar{ display:flex; gap:6px; margin-top:10px; }
.kz-bar span{ padding:5px 10px; border-radius:100px; border:.5px solid rgba(255,255,255,.12); font-size:10.5px; color:rgba(235,235,245,.75); }
.k-home{ padding:6px 14px; display:grid; gap:7px; transition:opacity .4s ease; }
/* hidden by visibility, not display: it fades, and its image keeps a box */
.kz-scr{ position:relative; }
.sxi__pane[data-step="chat"] .k-home{ position:absolute; left:0; right:0; visibility:hidden; opacity:0; pointer-events:none; }
.kz-hello{ display:grid; justify-items:center; text-align:center; gap:6px; margin:10px 0 8px; }
.kz-mark{ width:42px; height:42px; border-radius:12px; overflow:hidden; background:#1c1c1e; }
.kz-mark img, .ez-mark img, .lz-mark img, .lz-big img, .gz-mark img{ width:100%; height:100%; object-fit:cover; display:block; }
.kz-hello b{ font-size:16px; }
.kz-hello p{ margin:0; font-size:11px; line-height:1.45; color:rgba(235,235,245,.6); }
.kz-sec{ font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:rgba(235,235,245,.3); margin-top:4px; }
.kz-chip{ display:block; padding:9px 11px; border-radius:13px; background:#0e0e10; border:.5px solid rgba(255,255,255,.09); font-size:11.5px; }
.kz-thread{ flex:1; padding:6px 16px; display:flex; flex-direction:column; gap:10px; overflow:hidden; }
.kz-me{ align-self:flex-end; max-width:84%; background:rgba(118,118,128,.24); border-radius:18px 18px 6px 18px; padding:9px 13px; font-size:12px; }
.kz-me:empty, .kz-me span:empty{ min-height:0; }
.kz-work{ display:flex; align-items:center; gap:8px; font-size:10.5px; color:rgba(235,235,245,.6); }
.kz-ring{ position:relative; width:17px; height:17px; flex:none; color:rgba(235,235,245,.8); }
.kz-ring b{ position:absolute; inset:2px; border:1.4px solid currentColor; border-radius:50%; opacity:.16; animation:kz-ripple 1.55s ease-out infinite; }
.kz-ring b:nth-child(2){ animation-delay:.45s; } .kz-ring b:nth-child(3){ animation-delay:.9s; }
@keyframes kz-ripple{ 0%{ transform:scale(.42); opacity:.72; } 82%,100%{ transform:scale(1.05); opacity:.08; } }
.kz-work b{ font-weight:450; }
.kz-it{ font-size:12px; line-height:1.6; color:#fff; }
.kz-it strong{ font-weight:650; }
.kz-it:empty{ display:none; }
.kz-card{ width:88%; background:#0e0e10; border:.5px solid rgba(255,255,255,.09); border-radius:16px; padding:12px; }
.kz-card-t{ display:flex; align-items:center; gap:8px; font-weight:600; font-size:12.5px; margin-bottom:6px; }
.kz-card-r{ font-size:11.5px; color:rgba(235,235,245,.6); }
.kz-card-a{ display:flex; gap:7px; margin-top:10px; }
.kz-card-a span{ flex:1; text-align:center; padding:8px; border-radius:11px; font-size:11.5px; font-weight:600; background:rgba(118,118,128,.24); }
.kz-card-a span:last-child{ background:#fff; color:#000; }
.kz-comp{ margin:8px 12px 14px; display:flex; align-items:center; gap:8px; padding:7px 7px 7px 12px; border-radius:22px; background:#0e0e10; border:.5px solid rgba(255,255,255,.09); color:rgba(235,235,245,.4); }
.kz-comp em{ flex:1; font-style:normal; font-size:11.5px; }
.kz-send{ width:28px; height:28px; border-radius:50%; background:#fff; color:#000; display:grid; place-items:center; font-size:11px; }

/* ── VANTAGE: web/styles.css tokens ── */
.vz-win{
  width:min(560px,100%); border-radius:12px; overflow:hidden; background:#0a0d14; color:#e2e6ee;
  border:1px solid #1e2532; box-shadow:0 50px 110px -40px #000;
  font-family:"Inter","Segoe UI",system-ui,sans-serif; font-size:12.5px;
}
.vz-head{ display:flex; justify-content:space-between; align-items:center; padding:10px 14px; border-bottom:1px solid #1e2532; background:#0f131c; }
.vz-head span{ font-weight:600; letter-spacing:.12em; font-size:11px; }
.vz-head em{ font-style:normal; font-size:11px; color:#8b94a6; padding:3px 9px; border:1px solid #2b3444; border-radius:6px; }
.vz-body{ padding:14px; display:grid; gap:10px; min-height:520px; align-content:start; }
.vz-me{ justify-self:end; background:#141926; border:1px solid #1e2532; border-radius:10px; padding:8px 12px; }
.v-prog{ border:1px solid #1e2532; border-radius:10px; background:#0f131c; }
.v-prog-h{ display:flex; align-items:center; gap:8px; padding:8px 12px; color:#8b94a6; font-size:11.5px; border-bottom:1px solid #171c27; }
.v-pulse{ width:7px; height:7px; border-radius:50%; background:#3b82f6; box-shadow:0 0 0 4px rgba(59,130,246,.12); animation:sx-breathe 2.2s ease-in-out infinite; }
@keyframes sx-breathe{ 0%,100%{ opacity:.5; transform:scale(.85); } 50%{ opacity:1; transform:scale(1.1); } }
.v-prog ol{ list-style:none; margin:0; padding:6px 0 8px; columns:2; column-gap:6px; }
.v-step{ display:flex; align-items:center; gap:8px; padding:3px 12px; color:#5d6678; font-size:11.5px; opacity:0; transition:opacity .3s ease, color .3s ease; break-inside:avoid; }
.v-step::before{ content:""; width:14px; height:14px; border-radius:50%; flex:none; background:#1b2230; }
.v-step.in{ opacity:1; }
.v-step.live{ color:#e2e6ee; }
.v-step.live::before{ background:rgba(59,130,246,.12); box-shadow:0 0 0 3px rgba(59,130,246,.12), inset 0 0 0 4px #3b82f6; }
.v-step.done{ color:#8b94a6; }
.v-step.done::before{ background:#1b2230; box-shadow:inset 0 0 0 4px #5d6678; }
.v-step.k-agent{ font-weight:560; }
.v-desk{ border:1px solid #1e2532; border-radius:10px; overflow:hidden; }
.v-desk-h{ padding:8px 12px; background:#0f131c; font-size:11.5px; color:#e2e6ee; }
.v-reps{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:#171c27; }
.v-rep{ background:#0f131c; padding:9px 10px; opacity:0; transform:translateY(6px); transition:opacity .4s ease, transform .4s ease; }
.v-rep.in{ opacity:1; transform:none; }
.v-rep b{ display:block; font-weight:500; font-size:10.5px; color:#e2e6ee; margin-bottom:6px; }
.v-rep i{ display:block; height:7px; border-radius:4px; background:linear-gradient(90deg,#1b2230,#2b3444,#1b2230); background-size:200% 100%; animation:sx-shimmer 2s linear infinite; }
@keyframes sx-shimmer{ 0%{ background-position:200% 0; } 100%{ background-position:-200% 0; } }
@media (max-width:520px){ .v-prog ol{ columns:1; } .v-reps{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* ── Education Partners: web/styles.css, cream glass and navy ── */
.ez-panel{
  width:min(440px,100%); border-radius:18px; overflow:hidden; color:#16304f;
  background:linear-gradient(180deg, rgba(255,255,255,.86), rgba(251,250,247,.92));
  box-shadow:0 50px 110px -40px #000, 0 0 0 1px rgba(22,48,79,.1);
  font-family:"Inter","Segoe UI",system-ui,sans-serif; font-size:13px;
}
.ez-head{ display:flex; align-items:center; gap:10px; padding:13px 15px; border-bottom:1px solid rgba(22,48,79,.08); }
.ez-mark{ width:27px; height:27px; border-radius:8px; overflow:hidden; background:#000; }
.ez-head strong{ display:block; font-size:14px; font-weight:600; }
.ez-head small{ display:block; font-size:11px; color:#61707f; }
.ez-body{ padding:14px 15px; display:grid; gap:10px; min-height:500px; align-content:start; }
.ez-me{ justify-self:end; background:linear-gradient(180deg,#2c5382,#16304f); color:#fff; border-radius:17px 17px 5px 17px; padding:9px 14px; font-size:13px; max-width:84%; }
.ez-steps{ display:grid; gap:4px; }
.e-step{ display:flex; align-items:center; gap:8px; font-size:12px; color:#61707f; opacity:0; transform:translateY(4px); transition:opacity .35s ease, transform .35s ease; }
.e-step::before{ content:""; width:12px; height:12px; border-radius:50%; flex:none; border:1.5px solid rgba(22,48,79,.25); }
.e-step.in{ opacity:1; transform:none; }
.e-step.live{ color:#16304f; }
.e-step.live::before{ border-color:#2c5382; border-top-color:transparent; animation:sx-spin .8s linear infinite; }
.e-step.done::before{ background:#2c5382; border-color:#2c5382; }
@keyframes sx-spin{ to{ transform:rotate(360deg); } }
.e-ans{ background:#fbfaf7; border:1px solid rgba(22,48,79,.08); border-radius:17px 17px 17px 5px; padding:12px 14px; display:grid; gap:10px; box-shadow:0 6px 22px rgba(22,48,79,.08); }
.e-row{ display:grid; gap:5px; opacity:0; transform:translateY(5px); transition:opacity .4s ease, transform .4s ease; }
.e-row.in{ opacity:1; transform:none; }
.e-row b{ font-size:12px; font-weight:600; }
.e-row i{ display:block; height:8px; border-radius:5px; background:rgba(22,48,79,.09); }
.e-row i.s{ width:62%; }
.e-note{ font-size:11.5px; color:#2c5382; padding-top:8px; border-top:1px dashed rgba(22,48,79,.15); }

/* ── GMC Hub: shadcn tokens, light, primary #2a5ce4 ── */
.gz-panel{
  width:min(470px,100%); border-radius:14px; overflow:hidden; background:#fff; color:#0f172a;
  box-shadow:0 50px 110px -40px #000, 0 0 0 1px rgba(15,23,42,.08);
  font-family:"Inter","Segoe UI",system-ui,sans-serif; font-size:13px;
}
.gz-head{ display:flex; align-items:center; gap:10px; padding:12px 14px; border-bottom:1px solid #e5e7eb; }
.gz-mark{ width:26px; height:26px; border-radius:7px; overflow:hidden; }
.gz-head b{ font-weight:600; font-size:14px; }
.gz-body{ padding:14px; display:grid; gap:10px; min-height:500px; align-content:start; background:#fafafa; }
.gz-me{ justify-self:end; background:#2a5ce4; color:#fff; border-radius:14px 14px 4px 14px; padding:9px 13px; max-width:86%; }
.g-route{ display:inline-flex; gap:6px; align-items:center; font-size:11px; color:#64748b; }
.g-route b{ font-weight:600; color:#2a5ce4; background:rgba(42,92,228,.08); padding:2px 8px; border-radius:100px; }
.g-stages{ display:flex; gap:6px; flex-wrap:wrap; }
.g-stage{ font-size:11px; padding:3px 9px; border-radius:100px; border:1px solid #e5e7eb; color:#94a3b8; background:#fff; opacity:0; transition:opacity .3s ease, color .3s ease, border-color .3s ease; }
.g-stage.in{ opacity:1; color:#334155; border-color:#cbd5e1; }
.g-stage.done{ color:#2a5ce4; border-color:rgba(42,92,228,.35); }
.g-card{ border:1px solid #e5e7eb; border-radius:12px; overflow:hidden; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.05); }
.g-card header{ display:flex; gap:9px; align-items:flex-start; padding:10px 14px; border-bottom:1px solid rgba(229,231,235,.6); background:rgba(245,158,11,.05); }
.g-card header i{ font-style:normal; color:#d97706; }
.g-card header b{ display:block; font-weight:600; font-size:13px; }
.g-card header small{ display:block; font-size:11.5px; color:#64748b; }
.g-card dl{ margin:0; }
.g-card dl > div{ display:grid; grid-template-columns:5.5rem 1fr; gap:10px; padding:8px 14px; border-top:1px solid rgba(229,231,235,.5); align-items:center; }
.g-card dl > div:first-child{ border-top:0; }
.g-card dt{ font-size:11.5px; color:#64748b; font-weight:500; }
.g-card dd{ margin:0; }
.g-card dd i{ display:block; height:8px; border-radius:4px; background:#e2e8f0; }
.g-card dd i.s{ width:55%; }
.g-card footer{ display:flex; justify-content:flex-end; gap:8px; padding:10px 14px; border-top:1px solid rgba(229,231,235,.6); }
.g-deny{ padding:6px 12px; border-radius:8px; border:1px solid #e5e7eb; font-size:12px; font-weight:500; box-shadow:0 0 0 2px rgba(42,92,228,.35); }
.g-go{ padding:6px 12px; border-radius:8px; background:#2a5ce4; color:#fff; font-size:12px; font-weight:500; }
.g-out{ display:flex; align-items:center; gap:8px; margin:0; padding:8px 12px; border-radius:9px; border:1px solid rgba(16,185,129,.3); background:rgba(16,185,129,.05); color:#047857; font-size:12px; }
.g-out i{ font-style:normal; }
.g-out u{ margin-left:auto; text-underline-offset:2px; }

/* ── Lead Finder: web/syrix.css, the docked dark panel ── */
.lz-panel{
  width:min(440px,100%); height:600px; border-radius:14px; overflow:hidden; display:flex; flex-direction:column;
  background:#0b0d12; color:#e9ecf2; box-shadow:0 50px 110px -40px #000, 0 0 0 1px rgba(255,255,255,.06);
  font-family:"Inter","Segoe UI",system-ui,sans-serif; font-size:13px;
}
.lz-head{ display:flex; align-items:center; gap:12px; padding:13px 14px; border-bottom:1px solid rgba(255,255,255,.08); background:linear-gradient(180deg,#151923,#0b0d12); }
.lz-mark{ width:34px; height:34px; border-radius:11px; overflow:hidden; box-shadow:0 0 0 1px rgba(255,255,255,.06), 0 6px 18px rgba(0,0,0,.4); }
.lz-head b{ display:block; font-weight:700; letter-spacing:2.4px; font-size:14px; }
.lz-head small{ display:block; color:#9aa3b2; font-size:11.5px; }
.lz-body{ flex:1; overflow:hidden; padding:16px 14px 8px; position:relative; }
.lz-empty{ text-align:center; display:grid; justify-items:center; gap:8px; }
.sxi__pane[data-step="chat"] .lz-empty{ position:absolute; left:14px; right:14px; visibility:hidden; opacity:0; pointer-events:none; }
.lz-big{ width:72px; height:72px; border-radius:18px; overflow:hidden; box-shadow:0 10px 40px rgba(227,196,107,.12); }
.lz-empty h4{ margin:6px 0 0; font-size:18px; font-weight:600; }
.lz-empty p{ margin:0 0 6px; color:#9aa3b2; font-size:12px; max-width:320px; line-height:1.5; }
.lz-chip{ width:100%; text-align:left; padding:9px 11px; border-radius:12px; border:1px solid rgba(255,255,255,.08); background:#12151c; font-size:12px; }
.lz-thread{ display:grid; gap:10px; }
.lz-me{ justify-self:end; background:#2a3142; border-radius:16px 16px 4px 16px; padding:8px 12px; max-width:86%; }
.l-step{ display:flex; align-items:center; gap:8px; font-size:11.5px; color:#9aa3b2; opacity:0; transition:opacity .3s ease; }
.l-step::before{ content:""; width:10px; height:10px; border-radius:50%; flex:none; border:1.5px solid rgba(227,196,107,.35); }
.l-step.in{ opacity:1; }
.l-step.live::before{ border-color:#e3c46b; border-top-color:transparent; animation:sx-spin .8s linear infinite; }
.l-step.done::before{ background:#e3c46b; border-color:#e3c46b; }
.lz-it{ line-height:1.62; font-size:12.5px; }
.lz-it b{ color:#fff; }
.lz-comp{ margin:8px 12px 12px; display:flex; align-items:center; gap:8px; padding:8px 8px 8px 12px; border-radius:14px; border:1px solid rgba(227,196,107,.4); color:#9aa3b2; }
.lz-comp em{ flex:1; font-style:normal; font-size:12px; }
.lz-comp span{ width:28px; height:28px; border-radius:9px; background:#e3c46b; color:#0b0d12; display:grid; place-items:center; font-weight:700; }

@media (prefers-reduced-motion:reduce){
  .sxi__pane [data-show]{ transition:none; }
  .kz-ring b, .v-pulse, .v-rep i, .e-step.live::before, .l-step.live::before{ animation:none; }
}

/* ─────────── the particle marks, given an aura ───────────
   A field of soft colour behind each pinned mark, wider than the canvas
   can be, drifting slowly. The canvas draws the close light; this is the
   light that reaches the edges of the screen. */
.pcl__pin::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background-size:130% 130%;
  background:
    radial-gradient(38% 44% at 50% 56%, rgba(203,169,107,.13), transparent 70%),
    radial-gradient(30% 36% at 30% 62%, rgba(70,120,255,.10), transparent 72%),
    radial-gradient(28% 34% at 72% 46%, rgba(242,224,187,.07), transparent 72%);
  animation:sx-drift 26s ease-in-out infinite alternate;
}
.pcl--syx .pcl__pin::before{
  background:
    radial-gradient(38% 44% at 50% 52%, rgba(233,201,140,.13), transparent 70%),
    radial-gradient(32% 38% at 28% 58%, rgba(150,132,255,.13), transparent 72%),
    radial-gradient(30% 36% at 74% 48%, rgba(110,196,255,.10), transparent 72%);
  background-size:130% 130%;
}
.pcl__pin > *{ position:relative; z-index:1; }
@media (prefers-reduced-motion:reduce){ .pcl__pin::before{ animation:none; } }

.trio--lf{ grid-template-columns:repeat(2,minmax(0,1fr)); margin:0 0 clamp(50px,7vw,90px); }
@media (max-width:820px){ .trio--lf{ grid-template-columns:minmax(0,1fr); } }

/* Model names like nemotron-3-super-120b have no break opportunity, and on a
   narrow card one of them pushed the whole page sideways. */
.rcard, .rcard h4, .rcard p, .rcard code{ overflow-wrap:anywhere; min-width:0; }
/* clip, not hidden: hidden would make the section a scroll container and
   stop the pin inside it sticking */
.sxa{ overflow-x:clip; }

/* No hard edges where light meets the end of its box. The aura's pinned
   panel fades out at its foot as it scrolls away, and the particle canvases
   are feathered top and bottom so a glow or a drifting point is never cut
   by a straight line. */
.sxa__pin{
  -webkit-mask-image:linear-gradient(180deg, #000 0, #000 78%, transparent 100%);
  mask-image:linear-gradient(180deg, #000 0, #000 78%, transparent 100%);
}
.pcl__cv{
  -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 9%, #000 88%, transparent 100%);
  mask-image:linear-gradient(180deg, transparent 0, #000 9%, #000 88%, transparent 100%);
}