body>.site-header{position:sticky;top:0;background:var(--at-surface);z-index:5}

/* Home (Owner, 1 November 2026): a proper hero, then the circuit board inside the factory, then the Agent Development
   Environment tools, then the footer. The window, the board and the tools have their own stylesheets. */
.home-story{position:relative}
.scene{position:relative;width:min(1180px,calc(100% - 96px));margin:0 auto}
.scene h2{font:500 clamp(34px,4vw,52px)/1.08 var(--at-font-editorial);letter-spacing:var(--at-track-tight);text-wrap:balance;margin:0}
.scene-lead{margin:18px 0 0;max-width:62ch;font-size:20px;line-height:1.5;color:var(--at-text-muted)}

/* The hero: the two lines, left; the Osynk window under them, the width of the page. */
.scene-hero{padding:56px 0 0}
.hero-head{max-width:820px}
.hero-head h1{font:500 clamp(44px,5.4vw,72px)/1.02 var(--at-font-editorial);letter-spacing:var(--at-track-tight);text-wrap:balance;margin:0}
.hero-lead{margin:18px 0 0;font:400 clamp(21px,2.3vw,28px)/1.35 var(--at-font-editorial);text-wrap:balance;color:var(--at-text)}
/* Beside them, on the right: three short claims and the goal, in the lead's voice, set flush with the window's right
   edge. The goal stands on the lead's line, the same size, so the two read together; the headline stays the one bold moment. */
.hero-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,372px);column-gap:48px;align-items:end}
.hero-side{text-align:right;font:400 clamp(19px,1.8vw,22px)/1.4 var(--at-font-editorial);color:var(--at-text-muted)}
.hero-side p{margin:0}
.hero-side p+p{margin-top:2px}
.hero-side .hero-goal{margin-top:14px;font-size:clamp(21px,2.3vw,28px);line-height:1.35;color:var(--at-text)}
@media(max-width:1100px){.hero-top{grid-template-columns:minmax(0,1fr) minmax(0,320px);column-gap:40px}}
/* Narrower than that, the claims move under the lead and line up on its left edge. */
@media(max-width:900px){.hero-top{display:block}.hero-side{margin-top:28px;text-align:left}}
.hero-app{margin-top:44px}
/* Until the window's script runs, its place keeps the window's size, so nothing below jumps when it arrives. */
.hero-app:empty{aspect-ratio:1180/738;margin-top:84px;border:1px solid var(--at-line);border-radius:12px;background:var(--at-surface)}

/* Why a factory: three steps between the window and the board, each with its drawing, the words beside it and a line
   that runs from step to step as the page scrolls (Owner, 2 November 2026: "bring back the line that follows from one
   item to another"). A step lights up when the line reaches it. */
