/* N05 AI Agent Development — bounded arena */
.page-ag main>section{overflow-x:clip}
.mono{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--p3)}
.crumbs{display:flex;flex-wrap:wrap;gap:10px;font-size:14px;color:var(--mut);margin-bottom:22px}
.crumbs a:hover{color:var(--p3)}.crumbs b{color:var(--p3);font-weight:600}
:root{--okg:#1c9d61;--okb:#e6f7ee;--amb:#e0a100;--ambd:#9a6b00;--ambb:#fff6db;--redc:#d9435f}
.tape{background:repeating-linear-gradient(-45deg,#f5c030 0 14px,#1d1b33 14px 28px)}

/* hero */
.ag-hero{position:relative;padding:60px 0 0;background:linear-gradient(rgba(127,66,244,.05) 1px,transparent 1px) 0 0/40px 40px,linear-gradient(90deg,rgba(127,66,244,.05) 1px,transparent 1px) 0 0/40px 40px,linear-gradient(180deg,#fff,var(--lav2));overflow:hidden}
.ag-hero:after{content:"";position:absolute;left:0;right:0;bottom:0;height:8px;background:repeating-linear-gradient(-45deg,#f5c030 0 14px,#1d1b33 14px 28px);opacity:.9}
.ag-hin{display:grid;grid-template-columns:1.08fr .92fr;gap:24px;align-items:end}
.ag-hin>*{min-width:0}
.ag-copy{padding-bottom:90px}
.ag-h1{font-size:clamp(32px,3.6vw,52px);margin:18px 0 22px}
.kw{position:relative;display:inline-block}
.kw:after{content:"";position:absolute;left:-.08em;right:-.08em;top:.1em;bottom:.02em;border:2.5px solid var(--p);border-radius:.3em;opacity:0;transform:scale(1.2);animation:kwBox .45s var(--ease) forwards}
.k1:after{animation-delay:1.1s}.k2:after{animation-delay:1.4s;border-color:var(--amb)}.k3:after{animation-delay:1.7s;border-color:var(--okg)}
@keyframes kwBox{to{opacity:1;transform:none}}
.ag-vis{position:relative;min-height:620px;display:flex;justify-content:flex-start;align-items:flex-end}
.ag-eagle{position:relative;width:auto;height:590px;max-width:86%;object-fit:contain}
.job{position:absolute;right:-30px;top:20px;z-index:2;width:228px;padding:14px;border-radius:16px;background:#fff;border:1px solid var(--line);box-shadow:0 22px 44px rgba(80,60,140,.2);opacity:0;animation:fadeUp .6s var(--ease) 1.1s forwards}
.job b{display:block;font-size:14.5px;margin:4px 0 10px}
.job ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.job li{position:relative;padding:6px 10px 6px 30px;border-radius:8px;font-size:13px;font-weight:700;opacity:0;animation:fadeIn .3s forwards}
.job li:nth-child(1){animation-delay:1.5s}.job li:nth-child(2){animation-delay:1.7s}.job li:nth-child(3){animation-delay:1.9s}.job li:nth-child(4){animation-delay:2.1s}.job li:nth-child(5){animation-delay:2.3s}
.jy{background:var(--okb);color:#136b43}
.jn{background:#f4f2f8;color:#8a869c}
.jy:before{content:"✓";position:absolute;left:10px;color:var(--okg);font-weight:900}
.jn:before{content:"";position:absolute;left:10px;top:50%;width:10px;height:8px;margin-top:-2px;border-radius:2px;background:#a39fb5}
.jn:after{content:"";position:absolute;left:11.5px;top:50%;width:7px;height:6px;margin-top:-7px;border:2px solid #a39fb5;border-bottom:0;border-radius:5px 5px 0 0;box-sizing:border-box}

/* what is an agent */
.wh-head{max-width:760px;margin-bottom:30px}
.trio3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.tp{padding:24px;border-radius:22px;background:#fff;border:1px solid var(--line);box-shadow:var(--sh)}
.tp-ag{border:2px solid var(--p)}
.tp h3{font-size:20px;margin:16px 0 6px}.tp p{color:var(--mut);font-size:15px}
.tp-v{height:100px;border-radius:14px;background:var(--lav2);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}
.v-chat{flex-direction:column;gap:8px;align-items:stretch;padding:14px 22px}
.bq,.ba{height:22px;border-radius:11px;opacity:0}
.bq{width:55%;align-self:flex-end;background:#2f6bff}.ba{width:70%;background:#fff;border:1px solid var(--line)}
.tp.vis .bq{animation:fadeUp .4s .3s forwards}.tp.vis .ba{animation:fadeUp .4s .9s forwards}
.v-flow{gap:0}
.v-flow i{width:34px;height:34px;border-radius:8px;background:#fff;border:2px solid #cfc6e2;margin:0 9px;position:relative;transition:.3s}
.v-flow i:not(:last-child):after{content:"";position:absolute;left:100%;top:50%;width:18px;height:2px;background:#cfc6e2}
.tp.vis .v-flow i{animation:flowLit 3s infinite}
.tp.vis .v-flow i:nth-child(2){animation-delay:.5s}.tp.vis .v-flow i:nth-child(3){animation-delay:1s}.tp.vis .v-flow i:nth-child(4){animation-delay:1.5s}
@keyframes flowLit{0%,20%{background:var(--p);border-color:var(--p)}30%,100%{background:#fff;border-color:#cfc6e2}}
.v-agent svg{width:88%;height:auto}
.v-agent path{fill:none;stroke:#cfc6e2;stroke-width:3}
.v-agent circle{fill:var(--p)}
.v-agent .hot{stroke:var(--p);stroke-width:4;stroke-dasharray:260;stroke-dashoffset:260}
.tp.vis .v-agent .hot{animation:hotDraw 3.5s var(--ease) .4s infinite}
@keyframes hotDraw{0%{stroke-dashoffset:260}50%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:0;opacity:0}}
.flex{display:grid;grid-template-columns:auto 1fr;gap:10px 18px;align-items:center;margin-top:24px;padding:20px 24px;border-radius:18px;background:var(--ink);color:#fff;font-weight:700;font-size:14px}
.fx-b{height:10px;border-radius:5px;background:rgba(255,255,255,.1);overflow:hidden}
.fx-b i{display:block;height:100%;width:0;border-radius:5px;background:linear-gradient(90deg,var(--p),#b44bff);transition:width 1.2s var(--ease) .3s}
.fx2 i{background:linear-gradient(90deg,#f5c030,#ff9a3c);transition-delay:.7s}
.flex.vis .fx-b i{width:80%}.flex.vis .fx2 i{width:92%}

/* narrow */
.nr-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.nr-grid>*{min-width:0}
.simpler{display:flex;gap:14px;align-items:flex-start;margin-top:18px;padding:16px;border-radius:16px;background:#fff;border:1px solid var(--line)}
.simpler .sq{flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--ambb);color:var(--ambd);font-weight:900}
.simpler p{margin:0;font-size:15px}
.stairs{position:relative;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:auto auto;align-items:end;gap:0 10px;min-height:340px;padding:20px}
.stp{grid-row:2;display:flex;flex-direction:column;justify-content:flex-end;padding:16px;border-radius:14px 14px 0 0;background:#fff;border:1px solid var(--line);box-shadow:var(--sh);transform-origin:bottom;transform:scaleY(0);transition:transform .6s cubic-bezier(.3,1.3,.5,1);transition-delay:calc(.2s + var(--k)*.25s)}
.stairs.vis .stp{transform:none}
.st1{height:110px;border-top:4px solid var(--okg)}.st2{height:180px;border-top:4px solid var(--p)}
.st3{grid-column:3;height:260px;background:repeating-linear-gradient(-45deg,#fff 0 12px,#f6f3fb 12px 24px);border:2px dashed #cfc6e2}
.stp b{font-size:17px}
.st3:before{content:"";position:absolute;top:18px;left:50%;width:26px;height:20px;margin-left:-13px;border-radius:5px;background:#a39fb5}
.st3:after{content:"";position:absolute;top:6px;left:50%;width:18px;height:16px;margin-left:-9px;border:4px solid #a39fb5;border-bottom:0;border-radius:10px 10px 0 0;box-sizing:border-box}
.stp{position:relative}
.gatebar{grid-row:1;grid-column:3;margin-bottom:10px;padding:8px 10px;border-radius:10px;background:var(--ambb);border:1px solid #f1d58a;color:var(--ambd);font-size:12px;font-weight:800;text-align:center;opacity:0;transform:translateY(-6px);transition:.4s 1.2s}
.stairs.vis .gatebar{opacity:1;transform:none}

/* boundary arena */
.bd-head{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end;margin-bottom:28px}
.arena{display:grid;grid-template-columns:1.1fr .9fr;gap:18px;padding:18px;border-radius:26px;background:var(--ink)}
.zone{position:relative;display:flex;flex-direction:column;justify-content:center;padding:40px 22px 22px;border-radius:18px;border:2.5px dashed #6fe0ae;background:rgba(79,209,151,.06)}
.zlabel,.olabel{position:absolute;top:12px;left:18px;font-family:"JetBrains Mono",monospace;font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:#6fe0ae}
.outside{position:relative;padding:40px 18px 18px;border-radius:18px;background:rgba(255,255,255,.04);border:2px solid transparent;border-image:repeating-linear-gradient(-45deg,#f5c030 0 10px,#1d1b33 10px 20px) 8}
.olabel{color:#f5c030}
.tools{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.zone .tools{gap:18px 12px}
.zone .tool{padding:20px 14px}
.outside .tools{grid-template-columns:1fr}
.tool{position:relative;display:flex;align-items:center;gap:10px;padding:14px;border-radius:12px;border:1.5px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:#fff;font:inherit;font-size:14px;font-weight:700;text-align:left;cursor:pointer;transition:.25s}
.tool:hover{border-color:rgba(255,255,255,.35)}
.tool.ok.sel{border-color:#6fe0ae;background:rgba(79,209,151,.16)}
.tool.no{color:#cfcbe0}
.tool.no em{margin-left:auto;font-style:normal;font-size:10.5px;font-weight:800;padding:3px 7px;border-radius:8px;background:rgba(245,192,48,.16);color:#f5c030;white-space:nowrap}
.tool.no.sel{border-color:#f5c030;animation:shakeX .4s}
@keyframes shakeX{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.tl-i{flex:none;width:22px;height:22px;border-radius:6px;background:#6fe0ae}
.tl-i.draft{background:#c9b3ff}
.tl-lock{flex:none;position:relative;width:18px;height:14px;margin-top:6px;border-radius:3px;background:#f5c030}
.tl-lock:before{content:"";position:absolute;left:3px;top:-8px;width:12px;height:10px;border:2.5px solid #f5c030;border-bottom:0;border-radius:7px 7px 0 0;box-sizing:border-box}
.agbot{position:absolute;left:10%;top:40%;width:34px;height:34px;border-radius:12px;background:#fff;box-shadow:0 0 0 5px rgba(201,179,255,.25),0 8px 18px rgba(0,0,0,.3);pointer-events:none;z-index:2;animation:botRoam 9s ease-in-out infinite}
.agbot:before{content:"";position:absolute;left:7px;right:7px;top:9px;height:12px;border-radius:6px;background:var(--ink)}
.agbot i:before,.agbot i:after{content:"";position:absolute;top:13px;width:5px;height:5px;border-radius:50%;background:#6fe0ae}
.agbot i:before{left:11px}.agbot i:after{right:11px}
@keyframes botRoam{0%{left:8%;top:30%}18%{left:52%;top:30%}32%{left:52%;top:70%}46%{left:8%;top:70%}58%{left:90%;top:50%}62%{left:96%;top:50%;box-shadow:0 0 0 8px rgba(245,192,48,.5),0 8px 18px rgba(0,0,0,.3)}70%{left:80%;top:50%}85%{left:30%;top:40%}100%{left:8%;top:30%}}
.arena.paused .agbot{animation-play-state:paused;background:#a39fb5}
.arena.paused .agbot i:before,.arena.paused .agbot i:after{background:#f5c030}
.arena.paused .zone{border-color:#f5c030}
.console{grid-column:1/-1;display:grid;grid-template-columns:1fr auto;gap:10px 20px;align-items:center;padding:16px 18px;border-radius:14px;background:rgba(255,255,255,.05)}
.console .mono{color:#c9b3ff;grid-column:1/-1}
.cmsg{margin:0;color:#fff;font-weight:600;font-size:15px;min-height:1.5em}
.cmsg.okm{color:#6fe0ae}.cmsg.nom{color:#f5c030}
.ctrls{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.ctl{display:flex;flex-direction:column;padding:8px 12px;border-radius:10px;background:rgba(255,255,255,.06);font-size:11.5px;color:#b5afd3}
.ctl b{color:#fff;font-size:12.5px}
.pause{display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:10px;border:0;background:#f5c030;color:#1d1b33;font:inherit;font-size:13.5px;cursor:pointer}
.pz{width:12px;height:14px;border-left:4px solid #1d1b33;border-right:4px solid #1d1b33;box-sizing:border-box}
.pause[aria-pressed="true"]{background:#6fe0ae}
.pause[aria-pressed="true"] .pz{width:0;height:0;border:0;border-left:12px solid #1d1b33;border-top:7px solid transparent;border-bottom:7px solid transparent}
.bd-note{margin-top:18px;font-weight:600;text-align:center}
.bd-note small{display:block;font-weight:400;color:var(--mut);margin-top:4px}

/* test trace */
.ts-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.ts-grid>*{min-width:0}
.tcases{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.tcases span{padding:8px 12px;border-radius:10px;background:#fff;border:1px solid var(--line);border-left:3px solid #f5c030;font-weight:700;font-size:14px}
.trace{padding:22px;border-radius:22px;background:#fff;border:1px solid var(--line);box-shadow:var(--sh)}
.done{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:14px;border-radius:14px;background:var(--okb)}
.done .mono{width:100%;color:#136b43}
.done b{font-size:15.5px}
.looks{margin-left:auto;font-style:normal;font-size:12px;font-weight:800;padding:4px 10px;border-radius:10px;background:#fff;color:var(--okg);transition:.4s 2.4s}
.trace.vis .looks{background:#fdecef;color:var(--redc);text-decoration:line-through}
.steps2{list-style:none;margin:14px 0;padding:0;display:grid;gap:8px}
.steps2 li{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;background:var(--lav2);font-size:14px;font-weight:600;opacity:0;transform:translateX(-10px);transition:.4s var(--ease);transition-delay:calc(.4s + var(--k)*.45s)}
.trace.vis .steps2 li{opacity:1;transform:none}
.steps2 li.bad{background:#fff6f7;color:#7a1f33}
.s-ok,.s-bad{flex:none;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:900;color:#fff}
.s-ok{background:var(--okg)}.s-ok:after{content:"✓"}
.s-bad{background:var(--redc)}.s-bad:after{content:"!"}
.verdict{padding:12px 14px;border-radius:12px;background:var(--ink);color:#fff;font-size:14px;opacity:0;transition:opacity .4s 2.4s}
.trace.vis .verdict{opacity:1}
.verdict b{color:#ff9fb1}
.trace small{display:block;margin-top:8px;color:var(--mut);font-size:11.5px}

/* production gates */
.pd-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center}
.pd-grid>*{min-width:0}
.gates{padding:24px;border-radius:24px;background:#fff;border:1px solid var(--line);box-shadow:var(--sh)}
.gl{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.gate{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:12px;background:var(--lav2);border:1.5px solid var(--line);font-weight:700;font-size:14.5px;cursor:pointer;transition:.25s}
.gate input{position:absolute;opacity:0;pointer-events:none}
.gbox{flex:none;width:20px;height:20px;border-radius:6px;border:2px solid #b9b0d3;background:#fff;position:relative;transition:.2s}
.gate input:checked+.gbox{background:var(--okg);border-color:var(--okg)}
.gate input:checked+.gbox:after{content:"";position:absolute;left:5px;top:1px;width:6px;height:11px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.gate:has(input:checked){border-color:#a9e3c6;background:var(--okb)}
.gate input:focus-visible+.gbox{outline:2px solid var(--p);outline-offset:2px}
.pr-badge{display:flex;align-items:center;gap:14px;margin-top:16px;padding:16px 18px;border-radius:14px;background:#f4f2f8;border:2px dashed #cfc6e2;color:#8a869c;transition:.4s}
.pr-badge b{font-size:18px}
.pr-c{margin-left:auto;font-size:12.5px;font-weight:700}
.pr-l{flex:none;position:relative;width:22px;height:17px;margin-top:6px;border-radius:4px;background:#a39fb5;transition:.3s}
.pr-l:before{content:"";position:absolute;left:3px;top:-10px;width:16px;height:13px;border:3px solid #a39fb5;border-bottom:0;border-radius:9px 9px 0 0;box-sizing:border-box;transition:.3s;transform-origin:right bottom}
.gates.all .pr-badge{background:var(--okb);border:2px solid var(--okg);color:#136b43;animation:hhPop2 .5s cubic-bezier(.3,1.5,.5,1)}
.gates.all .pr-l{background:var(--okg)}
.gates.all .pr-l:before{border-color:var(--okg);transform:translateX(8px) rotate(25deg)}
@keyframes hhPop2{50%{transform:scale(1.04)}}
.gt-note{display:block;margin-top:10px;color:var(--mut);font-size:12.5px}

/* faq */
.afq-in{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:start}
.afq-in>*{min-width:0}
.qn{font-family:"JetBrains Mono",monospace;font-size:12px;color:var(--p);margin-right:14px;flex:none}
.qa button{justify-content:flex-start}.qa button .pm{margin-left:auto}
.ans a{color:var(--p3);font-weight:700;text-decoration:underline}

@media (max-width:1100px){
 .ag-hin{grid-template-columns:1fr;gap:0}
 .ag-copy{padding-bottom:10px}
 .ag-vis{min-height:0;max-width:640px;margin:0 auto;width:100%}
 .ag-eagle{height:500px}
 .job{right:0}
 .nr-grid,.ts-grid,.pd-grid,.afq-in,.bd-head{grid-template-columns:1fr;gap:28px}
 .trio3{grid-template-columns:1fr}
}
@media (max-width:700px){
 .ag-hero{padding-top:34px}
 .ag-vis{flex-direction:column;align-items:center}
 .ag-eagle{height:380px;max-width:100%}
 .job{position:relative;right:auto;top:auto;width:100%;max-width:340px;margin:-30px auto 26px}
 .flex{grid-template-columns:1fr}
 .stairs{min-height:300px;padding:10px 0}
 .gatebar{font-size:11px;padding:6px}
 .st1{height:90px}.st2{height:150px}.st3{height:220px}
 .stp{padding:12px}.stp b{font-size:14.5px}
 .arena{grid-template-columns:1fr;padding:12px}
 .tools{grid-template-columns:1fr}
 .console{grid-template-columns:1fr}
 .ctrls{justify-content:flex-start}
 .gl{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
 .kw:after,.job,.job li{animation:none;opacity:1;transform:none}
 .agbot,.tp.vis .v-flow i,.tp.vis .v-agent .hot{animation:none}
 .v-agent .hot{stroke-dashoffset:0}
}