#agents.agents-explainer {
  --ag-bg:var(--bg);--ag-ink:var(--fg);--ag-muted:var(--muted);
  position:relative;display:block;height:calc(var(--ag-stage-height,100svh) + var(--ag-scroll-span,0px));
  padding:0;background:var(--ag-bg);color:var(--ag-ink);overflow:clip;isolation:isolate;scroll-margin-top:var(--nav-h);
}
#agents.agents-explainer::before,#agents.agents-explainer::after {content:none;}
body:has(#agents:hover) .code-trail {visibility:hidden;}
.ag-shell {position:sticky;top:var(--ag-pin-top,var(--nav-h));width:100%;height:var(--ag-stage-height,calc(100svh - var(--nav-h)));margin:0;}
.ag-shell * {box-sizing:border-box;}
.ag-header {position:absolute;top:28px;left:5%;z-index:3;}
.ag-header h2 {font-size:22px;line-height:1.2;letter-spacing:-.04em;margin:0;font-weight:600;}
.ag-intro,.ag-progress {display:none;}
.ag-controls {position:absolute;bottom:30px;left:5%;z-index:5;}
.ag-tabs {display:flex;gap:4px;}
.ag-tab {width:36px;height:44px;padding:0;display:grid;place-items:center;border:0;background:none;color:var(--ag-ink);cursor:pointer;}
.ag-tab::after {content:'';display:block;width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.25;transition:width .3s,opacity .3s;}
.ag-tab[aria-current]::after {width:24px;border-radius:4px;opacity:1;}
.ag-tab-number,.ag-tab-label {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);}
.ag-shell :is(button,a):focus-visible {outline:2px solid currentColor;outline-offset:4px;}
.ag-chapters,.ag-chapter,.ag-chapter-inner {position:absolute;inset:0;margin:0;}
.ag-chapter[hidden] {display:none!important;}
.ag-visual {position:absolute;left:10%;right:10%;top:25%;bottom:9%;margin:0;transform:scale(var(--ag-scale,1));transform-origin:50% 65%;}
.ag-scene {position:absolute;inset:0;}
.ag-scene canvas {display:block;width:100%;height:100%;}
.ag-anchors {display:none;}
.ag-motion {position:absolute;right:0;bottom:0;width:44px;height:44px;display:grid;place-items:center;border:0;background:var(--ag-bg);border-radius:50%;color:var(--ag-muted);cursor:pointer;font:14px inherit;}
.ag-scene-status {position:absolute;bottom:10%;left:10%;right:10%;font-size:14px;text-align:center;color:var(--ag-muted);}
.ag-copy {position:absolute;top:8%;left:5%;right:5%;text-align:center;pointer-events:none;transform:translateY(var(--ag-copy-y,0));}
.ag-copy h3 {margin:0;color:var(--ag-ink);font-size:clamp(30px,3.4vw,55px);font-weight:400;line-height:1.08;letter-spacing:-.045em;}
.ag-copy h3 span,.ag-copy h3 em {display:block;}
.ag-copy h3 em {margin-top:12px;font-family:Georgia,'Times New Roman',serif;font-weight:400;font-size:1.23em;letter-spacing:-.035em;}
.ag-description {max-width:640px;margin:22px auto 0;font-size:clamp(14px,1.25vw,18px);line-height:1.5;color:var(--ag-muted);}
.ag-contact {position:absolute;bottom:28px;right:5%;z-index:4;display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;border:1.5px solid currentColor;border-radius:999px;font-size:14px;font-weight:500;color:var(--ag-ink);background:var(--ag-bg);text-decoration:none;}
@media(max-width:760px){
 .ag-header {top:22px;}.ag-header h2 {font-size:18px;}
 .ag-copy {top:13%;}.ag-copy h3 {font-size:clamp(25px,6.6vw,38px);}
 .ag-copy h3 em {margin-top:12px;}.ag-description {max-width:34ch;margin-top:20px;font-size:14px;}
 .ag-visual {left:0;right:0;top:36%;bottom:15%;}
 .ag-controls {bottom:25px;left:4%;}.ag-tab {width:25px;}
 .ag-contact {bottom:25px;right:4%;padding:0 14px;min-height:44px;font-size:12px;}
 .ag-motion {right:5%;bottom:0;}
}
@media(max-height:620px) and (min-width:761px){
 .ag-copy {top:5%;}.ag-copy h3 {font-size:28px;}.ag-description {margin-top:12px;font-size:14px;}
 .ag-visual {top:32%;bottom:8%;left:18%;right:18%;}
}
@media(prefers-reduced-motion:reduce){.ag-tab::after {transition:none;}}
/* The image opens inside the title: its two lines separate as the blueprint grows. */
.ag-chapter {--ag-expansion:0;--ag-slot:calc(10px + var(--ag-expansion) * 42vh);}
.ag-copy {left:4%;right:40%;top:12%;transform:none;}
.ag-copy h3 {font-size:clamp(26px,2.5vw,43px);line-height:1.16;}
.ag-copy h3 em {margin-top:calc(var(--ag-slot) + 38px);font-size:1.18em;}
.ag-visual {
 left:4%;right:40%;top:calc(12% + 46px);bottom:auto;
 height:var(--ag-slot);overflow:hidden;transform:none;
 clip-path:inset(0 calc((1 - var(--ag-expansion)) * 40%) round calc((1 - var(--ag-expansion)) * 28px));
}
.ag-scene {height:42vh;top:50%;transform:translateY(-50%);}
.ag-motion {right:4%;bottom:0;z-index:3;}
.ag-body {position:absolute;left:65%;right:5%;top:22%;bottom:17%;overflow-y:auto;scrollbar-width:thin;color:var(--ag-ink);}
.ag-description {font-size:clamp(16px,1.35vw,19px);line-height:1.65;max-width:none;margin:0 0 26px;}
.ag-points {padding:0;margin:0 0 24px;list-style:none;display:grid;gap:12px;font-size:14px;}
.ag-points li::before {content:'—';margin-right:10px;}
.ag-details {font-size:14px;line-height:1.7;}
.ag-details summary {cursor:pointer;text-decoration:underline;text-underline-offset:5px;padding:8px 0;}
.ag-details-copy {padding:12px 0;color:var(--ag-muted);}
.ag-details-copy p {margin:0 0 16px;}
.ag-shell summary:focus-visible {outline:2px solid currentColor;outline-offset:3px;}
@media(max-width:760px){
 .ag-chapter {--ag-slot:calc(6px + var(--ag-expansion) * 25vh);}
 .ag-copy {left:5%;right:5%;top:9%;}.ag-copy h3 {font-size:clamp(21px,5.6vw,29px);}
 .ag-copy h3 em {margin-top:calc(var(--ag-slot) + 20px);font-size:1.12em;}
 .ag-visual {left:4%;right:4%;top:calc(9% + 35px);height:var(--ag-slot);bottom:auto;}
 .ag-scene {height:25vh;}
 .ag-body {left:7%;right:7%;top:59%;bottom:12%;}
 .ag-description {font-size:15px;margin-bottom:16px;line-height:1.6;}
 .ag-points {font-size:13px;gap:8px;margin-bottom:16px;}
}
@media(max-height:620px) and (min-width:761px){.ag-copy {top:12%;}.ag-copy h3 {font-size:25px;}.ag-body {top:18%;}.ag-description {font-size:15px;}}