/* Studio chrome. Deliberately separate from the slide systems: the page borrows
   AIVM's palette but none of its layout code, so nothing here can leak into a
   rendered slide and quietly change what ships. */

@font-face{font-family:Studio;src:url(assets/core/Outfit.woff2) format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:StudioMono;src:url(assets/core/GeistMono.woff2) format('woff2');font-weight:100 900;font-display:swap}

:root{
  --ink:#080B0D;
  --page:#0B0F11;
  --panel:#12181B;
  --panel2:#171E22;
  --line:rgba(255,255,255,.085);
  --line2:rgba(255,255,255,.16);
  --text:#EEF4F6;
  --dim:rgba(238,244,246,.62);
  --faint:rgba(238,244,246,.58);
  --cyan:#5AD1E6;
  --r:10px;
  --bar:58px;
  --announce:36px;
  --pad:clamp(16px,4vw,40px);
  --ease:cubic-bezier(.22,1,.36,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--announce) + var(--bar) + 16px);
  overflow-x:clip}
body{background:var(--page);color:var(--text);font-family:Studio,system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;padding-top:calc(var(--announce) + var(--bar));overflow-x:hidden}
code,pre,.mono{font-family:StudioMono,ui-monospace,SFMono-Regular,monospace}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
::selection{background:rgba(90,209,230,.28)}

/* One visible focus ring for everything, so nothing depends on the UA default
   that other rules here switch off. */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--cyan);outline-offset:2px;border-radius:6px}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;z-index:100;padding:11px 18px;border-radius:9px;
  background:var(--cyan);color:var(--ink);font-weight:600;transition:top .16s}
.skip:focus{top:calc(var(--announce) + 10px)}

/* ───────── bar ───────── */
.bar{position:fixed;top:var(--announce);left:0;right:0;height:var(--bar);z-index:60;
  display:flex;align-items:center;gap:20px;padding:0 var(--pad);
  background:rgba(11,15,17,.86);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.brandmark{display:flex;align-items:center;gap:10px;flex:none}

.brandmark span{color:var(--text);font-weight:600;letter-spacing:-.012em;font-size:15.5px;white-space:nowrap}
.jump{display:flex;gap:22px;margin-left:8px;margin-right:auto;overflow-x:auto;scrollbar-width:none;min-width:0;flex:0 1 auto}
.jump::-webkit-scrollbar{display:none}
.jump a{font-size:14px;color:var(--faint);white-space:nowrap;transition:color .18s}
.jump a:hover{color:var(--text)}

/* ───────── shared type ───────── */
.eyebrow{font-size:11.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--cyan);margin-bottom:16px}
h1{font-size:clamp(32px,5.4vw,60px);font-weight:300;line-height:1.04;letter-spacing:-.038em;text-wrap:balance}
h2{font-size:clamp(25px,3.6vw,40px);font-weight:300;line-height:1.08;letter-spacing:-.032em;text-wrap:balance}
h1 em,h2 em{font-style:normal;font-weight:600}
.say{margin-top:18px;font-size:16.5px;line-height:1.65;color:var(--dim);max-width:62ch;text-wrap:pretty}
.say.big{font-size:clamp(17px,1.45vw,19.5px);line-height:1.58;max-width:56ch}

.solid{display:inline-block;padding:12px 22px;border-radius:9px;font-size:15px;font-weight:600;
  background:var(--cyan);color:var(--ink);transition:filter .18s}
.solid:hover{filter:brightness(1.08)}
.solid[disabled]{opacity:.5;cursor:progress}
.ghost{display:inline-block;padding:11px 21px;border:1px solid var(--line2);border-radius:9px;font-size:15px;
  color:var(--dim);transition:border-color .18s,color .18s}
.ghost:hover{border-color:var(--text);color:var(--text)}
.tiny{padding:7px 14px;font-size:13px;border-radius:8px}

/* ───────── hero ───────── */
.hero{max-width:1240px;margin:0 auto;padding:clamp(56px,10vw,124px) var(--pad) clamp(44px,6vw,80px)}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.facts{list-style:none;display:flex;flex-wrap:wrap;gap:clamp(24px,5vw,64px);margin-top:clamp(40px,6vw,72px);
  padding-top:28px;border-top:1px solid var(--line)}
.facts li{display:flex;flex-direction:column;gap:4px}
.facts b{font-size:clamp(26px,3.4vw,36px);font-weight:300;letter-spacing:-.03em;color:var(--cyan)}
.facts span{font-size:13px;color:var(--faint)}

