/* Developer page: split hero and a single six-capability grid. */
.developer-page .wrap{width:min(var(--container),calc(100% - 80px))}
.developer-page .hero{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.25fr);gap:48px;align-items:center;padding:100px 0 90px;text-align:left}
.developer-page .hero-copy{position:relative;z-index:1;padding-bottom:45px}
.developer-page .hero h1{font-size:clamp(48px,5.1vw,76px);line-height:1.06;margin:0 0 28px;letter-spacing:-.055em}
.developer-page .hero-desc{font-size:22px;line-height:1.65;max-width:510px;margin:0;color:var(--dev-a7aab3,#a7aab3)}
.developer-page .hero-actions{justify-content:flex-start;gap:24px;margin:34px 0 0;flex-wrap:wrap}
.developer-page .hero-visual{min-width:0;position:relative}
.developer-page .hero .studio{width:1040px;max-width:none;zoom:var(--demo-scale,.65);margin:0;padding:22px 0 112px}
.developer-page .hero .studio .client{width:82%;height:640px;grid-template-columns:190px 1fr}
/* Reference white box, mapped onto the 1040px studio coordinate space. */
.developer-page .hero .studio .shellbox{left:416px;top:393px;right:auto;bottom:auto;width:492px;height:333px;box-sizing:border-box}
.developer-page .hero .studio[data-focus="search"] .shellbox{transform:none}
.developer-page .hero .studio .log{min-height:220px}
.developer-page .hero .studio-controls{position:relative;left:auto;bottom:auto;margin:12px 0 0;padding:0;justify-content:center;z-index:3}
.developer-page .hero::before{left:38%;right:-8%;width:auto;top:8%;bottom:6%;transform:none;background:radial-gradient(ellipse at 56% 54%,var(--dev-a9ccff12,#a9ccff12),transparent 65%)}
.developer-page .hero .hero-noise{left:34%;width:74%;height:95%;top:2%;transform:none;mask-image:radial-gradient(ellipse at 55% 53%,#000 22%,transparent 70%)}
.developer-page .capabilities-section{padding:64px 0 100px}
.developer-page .capabilities-heading{margin:0 0 64px;text-align:left}
.developer-page .capabilities-heading h2{font-size:clamp(38px,4.4vw,60px);font-weight:500;letter-spacing:-.055em;line-height:1.12;margin:0 0 24px}
.developer-page .capabilities-heading p{font-size:21px;line-height:1.65;color:var(--dev-a2a6af,#a2a6af);margin:0;max-width:850px}
.developer-page .ingestion-preview{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:58px 24px;margin:0;padding:0}
.developer-page .ingestion-preview>article{min-width:0}
.developer-page .ingestion-copy{padding:25px 0 0}
.developer-page .ingestion-copy h3{display:flex;align-items:flex-start;gap:10px;font-size:21px;font-weight:500;line-height:1.35;letter-spacing:-.45px;margin:0 0 15px}
.developer-page .ingestion-copy h3 svg{width:21px;height:25px;flex-shrink:0;color:var(--dev-e5e7eb,#e5e7eb)}
.developer-page .ingestion-copy p{font-size:18px;line-height:1.65;color:var(--dev-9fa4ae,#9fa4ae);margin:0;max-width:none}
.developer-page .ingestion-copy .onboarding-link{margin-top:18px;font-size:14px}
.developer-page .ownership-art,.developer-page .context-stage{aspect-ratio:3/2;height:auto;box-sizing:border-box;border:1px solid var(--dev-343536,#343536);border-radius:3px;background:var(--dev-0d0e0f,#0d0e0f);container-type:inline-size;position:relative;overflow:hidden}
.developer-page .ownership-art{padding:7%;justify-content:center}
.developer-page .agent-endpoints{gap:4cqw}
.developer-page .agent-endpoints>span{font-size:3.2cqw;gap:2cqw;padding:3.2cqw 2cqw;white-space:nowrap;border-radius:2cqw}
.developer-page .ownership-art svg:not(.continuity-lines){width:4cqw;height:4cqw}
.developer-page .continuity-lines{height:13cqw}
.developer-page .shared-memory{gap:3cqw;padding:4cqw 3.2cqw;border-radius:2.5cqw}
.developer-page .shared-memory img{width:7cqw;height:7cqw}
.developer-page .shared-memory strong{font-size:3.2cqw}
.developer-page .shared-memory span{font-size:2.45cqw;margin-top:1.5cqw}
.developer-page .permission-row{font-size:3.5cqw;gap:2cqw;padding-bottom:4cqw}
.developer-page .permission-row>span{gap:2cqw}
.developer-page .permission-row>div{gap:1.5cqw}
.developer-page .permission-row>div span{font-size:2.8cqw;padding:1.3cqw 2cqw}
.developer-page .permission-scope{font-size:2.8cqw;gap:3cqw;padding:4cqw 0 5cqw}
.developer-page .managed-memory{padding:4cqw;font-size:3.4cqw;border-radius:2.5cqw}
.developer-page .managed-memory code{font-size:3cqw}
.developer-page .managed-memory>div{margin-top:3cqw;gap:4cqw;font-size:2.8cqw}
/* The fourth illustration selects a small context from a larger memory set. */
.developer-page .context-stage,.developer-page .ownership-art{font-family:'Geist Mono',monospace;line-height:1.5}
.context-stage *{box-sizing:border-box}
.context-stage>div{position:absolute;transition:opacity .5s ease,transform .7s cubic-bezier(.22,.8,.25,1)}
.context-task{font-size:4.2cqw;top:10%;left:12%;right:12%;text-align:center;color:var(--dev-dedfe4,#dedfe4);opacity:0;transform:translateY(8px)}
.context-history{left:8%;top:28%;width:34%;display:grid;gap:1.5cqw}
.context-record{border:1px solid var(--dev-3c3e43,#3c3e43);border-radius:1.6cqw;background:var(--dev-222428,#222428);height:6.2cqw;padding:0 2cqw;display:flex;flex-direction:column;justify-content:center;opacity:0;transform:translateY(8px);transition:opacity .5s,transform .55s,border-color .5s,background .5s}
.context-record i{display:block;width:85%;height:.65cqw;border-radius:1cqw;background:var(--dev-55585e,#55585e);margin:.5cqw 0}.context-record i:last-child{width:60%}
.context-stage code{font:2.55cqw/1.4 'Geist Mono',monospace!important;white-space:nowrap}
.context-record.relevant{color:var(--dev-c5d9f6,#c5d9f6)}
.context-target{left:48%;top:28%;width:44%;height:37cqw;display:flex;flex-direction:column;border:1px solid var(--dev-43464d,#43464d);background:var(--dev-191b1e,#191b1e);border-radius:2cqw;padding:3cqw;opacity:0;transform:translateX(9px)}
.context-target-title{font-size:2.6cqw;color:var(--dev-aaaeb7,#aaaeb7);border-bottom:1px solid var(--dev-ffffff10,#ffffff10);padding-bottom:2cqw;margin-bottom:2cqw}
.context-task-copy{font-size:2.3cqw;line-height:1.5;color:var(--dev-d1d4da,#d1d4da);margin-bottom:2cqw}
.context-slot{font-size:2cqw;white-space:nowrap;line-height:1.7;opacity:0;transition:opacity .3s}.context-slot code{font-size:2cqw!important;color:var(--dev-c5d9f6,#c5d9f6)}
.context-ready{display:flex;align-items:center;gap:1cqw;font-size:2cqw;color:var(--dev-9bc5b0,#9bc5b0);margin-top:auto;padding-top:1.5cqw;white-space:nowrap;opacity:0;transition:opacity .4s}
.context-ready svg{width:2.6cqw;height:2.6cqw;flex-shrink:0}
.context-token{border:1px solid var(--dev-a9ccff55,#a9ccff55);background:var(--dev-28313d,#28313d);color:var(--dev-c5d9f6,#c5d9f6);border-radius:1.3cqw;padding:.7cqw 1.4cqw;opacity:0;left:10%;transition:opacity .25s,left 1s cubic-bezier(.35,0,.15,1),top 1s cubic-bezier(.35,0,.15,1),transform 1s cubic-bezier(.35,0,.15,1)!important;transform-origin:left center}
.token-ui{left:var(--ui-start-x);top:var(--ui-start-y)}.token-api{left:var(--api-start-x);top:var(--api-start-y)}
.context-stage[data-step]:not([data-step="0"]) .context-task{opacity:1;transform:none}
.context-stage[data-step]:not([data-step="0"]) .context-record{opacity:1;transform:none}
.context-record:nth-child(2){transition-delay:.08s}.context-record:nth-child(3){transition-delay:.16s}.context-record:nth-child(4){transition-delay:.24s}.context-record:nth-child(5){transition-delay:.32s}
.context-stage[data-step="2"] .context-record:not(.relevant),.context-stage[data-step="3"] .context-record:not(.relevant),.context-stage[data-step="4"] .context-record:not(.relevant){opacity:.18}
.context-stage[data-step="2"] .relevant,.context-stage[data-step="3"] .relevant,.context-stage[data-step="4"] .relevant{border-color:var(--dev-a9ccff70,#a9ccff70);background:var(--dev-a9ccff14,#a9ccff14)}
.context-stage[data-step="2"] .context-target,.context-stage[data-step="3"] .context-target,.context-stage[data-step="4"] .context-target{opacity:1;transform:none}
.context-stage[data-step="2"] .context-token,.context-stage[data-step="3"] .context-token{opacity:1}
.context-stage[data-step="3"] .token-ui,.context-stage[data-step="4"] .token-ui{left:var(--ui-x);top:var(--ui-y);transform:scale(1)}
.context-stage[data-step="3"] .token-api,.context-stage[data-step="4"] .token-api{left:var(--api-x);top:var(--api-y);transform:scale(1)}
.context-stage[data-step="4"] .context-slot,.context-stage[data-step="4"] .context-ready{opacity:1}
.context-stage[data-step="5"]>div{opacity:0;transform:translateY(-4px)}
@media(min-width:1600px){.developer-page .wrap{width:min(var(--container),calc(100% - 120px))}.developer-page .hero{gap:70px}}
@media(max-width:1050px){.developer-page .hero{grid-template-columns:1fr;gap:40px;padding:65px 0}.developer-page .hero-copy{padding:0;max-width:700px}.developer-page .hero-desc{max-width:650px}.developer-page .hero-visual{width:100%;max-width:820px;justify-self:center}.developer-page .hero::before{left:0;right:0;top:30%}.developer-page .hero .hero-noise{left:-5%;width:110%;top:28%;height:73%}.developer-page .ingestion-preview{grid-template-columns:repeat(2,minmax(0,1fr))}.developer-page .capabilities-section{padding-top:40px}.developer-page .capabilities-heading{margin-bottom:42px}}
@media(max-width:680px){.developer-page .wrap{width:calc(100% - 40px)}.developer-page .hero{padding:48px 0}.developer-page .hero h1{font-size:48px}.developer-page .hero-desc{font-size:19px}.developer-page .hero-actions{gap:14px;margin-top:26px}.developer-page .hero-actions a{font-size:16px;padding:14px 18px;min-height:50px}.developer-page .hero .studio-controls{justify-content:center}.developer-page .hero .studio .side{padding:0 13px 12px;font-size:12px}.developer-page .hero .studio .side strong{font-size:17px}.developer-page .hero .studio .side .project-name{font-size:12px}.developer-page .hero .studio .ask{font-size:13px}.developer-page .ingestion-preview{grid-template-columns:1fr;gap:42px}.developer-page .capabilities-heading h2{font-size:38px}.developer-page .capabilities-heading p{font-size:18px}.developer-page .ingestion-copy h3{font-size:22px}.developer-page .ingestion-copy p{font-size:18px}.developer-page .capabilities-section{padding-bottom:64px}}
@media(prefers-reduced-motion:reduce){.context-stage *{transition:none!important}}

.context-token code{font-size:2cqw!important}
.context-stage[data-step="3"] .context-slot{opacity:1}
.context-stage[data-step="3"] .context-slot code{visibility:hidden}
.context-stage[data-step="4"] .context-token{transition:opacity .1s!important}

/* A quiet, fixed composition: deposit first, then recall a small subset. */
.developer-page .ownership-art.continuity-art{padding:0;display:block}
.developer-page .ownership-art.continuity-art .continuity-scene{display:block;width:100%;height:100%;font-family:'Geist Mono',monospace}
.continuity-agent{fill:var(--dev-1b1e20,#1b1e20);stroke:var(--dev-3b4045,#3b4045);stroke-width:1.4}
.continuity-agent-label{fill:var(--dev-c9cdd4,#c9cdd4);font-size:18px}
.continuity-route{fill:none;stroke:var(--dev-a9ccff,#a9ccff);stroke-opacity:.18;stroke-width:1.2}
.continuity-memory{fill:var(--dev-171a1d,#171a1d);stroke:var(--dev-596b80,#596b80);stroke-opacity:.65;stroke-width:1.4}
.continuity-brand{fill:var(--dev-dce1e8,#dce1e8);font-size:19px;font-weight:500}
.continuity-account{fill:var(--dev-8e9bae,#8e9bae);font-size:12px}
.continuity-block-slot{fill:var(--dev-a9ccff,#a9ccff);fill-opacity:.07;stroke:var(--dev-a9ccff,#a9ccff);stroke-opacity:.12;stroke-width:1}
.continuity-block{fill:var(--dev-a9ccff,#a9ccff);stroke:var(--dev-c7ddfb,#c7ddfb);stroke-width:.6}

.continuity-block.continuity-block-green{fill:var(--dev-8ee1b7,#8ee1b7);stroke:var(--dev-b6f0d3,#b6f0d3)}

/* Keep the backlight centered on the main app, independent of the terminal overlay. */
.developer-page .hero .hero-noise{left:var(--backlight-x);top:var(--backlight-y);width:var(--backlight-width);height:var(--backlight-height);transform:translate(-50%,-50%);mask-image:radial-gradient(ellipse at center,#000 22%,transparent 70%)}
.developer-page .hero::before{display:none}
.developer-page .hero .studio-controls{position:absolute;left:auto;right:0;bottom:16px;margin:0;padding:0}
.developer-page .hero .studio-controls button{width:40px;height:40px;min-height:40px;padding:10px;justify-content:center;color:var(--dev-a7a7ab,#a7a7ab);background:transparent;border:0;transition:color .2s ease}
.developer-page .hero .studio-controls button svg{width:20px;height:20px;color:inherit}
.developer-page .hero .studio-controls button:hover{color:var(--dev-f5f5f5,#f5f5f5);background:transparent}
.developer-page .hero .studio-controls button:focus-visible{color:var(--dev-f5f5f5,#f5f5f5);background:transparent;outline:1px solid var(--dev-aaaaaa,#aaa);outline-offset:2px}
.developer-page .hero .studio-controls button span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Moving labels use the same text metrics as their source and destination. */
.context-stage .context-record.relevant code,
.context-stage .context-slot code,
.context-stage .context-token code{display:inline-block;font:2cqw/1.4 'Geist Mono',monospace!important;padding:0;margin:0;vertical-align:baseline}
.context-stage .context-token{display:flex;align-items:center;font:2cqw/1.4 'Geist Mono',monospace;padding:.25cqw .7cqw;border-radius:.7cqw;z-index:2}
.context-stage[data-step="2"] .context-record.relevant code{visibility:hidden}

/* Set the starting coordinates immediately; only the later transfer travels. */
.context-stage:not([data-step="3"]):not([data-step="4"]) .context-token{transform:none;transition:opacity .25s ease!important}

/* Quiet playback control aligned to the viewport edge of the Hero. */
.developer-page .hero .studio-controls{right:min(0px,calc((100% - 100vw)/2 + 24px));bottom:0}
.developer-page .hero .studio-controls button{opacity:.45;transition:opacity .2s ease,color .2s ease}
.developer-page .hero .studio-controls button:hover,
.developer-page .hero .studio-controls button:focus-visible{opacity:1}

/* Localized thread labels must not inherit the sidebar row padding twice. */
.developer-page .hero .studio .side .thread-anchor > span:not(.thread-tip){padding:0;border-radius:0}

/* Give the dark-mode blue texture a little more room around the hero. */
:root:not([data-theme="light"]) .developer-page .hero .hero-noise{transform:translate(-50%,-50%) scale(1.07)}

/* Subtle, one-time entrance; inner demo transforms remain untouched. */
.js-ready .developer-page .reveal {
  transform: translateY(12px);
  transition: opacity 560ms ease, transform 560ms cubic-bezier(.22, 1, .36, 1);
  transition-delay: var(--entrance-delay, 0ms);
}
.js-ready .developer-page .reveal.visible { transform: none; opacity: 1; }
.js-ready .developer-page .hero-visual.reveal { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js-ready .developer-page .reveal { opacity: 1; transform: none; transition: none; }
}

/* Hero starts on first paint, without waiting for the scroll reveal observer. */
@keyframes developer-hero-copy-enter {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes developer-hero-client-enter {
  from { opacity: 0; transform: translate(-24px, -20px) scale(.88); }
  to { opacity: 1; transform: none; }
}
@keyframes developer-hero-memory-enter {
  from { opacity: 0; transform: translate(24px, 24px) scale(.86); }
  to { opacity: 1; transform: none; }
}
@keyframes developer-hero-backdrop-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: no-preference) {
  .developer-page .hero-copy > h1 {
    animation: developer-hero-copy-enter 900ms cubic-bezier(.22, 1, .36, 1) 120ms both;
  }
  .developer-page .hero-desc {
    animation: developer-hero-copy-enter 850ms cubic-bezier(.22, 1, .36, 1) 260ms both;
  }
  .developer-page .hero-actions {
    animation: developer-hero-copy-enter 800ms cubic-bezier(.22, 1, .36, 1) 380ms both;
  }
  .developer-page .hero .studio .client {
    transform-origin: top left;
    animation: developer-hero-client-enter 950ms cubic-bezier(.22, 1, .36, 1) 180ms backwards;
  }
  .developer-page .hero .studio .shellbox {
    transform-origin: bottom right;
    animation: developer-hero-memory-enter 950ms cubic-bezier(.22, 1, .36, 1) 280ms backwards;
  }
  .developer-page .hero .hero-noise,
  .developer-page .hero .studio::before {
    opacity: 0;
    transition: opacity 1000ms ease;
  }
  .developer-page .hero.hero-windows-ready .hero-noise,
  .developer-page .hero.hero-windows-ready .studio::before {
    opacity: 1;
  }
}

/* Match the primary CTA corner radius within the Hero. */
.developer-page .hero-actions .button-secondary{border-radius:var(--primary-radius,8px)}

/* Pausing the conversation must never pause the foreground entrance. */
.developer-page .hero .studio[data-still="true"] > .client,
.developer-page .hero .studio[data-still="true"] > .shellbox {
  animation-play-state: running !important;
}

/* Fill the desktop illustration column up to the shared content boundary. */
@media (min-width:1051px) {
  .developer-page .hero .studio { padding-bottom: 90px; }
  .developer-page .hero .studio .client { width:84%; height:700px; }
  .developer-page .hero .studio .shellbox { left:430px; top:433px; height:350px; }
}

/* Fade the first demo content into the settled windows without moving the shells. */
@media (prefers-reduced-motion:no-preference) {
  .developer-page .hero #studio-chat,
  .developer-page .hero #studio-log {
    opacity:0;
    transition:opacity 700ms cubic-bezier(.22,1,.36,1);
  }
  .developer-page .hero.hero-demo-ready #studio-chat,
  .developer-page .hero.hero-demo-ready #studio-log {
    opacity:1;
  }
}

/* Selection fades with the first conversation, including its inset outline. */
@media (prefers-reduced-motion:no-preference) {
  .developer-page .hero .side .thread-anchor {
    transition:background-color 700ms cubic-bezier(.22,1,.36,1),
      box-shadow 700ms cubic-bezier(.22,1,.36,1),
      color 700ms cubic-bezier(.22,1,.36,1);
  }
}

/* Returned context shares the deposit connection gradients and glow. */
.hero .tool-call[data-call="search"][data-result] .memory-list li {
  animation:memory-result-arrive 450ms ease both;
}
.hero .tool-call[data-call="search"][data-result] .memory-list li:nth-child(2) {
  animation-delay:120ms;
}
@keyframes memory-result-arrive { from {opacity:0;transform:translateY(3px)} to {opacity:1;transform:none} }
@media(prefers-reduced-motion:reduce) {
  .hero .tool-call[data-call="search"][data-result] .memory-list li {animation:none}
}