:root{
  --paper:#E6EAED; --surface:#FBFCFC; --surface-2:#EDF0F2; --sunk:#DFE5EA;
  --ink:#111A21; --ink-2:#37464F; --ink-3:#55666F;
  --line:#C9D3DA; --line-2:#D8E0E5;
  --brand:#FFA409; --on-brand:#111827; --brand-deep:#8A5600; --brand-soft:rgba(255,164,9,.14);
  --ok:#1C6E4A; --warn:#8A5600; --bad:#A3271A;
  --check:rgba(17,26,33,.07);
  --r:4px;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  color-scheme:light dark;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#0F151A; --surface:#18212A; --surface-2:#141D25; --sunk:#111921;
    --ink:#E7EEF3; --ink-2:#B6C4CE; --ink-3:#8EA0AC;
    --line:#2B3843; --line-2:#222E38;
    --brand:#FFA409; --on-brand:#111827; --brand-deep:#FFC45C; --brand-soft:rgba(255,164,9,.16);
    --ok:#5FC28E; --warn:#E0A64A; --bad:#F07A63;
    --check:rgba(231,238,243,.08);
  }
}
:root[data-theme="dark"]{
  --paper:#0F151A; --surface:#18212A; --surface-2:#141D25; --sunk:#111921;
  --ink:#E7EEF3; --ink-2:#B6C4CE; --ink-3:#8EA0AC;
  --line:#2B3843; --line-2:#222E38;
  --brand:#FFA409; --on-brand:#111827; --brand-deep:#FFC45C; --brand-soft:rgba(255,164,9,.16);
  --ok:#5FC28E; --warn:#E0A64A; --bad:#F07A63;
  --check:rgba(231,238,243,.08);
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%}
[hidden]{display:none!important}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--brand); outline-offset:2px; border-radius:2px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
html{scroll-behavior:smooth}
/* !important because the generic input width:100% rule below outranks this class and
   was stretching the hidden file inputs to full width, giving the whole page a
   horizontal scrollbar. */
.sr{
  position:absolute!important;width:1px!important;height:1px!important;
  min-height:0!important;padding:0!important;border:0!important;margin:0!important;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;
}
.skip{
  position:absolute;left:-9999px;top:0;z-index:100;background:var(--brand);color:var(--on-brand);
  padding:12px 18px;font-weight:600;border-radius:0 0 var(--r) 0;
}
.skip:focus{left:0}

/* ---------- type ---------- */
h1,h2,h3{margin:0;letter-spacing:-.022em;text-wrap:balance;font-weight:700}
h1{font-size:clamp(38px,6.4vw,74px); line-height:.98; font-stretch:112%; letter-spacing:-.03em}
h2{font-size:clamp(26px,3.4vw,34px); font-stretch:108%}
h3{font-size:clamp(18px,2vw,21px); letter-spacing:-.014em; font-weight:600}
p{margin:0}
.lede{font-size:clamp(17px,1.6vw,19px); color:var(--ink-2); max-width:34em}
.sub{font-size:15.5px; color:var(--ink-3); max-width:36em}
.eyebrow{
  font-family:var(--mono); font-size:11px; letter-spacing:.15em; text-transform:uppercase;
  color:var(--ink-3); font-weight:500;
}
.label{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3);
}
.mono{font-family:var(--mono); font-variant-numeric:tabular-nums}

/* ---------- layout ---------- */
.wrap{max-width:1320px; margin:0 auto; padding-inline:clamp(16px,5vw,120px)}
section{border-top:1px solid var(--line)}
section:first-of-type{border-top:none}
.pad{padding-block:clamp(44px,6vw,84px)}
.stack{display:flex;flex-direction:column;gap:14px}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:clamp(24px,3vw,52px)}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(20px,3vw,56px)}

