/* Agent V4 (comparison page only). Uses the V7 tokens from base.css/v7.css. */
.agentv4{padding-top:72px;padding-bottom:90px;scroll-margin-top:90px}
/* Same container and screen size as the first demo section (.demo7 > .wrap, 1200×700). */
.agentv4>.wrap{max-width:1280px}.agentv4-figure,.agentv4-head,.agentv4-steps,.agentv4-foot,.agentv4-note{max-width:1200px;margin-left:auto!important;margin-right:auto!important}
.agentv4-head{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:end;margin-bottom:34px}
.agentv4-meet{display:flex;align-items:center;gap:22px}
.agentv4-crew{position:relative;flex:none;width:178px;height:112px;padding:0;border:0;background:transparent;cursor:pointer;border-radius:16px}
.agentv4-crew .pet{position:absolute;bottom:0;width:104px;height:104px;transform-origin:50% 100%}
.agentv4-crew svg{width:100%;height:100%;shape-rendering:crispEdges;image-rendering:pixelated;filter:drop-shadow(0 6px 10px #0000002e)}
.agentv4-crew .back{left:0;bottom:14px;z-index:1;transform:scale(.7);filter:brightness(.72) saturate(.85);animation:a4bob 3.4s ease-in-out .5s infinite}
.agentv4-crew .mid{left:36px;bottom:7px;z-index:2;transform:scale(.84);filter:brightness(.88);animation:a4bob 3.4s ease-in-out 1.2s infinite}
.agentv4-crew .front{left:74px;z-index:3}
.agentv4-crew:hover .back{translate:-4px 0}.agentv4-crew:hover .mid{translate:-2px 0}
.agentv4-crew.hop .pet{animation:a4hop .55s cubic-bezier(.3,1.5,.5,1) both}.agentv4-crew.hop .mid{animation-delay:.08s}.agentv4-crew.hop .back{animation-delay:.16s}
.agentv4-crew::after{content:'Alt · Shift · Tab';position:absolute;left:0;right:0;top:100%;margin-top:6px;text-align:center;font:500 10px 'Geist Mono',ui-monospace,monospace;color:var(--muted2);letter-spacing:.02em}
.agentv4-meet{padding-bottom:16px}
@keyframes a4bob{50%{translate:0 -3px}}@keyframes a4hop{40%{translate:0 -10px}}
.agentv4-label{margin:0 0 12px;font:500 12px 'Geist Mono',ui-monospace,monospace;color:var(--accent)}
body:not(.dark) .agentv4-label{color:#b7401b}
#agente.agentv4 h2{margin:0;font-size:24px;line-height:1.3;font-weight:500;letter-spacing:-.01em;text-wrap:balance}#agente.agentv4 h2 span{white-space:nowrap}#agente.agentv4 h2 span{color:var(--muted)}
.agentv4-intro{margin:0;max-width:440px;font-size:14px;line-height:1.7;color:var(--muted)}

/* Step tabs: same look as the first demo's .concept .tab6 (computed values). */
.agentv4-steps{display:flex;flex-wrap:wrap;justify-content:center;gap:4px;margin-bottom:22px}
.agentv4-steps button{position:relative;display:inline-flex;align-items:center;gap:9px;height:44px;padding:0 16px;overflow:hidden;border:1px solid transparent;border-radius:9px;background:transparent;color:#92929c;font:600 12px var(--font);cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.agentv4-steps button:hover{color:#f3f2ef}
.agentv4-steps button[aria-selected=true]{background:#ffffff09;border-color:#ffffff13;color:#f3f2ef}
.agentv4-steps .n{padding:4px 6px;border-radius:5px;background:#ffffff06;color:#777780;font:500 10px 'Geist Mono',ui-monospace,Consolas,monospace}
.agentv4-steps [aria-selected=true] .n{background:#ff5a2c0d;color:#ff916d}
.agentv4-steps b{font-weight:600}
.agentv4-steps em{padding:2px 6px;border-radius:5px;background:#ff5a2c14;color:#ff916d;font:600 9.5px var(--font);font-style:normal;letter-spacing:.02em}
.agentv4-steps .track{position:absolute;left:0;right:0;bottom:0;height:1px;background:transparent}
.agentv4-steps .track i{display:block;height:100%;width:calc(var(--p,0)*100%);background:#ff5a2c}
.agentv4-steps button:not([aria-selected=true]) .track i{width:0}
body:not(.dark) .agentv4-steps button{color:#6e6e66}body:not(.dark) .agentv4-steps button[aria-selected=true]{background:#0000000a;border-color:#00000012;color:#0d0d0c}body:not(.dark) .agentv4-steps .n{background:#0000000a;color:#8a8a82}

.agentv4-figure{margin:0}
.agentv4-screen{position:relative;isolation:isolate;width:100%;aspect-ratio:1200/700;overflow:hidden;border-radius:14px;border:1px solid #ffffff18;background:#09090b;box-shadow:0 0 0 8px #ffffff02,0 30px 100px #0009}
/* Same pixel-aurora engine as the V7 demo; violet S-curve so this section reads as its own scene. */
.agentv4-screen .agentv4-aurora{position:absolute;inset:0;width:100%;height:100%;z-index:-2;opacity:.8;mask-image:radial-gradient(ellipse at 50% 60%,#000 35%,transparent 96%);filter:none!important;mix-blend-mode:normal!important}
.agentv4-screen::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,#09090b90,transparent 45%,#09090b40),radial-gradient(ellipse at center,transparent 45%,#09090b 100%)}
.agentv4-screen iframe{position:relative;display:block;width:100%;height:100%;border:0;background:transparent;color-scheme:normal}
.agentv4-caption{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:50px;padding:10px 2px 0}
.agentv4-caption p{margin:0;font-size:14px;line-height:1.6;color:var(--ink)}
.agentv4-caption button{display:flex;align-items:center;gap:6px;flex:none;height:30px;padding:0 11px;border:1px solid var(--border);border-radius:8px;background:transparent;color:var(--muted);font:500 11px var(--font);cursor:pointer}
.agentv4-caption button:hover{background:var(--row-hover);color:var(--ink)}
.agentv4-caption svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.agentv4-foot{display:flex;justify-content:space-between;gap:30px;margin-top:18px}
.agentv4-foot p{margin:0;font-size:12px;line-height:1.8;color:var(--muted)}.agentv4-foot a{color:var(--ink);text-underline-offset:4px;text-decoration-color:var(--border2)}.agentv4-foot a span{color:var(--accent)}
.agentv4-note{margin:12px 0 0;font-size:10.5px;line-height:1.7;color:var(--muted2)}
.agentv4 button:focus-visible,.agentv4 a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media(max-width:900px){.agentv4-head{grid-template-columns:1fr;gap:18px}.agentv4-steps button{height:38px;padding:0 9px;gap:5px;font-size:11px}}
@media(max-width:560px){.agentv4-crew{zoom:.74}.agentv4-steps{display:flex;overflow-x:auto;scrollbar-width:none}.agentv4-steps button{flex:none}.agentv4-foot{display:block}.agentv4-foot p+p{margin-top:8px}}
@media(prefers-reduced-motion:reduce){.agentv4 *{transition:none!important;animation:none!important}}

/* Easter eggs outside the section (V4). */
.agentv4-eggs{position:absolute;left:0;top:0;width:0;height:0;z-index:6}
.agentv4-egg{position:absolute;left:0;top:0}
.agentv4-alt{width:58px;height:54px;margin-top:-44px;cursor:pointer}
.agentv4-alt svg{width:100%;height:100%;shape-rendering:crispEdges;filter:drop-shadow(0 4px 4px #0006)}
.agentv4-alt .leg{transform-box:fill-box;transform-origin:50% 0;animation:a4swing 1.6s ease-in-out infinite}.agentv4-alt .leg-r{animation-delay:-.8s}
@keyframes a4swing{0%,100%{rotate:-16deg}50%{rotate:16deg}}
.agentv4-arrow{position:absolute;left:62px;top:2px;width:14px;height:20px;background:
 linear-gradient(#ff5a2c,#ff5a2c) 5px 0/4px 12px no-repeat,
 linear-gradient(#ff5a2c,#ff5a2c) 0 10px/14px 3px no-repeat,
 linear-gradient(#ff5a2c,#ff5a2c) 2px 13px/10px 3px no-repeat,
 linear-gradient(#ff5a2c,#ff5a2c) 4px 16px/6px 2px no-repeat;image-rendering:pixelated;animation:a4point .9s ease-in-out infinite}
@keyframes a4point{50%{translate:0 5px}}
.agentv4-tip{position:absolute;left:82px;top:0;padding:3px 8px;border-radius:6px;background:var(--ink);color:var(--page);font:500 10px 'Geist Mono',ui-monospace,monospace;white-space:nowrap;opacity:0;translate:-4px 0;transition:opacity .2s,translate .2s}
.agentv4-alt:hover .agentv4-tip{opacity:1;translate:0 0}
.agentv4-peek{width:84px;height:45px;margin-top:-42px;cursor:pointer;transition:translate .35s cubic-bezier(.3,1.4,.5,1)}
.agentv4-peek.duck{translate:0 38px}
.agentv4-peek-art{display:block;width:84px;height:45px}.agentv4-peek-art svg{width:100%;height:100%;shape-rendering:crispEdges}
.agentv4-peek .hand{position:absolute;bottom:-3px;width:11px;height:7px;background:#f3ead8;border:2px solid #2a2522;border-radius:1px}.agentv4-peek .hand.l{left:13px}.agentv4-peek .hand.r{right:13px}
@media(prefers-reduced-motion:reduce){.agentv4-alt .leg,.agentv4-arrow{animation:none!important}}
.agentv4-laugh{height:auto;cursor:default}
.agentv4-laugh-art{display:block}.agentv4-laugh-art svg{display:block;width:100%;height:auto;shape-rendering:crispEdges;filter:drop-shadow(0 6px 8px #0008)}
.agentv4-laugh .leg{transform-box:fill-box;transform-origin:50% 0;animation:a4swing 1.3s ease-in-out infinite}.agentv4-laugh .leg-r{animation-delay:-.65s}
.agentv4-laugh.burst .agentv4-laugh-art{animation:a4giggle .19s steps(2) infinite}
@keyframes a4giggle{50%{translate:0 -2px}}
.agentv4-say{position:absolute;left:82%;bottom:88%;padding:4px 9px;border-radius:9px 9px 9px 2px;background:#fff;color:#141414;font:600 12px Inter,sans-serif;white-space:nowrap;opacity:0;translate:0 4px;transition:opacity .2s,translate .2s;pointer-events:none;box-shadow:0 6px 18px #0006}
.agentv4-say.on{opacity:1;translate:0 0}
@media(prefers-reduced-motion:reduce){.agentv4-laugh .leg,.agentv4-laugh .agentv4-laugh-art{animation:none!important}}