/* estados que o molde fazia por JS viram atributos; o resto é o <style> do molde sem mudança */
:root{--bg:#0A0B0C;--fg:#ECEBE6;--muted:#A7A9A5;--subtle:#8E908D;--faint:#7A7D7B;--a:#A3A6FF;--as:rgba(163,166,255,.12);--ag:rgba(163,166,255,.22)}
html{background:var(--bg);color-scheme:dark}
[hidden]{display:none!important}
.sc-frame{position:relative;border-radius:15px;overflow:hidden;background:#111214;aspect-ratio:5/3}
.sc-video{display:block;width:100%;height:100%;object-fit:cover}
.sc-tab[aria-selected=true]{background:rgba(255,255,255,.08);color:#ECEBE6}
.sc-tab[aria-selected=false]{background:transparent;color:#8A8C89}
.sc-tab[aria-selected=false] .sc-track{opacity:0}
.inst-tab{height:36px;padding:0 14px;border-radius:8px;border:0;font:inherit;font-size:14px;cursor:pointer;background:transparent;color:#8E908D}
.inst-tab[aria-selected=true]{background:rgba(255,255,255,.08);color:#ECEBE6}
.dl{border:1px solid rgba(255,255,255,.08)}
.dl.is-mine{border-color:rgba(163,166,255,.45)}
[data-copy][data-state=idle] .ic-ok,[data-copy][data-state=copied] .ic-copy,[data-copy][data-state=selected] .ic-ok{display:none}
[data-copy][data-state=copied] .copy-text{color:#6FCF97}
body{margin:0;background:#0A0B0C}
a{color:#ECEBE6;text-decoration:none}
a:hover{color:#FFFFFF}
.hg *{box-sizing:border-box}
.hg{text-rendering:optimizeLegibility;font-feature-settings:"kern","liga","calt"}
.hg ::selection{background:rgba(163,166,255,.32);color:#fff}
.hg a:focus-visible,.hg button:focus-visible{outline:2px solid var(--a);outline-offset:3px}
.hg code,.hg pre{font-variant-ligatures:none}
.card{box-shadow:inset 0 1px 0 rgba(255,255,255,.045)}
.dl{position:relative}
.dl .dl-arrow{position:absolute;top:22px;right:22px;color:#7A7D7B;transition:transform .3s cubic-bezier(.2,.8,.2,1),color .3s}
.dl:hover .dl-arrow{transform:translateY(3px);color:#ECEBE6}
.hg h1,.hg h2,.hg h3{text-wrap:balance}
.hg p{text-wrap:pretty}
.navlink{color:#A7A9A5;font-size:14px;padding:10px 12px;border-radius:8px;transition:color .2s,background .2s}
.navlink:hover{color:#ECEBE6;background:rgba(255,255,255,.05)}
.btn{display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 22px;border-radius:12px;font-weight:600;font-size:15px;transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s,background .2s}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:#ECEBE6;color:#0E0F10}
.btn-primary:hover{background:#FFFFFF;color:#0E0F10;box-shadow:0 10px 30px -10px rgba(255,255,255,.35)}
.btn-ghost{border:1px solid rgba(255,255,255,.14);color:#ECEBE6;background:rgba(255,255,255,.02)}
.btn-ghost:hover{background:rgba(255,255,255,.06)}
.card{transition:border-color .3s,transform .3s cubic-bezier(.2,.8,.2,1)}
.card:hover{border-color:rgba(255,255,255,.18);transform:translateY(-2px)}
.prov{display:inline-flex;align-items:center;gap:8px;color:#A7A9A5;font-size:14px;transition:color .2s}
.prov:hover{color:#ECEBE6}
.shot{display:block;width:100%;height:auto}
@keyframes ring{0%{transform:scale(.55);opacity:0}25%{opacity:.5}100%{transform:scale(1.25);opacity:0}}
.ring{position:absolute;left:50%;top:50%;width:1100px;height:1100px;margin:-550px 0 0 -550px;border-radius:50%;border:1px solid rgba(255,255,255,.09);animation:ring 9s linear infinite}
.ring.r2{animation-delay:3s}.ring.r3{animation-delay:6s}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.rise{animation:rise .9s cubic-bezier(.2,.8,.2,1) both}
.d1{animation-delay:.08s}.d2{animation-delay:.18s}.d3{animation-delay:.3s}.d4{animation-delay:.45s}.d5{animation-delay:.6s}
@keyframes blink{50%{opacity:0}}
.caret{display:inline-block;width:8px;height:16px;vertical-align:-3px;animation:blink 1s steps(1) infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.live{animation:pulse 1.6s ease-in-out infinite}
@keyframes travel{0%{left:0;opacity:0}10%{opacity:1}90%{opacity:1}100%{left:100%;opacity:0}}
@keyframes travelback{0%{left:100%;opacity:0}10%{opacity:1}90%{opacity:1}100%{left:0;opacity:0}}
.packet{position:absolute;top:50%;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;animation:travel 2.8s cubic-bezier(.6,0,.4,1) infinite}
.packet.back{animation-name:travelback;animation-delay:1.4s}
.card{position:relative}
.card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(700px circle at 50% -10%,rgba(255,255,255,.07),transparent 45%);opacity:0;transition:opacity .5s}
.card:hover::after{opacity:1}
.btn-primary{position:relative;overflow:hidden}
.btn-primary::before{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.7),transparent);transform:skewX(-20deg);transition:left .7s cubic-bezier(.2,.8,.2,1)}
.btn-primary:hover::before{left:130%}
@keyframes word{from{opacity:0;filter:blur(14px);transform:translateY(.28em)}to{opacity:1;filter:none;transform:none}}
.w{display:inline-block;animation:word 1s cubic-bezier(.2,.8,.2,1) both}
@keyframes sweep{to{transform:rotate(360deg)}}
.radar{position:absolute;left:50%;top:50%;width:1400px;height:1400px;margin:-700px 0 0 -700px;border-radius:50%;background:conic-gradient(from 0deg,transparent 0 300deg,rgba(255,255,255,.035) 350deg,rgba(255,255,255,.09) 360deg);animation:sweep 14s linear infinite;-webkit-mask-image:radial-gradient(closest-side,#000 55%,transparent);mask-image:radial-gradient(closest-side,#000 55%,transparent)}
.grid-dots{position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1.2px);background-size:26px 26px;-webkit-mask-image:radial-gradient(ellipse 60% 55% at 50% 38%,#000,transparent);mask-image:radial-gradient(ellipse 60% 55% at 50% 38%,#000,transparent)}
.stage{perspective:1600px}
.fx{transition:opacity .6s cubic-bezier(.2,.8,.2,1),transform .6s cubic-bezier(.2,.8,.2,1)}
@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
.pop{animation:pop .45s cubic-bezier(.2,.8,.2,1) both}
@keyframes type{from{width:0}to{width:var(--w)}}
.type{display:inline-block;overflow:hidden;white-space:nowrap;vertical-align:bottom;animation:type .9s steps(var(--n)) both}
@keyframes dots{0%,80%,100%{opacity:.25;transform:none}40%{opacity:1;transform:translateY(-3px)}}
.dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#8E908D;animation:dots 1.2s infinite}
.dot:nth-child(2){animation-delay:.15s}.dot:nth-child(3){animation-delay:.3s}
@keyframes cursor{0%{transform:translate(220px,150px);opacity:0}8%{opacity:1}28%{transform:translate(0,0)}32%{transform:translate(0,0) scale(.85)}36%{transform:translate(0,0) scale(1)}80%{transform:translate(0,0);opacity:1}92%,100%{transform:translate(0,0);opacity:0}}
.agent-cursor{position:absolute;left:24px;top:14px;animation:cursor 6s cubic-bezier(.6,0,.3,1) infinite}
@keyframes typing{0%,34%{width:0}62%,90%{width:var(--w)}100%{width:0}}
.typing{display:inline-block;overflow:hidden;white-space:nowrap;vertical-align:bottom;animation:typing 6s infinite;animation-timing-function:steps(var(--n))}
@keyframes focusring{0%,30%{border-color:#25292B;box-shadow:none}36%,88%{border-color:var(--a);box-shadow:0 0 0 4px var(--as)}100%{border-color:#25292B;box-shadow:none}}
.field{animation:focusring 6s infinite}
@keyframes arrive{0%,84%,100%{background:#15181A;box-shadow:inset 0 0 0 1px transparent}90%{background:#1C2024;box-shadow:inset 0 0 0 1px var(--a)}}
.arrive{animation:arrive 2.8s infinite}
.arrive.late{animation-delay:1.4s}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.bob{animation:bob 6s ease-in-out infinite}
@keyframes glow{0%,100%{box-shadow:0 0 0 0 transparent}50%{box-shadow:0 0 36px -6px var(--a)}}
.glow{animation:glow 3.2s ease-in-out infinite}
@keyframes kb{0%{transform:scale(1.02) translate(0,0)}100%{transform:scale(1.14) translate(-4%,-5%)}}
.kb{transform-origin:20% 20%;animation:kb 20s ease-in-out infinite alternate;will-change:transform}
.kb2{transform-origin:80% 30%;animation:kb 24s ease-in-out infinite alternate-reverse;will-change:transform}
@keyframes shimmer{from{background-position:200% 0}to{background-position:-200% 0}}
.shimmer{background:linear-gradient(90deg,#6B6970 0%,#E9E7E4 50%,#6B6970 100%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shimmer 1.6s linear infinite}
.spin{animation:sweep .8s linear infinite}
@keyframes notif{0%,12%{opacity:0;transform:translateY(-16px) scale(.96)}18%,62%{opacity:1;transform:none}70%,100%{opacity:0;transform:translateY(-16px) scale(.96)}}
.notif{animation:notif 8s cubic-bezier(.2,.8,.2,1) infinite}
@media (max-width: 1000px){.hide-md{display:none!important}}
@supports (animation-timeline: view()){
.reveal{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 35%}
@keyframes flatten{from{transform:rotateX(24deg) scale(.9) translateY(-30px);opacity:.6}to{transform:none;opacity:1}}
.tilt{transform-origin:50% 0;animation:flatten linear both;animation-timeline:view();animation-range:entry 0% cover 45%}
@keyframes grow{from{transform:scaleX(0)}to{transform:none}}
.grow{transform-origin:left;animation:grow linear both;animation-timeline:view();animation-range:entry 20% cover 45%}
.line-grow{position:relative}
.line-grow::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--a);transform-origin:left;animation:grow linear both;animation-timeline:view();animation-range:entry 30% cover 40%}
}
@media (prefers-reduced-motion: reduce){
.ring,.caret,.live,.rise,.reveal,.packet,.w,.radar,.tilt,.grow,.type,.dot,.agent-cursor,.typing,.field,.arrive,.bob,.glow,.pop,.shimmer,.spin,.notif,.kb,.kb2,.line-grow::before{animation:none!important}
.fx{transition:none!important}
.typing,.type{width:var(--w)!important}
}
@media (max-width: 760px){
.hide-sm{display:none!important}
}