:root {
  --bg: #0b0d10; --bg2: #11141a; --surface: #161a21; --surface-2: #1d222b; --line: rgba(244, 241, 234, .09); --line-2: rgba(244, 241, 234, .18);
  --ink: #f4f1ea; --muted: #a6a39b; --muted-2: #7c7a74; --red: #ff4d5e; --ok: #63e6a4; --hand: #ffcf5a;
  --holo: linear-gradient(110deg, #7cf0ff 0%, #a98bff 28%, #ff7ad9 52%, #ffe066 76%, #7cf0ff 100%);
  --display: "Anton", Impact, "Arial Narrow", sans-serif; --body: "Inter", system-ui, sans-serif; --mono: "JetBrains Mono", ui-monospace, monospace;
  --r: 18px; --ease: cubic-bezier(.2, .8, .2, 1);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.6 var(--body); -webkit-font-smoothing: antialiased; }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .5; background: radial-gradient(900px 500px at 85% -10%, rgba(169, 139, 255, .14), transparent 60%), radial-gradient(700px 500px at 0% 30%, rgba(124, 240, 255, .07), transparent 60%); }
main, .bar, .foot { position: relative; z-index: 1; }
a { color: inherit; } [hidden] { display: none !important; }
.wrap { max-width: 1220px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px); }
.skip { position: absolute; left: -999px; } .skip:focus { left: 16px; top: 12px; z-index: 99; background: var(--ink); color: var(--bg); padding: .5rem .8rem; border-radius: 8px; }
h1, h2, h3 { margin: 0; font-weight: 400; }
.holo-text { background: var(--holo); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: holo 8s linear infinite; }
@keyframes holo { to { background-position: 200% 0; } }
.dot { width: .55rem; height: .55rem; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 0 rgba(255, 77, 94, .6); animation: ping 1.6s infinite; display: inline-block; flex: none; }
@keyframes ping { 70% { box-shadow: 0 0 0 8px rgba(255, 77, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 77, 94, 0); } }

