:root {
  --void: #070916;
  --night: #0c1230;
  --mist: #e8ecf8;
  --pearl: #c7d3ed;
  --text-main: #f8f6f2;
  --text-muted: #aeb9d4;
  --gold: #d7ac62;
  --gold-light: #ffe1a6;
  --moon: #b7cbff;
  --success: #a9e7c1;
  --error: #ffb3bc;
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 5rem;
  --space-9: 8rem;
  --content-width: 75rem;
  --radius-card: 1.25rem;
  --radius-pill: 62.5rem;
  --type-display: clamp(3.5rem, 8vw, 8rem);
  --type-h1: clamp(2.5rem, 5vw, 5rem);
  --type-h2: clamp(1.55rem, 2.6vw, 2.35rem);
  --type-lead: 1.125rem;
  --type-body: 1rem;
  --type-label: .75rem;
  --font-display: "Cormorant Garamond", "Noto Serif SC", serif;
  --font-interface: "DM Sans", "Noto Sans SC", sans-serif;
}

* { box-sizing: border-box; }
html { overflow-x: hidden; scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; color: var(--text-main); background: var(--void); font-family: var(--font-interface); font-size: var(--type-body); line-height: 1.65; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: .125rem solid var(--moon); outline-offset: .25rem; }
img { display: block; max-width: 100%; height: auto; }
.sr-only { position: absolute; width: .0625rem; height: .0625rem; padding: 0; margin: -.0625rem; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.section-shell { width: min(calc(100% - var(--space-6)), var(--content-width)); margin-inline: auto; }
.ambient { position: fixed; z-index: -1; width: 35rem; height: 35rem; border-radius: 50%; pointer-events: none; filter: blur(5rem); opacity: .16; background: var(--moon); }
.ambient-left { top: -18rem; left: -18rem; }.ambient-right { top: 30rem; right: -22rem; background: var(--gold); }

.site-header { position: absolute; z-index: 10; top: 0; left: 50%; display: flex; align-items: center; justify-content: space-between; width: min(calc(100% - var(--space-6)), var(--content-width)); min-height: 5.5rem; transform: translateX(-50%); }
.brand { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--text-main); letter-spacing: .07em; font-size: var(--type-label); font-weight: 700; }.brand-star { width: var(--space-5); fill: var(--gold); }
nav { display: flex; gap: var(--space-6); color: var(--text-muted); font-size: var(--type-label); font-weight: 700; letter-spacing: .08em; } nav a:hover { color: var(--gold-light); }
.header-actions { display: flex; align-items: center; gap: var(--space-4); }.header-cta, .email-form button { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: var(--space-2) var(--space-5); border: .0625rem solid var(--gold); border-radius: var(--radius-pill); color: var(--void); background: linear-gradient(110deg, var(--gold), var(--gold-light)); cursor: pointer; font-size: var(--type-label); font-weight: 700; letter-spacing: .06em; transition: transform .2s ease, filter .2s ease; }.header-cta:hover, .email-form button:hover { filter: brightness(1.1); transform: translateY(-.125rem); }

