:root{
  --canvas:#171717;--slab:#171717;--plate:#222222;
  --brass:#d6d3d1;--bone:#fafaf9;
  --content:#F0F0F3;--quiet:#C9C9D1;--chrome:#83838D;--dim:#6C6C76;
  --functional:var(--chrome);--focus:var(--bone);
  --hair:rgba(250,250,249,.10);--ghost:rgba(250,250,249,.05);
  --sans:"IBM Plex Sans",system-ui,sans-serif;--mono:"IBM Plex Mono",ui-monospace,monospace;
  --display:"Bricolage Grotesque",var(--sans);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;color-scheme:dark}
body{background:var(--canvas);color:var(--bone);font-family:var(--sans);line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.page{max-width:1000px;margin:0 auto;padding:0 24px}

.hero{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 0 56px;gap:34px}
.stage-wrap{width:100%;display:flex;justify-content:center}
.stage{position:relative;width:var(--fw,880px);height:var(--fh,600px);flex:none;transform-origin:top center;transform:scale(var(--s,1))}
.wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.wires path{fill:none;stroke:rgba(214,211,209,.14);stroke-width:1.25;transition:stroke .3s}
.wires path.hot{stroke:rgba(214,211,209,.85);filter:drop-shadow(0 0 5px rgba(214,211,209,.5))}
.wires .pad{fill:rgba(214,211,209,.35)}
.spark{fill:var(--brass);opacity:0}
.spark.run{animation:spark 1.1s ease-in-out forwards}
@keyframes spark{0%{opacity:0;offset-distance:0%}14%{opacity:1}86%{opacity:1}100%{opacity:0;offset-distance:100%}}

.node{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:8px;z-index:1}
.node .tile{width:52px;height:52px;border-radius:3px;background:var(--plate);border:1px solid var(--hair);display:flex;align-items:center;justify-content:center;transition:border-color .35s,box-shadow .35s}
.node .tile svg{width:26px;height:26px}
.node.agent .tile{background:var(--slab);color:var(--bone)}
.node.human .tile{background:var(--slab)}
.node.human .tile svg{width:36px;height:36px}
.node.live .tile{border-color:var(--brass);box-shadow:0 0 0 1px var(--brass),0 0 26px rgba(214,211,209,.4)}
.node .name{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--dim);white-space:nowrap;transition:color .35s}
.node.live .name{color:var(--brass)}

.screen{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:var(--pw,320px);height:var(--ph,600px);
  background:var(--slab);border:1px solid rgba(214,211,209,.20);border-radius:6px;z-index:2;overflow:hidden;
  box-shadow:0 0 70px rgba(214,211,209,.07),0 0 160px rgba(214,211,209,.04)}
.track{display:flex;width:200%;height:100%;transition:transform .55s cubic-bezier(.4,0,.2,1)}
.view{width:50%;height:100%;display:flex;flex-direction:column;min-width:0}

.hdr{display:flex;align-items:flex-start;gap:9px;padding:13px 13px 11px;border-bottom:1px solid var(--ghost);flex:none}
.hdr .back{color:var(--chrome);font-size:17px;line-height:1.1}
.hdr .tile{width:26px;height:26px;border-radius:3px;background:var(--slab);border:1px solid rgba(214,211,209,.35);display:flex;align-items:center;justify-content:center;flex:none;color:var(--bone)}
.hdr .tile svg{width:15px;height:15px}
.hdr .t{min-width:0;flex:1;display:block}
.hdr .title{display:block;font-size:16px;font-weight:600;color:var(--content);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hdr .title .h{color:var(--brass)}
.hdr .sub{display:block;font-family:var(--mono);font-size:10.5px;color:var(--functional);line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hdr .acts{color:var(--chrome);font-size:14px;letter-spacing:.08em;flex:none;line-height:1.3}

.strip{font-family:var(--mono);font-size:10.5px;color:var(--functional);padding:9px 13px;border-bottom:1px solid var(--ghost);flex:none;display:flex;gap:7px;align-items:baseline}
.strip .up{color:var(--brass)}
.ledger{flex:1;padding:12px 13px 6px;display:flex;flex-direction:column;justify-content:flex-end;gap:15px;overflow:hidden}

.turn{display:none;flex-direction:column;gap:6px;opacity:0;transform:translateY(5px);transition:opacity .38s ease,transform .38s ease}
.turn.in{display:flex;opacity:1;transform:none}
.turn.enter{opacity:0;transform:translateY(5px)}
.byline{display:flex;align-items:center;gap:7px}
.byline .av{width:22px;height:22px;border-radius:3px;background:var(--plate);border:1px solid var(--hair);display:flex;align-items:center;justify-content:center;flex:none}
.byline .av svg{width:16px;height:16px}
.byline.ag .av{background:var(--slab);border-color:rgba(214,211,209,.35);color:var(--bone)}
.byline.ag .av svg{width:13px;height:13px}
.byline .who{font-size:13.5px;font-weight:600}
.byline .kind{font-family:var(--mono);font-size:9px;letter-spacing:.14em;color:var(--dim)}
.byline .at{margin-left:auto;font-family:var(--mono);font-size:9.5px;color:var(--functional)}
.turn .say{font-size:13.5px;line-height:1.5;color:var(--content)}
.turn .say .m{color:var(--brass)}
.turn .say a{border-bottom:1px solid rgba(214,211,209,.55)}
.turn.sys .say{font-size:12px;color:var(--quiet)}

.card{border:1px solid var(--hair);border-radius:3px;padding:11px 12px;display:flex;flex-direction:column;gap:7px}
.card .ttl{font-size:13px;font-weight:600;color:var(--content);line-height:1.35}
.card .desc{font-size:12px;color:var(--quiet);line-height:1.4}
.card .go{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--content);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card .go.brass{color:var(--brass)}
.card .state{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--brass)}

.approve{display:flex;gap:9px;align-items:center}
.approve .btn{font-family:var(--mono);font-size:10px;letter-spacing:.1em;padding:8px 13px;border-radius:3px;border:1px solid rgba(214,211,209,.5);color:var(--brass);transition:background .3s,color .3s}
.approve .btn.hit{background:var(--brass);color:var(--slab)}
.approve .alt{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--dim)}