/* ---------- site chrome ---------- */
.topbar{
  position:sticky; top:env(safe-area-inset-top,0px); z-index:40;
  background:var(--surface); border-bottom:1px solid var(--line);
}
.topbar .wrap{display:flex;align-items:center;gap:20px;min-height:66px;flex-wrap:wrap;padding-block:10px}
.wordmark{font-family:var(--mono);font-size:13px;font-weight:500;letter-spacing:.14em;color:var(--ink);text-decoration:none}
.wordmark b{color:var(--ink-3);font-weight:500}
.topnav{display:flex;gap:18px;align-items:center;margin-left:auto;flex-wrap:wrap}
.topnav a{
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);text-decoration:none;padding:4px 0;
}
.topnav a:hover{color:var(--ink)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;padding:0 24px;border-radius:var(--r);cursor:pointer;
  font-size:16px;font-weight:600;text-decoration:none;border:1px solid transparent;
  background:var(--brand);color:var(--on-brand);transition:filter .12s;
}
.btn:hover{filter:brightness(1.07)}
.btn:disabled{opacity:.45;cursor:not-allowed;filter:none}
.btn.ghost{background:transparent;border-color:var(--ink-3);color:var(--ink);font-weight:500}
.btn.ghost:hover{background:var(--surface-2);filter:none}
.btn.dark{background:var(--ink);color:var(--paper)}
.btn.sm{min-height:36px;padding:0 14px;font-size:13.5px}
.btn.xs{
  min-height:30px;padding:0 9px;font-family:var(--mono);font-size:11px;letter-spacing:.05em;
  background:var(--surface-2);border-color:var(--line);color:var(--ink-2);font-weight:500;
}
.btn.xs:hover{background:var(--sunk);filter:none}
.btn.icon{min-height:32px;width:32px;padding:0;background:transparent;border-color:transparent;color:var(--ink-3);font-size:14px}
.btn.icon:hover{background:var(--surface-2);color:var(--ink);filter:none}

/* ---------- panels ---------- */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
.panel>h3,.panel>.ph{
  display:flex;align-items:center;gap:10px;margin:0;padding:10px 14px;
  border-bottom:1px solid var(--line-2);font-family:var(--mono);font-size:10.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);font-weight:500;
}
.panel>h3 .sp,.panel>.ph .sp{margin-left:auto}
.pb{padding:14px}
.hint{font-size:13px;color:var(--ink-3);line-height:1.5}
.hint code,code.t{font-family:var(--mono);font-size:12.5px;background:var(--surface-2);padding:1px 5px;border-radius:3px;color:var(--ink-2)}

/* ---------- hero: the layer stack, exploded ---------- */
.herogrid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(26px,3vw,48px);align-items:center}
@media (min-width:720px){.herogrid{grid-template-columns:minmax(0,1.05fr) minmax(300px,.95fr)}}
.stagewrap{
  position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-items:center;gap:clamp(10px,2vw,22px);min-width:0;
}
.stack3d{
  width:100%;max-width:400px;aspect-ratio:1/1;perspective:1400px;
  position:relative;justify-self:center;container-type:inline-size;
}
/* Each sheet rises on Z, which reads as UP on screen once the group is tilted.
   Without the translateY the top sheet lifts clean out of its own box and gets
   clipped — which is exactly what it was doing. This re-centres the whole stack. */
.stack3d .inner{
  /* --z is a share of the stack's own width, so the rise scales with the box and the
     top sheet can never lift out of frame the way a fixed pixel value did. */
  --z:13cqw; --drop:1.65;
  position:absolute;inset:0;transform-style:preserve-3d;
  transform:translateY(calc(var(--z) * var(--drop))) rotateX(56deg) rotateZ(-42deg);
}
.stack3d .sh{
  position:absolute;left:27%;top:27%;width:46%;height:46%;box-sizing:border-box;
  border:1px solid var(--line);background:rgba(255,255,255,.18);
}
.stack3d .sh img{width:100%;height:100%;display:block;object-fit:cover}
.stack3d .sh:nth-child(1){transform:translateZ(0);background:var(--surface)}
.stack3d .sh:nth-child(2){transform:translateZ(var(--z))}
.stack3d .sh:nth-child(3){transform:translateZ(calc(var(--z) * 2))}
.stack3d .sh:nth-child(4){transform:translateZ(calc(var(--z) * 3))}
.stack3d .sh:nth-child(5){transform:translateZ(calc(var(--z) * 4))}
/* callouts are a real grid column, so they can never land on the buttons */
.callouts{display:flex;flex-direction:column;gap:clamp(16px,3.4vw,40px);min-width:0}
.callouts div{display:flex;align-items:center;gap:8px}
.callouts i{display:block;width:20px;height:1px;background:var(--line);flex:none}
.callouts span{font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
.callouts b{color:var(--ink);font-weight:500}
.statline{
  grid-column:1/-1;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);text-align:center;
}
.statline b{color:var(--ink);font-weight:500}
@media (max-width:470px){
  /* the 3D transform pushes the top sheet outside its box, so clip it here
     rather than letting it create a horizontal scrollbar on a phone */
  .stagewrap{grid-template-columns:minmax(0,1fr);overflow:hidden;padding-block:12px}
  .stack3d{max-width:270px}
  .callouts{flex-flow:row wrap;justify-content:center;gap:10px 16px}
  .callouts i{display:none}
}
.tilewall{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.tilewall img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:3px;display:block}