.hero { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: var(--space-8); min-height: 48rem; padding-top: var(--space-9); padding-bottom: var(--space-8); }.eyebrow { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-5); color: var(--gold); font-size: var(--type-label); font-weight: 700; letter-spacing: .14em; }.star { font-size: var(--type-body); }
.hero h1, h2 { margin: 0; font-family: var(--font-display); font-weight: 600; letter-spacing: -.04em; }.hero h1 { max-width: 8ch; font-size: var(--type-display); line-height: .88; }.hero h1 em, .reserve h2 em { color: var(--gold-light); font-style: italic; }.hero-description { max-width: 36rem; margin: var(--space-6) 0; color: var(--text-muted); font-size: var(--type-lead); }
.email-form { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2); max-width: 32rem; }.email-form input { width: 100%; min-height: 3.25rem; padding: var(--space-3) var(--space-5); border: .0625rem solid color-mix(in srgb, var(--pearl) 36%, transparent); border-radius: var(--radius-pill); outline: none; color: var(--void); background: var(--mist); }.email-form input::placeholder { color: color-mix(in srgb, var(--void) 52%, transparent); }.email-form button { min-height: 3.25rem; white-space: nowrap; }.form-message { grid-column: 1 / -1; min-height: 1.6em; margin: 0; font-size: var(--type-label); }.form-message.error { color: var(--error); }.form-message.success { color: var(--success); }.hero-meta { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-5); color: var(--text-muted); font-size: var(--type-label); }.meta-separator { width: .1875rem; height: .1875rem; border-radius: 50%; background: var(--gold); }
.hero-art { position: relative; min-height: 39rem; isolation: isolate; }.hero-card { position: absolute; overflow: hidden; width: clamp(13rem, 26vw, 19rem); aspect-ratio: 1 / 2; border: .0625rem solid color-mix(in srgb, var(--gold-light) 60%, transparent); border-radius: var(--radius-card); background: var(--night); box-shadow: 0 1.5rem 4rem color-mix(in srgb, var(--void) 70%, transparent); }.hero-card img { width: 100%; height: 100%; object-fit: cover; }.hero-card-back { top: 3rem; right: 1rem; transform: rotate(12deg); }.hero-card-front { z-index: 2; top: 1rem; left: 5%; transform: rotate(-7deg); }.orbit { position: absolute; border: .0625rem solid color-mix(in srgb, var(--gold) 46%, transparent); border-radius: 50%; }.orbit-one { top: 5%; right: -10%; width: 31rem; height: 31rem; }.orbit-two { bottom: 5%; left: -17%; width: 22rem; height: 22rem; }.hero-caption { position: absolute; z-index: 3; bottom: 1rem; left: 0; display: flex; gap: var(--space-3); color: var(--gold-light); font-size: var(--type-label); font-weight: 700; letter-spacing: .12em; transform: rotate(-7deg); }

.intro-strip { display: grid; grid-template-columns: repeat(3, 1fr) 1.7fr; gap: var(--space-5); padding-top: var(--space-6); padding-bottom: var(--space-6); border-top: .0625rem solid color-mix(in srgb, var(--pearl) 24%, transparent); border-bottom: .0625rem solid color-mix(in srgb, var(--pearl) 24%, transparent); }.metric { display: flex; flex-direction: column; }.metric strong, .proof-grid strong { color: var(--gold-light); font-family: var(--font-display); font-size: var(--type-h1); font-weight: 600; line-height: .8; }.metric span, .proof-grid span { margin-top: var(--space-2); color: var(--text-muted); font-size: var(--type-label); }.intro-strip > p { margin: 0; align-self: center; color: var(--pearl); font-family: var(--font-display); font-size: var(--type-h2); font-style: italic; line-height: 1.15; }

.concept, .characters, .deck, .proof { padding-top: var(--space-9); padding-bottom: var(--space-9); }.section-heading h2 { font-size: var(--type-h1); line-height: .95; }.concept-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(var(--space-7), 9vw, var(--space-9)); align-items: center; margin-top: var(--space-7); }.concept-art { position: relative; margin: 0; max-width: 24rem; }.concept-art::before { position: absolute; inset: -1rem; z-index: -1; border: .0625rem solid color-mix(in srgb, var(--gold) 64%, transparent); border-radius: var(--radius-card); content: ""; transform: rotate(4deg); }.concept-art img { border-radius: var(--radius-card); }.concept-art figcaption, .back-card figcaption { margin-top: var(--space-3); color: var(--gold); font-size: var(--type-label); font-weight: 700; letter-spacing: .1em; }.concept-points { display: grid; gap: var(--space-5); }.concept-points article { display: grid; grid-template-columns: 2.5rem 1fr; column-gap: var(--space-4); padding-bottom: var(--space-5); border-bottom: .0625rem solid color-mix(in srgb, var(--pearl) 20%, transparent); }.concept-points span { grid-row: span 2; color: var(--gold); font-family: var(--font-display); font-size: var(--type-h2); }.concept-points h3 { margin: 0; font-family: var(--font-display); font-size: var(--type-h2); font-weight: 600; line-height: 1; }.concept-points p { margin: var(--space-2) 0 0; color: var(--text-muted); }

