/* =====================================================================
   Mlgatee marketing site
   1 fonts · 2 tokens · 3 base · 4 type · 5 buttons · 6 header
   7 dark surfaces (lights, beam, grid, grain, horizon)
   8 hero · 9 desktop scene · 10 wall · 11 announce
   12 features + bento visuals · 13 dashboard · 14 minis
   15 cta + marquee · 16 pricing · 17 faq · 18 notebook panel · 19 footer
   20 inner pages · 21 motion utilities · 22 responsive · 23 reduced motion
   ===================================================================== */

/* 1 ─ fonts (Geist, SIL Open Font License) */
@font-face{font-family:'Geist';src:url('../assets/fonts/Geist-Variable.woff2') format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:'Geist Mono';src:url('../assets/fonts/GeistMono-Variable.woff2') format('woff2');font-weight:100 900;font-display:swap}

@property --a{syntax:'<angle>';inherits:false;initial-value:0deg}
@property --o{syntax:'<angle>';inherits:true;initial-value:-30deg}
@property --p{syntax:'<number>';inherits:false;initial-value:0}
@property --o2{syntax:'<angle>';inherits:true;initial-value:-30deg}

/* 2 ─ tokens */
:root{
  --night:#0c0926; --night-2:#140e3d; --night-3:#1e1557;
  --violet:#7b61ff; --violet-2:#a990ff; --violet-ink:#5136e8;
  --blue:#3d7bff; --azure:#64b5ff; --orchid:#c66cff; --rose:#ff78b9; --cyan:#62e2ff;
  --paper:#ffffff; --mist:#f6f5fb; --mist-2:#efedf7; --line:#e8e6f1; --line-2:#dbd8ea;
  --ink:#17142f; --ink-2:#423e60; --muted:#6f6b8a;
  --on-dark:#f5f3ff; --on-dark-2:rgba(229,225,255,.74); --on-dark-3:rgba(229,225,255,.52);
  --ok:#16a34a;
  --ease:cubic-bezier(.22,1,.36,1); --ease-io:cubic-bezier(.65,0,.35,1); --spring:cubic-bezier(.34,1.56,.64,1);
  --font:'Geist',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'Geist Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --wrap:1180px;
  --hdr-h:88px;
}

/* 3 ─ base */
*,*::before,*::after{box-sizing:border-box}
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-padding-top:calc(var(--hdr-h) + env(safe-area-inset-top,0px));-webkit-text-size-adjust:100%;background:var(--night)}
body{margin:0;font-family:var(--font);font-size:16px;line-height:1.6;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:clip}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
pre,code,kbd{font-family:var(--mono)}
pre{margin:0}
h1,h2,h3,h4{margin:0;font-weight:500}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--violet-2);outline-offset:3px;border-radius:8px}
.light :focus-visible{outline-color:var(--violet)}
[hidden]{display:none!important}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:fixed;left:16px;top:-60px;z-index:300;background:#fff;color:var(--ink);padding:10px 16px;border-radius:10px;font-weight:500;transition:top .2s}
.skip:focus{top:calc(12px + env(safe-area-inset-top,0px))}
.wrap{position:relative;z-index:1;width:100%;max-width:var(--wrap);margin:0 auto;padding:0 28px}
.icon{width:1em;height:1em;flex:none}
.light{background:var(--paper);color:var(--ink)}
.pad-top{padding-top:24px}

