@import url('/brand.css?v=20261015');
html{scroll-padding-top:100px}
body{background:var(--paper);color:var(--ink-soft);font-family:var(--font-sans);font-synthesis:none;line-height:1.65}
.wrap{max-width:1376px;padding-inline:48px}
header.top{margin:0;padding:26px 0;gap:28px;border:0;background:var(--paper);align-items:center}
.logo{display:flex;flex:none;align-items:center}
.logo img{display:block;width:168px;height:auto}
html[data-lm=false] .logo img{content:url("/extella-logo-on-dark.svg");filter:none}
header nav{font-family:var(--font-sans);font-size:12px;gap:18px;margin-left:auto}
header nav a{color:var(--nav-link);text-underline-offset:5px}
header nav a:hover{color:var(--ink);text-decoration:underline}
.seg{border:0;border-bottom:1px solid var(--border);border-radius:0;background:transparent;gap:2px;padding:0}
.seg button{font:400 12px/1.3 var(--font-sans);min-height:36px;padding:8px 10px;border-radius:0;color:var(--silver)}
.seg button.on{background:var(--ink);color:var(--paper)}
.theme-toggle{font:400 12px/1.3 var(--font-sans);min-height:40px;min-width:82px;padding:10px 14px;border:1px solid var(--border);border-radius:0;background:transparent;color:var(--ink);cursor:pointer}
.theme-toggle:hover{background:var(--cream-dark);border-color:var(--gold)}
.menuBtn,header #th{border-radius:0;padding:10px 14px;min-height:42px}
section{padding-block:60px}
section:first-of-type{padding-top:38px!important}
h1{font-family:var(--font-sans);font-size:clamp(34px,4.5vw,64px);line-height:1.08;letter-spacing:-.04em;max-width:1100px;margin:22px 0 24px;text-wrap:balance}
h2{font-family:var(--font-sans);font-size:clamp(28px,3vw,42px);line-height:1.16;letter-spacing:-.025em}
h3{font-family:var(--font-sans);font-size:20px;line-height:1.3;letter-spacing:-.015em}
.lead{font-size:17px;line-height:1.7;color:var(--silver);max-width:940px;margin-bottom:30px}
.label,.k,.src .t{font:400 11px/1.5 var(--font-sans);letter-spacing:.015em;text-transform:none;color:var(--silver)}
.label:before{width:8px;height:8px;background:var(--copper);opacity:1;flex:none}
.card,.frame,.scenewrap,.scheme,.map,.cab{border-radius:0;box-shadow:none;background:var(--cream);border:1px solid var(--border)}
.card{padding:26px}
.card.hov:hover{transform:none;box-shadow:none}
.btn{border-radius:0;font:600 14px/1.4 var(--font-sans);min-height:44px;padding:13px 20px;text-align:left;justify-content:center;box-shadow:none}
.btn.p,.btn.s{background:var(--ex-primary);border-color:var(--ex-primary-border);color:var(--ex-on-primary)}
.btn.p:hover,.btn.s:hover{background:var(--ex-primary-hover);border-color:var(--ex-primary-border);color:var(--ex-on-primary);transform:none}
.btn.sm{min-height:40px;padding:9px 14px;font-size:13px}
.btn[disabled]{opacity:.5}
a:focus-visible,button:focus-visible,textarea:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
textarea,input.txt,select,.chip,.devbtn,.src,.deal,.rule,.hc,.status,.stat,.now,.mini{border-radius:0}
textarea,input.txt{font-size:16px;line-height:1.6}
.status{background:var(--cream-dark);font-size:13px}
.chip{padding:10px 12px}
pre{border-radius:0;font-size:13px;line-height:1.6;tab-size:2}
code{border-radius:0}
.tabs button{font-family:var(--font-sans);min-height:44px}
.fine{font-size:14px;line-height:1.65;color:var(--silver)}
.game{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:22px;margin-top:28px}
.scenewrap{padding:14px;background:var(--cream)}
canvas{border-radius:0}
#mission{border-top:3px solid var(--patina);background:var(--cream)}
#action{border-top:3px solid var(--copper);background:var(--paper)}
.mission{display:block}.mission h3{font-size:21px;margin-bottom:14px}
.mission .nums{font:400 13px/1.5 var(--font-sans);color:var(--silver)}
.hc{padding:18px 14px;border-color:var(--border);background:var(--paper)}
.hc b{font-size:28px}.hc .st{font-family:var(--font-sans);font-size:12px}
.hc.next{border-color:var(--gold);background:var(--cream-dark)}
.hc.done{border-color:var(--ok)}
#action .btn.p{width:100%}
#action .fine{margin-top:14px}
.legend{font:400 11px/1.5 var(--font-sans);gap:10px}
.cab .hd{border-bottom:1px solid var(--border);padding-bottom:14px;flex-wrap:wrap}
.cab:nth-child(1){border-top:3px solid var(--patina)}
.cab:nth-child(2){border-top:3px solid var(--copper)}
.cab:nth-child(3){border-top:3px solid var(--gold)}
.v{border-radius:0;letter-spacing:0;text-transform:none}
.trace li.policy:before{background:var(--copper)}
table th,table.deals th{font-family:var(--font-sans);letter-spacing:0;text-transform:none}
.frame .bar i{border-radius:0;background:var(--copper)}
iframe#site,.pair iframe{border-radius:0}
.src .t{color:var(--gold);font-weight:600}
.src.on,.devbtn.on{box-shadow:inset 0 2px var(--gold)}
footer{margin-top:32px;padding-block:32px 48px;font-size:13px}
.demo-article .wrap{max-width:1000px}
.demo-article header{padding-block:26px;border:0;flex-wrap:wrap}
.demo-article h1{font-size:clamp(34px,4vw,52px);max-width:900px}
.demo-article main{max-width:860px;margin:auto}
.demo-article main>p:first-of-type{font-size:14px;color:var(--silver)}
.demo-article blockquote{border-radius:0;background:var(--cream);border-color:var(--copper)}
.demo-article header nav{flex-wrap:wrap}
@media(max-width:1100px){
 header.top{gap:14px;flex-wrap:wrap}header nav{gap:12px}.logo img{width:150px}
}
@media(max-width:860px){
 .wrap{padding-inline:22px}header.top{padding-block:20px}
 .game{grid-template-columns:1fr;grid-template-areas:"action" "scene" "mission";gap:14px}
 h1{font-size:clamp(32px,6vw,46px)}.lead{font-size:16px;line-height:1.65}
 .scenewrap{padding:8px}.card{padding:22px}
 .mission h3{font-size:19px}.hc{padding:14px}
}
@media(max-width:820px){
 header.top .menuBtn{display:inline-flex;margin-left:auto}
 header.top nav{margin:0;padding:16px 22px;background:var(--paper)}
 header.top nav.open{display:flex}
 section{padding-block:40px}h1{letter-spacing:-.03em;margin-block:18px 22px}
 .label{font-size:11px}.demo-article header nav{margin-left:0}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.rv{opacity:1;transform:none;transition:none}}

