/* FakeCap: paper white and black ink. Hollow means shown, solid means real: the outlined dollar mark, the glass cube
   with the black cube inside it, the verdict chips (Fake cap hollow, Backed solid). Archivo at narrow widths for
   statements, Martian Mono for every measured figure. No hue carries meaning. */
:root {
  --paper: #f5f6f4;
  --paper-2: #eceeec;
  --card: #ffffff;
  --ink: #0d0f10;
  --ink-2: #474f53;
  --ink-3: #5c6468;
  --rule: #dcdfdc;
  --rule-2: #c4c9c6;
  --sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono: "Martian Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --pad: clamp(16px, 4vw, 56px);
  --max: 1360px;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { background: var(--paper); scrollbar-color: var(--rule-2) var(--paper); scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 17px/1.55 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
::selection { background: var(--ink); color: var(--paper); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
a { color: var(--ink); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
input { caret-color: var(--ink); }
h1, h2 { text-wrap: balance; }
p { text-wrap: pretty; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; font-variation-settings: "wdth" 87.5; letter-spacing: -0.01em; }
[hidden] { display: none !important; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---- buttons ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border: 1.5px solid var(--ink); border-radius: 2px; background: var(--ink); color: var(--paper); font: 650 15px/1 var(--sans); font-variation-settings: "wdth" 92; text-decoration: none; cursor: pointer; transition: background-color 160ms ease-out, color 160ms ease-out; }
.btn:hover { background: #30363a; border-color: #30363a; text-decoration: none; }
.btn.ghost { background: transparent; color: var(--ink); }
.btn.ghost:hover { background: var(--ink); color: var(--paper); }
button.link { padding: 0; border: 0; background: none; font: inherit; cursor: pointer; }
.link { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* ---- $FAKECAP bar (when the CA is set) ---- */
.tokenbar { padding: 0 12px; background: var(--ink); color: var(--paper); font-size: 14px; }
.tokenbar .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; min-height: 40px; padding-top: 6px; padding-bottom: 6px; }
.tokenbar code { font: 400 12.5px var(--mono); font-variation-settings: "wdth" 80; opacity: 0.85; word-break: break-all; }
.tokenbar .link { color: var(--paper); }

/* ---- header ---- */
.top { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 72px; }
.mark { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font: 760 21px/1 var(--sans); font-variation-settings: "wdth" 86; letter-spacing: -0.01em; }
.mark svg { width: 34px; height: 34px; }
.top nav { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 30px); }
.top nav a { color: var(--ink-2); text-decoration: none; font-size: 15px; }
.top nav a:hover { color: var(--ink); }
.top nav .navbuy { padding: 9px 14px; border: 1.5px solid var(--ink); border-radius: 2px; color: var(--ink); font-weight: 650; }
.top nav .navbuy:hover { background: var(--ink); color: var(--paper); }

/* ---- hero: statement and scan on the left, the model on the right ---- */
.hero { display: grid; grid-template-columns: minmax(300px, 0.82fr) 1.6fr; gap: clamp(28px, 4vw, 64px); align-items: start; padding-top: clamp(12px, 2vw, 28px); padding-bottom: clamp(48px, 6vw, 88px); }
.lead { padding-top: clamp(8px, 3vw, 48px); }
h1 { margin: 0; font: 800 clamp(42px, 5vw, 80px)/1 var(--sans); font-variation-settings: "wdth" 72; letter-spacing: -0.03em; }
.sub { margin: 24px 0 0; max-width: 34ch; font-size: 18px; line-height: 1.5; color: var(--ink-2); }
.scan { margin-top: 36px; }
.scan label { display: block; margin-bottom: 10px; font-size: 14px; color: var(--ink-2); }
.field { display: flex; border: 1.5px solid var(--ink); border-radius: 2px; background: var(--card); }
.field:focus-within { box-shadow: 0 0 0 3px rgb(13 15 16 / 0.12); }
.field input { flex: 1; min-width: 0; height: 56px; padding: 0 16px; border: 0; background: transparent; color: var(--ink); font: 400 14px/1 var(--mono); font-variation-settings: "wdth" 87.5; outline: none; }
.field input::placeholder { color: var(--ink-3); }
.field button { margin: 6px; padding: 0 20px; border: 0; border-radius: 1px; background: var(--ink); color: var(--paper); font: 700 15px/1 var(--sans); font-variation-settings: "wdth" 90; cursor: pointer; }
.field button:hover { background: #30363a; }
.field button:disabled { background: var(--ink-3); cursor: progress; }
.msg { min-height: 1.5em; margin: 12px 0 0; font-size: 14px; color: var(--ink-2); }
.msg.err { color: var(--ink); font-weight: 600; }
.proof { margin: 18px 0 0; max-width: 40ch; font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.proof2 { display: none; }

.model { margin: 0; }
.stage { position: relative; aspect-ratio: 16 / 10; background: radial-gradient(ellipse 58% 60% at 50% 56%, #ffffff 0%, rgb(255 255 255 / 0.6) 45%, var(--paper) 78%); overflow: hidden; }
.stage canvas, .stage .flat, .stage .leaders { position: absolute; inset: 0; width: 100%; height: 100%; }
.stage .flat { display: none; place-items: center; padding: 8%; }
.stage .flat svg { width: 100%; height: 100%; }
.stage.noGL canvas { display: none; }
.stage.noGL .flat { display: grid; }
.leaders polyline { fill: none; stroke: var(--ink); stroke-width: 1.2; }
.leaders circle { fill: var(--ink); }
.tag { position: absolute; z-index: 2; display: grid; gap: 3px; white-space: nowrap; }
.tag span { font: 400 11.5px/1.2 var(--mono); font-variation-settings: "wdth" 80; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); }
.tag b { font: 500 clamp(18px, 2vw, 26px)/1.1 var(--mono); font-variation-settings: "wdth" 87.5; letter-spacing: -0.01em; }
.t-cap { left: 4%; top: 7%; }
.t-pool { right: 4%; top: 62%; text-align: right; }
.stage.noGL .tag { display: none; }
.model[data-state="measuring"] .tag b { opacity: 0.35; }

/* the readout under the model */
.readout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 8px 40px; margin-top: 18px; padding-top: 16px; border-top: 2px solid var(--ink); }
.readout .coin { grid-column: 1; display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.readout .coin b { font: 800 22px/1.1 var(--sans); font-variation-settings: "wdth" 84; white-space: nowrap; }
.readout .coin span { font-size: 14px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.readout .factor { grid-column: 1; display: flex; align-items: center; gap: 14px; }
.readout .x { font: 500 clamp(44px, 4.4vw, 64px)/1 var(--mono); font-variation-settings: "wdth" 87.5; letter-spacing: -0.03em; }
.readout .line { grid-column: 1; margin: 2px 0 0; font-size: 15.5px; color: var(--ink-2); }
.readout .findings { grid-column: 2; grid-row: 1 / span 4; margin: 0; align-self: start; }
.readout .share { grid-column: 1; display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 0; }
.findings div { display: grid; grid-template-columns: 7.2em minmax(0, 1fr); align-items: baseline; gap: 2px 12px; padding: 8px 0; border-bottom: 1px solid var(--rule); }
.findings dt { font-size: 14.5px; color: var(--ink-2); }
.findings dd { margin: 0; }
.findings .v { font: 500 18px/1.2 var(--mono); font-variation-settings: "wdth" 87.5; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.findings .src { grid-column: 2; font: 400 11.5px/1.3 var(--mono); font-variation-settings: "wdth" 80; color: var(--ink-3); }
.findings .src a { color: var(--ink-3); }
.findings .src a:hover { color: var(--ink); }
.findings .src.weak a { text-decoration-style: dotted; }
.model[data-state="measuring"] .readout .x, .model[data-state="measuring"] .findings .v { opacity: 0.35; }
.model[data-state="measured"] .verdict, .model[data-state="measuring"] .verdict { opacity: 0.3; }

/* ---- verdicts: hollow is shown, solid is real ---- */
.verdict { display: inline-flex; align-items: center; height: 28px; padding: 0 11px; border: 1.5px solid var(--ink); border-radius: 2px; font: 750 14px/1 var(--sans); font-variation-settings: "wdth" 84; letter-spacing: 0.01em; white-space: nowrap; transition: opacity 300ms ease-out; }
.v-backed { background: var(--ink); color: var(--paper); }
.v-thin { background: #59625f; border-color: #59625f; color: var(--paper); }
.v-inflated { background: #d3d7d5; border-color: #d3d7d5; color: var(--ink); }
.v-fake { background: transparent; color: var(--ink); }
.v-empty, .v-unknown { background: transparent; border-style: dashed; border-color: var(--ink-3); color: var(--ink-2); }
.readout .verdict { height: 34px; font-size: 16px; padding: 0 14px; }

/* ---- earlier readings ---- */
.earlier { padding-bottom: clamp(40px, 6vw, 80px); }
.earlier h2, .worklist h2, .method h2, .token h2 { margin: 0; font: 800 clamp(26px, 2.7vw, 40px)/1.04 var(--sans); font-variation-settings: "wdth" 76; letter-spacing: -0.02em; }
.note { margin: 10px 0 0; max-width: 62ch; color: var(--ink-2); font-size: 15.5px; }
.strip { display: flex; gap: 16px; margin: 22px 0 0; padding: 0 0 8px; list-style: none; overflow-x: auto; scrollbar-width: thin; }
.strip li { flex: 0 0 auto; display: grid; align-content: start; gap: 6px; width: 112px; }
.strip svg { width: 112px; height: 112px; background: var(--card); border: 1px solid var(--rule); }
.strip .t { font: 400 11px/1.35 var(--mono); font-variation-settings: "wdth" 80; color: var(--ink-3); }
.strip .x { font: 500 14px/1 var(--mono); font-variation-settings: "wdth" 87.5; }

/* ---- the board ---- */
.worklist, .method, .token, .foot { position: relative; }
.worklist::before, .method::before, .token::before, .foot::before { content: ""; position: absolute; top: 0; left: var(--pad); right: var(--pad); height: 1px; background: var(--rule-2); }
.worklist { padding-top: clamp(40px, 5vw, 72px); padding-bottom: clamp(56px, 7vw, 104px); }
.wl-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 14px 32px; }
.next { display: flex; align-items: center; gap: 12px; margin: 0; font: 400 12px/1.3 var(--mono); font-variation-settings: "wdth" 80; color: var(--ink-3); }
.next .bar { position: relative; flex: none; width: 120px; height: 2px; background: var(--rule); }
.next .bar i { position: absolute; inset: 0 auto 0 0; width: calc(var(--p, 0) * 100%); background: var(--ink); }
.bands { display: flex; flex-wrap: wrap; gap: 6px; margin: 28px 0 18px; }
.bands button { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border: 1.5px solid var(--rule-2); border-radius: 2px; background: transparent; color: var(--ink-2); font: 600 14px/1 var(--sans); cursor: pointer; transition: color 160ms ease-out, border-color 160ms ease-out; }
.bands button .num { font-size: 12px; }
.bands button:hover { color: var(--ink); border-color: var(--ink); }
.bands button[aria-pressed="true"] { color: var(--paper); background: var(--ink); border-color: var(--ink); }
.rows-head, .rows a { display: grid; grid-template-columns: 48px minmax(0, 1fr) 118px 118px 92px 112px; align-items: center; gap: 18px; }
.rows-head { padding: 0 14px 10px; border-bottom: 1.5px solid var(--ink); font-size: 13px; color: var(--ink-3); }
.rows-head span:nth-child(n+2) { text-align: right; }
.rows-head span:first-child { grid-column: 1 / 3; }
.rows-head span:nth-child(2) { grid-column: 3; }
.rows { margin: 0; padding: 0; list-style: none; }
.rows li { border-bottom: 1px solid var(--rule); transition: opacity 200ms ease-out; }
.rows:hover li:not(:hover) { opacity: 0.5; }
.rows a { min-height: 66px; padding: 9px 14px; color: var(--ink); text-decoration: none; }
.rows a:hover, .rows li.on a { background: var(--card); }
.rows svg { width: 48px; height: 48px; }
.rows .coin { display: grid; gap: 3px; min-width: 0; }
.rows .sym { font: 700 16px/1.15 var(--sans); font-variation-settings: "wdth" 90; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rows .name { display: flex; gap: 6px; min-width: 0; font-size: 13.5px; color: var(--ink-2); white-space: nowrap; }
.rows .name .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.rows .name .mint { flex: none; font: 400 12px/1.6 var(--mono); font-variation-settings: "wdth" 80; color: var(--ink-3); }
.rows .name .mint::before { content: "· "; }
.rows .num { text-align: right; font-size: 14.5px; }
.rows .shown { color: var(--ink-2); }
.rows .x { font-weight: 600; }
.rows .v { justify-self: end; }
.rows .both { display: none; }
.rows .skel { height: 66px; border-bottom: 1px solid var(--rule); background: linear-gradient(90deg, transparent, rgb(13 15 16 / 0.04), transparent) 0 0 / 200% 100%; animation: skel 1.6s linear infinite; }
@keyframes skel { to { background-position: -200% 0; } }
.empty-row { padding: 28px 14px; color: var(--ink-2); }

/* ---- method ---- */
.method { padding-top: clamp(48px, 6vw, 88px); padding-bottom: clamp(56px, 7vw, 104px); }
.m-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); margin-top: 30px; }
.steps { margin: 0; padding: 0; list-style: none; counter-reset: s; }
.steps li { position: relative; max-width: 62ch; margin: 0 0 20px; padding-left: 44px; color: var(--ink-2); counter-increment: s; }
.steps li::before { content: counter(s); position: absolute; left: 0; top: 2px; width: 26px; height: 26px; display: grid; place-items: center; border: 1.5px solid var(--ink); border-radius: 50%; font: 600 12px/1 var(--mono); color: var(--ink); }
.steps b { color: var(--ink); font-weight: 700; }
.scale { width: 100%; border-collapse: collapse; }
.scale caption { text-align: left; padding-bottom: 12px; font-size: 14px; color: var(--ink-3); }
.scale th, .scale td { padding: 14px 12px 14px 0; border-top: 1px solid var(--rule); text-align: left; vertical-align: top; }
.scale th { width: 118px; font-weight: 400; }
.scale td:nth-child(2) { width: 120px; font: 500 14px/28px var(--mono); font-variation-settings: "wdth" 87.5; white-space: nowrap; }
.scale td:last-child { font-size: 15px; line-height: 28px; color: var(--ink-2); text-wrap: pretty; }
.faq { margin: 34px 0 0; }
.faq dt { margin-top: 18px; font-weight: 700; }
.faq dd { margin: 4px 0 0; max-width: 62ch; color: var(--ink-2); font-size: 15.5px; }
.fine { margin: 20px 0 0; max-width: 62ch; font-size: 14px; color: var(--ink-2); }

/* ---- $FAKECAP ---- */
.token { padding-top: clamp(48px, 6vw, 88px); padding-bottom: clamp(56px, 7vw, 96px); }
.token h2 { font-size: clamp(44px, 6vw, 88px); font-variation-settings: "wdth" 70; }
.token > p { margin: 14px 0 0; color: var(--ink-2); }
.ca { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 22px; }
.ca code { display: block; padding: 12px 14px; border: 1.5px solid var(--ink); background: var(--card); font: 400 13.5px/1.4 var(--mono); font-variation-settings: "wdth" 80; word-break: break-all; }

.foot { display: flex; justify-content: space-between; gap: 16px; padding-top: 24px; padding-bottom: 40px; font-size: 14px; color: var(--ink-3); }
.foot a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink-2); }

/* ---- narrow windows and phones ---- */
@media (max-width: 940px) {
  .hero { grid-template-columns: 1fr; }
  .lead { padding-top: 0; }
  .sub { max-width: 46ch; }
  .m-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  body { font-size: 16px; }
  .top { height: 60px; }
  .top nav a[href="#method"] { display: none; }
  h1 { font-size: clamp(40px, 11.5vw, 54px); }
  .sub { margin-top: 16px; font-size: 16.5px; }
  .scan { margin-top: 24px; }
  .field input { height: 52px; padding: 0 12px; font-size: 13px; }
  .field button { padding: 0 16px; }
  .stage { aspect-ratio: 1 / 1; }
  .tag span { font-size: 11px; }
  .readout { grid-template-columns: 1fr; }
  .readout .findings { grid-column: 1; grid-row: auto; }
  .readout .share { grid-column: 1; }
  .lead .proof { display: none; }
  .proof2 { display: block; grid-column: 1; margin-top: 14px; }
  .findings div { grid-template-columns: 6.8em minmax(0, 1fr); }
  .rows-head { display: none; }
  .bands { flex-wrap: nowrap; overflow-x: auto; margin-left: calc(-1 * var(--pad)); margin-right: calc(-1 * var(--pad)); padding: 0 var(--pad) 4px; scrollbar-width: none; }
  .bands::-webkit-scrollbar { display: none; }
  .bands button { flex: none; }
  .rows a { grid-template-columns: 48px minmax(0, 1fr) auto; grid-template-areas: "t c x" "t c v" "b b b"; gap: 4px 12px; padding: 12px 4px; }
  .rows svg { grid-area: t; align-self: center; }
  .rows .coin { grid-area: c; }
  .rows .shown, .rows .pool { display: none; }
  .rows .both { display: block; grid-area: b; margin-top: 4px; font: 400 12.5px/1.3 var(--mono); font-variation-settings: "wdth" 80; color: var(--ink-2); white-space: nowrap; }
  .rows .x { grid-area: x; font-size: 15px; }
  .rows .v { grid-area: v; }
  .rows .verdict { height: 24px; padding: 0 8px; font-size: 12px; }
  .rows:hover li:not(:hover) { opacity: 1; }
  .scale th { width: 104px; }
  .scale td:nth-child(2) { width: auto; }
  .scale tr { display: grid; grid-template-columns: 104px 1fr; }
  .scale td:last-child { grid-column: 1 / -1; padding-top: 0; border-top: 0; }
  .foot { flex-direction: column; }
}
/* the smallest phones (320 px): the header's two links fit next to the mark */
@media (max-width: 360px) {
  .top nav { gap: 10px; }
  .top nav .navbuy { padding: 8px 10px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rows .skel { animation: none; }
}