:root{--bg:#141311;--ink:#f4f1ea;--sub:#c9c4b8;--mut:#8f8a7e;--line:#33312c;--hover:#1d1c19;--accent:#c2410c;--accent-soft:#e8a87c}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'IBM Plex Mono',monospace;letter-spacing:-.01em;min-height:100vh}
a{color:inherit;text-decoration:none}a:hover{color:var(--accent)}
::selection{background:var(--accent);color:var(--ink)}
.wrap{max-width:1240px;margin:0 auto;padding:0 40px}
.label{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--mut)}
header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 40px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.logo{font-weight:600;font-size:18px;letter-spacing:.02em}
nav{display:flex;gap:28px;font-size:13px;letter-spacing:.12em;text-transform:uppercase}
nav a{color:var(--mut)}nav a:hover{color:var(--accent)}
.btn{font-size:13px;border:1px solid var(--ink);padding:8px 16px;letter-spacing:.1em}
.btn:hover{background:var(--ink);color:var(--bg)}
/* hero */
.hero{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(260px,1fr);border-left:1px solid var(--line);border-right:1px solid var(--line)}
.hero-main{padding:88px 48px 72px 40px;display:flex;flex-direction:column;justify-content:flex-end;gap:56px;min-height:440px}
.eyebrow{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
h1{font-size:clamp(40px,6.5vw,88px);line-height:1.05;font-weight:500;margin:0;text-wrap:pretty;text-transform:lowercase}
.hero-sub{font-size:15px;line-height:1.8;max-width:44ch;margin:0;color:var(--sub)}
/* footprint */
.fp{border-left:1px solid var(--line);padding:28px 28px 24px;display:flex;flex-direction:column;font-size:12px}
.fp-head{display:flex;justify-content:space-between;gap:12px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--mut);padding-bottom:14px;border-bottom:1px solid var(--line);white-space:nowrap}
.fp-head .st{display:flex;align-items:center;gap:8px}
.dot{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:pulse 1s steps(2,jump-none) infinite}
@keyframes pulse{0%{opacity:1}50%{opacity:.25}}
.fp-row{display:grid;grid-template-columns:72px minmax(0,1fr) minmax(0,1fr) 54px;align-items:center;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}
.fp-row .p{color:var(--mut);padding:9px 0}
.fp-row .b,.fp-row .a{padding:9px 10px;color:var(--sub);transition:background .5s ease-out}
.fp-row .b{text-align:right}.fp-row .a{text-align:left}
.fp-row .t{text-align:right;color:var(--accent);font-size:10px;letter-spacing:.1em}
.fp-row.last .p,.fp-row.poc .p{color:var(--accent)}
.fp-row .imb{background:var(--accent)!important;color:var(--ink)}
.fp-row .fa{background:rgba(194,65,12,.55)}
.fp-row .fb{background:rgba(244,241,234,.28)}
.fp-foot{display:flex;justify-content:space-between;gap:12px;padding-top:16px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.fp-foot b{font-weight:400;color:var(--accent)}
/* ticker */
.ticker{border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;padding:12px 0;white-space:nowrap;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--mut)}
.ticker span{display:inline-block;animation:ticker 60s linear infinite}
@keyframes ticker{to{transform:translateX(-50%)}}
/* sections */
section.block{border-top:1px solid var(--line)}
.sg{display:grid;grid-template-columns:minmax(180px,1fr) minmax(0,2.6fr);gap:40px;padding-top:88px;padding-bottom:88px}
h2{font-size:clamp(28px,4vw,44px);font-weight:500;margin:0 0 16px;line-height:1.15}
.lede{color:var(--sub);font-size:15px;line-height:1.8;max-width:60ch;margin:0 0 40px}
.rows{border-top:1px solid var(--line)}
.row{display:grid;grid-template-columns:56px minmax(0,1fr) auto;align-items:baseline;gap:20px;padding:22px 8px;border-bottom:1px solid var(--line)}
.row .num{font-size:12px;color:var(--mut)}.row .name{font-size:19px;font-weight:500}
.row .desc{display:block;font-size:13px;color:var(--mut);margin-top:4px}
.row .tag{font-size:13px;color:var(--accent);letter-spacing:.1em}
.res{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:baseline;padding:18px 8px;border-bottom:1px solid var(--line)}
.res .meta{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.res small{color:var(--mut);font-size:13px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.card{border:1px solid var(--line);padding:26px 24px;display:flex;flex-direction:column;gap:14px;min-height:180px}
.card .kind{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.card .name{font-size:18px;font-weight:500;line-height:1.35}
.card .desc{font-size:13px;color:var(--mut);line-height:1.7;flex:1}
.card .cta{font-size:13px;letter-spacing:.1em}
/* motion on rows/cards */
.lr{transition:background .25s,padding-left .25s}
.lr:hover{background:var(--hover);padding-left:20px;color:inherit}
.lc{transition:border-color .25s,transform .25s}
.lc:hover{border-color:var(--ink);transform:translateY(-4px);color:inherit}
.ar{display:inline-block;transition:transform .25s}
.lr:hover .ar,.lc:hover .ar{transform:translateX(6px)}
@keyframes rv{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.lr,.lc{animation:rv linear backwards;animation-timeline:view();animation-range:entry 0% entry 35%}
/* footer */
footer{border-top:1px solid var(--ink);background:var(--ink);color:var(--bg)}
.fg{display:grid;grid-template-columns:minmax(240px,2fr) minmax(200px,1fr);gap:48px;padding-top:112px}
footer .label{color:var(--accent);letter-spacing:.2em;margin-bottom:24px}
footer h2{font-size:clamp(44px,7vw,96px);line-height:1.02;margin:0 0 32px;text-transform:lowercase}
footer h2 i{font-style:normal;color:var(--accent)}
footer p{font-size:19px;line-height:1.8;max-width:48ch;margin:0;opacity:.9}
.fl{display:flex;flex-direction:column;gap:12px;font-size:14px;letter-spacing:.08em}
.fl a{color:var(--bg)}.fl a:hover{color:var(--accent-soft)}.fl a.dim{opacity:.7}
.foot-bar{display:flex;justify-content:space-between;gap:16px;margin-top:72px;padding:20px 0 48px;border-top:1px solid rgba(244,241,234,.2);font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.55;flex-wrap:wrap}
@media(max-width:820px){.hero{grid-template-columns:1fr}.fp{border-left:0;border-top:1px solid var(--line)}.sg{grid-template-columns:1fr;gap:20px}.fg{grid-template-columns:1fr}}
.ac{color:var(--accent)}
.mb40{margin-bottom:40px}
button.res{font:inherit;color:inherit;background:none;border:0;border-bottom:1px solid var(--line);width:100%;text-align:left;cursor:pointer;letter-spacing:inherit}
dialog#viewer{background:var(--bg);color:var(--ink);border:1px solid var(--line);padding:0;width:min(560px,94vw);max-height:92vh;font-family:inherit}
dialog#viewer::backdrop{background:rgba(0,0,0,.8)}
.vh{display:flex;justify-content:space-between;gap:16px;padding:14px 20px;border-bottom:1px solid var(--line);font-size:12px;letter-spacing:.14em;text-transform:uppercase;position:sticky;top:0;background:var(--bg)}
.vh button{font:inherit;letter-spacing:inherit;color:var(--mut);background:none;border:0;cursor:pointer}.vh button:hover{color:var(--accent)}
#viewer-slides img{display:block;width:100%;border-bottom:1px solid var(--line)}

/* beginner thread */
.thr{font-size:19px;font-weight:500;margin:0 0 20px}.thr small{font-size:12px;font-weight:400;color:var(--mut);letter-spacing:.14em;text-transform:uppercase;margin-left:10px}
.fine{font-size:12px;color:var(--mut);margin:24px 0 0}
details.step{border-bottom:1px solid var(--line)}details.step>summary.res{border-bottom:0;cursor:pointer;list-style:none}
summary::-webkit-details-marker{display:none}
.step .num{font-size:12px;color:var(--mut);margin-right:16px}
.pl{display:inline-block;font-size:18px;color:var(--accent);transition:transform .25s}details[open] .pl{transform:rotate(45deg)}
.step-body{padding:4px 8px 36px 56px}.step-body p{font-size:14px;line-height:1.8;color:var(--sub);max-width:60ch;margin:0}
.viz{border:1px solid var(--line);padding:20px;margin-top:22px;max-width:520px;font-size:12px;font-variant-numeric:tabular-nums}
.step-body .cap{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);margin:16px 0 0;max-width:none}
.ac{color:var(--accent);font-weight:400}
.viz em{font-style:normal}
/* tape */
.tape{height:150px;overflow:hidden;-webkit-mask:linear-gradient(transparent,#000 20%,#000 80%,transparent);mask:linear-gradient(transparent,#000 20%,#000 80%,transparent)}
.tape-in{display:flex;flex-direction:column;gap:6px;animation:tp 9s linear infinite}.tape-in span{white-space:pre}
.tape .b{color:var(--accent)}.tape .s{color:var(--sub)}
@keyframes tp{to{transform:translateY(-50%)}}
/* ladder */
.lr2{display:grid;grid-template-columns:64px 1fr 1fr;border-bottom:1px solid var(--line);align-items:center}
.lr2 .p{color:var(--mut);padding:7px 0}
.lr2 .bd,.lr2 .ad{position:relative;height:100%;display:flex;align-items:center;padding:0 8px;overflow:hidden}
.lr2 .bd{justify-content:flex-end}.lr2 .bd i{position:absolute;inset:3px 0 3px 30%;background:rgba(244,241,234,.22)}
.lr2 .ad i.eat{position:absolute;inset:3px 30% 3px 0;background:var(--accent);transform-origin:left;animation:eat 7s ease-in-out infinite}
.lr2 em{position:relative;z-index:1}
.eat.d1{animation-delay:.6s!important}.eat.d2{animation-delay:1.4s!important}.eat.d3{animation-delay:2.2s!important}
@keyframes eat{0%,8%{transform:scaleX(1)}20%,86%{transform:scaleX(0)}96%,100%{transform:scaleX(1)}}
/* passive vs aggressive */
.pa{position:relative;height:70px;display:flex;align-items:center;justify-content:flex-end}
.mkt{position:absolute;left:0;top:50%;margin-top:-8px;color:var(--accent);white-space:nowrap;animation:hit 4s ease-in-out infinite}
@keyframes hit{0%{left:0;opacity:0}15%{opacity:1}55%{left:calc(100% - var(--ww,200px) - 120px)}62%{left:calc(100% - var(--ww,200px) - 132px)}85%{opacity:1}100%{left:0;opacity:0}}
.wall{position:relative;width:var(--ww,200px);height:34px;border:1px solid var(--ink);display:flex;align-items:center;justify-content:center;overflow:hidden}
.wall i{position:absolute;inset:0;background:rgba(244,241,234,.22);transform-origin:right;animation:wl 4s ease-in-out infinite}
.wall em{position:relative}
@keyframes wl{0%,55%{transform:scaleX(1)}65%,90%{transform:scaleX(.55)}100%{transform:scaleX(1)}}
/* footprint */
.fpm .fr{display:grid;grid-template-columns:64px 1fr 1fr 40px;border-bottom:1px solid var(--line);animation:pop 8s ease-out infinite both}
.fr .p{color:var(--mut);padding:8px 0}.fr .b{text-align:right;padding:8px 10px;color:var(--sub)}.fr .a{padding:8px 10px;color:var(--sub)}.fr .t{text-align:right;color:var(--accent);font-size:10px;letter-spacing:.1em;padding:8px 0}
.fr.poc .p{color:var(--accent)}.fr.poc .a,.fr.poc .b{color:var(--ink)}
@keyframes pop{0%{opacity:0;transform:translateX(-8px)}8%,88%{opacity:1;transform:none}100%{opacity:0}}
.fpm.im .fr{animation:none}
.imc{animation:imb 5s ease infinite}.cmp{outline:1px dashed var(--accent);outline-offset:-3px}
@keyframes imb{0%,30%{background:transparent;color:var(--sub)}45%,85%{background:var(--accent);color:var(--ink)}100%{background:transparent}}
/* delta, volume bar */
.dr,.vb{display:grid;grid-template-columns:34px 1fr 34px;gap:12px;align-items:center;margin-bottom:12px}.vb{grid-template-columns:54px 1fr;margin:18px 0 0}
.bar{height:14px;border:1px solid var(--line)}
.bar .g{display:block;height:100%;background:rgba(244,241,234,.35);width:0;animation:gr 7s ease-out infinite}.bar .g.a{background:var(--accent)}
@keyframes gr{0%{width:0}25%,90%{width:var(--w,100%)}100%{width:0}}
.bar .grow{--w:100%;animation-duration:6s}
.res2{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);opacity:0;animation:rs 7s infinite}
@keyframes rs{0%,25%{opacity:0}35%,90%{opacity:1}100%{opacity:0}}
/* absorption */
.ab{display:flex;justify-content:space-between;align-items:center;height:90px}
.charge{display:flex;flex-direction:column;gap:12px;position:relative;width:60%;height:100%;justify-content:center}
.charge i{display:block;height:2px;width:30px;background:var(--accent);position:relative;animation:ch 1.6s linear infinite}
.charge i:nth-child(2){animation-delay:.5s}.charge i:nth-child(3){animation-delay:1s}
@keyframes ch{0%{transform:translateX(0);opacity:0}15%{opacity:1}100%{transform:translateX(220px);opacity:0}}
.wall2{border:1px solid var(--ink);padding:18px 14px;text-align:center;line-height:1.5;color:var(--sub);animation:wp 1.6s steps(2,jump-none) infinite}
@keyframes wp{0%{border-color:var(--ink)}50%{border-color:var(--accent)}}
@media(prefers-reduced-motion:reduce){.viz *{animation:none!important;opacity:1!important}.bar .g{width:var(--w,100%)}}
@media(max-width:600px){.step-body{padding-left:8px}.step .num{margin-right:10px}.charge i{animation-name:ch2}@keyframes ch2{0%{transform:translateX(0);opacity:0}15%{opacity:1}100%{transform:translateX(120px);opacity:0}}}

/* line charts */
.ch{width:100%;height:auto;display:block;overflow:visible}
.ln{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:dr 7s ease-out infinite}
.ln.pr{stroke:var(--ink)}.ln.cv{stroke:var(--accent)}
@keyframes dr{0%{stroke-dashoffset:1}60%,92%{stroke-dashoffset:0}100%{stroke-dashoffset:1}}
.ch .tx{font-size:11px;fill:var(--mut);font-family:inherit;letter-spacing:.1em;text-transform:uppercase}.ch .tx.ac{fill:var(--accent)}
.lv{stroke:var(--mut);stroke-dasharray:4 4;stroke-width:1}
.en{fill:var(--accent);opacity:0;animation:fi 7s infinite}.ch text.en{fill:var(--sub)}.trp{opacity:0;animation:fi2 7s infinite}
@keyframes fi{0%,30%{opacity:0}38%,90%{opacity:1}100%{opacity:0}}
@keyframes fi2{0%,62%{opacity:0}72%,90%{opacity:1}100%{opacity:0}}
/* stacked imbalances */
.stk .sk{animation:stk 7s ease infinite}.stk .s2{animation-delay:.6s}.stk .s3{animation-delay:1.2s}
@keyframes stk{0%,8%{background:transparent;color:var(--sub)}16%,84%{background:var(--accent);color:var(--ink)}96%,100%{background:transparent;color:var(--sub)}}
@media(max-width:600px){.wrap{padding-left:20px;padding-right:20px}header{padding:18px 20px}.hero-main{padding:56px 20px 48px}.fp{padding:24px 20px 20px}.sg{padding-top:64px;padding-bottom:64px}.fg{padding-top:72px}}
@media(max-width:600px){.pa{--ww:130px}}