@font-face { font-family:"Hanken Grotesk"; font-weight:100 900; font-style:normal; font-display:swap;
             src:url("/blog/assets/fonts/HankenGrotesk-Variable.ttf") format("truetype"); }
@font-face { font-family:"IBM Plex Mono"; font-weight:500; font-display:swap; src:url("/blog/assets/fonts/IBMPlexMono-Medium.woff2") format("woff2"); }
@font-face { font-family:"IBM Plex Mono"; font-weight:600; font-display:swap; src:url("/blog/assets/fonts/IBMPlexMono-SemiBold.woff2") format("woff2"); }
@font-face { font-family:"IBM Plex Mono"; font-weight:700; font-display:swap; src:url("/blog/assets/fonts/IBMPlexMono-Bold.woff2") format("woff2"); }
:root { --sans:"Hanken Grotesk","Helvetica Neue",Arial,sans-serif; --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --t-12:12px; --t-14:14px; --t-16:16px; --t-21:21px; --t-28:28px; --t-37:37px; --t-50:50px;
  --u:8px; --r:5px;
  --ground:#000; --ink:#F5F0E6; --mid:#b5b0a3; --floor:#8f8a7d; --border:#262626; --rule:#3a3548; --green:#49de78; --warn:#FFD60A; }
* { box-sizing:border-box; margin:0; padding:0; }
html, body { background:var(--ground); }
body { color:var(--ink); font:400 var(--t-16)/1.5 var(--sans); -webkit-font-smoothing:antialiased; min-width:0; overflow-x:hidden; }
a { color:var(--mid); }
.mono { font-family:var(--mono); font-feature-settings:"tnum" 1; }
.label { font:500 var(--t-12)/1.5 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--mid); }
header.top{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid #222a32;position:sticky;top:0;background:#06090d;z-index:5}
header.top .nm{font:700 12px var(--mono);letter-spacing:.1em;color:#dad7d0;text-decoration:none}
header.top nav{display:flex;gap:14px;margin-left:auto;font:600 12px var(--mono);letter-spacing:.06em;white-space:nowrap}
header.top nav a{color:#7e8791;text-decoration:none}header.top nav a.on{color:#dad7d0}
.sharebtn{font:700 12px var(--mono);letter-spacing:.06em;color:#06090d;background:#49de78;border:0;border-radius:5px;padding:7px 11px;white-space:nowrap;cursor:pointer}
@media (max-width:440px){header.top .nm,header.top .hide-s{display:none}header.top nav{gap:10px;font-size:12px}}
main { padding:0 24px; max-width:1280px; margin:0 auto; }
h1 { font:700 var(--t-37)/1.04 var(--sans); letter-spacing:-0.03em; max-width:15ch; margin-top:32px; }
.lede { color:var(--mid); margin-top:12px; }
input[type=email], input[type=text], input[inputmode=numeric] { display:block; width:100%; background:#000; color:var(--ink);
  border:1px solid var(--rule); border-radius:var(--r); padding:16px; font:400 var(--t-16)/1.25 var(--sans); margin-top:16px; }
input::placeholder { color:var(--floor); }
.check { display:flex; gap:12px; align-items:flex-start; margin-top:12px; font-size:var(--t-14); color:var(--mid); }
.check input { margin-top:3px; width:18px; height:18px; accent-color:var(--green); flex:none; }
button.primary, a.btn { display:block; width:100%; background:var(--green); color:#000; border:0; border-radius:var(--r);
  padding:16px; font:700 var(--t-16)/1.25 var(--sans); margin-top:12px; text-align:center; text-decoration:none; cursor:pointer; }
button.ghost { background:transparent; color:var(--mid); border:1px solid var(--rule); border-radius:var(--r); padding:12px 16px;
  font:500 var(--t-14)/1 var(--mono); cursor:pointer; }
button:disabled { opacity:.5; cursor:default; }
.msg { font-size:var(--t-14); color:var(--mid); margin-top:12px; min-height:21px; }
.msg.err { color:var(--warn); }
.fine { font-size:var(--t-12); line-height:1.5; color:var(--floor); margin-top:12px; }
.fine a { color:var(--mid); }
footer.legal { border-top:1px solid var(--border); margin:40px auto 0; padding:16px 24px 32px; max-width:1280px;
  font-size:var(--t-12); line-height:1.6; color:var(--floor); }
footer.legal nav { display:flex; flex-wrap:wrap; gap:16px; margin-bottom:8px; }
footer.legal a { color:var(--mid); }
[hidden] { display:none !important; }
.one { white-space:nowrap; }
#step-email .lede { font-size:var(--t-16); margin-top:12px; }
.viz { margin-top:24px; }
.viz .chart { margin-top:0; }
#join input[type=email] { margin-top:24px; }
#join .check { margin-top:8px; font-size:var(--t-12); line-height:1.5; }
#join .check input { margin-top:1px; width:16px; height:16px; }
#ts { margin-top:8px; }
#join button.primary { margin-top:8px; }
#join .msg { margin-top:8px; min-height:0; }
p.legal { font-size:var(--t-12); line-height:1.5; color:var(--floor); margin-top:12px; white-space:nowrap; }
p.legal a { color:var(--mid); }

.lab { margin-top:24px; }
.coderow { display:flex; align-items:flex-end; gap:20px; margin-top:4px; }
.code { font:500 var(--t-50)/1 var(--mono); letter-spacing:-0.01em; font-feature-settings:"tnum" 1; color:var(--ink); white-space:nowrap; }
.move { padding-bottom:4px; }
.move b { display:block; font:500 var(--t-14)/1.3 var(--mono); color:var(--green); white-space:nowrap; }
.move span { display:block; font-size:var(--t-12); line-height:1.4; color:var(--mid); white-space:nowrap; }
.status { margin-top:10px; font-size:var(--t-16); line-height:1.5; color:var(--mid); white-space:nowrap; }
.status b { font:500 var(--t-16)/1 var(--mono); color:var(--ink); }
.chart { display:block; margin-top:16px; }
.badges { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:16px; padding-top:16px; border-top:1px solid var(--rule); }
.bd svg { display:block; }
.bd p { font:500 var(--t-12)/1.33 var(--mono); color:var(--floor); margin-top:8px; }
.bd.earned p { color:var(--green); }
.lp { margin-top:16px; padding-top:16px; border-top:1px solid var(--border); }
.lp .row { display:flex; justify-content:space-between; align-items:baseline; }
.lp .row b { font:700 var(--t-16)/1.25 var(--sans); }
.lp .row span { font:500 var(--t-14)/1 var(--mono); color:var(--mid); }
.seg { display:grid; grid-template-columns:repeat(8,1fr); gap:4px; margin-top:8px; }
.seg i { display:block; height:8px; background:var(--border); }
.seg i.on { background:var(--ink); }
.limits { margin-top:12px; padding-top:12px; border-top:1px solid var(--border); }
.limits p { font-size:var(--t-12); line-height:1.5; color:var(--mid); white-space:nowrap; }
.limits p + p { margin-top:2px; }
.limits b { font:500 var(--t-12)/1.5 var(--mono); color:var(--ink); letter-spacing:.02em; }
.limits a { color:var(--ink); text-decoration:none; border-bottom:1px solid var(--rule); }
.h-rest button.primary { margin-top:8px; }
.h-rest .fine { margin-top:8px; white-space:nowrap; }
.card-page main.share-card { max-width:1248px; margin:0 auto; padding:0 24px 24px; }
.share-card svg.thumb { display:block; width:100%; height:auto; }
.share-card a.btn { width:auto; display:inline-block; padding:16px 24px; }

@media (min-width:960px) {
  main { padding:0 64px; }
  .hubgrid { display:grid; grid-template-columns:400px 1fr; grid-template-rows:auto 1fr; grid-template-areas:"info chart" "rest chart"; column-gap:80px; align-items:start; }
  .h-info { grid-area:info; } .h-chart { grid-area:chart; } .h-rest { grid-area:rest; }
  .lab { margin-top:48px; } .h-chart .chart { margin-top:48px; }
}
@media (prefers-reduced-motion:no-preference) {
  .bd p, .seg i { transition:background-color 320ms ease-out, border-color 320ms ease-out, color 320ms ease-out; }
}