@font-face{font-family:"Big Shoulders Display";src:url(/manifest/fonts/big-shoulders-display.woff2) format("woff2");font-weight:700 900;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url(/manifest/fonts/hanken-grotesk.woff2) format("woff2");font-weight:400 600;font-display:swap}
@font-face{font-family:"DM Mono";src:url(/manifest/fonts/dm-mono-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"DM Mono";src:url(/manifest/fonts/dm-mono-500.woff2) format("woff2");font-weight:500;font-display:swap}
/* Layout concept: a rewind. The reader lands on the finished work at 0 ft, then climbs back through how it was made to the first line of the contract at 42,000 ft. Sky, ridges, cloud and aurora move at different speeds; an altimeter stops at numbers worth recognising. */
:root{color-scheme:dark;--night:#0a0f26;--glass:rgba(10,15,38,.86);--ink:#eef1ff;--soft:#b9c1e2;--line:rgba(180,188,223,.26);--aurora:#6ff2c8;--ember:#ffb054;--alarm:#ff7d8a;--volt:#a9a4ff;--display:"Big Shoulders Display","Arial Narrow",Impact,sans-serif;--body:"Hanken Grotesk","Helvetica Neue",Arial,sans-serif;--mono:"DM Mono",ui-monospace,Menlo,Consolas,monospace}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--night);color:var(--ink);font:400 17px/1.6 var(--body);overflow-x:clip}
html{overflow-x:clip}
#sky{position:fixed;inset:0;width:100%;height:100%;z-index:0}
main{position:relative;z-index:1}
.wrap{max-width:1180px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
@media(min-width:1180px){.wrap{padding-right:190px;max-width:1340px}}
section{padding-block:clamp(72px,12vw,150px) 0;scroll-margin-top:16px}
.endsec{padding-block:clamp(70px,10vw,120px) clamp(110px,18vw,240px)}
a{color:var(--aurora)}
:focus-visible{outline:2px solid var(--ember);outline-offset:3px}
.hero{padding-block:clamp(70px,13vw,170px) 0}
.kick{font:500 13px/1.4 var(--mono);letter-spacing:.08em;color:var(--aurora);margin:0 0 20px}
h1{font:900 clamp(66px,16.5vw,216px)/.84 var(--display);text-transform:uppercase;margin:0}
h1 span{display:block;will-change:transform}
h1 em{font-style:normal;color:var(--aurora)}
.big{font-size:clamp(20px,2.7vw,30px);line-height:1.32;max-width:34em;margin:30px 0 0;text-wrap:pretty}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;margin:46px 0 0;background:var(--line);border:1px solid var(--line)}
.stats div{background:var(--glass);padding:18px 16px;min-width:0}
.stats b{display:block;font:900 clamp(38px,5vw,56px)/1 var(--display)}
.stats span{display:block;font-size:14px;line-height:1.35;color:var(--soft);margin-top:6px}
.stats .warn b{color:var(--alarm)}
.by{font:400 13px/1.5 var(--mono);color:var(--soft);margin:18px 0 0}
.cue{display:inline-block;margin-top:26px;font:700 22px/1 var(--display);letter-spacing:.03em;text-transform:uppercase;color:var(--night);background:var(--aurora);padding:12px 16px;border-radius:5px;text-decoration:none}
.sh{position:relative;margin-bottom:34px}
.ghost{position:absolute;right:0;top:-.42em;font:900 clamp(90px,19vw,260px)/1 var(--display);color:var(--ink);opacity:.055;pointer-events:none;white-space:nowrap;will-change:transform;z-index:-1}
.alt{font:500 13px/1 var(--mono);letter-spacing:.08em;color:var(--ember);margin:0 0 12px}
h2{font:900 clamp(44px,8vw,104px)/.92 var(--display);text-transform:uppercase;margin:0;text-wrap:balance;max-width:13em}
.lede{font-size:clamp(18px,2vw,22px);line-height:1.42;max-width:36em;margin:18px 0 0;text-wrap:pretty}
h3{font:600 19px/1.28 var(--body);margin:0}
.fig{margin:16px 0 0;background:var(--glass);border:1px solid var(--line);border-radius:10px;padding:18px 18px 14px}
.sh+.fig{margin-top:0}
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.mw{min-width:780px}
figcaption{font-size:15px;line-height:1.45;color:var(--soft);margin-top:12px;max-width:60em}
svg{display:block;width:100%;height:auto;max-width:100%}
.b{fill:#141a3a;stroke:#7d86b5;stroke-width:1.2}
.b.b-a{fill:#143a42;stroke:#6ff2c8}.b.b-h{fill:#3a2a1c;stroke:#ffb054}.b.b-m{fill:#25234f;stroke:#a9a4ff}.b.b-r{fill:#3a1a2a;stroke:#ff7d8a}
.bt{fill:#eef1ff;font:600 13.5px var(--body)}
.bt.b-a{fill:#a7f8de}.bt.b-h{fill:#ffcf96}.bt.b-m{fill:#cbc8ff}.bt.b-r{fill:#ffb0b8}
.st{fill:#b9c1e2;font:400 11.5px var(--body)}
.lb{fill:#b9c1e2;font:400 12.5px var(--body)}
.lbg{fill:#6ff2c8;font:500 12.5px var(--body)}
.lbe{fill:#ffb054;font:500 12.5px var(--body)}
.lbr{fill:#ff9aa5;font:500 12.5px var(--body)}
.sm{fill:#b9c1e2;font:400 11px var(--mono)}
.hd{fill:#eef1ff;font:500 12.5px var(--mono);letter-spacing:.06em}
.hd2{fill:#eef1ff;font:600 14.5px var(--body)}
.mantra{font:700 clamp(24px,3.6vw,44px)/1.14 var(--display);text-transform:uppercase;text-align:center;margin:30px 0 0;text-wrap:balance}
.mantra i{font-style:normal;color:var(--aurora)}

/* the morph */
.stagebox{max-width:1180px;margin:0 auto;padding-inline:max(16px,env(safe-area-inset-left,0px)) max(16px,env(safe-area-inset-right,0px));width:100%}
.stage{margin:0 0 20px}
.stage.live{height:320vh}
.stage.live .sticky{position:sticky;top:0;height:100vh;display:flex;align-items:center}
.stage.live #morph{max-height:74vh}
@media(min-width:1180px){.stagebox{padding-right:190px;max-width:1340px}}
.node rect{fill:#141a3a;stroke:#7d86b5;stroke-width:1.3}
.node.h rect{fill:#3a2a1c;stroke:#ffb054}.node.a rect{fill:#143a42;stroke:#6ff2c8}.node.m rect{fill:#25234f;stroke:#a9a4ff}.node.r rect{fill:#3a1a2a;stroke:#ff7d8a}
.nt{fill:#eef1ff;font:600 15px var(--body)}
.narrow .nt{font-size:21px}
.edge{stroke:#6ff2c8;stroke-width:1.8}
.cx{fill:#eef1ff;font:700 26px var(--display);text-transform:uppercase}
.narrow .cx{font-size:23px}
.phase{font-size:clamp(17px,2vw,21px);line-height:1.4;margin:16px auto 0;max-width:42em;min-height:3em;text-align:center}
.phase b{color:var(--aurora)}

/* tables */
.mx{width:100%;min-width:720px;border-collapse:collapse;background:var(--glass);font-size:15px;line-height:1.38}
.mx th,.mx td{padding:11px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.mx thead th{font:500 12px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--soft)}
.mx tbody th{font-weight:600}
.dim{color:var(--soft);text-decoration:line-through;text-decoration-color:rgba(255,125,138,.65)}
.c{display:inline-block;font:500 12px/1 var(--mono);padding:5px 7px;border-radius:4px;margin:0 4px 2px 0}
.c.h{background:rgba(255,176,84,.2);color:#ffcf96}.c.a{background:rgba(111,242,200,.17);color:#a7f8de}.c.m{background:rgba(169,164,255,.2);color:#cbc8ff}
.rung{font:500 12.5px/1.4 var(--mono);color:var(--ember)}

/* lifecycle: cards stack as you scroll on tall screens */
.life{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.card{background:#0d1330;border:1px solid var(--line);border-radius:12px;padding:20px 22px;min-width:0;box-shadow:0 -14px 40px -18px rgba(0,0,0,.8)}
.card header{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin-bottom:12px}
.ln{font:500 13px var(--mono);color:var(--ember)}
.card h3{font:900 clamp(34px,4.6vw,56px)/1 var(--display);text-transform:uppercase}
.chip{font:500 12px/1 var(--mono);padding:6px 8px;border-radius:4px;margin-left:auto}
.chip.on{background:rgba(111,242,200,.17);color:#a7f8de}.chip.mix{background:rgba(255,176,84,.2);color:#ffcf96}.chip.no{background:rgba(255,125,138,.2);color:#ffb0b8}
.card dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:14px 22px;margin:0}
.card dt{font:500 11.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--soft);margin-bottom:4px}
.card dd{margin:0;font-size:15.5px;line-height:1.42}
.card .bad dt{color:#ff9aa5}
@media(min-width:900px) and (min-height:760px){
  .card{position:sticky;top:calc(26px + var(--i,0)*16px)}
}

/* rules */
.rules{list-style:none;counter-reset:r;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.rules>li{counter-increment:r;background:var(--glass);padding:22px 20px 20px;min-width:0}
.rules>li::before{content:counter(r);display:block;font:900 44px/1 var(--display);color:var(--aurora);margin-bottom:8px}
.rules h3{font:700 clamp(24px,2.6vw,30px)/1.06 var(--display);text-transform:uppercase}
.rules p{margin:10px 0 0;font-size:15.5px;line-height:1.45}
.rules .proof{color:var(--soft);font-size:14.5px;border-top:1px solid var(--line);padding-top:10px}

/* ladder */
.ladder{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ladder>li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:10px 26px;background:var(--glass);border:1px solid;border-radius:10px;padding:16px 20px;will-change:transform}
.rung-g{border-color:#6ff2c8!important}.rung-v{border-color:#a9a4ff!important}.rung-e{border-color:#ffb054!important}.rung-r{border-color:#ff7d8a!important}
.rh{display:flex;gap:14px;min-width:0}
.rh>b{font:900 58px/.9 var(--display)}
.rung-g .rh>b{color:#6ff2c8}.rung-v .rh>b{color:#a9a4ff}.rung-e .rh>b{color:#ffb054}.rung-r .rh>b{color:#ff7d8a}
.rh p{margin:4px 0 0;font-size:15px;color:var(--soft);line-height:1.35}
.ladder ul{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:6px;align-content:flex-start}
.ladder ul li{font-size:13.5px;line-height:1.3;background:rgba(238,241,255,.08);padding:6px 9px;border-radius:5px}
@media(max-width:720px){.ladder>li{grid-template-columns:minmax(0,1fr)}}

/* simulator */
.sim{background:var(--glass);border:1px solid var(--aurora);border-radius:10px;padding:18px;margin-bottom:16px}
.ctl{display:flex;flex-wrap:wrap;gap:8px}
.ctl button,.ctl label{display:flex;flex-direction:column;gap:2px;justify-content:center;min-height:54px;background:#141a3a;color:var(--ink);border:1px solid #7d86b5;border-radius:7px;padding:8px 12px;font:inherit;text-align:left}
.ctl button{cursor:pointer;min-width:96px}
.ctl b{font:500 14px var(--mono)}
.ctl span{font-size:12px;color:var(--soft)}
.ctl button[aria-pressed="true"]{background:#3a1a2a;border-color:var(--alarm)}
.ctl label{flex:1 1 220px;min-width:0}
.ctl select{background:#0a0f26;color:var(--ink);border:1px solid var(--line);border-radius:4px;font:400 14px var(--mono);padding:4px;margin-top:3px;max-width:100%}
.path{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:8px}
.path li{border:1px solid var(--line);border-radius:7px;padding:9px 10px;min-width:0;transition:background .18s,border-color .18s,opacity .18s}
.path b{display:block;font-size:14px;line-height:1.2}
.path span{display:block;font-size:12px;line-height:1.25;color:var(--soft);margin-top:3px}
.path .pass{background:rgba(111,242,200,.14);border-color:#6ff2c8}
.path .stop{background:rgba(255,125,138,.2);border-color:#ff7d8a}
.path .idle{opacity:.42}
.verdict{font-size:clamp(18px,2.2vw,23px);line-height:1.35;margin:14px 0 0}
.verdict b{font:900 1.35em/1 var(--display);text-transform:uppercase;color:var(--aurora);margin-right:6px}
.verdict.no b{color:var(--alarm)}
.code{margin:14px 0 0;overflow-x:auto;background:#060a1c;border-radius:6px;padding:12px 14px;font:400 13px/1.55 var(--mono);color:var(--soft)}

.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:16px;margin-top:16px}
.two>div{background:var(--glass);border:1px solid var(--line);border-radius:10px;padding:18px 20px;min-width:0}
.two ul{margin:10px 0 0;padding-left:18px;font-size:15.5px}
.tree{margin:0;background:var(--glass);border:1px solid var(--line);border-radius:10px;padding:20px;overflow-x:auto;font:400 14px/1.62 var(--mono)}
.tree b{color:var(--aurora);font-weight:500}.tree i{font-style:normal;color:var(--soft)}
.steps{list-style:none;counter-reset:s;margin:0;padding:0;display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.steps li{counter-increment:s;display:grid;grid-template-columns:52px minmax(0,1fr);column-gap:10px;background:var(--glass);padding:15px 18px}
.steps li::before{content:counter(s);grid-row:1/3;font:900 38px/1 var(--display);color:var(--ember)}
.steps b{font-weight:600}.steps span{color:var(--soft);font-size:15.5px}
.note{background:var(--glass);border:1px solid var(--line);border-radius:10px;padding:16px 18px;margin:16px 0 0;font-size:15.5px}
.gaps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:12px}
.gaps li{background:rgba(26,12,24,.9);border:1px solid rgba(255,125,138,.5);border-radius:10px;padding:18px;min-width:0}
.gaps h3{color:#ffb0b8}.gaps p{margin:8px 0 0;font-size:15.5px;line-height:1.45}
.end{font:700 clamp(30px,5vw,60px)/1.02 var(--display);text-transform:uppercase;margin:0;max-width:20em;text-wrap:balance}
#alti{position:fixed;z-index:3;right:max(14px,env(safe-area-inset-right,0px));top:50%;transform:translateY(-50%);width:150px;display:none;text-align:right}
@media(min-width:1180px){#alti{display:block}}
#read{font:900 34px/1 var(--display);font-variant-numeric:tabular-nums;color:var(--aurora)}
#read small{font:400 11px var(--mono);color:var(--soft);margin-left:3px}
#alti nav{margin-top:12px;border-right:1px solid var(--line);padding-right:10px}
#alti a{display:block;font:400 11px/1.65 var(--mono);color:var(--soft);text-decoration:none}
#alti a:hover{color:var(--ink)}#alti a.on{color:var(--ember)}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.path li{transition:none}}

.alt2{background:transparent;color:var(--aurora);border:1px solid var(--aurora);margin-left:8px}
.proof a,.closed a,.kit a{color:var(--aurora)}
.auditsum{font-size:clamp(18px,2vw,22px);margin:0 0 14px}
.auditsum b{font:900 1.5em/1 var(--display);color:var(--aurora);margin-right:4px}
.audit{width:100%;min-width:760px;border-collapse:collapse;background:var(--glass);font-size:14px}
.audit th,.audit td{padding:9px 8px;border-bottom:1px solid var(--line);text-align:center}
.audit thead th{font:500 11.5px var(--mono);color:var(--soft)}
.audit tbody th,.audit thead th:first-child{text-align:left;font-weight:600;white-space:nowrap;padding-left:14px}
.audit tbody th a{color:var(--ink);text-decoration-color:var(--line)}
.a-y{color:var(--aurora);font-size:17px}.a-n{color:var(--alarm);font-size:17px}.a-x{color:var(--soft)}
.auditkey{font-size:14px;color:var(--soft);margin:12px 0 0}
.kit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:16px 26px;align-items:center;background:var(--glass);border:1px solid var(--aurora);border-radius:10px;padding:20px 22px;margin-bottom:16px}
.kit h3{font:900 clamp(34px,4.6vw,56px)/1 var(--display);text-transform:uppercase}
.kit p{margin:8px 0 0;font-size:15.5px;line-height:1.45}
.kit .kitk{font:500 12px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ember);margin:0 0 6px}
.kitlink{grid-column:1/-1;font:400 13px var(--mono)!important;margin:0!important}
.cmd{position:relative;min-width:0}
.cmd pre{margin:0;background:#060a1c;border-radius:6px;padding:14px 72px 14px 14px;overflow-x:auto;font:400 13px/1.6 var(--mono);color:var(--ink)}
.cmd button{position:absolute;top:8px;right:8px;background:var(--aurora);color:var(--night);border:0;border-radius:4px;padding:6px 10px;font:500 12px var(--mono);cursor:pointer}
@media(max-width:760px){.kit{grid-template-columns:minmax(0,1fr)}.cmd pre{padding:14px}.cmd button{position:static;display:block;margin-top:8px;width:100%;padding:10px}}
.subh{font:900 clamp(30px,4vw,48px)/1 var(--display);text-transform:uppercase;margin:34px 0 14px;color:var(--aurora)}
.closed{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:12px}
.closed li{background:rgba(8,30,34,.9);border:1px solid rgba(111,242,200,.5);border-radius:10px;padding:16px 18px;min-width:0;font-size:15.5px;line-height:1.42}
.closed b{display:block;color:#a7f8de;font-weight:600;font-size:17px;line-height:1.25;margin-bottom:6px}
.closed span{display:block}
.closed em{display:block;font:400 12.5px var(--mono);margin-top:8px}

h1{font-size:clamp(66px,10.2vw,158px);line-height:.9}
h1 span{white-space:nowrap}
.cues{margin-top:26px;display:flex;flex-wrap:wrap;gap:10px}
.cues .cue{margin:0}
.back{font:500 clamp(15px,1.7vw,18px)/1.3 var(--mono);color:var(--aurora);margin:0 0 10px}
.wall{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:clamp(40px,6vw,70px) 0 0;align-items:start}
.wcol{display:grid;gap:18px;min-width:0;will-change:transform}
.wcol:nth-child(2){margin-top:64px}.wcol:nth-child(3){margin-top:26px}
.tile{position:relative;display:block;color:var(--ink);text-decoration:none;background:#0d1330;border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:0 18px 44px -20px rgba(0,0,0,.85);transition:transform .22s,border-color .22s}
.tile:hover{transform:translateY(-5px) scale(1.015);border-color:var(--aurora)}
.tile img{display:block;width:100%;height:auto;background:#141a3a}
.tn{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;padding:11px 13px 12px;align-items:baseline}
.tn b{font:700 clamp(21px,2.1vw,27px)/1.05 var(--display);text-transform:uppercase}
.tn span{grid-column:1/-1;font-size:13.5px;line-height:1.3;color:var(--soft)}
.tn i{grid-column:2;grid-row:1;font:500 11px var(--mono);font-style:normal;white-space:nowrap}
.tn .live{color:var(--aurora)}.tn .rev{color:var(--ember)}
.wallnote{font-size:clamp(18px,2vw,22px);line-height:1.4;max-width:38em;margin:clamp(40px,14vw,250px) 0 0}
@media(max-width:720px){.wall{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.wall .wcol{gap:10px}.wcol:nth-child(2){margin-top:30px}.wcol:nth-child(3){grid-column:1/-1;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:0}.wallnote{margin-top:34px}.tn{padding:8px 9px 9px}.tn i{grid-column:1;grid-row:auto}.tn span{font-size:12.5px}}
@media(prefers-reduced-motion:reduce){.tile{transition:none}}

.hero{padding-block:clamp(34px,5vw,70px) 0}
.herogrid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:22px;align-items:center}
.herotext{min-width:0}
.big{font-size:clamp(18px,1.75vw,24px)}
.heroart{position:relative;height:clamp(460px,44vw,640px);min-width:0}
.heroart img{position:absolute;display:block;height:auto;border-radius:12px;border:1px solid var(--line);box-shadow:0 26px 60px -22px rgba(0,0,0,.9);will-change:transform}
.heroart .h1{width:78%;left:0;top:2%;rotate:-3deg}
.heroart .h2{width:39%;left:6%;top:30%;rotate:-5deg;z-index:2}
.heroart .h3{width:42%;right:2%;top:16%;rotate:4deg;z-index:3}
@media(max-width:860px){.herogrid{grid-template-columns:minmax(0,1fr)}.heroart{height:112vw;max-height:760px;order:-1;margin-bottom:14px}.heroart .h2{top:24%}.heroart .h3{top:12%}h1{font-size:clamp(60px,18.5vw,150px)}}