/* ───────── bands ───────── */
.band{max-width:1240px;margin:0 auto;padding:clamp(60px,8.5vw,104px) var(--pad) clamp(52px,7vw,88px);
  border-top:1px solid var(--line)}
.band.alt{background:linear-gradient(180deg,rgba(255,255,255,.016),transparent)}
.head-row{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;flex-wrap:wrap;margin-bottom:38px}
.head-row .say{margin-top:14px}

.picker{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.pick{padding:9px 17px;border:1px solid var(--line);border-radius:99px;font-size:13.5px;color:var(--faint);
  transition:all .16s;display:flex;align-items:baseline;gap:9px;max-width:100%}
.pick b{color:var(--dim);font-weight:600;transition:color .16s}
.pick.is-on b{color:var(--ink)}
.pick:hover{border-color:var(--line2);color:var(--text)}
.pick.is-on{background:var(--cyan);border-color:var(--cyan);color:var(--ink);font-weight:600}
.pick em{font-style:normal;font-size:11.5px;opacity:.7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pick.is-on em{opacity:.72}

/* full-size viewer for carousels that predate the current engine */
.lightbox[hidden]{display:none}
.lightbox{position:fixed;inset:0;z-index:95;background:rgba(4,7,9,.9);backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;padding:28px;animation:fade .2s both}
.lightbox img{max-height:88vh;max-width:100%;border-radius:8px;box-shadow:0 30px 90px rgba(0,0,0,.7)}
.lightbox .close{position:absolute;top:20px;right:24px}

/* ───────── filmstrip ───────── */
/* A manual, snapping filmstrip rather than an auto-rotating hero carousel. The
   research on auto-advance is unambiguous: it takes control away and people
   scroll past it. Motion survives here only because this page gets narrated
   live, and any interaction at all stops it for good. */
.deckcount{font-family:StudioMono,monospace;font-size:13px;color:var(--faint);white-space:nowrap}
.deckcount span:first-child{color:var(--text)}

.filmstrip-wrap{position:relative}
.filmstrip{list-style:none;display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;padding:4px 0 14px;scrollbar-width:none;outline:none}
.filmstrip::-webkit-scrollbar{display:none}
.filmstrip:focus-visible{box-shadow:0 0 0 2px var(--cyan);border-radius:12px}
.filmstrip li{flex:0 0 auto;width:clamp(210px,23vw,290px);scroll-snap-align:center}
.filmstrip li > button{display:block;width:100%;padding:0;text-align:left;border-radius:var(--r)}
.filmstrip figure{position:relative;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  background:var(--panel);aspect-ratio:4/5;transition:border-color .2s,transform .3s var(--ease),opacity .3s}
.filmstrip li[data-live="0"] figure{opacity:.42;transform:scale(.965)}
.filmstrip li[data-live="1"] figure{border-color:var(--line2)}
.filmstrip img{width:100%;height:100%;object-fit:cover;display:block}
.filmstrip figcaption{position:absolute;left:0;right:0;bottom:0;padding:30px 12px 11px;
  background:linear-gradient(0deg,rgba(4,7,9,.92),transparent);
  display:flex;justify-content:space-between;gap:8px;font-size:11.5px;color:var(--dim)}
.filmstrip figcaption b{color:var(--text);font-weight:500}
.tagbrand{color:var(--cyan);font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-size:10.5px}

.arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  width:42px;height:42px;border-radius:99px;border:1px solid var(--line2);
  background:rgba(11,15,17,.9);backdrop-filter:blur(8px);color:var(--text);
  display:flex;align-items:center;justify-content:center;transition:background .18s,opacity .18s}
.arrow svg{width:20px;height:20px}
.arrow:hover{background:var(--panel2)}
.arrow.prev{left:-8px}
.arrow.next{right:-8px}
.arrow[disabled]{opacity:.3;cursor:default}
.arrow[disabled] svg{opacity:.6}

.strip-foot{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:6px}
.dots{display:flex;gap:7px;flex-wrap:wrap}
.dots button{width:7px;height:7px;border-radius:99px;background:var(--line2);transition:background .2s,width .2s}
.dots button.is-on{background:var(--cyan);width:20px}
.caption{font-size:13.5px;color:var(--faint);max-width:60ch}
.caption b{color:var(--dim);font-weight:500}

/* ───────── studio ───────── */
.studio{display:grid;grid-template-columns:112px minmax(0,1fr) 330px;gap:18px;align-items:start}
.rail{display:flex;flex-direction:column;gap:8px;max-height:640px;overflow-y:auto;padding-right:2px}
.rail::-webkit-scrollbar{width:4px}
.rail::-webkit-scrollbar-thumb{background:var(--line2);border-radius:9px}
.thumb{display:block;width:100%;padding:0;border:1px solid var(--line);border-radius:7px;overflow:hidden;
  background:var(--panel);aspect-ratio:4/5;cursor:pointer;position:relative;flex:none;transition:border-color .18s}
.thumb.is-on{border-color:var(--cyan);box-shadow:0 0 0 1px var(--cyan)}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.thumb span{position:absolute;top:4px;left:6px;font-size:10px;color:var(--faint);
  background:rgba(4,7,9,.7);padding:1px 5px;border-radius:4px}

.stage{min-width:0}
.stagebar{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.spacer{flex:1}
.pill{padding:5px 12px;border:1px solid var(--line);border-radius:99px;font-size:12.5px;color:var(--dim)}
.canvas{border:1px solid var(--line);border-radius:var(--r);background:var(--ink);padding:20px;
  display:flex;justify-content:center;overflow:hidden}
.frame{width:100%;max-width:460px;aspect-ratio:var(--ar,4/5);position:relative;border-radius:4px;
  overflow:hidden;box-shadow:0 24px 70px rgba(0,0,0,.6)}
.frame iframe{position:absolute;top:0;left:0;border:0;transform-origin:0 0;background:#000}
.note{margin-top:11px;font-size:12.5px;color:var(--faint)}

.switch{display:flex;gap:2px;padding:3px;border:1px solid var(--line);border-radius:99px;flex:none}
.switch button{padding:6px 14px;border-radius:99px;font-size:12.5px;font-weight:500;color:var(--faint);
  white-space:nowrap;transition:color .18s,background .18s}
.switch button.is-on{color:var(--ink);background:var(--cyan);font-weight:600}

/* ───────── inspector ───────── */
.inspector{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);padding:18px;
  max-height:640px;overflow-y:auto}
.inspector::-webkit-scrollbar{width:5px}
.inspector::-webkit-scrollbar-thumb{background:var(--line2);border-radius:9px}
.grp{margin-bottom:19px}
.grp:last-child{margin-bottom:4px}
.grp > label,.glabel{display:block;font-size:11px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--faint);margin-bottom:9px}
.field{width:100%;background:var(--ink);border:1px solid var(--line);border-radius:7px;padding:9px 11px;
  font-size:13.5px;color:var(--text);line-height:1.45;transition:border-color .18s}
.field:focus{outline:none;border-color:var(--cyan)}
textarea.field{resize:vertical;min-height:62px;font-family:StudioMono,monospace;font-size:12.5px}
select.field{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--faint) 50%),linear-gradient(135deg,var(--faint) 50%,transparent 50%);
  background-position:calc(100% - 15px) 50%,calc(100% - 10px) 50%;background-size:5px 5px;background-repeat:no-repeat}