.scene-why{margin-top:120px}
.why-thread{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.why-thread path{fill:none;stroke-linecap:round}
.why-thread-base{stroke:var(--at-line);stroke-width:1px}
.why-thread-drawn{stroke:var(--at-accent);stroke-width:1.5px}
.why-thread-origin{fill:var(--at-surface);stroke:var(--at-accent);stroke-width:1.5px}
.why-thread-tip{fill:var(--at-accent)}
.why-step{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:64px;align-items:center;padding:56px 0 56px 40px}
.why-flip{grid-template-columns:minmax(0,420px) minmax(0,1fr)}
.why-flip .why-art{order:-1}
.why-copy p{margin:0;max-width:560px;font:400 clamp(22px,2.1vw,30px)/1.4 var(--at-font-editorial);letter-spacing:var(--at-track-tight);text-wrap:pretty;color:var(--at-text);opacity:.3;transition:opacity .6s var(--at-ease)}
.why-copy p+p{margin-top:18px}
.why-step.is-on .why-copy p{opacity:1}
.why-art{opacity:.35;transform:translateY(12px);transition:opacity .6s var(--at-ease),transform .6s var(--at-ease)}
.why-step.is-on .why-art{opacity:1;transform:none}
.why-svg{display:block;width:100%;height:auto;overflow:visible}
.why-svg *{fill:none;stroke-linecap:round;stroke-linejoin:round}
.why-svg .why-head{fill:var(--at-line-strong)}
.why-svg .why-card{fill:var(--at-surface);stroke:var(--at-line-strong);stroke-width:1}
.why-svg .why-box{fill:var(--at-surface);stroke:var(--at-text);stroke-width:1.2}
.why-svg .why-code{stroke:var(--at-text-muted);stroke-width:3}
.why-svg .why-feed,.why-svg .why-axis{stroke:var(--at-line-strong);stroke-width:1.2}
.why-svg .why-track{stroke:var(--at-line-strong);stroke-width:1.2;stroke-dasharray:3 4}
.why-svg .why-flow{stroke:var(--at-accent);stroke-width:2.6;stroke-dasharray:6 94;opacity:0}
.why-svg .why-station{fill:var(--at-surface);stroke:var(--at-text);stroke-width:1.2}
.why-svg .why-check{stroke:var(--at-accent);stroke-width:2.4;opacity:0}
.why-svg .why-ring{stroke:var(--at-line-strong);stroke-width:1.2}
.why-svg .why-sat{fill:var(--at-accent)}
.why-svg .why-orbit{transform-box:view-box;transform-origin:66px 66px}
.why-svg .why-rise{stroke:var(--at-accent);stroke-width:2;stroke-dasharray:1 1;stroke-dashoffset:1;transition:stroke-dashoffset 2.4s var(--at-ease) .2s}
.why-svg .why-job{fill:var(--at-surface);stroke:var(--at-text);stroke-width:1.2}
.why-svg .why-arc{stroke:var(--at-text);stroke-width:1.2}
.why-svg .why-beat{fill:var(--at-accent);transform-box:fill-box;transform-origin:center}
/* The first drawing: the boards fill up card by card and the work under them shrinks. */
.why-svg .why-card:not(.why-in){opacity:0;transform:translateY(-8px);transition:opacity .35s var(--at-ease),transform .35s var(--at-ease)}
.why-step.is-on .why-card{opacity:1;transform:none}
.why-svg .why-work{transform-box:fill-box;transform-origin:0 50%;transition:transform 1.6s var(--at-ease) 1.2s}
.why-step.is-on .why-work{transform:scaleX(.3)}
.why-step.is-on .why-card.why-d0{transition-delay:0.00s}.why-step.is-on .why-card.why-d1{transition-delay:0.08s}.why-step.is-on .why-card.why-d2{transition-delay:0.16s}.why-step.is-on .why-card.why-d3{transition-delay:0.24s}.why-step.is-on .why-card.why-d4{transition-delay:0.32s}.why-step.is-on .why-card.why-d5{transition-delay:0.40s}.why-step.is-on .why-card.why-d6{transition-delay:0.48s}.why-step.is-on .why-card.why-d7{transition-delay:0.56s}.why-step.is-on .why-card.why-d8{transition-delay:0.64s}.why-step.is-on .why-card.why-d9{transition-delay:0.72s}.why-step.is-on .why-card.why-d10{transition-delay:0.80s}.why-step.is-on .why-card.why-d11{transition-delay:0.88s}.why-step.is-on .why-card.why-d12{transition-delay:0.96s}.why-step.is-on .why-card.why-d13{transition-delay:1.04s}.why-step.is-on .why-card.why-d14{transition-delay:1.12s}.why-step.is-on .why-card.why-d15{transition-delay:1.20s}.why-step.is-on .why-card.why-d16{transition-delay:1.28s}.why-step.is-on .why-card.why-d17{transition-delay:1.36s}
/* The second: current runs round the loop, the stations take their turn, the software comes out checked. */
.why-step.is-on .why-flow{opacity:1;animation:why-flow 2.4s linear infinite}
.why-step.is-on .why-station{animation:why-station 2.4s linear infinite}
.why-step.is-on .why-station.why-d1{animation-delay:.3s}.why-step.is-on .why-station.why-d2{animation-delay:.6s}.why-step.is-on .why-station.why-d3{animation-delay:.9s}
.why-step.is-on .why-check{opacity:1;transition:opacity .4s var(--at-ease) .9s}
/* The third: around the clock, and a step up with every job. */
.why-svg .why-job{opacity:0;transition:opacity .3s var(--at-ease)}.why-step.is-on .why-job{opacity:1}
.why-step.is-on .why-job.why-d0{transition-delay:0.35s}.why-step.is-on .why-job.why-d1{transition-delay:0.59s}.why-step.is-on .why-job.why-d2{transition-delay:0.83s}.why-step.is-on .why-job.why-d3{transition-delay:1.07s}.why-step.is-on .why-job.why-d4{transition-delay:1.31s}.why-step.is-on .why-job.why-d5{transition-delay:1.55s}.why-step.is-on .why-job.why-d6{transition-delay:1.79s}.why-step.is-on .why-job.why-d7{transition-delay:2.03s}.why-step.is-on .why-job.why-d8{transition-delay:2.27s}
.why-step.is-on .why-orbit{animation:why-orbit 6s linear infinite}
.why-step.is-on .why-rise{stroke-dashoffset:0}
.why-step.is-on .why-beat{animation:why-beat 1.2s var(--at-ease) infinite}
@keyframes why-flow{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@keyframes why-station{0%,100%{fill:var(--at-surface)}8%,22%{fill:var(--at-accent-soft);stroke:var(--at-accent)}34%{fill:var(--at-surface)}}
@keyframes why-orbit{to{transform:rotate(360deg)}}
@keyframes why-beat{0%,100%{transform:scale(1)}50%{transform:scale(1.45)}}
@media(prefers-reduced-motion:reduce){.why-copy p,.why-art,.why-svg *{transition:none!important;animation:none!important}.why-copy p,.why-art{opacity:1;transform:none}.why-svg .why-card,.why-svg .why-job{opacity:1;transform:none}.why-svg .why-rise{stroke-dashoffset:0}.why-svg .why-check{opacity:1}}
@media(max-width:900px){.why-step,.why-flip{grid-template-columns:minmax(0,1fr);gap:28px}.why-flip .why-art{order:0}.why-art{max-width:420px}}

.page-ending{position:relative;z-index:1}.page-ending .site-footer{padding-top:16px;padding-bottom:24px}
.home-story .site-footer{background:var(--at-surface)}

@media(prefers-reduced-motion:reduce){
 .scroll-cue::before,.scroll-cue::after{animation:none}
}