/* AgentFlux website. Light system with a cyan, blue and violet signal gradient.
   Continuous loops read --play so the motion switch can freeze them in place. */

@font-face{font-family:"Sora";src:url("/assets/fonts/sora-latin-wght.woff2") format("woff2");font-weight:100 800;font-style:normal;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("/assets/fonts/jetbrains-mono-latin-wght.woff2") format("woff2");font-weight:100 800;font-style:normal;font-display:swap}

:root{
  --bg:#f6f8fd;
  --paper:#ffffff;
  --tint:#eef2fc;
  --ink:#0b1126;
  --soft:#39425f;
  --mute:#5f6886;
  --line:rgb(25 45 120/.1);
  --line-2:rgb(25 45 120/.17);
  --cyan:#14d6c6;
  --teal:#0a8c84;
  --blue:#3d63ff;
  --blue-ink:#2a49d8;
  --violet:#8a4dff;
  --warn:#e2406b;
  --grad:linear-gradient(100deg,#14d6c6 0%,#3d63ff 50%,#8a4dff 100%);
  --shadow:0 1px 2px rgb(15 25 70/.05),0 24px 60px -24px rgb(40 70 200/.22);
  --shadow-lg:0 2px 4px rgb(15 25 70/.05),0 50px 120px -40px rgb(50 70 220/.35);
  --font:"Sora",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"Cascadia Mono",Menlo,Consolas,monospace;
  --maxw:78rem;
  --gutter:clamp(1rem,4vw,3rem);
  --head-h:4.25rem;
  --ease:cubic-bezier(.16,1,.3,1);
  --play:running;
  color-scheme:light;
}
html.is-paused{--play:paused}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--bg)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;min-height:100vh;overflow-x:clip;background:var(--bg);color:var(--soft);font-family:var(--font);font-weight:350;font-size:clamp(1rem,.96rem + .2vw,1.0625rem);line-height:1.7;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
h1,h2,h3{margin:0;color:var(--ink);font-weight:600;letter-spacing:-.03em}
h2{font-size:clamp(2rem,1.3rem + 2.8vw,3.6rem);line-height:1.06;max-width:20ch;text-wrap:balance}
h3{font-size:1.1rem;line-height:1.35;letter-spacing:-.01em}
p{margin:0}
p+p{margin-top:1em}
a{color:var(--blue-ink);text-underline-offset:.22em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
img,svg,canvas{display:block;max-width:100%}
button{font:inherit;color:inherit;cursor:pointer}
code{font-family:var(--mono);font-size:.84em;color:var(--ink);background:rgb(61 99 255/.07);border:1px solid rgb(61 99 255/.14);border-radius:.4em;padding:.06em .36em;overflow-wrap:anywhere}
strong{font-weight:600;color:var(--ink)}
:focus-visible{outline:2.5px solid var(--blue);outline-offset:3px;border-radius:.35rem}
::selection{background:rgb(61 99 255/.2)}
[id]{scroll-margin-top:calc(var(--head-h) + 1.25rem)}
[hidden]{display:none!important}
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ico{width:1.15em;height:1.15em;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ico--flip{transform:scaleX(-1)}
.small{font-size:.9rem;color:var(--mute)}
.skip{position:fixed;left:1rem;top:-4rem;z-index:100;padding:.7rem 1rem;background:var(--ink);color:#fff;border-radius:.6rem;font-weight:600;text-decoration:none}
.skip:focus{top:1rem}

/* Buttons ------------------------------------------------------------------ */
.btn{--h:3.3rem;position:relative;display:inline-flex;align-items:center;gap:.6rem;min-height:var(--h);padding:.55rem 1.35rem;border-radius:999px;border:1px solid var(--line-2);background:var(--paper);color:var(--ink);font-weight:550;font-size:.98rem;line-height:1.2;text-decoration:none;white-space:nowrap;transition:transform .35s var(--ease),border-color .25s,box-shadow .3s,background-color .25s}
.btn:hover{text-decoration:none;border-color:rgb(61 99 255/.45);box-shadow:0 10px 30px -12px rgb(61 99 255/.45)}
.btn--primary{border:0;color:#fff;background:var(--grad);background-size:160% 100%;box-shadow:0 14px 34px -12px rgb(61 99 255/.65),inset 0 0 0 1px rgb(255 255 255/.18)}
.btn--primary:hover{background-position:100% 0;box-shadow:0 20px 44px -12px rgb(138 77 255/.6),inset 0 0 0 1px rgb(255 255 255/.25)}
.btn--ghost{background:rgb(255 255 255/.7);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.btn--small{--h:2.5rem;padding:.4rem .95rem;font-size:.88rem}
.btn__meta{font-family:var(--mono);font-size:.72rem;font-weight:500;opacity:.85;padding-left:.6rem;border-left:1px solid currentColor}
.btn--light{border:0;background:#fff;color:var(--ink)}
.btn--outline-light{background:transparent;border-color:rgb(255 255 255/.6);color:#fff}
.btn--outline-light:hover{border-color:#fff;background:rgb(255 255 255/.12)}

/* Spotlight that follows the pointer on cards. */
.spot{position:relative}
.spot::after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),rgb(61 99 255/.12),transparent 65%);opacity:0;transition:opacity .3s;pointer-events:none}
.spot:hover::after{opacity:1}

/* Header ------------------------------------------------------------------- */
.site-head{position:fixed;inset:0 0 auto;z-index:50;background:rgb(246 248 253/.72);backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%);border-bottom:1px solid var(--line)}
.site-head__bar{display:flex;align-items:center;gap:1.25rem;height:var(--head-h)}
.brand{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--ink);font-weight:650;letter-spacing:-.02em;font-size:1.15rem}
.brand__mark{width:2rem;height:2rem}
.site-nav{margin-left:auto}
.site-nav ul{display:flex;gap:.2rem;margin:0;padding:0;list-style:none}
.site-nav a{display:block;white-space:nowrap;padding:.5rem .8rem;border-radius:.6rem;color:var(--soft);font-size:.92rem;text-decoration:none;transition:color .2s,background-color .2s}
.site-nav a:hover,.site-nav a[aria-current="true"]{color:var(--ink);background:rgb(61 99 255/.08)}
.site-head__tools{display:flex;align-items:center;gap:.5rem}
.motion-toggle,.icon-link{white-space:nowrap;display:inline-flex;align-items:center;gap:.45rem;min-height:2.5rem;padding:.4rem .85rem;border-radius:999px;border:1px solid var(--line-2);background:rgb(255 255 255/.6);color:var(--soft);font-size:.84rem;text-decoration:none;transition:border-color .2s,color .2s}
.motion-toggle:hover,.icon-link:hover{color:var(--ink);border-color:rgb(61 99 255/.45);text-decoration:none}
.motion-toggle[aria-pressed="true"]{color:var(--blue-ink);border-color:rgb(61 99 255/.45)}
.menu-toggle{display:none;width:2.5rem;height:2.5rem;align-items:center;justify-content:center;border-radius:.7rem;border:1px solid var(--line-2);background:rgb(255 255 255/.6)}
.site-head__progress{position:absolute;left:0;right:0;bottom:-1px;height:2px}
.site-head__progress span{display:block;height:100%;background:var(--grad);transform-origin:0 50%;transform:scaleX(var(--p,0))}
@media (max-width:1180px){
  .site-nav{position:absolute;top:calc(var(--head-h) - 1px);left:0;right:0;margin:0;padding:.75rem var(--gutter) 1.25rem;background:rgb(246 248 253/.98);border-bottom:1px solid var(--line);display:none}
  .site-nav.is-open{display:block}
  .site-nav ul{flex-direction:column}
  .site-nav a{padding:.8rem .5rem;font-size:1.05rem}
  .site-head__tools{margin-left:auto}
  .menu-toggle{display:inline-flex}
}
@media (max-width:640px){
  .motion-toggle,.icon-link{width:2.5rem;justify-content:center;padding:0}
  .motion-toggle [data-motion-label],.icon-link span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}

/* Hero --------------------------------------------------------------------- */
.hero{position:relative;isolation:isolate;min-height:100svh;padding-top:calc(var(--head-h) + clamp(2.5rem,8vh,5rem));padding-bottom:clamp(4rem,10vh,6rem);display:flex;align-items:center;overflow:hidden;background:linear-gradient(115deg,#fbfcff 0%,#eef3ff 55%,#efe9ff 100%)}
.hero__canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-1}
.hero__grid{position:relative;display:grid;grid-template-columns:minmax(0,36rem) minmax(0,1fr);gap:2rem;align-items:center}
.hero__stage{min-height:32rem}
.hero__copy{position:relative;z-index:2;transform:translateY(calc(var(--hs,0)*-90px));opacity:calc(1 - var(--hs,0)*1.3)}
.hero__title{font-size:clamp(2.6rem,1.3rem + 3.9vw,4.5rem);line-height:.98;letter-spacing:-.05em;font-weight:650}
.hero__title .grad{display:block}
.grad,.grad .w>span{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero__lead{margin-top:1.75rem;max-width:34rem;font-size:clamp(1.03rem,.98rem + .3vw,1.18rem);color:var(--soft)}
.hero__actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2.2rem}
.hero__note{margin-top:1.5rem;max-width:32rem;font-size:.88rem;color:var(--mute)}
.hero__labels{position:absolute;inset:0;pointer-events:none;z-index:1}
.flabel{position:absolute;left:0;top:0;padding:.25rem .55rem;border-radius:.45rem;background:rgb(255 255 255/.82);border:1px solid var(--line-2);box-shadow:0 6px 20px -8px rgb(30 50 140/.3);font-family:var(--mono);font-size:.7rem;font-weight:500;color:var(--ink);white-space:nowrap;opacity:0;transition:opacity .6s}
.flabel.is-placed{opacity:calc(1 - var(--hs,0)*1.6)}
.flabel--src{border-color:rgb(20 214 198/.55)}
.flabel--ring{border-color:rgb(61 99 255/.45)}
.flabel--store{border-color:rgb(138 77 255/.5)}
.flabel--agent{padding:.3rem .65rem;border:0;background:var(--grad);color:#fff;font-weight:700;box-shadow:0 10px 26px -8px rgb(61 99 255/.7)}
.flabel--loop{border-color:rgb(138 77 255/.5);color:#5b2bd0}
.ftask{position:absolute;left:0;top:0;width:max-content;max-width:min(19rem,70vw);padding:.55rem .8rem .6rem;border-radius:.9rem;background:rgb(255 255 255/.92);border:1.5px solid transparent;background-clip:padding-box;box-shadow:0 0 0 1.5px rgb(61 99 255/.45),0 14px 34px -12px rgb(30 50 140/.45);opacity:0;transition:opacity .6s}
.ftask.is-placed{opacity:calc(1 - var(--hs,0)*1.6)}
.ftask__label{display:block;font-family:var(--mono);font-size:.62rem;font-weight:600;color:var(--blue-ink)}
.ftask__text{display:block;min-height:1.4em;font-size:.86rem;font-weight:500;line-height:1.4;color:var(--ink)}
.ftask.is-typing .ftask__text::after{content:"";display:inline-block;width:2px;height:1em;margin-left:2px;vertical-align:-.12em;background:var(--blue)}
.no-webgl .hero__labels{display:none}
.hero__next{position:absolute;left:50%;bottom:1.5rem;width:1.6rem;height:2.6rem;margin-left:-.8rem;border:1.5px solid var(--line-2);border-radius:1rem;background:rgb(255 255 255/.6)}
.hero__next span{position:absolute;left:50%;top:.5rem;width:3px;height:.6rem;margin-left:-1.5px;border-radius:2px;background:var(--blue)}
@media (max-width:440px){
  .hero__actions .btn{flex:1 1 100%;justify-content:center}
}
@media (max-width:1120px){
  .hero{min-height:auto;align-items:flex-start}
  .hero__grid{grid-template-columns:minmax(0,1fr);gap:0}
  .hero__stage{min-height:0;height:clamp(17rem,70vw,26rem);margin-top:1rem}
  .flabel{font-size:.6rem;padding:.15rem .4rem}
  .ftask{max-width:13rem;padding:.4rem .6rem}
  .ftask__text{font-size:.74rem}
  .hero__next{display:none}
}

/* Split headings: words rise out of a mask. */
.w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
.w>span{display:inline-block}

/* Sections ----------------------------------------------------------------- */
.section{position:relative;padding-block:clamp(5rem,11vw,9rem)}
.section-head{position:relative;max-width:48rem;margin-bottom:clamp(2.5rem,5vw,4rem)}
.section-head p{margin-top:1.4rem;font-size:1.08rem;max-width:44rem}
.why{background:var(--paper)}
.example,.status{background:var(--tint)}
.example::before,.status::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgb(40 70 200/.13) 1px,transparent 1px);background-size:24px 24px;mask-image:linear-gradient(transparent,#000 20%,#000 80%,transparent);-webkit-mask-image:linear-gradient(transparent,#000 20%,#000 80%,transparent);pointer-events:none}
.connect,.data,.setup{background:var(--paper)}
.views{background:linear-gradient(180deg,var(--paper),#eef2ff 40%,#f3edff)}

/* Why ---------------------------------------------------------------------- */
.why__grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(2.5rem,6vw,6rem);align-items:start}
.why__copy h2{margin-bottom:1.75rem}
.why__palette h3{font-family:var(--mono);font-size:.78rem;font-weight:500;letter-spacing:.04em;color:var(--mute);margin-bottom:1rem}
.palette{position:relative;margin:0;padding:0;list-style:none;display:grid;gap:.4rem}
.palette::before{content:"";position:absolute;left:1.6rem;top:1.6rem;bottom:1.6rem;width:2px;border-radius:2px;background:var(--grad);opacity:.25}
.palette::after{content:"";position:absolute;left:calc(1.6rem - 3px);top:1.6rem;width:8px;height:4rem;border-radius:6px;background:linear-gradient(transparent,var(--blue),transparent);opacity:0}
.palette li{display:grid;grid-template-columns:3.2rem minmax(0,1fr);column-gap:1rem;align-items:center;padding:.6rem .9rem .6rem 0;border-radius:1rem;transition:background-color .25s,transform .35s var(--ease)}
.palette li:hover{background:var(--tint);transform:translateX(6px)}
.palette__ico{grid-row:span 2;display:grid;place-items:center;width:3.2rem;height:3.2rem;border-radius:1rem;background:var(--paper);border:1px solid var(--line-2);box-shadow:var(--shadow);color:var(--teal);position:relative;z-index:1}
.palette li:nth-child(n+4) .palette__ico{color:var(--blue)}
.palette li:nth-child(n+6) .palette__ico{color:var(--violet)}
.palette__ico .ico{width:1.35rem;height:1.35rem}
.palette strong{font-size:1rem}
.palette li>span:last-child{font-size:.9rem;color:var(--mute);line-height:1.5}
@media (max-width:900px){.why__grid{grid-template-columns:minmax(0,1fr)}}

/* Ticker ------------------------------------------------------------------- */
.ticker{position:relative;overflow:hidden;padding-block:clamp(1.5rem,4vw,3rem);background:var(--paper);border-block:1px solid var(--line)}
.ticker__row{display:flex;gap:clamp(1.5rem,4vw,3.5rem);width:max-content;font-size:clamp(2.6rem,1.2rem + 6vw,7.5rem);font-weight:700;letter-spacing:-.05em;line-height:1.08;white-space:nowrap;will-change:transform}
.ticker__row span{background:var(--grad);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent}
.ticker__row span:nth-child(3n+2){background-position:50% 0}
.ticker__row span:nth-child(3n){background-position:100% 0}
.ticker__row--back span{background:none;color:transparent;-webkit-text-stroke:1.5px rgb(61 99 255/.45)}

/* Agent at work ------------------------------------------------------------ */

.agentflow{position:relative;border:1px solid var(--line);border-radius:1.75rem;background:var(--paper);box-shadow:var(--shadow-lg);padding:clamp(1rem,2.5vw,2rem)}
.agentflow__head{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:1rem 1.5rem;margin-bottom:1.25rem}
.agentflow__task{padding:.75rem 1rem;border-radius:1rem;background:var(--tint);border:1px solid var(--line-2)}
.agentflow__label{display:block;font-family:var(--mono);font-size:.7rem;color:var(--mute)}
.agentflow__task p{margin-top:.15rem;min-height:1.6em;font-size:.95rem;color:var(--ink)}
.agentflow__task.is-typing p::after{content:"";display:inline-block;width:2px;height:1.05em;margin-left:2px;vertical-align:-.15em;background:var(--blue)}
.agentflow__agent{display:flex;align-items:center;gap:.75rem}
.agentflow__avatar{position:relative;display:grid;place-items:center;width:3rem;height:3rem;border-radius:50%;background:var(--grad);color:#fff;box-shadow:0 12px 28px -10px rgb(61 99 255/.7)}
.agentflow__avatar .ico{width:1.5rem;height:1.5rem}
.agentflow__avatar::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid rgb(61 99 255/.4);opacity:0}
.agentflow__who{display:flex;flex-direction:column;line-height:1.35}
.agentflow__who strong{font-size:.95rem}
.agentflow__who span{min-width:13.5rem;font-family:var(--mono);font-size:.74rem;color:var(--blue-ink)}
.agentflow__body{margin-bottom:1.25rem}
.agentflow__lower{display:grid;grid-template-columns:17rem minmax(0,1fr);gap:1.25rem;align-items:start}
.agentflow__canvas{position:relative;aspect-ratio:16/7.4;border-radius:1.3rem;border:1px solid var(--line);overflow:hidden;background:radial-gradient(rgb(40 70 200/.14) 1px,transparent 1px) 0 0/22px 22px,linear-gradient(160deg,#f8faff,#f1efff)}
.agentflow__edges,.agentflow__packets,.agentflow__nodes{position:absolute;inset:0;width:100%;height:100%}
.agentflow__packets{pointer-events:none}
.aedge{fill:none;stroke:url(#af-grad);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:1 1;stroke-dashoffset:1}
.aedge--no{stroke:#aab3cf}
.aedge.is-drawn{stroke-dashoffset:0}
.aedge-label{font-family:var(--mono);font-size:12px;font-weight:600;fill:var(--mute);opacity:0;transition:opacity .4s}
.aedge-label.is-drawn{opacity:1}
.apacket{position:absolute;left:0;top:0;width:13px;height:10px;border-radius:2px;background:#fff;border:1.5px solid var(--blue);box-shadow:0 2px 8px rgb(30 50 140/.3);offset-rotate:auto;opacity:0}
.anode{position:absolute;left:var(--x,50%);top:var(--y,50%);z-index:1;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:.65rem;width:10.5rem;padding:.6rem .75rem;border-radius:1rem;border:1px solid var(--line-2);background:var(--paper);box-shadow:var(--shadow);color:var(--ink);text-align:left;opacity:0;transform:translate(-50%,-50%) scale(.6);transition:transform .6s var(--ease),opacity .4s,box-shadow .4s,border-color .3s}
.anode.is-placed{opacity:1;transform:translate(-50%,-50%)}
.anode:hover{box-shadow:var(--shadow-lg)}
.anode[aria-selected="true"]{outline:2px solid rgb(61 99 255/.55);outline-offset:3px}
.anode.is-active{background:linear-gradient(var(--paper),var(--paper)) padding-box,var(--grad) border-box;border:1.5px solid transparent;box-shadow:0 0 0 7px rgb(61 99 255/.12),0 20px 40px -14px rgb(61 99 255/.6);transform:translate(-50%,-50%) scale(1.06)}
.anode__ico{display:grid;place-items:center;width:2.2rem;height:2.2rem;border-radius:.7rem;background:var(--tint);color:var(--blue)}
.anode.is-active .anode__ico,.anode.is-done .anode__ico{background:var(--grad);color:#fff}
.anode--muted.is-done .anode__ico{background:#dfe3ef;color:var(--mute)}
.anode__text{display:flex;flex-direction:column;min-width:0}
.anode__kind{font-family:var(--mono);font-size:.62rem;color:var(--mute)}
.anode__title{font-size:.84rem;font-weight:600;line-height:1.25}
.anode__badge{position:absolute;right:-.55rem;top:-.65rem;min-width:1.6rem;padding:.1rem .45rem;border-radius:999px;background:var(--blue);color:#fff;font-family:var(--mono);font-size:.68rem;font-weight:700;text-align:center;opacity:0;transform:scale(.4);transition:opacity .3s,transform .5s var(--ease)}
.anode__badge.is-set{opacity:1;transform:none}
.anode--muted .anode__badge{background:var(--mute)}
.agentflow__cursor{position:absolute;left:0;top:0;z-index:3;display:grid;place-items:center;width:2.4rem;height:2.4rem;border-radius:50%;background:var(--grad);color:#fff;box-shadow:0 0 0 6px rgb(61 99 255/.16),0 12px 30px -8px rgb(61 99 255/.85);opacity:0;pointer-events:none;transition:opacity .4s}
.agentflow__cursor .ico{width:1.2rem;height:1.2rem}
.agentflow.is-busy .agentflow__cursor{opacity:1}
.agentflow__log{margin:0;padding:1rem;list-style:none;display:flex;flex-direction:column;justify-content:flex-end;gap:.5rem;min-height:20rem;overflow:hidden;border-radius:1.2rem;background:#0b1126;color:#dfe6ff;font-family:var(--mono);font-size:.74rem;line-height:1.5}
.agentflow__log li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.55rem}
.agentflow__log li::before{content:"";width:.5rem;height:.5rem;margin-top:.42em;border-radius:50%;background:var(--c,#5b8cff)}
.agentflow__log li[data-kind="task"]{--c:#ffc35a}
.agentflow__log li[data-kind="plan"]{--c:#14d6c6}
.agentflow__log li[data-kind="learn"]{--c:#b98bff;color:#fff}
.fpanel{display:grid;grid-template-columns:minmax(0,17rem) minmax(0,1fr);gap:clamp(1rem,2.5vw,1.75rem);min-height:20rem}
.fpanel:focus-visible{outline-offset:6px}
.fpanel__config{border:1px solid var(--line);border-radius:1.2rem;background:var(--tint);padding:1.3rem}
.cfg__kind{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--mono);font-size:.72rem;color:var(--blue-ink)}
.cfg__title{margin:.4rem 0 1rem;font-size:1.2rem}
.cfg dl{margin:0;display:grid;gap:.8rem}
.cfg dt{font-family:var(--mono);font-size:.7rem;color:var(--mute)}
.cfg dd{margin:.15rem 0 0;font-size:.9rem;color:var(--ink);line-height:1.5}
.cfg__note{margin-top:1.1rem;padding-top:1rem;border-top:1px solid var(--line-2);font-size:.85rem;color:var(--mute);line-height:1.55}
.fpanel__status{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .9rem;margin-bottom:1rem;font-family:var(--mono);font-size:.8rem;color:var(--soft)}
.fpanel__status b{font-weight:700;color:var(--blue-ink)}
.fpanel__status .sep{width:4px;height:4px;border-radius:50%;background:var(--mute)}
.recs{margin:0;padding:0;list-style:none;display:grid;gap:.6rem}
.rec{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.2rem 1rem;padding:.9rem 1.05rem;border-radius:1rem;border:1px solid var(--line);background:var(--paper);box-shadow:0 1px 2px rgb(15 25 70/.04)}
.rec__id{font-family:var(--mono);font-size:.8rem;font-weight:600;color:var(--blue-ink);padding-top:.1rem}
.rec__meta{font-family:var(--mono);font-size:.72rem;color:var(--mute)}
.rec__text{grid-column:2;font-size:.92rem;color:var(--soft);line-height:1.55}
.rec.is-out{border-style:dashed;background:#fff5f8}
.rec.is-out .rec__text{text-decoration:line-through;text-decoration-color:rgb(226 64 107/.6)}
.rec__branch{grid-column:2;justify-self:start;margin-top:.35rem;font-family:var(--mono);font-size:.68rem;padding:.12rem .5rem;border-radius:.4rem;background:rgb(20 214 198/.14);color:var(--teal)}
mark{background:none;color:inherit}
.hit{color:var(--ink);background:rgb(20 214 198/.22);border-radius:.25rem;padding:0 .1em}
.tok{font-family:var(--mono);font-size:.8em;font-weight:600;color:#fff;background:var(--violet);border-radius:.3rem;padding:.08em .35em}
.pii{color:var(--ink);background:rgb(226 64 107/.12);border-radius:.25rem;box-shadow:0 0 0 1px rgb(226 64 107/.3);padding:0 .1em}
.others{margin-top:.9rem;font-family:var(--mono);font-size:.76rem;color:var(--mute)}
.io{display:grid;gap:.8rem}
.io__box{border:1px solid var(--line);border-radius:1rem;background:var(--tint);padding:1rem 1.1rem}
.io__label{display:flex;align-items:center;gap:.5rem;margin-bottom:.6rem;font-family:var(--mono);font-size:.72rem;color:var(--mute)}
.io__box--answer{background:linear-gradient(135deg,rgb(61 99 255/.08),rgb(138 77 255/.1));border-color:rgb(138 77 255/.3)}
.io__box--answer .io__label{color:#6a35d6}
.io pre{margin:0;font-family:var(--mono);font-size:.82rem;line-height:1.7;color:var(--ink);white-space:pre-wrap;overflow-wrap:anywhere}
.cat{display:inline-block;margin-left:.4rem;padding:.02rem .5rem;border-radius:.4rem;font-size:.78em;font-weight:600;color:#fff;background:var(--blue)}
.store{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.3rem;align-items:start}
.store__db{position:relative;display:grid;place-items:center;width:5rem;height:5.5rem;border-radius:1.2rem;background:var(--grad);color:#fff;box-shadow:0 18px 40px -14px rgb(138 77 255/.7)}
.store__db .ico{width:2.6rem;height:2.6rem;stroke-width:1.5}
.flow-fallback{margin:1rem 0 0;padding-left:1.2rem;display:grid;gap:.5rem}
.agentflow.is-narrow .agentflow__canvas{aspect-ratio:3/4.4}
.agentflow.is-narrow .anode{width:8.6rem;padding:.5rem .55rem;gap:.45rem}
.agentflow.is-narrow .anode__ico{width:1.8rem;height:1.8rem;border-radius:.55rem}
.agentflow.is-narrow .anode__kind{display:none}
.agentflow.is-narrow .anode__title{font-size:.76rem}
@media (max-width:980px){
  .agentflow__head{grid-template-columns:minmax(0,1fr) auto}
  .agentflow__task{grid-column:1/-1}
  .agentflow__lower{grid-template-columns:minmax(0,1fr)}
  .agentflow__log{min-height:0;max-height:13rem}
}
@media (max-width:520px){.agentflow__who span{min-width:0}}
@media (max-width:820px){
  .fpanel{grid-template-columns:minmax(0,1fr);min-height:0}
  .store{grid-template-columns:minmax(0,1fr)}
  .store__db{width:3.6rem;height:3.9rem}
}

/* Connector board ---------------------------------------------------------- */
.board{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:clamp(2rem,7vw,7rem);padding:clamp(1.5rem,3vw,2.75rem);border-radius:1.75rem;background:radial-gradient(36rem 20rem at 50% 50%,rgb(61 99 255/.09),transparent 70%),var(--tint);border:1px solid var(--line)}
.board__wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.board__dots{position:absolute;inset:0;pointer-events:none}
.wire-dot{position:absolute;left:0;top:0;width:9px;height:9px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 3px rgb(61 99 255/.18);offset-rotate:0deg;opacity:0}
.wire-dot.is-on{background:var(--violet);box-shadow:0 0 0 4px rgb(138 77 255/.22),0 0 18px rgb(138 77 255/.6)}
.board__col{position:relative;z-index:1}
.board__label{font-family:var(--mono);font-size:.76rem;font-weight:500;color:var(--mute);margin-bottom:.9rem}
.board__col--model .board__label{text-align:right}
.board__list{margin:0;padding:0;list-style:none;display:grid;gap:.6rem}
.plug{display:flex;align-items:center;gap:.7rem;width:100%;min-height:3.1rem;padding:.6rem 1rem;border-radius:1rem;border:1px solid var(--line-2);background:var(--paper);box-shadow:0 1px 2px rgb(15 25 70/.04);color:var(--soft);font-size:.93rem;text-align:left;transition:border-color .25s,color .25s,box-shadow .3s,transform .35s var(--ease)}
.plug .ico{color:var(--teal)}
.plug--model .ico{color:var(--violet)}
.plug:hover{color:var(--ink);transform:translateY(-2px);box-shadow:var(--shadow)}
.plug[aria-pressed="true"]{color:var(--ink);background:linear-gradient(var(--paper),var(--paper)) padding-box,var(--grad) border-box;border:1.5px solid transparent;box-shadow:0 14px 34px -14px rgb(61 99 255/.55)}
.board__col--model .plug{flex-direction:row-reverse;text-align:right}
.board__core{position:relative;z-index:1;display:grid;justify-items:center;gap:.9rem}
.core{position:relative;width:9.5rem;height:9.5rem;display:grid;place-items:center;border-radius:50%;background:var(--paper);box-shadow:0 30px 70px -20px rgb(61 99 255/.55),inset 0 0 0 1px var(--line)}
.core::before{content:"";position:absolute;inset:-14%;border-radius:50%;background:conic-gradient(from 0deg,#14d6c6,#3d63ff,#8a4dff,#14d6c6);filter:blur(22px);opacity:.35;z-index:-1}
.core__mark{width:3.8rem;height:3.8rem}
.core__ring{position:absolute;inset:-.7rem;border-radius:50%;border:2px solid transparent;border-top-color:var(--cyan);border-right-color:rgb(20 214 198/.2)}
.core__ring--2{inset:-1.5rem;border-width:1.5px;border-top-color:transparent;border-left-color:var(--blue);border-bottom-color:rgb(61 99 255/.2)}
.core__ring--3{inset:-2.4rem;border:1px dashed rgb(138 77 255/.45)}
.core__name{font-family:var(--mono);font-size:.8rem;font-weight:600;color:var(--ink)}
.wire{fill:none;stroke:rgb(40 70 200/.14);stroke-width:1.5}
.wire.is-on{stroke:url(#wire-grad);stroke-width:2.5}
.plug-detail{margin-top:1.25rem;border:1px solid var(--line);border-radius:1.4rem;background:var(--paper);box-shadow:var(--shadow);padding:clamp(1.25rem,3vw,2rem);min-height:10rem}
.plug-detail h3{margin-bottom:.7rem;font-size:1.25rem}
.plug-detail p{max-width:64ch}
.chips{display:flex;flex-wrap:wrap;gap:.45rem;margin:1.1rem 0 0;padding:0;list-style:none}
.chips li{font-family:var(--mono);font-size:.76rem;padding:.25rem .65rem;border-radius:.5rem;background:var(--tint);border:1px solid var(--line-2);color:var(--ink)}
@media (max-width:820px){
  .board{grid-template-columns:minmax(0,1fr);gap:3rem;justify-items:stretch}
  .board__list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .board__col--model .board__label{text-align:left}
  .board__col--model .plug{flex-direction:row;text-align:left}
  .core{width:7rem;height:7rem}
  .core__mark{width:2.9rem;height:2.9rem}
}
@media (max-width:420px){.board__list{grid-template-columns:minmax(0,1fr)}}

/* Screenshot deck ---------------------------------------------------------- */
.gallery__tabs{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:2rem}
.gallery__tabs button{min-height:2.7rem;padding:.45rem 1.05rem;border-radius:999px;border:1px solid var(--line-2);background:var(--paper);color:var(--soft);font-size:.9rem;transition:border-color .2s,color .2s,background-color .2s,box-shadow .3s}
.gallery__tabs button:hover{color:var(--ink);border-color:rgb(61 99 255/.45)}
.gallery__tabs button[aria-selected="true"]{color:#fff;font-weight:600;background:var(--grad);border-color:transparent;box-shadow:0 12px 28px -12px rgb(61 99 255/.7)}
.gallery__panel:focus-visible{outline-offset:8px}
.deck{position:relative;aspect-ratio:1280/770;max-width:min(100%,62rem);margin-inline:auto;perspective:2200px;transform-style:preserve-3d;transform:rotateX(calc(var(--tilt,0)*24deg)) scale(calc(1 - var(--tilt,0)*.08));transform-origin:50% 100%}
.shot{position:absolute;inset:0;margin:0;transform-style:preserve-3d;transform:translateX(calc(var(--d,0)*11%)) translateZ(calc(var(--ad,0)*-180px)) rotateY(calc(var(--d,0)*-12deg));opacity:calc(1 - var(--ad,0)*.32);transition:transform 1s var(--ease),opacity .8s var(--ease)}
.shot[data-far]{opacity:0;pointer-events:none}
.shot__frame{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border-radius:1.1rem;padding:.6rem;padding-top:2rem;background:var(--paper);border:1px solid var(--line-2);box-shadow:var(--shadow-lg);overflow:hidden;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .6s var(--ease)}
.shot__frame::before{content:"";position:absolute;left:1rem;top:.8rem;width:.5rem;height:.5rem;border-radius:50%;background:#ff6b8b;box-shadow:.8rem 0 0 #ffc35a,1.6rem 0 0 #14d6c6}
.shot__frame::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgb(255 255 255/.5) 48%,transparent 60%);transform:translateX(-70%);transition:transform 1.3s var(--ease);pointer-events:none}
.shot.is-front .shot__frame::after{transform:translateX(70%)}
.shot img{max-width:100%;max-height:100%;width:auto;height:auto;border-radius:.5rem;object-fit:contain}
.captions{max-width:62rem;margin:1.6rem auto 0;min-height:3.5em;font-size:.98rem;color:var(--soft)}
@media (max-width:640px){
  .shot{transform:translateX(calc(var(--d,0)*7%)) translateZ(calc(var(--ad,0)*-120px)) rotateY(calc(var(--d,0)*-10deg))}
  .shot__frame{padding:.35rem;padding-top:1.4rem;border-radius:.8rem}
  .shot__frame::before{left:.7rem;top:.55rem;width:.38rem;height:.38rem;box-shadow:.6rem 0 0 #ffc35a,1.2rem 0 0 #14d6c6}
}

/* Closing panel ------------------------------------------------------------ */
.cta{padding-block:0 clamp(4rem,8vw,7rem);background:var(--paper)}
.cta__panel{position:relative;isolation:isolate;overflow:hidden;border-radius:2rem;padding:clamp(2.5rem,7vw,6rem) clamp(1.5rem,6vw,5rem);background:linear-gradient(120deg,#17b9b2,#3d63ff 45%,#7c45f5);color:#fff;text-align:center;box-shadow:0 50px 120px -40px rgb(61 99 255/.7)}
.cta__panel h2{margin-inline:auto;color:#fff;font-size:clamp(2.2rem,1.4rem + 3.6vw,4.4rem)}
.cta__panel p{margin:1.25rem auto 0;max-width:36rem;font-size:1.08rem;color:#fff}
.cta__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:.8rem;margin-top:2.2rem}
.cta__blob{position:absolute;z-index:-1;border-radius:50%;filter:blur(50px);opacity:.7}
.cta__blob--1{width:26rem;height:26rem;left:-6rem;top:-10rem;background:#14d6c6}
.cta__blob--2{width:30rem;height:30rem;right:-8rem;bottom:-14rem;background:#a066ff}
.cta__blob--3{width:18rem;height:18rem;left:40%;top:30%;background:#5b8cff}

/* Footer ------------------------------------------------------------------- */
.site-foot{border-top:1px solid var(--line);padding-block:3rem 3.5rem;background:var(--bg);font-size:.9rem}
.site-foot__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:2rem}
.site-foot .brand{margin-bottom:1rem}
.site-foot__meta{color:var(--mute)}
@media (max-width:720px){.site-foot__grid{grid-template-columns:minmax(0,1fr)}}

/* 404 ---------------------------------------------------------------------- */
.notfound{min-height:100svh;display:grid;place-items:center;text-align:center;padding:6rem var(--gutter) 4rem;background:linear-gradient(115deg,#fbfcff,#eef3ff 55%,#efe9ff)}
.notfound__code{font-size:clamp(5rem,16vw,10rem);font-weight:700;letter-spacing:-.06em;line-height:1;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.notfound h1{margin:1rem 0 .8rem;font-size:clamp(1.6rem,1.2rem + 1.6vw,2.4rem)}
.notfound .btn{margin-top:2rem}

/* Motion ------------------------------------------------------------------- */
/* Hidden start states only apply once main.js has registered the observer. */
.reveal-ready .reveal{opacity:0;transform:translateY(40px);filter:blur(6px);transition:opacity 1s var(--ease),transform 1.1s var(--ease),filter 1s var(--ease)}
.reveal-ready .reveal.is-in{opacity:1;transform:none;filter:none}
.reveal-ready [data-split] .w>span{transform:translateY(110%) rotate(6deg);transition:transform 1.1s var(--ease);transition-delay:calc(var(--i,0)*70ms)}
.reveal-ready [data-split].is-in .w>span{transform:none}

@media (prefers-reduced-motion:no-preference){
  .motion-ok .hero__next span{animation:scroll-cue 1.8s var(--ease) infinite;animation-play-state:var(--play)}
  .motion-ok .palette::after{animation:rail 4.5s cubic-bezier(.5,0,.5,1) infinite;animation-play-state:var(--play)}
  .motion-ok .core__ring{animation:spin 6s linear infinite;animation-play-state:var(--play)}
  .motion-ok .core__ring--2{animation-duration:9s;animation-direction:reverse}
  .motion-ok .core__ring--3{animation-duration:24s}
  .motion-ok .core::before{animation:spin 8s linear infinite;animation-play-state:var(--play)}
  .motion-ok .wire-dot{animation:travel var(--dur,2.6s) linear infinite;animation-delay:var(--delay,0s);animation-play-state:var(--play)}
  .motion-ok .cta__blob{animation:blob 14s ease-in-out infinite alternate;animation-play-state:var(--play)}
  .motion-ok .cta__blob--2{animation-duration:18s;animation-direction:alternate-reverse}
  .motion-ok .cta__blob--3{animation-duration:11s}
  .motion-ok .btn--primary{transition:transform .35s var(--ease),box-shadow .3s,background-position .6s}
}
@keyframes scroll-cue{0%{transform:translateY(0);opacity:0}30%{opacity:1}100%{transform:translateY(1rem);opacity:0}}
@keyframes rail{0%{top:1.6rem;opacity:0}10%{opacity:1}90%{opacity:1}100%{top:calc(100% - 5.6rem);opacity:0}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes travel{0%{offset-distance:0%;opacity:0}12%{opacity:1}88%{opacity:1}100%{offset-distance:100%;opacity:0}}
@keyframes caret{50%{opacity:0}}
@keyframes blob{0%{transform:translate(0,0) scale(1)}50%{transform:translate(12%,18%) scale(1.25)}100%{transform:translate(-10%,6%) scale(.9)}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
}

/* Agents ------------------------------------------------------------------- */
.agents{background:linear-gradient(180deg,var(--paper),#f4f0ff)}
.agents__grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(2.5rem,6vw,6rem);align-items:center}
.agents__copy h2{margin-bottom:1.75rem}
.agents__facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem;margin:2rem 0 0}
.agents__facts>div{padding:1.1rem 1.2rem;border-radius:1.1rem;background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow)}
.agents__facts dt{font-weight:600;color:var(--ink);margin-bottom:.35rem}
.agents__facts dd{margin:0;font-size:.9rem;line-height:1.55}
.loop{--r:36%;position:relative;width:min(100%,30rem);aspect-ratio:1;margin-inline:auto}
.loop__ring{position:absolute;inset:calc(50% - var(--r));border-radius:50%;border:2px dashed rgb(61 99 255/.28)}
.loop__ring::before{content:"";position:absolute;inset:-2px;border-radius:50%;background:conic-gradient(from 270deg,transparent 0deg,rgb(61 99 255/.55) 90deg,transparent 90deg);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3px));mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3px))}
.loop__comet{position:absolute;left:50%;top:-9px;width:16px;height:16px;margin-left:-8px;border-radius:50%;background:var(--grad);box-shadow:0 0 0 5px rgb(61 99 255/.15),0 0 24px rgb(61 99 255/.8)}
.loop__core{position:absolute;left:50%;top:50%;width:30%;aspect-ratio:1;transform:translate(-50%,-50%);display:grid;place-items:center;align-content:center;gap:.25rem;border-radius:50%;background:var(--grad);color:#fff;font-family:var(--mono);font-size:.8rem;font-weight:600;box-shadow:0 30px 60px -20px rgb(61 99 255/.7)}
.loop__core .ico{width:2.2rem;height:2.2rem;stroke-width:1.5}
.loop__core::before{content:"";position:absolute;inset:-10%;border-radius:50%;border:2px solid rgb(138 77 255/.35);opacity:0}
.loop__node{position:absolute;display:inline-flex;align-items:center;gap:.45rem;padding:.5rem .8rem;border-radius:.9rem;background:var(--paper);border:1px solid var(--line-2);box-shadow:var(--shadow);font-size:.86rem;font-weight:550;color:var(--ink);white-space:nowrap;transform:translate(-50%,-50%)}
.loop__node .ico{color:var(--blue)}
.loop__node--1{left:50%;top:calc(50% - var(--r))}
.loop__node--2{left:calc(50% + var(--r));top:50%}
.loop__node--3{left:50%;top:calc(50% + var(--r))}
.loop__node--4{left:calc(50% - var(--r));top:50%}
@media (max-width:900px){
  .agents__grid{grid-template-columns:minmax(0,1fr)}
  .loop{--r:31%}
  .loop__node{font-size:.74rem;padding:.4rem .6rem}
}
@media (max-width:520px){.agents__facts{grid-template-columns:minmax(0,1fr)}.loop{--r:28%}}
@media (prefers-reduced-motion:no-preference){
  .motion-ok .loop__ring{animation:spin 8s linear infinite;animation-play-state:var(--play)}
  .motion-ok .loop__node{animation:node-hit 8s linear infinite;animation-play-state:var(--play)}
  .motion-ok .loop__node--2{animation-delay:2s}
  .motion-ok .loop__node--3{animation-delay:4s}
  .motion-ok .loop__node--4{animation-delay:6s}
  .motion-ok .loop__core::before{animation:ping 2.4s ease-out infinite;animation-play-state:var(--play)}
  .motion-ok .agentflow.is-busy .agentflow__avatar::after{animation:ping 1.6s ease-out infinite;animation-play-state:var(--play)}
  .motion-ok .agentflow__task.is-typing p::after{animation:caret 1s steps(1) infinite}
}
@keyframes node-hit{0%{transform:translate(-50%,-50%) scale(1.12);border-color:var(--blue);box-shadow:0 0 0 6px rgb(61 99 255/.14),0 18px 40px -14px rgb(61 99 255/.6)}14%,100%{transform:translate(-50%,-50%) scale(1);border-color:var(--line-2);box-shadow:var(--shadow)}}
@keyframes ping{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.5);opacity:0}}

/* Screen recordings -------------------------------------------------------- */
.record{background:linear-gradient(180deg,var(--paper),#f3efff 55%,var(--paper))}
.record__grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.35fr);gap:clamp(2.5rem,5vw,5rem);align-items:center}
.record__copy h2{margin:0 0 1.5rem}
.tag{display:inline-block;padding:.3rem .75rem;border-radius:999px;background:rgb(138 77 255/.12);color:#5b2bd0;font-family:var(--mono);font-size:.72rem;font-weight:600}
.record__module{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1rem;align-items:start;margin-top:2rem;padding:1.2rem 1.3rem;border-radius:1.2rem;background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow)}
.record__module h3{margin-bottom:.35rem}
.record__module p{font-size:.94rem}
.record__module-ico{display:grid;place-items:center;width:2.8rem;height:2.8rem;border-radius:.9rem;background:var(--grad);color:#fff;box-shadow:0 12px 26px -10px rgb(138 77 255/.7)}
.record__module-ico .ico{width:1.4rem;height:1.4rem}
.record__stage{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,13.5rem);align-items:center;gap:1rem}
.recwin{border-radius:1.1rem;background:var(--paper);border:1px solid var(--line-2);box-shadow:var(--shadow-lg);overflow:hidden}
.recwin__bar{display:flex;align-items:center;gap:.35rem;padding:.55rem .8rem;border-bottom:1px solid var(--line);background:#fbfcff}
.recwin__bar i{width:.5rem;height:.5rem;border-radius:50%;background:#dfe3ef}
.recwin__rec{display:inline-flex;align-items:center;gap:.35rem;margin-left:auto;font-family:var(--mono);font-size:.64rem;font-weight:700;color:var(--warn)}
.recwin__rec b{width:.5rem;height:.5rem;border-radius:50%;background:var(--warn)}
.recwin__screen{position:relative;aspect-ratio:16/10;overflow:hidden;background:#f7f9fe}
.recui{position:absolute;inset:0;display:grid;grid-template-columns:22% minmax(0,1fr)}
.recui__side{display:flex;flex-direction:column;gap:9%;padding:14% 12%;background:#17253f}
.recui__item{display:block;height:9%;min-height:.55rem;border-radius:.3rem;background:rgb(255 255 255/.16)}
.recui__item.rhit--1{display:flex;align-items:center;height:auto;padding:.2rem .35rem;font-family:var(--mono);font-size:clamp(.45rem,.3rem + .4vw,.62rem);color:#fff;background:rgb(255 255 255/.22)}
.recui__main{position:relative;padding:6% 7%}
.recui__tools{display:flex;gap:.4rem;margin-bottom:7%}
.recui__pill{padding:.15rem .55rem;border-radius:999px;background:#e5eafb;font-family:var(--mono);font-size:clamp(.45rem,.3rem + .4vw,.62rem);color:var(--ink)}
.recui__pill--ghost{width:22%;background:#edf0f8}
.recui__rows{display:grid;gap:.45rem}
.recui__rows span{display:block;height:.55rem;border-radius:.3rem;background:#e3e8f5}
.recui__rows span:nth-child(2){width:84%}
.recui__rows span:nth-child(3){width:92%}
.recui__rows span:nth-child(4){width:70%}
.recui__rows span:nth-child(5){width:78%}
.recui__save{position:absolute;right:7%;bottom:9%;padding:.2rem .7rem;border-radius:999px;background:var(--grad);color:#fff;font-family:var(--mono);font-size:clamp(.45rem,.3rem + .4vw,.62rem);font-weight:600}
.recwin__scan{position:absolute;top:0;bottom:0;left:100%;width:18%;margin-left:-18%;background:linear-gradient(90deg,transparent,rgb(61 99 255/.14),transparent);pointer-events:none}
.recwin__cursor{position:absolute;left:86%;top:86%;width:1.25rem;height:1.25rem;filter:drop-shadow(0 2px 3px rgb(15 25 70/.35))}
.recwin__cursor svg{width:100%;height:100%;fill:var(--ink);stroke:#fff;stroke-width:1.5;stroke-linejoin:round}
.recwin__timeline{position:relative;height:.4rem;background:#e8ecf7}
.recwin__progress{position:absolute;left:0;top:0;bottom:0;width:100%;background:var(--grad)}
.rmark{position:absolute;top:50%;width:.8rem;height:.8rem;margin:-.4rem 0 0 -.4rem;border-radius:50%;background:#fff;border:2.5px solid var(--violet);box-shadow:0 2px 6px rgb(138 77 255/.4)}
.rmark--1{left:10%}
.rmark--2{left:32%}
.rmark--3{left:55%}
.rmark--4{left:79%}
.record__agent{position:relative;display:grid;place-items:center}
.record__agent span{position:relative;display:grid;place-items:center;width:3.2rem;height:3.2rem;border-radius:50%;background:var(--grad);color:#fff;box-shadow:0 14px 30px -10px rgb(61 99 255/.75)}
.record__agent span .ico{width:1.5rem;height:1.5rem}
.record__agent span::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid rgb(61 99 255/.4);opacity:0}
.record__agent::before,.record__agent::after{content:"";position:absolute;top:50%;width:1rem;border-top:2px dashed rgb(61 99 255/.45)}
.record__agent::before{right:100%}
.record__agent::after{left:100%}
.recflow{margin:0;padding:0;list-style:none;display:grid;gap:1rem}
.rnode{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:.6rem;padding:.6rem .75rem;border-radius:1rem;background:var(--paper);border:1px solid var(--line-2);box-shadow:var(--shadow);font-size:.86rem;font-weight:600;color:var(--ink);line-height:1.25}
.rnode small{display:block;font-family:var(--mono);font-size:.62rem;font-weight:500;color:var(--mute)}
.rnode+.rnode::before{content:"";position:absolute;left:1.85rem;bottom:100%;height:1rem;border-left:2px solid rgb(61 99 255/.35)}
.rnode__ico{display:grid;place-items:center;width:2.1rem;height:2.1rem;border-radius:.65rem;background:var(--tint);color:var(--blue)}
.rnode--smart{background:linear-gradient(var(--paper),var(--paper)) padding-box,var(--grad) border-box;border:1.5px solid transparent;box-shadow:0 0 0 6px rgb(138 77 255/.1),0 18px 40px -14px rgb(138 77 255/.6)}
.rnode--smart .rnode__ico{background:var(--grad);color:#fff}
.rnode--smart small{color:#5b2bd0}
@media (max-width:1000px){
  .record__grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .record__stage{grid-template-columns:minmax(0,1fr);justify-items:stretch}
  .record__agent::before,.record__agent::after{display:none}
  .recflow{grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
  .rnode+.rnode::before{display:none}
  .rnode{font-size:.78rem;padding:.5rem .55rem}
  .rnode__ico{width:1.8rem;height:1.8rem}
}
@media (prefers-reduced-motion:no-preference){
  .motion-ok .recwin__cursor{animation:rec-cursor 10s ease-in-out infinite;animation-play-state:var(--play)}
  .motion-ok .recwin__progress{animation:rec-progress 10s linear infinite;animation-play-state:var(--play)}
  .motion-ok .recwin__scan{animation:rec-scan 10s linear infinite;animation-play-state:var(--play)}
  .motion-ok .recwin__rec b{animation:rec-dot 2s ease-in-out infinite;animation-play-state:var(--play)}
  .motion-ok .rhit--1{animation:rh1 10s infinite;animation-play-state:var(--play)}
  .motion-ok .rhit--2{animation:rh2 10s infinite;animation-play-state:var(--play)}
  .motion-ok .rhit--3{animation:rh3 10s infinite;animation-play-state:var(--play)}
  .motion-ok .rhit--4{animation:rh4 10s infinite;animation-play-state:var(--play)}
  .motion-ok .rmark--1{animation:rm1 10s infinite;animation-play-state:var(--play)}
  .motion-ok .rmark--2{animation:rm2 10s infinite;animation-play-state:var(--play)}
  .motion-ok .rmark--3{animation:rm3 10s infinite;animation-play-state:var(--play)}
  .motion-ok .rmark--4{animation:rm4 10s infinite;animation-play-state:var(--play)}
  .motion-ok .rnode--1{animation:rn1 10s var(--ease) infinite;animation-play-state:var(--play)}
  .motion-ok .rnode--2{animation:rn2 10s var(--ease) infinite;animation-play-state:var(--play)}
  .motion-ok .rnode--3{animation:rn3 10s var(--ease) infinite;animation-play-state:var(--play)}
  .motion-ok .rnode--4{animation:rn4 10s var(--ease) infinite;animation-play-state:var(--play)}
  .motion-ok .record__agent span::after{animation:ping 2s ease-out infinite;animation-play-state:var(--play)}
}
@keyframes rec-cursor{0%{left:10%;top:72%}8%,16%{left:14%;top:30%}28%,36%{left:33%;top:15%}50%,59%{left:60%;top:42%}72%,90%{left:86%;top:86%}100%{left:10%;top:72%}}
@keyframes rec-progress{0%{width:0}96%,100%{width:100%}}
@keyframes rec-scan{0%{left:0}96%,100%{left:100%}}
@keyframes rec-dot{50%{opacity:.35}}
@keyframes rh1{0%,8%,18%,100%{box-shadow:none}10%,15%{box-shadow:0 0 0 2px #fff,0 0 0 5px var(--blue)}}
@keyframes rh2{0%,29%,38%,100%{box-shadow:none}31%,36%{box-shadow:0 0 0 2px #fff,0 0 0 5px var(--blue)}}
@keyframes rh3{0%,51%,61%,100%{box-shadow:none}53%,59%{box-shadow:0 0 0 2px #fff,0 0 0 5px var(--violet)}}
@keyframes rh4{0%,73%,82%,100%{box-shadow:none}75%,80%{box-shadow:0 0 0 2px #fff,0 0 0 5px var(--blue)}}
@keyframes rm1{0%,10%{transform:scale(0)}12%{transform:scale(1.5)}14%,92%{transform:scale(1)}97%,100%{transform:scale(0)}}
@keyframes rm2{0%,32%{transform:scale(0)}34%{transform:scale(1.5)}36%,92%{transform:scale(1)}97%,100%{transform:scale(0)}}
@keyframes rm3{0%,55%{transform:scale(0)}57%{transform:scale(1.5)}59%,92%{transform:scale(1)}97%,100%{transform:scale(0)}}
@keyframes rm4{0%,79%{transform:scale(0)}81%{transform:scale(1.5)}83%,92%{transform:scale(1)}97%,100%{transform:scale(0)}}
@keyframes rn1{0%,13%{opacity:0;transform:translateX(-18px) scale(.92)}18%,92%{opacity:1;transform:none}97%,100%{opacity:0;transform:none}}
@keyframes rn2{0%,35%{opacity:0;transform:translateX(-18px) scale(.92)}40%,92%{opacity:1;transform:none}97%,100%{opacity:0;transform:none}}
@keyframes rn3{0%,58%{opacity:0;transform:translateX(-18px) scale(.92)}63%,92%{opacity:1;transform:none}97%,100%{opacity:0;transform:none}}
@keyframes rn4{0%,82%{opacity:0;transform:translateX(-18px) scale(.92)}87%,92%{opacity:1;transform:none}97%,100%{opacity:0;transform:none}}