.characters { background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--night) 70%, transparent), transparent); }.split-heading { display: grid; grid-template-columns: 1fr .55fr; gap: var(--space-7); align-items: end; }.split-heading > p { max-width: 26rem; margin: 0; color: var(--text-muted); }

.deck { display: block; }.deck-copy { max-width: 44rem; }.deck-copy h2 { margin-bottom: var(--space-5); font-size: var(--type-h1); line-height: .95; }.deck-copy > p { color: var(--text-muted); }.deck-details { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }.deck-details span { padding: var(--space-2) var(--space-3); border: .0625rem solid color-mix(in srgb, var(--gold) 46%, transparent); border-radius: var(--radius-pill); color: var(--gold-light); font-size: var(--type-label); }.deck-dealer { position: relative; display: grid; justify-items: center; min-height: 32rem; padding: var(--space-6) 0 var(--space-2); }.deck-instruction, .deck-reveal-name { margin: 0; color: var(--gold); font-size: var(--type-label); font-weight: 700; letter-spacing: .14em; }.deck-ribbon { position: relative; width: min(100%, 42rem); height: 24rem; margin-top: var(--space-4); }.dealer-card { position: absolute; top: 3rem; left: 50%; width: clamp(7.5rem, 12vw, 10rem); aspect-ratio: 1 / 2; padding: 0; border: .0625rem solid color-mix(in srgb, var(--gold-light) 50%, transparent); border-radius: var(--space-3); background: var(--night); box-shadow: 0 1rem 2.5rem color-mix(in srgb, var(--void) 65%, transparent); cursor: pointer; transform: translateX(-50%) rotate(var(--card-rotate)) translateX(var(--card-offset)); transform-origin: 50% 110%; transition: transform .42s cubic-bezier(.2,.8,.2,1), opacity .42s ease, filter .42s ease; }.dealer-card:nth-child(1) { --card-offset: -14rem; --card-rotate: -18deg; z-index: 1; }.dealer-card:nth-child(2) { --card-offset: -8.5rem; --card-rotate: -11deg; z-index: 2; }.dealer-card:nth-child(3) { --card-offset: -2.8rem; --card-rotate: -4deg; z-index: 3; }.dealer-card:nth-child(4) { --card-offset: 2.8rem; --card-rotate: 4deg; z-index: 4; }.dealer-card:nth-child(5) { --card-offset: 8.5rem; --card-rotate: 11deg; z-index: 5; }.dealer-card:nth-child(6) { --card-offset: 14rem; --card-rotate: 18deg; z-index: 6; }.dealer-card:hover, .dealer-card:focus-visible { filter: brightness(1.08); }.dealer-card:hover, .dealer-card:focus-visible { transform: translateX(-50%) rotate(var(--card-rotate)) translateX(var(--card-offset)) translateY(-1rem) scale(1.06); }.dealer-card-inner { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; transform: scaleX(1); transform-style: preserve-3d; transition: transform .28s cubic-bezier(.4,0,.2,1); }.dealer-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }.dealer-card-front { visibility: hidden; }.deck-dealer.is-dealt .dealer-card { opacity: .23; filter: brightness(.55); pointer-events: none; }.deck-dealer.is-dealt .dealer-card.is-selected { z-index: 8; opacity: 1; filter: none; transform: translateX(-50%) translateY(-2rem) rotate(0deg) scale(1.2); pointer-events: auto; }.deck-dealer.is-dealt .dealer-card.is-selected .dealer-card-inner { animation: squeeze-reveal .72s .26s cubic-bezier(.4,0,.2,1) both; }.deck-dealer.is-dealt .dealer-card.is-selected .dealer-card-front { visibility: visible; }.deck-dealer.is-dealt .dealer-card.is-selected .dealer-card-back { animation: hide-back .01s .62s forwards; }.deck-reveal { min-height: 3.75rem; text-align: center; }.deck-reveal-name { min-height: 1.5em; color: var(--gold-light); }.deck-reveal-detail { min-height: 1.5em; margin: var(--space-1) 0 0; color: var(--text-muted); font-size: var(--type-label); }.redraw-button { min-height: 2.75rem; margin-top: var(--space-2); padding: var(--space-2) var(--space-4); border: .0625rem solid color-mix(in srgb, var(--pearl) 40%, transparent); border-radius: var(--radius-pill); color: var(--mist); background: transparent; cursor: pointer; font-size: var(--type-label); font-weight: 700; letter-spacing: .08em; opacity: 0; pointer-events: none; transition: color .2s ease, border-color .2s ease, opacity .3s ease; }.deck-dealer.is-dealt .redraw-button { opacity: 1; pointer-events: auto; }.redraw-button:hover { border-color: var(--gold); color: var(--gold-light); } @keyframes squeeze-reveal { 0%, 37% { transform: scaleX(1); } 52% { transform: scaleX(0); } 65%, 100% { transform: scaleX(1); } } @keyframes hide-back { to { opacity: 0; } }