/* top bar */
.bar { position: sticky; top: 0; z-index: 50; background: rgba(11, 13, 16, .78); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.bar-in { display: flex; align-items: center; gap: 1rem; height: 64px; }
.logo { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; } .logo svg { width: 30px; height: 30px; } .logo b { font: 400 1.35rem/1 var(--display); letter-spacing: .04em; }
.live { display: inline-flex; align-items: center; gap: .45rem; font: 700 .7rem/1 var(--mono); letter-spacing: .12em; color: var(--muted); padding: .45rem .7rem; border: 1px solid var(--line); border-radius: 999px; white-space: nowrap; }
.nav { display: flex; gap: 1.2rem; margin-left: .6rem; white-space: nowrap; } .nav a { text-decoration: none; font-size: .9rem; color: var(--muted); } .nav a:hover { color: var(--ink); }
.sp { flex: 1; }
.xlink { font: 700 .82rem/1 var(--body); text-decoration: none; color: var(--muted); }
@media (max-width: 860px) { .nav, .live { display: none; } }
.ca-pill { font: 700 .7rem/1 var(--mono); letter-spacing: .1em; color: var(--muted); background: var(--surface); padding: .5rem .75rem; border: 1px solid var(--line-2); border-radius: 999px; white-space: nowrap; cursor: pointer; }
.ca-pill b { color: var(--ink); letter-spacing: .02em; margin-left: .25rem; }
.ca-pill:disabled { cursor: default; } .ca-pill:disabled b { color: var(--muted); font-weight: 500; }
.ca-pill:not(:disabled):hover { border-color: var(--ink); }
.ca.soon code { color: var(--muted); font-weight: 500; }
.ca.on { animation: ca-in .9s ease-out; } @keyframes ca-in { 0% { box-shadow: 0 0 0 0 rgba(255,122,217,.7); } 100% { box-shadow: 0 0 0 14px rgba(255,122,217,0); } }
@media (max-width: 520px) { .bar-in { gap: .5rem; } .logo b { white-space: nowrap; } .ca-pill { padding: .45rem .6rem; } #connect { padding-inline: .8rem; } #connect .lg { display: none; } }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: .85rem 1.25rem; border-radius: 999px; border: 0; background: var(--ink); color: var(--bg); font: 800 .95rem/1 var(--body); text-decoration: none; cursor: pointer; white-space: nowrap; position: relative; transition: transform .15s var(--ease); }
.btn::after { content: ""; position: absolute; inset: -2px; border-radius: inherit; background: var(--holo); z-index: -1; opacity: 0; transition: opacity .2s; }
.btn:hover { transform: translateY(-1px); } .btn:hover::after { opacity: 1; } .btn:active { transform: none; } .btn:disabled { opacity: .55; cursor: default; transform: none; }
.btn.ghost { background: var(--surface); color: var(--ink); border: 1px solid var(--line-2); } .btn.ghost::after { display: none; } .btn.ghost:hover { border-color: var(--ink); }
.btn.sm { padding: .5rem .8rem; font-size: .8rem; }
.row { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; margin-top: 1.6rem; }
.note { color: var(--muted); font-size: .88rem; }

/* hero */
.hero { padding: clamp(40px, 7vw, 90px) 0 0; }
.hero-in { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(28px, 5vw, 70px); align-items: center; }
.eyebrow { display: inline-flex; align-items: center; gap: .55rem; margin: 0 0 1rem; font: 700 .74rem/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
h1 { font: 400 clamp(2.9rem, 1.4rem + 5.4vw, 5.6rem)/.96 var(--display); letter-spacing: .005em; text-transform: uppercase; }
.lede { max-width: 58ch; margin: 1.4rem 0 0; color: var(--muted); font-size: clamp(1rem, .95rem + .3vw, 1.12rem); } .lede b { color: var(--ink); }
.ca { display: flex; align-items: center; gap: .6rem; margin-top: 1.4rem; padding: .55rem .6rem .55rem 1rem; border: 1px solid var(--line-2); border-radius: 14px; background: var(--surface); max-width: 100%; flex-wrap: wrap; }
.ca span { font: 700 .72rem/1 var(--mono); letter-spacing: .12em; color: var(--muted); } .ca code { font: 600 .82rem/1.3 var(--mono); overflow-wrap: anywhere; flex: 1; min-width: 12ch; }
@media (max-width: 920px) { .hero-in { grid-template-columns: 1fr; } }

/* the graded slab */
.stage { display: grid; justify-items: center; gap: .9rem; }
.slab { position: relative; width: 100%; max-width: 360px; border-radius: 16px; padding: 10px; background: linear-gradient(180deg, #1c2029, #12151b); box-shadow: 0 30px 60px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .06); isolation: isolate; text-decoration: none; color: var(--ink); display: block; }
.slab::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px; background: var(--holo); background-size: 200% 100%; animation: holo 6s linear infinite; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; z-index: -1; }
.slab-label { display: flex; justify-content: space-between; gap: .5rem; padding: .55rem .7rem; border-radius: 9px; background: #f4f1ea; color: #121418; font: 700 .7rem/1.25 var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.slab-label span:last-child { text-align: right; } .slab-label .g { font: 400 1.25rem/1 var(--display); letter-spacing: .02em; }
.slab-window { position: relative; margin-top: 9px; aspect-ratio: 5 / 7; border-radius: 9px; overflow: hidden; background: #07080a; display: grid; place-items: center; }
.slab-window img { width: 100%; height: 100%; object-fit: contain; display: block; }
.slab-window .shine { position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .14) 45%, transparent 60%); background-size: 250% 100%; animation: sweep 3.2s ease-in-out infinite; pointer-events: none; mix-blend-mode: screen; }
@keyframes sweep { 0% { background-position: 120% 0; } 60%, 100% { background-position: -120% 0; } }
.slab.empty .slab-window p { position: relative; padding: 1.4rem; text-align: center; color: var(--muted); font-size: .95rem; max-width: 26ch; }
.slab.big { max-width: 380px; transform: rotate(2deg); }
.slab.flip { animation: flipin .9s var(--ease) both; }
@keyframes flipin { from { transform: perspective(900px) rotateY(80deg) rotate(2deg); opacity: 0; } to { transform: perspective(900px) rotateY(0) rotate(2deg); opacity: 1; } }
.stage-cap { margin: 0; font: 700 .74rem/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); text-align: center; }
.stage-cap a { color: var(--ink); }

/* totals tape */
.tape { margin-top: clamp(40px, 6vw, 70px); border-block: 1px solid var(--line); background: rgba(17, 20, 26, .7); }
.tape-in { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.tape-in div { padding: 1.1rem .9rem; border-right: 1px solid var(--line); } .tape-in div:last-child { border-right: 0; }
.tape small { display: block; font: 700 .64rem/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); }
.tape b { display: block; margin-top: .35rem; font: 400 clamp(1.4rem, 1rem + 1.2vw, 2rem)/1 var(--display); letter-spacing: .02em; }
@media (max-width: 920px) { .tape-in { grid-template-columns: repeat(3, 1fr); } .tape-in div:nth-child(3) { border-right: 0; } .tape-in div:nth-child(-n+3) { border-bottom: 1px solid var(--line); } }
@media (max-width: 520px) { .tape-in { grid-template-columns: repeat(2, 1fr); } .tape-in div { border-right: 1px solid var(--line) !important; border-bottom: 1px solid var(--line); } .tape-in div:nth-child(2n) { border-right: 0 !important; } }

/* sections */
.band { padding: clamp(56px, 8vw, 104px) 0; border-top: 1px solid var(--line); }
.band.alt { background: rgba(17, 20, 26, .55); }
.head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; margin-bottom: 2rem; flex-wrap: wrap; }
h2 { font: 400 clamp(2rem, 1.2rem + 3vw, 3.4rem)/1 var(--display); text-transform: uppercase; letter-spacing: .01em; }
.sub { max-width: 62ch; color: var(--muted); margin: .9rem 0 0; }
.count { font: 700 .74rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0; }

/* feed */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1.2rem; }
.item { display: grid; gap: .7rem; }
.item .slab { max-width: none; }
.item .meta { display: flex; justify-content: space-between; gap: .6rem; align-items: center; flex-wrap: wrap; font-size: .82rem; color: var(--muted); }
.item .meta a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; } .item .meta a:hover { color: var(--ink); }
.chip { display: inline-flex; align-items: center; padding: .28rem .6rem; border-radius: 999px; font: 700 .66rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; border: 1px solid currentColor; white-space: nowrap; }
.chip.ok { color: var(--ok); } .chip.hand { color: var(--hand); } .chip.never { color: var(--red); } .chip.vault { color: #7cf0ff; } .chip.won { color: #ff7ad9; } .chip.muted { color: var(--muted); }
.empty-feed { grid-column: 1 / -1; padding: 2.4rem; border: 1px dashed var(--line-2); border-radius: var(--r); text-align: center; color: var(--muted); }
.empty-feed b { display: block; color: var(--ink); font: 400 1.6rem/1.1 var(--display); text-transform: uppercase; margin-bottom: .4rem; }

/* draw */
.draw-in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
@media (max-width: 920px) { .draw-in { grid-template-columns: 1fr; } }
.draw-box { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; margin-top: 1.6rem; }
.countdown { padding: 1rem; border: 1px solid var(--line-2); border-radius: 14px; background: var(--surface); }
.countdown small { display: block; font: 700 .64rem/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); }
.countdown b { display: block; margin-top: .3rem; font: 400 clamp(1.4rem, 1rem + 1vw, 1.9rem)/1 var(--display); font-variant-numeric: tabular-nums; }
@media (max-width: 520px) { .draw-box { grid-template-columns: 1fr 1fr; } .draw-box .countdown:first-child { grid-column: 1 / -1; } }
.agree { display: flex; gap: .55rem; align-items: flex-start; margin-top: 1.4rem; color: var(--muted); font-size: .9rem; } .agree input { margin-top: .25rem; accent-color: #ff7ad9; }
.fair { margin-top: 1.6rem; border-top: 1px solid var(--line); padding-top: 1rem; color: var(--muted); font-size: .9rem; } .fair summary { cursor: pointer; color: var(--ink); font-weight: 700; }
.fair code, .draws code { font: 500 .78rem/1.4 var(--mono); overflow-wrap: anywhere; color: var(--ink); }
.draws { padding: 1.3rem; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface); }
.draws h3 { font: 400 1.5rem/1 var(--display); text-transform: uppercase; margin-bottom: 1rem; }
.draws ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.draws li { padding: .8rem; border: 1px solid var(--line); border-radius: 12px; font-size: .86rem; color: var(--muted); display: grid; gap: .25rem; } .draws li b { color: var(--ink); }

