@font-face { font-family: Unbounded; src: url(/fonts/unbounded.woff2) format('woff2'); font-weight: 200 900; font-display: swap; }
@font-face { font-family: Geist; src: url(/fonts/geist.woff2) format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: Mono; src: url(/fonts/mono.woff2) format('woff2'); font-weight: 100 800; font-display: swap; }

/* one theme per page, follows the system. Accent: cobalt. Holo foil only on card frames. */
:root {
  --bg: #f1f2f5; --surface: #fbfbfd; --sunk: #e6e8ee; --ink: #12141a; --ink2: #555b69; --line: #d7dae3;
  --accent: #2f4bff; --accent-ink: #fff; --accent-soft: #e3e7ff;
  --ok: #0f7a4f; --ok-soft: #dcf3e8; --warn: #9a5b00; --warn-soft: #fff0d6;
  --holo: linear-gradient(125deg, #7cf3ff 0%, #b48bff 28%, #ff9ad5 48%, #ffd166 68%, #7cf3ff 100%);
  --shadow: 0 1px 2px rgb(18 20 26 / .06), 0 8px 24px rgb(18 20 26 / .06);
  --r: 16px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0d0f13; --surface: #15181e; --sunk: #1c2028; --ink: #eef0f5; --ink2: #9aa1b0; --line: #262b35;
    --accent: #6d81ff; --accent-ink: #0d0f13; --accent-soft: #1d2348;
    --ok: #4fd39a; --ok-soft: #10291f; --warn: #ffbf5e; --warn-soft: #2d2210;
    --shadow: 0 1px 2px rgb(0 0 0 / .3), 0 10px 30px rgb(0 0 0 / .35);
  }
}
* { box-sizing: border-box; }
html, body { overflow-x: clip; margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.55 Geist, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
.mono { font-family: Mono, ui-monospace, monospace; }
.ic { width: 1.1em; height: 1.1em; vertical-align: -0.18em; fill: currentColor; flex: none; }
h1, h2, h3, .display { font-family: Unbounded, Geist, sans-serif; letter-spacing: -0.02em; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* header */
.top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 28px; height: 68px; padding: 0 max(20px, calc((100vw - 1240px) / 2)); background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 10px; font-family: Unbounded, sans-serif; font-weight: 700; font-size: 20px; letter-spacing: -0.03em; text-decoration: none; }
.brand.small { font-size: 16px; }
.mark { width: 22px; height: 30px; border-radius: 5px; background: var(--holo); transform: rotate(-8deg); position: relative; box-shadow: var(--shadow); }
.brand.small .mark { width: 16px; height: 22px; border-radius: 4px; }
.mark::after { content: ''; position: absolute; inset: 4px; border-radius: 3px; background: var(--bg); }
.brand.small .mark::after { inset: 3px; border-radius: 2px; }
.top nav { display: flex; gap: 2px; flex: 1; }
.top nav a { text-decoration: none; padding: 8px 14px; border-radius: 99px; font-weight: 500; color: var(--ink2); font-size: 15px; }
.top nav a:hover { color: var(--ink); background: var(--sunk); }
.top nav a[aria-current] { color: var(--ink); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; background: var(--accent); color: var(--accent-ink); padding: 12px 20px; border-radius: 99px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: transform .15s cubic-bezier(.16,1,.3,1), filter .15s; }
.btn:hover { filter: brightness(1.07); }
.btn:active { transform: translateY(1px) scale(.99); }
.btn.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn.ghost:hover { background: var(--sunk); filter: none; }
.btn.sm { padding: 8px 14px; font-size: 14px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.link { color: var(--accent); text-decoration: none; font-weight: 500; }
.link:hover { text-decoration: underline; }

main { max-width: 1240px; margin: 0 auto; padding: 0 20px 96px; min-height: 70vh; outline: none; }
.foot { max-width: 1240px; margin: 0 auto; padding: 32px 20px 48px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; color: var(--ink2); font-size: 14px; }
.foot p { margin: 6px 0 0; }
.foot-links { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.foot-links a { text-decoration: none; }
.foot-links a:hover { color: var(--ink); }

/* hero */
.hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 56px; align-items: center; padding: 72px 0 56px; }
.hero h1 { font-size: clamp(38px, 5.4vw, 68px); line-height: 1.02; margin: 0 0 22px; font-weight: 700; }
.hero h1 .foil { background: var(--holo); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .06em; }
.hero p { font-size: 18px; color: var(--ink2); max-width: 30em; margin: 0 0 30px; }
.ctas { display: flex; gap: 10px; flex-wrap: wrap; }
.fan { position: relative; height: 440px; perspective: 1200px; max-width: 100%; }
.fan .holo:nth-child(3) { max-width: 230px; }
.fan .holo { position: absolute; width: 230px; top: 40px; left: 50%; }
.fan .holo:nth-child(1) { transform: translateX(-112%) rotate(-12deg) translateY(30px); }
.fan .holo:nth-child(2) { transform: translateX(-50%); z-index: 2; }
.fan .holo:nth-child(3) { transform: translateX(12%) rotate(11deg) translateY(30px); }

/* holo card: the brand device */
.holo { --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 50%; border-radius: 14px; padding: 7px; background: var(--holo); background-size: 220% 220%; background-position: var(--mx) var(--my); box-shadow: var(--shadow); transform-style: preserve-3d; transition: transform .5s cubic-bezier(.16,1,.3,1), box-shadow .3s; }
.holo .face { position: relative; border-radius: 9px; overflow: hidden; background: var(--sunk); aspect-ratio: 5 / 7; }
.holo .face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.holo .face::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at var(--mx) var(--my), rgb(255 255 255 / .35), transparent 45%); mix-blend-mode: overlay; opacity: 0; transition: opacity .3s; pointer-events: none; }
.holo.tilt:hover .face::after { opacity: 1; }
.holo .ph { position: absolute; inset: 0; display: grid; place-items: center; color: var(--ink2); }
.holo .ph svg { width: 40%; height: 40%; opacity: .5; }
.slab-label { position: absolute; left: 10px; right: 10px; top: 10px; display: flex; justify-content: space-between; gap: 8px; font: 600 11px/1 Mono, monospace; letter-spacing: .02em; }
.slab-label span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; background: rgb(13 15 19 / .78); color: #fff; padding: 6px 8px; border-radius: 6px; backdrop-filter: blur(6px); }