.live-bar{font-family:var(--mono);font-size:10px;color:var(--functional);padding:8px 13px;border-top:1px solid var(--ghost);display:flex;gap:8px;flex:none}
.live-bar .o{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.composer{margin:9px 13px 12px;height:34px;border:1px solid var(--hair);border-radius:3px;display:flex;align-items:center;gap:9px;padding:0 11px;flex:none}
.composer .p{color:var(--chrome);font-size:15px;line-height:1}
.composer .ph{font-size:12px;color:var(--functional)}
.composer i{display:inline-block;width:1px;height:13px;background:var(--brass);animation:blink 1.05s steps(2) infinite}
@keyframes blink{50%{opacity:0}}

.hero-text{text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px}
.wordmark{font-family:var(--display);font-weight:700;font-size:clamp(48px,9vw,76px);line-height:1;letter-spacing:-.03em;display:inline-flex;align-items:center}
.wordmark .mark{width:1em;height:1em;color:var(--brass);margin-right:.18em}
.wordmark .mark svg{width:100%;height:100%}
.wordmark .dot{color:var(--brass)}
.tagline{font-family:var(--display);font-weight:500;font-size:clamp(19px,2.6vw,24px);color:var(--bone)}
.sub{color:rgba(250,250,249,.6);font-size:15px;max-width:46ch}
.platform-downloads{width:min(100%,560px);margin-top:8px}
.platform-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.platform-tile{position:relative;min-width:0;min-height:82px;padding:10px 7px;border:1px solid var(--hair);border-radius:3px;background:var(--slab);color:var(--functional);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;transition:border-color .2s,background .2s,color .2s}
.platform-tile:hover{border-color:rgba(214,211,209,.55);color:var(--quiet)}
.platform-tile svg{width:22px;height:22px;fill:currentColor}
.platform-tile.is-current{border-color:var(--brass);background:rgba(214,211,209,.14);color:var(--bone);box-shadow:inset 0 0 0 1px rgba(214,211,209,.18)}
.platform-check{position:absolute;top:5px;right:6px;color:var(--brass);font:600 11px/1 var(--mono);opacity:0}
.platform-tile.is-current .platform-check{opacity:1}
.web-option{margin-top:13px;color:var(--functional);font-size:13px}
.web-option a{color:var(--brass);font-weight:600}
.web-option a:hover{color:var(--bone)}
.hero-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:8px}
.hero-action{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 16px;border:1px solid rgba(214,211,209,.55);border-radius:3px;color:var(--brass);font-size:14px;font-weight:500}
.hero-action:hover{border-color:var(--brass);color:var(--bone)}
.hero-action.video{background:rgba(214,211,209,.14);color:var(--bone)}

section.props{padding:72px 0;border-top:1px solid var(--ghost)}
.props-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:40px 48px}
.prop h2{font-family:var(--display);font-weight:600;font-size:22px;letter-spacing:-.01em;margin-bottom:8px}
.prop p{color:rgba(250,250,249,.6);font-size:15px}
section.how{padding:0 0 72px}
.how h2{font-family:var(--display);font-weight:600;font-size:22px;margin-bottom:22px}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:24px}
.step{border-top:1px solid var(--hair);padding-top:14px}
.step .n{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--brass);margin-bottom:8px}
.step p{color:rgba(250,250,249,.6);font-size:15px}
.step code{font-family:var(--mono);font-size:13px;color:var(--bone);background:var(--plate);border:1px solid var(--hair);border-radius:3px;padding:2px 7px;white-space:nowrap}
footer{padding:40px 0 56px;text-align:center;font-family:var(--mono);font-size:12px;color:var(--functional);border-top:1px solid var(--ghost)}
footer a:hover{color:var(--bone)}
footer .sep{margin:0 8px;opacity:.35}

@media (max-width:760px){
  .hero{min-height:auto;padding:26px 0 40px;gap:22px}
  .page{padding:0 16px}
  .hero-text{order:-1}
  .stage-wrap{order:3}
  .props-grid{grid-template-columns:1fr}
  .platform-row{gap:6px}
  .platform-tile{min-height:70px;padding:8px 4px;gap:6px;font-size:9px;letter-spacing:.03em}
  .platform-tile svg{width:20px;height:20px}
  footer a{display:inline-flex;align-items:center;min-height:44px;padding-inline:2px}
}
@media (prefers-reduced-motion:reduce){
  .wires path.hot,.spark.run,.composer i{animation:none}
  .turn,.track{transition:none}
}

