@font-face {
  font-family: 'JetBrains Mono'; src: url('/assets/fonts/JetBrainsMono-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono'; src: url('/assets/fonts/JetBrainsMono-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Martian Mono'; src: url('/assets/fonts/MartianMonoVF.woff2') format('woff2');
  font-weight: 100 800; font-stretch: 75% 112.5%; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Druk Text'; src: url('/assets/fonts/DrukTextLCG-SuperItalic.ttf') format('truetype');
  font-weight: 900; font-style: italic; font-display: swap;
}
:root {
  color-scheme: dark;
  --orange: #ff4700;
  --white: #fff;
  --surface: #171717;
  --muted: #b0b0b0;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --display: 'Druk Text', Impact, 'Arial Narrow', sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { min-width: 300px; background: #000; }
body { margin: 0; color: var(--white); font: 400 14px/1.5 var(--mono); }
button, input { font: inherit; }
button { color: inherit; cursor: pointer; }
button:disabled { cursor: default; opacity: .5; }
button:focus-visible, a:focus-visible, input:focus-visible {
  outline: 2px solid #d6a2ff; outline-offset: 3px;
}
a { color: inherit; }
img { display: block; max-width: 100%; }
.visually-hidden, .legal:is([data-document='rules'], [data-document='privacy']) #legal-title-text {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.page { container-type: inline-size; max-width: 1600px; margin-inline: auto; }
.hero { position: relative; aspect-ratio: 16/9; isolation: isolate; overflow: hidden; background: #000; }
.hero-art { position: absolute; inset: 0; pointer-events: none; z-index: -1; }
.hero-art img { position: absolute; height: auto; }
.hero-pattern { left: 17.8125%; top: 0; width: 82.1875%; }
.hero-characters { left: 49.375%; top: 3.0556%; width: 46.7969%; }
.hero-header {
  display: flex; position: absolute; inset: 0 0 auto; padding: 1.5625cqw 2.34375cqw 0;
  align-items: center; justify-content: space-between; gap: 1.5rem;
}
.brand { display: block; width: 25cqw; flex: none; }
.brand img { width: 100%; height: auto; }
.top-nav, .footer-nav { display: flex; align-items: center; }
.top-nav { gap: .47cqw; }
.action {
  display: inline-flex; min-height: 34px; padding: .55em 1.05em; border: 1px solid transparent;
  justify-content: center; align-items: center; text-align: center; text-decoration: none;
  text-transform: uppercase; border-radius: 9px; font-size: 12px; line-height: 1.2;
  background: #232323; color: var(--white);
}
.action--quiet { background: var(--surface); }
.action--quiet:hover:not(:disabled) { background: #303030; }
.action--primary { background: var(--orange); color: #100704; border-radius: 999px; }
.action--primary:hover:not(:disabled) { background: #ff713a; }
.action--secondary { background: #212121; border-color: #3b3b3b; }
.action--secondary:hover:not(:disabled) { background: #303030; }
.top-nav .action {
  font-size: 1.015625cqw; min-height: 2.578125cqw; padding-inline: 1.09375cqw; border: 0;
}
.hero-title {
  position: absolute; left: 2.5%; top: 15.407%; width: 50.78125%; margin: 0;
}
.hero-title img { width: 100%; height: auto; }
.hero-message {
  position: absolute; top: 71.8%; left: 2.34375%;
  font-size: 1.5625cqw; line-height: 1; letter-spacing: .01em;
}
.hero-message p { margin: 0; }
#hero-tagline { display: flex; flex-wrap: wrap; gap: .2em; }
.hero-message strong { color: var(--orange); }
#hero-status { color: #d6c8e8; font-size: .74em; margin-top: .45em; }
.hero-actions { position: absolute; bottom: 3.47%; left: 2.11%; display: flex; align-items: stretch; gap: .78cqw; }
.hero-cta, .bonus { min-height: 5cqw; font-size: 1.09375cqw; line-height: 1.2; }
.hero-cta { width: 16.328125cqw; }
.top-nav .action--primary, .hero-cta { color: #fff; text-shadow: 0 1px 2px #2b0d00; }
.bonus {
  display: flex; align-items: center; gap: .75em; border-radius: 1.25cqw; padding: .7em 1.05em;
  background: var(--surface); text-transform: uppercase;
}
.bonus strong { border: 2px solid #58df79; border-radius: .8em; padding: .25em .6em; }
.timer {
  position: absolute; right: 2.34375%; bottom: 2.7778%; container-type: inline-size;
  width: 15.46875cqw; aspect-ratio: 1; border-radius: 50%; text-align: center;
  color: #fff; background: #4840529c; backdrop-filter: blur(11px);
}
.timer-ring { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.timer-track, .timer-progress { fill: none; stroke-width: 4.8; }
.timer-track { stroke: #ffffff20; }
.timer-progress { stroke: var(--orange); }
.timer-values {
  position: absolute; top: 42.4242%; left: 12.1212%; width: 75.7576%;
  display: grid; grid-template-columns: repeat(3, 1fr);
}
.timer-values span { display: grid; justify-items: center; row-gap: 4.32cqw; }
.timer-values b {
  font: 600 12.1212cqw/1.2 'Martian Mono', var(--mono); font-stretch: 100%; letter-spacing: 0;
}
#timer-label, .timer-values span { font-size: 5.0505cqw; line-height: 1.2; letter-spacing: .057em; }
#timer-label, #timer-percent { position: absolute; inset-inline: 0; color: #fff9; }
#timer-label { top: 32.3232%; }
#timer-percent { top: 80.303%; font-size: 4.0404cqw; line-height: 1.2; letter-spacing: .125em; }
.footer {
  min-height: 7.8125cqw; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 2cqw;
  padding: 1.5cqw 1.5625cqw; background: var(--surface); color: #a4a4a4; text-transform: uppercase;
  font-size: .78125cqw; line-height: 1.2;
}
.brand--footer { width: 19.0104cqw; }
.footer-nav { gap: 2.65625cqw; }
.footer-nav button {
  padding: .5em 0; background: none; color: inherit; border: 0; text-transform: inherit; text-align: left;
}
.footer-nav button:hover { color: #fff; }
.footer-meta { justify-self: end; display: flex; gap: 1.3cqw; align-items: center; text-align: right; }
.age { width: 1.953125cqw; height: auto; }
.dialog {
  width: min(600px, calc(100% - 24px)); max-height: min(86dvh, 760px); overflow: auto;
  color: var(--white); border: 1px solid #2e233c; border-radius: 19px; padding: 26px 35px 32px;
  background: #080808; box-shadow: 0 18px 90px #000a;
}
.dialog::backdrop { background: #0e0e13b5; backdrop-filter: blur(9px); }
body:has(dialog[open]) { overflow: hidden; }
.dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; position: relative; }
.dialog-head img { width: min(44%, 240px); height: auto; }
.dialog-head form { margin: 0 0 0 auto; }
.close { width: 38px; height: 38px; font-size: 26px; line-height: 1; background: #242424; border: 0; border-radius: 50%; }
.close:hover { background: #47404d; }
.dialog-body h2, .legal-title {
  font: italic 900 clamp(36px, 7vw, 64px)/.95 var(--display); text-transform: uppercase;
  color: #ff6024; margin: .42em 0 .32em;
}
.dialog-body p { margin: 0 0 1em; }
.legal {
  background: #000 url('/assets/dialog-pattern.png') center top / 100% auto no-repeat;
}
.legal-title { text-align: center; margin: .28em 0 .6em; text-shadow: 0 3px 10px #000; overflow-wrap: anywhere; }
.rules-title-art, .privacy-title-art { display: none; }
.legal:is([data-document='rules'], [data-document='privacy']) { padding: 40px min(40px, 6vw) 32px; }
.legal:is([data-document='rules'], [data-document='privacy']) .dialog-head { position: absolute; top: 12px; right: 12px; }
.legal:is([data-document='rules'], [data-document='privacy']) .dialog-head img { display: none; }
.legal:is([data-document='rules'], [data-document='privacy']) .legal-title { margin: 0; }
.legal[data-document='rules'] .rules-title-art { display: block; margin-inline: auto; height: auto; }
.legal[data-document='privacy'] .legal-title { min-height: 122px; }
.legal[data-document='privacy'] .legal-title::before {
  content: ''; display: block; width: 104px; height: 25px; margin: 0 auto 7px;
  background: url('/assets/brand-lockup.svg') left center / auto 100% no-repeat;
}
.legal[data-document='privacy'] .privacy-title-art { display: block; width: min(100%, 430px); height: auto; margin-inline: auto; }
.registration-title-art { width: min(100%, 300px); height: auto; margin-inline: auto; }
.legal .dialog-body { background: #000b; border-radius: 12px; padding: 10px 12px; }
.legal:is([data-document='rules'], [data-document='privacy']) .dialog-body {
  margin-top: 40px; padding: 0; background: transparent; font: 400 12px/1.75 var(--mono); letter-spacing: .01em;
}
.legal section + section { margin-top: 1.3rem; }
.legal h3 { margin: 0 0 .5em; font-size: 1em; }
.legal p { color: #f2edf4; }
.legal p:last-child { margin-bottom: 0; }
.flow-form { display: grid; gap: .85rem; margin: 1em 0; }
.field { display: grid; gap: .35em; }
.field input, input[type='file'] {
  width: 100%; min-height: 43px; background: #1b1b1b; border: 1px solid #52475c;
  color: #fff; padding: 9px 12px; border-radius: 8px;
}
input[type='file']::file-selector-button {
  font: inherit; border-radius: 5px; border: 0; padding: .35em .55em; margin-right: .6em; background: #422558; color: #fff;
}
.checkbox { display: flex; align-items: flex-start; gap: .55em; font-size: .88em; }
.checkbox input { accent-color: #a956fb; flex: none; margin: .25em 0 0; }
.checkbox button, .flow-link { color: #f2c8ff; padding: 0; background: none; border: 0; text-decoration: underline; text-align: left; }
.flow-actions { display: flex; gap: .55em; flex-wrap: wrap; }
.flow-actions .action, .flow-form > .action { min-height: 42px; }
.flow-note { color: #c2b9c9; }
.flow-error { color: #ffab91; }
.flow-code { display: block; font-size: clamp(1.15rem, 5vw, 2rem); letter-spacing: .08em; overflow-wrap: anywhere; }
@media (max-width: 700px) {
  .hero { min-height: 680px; min-height: clamp(680px, 143cqw, 850px); aspect-ratio: auto; }
  .hero-header { display: grid; justify-items: start; gap: .8rem; padding: 18px 15px; z-index: 2; }
  .brand { width: min(74cqw, 300px); }
  .top-nav { gap: 5px; flex-wrap: wrap; }
  .top-nav .action { min-height: 33px; padding-inline: .75em; font-size: clamp(7px, 2.25cqw, 11px); }
  .hero-pattern { top: auto; left: 6%; bottom: 0; width: 125%; max-width: none; }
  .hero-characters { top: auto; bottom: 0; left: auto; right: -1%; width: min(82%, 460px); }
  .hero-title { left: 5%; top: 117px; width: 90%; }
  .hero-message { left: 15px; top: clamp(274px, calc(117px + 42cqw), 355px); font-size: clamp(13px, 3.2cqw, 20px); }
  .hero-actions { z-index: 1; left: 15px; bottom: 18px; flex-wrap: wrap; gap: 7px; }
  .hero-cta, .bonus { min-height: 43px; font-size: clamp(9px, 2.55cqw, 13px); }
  .hero-cta { width: 9em; }
  .bonus { border-radius: 10px; }
  .timer { width: clamp(106px, 24cqw, 146px); right: 12px; bottom: 79px; }
  #timer-label, .timer-values span { font-size: max(6.5px, 5.0505cqw); }
  #timer-percent { font-size: max(6px, 4.0404cqw); }
  .footer { min-height: 0; grid-template-columns: 1fr auto; padding: 16px 15px; gap: 12px; font-size: 9px; }
  .brand--footer { width: min(47cqw, 210px); }
  .footer-nav { grid-row: 2; grid-column: 1 / -1; gap: 13px; flex-wrap: wrap; }
  .footer-meta { grid-column: 2; grid-row: 1; gap: 7px; }
  .age { width: 20px; }
  .dialog { padding: 20px 16px 23px; }
}
.flow-step { color: #d3aff6; font-size: .82em; margin-top: 1em !important; }
.action--text {
  color: #f2c8ff; text-decoration: underline; background: none;
  text-transform: none; border-color: transparent; padding-inline: .4em;
}
.field select, .field textarea {
  width: 100%; min-height: 44px; border: 1px solid #52475c; border-radius: 8px;
  background: #1b1b1b; color: #fff; padding: 10px 12px; font: inherit;
}
.flow-demo { padding: 10px 12px; background: #352c16; border: 1px solid #8b6b2e; border-radius: 8px; color: #ffe0a0; font-size: 12px; }
.flow-reference { color: #aaa; font-size: 12px; overflow-wrap: anywhere; }
.flow-preview:empty { display: none; }
.flow-preview img, .flow-preview video { max-height: 260px; width: 100%; object-fit: contain; border-radius: 8px; background: #171717; }
.flow-status-list { display: grid; gap: 8px; margin: 20px 0; }
.flow-status-list > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding: 12px; border: 1px solid #343434; border-radius: 8px; }
.flow-status-list dt { color: #c2b9c9; }
.flow-status-list dd { margin: 0; }
.checkbox > label { display: flex; gap: .6em; align-items: flex-start; }
.checkbox > .action { min-height: 30px; flex: none; font-size: 11px; }
select:focus-visible, textarea:focus-visible { outline: 2px solid #d6a2ff; outline-offset: 3px; }