/* stats strip */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); margin-bottom: 64px; }
.stats > div { padding: 20px 24px; }
.stats > div + div { border-left: 1px solid var(--line); }
.stats b { display: block; font: 600 26px/1.2 Unbounded, sans-serif; letter-spacing: -0.03em; }
.stats span { color: var(--ink2); font-size: 14px; }

.sec { margin-bottom: 72px; }
.sec-h { display: flex; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.sec-h h2 { font-size: clamp(24px, 3vw, 34px); margin: 0; font-weight: 600; }
.sec-h p { margin: 6px 0 0; color: var(--ink2); max-width: 46em; }

/* card grid */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 26px 20px; }
.ctile { background: none; border: 0; padding: 0; text-align: left; display: grid; gap: 12px; }
.ctile .meta b { display: block; font-weight: 600; font-size: 16px; line-height: 1.3; }
.ctile .meta span { color: var(--ink2); font-size: 14px; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 99px; font-size: 13px; font-weight: 600; background: var(--sunk); color: var(--ink2); white-space: nowrap; }
.pill.ok { background: var(--ok-soft); color: var(--ok); }
.pill.wait { background: var(--warn-soft); color: var(--warn); }
.pill.acc { background: var(--accent-soft); color: var(--accent); }

/* bento: how it works */
.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: minmax(150px, auto); gap: 16px; }
.bx { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 24px; display: flex; flex-direction: column; justify-content: space-between; gap: 14px; }
.bx h3 { font-size: 19px; margin: 0; font-weight: 600; }
.bx p { margin: 0; color: var(--ink2); }
.bx .ic { width: 28px; height: 28px; color: var(--accent); }
.bx.a { grid-column: span 4; }
.bx.b { grid-column: span 2; background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.bx.b p, .bx.b .ic { color: inherit; opacity: .9; }
.bx.c { grid-column: span 2; }
.bx.d { grid-column: span 4; position: relative; overflow: hidden; }
.bx.d::before { content: ''; position: absolute; right: -40px; top: -40px; width: 220px; height: 300px; border-radius: 20px; background: var(--holo); opacity: .22; transform: rotate(14deg); }

/* draws list */
.dlist { display: grid; gap: 10px; }
.drow { display: grid; grid-template-columns: 56px minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 12px 16px 12px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; text-decoration: none; transition: border-color .15s, transform .15s cubic-bezier(.16,1,.3,1); }
.drow:hover { border-color: var(--accent); transform: translateY(-1px); }
.drow img, .drow .thumb { width: 56px; height: 74px; border-radius: 8px; object-fit: cover; background: var(--sunk); }
.drow b { display: block; font-weight: 600; }
.drow small { color: var(--ink2); font-size: 13px; }
.drow .k { font-size: 12px; color: var(--ink2); display: block; }
.empty { padding: 56px 24px; text-align: center; border: 1.5px dashed var(--line); border-radius: var(--r); color: var(--ink2); }
.empty h3 { color: var(--ink); font-size: 20px; margin: 0 0 6px; }

/* check wallet */
.checker { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; padding: 56px 0; align-items: start; }
.checker h1 { font-size: clamp(32px, 4.4vw, 52px); line-height: 1.05; margin: 0 0 14px; }
.checker p.lead { color: var(--ink2); font-size: 17px; margin: 0 0 26px; }
.field { display: grid; gap: 8px; margin-bottom: 16px; }
.field label { font-weight: 600; font-size: 14px; }
.field .hint { color: var(--ink2); font-size: 13px; }
.field input, .field select, .field textarea { width: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; outline: none; }
.field input:focus, .field textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.field input::placeholder { color: color-mix(in srgb, var(--ink2) 80%, transparent); }
.row { display: flex; gap: 10px; }
.row > input { flex: 1; min-width: 0; }
.result { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 26px; box-shadow: var(--shadow); }
.big { font: 700 clamp(40px, 6vw, 64px)/1 Unbounded, sans-serif; letter-spacing: -0.04em; margin: 8px 0 4px; }
.kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
.kv > div { background: var(--sunk); border-radius: 12px; padding: 12px 14px; }
.kv span { display: block; font-size: 12px; color: var(--ink2); }
.kv b { font-size: 17px; }

/* draw detail */
.dd { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 44px; padding: 48px 0; align-items: start; }
.dd h1 { font-size: clamp(28px, 3.6vw, 42px); margin: 6px 0 10px; line-height: 1.1; }
.steps { display: grid; gap: 12px; margin-top: 24px; }
.step { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
.step .n { width: 30px; height: 30px; border-radius: 99px; display: grid; place-items: center; background: var(--sunk); font-weight: 700; font-size: 14px; }
.step.done .n { background: var(--ok-soft); color: var(--ok); }
.step b { display: block; margin-bottom: 4px; }
.step .v { font: 13px/1.6 Mono, monospace; color: var(--ink2); word-break: break-all; }
.step .v a { color: var(--accent); }
.verify-out { margin-top: 12px; padding: 12px 14px; border-radius: 12px; font-size: 14px; }
.verify-out.ok { background: var(--ok-soft); color: var(--ok); }
.verify-out.no { background: #ffe1e1; color: #a11; }

/* prose */
.prose { max-width: 720px; padding: 56px 0; }
.prose h1 { font-size: clamp(32px, 4.4vw, 50px); line-height: 1.05; margin: 0 0 16px; }
.prose h2 { font-size: 22px; margin: 40px 0 10px; font-weight: 600; }
.prose p, .prose li { color: var(--ink2); }
.prose code { font-family: Mono, monospace; font-size: 14px; background: var(--sunk); padding: 2px 6px; border-radius: 6px; color: var(--ink); }
.prose pre { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 16px; overflow-x: auto; font: 13px/1.6 Mono, monospace; }

/* dialog */
.dlg { border: 0; padding: 0; border-radius: 22px; background: var(--surface); color: var(--ink); width: min(860px, calc(100vw - 32px)); box-shadow: 0 30px 80px rgb(0 0 0 / .35); }
.dlg::backdrop { background: rgb(8 10 14 / .55); backdrop-filter: blur(4px); }
.dlg-grid { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 32px; padding: 28px; }
.dlg h2 { font-size: 26px; margin: 4px 0 6px; line-height: 1.15; }
.dlg dl { display: grid; gap: 0; margin: 18px 0; }
.dlg dl div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.dlg dt { color: var(--ink2); }
.dlg dd { margin: 0; text-align: right; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.x-btn { position: absolute; right: 14px; top: 14px; width: 38px; height: 38px; border-radius: 99px; border: 0; background: var(--sunk); display: grid; place-items: center; }

/* admin */
.admin { padding: 40px 0; display: grid; gap: 24px; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 24px; }
.panel h3 { margin: 0 0 4px; font-size: 18px; }
.panel .sub { color: var(--ink2); margin: 0 0 18px; font-size: 14px; }
.two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.photo { display: flex; gap: 16px; align-items: center; }
.photo label.pv { width: 96px; aspect-ratio: 5/7; border-radius: 10px; border: 1.5px dashed var(--line); display: grid; place-items: center; overflow: hidden; cursor: pointer; color: var(--ink2); font-size: 12px; text-align: center; background: var(--sunk); }
.photo label.pv img { width: 100%; height: 100%; object-fit: cover; }
.arow { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.arow img, .arow .thumb { width: 48px; height: 64px; border-radius: 6px; object-fit: cover; background: var(--sunk); }
.arow .acts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; background: var(--ink); color: var(--bg); padding: 12px 18px; border-radius: 12px; z-index: 60; max-width: min(560px, calc(100vw - 32px)); font-size: 15px; transition: opacity .25s, transform .25s cubic-bezier(.16,1,.3,1); }
.toast.on { opacity: 1; transform: translate(-50%, 0); }
.toast.bad { background: #b42318; color: #fff; }
.skel { background: linear-gradient(90deg, var(--sunk), var(--surface), var(--sunk)); background-size: 200% 100%; animation: sk 1.3s infinite; border-radius: 12px; }
@keyframes sk { to { background-position: -200% 0; } }

/* entrance motion, only when allowed */
@media (prefers-reduced-motion: no-preference) {
  .rise { animation: rise .7s cubic-bezier(.16,1,.3,1) both; animation-delay: calc(var(--i, 0) * 70ms); }
  @keyframes rise { from { opacity: 0; transform: translateY(18px); } }
  .fan .holo { animation: deal .9s cubic-bezier(.16,1,.3,1) both; }
  .fan .holo:nth-child(1) { animation-delay: .1s; } .fan .holo:nth-child(3) { animation-delay: .2s; }
  @keyframes deal { from { opacity: 0; translate: 0 40px; } }
  .hero h1 .foil { animation: foil 8s linear infinite; }
  @keyframes foil { to { background-position: -200% 0; } }
}

@media (max-width: 960px) {
  .hero, .checker, .dd { grid-template-columns: minmax(0, 1fr); }
  .hero { padding-top: 40px; gap: 24px; }
  .fan { height: 340px; }
  .fan .holo { width: 170px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats > div:nth-child(3) { border-left: 0; }
  .stats > div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .bento { grid-template-columns: minmax(0, 1fr); }
  .bx.a, .bx.b, .bx.c, .bx.d { grid-column: auto; }
  .dd > div:first-child { max-width: 280px; }
}
@media (max-width: 680px) {
  .top { gap: 10px; height: auto; padding: 10px 16px; flex-wrap: wrap; }
  .top nav { order: 3; flex-basis: 100%; overflow-x: auto; }
  .cards .slab-label span + span { display: none; }
  .top nav a { padding: 6px 10px; font-size: 14px; }
  #buy { margin-left: auto; }
  main { padding: 0 16px 72px; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }
  .drow { grid-template-columns: 48px minmax(0, 1fr) auto; }
  .drow .hide-sm { display: none; }
  .drow img, .drow .thumb { width: 48px; height: 64px; }
  .dlg-grid { grid-template-columns: minmax(0, 1fr); padding: 20px; }
  .dlg-grid > div:first-child { max-width: 220px; }
  .two, .three, .kv { grid-template-columns: minmax(0, 1fr); }
  .row { flex-direction: column; }
}

/* collector crypt */
.packs { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
.pack { display: grid; gap: 4px; padding: 14px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); text-decoration: none; color: inherit; transition: border-color .2s, transform .2s; }
.pack:hover { border-color: var(--accent); transform: translateY(-2px); }
.pack img, .pack .pi { width: 100%; aspect-ratio: 1; object-fit: contain; margin-bottom: 6px; display: grid; place-items: center; background: var(--sunk); border-radius: 12px; }
.pack b { font-size: 15px; } .pack span { color: var(--ink2); font-size: 13px; }
.row-in { display: flex; gap: 8px; } .row-in input { flex: 1; min-width: 0; }
.ccp { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 14px; align-items: start; padding: 12px; margin: 4px 0 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
.ccp img { width: 90px; aspect-ratio: 5/8; object-fit: cover; border-radius: 6px; background: var(--sunk); }
.ccp small { color: var(--ink2); } .ccp .pill { margin-top: 6px; }
.wcl { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 10px 0 16px; }
.wci { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 8px; align-items: center; text-align: left; padding: 6px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); cursor: pointer; color: inherit; font-size: 13px; }
.wci:disabled { opacity: .5; cursor: default; } .wci img { width: 36px; height: 52px; object-fit: cover; border-radius: 4px; }
.wci small { display: block; color: var(--ink2); }
.panel > .btn.ghost.sm { margin-bottom: 4px; }
.panel .hint { color: var(--ink2); font-size: 13px; margin: 0 0 16px; }

.pack { font: inherit; text-align: left; cursor: pointer; }
.pk-h { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; align-items: center; padding-right: 36px; }
.pk-h img { width: 96px; aspect-ratio: 1; object-fit: contain; }
.pk-h h2 { margin: 0 0 4px; }
.tiers { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } .tiers .pill { text-transform: capitalize; }
.pool { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; max-height: 56vh; overflow: auto; }
.pc { display: grid; gap: 4px; font-size: 12px; } .pc img { width: 100%; aspect-ratio: 5/8; object-fit: cover; border-radius: 8px; background: var(--sunk); }
.pc b { font-size: 12px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .pc span { color: var(--ink2); }
.pk-h + h3, .pk-h, .pool { margin-left: 4px; margin-right: 4px; }
#dlg-body:has(.pk-h) { padding: 26px; }
@media (max-width: 640px) {
  #dlg-body:has(.pk-h) { padding: 18px; }
  .pk-h { grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: start; }
  .pk-h img { width: 64px; }
  .pk-h h2 { font-size: 22px; }
  .tiers .pill { font-size: 11px; padding: 3px 8px; }
  .pool { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .pc b { font-size: 11px; } .pc span { font-size: 11px; }
}

/* hero fan with real slabs */
.fan .holo .face { aspect-ratio: 5 / 8; background: #0d0f14; }
.fan .holo .face img { object-fit: cover; object-position: center top; }
.fan.show .holo .face img { animation: fadein .6s ease both; }
@keyframes fadein { from { opacity: 0; } }
@media (max-width: 960px) {
  .hero { overflow: hidden; margin: 0 -16px; padding-left: 16px; padding-right: 16px; }
  .fan { height: 330px; width: 100%; max-width: 420px; margin: 0 auto; }
  .fan .holo { width: 160px; top: 18px; padding: 5px; border-radius: 12px; }
  .fan .holo .face { border-radius: 8px; }
  .fan .holo:nth-child(1) { transform: translateX(-104%) rotate(-10deg) translateY(26px); }
  .fan .holo:nth-child(3) { transform: translateX(4%) rotate(10deg) translateY(26px); }
}
@media (max-width: 380px) {
  .fan { height: 290px; } .fan .holo { width: 138px; }
}

@media (max-width: 960px) {
  .fan .holo, .fan .holo:nth-child(3) { width: 150px; max-width: 150px; }
  .fan .holo:nth-child(2) { transform: translateX(-50%) scale(1.08); }
}
@media (max-width: 380px) { .fan .holo, .fan .holo:nth-child(3) { width: 132px; max-width: 132px; } }
@media (max-width: 680px) {
  .top nav { display: flex; flex-wrap: nowrap; gap: 2px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .top nav::-webkit-scrollbar { display: none; }
  .top nav a { white-space: nowrap; flex: 0 0 auto; }
  .hero { padding-top: 28px; }
  .hero .ctas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
  .hero .ctas .btn { justify-content: center; padding-left: 10px; padding-right: 10px; white-space: nowrap; }
}
@media (max-width: 380px) { .hero .ctas { grid-template-columns: minmax(0, 1fr); } .top nav a { padding: 6px 8px; font-size: 13px; } }
/* big headings match the pullmon wordmark: lowercase, tight */
h1, h2, .hero h1, .prose h1, .prose h2, .sec-h h2, .panel h2, .pk-h h2 { font-family: Unbounded, sans-serif; font-weight: 700; text-transform: lowercase; letter-spacing: -0.03em; }

.stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 960px) { .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } .stats > div:nth-child(3) { border-left: 1px solid var(--line); } .stats > div:nth-child(n+3) { border-top: 0; } }
@media (max-width: 520px) { .stats > div { padding: 14px 12px; } .stats b { font-size: 20px; } .stats span { font-size: 12px; } }