@font-face { font-family: "Unbounded"; font-weight: 700; font-display: swap; src: url(/l/fonts/Unbounded-700.woff2) format("woff2") }
@font-face { font-family: "Unbounded"; font-weight: 900; font-display: swap; src: url(/l/fonts/Unbounded-900.woff2) format("woff2") }
@font-face { font-family: "Instrument Sans"; font-weight: 400; font-display: swap; src: url(/l/fonts/InstrumentSans-400.woff2) format("woff2") }
@font-face { font-family: "Instrument Sans"; font-weight: 500; font-display: swap; src: url(/l/fonts/InstrumentSans-500.woff2) format("woff2") }
@font-face { font-family: "Instrument Sans"; font-weight: 600; font-display: swap; src: url(/l/fonts/InstrumentSans-600.woff2) format("woff2") }
@font-face { font-family: "JetBrains Mono"; font-weight: 400 500; font-display: swap; src: url(/l/fonts/JetBrainsMono-500.woff2) format("woff2") }
@font-face { font-family: "JetBrains Mono"; font-weight: 600 800; font-display: swap; src: url(/l/fonts/JetBrainsMono-700.woff2) format("woff2") }
@font-face { font-family: "Departure Mono"; font-weight: 400; font-display: swap; src: url(/l/fonts/DepartureMono-400.woff2) format("woff2") }
:root {
  --bg: #1C1C1F; --surface-1: #232327; --surface-2: #2A2A2F; --surface-3: #333339; --sunk: #18181B; --matte: #26262A; --matte-bg: #151517; --line: #34343A; --line-2: #45454D;
  --text: #F2F2F3; --text-2: #A8A8AF; --text-3: #8E8E96; --money: #3DDC84; --btn: #F2F2F3; --on-btn: #0B0B0C; --btn-hi: #FFFFFF; --slab: #111111;
  --t-common: #8A8A93; --t-uncommon: #2F9E6B; --t-rare: #2F6FDE; --t-epic: #8B5CF6;
  --font-display: "Unbounded", sans-serif; --font-sans: "Instrument Sans", ui-sans-serif, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --font-grade: "Departure Mono", "JetBrains Mono", ui-monospace, monospace;
  --track: .14em; --cut: 10px; --cut-s: 7px; --e-out: cubic-bezier(.2, .8, .2, 1);
  --foil: linear-gradient(115deg, #7DE3F4 0%, #A78BFA 22%, #F0ABFC 40%, #E0F2FE 52%, #7DE3F4 66%, #C4B5FD 84%, #7DE3F4 100%);
}
* { box-sizing: border-box; margin: 0 }
[hidden] { display: none !important }
html { scroll-behavior: smooth }
html, body { min-height: 100%; background: var(--bg); color: var(--text); font: 500 15px/22px var(--font-sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; overflow-x: clip; font-synthesis: none }
body { display: flex; flex-direction: column; min-height: 100dvh; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left) }
a { color: inherit }
button { font: inherit; color: inherit }
.sr, .hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
.cut { clip-path: polygon(var(--c, var(--cut)) 0, 100% 0, 100% calc(100% - var(--c, var(--cut))), calc(100% - var(--c, var(--cut))) 100%, 0 100%, 0 var(--c, var(--cut))) }
:focus-visible { outline: 2px solid var(--text); outline-offset: 2px }
.cut:focus-visible, .btn:focus-visible, .chip:focus-visible, .sc:focus-visible { outline: 2px solid currentColor; outline-offset: -5px }
.money { color: var(--money) !important }
.usdc { width: 15px; height: 15px; flex: none }
.strip { position: relative; z-index: 2; height: 28px; overflow: hidden; border-bottom: 1px solid var(--line); background: var(--sunk) }
.strip-track { display: flex; width: max-content; height: 100%; align-items: center; gap: 28px; padding-left: 28px; animation: tick 50s linear infinite; font: 600 10px/12px var(--font-mono); letter-spacing: var(--track); text-transform: uppercase; color: var(--text-2) }
.strip-track span { display: inline-flex; align-items: center; gap: 28px }
.strip-track span::after { content: ""; width: 4px; height: 4px; background: var(--line-2) }
.strip-track img { width: 12px; height: 12px; margin-right: -20px }
.strip-track .tk-slab { gap: 6px; color: var(--text-2) }
.strip-track .tk-slab img { width: 12px; height: 20px; margin-right: 2px; object-fit: cover }
.strip-track .tk-slab b { font: 400 11px/12px var(--font-grade); color: var(--text) }
@keyframes tick { to { transform: translateX(-50%) } }
.top-wrap { position: relative; overflow: hidden }
.top-wrap::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(55% 45% at 50% 34%, rgba(167,139,250,.11), transparent 70%), radial-gradient(40% 35% at 50% 75%, rgba(125,227,244,.06), transparent 70%) }
.hero { position: relative; z-index: 1; width: min(1180px, calc(100% - 32px)); margin: 0 auto; padding: 56px 0 56px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 40px; align-items: center }
.hero-copy { display: flex; flex-direction: column; align-items: flex-start; text-align: left; min-width: 0 }
.hero-copy h1 { font-size: min(60px, 5.1vw); line-height: .96 }
.powered { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; font: 600 10px/12px var(--font-mono); letter-spacing: var(--track); text-transform: uppercase; color: var(--text-3) }
.powered .cc { display: inline-flex; padding: 8px; margin: -8px 0 }
.powered .cc img { display: block; height: 16px; width: auto }
.powered .cc:focus-visible { outline: 2px solid var(--text); outline-offset: 2px }
.hero-stage { position: relative; height: 580px; min-width: 0 }
.hs-glow { position: absolute; inset: 4% -6% 8%; background: url(/l/bg/hero-pokemon.webp) center / cover; opacity: .7; -webkit-mask: radial-gradient(closest-side, #000 50%, transparent); mask: radial-gradient(closest-side, #000 50%, transparent) }
.hs-pack { position: absolute; left: 50%; bottom: 72px; width: auto; height: 340px; filter: drop-shadow(0 24px 30px rgba(0,0,0,.6)) }
.hs-pack.l { translate: -118% 0; rotate: -11deg; z-index: 1 }
.hs-pack.r { translate: 18% 0; rotate: 11deg; z-index: 1 }
.hs-pack.c { height: 400px; bottom: 58px; translate: -50% 0; z-index: 3; animation: hsfloat 6s ease-in-out infinite alternate }
.hs-slab { position: absolute; left: 50%; bottom: 250px; width: 196px; margin: 0; translate: -50% 0; z-index: 2; animation: hsrise 6s ease-in-out infinite alternate }
.hs-slab:not(.on) { visibility: hidden }
.hs-slab img { display: block; width: 100%; height: auto; box-shadow: 0 0 0 2px #8B5CF6, 0 0 44px rgba(139,92,246,.45), 0 24px 30px -10px rgba(0,0,0,.6) }
.hs-floor { position: absolute; left: 50%; bottom: 40px; width: 72%; height: 44px; translate: -50% 0; background: radial-gradient(closest-side, rgba(0,0,0,.7), transparent) }
.hs-cap { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; text-align: center; font: 400 11px/14px var(--font-grade); text-transform: uppercase; color: var(--text-2) }
.hs-cap b { font-weight: 400; color: var(--text) }
@keyframes hsfloat { to { translate: -50% -8px } }
@keyframes hsrise { from { translate: -50% 16px } to { translate: -50% -8px } }
.logo { width: 164px; height: auto; margin-bottom: 26px }
.tag { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 8px; min-height: 22px; padding: 4px 9px; border: 1px solid var(--line-2); background: var(--surface-1); font: 600 10px/12px var(--font-mono); letter-spacing: var(--track); text-transform: uppercase; color: var(--text-2); clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px) }
.dot { display: inline-block; width: 6px; height: 6px; background: var(--text-2); animation: pulse 2.4s ease-in-out infinite }
@keyframes pulse { 50% { opacity: .35 } }
h1 { margin-top: 22px; font: 900 54px/.98 var(--font-display); text-transform: uppercase; letter-spacing: -.01em }
.foil-t { background: var(--foil); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: foil 8s linear infinite }
.lede { margin-top: 18px; max-width: 460px; color: var(--text-2) }
.claim { position: relative; width: min(460px, 100%); margin-top: 28px; padding: 18px; display: grid; gap: 12px; text-align: left; background: var(--surface-1); --c: 14px }
.claim::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--foil); background-size: 200% 100%; animation: foil 6s linear infinite }
.claim.flash { animation: flash .9s var(--e-out) }
@keyframes flash { 30% { background: var(--surface-3) } }
@keyframes foil { to { background-position: 200% 0 } }
.cl-t { font: 700 15px/20px var(--font-display); letter-spacing: .02em; text-transform: uppercase }
.cl-field { display: flex; align-items: center; gap: 10px; height: 54px; padding: 0 6px 0 14px; border: 1px solid var(--line-2); border-radius: 2px; background: var(--sunk) }
.cl-field:focus-within { border-color: var(--text-2); outline: 2px solid var(--text); outline-offset: 2px }
.cl-field svg { width: 18px; height: 18px; flex: none; color: var(--text-3) }
.claim .cl-field input[type=email] { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; background: transparent; color: var(--text); font: 500 15px var(--font-sans); outline: none }
.cl-go { flex: none; height: 42px; padding: 0 18px; border: 0; background: var(--btn); color: var(--on-btn); font: 600 14px var(--font-sans); cursor: pointer; clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px) }
.cl-go:hover:not(:disabled) { background: var(--btn-hi) }
.cl-go:disabled { background: var(--surface-2); color: var(--text-3); cursor: not-allowed }
.claim .cl-field input::placeholder { color: var(--text-3) }
.check { display: flex; min-height: 24px; gap: 10px; align-items: flex-start; font: 500 13px/18px var(--font-sans); color: var(--text-2); cursor: pointer }
.check a { color: var(--text) }
.check input { appearance: none; width: 16px; height: 16px; margin-top: 1px; flex: none; border: 1px solid var(--line-2); background: var(--sunk); border-radius: 1px; display: grid; place-content: center; cursor: pointer }
.check input:checked { background: var(--btn); border-color: var(--btn) }
.check input:checked::after { content: ""; width: 8px; height: 4px; border: 2px solid var(--on-btn); border-top: 0; border-right: 0; transform: translateY(-1px) rotate(-45deg) }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 20px; border: 0; background: var(--btn); color: var(--on-btn); font: 600 15px var(--font-sans); letter-spacing: .01em; text-decoration: none; cursor: pointer; box-shadow: inset 0 1px 0 var(--btn-hi), inset 0 -2px 0 rgba(0,0,0,.16); --c: var(--cut-s); clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); transition: transform .15s var(--e-out), background .15s }
.btn:not(:disabled):hover { background: var(--btn-hi) }
.btn:not(:disabled):active { transform: translateY(1px) }
.btn:disabled { background: var(--surface-2); color: var(--text-3); box-shadow: none; cursor: not-allowed }
.btn.ghost { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2) }
.btn.ghost:disabled { background: transparent; color: var(--text-3); box-shadow: none; outline: 1px dashed var(--line-2); outline-offset: -1px }
.btn.ghost:not(:disabled):hover { background: var(--surface-2) }
.btn.sm { height: 38px; padding: 0 14px; font-size: 14px }
.msg:empty { display: none }
.msg { min-height: 18px; font: 500 13px/18px var(--font-sans); color: var(--text-3) }
.msg.err { color: #FF8A7A } .msg.ok { color: var(--text) }
.stats { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); width: min(820px, 100%); margin: 28px auto 0; background: var(--matte); border: 1px solid var(--line); box-shadow: inset 0 1px 0 rgba(255,255,255,.04); --c: 10px }
.stats > div { display: grid; justify-items: center; align-content: center; gap: 8px; padding: 18px 12px; border-left: 1px solid var(--line) }
.stats > div:first-child { border-left: 0 }
.stats .k { font: 600 10px/12px var(--font-mono); letter-spacing: var(--track); text-transform: uppercase; color: var(--text-3) }
.stats .v { display: inline-flex; align-items: baseline; gap: 8px; font: 900 30px/1 var(--font-display); color: var(--text); font-variant-numeric: tabular-nums }
.stats .v .usdc { width: 22px; height: 22px; align-self: center }
.stats .v small { font: 600 11px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-3) }
.stats .v.money small { color: var(--money) }
.in-line { display: flex; align-items: center; gap: 8px; font: 600 12px/16px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text) }
.in-line[hidden] { display: none }
.hero3d { position: relative; z-index: 1; --hs-top: calc(68px + env(safe-area-inset-top, 0px)); --hs-h: calc(100vh - var(--hs-top)); --hs-x: max(16px, calc((100% - 1180px) / 2)) }
@supports (height: 100svh) { .hero3d { --hs-h: calc(100svh - var(--hs-top)) } }
.hero3d:not(.poster-only) { height: 600vh }
@media (max-width: 600px) { .hero3d:not(.poster-only) { height: 340vh } }
.hero3d-stage { position: sticky; top: var(--hs-top); height: var(--hs-h); overflow: hidden; container-type: inline-size }
.hero3d-poster { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; background: radial-gradient(60% 50% at 50% 46%, rgba(167,139,250,.10), transparent 70%) }
.hero3d-poster img { display: block; height: min(62%, 520px); width: auto; max-width: 72%; object-fit: contain; filter: drop-shadow(0 30px 40px rgba(0,0,0,.6)) }
.hero3d-gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .4s ease-out }
.hero3d.gl-on .hero3d-gl { opacity: 1 }
.hero3d.gl-on .hero3d-poster { opacity: 0; transition: opacity .4s .1s }
.hero3d-sec { position: absolute; left: var(--hs-x); bottom: 10%; max-width: min(560px, 86%); opacity: 0; will-change: opacity, transform, filter; pointer-events: none }
.hero3d-sec.is-first { opacity: 1 }
.hero3d-sec.is-right { left: auto; right: var(--hs-x); text-align: right }
.hero3d-sec.is-top { bottom: auto; top: 8% }
.hero3d-sec.is-end.is-on { pointer-events: auto }
.hero3d-k { margin: 0 0 10px; font: 600 12px/1 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--text-3) }
.hero3d-sec h2 { margin: 0 0 12px; font: 700 clamp(28px, min(3.6vw, 6cqw), 56px)/1.02 var(--font-display); letter-spacing: -.02em; color: var(--text) }
.hero3d-p { margin: 0; font-size: clamp(15px, 1.15vw, 18px); line-height: 1.45; color: var(--text-2) }
.hero3d-cta-w { display: inline-block; margin-top: 22px; filter: drop-shadow(0 0 22px rgba(167,139,250,.35)) }
.hero3d-cta { min-width: 200px }
.hero3d-alt { display: block; width: fit-content; margin-top: 8px; padding: 10px 0; font: 600 14px/20px var(--font-sans); color: var(--text-2); text-decoration: none }
.hero3d-alt:hover { color: var(--text) }
.hero3d-legal { margin: 12px 0 0; font-size: 13px; color: var(--text-3) }
.hero3d-rail { position: absolute; right: 18px; top: 50%; width: 2px; height: 120px; margin-top: -60px; background: var(--line) }
.hero3d-rail i { position: absolute; left: 0; top: 0; width: 2px; height: 24px; background: var(--text-2) }
@media (max-width: 600px) {
  .hero3d-sec, .hero3d-sec.is-right { left: 16px; right: 16px; text-align: left; bottom: 6%; max-width: none }
  .hero3d-sec.is-top { top: 6% }
  .hero3d-sec h2 { font-size: clamp(28px, 8.4vw, 38px) }
  .hero3d-rail { display: none }
}
.hero3d.poster-only .hero3d-stage { position: relative; top: auto; height: auto; overflow: visible; padding: 8px var(--hs-x) 32px; display: flex; flex-direction: column; gap: 30px }
.hero3d.poster-only .hero3d-poster { position: relative; inset: auto; display: flex; align-items: center; justify-content: center; height: calc(var(--hs-h) * .66); min-height: 300px; opacity: 1 }
.hero3d.poster-only .hero3d-poster img { height: min(calc(var(--hs-h) * .58), 520px); min-height: 264px }
.hero3d.poster-only .hero3d-sec { position: relative; inset: auto; opacity: 1; transform: none; filter: none; text-align: left; max-width: 560px; pointer-events: auto }
.hero3d.poster-only .hero3d-gl, .hero3d.poster-only .hero3d-rail { display: none }
.hero3d.no-tr, .hero3d.no-tr * { transition: none !important }
@media (prefers-reduced-motion: reduce), (scripting: none) {
  .hero3d[data-mode="first-frame"]:not(.poster-only) { height: auto }
  .hero3d[data-mode="first-frame"] .hero3d-stage { position: relative; top: auto; height: auto; overflow: visible; padding: 8px var(--hs-x) 32px; display: flex; flex-direction: column; gap: 30px }
  .hero3d[data-mode="first-frame"] .hero3d-poster { position: relative; inset: auto; display: flex; align-items: center; justify-content: center; height: calc(var(--hs-h) * .66); min-height: 300px; opacity: 1 }
  .hero3d[data-mode="first-frame"] .hero3d-poster img { height: min(calc(var(--hs-h) * .58), 520px); min-height: 264px }
  .hero3d[data-mode="first-frame"] .hero3d-sec { position: relative; inset: auto; opacity: 1; transform: none; filter: none; text-align: left; max-width: 560px; pointer-events: auto }
  .hero3d[data-mode="first-frame"] .hero3d-gl, .hero3d[data-mode="first-frame"] .hero3d-rail { display: none }
}
.livesec { position: relative; z-index: 1; padding: 64px 16px 56px; text-align: center; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--matte-bg) }
.oddsp { width: min(820px, 100%); margin: 12px auto 0; padding: 20px; display: grid; gap: 14px; text-align: left; background: var(--matte); border: 1px solid var(--line); box-shadow: inset 0 1px 0 rgba(255,255,255,.04); clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px) }
.op-h { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px }
.op-t { font: 700 15px/20px var(--font-display); letter-spacing: .02em; text-transform: uppercase; color: var(--text) }
.op-s { font: 600 10px/14px var(--font-mono); letter-spacing: var(--track); text-transform: uppercase; color: var(--text-3) }
.op-bar { height: 8px }
.op-tiers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 0; list-style: none }
.op-tiers li { display: grid; align-content: start; gap: 6px; padding: 14px 12px 12px; background: var(--matte-bg); border: 1px solid var(--line); border-top: 2px solid var(--tc) }
.op-tiers .k { display: inline-flex; align-items: center; gap: 6px; font: 600 10px/12px var(--font-mono); letter-spacing: var(--track); text-transform: uppercase; color: var(--text-2) }
.op-tiers .k::before { content: ""; width: 6px; height: 6px; background: var(--tc) }
.op-tiers b { font: 900 30px/1 var(--font-display); color: var(--text); font-variant-numeric: tabular-nums }
.op-tiers .c { font: 500 12px/16px var(--font-sans); color: var(--text-2) }
.op-tiers .l { font: 600 11px/14px var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--text-3) }
.op-f { color: var(--text-3) }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font: 600 11px/14px var(--font-mono); letter-spacing: var(--track); text-transform: uppercase; color: var(--text-2) }
.big { margin-top: 14px; font: 900 clamp(56px, 11vw, 132px)/.95 var(--font-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums }
.big span { background: var(--foil); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent }
.big-k { margin-top: 10px; font: 700 clamp(14px, 2.2vw, 20px)/1.2 var(--font-display); text-transform: uppercase; letter-spacing: .02em }
.big-s { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 14px; margin-top: 16px; font: 500 12px/16px var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--text-3) }
.big-s b { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; color: var(--text) }
.feat { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; width: min(460px, 100%); margin-top: 12px; padding: 10px 14px 10px 13px; background: var(--surface-1); border: 1px solid var(--line); color: var(--text); text-align: left; text-decoration: none; --c: 12px; transition: background .15s, border-color .15s }
.feat::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--key, var(--line-2)) }
.feat-cv { display: grid; place-items: center; width: 56px; height: 76px; background: var(--sunk) }
.feat-cv img { display: block; width: auto; height: 70px; filter: drop-shadow(0 6px 8px rgba(0,0,0,.5)) }
.feat-tx { display: grid; gap: 4px; min-width: 0 }
.feat-k { font: 600 10px/12px var(--font-mono); letter-spacing: var(--track); text-transform: uppercase; color: var(--text-3) }
.feat-n { font: 700 16px/20px var(--font-display); letter-spacing: .01em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.feat-d { font: 500 12px/16px var(--font-sans); color: var(--text-2) }
.feat-go { display: grid; justify-items: end; gap: 8px }
.feat .price { font-size: 16px; line-height: 20px }
.feat .btn { pointer-events: none }
.feat[data-state="wait"] .feat-tx, .feat[data-state="wait"] .feat-go, .feat[data-state="wait"] .feat-cv img { visibility: hidden }
.feat:focus-visible { outline: 2px solid var(--text); outline-offset: -5px }
@media (hover: hover) and (pointer: fine) { .feat:hover { background: var(--surface-2); border-color: var(--line-2) } .feat:hover .btn { background: var(--btn-hi) } }
@media (scripting: none) { .feat { display: none } }
@media (max-width: 760px) { .feat { order: 7 } }
@media (max-width: 479px) {
  .feat { gap: 12px; padding: 9px 12px 9px 11px }
  .feat-cv { width: 46px; height: 64px } .feat-cv img { height: 58px }
  .feat-n { font-size: 15px }
  .feat .btn { padding: 0 12px }
  .feat-in, .feat-s { display: none }
}
@media (max-width: 379px) { .feat-n { font-size: 14px; letter-spacing: 0 } }
.pl { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; padding: 0; list-style: none }
.pl-i { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; row-gap: 2px; align-items: center; padding: 12px 14px; background: var(--surface-1); border: 1px solid var(--line); border-left: 3px solid var(--tc); --c: 8px }
.pl-g { grid-row: 1 / 3; padding: 7px 8px; background: var(--sunk); font: 400 13px/1 var(--font-grade); color: var(--text); white-space: nowrap }
.pl-n, .pl-m { grid-column: 2; min-width: 0 }
.pl-n { font: 600 14px/18px var(--font-sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.pl-m { font: 500 11px/14px var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.steps.is-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) }
@media (max-width: 1023px) { .steps.is-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (max-width: 760px) { .steps.is-4 { grid-template-columns: minmax(0, 1fr) } }
.sec { position: relative; z-index: 1; width: min(1180px, calc(100% - 32px)); margin: 0 auto; padding: 64px 0 8px }
.sec-h { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 20px }
.sec-h .num { font: 900 44px/1 var(--font-display); color: transparent; -webkit-text-stroke: 1px var(--text-3); flex: none }
.sec-h h2 { font: 700 17px/22px var(--font-display); text-transform: uppercase; letter-spacing: .02em }
.sec-h p { margin-top: 4px; max-width: 640px; font: 500 14px/20px var(--font-sans); color: var(--text-2) }
.pk { --pw: 150px; position: relative; width: var(--pw); aspect-ratio: 5 / 8; flex: none; display: grid; grid-template-rows: auto 1fr auto auto auto; justify-items: center; padding: calc(var(--pw) * .2) calc(var(--pw) * .08) calc(var(--pw) * .19); color: #fff; text-align: center;
  background: radial-gradient(90% 60% at 50% 38%, color-mix(in srgb, var(--key) 34%, transparent), transparent 70%), linear-gradient(165deg, color-mix(in srgb, var(--key) 30%, #141417) 0%, #121215 52%, color-mix(in srgb, var(--key) 16%, #0D0D0F) 100%);
  --z: calc(var(--pw) * .055);
  -webkit-mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / calc(var(--z) * 2) 51% repeat-x, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / calc(var(--z) * 2) 51% repeat-x;
  mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / calc(var(--z) * 2) 51% repeat-x, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / calc(var(--z) * 2) 51% repeat-x;
  filter: drop-shadow(0 18px 24px rgba(0,0,0,.55)) }
.pk::before, .pk::after { content: ""; position: absolute; left: 0; right: 0; height: 9%; background: repeating-linear-gradient(90deg, rgba(255,255,255,.16) 0 1px, transparent 1px 4px), color-mix(in srgb, var(--key) 40%, #1a1a1e) }
.pk::before { top: 0 } .pk::after { bottom: 0 }
.pk .sheen { position: absolute; inset: 0; background: var(--foil); background-size: 300% 100%; mix-blend-mode: soft-light; opacity: .55; animation: foil 7s linear 1; pointer-events: none }
.pk.cover { display: block; padding: 0; aspect-ratio: 440 / 688; background: none; -webkit-mask: none; mask: none; filter: drop-shadow(0 18px 24px rgba(0,0,0,.55)) }
.pk.cover::before, .pk.cover::after { display: none }
.pk.cover img { display: block; width: 100%; height: 100%; object-fit: contain }
.pk.cover .sheen { -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; opacity: .28; mix-blend-mode: overlay }
.pk .pk-top { position: relative; font: 600 calc(var(--pw) * .052)/1.2 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.7) }
.pk .pk-game { position: relative; font: 700 calc(var(--pw) * .06)/1.2 var(--font-display); letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.82) }
.pk .pk-name { position: relative; margin-top: 2px; font: 900 calc(var(--pw) * .12)/1 var(--font-display); text-transform: uppercase; letter-spacing: -.01em }
.pk .pk-foot { position: relative; margin-top: calc(var(--pw) * .05); font: 500 calc(var(--pw) * .048)/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.6) }
.pack-tabs { margin-bottom: 18px }
.grp { display: flex; align-items: center; gap: 8px; margin: 26px 0 12px; font: 700 13px/18px var(--font-display); letter-spacing: .04em; text-transform: uppercase }
.grp:first-child { margin-top: 0 }
.grp span { display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 6px; background: var(--surface-2); font: 600 11px/1 var(--font-mono); color: var(--text-2) }
.grp-fine { margin-top: 14px }
.sport-tabs { margin: 0 0 12px }
.packs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px }
.packs.skel .tile { display: block; height: 400px; background: var(--surface-1) }
.packs-msg { padding: 28px 0; color: var(--text-2) }
@media (max-width: 1099px) { .packs { grid-template-columns: repeat(3, minmax(0, 1fr)) } }
.tile { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; min-width: 0; background: var(--surface-1); border: 1px solid var(--line); box-shadow: inset 0 1px 0 rgba(255,255,255,.04); --c: 10px; transition: transform .18s var(--e-out), background .18s }
.tile .well { position: relative; height: 236px; margin: 6px 6px 0; display: grid; place-items: center; overflow: hidden; background: var(--sunk) }
.tile .bdp { position: absolute; inset: 0; background: var(--bdi) center / cover; transform: scale(1.25) }
.tile .bdp::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(0,0,0,.1), rgba(0,0,0,.62)) }
.tile .well .pk { --pw: 124px; z-index: 2; transition: transform .22s var(--e-out) }
.tile .body { display: flex; flex-direction: column; gap: 10px; padding: 12px 12px 14px }
.tile .body .row { margin-top: auto }
.eb { font: 700 11px/14px var(--font-display); letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.tile h4 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden }
.tile h4 { font: 600 15px/19px var(--font-sans) }
.row { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 33px; padding-top: 10px; border-top: 1px solid var(--line) }
.price { display: inline-flex; align-items: center; gap: 6px; font: 700 17px/22px var(--font-mono); font-variant-numeric: tabular-nums }
.price small { font: 600 11px/14px var(--font-mono); letter-spacing: .06em }
.per { font: 500 11px/14px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-3) }
.odds { display: flex; height: 6px; gap: 2px; background: var(--sunk) }
.odds i { width: var(--w); min-width: 3px; background: var(--tc) }
.odds-k { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 0; list-style: none; font: 500 11px/14px var(--font-mono); letter-spacing: .02em; color: var(--text-2) }
.odds-k li { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap }
.odds-k li::before { content: ""; width: 6px; height: 6px; background: var(--tc) }
.odds-k b { font-weight: 600; color: var(--text) }
.tile .acts { display: grid; gap: 6px }
.tile .acts .btn { width: 100% }
.fine { font: 500 11px/15px var(--font-mono); letter-spacing: .02em; color: var(--text-3) }
@media (hover: hover) and (pointer: fine) {
  .tile:not(.idle):hover { transform: translateY(-2px); background: var(--surface-2); border-color: var(--line-2) }
  .tile:not(.idle):hover .well .pk { transform: scale(1.04) rotate(-2deg) }
}
.stage { position: relative; min-height: 600px; display: grid; grid-template-rows: auto 1fr; background: radial-gradient(60% 55% at 50% 52%, color-mix(in srgb, var(--key, #A78BFA) 16%, transparent), transparent 70%), #0E0E10; border: 1px solid var(--line); --c: 16px; overflow: hidden }
.demo-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 14px 14px 0; position: relative; z-index: 2 }
.chip { height: 32px; padding: 0 12px; border: 1px solid var(--line-2); background: var(--surface-1); font: 600 11px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); cursor: pointer; clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px) }
.chip[aria-pressed=true] { background: var(--btn); border-color: var(--btn); color: var(--on-btn) }
.chip b { font-weight: 700 }
.scene { position: relative; display: grid; place-items: center; padding: 18px 16px 24px; text-align: center }
.scene > * { animation: in .45s var(--e-out) both }
@keyframes in { from { opacity: 0; transform: translateY(14px) scale(.98) } }
.tap { display: grid; justify-items: center; gap: 18px; padding: 0; border: 0; background: none; cursor: pointer }
.tap .pk { --pw: 210px; animation: bob 3.2s ease-in-out infinite }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-1.5deg) } 50% { transform: translateY(-8px) rotate(1.5deg) } }
.tap:hover .pk { animation-duration: 1.2s }
.hint { font: 600 11px/14px var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--text-2) }
.hint::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 8px; background: var(--text-2); animation: pulse 1.6s ease-in-out infinite; vertical-align: 1px }
.tearing .pk { animation: tear .6s var(--e-out) forwards }
@keyframes tear { 30% { transform: translateY(-6px) rotate(-3deg) scale(1.03) } 60% { transform: translateY(4px) rotate(3deg) scale(1.05) } 100% { transform: translateY(40px) scale(.9); opacity: 0 } }
.hold { position: relative; z-index: 1; display: grid; justify-items: center; gap: 12px; padding: 0; border: 0; background: none; cursor: pointer; touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent }
.hold:focus-visible { outline: 2px solid var(--text); outline-offset: 6px }
.po { position: relative; display: block; width: 260px; height: 400px }
.po > * { position: absolute; display: block }
.po-pack { left: 25px; top: 52px; width: 210px; height: 328px; z-index: 3; transform-origin: 50% 100% }
.po-piece { position: absolute; inset: 0; display: block }
.po-piece img { display: block; width: 100%; height: 100%; object-fit: fill; pointer-events: none; filter: drop-shadow(0 18px 24px rgba(0,0,0,.55)) }
.po-piece .pk { --pw: 210px }
.po-top { transform-origin: 196px 27px }
.po-seam { position: absolute; inset: 0; width: 210px; height: 328px; overflow: visible; opacity: 0 }
.po-seam .g { fill: none; stroke: rgba(var(--glow, 255,255,255), .55); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round }
.po-seam .c { fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round }
.po-tip { position: absolute; left: 0; top: 0; width: 26px; height: 10px; margin: -5px 0 0 -13px; border-radius: 50%; background: radial-gradient(closest-side, #fff 0 30%, rgba(var(--glow, 255,255,255), .7) 55%, transparent); opacity: 0 }
.po-flecks i { position: absolute; left: 0; top: 0; width: 2px; height: 2px; background: #F5F1E8; opacity: 0 }
.po-leak { left: 35px; top: 18px; width: 190px; height: 64px; z-index: 2; transform-origin: 50% 100%; background: radial-gradient(50% 60% at 50% 92%, rgba(255,255,255,.95) 0 10%, rgba(var(--glow, 255,255,255), .6) 34%, rgba(var(--glow, 255,255,255), 0) 72%); opacity: 0 }
.po-slab { left: 30px; top: 30px; width: 200px; height: 333px; z-index: 1; transform: translate3d(0, 40px, 0) scale(.86); visibility: hidden }
.po.opening .po-slab { visibility: visible }
.po-slab .back { width: 100%; height: 100% }
.po-rim, .po-ring { position: absolute; pointer-events: none; opacity: 0 }
.po-rim { inset: -1px; box-shadow: 0 0 0 3px var(--tc), 0 0 26px 4px rgba(var(--glow, 255,255,255), .55), inset 0 0 18px rgba(var(--glow, 255,255,255), .45) }
.po-ring { inset: -7px; box-shadow: 0 0 0 2px var(--tc), 0 0 0 3px rgba(255,255,255,.55), 0 0 34px 6px rgba(var(--glow, 255,255,255), .55) }
.po-shadow { left: 50px; right: 50px; bottom: 6px; height: 26px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.7), transparent); opacity: .75 }
.po-charge { left: 50%; top: 52%; width: 360px; height: 360px; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--key, #A78BFA) 60%, transparent), transparent 72%); opacity: 0; pointer-events: none }
.po-dim { position: absolute; inset: 0; z-index: 0; background: #060607; opacity: 0; pointer-events: none }
.hold-bar { position: relative; display: block; width: 180px; height: 4px; overflow: hidden; background: var(--surface-3) }
.hold-bar i { position: absolute; inset: 0; background: var(--text); transform: scaleX(0); transform-origin: 0 50% }
.hold.flipping .back { animation: flip .5s var(--e-out) forwards }
.hold .hint:empty { visibility: hidden }
.back { position: relative; width: 210px; aspect-ratio: 3 / 5; display: grid; grid-template-rows: auto 1fr auto; padding: 10px; background: linear-gradient(160deg, #1b1b1f, var(--slab) 60%); border: 1px solid rgba(255,255,255,.14); border-radius: 2px; box-shadow: 0 30px 50px -18px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.08) }
.back::after { content: ""; position: absolute; inset: -1px; padding: 1.5px; background: var(--foil); background-size: 200% 100%; animation: foil 5.5s linear 1; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); pointer-events: none }
.back .lbl { display: flex; justify-content: space-between; align-items: center; gap: 8px; height: 34px; padding: 0 8px; background: #0A0A0B; border: 1px solid rgba(255,255,255,.1); font: 600 9px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-2) }
.bc { display: inline-block; height: 14px; flex: none; background: var(--bc); color: var(--text-2) }
.back .mk { align-self: center; justify-self: center; width: 60%; aspect-ratio: 1; background: url(/l/brand/playtcg-C-mark-palette-dark.svg) center / contain no-repeat }
.back .ft { font: 500 9px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); padding: 4px 0 2px }
.tap .back { animation: none }
.flipping .back { animation: flip .5s var(--e-out) forwards }
@keyframes flip { to { transform: rotateY(90deg) scale(1.04) } }
.meta { display: grid; gap: 4px; justify-items: center }
.meta > div { display: grid; gap: 2px; justify-items: center; opacity: 0; animation: up .5s var(--e-out) forwards; animation-delay: calc(var(--i) * .42s) }
@keyframes up { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } }
.meta .k { margin-top: 10px; font: 600 10px/12px var(--font-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--text-3) }
.meta .v { font: 900 34px/1.05 var(--font-display); text-shadow: 0 0 22px rgba(255,255,255,.18) }
.meta .v.gr { font: 400 44px/1 var(--font-grade) }
.tier { display: inline-flex; align-items: center; height: 40px; margin-top: 18px; padding: 0 22px; background: color-mix(in srgb, var(--tc) 72%, #000); color: #fff; font: 700 14px/1 var(--font-display); letter-spacing: .1em; text-transform: uppercase; box-shadow: 0 0 34px color-mix(in srgb, var(--tc) 70%, transparent); clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px) }
.tier.sm { height: 22px; margin: 0; padding: 0 6px; font-size: 9px; letter-spacing: .04em; box-shadow: none; clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px) }
.result { display: grid; justify-items: center; gap: 16px; width: min(440px, 100%) }
.result .eyebrow { color: var(--text-3) }
.result h3 { margin-top: -8px; font: 900 28px/1.05 var(--font-display); text-transform: uppercase }
.plate { position: relative; display: block; width: 230px; padding: 8px; background: var(--slab); border-radius: 2px; box-shadow: 0 0 0 2px var(--tc), 0 0 44px color-mix(in srgb, var(--tc) 45%, transparent), 0 30px 50px -18px rgba(0,0,0,.8) }
.plate img { display: block; width: 100%; height: auto }
.epic .plate { box-shadow: 0 0 0 1.5px transparent, 0 0 54px rgba(139,92,246,.55), 0 30px 50px -18px rgba(0,0,0,.8) }
.epic .plate::after { content: ""; position: absolute; inset: -2px; padding: 2px; background: var(--foil); background-size: 200% 100%; animation: foil 5.5s linear infinite; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); pointer-events: none }
.landing .plate { animation: land .6s var(--e-out) both }
@keyframes land { from { transform: rotateY(-90deg) scale(1.04) } to { transform: none } }
.dl { display: grid; grid-template-columns: 1.3fr 1fr .8fr 1.3fr; width: 100%; background: var(--surface-1); border: 1px solid var(--line); text-align: left; --c: 8px }
.dl > div { display: grid; gap: 4px; padding: 10px 12px; border-left: 1px solid var(--line); min-width: 0 }
.dl > div:first-child { border-left: 0 }
.dl dt { font: 600 10px/12px var(--font-mono); letter-spacing: var(--track); text-transform: uppercase; color: var(--text-3) }
.dl dd { margin: 0; display: flex; align-items: center; gap: 6px; font: 600 13px/18px var(--font-mono); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.dl dd.gr { font: 400 11px/18px var(--font-grade) }
.verify { font: 600 12px/16px var(--font-mono); letter-spacing: .04em; color: var(--text-2) }
.verify:hover { color: var(--text) }
.result .acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; width: 100% }
.result .acts .btn { flex: 1 1 180px }
.result .fine { max-width: 420px }
.tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px }
.tabs .chip span { margin-left: 6px; color: var(--text-3) }
.more { display: flex; width: min(320px, 100%); margin: 14px auto 0 }
.more[hidden] { display: none }
.tabs .chip[aria-pressed=true] span { color: #55555D }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px }
.sc { position: relative; display: grid; align-content: start; gap: 6px; padding: 8px 8px 10px; background: var(--surface-1); border: 1px solid var(--line); text-decoration: none; --c: 10px; overflow: hidden; transition: transform .18s var(--e-out), background .18s }
.sc .bdp { position: absolute; inset: 0 0 auto; height: 70%; background: var(--bdi) center / cover; opacity: .55; -webkit-mask: linear-gradient(#000 40%, transparent); mask: linear-gradient(#000 40%, transparent) }
.sc .ph { position: relative; display: grid; place-items: center; padding: 10px 14px 8px }
.sc .ph img { width: 100%; height: auto; aspect-ratio: 3 / 5; object-fit: contain; display: block }
.sc .tb { position: relative; height: 3px; background: var(--tc) }
.sc .g { position: relative; display: flex; justify-content: space-between; align-items: baseline; gap: 6px; font: 400 11px/14px var(--font-grade); color: var(--text) }
.sc .g em { font: 600 10px/14px var(--font-mono); font-style: normal; letter-spacing: .08em; text-transform: uppercase; color: color-mix(in srgb, var(--tc) 58%, #fff) }
.sc .n { position: relative; font: 600 13px/17px var(--font-sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.sc .s { position: relative; font: 500 11px/15px var(--font-sans); color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.sc .c { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 6px; font: 500 10px/14px var(--font-mono); letter-spacing: .04em; color: var(--text-3) }
.sc .c .bc { height: 10px; opacity: .8 }
.sc.epic::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1.5px; background: var(--foil); background-size: 200% 100% }
@media (hover: hover) and (pointer: fine) { .sc.epic:hover::after { animation: foil 5.5s linear 1 } }
@media (hover: hover) and (pointer: fine) { .sc:hover { transform: translateY(-2px); background: var(--surface-2); border-color: var(--line-2) } .sc:hover .c, .sc:hover .s { color: var(--text-2) } }
@media (max-width: 1023px) { .sc .c .bc { display: none } }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 0; list-style: none }
.steps li { display: grid; align-content: start; gap: 8px; padding: 18px; background: var(--surface-1); border: 1px solid var(--line) }
.steps .k { font: 900 26px/1 var(--font-display); color: transparent; -webkit-text-stroke: 1px var(--text-3) }
.steps h3 { font: 700 15px/20px var(--font-display); text-transform: uppercase; letter-spacing: .02em }
.steps p { color: var(--text-2); font-size: 14px; line-height: 20px }
.site-h { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; display: flex; align-items: center; gap: 16px; height: 68px; padding: 0 24px; background: rgba(28,28,31,.88); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line) }
.sh-logo img { display: block; width: 164px; height: auto }
.sh-nav { display: flex; gap: 2px; margin-left: 10px }
.sh-nav a { padding: 10px 10px; font: 600 13px/1 var(--font-sans); color: var(--text-2); text-decoration: none; white-space: nowrap }
.sh-nav a:hover { color: var(--text) }
.sh-acts { display: flex; align-items: center; gap: 8px; margin-left: auto }
.sh-x { display: grid; place-items: center; width: 40px; height: 40px; background: var(--surface-1); border: 1px solid var(--line-2); clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px) }
.sh-x:hover { background: var(--surface-2) }
.sh-x img { width: 16px; height: 16px }
#sh-claim, #sh-app { height: 40px; white-space: nowrap }
.site-h > *, .sh-nav a, .sh-acts > * { flex: none }
@media (max-width: 1023px) { #sh-claim { display: none } }
html { scroll-padding-top: calc(80px + env(safe-area-inset-top, 0px)) }
.xbtn { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--text); font: 600 13px/1 var(--font-sans) }
.xbtn img, .xlink img, .end-acts img { width: 14px; height: 14px; flex: none }
.xfollow { display: flex; justify-content: center; align-items: center; gap: 10px; width: min(460px, 100%); height: 50px; margin-top: 10px; padding: 0 16px; background: var(--btn); color: var(--on-btn); font: 600 14px/1 var(--font-sans); text-decoration: none; --c: 10px; transition: background .15s }
.xfollow svg { width: 16px; height: 16px; flex: none }
.xfollow:hover { background: var(--btn-hi) }
.xfollow:focus-visible { outline: 2px solid var(--on-btn); outline-offset: -5px }
.end-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 8px }
.end-acts .btn { min-width: 220px }
.xlink { gap: 6px }
.faq { display: grid; gap: 8px; max-width: 820px }
.faq details { background: var(--surface-1); border: 1px solid var(--line); --c: 8px }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer; list-style: none; font: 700 14px/20px var(--font-display); letter-spacing: .02em; text-transform: uppercase }
.faq summary::-webkit-details-marker { display: none }
.faq summary::after { content: "+"; flex: none; font: 600 18px/1 var(--font-mono); color: var(--text-2) }
.faq details[open] summary::after { content: "–" }
.faq details p { padding: 0 16px 16px; color: var(--text-2); font-size: 14px; line-height: 21px }
.faq details a { color: var(--text) }
.end { position: relative; z-index: 1; width: min(1180px, calc(100% - 32px)); margin: 64px auto 56px; padding: 44px 20px; display: grid; justify-items: center; gap: 12px; text-align: center; background: radial-gradient(60% 90% at 50% 0%, rgba(167,139,250,.12), transparent 70%), var(--surface-1); border: 1px solid var(--line); --c: 16px }
.end h2 { font: 900 clamp(24px, 4vw, 38px)/1.05 var(--font-display); text-transform: uppercase }
.end p { max-width: 520px; color: var(--text-2) }
.end .btn { min-width: 220px }
.foot { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 24px; padding: 16px 24px; border-top: 1px solid var(--line); background: var(--sunk); font: 500 11px/14px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-3) }
.foot img { height: 20px; width: auto; opacity: .9 }
.foot .flogo { width: 164px; height: auto; opacity: 1 }
.foot nav { display: flex; flex-wrap: wrap; gap: 0 18px } .foot nav a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none } .foot nav a:hover { color: var(--text) }
.foot .foot-pw { flex-basis: 100%; flex-wrap: wrap; justify-content: flex-end; row-gap: 6px; margin: 0; padding-top: 12px; border-top: 1px solid var(--line) }
.foot .tm { flex-basis: 100%; max-width: 820px; font: 500 11px/16px var(--font-sans); letter-spacing: 0; text-transform: none; color: var(--text-3) }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; padding: 10px 14px; background: var(--btn); color: var(--on-btn); font: 600 14px var(--font-sans); text-decoration: none }
.skip:focus { top: 12px }
.off *, .off *::before, .off *::after, .strip:hover .strip-track, .strip.paused .strip-track { animation-play-state: paused !important }
.legal .hero { text-align: left; align-items: stretch; width: min(720px, calc(100% - 32px)); flex: 1 }
.legal h1 { font-size: 38px; margin-top: 0 } .legal p { margin-top: 14px; color: var(--text-2) } .legal b { color: var(--text) }
@media (max-width: 1023px) {
  .hero-copy h1 { font-size: min(60px, 7.4vw) }
  .hero { grid-template-columns: minmax(0, 1fr); padding-top: 28px }
  .hero-stage { order: -1; height: 400px }
  .hero-copy { align-items: center; text-align: center }
  .hs-pack { height: 230px; bottom: 50px } .hs-pack.c { height: 270px; bottom: 40px }
  .hs-slab { width: 132px; bottom: 165px }
  .foot .foot-pw { justify-content: center }
}
@media (max-width: 760px) {
  .site-h { padding: 0 12px; gap: 8px } .sh-logo { margin-right: auto } .sh-nav, .sh-acts { margin-left: 0 } .sh-nav a[href^="#"], .sh-x { display: none }
  .sh-nav a { display: inline-flex; align-items: center; height: 40px } #sh-app { padding: 0 12px }
  .hero { display: flex; flex-direction: column; align-items: center; gap: 0 }
  .hero-copy { display: contents }
  .hero-copy .logo { order: 1; margin-bottom: 14px } .powered { order: 2 } .hero-stage { order: 3; width: 100%; height: 300px; margin-top: 6px }
  .hero-copy h1 { order: 4; font-size: min(38px, 9.8vw); margin-top: 12px; text-align: center } .lede { order: 5; text-align: center } #claim { order: 6 } .xfollow { order: 7 }
  .hs-pack { height: 176px; bottom: 44px } .hs-pack.c { height: 214px; bottom: 34px }
  .hs-slab { width: 106px; bottom: 116px }
  .livesec { padding: 48px 16px 40px }
  .stats { grid-auto-flow: row; grid-template-columns: 1fr 1fr } .stats > div { padding: 14px 8px; border-left: 0 } .stats > div:nth-child(even) { border-left: 1px solid var(--line) }
  .stats > div:nth-child(n+3) { border-top: 1px solid var(--line) } .stats:has(#hy-line[hidden]) > div:nth-child(3) { grid-column: 1 / -1 } .stats .v { font-size: 24px }
  .oddsp { padding: 14px } .op-tiers { grid-template-columns: 1fr 1fr } .op-tiers b { font-size: 26px }
  .sec { padding-top: 48px }
  .sec-h .num { font-size: 26px }
  .sec-h h2 { font-size: 13px; line-height: 18px }
  .packs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px }
  .tile .well { height: 196px }
  .tile .well .pk { --pw: 100px }
  .tile .body { padding: 10px 10px 12px; gap: 8px }
  .tile h4 { font-size: 14px; line-height: 18px }
  .price { font-size: 15px }
  .odds-k { font-size: 10px; gap: 2px 8px }
  .stage { min-height: 560px }
  .tap .pk { --pw: 176px } .back { width: 176px } .plate { width: 196px }
  .po { scale: .88; margin: -24px 0 }
  .meta .v { font-size: 26px } .meta .v.gr { font-size: 33px }
  .dl { grid-template-columns: repeat(2, 1fr) } .dl > div:nth-child(3) { border-left: 0 } .dl > div:nth-child(n+3) { border-top: 1px solid var(--line) }
  .grid { grid-template-columns: repeat(2, 1fr); gap: 8px }
  .steps { grid-template-columns: 1fr }
  .foot { justify-content: center; text-align: center }
}
@media (max-width: 389px) { .site-h { gap: 6px } .sh-nav a { padding: 0 6px } #sh-app { padding: 0 10px } }
@media (max-width: 359px) { .sh-nav { display: none } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .01ms !important }
}