.row{display:flex;gap:8px}
.row > *{flex:1;min-width:0}
.hint{margin-top:7px;font-size:11.5px;color:var(--faint);line-height:1.45}
.hint b{color:var(--dim);font-weight:500}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{padding:5px 11px;border:1px solid var(--line);border-radius:99px;font-size:12px;color:var(--dim);transition:all .16s}
button.chip:hover{border-color:var(--line2);color:var(--text)}
.chip.is-on{background:var(--cyan);border-color:var(--cyan);color:var(--ink);font-weight:600}
.slider{width:100%;accent-color:var(--cyan);cursor:pointer}
.val{font-size:11.5px;color:var(--faint);font-family:StudioMono,monospace}
.between{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:9px}

/* ───────── how it works ───────── */
.steps{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:18px;margin-top:38px}
.steps li{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);padding:24px 22px 26px}
.steps .num{font-family:StudioMono,monospace;font-size:12px;color:var(--cyan);display:block;margin-bottom:12px}
.steps h3{font-size:17px;font-weight:600;letter-spacing:-.012em;margin-bottom:9px}
.steps p{font-size:14.5px;line-height:1.6;color:var(--dim);text-wrap:pretty}
.steps p b{color:var(--text);font-weight:600}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:16px;align-items:start}
.grid.two{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.grid.three{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.card{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);padding:24px 22px 26px}
.card h3,.card h4{font-size:15.5px;font-weight:600;letter-spacing:-.01em;margin-bottom:9px;display:flex;align-items:center;gap:9px}
.card p{font-size:14.5px;line-height:1.6;color:var(--dim);text-wrap:pretty}
.step-dot{width:22px;height:22px;border-radius:99px;background:var(--cyan);color:var(--ink);
  font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:none}

code{background:var(--ink);border:1px solid var(--line);border-radius:4px;padding:1px 5px;font-size:.88em}
.code{background:var(--ink);border:1px solid var(--line);border-radius:8px;padding:13px;font-size:12px;
  line-height:1.62;color:var(--dim);overflow-x:auto;white-space:pre-wrap;word-break:break-word;margin-top:12px}
.sheetInner .code{white-space:pre;word-break:normal}
.swatches{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.sw{width:30px;height:30px;border-radius:7px;border:1px solid var(--line2)}

.install-grid{margin-top:32px}
.honest{margin-top:44px;padding:22px;border:1px solid var(--line);border-radius:var(--r);
  background:rgba(90,209,230,.045)}
.honest h3{font-size:15.5px;font-weight:600;margin-bottom:9px;color:var(--cyan)}
.honest p{font-size:14px;line-height:1.6;color:var(--dim);max-width:80ch}

.foot{max-width:1240px;margin:0 auto;padding:32px var(--pad) 56px;border-top:1px solid var(--line)}
.foot p{font-size:13px;color:var(--faint)}
.foot a{color:var(--dim)}
.foot a:hover{color:var(--text)}

/* ───────── spec sheet ───────── */
.sheet[hidden]{display:none}
.sheet{position:fixed;inset:0;z-index:90;background:rgba(4,7,9,.8);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;padding:24px;animation:fade .2s both}
@keyframes fade{from{opacity:0}to{opacity:1}}
.sheetInner{width:min(720px,100%);max-height:80vh;display:flex;flex-direction:column;
  border:1px solid var(--line2);border-radius:var(--r);background:var(--panel);overflow:hidden}
.sheetBar{display:flex;align-items:center;justify-content:space-between;padding:13px 15px;
  border-bottom:1px solid var(--line);font-size:14px;font-weight:600}
.sheetInner .code{margin:0;border:0;border-radius:0;overflow:auto;flex:1}

/* ───────── responsive ───────── */
@media (max-width:1140px){ .studio{grid-template-columns:94px minmax(0,1fr) 296px;gap:14px} }
@media (max-width:1020px){ .brandmark span{display:none} }
@media (max-width:960px){
  .studio{grid-template-columns:1fr}
  .rail{flex-direction:row;max-height:none;overflow-x:auto;padding-bottom:6px}
  .thumb{width:70px;flex:none}
  .inspector{max-height:none}
  .frame{max-width:380px}
  .arrow.prev{left:2px} .arrow.next{right:2px}
}
@media (max-width:760px){
  .frame{max-width:100%}
  .canvas{padding:10px}
  .stagebar{position:sticky;top:calc(var(--bar) + 6px);z-index:20;
    background:rgba(11,15,17,.92);backdrop-filter:blur(10px);
    margin:0 calc(var(--pad) * -1);padding:10px var(--pad);border-bottom:1px solid var(--line)}
  .inspector{padding:16px 14px}
  .grp{margin-bottom:16px}
  .pick{padding:8px 13px;font-size:13px}
  .pick em{display:none}
}
@media (max-width:640px){
  :root{--bar:54px}
  .hero .cta-row .solid,.hero .cta-row .ghost{flex:1;text-align:center}
  .facts{width:100%}
  .facts li{flex:1 1 40%}
  .arrow{width:38px;height:38px}
  .strip-foot{flex-direction:column;align-items:flex-start;gap:12px}
  .caption{font-size:13px}
  .jump{gap:16px}
  .jump a{font-size:13px}
  .bar > .solid.tiny{display:none}
  .brandmark span{display:none}
  .filmstrip li{width:min(74vw,270px)}
  .facts{gap:20px 28px}
  .canvas{padding:12px}
  .head-row{align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .filmstrip{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ═══════════════════════════════════════════════════════════════════════
   MOTION
   One reveal primitive drives the whole page: an element opts in with
   [data-reveal] and gets a delay through --d, so staggering a group is a
   loop rather than a stylesheet full of nth-child rules. Everything here is
   transform and opacity only, which the compositor can handle without
   touching layout, and all of it collapses under prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════════════ */

[data-reveal]{
  opacity:0;
  transform:translate3d(0, var(--rise, 22px), 0);
  transition:opacity .5s var(--ease) var(--d, 0s), transform .55s var(--ease) var(--d, 0s);
  will-change:opacity, transform;
}
[data-reveal].in{opacity:1;transform:none;will-change:auto}

/* The hero headline reveals a word at a time. Each word needs its own box to
   be transformable, and the line box has to keep working, so they are inline
   blocks inside a perspective parent. */
.hero h1{perspective:900px}
.word{display:inline-block;white-space:pre;
  opacity:0;transform:translate3d(0,.62em,0) rotateX(-52deg);
  transform-origin:50% 100%;
  transition:opacity .42s var(--ease) var(--d,0s), transform .5s var(--ease) var(--d,0s)}
.wordsIn .word{opacity:1;transform:none}

/* Numbers count up rather than appearing, so the eye is drawn along the row. */
.facts b{font-variant-numeric:tabular-nums}

/* Filmstrip depth. Distance from the centre of the strip drives scale and
   opacity, so the row reads as a physical rail instead of a list of boxes. */
.filmstrip li figure{
  transform:scale(var(--s,1)) translate3d(0,var(--y,0px),0);
  opacity:var(--o,1);
  transition:transform .42s var(--ease), opacity .42s var(--ease), border-color .2s;
}
.filmstrip li[data-live="0"] figure{opacity:var(--o,.42);transform:scale(var(--s,.965))}
.filmstrip li[data-live="1"] figure{border-color:var(--line2)}
.filmstrip li > button{transition:transform .3s var(--ease)}
.filmstrip li > button:hover{transform:translateY(-4px)}

/* Cards and steps lift a little on hover, enough to feel live and not enough
   to draw attention away from the copy. */
.card,.steps li{transition:transform .32s var(--ease), border-color .24s, background .24s}
.card:hover,.steps li:hover{transform:translateY(-3px);border-color:var(--line2)}

.pick,.chip,.solid,.ghost,.thumb{transition:transform .2s var(--ease), background .18s,
  border-color .18s, color .18s, filter .18s, box-shadow .18s}
.pick:hover,.chip:hover{transform:translateY(-1px)}
.solid:active,.ghost:active,.pick:active,.chip:active{transform:translateY(0) scale(.98)}

/* The editor swaps its whole document on every edit. Fading the container
   rather than stacking two iframes keeps the swap smooth without the two
   loads racing each other. */
.frame{transition:opacity .22s var(--ease)}
.frame.swapping{opacity:.35}

/* Images arrive over the network, so give them somewhere to arrive into. */
.filmstrip figure,.thumb{background:
  linear-gradient(100deg, var(--panel) 30%, var(--panel2) 50%, var(--panel) 70%) var(--panel);
  background-size:220% 100%}
.filmstrip figure.loading,.thumb.loading{animation:shimmer 1.4s linear infinite}
@keyframes shimmer{from{background-position:120% 0}to{background-position:-120% 0}}
.filmstrip img,.thumb img{opacity:0;transition:opacity .45s var(--ease)}
.filmstrip img.ready,.thumb img.ready{opacity:1}

/* Which section you are in, in the top bar. */
.jump a{position:relative;padding-bottom:2px}
.jump a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1.5px;
  background:var(--cyan);transform:scaleX(0);transform-origin:0 50%;
  transition:transform .3s var(--ease)}
.jump a:hover::after,.jump a[aria-current="true"]::after{transform:scaleX(1)}
.jump a[aria-current="true"]{color:var(--text)}

@media (prefers-reduced-motion:reduce){
  [data-reveal],.word{opacity:1 !important;transform:none !important;transition:none !important}
  .filmstrip li figure,.card,.steps li,.filmstrip li > button{transform:none !important}
  .filmstrip figure.loading,.thumb.loading{animation:none}
  .filmstrip img,.thumb img{opacity:1}
}

/* ───────── hero art ─────────
   Three real slides, fanned. It is the work itself rather than an abstract
   graphic, which means the first thing anyone sees is the output rather than a
   claim about it. Each card drifts on its own cycle so the group never reads
   as one rigid block. */
.heroGrid{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr);gap:40px;align-items:center}
.heroCopy{min-width:0}
.heroArt{position:relative;height:clamp(340px,38vw,470px);perspective:1400px;overflow:visible}
.heroArt .hs{position:absolute;width:clamp(136px,15vw,192px);aspect-ratio:4/5;object-fit:cover;
  border-radius:12px;border:1px solid var(--line2);
  box-shadow:0 30px 70px rgba(0,0,0,.62);
  opacity:0;transform:translate3d(0,34px,0) scale(.94);
  transition:opacity .55s var(--ease) var(--d), transform .62s var(--ease) var(--d)}
.heroArt .hs1{left:-2%; top:20%; --d:.14s;rotate:-8deg;z-index:1}
.heroArt .hs2{left:31%; top:0%;  --d:.22s;rotate:1deg; z-index:3}
.heroArt .hs3{left:64%; top:24%; --d:.30s;rotate:9deg; z-index:2}
.loaded .heroArt .hs{opacity:1;transform:none}
.loaded .heroArt .hs1{animation:drift1 9s var(--ease) 1.4s infinite}
.loaded .heroArt .hs2{animation:drift2 11s var(--ease) 1.4s infinite}
.loaded .heroArt .hs3{animation:drift3 10s var(--ease) 1.4s infinite}
@keyframes drift1{0%,100%{transform:translateY(0) rotate(-8deg)}50%{transform:translateY(-13px) rotate(-9.5deg)}}
@keyframes drift2{0%,100%{transform:translateY(0) rotate(1deg)}50%{transform:translateY(-19px) rotate(2deg)}}
@keyframes drift3{0%,100%{transform:translateY(0) rotate(9deg)}50%{transform:translateY(-9px) rotate(7.5deg)}}

@media (max-width:1120px){ .heroArt .hs3{left:60%} }
@media (max-width:900px){
  .heroGrid{grid-template-columns:1fr;gap:34px}
  .heroArt{height:clamp(230px,52vw,320px);order:2}
  .heroArt .hs{width:clamp(122px,27vw,168px)}
}
@media (prefers-reduced-motion:reduce){
  .heroArt .hs{opacity:1 !important;transform:none !important;animation:none !important}
}

/* ───────── tag toolbar ─────────
   The spec stores markup, but nobody should have to type it. Selection plus a
   button, or the shortcut people already know from every other editor. */
.tagbar{display:flex;align-items:center;gap:6px;margin-bottom:8px;flex-wrap:wrap}
.tagbtn{padding:4px 10px;border:1px solid var(--line);border-radius:6px;
  font-size:11.5px;font-weight:600;color:var(--dim);letter-spacing:.01em;
  transition:border-color .16s,color .16s,background .16s,transform .16s}
.tagbtn:hover{border-color:var(--cyan);color:var(--cyan)}
.tagbtn:active{transform:scale(.95)}
.tagnote{margin-left:auto;font-size:10.5px;color:var(--faint)}
textarea.field.rich{font-family:Studio,system-ui,sans-serif;font-size:14px;line-height:1.4;min-height:74px}

/* ───────── hero caveat + the problem band ─────────
   The caveat used to be a paragraph competing with the value proposition. The
   research on hero copy is blunt: one or two sentences, everything else below
   the fold. It is a tag now, in the row where it is read as a label. */
.tag-proto{display:inline-flex;align-items:center;padding:11px 16px;border-radius:9px;
  border:1px dashed var(--line2);font-size:13px;color:var(--faint);white-space:nowrap}

.band.problem{background:linear-gradient(180deg,rgba(90,209,230,.028),transparent)}
.prob-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,64px);align-items:start}
.prob-note .say:first-child{margin-top:0}
@media (max-width:860px){ .prob-grid{grid-template-columns:1fr;gap:20px} }

/* ───────── brandmark ─────────
   Their mark, at the size their own site uses it, with a hairline separating it
   from the tool name so the two do not read as one wordmark. */
.aivmMark{height:19px;width:auto;display:block;flex:none}
.brandmark .sep{width:1px;height:17px;background:var(--line2);flex:none;margin:0 2px}

/* ═══════════════════════════════════════════════════════════════════════
   AIVM-INSPIRED CHROME
   Three things borrowed from aivm.io directly: the thin announcement strip
   above the nav, nav items living in a lit container rather than as bare
   links, and their asymmetric feature cards with a full-bleed image on top.
   ═══════════════════════════════════════════════════════════════════════ */

.announce{position:fixed;top:0;left:0;right:0;height:var(--announce);z-index:70;
  display:flex;align-items:center;justify-content:center;gap:14px;padding:0 16px;
  background:var(--ink);border-bottom:1px solid var(--line);
  font-size:12.5px;color:var(--faint);text-align:center}
.announce span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.announce a{color:var(--cyan);white-space:nowrap;transition:opacity .18s}
.announce a:hover{opacity:.75}
.announce a span{display:inline-block;transition:transform .22s var(--ease)}
.announce a:hover span{transform:translateX(3px)}

.progress{position:fixed;top:calc(var(--announce) + var(--bar) - 1px);left:0;height:1.5px;width:0;
  background:linear-gradient(90deg,var(--cyan),#9FE8F8);z-index:71;
  box-shadow:0 0 10px rgba(90,209,230,.55);transition:width .08s linear}

/* nav items in a container, the way theirs sit */
.jump{gap:2px;padding:3px;border:1px solid var(--line);border-radius:99px;background:rgba(255,255,255,.018)}
.jump a{padding:7px 14px;border-radius:99px;font-size:13.5px;transition:color .18s,background .18s}
.jump a::after{display:none}
.jump a:hover{background:rgba(255,255,255,.05);color:var(--text)}
.jump a[aria-current="true"]{background:var(--panel2);color:var(--text)}

/* cards that follow the cursor with a soft light */
.lit{position:relative;isolation:isolate}
.lit::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%), rgba(90,209,230,.10), transparent 62%);
  opacity:0;transition:opacity .3s var(--ease);z-index:-1}