.world { position: relative; overflow: hidden; background: linear-gradient(90deg, color-mix(in srgb, var(--void) 88%, transparent), color-mix(in srgb, var(--void) 15%, transparent)), url("assets/toy-cosmos-gashapon.webp") center / cover no-repeat; }.world::after { position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--void) 48%, transparent), transparent 35%, color-mix(in srgb, var(--void) 72%, transparent)); content: ""; pointer-events: none; }.world-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr .65fr; gap: var(--space-8); align-items: center; min-height: 44rem; }.world-story h2 { font-size: var(--type-h1); line-height: .95; }.world-story > p:not(.eyebrow) { max-width: 35rem; margin: var(--space-6) 0 0; color: var(--text-muted); font-size: var(--type-lead); }

.proof { text-align: center; }.proof .eyebrow { justify-content: center; }.proof-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); margin: var(--space-6) 0; }.proof-grid div { display: flex; flex-direction: column; padding: var(--space-6) var(--space-4); border-top: .0625rem solid color-mix(in srgb, var(--gold) 55%, transparent); border-bottom: .0625rem solid color-mix(in srgb, var(--gold) 55%, transparent); }.channels { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-5); color: var(--text-muted); font-size: var(--type-label); letter-spacing: .1em; }.channels b { color: var(--mist); }.channels span { color: var(--gold); }

.reserve { padding-bottom: var(--space-9); }.reserve-inner { position: relative; overflow: hidden; padding: clamp(var(--space-7), 7vw, var(--space-9)); border: .0625rem solid color-mix(in srgb, var(--gold) 65%, transparent); border-radius: var(--radius-card); background: radial-gradient(circle at 80% 0%, color-mix(in srgb, var(--moon) 24%, transparent), transparent 35%), var(--night); text-align: center; }.reserve-inner::after { position: absolute; top: -14rem; right: -8rem; width: 28rem; height: 28rem; border: .0625rem solid color-mix(in srgb, var(--gold) 44%, transparent); border-radius: 50%; content: ""; }.reserve .eyebrow { justify-content: center; }.reserve h2 { font-size: var(--type-h1); line-height: .95; }.reserve-inner > p:not(.eyebrow):not(.reserve-note) { max-width: 35rem; margin: var(--space-5) auto var(--space-6); color: var(--text-muted); }.reserve-form { margin-inline: auto; }.reserve-note { margin: var(--space-3) 0 0; color: var(--text-muted); font-size: var(--type-label); }
.site-footer { display: flex; justify-content: space-between; align-items: center; gap: var(--space-5); padding-top: var(--space-6); padding-bottom: var(--space-6); border-top: .0625rem solid color-mix(in srgb, var(--pearl) 24%, transparent); color: var(--text-muted); font-size: var(--type-label); }.site-footer p { margin: 0; text-align: center; }.site-footer > a:last-child { color: var(--gold); }