/* ---------- steps + spec ---------- */
.stepnum{display:flex;align-items:center;gap:12px}
.stepnum span{font-family:var(--mono);font-size:12px;color:var(--ink);font-weight:500}
.stepnum i{flex:1;height:1px;background:var(--line)}
.filetree{
  padding:14px 16px;background:var(--surface);border:1px solid var(--line);border-radius:3px;
  font-family:var(--mono);font-size:12px;line-height:1.85;color:var(--ink-3);
}
.filetree b{color:var(--ink);font-weight:500}
.spec{display:flex;gap:18px;padding-block:20px;border-top:1px solid var(--line)}
.spec .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);width:98px;flex:none;padding-top:4px}
.spec p{font-size:15px;color:var(--ink-2);margin-top:4px}

/* ---------- the studio ---------- */
#studio{background:var(--surface-2)}
.studio{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;margin-top:22px}
@media (min-width:980px){.studio{grid-template-columns:310px minmax(0,1fr) 300px}}
.railstack{display:flex;flex-direction:column;gap:14px;min-width:0}

.drop{
  border:2px dashed var(--line);border-radius:var(--r);background:var(--surface);
  padding:clamp(26px,4vw,48px) 20px;text-align:center;display:flex;flex-direction:column;
  align-items:center;gap:16px;cursor:pointer;width:100%;
}
.drop:hover,.drop.over{border-color:var(--brand);background:var(--brand-soft)}
.drop h3{font-size:clamp(20px,2.4vw,27px)}
/* once there is art loaded the drop zone steps out of the way */
.drop.compact{flex-direction:row;flex-wrap:wrap;justify-content:space-between;text-align:left;padding:14px 16px;gap:12px}
.drop.compact svg,.drop.compact .hint,.drop.compact .label{display:none}
.drop.compact h3{font-size:16px}
.drop.compact .btn{min-height:40px;font-size:14px}