/* 4 ─ type */
h1{font-size:clamp(40px,6vw,70px);line-height:1.03;letter-spacing:-.045em}
h2{font-size:clamp(34px,4.6vw,58px);line-height:1.05;letter-spacing:-.042em}
h3{letter-spacing:-.02em}
h1,h2,h3,.lead,.hero-desc,.statement{text-wrap:balance}
.lead{font-size:clamp(16.5px,1.5vw,18.5px);line-height:1.6;color:var(--muted)}
.dark{background:var(--night);color:var(--on-dark);position:relative;isolation:isolate}
.dark .lead{color:var(--on-dark-2)}
/* gradient headline text — applied per word once split so transforms keep the fill */
.light h2:not(.is-split),.light h2.is-split .w>span{
  background:linear-gradient(180deg,#17142f 30%,#3d3766 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.dark :is(h1,h2):not(.is-split),.dark :is(h1,h2).is-split .w>span,.dark .nf-code{
  background:linear-gradient(180deg,#ffffff 22%,#d6ccff 78%,#b8a6ff 100%);-webkit-background-clip:text;background-clip:text;color:transparent}

/* eyebrow pill */
.eyebrow{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 14px 0 11px;border-radius:999px;font-size:13.5px;font-weight:500;letter-spacing:-.005em;border:1px solid transparent;white-space:nowrap}
.eyebrow .icon{width:15px;height:15px}
.eyebrow-dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.eyebrow-dark{color:#ebe6ff;background:linear-gradient(rgba(28,20,78,.72),rgba(28,20,78,.72)) padding-box,linear-gradient(110deg,rgba(176,150,255,.85),rgba(100,181,255,.35) 45%,rgba(255,120,185,.7)) border-box;box-shadow:0 0 30px -8px rgba(123,97,255,.75),inset 0 1px 0 rgba(255,255,255,.08)}
.eyebrow-dark .icon{color:#c4b2ff;filter:drop-shadow(0 0 6px rgba(167,139,255,.9))}
.eyebrow-light{color:var(--violet-ink);background:linear-gradient(#f4f1ff,#f4f1ff) padding-box,linear-gradient(110deg,#cdbfff,#bfe0ff 50%,#ffc8e4) border-box}

/* 5 ─ buttons */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:46px;padding:0 22px;border-radius:999px;font-size:15px;font-weight:500;letter-spacing:-.01em;white-space:nowrap;isolation:isolate;overflow:hidden;cursor:pointer;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),background-color .3s,border-color .3s,color .3s}
.btn>span{position:relative;z-index:2;display:inline-flex;align-items:center;gap:8px}
.btn-sm{height:38px;padding:0 16px;font-size:14px}
.btn-primary{color:#fff;background:linear-gradient(180deg,#7e9bff 0%,#5574ff 42%,#6c4dff 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -2px 6px rgba(40,10,140,.25),0 0 0 1px rgba(78,62,240,.75),0 12px 32px -10px rgba(83,92,255,.95),0 3px 8px -3px rgba(40,20,140,.5)}
.btn-primary::before{content:'';position:absolute;inset:0;z-index:1;border-radius:inherit;background:radial-gradient(120% 90% at 50% -20%,rgba(255,255,255,.45),transparent 55%);opacity:.7;transition:opacity .4s}
.btn-primary::after{content:'';position:absolute;top:0;bottom:0;left:-60%;width:45%;z-index:1;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg) translateX(0);transition:transform .9s var(--ease)}
.btn-primary:hover{transform:translateY(-1.5px);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -2px 6px rgba(40,10,140,.25),0 0 0 1px rgba(78,62,240,.85),0 18px 44px -12px rgba(83,92,255,1),0 4px 10px -3px rgba(40,20,140,.5)}
.btn-primary:hover::after{transform:skewX(-20deg) translateX(420%)}
.btn-primary:hover::before{opacity:1}
.btn-primary:active{transform:translateY(0) scale(.98)}
.btn-secondary{color:var(--on-dark);background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),inset 0 1px 0 rgba(255,255,255,.1);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.btn-secondary:hover{background:rgba(255,255,255,.12);transform:translateY(-1.5px)}
.btn-outline{color:var(--ink);background:#fff;box-shadow:inset 0 0 0 1px var(--line-2),0 1px 2px rgba(23,20,47,.06)}
.btn-outline:hover{box-shadow:inset 0 0 0 1px #b9adff,0 6px 18px -8px rgba(81,54,232,.35);transform:translateY(-1.5px)}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;align-items:center}

/* 6 ─ header */
.hdr{position:fixed;left:0;right:0;top:0;z-index:100;padding:calc(env(safe-area-inset-top,0px) + 14px) 16px 0;pointer-events:none;color:var(--on-dark);transition:color .35s}
.hdr-bar{pointer-events:auto;position:relative;max-width:1200px;margin:0 auto;height:60px;display:flex;align-items:center;gap:22px;padding:0 10px 0 22px;border-radius:999px;border:1px solid transparent;
  transition:max-width .7s var(--ease),background-color .45s,border-color .45s,box-shadow .45s,backdrop-filter .45s}
.hdr.is-scrolled .hdr-bar{max-width:1010px;background:rgba(19,14,56,.62);border-color:rgba(255,255,255,.1);backdrop-filter:blur(20px) saturate(1.7);-webkit-backdrop-filter:blur(20px) saturate(1.7);box-shadow:0 12px 40px -14px rgba(6,3,28,.7),inset 0 1px 0 rgba(255,255,255,.06)}
.hdr.is-light{color:var(--ink)}
.hdr.is-light.is-scrolled .hdr-bar{background:rgba(255,255,255,.76);border-color:rgba(23,20,47,.08);box-shadow:0 12px 40px -18px rgba(40,30,110,.28)}
.wordmark{font-weight:600;font-size:19px;letter-spacing:-.035em;white-space:nowrap;display:inline-flex;align-items:center}
.hdr-nav{display:flex;align-items:center;gap:2px;margin-right:auto}
.hdr-link{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 12px;border-radius:999px;font-size:14.5px;font-weight:450;opacity:.78;transition:opacity .25s,background-color .25s}
.hdr-link:hover,.hdr-link[aria-current="page"],.dd-btn[aria-expanded="true"]{opacity:1;background:rgba(255,255,255,.08)}
.hdr.is-light .hdr-link:hover,.hdr.is-light .hdr-link[aria-current="page"],.hdr.is-light .dd-btn[aria-expanded="true"]{background:rgba(23,20,47,.06)}
.dd-btn .icon{width:14px;height:14px;transition:transform .35s var(--ease)}
.dd-btn[aria-expanded="true"] .icon{transform:rotate(180deg)}
.hdr-cta{display:flex;align-items:center;gap:6px;margin-left:auto}
.hdr-gh .icon{width:17px;height:17px}
.dd{position:relative}
.dd-panel{position:absolute;left:-14px;top:calc(100% + 16px);width:600px;padding:10px;border-radius:22px;color:var(--on-dark);background:rgba(22,16,62,.9);border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(24px) saturate(1.6);-webkit-backdrop-filter:blur(24px) saturate(1.6);
  box-shadow:0 30px 80px -20px rgba(5,2,25,.8),inset 0 1px 0 rgba(255,255,255,.07);opacity:0;visibility:hidden;transform:translateY(-8px) scale(.97);transform-origin:20% 0;transition:opacity .3s,transform .45s var(--ease),visibility 0s .45s}
.dd-panel::before{content:'';position:absolute;left:0;right:0;top:-18px;height:18px}
.dd.is-open .dd-panel{opacity:1;visibility:visible;transform:none;transition:opacity .3s,transform .45s var(--ease),visibility 0s}
.hdr.is-light .dd-panel{color:var(--ink);background:rgba(255,255,255,.94);border-color:rgba(23,20,47,.08);box-shadow:0 30px 80px -24px rgba(40,30,110,.35)}
.dd-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.dd-item{display:flex;gap:12px;padding:12px;border-radius:14px;transition:background-color .25s}
.dd-item:hover,.dd-item[aria-current="page"]{background:rgba(255,255,255,.06)}
.hdr.is-light .dd-item:hover,.hdr.is-light .dd-item[aria-current="page"]{background:var(--mist)}
.dd-item b{display:block;font-size:14.5px;font-weight:500;letter-spacing:-.01em}
.dd-item small{display:block;font-size:13px;line-height:1.4;opacity:.62;margin-top:2px}
.dd-ico{width:38px;height:38px;flex:none;border-radius:11px;display:grid;place-items:center;color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 6px 16px -6px rgba(60,40,200,.6)}
.dd-ico .icon{width:18px;height:18px}
.dd-a{background:linear-gradient(145deg,#7ea2ff,#5a5cff 55%,#8b4dff)}
.dd-b{background:linear-gradient(145deg,#4a4570,#1b1638)}
.dd-c{background:linear-gradient(145deg,#ff9bd0,#c66cff 55%,#7b61ff)}
.dd-d{background:linear-gradient(145deg,#7fe9ff,#3d7bff 60%,#5b3df5)}
.dd-foot{display:flex;align-items:center;gap:10px;margin-top:6px;padding:14px 12px 8px;border-top:1px solid rgba(255,255,255,.08);font-size:13.5px;opacity:.8;transition:opacity .25s}
.hdr.is-light .dd-foot{border-color:var(--line)}
.dd-foot:hover{opacity:1}
.dd-foot span{flex:1}
.dd-foot .icon{width:16px;height:16px}
.burger{display:none;width:42px;height:42px;border-radius:50%;position:relative}
.burger span{position:absolute;left:12px;right:12px;height:1.6px;background:currentColor;border-radius:2px;transition:transform .45s var(--ease)}
.burger span:first-child{top:16px}.burger span:last-child{top:24px}
.burger[aria-expanded="true"] span:first-child{transform:translateY(4px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-4px) rotate(-45deg)}
.m-menu{pointer-events:auto;position:fixed;inset:0;z-index:-1;padding:calc(env(safe-area-inset-top,0px) + 96px) 28px calc(env(safe-area-inset-bottom,0px) + 28px);
  background:radial-gradient(80% 50% at 50% 0%,rgba(123,97,255,.35),transparent 70%),rgba(12,9,38,.97);color:var(--on-dark);display:flex;flex-direction:column;justify-content:space-between;overflow:auto}
.m-menu[hidden]{display:none}
.m-menu nav{display:flex;flex-direction:column}
.m-menu nav a{font-size:26px;font-weight:500;letter-spacing:-.03em;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.07);opacity:0;transform:translateY(12px);animation:mIn .6s var(--ease) forwards}
.m-menu nav a:nth-child(n){animation-delay:calc(var(--n,0) * 40ms)}
.m-menu .btn{width:100%;margin-top:24px}
@keyframes mIn{to{opacity:1;transform:none}}

/* 7 ─ dark surfaces */
.lights{position:absolute;inset:0;overflow:hidden;z-index:-2;pointer-events:none}
.lights i{position:absolute;border-radius:50%;will-change:transform}
.l1{width:1200px;height:860px;left:50%;top:-470px;margin-left:-600px;background:radial-gradient(closest-side,rgba(130,104,255,.85),rgba(110,84,255,.32) 52%,rgba(110,84,255,0));animation:drift1 24s ease-in-out infinite alternate}
.l2{width:820px;height:700px;left:-300px;top:80px;background:radial-gradient(closest-side,rgba(61,123,255,.62),rgba(61,123,255,0));animation:drift2 28s ease-in-out infinite alternate}
.l3{width:820px;height:680px;right:-300px;top:20px;background:radial-gradient(closest-side,rgba(198,108,255,.58),rgba(198,108,255,0));animation:drift3 26s ease-in-out infinite alternate}
.l4{width:1000px;height:560px;left:50%;top:560px;margin-left:-500px;background:radial-gradient(closest-side,rgba(255,120,185,.26),rgba(255,120,185,0));animation:drift2 30s ease-in-out infinite alternate-reverse}
.lights-soft .l1{top:-560px;opacity:.9}.lights-soft .l2{top:-60px;opacity:.75}.lights-soft .l3{top:-140px;opacity:.75}.lights-soft .l4{display:none}
@keyframes drift1{from{transform:translate3d(-40px,0,0) scale(1)}to{transform:translate3d(50px,40px,0) scale(1.1)}}
@keyframes drift2{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(120px,-60px,0) scale(1.15)}}
@keyframes drift3{from{transform:translate3d(0,0,0) scale(1.05)}to{transform:translate3d(-110px,70px,0) scale(.95)}}
.beam{position:absolute;left:50%;top:0;width:1600px;height:1150px;margin-left:-800px;z-index:-1;pointer-events:none;transform-origin:50% 0;
  background:conic-gradient(from 0deg at 50% -6%,transparent 0 160deg,rgba(170,150,255,.16) 169deg,rgba(236,232,255,.32) 176deg,rgba(255,255,255,.4) 180deg,rgba(236,232,255,.32) 184deg,rgba(170,150,255,.16) 191deg,transparent 200deg 360deg);
  -webkit-mask-image:radial-gradient(55% 75% at 50% 0%,#000 25%,transparent 78%);mask-image:radial-gradient(55% 75% at 50% 0%,#000 25%,transparent 78%);animation:sway 14s ease-in-out infinite alternate;opacity:.85}
@keyframes sway{from{transform:rotate(-2.2deg)}to{transform:rotate(2.2deg)}}
.gridbg{position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:72px 72px;background-position:50% -1px;
  -webkit-mask-image:radial-gradient(60% 46% at 50% 18%,#000,transparent 85%);mask-image:radial-gradient(60% 46% at 50% 18%,#000,transparent 85%)}
.grain{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.16;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* horizon: the dark-to-white "sunrise" seam */
.horizon{position:relative;height:clamp(230px,27vw,400px);overflow:hidden;pointer-events:none;--hz:.4}
.hz-glow{position:absolute;left:50%;bottom:-6%;width:150%;height:150%;transform:translateX(-50%) scaleY(calc(.75 + var(--hz) * .35));transform-origin:50% 100%;opacity:calc(.55 + var(--hz) * .45);
  background:radial-gradient(48% 42% at 50% 100%,rgba(255,255,255,.85) 0%,rgba(205,190,255,.8) 16%,rgba(140,112,255,.62) 32%,rgba(70,120,255,.38) 50%,rgba(200,108,255,.16) 66%,transparent 80%)}
.hz-arc,.hz-rim{position:absolute;left:50%;width:260vw;aspect-ratio:1;border-radius:50%;transform:translateX(-50%)}
.hz-rim{z-index:1;top:calc(100% - 11vw - 3px);background:linear-gradient(90deg,#64b5ff,#8f6bff 25%,#ff9ad0 50%,#8f6bff 75%,#64b5ff);background-size:200% 100%;animation:rim 10s linear infinite;filter:blur(.4px)}
.hz-arc{z-index:2;top:calc(100% - 11vw);background:#fff;box-shadow:0 -10px 30px rgba(255,255,255,.7),0 -40px 90px rgba(150,120,255,.75),0 -90px 180px rgba(70,120,255,.45)}
@keyframes rim{to{background-position:200% 0}}
.dawn{margin-top:-1px}

/* 8 ─ hero */
.hero{padding:calc(var(--hdr-h) + 64px) 0 0;overflow:hidden;background:radial-gradient(110% 70% at 50% -8%,#2d1d82 0%,#1a1250 38%,var(--night) 72%)}
.hero-inner{display:flex;flex-direction:column;align-items:center;text-align:center}
.hero-copy{display:flex;flex-direction:column;align-items:center;will-change:transform,opacity}
.hero-title{margin-top:26px;font-size:clamp(42px,7.4vw,86px);line-height:1.02;letter-spacing:-.05em}
.hl{display:block}
.frame{position:relative;display:inline-block;padding:0 .12em .02em}
.frame-box{position:absolute;inset:.04em -.04em -.06em;border:1px solid rgba(176,150,255,.8);pointer-events:none;clip-path:inset(0 100% 100% 0);transition:clip-path 1.1s var(--ease)}
.frame.is-on .frame-box{clip-path:inset(-12px -12px -12px -12px)}
.fh{position:absolute;width:9px;height:9px;background:#fff;border:1.5px solid #8a6dff;border-radius:2px;transform:scale(0);transition:transform .5s var(--spring)}
.fh.tl{left:-5px;top:-5px}.fh.tr{right:-5px;top:-5px}.fh.bl{left:-5px;bottom:-5px}.fh.br{right:-5px;bottom:-5px}
.frame.is-on .fh{transform:scale(1)}
.frame.is-on .fh.tr{transition-delay:.15s}.frame.is-on .fh.br{transition-delay:.3s}.frame.is-on .fh.bl{transition-delay:.45s}
.frame-tag{position:absolute;right:calc(100% + 18px);top:50%;margin-top:-13px;display:inline-flex;align-items:center;gap:5px;padding:3px 9px 3px 6px;border-radius:7px 2px 7px 7px;font:500 12.5px/1.4 var(--mono);letter-spacing:0;color:#fff;background:linear-gradient(135deg,#8a6dff,#5a5cff);box-shadow:0 6px 18px -6px rgba(123,97,255,.9);transform:scale(0) translateX(10px);transform-origin:100% 50%;transition:transform .6s var(--spring) .55s}
.frame-tag .icon{width:12px;height:12px;fill:#fff;stroke:none;order:2;transform:scaleX(-1)}
.frame.is-on .frame-tag{transform:none}
.h-icon{display:inline-grid;place-items:center;width:.84em;height:.84em;margin:0 .14em 0 .06em;vertical-align:-.1em;border-radius:.25em;color:#fff;
  background:radial-gradient(90% 70% at 30% 15%,rgba(255,255,255,.55),transparent 55%),linear-gradient(150deg,#9ab6ff 0%,#5b6bff 38%,#8a4dff 72%,#ff7ac0 115%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 -.05em .12em rgba(30,10,100,.35),0 .1em .45em -.08em rgba(110,90,255,.95);transform:rotate(-7deg)}
.h-icon svg{width:.5em;height:.5em;filter:drop-shadow(0 1px 1px rgba(30,10,90,.3))}
.is-split .w-ico{display:inline-block;opacity:0;transform:scale(.2) rotate(-40deg);transition:transform 1.1s var(--spring),opacity .5s;transition-delay:calc(var(--i) * 55ms + var(--base,0ms))}
.is-split.is-in .w-ico{opacity:1;transform:none}
.is-split.is-in .w-ico .h-icon{animation:bob 6s ease-in-out 1.6s infinite}
@keyframes bob{0%,100%{transform:rotate(-7deg) translateY(0)}50%{transform:rotate(3deg) translateY(-.06em)}}
.hero-desc{position:relative;max-width:600px;margin-top:28px;padding:12px 22px;font-size:clamp(16.5px,1.6vw,19.5px);line-height:1.55;color:var(--on-dark-2)}
.brk{position:absolute;width:12px;height:12px;border:0 solid rgba(176,150,255,.55)}
.brk.tl{left:0;top:0;border-left-width:1px;border-top-width:1px}.brk.tr{right:0;top:0;border-right-width:1px;border-top-width:1px}
.brk.bl{left:0;bottom:0;border-left-width:1px;border-bottom-width:1px}.brk.br{right:0;bottom:0;border-right-width:1px;border-bottom-width:1px}
.hero .cta-row{margin-top:30px}
.btn-frame{position:relative;display:inline-flex;padding:0}
.btn-frame::before{content:'';position:absolute;inset:-8px;border:1px solid rgba(176,150,255,.45);border-radius:6px;pointer-events:none;clip-path:inset(0 0 100% 0);transition:clip-path 1s var(--ease) .2s}
.btn-frame>i{position:absolute;width:6px;height:6px;background:#fff;border:1px solid #8a6dff;border-radius:1.5px;z-index:3;transform:scale(0);transition:transform .45s var(--spring) .9s}
.btn-frame>i:nth-child(1){left:-11px;top:-11px}.btn-frame>i:nth-child(2){right:-11px;top:-11px}.btn-frame>i:nth-child(3){left:-11px;bottom:-11px}.btn-frame>i:nth-child(4){right:-11px;bottom:-11px}
.is-loaded .btn-frame::before{clip-path:inset(0)}
.is-loaded .btn-frame>i{transform:scale(1)}
.hero .btn-frame .btn-primary::after{animation:sheen 5.5s var(--ease) 2.4s infinite}
@keyframes sheen{0%,70%{transform:skewX(-20deg) translateX(0)}100%{transform:skewX(-20deg) translateX(420%)}}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%;max-width:1000px;margin-top:64px}
.step{position:relative;display:flex;flex-direction:column;align-items:flex-start;text-align:left;padding:20px 20px 18px;border-radius:18px;color:var(--on-dark-3);background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.07);
  transition:background-color .5s,border-color .5s,color .5s,box-shadow .5s,transform .5s var(--ease)}
.step:hover{background:rgba(255,255,255,.05);color:var(--on-dark-2)}
.step b{display:block;margin-top:14px;font-size:15.5px;font-weight:500;letter-spacing:-.01em;color:var(--on-dark-2);transition:color .4s}
.step-t{display:block;margin-top:4px;font-size:14px;line-height:1.45}
.step-ico{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);transition:background .5s,box-shadow .5s,color .5s}
.step-ico .icon{width:17px;height:17px}
.step-bar{position:absolute;left:20px;right:20px;top:-1px;height:2px;border-radius:2px;overflow:hidden;background:rgba(255,255,255,.08)}
.step-bar i{display:block;height:100%;transform:scaleX(0);transform-origin:0 50%;background:linear-gradient(90deg,#6c8dff,#b394ff,#ff94cf)}
.step.is-active{color:var(--on-dark-2);background:linear-gradient(180deg,rgba(123,97,255,.18),rgba(123,97,255,.04));border-color:rgba(176,150,255,.3);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 18px 50px -24px rgba(123,97,255,.9)}
.step.is-active b{color:#fff}
.step.is-active .step-ico{color:#fff;background:linear-gradient(145deg,#7ea2ff,#5a5cff 55%,#8b4dff);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 6px 16px -6px rgba(100,80,255,.9)}
.step.is-active .step-bar i{animation:fill var(--step-dur,7000ms) linear forwards}
.steps.is-hold .step.is-active .step-bar i{animation-play-state:paused}
@keyframes fill{to{transform:scaleX(1)}}

.motion-btn{align-self:flex-end;margin-top:18px;display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 12px;border-radius:999px;font-size:12.5px;color:var(--on-dark-3);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);transition:color .3s,background .3s}
.motion-btn:hover{color:var(--on-dark);background:rgba(255,255,255,.08)}
.motion-btn .icon{width:13px;height:13px}

/* 9 ─ desktop scene */
.scene-wrap{position:relative;width:100%;max-width:1120px;margin-top:22px;perspective:1800px;perspective-origin:50% 0}
.scene-halo{position:absolute;left:-8%;right:-8%;top:8%;bottom:-20%;z-index:-1;pointer-events:none;background:radial-gradient(50% 50% at 50% 45%,rgba(123,97,255,.55),rgba(61,123,255,.18) 50%,transparent 72%);opacity:var(--halo,.7)}
.scene{position:relative;width:100%;aspect-ratio:1120/660;border-radius:22px;overflow:hidden;background:#1a1246;transform-origin:50% 0;
  transform:translate3d(0,var(--ty,0px),0) rotateX(var(--rx,0deg)) scale(var(--sc,1));
  box-shadow:0 0 0 1px rgba(255,255,255,.14),0 0 0 7px rgba(255,255,255,.03),0 60px 140px -40px rgba(8,4,40,.95),0 30px 120px -50px rgba(123,97,255,.85)}
.scene::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.22)}
.scene-inner{position:absolute;left:0;top:0;width:1120px;height:660px;transform-origin:0 0;transform:scale(var(--fit,1));font-size:14px;text-align:left}
.wallpaper{position:absolute;inset:0;overflow:hidden;
  background:radial-gradient(55% 75% at 8% 108%,#ff93cb 0%,rgba(255,147,203,0) 62%),radial-gradient(60% 80% at 100% 96%,#8a62ff 0%,rgba(138,98,255,0) 62%),radial-gradient(70% 70% at 78% 4%,#4b86ff 0%,rgba(75,134,255,0) 60%),radial-gradient(55% 60% at 18% 16%,#3b2aa8 0%,rgba(59,42,168,0) 70%),linear-gradient(160deg,#171052 0%,#2e1c86 48%,#6b2fae 100%)}
.wallpaper i{position:absolute;border-radius:50%}
.wp1{width:1500px;height:620px;left:-240px;top:320px;border-top:2px solid rgba(255,255,255,.28);transform:rotate(-9deg);filter:blur(1px);box-shadow:inset 0 30px 60px -20px rgba(255,255,255,.18);animation:wave 18s ease-in-out infinite alternate}
.wp2{width:1300px;height:560px;left:-60px;top:390px;border-top:1px solid rgba(255,255,255,.2);transform:rotate(-5deg);animation:wave 22s ease-in-out infinite alternate-reverse}
.wp3{width:700px;height:700px;right:-160px;top:-260px;background:radial-gradient(closest-side,rgba(255,255,255,.18),transparent);animation:drift3 20s ease-in-out infinite alternate}
@keyframes wave{to{transform:rotate(-3deg) translateY(-24px)}}
.menubar{position:absolute;left:0;right:0;top:0;height:28px;padding:0 14px;display:flex;justify-content:space-between;align-items:center;font-size:13px;color:rgba(255,255,255,.92);background:rgba(14,9,46,.32);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);z-index:6}
.mb-l,.mb-r{display:flex;align-items:center;gap:18px}
.mb-l b{font-weight:600}
.mb-r svg{color:#fff}
.desk-file{position:absolute;right:70px;top:74px;z-index:2;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:12.5px;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.4);opacity:0;transform:scale(.4) translateY(10px);transition:transform .7s var(--spring),opacity .4s}
.desk-file.is-on{opacity:1;transform:none}
.df-ico{position:relative;width:52px;height:62px;border-radius:6px;background:linear-gradient(180deg,#fff,#ece9ff);box-shadow:0 8px 20px -6px rgba(0,0,0,.5);display:grid;place-items:center;color:#7b61ff}
.df-ico .icon{width:22px;height:22px;margin-top:-10px}
.df-ico b{position:absolute;bottom:8px;font:600 9.5px var(--mono);color:#fff;background:#7b61ff;padding:1px 5px;border-radius:3px;text-shadow:none}
.desk-file>span:last-child{padding:1px 6px;border-radius:4px;background:rgba(80,60,220,.55)}

.win{position:absolute;border-radius:13px;overflow:hidden;
  box-shadow:0 0 0 .5px rgba(0,0,0,.4),0 0 0 1px rgba(255,255,255,.08) inset,0 34px 70px -14px rgba(8,4,40,.6),0 12px 24px -10px rgba(8,4,40,.45);
  transition:transform 1s var(--ease),opacity .7s var(--ease),filter .7s var(--ease);will-change:transform}
.win.is-front{z-index:4;opacity:1;filter:none;transform:translate3d(0,0,0) scale(1)}
.win.is-back{z-index:2;opacity:.62;filter:blur(1.4px) saturate(.75) brightness(.92);transform:translate3d(var(--bx,0),var(--by,0),0) scale(.9)}
.win.is-hidden{z-index:1;opacity:0;filter:blur(6px);transform:translate3d(var(--hx,0),var(--hy,40px),0) scale(.82);pointer-events:none}
.win-bar{height:36px;display:grid;grid-template-columns:80px 1fr 80px;align-items:center;padding:0 12px;font-size:12.5px;color:#6f6b8a;background:#f3f2f8;border-bottom:1px solid #e6e4ef}
.win-title{text-align:center;font-weight:500}
.traffic{display:flex;gap:7px}
.traffic i{width:12px;height:12px;border-radius:50%;background:#ff5f57;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.15)}
.traffic i:nth-child(2){background:#febc2e}.traffic i:nth-child(3){background:#28c840}
.win-kernel{justify-self:end;display:inline-flex;align-items:center;gap:6px;font-size:12px}
.win-kernel i{width:8px;height:8px;border-radius:50%;border:1.5px solid #9a96b3}
.win-nb.is-busy .win-kernel i{background:#9a96b3}
/* notebook window */
.win-nb{left:110px;top:66px;width:640px;height:440px;background:#fff;--bx:-70px;--by:-30px;--hx:-120px;--hy:-30px}
.nb-tools{display:flex;gap:16px;align-items:center;padding:7px 16px;font-size:12.5px;color:#6f6b8a;border-bottom:1px solid #efedf5}
.nb-run{margin-left:auto;display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:6px;background:#f1effa;color:#5136e8;font-weight:500}
.nb-run .icon{width:11px;height:11px;fill:currentColor}
.nb-body{padding:14px 18px;display:flex;flex-direction:column;gap:10px}
.cell{display:grid;grid-template-columns:52px 1fr;column-gap:8px;position:relative}
.cell-n{font:12px/2.2 var(--mono);color:#9a96b3;text-align:right}
.cell-n em{font-style:normal}
.cell pre{font:13.5px/1.65 var(--mono);color:#2a2645;background:#f8f7fc;border:1px solid #eceaf4;border-radius:9px;padding:9px 12px;transition:border-color .4s,box-shadow .4s}
.cell.is-run pre{border-color:#b6a6ff;box-shadow:0 0 0 3px rgba(123,97,255,.14)}
.cell-out{grid-column:2;font:13px/1.6 var(--mono);color:#433f61;padding:6px 12px 0;opacity:0;transform:translateY(-4px);transition:opacity .45s,transform .45s var(--ease)}
.cell.is-done .cell-out{opacity:1;transform:none}
.cell-empty pre{min-height:38px}
.k{color:#8a3ffc}.s{color:#d6336c}.n{color:#0a7f79}.f{color:#2563eb}.c{color:#9a96b3}
.caret{display:inline-block;width:7px;height:16px;background:#7b61ff;vertical-align:-3px;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
/* terminal window */
.win-term{left:290px;top:120px;width:680px;height:360px;background:rgba(15,11,42,.94);backdrop-filter:blur(20px);--bx:110px;--by:40px;--hx:140px;--hy:50px}
.win-term .win-bar{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.06);color:rgba(229,225,255,.55)}
.term-body{padding:16px 18px;font:13px/1.75 var(--mono);color:#e9e5ff}
.t-cmd{white-space:pre-wrap;word-break:break-all}
.t-p{color:#8fb0ff}
.t-caret{display:inline-block;width:8px;height:17px;background:#c9bcff;vertical-align:-3px;margin-left:2px;animation:blink 1s steps(2) infinite}
.t-out{margin-top:6px}
.t-line{display:flex;align-items:center;gap:10px;opacity:0;transform:translateY(4px);transition:opacity .35s,transform .35s var(--ease)}
.t-line.is-on{opacity:1;transform:none}
.t-st{position:relative;width:16px;height:16px;flex:none;display:grid;place-items:center}
.t-st .icon{position:absolute;width:15px;height:15px;color:#5be49b;stroke-width:2.4;opacity:0;transform:scale(.4);transition:all .35s var(--spring)}
.spin{width:12px;height:12px;border-radius:50%;border:2px solid rgba(201,188,255,.25);border-top-color:#c9bcff;animation:spin .7s linear infinite}
.t-line.is-ok .t-st .icon{opacity:1;transform:none}
.t-line.is-ok .spin{display:none}
.t-dim{color:rgba(233,229,255,.45)}
.t-final{margin-top:8px}
.t-ok{padding:0 8px;border-radius:5px;background:rgba(91,228,155,.16);color:#5be49b;font-weight:600}
.t-url{color:#a9c4ff;text-decoration:underline;text-decoration-color:rgba(169,196,255,.4);text-underline-offset:3px}
.t-sum{color:rgba(233,229,255,.6);padding-left:0}
.t-sum b{color:#fff;font-weight:600}
.t-200{color:#5be49b}
@keyframes spin{to{transform:rotate(360deg)}}
/* api window */
.win-api{left:200px;top:86px;width:720px;height:430px;background:#fff;--bx:40px;--by:-40px;--hx:40px;--hy:60px}
.api-req{display:flex;align-items:center;gap:8px;margin:14px 16px}
.api-m{font:600 12px var(--mono);padding:8px 10px;border-radius:8px;background:#efeaff;color:#5136e8}
.api-url{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font:13px var(--mono);color:#433f61;padding:7px 12px;border-radius:8px;background:#f8f7fc;border:1px solid #eceaf4}
.api-url b{color:#17142f;font-weight:600}
.api-send{padding:8px 18px;border-radius:8px;color:#fff;font-weight:500;font-size:13px;background:linear-gradient(180deg,#7e9bff,#5a5cff);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 4px 12px -4px rgba(83,92,255,.8);transition:transform .2s var(--ease)}
.api-send.is-press{transform:scale(.9)}
.api-cols{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:0 16px}
.api-pane{position:relative;border:1px solid #eceaf4;border-radius:11px;min-height:300px;overflow:hidden}
.api-tabs{display:flex;align-items:center;gap:14px;padding:9px 12px;font-size:12.5px;color:#9a96b3;border-bottom:1px solid #f0eef6}
.api-tabs .on{color:#17142f;font-weight:500}
.api-status{margin-left:auto;display:inline-flex;align-items:center;gap:6px;padding:2px 8px;border-radius:999px;background:#e7f8ef;color:#15803d;font:500 12px var(--mono);opacity:0;transform:scale(.8);transition:all .45s var(--spring)}
.api-status i{width:6px;height:6px;border-radius:50%;background:#22c55e}
.api-json{font:14px/1.75 var(--mono);color:#2a2645;padding:14px 16px}
.api-res .api-json{opacity:0;transform:translateY(6px);transition:all .5s var(--ease)}
.api-res.is-done .api-json,.api-res.is-done .api-status{opacity:1;transform:none}
.api-wait{position:absolute;left:16px;top:56px;display:flex;gap:5px;opacity:0;transition:opacity .3s}
.api-wait i{width:7px;height:7px;border-radius:50%;background:#b6a6ff;animation:dots 1s ease-in-out infinite}
.api-wait i:nth-child(2){animation-delay:.15s}.api-wait i:nth-child(3){animation-delay:.3s}
.api-res.is-wait .api-wait{opacity:1}
@keyframes dots{50%{transform:translateY(-5px);opacity:.4}}
.toast{position:absolute;right:16px;top:40px;z-index:7;width:330px;display:flex;gap:11px;align-items:flex-start;padding:12px 14px;border-radius:16px;background:rgba(246,244,255,.84);backdrop-filter:blur(30px) saturate(1.8);-webkit-backdrop-filter:blur(30px) saturate(1.8);
  box-shadow:0 0 0 .5px rgba(0,0,0,.12),0 20px 40px -12px rgba(8,4,40,.45);color:#17142f;transform:translateX(calc(100% + 40px));transition:transform .8s var(--spring)}
.toast.is-on{transform:none}
.toast-ico{width:36px;height:36px;flex:none;border-radius:9px;display:grid;place-items:center;color:#fff;background:linear-gradient(150deg,#9ab6ff,#5b6bff 45%,#8a4dff)}
.toast-ico svg{width:18px;height:18px}
.toast-t{flex:1;display:flex;flex-direction:column;font-size:13px;line-height:1.35}
.toast-t b{font-size:12px;color:#6f6b8a;font-weight:500}
.toast-t span{font-weight:600}
.toast-t small{color:#6f6b8a;font-size:12.5px}
.toast-time{font-size:11.5px;color:#9a96b3}
.dock{position:absolute;left:50%;bottom:10px;z-index:8;transform:translateX(-50%);display:flex;align-items:flex-end;gap:7px;padding:7px 9px;border-radius:21px;background:rgba(255,255,255,.17);border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(26px) saturate(1.6);-webkit-backdrop-filter:blur(26px) saturate(1.6);box-shadow:0 14px 34px -12px rgba(8,4,40,.5)}
.dock-item{position:relative;width:48px;height:48px;border-radius:13px;display:grid;place-items:center;color:#fff;transform-origin:50% 100%;transform:scale(var(--m,1)) translateY(calc((var(--m,1) - 1) * -14px));transition:transform .18s ease-out;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 6px 14px -6px rgba(8,4,40,.6)}
.dock-item .icon{width:23px;height:23px}
.d-nb{background:linear-gradient(150deg,#ffc06a,#ff7a3d 60%,#f2542d)}
.d-term{background:linear-gradient(150deg,#4b4670,#16122e);color:#7af0a6}
.d-api{background:linear-gradient(150deg,#86b4ff,#4f6dff 55%,#7b4dff)}
.dock-fw{background:linear-gradient(150deg,color-mix(in oklab,var(--c) 55%,#fff),var(--c) 55%,color-mix(in oklab,var(--c) 70%,#3a1a6e))}
.dock-fw b{font:600 15px var(--mono);color:rgba(28,14,60,.82)}
.dock-sep{width:1px;height:40px;margin:0 3px 4px;background:rgba(255,255,255,.35)}
.dock-dot{position:absolute;bottom:-6px;left:50%;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:#fff;opacity:0;transition:opacity .3s}
.dock-item.is-run .dock-dot{opacity:.9}
.dock-item.is-bounce{animation:dockBounce .9s var(--ease)}
@keyframes dockBounce{0%,100%{translate:0 0}30%{translate:0 -16px}55%{translate:0 0}75%{translate:0 -6px}}

/* 10 ─ wall of frameworks */
.wall{padding:130px 0 40px;background:radial-gradient(70% 45% at 50% 0%,rgba(123,97,255,.16),transparent 70%),var(--night)}
.sec-head{text-align:center;max-width:780px;margin:0 auto 60px;display:flex;flex-direction:column;align-items:center}
.sec-head h2{margin-top:20px}
.sec-head .lead{margin-top:18px;max-width:560px}
.wall .sec-head{margin-bottom:56px}
.fw-tile{position:relative;display:inline-grid;place-items:center;flex:none;width:52px;height:52px;border-radius:15px;font:600 18px var(--mono);letter-spacing:-.02em;color:rgba(30,14,64,.84);
  background:radial-gradient(90% 70% at 30% 10%,rgba(255,255,255,.65),transparent 55%),linear-gradient(150deg,color-mix(in oklab,var(--c) 55%,#fff) 0%,var(--c) 48%,color-mix(in oklab,var(--c) 68%,#3a1a6e) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75),inset 0 -2px 6px rgba(40,10,80,.18),0 10px 24px -10px color-mix(in oklab,var(--c) 70%,#000)}
.fw-tile.fw-xl{width:104px;height:104px;border-radius:30px;font-size:38px}
.fw-tile.fw-lg{width:68px;height:68px;border-radius:20px;font-size:24px}
.fw-tile.fw-sm{width:34px;height:34px;border-radius:10px;font-size:13px}
.fw-tile.fw-xs{width:22px;height:22px;border-radius:7px;font-size:9.5px}
.fw-ghost{--c:#6b5cff;color:#fff;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.fw-ghost .icon{width:20px;height:20px}
.wall-panel{display:grid;grid-template-columns:1fr 1.1fr;gap:14px;padding:14px;border-radius:32px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 40px 120px -60px rgba(123,97,255,.6)}
.wall-feature{position:relative;overflow:hidden;isolation:isolate;border-radius:22px;padding:30px;min-height:420px;display:flex;flex-direction:column;background:#120c37;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.wf-bg{position:absolute;inset:0;z-index:-1}
.wf-bg i{position:absolute;inset:0}
.wf-bg i:first-child{inset:-25%;background:radial-gradient(42% 46% at 26% 22%,color-mix(in oklab,var(--c) 85%,transparent),transparent 72%),radial-gradient(48% 52% at 88% 92%,rgba(123,97,255,.7),transparent 72%),radial-gradient(40% 40% at 70% 20%,rgba(61,123,255,.35),transparent 70%);transition:opacity .5s;animation:drift2 18s ease-in-out infinite alternate}
.wf-bg i:last-child{background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:32px 32px;-webkit-mask-image:linear-gradient(180deg,#000,transparent 75%);mask-image:linear-gradient(180deg,#000,transparent 75%)}
.wall-feature.is-swap .wf-bg i:first-child{opacity:.3}
.wf-top{display:flex;justify-content:space-between;align-items:flex-start}
.wf-count{font:500 13px var(--mono);color:var(--on-dark-3)}
.wf-count b{color:#fff;font-weight:500}
.wf-copy{margin-top:auto;padding-top:40px}
.wf-copy h3{font-size:36px;letter-spacing:-.04em;line-height:1.1;color:#fff}
.wf-copy p{margin-top:10px;max-width:420px;color:var(--on-dark-2);font-size:16px}
.wf-copy>*{transition:opacity .35s,transform .5s var(--ease)}
.wall-feature.is-swap .wf-copy>*{opacity:0;transform:translateY(8px)}
.wf-cmd{margin-top:24px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:12px 14px;border-radius:13px;font:13px var(--mono);color:#e6e1ff;background:rgba(6,3,28,.38);border:1px solid rgba(255,255,255,.09);backdrop-filter:blur(10px)}
.wf-cmd>span:first-child{color:#8fb0ff}
.wf-detect{margin-left:auto;color:var(--on-dark-3)}
.wf-detect b{color:#5be49b;font-weight:500}
.wall-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.wall-tile{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:13px;padding:22px 8px 18px;border-radius:20px;font-size:13.5px;color:var(--on-dark-3);background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);
  transition:background-color .4s,border-color .4s,color .4s,transform .5s var(--ease)}
.wall-tile .fw-tile{transition:transform .6s var(--spring)}
.wall-tile:hover{color:var(--on-dark);background:rgba(255,255,255,.06);transform:translateY(-3px)}
.wall-tile:hover .fw-tile{transform:scale(1.14) rotate(-6deg)}
.wall-tile.is-active{color:#fff;background:radial-gradient(90% 80% at 50% 0%,color-mix(in oklab,var(--c) 30%,transparent),transparent 75%),rgba(255,255,255,.05);border-color:color-mix(in oklab,var(--c) 45%,transparent)}
.wall-name{white-space:nowrap}
.wall-ring{position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;pointer-events:none;opacity:0;--p:0;
  background:conic-gradient(from 0deg,var(--c) calc(var(--p) * 1turn),transparent 0);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.wall-tile.is-active .wall-ring{opacity:1;animation:ring var(--cycle,4200ms) linear forwards}
.wall-panel.is-hold .wall-ring{animation-play-state:paused}
@keyframes ring{from{--p:0}to{--p:1}}
.wall-more .fw-tile{transition:transform .5s var(--ease)}
.wall-more:hover .fw-tile{transform:translateX(4px)}
.wall-hint{display:flex;justify-content:center;align-items:flex-end;gap:8px;margin-top:22px;font-size:14px;color:var(--on-dark-3)}
.wall-hint svg{width:46px;height:24px;color:rgba(176,150,255,.7);transform:scaleX(-1)}

/* 11 ─ announcement */
.announce-wrap{text-align:center;padding:48px 20px 0}
.announce{position:relative;display:inline-flex;align-items:center;gap:12px;max-width:100%;padding:7px 8px 7px 7px;border-radius:999px;font-size:14.5px;color:var(--on-dark-2);background:rgba(255,255,255,.04);isolation:isolate;transition:transform .5s var(--ease),background .3s}
.announce::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;z-index:-1;background:conic-gradient(from var(--a),rgba(176,150,255,.15),rgba(176,150,255,.9) 15%,rgba(100,181,255,.8) 25%,rgba(255,255,255,.08) 40%,rgba(255,255,255,.08) 65%,rgba(255,120,185,.8) 85%,rgba(176,150,255,.15));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);animation:spinA 6s linear infinite}
@keyframes spinA{to{--a:360deg}}
.announce:hover{transform:translateY(-2px);background:rgba(255,255,255,.07)}
.announce b{color:#fff;font-weight:500}
.ann-ico{width:30px;height:30px;flex:none;border-radius:50%;display:grid;place-items:center;color:#fff;background:linear-gradient(145deg,#ffc06a,#ff7a3d 60%,#f2542d);box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
.ann-ico .icon{width:15px;height:15px}
.ann-link{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;color:#d9ceff;background:rgba(123,97,255,.2);white-space:nowrap}
.ann-link .icon{width:14px;height:14px;transition:transform .4s var(--ease)}
.announce:hover .ann-link .icon{transform:translateX(3px)}

/* 12 ─ features + bento */
.features{padding:20px 0 110px}
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:20px}
.bento+.bento{margin-top:20px}
.c-7{grid-column:span 7}.c-5{grid-column:span 5}.c-6{grid-column:span 6}
.card{position:relative;display:flex;flex-direction:column;border-radius:30px;background:var(--mist);border:1px solid var(--line);overflow:hidden;isolation:isolate;scroll-margin-top:110px}
[data-spot]{--mx:50%;--my:0%}
[data-spot]::after{content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:5;opacity:0;transition:opacity .4s;
  background:radial-gradient(320px circle at var(--mx) var(--my),rgba(123,97,255,.75),rgba(100,181,255,.35) 40%,transparent 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
[data-spot]:hover::after{opacity:1}
.card::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity .5s;background:radial-gradient(520px circle at var(--mx) var(--my),rgba(123,97,255,.09),transparent 45%)}
.card:hover::before{opacity:1}
.card-visual{position:relative;height:calc(340px * var(--fit,1));overflow:hidden;border-bottom:1px solid var(--line);
  background:radial-gradient(60% 70% at 50% 45%,rgba(255,255,255,.95),rgba(255,255,255,0) 70%),radial-gradient(50% 60% at 15% 0%,rgba(190,175,255,.35),transparent 70%),radial-gradient(45% 55% at 95% 100%,rgba(140,200,255,.32),transparent 70%),linear-gradient(180deg,#f1eefb,#f7f6fc)}
.card-visual::before{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(60,40,140,.16) 1px,transparent 1.3px);background-size:18px 18px;-webkit-mask-image:radial-gradient(70% 70% at 50% 45%,#000,transparent 85%);mask-image:radial-gradient(70% 70% at 50% 45%,#000,transparent 85%)}
.cv{position:absolute;left:50%;top:0;width:520px;height:340px;margin-left:-260px;transform:scale(calc(var(--fit,1) * var(--hz,1)));transform-origin:50% 0;transition:transform 1.4s var(--ease)}
.card:hover .cv{--hz:1.025}
.card-copy{position:relative;z-index:1;padding:26px 30px 30px}
.card-kicker{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:500;color:var(--violet-ink)}
.card-kicker .icon{width:16px;height:16px}
.card h3{margin-top:10px;font-size:clamp(21px,2vw,25px);line-height:1.2;letter-spacing:-.03em}
.card p{margin-top:10px;max-width:48ch;font-size:15.5px;color:var(--muted)}
.white-panel{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 1px 2px rgba(23,20,47,.05),0 24px 50px -24px rgba(50,30,140,.3)}

/* visual: 3d box */
.v-box{display:grid;place-items:center}
.vb-chips{position:absolute;left:22px;top:24px;display:flex;flex-direction:column;align-items:flex-start;gap:8px;z-index:3}
.vb-chip{display:inline-flex;align-items:center;gap:7px;padding:6px 11px 6px 7px;border-radius:999px;font-size:12.5px;font-weight:500;color:var(--ink-2);background:#fff;border:1px solid var(--line);box-shadow:0 8px 20px -10px rgba(50,30,140,.35);opacity:0;transform:translateX(-10px);animation:chip 6.4s var(--ease) infinite;animation-delay:calc(var(--i) * .25s)}
.vb-chip .icon{width:17px;height:17px;padding:3px;border-radius:50%;color:#fff;background:#22c55e;stroke-width:2.6}
@keyframes chip{0%,44%{opacity:0;transform:translateX(-10px)}52%,88%{opacity:1;transform:none}96%,100%{opacity:0;transform:translateX(-6px)}}
.vb-stage{position:relative;width:220px;height:250px;perspective:900px;margin-top:40px;margin-left:110px}
.vb-shadow{position:absolute;left:0;right:0;bottom:6px;height:60px;border-radius:50%;background:radial-gradient(closest-side,rgba(70,40,190,.32),transparent)}
.cube{position:absolute;left:45px;top:80px;width:130px;height:130px;transform-style:preserve-3d;transform:rotateX(-24deg) rotateY(-38deg);animation:flaps 6.4s var(--ease-io) infinite,turn 12.8s ease-in-out infinite alternate}
@keyframes turn{from{transform:rotateX(-24deg) rotateY(-32deg)}to{transform:rotateX(-20deg) rotateY(-50deg)}}
@keyframes flaps{0%,24%{--o:-30deg;--o2:-30deg}36%{--o:-30deg;--o2:90deg}48%,84%{--o:86deg;--o2:90deg}96%,100%{--o:-30deg;--o2:-30deg}}
.cube .f,.flap{position:absolute;border:1px solid rgba(255,255,255,.75)}
.cube .f{inset:0}
.f-front{transform:translateZ(65px);background:linear-gradient(165deg,#d8cfff,#ac98ff)}
.f-back{transform:rotateY(180deg) translateZ(65px);background:linear-gradient(180deg,#7d66ee,#9580f6)}
.f-left{transform:rotateY(-90deg) translateZ(65px);background:linear-gradient(180deg,#8a74f0,#a08df8)}
.f-right{transform:rotateY(90deg) translateZ(65px);background:linear-gradient(165deg,#b4a3ff,#8a72f4)}
.f-bottom{transform:rotateX(-90deg) translateZ(65px);background:#6a52dd}
.flap{left:0;top:-65px;width:130px;height:65px;transform-origin:50% 100%;background:linear-gradient(180deg,#e6e0ff,#c2b3ff)}
.fl-f{transform:translateZ(65px) rotateX(var(--o))}
.fl-b{transform:rotateY(180deg) translateZ(65px) rotateX(var(--o));background:linear-gradient(180deg,#c9bcff,#a996fb)}
.fl-l{transform:rotateY(-90deg) translateZ(65px) rotateX(var(--o2));background:linear-gradient(180deg,#d7ceff,#b5a5ff)}
.fl-r{transform:rotateY(90deg) translateZ(65px) rotateX(var(--o2));background:linear-gradient(180deg,#c6b8ff,#9f8af8)}
.vb-doc{position:absolute;left:35px;top:0;width:60px;height:76px;border-radius:7px;background:linear-gradient(180deg,#fff,#f1eeff);box-shadow:0 10px 20px -8px rgba(40,20,120,.5);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:var(--violet);animation:drop 6.4s var(--ease-io) infinite}
.vb-doc .icon{width:22px;height:22px}
.vb-doc b{font:600 9.5px var(--mono);color:var(--ink-2)}
@keyframes drop{0%{transform:translateY(-150px);opacity:0}8%{opacity:1}22%,90%{transform:translateY(40px);opacity:1}96%{opacity:0}100%{transform:translateY(-150px);opacity:0}}
.vb-label{position:absolute;left:12px;right:12px;top:40px;display:flex;flex-direction:column;align-items:center;padding:7px 4px;border-radius:7px;background:#fff;box-shadow:0 4px 10px -4px rgba(40,20,120,.5);animation:stamp 6.4s var(--ease) infinite}
.vb-label i{font:normal 500 8.5px var(--mono);color:var(--muted)}
.vb-label b{font:600 10.5px/1.25 var(--mono);color:var(--violet-ink);text-align:center}
@keyframes stamp{0%,46%{opacity:0;transform:scale(1.5) rotate(-8deg)}54%,88%{opacity:1;transform:rotate(-3deg)}96%,100%{opacity:0;transform:rotate(-3deg)}}

/* visual: magnifier lens */
.lens-win{position:absolute;left:26px;right:26px;top:30px;height:330px;background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 0 0 1px var(--line),0 24px 50px -24px rgba(50,30,140,.35)}
.lens-code{text-align:left}
.lc-tabs{display:flex;gap:2px;padding:6px 10px 0;background:#f7f6fb;border-bottom:1px solid var(--line);font-size:12px;color:var(--muted)}
.lc-tabs span{padding:6px 12px;border-radius:7px 7px 0 0}
.lc-tabs .on{background:#fff;color:var(--ink);box-shadow:0 0 0 1px var(--line)}
.lens-code pre{font:12px/1.85 var(--mono);color:#2a2645;padding:14px 18px;white-space:pre}
.lc-https{border-radius:4px;transition:background .3s,box-shadow .3s}
.v-lens.is-hit .lc-https{background:rgba(34,197,94,.14);box-shadow:0 0 0 2px rgba(34,197,94,.14)}
.lens{position:absolute;left:0;top:0;z-index:3;width:150px;height:150px;border-radius:50%;overflow:hidden;background:#fff;transform:translate3d(var(--lx,200px),var(--ly,90px),0);
  box-shadow:0 0 0 7px rgba(255,255,255,.92),0 0 0 8px rgba(23,20,47,.12),0 24px 44px -12px rgba(40,20,120,.5),inset 0 0 24px rgba(123,97,255,.2)}
.lens-inner{position:absolute;left:0;top:0;transform-origin:0 0}
.lens-inner .lens-win{position:absolute;left:0;top:0;right:auto;box-shadow:none;border-radius:0}
.lens-shine{position:absolute;inset:0;border-radius:50%;background:radial-gradient(60% 50% at 30% 20%,rgba(255,255,255,.65),transparent 60%),radial-gradient(80% 80% at 70% 85%,rgba(123,97,255,.12),transparent 70%);pointer-events:none}
.lens-handle{position:absolute;left:0;top:0;z-index:2;width:18px;height:84px;border-radius:9px;background:linear-gradient(90deg,#2b2550,#6a5fa6 45%,#2b2550);box-shadow:0 10px 20px -6px rgba(20,10,60,.5);transform-origin:50% 0;transform:translate3d(var(--hx,330px),var(--hy,210px),0) rotate(-45deg)}
.lens-badge{position:absolute;right:30px;top:12px;z-index:4;display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:999px;font-size:12.5px;font-weight:500;color:#15803d;background:#fff;border:1px solid #c9eed8;box-shadow:0 10px 20px -10px rgba(21,128,61,.5);opacity:0;transform:translateY(-6px) scale(.9);transition:all .45s var(--spring)}
.lens-badge .icon{width:14px;height:14px}
.v-lens.is-hit .lens-badge{opacity:1;transform:none}

/* visual: scaling */
.vs-panel{position:absolute;left:28px;right:28px;top:34px;padding:18px 20px;display:flex;flex-direction:column;gap:14px}
.vs-top{display:flex;justify-content:space-between;align-items:center;font-size:13.5px;color:var(--muted)}
.vs-state{display:inline-flex;align-items:center;gap:7px;padding:4px 10px;border-radius:999px;font-size:12.5px;background:var(--mist);color:var(--ink-2)}
.vs-state i{width:7px;height:7px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.2)}
.vs-state.is-idle i{background:#a3a0bb;box-shadow:0 0 0 3px rgba(163,160,187,.2)}
.vs-state.is-down i{background:var(--blue);box-shadow:0 0 0 3px rgba(61,123,255,.2)}
.vs-chart{width:100%;height:130px;overflow:visible}
.vs-line{stroke:#6b5cff;stroke-width:2.5;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.vs-pods-row{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--muted);padding-top:12px;border-top:1px solid var(--line)}
.vs-pods{display:flex;gap:6px;flex:1}
.vs-pods i{width:22px;height:22px;border-radius:7px;background:var(--mist);box-shadow:inset 0 0 0 1px var(--line);transition:background .4s,box-shadow .4s,transform .5s var(--spring)}
.vs-pods i.is-on{background:linear-gradient(150deg,#9ab6ff,#6b5cff 60%,#8a4dff);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 6px 12px -6px rgba(107,92,255,.9);transform:scale(1.08)}
.vs-pods-row b{font:600 16px var(--mono);color:var(--ink);min-width:20px;text-align:right}

/* visual: monitoring */
.vm-panel{position:absolute;left:30px;right:30px;top:40px;padding:18px 20px 14px}
.vm-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.vm-stats small{display:block;font-size:12px;color:var(--muted)}
.vm-stats b{font-size:22px;font-weight:500;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.vm-stats b em{font-style:normal}
.vm-stats b span{font-size:15px;color:var(--muted);font-weight:450}
.vm-chart{display:block;width:100%;height:150px;margin-top:10px;overflow:visible}
.vm-line{fill:none;stroke:url(#vml);stroke-width:2.6;vector-effect:non-scaling-stroke;stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 2.4s var(--ease)}
.vm-area{opacity:0;transition:opacity 1.6s .6s}
.is-in .vm-line{stroke-dashoffset:0}.is-in .vm-area{opacity:1}
.vm-sample,.dash-sample{display:inline-block;margin-top:6px;padding:2px 8px;border-radius:999px;font-size:11.5px;color:var(--muted);background:var(--mist)}
.vm-toast{position:absolute;right:26px;bottom:34px;z-index:3;display:flex;align-items:center;gap:10px;padding:10px 14px 10px 10px;border-radius:14px;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border:1px solid var(--line);box-shadow:0 20px 40px -16px rgba(50,30,140,.45);font-size:13px;opacity:0;transform:translateY(14px) scale(.96);transition:all .6s var(--spring)}
.vm-toast.is-on{opacity:1;transform:none}
.vm-toast b{display:block;font-weight:600}
.vm-toast small{color:var(--muted);font-size:12px}
.vm-emoji{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:linear-gradient(150deg,#fff3d6,#ffd9ec);font-size:17px}

/* visual: versions */
.vv-track{position:absolute;left:40px;right:40px;top:98px;display:grid;grid-template-columns:repeat(3,1fr)}
.vv-line{position:absolute;left:16.66%;right:16.66%;top:14px;height:2px;background:var(--line-2);border-radius:2px}
.vv-line i{position:absolute;left:0;top:0;bottom:0;width:var(--fill,100%);border-radius:2px;background:linear-gradient(90deg,#9ab6ff,#7b61ff);transition:width .9s var(--ease)}
.vv-node{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}
.vv-dot{width:30px;height:30px;border-radius:50%;background:#fff;border:2px solid var(--line-2);margin-bottom:6px;transition:all .5s var(--ease)}
.vv-node b{font:600 15px var(--mono)}
.vv-node small{font-size:12.5px;color:var(--muted)}
.vv-node.is-past .vv-dot{border-color:#b6a6ff;background:#f1edff}
.vv-node.is-live .vv-dot{border-color:transparent;background:linear-gradient(150deg,#9ab6ff,#6b5cff 55%,#8a4dff);box-shadow:0 0 0 6px rgba(123,97,255,.15),0 8px 20px -6px rgba(107,92,255,.8)}
.vv-pin{position:absolute;top:-38px;left:var(--pin,83.33%);transform:translateX(-50%);padding:4px 11px;border-radius:999px;font-size:12px;font-weight:600;color:#fff;background:linear-gradient(135deg,#22c55e,#16a34a);box-shadow:0 8px 18px -8px rgba(22,163,74,.9);transition:left .9s var(--spring)}
.vv-pin::after{content:'';position:absolute;left:50%;bottom:-4px;width:8px;height:8px;margin-left:-4px;background:#18a84d;transform:rotate(45deg);border-radius:1px}
.vv-actions{position:absolute;left:0;right:0;top:214px;display:flex;justify-content:center}
.vv-btn{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:999px;font-size:14px;font-weight:500;background:#fff;box-shadow:inset 0 0 0 1px var(--line-2),0 8px 20px -10px rgba(50,30,140,.4);transition:transform .2s var(--ease),background .3s}
.vv-btn .icon{width:16px;height:16px;color:var(--violet)}
.vv-btn.is-press{transform:scale(.93);background:#f3f0ff}
.vv-cursor{position:absolute;left:0;top:0;z-index:4;width:22px;height:22px;color:var(--ink);transform:translate3d(var(--cx,470px),var(--cy,320px),0);transition:transform 1s var(--ease)}
.vv-cursor .icon{width:22px;height:22px;fill:#17142f;stroke:#fff;stroke-width:1.2;filter:drop-shadow(0 3px 4px rgba(0,0,0,.25))}
.vv-status{position:absolute;left:0;right:0;top:276px;text-align:center;font-size:14px;color:var(--muted);transition:opacity .3s}
.vv-status.is-swap{opacity:0}

/* visual: team */
.vt-lines{position:absolute;inset:0;width:100%;height:100%}
.vt-lines path{fill:none;stroke:#c3b6ff;stroke-width:1.6;stroke-dasharray:4 6;vector-effect:non-scaling-stroke;animation:flow 1.6s linear infinite}
@keyframes flow{to{stroke-dashoffset:-20}}
.vt-core,.vt-person,.vt-key{position:absolute;transform:translate(-50%,-50%)}
.vt-core{left:50%;top:50%;display:flex;flex-direction:column;align-items:center;gap:4px;padding:16px 20px;border-radius:18px;background:#fff;border:1px solid var(--line);box-shadow:0 24px 50px -20px rgba(50,30,140,.4)}
.vt-core>.icon{width:38px;height:38px;padding:9px;border-radius:12px;color:#fff;background:linear-gradient(150deg,#9ab6ff,#6b5cff 55%,#8a4dff);box-shadow:0 8px 18px -6px rgba(107,92,255,.8);margin-bottom:6px}
.vt-core b{font:600 13px var(--mono)}
.vt-core small{font-size:12px;color:#15803d}
.vt-person{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:12.5px;color:var(--muted)}
.vt-a{left:20%;top:23%}.vt-b{left:20%;top:77%}.vt-c{left:80%;top:23%}
.vt-av{position:relative;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font:600 13px var(--mono);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 8px 18px -8px rgba(50,30,140,.7)}
.vt-av::after{content:'';position:absolute;inset:-5px;border-radius:50%;border:1.5px solid currentColor;opacity:0;animation:ping 3s var(--ease) infinite}
.vt-a .vt-av,.av-a{background:linear-gradient(150deg,#9ab6ff,#5b6bff);color:#5b6bff}
.vt-b .vt-av,.av-b{background:linear-gradient(150deg,#ffa6d6,#c66cff);color:#c66cff}
.vt-c .vt-av,.av-c{background:linear-gradient(150deg,#86ecff,#3d7bff);color:#3d7bff}
.vt-av{color:#fff!important}
.vt-b .vt-av::after{animation-delay:1s}.vt-c .vt-av::after{animation-delay:2s}
@keyframes ping{0%{opacity:.6;transform:scale(.9)}70%,100%{opacity:0;transform:scale(1.45)}}
.vt-key{left:76%;top:80%;display:flex;align-items:center;gap:8px;padding:8px 8px 8px 12px;border-radius:12px;background:#fff;border:1px solid var(--line);box-shadow:0 14px 30px -14px rgba(50,30,140,.45);overflow:hidden}
.vt-key>.icon{width:15px;height:15px;color:var(--violet)}
.vt-key code{font-size:12px;color:var(--ink-2)}
.vt-copy{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;background:var(--mist);color:var(--muted)}
.vt-copy .icon{width:13px;height:13px}
.vt-key::after{content:'';position:absolute;top:0;bottom:0;width:40%;left:-50%;background:linear-gradient(100deg,transparent,rgba(123,97,255,.14),transparent);animation:shimmer 3.2s ease-in-out infinite}
@keyframes shimmer{to{left:120%}}

/* 13 ─ sticky dashboard */
.dash-sec{position:relative;height:440vh;margin-top:-40px}
.dash-sticky{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:center;padding-top:72px}
.dash-sticky .wrap::before{content:'';position:absolute;left:5%;right:5%;top:20%;bottom:-10%;z-index:-1;background:radial-gradient(50% 50% at 50% 50%,rgba(123,97,255,.22),rgba(100,181,255,.12) 50%,transparent 75%);pointer-events:none}
.dash-hint{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:18px;font-size:14px;color:var(--muted)}
.mouse{width:18px;height:27px;border-radius:10px;border:1.6px solid currentColor;display:flex;justify-content:center;padding-top:5px}
.mouse i{width:2px;height:6px;border-radius:2px;background:currentColor;animation:wheel 1.8s var(--ease) infinite}
@keyframes wheel{0%{transform:translateY(0);opacity:1}80%,100%{transform:translateY(8px);opacity:0}}
.dash{display:flex;flex-direction:column;height:min(640px,calc(100svh - 190px));min-height:500px;border-radius:24px;background:#fff;border:1px solid var(--line);overflow:hidden;
  box-shadow:0 0 0 8px rgba(123,97,255,.05),0 50px 110px -50px rgba(40,25,130,.5),0 20px 40px -30px rgba(40,25,130,.3)}
.dash-chrome{display:grid;grid-template-columns:90px 1fr 90px;align-items:center;height:46px;padding:0 16px;background:#f8f7fc;border-bottom:1px solid var(--line)}
.dash-url{justify-self:center;display:inline-flex;align-items:center;gap:8px;padding:5px 14px;border-radius:9px;font-size:13px;color:var(--muted);background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.dash-url .icon{width:13px;height:13px;color:#16a34a}
.dash-badge{justify-self:end;font-size:11.5px;color:var(--muted);padding:2px 8px;border-radius:999px;background:var(--mist-2)}
.dash-body{flex:1;min-height:0;display:grid;grid-template-columns:236px minmax(0,1fr)}
.dash-side{display:flex;flex-direction:column;gap:18px;padding:18px 14px;background:#fbfafe;border-right:1px solid var(--line)}
.dash-model{display:flex;align-items:center;gap:10px;padding:4px 6px}
.dash-model b{display:block;font-size:14px;font-weight:500}
.dash-model small{display:block;font-size:12px;color:var(--muted)}
.dash-nav{display:flex;flex-direction:column;gap:3px}
.dash-tab{position:relative;display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:11px;font-size:14px;color:var(--muted);text-align:left;overflow:hidden;transition:background .3s,color .3s,box-shadow .3s}
.dash-tab .icon{width:17px;height:17px}
.dash-tab:hover{color:var(--ink)}
.dash-tab.is-active{color:var(--ink);background:#fff;box-shadow:0 1px 2px rgba(23,20,47,.06),0 0 0 1px var(--line)}
.dash-tab.is-active .icon{color:var(--violet)}
.dash-prog{position:absolute;left:12px;right:12px;bottom:4px;height:2px;border-radius:2px;overflow:hidden;opacity:0;transition:opacity .3s}
.dash-tab.is-active .dash-prog{opacity:1;background:var(--mist-2)}
.dash-prog i{display:block;height:100%;transform-origin:0 50%;transform:scaleX(var(--p,0));background:linear-gradient(90deg,#7e9bff,#8a4dff)}
.dash-foot{margin-top:auto;display:flex;align-items:center;gap:8px;padding:6px;font-size:12.5px;color:var(--muted)}
.live{width:8px;height:8px;border-radius:50%;background:#22c55e;animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(34,197,94,.5)}50%{box-shadow:0 0 0 5px rgba(34,197,94,0)}}
.dash-main{position:relative;overflow:hidden}
.dash-panel{position:absolute;inset:0;padding:26px 30px;overflow:auto;opacity:0;visibility:hidden;transform:translateY(18px) scale(.985);transition:opacity .5s var(--ease),transform .8s var(--ease),visibility 0s .5s}
.dash-panel.is-active{opacity:1;visibility:visible;transform:none;transition:opacity .5s var(--ease),transform .8s var(--ease),visibility 0s}
.p-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.p-head small{font-size:12.5px;color:var(--muted)}
.p-head h4{margin-top:2px;font-size:22px;letter-spacing:-.03em}
.pill{display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:999px;font-size:12.5px;font-weight:500;color:var(--ink-2);background:var(--mist-2);white-space:nowrap}
.pill-ok{color:#15803d;background:#e8f8ef}
.pill-ok i{width:7px;height:7px;border-radius:50%;background:#22c55e;animation:pulse 2s infinite}
.chk-list{display:grid;gap:8px;margin-top:20px}
.chk{display:grid;grid-template-columns:26px minmax(0,220px) 1fr;align-items:center;gap:12px;padding:12px 14px;border-radius:13px;border:1px solid var(--line);font-size:14px;opacity:0;transform:translateX(-10px)}
.chk b{font-weight:500}
.chk>span:last-child{color:var(--muted);font-size:13.5px}
.chk-ico{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;color:#16a34a;background:#e8f8ef}
.chk-ico .icon{width:14px;height:14px;stroke-width:2.6;stroke-dasharray:24;stroke-dashoffset:24}
.dash-panel.is-active .chk{animation:chkIn .55s var(--ease) forwards;animation-delay:calc(var(--i) * .16s + .15s)}
.dash-panel.is-active .chk-ico .icon{animation:draw .5s var(--ease) forwards;animation-delay:calc(var(--i) * .16s + .45s)}
@keyframes chkIn{to{opacity:1;transform:none}}
@keyframes draw{to{stroke-dashoffset:0}}
.meta-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:10px;margin-top:16px}
.meta-grid>div{padding:12px 14px;border-radius:13px;background:var(--mist);min-width:0}
.meta-grid small{display:block;font-size:12px;color:var(--muted)}
.meta-grid code{font-size:12.5px;overflow-wrap:anywhere}
.meta-grid b{font-weight:500;font-size:15px}
.seg{display:inline-flex;padding:3px;border-radius:10px;background:var(--mist-2)}
.seg button{padding:5px 12px;border-radius:8px;font-size:13px;color:var(--muted);transition:all .3s}
.seg button.is-on{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(23,20,47,.1)}
.mon-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:18px 0 12px}
.mon-stats>div{padding:12px 14px;border-radius:13px;background:var(--mist)}
.mon-stats small{display:block;font-size:12px;color:var(--muted)}
.mon-stats b{font-size:20px;font-weight:500;letter-spacing:-.02em}
.mon-chart{height:170px;padding:10px 0;border-radius:14px;border:1px solid var(--line)}
.mon-chart svg{width:100%;height:100%;overflow:visible}
.mon-grid path{stroke:#efedf6;vector-effect:non-scaling-stroke}
.mon-line{fill:none;stroke:#6b5cff;stroke-width:2.5;vector-effect:non-scaling-stroke;stroke-dasharray:100;stroke-dashoffset:100}
.dash-panel.is-active .mon-line{transition:stroke-dashoffset 1.8s var(--ease) .2s;stroke-dashoffset:0}
.mon-bars{margin-top:12px}
.mon-bars small{font-size:12px;color:var(--muted)}
.mon-bars>div{display:flex;align-items:flex-end;gap:4px;height:56px;margin-top:6px}
.mon-bars i{flex:1;height:var(--h);border-radius:4px 4px 2px 2px;background:linear-gradient(180deg,#b9acff,#7b61ff);transform:scaleY(0);transform-origin:50% 100%}
.dash-panel.is-active .mon-bars i{transition:transform .7s var(--spring);transition-delay:calc(var(--i) * 28ms + .3s);transform:none}
.ver-table{margin-top:20px;border:1px solid var(--line);border-radius:15px;overflow:hidden}
.ver-row{display:grid;grid-template-columns:60px 1fr 110px 110px;align-items:center;gap:10px;padding:14px 16px;border-top:1px solid var(--line);font-size:14px;transition:background .4s}
.ver-row:first-child{border-top:0}
.ver-tag{font:600 14px var(--mono)}
.ver-desc{color:var(--ink-2)}
.ver-state{font-size:13px;color:var(--muted)}
.ver-row.is-live{background:linear-gradient(90deg,rgba(123,97,255,.07),transparent)}
.ver-row.is-live .ver-state{color:#15803d;font-weight:500}
.ver-act{justify-self:end;padding:6px 12px;border-radius:999px;font-size:13px;font-weight:500;box-shadow:inset 0 0 0 1px var(--line-2);transition:all .3s}
.ver-act:hover{box-shadow:inset 0 0 0 1px #b9adff;color:var(--violet-ink)}
.ver-row.is-live .ver-act{color:#fff;background:linear-gradient(135deg,#22c55e,#16a34a);box-shadow:none;pointer-events:none}
.ver-note{margin-top:14px;font-size:13.5px;color:var(--muted)}
.ver-hint{display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:14px;margin-top:22px;padding:16px 18px;border-radius:15px;background:radial-gradient(80% 120% at 0% 0%,rgba(176,150,255,.22),transparent 70%),var(--mist)}
.ver-hint b{font-weight:500;font-size:14.5px}
.ver-hint p{font-size:13.5px;color:var(--muted)}
.ver-hint code{padding:8px 12px;border-radius:10px;font-size:12.5px;color:#ebe7ff;background:#120e31;white-space:nowrap}
.btn-mini{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;font-size:13px;font-weight:500;color:#fff;background:linear-gradient(180deg,#7e9bff,#5a5cff);box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}
.btn-mini .icon{width:14px;height:14px}
.key-list{margin-top:20px;border:1px solid var(--line);border-radius:15px;overflow:hidden}
.key-row{display:grid;grid-template-columns:30px 1fr minmax(0,auto) 70px;align-items:center;gap:12px;padding:13px 16px;border-top:1px solid var(--line);font-size:14px}
.key-row:first-child{border-top:0}
.key-ico{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;color:var(--violet);background:#f1edff}
.key-ico .icon{width:15px;height:15px}
.key-row code{font-size:12.5px;color:var(--ink-2)}
.key-scope{justify-self:end;font:12px var(--mono);color:var(--muted);padding:2px 8px;border-radius:999px;background:var(--mist)}
.member-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.member{display:inline-flex;align-items:center;gap:8px;padding:5px 12px 5px 5px;border-radius:999px;font-size:13.5px;background:var(--mist)}
.member .vt-av{width:28px;height:28px;font-size:10.5px}
.member .vt-av::after{display:none}
.log{height:calc(100% - 64px);min-height:300px;margin-top:18px;padding:16px 18px;border-radius:15px;background:radial-gradient(70% 60% at 100% 0%,rgba(123,97,255,.22),transparent 70%),#100c2e;font:12.5px/1.95 var(--mono);color:#ddd8ff;overflow:hidden}
.log p{opacity:0;transform:translateX(-6px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dash-panel.is-active .log p{animation:chkIn .35s var(--ease) forwards;animation-delay:calc(var(--i) * .22s + .2s)}
.log-t{color:#8a85b8;margin-right:14px}

/* 14 ─ mini features */
.minis{display:grid;grid-template-columns:repeat(3,1fr);margin-top:84px;border-top:1px solid var(--line)}
.mini{display:flex;gap:14px;padding:30px 26px 30px 0;border-bottom:1px solid var(--line)}
.mini:not(:nth-child(3n+1)){padding-left:26px;border-left:1px solid var(--line)}
.mini p{font-size:15.5px;color:var(--muted);line-height:1.5}
.mini b{color:var(--ink);font-weight:500}
.mini-ico{width:38px;height:38px;flex:none;border-radius:12px;display:grid;place-items:center;color:var(--violet-ink);background:linear-gradient(180deg,#fff,#f3f0ff);box-shadow:inset 0 0 0 1px #e4ddff,0 4px 10px -6px rgba(81,54,232,.35)}
.mini-ico .icon{width:18px;height:18px}

/* 15 ─ cta + marquee */
.cta-sec{padding:20px 0 110px}
.cta-panel{position:relative;overflow:hidden;border-radius:38px;padding:110px 32px 0;text-align:center;background:radial-gradient(90% 80% at 50% 0%,#2b1c80,#150f45 55%,var(--night));box-shadow:0 60px 120px -60px rgba(60,40,200,.65)}
.lights-cta .l1{top:-560px}.lights-cta .l2{top:200px;left:-360px}.lights-cta .l3{top:160px;right:-360px}.lights-cta .l4{top:420px}
.cta-copy{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center}
.cta-copy h2{margin-top:22px;max-width:900px}
.cta-copy .lead{margin-top:20px;max-width:520px}
.cta-copy .cta-row{margin-top:32px}
.marquee{position:relative;z-index:1;display:flex;flex-direction:column;gap:14px;margin:84px -32px 0;padding-bottom:56px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
.mq-row{overflow:hidden}
.mq-track{display:flex;gap:14px;width:max-content;animation:mq 46s linear infinite}
.mq-rev .mq-track{animation-direction:reverse;animation-duration:54s}
.marquee:hover .mq-track{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-33.3333%)}}
.mq-item{display:inline-flex;align-items:center;gap:12px;padding:10px 20px 10px 10px;border-radius:20px;font-size:15px;color:var(--on-dark-2);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);backdrop-filter:blur(6px)}
.mq-item .fw-tile{width:42px;height:42px;border-radius:12px;font-size:15px}

/* 16 ─ pricing */
.pricing{padding:30px 0 110px}
.bill{position:relative;display:grid;grid-template-columns:1fr 1fr;width:max-content;margin:0 auto 46px;padding:4px;border-radius:999px;background:var(--mist-2);box-shadow:inset 0 0 0 1px var(--line)}
.bill button{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:9px 20px;border-radius:999px;font-size:14px;font-weight:500;color:var(--muted);transition:color .3s}
.bill button.is-on{color:var(--ink)}
.bill button{white-space:nowrap}
.bill-save{padding:1px 7px;border-radius:999px;font-size:12px;color:#15803d;background:#e2f7ea}
.bill-pill{position:absolute;left:4px;top:4px;bottom:4px;width:calc(50% - 4px);border-radius:999px;background:#fff;box-shadow:0 2px 6px rgba(23,20,47,.1),0 0 0 1px rgba(23,20,47,.04);transform:translateX(var(--bx,0));transition:transform .55s var(--spring)}
.bill.is-y .bill-pill{--bx:100%}
.plans{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;align-items:stretch}
.plan{position:relative;display:flex;flex-direction:column;padding:28px 24px;border-radius:26px;background:#fff;border:1px solid var(--line);box-shadow:0 1px 2px rgba(23,20,47,.04);transition:transform .6s var(--ease),box-shadow .6s}
.plan:hover{transform:translateY(-4px);box-shadow:0 30px 60px -36px rgba(50,30,140,.4)}
.plan h3{font-size:20px}
.plan-blurb{margin-top:6px;min-height:46px;font-size:14.5px;line-height:1.5;color:var(--muted)}
.price{display:flex;align-items:baseline;gap:4px;margin:22px 0 22px;min-height:62px}
.price-cur{align-self:flex-start;margin-top:8px;font-size:22px;font-weight:500;color:var(--ink-2)}
.price-num{font-size:54px;font-weight:500;letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums}
.price-custom{font-size:42px;font-weight:500;letter-spacing:-.04em;line-height:1.15}
.price-per{margin-left:4px;font-size:14px;color:var(--muted)}
.plan .btn{width:100%}
.plan-lead{margin:26px 0 12px;font-size:13.5px;font-weight:500;color:var(--ink)}
.plan ul{display:flex;flex-direction:column;gap:10px}
.plan li{display:flex;gap:10px;font-size:14.5px;line-height:1.45;color:var(--ink-2)}
.plan li .icon{width:16px;height:16px;margin-top:2px;color:var(--violet);stroke-width:2.2}
.plan-hot{border:1.5px solid transparent;background:radial-gradient(120% 60% at 50% 0%,rgba(123,97,255,.1),transparent 60%) padding-box,linear-gradient(#fff,#fff) padding-box,linear-gradient(160deg,#8a6dff,#3d7bff 45%,#ff78b9) border-box;box-shadow:0 30px 70px -36px rgba(91,70,255,.6)}
.plan-badge{position:absolute;top:-12px;right:20px;padding:4px 11px;border-radius:999px;font-size:12px;font-weight:600;color:#fff;background:linear-gradient(135deg,#8a6dff,#5a5cff);box-shadow:0 8px 18px -8px rgba(91,70,255,.9)}

/* 17 ─ faq */
.faq{padding:30px 0 110px}
.qa-list{max-width:820px;margin:0 auto;border-top:1px solid var(--line)}
.qa{border-bottom:1px solid var(--line)}
.qa summary{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 4px;font-size:17.5px;font-weight:500;letter-spacing:-.015em;cursor:pointer;list-style:none;transition:color .3s}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{color:var(--violet-ink)}
.qa-ico{width:32px;height:32px;flex:none;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 1px var(--line-2);transition:transform .5s var(--ease),background .3s,color .3s,box-shadow .3s}
.qa-ico .icon{width:16px;height:16px}
.qa[open] .qa-ico{transform:rotate(135deg);color:#fff;background:var(--ink);box-shadow:none}
.qa-a{overflow:hidden}
.qa-a p{padding:0 56px 24px 4px;color:var(--muted);max-width:70ch}
.faq-more{margin-top:32px;text-align:center;color:var(--muted)}
.faq-more a,.prose a,.fine a{color:var(--violet-ink);text-decoration:underline;text-decoration-color:rgba(81,54,232,.3);text-underline-offset:3px;transition:text-decoration-color .3s}
.faq-more a:hover,.prose a:hover{text-decoration-color:currentColor}

/* 18 ─ notebook panel ("already in a notebook?") */
.simpler{padding:10px 0 120px}
.simpler-head{text-align:center}
.simpler-head h2{font-size:clamp(32px,4vw,50px)}
.simpler-head p{display:inline-flex;align-items:center;gap:8px;margin-top:12px;font-size:18px;color:var(--muted)}
.simpler-head .icon{width:18px;height:18px;animation:nudge 2s var(--ease) infinite}
@keyframes nudge{50%{transform:translateY(4px)}}
.nb-panel{position:relative;overflow:hidden;isolation:isolate;display:grid;grid-template-columns:1fr 1.05fr;gap:48px;align-items:center;margin-top:44px;padding:60px;border-radius:36px;background:#f4f1ff;border:1px solid #e6e0fb}
.nb-panel-bg{position:absolute;inset:0;z-index:-1}
.nb-panel-bg i{position:absolute;border-radius:50%}
.nb-panel-bg i:nth-child(1){width:900px;height:700px;left:-320px;top:-360px;background:radial-gradient(closest-side,rgba(176,150,255,.75),transparent);animation:drift1 20s ease-in-out infinite alternate}
.nb-panel-bg i:nth-child(2){width:800px;height:700px;right:-260px;bottom:-380px;background:radial-gradient(closest-side,rgba(120,190,255,.7),transparent);animation:drift3 22s ease-in-out infinite alternate}
.nb-panel-bg i:nth-child(3){width:600px;height:500px;right:10%;top:-300px;background:radial-gradient(closest-side,rgba(255,170,215,.65),transparent);animation:drift2 24s ease-in-out infinite alternate}
.nb-copy h3{margin-top:20px;font-size:clamp(32px,3.6vw,46px);line-height:1.06;letter-spacing:-.042em}
.nb-copy>p{margin-top:16px;max-width:44ch;font-size:17px;color:var(--ink-2)}
.ticks{display:flex;flex-direction:column;gap:12px;margin:26px 0 32px}
.ticks li{display:flex;align-items:center;gap:11px;font-size:15.5px}
.ticks .icon{width:22px;height:22px;padding:4px;border-radius:50%;color:#fff;background:linear-gradient(150deg,#9ab6ff,#6b5cff);stroke-width:2.6}
.nb-copy .cta-row{justify-content:flex-start}
.nb-shot{border-radius:18px;overflow:hidden;background:#fff;box-shadow:0 0 0 1px rgba(23,20,47,.06),0 50px 90px -40px rgba(50,30,140,.55);transform:perspective(1400px) rotateY(-8deg) rotateX(4deg);transition:transform 1.2s var(--ease)}
.nb-shot:hover{transform:perspective(1400px) rotateY(-2deg) rotateX(1deg)}
.nbs-cell{display:grid;grid-template-columns:40px 1fr;gap:8px;padding:12px 16px 0}
.nbs-cell>span{font:12px/2.4 var(--mono);color:#9a96b3;text-align:right}
.nbs-cell pre{font:13.5px/1.65 var(--mono);padding:10px 12px;border-radius:9px;background:#f8f7fc;border:1px solid #eceaf4;overflow-x:auto}
.nbs-out{display:flex;align-items:center;gap:8px;margin:12px 16px 0 64px;font:13px var(--mono);color:var(--ink-2)}
.nbs-out .icon{width:16px;height:16px;color:var(--violet)}
.nbs-out b{margin-left:auto;font:500 12px var(--font);color:#15803d;padding:3px 9px;border-radius:999px;background:#e8f8ef}
.nbs-cmd{margin:14px 16px 0;padding:12px 14px;border-radius:11px;font:13.5px var(--mono);color:#e9e5ff;background:#130f33}
.nbs-cmd span{color:#8fb0ff;margin-right:6px}
.nbs-live{display:flex;align-items:center;gap:10px;margin:10px 16px 16px;padding:11px 14px;border-radius:11px;font-size:13.5px;color:#15803d;background:#effaf3;border:1px solid #cdeedb;opacity:0;transform:translateY(8px);transition:all .6s var(--spring)}
.nbs-live b{font:500 12.5px var(--mono);overflow-wrap:anywhere}
.nbs-live .icon{width:18px;height:18px;flex:none;padding:3px;border-radius:50%;color:#fff;background:#22c55e;stroke-width:2.8}
.nb-shot.is-live .nbs-live{opacity:1;transform:none}

/* 19 ─ footer */
.ftr{padding:96px 0 0;overflow:hidden;color:var(--on-dark-2)}
.ftr-glow{position:absolute;inset:0;z-index:-1;background:radial-gradient(60% 55% at 50% 0%,rgba(123,97,255,.24),transparent 70%),radial-gradient(40% 50% at 100% 100%,rgba(61,123,255,.22),transparent 70%),radial-gradient(40% 50% at 0% 100%,rgba(198,108,255,.2),transparent 70%)}
.ftr-top{display:grid;grid-template-columns:1fr 2.6fr;gap:48px}
.ftr .wordmark{font-size:22px;color:#fff}
.ftr-brand p{margin-top:12px;max-width:24ch;color:var(--on-dark-3)}
.ftr-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.ftr-col h3{margin-bottom:14px;font-size:13.5px;font-weight:500;color:var(--on-dark)}
.ftr-col a{display:block;width:max-content;max-width:100%;padding:5px 0;font-size:14.5px;color:var(--on-dark-3);transition:color .25s,transform .35s var(--ease)}
.ftr-col a:hover{color:#fff;transform:translateX(2px)}
.ftr-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:72px;padding:24px 0;border-top:1px solid rgba(255,255,255,.08);font-size:13.5px;color:var(--on-dark-3)}
.ftr-word{position:relative;z-index:0;margin-top:-10px;margin-bottom:-.2em;text-align:center;white-space:nowrap;font-size:clamp(90px,21vw,320px);font-weight:600;letter-spacing:-.065em;line-height:1;user-select:none;
  background:linear-gradient(180deg,rgba(176,150,255,.3),rgba(176,150,255,.02) 80%);-webkit-background-clip:text;background-clip:text;color:transparent}

/* 20 ─ inner pages */
.phero{padding:calc(var(--hdr-h) + 84px) 0 0;text-align:center;overflow:hidden;background:radial-gradient(100% 70% at 50% -10%,#2c1c80 0%,#170f48 45%,var(--night) 80%)}
.phero-inner{display:flex;flex-direction:column;align-items:center}
.phero h1{margin-top:22px;max-width:900px}
.phero .lead{margin-top:20px;max-width:580px}
.phero .cta-row{margin-top:30px}
.phero .horizon{margin-top:-30px}
.band{padding:20px 0 110px}
.pipe{display:grid;grid-template-columns:1fr 1.1fr 1fr 1.1fr 1fr;align-items:center;gap:0;padding:40px;border-radius:30px;background:radial-gradient(60% 80% at 50% 0%,rgba(190,175,255,.3),transparent 70%),var(--mist);border:1px solid var(--line)}
.pipe-node{display:flex;flex-direction:column;align-items:center;gap:6px;padding:22px 14px;text-align:center;border-radius:20px;background:#fff;border:1px solid var(--line);box-shadow:0 20px 40px -26px rgba(50,30,140,.4)}
.pipe-node>.icon{width:44px;height:44px;padding:11px;border-radius:13px;color:#fff;background:linear-gradient(150deg,#9ab6ff,#6b5cff 55%,#8a4dff);margin-bottom:6px;box-shadow:0 10px 20px -8px rgba(107,92,255,.8)}
.pipe-node b{font-size:15px;font-weight:500}
.pipe-node span{font-size:13px;color:var(--muted)}
.pipe-mid>.icon{background:linear-gradient(150deg,#ffb3dc,#c66cff 55%,#7b61ff)}
.pipe-link{position:relative;height:2px;margin:0 4px;background:var(--line-2);display:flex;justify-content:center}
.pipe-link i{position:absolute;left:0;top:-3px;width:8px;height:8px;border-radius:50%;background:var(--violet);box-shadow:0 0 0 4px rgba(123,97,255,.18);animation:travel 2.4s var(--ease-io) infinite}
.pipe-link:nth-of-type(4) i{animation-delay:1.2s}
@keyframes travel{0%{left:0;opacity:0}15%{opacity:1}85%{opacity:1}100%{left:calc(100% - 8px);opacity:0}}
.pipe-link span{position:absolute;top:12px;white-space:nowrap;font:12px var(--mono);color:var(--muted)}
.flow{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding-bottom:100px;counter-reset:f}
.flow-step{position:relative;padding:30px;border-radius:28px;background:var(--mist);border:1px solid var(--line);display:flex;flex-direction:column}
.flow-n{position:absolute;right:26px;top:22px;font:500 64px/1 var(--font);letter-spacing:-.06em;background:linear-gradient(180deg,rgba(123,97,255,.3),rgba(123,97,255,0));-webkit-background-clip:text;background-clip:text;color:transparent}
.flow-ico{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;color:#fff;background:linear-gradient(150deg,#9ab6ff,#6b5cff 55%,#8a4dff);box-shadow:0 10px 20px -8px rgba(107,92,255,.8)}
.flow-ico .icon{width:21px;height:21px}
.flow-step h3{margin-top:20px;font-size:23px;letter-spacing:-.03em}
.flow-step p{margin:10px 0 22px;color:var(--muted);font-size:15.5px}
.flow-step .code{margin-top:auto}
.code{border-radius:15px;overflow:hidden;background:radial-gradient(70% 90% at 100% 0%,rgba(123,97,255,.25),transparent 60%),#120e31;box-shadow:0 0 0 1px rgba(23,20,47,.08),0 18px 36px -22px rgba(30,15,90,.6);margin:18px 0 22px}
.code-top{display:flex;justify-content:space-between;align-items:center;padding:8px 10px 8px 16px;border-bottom:1px solid rgba(255,255,255,.07);font:12px var(--mono);color:#8f8ab5}
.copy{display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border-radius:7px;font-size:12px;color:#c9c3f2;transition:background .25s,color .25s}
.copy:hover{background:rgba(255,255,255,.08);color:#fff}
.copy .icon{width:13px;height:13px}
.copy.is-done{color:#5be49b}
.code pre{padding:15px 18px;overflow-x:auto;font:14px/1.7 var(--mono);color:#ebe7ff}
.fw-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding-bottom:40px}
.fw-card{position:relative;padding:26px;border-radius:24px;background:radial-gradient(90% 60% at 0% 0%,color-mix(in oklab,var(--c) 22%,transparent),transparent 70%),var(--mist);border:1px solid var(--line);transition:transform .6s var(--ease)}
.fw-card:hover{transform:translateY(-4px)}
.fw-card:hover .fw-tile{transform:rotate(-8deg) scale(1.06)}
.fw-card .fw-tile{transition:transform .6s var(--spring)}
.fw-card h2{margin-top:22px;font-size:22px;letter-spacing:-.03em;background:none;color:var(--ink)}
.fw-card p{margin-top:8px;font-size:14.5px;color:var(--muted)}
.cmp-cards{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.cmp-card{position:relative;padding:32px;border-radius:28px;border:1px solid var(--line);background:var(--mist)}
.cmp-card small{font-size:13.5px;font-weight:500;color:var(--muted)}
.cmp-card h3{margin-top:8px;font-size:28px;letter-spacing:-.035em}
.cmp-card p{margin-top:12px;color:var(--muted)}
.cmp-card code{display:inline-block;margin-top:14px;padding:8px 12px;border-radius:10px;font-size:14px;color:#ebe7ff;background:#120e31}
.cmp-card-us{border:1.5px solid transparent;background:radial-gradient(90% 70% at 100% 0%,rgba(123,97,255,.14),transparent 60%) padding-box,linear-gradient(#fff,#fff) padding-box,linear-gradient(150deg,#8a6dff,#3d7bff 50%,#ff78b9) border-box;box-shadow:0 30px 60px -36px rgba(91,70,255,.5)}
.cmp-card-us small{color:var(--violet-ink)}
.cmp-table-wrap{margin-top:40px;overflow-x:auto;border-radius:24px;border:1px solid var(--line)}
.cmp-table{width:100%;min-width:640px;border-collapse:collapse;font-size:15px}
.cmp-table th,.cmp-table td{padding:17px 20px;text-align:left;vertical-align:middle;border-top:1px solid var(--line)}
.cmp-table thead th{border-top:0;font-size:13.5px;font-weight:500;color:var(--muted);background:#fbfafe}
.cmp-table thead th:last-child{color:var(--violet-ink)}
.cmp-table tbody th{font-weight:500;width:22%}
.cmp-table td{width:39%}
.cmp-diy{color:var(--muted)}
.cmp-us{background:linear-gradient(90deg,rgba(123,97,255,.06),rgba(123,97,255,.02))}
.cmp-x,.cmp-v{display:inline-grid;place-items:center;width:22px;height:22px;margin-right:10px;border-radius:50%;vertical-align:-5px}
.cmp-x{color:#9a96b3;background:var(--mist-2)}.cmp-v{color:#fff;background:linear-gradient(150deg,#9ab6ff,#6b5cff)}
.cmp-x .icon,.cmp-v .icon{width:12px;height:12px;stroke-width:2.6}
.fine{margin:18px 0 110px;font-size:13.5px;color:var(--muted);text-align:center}
.prose{max-width:720px;font-size:17px;line-height:1.75;color:var(--ink-2);min-width:0}
.prose h1{font-size:clamp(36px,4vw,48px);color:var(--ink)}
.prose h2{margin:52px 0 14px;font-size:clamp(24px,2.4vw,30px);line-height:1.2;letter-spacing:-.03em;color:var(--ink);background:none;scroll-margin-top:110px}
.prose h2:first-child,.prose .updated+.callout+h2{margin-top:10px}
.prose p{margin:0 0 18px}
.prose :not(pre)>code{font-size:.88em;padding:.15em .42em;border-radius:6px;background:#f1eefb;color:var(--violet-ink)}
.prose .btn{margin-top:10px}
.prose-center{margin:0 auto 110px}
.lead-p{font-size:19px;color:var(--muted);margin:10px 0 30px!important}
.crumbs{font-size:13.5px;color:var(--muted);margin-bottom:12px!important}
.crumbs a{text-decoration:none!important;color:var(--muted)!important}
.callout{display:flex;gap:12px;align-items:flex-start;margin:22px 0;padding:16px 18px;border-radius:15px;background:#f5f2ff;border:1px solid #e6e0fb;font-size:15.5px}
.callout p{margin:0!important}
.callout .icon{width:20px;height:20px;margin-top:3px;color:var(--violet)}
.callout-warn{background:#fff8eb;border-color:#f3e1b4}
.callout-warn .icon{color:#c27a06}
.updated{font-size:14px;color:var(--muted)}
.docs-hero{padding:calc(var(--hdr-h) + 72px) 0 0;text-align:center;overflow:hidden;background:radial-gradient(100% 70% at 50% -10%,#2c1c80,#170f48 45%,var(--night) 80%)}
.docs-hero-in{display:flex;flex-direction:column;align-items:center}
.docs-hero h1{margin-top:20px}
.docs-hero .horizon{margin-top:-60px}
.docs-search{position:relative;z-index:2;display:flex;align-items:center;gap:10px;width:min(560px,100%);height:54px;margin-top:30px;padding:0 10px 0 18px;border-radius:15px;color:var(--on-dark-2);background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 20px 40px -20px rgba(5,2,25,.8);backdrop-filter:blur(14px)}
.docs-search .icon{width:18px;height:18px}
.docs-search input{flex:1;min-width:0;height:100%;border:0;outline:0;background:transparent;color:#fff;font-size:16px}
.docs-search input::placeholder{color:var(--on-dark-3)}
.docs-search:focus-within{box-shadow:inset 0 0 0 1px rgba(176,150,255,.7),0 0 0 4px rgba(123,97,255,.25)}
.docs-search kbd{padding:2px 8px;border-radius:6px;font-size:12px;color:var(--on-dark-3);background:rgba(255,255,255,.08)}
.docs{padding:10px 0 110px}
.docs-grid{display:grid;grid-template-columns:210px minmax(0,1fr) 200px;gap:56px;align-items:start}
.docs-side,.docs-toc{position:sticky;top:110px}
.docs-group+.docs-group{margin-top:26px}
.docs-group h3,.docs-toc h3{margin-bottom:10px;font-size:13px;font-weight:600;color:var(--ink);letter-spacing:-.005em}
.docs-group a{display:block;margin-left:-10px;padding:6px 10px;border-radius:8px;font-size:14.5px;color:var(--muted);transition:background .25s,color .25s}
.docs-group a:hover{color:var(--ink);background:var(--mist)}
[data-toc] a{display:block;padding:5px 0 5px 14px;border-left:1.5px solid var(--line);font-size:13.5px;color:var(--muted);transition:color .25s,border-color .25s}
[data-toc] a:hover{color:var(--ink)}
[data-toc] a.is-current{color:var(--violet-ink);border-color:var(--violet)}
.toc-prog{margin-top:18px;height:3px;border-radius:3px;background:var(--mist-2);overflow:hidden}
.toc-prog i{display:block;height:100%;transform-origin:0 50%;transform:scaleX(var(--p,0));background:linear-gradient(90deg,#7e9bff,#8a4dff)}
.prose .dim{opacity:.25;transition:opacity .3s}
.fw-list{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:0 0 20px}
.fw-list li{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:var(--mist);font-size:15px}
.doc-next{margin-top:40px}
.doc-next a{display:flex;align-items:center;gap:14px;padding:20px 22px;border-radius:18px;border:1px solid var(--line);text-decoration:none!important;color:var(--ink)!important;transition:border-color .3s,transform .4s var(--ease)}
.doc-next a:hover{border-color:#c9bdff;transform:translateY(-2px)}
.doc-next small{display:block;font-size:13px;color:var(--muted)}
.doc-next b{flex:1;font-weight:500}
.doc-next .icon{width:18px;height:18px;color:var(--violet)}
/* blog */
.blog{padding-bottom:110px}
.cover{position:relative;overflow:hidden;height:200px;isolation:isolate;
  background:radial-gradient(70% 90% at 0% 0%,hsl(calc(var(--h) - 40) 95% 74%),transparent 62%),radial-gradient(80% 90% at 100% 100%,hsl(calc(var(--h) + 50) 90% 66%),transparent 62%),linear-gradient(135deg,hsl(var(--h) 72% 30%),hsl(calc(var(--h) + 20) 85% 52%))}
.cover i{position:absolute;border-radius:50%;transition:transform 1.4s var(--ease)}
.cv1{width:340px;height:340px;right:-90px;top:-150px;border:1px solid rgba(255,255,255,.35);box-shadow:0 0 0 40px rgba(255,255,255,.05),0 0 0 80px rgba(255,255,255,.04)}
.cv2{width:260px;height:260px;left:-60px;bottom:-140px;background:radial-gradient(closest-side,rgba(255,255,255,.4),transparent)}
.cv3{inset:0!important;border-radius:0!important;background-image:linear-gradient(rgba(255,255,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.12) 1px,transparent 1px);background-size:28px 28px;-webkit-mask-image:radial-gradient(60% 70% at 50% 50%,#000,transparent);mask-image:radial-gradient(60% 70% at 50% 50%,#000,transparent)}
.cover-ico{position:absolute;left:50%;top:50%;width:68px;height:68px;margin:-34px 0 0 -34px;border-radius:20px;display:grid;place-items:center;color:#fff;background:rgba(255,255,255,.18);box-shadow:inset 0 0 0 1px rgba(255,255,255,.4),0 20px 40px -12px rgba(20,8,60,.5);backdrop-filter:blur(10px);transition:transform 1s var(--spring)}
.cover-ico .icon{width:30px;height:30px}
.cover-lg{height:100%;min-height:320px}
.cover-lg .cover-ico{width:92px;height:92px;margin:-46px 0 0 -46px;border-radius:26px}
.cover-lg .cover-ico .icon{width:40px;height:40px}
a:hover>.cover .cv1,a:hover .cover .cv1{transform:scale(1.15) rotate(10deg)}
a:hover>.cover .cv2,a:hover .cover .cv2{transform:translate(30px,-20px)}
a:hover>.cover .cover-ico,a:hover .cover .cover-ico{transform:scale(1.08) rotate(-6deg)}
.post-feat{position:relative;display:grid;grid-template-columns:1.25fr 1fr;border-radius:30px;overflow:hidden;background:var(--mist);border:1px solid var(--line)}
.post-feat-copy{display:flex;flex-direction:column;justify-content:center;padding:44px}
.post-feat h2{margin-top:12px;font-size:clamp(28px,3vw,38px);letter-spacing:-.04em;line-height:1.1;background:none;color:var(--ink)}
.post-feat p{margin-top:12px;color:var(--muted);font-size:16.5px}
.post-cat{font-size:13.5px;font-weight:500;color:var(--violet-ink)}
.dark .post-cat{color:#c8b9ff}
.post-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:22px;font-size:13.5px;color:var(--muted)}
.post-go{display:inline-flex;align-items:center;gap:6px;color:var(--ink);font-weight:500}
.post-go .icon{width:16px;height:16px;transition:transform .4s var(--ease)}
.post-feat:hover .post-go .icon{transform:translateX(4px)}
.blog-bar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;margin:56px 0 22px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{padding:8px 15px;border-radius:999px;font-size:14px;color:var(--muted);box-shadow:inset 0 0 0 1px var(--line-2);transition:all .3s}
.chip:hover{color:var(--ink)}
.chip.is-on{color:#fff;background:var(--ink);box-shadow:none}
.blog-search{display:flex;align-items:center;gap:8px;height:42px;padding:0 14px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line-2);color:var(--muted);width:min(300px,100%)}
.blog-search:focus-within{box-shadow:inset 0 0 0 1px var(--violet),0 0 0 4px rgba(123,97,255,.14)}
.blog-search .icon{width:16px;height:16px}
.blog-search input{flex:1;min-width:0;border:0;outline:0;background:transparent;font-size:14.5px}
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.post{position:relative;display:flex;flex-direction:column;border-radius:24px;overflow:hidden;background:#fff;border:1px solid var(--line);transition:transform .6s var(--ease),box-shadow .6s}
.post:hover{transform:translateY(-4px);box-shadow:0 30px 60px -36px rgba(50,30,140,.45)}
.post-copy{display:flex;flex-direction:column;flex:1;padding:20px 22px 22px}
.post h3{margin-top:8px;font-size:20px;line-height:1.25;letter-spacing:-.025em}
.post p{margin-top:8px;font-size:15px;color:var(--muted)}
.post .post-meta{margin-top:auto;padding-top:16px}
.post.is-hidden{display:none}
.empty{margin-top:30px;text-align:center;color:var(--muted)}
.read-prog{position:fixed;left:0;right:0;top:0;z-index:150;height:3px;pointer-events:none}
.read-prog i{display:block;height:100%;transform-origin:0 50%;transform:scaleX(var(--p,0));background:linear-gradient(90deg,#64b5ff,#8a6dff,#ff78b9)}
.art-hero{padding:calc(var(--hdr-h) + 72px) 0 0;text-align:center;overflow:hidden;background:radial-gradient(100% 70% at 50% -10%,#2c1c80,#170f48 45%,var(--night) 80%)}
.art-hero-in{display:flex;flex-direction:column;align-items:center}
.back{display:inline-flex;align-items:center;gap:8px;margin-bottom:24px;font-size:14px;color:var(--on-dark-2);transition:color .3s}
.back:hover{color:#fff}
.back .icon{width:15px;height:15px;transform:rotate(180deg)}
.art-hero h1{margin-top:14px;max-width:820px}
.art-hero .lead{margin-top:18px;max-width:600px}
.art-cover{position:relative;z-index:3;width:100%;max-width:900px;margin-top:46px;border-radius:26px;overflow:hidden;box-shadow:0 40px 80px -30px rgba(5,2,30,.8),0 0 0 1px rgba(255,255,255,.12);transform:perspective(1400px) rotateX(var(--rx,0deg)) scale(var(--sc,1));transform-origin:50% 100%}
.art-cover .cover{height:340px}
.art-hero .horizon{margin-top:-170px}
.art{padding:40px 0 110px}
.art-grid{display:grid;grid-template-columns:220px minmax(0,1fr);gap:64px;align-items:start}
.next-art{display:flex;align-items:center;gap:18px;margin-top:48px;padding:14px 22px 14px 14px;border-radius:22px;border:1px solid var(--line);text-decoration:none!important;color:var(--ink)!important;overflow:hidden;position:relative;transition:transform .5s var(--ease)}
.next-art:hover{transform:translateY(-3px)}
.next-art .cover{width:120px;height:84px;flex:none;border-radius:14px}
.next-art .cover-ico{width:38px;height:38px;margin:-19px 0 0 -19px;border-radius:11px}
.next-art .cover-ico .icon{width:18px;height:18px}
.next-art span{flex:1}
.next-art small{display:block;font-size:13px;color:var(--muted)}
.next-art b{font-weight:500;font-size:17px;line-height:1.3}
.next-art>.icon{width:20px;height:20px;color:var(--violet)}
.cl{max-width:940px;padding-bottom:110px}
.cl-entry{position:relative;display:grid;grid-template-columns:170px 40px minmax(0,1fr);padding-bottom:30px}
.cl-entry::before{content:'';position:absolute;left:189px;top:12px;bottom:-12px;width:1.5px;background:linear-gradient(180deg,var(--line-2),var(--line))}
.cl-entry:last-child::before{bottom:auto;height:60%;background:linear-gradient(180deg,var(--line-2),transparent)}
.cl-date{position:sticky;top:110px;align-self:start;padding-top:24px;font-size:14px;color:var(--muted)}
.cl-dot{position:relative;align-self:start;margin:28px auto 0;width:13px;height:13px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px var(--violet),0 0 0 7px rgba(123,97,255,.14)}
.cl-body{position:relative;padding:26px 28px;border-radius:24px;background:#fff;border:1px solid var(--line);box-shadow:0 1px 2px rgba(23,20,47,.04)}
.cl-tag{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12.5px;font-weight:600}
.cl-new{color:var(--violet-ink);background:#efeaff}.cl-improved{color:#1d63d6;background:#e7f0ff}
.cl-body h2{margin-top:12px;font-size:24px;letter-spacing:-.03em;background:none;color:var(--ink)}
.cl-body p{margin-top:8px;color:var(--muted)}
.cl-body ul{display:flex;flex-direction:column;gap:8px;margin-top:16px}
.cl-body li{display:flex;align-items:center;gap:10px;font-size:15px;color:var(--ink-2)}
.cl-body li .icon{width:16px;height:16px;color:var(--violet);stroke-width:2.2}
.statement{max-width:920px;margin:20px auto 64px;text-align:center;font-size:clamp(25px,3.2vw,40px);line-height:1.22;letter-spacing:-.035em;font-weight:500;color:var(--ink)}
.vals,.sec-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:80px}
.val{position:relative;padding:26px;border-radius:24px;background:#fff;border:1px solid var(--line);box-shadow:0 1px 2px rgba(23,20,47,.04)}
.val h3{margin-top:18px;font-size:19px;letter-spacing:-.025em}
.val p{margin-top:6px;font-size:15px;color:var(--muted)}
.val a{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-size:14.5px;font-weight:500;color:var(--violet-ink)}
.val a .icon{width:15px;height:15px;transition:transform .4s var(--ease)}
.val a:hover .icon{transform:translateX(3px)}
.report{position:relative;overflow:hidden;display:flex;justify-content:space-between;align-items:center;gap:30px;margin-bottom:110px;padding:40px;border-radius:30px;background:radial-gradient(60% 120% at 0% 0%,rgba(176,150,255,.45),transparent 70%),radial-gradient(60% 120% at 100% 100%,rgba(120,190,255,.4),transparent 70%),#f4f1ff;border:1px solid #e6e0fb}
.report h2{font-size:30px;background:none;color:var(--ink)}
.report p{margin-top:8px;max-width:56ch;color:var(--ink-2)}
.contact-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:28px;align-items:start;padding-bottom:110px}
.form{display:flex;flex-direction:column;gap:18px;padding:32px;border-radius:26px;background:#fff;border:1px solid var(--line);box-shadow:0 30px 60px -40px rgba(50,30,140,.4)}
.field label{display:block;margin-bottom:8px;font-size:14px;font-weight:500}
.field input,.field select,.field textarea{width:100%;height:48px;padding:0 14px;border-radius:13px;border:1px solid var(--line-2);background:#fbfafe;font-size:15px;outline:0;transition:border-color .25s,box-shadow .25s,background .25s;appearance:none}
.field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f6b8a' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:16px;padding-right:40px}
.field textarea{height:auto;padding:12px 14px;resize:vertical;line-height:1.5}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--violet);background:#fff;box-shadow:0 0 0 4px rgba(123,97,255,.14)}
.field .is-bad{border-color:#e5484d;box-shadow:0 0 0 4px rgba(229,72,77,.12)}
.form .btn{align-self:flex-start}
.form-err{color:#c22b30;font-size:14px}
.form-ok{display:flex;align-items:center;gap:8px;color:#15803d;font-size:14.5px}
.form-ok .icon{width:18px;height:18px}
.contact-side{display:flex;flex-direction:column;gap:16px}
.nf{min-height:100vh;min-height:100svh;display:grid;place-items:center;text-align:center;overflow:hidden;padding:120px 0 80px;background:radial-gradient(100% 70% at 50% -10%,#2c1c80,#170f48 45%,var(--night) 80%)}
.nf-in{display:flex;flex-direction:column;align-items:center}
.nf-code{font-size:clamp(120px,22vw,240px);font-weight:600;letter-spacing:-.07em;line-height:.9}
.nf h1{margin-top:8px;font-size:clamp(30px,4vw,46px)}
.nf .lead{margin-top:16px;max-width:460px}
.nf .cta-row{margin-top:28px}

/* 21 ─ motion utilities */
.js [data-reveal]{opacity:0;transform:translate3d(0,26px,0) scale(.985);filter:blur(6px);transition:opacity .9s var(--ease),transform 1.1s var(--ease),filter .9s var(--ease);transition-delay:calc(var(--d,0) * 70ms)}
.js [data-reveal].is-in{opacity:1;transform:none;filter:none}
.js .card[data-reveal].is-in,.js .plan[data-reveal].is-in,.js .post[data-reveal].is-in{transform:none}
.w{display:inline-block;white-space:nowrap}
.js .is-split .w>span{display:inline-block;opacity:0;transform:translate3d(0,.55em,0) rotate(3deg);filter:blur(10px);transform-origin:0 100%;transition:opacity .8s var(--ease),transform 1.1s var(--ease),filter .9s var(--ease);transition-delay:calc(var(--i) * 55ms + var(--base,0ms))}
.js .is-split.is-in .w>span{opacity:1;transform:none;filter:none}
.js .load-in{opacity:0;transform:translate3d(0,16px,0);filter:blur(4px);transition:opacity .9s var(--ease),transform 1.1s var(--ease),filter .9s var(--ease);transition-delay:calc(var(--d,0) * 70ms + 120ms)}
.js.is-loaded .load-in{opacity:1;transform:none;filter:none}
.js .scene-wrap{opacity:0;transition:opacity 1.4s var(--ease) 1.2s}
.js.is-loaded .scene-wrap{opacity:1}
html.is-paused *,html.is-paused *::before,html.is-paused *::after{animation-play-state:paused!important}


/* 24 ─ brain.md rebuild: new components */
.hero-note{margin-top:16px;font-size:13.5px;color:var(--on-dark-3)}
.cta-copy .hero-note{margin-top:14px}
/* notebook output lines */
.cell-out .ol{margin:0;opacity:0;transform:translateY(-3px);transition:opacity .35s,transform .35s var(--ease);white-space:pre-wrap}
.cell-out .ol.is-on{opacity:1;transform:none}
.cell-out{opacity:1;transform:none}
.cell:not(.is-done):not(.is-run) .cell-out{opacity:0}
.ol-ok{color:#15803d;font-weight:500}
.ol-key{color:#b45309}
.win-nb{width:660px}
/* web app window (hero step 2) */
.win-app{left:200px;top:72px;width:720px;height:470px;background:#fff;--bx:60px;--by:-30px;--hx:80px;--hy:50px}
.app-body{display:grid;grid-template-columns:150px 1fr;height:calc(100% - 36px)}
.app-side{display:flex;flex-direction:column;gap:4px;padding:16px 12px;background:#fbfafe;border-right:1px solid #eceaf4;font-size:13px;color:#6f6b8a}
.app-side b{font-size:14px;color:#17142f;font-weight:600;margin:0 0 12px 8px;letter-spacing:-.02em}
.app-side span{padding:7px 10px;border-radius:8px}
.app-side .on{background:#fff;color:#17142f;box-shadow:0 0 0 1px #eceaf4}
.app-main{padding:18px 22px;display:flex;flex-direction:column;gap:12px}
.app-main h5{margin:0;font-size:17px;font-weight:500;letter-spacing:-.02em;color:#17142f}
.drop{position:relative;height:92px;border-radius:12px;border:1.5px dashed #c9bfff;background:#faf8ff;display:grid;place-items:center;transition:border-color .4s,background .4s}
.drop>span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:10px;transition:opacity .4s,transform .5s var(--ease)}
.drop-empty{flex-direction:column;gap:4px!important;color:#6f6b8a;font-size:13px}
.drop-empty .icon{width:20px;height:20px;color:#7b61ff}
.drop-empty b{color:#17142f;font-weight:500}
.drop-empty small{font-size:11.5px}
.drop-file{opacity:0;transform:scale(.9);font-size:13.5px;color:#17142f}
.drop-file .icon{width:22px;height:22px;color:#7b61ff}
.drop-file small{color:#6f6b8a}
.drop-file em{font-style:normal;font:12px var(--mono);color:#5136e8;background:#efeaff;padding:3px 8px;border-radius:6px;margin-left:8px}
.drop.is-filled{border-style:solid;border-color:#e3ddff;background:#fff}
.drop.is-filled .drop-empty{opacity:0;transform:scale(.95)}
.drop.is-filled .drop-file{opacity:1;transform:none}
.pills{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:4px;border-radius:999px;background:#f3f2f8}
.pills span{position:relative;z-index:1;text-align:center;padding:6px 0;border-radius:999px;font-size:12.5px;color:#9a96b3;transition:color .4s}
.pills span.is-done{color:#5136e8}
.pills span.is-cur{color:#fff}
.pills-fill{position:absolute;left:4px;top:4px;bottom:4px;width:calc((100% - 8px - 18px) / 4);border-radius:999px;background:linear-gradient(180deg,#7e9bff,#6c4dff);box-shadow:0 4px 12px -4px rgba(91,70,255,.8);transform:translateX(calc(var(--pi,0) * (100% + 6px)));transition:transform .7s var(--spring),opacity .3s;opacity:0}
.pills.is-go .pills-fill{opacity:1}
.pills.is-live .pills-fill{background:linear-gradient(180deg,#34d27b,#16a34a);box-shadow:0 4px 12px -4px rgba(22,163,74,.8)}
.acts{display:flex;flex-direction:column;gap:5px;min-height:96px}
.acts p{margin:0;display:flex;align-items:center;gap:8px;font:12.5px var(--mono);color:#433f61;opacity:0;transform:translateX(-6px);transition:opacity .35s,transform .4s var(--ease)}
.acts p .icon{width:14px;height:14px;padding:2px;border-radius:50%;color:#fff;background:#22c55e;stroke-width:3}
.acts p.is-on{opacity:1;transform:none}
.live-box{display:grid;grid-template-columns:1.4fr 1fr;gap:10px;opacity:0;transform:translateY(8px);transition:opacity .5s,transform .6s var(--spring)}
.live-box.is-on{opacity:1;transform:none}
.live-box>div{position:relative;padding:9px 12px;border-radius:10px;background:#f8f7fc;border:1px solid #eceaf4}
.live-box small{display:block;font-size:11px;color:#6f6b8a}
.live-box code{font-size:12px;color:#17142f}
.live-box>div:last-child{background:#fffaf0;border-color:#f3e1b4}
.copy-chip{position:absolute;right:8px;top:50%;transform:translateY(-50%);font-size:11px;font-weight:500;color:#5136e8;background:#fff;padding:3px 8px;border-radius:6px;box-shadow:0 0 0 1px #e3ddff}
.desk-file.is-fly{opacity:0;transform:translate(-420px,150px) scale(.4);transition:transform .9s var(--ease),opacity .9s var(--ease)}
/* wall featured extras */
.wf-count{display:flex;align-items:center;gap:10px}
.wf-route{padding:3px 9px;border-radius:999px;font:500 12px var(--font);color:#fff;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.14)}
.wf-cmd{flex-wrap:wrap;align-items:flex-start}
.wf-pre{color:#8fb0ff}
.wf-cmd code{flex:1;min-width:0;font-size:13px;color:#e6e1ff;word-break:break-word}
.wf-detect{flex-basis:100%;margin-left:0;padding-top:8px;border-top:1px solid rgba(255,255,255,.07)}
.wall-tile{padding:18px 4px 14px;gap:10px;font-size:12.5px}
.wall-tile .fw-tile{width:46px;height:46px;border-radius:14px;font-size:15px}
.wall-name{white-space:normal;text-align:center;line-height:1.25}
/* architecture */
.archsec{padding:20px 0 90px}
.arch{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 120px minmax(0,1.15fr) 120px minmax(0,1fr);align-items:stretch;padding-bottom:84px}
.ar-col{position:relative;padding:24px 22px;border-radius:26px;background:#fff;border:1px solid var(--line);box-shadow:0 30px 60px -40px rgba(50,30,140,.35)}
.ar-core{background:radial-gradient(90% 60% at 50% 0%,rgba(123,97,255,.12),transparent 70%),#fff;border:1.5px solid transparent;background-clip:padding-box;box-shadow:0 0 0 1.5px rgba(123,97,255,.35),0 40px 80px -40px rgba(91,70,255,.5)}
.ar-run{background:radial-gradient(90% 60% at 50% 0%,rgba(100,181,255,.14),transparent 70%),#fff}
.ar-eb{font-size:12.5px;font-weight:500;color:var(--violet-ink)}
.ar-col h3{margin-top:4px;font-size:21px;letter-spacing:-.03em}
.ar-col ul{display:flex;flex-direction:column;gap:6px;margin-top:16px}
.ar-col li{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:12px;background:var(--mist);font-size:14px}
.ar-col li>.icon{width:30px;height:30px;padding:7px;flex:none;border-radius:9px;color:var(--violet-ink);background:#fff;box-shadow:inset 0 0 0 1px #e4ddff}
.ar-col li b{display:block;font-weight:500;line-height:1.3}
.ar-col li small{display:block;font-size:12.5px;color:var(--muted);line-height:1.35}
.ar-link{display:flex;flex-direction:column;justify-content:center;gap:34px;padding:0 6px}
.ar-lane{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;font-size:11.5px;line-height:1.3;color:var(--muted)}
.ar-track{position:relative;display:block;width:100%;height:2px;border-radius:2px;background:var(--line-2)}
.ar-track::after{content:'';position:absolute;right:-1px;top:-4px;border:5px solid transparent;border-left:7px solid var(--line-2);border-right:0}
.ar-back .ar-track::after{right:auto;left:-1px;border-left:0;border-right:7px solid var(--line-2)}
.ar-track>i{position:absolute;top:-3px;left:0;width:8px;height:8px;border-radius:50%;background:var(--violet);box-shadow:0 0 0 4px rgba(123,97,255,.18);animation:travel 2.6s var(--ease-io) infinite}
.ar-back .ar-track>i{background:var(--blue);box-shadow:0 0 0 4px rgba(61,123,255,.18);animation:travelBack 2.6s var(--ease-io) 1.3s infinite}
@keyframes travelBack{0%{left:calc(100% - 8px);opacity:0}15%,85%{opacity:1}100%{left:0;opacity:0}}
.ar-direct{position:absolute;left:10%;right:10%;bottom:0;display:flex;flex-direction:column;align-items:center;gap:14px}
.ar-direct::before,.ar-direct::after{content:'';position:absolute;top:-40px;width:2px;height:40px;background:linear-gradient(var(--line),#22c55e)}
.ar-direct::before{left:0}.ar-direct::after{right:0}
.ar-direct .ar-track{background:linear-gradient(90deg,#bfeccf,#22c55e)}
.ar-direct .ar-track::after{border-left-color:#22c55e}
.ar-direct .ar-track>i{background:#22c55e;box-shadow:0 0 0 4px rgba(34,197,94,.2);animation-duration:3.2s}
.ar-direct>span{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;font-size:13.5px;color:#15803d;background:#effaf3;border:1px solid #cdeedb;text-align:center}
.ar-direct>span .icon{width:15px;height:15px;flex:none}
.arch-more{text-align:center;margin-top:40px}
.arch-more a{display:inline-flex;align-items:center;gap:8px;font-weight:500;color:var(--violet-ink)}
.arch-more .icon{width:16px;height:16px;transition:transform .4s var(--ease)}
.arch-more a:hover .icon{transform:translateX(4px)}
/* isolation visual */
.iso-panel{position:absolute;left:28px;right:28px;top:44px;padding:16px 16px 12px;display:flex;flex-direction:column;gap:8px}
.iso-panel .vs-top{padding:0 4px 4px}
.iso-tag{font-size:12px;color:var(--violet-ink);background:#f1edff;padding:3px 9px;border-radius:999px}
.iso-row{position:relative;display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:12px;padding:12px;border-radius:14px;border:1px solid var(--line);background:#fff;overflow:hidden;transition:border-color .5s,background .5s}
.iso-name b{display:block;font:500 13.5px var(--mono);color:var(--ink)}
.iso-name small{display:block;font-size:12px;color:var(--muted)}
.iso-st{display:inline-flex;align-items:center;gap:7px;padding:5px 10px;border-radius:999px;font-size:12px;font-weight:500;white-space:nowrap;transition:all .4s}
.iso-st i{width:7px;height:7px;border-radius:50%}
.iso-row.is-live .iso-st{color:#15803d;background:#e8f8ef}.iso-row.is-live .iso-st i{background:#22c55e;animation:pulse 2s infinite}
.iso-row.is-sleep{background:#fbfbfd}.iso-row.is-sleep .iso-st{color:#6f6b8a;background:var(--mist-2)}.iso-row.is-sleep .iso-st i{background:#a3a0bb}
.iso-row.is-sleep .fw-tile{filter:grayscale(.7);opacity:.7}
.iso-row.is-wake .iso-st{color:#b45309;background:#fff4e0}.iso-row.is-wake .iso-st i{background:#f59e0b;animation:pulse 1s infinite}
.iso-row.is-build .iso-st{color:var(--violet-ink);background:#f1edff}.iso-row.is-build .iso-st i{border:2px solid #c9bcff;border-top-color:#7b61ff;width:10px;height:10px;animation:spin .7s linear infinite}
.iso-ping{position:absolute;left:-12px;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 4px rgba(34,197,94,.2);opacity:0}
.iso-row.is-call .iso-ping{animation:isoPing 1s var(--ease) forwards}
@keyframes isoPing{0%{left:-12px;opacity:0}20%{opacity:1}100%{left:46px;opacity:0}}
/* monitoring bars */
.vm-bars{display:flex;align-items:flex-end;gap:3px;height:120px;margin-top:16px;padding-bottom:2px;border-bottom:1px solid var(--line)}
.vm-bars i,.mon-hbars i{position:relative;flex:1;height:var(--h);border-radius:3px 3px 1px 1px;background:linear-gradient(180deg,#b9acff,#7b61ff);transform:scaleY(0);transform-origin:50% 100%;overflow:hidden}
.vm-bars i::after,.mon-hbars i::after{content:'';position:absolute;left:0;right:0;top:0;height:var(--e);background:#ef4444}
.is-in .vm-bars i{transition:transform .9s var(--spring);transition-delay:calc(var(--i) * 30ms + .2s);transform:none}
.vm-foot{display:flex;justify-content:space-between;align-items:center;margin-top:10px;gap:8px}
.vm-sample{margin-top:0}
.vm-priv{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:500;color:#15803d}
.vm-priv .icon{width:13px;height:13px}
/* versions visual: four nodes */
.v-ver .vv-track{grid-template-columns:repeat(4,1fr);left:24px;right:24px}
.v-ver .vv-line{left:12.5%;right:12.5%}
.vv-node.vv-new{opacity:0;transform:scale(.6);transition:opacity .5s,transform .7s var(--spring)}
.vv-node.vv-new.is-on{opacity:1;transform:none}
.vv-node.vv-new small{color:var(--violet-ink)}
.vv-status{padding:0 20px}
/* python client visual */
.cl-win{position:absolute;left:24px;right:24px;top:46px;border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 0 0 1px var(--line),0 30px 50px -26px rgba(50,30,140,.4)}
.cl-lines{padding:14px 16px 16px;font:12.5px/1.85 var(--mono);color:#2a2645;min-height:178px}
.cl-lines p{margin:0;opacity:0;transform:translateY(3px);transition:opacity .3s,transform .4s var(--ease);white-space:pre}
.cl-lines p.is-on{opacity:1;transform:none}
.cl-out{color:#6f6b8a}
.cl-ok{color:#15803d;font-weight:500}
.cl-chip{position:absolute;z-index:2;display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border-radius:999px;font-size:12px;font-weight:500;background:#fff;border:1px solid var(--line);box-shadow:0 10px 24px -12px rgba(50,30,140,.4);color:var(--ink-2);animation:bob2 5s ease-in-out infinite}
.cl-chip .icon{width:14px;height:14px;color:var(--violet)}
.cl-chip-a{left:28px;top:12px}
.cl-chip-b{right:28px;bottom:12px;animation-delay:-2.5s}
@keyframes bob2{50%{transform:translateY(-4px)}}
/* dashboard additions */
.mon-sub{font-size:12px;color:var(--muted);font-weight:400}
.mon-hours{padding:14px 14px 10px;border-radius:14px;border:1px solid var(--line)}
.mon-hbars{display:flex;align-items:flex-end;gap:4px;height:110px}
.dash-panel.is-active .mon-hbars i{transition:transform .8s var(--spring);transition-delay:calc(var(--i) * 22ms + .2s);transform:none}
.mon-legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:10px;font-size:12px;color:var(--muted)}
.mon-legend span{display:inline-flex;align-items:center;gap:6px}
.mon-legend i{width:9px;height:9px;border-radius:2px;background:#8a72ff}
.mon-legend i.err{background:#ef4444}
.mon-legend span:last-child{margin-left:auto}
.byver{margin-top:12px;border:1px solid var(--line);border-radius:12px;overflow:hidden;font-size:13px}
.byver-row{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;padding:8px 12px;border-top:1px solid var(--line)}
.byver-row:first-child{border-top:0}
.byver-h{background:#fbfafe;color:var(--muted);font-size:12px}
.byver b{font-family:var(--mono);font-weight:600;margin-right:6px}
.snips{margin-top:18px}
.snip-tabs{margin-bottom:10px}
.snip{display:none;padding:16px 18px;border-radius:14px;font:13px/1.75 var(--mono);color:#ebe7ff;background:radial-gradient(70% 90% at 100% 0%,rgba(123,97,255,.25),transparent 60%),#120e31;overflow-x:auto}
.snip.is-on{display:block;animation:chkIn .35s var(--ease) both}
.ver-note code{font-size:12.5px;padding:1px 6px;border-radius:5px;background:var(--mist-2)}
.ver-row{grid-template-columns:56px 1fr 100px 130px}
.ver-row.is-new{animation:rowIn .6s var(--spring)}
@keyframes rowIn{from{opacity:0;transform:translateY(-8px)}}
/* pricing additions */
.bill-row{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-bottom:46px}
.bill-row .bill{margin:0}
.bill-cur.is-y .bill-pill{--bx:100%}
.addons{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:22px}
.addons-h{grid-column:1/-1;margin-top:10px;font-size:14px;font-weight:500;color:var(--muted)}
.addon{position:relative;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 24px;border-radius:22px;background:var(--mist);border:1px solid var(--line)}
.addon h3{font-size:18px}
.addon p{margin-top:4px;font-size:14.5px;color:var(--muted);max-width:44ch}
.addon-price{display:flex;align-items:baseline;gap:3px;white-space:nowrap}
.addon-price .price-cur{margin-top:2px;font-size:17px}
.addon-price .price-num{font-size:34px}
.addon-price small{margin-left:4px;font-size:13px;color:var(--muted)}
.addon-price::before{content:'+';font-size:22px;color:var(--muted);margin-right:2px}
.price.is-long .price-num{font-size:40px}
.price-note{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:28px;font-size:14.5px;color:var(--ink-2)}
.price-note .icon{width:16px;height:16px;color:var(--violet)}
/* how-it-works sections */
.pad-sec{padding:30px 0 90px}
.flowsec{padding:20px 0 90px}
.spacer{height:60px;background:#fff}
.flow2{display:grid;grid-template-columns:300px minmax(0,1fr);gap:56px;align-items:start}
.fl-side{position:sticky;top:120px}
.fl-card{padding:24px}
.fl-card small{font-size:12.5px;color:var(--muted)}
.fl-state{display:block;margin-top:2px;font:600 26px var(--mono);letter-spacing:-.03em;color:var(--violet-ink);transition:color .4s}
.fl-card.is-live .fl-state{color:#15803d}
.fl-track{display:flex;flex-direction:column;gap:8px;margin-top:18px}
.fl-track span{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--muted);transition:color .3s}
.fl-track span i{width:12px;height:12px;border-radius:50%;border:2px solid var(--line-2);transition:all .4s}
.fl-track span.is-done{color:var(--ink)}
.fl-track span.is-done i{border-color:#7b61ff;background:#7b61ff}
.fl-track span.is-cur i{box-shadow:0 0 0 5px rgba(123,97,255,.18)}
.fl-card.is-live .fl-track span.is-done i{border-color:#22c55e;background:#22c55e}
.fl-bar{margin-top:18px;height:4px;border-radius:4px;background:var(--mist-2);overflow:hidden}
.fl-bar i{display:block;height:100%;transform-origin:0 50%;transform:scaleX(var(--p,0));background:linear-gradient(90deg,#7e9bff,#8a4dff,#22c55e);transition:transform .5s var(--ease)}
.fl-time{margin-top:12px;font-size:13px;color:var(--muted)}
.fl-list{display:flex;flex-direction:column;gap:14px;counter-reset:none}
.fl-step{display:flex;gap:18px;padding:24px;border-radius:22px;border:1px solid var(--line);background:#fff;opacity:.45;transform:scale(.98);transition:opacity .5s,transform .6s var(--ease),border-color .5s,box-shadow .5s}
.fl-step.is-seen{opacity:1;transform:none}
.fl-step.is-cur{border-color:#c9bdff;box-shadow:0 30px 60px -36px rgba(91,70,255,.5)}
.fl-n,.flow-n{flex:none;width:34px;height:34px;border-radius:11px;display:grid;place-items:center;font:600 14px var(--mono);color:#fff;background:linear-gradient(150deg,#9ab6ff,#6b5cff 55%,#8a4dff);box-shadow:0 8px 16px -8px rgba(107,92,255,.8)}
.fl-step h3{font-size:19px;letter-spacing:-.025em}
.fl-step p{margin-top:6px;color:var(--muted);font-size:15.5px}
.js .fl-step{opacity:.35}
.js .fl-step.is-seen{opacity:1}
.ver-row.is-old{opacity:.5}
.ver-row.is-old .ver-act{display:none}
.insp{padding:20px 0 40px}
.insp-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:24px;align-items:start}
.insp-table{margin-top:0}
.insp-table .cmp-table{min-width:520px;font-size:14px}
.insp-table td{width:auto!important}
.insp-table td code{font-size:13px;padding:2px 7px;border-radius:6px;background:var(--mist-2)}
.refs{display:flex;flex-direction:column;gap:10px}
.refs h3{font-size:16px;margin-bottom:4px}
.ref{display:flex;gap:12px;padding:14px 16px;border-radius:16px;background:#fff;border:1px solid var(--line)}
.ref-x{width:24px;height:24px;flex:none;border-radius:50%;display:grid;place-items:center;color:#c22b30;background:#fdecec}
.ref-x .icon{width:12px;height:12px;stroke-width:2.6}
.ref b{font-weight:500;font-size:14.5px}
.ref p{margin-top:2px;font-size:13.5px;color:var(--muted)}
.insp .fine{margin:20px 0 0;text-align:left}
.upd{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.upd-step{position:relative;padding:24px;border-radius:22px;background:var(--mist);border:1px solid var(--line)}
.upd-step h3{margin-top:16px;font-size:19px}
.upd-step p{margin-top:6px;font-size:14.5px;color:var(--muted)}
.upd-step:not(:last-child)::after{content:'';position:absolute;right:-12px;top:40px;width:10px;height:10px;border-top:2px solid var(--line-2);border-right:2px solid var(--line-2);transform:rotate(45deg);z-index:1}
.pad-sec .callout{margin-top:20px}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.two-col .code{margin:0}
.vals-4{grid-template-columns:repeat(4,1fr);margin:16px 0 0}
.vals-4 h3{margin-top:0;font-family:var(--mono);font-size:16px}
.val code{font-size:12.5px;padding:1px 6px;border-radius:5px;background:var(--mist-2);overflow-wrap:anywhere}
.mon-two .ticks{margin:16px 0 0}
.ticks-no .icon{background:#e5484d}
.val-no{background:#fffafa}
.stack{grid-template-columns:repeat(4,1fr);margin-bottom:0}
/* frameworks page cards */
.fw-grid{grid-template-columns:repeat(3,1fr)}
.fw-card{display:flex;flex-direction:column}
.fw-card-top{display:flex;justify-content:space-between;align-items:flex-start}
.fw-route{font-size:12px;font-weight:500;padding:4px 10px;border-radius:999px;color:#15803d;background:#e8f8ef}
.fw-route.is-client{color:var(--violet-ink);background:#efeaff}
.fw-card dl{margin:16px 0 0;display:grid;gap:8px}
.fw-card dl div{display:grid;grid-template-columns:64px 1fr;gap:8px;font-size:13.5px}
.fw-card dt{color:var(--muted)}
.fw-card dd{margin:0;color:var(--ink)}
.fw-code{display:block;margin-top:auto;padding:10px 12px;border-radius:11px;font-size:12px;line-height:1.6;color:#ebe7ff;background:#120e31;overflow-wrap:anywhere}
.fw-card p{margin-bottom:4px}
.fw-card dl{margin-bottom:16px}
.notyet{margin:24px 0 110px}
/* changelog groups */
.cl-items{display:flex;flex-direction:column;gap:14px}
.cl-date small{display:block;font-size:12.5px;color:var(--muted);opacity:.8}
.cl-date time{color:var(--ink);font-weight:500}
@media (max-width:1100px){
  .arch{grid-template-columns:minmax(0,1fr) 90px minmax(0,1.1fr) 90px minmax(0,1fr)}
  .stack,.vals-4{grid-template-columns:repeat(2,1fr)}
  .upd{grid-template-columns:repeat(2,1fr)}
  .upd-step:nth-child(2)::after{display:none}
}
@media (max-width:960px){
  .arch{grid-template-columns:1fr;padding-bottom:0;gap:0}
  .ar-link{flex-direction:row;justify-content:center;gap:28px;padding:14px 0}
  .ar-lane{flex-direction:row;width:auto}
  .ar-lane .ar-track{width:2px;height:46px}
  .ar-track::after{right:-4px;top:auto;bottom:-1px;border:5px solid transparent;border-top:7px solid var(--line-2);border-bottom:0}
  .ar-back .ar-track::after{left:-4px;right:auto;bottom:auto;top:-1px;border:5px solid transparent;border-bottom:7px solid var(--line-2);border-top:0}
  .ar-lane .ar-track>i{left:-3px;animation-name:travelY}
  .ar-back .ar-track>i{animation-name:travelYBack}
  .ar-lane span{max-width:110px;text-align:left}
  .ar-back span{text-align:right}
  .ar-direct{position:relative;left:auto;right:auto;margin-top:22px}
  .ar-direct::before,.ar-direct::after,.ar-direct .ar-track{display:none}
  .wall-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
  .flow2{grid-template-columns:1fr;gap:20px}
  .fl-side{position:sticky;top:76px;z-index:5}
  .fl-card{padding:14px 18px;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:4px 16px}
  .fl-track,.fl-time{display:none}
  .fl-bar{grid-column:1/-1;margin-top:6px}
  .fl-state{font-size:20px}
  .insp-grid,.two-col{grid-template-columns:1fr}
  .addons{grid-template-columns:1fr}
  .fw-grid{grid-template-columns:repeat(2,1fr)}
}
@keyframes travelYBack{0%{top:calc(100% - 8px);opacity:0}15%,85%{opacity:1}100%{top:0;opacity:0}}
@media (max-width:640px){
  .wall-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .stack,.vals-4,.upd,.fw-grid{grid-template-columns:1fr}
  .upd-step::after{display:none}
  .addon{flex-direction:column;align-items:flex-start}
  .byver-row{grid-template-columns:1.2fr 1fr 1fr 1fr;font-size:12px}
  .mon-legend span:last-child{margin-left:0}
}

/* 22 ─ responsive */
@media (max-width:1100px){
  .plans{grid-template-columns:repeat(2,1fr)}
  .docs-grid{grid-template-columns:200px minmax(0,1fr)}
  .docs .docs-toc{display:none}
  .fw-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:960px){
  :root{--hdr-h:76px}
  .hdr-nav,.hdr-gh{display:none}
  .hdr-cta .btn{display:none}
  .burger{display:block}
  .hdr-bar{padding:0 6px 0 20px;height:56px}
  .hdr.is-open .hdr-bar{background:transparent;border-color:transparent;box-shadow:none;backdrop-filter:none}
  .c-7,.c-5,.c-6{grid-column:1/-1}
  .wall-panel{grid-template-columns:1fr}
  .wall-feature{min-height:340px}
  .dash-sec{height:auto;margin-top:60px}
  .dash-sticky{position:relative;height:auto;padding:0}
  .dash{height:600px;min-height:0}
  .dash-body{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .dash-side{flex-direction:row;padding:8px;border-right:0;border-bottom:1px solid var(--line);overflow-x:auto}
  .dash-model,.dash-foot{display:none}
  .dash-nav{flex-direction:row}
  .dash-tab{white-space:nowrap}
  .dash-hint{display:none}
  .minis{grid-template-columns:repeat(2,1fr)}
  .mini:not(:nth-child(3n+1)){padding-left:0;border-left:0}
  .mini:nth-child(even){padding-left:24px;border-left:1px solid var(--line)}
  .nb-panel{grid-template-columns:1fr;padding:40px 28px}
  .nb-shot{transform:none}
  .ftr-top{grid-template-columns:1fr}
  .ftr-cols{grid-template-columns:repeat(2,1fr);row-gap:36px}
  .pipe{grid-template-columns:1fr;gap:28px;padding:28px}
  .pipe-link{height:40px;width:2px;margin:0 auto}
  .pipe-link i{left:-3px!important;top:0;animation-name:travelY}
  .pipe-link span{top:auto;left:14px;top:12px}
  .flow{grid-template-columns:1fr}
  .post-feat{grid-template-columns:1fr}
  .cover-lg{min-height:240px}
  .posts{grid-template-columns:repeat(2,1fr)}
  .docs-grid,.art-grid{grid-template-columns:minmax(0,1fr)}
  .docs-side,.art-toc{position:relative;top:0}
  .docs-side{display:flex;gap:28px;overflow-x:auto;padding-bottom:6px;border-bottom:1px solid var(--line)}
  .docs-group+.docs-group{margin-top:0}
  .docs-group{flex:none}
  .art-toc{display:none}
  .cmp-cards,.contact-grid{grid-template-columns:1fr}
  .vals,.sec-grid{grid-template-columns:repeat(2,1fr)}
  .report{flex-direction:column;align-items:flex-start}
  .cl-entry{grid-template-columns:24px minmax(0,1fr)}
  .cl-entry::before{left:5px}
  .cl-date{position:static;grid-column:2;padding:0 0 10px}
  .cl-dot{grid-row:1;grid-column:1;margin:4px 0 0}
  .cl-body{grid-column:2}
  .fw-grid{grid-template-columns:repeat(2,1fr)}
}
@keyframes travelY{0%{top:0;opacity:0}15%,85%{opacity:1}100%{top:calc(100% - 8px);opacity:0}}
@media (max-width:640px){
  .wrap{padding:0 18px}
  .hero{padding-top:calc(var(--hdr-h) + 40px)}
  .hero-desc{padding:10px 16px}
  .frame-tag{display:none}
  .frame.is-on .frame-box{clip-path:inset(-4px)}
  .frame-box{inset:.02em -.08em -.04em}
  .steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:44px}
  .step{padding:14px 10px 12px;align-items:center;text-align:center}
  .step b{font-size:13px;margin-top:10px}
  .step-t{display:none}
  .step-bar{left:10px;right:10px}
  .motion-btn{align-self:center}
  .scene{border-radius:12px}
  .wall{padding-top:96px}
  .wall-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
  .wall-tile{padding:14px 4px 12px;font-size:11px;border-radius:14px}
  .wall-tile .fw-tile{width:40px;height:40px;border-radius:12px;font-size:14px}
  .wall-name{white-space:normal;text-align:center;line-height:1.2}
  .wall-feature{padding:22px;min-height:320px}
  .wf-copy h3{font-size:28px}
  .wf-detect{margin-left:0}
  .announce{font-size:13px;flex-wrap:wrap;justify-content:center;border-radius:22px;padding:10px}
  .card{border-radius:24px}
  .card-copy{padding:22px 22px 24px}
  .dash{height:620px}
  .dash-panel{padding:20px 16px}
  .chk{grid-template-columns:24px 1fr;row-gap:2px}
  .chk>span:last-child{grid-column:2}
  .meta-grid,.mon-stats{grid-template-columns:1fr 1fr}
  .meta-grid>div:first-child{grid-column:1/-1}
  .ver-row{grid-template-columns:44px 1fr 90px}
  .ver-state{display:none}
  .ver-hint{grid-template-columns:38px 1fr}.ver-hint code{grid-column:1/-1;justify-self:start}
  .key-row{grid-template-columns:28px 1fr}
  .key-row code,.key-scope{grid-column:2;justify-self:start}
  .minis{grid-template-columns:1fr}
  .mini,.mini:nth-child(even){padding:22px 0;border-left:0}
  .cta-panel{padding:76px 20px 0;border-radius:28px}
  .marquee{margin:60px -20px 0;padding-bottom:36px}
  .plans{grid-template-columns:1fr}
  .bill button{padding:9px 14px;font-size:13.5px}
  .bill-save{font-size:11px}
  .qa summary{font-size:16px;padding:18px 2px}
  .qa-a p{padding-right:10px}
  .nb-panel{padding:30px 20px;border-radius:28px}
  .ftr-word{margin-top:20px}
  .posts,.vals,.sec-grid,.fw-grid{grid-template-columns:1fr}
  .post-feat-copy{padding:26px}
  .form{padding:22px}
  .report{padding:28px}
  .art-cover .cover{height:220px}
  .art-hero .horizon{margin-top:-110px}
  .fw-list{grid-template-columns:1fr}
}

/* 23 ─ reduced motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .js [data-reveal],.js .load-in,.js .is-split .w>span,.js .scene-wrap,.is-split .w-ico{opacity:1!important;transform:none!important;filter:none!important}
  .cube{--o:86deg;--o2:90deg}
  .vb-doc{opacity:0}
  .vb-chip,.vb-label{opacity:1;transform:none}
  .mq-track{animation:none}
}

/* 25 ─ home page, content plan v1 (2026-10-06): hero caption, rising wall, bad-day scenes, refusals, pricing teaser */
/* the framed headline line keeps its fill when words aren't split (reduced motion, or before the split runs) */
.dark :is(h1,h2):not(.is-split) .frame{background:linear-gradient(180deg,#ffffff 22%,#d6ccff 78%,#b8a6ff 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.demo-cap{display:inline-flex;align-items:center;gap:9px;margin-top:60px;padding:0 6px;font-size:14.5px;line-height:1.45;color:var(--on-dark-2);scroll-margin-top:16px}
.demo-cap .icon{width:16px;height:16px;flex:none;color:#c4b2ff}
.demo-cap+.steps{margin-top:20px}
.wall-rise{border-radius:clamp(28px,4vw,56px) clamp(28px,4vw,56px) 0 0}
.wall-note{margin-top:10px;text-align:center;font-size:14.5px;color:var(--on-dark-3)}
.wall-note a,.refuse-list .ref a{text-decoration:underline;text-underline-offset:3px;transition:text-decoration-color .3s}
.wall-note a{color:#d6cbff;text-decoration-color:rgba(214,203,255,.4)}
.refuse-list .ref a{color:var(--violet-ink);text-decoration-color:rgba(81,54,232,.3)}
.wall-note a:hover,.refuse-list .ref a:hover{text-decoration-color:currentColor}
.ann-date{margin-right:4px;font:500 12.5px/1 var(--mono);letter-spacing:0;color:#c8b9ff;white-space:nowrap}
/* built for the bad day */
.scenes{margin-bottom:24px}
.scene h3{margin-top:16px;font-size:21px;line-height:1.25;letter-spacing:-.03em}
.scene p{margin-top:10px;font-size:15.5px;line-height:1.55}
.scene-kicker{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:500;color:var(--violet-ink)}
.scene-kicker .icon{width:16px;height:16px}
/* what we refuse to do */
.refuse{padding:40px 0 110px}
.refuse-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:64px;align-items:start}
.refuse-side{position:sticky;top:130px}
.refuse-head{margin:0;text-align:left;align-items:flex-start}
.refuse-head .lead{max-width:420px}
.refuse-more{margin-top:24px}
.refuse-more a{display:inline-flex;align-items:center;gap:8px;font-weight:500;color:var(--violet-ink)}
.refuse-more .icon{width:16px;height:16px;transition:transform .4s var(--ease)}
.refuse-more a:hover .icon{transform:translateX(4px)}
.refuse-list{gap:12px}
.refuse-list .ref{gap:14px;padding:18px 20px;border-radius:18px}
.refuse-list .ref-x{width:28px;height:28px;margin-top:1px}
.refuse-list .ref b{font-size:16.5px;letter-spacing:-.01em}
.refuse-list .ref p{margin-top:3px;font-size:15px;line-height:1.5}
/* the notebook panel's one line */
.nb-line .code{margin:22px 0 4px;max-width:480px}
.nb-line .code pre{font-size:15px}
.nb-copy{min-width:0}
/* pricing teaser */
.plans-teaser .plan{padding:26px 24px 24px}
.plans-teaser .price{margin:18px 0 0;min-height:0}
.plans-teaser .plan-blurb{margin-top:14px;min-height:0;font-size:15px;color:var(--ink-2)}
.price-from{align-self:flex-start;margin:11px 4px 0 0;font-size:14px;color:var(--muted)}
.teaser-foot{display:flex;flex-direction:column;align-items:center;margin-top:34px}
.teaser-foot .price-note{margin-top:18px}
@media (max-width:960px){
  .refuse-grid{grid-template-columns:1fr;gap:32px}
  .refuse-side{position:static;text-align:center}
  .refuse-head{margin:0 auto;text-align:center;align-items:center}
}
@media (max-width:640px){
  .demo-cap{margin-top:44px;font-size:13.5px;align-items:flex-start;text-align:left}
  .demo-cap .icon{margin-top:2px}
  .scene h3{font-size:19px}
  .refuse{padding:24px 0 90px}
  .refuse-list .ref{padding:16px}
  .nb-line .code pre{padding:13px 14px;font-size:13px}
}

/* =====================================================================
   24 ─ the app's own UI (app.mlgatee.com, "Ocean Blue"), for product pictures:
   the hero's Deploy window and the scrolling model page. Tokens copy app/app/globals.css.
   ===================================================================== */
.ax{--ax-side:#f9fbfe;--ax-mist:#f3f6fb;--ax-mist-2:#e9eef7;--ax-line:#e3e8f1;--ax-line-2:#d3dbe8;
  --ax-ink:#0f1b2d;--ax-ink-2:#3a4a62;--ax-muted:#5b6b82;--ax-accent:#2f6fed;--ax-accent-ink:#1a56db;--ax-soft:#eaf2ff;
  --ax-live:#22c55e;--ax-live-ink:#15803d;--ax-live-soft:#e8f8ef;--ax-danger:#e5484d;--ax-danger-ink:#c22b30;--ax-danger-soft:#fdecec;
  --ax-code:#f7f9fc;--ax-key:#9a4a06;--ax-key-soft:#fff1d6;
  --ax-brand:linear-gradient(180deg,#5b9bff 0%,#2f6fed 45%,#1f55d6 100%);--ax-track:linear-gradient(90deg,#5b9bff,#1f55d6);--ax-edge:linear-gradient(160deg,#2f6fed,#0ea5e9 50%,#22d3ee);
  color:var(--ax-ink);font-family:var(--font);text-align:left}
.ax code,.ax pre{font-family:var(--mono);font-variant-ligatures:none}

/* framework tiles, site-wide: each library's own mark in one ink on a white tile (as in the app) */
.fw-tile{position:relative;display:inline-grid;place-items:center;flex:none;width:52px;height:52px;border-radius:15px;color:#253247;
  background:linear-gradient(180deg,#fff,#f7f9fe);font:inherit;
  box-shadow:0 0 0 1px rgba(15,27,45,.09),0 1px 2px rgba(15,27,45,.06),0 8px 22px -10px color-mix(in oklab,var(--c,#2f6fed) 75%,#000)}
.fw-mark{width:52%;height:52%;display:block;overflow:visible}
.fw-tile.fw-xl{width:104px;height:104px;border-radius:30px}
.fw-tile.fw-xl .fw-mark{width:50%;height:50%}
.fw-tile.fw-lg{width:68px;height:68px;border-radius:20px}
.fw-tile.fw-md{width:40px;height:40px;border-radius:12px}
.fw-tile.fw-sm{width:34px;height:34px;border-radius:10px}
.fw-tile.fw-xs{width:22px;height:22px;border-radius:7px;box-shadow:0 0 0 1px rgba(15,27,45,.1),0 1px 2px rgba(15,27,45,.06)}
.fw-tile.fw-xs .fw-mark{width:60%;height:60%}
.fw-ghost{color:#fff;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.fw-ghost .fw-mark{width:40%;height:40%}
.dark .fw-tile:not(.fw-ghost){box-shadow:0 0 0 1px rgba(255,255,255,.5),inset 0 -2px 4px rgba(15,27,45,.06),0 12px 28px -12px color-mix(in oklab,var(--c,#2f6fed) 80%,#000)}
.wall-tile.is-active .fw-tile{color:#1a2a44;box-shadow:0 0 0 1px rgba(255,255,255,.7),0 0 0 4px color-mix(in oklab,var(--c) 35%,transparent),0 14px 30px -12px color-mix(in oklab,var(--c) 90%,#000)}
.wall-feature .fw-xl{box-shadow:0 0 0 1px rgba(255,255,255,.6),0 24px 50px -18px color-mix(in oklab,var(--c) 90%,#000),0 0 60px -10px color-mix(in oklab,var(--c) 60%,transparent)}
.mq-item .fw-tile{width:42px;height:42px;border-radius:12px}
.dock-fw{background:linear-gradient(180deg,#fff,#eef2fa);color:#253247}
.dock-fw .fw-mark{width:58%;height:58%}
.iso-row.is-sleep .fw-tile{filter:grayscale(1);opacity:.65}
@media (max-width:640px){.wall-tile .fw-tile{width:40px;height:40px;border-radius:12px}}

/* hero: room between the step tabs and the desktop picture */
.scene-wrap{margin-top:56px}
@media (max-width:640px){.scene-wrap{margin-top:32px}}

/* announcement: one line, no date */
.announce .ann-t b{font-weight:500}

/* pricing: one currency */
.bill-note{align-self:center;font-size:13.5px;color:var(--muted)}

/* ── sidebar (app/components/shell/Sidebar.tsx) */
.ax-side{display:flex;flex-direction:column;min-height:0;padding:14px 10px 12px;background:var(--ax-side);border-right:1px solid var(--ax-line);font-size:13px;overflow:hidden}
.ax-word{padding:4px 8px 14px;font-size:15.5px;font-weight:600;letter-spacing:-.035em;color:var(--ax-ink)}
.ax-deploy{display:flex;align-items:center;gap:7px;height:32px;padding:0 6px 0 12px;border-radius:999px;font-weight:500;font-size:13px;color:#fff;background:var(--ax-brand);
  text-shadow:0 1px 1px rgba(15,50,140,.25);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -2px 6px rgba(10,40,120,.22),0 0 0 1px rgba(35,90,220,.72),0 8px 20px -8px rgba(47,111,237,.7)}
.ax-deploy .icon{width:14px;height:14px;stroke-width:2.4}
.ax-deploy span{flex:1}
.ax-deploy kbd{display:inline-grid;place-items:center;min-width:18px;height:18px;border-radius:5px;font:10.5px var(--mono);color:rgba(255,255,255,.9);background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.3)}
.ax-nav{display:flex;flex-direction:column;gap:2px;margin-top:16px;flex:1;min-height:0}
.ax-row{position:relative;display:flex;align-items:center;gap:9px;height:30px;padding:0 9px;border-radius:8px;color:var(--ax-ink-2);white-space:nowrap}
.ax-row.is-on{color:var(--ax-ink);font-weight:500;background:#fff;box-shadow:0 1px 2px rgba(15,27,45,.06),0 0 0 1px var(--ax-line)}
.ax-row.is-on::before{content:'';position:absolute;left:0;top:7px;bottom:7px;width:3px;border-radius:3px;background:var(--ax-edge)}
.ax-ico{display:grid;place-items:center;width:15px;color:var(--ax-muted)}
.ax-ico .icon{width:15px;height:15px}
.ax-lab{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.ax-row small{font-size:11.5px;color:var(--ax-muted);font-weight:400}
.ax-ext-ico{width:12px;height:12px;color:var(--ax-muted)}
.ax-model{padding-left:20px}
.ax-model .fw-tile{color:#253247}
.ax-dot{position:relative;width:6px;height:6px;border-radius:50%;background:var(--ax-live)}
.ax-model.is-live .ax-dot::after{content:'';position:absolute;inset:0;border-radius:50%;background:var(--ax-live);animation:axPing 2.4s cubic-bezier(.23,1,.32,1) infinite}
@keyframes axPing{0%{transform:scale(1);opacity:.55}70%,100%{transform:scale(2.6);opacity:0}}
.ax-model.is-deploying .ax-dot{width:9px;height:9px;background:none;border:1.5px solid var(--ax-accent);border-top-color:transparent;animation:axSpin .8s linear infinite}
@keyframes axSpin{to{transform:rotate(360deg)}}
.ax-gap{height:12px}
.ax-rule{height:1px;margin:8px 4px;background:var(--ax-line)}
.ax-meter{padding:10px 6px 0;border-top:1px solid var(--ax-line);font-size:11px}
.ax-meter>span{display:flex;justify-content:space-between;margin-bottom:6px}
.ax-meter small{color:var(--ax-muted);font-size:11px}
.ax-meter b{font-weight:500;color:var(--ax-ink-2)}
.ax-meter>i{display:block;height:5px;border-radius:5px;background:var(--ax-mist-2);overflow:hidden}
.ax-meter>i>i{display:block;height:100%;width:calc(var(--f) * 100%);border-radius:5px;background:var(--ax-track)}

/* ── hero window: the Deploy page (web/screens/Deploy.tsx) */
.win-app{background:#fff}
.win-app .app-body{grid-template-columns:172px 1fr}
.win-app .ax-side{font-size:12px;padding:12px 8px 10px}
.win-app .ax-word{font-size:14px;padding-bottom:10px}
.win-app .ax-deploy{height:28px;font-size:12px}
.win-app .ax-row{height:26px}
.win-app .ax-nav{margin-top:12px}
.win-app .ax-gap{height:6px}
.win-app .ax-model{opacity:0;transform:translateX(-6px);transition:opacity .4s,transform .5s var(--ease)}
.win-app:has(.drop.is-filled) .ax-model{opacity:1;transform:none}
.win-app:has(.ax-track.is-live) .ax-model .ax-dot{width:6px;height:6px;border:0;background:var(--ax-live);animation:none}
.win-app .app-main{padding:16px 22px;gap:10px;background:#fff;overflow:hidden}
.ax-head h5{font-size:18px;font-weight:500;letter-spacing:-.035em;color:var(--ax-ink)}
.ax-head p{margin-top:2px;font-size:12px;color:var(--ax-ink-2)}
.ax-track{--pi:-1}
.ax-bar{height:5px;border-radius:5px;background:var(--ax-mist-2);overflow:hidden}
.ax-track .pills-fill{position:static;display:block;height:100%;width:calc((var(--pi) + .55) / 4 * 100%);border-radius:5px;background:var(--ax-track);opacity:1;transform:none;box-shadow:none;transition:width .7s var(--ease),background .4s}
.ax-track:not(.is-go) .pills-fill{width:0}
.ax-track.is-live .pills-fill{width:100%;background:var(--ax-live)}
.ax-steps{display:grid;grid-template-columns:repeat(4,1fr);margin-top:8px}
.ax-steps span{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--ax-muted);transition:color .3s}
.ax-steps span:nth-child(2),.ax-steps span:nth-child(3){justify-content:center}
.ax-steps span:last-child{justify-content:flex-end}
.tk-dot{display:grid;place-items:center;width:13px;height:13px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--ax-line-2);transition:background .3s,box-shadow .3s}
.tk-dot .icon{width:8px;height:8px;stroke-width:3.5;color:#fff;opacity:0}
.ax-steps span.is-done{color:var(--ax-ink-2)}
.ax-steps span.is-done .tk-dot{background:var(--ax-accent);box-shadow:none}
.ax-steps span.is-done .tk-dot .icon{opacity:1}
.ax-steps span.is-cur{color:var(--ax-accent-ink);font-weight:500}
.ax-steps span.is-cur .tk-dot{box-shadow:inset 0 0 0 1.5px var(--ax-accent);border-top:1.5px solid transparent;animation:axSpin .8s linear infinite;box-shadow:none;border:1.5px solid var(--ax-accent);border-top-color:transparent}
.ax-track.is-live span .tk-dot{background:var(--ax-live);border:0;box-shadow:none;animation:none}
.ax-track.is-live span .tk-dot .icon{opacity:1}
.ax-track.is-live span{color:var(--ax-ink-2);font-weight:400}
.ax-card{padding:12px;border-radius:13px;border:1px solid var(--ax-line);background:#fff}
.ax-card h6{display:flex;align-items:center;gap:8px;margin:0 0 9px;font-size:13px;font-weight:500;color:var(--ax-ink)}
.ax-n{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;font:10.5px var(--mono);color:var(--ax-accent-ink);background:var(--ax-soft);transition:background .3s,color .3s}
.win-app:has(.drop.is-filled) .ax-n{background:var(--ax-accent);color:#fff}
.win-app .drop{height:104px;border-radius:12px;border:1.5px dashed var(--ax-line-2);background:var(--ax-side)}
.win-app .drop-empty{gap:2px!important;color:var(--ax-ink-2);font-size:11.5px}
.ax-up{display:grid;place-items:center;width:30px;height:30px;margin-bottom:3px;border-radius:9px;color:var(--ax-accent);background:#fff;box-shadow:0 0 0 1px var(--ax-line),0 6px 14px -8px rgba(20,60,150,.4)}
.ax-up .icon{width:17px;height:17px}
.win-app .drop-empty b{font-size:13px;font-weight:500;color:var(--ax-ink)}
.win-app .drop-empty small{font-size:11px}
.win-app .drop-empty em{font-style:normal;font-weight:500;color:var(--ax-accent-ink)}
.ax-ext{display:flex;gap:4px;margin-top:5px}
.ax-ext i{font:normal 9.5px var(--mono);padding:1px 5px;border-radius:4px;color:var(--ax-ink-2);background:#fff;box-shadow:0 0 0 1px var(--ax-line)}
.win-app .drop.is-filled{border:1px solid var(--ax-line);background:var(--ax-side)}
.win-app .drop-file{justify-content:flex-start!important;gap:10px;padding:0 14px;font-size:12.5px}
.ax-fi{display:grid;place-items:center;width:30px;height:34px;border-radius:7px;color:var(--ax-accent);background:#fff;box-shadow:0 0 0 1px var(--ax-line)}
.ax-fi .icon{width:16px;height:16px}
.ax-fn{display:flex;flex-direction:column;flex:1}
.ax-fn b{font-weight:500;color:var(--ax-ink)}
.ax-fn small{font-size:11px;color:var(--ax-muted)}
.ax-name{display:flex;flex-direction:column;gap:2px}
.ax-name small{font-size:10.5px;color:var(--ax-muted)}
.ax-name code{font-size:12px;padding:4px 10px;min-width:110px;border-radius:7px;background:#fff;box-shadow:0 0 0 1px var(--ax-line-2)}
.ax-log{min-height:0;gap:2px;padding:8px 11px;border-radius:10px;border:1px solid var(--ax-line);background:var(--ax-code)}
.ax-log p{gap:7px;font:11px/1.7 var(--mono);color:var(--ax-ink)}
.ax-log b{font-weight:400;color:var(--ax-accent-ink);min-width:58px}
.ax-ok{display:grid;place-items:center}
.ax-log p .icon{width:12px;height:12px;padding:2px;border-radius:50%;color:#fff;background:var(--ax-live);stroke-width:3}
.win-app .live-box{grid-template-columns:1.3fr 1fr;gap:8px}
.win-app .live-box>div{padding:8px 11px;border-radius:10px;background:var(--ax-code);border:1px solid var(--ax-line)}
.win-app .live-box small{display:flex;align-items:center;gap:5px;font-size:10.5px;color:var(--ax-muted)}
.win-app .live-box small .icon{width:11px;height:11px}
.win-app .live-box code{font-size:11px;color:var(--ax-ink)}
.win-app .live-box .ax-key{background:var(--ax-key-soft);border-color:#f3dcb0}
.win-app .live-box .ax-key code{color:var(--ax-key)}
.win-app .copy-chip{color:var(--ax-accent-ink);box-shadow:0 0 0 1px var(--ax-line-2)}

/* ── scrolling model page (web/screens/DeploymentDetail.tsx) */
.dash{border-color:var(--ax-line,#e3e8f1);box-shadow:0 0 0 8px rgba(47,111,237,.05),0 50px 110px -50px rgba(20,50,140,.5),0 20px 40px -30px rgba(20,50,140,.3)}
.dash-chrome{background:#f9fbfe;border-bottom-color:#e3e8f1}
.dash-body.ax{grid-template-columns:212px minmax(0,1fr)}
.dash .dash-main{display:flex;flex-direction:column;min-height:0;overflow:hidden;background:#fff}
.ax-ph{padding:16px 26px 0}
.ax-crumbs{display:flex;align-items:center;gap:3px;font-size:12px;color:var(--ax-muted)}
.ax-crumbs .icon{width:13px;height:13px;color:var(--ax-line-2)}
.ax-crumbs b{font-weight:400;color:var(--ax-ink-2)}
.ax-ph-row{display:flex;align-items:center;gap:12px;margin-top:6px}
.ax-ph-t{flex:1;min-width:0}
.ax-ph h4{display:flex;align-items:center;gap:10px;font-size:23px;font-weight:500;letter-spacing:-.035em;color:var(--ax-ink)}
.ax-ph-t p{margin-top:1px;font-size:12.5px;color:var(--ax-muted)}
.ax-ph-t p i{font-style:normal;color:var(--ax-line-2);margin:0 3px}
.ax-pill{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 9px;border-radius:999px;font-size:11.5px;font-weight:500;letter-spacing:0;color:var(--ax-live-ink);background:var(--ax-live-soft)}
.ax-pill span{font-weight:400;opacity:.8}
.ax-pill i{position:relative;width:6px;height:6px;border-radius:50%;background:var(--ax-live)}
.ax-pill i::after{content:'';position:absolute;inset:0;border-radius:50%;background:var(--ax-live);animation:axPing 2.4s cubic-bezier(.23,1,.32,1) infinite}
.ax-btn{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-radius:999px;font-size:12.5px;font-weight:500;color:var(--ax-ink);background:#fff;white-space:nowrap;box-shadow:inset 0 0 0 1px var(--ax-line-2),0 1px 2px rgba(15,27,45,.06)}
.ax-btn .icon{width:14px;height:14px}
.ax-btn-danger{color:var(--ax-danger-ink);box-shadow:inset 0 0 0 1px rgba(194,43,48,.32)}
.dash .ax-tabbar{flex-direction:row;gap:2px;margin-top:12px;padding:0 20px;border-bottom:1px solid var(--ax-line)}
.dash .dash-tab{flex-direction:row;gap:6px;height:40px;padding:0 10px;border-radius:0;overflow:visible;font-size:13.5px;color:var(--ax-muted);background:none;box-shadow:none}
.dash .dash-tab small{font-size:11px;color:var(--ax-muted);font-weight:400}
.dash .dash-tab:hover{color:var(--ax-ink)}
.dash .dash-tab.is-active{color:var(--ax-ink);font-weight:500;background:none;box-shadow:none}
.dash .dash-prog{left:6px;right:6px;bottom:-1px;height:2px;opacity:0}
.dash .dash-tab.is-active .dash-prog{opacity:1;background:var(--ax-mist-2)}
.dash .dash-prog i{background:var(--ax-track)}
.dash-panels{position:relative;flex:1;min-height:0}
.dash .dash-panel{padding:16px 26px 22px;background:var(--ax-side)}
.ax-c{padding:14px 16px;border-radius:14px;border:1px solid var(--ax-line);background:#fff}
.ax-c+.ax-c{margin-top:12px}
.ax-c-flush{padding:0;overflow:hidden}
.ax-c-flush .ax-ch{padding:14px 16px 12px;margin:0}
.ax-ch{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:10px}
.ax-ch h4{font-size:14.5px;font-weight:500;letter-spacing:-.011em;color:var(--ax-ink)}
.ax-ch p{margin-top:1px;font-size:12px;color:var(--ax-muted)}
.ax-ch p code,.ax-c .ax-note code{font-size:11.5px;padding:0 3px;border-radius:4px;background:rgba(15,27,45,.06)}
.ax-act{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 9px;border-radius:999px;font-size:11.5px;font-weight:500;color:var(--ax-ink-2);white-space:nowrap}
.ax-act .icon{width:13px;height:13px}
.ax-ch .ax-act:not(:has(.ax-seg)){box-shadow:none}
.ax-grid{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:12px;align-items:start}
.ax-col .ax-c+.ax-c{margin-top:12px}
.ax-field{display:flex;align-items:flex-start;gap:8px;padding:8px 10px;border-radius:9px;border:1px solid var(--ax-line);background:var(--ax-code)}
.ax-field code{flex:1;min-width:0;font-size:11.5px;line-height:1.6;overflow-wrap:anywhere;color:var(--ax-ink)}
.ax-field .icon{width:14px;height:14px;margin-top:2px;color:var(--ax-muted)}
.ax-dots{letter-spacing:.18em;color:var(--ax-muted)}
.ax-note{margin-top:8px;font-size:11.5px;color:var(--ax-muted)}
.ax-foot{margin-top:12px;padding-top:12px;border-top:1px solid var(--ax-line)}
.ax-code{min-width:0;border-radius:11px;border:1px solid var(--ax-line);background:var(--ax-code);overflow:hidden}
.ax-code-top{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:5px 6px;border-bottom:1px solid var(--ax-line);background:rgba(255,255,255,.7)}
.ax-tabs{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
.ax-tabs button{height:24px;padding:0 9px;border-radius:999px;font-size:11.5px;font-weight:500;color:var(--ax-muted);white-space:nowrap;transition:color .2s,background .2s,box-shadow .2s}
.ax-tabs button.is-on{color:var(--ax-ink);background:#fff;box-shadow:0 1px 2px rgba(15,27,45,.08),inset 0 0 0 1px var(--ax-line)}
.ax-copy{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px;border-radius:999px;font-size:11.5px;font-weight:500;color:var(--ax-ink-2);box-shadow:inset 0 0 0 1px var(--ax-line-2);background:#fff}
.ax-copy .icon{width:12px;height:12px}
.ax-code .snip{display:none;margin:0;padding:10px 14px;border-radius:0;font:11.5px/1.6 var(--mono);color:var(--ax-ink);background:none;overflow-x:auto;white-space:pre}
.ax-code .snip.is-on{display:block}
.ax-code mark{padding:0 2px;border-radius:4px;color:var(--ax-key);background:var(--ax-key-soft)}
.ax-code-sm .snip{max-height:118px;overflow:hidden}
.ax-logbox{padding:8px 12px;border-radius:10px;border:1px solid var(--ax-line);background:var(--ax-code);font:11.5px/1.85 var(--mono);color:var(--ax-ink)}
.ax-logbox p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ax-t{color:var(--ax-muted)}
.ax-st{color:var(--ax-accent-ink)}
.dash .ax-logbox.log{height:auto;min-height:0;margin-top:0;padding:10px 14px;background:var(--ax-code);color:var(--ax-ink);font-size:11.5px}
.ax-seg{display:inline-flex;padding:3px;border-radius:999px;background:var(--ax-mist-2)}
.ax-seg button{height:22px;padding:0 10px;border-radius:999px;font-size:11.5px;font-weight:500;color:var(--ax-muted)}
.ax-seg button.is-on{color:var(--ax-ink);background:#fff;box-shadow:0 1px 3px rgba(15,27,45,.12)}
.ax-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0}
.ax-stats>div{min-width:0;padding:9px 12px;border-radius:10px;background:var(--ax-mist)}
.ax-stats dt{font-size:11px;color:var(--ax-muted)}
.ax-stats dd{margin:2px 0 0}
.ax-stats b{display:block;font-size:17px;font-weight:500;letter-spacing:-.025em;font-variant-numeric:tabular-nums}
.ax-stats b span{color:var(--ax-muted);font-weight:400;margin:0 2px}
.ax-stats small{display:block;font-size:10.5px;color:var(--ax-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ax-chart{position:relative;margin:10px 0 0;padding:10px 10px 6px;border-radius:10px;border:1px solid var(--ax-line);background:#fff}
.ax-max{position:absolute;top:6px;right:10px;font-size:10px;color:var(--ax-muted)}
.ax-chart .mon-hbars{height:78px;gap:3px;background:repeating-linear-gradient(180deg,transparent 0 19px,#eef1f6 19px 20px)}
.ax-chart .mon-hbars i{border-radius:2px 2px 0 0;background:#6aa2ff}
.ax-chart .mon-hbars i::after{background:var(--ax-danger)}
.ax-chart figcaption{display:flex;justify-content:space-between;gap:8px;margin-top:6px;font-size:10px;color:var(--ax-muted)}
.ax-legend{display:flex;gap:10px}
.ax-legend span{display:inline-flex;align-items:center;gap:5px}
.ax-legend i{width:7px;height:7px;border-radius:2px;background:#6aa2ff}
.ax-legend i.err{background:var(--ax-danger)}
.ax-sub{margin:12px 0 6px;font-size:12.5px;font-weight:500;color:var(--ax-ink)}
.ax-table{width:100%;border-collapse:collapse;font-size:12px;border:1px solid var(--ax-line);border-radius:10px;overflow:hidden;border-spacing:0}
.ax-table th{padding:7px 12px;text-align:left;font-weight:400;font-size:11px;color:var(--ax-muted);background:var(--ax-side);border-bottom:1px solid var(--ax-line)}
.ax-table td{padding:8px 12px;border-top:1px solid var(--ax-line);color:var(--ax-ink-2);font-variant-numeric:tabular-nums}
.ax-table tr:first-child td{border-top:0}
.ax-table td:first-child{color:var(--ax-ink)}
.ax-table:not(.ax-vt) th:not(:first-child),.ax-table:not(.ax-vt) td:not(:first-child){text-align:right}
.ax-now{margin-left:4px;font-size:10.5px;font-weight:500;color:var(--ax-live-ink)}
.ax-bad{color:var(--ax-danger-ink)!important}
.ax-priv{display:flex;align-items:center;gap:6px;margin-top:12px;padding-top:10px;border-top:1px solid var(--ax-line);font-size:11px;color:var(--ax-muted)}
.ax-priv .icon{width:13px;height:13px;color:var(--ax-live)}
.ax-vt{border:0;border-radius:0;border-top:1px solid var(--ax-line)}
.ax-vt th:first-child,.ax-vt td:first-child{padding-left:16px}
.ax-vt th:last-child,.ax-vt td:last-child{padding-right:16px;text-align:right}
.ax-vt tr{transition:background .5s}
.ax-vt tr.is-new{background:var(--ax-soft)}
.ax-vt tr.is-old td{color:var(--ax-muted)}
.ax-badge{display:inline-flex;align-items:center;height:18px;margin-left:6px;padding:0 7px;border-radius:999px;font:500 10.5px var(--font);color:var(--ax-live-ink);background:var(--ax-live-soft)}
.dash .ver-act{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:999px;font-size:11.5px;font-weight:500;color:var(--ax-ink);background:#fff;box-shadow:inset 0 0 0 1px var(--ax-line-2),0 1px 2px rgba(15,27,45,.06);pointer-events:auto}
.dash .ver-act:hover{box-shadow:inset 0 0 0 1px #a9c8ff,0 6px 18px -8px rgba(26,86,219,.35);color:var(--ax-ink)}
.dash .ver-desc,.dash .ver-state{font-size:12px}
.dash .ver-note{margin-top:10px;font-size:11.5px}
.ax-drop-sm{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:11px;border:1.5px dashed var(--ax-line-2);background:var(--ax-side)}
.ax-drop-sm>.icon{width:20px;height:20px;color:var(--ax-accent)}
.ax-drop-sm b{display:block;font-size:12.5px;font-weight:500}
.ax-drop-sm small{display:block;font-size:11.5px;color:var(--ax-muted)}
.ax-split{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:12px;padding-top:12px;border-top:1px solid var(--ax-line)}
.ax-split b{display:block;font-size:12.5px;font-weight:500}
.ax-split p{font-size:11.5px;color:var(--ax-muted)}
.ax-danger{border-color:rgba(194,43,48,.22)}
.ax-danger .ax-split{margin-top:0;padding-top:0;border-top:0}
@media (max-width:960px){
  .dash-body.ax{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
  .dash .ax-side{display:none}
  .dash .ax-tabbar{overflow-x:auto;scrollbar-width:none}
  .dash .dash-tab{white-space:nowrap}
}
@media (max-width:640px){
  .ax-ph{padding:14px 16px 0}
  .ax-ph .ax-btn,.ax-ph .fw-tile{display:none}
  .ax-ph h4{font-size:20px}
  .dash .ax-tabbar{padding:0 10px}
  .dash .dash-panel{padding:14px 14px 18px}
  .ax-grid{grid-template-columns:minmax(0,1fr)}
  .ax-stats{grid-template-columns:1fr 1fr}
  .ax-vt .ver-state{display:none}
  .ax-split{flex-direction:column;align-items:flex-start}
}
.win-app .app-main>*{flex:none}
.win-app .drop{height:92px}
.win-app .ax-card{padding:10px 12px}
.win-app .ax-card h6{margin-bottom:7px}
.win-app .ax-log{min-height:0;padding:6px 11px}
.win-app .ax-log p{line-height:1.6}
.win-app{top:62px;height:504px}
.win-app .ax-log{gap:1px}
.win-app .ax-log p{height:19px;margin:0;line-height:19px}
.win-app .drop{transition:height .5s var(--ease),border-color .4s,background .4s}
.win-app .drop.is-filled{height:62px}
.win-app .acts.ax-log{min-height:0}
.win-app .drop-file .ax-fi .icon{color:var(--ax-accent)}

/* docs: steps, lists and tables */
.prose .doc-steps{counter-reset:ds;display:grid;gap:10px;margin:4px 0 22px}
.prose .doc-steps li{counter-increment:ds;position:relative;padding:12px 16px 12px 52px;border-radius:14px;background:var(--mist);border:1px solid var(--line);font-size:16px;line-height:1.6}
.prose .doc-steps li::before{content:counter(ds);position:absolute;left:16px;top:13px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font:500 12px var(--mono);color:#fff;background:linear-gradient(145deg,#7ea2ff,#5a5cff 55%,#8b4dff)}
.prose .doc-steps b,.prose .doc-list b{color:var(--ink);font-weight:500}
.prose .doc-list{display:grid;gap:8px;margin:0 0 20px}
.prose .doc-list li{position:relative;padding-left:22px}
.prose .doc-list li::before{content:'';position:absolute;left:4px;top:.72em;width:6px;height:6px;border-radius:50%;background:var(--violet)}
.prose kbd{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:6px;font-size:12.5px;color:var(--ink);background:#fff;border:1px solid var(--line-2);box-shadow:0 1px 0 var(--line-2);vertical-align:1px}
.doc-table{margin:6px 0 20px;border:1px solid var(--line);border-radius:16px;overflow-x:auto}
.doc-table table{width:100%;border-collapse:collapse;font-size:14.5px;line-height:1.5}
.doc-table th{padding:11px 16px;text-align:left;font-weight:500;font-size:13px;color:var(--muted);background:var(--mist);border-bottom:1px solid var(--line)}
.doc-table td{padding:11px 16px;vertical-align:top;border-top:1px solid var(--line);color:var(--ink-2)}
.doc-table tr:first-child td{border-top:0}
.doc-table td:first-child{color:var(--ink);font-weight:500}
.doc-table-ref td:first-child{font-weight:400;line-height:2}
.doc-table code{font-size:.86em}
.doc-table-ref td:first-child{width:56%}.doc-table-ref code{white-space:nowrap}
.dash .ver-act{white-space:nowrap}
@media (max-width:640px){.ax-vt th:nth-child(2),.ax-vt td:nth-child(2){display:none}.ax-badge{margin-left:0}}
/* brand-coloured marks read better a little larger */
.fw-mark{width:60%;height:60%}
.fw-tile.fw-xl .fw-mark{width:56%;height:56%}
.fw-tile.fw-xs .fw-mark{width:68%;height:68%}