:root{--paper:#F1F0EB;--ink:#131312;--ink2:#575650;--mute:#6b6a64;--hair:#CDCCC4;--wash:#E6E5DF;--slab:#131312;--slab-ink:#EDECE6;--slab-mute:#8d8c86;--slab-hair:#2c2c29;--accent:#2A5CFF;--rail:212px;
--disp:'Big Shoulders Display','Arial Narrow',sans-serif;--body:'Sofia Sans',system-ui,sans-serif;--mono:'Fragment Mono',ui-monospace,monospace}
:root[data-theme=ink]{color-scheme:dark;--paper:#131312;--ink:#F1F0EB;--ink2:#B9B8B1;--mute:#8a8983;--hair:#34332F;--wash:#1c1c1a;--slab:#1C1C1A;--slab-hair:#34332f;--accent:#5B83FF}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font:400 17px/1.55 var(--body);overflow-x:hidden}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.mono{font-family:var(--mono);font-size:13px;letter-spacing:0}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:var(--ink);color:var(--paper);padding:8px 12px;z-index:30}

/* bar: the one object */
.bar{position:relative;display:block;height:4px;background:var(--slab-hair);overflow:hidden}
.bar i{position:absolute;inset:0;background:var(--accent);transform:scaleX(var(--f,0));transform-origin:left;transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.win .bar{height:6px}
.win .row-main .bar{height:10px}
.win .bar::before,.bar-live::before{content:"";position:absolute;top:0;bottom:0;width:22%;background:linear-gradient(90deg,transparent,rgba(91,131,255,.55),transparent);animation:scan 1.8s linear infinite}
.win .rows li:nth-child(2) .bar::before{animation-delay:-.6s}.win .rows li:nth-child(3) .bar::before{animation-delay:-1.2s}
.after li:nth-child(1) .bar::before{animation-delay:-.3s}.after li:nth-child(2) .bar::before{animation-delay:-.9s}.after li:nth-child(3) .bar::before{animation-delay:-1.5s}.after li:nth-child(4) .bar::before{animation-delay:-.45s}
@keyframes scan{from{transform:translateX(-100%)}to{transform:translateX(460%)}}

/* rail */
.rail{position:fixed;inset:0 auto 0 0;width:var(--rail);padding:26px 0 22px 28px;display:flex;flex-direction:column;z-index:20;background:var(--paper)}
.rail::before{content:"";position:absolute;left:38px;top:0;bottom:0;width:1.5px;background:var(--ink)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;position:relative}
.brand img{width:44px;height:44px;position:relative;left:-12px;background:var(--paper)}
.brand span{font:800 40px/1 var(--disp);letter-spacing:-.01em;margin-left:-14px}
.nav{list-style:none;margin-top:64px;display:grid;gap:22px}
.nav a{display:block;position:relative;padding-left:36px;font:500 27px/1 var(--disp);color:var(--mute);text-decoration:none;transition:color .25s}
.nav a::before{content:"";position:absolute;left:4px;top:50%;width:12px;height:3px;background:var(--hair);transform:translateY(-50%)}
.nav a:hover,.nav a[aria-current=true]{color:var(--ink)}
.nav a[aria-current=true]::before{width:13px;height:30px;left:4px;background:var(--accent)}
.rail-social{display:flex;gap:16px;margin:30px 0 0 36px}
.rail-social a{display:grid;place-items:center;width:30px;height:30px}
.rail-social svg{width:18px;height:18px;fill:var(--ink)}
.ca-pill{min-height:32px;margin:18px 0 0 36px;font:12px var(--mono);border:1px solid var(--ink);padding:6px 9px;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
.rail-read{margin:auto 0 0 36px;padding-right:20px}
.rail-k{font:12px/1.5 var(--mono);color:var(--mute)}
.rail-v{font:700 24px/1.1 var(--disp);margin:2px 0 8px}
.rail-read .bar{background:var(--hair);margin-bottom:6px}
.rail-wallet{margin:18px 0 0 36px;font:12px/1.5 var(--mono);color:var(--mute)}
.rail-wallet a{color:var(--ink)}
.theme{margin:6px 0 0 36px;font:12px var(--mono);color:var(--mute);text-align:left;min-height:32px}
.theme:hover,.ca-pill:hover,.rail-wallet a:hover,.saved-files a:hover{color:var(--accent)}
.cta:hover b{text-decoration-thickness:3px}
.theme b{color:var(--ink);font-weight:400}

/* main */
main{margin-left:var(--rail);padding:0 48px 0 28px}
section{position:relative}
.hero{display:grid;grid-template-columns:minmax(300px,430px) minmax(0,1fr);gap:56px;padding-top:30px;min-height:100dvh;padding-bottom:30px}
.hero-copy{display:flex;flex-direction:column}
h1{font:800 clamp(46px,3.5vw,68px)/.92 var(--disp);letter-spacing:-.012em}
h1 .l1{display:block;animation:rise .8s cubic-bezier(.2,.8,.2,1) both}
h1 .l2{display:block;color:var(--mute);font-weight:500;animation:rise .8s .12s cubic-bezier(.2,.8,.2,1) both}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.lede{margin-top:28px;font-size:18px;max-width:34ch;animation:rise .8s .22s cubic-bezier(.2,.8,.2,1) both}
.cta{margin-top:30px;display:inline-flex;align-items:baseline;gap:14px;align-self:flex-start;background:var(--ink);color:var(--paper);padding:17px 24px 16px;text-decoration:none;animation:rise .8s .3s both;transition:transform .15s}
.cta:active{transform:translateY(1px)}
.cta b{font:700 25px/1 var(--disp);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1.5px}
.cta span{font:12px var(--mono);opacity:.75}
.readings{list-style:none;margin-top:44px;font:13px/1.5 var(--mono)}
.readings a{color:var(--ink2)}
.readings li.readings-note{border:0;color:var(--mute);font-size:12px;padding-top:4px}
.readings li{display:flex;justify-content:space-between;gap:16px;padding:7px 0;border-top:1px solid var(--hair)}
.readings li span{color:var(--mute)}
.readings li b{font-weight:400}

/* the window */
.win{min-width:0;background:var(--slab);color:var(--slab-ink);display:flex;flex-direction:column;min-height:min(860px,calc(100dvh - 60px));position:relative;overflow:hidden}
.win-model{animation:rise .8s .05s cubic-bezier(.2,.8,.2,1) both}
.win-bar{display:flex;justify-content:space-between;gap:16px;padding:10px 20px;border-bottom:1px solid var(--slab-hair);font:12px var(--mono);color:var(--slab-mute)}
.win-body{flex:1;display:flex;flex-direction:column;padding:34px 40px 30px}
.win-label{font:13px var(--mono);color:var(--slab-mute)}
.win-model{font:800 clamp(64px,6.2vw,128px)/.88 var(--disp);letter-spacing:-.015em;margin-top:8px}
.win-meta{margin-top:14px;font-size:17px;color:#c9c8c1;max-width:60ch}
.rows{list-style:none;margin-top:38px;display:grid;gap:0}
.row{display:grid;grid-template-columns:minmax(0,1.6fr) 90px minmax(120px,1.4fr) 150px;gap:22px;align-items:center;padding:13px 0;border-top:1px solid var(--slab-hair);font:13px var(--mono)}
.row-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--slab-ink)}
.row-size,.row-hash{color:var(--slab-mute)}
.row-main .row-name{font-weight:400;color:#fff}
.row-more{display:block;color:var(--slab-mute)}
.win-route{display:flex;align-items:center;gap:16px;margin-top:34px;font:12px var(--mono);color:var(--slab-mute)}
.route-line{flex:1;height:1px;background:repeating-linear-gradient(90deg,var(--slab-mute) 0 6px,transparent 6px 14px);background-size:14px 1px;animation:route 0.9s linear infinite}
@keyframes route{to{background-position:14px 0}}
.win-hashes{margin-top:14px;overflow:hidden;white-space:nowrap;font:14px var(--mono);color:#6a6a64;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.win-hashes span{display:inline-block;animation:tape 26s linear infinite}
@keyframes tape{to{transform:translateX(-50%)}}
.win-foot{margin-top:auto;padding-top:34px;display:flex;justify-content:space-between;align-items:flex-end;gap:24px}
.big-pct,.sc-num,.row-size,.col-meta,.readings b,.rail-v,.count,.rail-k{font-variant-numeric:tabular-nums}
.big-pct{font:800 clamp(96px,9vw,168px)/.8 var(--disp);letter-spacing:-.02em}
.win-sub{font:13px var(--mono);margin-top:12px;color:var(--slab-mute)}
.win-side{font:13px/1.5 var(--mono);color:var(--slab-mute);text-align:right}

.after{margin-top:34px}
.after ol{list-style:none;margin-top:10px}
.after li{display:grid;grid-template-columns:minmax(0,1.6fr) 90px 90px minmax(120px,1.4fr);gap:22px;align-items:center;padding:9px 0;border-top:1px solid var(--slab-hair);font:13px var(--mono);color:var(--slab-mute)}
.after li span:first-child{color:var(--slab-ink)}
/* counter band */
.count{min-height:1.2em;padding:96px 0 0;font:500 clamp(40px,4.4vw,88px)/1 var(--disp);letter-spacing:-.01em}
.count b{font-weight:800}
.count span{color:var(--mute)}

/* story */
.story{height:520vh;margin-top:96px}
.stage{position:sticky;top:0;height:100dvh;display:grid;grid-template-columns:minmax(300px,430px) minmax(0,1fr);gap:56px;padding:30px 0}
.steps{list-style:none;display:flex;flex-direction:column;justify-content:center;gap:26px}
.steps li{opacity:.5;transition:opacity .35s}
.steps li.on{opacity:1}
.steps h3{font:700 34px/1 var(--disp)}
.steps p{margin-top:8px;font-size:16px;color:var(--ink2);max-width:34ch}
.story h2{font:800 clamp(40px,3.2vw,60px)/.92 var(--disp);margin-bottom:10px}
.stage>*,.check-sec>*,.hero>*{min-width:0}
.scene{background:var(--slab);color:var(--slab-ink);display:flex;flex-direction:column;padding:0}
.scene .win-body{justify-content:center;gap:34px}
.sc-num{font:800 clamp(90px,8vw,150px)/.8 var(--disp);letter-spacing:-.02em}
.sc-cap{font:13px var(--mono);color:var(--slab-mute);margin-top:12px}
.sc-ruler .bar{height:8px}
.ticks{position:relative;height:30px;padding-top:8px;border-top:1px solid var(--slab-hair);margin-top:10px}
.ticks span{position:absolute;top:8px;transform:translateX(-50%);font:12px var(--mono);color:var(--slab-mute)}
.ticks span::before{content:"";position:absolute;left:50%;top:-9px;height:6px;width:1px;background:var(--slab-mute)}
.ticks span:first-child{transform:none}.ticks span:last-child{transform:translateX(-100%)}
.sc-axis{font:12px var(--mono);color:var(--slab-mute);margin-top:4px}
.sc-rows .row{grid-template-columns:minmax(0,1.6fr) 90px minmax(120px,1.6fr)}
.sc-hash{font:15px/1.9 var(--mono);color:var(--slab-mute);word-break:break-all}
.sc-hash b{font-weight:400;color:var(--slab-ink)}
.sc-hash .ok{color:#8aa6ff}

/* the line */
.line-sec{padding-top:96px}
.sec-h{font:800 clamp(44px,3.6vw,72px)/.92 var(--disp);letter-spacing:-.01em;max-width:18ch}
.sec-p{margin-top:16px;max-width:52ch;color:var(--ink2)}
.cols{list-style:none;display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:18px;margin-top:48px;align-items:end;min-height:520px;background:var(--slab);padding:48px 40px 34px;color:var(--slab-ink)}
.col{display:flex;flex-direction:column;justify-content:flex-end;height:100%}
.col-bar{position:relative;height:calc(var(--h)*340px);background:var(--slab-hair);transform-origin:bottom;animation:grow .9s calc(var(--i)*60ms) cubic-bezier(.2,.8,.2,1) both}
.col-bar i{position:absolute;left:0;right:0;bottom:0;height:calc(var(--f)*100%);background:var(--accent)}
.col-filling .col-bar{outline:1px solid var(--accent)}
@keyframes grow{from{transform:scaleY(.04)}to{transform:none}}
.col-name{margin-top:16px;font:700 21px/1 var(--disp)}
.col-meta{margin-top:8px;font:12px/1.45 var(--mono);color:var(--slab-mute)}
.col-state{margin-top:8px;font:12px var(--mono)}
.col-saved .col-state,.col-filling .col-state{color:#8aa6ff}

/* saved */
.saved-sec{padding-top:96px}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px}
.sec-big{font:800 clamp(36px,3vw,58px)/.95 var(--disp);text-align:right;font-variant-numeric:tabular-nums}
.saved{list-style:none;margin-top:40px;background:var(--slab);color:var(--slab-ink);padding:10px 40px 30px}
.ledger-head,.saved-row{display:grid;grid-template-columns:1.2fr .5fr .6fr 2fr .6fr;gap:24px}
.ledger-head{padding:14px 0;border-bottom:1px solid var(--slab-hair);font:12px var(--mono);color:var(--slab-mute)}
.ledger-empty{padding:40px 0 30px;font:700 clamp(26px,2vw,36px)/1.1 var(--disp);max-width:30ch}
.saved .mono,.saved-files span{color:var(--slab-mute)}
.empty{padding:44px 0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:40px;align-items:baseline}
.empty-big{font:700 clamp(36px,3vw,56px)/1 var(--disp)}
.empty p:last-child{color:var(--ink2);max-width:46ch}
.saved-row{padding:22px 0;border-bottom:1px solid var(--slab-hair);align-items:start}
.saved-row h3{font:700 28px/1 var(--disp)}
.saved-files{list-style:none;font:12px/1.7 var(--mono)}
.saved-files li{display:flex;justify-content:space-between;gap:12px}
.saved-files span{color:var(--mute)}

/* check */
.check-sec{padding-top:96px;padding-bottom:96px;display:grid;grid-template-columns:minmax(300px,520px) minmax(0,1fr);gap:56px}
.check{background:var(--slab);color:var(--slab-ink);padding:34px 40px}
.check label{display:block;font:12px var(--mono);color:var(--slab-mute);margin-bottom:8px}
.check select{width:100%;background:transparent;color:var(--slab-ink);border:1px solid var(--slab-hair);padding:12px;font:14px var(--mono);border-radius:0;margin-bottom:20px}
.check select option{background:var(--slab)}
.check-btns{display:flex;flex-wrap:wrap;gap:12px}
.btn{min-height:44px;border:1px solid var(--slab-ink);padding:13px 18px;font:700 20px/1 var(--disp);color:var(--slab-ink)}
.btn:hover{background:var(--slab-ink);color:var(--slab)}
.btn[disabled]{opacity:.35;cursor:not-allowed}
.check-out{margin-top:26px;font:13px/1.8 var(--mono);color:var(--slab-mute);min-height:140px;word-break:break-all}
.check-out b{color:var(--slab-ink);font-weight:400}
.check-out .ok{color:#8aa6ff}
.check-out .bad{color:#ff8a7a}
.check-out .bar{margin:10px 0}

.foot{margin-left:var(--rail);padding:28px 48px 40px 28px;border-top:1px solid var(--hair);display:flex;justify-content:space-between;gap:24px;font:13px/1.6 var(--mono);color:var(--mute)}
.foot a{color:var(--ink)}

@media (max-width:1180px){.row{grid-template-columns:minmax(0,1.6fr) 80px minmax(90px,1fr)}.row-hash{display:none}.after li{grid-template-columns:minmax(0,1.6fr) 80px 80px minmax(90px,1fr)}.cols{grid-template-columns:repeat(5,minmax(0,1fr));row-gap:40px}}
@media (max-width:900px){
  :root{--rail:0px}
  .rail{position:sticky;top:0;width:auto;flex-direction:row;align-items:center;padding:10px 16px;border-bottom:1px solid var(--hair);gap:14px}
  html{scroll-padding-top:72px}
  .rail::before,.rail-read,.rail-wallet,.theme{display:none}
  .ca-pill{margin:0;max-width:120px}
  .brand img{left:0;width:32px;height:32px}.brand span{margin-left:-4px;font-size:28px}
  .nav{margin:0 0 0 auto;display:flex;gap:14px}
  .nav a{padding:0 6px;font-size:20px;min-height:44px;display:flex;align-items:center}.nav a::before{display:none}
  .rail-social a{width:44px;height:44px}
  .saved-files a{display:inline-block;padding:6px 0}
  .nav li:nth-child(1),.nav li:nth-child(3){display:none}
  .rail-social{margin:0}
  main{padding:0 16px}
  .hero,.stage,.check-sec{grid-template-columns:1fr;gap:28px}
  .hero{min-height:0;padding-top:24px}
  h1{font-size:50px}
  .readings{margin-top:28px;padding-top:0}
  .win{min-height:0}.win-body{padding:24px 18px}
  .win-model{font-size:64px}
  .row{grid-template-columns:minmax(0,1fr) 64px;gap:12px}.row .bar{grid-column:1/-1}
  .after li{grid-template-columns:minmax(0,1fr) 64px 64px;gap:12px}.after li .bar{grid-column:1/-1}
  .win-foot{flex-direction:column;align-items:flex-start}.win-side{text-align:left}
  .big-pct,.sc-num,.row-size,.col-meta,.readings b,.rail-v,.count,.rail-k{font-variant-numeric:tabular-nums}
.big-pct{font-size:96px}
  .story{height:auto;margin-top:64px}.stage{position:static;height:auto;padding:0}
  .steps li{opacity:1}
  .scene .win-body{gap:24px}.sc-num{font-size:80px}
  .cols{grid-template-columns:repeat(3,minmax(0,1fr));padding:28px 16px;gap:14px;row-gap:36px;min-height:0}
  .col-bar{height:calc(var(--h)*170px)}
  .col-name{font-size:18px}
  .saved-row{grid-template-columns:1fr;gap:12px}.ledger-head{display:none}.saved{padding:6px 18px 22px}
  .sec-head{flex-direction:column;align-items:flex-start;gap:16px}.sec-big{text-align:left}
  .check{padding:24px 18px}
  .count{padding-top:64px}
  .line-sec,.saved-sec,.check-sec{padding-top:64px}
  .foot{margin-left:0;padding:24px 16px 36px;flex-direction:column}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}html{scroll-behavior:auto}}