.layer{border:1px solid var(--line-2);border-radius:3px;background:var(--surface);margin-bottom:8px;overflow:hidden}
.layer>.lh{display:flex;align-items:center;gap:6px;padding:7px 8px;background:var(--surface-2)}
.layer .idx{font-family:var(--mono);font-size:10px;color:var(--ink-3);width:16px;text-align:right;flex:none}
.layer .nm{flex:1;min-width:0;background:transparent;border:1px solid transparent;padding:3px 5px;font-weight:600;font-size:13.5px;border-radius:3px}
.layer .nm:hover{border-color:var(--line)}
.traits{padding:4px 8px 8px;display:flex;flex-direction:column;gap:3px}
.trait{display:grid;grid-template-columns:24px minmax(0,1fr) 44px 52px 26px;align-items:center;gap:5px}
.trait .sw{
  width:26px;height:26px;border-radius:3px;border:1px solid var(--line);flex:none;
  background-size:cover;background-position:center;background-color:var(--surface-2);
}
.trait .tn{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
input.tn{
  width:100%;min-height:30px;padding:4px 5px;font-size:12.5px;
  background:transparent;border:1px solid transparent;border-radius:3px;
  text-overflow:ellipsis;
}
input.tn:focus{text-overflow:clip}
input.tn:hover{background:var(--sunk);border-color:var(--line)}
input.tn:focus{background:var(--sunk);border-color:var(--line-2)}
.trait input[type=number]{padding:3px 5px;font-size:12px;text-align:right}
.trait .pct{
  display:flex;flex-direction:column;align-items:flex-end;line-height:1.25;
  font-family:var(--mono);font-variant-numeric:tabular-nums;
}
.trait .pct b{font-size:11.5px;font-weight:500;color:var(--ink-2)}
.trait .pct i{font-size:9px;font-style:normal;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.trait.none .tn{color:var(--ink-3);font-style:italic}

input[type=text],input[type=number],select,textarea{
  width:100%;padding:9px 10px;background:var(--sunk);border:1px solid var(--line-2);
  border-radius:3px;font-size:14px;min-height:40px;
}
input[type=number],.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
textarea{resize:vertical;min-height:70px;line-height:1.5}
.field{display:flex;flex-direction:column;gap:6px}
.field>span{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.unit{font-family:var(--mono);font-size:12px;color:var(--ink-3);flex:none;align-self:center}
input[type=file]{width:100%;padding:8px 10px;background:var(--sunk);border:1px solid var(--line-2);border-radius:3px;font-size:12.5px;min-height:40px}
input[type=file]::file-selector-button{
  font:inherit;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  margin-right:10px;padding:5px 9px;border:1px solid var(--line-2);border-radius:3px;
  background:var(--surface);color:var(--ink-2);cursor:pointer;
}
input[type=file]::file-selector-button:hover{background:var(--surface-2);color:var(--ink)}
input[aria-invalid="true"]{border-color:var(--bad);background:var(--surface)}
.note.ok{border-left:4px solid var(--ok)}
.note:empty{display:none}
code.addr{
  display:block;margin-top:8px;padding:7px 8px;border-radius:3px;
  font-family:var(--mono);font-size:12px;line-height:1.5;letter-spacing:.02em;
  word-break:break-all;background:var(--sunk);border:1px solid var(--line);color:var(--ink);
}
#cPayout{font-family:var(--mono);font-size:12.5px}
.check{display:flex;align-items:flex-start;gap:9px;font-size:14px;color:var(--ink-2);cursor:pointer;min-height:32px}
.check input{accent-color:var(--brand);width:18px;height:18px;margin:3px 0 0;flex:none}

.stagebox{
  position:relative;aspect-ratio:1/1;border:1px solid var(--line);border-radius:3px;overflow:hidden;
  background-color:var(--surface);
  background-image:
    linear-gradient(45deg,var(--check) 25%,transparent 25%),linear-gradient(-45deg,var(--check) 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,var(--check) 75%),linear-gradient(-45deg,transparent 75%,var(--check) 75%);
  background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0;
}
.stagebox canvas{width:100%;height:100%;display:block}
.attrs{border:1px solid var(--line-2);border-radius:3px;overflow:hidden}
.attrs .ar{display:flex;gap:10px;padding:8px 11px;border-bottom:1px solid var(--line-2);font-size:13.5px}
.attrs .ar:last-child{border-bottom:none}
.attrs .ar:nth-child(odd){background:var(--surface-2)}
.attrs .k{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);width:40%;flex:none;padding-top:2px}
.attrs .v{font-weight:500;flex:1;min-width:0;word-break:break-word}
.attrs .v .rr{font-family:var(--mono);font-size:11px;color:var(--ink-3);margin-left:7px}

.outgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px}
.tile{position:relative;padding:0;border:1px solid var(--line-2);border-radius:3px;overflow:hidden;background:var(--sunk);cursor:pointer;aspect-ratio:1/1}
.tile canvas{width:100%;height:100%;display:block}
.tile .no{position:absolute;left:0;bottom:0;padding:1px 6px;font-family:var(--mono);font-size:10px;background:rgba(17,26,33,.78);color:#fff;border-top-right-radius:3px}
.tile[aria-pressed="true"]{border-color:var(--brand);box-shadow:0 0 0 2px var(--brand-soft)}

table.rep{width:100%;border-collapse:collapse;font-size:13px}
table.rep th{text-align:left;font-family:var(--mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);font-weight:500;padding:5px 6px;border-bottom:1px solid var(--line-2)}
table.rep td{padding:4px 6px;border-bottom:1px solid var(--line-2)}
table.rep td.n{font-family:var(--mono);text-align:right;font-variant-numeric:tabular-nums}
table.rep tr.sec td{font-family:var(--mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-2);background:var(--surface-2);padding-block:7px}
.delta{font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.delta.off{color:var(--warn);font-weight:500}

.bar{height:8px;background:var(--sunk);border-radius:4px;overflow:hidden;border:1px solid var(--line-2)}
.bar i{display:block;height:100%;background:var(--brand);width:0%;transition:width .15s linear}
.note{display:flex;gap:10px;padding:11px 13px;border-radius:3px;font-size:14px;line-height:1.5;border:1px solid var(--line);background:var(--surface);color:var(--ink-2)}
.note b{color:var(--ink)}
.note.warn{border-color:var(--warn);background:var(--brand-soft);color:var(--ink)}
.note.bad{border-left:4px solid var(--bad);color:var(--ink)}
.note .ic{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--brand-deep);flex:none;padding-top:2px}
.empty{padding:22px 14px;text-align:center;color:var(--ink-3);font-size:13.5px}
.json{font-family:var(--mono);font-size:11.5px;line-height:1.6;background:var(--sunk);border:1px solid var(--line-2);border-radius:3px;padding:11px;max-height:240px;overflow:auto;white-space:pre;color:var(--ink-2)}

.chains{display:flex;gap:10px;flex-wrap:wrap}
.chip{
  display:inline-flex;align-items:center;gap:8px;padding:7px 13px;border:1px solid var(--line);
  border-radius:100px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);
}
.chip .dot{width:7px;height:7px;border-radius:50%;background:var(--brand);flex:none}
.chip.soon{color:var(--ink-3)}
.chip.soon .dot{background:var(--line)}

footer{border-top:1px solid var(--line)}
footer .wrap{display:flex;align-items:center;gap:22px;flex-wrap:wrap;padding-block:26px}
footer a{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);text-decoration:none}
footer a:hover{color:var(--ink)}