/* how */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.steps li { padding: 1.4rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.steps b { font: 400 2.2rem/1 var(--display); background: var(--holo); -webkit-background-clip: text; background-clip: text; color: transparent; }
.steps h3 { margin: .7rem 0 .3rem; font: 800 1.05rem/1.2 var(--body); } .steps p { margin: 0; color: var(--muted); font-size: .92rem; }
.truth { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: .6rem; }
.truth li { display: flex; gap: .8rem; align-items: baseline; padding: .9rem 1rem; border: 1px solid var(--line); border-radius: 12px; color: var(--muted); font-size: .92rem; }
.wallet-line { margin-top: 1.2rem; color: var(--muted); font-size: .88rem; overflow-wrap: anywhere; } .wallet-line a { color: var(--ink); }

/* footer, toast */
.foot { border-top: 1px solid var(--line); padding: 2rem 0 3rem; color: var(--muted-2); font-size: .82rem; } .foot b { color: var(--ink); }
.toast { position: fixed; left: 50%; bottom: 22px; transform: translate(-50%, 140%); padding: .8rem 1.1rem; border-radius: 12px; background: var(--ink); color: var(--bg); font-weight: 700; font-size: .9rem; z-index: 90; transition: transform .3s var(--ease); max-width: calc(100vw - 32px); }
.toast.on { transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .holo-text, .slab::before, .shine, .dot, .slab.flip { animation: none !important; } html { scroll-behavior: auto; } }

/* round 2: spent line, share, check, opening */
.tape em { display: block; font: 500 .72rem/1.2 var(--mono); color: var(--muted); font-style: normal; margin-top: .3rem; }
.share { font: 700 .72rem/1 var(--mono); letter-spacing: .08em; color: var(--ink); background: none; border: 1px solid var(--line-2); border-radius: 999px; padding: .4rem .7rem; cursor: pointer; text-decoration: none; white-space: nowrap; }
.share:hover { border-color: var(--ink); }
.check-out { display: block; margin-top: .4rem; font: 500 .74rem/1.4 var(--mono); color: var(--muted); overflow-wrap: anywhere; }
.check-out.ok { color: #7dffb0; } .check-out.bad { color: #ff7a8a; }
.me { margin-top: .6rem; }
.slab.opening .slab-window { display: grid; place-items: center; background: repeating-linear-gradient(135deg, #15181d 0 14px, #1b1f26 14px 28px); }
.slab.opening .slab-window p { font: 700 1rem/1.3 var(--mono); letter-spacing: .14em; color: var(--ink); animation: pf-blink 1.1s steps(2) infinite; }
@keyframes pf-blink { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .slab.opening .slab-window p { animation: none; } }
.tape progress { display: block; width: 100%; height: 6px; margin-top: .5rem; appearance: none; border: 0; border-radius: 99px; background: var(--line-2); overflow: hidden; }
.tape progress::-webkit-progress-bar { background: var(--line-2); } .tape progress::-webkit-progress-value { background: var(--holo); } .tape progress::-moz-progress-bar { background: var(--holo); }
.tape progress[hidden] { display: none; }