:root {
  --ink: #171714;
  --muted: #6f7068;
  --paper: #f2f1e9;
  --card: #fbfaf4;
  --line: #d9d8cf;
  --lime: #dfff4f;
  --coral: #ff6b4a;
  --purple: #7657ff;
  --green: #177c55;
  --red: #c7442e;
  --mono: "DM Mono", monospace;
  --sans: "Manrope", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); }
button, a { color: inherit; }
button { font: inherit; }
.noise { position: fixed; inset: 0; opacity: .035; pointer-events: none; z-index: 20; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E"); }

.site-header { height: 74px; padding: 0 4vw; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; position: sticky; top: 0; background: color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter: blur(15px); z-index: 10; }
.brand { text-decoration: none; font-weight: 800; letter-spacing: -.07em; font-size: 22px; width: fit-content; }
.brand b { background: var(--ink); color: var(--paper); padding: 2px 5px; border-radius: 3px; margin-left: 2px; }
.header-meta { font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; display: flex; align-items: center; gap: 9px; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 4px rgba(223,255,79,.25); }
.icon-button { justify-self: end; width: 36px; height: 36px; border: 1px solid var(--line); background: transparent; border-radius: 50%; cursor: pointer; display: grid; place-items: center; transition: .2s; }
.icon-button:hover { background: var(--ink); color: white; }
.icon-button svg { width: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.icon-button.loading svg { animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

main { overflow: hidden; }
.hero { padding: 70px 5vw 58px; min-height: 620px; display: flex; flex-direction: column; justify-content: space-between; }
.eyebrow, .kicker, .label { font: 500 10px var(--mono); letter-spacing: .12em; }
.eyebrow { display: flex; justify-content: space-between; border-top: 1px solid var(--ink); padding-top: 10px; }
.hero h1 { font-size: clamp(68px, 11vw, 158px); line-height: .79; letter-spacing: -.085em; margin: 60px 0 70px; max-width: 1100px; }
.hero h1 em { font-family: Georgia, serif; font-weight: 400; color: var(--coral); }
.hero-bottom { border-top: 1px solid var(--ink); padding-top: 24px; display: grid; grid-template-columns: 1fr 1.2fr; gap: 8vw; }
.hero-bottom > p { max-width: 520px; margin: 0; font-size: 17px; line-height: 1.65; }
.rules { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.rules > div { border: 1px solid var(--line); background: rgba(255,255,255,.25); padding: 20px; }
.rules span, .rules small { display: block; font: 10px var(--mono); color: var(--muted); }
.rules b { display: block; font-size: 17px; margin: 12px 0 20px; }

.scoreboard { background: var(--ink); color: var(--paper); padding: 24px 5vw; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 1px; }
.scoreboard article { min-height: 215px; padding: 24px; border: 1px solid #41413c; display: flex; flex-direction: column; }
.scoreboard .label { color: #aaa99f; }
.total-card strong { font-size: clamp(46px, 6vw, 82px); letter-spacing: -.07em; line-height: 1; margin-top: 20px; }
.return-row { display: flex; gap: 10px; align-items: center; font: 12px var(--mono); color: #aaa99f; margin: 14px 0 auto; }
.return { border-radius: 100px; padding: 5px 8px; font: 500 11px var(--mono); }
.return.positive { color: #113a27; background: #9aefbd; }
.return.negative { color: #4a1710; background: #ffad9c; }
.return.neutral { color: var(--muted); background: #e2e1d8; }
.split-bar { height: 5px; display: flex; border-radius: 5px; overflow: hidden; background: #343430; }
.split-bar i:first-child { background: var(--coral); width: 0; }
.split-bar i:last-child { background: var(--purple); width: 0; }
.allocation { display: flex; justify-content: space-between; font: 10px var(--mono); margin-top: 10px; color: #aaa99f; }
.allocation span { display: flex; gap: 7px; align-items: center; }
.allocation b { color: var(--paper); }
.allocation i, .legend i { width: 7px; height: 7px; border-radius: 50%; }
.btc-key { background: var(--coral); }.qqq-key { background: var(--purple); }
.metric-card strong { font-size: clamp(30px, 3vw, 44px); letter-spacing: -.05em; margin: auto 0 5px; }
.metric-card small { color: #aaa99f; font: 11px var(--mono); }
.scoreboard .accent-card { background: var(--lime); color: var(--ink); border-color: var(--lime); }
.scoreboard .accent-card .label, .scoreboard .accent-card small { color: #4c551d; }

.charts-section, .ledger-section { padding: 100px 5vw; }
.section-heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 38px; }
.section-heading h2 { font-size: clamp(38px, 5vw, 64px); letter-spacing: -.06em; line-height: 1; margin: 14px 0 0; }
.legend { display: flex; gap: 20px; font: 10px var(--mono); }
.legend span { display: flex; align-items: center; gap: 7px; }
.value-key { background: var(--ink); }.cost-key { background: transparent; border: 1px dashed var(--muted); }
.chart-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.chart-card { background: var(--card); border: 1px solid var(--line); min-width: 0; }
.chart-top { display: flex; justify-content: space-between; align-items: start; padding: 24px; }
.chart-top > div { display: flex; flex-direction: column; gap: 13px; }
.chart-top b { font-size: 32px; letter-spacing: -.05em; }
.asset-tag { font: 500 10px var(--mono); width: fit-content; border-radius: 3px; padding: 4px 7px; }
.btc-tag { background: #ffe0d8; color: #91321e; }.qqq-tag { background: #e3ddff; color: #4730b7; }
.chart-wrap { height: 285px; position: relative; padding: 0 12px; }
.chart-wrap svg { display: block; width: 100%; height: 100%; overflow: visible; }
.chart-empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font: 11px var(--mono); background-image: linear-gradient(var(--line) 1px, transparent 1px); background-size: 100% 25%; }
.chart-gridline { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart-cost { stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 5 6; fill: none; vector-effect: non-scaling-stroke; }
.chart-value { stroke: var(--ink); stroke-width: 2.5; fill: none; vector-effect: non-scaling-stroke; }
.chart-area { fill: url(#areaGradient); opacity: .16; }
.chart-dot { fill: var(--lime); stroke: var(--ink); stroke-width: 2; vector-effect: non-scaling-stroke; }
.axis-label { fill: var(--muted); font: 9px var(--mono); }
.chart-footer { border-top: 1px solid var(--line); padding: 16px 24px; display: flex; justify-content: space-between; font: 10px var(--mono); color: var(--muted); }

.ledger-section { padding-top: 40px; }
.ledger-heading { align-items: center; }
.table-tools { display: flex; align-items: center; gap: 12px; }
.filter { border: 1px solid var(--line); border-radius: 6px; padding: 3px; display: flex; }
.filter button, .download-button { border: 0; background: transparent; cursor: pointer; font: 500 10px var(--mono); padding: 9px 12px; border-radius: 4px; }
.filter button.active { background: var(--ink); color: white; }
.download-button { border: 1px solid var(--ink); }
.download-button:hover { background: var(--lime); }
.table-shell { overflow-x: auto; border-top: 1px solid var(--ink); }
table { width: 100%; border-collapse: collapse; min-width: 760px; }
th { text-align: left; font: 500 9px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 15px 12px; border-bottom: 1px solid var(--line); }
td { padding: 18px 12px; border-bottom: 1px solid var(--line); font: 12px var(--mono); }
th:not(:first-child), td:not(:first-child) { text-align: right; }
td:first-child { color: var(--muted); }
.table-asset { display: inline-flex; align-items: center; gap: 7px; font-weight: 500; }
.table-asset i { width: 7px; height: 7px; border-radius: 50%; }
.empty-row { text-align: center !important; padding: 60px; color: var(--muted); }
.pagination { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; color: var(--muted); font: 10px var(--mono); }
.pagination div { display: flex; align-items: center; gap: 12px; }
.pagination button { border: 1px solid var(--line); background: transparent; width: 32px; height: 32px; cursor: pointer; }
.pagination button:disabled { opacity: .35; cursor: default; }

.method { margin-top: 50px; background: var(--coral); padding: 80px 5vw; display: grid; grid-template-columns: .6fr 2fr; gap: 10vw; }
.method h2 { margin: 0 0 30px; font-size: clamp(48px, 7vw, 92px); letter-spacing: -.07em; line-height: .95; }
.method p { max-width: 690px; font-size: 15px; line-height: 1.7; }
footer { min-height: 190px; padding: 44px 5vw; background: var(--ink); color: var(--paper); display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: end; font: 10px var(--mono); }
footer p:last-child { text-align: right; color: #aaa99f; }
.footer-brand b { background: var(--paper); color: var(--ink); }
.toast { position: fixed; right: 24px; bottom: 24px; background: var(--ink); color: white; padding: 13px 18px; border-radius: 6px; font: 11px var(--mono); transform: translateY(100px); opacity: 0; transition: .25s; z-index: 30; }
.toast.show { transform: translateY(0); opacity: 1; }

@media (max-width: 850px) {
  .hero { min-height: auto; padding-top: 45px; }
  .hero-bottom, .chart-grid, .scoreboard { grid-template-columns: 1fr; }
  .hero-bottom { gap: 32px; }
  .scoreboard { padding: 18px; }
  .scoreboard article { min-height: 180px; }
  .section-heading, .ledger-heading { align-items: start; gap: 25px; flex-direction: column; }
  .method { grid-template-columns: 1fr; gap: 45px; }
  footer { grid-template-columns: 1fr; gap: 20px; }
  footer p:last-child { text-align: left; }
}

@media (max-width: 540px) {
  .site-header { padding: 0 20px; grid-template-columns: 1fr 1fr; }
  .header-meta { display: none; }
  .hero, .charts-section, .ledger-section { padding-left: 20px; padding-right: 20px; }
  .hero h1 { font-size: 64px; margin: 55px 0; }
  .rules { grid-template-columns: 1fr; }
  .chart-wrap { height: 220px; }
  .table-tools { width: 100%; justify-content: space-between; }
  .method { padding: 65px 20px; }
  footer { padding: 44px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}