:root{font-family:var(--volter-font-ui);--mono:var(--volter-font-data);color:var(--volter-text-primary);background:var(--volter-surface-page);font-synthesis:none;--ink:var(--volter-text-primary);--muted:var(--volter-text-muted);--paper:var(--volter-surface-page);--serif:var(--volter-font-display)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:24px}
body{margin:0;-webkit-font-smoothing:antialiased}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;cursor:pointer}
a{color:inherit;text-decoration:none}
button{background:none;border:0}
button:focus-visible,a:focus-visible{outline:2px solid var(--volter-text-muted);outline-offset:6px}
button:disabled{cursor:default}
.opening{max-width:1440px;margin:auto}
.site-header{height:88px;padding:0 96px;display:flex;align-items:center;position:relative;gap:40px}
.wordmark{width:132px;display:block;flex-shrink:0;line-height:0}
.wordmark svg{width:100%;height:auto}
.navigation{display:flex;gap:34px;align-items:center;position:absolute;left:50%;transform:translateX(-50%)}
.navigation a,.navigation button{padding:12px 0;font-size:14px;color:var(--volter-text-muted);white-space:nowrap}
.navigation a:hover,.navigation button:hover{color:var(--ink)}
.header-actions{display:flex;align-items:center;gap:30px;margin-left:auto}
.button{display:inline-flex;align-items:center;justify-content:center;gap:25px;min-height:55px;padding:0 27px;border:1px solid var(--volter-action-default);border-radius:3px;background:linear-gradient(135deg,var(--volter-action-default),var(--volter-action-hover));box-shadow:inset 0 1px 2px color-mix(in srgb,var(--volter-text-on-strong) 8%,transparent);color:var(--volter-text-on-strong);font-size:14px;white-space:nowrap;transition:background .2s,transform .2s}
.button:hover{background:var(--volter-action-hover);transform:translateY(-1px)}
.button-small{min-height:44px;padding:0 22px;font-size:13px}
.hero{position:relative;min-height:716px;padding:48px 96px 68px;display:grid;grid-template-columns:12% 36% 44%;column-gap:4%;align-items:center}
.micro{margin:0;font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:2.4px;line-height:1.95;text-transform:uppercase;color:var(--volter-text-tertiary)}
.rule{display:block;width:33px;height:1px;background:var(--volter-text-faint);margin-bottom:18px}
.hero-note{align-self:start;margin-top:72px}
.investor-credit{width:150px}
.investor-label{margin:0 0 18px;font-size:12px;line-height:1.5;letter-spacing:1px;color:var(--muted)}
.investor-credit img{display:block;height:auto;max-width:100%}
.investor-speedrun{width:138px}
.investor-konvoy{width:80px;margin-top:18px}
.hero-art{position:relative;justify-self:center;align-self:stretch;height:auto;width:100%;max-width:340px;margin:-48px 0 -68px}
.generative-control svg,[data-art] svg{display:block;width:100%;height:100%;overflow:visible}
.generative-control{padding:0;text-align:initial}
.generative-control::after{content:attr(data-action);position:absolute;right:0;bottom:-25px;font:9px var(--mono);letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);opacity:0;transition:opacity .2s}
.generative-control:hover::after,.generative-control:focus-visible::after{opacity:1}
.generative-control:disabled::after{content:none}
.hero-copy{position:relative;max-width:450px;padding-bottom:44px}
h1,h2{font-family:var(--serif);font-weight:400;letter-spacing:-.018em;margin:0}
h1{font-size:64px;line-height:.98}
.hero-copy>p{color:var(--volter-text-muted);font-size:17px;line-height:1.65;margin:28px 0 30px;max-width:370px}
.hero-actions .button{min-height:48px;font-size:14px;padding:0 22px}
.hero-actions{display:flex;align-items:center;gap:28px}
.arrow{width:20px;height:20px;flex:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.button:hover .arrow,.text-link:hover .arrow{transform:translateX(3px)}
.quiet-link{font-size:14px;text-decoration:underline;text-underline-offset:6px;text-decoration-color:var(--volter-border-strong);padding:12px 0}
.quiet-link:hover{text-decoration-color:var(--ink)}
.hero-index{position:absolute;right:96px;bottom:52px;font-size:10px;line-height:1.85;letter-spacing:2px}
h2{font-size:60px;line-height:.98;white-space:nowrap}
.menu-toggle{display:none}
@media(max-width:1100px){
}
@media(max-width:650px){
}
.skip-link{position:fixed;left:16px;top:-100px;z-index:20;padding:12px;background:var(--ink);color:white}
.skip-link:focus{top:16px}
@media(min-width:901px) and (max-width:1439px){
.site-header{padding:0 6.667vw;gap:24px}
.wordmark{width:118px}
.navigation{gap:24px}
.header-actions{gap:24px}
.hero{min-height:660px;padding:40px 6.667vw 64px}
.hero-note{font-size:9px;letter-spacing:2px}
.hero-art{height:auto;margin:-40px 0 -64px}
h1{font-size:clamp(47px,4.44vw,64px)}
.hero-copy>p{font-size:16px}
.hero-actions{gap:24px;flex-wrap:wrap}
.hero-index{right:6.667vw;bottom:40px;font-size:9px}
h2{font-size:clamp(42px,4.17vw,60px)}
}
@media(max-width:900px){
.site-header{height:92px;padding:0 32px;gap:20px}
.wordmark{width:117px}
.navigation{gap:20px}
.navigation a,.navigation button{font-size:12px}
.header-actions{gap:18px}
.button-small{min-height:40px;font-size:12px;padding:0 18px}
.hero{height:650px;min-height:0;display:block;padding:0}
.hero-note,.hero-copy,.hero-art{position:absolute}
.hero-art{left:16%;width:30%;height:100%;top:0;margin:0}
.hero-note{left:32px;top:80px;margin:0;font-size:9px;letter-spacing:1.8px}
.investor-credit{width:110px}
.investor-label{font-size:11px;letter-spacing:.5px}
.investor-speedrun{width:104px}
.investor-konvoy{width:63px;margin-top:16px}
.hero-copy{left:52%;top:94px;right:32px;padding:0}
h1{font-size:clamp(40px,5.1vw,47px)}
.hero-copy>p{font-size:16px}
.desktop-break{display:none}
.hero-actions{gap:22px;flex-wrap:wrap}
.hero-actions .button{padding:0 19px;min-height:48px;font-size:14px;gap:18px}
.quiet-link{font-size:14px}
.hero-index{right:40px;bottom:69px;font-size:8px}
h2{font-size:clamp(36px,4.5vw,44px)}
}
@media(max-width:650px){
.site-header{height:80px;padding:0 24px}
.wordmark{width:106px}
.header-actions{margin-left:auto;margin-right:58px}
.button-small{min-height:36px;font-size:11px;padding:0 14px}
.menu-toggle{display:flex;align-items:center;gap:7px;position:absolute;right:24px;font-size:11px;padding:10px 0;color:var(--volter-text-muted)}
.menu-toggle span{font-size:18px}
.navigation{display:none;position:absolute;left:16px;right:16px;top:70px;transform:none;background:var(--paper);border:1px solid var(--volter-border-default);padding:18px 22px;box-shadow:0 15px 30px color-mix(in srgb,var(--volter-text-primary) 7%,transparent);z-index:5}
.navigation.is-open{display:flex;flex-wrap:wrap;justify-content:space-between}
.hero{height:auto;min-height:0;display:block;padding:36px 24px 56px}
.hero-note{left:26px;top:22px;font-size:8px;letter-spacing:2px}
.investor-credit{width:110px}
.hero-note .rule{width:24px;margin-bottom:10px}
.hero-art{left:auto;right:16px;top:0;width:57%;height:280px;opacity:.85}
.hero-copy{position:relative;left:auto;right:auto;top:auto;padding-top:264px;z-index:1}
h1{font-size:clamp(44px,10.8vw,58px);line-height:.98;letter-spacing:-.018em}
.hero-copy>p{font-size:16px;line-height:1.65;max-width:320px;margin:24px 0 28px}
.hero-actions{gap:28px;flex-wrap:nowrap}
.hero-actions .button{min-height:48px;font-size:14px;padding:0 20px;gap:18px}
.hero-index{display:none}
h2{font-size:clamp(40px,10vw,56px);line-height:1}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important}}
@media(max-width:1100px) and (min-width:901px){.navigation{gap:20px}.hero-index{display:none}.hero{grid-template-columns:10% 38% 44%}.hero-note{letter-spacing:1.4px}.hero-actions{gap:16px}.desktop-break{display:none}}
@media(min-width:901px) and (max-width:1100px){.investor-credit{width:120px}.investor-speedrun{width:110px}.investor-konvoy{width:70px}}
@media(max-width:370px){.header-actions .button-small{display:none}h1{font-size:44px}.hero-actions{gap:20px}}

