*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
:root{--paper:#efe7d6;--paper2:#e6dcc6;--rule:rgba(46,92,70,.13);--ink:#16261d;--mut:#5f6a5f;--green:#1f4d36;--deep:#10241a;--red:#b01c20;--amber:#b7791f;--sage:#7f9a86;--gold:#a8862c;--margin:#d8a3a0}
html{background:var(--deep)}
body{font-family:'Archivo',system-ui,sans-serif;color:var(--ink);background:var(--deep)}
button{font:inherit;background:none;border:0;cursor:pointer;color:inherit}
em{font-style:normal;color:var(--mut);font-stretch:100%;font-weight:500}
code,.mono{font-family:'IBM Plex Mono',monospace}

.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:18px;padding:14px clamp(16px,3vw,40px);background:var(--deep);color:#e9e2d0;border-bottom:1px solid #24402f}
.mark{display:flex;align-items:center;gap:10px;color:#f1ead8;text-decoration:none}
.mark img{width:48px;transform:rotate(-6deg);filter:drop-shadow(0 0 0 #fff)}
.mark b{white-space:nowrap;font-weight:900;font-stretch:125%;letter-spacing:.02em;font-size:16px}
.sub{font:500 12px 'IBM Plex Mono',monospace;color:#8fae98}
.live{display:flex;align-items:center;gap:8px;font:500 12px 'IBM Plex Mono',monospace;color:#8fae98}
.live i{width:7px;height:7px;border-radius:50%;background:#555}
.live.on i{background:#6fd08f;animation:ping 2s infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(111,208,143,.6)}70%{box-shadow:0 0 0 8px rgba(111,208,143,0)}100%{box-shadow:0 0 0 0 rgba(111,208,143,0)}}
.sp{flex:1}
.ca{display:flex;gap:8px;align-items:center;border:1px solid #2f5140;border-radius:4px;padding:7px 12px;font-size:12px;color:#b9c9bc}
.ca span{font-weight:800;color:#f1ead8}
.ca code{font-size:12px}
.x{width:34px;height:34px;display:grid;place-items:center;border:1px solid #2f5140;border-radius:4px;color:#f1ead8;text-decoration:none}

/* the ledger sheet */
.sheet{max-width:1320px;margin:22px auto 60px;background:
  linear-gradient(90deg,transparent 78px,var(--margin) 78px,var(--margin) 80px,transparent 80px),
  repeating-linear-gradient(180deg,transparent 0 31px,var(--rule) 31px 32px),var(--paper);
  border-radius:3px;box-shadow:0 30px 80px rgba(0,0,0,.45);padding:26px clamp(18px,3vw,48px) 30px 110px;position:relative}
section{position:relative;padding:34px 0 30px;border-bottom:1px solid rgba(22,38,29,.18)}
.ln{position:absolute;left:-86px;top:38px;width:60px;text-align:right;font:600 13px 'IBM Plex Mono',monospace;color:var(--red)}
.stmt{display:flex;gap:22px;font:500 12px 'IBM Plex Mono',monospace;color:var(--mut);border-bottom:2px solid var(--ink);padding-bottom:10px;text-transform:uppercase;letter-spacing:.06em}
.stmt #stmtOpen{margin-left:auto;color:var(--green)}
h1{font-weight:900;font-stretch:118%;font-size:clamp(38px,5.2vw,82px);line-height:.98;letter-spacing:-.025em;max-width:1100px}
h1 .big{color:var(--green);font-variant-numeric:tabular-nums;white-space:nowrap}
h1 em{font-size:.5em;vertical-align:.5em;font-stretch:100%}
.q{margin-top:16px;font-size:18px;color:var(--mut);max-width:640px;line-height:1.45}
h2{font-weight:800;font-stretch:112%;font-size:clamp(24px,2.4vw,34px);letter-spacing:-.015em;margin-bottom:6px}
.cap,.note{font:500 12.5px 'IBM Plex Mono',monospace;color:var(--mut)}
.note{margin-top:14px;max-width:900px;line-height:1.5}

/* flow */
.flowwrap{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:28px;align-items:center}
#sankey{width:100%;height:auto;display:block}
#sankey text{font:600 13px 'IBM Plex Mono',monospace;fill:var(--ink)}
#sankey .lbl{font:700 13px 'Archivo';font-stretch:110%}
.lines{list-style:none;font-family:'IBM Plex Mono',monospace}
.lines li{display:grid;grid-template-columns:52px 1fr auto 62px;gap:10px;align-items:baseline;padding:8px 0;border-bottom:1px dashed rgba(22,38,29,.25);font-size:14px}
.lines li .r{color:var(--mut);font-size:12px}
.lines li b{font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
.lines li s{text-decoration:none;color:var(--mut);text-align:right;font-size:12px}
.lines li i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:7px;vertical-align:1px}
.lines li.tot{border-bottom:2px solid var(--ink);border-top:2px solid var(--ink);font-weight:700}

/* cohorts */
.cols{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:18px}
.col{position:relative;border:1.5px solid var(--ink);border-radius:3px;padding:16px 18px 18px;background:rgba(255,255,255,.22);overflow:hidden}
.col h3{font-weight:800;font-stretch:115%;font-size:20px}
.col .who{font:500 12px 'IBM Plex Mono',monospace;color:var(--mut);margin-bottom:12px}
.col dl{display:grid;grid-template-columns:1fr auto;gap:6px 10px;font:500 14px 'IBM Plex Mono',monospace}
.col dt{color:var(--mut)}
.col dd{text-align:right;font-variant-numeric:tabular-nums}
.col .net{margin-top:14px;padding-top:10px;border-top:2px solid var(--ink);display:flex;justify-content:space-between;align-items:baseline}
.col .net span{font:600 12px 'IBM Plex Mono',monospace;text-transform:uppercase;letter-spacing:.06em}
.col .net b{font-weight:900;font-stretch:115%;font-size:34px;font-variant-numeric:tabular-nums}
.up{color:var(--green)}.dn{color:var(--red)}
.col .stamp{position:absolute;right:-8px;top:-10px;width:112px;pointer-events:none;transform:rotate(12deg);opacity:0;transition:opacity .4s,transform .4s cubic-bezier(.3,1.6,.5,1)}
.col.won .stamp{opacity:.85;transform:rotate(-9deg)}
.col h3,.col .who{position:relative;z-index:1;max-width:72%}

/* boards */
.boards{display:grid;grid-template-columns:1fr 1fr;gap:34px}
.boards .ln{top:38px}
.board ol{list-style:none;margin-top:10px;font-family:'IBM Plex Mono',monospace;counter-reset:n}
.board li{counter-increment:n;display:grid;grid-template-columns:28px 1fr auto auto;gap:10px;align-items:baseline;padding:7px 0;border-bottom:1px dashed rgba(22,38,29,.25);font-size:13.5px}
.board li::before{content:counter(n,decimal-leading-zero);color:var(--mut);font-size:12px}
.board li a{color:var(--ink);text-decoration:none}
.board li a:hover{text-decoration:underline}
.board li small{color:var(--mut);font-size:11.5px}
.board li b{font-weight:600;text-align:right;min-width:90px}

/* coins */
.tbl{margin-top:14px;font-family:'IBM Plex Mono',monospace;font-size:13.5px}
.tr{display:grid;grid-template-columns:1.6fr repeat(5,1fr);gap:10px;padding:8px 0;border-bottom:1px dashed rgba(22,38,29,.25);align-items:baseline}
.tr.th{font-size:11.5px;color:var(--mut);text-transform:uppercase;letter-spacing:.05em;border-bottom:2px solid var(--ink)}
.tr span:not(:first-child){text-align:right}
.tr a{color:var(--ink);font-weight:600;text-decoration:none}
.tr a small{color:var(--mut);font-weight:400}
.tag{font-size:10.5px;border:1px solid var(--gold);color:var(--gold);padding:1px 5px;border-radius:2px;margin-left:6px}

/* the book */
.book ol{list-style:none;margin-top:10px;font-family:'IBM Plex Mono',monospace;font-size:13.5px;max-height:420px;overflow:hidden}
.book li{display:grid;grid-template-columns:90px 54px 1fr 110px 90px;gap:10px;padding:5px 0;border-bottom:1px dashed rgba(22,38,29,.18);animation:write .6s ease}
@keyframes write{from{opacity:0;transform:translateX(-8px);background:rgba(176,28,32,.08)}}
.book li .b{color:var(--green);font-weight:600}.book li .s{color:var(--red);font-weight:600}
.book li span:nth-child(4){text-align:right}
.book li a{color:var(--ink);text-decoration:none}
.book li em{font-size:12px}

/* settles */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px;margin-top:16px}
.card{border:1.5px solid var(--ink);padding:14px 16px;position:relative;background:rgba(255,255,255,.2)}
.card h4{font:700 13px 'IBM Plex Mono',monospace;color:var(--red)}
.card .d{font:500 12px 'IBM Plex Mono',monospace;color:var(--mut);margin-bottom:8px}
.card dl{display:grid;grid-template-columns:1fr auto;gap:4px;font:500 12.5px 'IBM Plex Mono',monospace}
.card dd{text-align:right}
.card img{position:absolute;right:8px;top:8px;width:84px;transform:rotate(-10deg);opacity:.75}
.empty{font:500 13px 'IBM Plex Mono',monospace;color:var(--mut)}
footer{padding-top:24px;font:500 12px 'IBM Plex Mono',monospace;color:var(--mut)}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,30px);opacity:0;background:var(--deep);color:#f1ead8;padding:10px 16px;border-radius:4px;font:600 13px 'IBM Plex Mono',monospace;transition:.3s;z-index:50}
.toast.on{transform:translate(-50%,0);opacity:1}

@media (max-width:980px){
  .sheet{padding-left:22px;background:repeating-linear-gradient(180deg,transparent 0 31px,var(--rule) 31px 32px),var(--paper);margin:0;border-radius:0}
  .ln{position:static;text-align:left;margin-bottom:6px}
  .flowwrap,.boards,.cols{grid-template-columns:1fr}
  .sub{display:none}
  .tr{grid-template-columns:1.4fr 1fr 1fr;row-gap:2px}.tr span:nth-child(n+4){display:none}
  .book li{grid-template-columns:70px 44px 1fr 90px}.book li span:nth-child(5){display:none}
}
@media (max-width:560px){.top{gap:10px}.mark img{width:36px}.mark b{font-size:13px}.live span{display:none}.ca code{max-width:84px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}