/* Catalogue and article shells use the same typography, not their embedded apps. */
.extella-page header:not(.top):not(.hd){padding:26px 0;border:0;gap:24px;flex-wrap:wrap}
.extella-page header>div{flex-wrap:wrap}
.extella-page img,.extella-page video{max-width:100%}
.extella-page button,.extella-page input,.extella-page select{font-family:var(--font-sans)}
.extella-page .shot img,.extella-page .film video,.extella-page .cta,.extella-page .why .c,.extella-page .chrome{border-radius:0;box-shadow:none}
.extella-page .shot img,.extella-page .film video{border-color:var(--border)}
.extella-catalogue .wrap{max-width:1376px}
.extella-app .wrap{max-width:1120px}
.extella-catalogue .grid{gap:22px}
.extella-catalogue .grid>.card{padding:24px;border-top:3px solid var(--patina)}
.extella-catalogue .grid>.card:nth-child(3n+2){border-top-color:var(--copper)}
.extella-catalogue .grid>.card:nth-child(3n){border-top-color:var(--ink)}
.extella-catalogue .card p{line-height:1.6}
.extella-catalogue .stat{gap:32px;margin-block:32px}
.extella-catalogue .stat>div{flex:1;min-width:180px;max-width:420px}
.extella-app .label{margin-top:48px}
.extella-app .lead{max-width:760px}
.extella-app h2{font-size:28px;line-height:1.25;margin-top:48px}
.extella-app .shot{margin-block:40px}
.extella-page .why .c{border:1px solid var(--border);padding:20px}
.extella-page .why .c b{font-size:16px}
.extella-page .why .c span{line-height:1.65}
.extella-page .btn.p:hover{color:var(--ex-on-primary)}
.extella-page .seg>button{min-height:40px;min-width:40px}
.extella-source .wrap,.extella-source .w{max-width:960px;margin:auto;padding:0 32px 64px}
.extella-source h1{font-size:42px;margin-top:48px}
.extella-source header{display:flex;align-items:center;justify-content:space-between}
.extella-embed .bar{padding:22px 32px;border:0;gap:18px}
.extella-embed .bar>.l{flex-wrap:wrap}
.extella-embed .bar .logo img{width:152px;height:auto;border-radius:0}
.extella-embed .win,.extella-embed .note,.extella-embed .why{padding-inline:32px;max-width:1376px}
.extella-embed .chrome .tb i{border-radius:0;background:var(--copper)}
.extella-page .demo-article .tw{max-width:100%}
@media(max-width:700px){
 .extella-page header:not(.top):not(.hd){gap:18px;padding-block:22px}
 .extella-page header>div{gap:8px!important}
 .extella-catalogue .grid{gap:16px}
 .extella-page .logo img{width:152px}
 .extella-source .wrap,.extella-source .w{padding-inline:22px}
 .extella-source h1{font-size:32px}
 .extella-embed .bar{padding:18px 22px}
 .extella-embed .win,.extella-embed .note,.extella-embed .why{padding-inline:22px}
 .extella-page .btn{padding:12px 16px}
}