/* Chipin: deep forest, lime, Space Grotesk with Space Mono. Hands together, round friendly cards. */
:root { --bg: #06120f; --s1: #0b1c18; --s2: #112823; --line: rgba(199, 242, 132, .1); --line2: rgba(199, 242, 132, .2); --text: #eef6ee; --muted: rgba(226, 240, 228, .6); --sub: rgba(238, 246, 238, .8); --acc: #c7f284; --on-acc: #0d1a05; --up: #3ce3ab; --down: #f23674;
  --head: "Space Grotesk", Arial, sans-serif; --font: "Space Grotesk", Arial, sans-serif; --mono: "Space Mono", ui-monospace, monospace; --wrap: 1180px; --g: clamp(16px, 4vw, 40px); --r: 20px; --rb: 999px;
  --h1w: 600; --h1ls: -.045em; --h2w: 600; --h2ls: -.04em; --h3w: 600; --barbg: rgba(6, 18, 15, .88);
  --hero-pos: 50% 50%; --hero-shade: radial-gradient(ellipse 70% 65% at 50% 50%, rgba(6, 18, 15, .78), rgba(6, 18, 15, .45) 75%), linear-gradient(0deg, var(--bg), transparent 30%) }
.hero h1 { font-size: clamp(60px, 10vw, 150px) }
.pools { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 40px } .pools .empty { grid-column: 1 / -1 }
.pc { display: block; padding: 24px; border-radius: var(--r); background: var(--s1); border: 1px solid var(--line); transition: border-color .2s } .pc:hover { border-color: var(--line2) }
.pc .top { display: flex; justify-content: space-between; align-items: center } .pc .coin { font-size: 18px } .pc .coin img { width: 34px; height: 34px }
.pc .num { margin-top: 18px; font: 700 30px var(--mono); letter-spacing: -.03em } .pc .num small { font-size: 14px; color: var(--muted); font-weight: 400 }
.pc .bar { height: 10px; border-radius: 10px; background: var(--s2); margin-top: 12px; overflow: hidden } .pc .bar i { display: block; height: 100%; background: var(--acc); border-radius: 10px }
.pc .meta { display: flex; justify-content: space-between; margin-top: 12px; color: var(--muted); font: 12px var(--mono) }
.tagx { padding: 4px 10px; border-radius: 999px; font: 600 11px var(--font); background: rgba(199, 242, 132, .12); color: var(--acc) } .tagx.done { background: var(--s2); color: var(--muted) }
.cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 40px }
.cmp > div { padding: 30px; border-radius: var(--r); background: var(--s1); border: 1px solid var(--line) } .cmp .win { border-color: rgba(199, 242, 132, .4) }
.cmp b { font: 600 26px var(--head); letter-spacing: -.02em } .cmp .win b { color: var(--acc) } .cmp ul { margin-top: 18px; list-style: none; display: grid; gap: 12px } .cmp li { color: var(--muted); padding-left: 22px; position: relative } .cmp li::before { content: ""; position: absolute; left: 0; top: .6em; width: 10px; height: 2px; background: var(--muted) } .cmp .win li { color: var(--text) } .cmp .win li::before { background: var(--acc) }
@media (max-width: 900px) { .pools, .cmp { grid-template-columns: 1fr } }