@charset "UTF-8";
:root{--bg:#101315;--panel:#191e21;--soft:#22292d;--ink:#f2f2eb;--dim:#b1b8b7;--muted:#8e9998;--line:#343d41;--amber:#ffc05a;--mint:#a7dfbf;--sans:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;--mono:"Cascadia Mono",Consolas,ui-monospace,monospace;--max:1280px;color-scheme:dark;font-family:var(--sans);font-size:16px}
*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;background:var(--bg);color:var(--ink);font-size:1rem;line-height:1.65}a{color:inherit;text-underline-offset:.22em}a:hover{color:var(--amber)}button,input,select{font:inherit}button,a,input,select,summary{touch-action:manipulation}button{cursor:pointer}a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--amber);outline-offset:5px}img{display:block;max-width:100%;height:auto}h1,h2,h3,p{margin-top:0}h1,h2,h3{line-height:1.06;letter-spacing:-.055em;font-weight:650}h1{font-size:clamp(3.5rem,6.7vw,6.4rem);margin-bottom:1.6rem}h2{font-size:clamp(2.4rem,4vw,4rem)}h3{font-size:1.45rem;letter-spacing:-.035em;line-height:1.22}p{color:var(--dim)}em{font-style:normal;color:var(--amber)}.top{max-width:var(--max);margin:auto;padding:1.8rem 2rem;display:flex;justify-content:space-between;align-items:center;gap:2rem;border-bottom:1px solid var(--line)}.brand{display:inline-flex;align-items:center;gap:.2rem;text-decoration:none;font-weight:750;font-size:1.65rem;letter-spacing:-.07em;white-space:nowrap}.brand>span:not(.brand-mark){font-weight:400}.brand-mark{color:var(--amber);letter-spacing:0;font:500 2rem var(--mono);margin-right:.55rem}.brand-mark i{font-style:normal;font-weight:800;font-size:1.8rem}.brand b{font-size:.75rem;letter-spacing:.03em;font-weight:500;color:var(--muted);margin:0 0 0 1rem;max-width:4.2rem;white-space:normal;line-height:1.35}.top nav{display:flex;align-items:center;gap:1.9rem;font-size:.94rem}.top nav>a:not(.button){text-decoration:none}.button{display:inline-flex;align-items:center;justify-content:center;gap:1.5rem;border:1px solid var(--line);border-radius:5px;background:var(--panel);color:var(--ink);font-weight:650;text-decoration:none;min-height:3.25rem;padding:.85rem 1.3rem;line-height:1.4}.button:hover{border-color:var(--amber);color:var(--ink)}.button.primary{background:var(--amber);border-color:var(--amber);color:#191910}.button.primary:hover{background:#ffd180}.button.small{min-height:2.7rem;padding:.55rem 1rem;gap:1rem}.button:disabled{cursor:not-allowed;opacity:.8}.hero{max-width:var(--max);margin:auto;padding:5rem 2rem 4rem;display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}.eyebrow{font:500 .81rem/1.7 var(--mono);letter-spacing:.095em;color:var(--amber);margin-bottom:1.8rem}.status-dot{display:inline-block;width:.45rem;height:.45rem;background:var(--mint);border-radius:50%;margin-right:.7rem;vertical-align:middle}.lede{font-size:1.16rem;line-height:1.7;max-width:36rem}.actions{display:flex;gap:1.5rem;align-items:center;flex-wrap:wrap;margin:2rem 0 1rem}.text-link{font-weight:550;text-decoration:none;border-bottom:1px solid var(--line);padding:.5rem 0}.micro{font-size:.87rem;color:var(--muted)}.hero-work{position:relative;padding-bottom:4rem}.hero-art{margin:0;border:1px solid var(--line);background:#090d13;border-radius:10px;overflow:hidden;transform:rotate(2deg)}.hero-art img{width:100%;aspect-ratio:1.15;object-fit:cover;object-position:center}.hero-art figcaption{display:flex;justify-content:space-between;padding:1rem 1.25rem;gap:1rem;font-size:.8rem;background:var(--panel)}.hero-art figcaption>span{font:500 .7rem var(--mono);color:var(--muted);align-self:center}.hero-terminal{position:relative;margin:-4rem 2rem 0 -1.5rem;background:#0b0f11;border:1px solid #475151;box-shadow:0 20px 50px #0005;border-radius:8px;transform:rotate(-1deg)}.terminal-title{display:flex;justify-content:space-between;align-items:center;padding:.8rem 1.2rem;border-bottom:1px solid #2d3437;font: .73rem var(--mono);color:var(--muted)}.terminal-title i{display:inline-block;width:.45rem;height:.45rem;border-radius:50%;background:#586364;margin-right:.35rem}.hero-terminal>.codeblock{border:0;margin:0;background:transparent;padding:1.4rem 1.2rem .6rem}.hero-terminal>p{padding:0 1.2rem;margin:0 0 1rem;font: .75rem var(--mono);color:var(--muted)}.success{color:var(--mint)}.codeblock{position:relative;border:1px solid var(--line);border-radius:6px;background:#0c1012;padding:1.6rem;margin:1.2rem 0;overflow:auto}.codeblock pre{margin:0;padding-right:3rem;white-space:pre;line-height:1.85;font: .87rem/1.85 var(--mono);color:#dfe6de}.copy{position:absolute;right:.6rem;top:.6rem;font-size:.75rem;padding:.3rem .65rem;color:var(--dim);background:var(--panel);border:1px solid var(--line);border-radius:4px}.tool-strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);max-width:calc(var(--max) - 4rem);margin:0 auto;display:flex;justify-content:space-between;gap:1.4rem;flex-wrap:wrap;padding:1.3rem 0;font: .76rem var(--mono);letter-spacing:.15em;color:var(--dim)}.section{max-width:var(--max);padding:6rem 2rem;margin:auto}.section-heading{display:flex;justify-content:space-between;gap:3rem;align-items:start;margin-bottom:2.5rem}.section-heading>p{max-width:26rem;margin-top:.7rem}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2.5rem}.feature-grid article{border-top:1px solid var(--line);padding:1.5rem 0}.step{display:block;font:.75rem var(--mono);letter-spacing:.12em;color:var(--muted);margin-bottom:1.8rem}.feature-grid p{max-width:32ch}.bottom-cta{border-top:1px solid var(--line);text-align:center}.bottom-cta .button{margin:1rem 0 1.8rem}.footer{max-width:var(--max);margin:auto;padding:3rem 2rem 1.5rem;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:3rem}.footer .brand{margin-bottom:.7rem}.footer p{margin-bottom:.3rem}.footer small{color:var(--muted);font-size:.84rem}.footer nav{display:grid;grid-template-columns:1fr 1fr;gap:.6rem 1.5rem;font-size:.88rem}.footer nav a{text-decoration:none;color:var(--dim)}.footer .fine{grid-column:1/-1;border-top:1px solid var(--line);padding-top:1.5rem;font-size:.75rem;color:var(--muted)}.fine span{display:block;margin-top:.35rem}.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}.skip{position:fixed;top:-100px;left:1rem;z-index:10;background:var(--amber);color:#111;padding:.75rem}.skip:focus{top:1rem}
@media(max-width:950px){.brand b{display:none}.hero{gap:2rem;padding-top:3rem}.hero-terminal{margin-left:-.5rem;margin-right:0}.hero h1{font-size:clamp(3.4rem,7vw,5rem)}.top nav{gap:1.2rem}.hero-art figcaption>span{display:none}.feature-grid{gap:1.5rem}.section{padding:4.5rem 2rem}}
/* On a phone the hero has one column. minmax(0,1fr) lets that column shrink
   below the long command in the hero terminal, which then scrolls in its own
   box. With 1fr the command made the page 481px wide at 390px. */
@media(max-width:680px){.top{padding:1.1rem 1.2rem;gap:1rem;flex-wrap:wrap}.top nav{width:100%;justify-content:space-between;gap:.7rem;font-size:.9rem}.brand{font-size:1.5rem}.hero{grid-template-columns:minmax(0,1fr);padding:2.8rem 1.2rem 2rem;gap:2rem}.hero h1{font-size:clamp(3.7rem,12.5vw,5.4rem)}.hero .eyebrow{font-size:.71rem;margin-bottom:1.5rem}.hero-work{padding:.7rem 0 1rem}.hero-art{margin:0 .6rem}.hero-art img{aspect-ratio:1.4}.hero-terminal{margin:-2rem 1rem 0 0}.section{padding:3.5rem 1.2rem}.section-heading{display:block;margin-bottom:2rem}.section-heading h2{margin-bottom:1.2rem}.feature-grid{grid-template-columns:1fr;gap:1rem}.feature-grid p{max-width:none}.step{margin-bottom:1rem}.tool-strip{margin:0 1.2rem;justify-content:start;gap:1.1rem 1.6rem;font-size:.72rem}.footer{padding:2rem 1.2rem;grid-template-columns:1fr;gap:1.7rem}.actions{gap:1.2rem}.footer .fine{grid-column:1}.codeblock{padding:1rem}.codeblock pre{font-size:.81rem}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
.page-hero{max-width:var(--max);margin:auto;padding:4.5rem 2rem 2.5rem}.page-hero h1{font-size:clamp(3.3rem,6vw,5.6rem)}.page-hero .lede{max-width:46rem}.prose{max-width:900px;padding:1rem 2rem 5rem;margin:auto}.prose h2{font-size:2rem;margin:2.8rem 0 1.2rem;line-height:1.2}.prose h3{margin-top:2rem}.prose section{scroll-margin-top:2rem}.prose li{color:var(--dim);margin:.7rem 0}.prose code{font-family:var(--mono);color:#e4dac2;font-size:.9em;overflow-wrap:anywhere}.notice{padding:1.4rem 1.7rem;background:var(--panel);border-left:3px solid var(--amber);border-radius:0 6px 6px 0;margin:1.5rem 0}.notice strong{display:block;margin-bottom:.7rem}.notice p:last-child{margin-bottom:0}.doc-index{display:flex;gap:.7rem 1.4rem;flex-wrap:wrap;border-bottom:1px solid var(--line);padding:0 0 1.6rem}.table-scroll{overflow:auto}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:1rem .8rem;border-bottom:1px solid var(--line);vertical-align:top}th{color:var(--ink);font-size:.85rem}td{color:var(--dim);font-size:.9rem}.price-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem;max-width:var(--max);padding:0 2rem 3rem;margin:auto}.price-card{padding:2rem;border:1px solid var(--line);border-radius:8px;background:var(--panel)}.price-card.featured{border-color:var(--amber)}.price-card h2{font-size:3.4rem;letter-spacing:-.04em}.price-card h2 small{display:block;font-size:.8rem;letter-spacing:0;color:var(--dim);margin-top:.7rem}.price-card ul{list-style:none;margin:1.5rem 0;padding:0;min-height:15rem}.price-card li{padding:.55rem 0;border-bottom:1px solid var(--line);font-size:.9rem;color:var(--dim)}.price-card .micro{margin:.7rem 0 0}.sample-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));max-width:var(--max);padding:0 2rem 2rem;gap:1.5rem;margin:auto}.sample-card{padding:1.6rem;border:1px solid var(--line);border-radius:8px;background:var(--panel)}.sample-card:first-child{grid-column:1/-1}.sample-card h2{font-size:2rem}.sample-card audio{width:100%;margin:1.2rem 0}.sample-card img{width:100%;max-height:24rem;object-fit:contain;border-radius:4px}.sample-footer{display:flex;justify-content:space-between;align-items:center;gap:1rem;font-size:.85rem}.sample-footer span{color:var(--muted)}.sample-card details{font-size:.8rem;margin-top:1rem;color:var(--muted)}.sample-card summary{cursor:pointer}.hash{overflow-wrap:anywhere;font-family:var(--mono);margin-top:.8rem}.model-stage{width:100%;min-width:0;height:420px;max-height:65vh;background:radial-gradient(ellipse at center,#35464f,#11171d 75%);border:1px solid var(--line);border-radius:6px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;contain:layout size}.model-stage canvas{position:absolute;inset:0;width:100%!important;height:100%!important;display:block;touch-action:none}.model-stage p{padding:2rem}.sample-card .actions{margin:1rem 0}.sample-card .eyebrow{margin-bottom:.7rem}
@media(max-width:850px){.price-grid{grid-template-columns:1fr}.price-card ul{min-height:0}.price-card h2 small{display:inline;font-size:1rem;margin-left:.8rem}.sample-grid{grid-template-columns:1fr}.sample-card:first-child{grid-column:1}.page-hero{padding-top:3rem}.model-stage{height:340px}}
@media(max-width:680px){.page-hero{padding:2.5rem 1.2rem 1.5rem}.prose{padding:1rem 1.2rem 3rem}.price-grid,.sample-grid{padding-left:1.2rem;padding-right:1.2rem}.price-card,.sample-card{padding:1.3rem}.notice{padding:1.2rem}.top nav{flex-wrap:wrap;justify-content:start;gap:1rem}.top nav .button{margin-left:auto}.page-hero h1{font-size:3.2rem}.model-stage{height:300px}}
.pipeline-section{border-bottom:1px solid var(--line)}.pipeline{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin:2.5rem 0 1.5rem}.pipeline article{background:var(--panel);padding:1.5rem;min-height:12rem}.pipeline article>span{display:block;font:500 .74rem var(--mono);color:var(--amber);margin-bottom:2.4rem}.pipeline h3{margin-bottom:.7rem}.pipeline p{font-size:.92rem}.pipeline-note{max-width:54rem}
@media(max-width:850px){.pipeline{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.pipeline{grid-template-columns:1fr}.pipeline article{min-height:0}.pipeline article>span{margin-bottom:1rem}}

/* ---- showcase gallery ---- */
.showcase-hero{padding-bottom:1rem}
.counters{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin:2.5rem 0 0}
.counters>div{background:var(--panel);padding:1.3rem 1.4rem}
.counters dt{font-size:2.5rem;font-weight:650;letter-spacing:-.05em;line-height:1;color:var(--ink)}
.counters dd{margin:.6rem 0 0;font:500 .76rem/1.4 var(--mono);letter-spacing:.06em;color:var(--muted);text-transform:uppercase}
.filter{max-width:var(--max);margin:2.5rem auto 0;padding:0 2rem;display:flex;gap:.6rem;flex-wrap:wrap;position:sticky;top:0;z-index:5;background:var(--bg);padding-top:1rem;padding-bottom:1rem;border-bottom:1px solid var(--line)}
.chip{border:1px solid var(--line);background:var(--panel);color:var(--dim);border-radius:100px;padding:.5rem 1.05rem;font-size:.86rem;font-weight:550;line-height:1.4;min-height:2.4rem}
.chip:hover{border-color:var(--amber);color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--amber);border-color:var(--amber);color:#191910}
.chip.select{appearance:none;padding-right:1.8rem;background-image:linear-gradient(45deg,transparent 50%,var(--dim) 50%),linear-gradient(135deg,var(--dim) 50%,transparent 50%);background-position:calc(100% - 15px) 50%,calc(100% - 10px) 50%;background-size:5px 5px;background-repeat:no-repeat;max-width:16rem}
.asset-section{max-width:var(--max);margin:auto;padding:3.5rem 2rem 1rem}
.section-rule{border-top:1px solid var(--line);padding-top:1.5rem;margin-bottom:2rem;display:flex;justify-content:space-between;align-items:baseline;gap:2rem;flex-wrap:wrap}
.section-rule h2{font-size:2.2rem;margin:0}
.section-rule p{margin:0;font-size:.92rem;max-width:34rem}
.asset-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem}
.asset-grid.wide{grid-template-columns:repeat(2,minmax(0,1fr))}
.asset{border:1px solid var(--line);border-radius:8px;background:var(--panel);padding:1.3rem;display:flex;flex-direction:column;gap:.9rem}
.asset-head{display:flex;justify-content:space-between;align-items:start;gap:1rem}
.asset-head .eyebrow{margin:0 0 .35rem;font-size:.7rem}
.asset-head h3{margin:0;font-size:1.18rem;letter-spacing:-.03em}
.asset-head .button{flex:none}
.asset-media{margin:0}
.asset-note{margin:0;font-size:.93rem}
.asset .meta{margin:0}
.asset .stats{margin:.7rem 0 0;font:500 .78rem/1.5 var(--mono);color:var(--mint);min-height:1.2rem}
.asset .model-stage{height:300px}
.asset-grid.wide .model-stage{height:440px}
.model-status{font-size:.9rem;text-align:center}
.viewer-bar{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.8rem}
.viewer-bar .chip{font-size:.8rem;padding:.4rem .85rem;min-height:2.1rem}
.shot{display:block;border-radius:6px;overflow:hidden;border:1px solid var(--line)}
.shot img{width:100%;aspect-ratio:1;object-fit:cover}
.shot.whole img{object-fit:contain;background:#05070a}
.recipe{border-top:1px solid var(--line);padding-top:.9rem;margin-top:auto;font-size:.85rem}
.recipe summary{cursor:pointer;color:var(--dim);font-weight:550}
.recipe summary:hover{color:var(--amber)}
.recipe .codeblock{margin:.9rem 0 .5rem;padding:1.1rem}
.recipe .codeblock pre{font-size:.76rem;line-height:1.7;white-space:pre-wrap;overflow-wrap:anywhere}
.recipe .hash{font-size:.72rem;color:var(--muted);margin:0}
.stack-section{border-top:1px solid var(--line)}
.stack-section td code{color:var(--amber);font-family:var(--mono);font-size:.85em}

/* ---- waveform audio ---- */
.waveform{display:flex;align-items:center;gap:.7rem;background:#0c1012;border:1px solid var(--line);border-radius:6px;padding:.8rem .9rem}
.waveform audio{width:100%;display:none}
.waveform[data-ready="failed"] audio{display:block}
.waveform .play{flex:none;width:2.3rem;height:2.3rem;border-radius:50%;border:1px solid var(--line);background:var(--soft);position:relative}
.waveform .play:hover{border-color:var(--amber)}
.waveform .play::before{content:"";position:absolute;inset:0;margin:auto;width:0;height:0;border-left:.65rem solid var(--amber);border-top:.42rem solid transparent;border-bottom:.42rem solid transparent;transform:translateX(.12rem)}
.waveform .play[data-state="playing"]::before{border:0;width:.55rem;height:.7rem;border-left:.19rem solid var(--amber);border-right:.19rem solid var(--amber);transform:none}
.waveform canvas{flex:1 1 auto;height:2.9rem;min-width:40px;cursor:pointer}
.waveform .clock{flex:none;font:500 .72rem var(--mono);color:var(--muted);white-space:nowrap;text-align:right}
@media(max-width:1000px){.asset-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.counters{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:780px){.asset-grid,.asset-grid.wide{grid-template-columns:1fr}}
@media(max-width:680px){.asset-section{padding:2.5rem 1.2rem 1rem}.filter{padding-left:1.2rem;padding-right:1.2rem}.counters dt{font-size:2rem}.asset .model-stage,.asset-grid.wide .model-stage{height:280px}.section-rule h2{font-size:1.8rem}.waveform .clock{min-width:0;font-size:.7rem}}

/* ---- home page proof ---- */
.proof-section{border-top:1px solid var(--line)}
.proof{display:grid;grid-template-columns:1.15fr 1fr;gap:1.2rem;margin:2.5rem 0 2rem;align-items:start}
.proof figure{margin:0}
.proof figcaption{margin-top:.7rem;font:500 .78rem/1.5 var(--mono);color:var(--muted)}
.proof figcaption code{color:var(--amber)}
.proof-hero .model-stage{height:560px}
.proof-side{display:grid;gap:1.2rem;align-content:start}
.proof-tile .shot img{aspect-ratio:16/9}
.proof-prop .model-stage{height:220px}
.proof .stats{margin:.7rem 0 0;font:500 .78rem/1.5 var(--mono);color:var(--mint);min-height:1.2rem}
@media(max-width:950px){.proof{grid-template-columns:1fr}.proof-hero .model-stage{height:380px}}
@media(max-width:680px){.proof-hero .model-stage{height:320px}}

/* ---- layout containment ---- */
.proof,.proof-side,.asset-grid,.asset,.asset-media,.feature-grid,.counters{min-width:0}
.proof>*,.proof-side>*,.asset-grid>*{min-width:0;max-width:100%}
.asset,.asset-media,.waveform{overflow:hidden}
.waveform canvas{max-width:100%}

/* ---- playable demos ---- */
.demo-hero{padding-bottom:1.6rem}
.demo-switch{display:inline-flex;margin-top:1.6rem;border:1px solid var(--line);border-radius:999px;overflow:hidden;background:var(--soft)}
.demo-switch a{padding:.5rem 1.15rem;font:600 .8rem/1 var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--muted);text-decoration:none}
.demo-switch a:hover{color:var(--ink)}
.demo-switch a.on{background:var(--amber);color:#191910}
.demo-stage{position:relative;max-width:1000px;margin:0 auto 3rem;padding:0 1.2rem}
.demo-stage #game,.demo-stage #world{position:relative;width:100%;aspect-ratio:16/10;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#05070a}
.demo-stage #game canvas,.demo-stage #world canvas{display:block;width:100%;height:100%}
.demo-stage .micro{margin:.8rem 0 0;font:500 .78rem/1.5 var(--mono);color:var(--muted);text-align:center}
.world-hud{position:absolute;left:2rem;right:2rem;top:1.1rem;display:flex;justify-content:space-between;gap:1rem;pointer-events:none;flex-wrap:wrap}
.hud-status,.hud-hint{margin:0;padding:.42rem .8rem;border-radius:6px;background:rgba(5,7,10,.72);font:500 .82rem/1.4 var(--mono)}
.hud-status{color:var(--amber)}
.hud-hint{color:var(--muted)}
.world-caption{position:absolute;left:50%;bottom:1rem;transform:translateX(-50%);width:min(78%,640px);padding:.85rem 1.1rem;border:1px solid var(--line);border-radius:8px;background:rgba(11,15,17,.92);text-align:center;pointer-events:none}
.world-caption .caption-line{margin:0;font:400 1rem/1.5 var(--sans);color:var(--ink)}
.world-caption .caption-tag{margin:.4rem 0 0;font:500 .74rem/1.4 var(--mono);color:var(--amber)}
.clip-readout{white-space:pre-wrap;word-break:break-word;padding:.9rem 1.1rem;border:1px solid var(--line);border-radius:8px;background:var(--soft);font:500 .78rem/1.7 var(--mono);color:var(--mint)}
@media(max-width:680px){.demo-stage{padding:0 .6rem}.world-hud{left:.7rem;right:.7rem;top:.6rem}.hud-status,.hud-hint{font-size:.72rem}}
.performance-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem;margin:0 0 1.5rem}
.performance{padding:1.6rem;border:1px solid var(--line);border-radius:8px;background:var(--panel);min-width:0}
.performance h3{margin:.2rem 0 1rem}
.performance .asset-note{margin:1rem 0 0;font-size:.9rem;color:var(--dim)}
@media(max-width:780px){.performance-grid{grid-template-columns:1fr}}

/* ---- scenes from one picture ---- */
.scene-rooms{display:grid;gap:1.2rem;min-width:0}
.scene-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;min-width:0}
.scene-pair figure{margin:0;min-width:0}
.scene-pair figcaption{margin:0 0 .5rem;font:500 .74rem/1.5 var(--mono);color:var(--muted)}
.scene-room .scene-pair .shot img{aspect-ratio:var(--scene-ratio);object-fit:cover}
.scene-room .scene-pair .model-stage{height:auto;aspect-ratio:var(--scene-ratio)}
.scene-capture{display:block;width:100%;height:auto;aspect-ratio:var(--scene-ratio);object-fit:cover;border-radius:6px;border:1px solid var(--line)}
.scene-prompt{margin:1rem 0;padding:.2rem 0 .2rem 1.2rem;border-left:3px solid var(--amber);color:var(--ink)}
@media(max-width:780px){.scene-pair{grid-template-columns:1fr}}

/* ---- navigation between the phone and wide layouts ---- */
/* The Play menu, eight links and the button do not fit beside the brand at
   every width, because the page never grows past --max. The nav takes its own
   row and wraps, so the page never scrolls sideways and no link breaks across
   two lines. */
@media(min-width:680.02px){.top{flex-wrap:wrap;row-gap:1rem}.top nav{width:100%;flex-wrap:wrap;justify-content:space-between;gap:.7rem 1.2rem}.top nav>a:not(.button){white-space:nowrap}}

.game-cards{margin-bottom:3rem}.game-cards article{min-width:0;border-top:1px solid var(--line);padding-top:1.5rem}.game-cards img,.sample-games img{width:100%;border:1px solid var(--line);border-radius:8px;margin-bottom:1.2rem}.game-cards .step{margin-bottom:.8rem}@media(max-width:680px){.game-cards{grid-template-columns:1fr}}
/* The sample cards use the same column gap as the game cards above them, so
   their pictures line up with the game pictures. */
.feature-grid.sample-games{column-gap:1rem}

/* ---- three game cards on the home page, and the Knelldeep section ---- */
/* Two cards share the .scene-pair grid. Three need their own track count, and
   the class wins over .scene-pair inside every media query below. */
.game-cards.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.section>.notice{max-width:54rem}
.section-sub{margin:3rem 0 0}
.first-minute{max-width:54rem;margin:1.2rem 0 0;padding-left:1.3rem}
.first-minute li{color:var(--dim);margin:.8rem 0}
.first-minute strong{color:var(--ink)}
@media(max-width:980px){.game-cards.three{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:680px){.game-cards.three{grid-template-columns:1fr}}

/* ---- pictures inside a prose article ---- */
.shot-figure{margin:2rem 0}
.shot-figure figcaption{margin:.75rem 0 0;font:500 .78rem/1.6 var(--mono);color:var(--muted)}
.shot-figure figcaption code{color:var(--amber)}
.shot-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2rem;margin:2rem 0}
.shot-pair .shot-figure{margin:0;min-width:0}
@media(max-width:780px){.shot-pair{grid-template-columns:1fr}}

/* ---- the making-of article ---- */
/* A generated picture prompt is one long line. Every other page writes its
   commands with backslash continuations, so only this article wraps: the
   reader sees the whole prompt instead of scrolling a box sideways. */
.making-of .codeblock pre{white-space:pre-wrap;overflow-wrap:anywhere;font-size:.82rem}
.making-of .doc-index{margin-bottom:1.5rem}
.making-of h2{scroll-margin-top:1.5rem}

/* ---- the Play menu in the navigation ---- */
/* A <details> disclosure, so it opens by click, touch and keyboard with no
   script. The panel floats over the page. Its z-index is above the Knelldeep
   stage layers, which go up to 80. At 680px and less the panel keeps the page
   gutter on both sides. */
.play-menu{position:relative}
.play-menu>summary{display:inline-flex;align-items:center;gap:.55rem;list-style:none;cursor:pointer;white-space:nowrap;color:var(--amber);font-weight:650}
.play-menu>summary::-webkit-details-marker{display:none}
.play-menu>summary::after{content:"";width:.42rem;height:.42rem;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-.15rem) rotate(45deg)}
.play-menu[open]>summary::after{transform:translateY(.1rem) rotate(-135deg)}
.play-menu>summary:hover{color:#ffd180}
.play-panel{position:absolute;top:calc(100% + .75rem);left:-.75rem;z-index:100;width:min(23rem,calc(100vw - 2.4rem));padding:.5rem;background:var(--panel);border:1px solid var(--line);border-radius:8px;box-shadow:0 20px 50px #0008;font-size:.94rem}
.play-list{list-style:none;margin:0;padding:0;display:grid;gap:.15rem}
.play-item{display:flex;align-items:center;gap:.9rem;padding:.5rem;border-radius:6px;color:var(--ink);text-decoration:none}
.play-item:hover{background:var(--soft);color:var(--ink)}
.play-item img{flex:none;width:5.6rem;height:auto;aspect-ratio:920 / 430;object-fit:cover;border:1px solid var(--line);border-radius:4px;background:#05070a}
.play-item>span{display:grid;gap:.1rem;min-width:0;line-height:1.35}
.play-item b{font-weight:650}
.play-item:hover b{color:var(--amber)}
.play-item small{font-size:.8rem;color:var(--muted)}
.play-label{margin:.45rem 0 .2rem;padding:.75rem .5rem 0;border-top:1px solid var(--line);font:500 .72rem/1.4 var(--mono);letter-spacing:.095em;color:var(--amber)}
.play-all{display:flex;justify-content:space-between;align-items:center;margin-top:.45rem;padding:.8rem .5rem .4rem;border-top:1px solid var(--line);font-weight:600;text-decoration:none}
.play-panel a:focus-visible{outline-offset:-3px}
@media(max-width:680px){.play-panel{left:0}}
/* The summary is the only way to the games on a phone, so a finger gets a
   44px target there. The other links in its row stay centred on it. */
@media(max-width:680px),(pointer:coarse){.play-menu>summary{min-height:2.75rem;min-width:2.75rem;vertical-align:middle}}