@font-face{font-family:Unbounded;src:url('assets/unbounded-800-latin.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
html{scroll-behavior:smooth}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.nav-link{position:absolute;z-index:1;top:32px;right:100px;height:48px;display:grid;place-items:center;color:var(--paper);font:500 14px/1 Geist Mono,monospace;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;transition:color .2s}
.nav-link:hover{color:var(--lime)}
.nav-link:focus-visible,.btn:focus-visible,.coin:focus-visible,#coin-search:focus-visible{outline:2px solid var(--lime);outline-offset:4px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 24px;border:2px solid var(--lime);background:var(--lime);color:var(--ink);font:700 15px/1 Geist Mono,monospace;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:transform .2s,background .2s,color .2s}
.btn:hover:not(:disabled){transform:translateY(-2px)}
.btn:disabled{background:transparent;color:#f2f3ee80;border-color:#f2f3ee40;cursor:not-allowed}
.btn.ghost{background:transparent;color:var(--paper);border-color:#f2f3ee60}
/* Hero: a readable one-line pitch, the event chip and the two actions under the pixel lettering. */
.hero-pitch{margin:28px 20px 0;color:#f2f3eecc;font-size:clamp(17px,1.6vw,22px);line-height:1.4;font-weight:500;letter-spacing:-.01em}
.hero-cta{margin:36px 20px 0;display:grid;justify-items:center;gap:18px}
.event-chip{display:inline-flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px 12px;margin:0;padding:8px 14px 8px 8px;border:1px solid #ceff0066;background:#ceff000f;font:500 15px/1.3 Geist Mono,monospace;color:var(--paper)}
.chip-tag{padding:5px 8px;background:var(--lime);color:var(--ink);font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.event-chip b{color:var(--lime)}
.hero-actions{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px 26px;margin:0}
.text-link{color:var(--paper);font:500 14px/1 Geist Mono,monospace;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid #f2f3ee50;padding-bottom:4px}
.text-link:hover{color:var(--lime);border-color:var(--lime)}
.text-link:focus-visible{outline:2px solid var(--lime);outline-offset:4px}
main .launching{position:static;margin-top:44px}
.js .hero-pitch,.js .hero-cta{opacity:0}
.js .complete .hero-pitch{opacity:1;transition:opacity .55s ease .35s}
.js .complete .hero-cta{opacity:1;transition:opacity .55s ease 1.5s}
/* Placeholders the owner still has to fill (prize total, squares, date); filled from coins.json. */
.ph{border-bottom:1px dashed currentColor;opacity:.75}

.below{position:relative}
:root{--bg:#080b09;--grid:#f2f3ee1f;--ease:cubic-bezier(.16,1,.3,1)}

/* How DegenBoard works */
.how{padding:clamp(40px,6vw,88px) 20px 0}
.how-steps{list-style:none;margin:48px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.how-steps>li{border:1px solid #f2f3ee26;background:#080b09f2;padding:clamp(16px,2vw,24px)}
.how-steps h3{margin:6px 0 0;font-size:22px;letter-spacing:-.02em}
.how-steps p{margin:8px 0 0;color:#f2f3eeb3;font-size:15px;line-height:1.5}
.how-steps .how-n{margin:18px 0 0;color:var(--lime);font:700 13px/1 Geist Mono,monospace;letter-spacing:.1em}
.how-art{position:relative;margin:0;aspect-ratio:3/2;border:1px solid #f2f3ee26;background:var(--bg)}
.how-surface>canvas{display:block;width:100%;height:100%}
.how-surface .purchase-label{font-size:12px;padding:6px 8px;gap:8px}.how-surface .purchase-label span{padding-left:8px}
.pool{display:grid;align-content:center;gap:12px;padding:16px 18px;overflow:hidden}
.pool-in{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;font:500 13px/1.3 Geist Mono,monospace;color:#f2f3eeb3;text-transform:uppercase;letter-spacing:.06em}
.pool-in b{color:var(--ink);background:var(--lime);padding:4px 8px;letter-spacing:.1em}
.pool-bar{display:flex;gap:3px;height:clamp(40px,4.4vw,56px)}
.pool-bar span{position:relative;display:flex;align-items:flex-end;overflow:hidden;min-width:0;background:#f2f3ee14}
.pool-bar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.85}
.pool-bar i{position:relative;margin:4px;padding:2px 5px;background:#080b09d9;font:700 11px/1.2 Geist Mono,monospace;font-style:normal;color:var(--paper);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pool-out{margin:0;font:500 13px/1.3 Geist Mono,monospace;color:#f2f3eeb3;text-transform:uppercase;letter-spacing:.06em}
.banner-date{margin:10px 0 0;font:500 13px/1.4 Geist Mono,monospace;letter-spacing:.08em;text-transform:uppercase}

/* Purchase effect, from the original explainer (styles.css), for the how-it-works demos. */
.purchase-effect{position:absolute;z-index:1;pointer-events:none;color:var(--lime)}
.purchase-label{position:absolute;left:0;bottom:calc(100% + 8px);display:flex;align-items:center;gap:12px;padding:9px 12px;background:var(--lime);color:#181a17;font:14px/1.2 'Geist Mono',monospace;white-space:nowrap}
.purchase-label b{font-weight:750}.purchase-label span{border-left:1px solid #181a1740;padding-left:12px}
.purchase-frame{position:absolute;inset:0;border:2px solid var(--lime);outline:1px solid #181a1750;background:#c4ff0024;transform-origin:top left}
.purchase-frame::before,.purchase-frame::after{content:'';position:absolute;width:9px;height:9px;border:2px solid var(--lime);background:#181a17}
.purchase-frame::before{top:-5px;left:-5px}.purchase-frame::after{right:-5px;bottom:-5px}
.purchase-flash,.purchase-wave{position:absolute;inset:0;opacity:0}
.purchase-flash{background:#efffc5}.purchase-wave{border:2px solid var(--lime)}
.purchase-mark{position:absolute;left:50%;top:50%;width:40px;height:40px;background:#181a17;object-fit:contain;opacity:0;transform:translate(-50%,-50%) scale(.65)}
.purchase-cursor{position:absolute;right:-18px;bottom:-24px;width:26px;height:30px;fill:#f3f3ef;stroke:#181a17;stroke-width:1.5;opacity:0}
.purchase-spark{position:absolute;width:5px;height:5px;background:var(--lime);opacity:0}
.purchase-spark:nth-of-type(1){left:0;top:0;--spark-x:-22px;--spark-y:-26px}
.purchase-spark:nth-of-type(2){right:0;top:0;--spark-x:24px;--spark-y:-20px}
.purchase-spark:nth-of-type(3){left:0;bottom:0;--spark-x:-22px;--spark-y:20px}
.purchase-spark:nth-of-type(4){right:0;bottom:0;--spark-x:26px;--spark-y:24px}
.purchase-effect[data-stage=selecting] .purchase-frame{animation:select-rectangle .7s var(--ease) both}
.purchase-effect[data-stage=selecting] .purchase-label{animation:selection-label .25s .45s both}
.purchase-effect[data-stage=selecting] .purchase-cursor{animation:selection-cursor .8s .1s both}
.purchase-effect[data-stage=confirmed] .purchase-frame{background:transparent}
.purchase-effect[data-stage=confirmed] .purchase-flash{animation:purchase-flash .65s ease-out both}
.purchase-effect[data-stage=confirmed] .purchase-wave{animation:purchase-wave .75s ease-out both}
.purchase-effect[data-stage=confirmed] .purchase-spark{animation:purchase-spark .65s ease-out both}
.purchase-effect[data-stage=confirmed] .purchase-mark{animation:purchase-mark .72s var(--ease) both}
.purchase-effect *{animation-play-state:paused!important}.purchase-effect.is-running *{animation-play-state:running!important}
@keyframes select-rectangle{from{transform:scale(.06,.08);opacity:.4}to{transform:scale(1);opacity:1}}
@keyframes selection-label{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
@keyframes selection-cursor{0%{opacity:0;transform:translate(-18px,-18px)}40%,100%{opacity:1;transform:translate(0,0)}}
@keyframes purchase-flash{from{opacity:.7}to{opacity:0}}
@keyframes purchase-wave{from{opacity:.85;transform:scale(1)}to{opacity:0;transform:scale(1.35)}}
@keyframes purchase-spark{0%{opacity:1;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(var(--spark-x),var(--spark-y)) scale(.4)}}
@keyframes purchase-mark{0%{opacity:0;transform:translate(-50%,-50%) scale(.55)}32%,70%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(.9)}}
.lz{padding:clamp(40px,6vw,88px) 20px clamp(48px,6vw,80px);scroll-margin-top:0}
.lz-inner{max-width:1120px;margin:0 auto}
.eyebrow{margin:0 0 16px;color:var(--lime);font:500 13px/1 Geist Mono,monospace;letter-spacing:.2em;text-transform:uppercase}
.lz h2{margin:0;max-width:14ch;font-size:clamp(40px,7vw,96px);font-weight:900;letter-spacing:-.05em;line-height:.98}
.lead{max-width:56ch;margin:24px 0 0;color:#f2f3eecc;font-size:clamp(17px,1.6vw,21px);line-height:1.5}
.lz h3{margin:0;font-size:18px;letter-spacing:-.01em}
.hint,.note{color:#f2f3ee99;font-size:14px;line-height:1.5}

.banner{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:0;margin-top:56px;border:1px solid #f2f3ee26;background:var(--ink)}
.banner-art{position:relative;padding:36px;background:var(--lime);color:var(--ink);min-height:300px;overflow:hidden}
.tag{margin:0;font:700 12px/1 Geist Mono,monospace;letter-spacing:.2em;text-transform:uppercase}
.banner-title{margin:14px 0 0;font-size:clamp(44px,6vw,80px);font-weight:900;letter-spacing:-.06em;line-height:.95}
.banner-sub{margin:14px 0 0;font:700 15px/1.4 Geist Mono,monospace;letter-spacing:.04em;text-transform:uppercase}
.zone{position:absolute;right:28px;bottom:28px;display:grid;grid-template-columns:repeat(8,1fr);gap:3px;width:min(40%,168px);aspect-ratio:1}
.zone i{background:#080b0914}
.zone i.hot{background:var(--ink)}
.zone i.found{background:transparent;box-shadow:inset 0 0 0 2px var(--ink)}
.points{list-style:none;margin:0;padding:0;counter-reset:p}
.points li{padding:24px 28px;border-top:1px solid #f2f3ee1f}
.points li:first-child{border-top:0}
.points p{margin:8px 0 0;color:#f2f3eeb3;line-height:1.5;font-size:15px}
.note{margin:16px 0 0}

.lz-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:24px;margin-top:56px;align-items:start}
.card,.rank{border:1px solid #f2f3ee26;background:#080b09f2;padding:clamp(20px,3vw,32px)}
.step+.step{margin-top:32px;padding-top:32px;border-top:1px solid #f2f3ee1f}
.step[hidden]{display:none}
.step h3{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.n{font:700 13px/1 Geist Mono,monospace;color:var(--lime);letter-spacing:.1em}
.search input{width:100%;height:48px;padding:0 16px;border:1px solid #f2f3ee40;background:#f2f3ee0d;color:var(--paper);font:500 16px Geist,sans-serif;border-radius:0}
.search input::placeholder{color:#f2f3ee80}
.coins{list-style:none;margin:12px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(156px,1fr));gap:8px;max-height:340px;overflow:auto}
.coin{width:100%;display:flex;align-items:center;gap:10px;padding:8px;border:1px solid #f2f3ee26;background:transparent;color:var(--paper);text-align:left;cursor:pointer;font:inherit;border-radius:0}
.coin:hover{border-color:#f2f3ee80}
.coin[aria-pressed=true]{border-color:var(--lime);background:#ceff0014}
.coin img{width:36px;height:36px;object-fit:cover;flex:none;background:#f2f3ee1a}
.coin b{display:block;font:700 14px/1.2 Geist Mono,monospace}
.coin span{display:block;max-width:15ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#f2f3ee99;font-size:12px}
.empty{grid-column:1/-1;color:#f2f3ee99;font-size:14px}
.status{margin:14px 0 0;min-height:1.5em;color:#f2f3eeb3;font-size:15px;line-height:1.5}
.hint.bad{color:#ffb4a8}
.search+.hint{margin:10px 0 0;min-height:0}
.status.bad{color:#ffb4a8}
.status.ok{color:var(--lime)}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin:20px 0 0}
#done-text{margin:0;font-size:18px;line-height:1.5}
.share-lead{margin:20px 0 0;color:var(--lime);font:700 13px/1.4 Geist Mono,monospace;letter-spacing:.1em;text-transform:uppercase}
.share-lead+.actions{margin-top:12px}
.actions [hidden]{display:none}

.rank{position:sticky;top:24px}
.rank ol{list-style:none;margin:16px 0 0;padding:0;max-height:min(560px,70vh);overflow:auto}
.rank li{display:grid;grid-template-columns:32px minmax(0,1fr) auto;align-items:center;gap:10px;padding:10px 0;border-top:1px solid #f2f3ee1a}
.rank li:first-child{border-top:0}
.rank img{width:32px;height:32px;object-fit:cover;background:#f2f3ee1a}
.rank .tk{font:700 14px Geist Mono,monospace;overflow:hidden;text-overflow:ellipsis}
.rank .sq{display:grid;grid-template-columns:repeat(10,5px);gap:2px}
.rank .sq i{height:5px;background:#f2f3ee26}
.rank .sq i.on{background:var(--lime)}
.rank li.mine{background:#ceff0014}

.rules{margin-top:56px}
.rules ul{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:#f2f3ee1f;border:1px solid #f2f3ee1f}
.rules li{padding:20px;background:var(--ink);color:#f2f3eeb3;line-height:1.5;font-size:15px}
.rules strong{display:block;margin-bottom:6px;color:var(--paper)}
.foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:72px;padding-top:24px;border-top:1px solid #f2f3ee1f;font:500 13px Geist Mono,monospace;color:#f2f3ee99}
.foot a{color:var(--paper);text-decoration:none}
.foot a:hover{color:var(--lime)}

@media(max-width:900px){.how-steps{grid-template-columns:minmax(0,1fr);max-width:560px}.rank{position:static}.rank ol{max-height:420px}.banner,.lz-grid{grid-template-columns:minmax(0,1fr)}.rules ul{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.rank li{grid-template-columns:28px minmax(0,1fr) auto;gap:8px}.rank img{width:28px;height:28px}.rank .sq{grid-template-columns:repeat(10,4px);gap:1px}.rank ol{padding-right:6px}.nav-link{top:20px;right:74px}.rules ul{grid-template-columns:minmax(0,1fr)}.banner-art{padding:24px}.hero-cta{margin-top:28px}.btn{padding:0 16px;font-size:14px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.js .hero-cta{opacity:1}}

/* Headings below the hero: Unbounded 800 (self-hosted). Body stays Geist, labels Geist Mono. */
.below h2,.below h3,.banner-title{font-family:Unbounded,Geist,Arial,sans-serif;font-weight:800;font-synthesis:none}
.below h2{font-size:clamp(30px,5.6vw,78px);letter-spacing:-.02em;line-height:1.05;max-width:18ch}
.below h3{font-size:16px;letter-spacing:-.01em;line-height:1.25}
.banner-title{font-size:clamp(25px,4.6vw,56px);letter-spacing:-.02em;line-height:1.05}
/* Keep the banner's text lines clear of the square graphic in its bottom-right corner. */
.banner-sub,.banner-date{max-width:calc(60% - 56px)}