.lit:hover::before{opacity:1}

@media (max-width:640px){
  :root{--announce:32px}
  .announce{font-size:11.5px;gap:9px}
  .announce span{max-width:56vw}
  .jump{border:0;padding:0;background:none}
  .jump a{padding:6px 9px}
}
@media (prefers-reduced-motion:reduce){
  .progress{transition:none}
  .lit::before{display:none}
}

/* ───────── step cards, AIVM style ─────────
   Their feature cards carry a full-bleed visual on top with the label at the
   foot. Ours borrow the shape and fill it with the system's own objects, so
   the page explaining the pipeline is illustrated by the pipeline. */
.steps.aivm li{padding:0;overflow:hidden;display:flex;flex-direction:column}
.stepArt{position:relative;height:172px;overflow:hidden;flex:none;
  background:linear-gradient(168deg, var(--tileTop, #3266F2) 0%, #2E5EE8 55%, #1E2A44 100%)}
.stepArt::after{content:"";position:absolute;inset:0;
  background:linear-gradient(0deg, var(--panel) 2%, transparent 58%)}
.stepArt svg{position:absolute;left:50%;top:50%;width:112%;height:auto;
  transform:translate(-50%,-50%) scale(1);color:#fff;opacity:.9;
  transition:transform .55s var(--ease)}
/* each card crops its object differently, so four cards in a row never read as
   one repeated texture */
.steps.aivm li:nth-child(2) .stepArt svg{width:120%;top:44%}
.steps.aivm li:nth-child(3) .stepArt svg{width:132%;top:56%}
.steps.aivm li:nth-child(4) .stepArt svg{width:112%;top:47%}
.steps.aivm li:hover .stepArt svg{transform:translate(-50%,-50%) scale(1.07)}
.steps.aivm li:nth-child(2) .stepArt,
.steps.aivm li:nth-child(4) .stepArt{background:linear-gradient(168deg,#123A45 0%,#0C2A33 55%,#0E1417 100%)}
.steps.aivm li:nth-child(2) .stepArt svg,
.steps.aivm li:nth-child(4) .stepArt svg{color:#8FE0F2;opacity:.85}
.steps.aivm .num{padding:20px 22px 0}
.steps.aivm h3{padding:0 22px}
.steps.aivm p{padding:0 22px}
.steps.aivm .code,.steps.aivm .swatches,.steps.aivm .chips{margin:12px 22px 24px}

/* ───────── render / cells comparison ─────────
   The one technique the whole system rests on, made draggable. Static
   before-and-after images say the same thing, but nobody believes a claim about
   a conversion until they scrub it themselves. */
.compare{margin-top:48px}
.cmpTrack{position:relative;width:100%;aspect-ratio:16/8;border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;background:#000;cursor:ew-resize;user-select:none;touch-action:pan-y}
.cmpBase{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.cmpTop{position:absolute;inset:0;width:55%;overflow:hidden;
  background:linear-gradient(168deg,#2A5FE0 0%,#1E4BC4 55%,#10203E 100%)}
.cmpCells{position:absolute;inset:0}
.cmpCells svg{width:100%;height:100%;display:block;color:#fff;opacity:.92}
.cmpHandle{position:absolute;top:0;bottom:0;left:55%;width:2px;background:var(--cyan);
  transform:translateX(-1px);box-shadow:0 0 14px rgba(90,209,230,.7);cursor:ew-resize}
.cmpHandle span{position:absolute;top:50%;left:50%;width:38px;height:38px;border-radius:99px;
  transform:translate(-50%,-50%);background:var(--cyan);
  box-shadow:0 4px 18px rgba(0,0,0,.5);display:block}
.cmpHandle span{display:flex;align-items:center;justify-content:center;
  color:var(--ink);font-size:19px;font-weight:700;letter-spacing:-.05em}
.cmpHandle:focus-visible{outline:none}
.cmpHandle:focus-visible span{outline:2px solid #fff;outline-offset:3px}
.cmpTag{position:absolute;bottom:12px;padding:4px 10px;border-radius:99px;font-size:11px;
  font-weight:600;letter-spacing:.1em;text-transform:uppercase;background:rgba(4,7,9,.72);
  backdrop-filter:blur(6px);color:var(--text);pointer-events:none}
.cmpTagL{left:12px}
.cmpTagR{right:12px}
.compare figcaption{margin-top:14px;font-size:14px;line-height:1.6;color:var(--dim);max-width:66ch}
.compare figcaption b{color:var(--text);font-weight:600}
@media (max-width:640px){ .cmpTrack{aspect-ratio:4/3} }

/* ───────── the one paste ─────────
   The handover is a sentence, not a procedure. Anything that looks like a
   checklist invites someone to get step two wrong, so the manual route folds
   away behind a disclosure and the paste is the only thing on screen. */
.paste{border:1px solid rgba(90,209,230,.32);border-radius:var(--r);overflow:hidden;
  background:linear-gradient(180deg,rgba(90,209,230,.06),rgba(90,209,230,.01));margin-top:34px}
.pasteHead{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 16px;border-bottom:1px solid var(--line)}
.pasteLabel{font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan)}
.copyBtn{padding:6px 14px;border:1px solid var(--line2);border-radius:8px;font-size:12.5px;
  color:var(--dim);transition:all .16s}
.copyBtn:hover{border-color:var(--cyan);color:var(--cyan)}
.copyBtn.done{background:var(--cyan);border-color:var(--cyan);color:var(--ink);font-weight:600}
.pasteBody{margin:0;border:0;border-radius:0;background:transparent;padding:20px 18px;
  font-size:13.5px;line-height:1.75;color:var(--text);white-space:pre-wrap}
.paste .say{margin:0;padding:0 18px 20px;font-size:14.5px}

.byhand{margin-top:26px;border-top:1px solid var(--line);padding-top:22px}
.byhand summary{cursor:pointer;font-size:14.5px;color:var(--faint);list-style:none;
  display:inline-flex;align-items:center;gap:9px;transition:color .18s}
.byhand summary:hover{color:var(--text)}
.byhand summary::-webkit-details-marker{display:none}
.byhand summary::before{content:"+";font-family:StudioMono,monospace;color:var(--cyan);font-size:15px}
.byhand[open] summary::before{content:"−"}
.byhand .install-grid{margin-top:22px}

/* two pastes: set up once, then ask every time */
.pasteRow{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:16px;margin-top:34px}
.pasteRow .paste{margin-top:0}
.pasteNum{display:inline-flex;align-items:center;justify-content:center;width:19px;height:19px;
  border-radius:99px;background:var(--cyan);color:var(--ink);font-size:11px;font-weight:700;
  margin-right:8px;letter-spacing:0}
.pasteLabel{display:inline-flex;align-items:center}

/* the three generator routes */
.genNote{margin-top:32px;padding:24px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel)}
.genNote h3{font-size:16px;font-weight:600;margin-bottom:10px}
.genNote > p{font-size:14.5px;line-height:1.6;color:var(--dim);max-width:74ch}
.genRoutes{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin:18px 0 4px}
.genRoute{padding:14px 16px;border:1px solid var(--line);border-radius:9px;background:var(--ink)}
.genRoute b{display:block;font-size:14px;font-weight:600;color:var(--cyan);margin-bottom:5px}
.genRoute span{font-size:13px;line-height:1.5;color:var(--dim)}
.genNote .say{margin-top:14px;font-size:14px}