/* Sections after the opening. One grid rhythm: 1440 max, 96px gutters. */
:root{--lime:var(--volter-accent-lime);--lilac:var(--volter-accent-lilac);--orange:var(--volter-accent-orange);--rule:var(--volter-border-default);--stone:var(--volter-surface-subtle);--gutter:96px}
.band-inner,.proof-inner,.build-section,.closing{max-width:1440px;margin:auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.section-copy{display:flex;flex-direction:column;align-items:flex-start;position:relative;z-index:1}
.section-copy>.micro{margin:0 0 32px;font-size:10px;line-height:1.85}
.micro .rule{display:inline-block;vertical-align:middle;margin:0 14px 2px 0}
h3{font-family:var(--serif);font-weight:400;letter-spacing:-.01em;margin:0}
.description{font-size:16px;line-height:1.65;color:var(--volter-text-tertiary);max-width:340px;margin:24px 0 0;letter-spacing:-.15px}
.text-link{display:flex;align-items:center;gap:22px;min-height:44px;font-size:14px;padding:0 0 5px;margin-top:28px;border-bottom:1px solid var(--volter-text-faint)}
.text-link:hover{border-color:var(--ink)}


/* Concept bands: copy, a framed plate, and a margin column of words and index */
.band{position:relative}
/* The band spans the page; its rule ends at the content edges, as the other sections' rules do. */
.band::before{content:"";position:absolute;top:0;left:max(var(--gutter),calc((100% - 1440px) / 2 + var(--gutter)));right:max(var(--gutter),calc((100% - 1440px) / 2 + var(--gutter)));border-top:1px solid var(--rule)}
.band-inner{padding-top:104px;padding-bottom:104px;display:grid;grid-template-columns:minmax(0,30%) minmax(0,1fr) 128px;grid-template-areas:"copy plate margin";column-gap:56px;align-items:center}
.band-flip .band-inner{grid-template-columns:minmax(0,1fr) minmax(0,30%) 128px;grid-template-areas:"plate copy margin"}
.band .section-copy{grid-area:copy}
.plate-frame{grid-area:plate;position:relative;padding:28px}
.plate-frame::before,.plate-frame::after{content:"";position:absolute;width:15px;height:15px;background:linear-gradient(var(--volter-text-primary),var(--volter-text-primary)) center/1px 100% no-repeat,linear-gradient(var(--volter-code-text),var(--volter-code-text)) center/100% 1px no-repeat}
.plate-frame::before{left:-7px;top:-7px}
.plate-frame::after{right:-7px;bottom:-7px}
.plate-stone{background:var(--stone)}
.plate-lilac{background:var(--lilac)}
.plate-lime{background:var(--lime)}
.plate-frame.plate-bare{padding:0}
.plate-frame>button{display:block;width:100%}
.thin-art,.doors-art{height:520px}
.people-art,.month-art{height:560px}
.margin{grid-area:margin;align-self:stretch;display:flex;flex-direction:column;justify-content:space-between;padding:8px 0}
.margin .micro{font-size:9px;letter-spacing:2.6px;line-height:2;color:var(--volter-text-muted);margin:0}
.margin-rule{flex:1;width:1px;background:var(--volter-border-strong);margin:20px 0}
.margin-index{font-size:10px}
/* A band's evidence line: the pieces that make the band's idea so */
.section-copy>.evidence{margin:32px 0 0;padding-top:16px;border-top:1px solid var(--rule);font-size:10px;line-height:1.9;max-width:360px;color:var(--volter-text-muted)}

/* Nothing gets rewritten: the same program, two commands */
.code-compare{margin:0;border:1px solid var(--volter-border-default);background:var(--volter-surface-raised)}
.code-file{display:flex;justify-content:space-between;align-items:center;padding:12px 20px;border-bottom:1px solid var(--volter-border-subtle);font:12px var(--mono);color:var(--volter-text-muted)}
.code-note{font-size:10px;letter-spacing:1.6px;text-transform:uppercase;color:var(--volter-status-live-text);background:var(--lime);padding:3px 8px}
.code{margin:0;padding:22px 20px 22px 0;font:14px/1.9 var(--mono);color:var(--volter-code-text);counter-reset:line;overflow-x:auto}
.code .item{display:block;white-space:pre;counter-increment:line}
.code .item::before{content:counter(line);display:inline-block;width:44px;padding-right:16px;text-align:right;color:var(--volter-text-faint)}
.runs{border-top:1px solid var(--volter-border-subtle);padding:18px 20px;display:grid;gap:12px}
.run{margin:0;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;font-size:13px}
.run code{font:13px var(--mono);color:var(--volter-code-text)}
.run-arrow{height:1px;background:var(--volter-text-faint);position:relative}
.run-arrow::after{content:"";position:absolute;right:0;top:-3px;border:3px solid transparent;border-left:5px solid var(--volter-text-faint);border-right:0}
.run-target{font:11px var(--mono);letter-spacing:1.4px;text-transform:uppercase;color:var(--volter-text-muted)}
.run-copy .run-target{color:var(--volter-status-live-text);background:var(--lime);padding:3px 8px}
.code-compare figcaption{padding:14px 20px;border-top:1px solid var(--volter-border-subtle);font-size:10px;line-height:1.8}

/* The games proof: three captures, each as wide as its aspect ratio asks, so they share one height */
.games-section{background:var(--stone)}
.proof-inner{padding-top:88px;padding-bottom:88px}
.proof-copy{display:grid;grid-template-columns:1fr 380px;column-gap:64px;align-items:end;margin-bottom:48px}
.proof-copy h2{white-space:normal;overflow-wrap:anywhere}
.proof-copy .micro{margin-bottom:24px}
.proof-copy .description{margin:0 0 20px}
.plates{margin:0}
.plate-row{display:flex;gap:12px;margin:0;padding:0;list-style:none}
.plate{flex-basis:0;min-width:0}
.plate-reference{flex-grow:1.777}.plate-build{flex-grow:1.836}.plate-game{flex-grow:1.777}
.plate .micro{display:block;margin-top:10px;font-size:9px;letter-spacing:1.8px;line-height:1.5;color:var(--ink)}
.plate-row img{display:block;width:100%;height:auto;background:var(--ink)}
.plates figcaption{margin-top:22px;padding-top:12px;border-top:1px solid var(--rule);font-size:9px}
/* A capture opens at full size. */
.plate-link{display:block}
.plate-link:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* What we make: one mosaic. A tile's size says what it is: the platform spans two columns and two rows, a
   product two columns, a tool one; dense flow packs the tools around the larger tiles. A tile takes its glyph's tint
   (autonomy.js), and one without a tint keeps a rule. */
.mosaic{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-auto-rows:minmax(224px,auto);grid-auto-flow:dense;gap:8px;margin:0;padding:0;list-style:none}
.mosaic li{display:flex;min-width:0}
.piece-platform{grid-column:span 2;grid-row:span 2}
.piece-product{grid-column:span 2}
.piece{flex:1;min-width:0;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto 1fr auto auto;grid-template-areas:"art kind" "art ." "name name" "role role";column-gap:16px;padding:20px;background:var(--tint,transparent);border:1px solid var(--tint,var(--rule))}
.piece-kind{grid-area:kind;justify-self:end;font:10px/1.6 var(--mono);letter-spacing:1.8px;text-transform:uppercase;color:var(--muted)}
.piece-art{grid-area:art;display:block;width:64px;height:64px}
.piece-art svg{display:block;width:100%;height:100%}
.piece-art svg *{vector-effect:non-scaling-stroke}
.piece-name{grid-area:name;margin-top:24px;font-family:var(--serif);font-size:24px;line-height:1.1}
.piece-name span{font:11px var(--mono);color:var(--muted);vertical-align:super}
.piece-role{grid-area:role;margin-top:8px;font-size:13px;line-height:1.5;color:var(--volter-text-muted)}
.piece-tool .piece-role{min-height:3em}
.piece:hover .piece-name{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.piece-product .piece-art{width:112px;height:112px}
.piece-product .piece-name{font-size:32px}
.piece-platform .piece{padding:28px}
.piece-platform .piece-art{width:240px;height:240px}
.piece-platform .piece-name{font-size:48px}
.piece-platform .piece-role{font-size:16px;max-width:320px}

/* The list sections. Like the closing, their top rule ends at the content edges. */
.build-section{position:relative;padding-top:104px;padding-bottom:104px}
.build-section::before{content:"";position:absolute;top:0;left:var(--gutter);right:var(--gutter);border-top:1px solid var(--rule)}
.build-head{display:grid;grid-template-columns:1fr 340px;column-gap:64px;align-items:end;margin-bottom:56px}
.build-head .micro{grid-column:1 / -1;margin-bottom:28px}
.build-head .description{margin:0}

/* Closing */
.closing{position:relative;padding-top:120px;padding-bottom:128px;display:grid;grid-template-columns:1fr 340px 200px;column-gap:64px;align-items:end;border-top:1px solid var(--rule)}
.closing h2{font-size:88px}
.closing-side .description{margin:0 0 28px}
.closing-art{height:200px;align-self:center}
.company-footer{max-width:1440px;margin:auto;padding:40px var(--gutter) 56px;border-top:1px solid var(--volter-border-subtle);display:flex;align-items:center;gap:40px}
.footer-mark{width:92px}
.company-footer p{font-size:13px;line-height:1.7;color:var(--muted);max-width:520px;margin:0 auto 0 0}
.company-footer a.quiet-link{font-size:12px;white-space:nowrap;margin-left:auto}

@media(min-width:901px) and (max-width:1439px){
:root{--gutter:6.667vw}
.band-inner{column-gap:40px;grid-template-columns:minmax(0,32%) minmax(0,1fr) 96px}
.band-flip .band-inner{grid-template-columns:minmax(0,1fr) minmax(0,32%) 96px}
.closing h2{font-size:clamp(62px,6.1vw,88px)}
.closing{grid-template-columns:1fr 300px 160px;column-gap:40px}
}
@media(max-width:1100px) and (min-width:901px){
.mosaic{grid-template-columns:repeat(3,minmax(0,1fr))}
.closing-art{display:none}
.closing{grid-template-columns:1fr 300px}
}
@media(max-width:900px){
:root{--gutter:32px}
h2{white-space:normal}
.band-inner,.band-flip .band-inner{grid-template-columns:minmax(0,1fr);grid-template-areas:"copy" "plate";row-gap:40px;padding-top:72px;padding-bottom:72px}
.margin{display:none}
.build-section{padding-top:88px;padding-bottom:80px}
.build-head{grid-template-columns:1fr;row-gap:24px}
.mosaic{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(200px,auto)}
.piece-platform{grid-row:auto}
.piece-platform .piece-art{width:160px;height:160px}
.piece-platform .piece-name{font-size:40px}
.piece-product .piece-art{width:88px;height:88px}
.thin-art,.people-art,.doors-art,.month-art{height:380px}
.proof-copy{grid-template-columns:1fr;row-gap:24px}
.plate-row{flex-wrap:wrap}.plate{flex-basis:40%}
.closing{grid-template-columns:1fr;row-gap:32px;padding-top:88px;padding-bottom:96px}
.closing h2{font-size:clamp(52px,11vw,76px)}
.closing-art{display:none}
.company-footer{padding:32px var(--gutter);flex-wrap:wrap;gap:20px 32px}
.company-footer p{flex-basis:100%;max-width:none;order:3}
}
@media(max-width:650px){
:root{--gutter:24px}
.mosaic{grid-auto-rows:minmax(176px,auto)}
.piece,.piece-platform .piece{padding:14px;column-gap:10px}
.piece-art{width:44px;height:44px}
.piece-product .piece-art{width:56px;height:56px}
.piece-platform .piece-art{width:112px;height:112px}
.piece-name{margin-top:16px;font-size:20px}
.piece-product .piece-name{font-size:24px}
.piece-platform .piece-name{font-size:34px}
.piece-role,.piece-platform .piece-role{font-size:12px}
.plate-frame{padding:16px}
.thin-art,.people-art,.doors-art,.month-art{height:300px}
.run{grid-template-columns:minmax(0,1fr) auto}
.code{font-size:12px}
.code .item{white-space:pre-wrap;overflow-wrap:anywhere;padding-left:60px;text-indent:-60px}
.run code{grid-column:1/-1}
}

/* Section rules end at the content edges, as every other band's do. */
.closing{border-top:0}
.closing::before{content:"";position:absolute;top:0;left:var(--gutter);right:var(--gutter);border-top:1px solid var(--rule)}
.company-footer{border-top:0;position:relative}
.company-footer::before{content:"";position:absolute;top:0;left:var(--gutter);right:var(--gutter);border-top:1px solid var(--volter-border-subtle)}

[hidden]{display:none!important}
/* The footer every page shares (partials/footer.html): the company, then its pages. */
.footer-links{display:flex;gap:28px;margin-left:auto;flex-wrap:wrap}
.company-footer .footer-links a.quiet-link{margin-left:0}
@media(max-width:650px){.footer-links{margin-left:0;gap:20px}}