.email-form .cf-turnstile { grid-column: 1 / -1; min-height: 0; }.email-form button:disabled { cursor: wait; opacity: .7; }.consent-note { max-width: 32rem; margin: var(--space-2) 0 0; color: var(--text-muted); font-size: var(--type-label); }.reserve .consent-note { margin-inline: auto; }.gift-promise { margin: calc(var(--space-5) * -1) 0 var(--space-4); color: var(--gold-light); font-size: var(--type-label); font-weight: 700; letter-spacing: .08em; }.reserve .gift-promise { margin: var(--space-4) auto; }.waitlist-proof { margin: 0 auto var(--space-5); color: var(--pearl); font-family: var(--font-display); font-size: var(--type-h2); font-style: italic; line-height: 1.05; }.gift-download { display: inline-block; margin-top: var(--space-2); color: var(--gold-light); font-size: var(--type-label); font-weight: 700; letter-spacing: .06em; text-decoration: underline; text-underline-offset: .2em; }
@media (max-width: 64rem) { .hero { gap: var(--space-6); }.hero-art { transform: scale(.9); transform-origin: center right; } }
@media (max-width: 48rem) { .site-header { min-height: 4.75rem; }.site-header nav { display: none; }.header-actions { gap: var(--space-3); }.hero { grid-template-columns: 1fr; gap: 0; min-height: auto; padding-top: calc(var(--space-9) + var(--space-5)); }.hero-copy { position: relative; z-index: 2; }.hero h1 { max-width: 9ch; }.hero-art { min-height: 28rem; margin-top: var(--space-3); transform: none; }.hero-card { width: clamp(10rem, 43vw, 15rem); }.hero-card-front { left: 7%; }.hero-card-back { right: 8%; }.orbit-one { width: 23rem; height: 23rem; }.intro-strip { grid-template-columns: repeat(3, 1fr); }.intro-strip > p { grid-column: 1 / -1; padding-top: var(--space-4); border-top: .0625rem solid color-mix(in srgb, var(--pearl) 20%, transparent); }.concept, .characters, .deck, .proof { padding-top: var(--space-8); padding-bottom: var(--space-8); }.concept-grid, .world-inner, .split-heading { grid-template-columns: 1fr; }.concept-grid { gap: var(--space-7); }.concept-art { max-width: 18rem; }.split-heading { gap: var(--space-5); }.deck-dealer { min-height: 28rem; }.deck-ribbon { height: 20rem; }.dealer-card { width: clamp(5.5rem, 25vw, 7.5rem); }.dealer-card:nth-child(1) { --card-offset: -8.4rem; --card-rotate: -16deg; }.dealer-card:nth-child(2) { --card-offset: -5rem; --card-rotate: -10deg; }.dealer-card:nth-child(3) { --card-offset: -1.7rem; --card-rotate: -3deg; }.dealer-card:nth-child(4) { --card-offset: 1.7rem; --card-rotate: 3deg; }.dealer-card:nth-child(5) { --card-offset: 5rem; --card-rotate: 10deg; }.dealer-card:nth-child(6) { --card-offset: 8.4rem; --card-rotate: 16deg; }.deck-dealer.is-dealt .dealer-card.is-selected { transform: translateX(-50%) translateY(-1rem) rotate(0deg) scale(1.12); }.world-inner { min-height: 33rem; padding-top: var(--space-8); padding-bottom: var(--space-8); }.world { background-position: 64% center; }.proof-grid { grid-template-columns: repeat(2, 1fr); }.site-footer { flex-direction: column; align-items: flex-start; }.site-footer p { text-align: left; } }
@media (max-width: 30rem) { .section-shell { width: min(calc(100% - var(--space-5)), var(--content-width)); }.header-cta { padding-inline: var(--space-4); }.hero h1 { font-size: clamp(3.25rem, 17vw, 4.5rem); }.email-form { grid-template-columns: 1fr; }.email-form button { width: 100%; }.hero-art { min-height: 25rem; }.intro-strip { gap: var(--space-3); }.metric strong { font-size: var(--type-h2); }.proof-grid { gap: var(--space-3); }.channels { gap: var(--space-3); } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }