/* Hyperliquid bridge investigation, "Everyone left. The money stayed." — scoped under .hyperliquid-ledger. Ported from the design handoff (Everyone Left The Money Stayed - Bitquery.html + bitquery-brand.css). Deliberate departures from the prototype: 1. The prototype's own sticky nav, footer and #progress bar are dropped — the site's header/footer supply that chrome and the shared .inv-progress-track pattern drives the reading bar. 2. The light theme is not ported. The prototype toggled data-theme on , which would have recoloured the article while the site's nav and footer stayed dark. Dark-only, like every other investigation. 3. Every article-level class carries an `hl-` prefix. The prototype's names (.col .title .kicker .method .endcta .prod .num .ls .v .l …) collide with ~30 selectors in the always-loaded marketing stylesheets; prefixing is cheaper than auditing specificity on every one of them. Mapping is mechanical: prototype `.x` -> `.hl-x`. 4. Chart-internal classes (.gl .ax .b .bin .bout .ln .rowval .ci …) keep the prototype's names so the nine SVG blocks stay diffable against the handoff. They are scoped under `svg.hl-ch`, which out-specifies the only real collisions (.papi .lane .ln, .investigation_blog .facaxis .ax). Geometry, type scale and colour are the handoff's, unchanged. */ .hyperliquid-ledger { position: relative; isolation: isolate; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); width: 100vw; overflow-x: hidden; } .hyperliquid-ledger .inv-progress-track { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 120; background: transparent; pointer-events: none; } .hyperliquid-ledger .inv-progress-fill { height: 100%; width: 0%; background: linear-gradient(96deg,#f93f9c 0%,#af3e76 46%,#00d8dd 100%); transition: width .12s linear; } /* ---- tokens (bitquery-brand.css + the article's semantic layer) ---- */ .hyperliquid-ledger{ --bq-white:#ffffff; --bq-grey:#aab0bc; --bq-dark-grey:#7e8696; --bq-pink:#f93f9c; --bq-pink-soft:#f788c0; --bq-magenta:#af3e76; --bq-cta:#93254b; --bq-cta-hover:#af3e76; --bq-cta-border:#621832; --bq-gradient:linear-gradient(96deg,#f93f9c 0%,#af3e76 46%,#00d8dd 100%); --bq-radius-card:14px; --bq-radius-btn:4px; --bq-font:'DM Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; --bq-mono:'JetBrains Mono',ui-monospace,monospace; /* article-local: money in / money out is the whole colour system here */ --in:#00d8dd; --in-soft:#51becc; --out:#f93f9c; --out-soft:#f788c0; --neutral:#39414e; --col:760px; --break:1160px; --pg:#06090d; --card:#0c121c; --line:rgba(255,255,255,.10); --line2:rgba(255,255,255,.06); --grid:rgba(255,255,255,.07); --hair:rgba(255,255,255,.16); --figbg:rgba(255,255,255,.025); --txt:#ffffff; --body:#ced3dd; --txt2:#aab0bc; --muted:#7e8696; } .hyperliquid-ledger *{box-sizing:border-box} .hyperliquid-ledger{ background:var(--pg);color:var(--txt); font-family:var(--bq-font);font-weight:400;line-height:1.5; -webkit-font-smoothing:antialiased; } .hyperliquid-ledger a{color:var(--out-soft);text-decoration:none} .hyperliquid-ledger a:hover{color:var(--out)} /* Contextual links in running prose and the method box. They keep the body colour and carry a pink-soft rule instead of going pink outright: a dozen saturated phrases in the text would compete with the charts, where accent means money leaving and nothing else. The underline also keeps the link cue off colour alone (WCAG 1.4.1). */ .hyperliquid-ledger .hl-col>p a, .hyperliquid-ledger .hl-method p a{ color:inherit;border-bottom:1px solid rgba(247,136,192,.45); transition:color .15s ease,border-color .15s ease; } .hyperliquid-ledger .hl-col>p a:hover, .hyperliquid-ledger .hl-method p a:hover{color:var(--out-soft);border-bottom-color:var(--out-soft)} .hyperliquid-ledger :focus-visible{outline:2px solid var(--out);outline-offset:3px;border-radius:4px} .hyperliquid-ledger p{margin:0} .hyperliquid-ledger h1,.hyperliquid-ledger h2,.hyperliquid-ledger h3{margin:0} .hyperliquid-ledger .hl-mono{font-family:var(--bq-mono);font-size:.88em;color:var(--txt2);word-break:break-word} /* ---- shared column ---- */ .hyperliquid-ledger .hl-col{max-width:var(--col);margin:0 auto;padding:0 32px} /* ---- article head ---- */ .hyperliquid-ledger .hl-ahead{border-bottom:1px solid var(--line2);background:radial-gradient(900px 420px at 78% -20%,rgba(249,63,156,.12),transparent 62%)} .hyperliquid-ledger .hl-ahead-inner{max-width:var(--col);margin:0 auto;padding:54px 32px 46px} .hyperliquid-ledger .hl-kicker{font-weight:500;font-size:10px;line-height:12px;letter-spacing:1.4px;text-transform:uppercase;color:var(--out);display:inline-block;padding-bottom:14px;border-bottom:1px solid rgba(249,63,156,.45)} .hyperliquid-ledger h1.hl-title{margin-top:26px;font-weight:500;font-size:50px;line-height:1.06;letter-spacing:-1.6px;color:var(--txt);text-wrap:balance} .hyperliquid-ledger .hl-standfirst{margin-top:22px;font-size:21px;line-height:1.6;color:var(--txt2);font-style:italic;text-wrap:pretty} .hyperliquid-ledger .hl-byline{margin-top:28px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)} .hyperliquid-ledger .hl-byline b{color:var(--txt2);font-weight:500} /* ---- lead stat grid ---- */ .hyperliquid-ledger .hl-leadstats{max-width:var(--break);margin:0 auto;padding:0 32px} .hyperliquid-ledger .hl-leadgrid{margin:40px 0 6px;display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:var(--bq-radius-card);overflow:hidden;background:var(--figbg)} .hyperliquid-ledger .hl-ls{padding:26px 24px;border-right:1px solid var(--line2)} .hyperliquid-ledger .hl-ls:last-child{border-right:none} .hyperliquid-ledger .hl-ls .hl-v{font-weight:500;font-size:42px;line-height:1;letter-spacing:-1.6px;color:var(--in);font-variant-numeric:tabular-nums} .hyperliquid-ledger .hl-ls.hl-o .hl-v{color:var(--out)} .hyperliquid-ledger .hl-ls .hl-l{margin-top:12px;font-size:13.5px;line-height:1.45;color:var(--txt2)} /* The two reconciliation statistics are muted on purpose: they are the licence for the piece, not its headline. Do not "fix" them to accent. */ .hyperliquid-ledger .hl-ls.hl-quiet .hl-v{color:var(--muted);font-size:32px} .hyperliquid-ledger .hl-ls.hl-quiet .hl-l{color:var(--muted)} /* ---- body copy ---- */ .hyperliquid-ledger article{padding:6px 0 20px} .hyperliquid-ledger .hl-col>p{font-size:18.5px;line-height:1.78;color:var(--body);margin:22px 0;text-wrap:pretty} .hyperliquid-ledger .hl-col>p:first-of-type{margin-top:32px} .hyperliquid-ledger .hl-col>p strong{color:var(--txt);font-weight:500} .hyperliquid-ledger .hl-lede{font-size:20.5px !important;line-height:1.7 !important;color:var(--txt) !important} .hyperliquid-ledger .hl-standalone{font-weight:500;color:var(--txt) !important;font-size:23px !important;letter-spacing:-.35px;line-height:1.4 !important;margin:34px 0 !important} /* Act label comes from data-act on the heading, so the acts stay numbered in the markup rather than in a counter that reflows if a section is added. */ .hyperliquid-ledger h2.hl-sec{font-weight:500;font-size:31px;line-height:1.16;letter-spacing:-.8px;color:var(--txt);margin:64px 0 4px;scroll-margin-top:88px} .hyperliquid-ledger h2.hl-sec::before{content:attr(data-act);display:block;font-family:var(--bq-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--out);margin-bottom:14px} /* ---- figures ---- */ .hyperliquid-ledger figure{margin:46px auto} .hyperliquid-ledger figure.hl-bk{max-width:var(--break);padding:0 32px} .hyperliquid-ledger .hl-figcard{border:1px solid var(--line);border-radius:var(--bq-radius-card);background:var(--card);overflow:hidden} .hyperliquid-ledger .hl-fighead{padding:16px 22px;border-bottom:1px solid var(--line2);display:flex;align-items:baseline;gap:12px;flex-wrap:wrap} .hyperliquid-ledger .hl-fighead .hl-ft{font-weight:500;font-size:15px;color:var(--txt);letter-spacing:-.1px} .hyperliquid-ledger .hl-fighead .hl-fk{font-family:var(--bq-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-left:auto} .hyperliquid-ledger .hl-figfoot{display:flex;align-items:baseline;gap:16px;padding:14px 22px;border-top:1px solid var(--line2);font-size:13px;line-height:1.55;color:var(--txt2);flex-wrap:wrap} .hyperliquid-ledger .hl-figfoot .hl-wp{margin-left:auto;font-family:var(--bq-mono);color:var(--muted);letter-spacing:.14em;text-transform:uppercase;font-size:9.5px;white-space:nowrap} /* Charts scroll inside their own card below ~700px rather than reflowing; the page itself must never scroll sideways. */ .hyperliquid-ledger .hl-chartwrap{overflow-x:auto;padding:18px 20px 10px} /* ---- chart internals: handoff class names, scoped to the SVG ---- */ .hyperliquid-ledger svg.hl-ch{display:block;width:100%;min-width:700px;height:auto;font-variant-numeric:tabular-nums} .hyperliquid-ledger svg.hl-ch text{font-family:var(--bq-font)} .hyperliquid-ledger svg.hl-ch .gl{stroke:var(--grid);stroke-width:1} .hyperliquid-ledger svg.hl-ch .ax-l{stroke:var(--hair);stroke-width:1} .hyperliquid-ledger svg.hl-ch .ax{font-family:var(--bq-mono);font-size:11px;fill:var(--muted)} .hyperliquid-ledger svg.hl-ch .tick{font-size:11px;fill:var(--txt2)} .hyperliquid-ledger svg.hl-ch .xy{font-family:var(--bq-mono);font-size:10px;fill:var(--muted);letter-spacing:.06em} .hyperliquid-ledger svg.hl-ch .anno{font-size:11.5px;fill:var(--in-soft)} .hyperliquid-ledger svg.hl-ch .anno.out{fill:var(--out-soft)} .hyperliquid-ledger svg.hl-ch .lgd{font-size:11.5px;font-weight:500} .hyperliquid-ledger svg.hl-ch .lgd.in{fill:var(--in)} .hyperliquid-ledger svg.hl-ch .lgd.out{fill:var(--out)} .hyperliquid-ledger svg.hl-ch .lgd.neutral{fill:var(--muted)} .hyperliquid-ledger svg.hl-ch .b{transition:opacity .12s} .hyperliquid-ledger svg.hl-ch .b:hover{opacity:.65} .hyperliquid-ledger svg.hl-ch .bin{fill:var(--in)} .hyperliquid-ledger svg.hl-ch .bout{fill:var(--out)} .hyperliquid-ledger svg.hl-ch .ln{fill:none;stroke-linejoin:round;stroke-linecap:round} .hyperliquid-ledger svg.hl-ch .ln.in{stroke:var(--in);stroke-width:2.4} .hyperliquid-ledger svg.hl-ch .endlbl{font-size:11.5px;fill:var(--muted)} .hyperliquid-ledger svg.hl-ch .endval{font-family:var(--bq-mono);font-size:16px;font-weight:500;fill:var(--in)} .hyperliquid-ledger svg.hl-ch .paneltitle{font-size:14px;font-weight:500;fill:var(--txt)} .hyperliquid-ledger svg.hl-ch .panelsub{font-size:11.5px;fill:var(--muted)} .hyperliquid-ledger svg.hl-ch .colhead{font-family:var(--bq-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;fill:var(--muted)} .hyperliquid-ledger svg.hl-ch .rowname{font-size:13.5px;fill:var(--body)} .hyperliquid-ledger svg.hl-ch .rowwho2{font-size:10.5px;fill:var(--muted)} .hyperliquid-ledger svg.hl-ch .rowval{font-family:var(--bq-mono);font-size:12.5px;fill:var(--txt)} .hyperliquid-ledger svg.hl-ch .rowval.neg{fill:var(--out-soft)} .hyperliquid-ledger svg.hl-ch .rowval.pos{fill:var(--in-soft)} .hyperliquid-ledger svg.hl-ch .pctlbl{font-family:var(--bq-mono);font-size:11px;fill:var(--in)} .hyperliquid-ledger svg.hl-ch .ci{font-family:var(--bq-mono);font-size:13px;fill:var(--txt)} .hyperliquid-ledger svg.hl-ch .ci.acc{fill:var(--out)} .hyperliquid-ledger svg.hl-ch .ci.acc-in{fill:var(--in)} .hyperliquid-ledger svg.hl-ch .cism{font-family:var(--bq-mono);font-size:10.5px;fill:var(--muted)} .hyperliquid-ledger svg.hl-ch .ft-sm{font-size:12px;font-weight:500;fill:var(--txt2)} /* ---- monthly data table ---- */ .hyperliquid-ledger .hl-dtable{margin:46px auto;max-width:900px;width:calc(100% - 64px);border:1px solid var(--line);border-radius:var(--bq-radius-card);overflow:hidden} .hyperliquid-ledger .hl-dtable .hl-dcap{padding:16px 22px;border-bottom:1px solid var(--line2);font-weight:500;font-size:15px;color:var(--txt)} .hyperliquid-ledger .hl-dtwrap{overflow-x:auto;max-height:520px} .hyperliquid-ledger .hl-dtable table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums} .hyperliquid-ledger .hl-dtable th{font-weight:500;font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);text-align:right;padding:14px;border-bottom:1px solid var(--line2);white-space:nowrap;position:sticky;top:0;background:var(--card)} .hyperliquid-ledger .hl-dtable th:first-child{text-align:left} .hyperliquid-ledger .hl-dtable td{padding:11px 14px;border-bottom:1px solid var(--line2);font-size:14px;color:var(--body);white-space:nowrap} .hyperliquid-ledger .hl-dtable td.hl-num{font-family:var(--bq-mono);font-size:12.5px;text-align:right} .hyperliquid-ledger .hl-dtable td.hl-neg{color:var(--out-soft)} .hyperliquid-ledger .hl-dtable td.hl-pos{color:var(--in-soft)} .hyperliquid-ledger .hl-dtable tr.hl-peak td{background:rgba(249,63,156,.10);color:var(--txt);font-weight:500} .hyperliquid-ledger .hl-dfoot{padding:13px 18px;border-top:1px solid var(--line2);font-family:var(--bq-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)} /* ---- method box ---- */ .hyperliquid-ledger .hl-method{margin:54px auto 0;max-width:var(--col);border:1px solid var(--line);border-radius:var(--bq-radius-card);background:var(--figbg);padding:28px 30px} .hyperliquid-ledger .hl-method .hl-mk{font-weight:500;font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--muted)} .hyperliquid-ledger .hl-method h3{margin:12px 0 14px;font-weight:500;font-size:20px;letter-spacing:-.2px;color:var(--txt)} .hyperliquid-ledger .hl-method p{font-size:14.5px;line-height:1.72;color:var(--txt2);margin:0 0 12px} .hyperliquid-ledger .hl-method p:last-child{margin-bottom:0} .hyperliquid-ledger .hl-method p b{color:var(--body);font-weight:500} /* ---- end CTA ---- */ .hyperliquid-ledger .hl-endcta{margin:54px auto 0;max-width:900px;width:calc(100% - 64px);border-top:1px solid var(--line);padding:30px 0 0} .hyperliquid-ledger .hl-endcta .hl-ek{font-weight:500;font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--out)} .hyperliquid-ledger .hl-endcta .hl-et{margin-top:14px;font-size:16px;line-height:1.65;color:var(--txt2);max-width:640px} .hyperliquid-ledger .hl-endcta .hl-et b{color:var(--txt);font-weight:500} .hyperliquid-ledger .hl-prodgrid{margin-top:26px;display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--bq-radius-card);overflow:hidden} .hyperliquid-ledger .hl-prod{background:var(--card);padding:22px;display:block;color:inherit;transition:background .15s} /* #28172b is the handoff's color-mix(in srgb, var(--card) 88%, var(--out)), resolved to a literal the way the other investigation ports do. */ .hyperliquid-ledger .hl-prod:hover{background:#28172b;color:inherit} .hyperliquid-ledger .hl-prod .hl-pk{font-family:var(--bq-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)} .hyperliquid-ledger .hl-prod .hl-pt{margin-top:10px;font-weight:500;font-size:17px;letter-spacing:-.2px;color:var(--txt)} .hyperliquid-ledger .hl-prod .hl-pd{margin-top:8px;font-size:13.5px;line-height:1.55;color:var(--txt2)} .hyperliquid-ledger .hl-prod .hl-pa{margin-top:14px;font-size:13px;color:var(--out-soft)} .hyperliquid-ledger .hl-ctarow{margin-top:26px;display:flex;gap:14px;flex-wrap:wrap;align-items:center} .hyperliquid-ledger .hl-ctarow .hl-cn{font-size:13px;color:var(--muted)} /* Brand buttons, restated inside the scope so the article does not depend on whichever marketing sheet happens to define .bq-btn on a given route. */ .hyperliquid-ledger .bq-btn{ display:inline-flex;align-items:center;gap:8px; font-family:var(--bq-font);font-size:15px;font-weight:500;line-height:1; padding:13px 20px;border-radius:var(--bq-radius-btn); border:1px solid transparent;cursor:pointer;transition:background .15s,color .15s,border-color .15s; } .hyperliquid-ledger .bq-btn-primary{background:var(--bq-cta);color:var(--bq-white)} .hyperliquid-ledger .bq-btn-primary:hover{background:var(--bq-cta-hover);color:var(--bq-white)} .hyperliquid-ledger .bq-btn-secondary{background:transparent;color:var(--bq-white);border-color:var(--bq-cta-border)} .hyperliquid-ledger .bq-btn-secondary:hover{background:rgba(147,37,75,.14);color:var(--bq-white)} /* Breathing room before the site footer / related reading. */ .hyperliquid-ledger .hl-endcta-tail{height:60px} @media(max-width:900px){ .hyperliquid-ledger h1.hl-title{font-size:36px;letter-spacing:-1px} .hyperliquid-ledger .hl-leadgrid{grid-template-columns:1fr 1fr} .hyperliquid-ledger .hl-ls:nth-child(2){border-right:none} .hyperliquid-ledger .hl-ls:nth-child(1), .hyperliquid-ledger .hl-ls:nth-child(2){border-bottom:1px solid var(--line2)} .hyperliquid-ledger figure.hl-bk{padding:0 20px} } @media(max-width:560px){ .hyperliquid-ledger .hl-col, .hyperliquid-ledger .hl-ahead-inner, .hyperliquid-ledger .hl-leadstats{padding-left:20px;padding-right:20px} .hyperliquid-ledger h1.hl-title{font-size:30px;letter-spacing:-.7px} .hyperliquid-ledger .hl-standfirst{font-size:18px} .hyperliquid-ledger .hl-col>p{font-size:17px} .hyperliquid-ledger .hl-lede{font-size:18.5px !important} .hyperliquid-ledger h2.hl-sec{font-size:25px} .hyperliquid-ledger .hl-ls{padding:20px 18px} .hyperliquid-ledger .hl-ls .hl-v{font-size:32px} .hyperliquid-ledger .hl-dtable{margin:36px 20px;width:auto} .hyperliquid-ledger .hl-method{margin:44px 20px 0} .hyperliquid-ledger .hl-endcta{margin:44px 20px 0;width:auto} .hyperliquid-ledger .hl-prodgrid{grid-template-columns:1fr} } @media print{ .hyperliquid-ledger .inv-progress-track, .hyperliquid-ledger .hl-endcta{display:none} .hyperliquid-ledger .hl-figcard, .hyperliquid-ledger .hl-dtable, .hyperliquid-ledger .hl-method{break-inside:avoid} }