/* Only the requested interaction additions; production hero rules stay in index.html. */
.node .tile{position:relative}.node .tile img{width:28px;height:28px;object-fit:contain}.node.live .tile::after{content:"";position:absolute;inset:-5px;border:1px solid var(--brass);border-radius:5px;animation:working-ring 1.8s ease-out infinite;pointer-events:none}.node.live .tile{animation:working-glow 1.8s ease-in-out infinite}.node.not-joined{opacity:0;pointer-events:none}.wires path[data-actor="codex"]{opacity:0;transition:opacity .8s,stroke .3s}.stage.codex-connected .wires path[data-actor="codex"]{opacity:1}.stage.codex-connected .node[data-id="codex"]{animation:arrival .7s ease-out}.node{transition:opacity .6s}
@keyframes working-ring{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(1.55)}}@keyframes working-glow{50%{box-shadow:0 0 0 1px var(--brass),0 0 32px #d7af5f66}}@keyframes arrival{from{opacity:0;transform:translate(-50%,-50%) scale(.75)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.ledger{justify-content:flex-start;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#353535 transparent;min-height:0}.message-list{display:flex;flex-direction:column;gap:15px;margin-top:auto;flex-shrink:0;min-width:0}.turn{flex-shrink:0}.turn .say{overflow-wrap:anywhere}.turn .card{margin-top:3px}.card .desc li{margin:3px 0 3px 15px}.card .desc strong{font-weight:500;color:var(--content)}.turn.visitor .say{white-space:pre-wrap}.live-bar{align-items:center;min-height:33px}.live-bar button{font:inherit;color:var(--chrome);border:0;background:transparent;padding:3px 0;cursor:pointer;flex:none}.live-bar button:hover{color:var(--bone)}.composer{height:34px}.composer input{width:100%;min-width:0;background:transparent;border:0;outline:0;color:var(--content);font:12px var(--sans);caret-color:var(--brass)}.composer input::placeholder{color:var(--functional);opacity:1}.composer:focus-within{border-color:var(--brass)}.composer button{color:var(--brass);border:0;background:none;font:17px var(--sans);width:20px;flex:none;cursor:pointer}.composer button:focus-visible,.live-bar button:focus-visible{outline:2px solid var(--bone);outline-offset:3px}
.join-terminal{position:absolute;left:110px;top:171px;width:158px;background:#171717;border:1px solid rgba(214,211,209,.38);border-radius:4px;z-index:4;box-shadow:0 7px 28px #0006;animation:terminal-arrive .35s ease-out}.join-terminal[hidden]{display:none}.terminal-title{padding:8px;border-bottom:1px solid var(--hair);font:8px var(--mono);color:var(--chrome);line-height:1.8}.terminal-title>span{font-size:6px;letter-spacing:1px;color:var(--dim);display:block}.terminal-command{padding:10px 9px 8px;min-height:77px;font:10px/1.65 var(--mono);color:var(--bone);overflow-wrap:anywhere}.terminal-command>span{color:var(--brass)}.terminal-command code{font:inherit}.terminal-command i{display:inline-block;width:1px;height:11px;background:var(--brass);animation:blink 1s steps(2) infinite;vertical-align:middle}.terminal-state{padding:0 9px 10px;font:7px/1.6 var(--mono);color:var(--brass)}@keyframes terminal-arrive{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}.stage.phone .join-terminal{left:40px;top:92px;width:300px}.stage.phone .terminal-title{padding:5px 9px;line-height:1.4;font-size:8px}.stage.phone .terminal-title>span{display:inline;margin-right:8px}.stage.phone .terminal-command{padding:6px 9px;min-height:34px;font-size:10px;line-height:1.45}.stage.phone .terminal-state{padding:0 9px 5px;font-size:7px}.stage.phone .terminal-command i{height:10px}
@media(prefers-reduced-motion:reduce){.node.live .tile,.node.live .tile::after,.stage.codex-connected .node[data-id="codex"],.join-terminal,.terminal-command i{animation:none}.node,.wires path,.turn{transition:none}.node.live .tile::after{opacity:.5}}

/* Round six keeps the marketing palette/type and gives each story one viewport. */
html{scroll-snap-type:y mandatory;scroll-padding-top:0}.page{max-width:1280px;padding:0 24px}.fullpage{height:100svh;min-height:100svh;scroll-snap-align:start;scroll-snap-stop:always;position:relative;overflow:clip;border-bottom:1px solid var(--hair)}.page-inner{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;gap:38px}.fullpage.is-landed>.page-inner{animation:page-settle .65s cubic-bezier(.2,.75,.3,1) both}@keyframes page-settle{0%{transform:translateY(13px)}60%{transform:translateY(-4px)}100%{transform:none}}
.hero{padding:24px 0;gap:0;min-height:100svh}.hero>.page-inner{gap:28px}.hero-top{width:100%;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:0 40px}.hero-heading .wordmark{font-size:56px}.hero-heading .tagline{font-size:21px;margin-top:8px}.stage-wrap{order:0;flex:none;align-items:center;margin:0}.screen{display:flex;flex-direction:row}.track{width:100%;flex:1;min-width:0}.view{width:100%}.hdr{padding:15px 18px 12px}.hdr .sub{font-size:10px}.ledger{padding:16px 20px 8px;overscroll-behavior-y:auto}.message-list{gap:18px}.turn.in{opacity:.75;transition:opacity .25s}.turn.in.latest{opacity:1}.turn .say{font-size:14px}.turn.sys .say{font-size:12px}.byline .who{font-size:13px}.byline .av{width:22px;height:22px;flex:0 0 22px;overflow:hidden}.byline .av>img,.byline .av>svg{display:block;width:16px!important;height:16px!important;max-width:16px!important;max-height:16px!important;object-fit:contain;flex:none}.byline.ag .av>svg{width:13px!important;height:13px!important}.node .tile{overflow:visible}.node .tile img,.node .tile>svg{display:block;object-fit:contain;max-width:36px;max-height:36px;flex:none}.node .tile>img{width:28px;height:28px}.app-sidebar{display:flex;flex-direction:column;width:168px;flex:0 0 168px;background:#171717;border-right:1px solid var(--hair);padding:17px 12px}.workspace-name{font:8px var(--mono);color:var(--dim);letter-spacing:3px;margin-bottom:32px}.workspace-name strong{display:block;font:500 15px var(--sans);color:var(--bone);letter-spacing:0;margin:20px 0 4px}.workspace-name small{display:block;font:9px var(--sans);letter-spacing:0;color:var(--chrome)}.sidebar-label{font:8px var(--mono);letter-spacing:1px;color:var(--dim);margin:15px 8px 10px}.room-selected{padding:8px;color:var(--bone);background:#2c2c2c;border:1px solid var(--hair);border-radius:3px;font-size:12px}.room-selected span{float:right;color:var(--brass);font:9px var(--mono);margin-top:3px}.sidebar-person{display:flex;align-items:center;gap:9px;font-size:11px;color:var(--quiet);padding:8px}.sidebar-person .agent-icon{width:18px;height:18px}.sidebar-person i{width:4px;height:4px;border-radius:50%;background:var(--brass);margin-left:auto;opacity:.5}.sidebar-person.active i{opacity:1;box-shadow:0 0 7px var(--brass)}.sidebar-bottom{margin-top:auto;font:9px/1.8 var(--mono);color:var(--dim);padding:10px 8px}.phone .app-sidebar{display:none}.demo-label{font:7px var(--mono);color:var(--dim);letter-spacing:1px}.composer{height:39px;margin:10px 18px 16px}.composer input{font-size:13px}.live-bar{padding-inline:20px;font-size:9px}.phone .ledger{padding:12px 13px 6px}.phone .turn .say{font-size:13px}.phone .message-list{gap:14px}.phone .composer{margin:8px 13px 12px;height:36px}.phone .live-bar{padding-inline:13px;font-size:8px}.phone .hdr{padding:12px 13px 10px}.phone .hdr .sub{font-size:9px}.phone .join-terminal{top:91px;left:40px;width:300px}.join-terminal{left:12px;top:170px;width:172px}.node.not-joined{opacity:0}.stage.inviting-codex .node[data-id="codex"]{opacity:0}
.agent-icon{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;overflow:hidden;background:var(--slab);border:1px solid var(--hair);border-radius:3px;color:var(--bone)}.agent-icon>svg,.agent-icon>img{display:block;width:76%;height:76%;max-width:100%;max-height:100%;object-fit:contain;flex:none}
.smart-download{position:relative;display:flex;flex-direction:column;align-items:center;flex:none}.primary-download{background:var(--brass);color:#171717;border:1px solid var(--brass);min-height:48px;padding:11px 26px;border-radius:3px;font-size:15px;font-weight:600;display:flex;align-items:center;justify-content:center;cursor:pointer;min-width:230px}.primary-download:hover{background:#c39b59}.download-meta{display:flex;justify-content:center;gap:17px;margin-top:10px;font-size:11px;color:var(--chrome)}.other-platforms{font:inherit;color:var(--chrome);border:0;background:none;cursor:pointer;text-decoration:underline;text-underline-offset:4px;padding:3px 0}.download-meta>a{padding:3px 0}.other-platform-list{position:absolute;top:100%;left:50%;transform:translateX(-50%);z-index:20;min-width:230px;margin-top:8px;padding:8px;background:var(--slab);border:1px solid #b08a4a80;border-radius:3px;box-shadow:0 12px 40px #0007;max-height:245px;overflow:auto}.other-platform-list[hidden]{display:none}.other-platform-list a{display:flex;align-items:center;gap:12px;min-height:44px;font-size:13px;padding:8px 12px;color:var(--quiet)}.other-platform-list a[hidden]{display:none}.other-platform-list svg{width:19px;height:19px;fill:currentColor}.other-platform-list a:hover{color:var(--bone);background:var(--plate)}
/* Small, legible representations of the actual kind of work being performed. */
.work-card{border:1px solid #b08a4a55;border-radius:4px;background:#171717;padding:11px 12px;margin-top:5px;min-width:0}.work-head{display:flex;justify-content:space-between;align-items:center;gap:10px;font:9px var(--mono);color:var(--brass);margin-bottom:10px}.work-head b{font-size:12px;color:var(--bone)}.work-head .work-logo{font:600 18px var(--sans);color:var(--bone)}.scan-feed{position:relative;overflow:hidden}.feed-row{display:flex;gap:8px;align-items:start;padding:8px 0;border-top:1px solid var(--hair);font-size:11px;line-height:1.4;transition:opacity .2s;opacity:.2}.feed-dot{width:17px;height:17px;border-radius:50%;background:var(--plate);flex:none}.feed-row small{display:block;color:var(--dim);font:8px var(--mono);margin-top:3px}.work-progress{height:3px;background:#2c2c2c;overflow:hidden;margin-top:9px}.work-progress>i{display:block;width:var(--progress,0%);height:100%;background:var(--brass);transition:width .15s linear}.scan-line{position:absolute;left:0;right:0;top:var(--progress,0%);height:1px;background:#b08a4a77;box-shadow:0 0 10px #b08a4a55}.work-files{font:9px/1.7 var(--mono);color:var(--quiet)}.file-row{display:flex;justify-content:space-between;gap:8px}.file-row b,.diff-plus{color:#6fb681}.file-row b{font-weight:400}.code-diff{font:9px/1.7 var(--mono);border-top:1px solid var(--hair);padding-top:8px;margin-top:7px;overflow:hidden;white-space:pre-wrap}.diff-minus{color:#d88282}.test-row{display:flex;align-items:center;gap:8px;font:10px/1.8 var(--mono);color:var(--quiet)}.test-row i{font-style:normal;color:var(--dim);width:12px}.test-row.passed i{color:#6fb681}.test-summary{font:9px var(--mono);color:#6fb681;margin-top:8px}.video-thumb{aspect-ratio:2.9;background:linear-gradient(125deg,#2c2c2c,#222222);border:1px solid #b08a4a44;display:flex;align-items:center;justify-content:center;gap:15px;position:relative;overflow:hidden}.video-thumb>span{font-size:24px;color:var(--brass)}.video-thumb strong{font:500 17px/1.2 var(--display);max-width:140px}.video-thumb small{position:absolute;bottom:5px;right:7px;font:7px var(--mono);color:var(--chrome)}.service-connection{display:flex;align-items:center;justify-content:center;gap:18px;padding:12px 0}.service-box{width:49px;height:49px;border:1px solid #b08a4a66;border-radius:8px;display:flex;align-items:center;justify-content:center;font:600 22px var(--display);color:var(--bone)}.service-box.youtube{color:#e39a9a;font-size:18px}.service-link{height:1px;width:40px;background:var(--brass);box-shadow:0 0 9px #b08a4a88}.connect-status{font:9px/1.5 var(--mono);text-align:center;color:var(--quiet)}.post-cards{display:grid;grid-template-columns:1fr 1fr;gap:8px}.post-card{border:1px solid var(--hair);padding:9px;font-size:10px;min-width:0}.post-card b{display:block;font-size:12px;margin-bottom:7px}.post-card small{display:block;color:#6fb681;font:8px var(--mono);margin-top:7px}.work-sample{font:7px var(--mono);color:var(--dim);margin-top:9px}.phone .work-card{padding:9px 10px}.phone .work-head{font-size:8px}.phone .feed-row{font-size:10px;padding:6px 0}.phone .code-diff,.phone .work-files,.phone .test-row{font-size:8px}.phone .video-thumb strong{font-size:15px}
/* Each value proposition is carried by one animated graphic. */
.benefit .page-inner{padding:50px 40px;gap:60px}.benefit-heading{text-align:center;max-width:950px}.benefit-heading h2,.closing-page h2{font:600 clamp(36px,4.5vw,62px)/1.04 var(--display);letter-spacing:-1.8px}.benefit-heading>p,.closing-page .page-inner>p{font-size:18px;color:var(--quiet);margin-top:18px}.bring-graphic{width:min(100%,960px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:190px;position:relative;align-items:center;min-height:330px}.existing-session,.destination-room{border:1px solid #b08a4a66;border-radius:6px;min-width:0;background:var(--slab);box-shadow:0 12px 70px #0003;position:relative;z-index:2}.mini-chrome{min-height:43px;border-bottom:1px solid var(--hair);padding:12px 16px;display:flex;align-items:center;justify-content:space-between;gap:10px;font:9px var(--mono);color:var(--chrome)}.mini-chrome>span{font-size:8px;letter-spacing:1px}.mini-chrome b{font:500 13px var(--sans);color:var(--brass)}.session-identity{display:flex;align-items:center;gap:12px;padding:22px 20px 15px}.session-identity>.agent-icon{width:44px;height:44px}.session-identity strong{font-size:16px;font-weight:500}.session-identity small{display:block;font:10px var(--mono);color:var(--dim);margin-top:4px}.subscription-pills{display:flex;gap:7px;padding:0 20px;flex-wrap:wrap}.subscription-pills>span{border:1px solid var(--hair);padding:5px 7px;font:9px var(--mono);color:var(--quiet)}.session-code{font:10px/1.8 var(--mono);padding:23px 20px;color:var(--quiet);overflow-wrap:anywhere}.cursor{display:inline-block;background:var(--brass);width:1px;height:12px;margin-left:3px;vertical-align:middle;animation:blink 1s steps(2) infinite}.session-note{display:block;font:9px var(--mono);color:var(--brass);padding:0 20px 20px}.carry-path{position:absolute;left:36%;right:36%;top:50%;height:1px;background:#b08a4a55}.carry-path span{position:absolute;right:12px;top:-14px;font-size:21px;color:var(--brass)}.carry-chips{position:absolute;left:25%;top:30%;width:50%;z-index:3;pointer-events:none}.carry-chips>span{position:absolute;top:calc(var(--i)*32px);left:0;font:10px var(--mono);padding:7px 11px;background:#242424;border:1px solid #b08a4a99;border-radius:3px;opacity:0;color:var(--bone);white-space:nowrap}.is-landed .carry-chips>span{animation:carry-chip 2.4s calc(.2s + var(--i)*.22s) ease-in-out both}@keyframes carry-chip{0%{opacity:0;transform:translate(-15px,0) scale(.85)}15%{opacity:1}70%{opacity:1}100%{opacity:0;transform:translate(380px,0) scale(.9)}}.room-people{display:flex;gap:11px;padding:25px 20px 20px}.arrival-agent{opacity:0}.is-landed .arrival-agent{animation:agent-arrive .6s 1.8s both}@keyframes agent-arrive{from{opacity:0;transform:translateX(-15px)}to{opacity:1;transform:none}}.arrival-message{padding:0 20px 22px;opacity:.25}.arrival-message strong{font-size:13px}.arrival-message small{font:7px var(--mono);color:var(--dim);margin-left:5px}.arrival-message p{font-size:14px;line-height:1.6;margin-top:7px;color:var(--quiet)}.is-landed .arrival-message{animation:agent-arrive .6s 2s both}.landed-kit{display:flex;gap:7px;flex-wrap:wrap;border-top:1px solid var(--hair);padding:14px 20px;opacity:.2}.landed-kit span{font:9px var(--mono);color:var(--brass)}.is-landed .landed-kit{animation:agent-arrive .7s 2.5s both}
.context-graphic{position:relative;width:min(100%,1050px);height:410px;display:flex;align-items:center;justify-content:center}.context-label{position:absolute;top:0;left:0;right:0;text-align:center;font:9px var(--mono);letter-spacing:1.4px;color:var(--brass)}.after-label{opacity:0}.before-chats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;width:100%;align-items:center}.private-chat{background:var(--slab);border:1px solid var(--hair);border-radius:5px;padding:23px 20px;min-height:170px}.private-byline{display:flex;align-items:center;gap:10px}.private-byline>b,.private-byline>strong{font-size:12px;font-weight:500}.private-chat p{font-size:14px;color:var(--quiet);margin:18px 0}.private-chat>small{font:9px var(--mono);color:var(--dim)}.is-landed .private-chat:nth-child(1){animation:collapse-left 1.2s 1s ease-in-out both}.is-landed .private-chat:nth-child(2){animation:collapse-center 1.2s 1s ease-in-out both}.is-landed .private-chat:nth-child(3){animation:collapse-right 1.2s 1s ease-in-out both}@keyframes collapse-left{to{opacity:0;transform:translateX(100%) scale(.8)}}@keyframes collapse-center{to{opacity:0;transform:scale(.8)}}@keyframes collapse-right{to{opacity:0;transform:translateX(-100%) scale(.8)}}.shared-context-room{position:absolute;width:520px;max-width:100%;background:var(--slab);border:1px solid #b08a4a88;border-radius:6px;box-shadow:0 0 70px #b08a4a0b;opacity:0;transform:scale(.9)}.is-landed .shared-context-room{animation:room-arrive .8s 2s both}@keyframes room-arrive{to{opacity:1;transform:none}}.is-landed .before-label{animation:label-out .4s 1.6s both}.is-landed .after-label{animation:agent-arrive .5s 2s both}@keyframes label-out{to{opacity:0}}.shared-output{padding:20px 25px}.shared-output>p{font-size:16px;margin:12px 0 20px}.shared-decision{display:flex;align-items:start;gap:10px;padding-top:13px;border-top:1px solid var(--hair);margin-top:12px}.shared-decision strong{font-size:12px;font-weight:500;color:var(--brass)}.shared-decision p{font-size:13px;margin-top:4px;color:var(--quiet)}.seen-by{display:flex;align-items:center;gap:7px;padding:14px 25px;border-top:1px solid var(--hair)}.seen-by .agent-icon{width:22px;height:22px}.seen-by>span:last-child{font:9px var(--mono);color:var(--chrome);margin-left:6px}.closing-page .page-inner{gap:22px}.closing-page h2{text-align:center}.closing-page .page-inner>p{margin-top:0;text-align:center}.closing-page .smart-download{margin-top:16px}.closing-cast{display:flex;gap:20px;margin-bottom:30px}.closing-cast .agent-icon{width:50px;height:50px}.closing-page .primary-download{min-height:54px;font-size:16px}footer{scroll-snap-align:end;scroll-snap-stop:normal;min-height:160px;display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;padding:30px 20px}footer .sep{margin:0}.other-platforms:focus-visible,button:focus-visible{outline:2px solid var(--bone);outline-offset:4px}
@media(max-width:760px){.page{padding:0 16px}.hero{padding:14px 0}.hero>.page-inner{gap:12px}.hero-top{padding:0;flex-direction:column;gap:13px;align-items:center}.hero-heading{text-align:center}.hero-heading .wordmark{font-size:39px}.hero-heading .tagline{font-size:16px;margin-top:6px}.primary-download{font-size:13px;min-height:42px;padding:9px 22px;min-width:213px}.download-meta{font-size:9px;margin-top:5px;gap:17px}.other-platform-list{max-height:210px}.benefit .page-inner{padding:28px 0;gap:33px}.benefit-heading h2,.closing-page h2{font-size:39px;letter-spacing:-1.2px}.benefit-heading>p{font-size:14px;max-width:300px;margin:14px auto 0;line-height:1.6}.bring-graphic{display:grid;grid-template-columns:1fr;gap:66px;max-width:300px;min-height:0}.existing-session{width:100%;max-width:280px;margin:auto}.mini-chrome{min-height:35px;padding:9px 13px;font-size:8px}.session-identity{padding:14px 16px 11px;gap:10px}.session-identity>.agent-icon{width:32px;height:32px}.session-identity strong{font-size:13px}.session-identity small{font-size:8px}.subscription-pills{padding:0 16px}.subscription-pills>span{font-size:8px;padding:4px 6px}.session-code{padding:13px 16px;font-size:8px;line-height:1.6}.session-note{font-size:8px;padding:0 16px 12px}.destination-room{max-width:280px;margin:auto;width:100%}.room-people{padding:15px 16px 12px;gap:10px}.room-people .agent-icon{width:28px;height:28px}.arrival-message{padding:0 16px 15px}.arrival-message strong{font-size:12px}.arrival-message p{font-size:12px;line-height:1.5}.landed-kit{padding:11px 16px;gap:8px}.landed-kit span{font-size:8px}.carry-path{width:1px;height:65px;left:50%;right:auto;top:44%}.carry-path span{transform:rotate(90deg);right:-8px;top:28px;font-size:19px}.carry-chips{top:37%;left:18%;width:64%;height:90px;display:flex;gap:5px;justify-content:center}.carry-chips>span{font-size:8px;padding:6px 8px;top:calc(var(--i)*12px);left:calc(var(--i)*20%)}@keyframes carry-chip{0%{opacity:0;transform:translateY(-20px) scale(.85)}15%{opacity:1}70%{opacity:1}100%{opacity:0;transform:translateY(160px) scale(.9)}}.context-page .page-inner{gap:28px}.context-graphic{height:450px}.context-label{font-size:8px;top:0}.before-chats{grid-template-columns:1fr;gap:12px;max-width:310px}.private-chat{padding:13px 15px;min-height:0}.private-byline .agent-icon{width:25px;height:25px}.private-byline>b{font-size:11px}.private-chat p{font-size:12px;margin:8px 0}.private-chat>small{font-size:8px}.shared-context-room{width:320px}.shared-output{padding:18px}.shared-output>p{font-size:14px;margin:13px 0 17px}.shared-decision{gap:9px;padding-top:12px;margin-top:12px}.shared-decision .agent-icon{width:27px;height:27px}.shared-decision strong{font-size:11px}.shared-decision p{font-size:12px}.seen-by{padding:13px 15px;gap:5px}.seen-by>span:last-child{font-size:7px;margin-left:2px}.seen-by .agent-icon{width:20px;height:20px}.is-landed .private-chat:nth-child(1){animation-name:collapse-up}.is-landed .private-chat:nth-child(3){animation-name:collapse-down}@keyframes collapse-up{to{opacity:0;transform:translateY(100%) scale(.8)}}@keyframes collapse-down{to{opacity:0;transform:translateY(-100%) scale(.8)}}.closing-page .page-inner{gap:20px}.closing-page h2{max-width:340px}.closing-page .page-inner>p{font-size:15px;max-width:300px}.closing-cast{gap:10px;flex-wrap:wrap;justify-content:center;max-width:260px;margin-bottom:20px}.closing-cast .agent-icon{width:54px;height:54px}.closing-page .smart-download{margin-top:17px}footer{font-size:10px;min-height:140px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.fullpage.is-landed>.page-inner{animation:none}.carry-chips{display:none}.arrival-agent,.arrival-message,.landed-kit{opacity:1!important;animation:none!important}.before-chats,.before-label{display:none}.after-label,.shared-context-room{opacity:1;transform:none;animation:none!important}.cursor{animation:none}.stage .node,.turn,.work-progress>i{transition:none}}
/* Phone layout is a strict flow stack. No transformed diagram can shrink the
   reserved scene box or pull an avatar into the download controls. */
@media(max-width:760px){
 .hero{height:auto;min-height:100svh;padding:14px 0}
 .hero>.page-inner{height:auto;min-height:calc(100svh - 28px);justify-content:flex-start;gap:20px}
 .hero-top,.hero-heading,.hero .smart-download,.hero .stage-wrap{flex-shrink:0}
 .hero-heading .wordmark{font-size:36px}.hero-heading .tagline{font-size:15px}
 .hero .stage-wrap{height:auto!important;align-items:flex-start}
 .stage.phone{--phone-transcript-height:clamp(270px,calc(100svh - 420px),420px);width:100%;max-width:380px;height:calc(var(--phone-transcript-height) + 198px);transform:none!important}
 .phone .screen{top:96px;left:50%;transform:translateX(-50%);width:min(300px,calc(100% - 24px));height:var(--phone-transcript-height)}
 .phone .node{gap:6px}.phone .node.agent{top:44px!important}.phone .node.human{top:auto!important;bottom:16px;transform:translateX(-50%)}
 .phone .node .tile{width:36px;height:36px}.phone .node .tile>svg,.phone .node .tile>img{width:24px;height:24px;max-width:28px;max-height:28px;object-fit:contain}.phone .node.human .tile>svg{width:28px;height:28px}
 .phone .node .name{font-size:9px;line-height:14px}
 .phone .node.live .tile::after{inset:-3px;animation-name:phone-working-ring}
 .stage.phone>#join-terminal{display:none!important}
 .phone-inline-invite{width:100%;min-width:0}
 .phone .phone-inline-invite>.join-terminal{display:block!important;position:static!important;left:auto!important;top:auto!important;width:100%!important;transform:none!important;animation:none!important;opacity:1;box-shadow:none;margin:0}
 .phone .phone-inline-invite .terminal-command{font-size:10px;min-height:34px;overflow-wrap:anywhere}
 .hero .other-platform-list{position:static;left:auto;transform:none;margin-top:9px;width:230px;max-width:100%}
}
@keyframes phone-working-ring{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(1.1)}}
@media(prefers-reduced-motion:reduce){.phone .node.live .tile::after{animation:none}}

/* Marketing shell only. Shared transcript components retain their source styles. */
.native-host,.native-room{height:100%;width:100%;min-height:0;min-width:0;display:flex;flex-direction:column;background:#171717;overflow:hidden;color:#f0f0f3}
.native-header{padding:12px 16px;border-bottom:1px solid #353535;flex-shrink:0}.native-ledger{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:10px 16px 0;scrollbar-width:thin;scrollbar-color:#57534e transparent}.native-ledger>div[data-entry-actor]{padding-top:16px}.native-composer-stack{position:relative;z-index:1;background:#171717;flex-shrink:0}
.wordmark{display:flex;align-items:center;justify-content:center;gap:0}.wordmark .mark{display:flex;width:.572em;height:.73em;align-items:center;justify-content:center;margin:0 .16em 0 0}.wordmark .mark svg{display:block;width:100%;height:100%}
.sync-host{width:min(1080px,100%);min-width:0}.sync-grid{display:grid;grid-template-columns:1fr 1fr;gap:36px;height:440px}.sync-grid>.native-room{border:1px solid #57534e;border-radius:6px}.codex-tui{min-width:0;min-height:0;background:#121212;color:#e5e5e5;border:1px solid #555;border-radius:6px;padding:20px;font:12px/1.6 'IBMPlexMono-Regular',monospace;display:flex;flex-direction:column;overflow:hidden}.codex-welcome{align-self:flex-start;max-width:100%;border:1px solid #666;border-radius:9px;padding:12px 15px;line-height:1.7;flex-shrink:0}.codex-welcome strong{font-weight:400}.codex-welcome p{font:inherit;color:#aaa;margin:0}.tui-output{flex:1;min-height:0;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;padding:16px 0}.tui-output>div{margin-bottom:12px}.tui-hint{color:#aaa}.tui-prompt{display:flex;align-items:start;gap:9px;border-top:1px solid #555;border-bottom:1px solid #555;padding:12px 0;flex-shrink:0}.tui-prompt input{background:transparent;border:0;color:inherit;font:inherit;min-width:0;width:100%;outline:0}.tui-prompt input::placeholder{color:#aaa}.tui-footer{color:#999;font-size:10px;padding-top:7px;flex-shrink:0}
@media(max-width:760px){.hero{padding-top:10px}.hero>.page-inner{gap:8px}.hero-top{gap:7px}.hero-heading .wordmark{font-size:30px}.hero-heading .tagline{font-size:12px;margin-top:4px;white-space:nowrap}.hero .primary-download{min-height:34px;padding:6px 17px;font-size:12px;min-width:180px}.hero .download-meta{margin-top:2px;font-size:8px}.stage.phone{--phone-transcript-height:clamp(320px,calc(100svh - 344px),500px)}.phone .screen{width:min(334px,calc(100% - 12px))}.native-header{padding:8px 12px}.native-ledger{padding:8px 12px 0}.benefit.bring-page .page-inner{gap:22px;padding:24px 0}.bring-page .benefit-heading h2{font-size:33px}.bring-page .benefit-heading>p{font-size:12px;margin-top:10px}.sync-grid{grid-template-columns:1fr;gap:18px;height:auto}.sync-grid>.native-room{height:290px}.codex-tui{height:320px;padding:12px;font-size:10px}.codex-welcome{padding:6px 10px;border-radius:6px;font-size:10px;line-height:1.5}.tui-output{padding:9px 0}.tui-output>div{margin-bottom:7px}.tui-prompt{padding:9px 0}.tui-footer{font-size:8px}.bring-page{height:auto;min-height:100svh}.bring-page .page-inner{height:auto;min-height:100svh}}

.shared-context-room{height:365px;overflow:hidden}.context-graphic .native-room{height:100%}

/* Codex uses its official local mark in the rail and transcript. */
.native-codex-mark{overflow:visible}.native-codex-mark svg{width:100%!important;height:100%!important;max-width:none!important;max-height:none!important}

/* Keep scrolled terminal output below its fixed welcome box. */
.codex-tui{gap:10px}.codex-welcome{position:relative;z-index:1}.tui-output{padding:0}.tui-prompt{margin-top:0}.tui-footer{padding-top:0}

/* The same shared graphic, scaled in its existing rail seat. */
.native-codex-mark [data-testid="codex-shared-mark"],.native-codex-mark [data-testid="identity-face-plate"]{width:100%!important;height:100%!important}
[data-message-body]>div{overflow-wrap:anywhere}.native-ledger{scroll-behavior:auto}.native-ledger [data-entry-actor]{flex-shrink:0}.native-ledger .latest{opacity:1}
.native-composer-stack textarea:focus-visible,.tui-prompt input:focus-visible{outline:1px solid var(--brass);outline-offset:2px}
.native-composer-stack [aria-label="Send message"]{cursor:pointer}.native-composer-stack textarea{resize:none}
.working-slot[hidden]{display:none!important}
.tool-output{position:fixed;inset:0;margin:auto;width:min(672px,calc(100vw - 32px));max-height:80svh;overflow:auto;color:var(--content);background:#222222;border:1px solid #57534e;border-radius:3px;padding:0 0 12px;box-shadow:0 18px 48px #0009}.tool-output::backdrop{background:#171717cc}.tool-output pre{white-space:pre-wrap;overflow-wrap:anywhere}.tool-output [role=button]{cursor:pointer}
.no-script{padding:20px;text-align:center;color:var(--quiet)}footer a{display:inline-flex;align-items:center;min-height:44px}.other-platforms{min-height:24px}
@media(max-width:760px){.stage:not(.phone){width:100%;max-width:380px;height:calc(clamp(320px,calc(100svh - 344px),500px) + 198px);transform:none}.stage:not(.phone) .screen{top:96px;left:50%;transform:translateX(-50%);width:min(334px,calc(100% - 12px));height:clamp(320px,calc(100svh - 344px),500px)}.stage:not(.phone) .app-sidebar{display:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Use the existing quiet-text token for small labels at web contrast ratios. */
.private-chat>small{color:#90909b}

/* Reserve the final graph positions before its lightweight router runs. */
.node{left:var(--node-x);top:var(--node-y)}
@media(max-width:760px){.node{left:var(--phone-x)}.stage:not(.phone) .node{gap:6px}.stage:not(.phone) .node.agent{top:44px}.stage:not(.phone) .node.human{top:auto;bottom:16px;transform:translateX(-50%)}.stage:not(.phone) .node .tile{width:36px;height:36px}.stage:not(.phone) .node .name{font-size:9px;line-height:14px}.stage:not(.phone) .node .tile>svg,.stage:not(.phone) .node .tile>img{width:24px;height:24px;max-width:28px;max-height:28px}.stage:not(.phone) .node.human .tile>svg{width:28px;height:28px}}

/* Human direction and agent output remain distinct in the existing CLI. */
.codex-tui{font-size:14px;line-height:1.6;color:#c9c9d1}
.codex-welcome strong{display:flex;align-items:center;gap:10px;color:#f0f0f3}
.codex-title-logo{display:block;width:30px;height:30px;flex-shrink:0}
.codex-welcome p,.tui-hint{color:#b8b8c2}
.tui-human,.tui-prompt{color:#e5b76e}
.tui-human{font-weight:600}
.tui-agent{color:#c9c9d1}
.tui-prompt input::placeholder{color:#c9aa7b;opacity:1}
.tui-output>div{max-width:100%;overflow-wrap:anywhere}
@media(max-width:760px){.codex-tui{font-size:13px;line-height:1.5}.codex-welcome{font-size:13px}.codex-title-logo{width:26px;height:26px}}

/* Keep each transcript entry on the same inset, including runtime prose. */
.native-ledger{padding-inline:24px}
@media(max-width:760px){.native-ledger{padding-inline:16px}}
html.composing{scroll-snap-type:none;scroll-behavior:auto}
html.composing .fullpage{scroll-snap-align:none;scroll-snap-stop:normal}
/* The rail reaches the tile while its name stays readable above the wire. */
.node .name{position:relative;background:var(--canvas);padding-inline:3px}