:root {
  color-scheme: dark;
  --page: #050b14;
  --bg: #07111f;
  --surface: #0d1929;
  --surface-2: #101f33;
  --surface-3: #14263d;
  --text: #f8fafc;
  --text-soft: #b8c7d9;
  --text-faint: #8294aa;
  --line: rgba(148, 163, 184, 0.16);
  --blue: #3b82f6;
  --blue-strong: #2563eb;
  --blue-soft: rgba(59, 130, 246, 0.14);
  --green: #4ade80;
  --green-soft: rgba(74, 222, 128, 0.12);
  --yellow: #facc15;
  --yellow-soft: rgba(250, 204, 21, 0.12);
  --red: #f87171;
  --red-soft: rgba(248, 113, 113, 0.12);
  --shadow-card:
    0 0 0 1px rgba(148, 163, 184, 0.15),
    0 1px 2px -1px rgba(0, 0, 0, 0.35),
    0 12px 30px -20px rgba(0, 0, 0, 0.7);
  --shadow-float:
    0 0 0 1px rgba(255, 255, 255, 0.1),
    0 24px 70px -20px rgba(0, 0, 0, 0.75);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 74px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--page);
  color: var(--text);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body.is-locked { overflow: hidden; }

button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

svg {
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

h1, h2, h3 { text-wrap: balance; }
p, li, label { text-wrap: pretty; }

.skip-link {
  position: fixed;
  z-index: 100;
  top: 8px;
  left: 8px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #fff;
  color: #07111f;
  transform: translateY(-70px);
  transition-property: transform;
  transition-duration: 150ms;
}
.skip-link:focus { transform: translateY(0); }

.topbar {
  position: sticky;
  z-index: 40;
  top: 0;
  display: flex;
  width: min(100%, 560px);
  height: 58px;
  margin: 0 auto;
  padding: 0 16px;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  background: rgba(7, 17, 31, 0.9);
  backdrop-filter: blur(16px) saturate(140%);
}

.logo, .support-link {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  text-decoration: none;
}

.logo { gap: 9px; color: var(--text); font-size: 15px; font-weight: 760; }
.logo__mark {
  display: grid;
  width: 31px;
  height: 31px;
  place-items: center;
  border-radius: 9px;
  background: var(--blue-strong);
  box-shadow: 0 8px 20px -10px rgba(37, 99, 235, 0.9);
  color: #fff;
  font-size: 16px;
  font-style: italic;
  font-weight: 850;
}

.support-link { gap: 4px; color: #93c5fd; font-size: 12px; font-weight: 700; }
.support-link svg { width: 17px; }

main {
  width: min(100%, 560px);
  min-height: calc(100vh - 58px);
  margin: 0 auto;
  overflow: clip;
  background:
    radial-gradient(circle at 100% 0%, rgba(37, 99, 235, 0.13), transparent 320px),
    var(--bg);
}

.redeem, .result { padding: 34px 16px 48px; }
.result { padding-bottom: 116px; }

.hero-copy { display: grid; gap: 12px; }
.eyebrow, .card-kicker {
  color: #93c5fd;
  font-size: 11px;
  font-weight: 760;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

h1, h2, h3, p { margin: 0; }
h1 { font-size: clamp(31px, 9.5vw, 44px); font-weight: 760; letter-spacing: -0.045em; line-height: 1.04; }
.hero-copy p, .result-heading p { color: var(--text-soft); font-size: 14px; line-height: 1.55; }

.notice {
  display: grid;
  margin-top: 24px;
  padding: 15px;
  border-radius: 14px;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 12px;
}
.notice--warning { background: var(--yellow-soft); box-shadow: 0 0 0 1px rgba(250, 204, 21, 0.2); }
.notice__icon {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 8px;
  background: var(--yellow);
  color: #332600;
  font-weight: 900;
}
.notice strong { display: block; color: #fef3c7; font-size: 13px; line-height: 1.35; }
.notice p { margin-top: 5px; color: #d9c998; font-size: 12px; line-height: 1.5; }

.redeem-card, .account-card, .demo-panel, .rules-card, .guide, .help-card {
  margin-top: 16px;
  border-radius: 18px;
  background: rgba(13, 25, 41, 0.94);
  box-shadow: var(--shadow-card);
}

.redeem-card { padding: 18px; }
.field { display: grid; gap: 8px; color: var(--text-soft); font-size: 12px; font-weight: 650; }
.field__control { position: relative; display: block; }
.field__control svg {
  position: absolute;
  top: 50%;
  left: 14px;
  width: 19px;
  color: var(--text-faint);
  transform: translateY(-50%);
}
.field input {
  width: 100%;
  height: 52px;
  padding: 0 14px 0 44px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 11px;
  outline: none;
  background: rgba(4, 11, 20, 0.58);
  color: var(--text);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  transition-property: border-color, box-shadow, background-color;
  transition-duration: 150ms;
}
.field input:focus { border-color: #60a5fa; background: rgba(4, 11, 20, 0.86); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.16); }
.field input::placeholder { color: #607289; }

.demo-code {
  min-height: 40px;
  margin: 6px 0 8px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #93c5fd;
  cursor: pointer;
  font-size: 12px;
  font-weight: 650;
}

.consent {
  position: relative;
  display: grid;
  min-height: 48px;
  padding: 10px 0;
  cursor: pointer;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: start;
  gap: 11px;
  color: var(--text-soft);
  font-size: 12px;
  line-height: 1.48;
}
.consent input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.consent__box {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border: 2px solid #62758c;
  border-radius: 7px;
  background: #0a1524;
  transition-property: scale, border-color, background-color;
  transition-duration: 150ms;
}
.consent__box svg { width: 16px; opacity: 0; scale: 0.25; filter: blur(4px); transition-property: scale, opacity, filter; transition-duration: 300ms; transition-timing-function: cubic-bezier(0.2, 0, 0, 1); }
.consent input:checked + .consent__box { border-color: var(--blue); background: var(--blue-strong); }
.consent input:checked + .consent__box svg { opacity: 1; scale: 1; filter: blur(0); }
.consent input:focus-visible + .consent__box { outline: 3px solid rgba(96, 165, 250, 0.45); outline-offset: 2px; }

.primary-button, .secondary-button, .variant-tab, .copy-button, .reveal-button, .dock-button, .dock-next, .step-check, .step-image, .icon-button, .sheet__link, .lightbox__controls button {
  transition-property: scale, background-color, color, box-shadow, opacity;
  transition-duration: 150ms;
  transition-timing-function: ease-out;
}
.primary-button:active, .secondary-button:active, .variant-tab:active, .copy-button:active, .reveal-button:active, .dock-button:active, .dock-next:active, .step-check:active, .step-image:active, .icon-button:active, .sheet__link:active, .lightbox__controls button:active, .demo-code:active { scale: 0.96; }

.primary-button {
  display: flex;
  width: 100%;
  min-height: 52px;
  margin-top: 12px;
  padding: 0 14px 0 16px;
  border: 0;
  border-radius: 11px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  background: var(--blue-strong);
  box-shadow: 0 12px 26px -14px rgba(37, 99, 235, 0.9);
  color: #fff;
  cursor: pointer;
  font-size: 14px;
  font-weight: 720;
}
.primary-button svg { width: 19px; }
.primary-button:disabled { background: #29384a; box-shadow: none; color: #71839a; cursor: not-allowed; }
.primary-button:disabled:active { scale: 1; }

.safe-note {
  display: flex;
  margin-top: 18px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: #71839a;
  font-size: 11px;
}
.safe-note svg { width: 16px; color: #6ee7b7; }

.result[hidden], .bottom-dock[hidden] { display: none; }
.result-heading { display: grid; gap: 9px; }
.result-heading h1 { font-size: 32px; }

.session-bar {
  position: sticky;
  z-index: 25;
  top: 68px;
  display: flex;
  min-height: 46px;
  margin: -22px 0 28px;
  padding: 0 12px;
  border-radius: 12px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: rgba(12, 27, 45, 0.92);
  box-shadow: var(--shadow-card);
  color: var(--text-soft);
  font-size: 11px;
  backdrop-filter: blur(14px);
}
.session-bar strong { color: #86efac; font-size: 12px; font-variant-numeric: tabular-nums; }
.session-bar__pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(74, 222, 128, 0.12); }

.account-card, .demo-panel, .rules-card, .guide, .help-card { padding: 18px; }
.card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.card-heading h2, .demo-panel h2, .rules-card h2, .guide h2, .help-card h2 { margin-top: 5px; font-size: 18px; line-height: 1.25; }
.status-dot { display: inline-flex; min-height: 28px; padding: 0 9px; border-radius: 8px; align-items: center; gap: 6px; background: var(--green-soft); color: #86efac; font-size: 10px; font-weight: 700; }
.status-dot i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }

.category-chips { display: flex; margin-top: 16px; flex-wrap: wrap; gap: 6px; }
.category-chip { display: inline-flex; min-height: 30px; padding: 0 10px; border-radius: 8px; align-items: center; font-size: 11px; font-weight: 750; }
.category-chip--platform { background: var(--red-soft); color: #fca5a5; }
.category-chip--access { background: var(--yellow-soft); color: #fde047; }
.category-chip--product { background: var(--green-soft); color: #86efac; }

.credentials { display: grid; margin-top: 16px; gap: 1px; overflow: hidden; border-radius: 12px; background: var(--line); }
.credential { position: relative; display: grid; min-height: 66px; padding: 12px 86px 12px 13px; align-content: center; gap: 5px; background: rgba(5, 12, 22, 0.74); }
.credential span, .otp-row span { color: var(--text-faint); font-size: 10px; font-weight: 650; text-transform: uppercase; letter-spacing: 0.05em; }
.credential strong { overflow: hidden; color: #e7eef8; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.copy-button, .reveal-button, .icon-button {
  display: grid;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  place-items: center;
  background: rgba(148, 163, 184, 0.1);
  color: var(--text-soft);
  cursor: pointer;
}
.copy-button { position: absolute; top: 12px; right: 9px; }
.credential .reveal-button { position: absolute; top: 12px; right: 54px; }
.copy-button svg, .reveal-button svg, .icon-button svg { width: 18px; }

.icon-swap { position: relative; display: grid; width: 18px; height: 18px; place-items: center; }
.icon-swap svg { position: absolute; inset: 0; transition-property: scale, opacity, filter; transition-duration: 300ms; transition-timing-function: cubic-bezier(0.2, 0, 0, 1); }
.icon-swap__hide, .is-revealed .icon-swap__show { opacity: 0; scale: 0.25; filter: blur(4px); }
.icon-swap__show, .is-revealed .icon-swap__hide { opacity: 1; scale: 1; filter: blur(0); }

.otp-row { display: flex; min-height: 68px; margin-top: 12px; padding: 10px 10px 10px 13px; border-radius: 12px; align-items: center; justify-content: space-between; gap: 12px; background: var(--blue-soft); }
.otp-row div { display: grid; gap: 5px; }
.otp-row strong { color: #bfdbfe; font-size: 12px; font-variant-numeric: tabular-nums; }
.secondary-button { min-height: 46px; padding: 0 12px; border: 0; border-radius: 9px; background: var(--blue-strong); color: #fff; cursor: pointer; font-size: 11px; font-weight: 700; }

.demo-panel__heading { display: grid; gap: 6px; }
.demo-panel__heading p { color: var(--text-faint); font-size: 12px; line-height: 1.48; }
.prototype-badge { width: fit-content; padding: 4px 7px; border-radius: 6px; background: rgba(192, 132, 252, 0.13); color: #d8b4fe; font-size: 9px; font-weight: 760; letter-spacing: 0.05em; text-transform: uppercase; }
.variant-tabs { display: flex; margin: 15px -18px -2px; padding: 2px 18px 10px; overflow-x: auto; gap: 7px; scroll-snap-type: x proximity; scrollbar-width: none; }
.variant-tabs::-webkit-scrollbar { display: none; }
.variant-tab { min-width: max-content; min-height: 46px; padding: 0 13px; border: 0; border-radius: 10px; background: rgba(148, 163, 184, 0.09); color: var(--text-soft); cursor: pointer; scroll-snap-align: start; font-size: 11px; font-weight: 700; }
.variant-tab.is-active { background: var(--blue-strong); box-shadow: 0 8px 20px -12px rgba(37, 99, 235, 0.9); color: #fff; }

.rules-card { position: relative; overflow: hidden; background: rgba(61, 21, 27, 0.76); box-shadow: 0 0 0 1px rgba(248, 113, 113, 0.24), 0 12px 30px -20px rgba(0, 0, 0, 0.7); }
.rules-card__icon { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 11px; background: var(--red); color: #3d0c0c; font-size: 19px; font-weight: 900; }
.rules-card__heading { margin-top: 14px; }
.rules-card__heading span { color: #fca5a5; font-size: 10px; font-weight: 750; letter-spacing: 0.06em; text-transform: uppercase; }
.rules-card h2 { color: #fff1f2; }
.rules-card ol { display: grid; margin: 16px 0 0; padding: 0; gap: 9px; counter-reset: rules; list-style: none; }
.rules-card li { position: relative; padding-left: 29px; color: #f3c8cb; font-size: 12px; line-height: 1.48; counter-increment: rules; }
.rules-card li::before { position: absolute; top: 0; left: 0; display: grid; width: 20px; height: 20px; place-items: center; border-radius: 6px; background: rgba(248, 113, 113, 0.15); color: #fca5a5; content: counter(rules); font-size: 9px; font-weight: 750; }
.rules-card li:first-child { color: #fff; font-weight: 750; }

.guide { padding-bottom: 20px; }
.guide__heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.step-total { display: inline-flex; min-height: 30px; padding: 0 9px; border-radius: 8px; align-items: center; background: var(--blue-soft); color: #93c5fd; font-size: 10px; font-variant-numeric: tabular-nums; font-weight: 720; }
.guide-progress { margin-top: 17px; }
.guide-progress > div { display: flex; align-items: center; justify-content: space-between; color: var(--text-faint); font-size: 10px; }
.guide-progress strong { color: var(--text-soft); font-variant-numeric: tabular-nums; }
.guide-progress__track { display: block; overflow: hidden; height: 5px; margin-top: 8px; border-radius: 3px; background: rgba(148, 163, 184, 0.13); }
.guide-progress__track i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--blue); transition-property: width; transition-duration: 220ms; transition-timing-function: ease-out; }
.guide-note { display: grid; margin-top: 16px; padding: 12px; border-radius: 11px; background: rgba(59, 130, 246, 0.09); color: #9fb1c7; grid-template-columns: 18px minmax(0, 1fr); gap: 9px; }
.guide-note svg { width: 18px; color: #60a5fa; }
.guide-note p { font-size: 11px; line-height: 1.46; }

.guide-sections { display: grid; margin-top: 16px; gap: 9px; }
.guide-group { overflow: hidden; border-radius: 14px; background: rgba(5, 12, 22, 0.5); box-shadow: 0 0 0 1px var(--line); }
.guide-group summary { position: relative; display: grid; min-height: 62px; padding: 10px 43px 10px 13px; align-items: center; cursor: pointer; list-style: none; grid-template-columns: 31px minmax(0, 1fr); gap: 11px; }
.guide-group summary::-webkit-details-marker { display: none; }
.guide-group summary::after { position: absolute; top: 50%; right: 15px; width: 8px; height: 8px; border-right: 1.8px solid #8294aa; border-bottom: 1.8px solid #8294aa; content: ""; transform: translateY(-65%) rotate(45deg); transition-property: transform; transition-duration: 180ms; }
.guide-group[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.guide-group__number { display: grid; width: 31px; height: 31px; place-items: center; border-radius: 9px; background: var(--blue-soft); color: #93c5fd; font-size: 10px; font-variant-numeric: tabular-nums; font-weight: 780; }
.guide-group summary strong { display: block; color: #e8eef7; font-size: 13px; }
.guide-group summary small { display: block; margin-top: 3px; color: var(--text-faint); font-size: 10px; }
.guide-group__steps { display: grid; padding: 0 10px 10px; gap: 9px; }

.step-card { scroll-margin-top: 80px; overflow: hidden; border-radius: 12px; background: var(--surface-2); box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.12); }
.step-card__head { display: grid; min-height: 62px; padding: 11px 10px 11px 12px; align-items: center; grid-template-columns: 28px minmax(0, 1fr) 42px; gap: 9px; }
.step-card__number { color: #60a5fa; font-size: 12px; font-variant-numeric: tabular-nums; font-weight: 780; }
.step-card__copy h3 { color: #eef4fb; font-size: 12px; line-height: 1.4; }
.step-card__copy p { margin-top: 4px; color: var(--text-faint); font-size: 10px; line-height: 1.45; }
.step-check { display: grid; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 10px; place-items: center; background: rgba(148, 163, 184, 0.09); color: #71839a; cursor: pointer; }
.step-check svg { width: 18px; }
.step-check.is-complete { background: var(--green-soft); color: var(--green); }
.step-images { display: grid; }
.step-images--multi { padding: 7px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; background: #07111f; }
.step-image { position: relative; display: block; width: 100%; overflow: hidden; padding: 0; border: 0; background: #050b14; cursor: zoom-in; }
.step-images--multi .step-image { border-radius: 9px; }
.step-image img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; outline: 1px solid rgba(255, 255, 255, 0.1); outline-offset: -1px; }
.step-image span { position: absolute; right: 9px; bottom: 9px; display: inline-flex; min-height: 30px; padding: 0 10px; border-radius: 8px; align-items: center; gap: 6px; background: rgba(4, 10, 20, 0.78); color: #fff; font-size: 9px; font-weight: 700; backdrop-filter: blur(8px); }
.step-image span svg { width: 14px; }
.no-image { display: flex; min-height: 54px; padding: 0 12px; border-top: 1px solid var(--line); align-items: center; gap: 8px; color: var(--text-faint); font-size: 10px; }
.no-image svg { width: 17px; }

.video-block { margin-top: 12px; padding: 15px; border-radius: 14px; background: rgba(20, 54, 97, 0.48); box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.28); }
.video-block__preview { display: grid; overflow: hidden; min-height: 150px; border-radius: 10px; place-items: center; background: radial-gradient(circle at 50% 0%, #214e82, #081321 72%); }
.video-block__play { display: grid; width: 52px; height: 52px; place-items: center; border-radius: 50%; background: #fff; color: var(--blue-strong); box-shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.7); }
.video-block__play svg { width: 24px; margin-left: 2px; fill: currentColor; stroke: none; }
.video-block h3 { margin-top: 14px; font-size: 15px; }
.video-block p { margin-top: 6px; color: var(--text-soft); font-size: 11px; line-height: 1.5; }
.video-block a { display: flex; min-height: 46px; margin-top: 13px; padding: 0 12px; border-radius: 10px; align-items: center; justify-content: center; gap: 7px; background: var(--blue-strong); color: #fff; font-size: 11px; font-weight: 700; text-decoration: none; }
.video-block a svg { width: 17px; }

.help-card { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 13px; }
.help-card__icon { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 12px; background: var(--blue-soft); color: #93c5fd; }
.help-card__icon svg { width: 21px; }
.help-card p { margin-top: 6px; color: var(--text-faint); font-size: 11px; line-height: 1.48; }
.help-card a { display: inline-flex; min-height: 46px; margin-top: 10px; align-items: center; gap: 4px; color: #93c5fd; font-size: 11px; font-weight: 700; text-decoration: none; }
.help-card a svg { width: 17px; }

.bottom-dock {
  position: fixed;
  z-index: 50;
  right: max(10px, calc((100vw - 540px) / 2));
  bottom: calc(10px + env(safe-area-inset-bottom));
  left: max(10px, calc((100vw - 540px) / 2));
  display: grid;
  min-height: 62px;
  padding: 5px;
  border-radius: 17px;
  background: rgba(15, 29, 48, 0.95);
  box-shadow: var(--shadow-float);
  grid-template-columns: 68px minmax(0, 1fr);
  gap: 5px;
  backdrop-filter: blur(18px);
}
.dock-button, .dock-next { min-height: 52px; border: 0; border-radius: 12px; color: #fff; cursor: pointer; }
.dock-button { display: grid; padding: 6px; place-items: center; align-content: center; gap: 3px; background: rgba(148, 163, 184, 0.1); color: var(--text-soft); font-size: 9px; }
.dock-button svg { width: 20px; }
.dock-next { display: flex; padding: 0 12px 0 14px; align-items: center; justify-content: space-between; gap: 10px; background: var(--blue-strong); text-align: left; }
.dock-next > span { display: grid; min-width: 0; gap: 2px; }
.dock-next small, .dock-next strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dock-next small { color: #bfdbfe; font-size: 9px; font-variant-numeric: tabular-nums; }
.dock-next strong { font-size: 11px; }
.dock-next svg { width: 20px; flex: 0 0 auto; }

.sheet, .lightbox { position: fixed; z-index: 80; inset: 0; visibility: hidden; opacity: 0; transition-property: opacity, visibility; transition-duration: 170ms; }
.sheet.is-open, .lightbox.is-open { visibility: visible; opacity: 1; }
.sheet__backdrop, .lightbox__backdrop { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: rgba(1, 5, 12, 0.76); backdrop-filter: blur(7px); }
.sheet__panel {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  max-height: min(78vh, 680px);
  padding: 9px 16px calc(18px + env(safe-area-inset-bottom));
  border-radius: 22px 22px 0 0;
  background: #0d1929;
  box-shadow: var(--shadow-float);
  transform: translateY(24px);
  transition-property: transform;
  transition-duration: 210ms;
  transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
}
.sheet.is-open .sheet__panel { transform: translateY(0); }
.sheet__handle { display: block; width: 38px; height: 4px; margin: 0 auto 13px; border-radius: 2px; background: #42536a; }
.sheet__heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.sheet__heading span { color: var(--text-faint); font-size: 10px; text-transform: uppercase; }
.sheet__heading h2 { margin-top: 4px; font-size: 18px; }
.sheet__links { display: grid; max-height: calc(78vh - 112px); margin-top: 14px; overflow-y: auto; gap: 7px; }
.sheet__link { display: grid; width: 100%; min-height: 52px; padding: 8px 11px; border: 0; border-radius: 11px; background: rgba(148, 163, 184, 0.08); color: var(--text); cursor: pointer; grid-template-columns: 29px minmax(0, 1fr); align-items: center; gap: 9px; text-align: left; }
.sheet__link span { display: grid; width: 29px; height: 29px; place-items: center; border-radius: 8px; background: var(--blue-soft); color: #93c5fd; font-size: 9px; font-variant-numeric: tabular-nums; font-weight: 780; }
.sheet__link strong { font-size: 11px; }

.lightbox { display: grid; padding: 10px; place-items: center; }
.lightbox__panel { position: relative; display: grid; width: min(100%, 540px); max-height: calc(100dvh - 20px); overflow: hidden; border-radius: 20px; background: #0d1929; box-shadow: var(--shadow-float); opacity: 0; transform: translateY(12px) scale(0.985); transition-property: opacity, transform; transition-duration: 210ms; transition-timing-function: cubic-bezier(0.2, 0, 0, 1); }
.lightbox.is-open .lightbox__panel { opacity: 1; transform: translateY(0) scale(1); }
.lightbox__topbar { display: flex; min-height: 56px; padding: 7px 8px 7px 15px; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.lightbox__topbar span { color: var(--text-faint); font-size: 10px; font-variant-numeric: tabular-nums; }
.lightbox__panel > img { display: block; width: 100%; max-height: calc(100dvh - 260px); object-fit: contain; background: #020711; outline: 1px solid rgba(255, 255, 255, 0.1); outline-offset: -1px; }
.lightbox__caption { display: grid; min-height: 96px; padding: 15px; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; }
.lightbox__caption > span { color: #60a5fa; font-size: 12px; font-variant-numeric: tabular-nums; font-weight: 780; }
.lightbox__caption h2 { font-size: 14px; }
.lightbox__caption p { margin-top: 4px; color: var(--text-faint); font-size: 10px; line-height: 1.45; }
.lightbox__controls { display: grid; padding: 0 10px 10px; grid-template-columns: 1fr 1fr; gap: 7px; }
.lightbox__controls button { display: flex; min-height: 46px; padding: 0 12px; border: 0; border-radius: 10px; align-items: center; justify-content: center; gap: 7px; background: rgba(148, 163, 184, 0.1); color: var(--text-soft); cursor: pointer; font-size: 11px; font-weight: 700; }
.lightbox__controls button:last-child { background: var(--blue-strong); color: #fff; }
.lightbox__controls svg { width: 18px; }

.toast { position: fixed; z-index: 100; bottom: calc(84px + env(safe-area-inset-bottom)); left: 50%; max-width: calc(100vw - 28px); padding: 11px 14px; border-radius: 10px; background: #e8eef7; box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.65); color: #07111f; font-size: 11px; font-weight: 650; opacity: 0; pointer-events: none; transform: translate(-50%, 9px); transition-property: opacity, transform; transition-duration: 170ms; }
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

:focus-visible { outline: 3px solid rgba(96, 165, 250, 0.46); outline-offset: 3px; }

@media (min-width: 561px) {
  .topbar { border-right: 1px solid var(--line); border-left: 1px solid var(--line); }
  main { box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.12), 0 28px 80px rgba(0, 0, 0, 0.4); }
  .sheet__panel { width: 560px; margin: 0 auto; }
}

@media (max-width: 370px) {
  .redeem, .result { padding-right: 12px; padding-left: 12px; }
  .hero-copy h1 { font-size: 29px; }
  .account-card, .demo-panel, .rules-card, .guide, .help-card { padding: 15px; border-radius: 16px; }
  .variant-tabs { margin-right: -15px; margin-left: -15px; padding-right: 15px; padding-left: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: 0.01ms !important; }
}


/* Adaptive desktop/mobile presentation */
.result-layout { display: block; }

.layout-switcher {
  display: flex;
  min-height: 46px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 11px;
  align-items: center;
  gap: 2px;
  background: rgba(4, 11, 20, 0.58);
}
.layout-switcher button {
  min-width: 42px;
  min-height: 40px;
  padding: 0 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-faint);
  cursor: pointer;
  font-size: 10px;
  font-weight: 720;
  transition-property: scale, background-color, color, box-shadow;
  transition-duration: 150ms;
  transition-timing-function: ease-out;
}
.layout-switcher button:active { scale: 0.96; }
.layout-switcher button[aria-pressed="true"] {
  background: var(--blue-strong);
  box-shadow: 0 7px 18px -12px rgba(37, 99, 235, 0.9);
  color: #fff;
}

html[data-layout="desktop"] body { min-width: 940px; }
html[data-layout="desktop"] .topbar {
  width: min(calc(100% - 40px), 1200px);
  height: 66px;
  padding: 0 24px;
  border-right: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
html[data-layout="desktop"] main {
  width: min(calc(100% - 40px), 1200px);
  min-height: calc(100vh - 66px);
  overflow: visible;
  box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.12), 0 28px 80px rgba(0, 0, 0, 0.4);
}
html[data-layout="desktop"] .redeem {
  display: grid;
  min-height: calc(100vh - 66px);
  padding: clamp(56px, 8vw, 104px) clamp(36px, 6vw, 78px);
  grid-template-columns: minmax(0, 1.08fr) minmax(380px, 0.92fr);
  grid-template-areas:
    "hero form"
    "notice form"
    ". safe";
  align-content: center;
  align-items: start;
  column-gap: clamp(48px, 7vw, 96px);
  row-gap: 22px;
}
html[data-layout="desktop"] .hero-copy { grid-area: hero; align-self: end; }
html[data-layout="desktop"] .hero-copy h1 {
  max-width: 650px;
  font-size: clamp(46px, 5vw, 68px);
  line-height: 0.99;
}
html[data-layout="desktop"] .hero-copy p { max-width: 590px; font-size: 16px; }
html[data-layout="desktop"] .notice { grid-area: notice; margin-top: 4px; }
html[data-layout="desktop"] .redeem-card {
  grid-area: form;
  margin-top: 0;
  padding: 26px;
  border-radius: 20px;
}
html[data-layout="desktop"] .safe-note { grid-area: safe; margin-top: -6px; }
html[data-layout="desktop"] .result { padding: 42px 32px 72px; }
html[data-layout="desktop"] .session-bar {
  top: 78px;
  width: fit-content;
  min-width: 230px;
  margin: -22px 0 30px auto;
}
html[data-layout="desktop"] .result-heading {
  max-width: 700px;
  margin-bottom: 24px;
}
html[data-layout="desktop"] .result-heading h1 { font-size: 42px; }
html[data-layout="desktop"] .result-layout {
  display: grid;
  grid-template-columns: minmax(300px, 0.42fr) minmax(0, 1fr);
  align-items: start;
  gap: 18px;
}
html[data-layout="desktop"] .result-layout > .account-card,
html[data-layout="desktop"] .result-layout > .demo-panel,
html[data-layout="desktop"] .result-layout > .rules-card,
html[data-layout="desktop"] .result-layout > .guide,
html[data-layout="desktop"] .result-layout > .help-card { margin-top: 0; }
html[data-layout="desktop"] .account-card { grid-column: 1; grid-row: 1; }
html[data-layout="desktop"] .demo-panel { grid-column: 1; grid-row: 2; }
html[data-layout="desktop"] .help-card { grid-column: 1; grid-row: 3; }
html[data-layout="desktop"] .rules-card { grid-column: 2; grid-row: 1; }
html[data-layout="desktop"] .guide { grid-column: 2; grid-row: 2 / span 2; }
html[data-layout="desktop"] .account-card,
html[data-layout="desktop"] .demo-panel,
html[data-layout="desktop"] .rules-card,
html[data-layout="desktop"] .guide,
html[data-layout="desktop"] .help-card { padding: 22px; }
html[data-layout="desktop"] .variant-tabs {
  margin-right: -22px;
  margin-left: -22px;
  padding-right: 22px;
  padding-left: 22px;
}
html[data-layout="desktop"] .guide-group__steps {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
html[data-layout="desktop"] .guide-group__steps > :only-child { grid-column: 1 / -1; }
html[data-layout="desktop"] .step-card__copy h3 { font-size: 13px; }
html[data-layout="desktop"] .step-card__copy p { font-size: 11px; }
html[data-layout="desktop"] .bottom-dock { display: none; }
html[data-layout="desktop"] .sheet__panel {
  top: 50%;
  bottom: auto;
  width: min(540px, calc(100% - 40px));
  margin: 0 auto;
  padding: 18px;
  border-radius: 20px;
  transform: translateY(calc(-50% + 18px));
}
html[data-layout="desktop"] .sheet.is-open .sheet__panel { transform: translateY(-50%); }
html[data-layout="desktop"] .sheet__handle { display: none; }
html[data-layout="desktop"] .lightbox__panel { width: min(920px, calc(100% - 40px)); }
html[data-layout="desktop"] .lightbox__panel > img { max-height: calc(100dvh - 238px); }
html[data-layout="desktop"] .toast { bottom: 28px; }

@media (max-width: 430px) {
  .topbar { height: 62px; padding-right: 10px; padding-left: 10px; }
  .logo > span:last-child, .support-link span { display: none; }
  .support-link { min-width: 40px; justify-content: center; }
  .layout-switcher button { padding-right: 7px; padding-left: 7px; }
}

@media (max-width: 939px) {
  html[data-layout="desktop"] .layout-switcher {
    position: fixed;
    z-index: 70;
    top: 8px;
    right: 8px;
    box-shadow: var(--shadow-float);
  }
}

@media (prefers-reduced-motion: reduce) {
  .layout-switcher button { transition-duration: 0.01ms !important; }
}


/* Full guide modes */
.guide-view-switcher {
  display: grid;
  margin-top: 16px;
  padding: 4px;
  border-radius: 14px;
  background: rgba(5, 12, 22, 0.58);
  box-shadow: 0 0 0 1px var(--line);
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}
.guide-view-switcher button,
.strip-navigation button {
  min-height: 44px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text-faint);
  cursor: pointer;
  font-size: 11px;
  font-weight: 720;
  transition-property: scale, background-color, color, box-shadow, opacity;
  transition-duration: 150ms;
  transition-timing-function: ease-out;
}
.guide-view-switcher button:active,
.strip-navigation button:active { scale: 0.96; }
.guide-view-switcher button[aria-pressed="true"] {
  background: var(--blue-strong);
  box-shadow: 0 8px 20px -12px rgba(37, 99, 235, 0.9);
  color: #fff;
}

.guide-sections.is-strip {
  display: block;
  margin-right: -6px;
  margin-left: -6px;
}
.step-strip {
  display: grid;
  padding: 6px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  grid-auto-columns: 100%;
  grid-auto-flow: column;
  gap: 12px;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.step-strip::-webkit-scrollbar { display: none; }
.step-strip .step-card {
  width: 100%;
  min-width: 0;
  scroll-margin: 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.step-strip .step-card__head { min-height: 78px; }
.step-strip .step-card__copy h3 { font-size: 13px; }
.step-strip .step-card__copy p { font-size: 11px; }
.step-strip .step-image img { max-height: 430px; object-fit: contain; }

.strip-navigation {
  display: grid;
  margin-top: 10px;
  padding: 4px;
  border-radius: 14px;
  align-items: center;
  background: rgba(5, 12, 22, 0.58);
  box-shadow: 0 0 0 1px var(--line);
  grid-template-columns: minmax(92px, 1fr) auto minmax(92px, 1fr);
  gap: 6px;
}
.strip-navigation button {
  display: flex;
  padding: 0 12px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: rgba(148, 163, 184, 0.09);
  color: var(--text-soft);
}
.strip-navigation button:last-child { background: var(--blue-strong); color: #fff; }
.strip-navigation button:disabled { opacity: 0.38; cursor: not-allowed; }
.strip-navigation button:disabled:active { scale: 1; }
.strip-navigation button svg { width: 18px; }
.strip-navigation strong {
  min-width: 94px;
  color: var(--text-soft);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

html[data-layout="desktop"] .guide-view-switcher {
  width: min(100%, 390px);
}
html[data-layout="desktop"] .step-strip .step-card__head {
  padding: 16px 14px;
  grid-template-columns: 34px minmax(0, 1fr) 46px;
}
html[data-layout="desktop"] .step-strip .step-card__copy h3 { font-size: 15px; }
html[data-layout="desktop"] .step-strip .step-card__copy p { font-size: 12px; }
html[data-layout="desktop"] .strip-navigation { max-width: 560px; margin-right: auto; margin-left: auto; }

@media (max-width: 370px) {
  .guide-view-switcher button { font-size: 10px; }
  .strip-navigation { grid-template-columns: 82px auto 82px; }
  .strip-navigation button { padding: 0 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .guide-view-switcher button,
  .strip-navigation button { transition-duration: 0.01ms !important; }
  .step-strip { scroll-behavior: auto; }
}