@import url("/static/affiliate-caption-fonts.css");

:root {
  color-scheme: only light;
  --app-height: 100svh;
  --bg: #000;
  --text: #fff;
  --muted: #9d9d9d;
  --line: #f5f5f5;
  --box: #070707;
  --box-2: #111;
  --disabled: #343434;
  --danger: #ff5a5a;
  --brand-gold: #d6a83f;
  --brand-gold-highlight: #e4b955;
  --brand-gold-deep: #c58a2a;
  --brand-gold-ink: #090704;
  --brand-gold-glow: rgba(214, 168, 63, 0.22);
  --brand-purple: #a958ff;
  --brand-purple-deep: #5e199f;
  --font-display: Georgia, "Times New Roman", serif;
  --font-ui: Arial, Helvetica, sans-serif;
}

/* Universal Creator purchase screen. */
.buy-screen {
  display: grid;
  position: relative;
  width: min(880px, 92vw);
  gap: 22px;
  padding: 12px 0 34px;
}

.buy-account {
  display: none;
}

.buy-hero {
  display: grid;
  justify-items: center;
  gap: 7px;
  text-align: center;
}

.buy-kicker,
.buy-lead,
.buy-price-term,
.buy-renewal,
.buy-section-heading,
.buy-product-number,
.buy-product-detail,
.buy-product-badge,
.buy-confidence,
.buy-footer,
.buy-primary,
.buy-account {
  font-family: var(--font-ui);
}

.buy-kicker {
  color: #a958ff;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.11em;
}

.buy-heading {
  max-width: 13ch;
  margin: 0;
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(46px, 6.2vw, 72px);
  font-weight: 400;
  letter-spacing: -0.045em;
  line-height: 0.88;
  text-wrap: balance;
}

.buy-heading > span {
  display: block;
}

.buy-lead {
  max-width: 54ch;
  margin: 2px 0 0;
  color: #c8c8c8;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.36;
}

.buy-purchase {
  display: grid;
  width: min(620px, 100%);
  justify-self: center;
  justify-items: center;
  gap: 8px;
}

.buy-price {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.buy-price-value {
  color: var(--brand-gold);
  font-family: var(--font-display);
  font-size: 62px;
  font-weight: 400;
  letter-spacing: -0.045em;
  line-height: 0.8;
}

.buy-price-term {
  color: #bcbcbc;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

button.buy-primary {
  width: 100%;
  min-height: 54px;
  border: 1px solid var(--brand-gold-highlight);
  border-radius: 3px;
  background: var(--brand-gold);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.09) inset;
  color: var(--brand-gold-ink);
  padding: 14px 20px;
  cursor: pointer;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0.025em;
  transition: background 140ms ease, border-color 140ms ease, transform 100ms ease;
}

button.buy-primary:hover,
button.buy-primary:focus-visible {
  border-color: #f0ca72;
  background: var(--brand-gold-highlight);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12) inset;
  outline: 0;
}

button.buy-primary:active {
  transform: translateY(1px);
}

button.buy-primary.is-active {
  background: transparent;
  color: var(--brand-gold);
}

.buy-renewal {
  margin: 0;
  color: #8f8f8f;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
}

.buy-included {
  border-top: 1px solid rgba(169, 88, 255, 0.78);
  border-bottom: 1px solid rgba(169, 88, 255, 0.78);
}

.buy-section-heading {
  display: flex;
  min-height: 30px;
  align-items: center;
  justify-content: space-between;
  color: #8e8e8e;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.buy-section-heading span:last-child {
  color: var(--brand-gold);
}

.buy-product {
  display: grid;
  min-height: 64px;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  border-top: 1px solid rgba(169, 88, 255, 0.34);
}

.buy-product-number {
  align-self: stretch;
  display: grid;
  place-items: center start;
  color: #a958ff;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.buy-product-copy {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
}

.buy-product-title {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.buy-product-label {
  margin: 0;
  color: #fff;
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 0.95;
}

.buy-product-badge {
  flex: 0 0 auto;
  color: var(--brand-gold);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.07em;
}

.buy-product-detail {
  margin: 0;
  color: #a7a7a7;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.045em;
  line-height: 1.2;
}

.buy-confidence {
  display: grid;
  width: min(680px, 100%);
  justify-self: center;
  gap: 4px;
  border-left: 2px solid var(--brand-gold);
  padding: 2px 0 2px 13px;
}

.buy-confidence-title {
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.buy-confidence-copy,
.buy-identity {
  margin: 0;
  color: #a8a8a8;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.3;
}

.buy-identity {
  color: #d1d1d1;
}

.buy-footer {
  display: grid;
  justify-items: center;
  gap: 9px;
}

.buy-recovery,
.buy-legal {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
}

.buy-recovery-action,
.buy-legal a {
  border: 0;
  border-bottom: 1px solid currentColor;
  background: transparent;
  color: #b98aff;
  padding: 2px 0;
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.035em;
  line-height: 1.1;
  text-decoration: none;
}

.buy-recovery-separator {
  color: #4e4e4e;
  font-size: 12px;
}

.buy-legal {
  gap: 13px;
}

.buy-legal a {
  border: 0;
  color: #717171;
  font-size: 8px;
  letter-spacing: 0.08em;
}

@media (max-width: 760px) {
  body[data-step="creatorOffer"] {
    height: var(--app-height);
    min-height: var(--app-height);
    overflow: hidden;
  }

  body[data-step="creatorOffer"] .wizard-shell,
  body[data-step="creatorOffer"] .wizard-root {
    width: 100%;
    height: var(--app-height);
    min-height: var(--app-height);
    overflow: hidden;
    padding: 0;
  }

  .buy-screen {
    width: min(100%, 440px);
    height: 100%;
    min-height: 0;
    margin: 0 auto;
    justify-content: stretch;
    align-content: stretch;
    gap: clamp(6px, 1.6svh, 14px);
    padding:
      max(72px, calc(env(safe-area-inset-top, 0px) + 62px))
      18px
      max(9px, env(safe-area-inset-bottom, 0px));
  }

  .buy-account {
    display: inline-flex;
    position: fixed;
    z-index: 8;
    top: max(18px, env(safe-area-inset-top, 0px));
    right: max(18px, env(safe-area-inset-right, 0px));
    min-width: 112px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid #a958ff;
    border-radius: 3px;
    background: #5e199f;
    box-shadow: none;
    color: #fff;
    padding: 7px 12px 7px 8px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 900;
  }

  .buy-account[data-account-action="pro"] {
    border-color: var(--brand-gold);
    background: var(--brand-gold);
    color: var(--brand-gold-ink);
  }

  .buy-account .account-action-mark {
    width: 27px;
    height: 27px;
    flex-basis: 27px;
    border-color: rgba(255, 255, 255, 0.58);
  }

  .buy-hero {
    gap: 4px;
  }

  .buy-kicker {
    font-size: 9px;
  }

  .buy-heading {
    max-width: 100%;
    font-size: clamp(31px, 9.6vw, 40px);
    line-height: 0.88;
  }

  .buy-lead {
    max-width: 38ch;
    font-size: 11px;
    line-height: 1.28;
  }

  .buy-purchase {
    gap: 6px;
  }

  .buy-price {
    gap: 7px;
  }

  .buy-price-value {
    font-size: clamp(44px, 13vw, 54px);
  }

  .buy-price-term {
    font-size: 9px;
  }

  button.buy-primary {
    min-height: 49px;
    padding: 12px 16px;
    font-size: 16px;
  }

  .buy-renewal {
    font-size: 9px;
  }

  .buy-section-heading {
    min-height: 24px;
    font-size: 8px;
  }

  .buy-product {
    min-height: clamp(48px, 6.8svh, 58px);
    grid-template-columns: 32px minmax(0, 1fr);
  }

  .buy-product-number {
    font-size: 8px;
  }

  .buy-product-copy {
    gap: 3px;
  }

  .buy-product-label {
    font-size: clamp(20px, 6.2vw, 25px);
  }

  .buy-product-badge {
    font-size: 8px;
  }

  .buy-product-detail {
    font-size: 10px;
    letter-spacing: 0.035em;
    white-space: normal;
  }

  .buy-confidence {
    gap: 3px;
    border-left-width: 1px;
    padding-left: 10px;
  }

  .buy-confidence-title,
  .buy-confidence-copy,
  .buy-identity {
    font-size: 8px;
  }

  .buy-footer {
    gap: 6px;
  }

  .buy-recovery-action {
    min-height: 18px;
    font-size: 9px;
  }
}

@media (max-width: 760px) and (max-height: 720px) {
  .buy-screen {
    gap: 5px;
    padding-top: max(66px, calc(env(safe-area-inset-top, 0px) + 58px));
    padding-bottom: max(5px, env(safe-area-inset-bottom, 0px));
  }

  .buy-heading {
    font-size: clamp(29px, 8.8vw, 34px);
  }

  .buy-lead {
    font-size: 9px;
  }

  .buy-price-value {
    font-size: 40px;
  }

  button.buy-primary {
    min-height: 44px;
    padding-block: 10px;
    font-size: 15px;
  }

  .buy-renewal {
    font-size: 8px;
  }

  .buy-section-heading {
    min-height: 20px;
  }

  .buy-product {
    min-height: 45px;
  }

  .buy-product-label {
    font-size: 20px;
  }

  .buy-confidence-copy,
  .buy-identity {
    line-height: 1.18;
  }

  .buy-footer {
    gap: 3px;
  }
}

/* Product-led Creator purchase layout. Kept after the original rules so the
   universal buy page can evolve without affecting the other purchase flows. */
.buy-screen {
  gap: 18px;
  padding: 16px 0 34px;
}

.buy-kicker {
  color: var(--brand-purple);
}

.buy-heading {
  max-width: 15ch;
}

.buy-lead {
  font-size: 13px;
}

.buy-included {
  display: grid;
  min-height: 0;
  grid-template-rows: auto repeat(3, minmax(106px, 1fr));
  border-color: var(--brand-purple);
}

.buy-section-heading {
  min-height: 32px;
}

.buy-product {
  min-height: 106px;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 18px;
  border-top-color: rgba(169, 88, 255, 0.38);
  padding: 8px 0;
}

.buy-product-media {
  align-self: stretch;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--brand-purple);
  border-radius: 2px;
  background: #050505;
}

.buy-product-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.buy-product:first-of-type .buy-product-media img {
  object-position: center 54%;
}

.buy-product-copy {
  align-content: center;
  gap: 7px;
}

.buy-product-title {
  justify-content: flex-start;
}

.buy-product-label {
  font-size: 30px;
}

.buy-product-detail {
  max-width: 52ch;
  color: #b8b8b8;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.3;
}

.buy-product-modes {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.buy-product-mode {
  border: 1px solid rgba(169, 88, 255, 0.52);
  color: #d3b8ff;
  padding: 2px 5px;
  font-family: var(--font-ui);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.065em;
  line-height: 1;
}

.buy-price-value {
  font-size: 60px;
}

.buy-renewal {
  font-size: 9px;
}

.buy-renewal a {
  color: #b98aff;
  text-decoration: none;
}

.buy-renewal a:hover,
.buy-renewal a:focus-visible {
  color: #fff;
  outline: 0;
}

.buy-footer {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.buy-recovery {
  position: relative;
}

.buy-recovery summary {
  border-bottom: 1px solid currentColor;
  color: #b98aff;
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.045em;
  list-style: none;
  line-height: 1.1;
}

.buy-recovery summary::-webkit-details-marker {
  display: none;
}

.buy-recovery-menu {
  display: flex;
  position: absolute;
  z-index: 4;
  bottom: calc(100% + 9px);
  left: 50%;
  width: max-content;
  max-width: min(320px, 88vw);
  transform: translateX(-50%);
  gap: 6px;
  border: 1px solid var(--brand-purple);
  background: #060606;
  padding: 7px;
}

.buy-legal {
  gap: 11px;
}

@media (max-width: 760px) {
  .buy-screen {
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    gap: clamp(7px, 1.15svh, 11px);
    padding:
      max(70px, calc(env(safe-area-inset-top, 0px) + 60px))
      18px
      max(8px, env(safe-area-inset-bottom, 0px));
  }

  .buy-account {
    border-color: var(--brand-purple);
    background: var(--brand-purple-deep);
  }

  .buy-hero {
    gap: 3px;
  }

  .buy-heading {
    font-size: clamp(31px, 8.9vw, 38px);
  }

  .buy-lead {
    max-width: 40ch;
    font-size: 11px;
    line-height: 1.24;
  }

  .buy-included {
    grid-template-rows: 23px repeat(3, minmax(0, 1fr));
  }

  .buy-section-heading {
    min-height: 23px;
    font-size: 8px;
  }

  .buy-product {
    min-height: 0;
    grid-template-columns: clamp(68px, 20vw, 84px) minmax(0, 1fr);
    gap: clamp(10px, 3.3vw, 14px);
    padding: 7px 0;
  }

  .buy-product-copy {
    gap: clamp(4px, 0.7svh, 7px);
  }

  .buy-product-label {
    font-size: clamp(23px, 6.5vw, 27px);
  }

  .buy-product-detail {
    font-size: clamp(9.5px, 2.75vw, 11px);
    line-height: 1.24;
  }

  .buy-product-modes {
    gap: 4px;
  }

  .buy-product-mode {
    padding: 2px 4px;
    font-size: 7px;
  }

  .buy-purchase {
    gap: 6px;
  }

  .buy-price-value {
    font-size: clamp(42px, 12.5vw, 50px);
  }

  button.buy-primary {
    min-height: 48px;
    padding: 11px 16px;
  }

  .buy-renewal {
    font-size: 7.5px;
  }

  .buy-footer {
    justify-content: space-between;
    gap: 10px;
  }

  .buy-recovery summary {
    font-size: 8px;
  }

  .buy-recovery-menu {
    left: 0;
    transform: none;
  }

  .buy-recovery-action {
    min-height: 22px;
    font-size: 8px;
  }

  .buy-legal a {
    font-size: 7px;
  }
}

@media (max-width: 760px) and (max-height: 720px) {
  .buy-screen {
    gap: 5px;
    padding-top: max(66px, calc(env(safe-area-inset-top, 0px) + 58px));
    padding-bottom: max(5px, env(safe-area-inset-bottom, 0px));
  }

  .buy-heading {
    font-size: clamp(28px, 8.2vw, 32px);
  }

  .buy-included {
    grid-template-rows: 19px repeat(3, minmax(0, 1fr));
  }

  .buy-section-heading {
    min-height: 19px;
  }

  .buy-product {
    grid-template-columns: 62px minmax(0, 1fr);
    gap: 9px;
    padding: 4px 0;
  }

  .buy-product-copy {
    gap: 3px;
  }

  .buy-product-label {
    font-size: 21px;
  }

  .buy-product-detail {
    font-size: 9px;
    line-height: 1.15;
  }

  .buy-product-mode {
    font-size: 6.5px;
  }

  .buy-price-value {
    font-size: 38px;
  }

  .buy-renewal {
    font-size: 6.8px;
  }
}

@media (max-width: 760px) and (max-height: 600px) {
  body[data-step="creatorOffer"],
  body[data-step="creatorOffer"] .wizard-shell,
  body[data-step="creatorOffer"] .wizard-root {
    height: auto;
    min-height: var(--app-height);
    overflow-y: auto;
  }

  .buy-screen {
    height: auto;
    min-height: var(--app-height);
    grid-template-rows: auto auto auto auto;
  }

  .buy-product {
    min-height: 76px;
  }
}

/* Mobile landing product tour. The original 390 x 844 hero remains the first
   complete fold; this surface begins only after the visitor chooses to scroll. */
.landing-product-tour {
  display: none;
  width: min(430px, 100%);
  margin: 0 auto;
  overflow: hidden;
  background: #000;
  color: #fff;
}

.landing-hero-fold {
  display: flex;
  position: relative;
  width: 100%;
  height: var(--app-height);
  min-height: var(--app-height);
  flex: 0 0 var(--app-height);
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.landing-scroll-cue,
.landing-scroll-position {
  display: none;
}

.landing-account-anchor {
  position: sticky;
  z-index: 92;
  top: max(18px, env(safe-area-inset-top, 0px));
  width: min(430px, 100%);
  height: 0;
  flex: 0 0 0;
  margin: 0 auto;
  pointer-events: none;
}

.landing-account-anchor > .landing-account-button {
  position: absolute;
  top: 0;
  right: max(18px, env(safe-area-inset-right, 0px));
  pointer-events: auto;
}

.landing-scroll-cue {
  position: absolute;
  z-index: 6;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 2px);
  left: 50%;
  width: 42px;
  height: 25px;
  border: 0;
  background: transparent;
  color: var(--brand-purple);
  padding: 0;
  transform: translateX(-50%);
  transition: opacity 180ms ease, transform 180ms ease;
  cursor: pointer;
}

.landing-scroll-cue.is-hidden {
  opacity: 0;
  transform: translate(-50%, 5px);
  pointer-events: none;
}

.landing-scroll-cue-glyph {
  display: block;
  position: relative;
  width: 18px;
  height: 18px;
  margin: 0 auto;
  animation: landing-scroll-cue-breathe 1.9s ease-in-out infinite;
}

.landing-scroll-cue-glyph i {
  position: absolute;
  left: 4px;
  width: 10px;
  height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}

.landing-scroll-cue-glyph i:first-child {
  top: -1px;
  opacity: 0.58;
}

.landing-scroll-cue-glyph i:last-child {
  top: 6px;
}

.landing-scroll-position {
  position: fixed;
  z-index: 26;
  top: 8px;
  right: 2px;
  width: 2px;
  min-height: 38px;
  border-radius: 999px;
  background: var(--brand-purple);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
  will-change: top;
}

.landing-scroll-position.is-visible {
  opacity: 0.9;
}

@keyframes landing-scroll-cue-breathe {
  0%, 100% {
    opacity: 0.7;
    transform: translateY(-1px);
  }
  50% {
    opacity: 1;
    transform: translateY(2px);
  }
}

.landing-tour-divider {
  display: flex;
  min-height: 90px;
  align-items: center;
  gap: 13px;
  margin: 0;
  padding: 0 22px;
  color: rgba(255, 255, 255, 0.54);
  font-family: var(--font-ui);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.19em;
  line-height: 1;
}

.landing-tour-divider::before,
.landing-tour-divider::after {
  height: 1px;
  flex: 1 1 auto;
  background: linear-gradient(90deg, transparent, rgba(169, 88, 255, 0.9));
  content: "";
}

.landing-tour-divider::after {
  background: linear-gradient(90deg, rgba(169, 88, 255, 0.9), transparent);
}

.landing-tour-divider span {
  flex: 0 0 auto;
}

.landing-tour-product,
.landing-tour-live {
  position: relative;
  border-top: 1px solid rgba(169, 88, 255, 0.42);
  background:
    radial-gradient(circle at 86% 50%, rgba(169, 88, 255, 0.085), transparent 34%),
    #000;
  isolation: isolate;
}

.landing-tour-product::before,
.landing-tour-live::before {
  position: absolute;
  z-index: -1;
  top: 44px;
  left: 18px;
  width: 22px;
  height: 1px;
  background: var(--brand-gold);
  content: "";
}

.landing-tour-product {
  display: grid;
  min-height: 620px;
  grid-template-columns: minmax(0, 0.88fr) minmax(154px, 1.12fr);
  align-items: center;
  gap: 14px;
  padding: 60px 18px;
}

.landing-tour-product-copy {
  display: grid;
  min-width: 0;
  align-content: center;
  justify-items: start;
  gap: 15px;
}

.landing-tour-index {
  color: var(--brand-gold);
  font-family: var(--font-ui);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.13em;
  line-height: 1;
}

.landing-tour-title {
  margin: 0;
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(31px, 9.2vw, 39px);
  font-weight: 400;
  letter-spacing: -0.045em;
  line-height: 0.88;
  text-wrap: balance;
}

.landing-tour-description {
  margin: 0;
  color: #c8c8c8;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.005em;
  line-height: 1.45;
}

.landing-tour-features {
  display: grid;
  width: 100%;
  gap: 9px;
  margin: 0;
  padding: 0;
  color: #9f9f9f;
  font-family: var(--font-ui);
  font-size: 9.5px;
  font-weight: 800;
  line-height: 1.28;
  list-style: none;
}

.landing-tour-features li {
  display: grid;
  grid-template-columns: 6px minmax(0, 1fr);
  align-items: start;
  gap: 7px;
}

.landing-tour-features li i {
  width: 5px;
  height: 5px;
  margin-top: 3px;
  background: var(--brand-purple);
  transform: rotate(45deg);
}

.landing-tour-link {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--brand-purple);
  color: #fff;
  font-family: var(--font-ui);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.09em;
  line-height: 1;
  text-decoration: none;
}

.landing-tour-link span {
  color: var(--brand-purple);
  font-size: 15px;
  line-height: 1;
  transition: transform 120ms ease;
}

.landing-tour-link.is-gold {
  border-bottom-color: var(--brand-gold);
}

.landing-tour-link.is-gold span {
  color: var(--brand-gold);
}

.landing-tour-link:active span {
  transform: translateX(2px);
}

.landing-tour-media {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--brand-purple);
  border-radius: 2px;
  background: #171717;
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.58);
}

.landing-tour-video {
  display: block;
  width: 100%;
  height: 100%;
  background: #171717;
  object-fit: cover;
}

.landing-tour-media-badge {
  display: flex;
  position: absolute;
  z-index: 2;
  top: 7px;
  left: 7px;
  min-height: 18px;
  align-items: center;
  gap: 5px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(0, 0, 0, 0.82);
  color: #fff;
  padding: 4px 6px;
  font-family: var(--font-ui);
  font-size: 6.5px;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1;
}

.landing-tour-media-badge i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--brand-gold);
}

.landing-tour-media-label {
  display: flex;
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 0;
  left: 0;
  min-height: 34px;
  align-items: end;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.92));
  color: #fff;
  padding: 14px 8px 7px;
  font-family: var(--font-ui);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1;
}

.landing-tour-live {
  display: grid;
  min-height: 720px;
  align-content: center;
  gap: 25px;
  padding: 62px 18px 56px;
  background:
    radial-gradient(circle at 50% 47%, rgba(169, 88, 255, 0.1), transparent 38%),
    #000;
}

.landing-tour-live-copy {
  display: grid;
  justify-items: center;
  gap: 13px;
  text-align: center;
}

.landing-tour-live-copy .landing-tour-description {
  max-width: 34ch;
}

.landing-tour-live-media {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.landing-tour-live .landing-tour-media {
  border-color: rgba(169, 88, 255, 0.88);
}

.landing-tour-live-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 20px;
}

.landing-tour-live-footer .landing-tour-link {
  white-space: nowrap;
}

.landing-tour-closing {
  display: grid;
  min-height: 540px;
  align-content: center;
  justify-items: center;
  gap: 18px;
  border-top: 1px solid rgba(169, 88, 255, 0.52);
  background:
    radial-gradient(circle at 22% 34%, rgba(169, 88, 255, 0.12), transparent 30%),
    radial-gradient(circle at 79% 64%, rgba(214, 168, 63, 0.09), transparent 28%),
    #000;
  padding: 70px 24px max(54px, calc(env(safe-area-inset-bottom, 0px) + 42px));
  text-align: center;
}

.landing-tour-closing-kicker {
  color: var(--brand-purple);
  font-family: var(--font-ui);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.17em;
}

.landing-tour-closing-title {
  max-width: 8.5ch;
  margin: 0;
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(42px, 12.5vw, 52px);
  font-weight: 400;
  letter-spacing: -0.052em;
  line-height: 0.88;
  text-wrap: balance;
}

.landing-tour-closing-copy {
  max-width: 34ch;
  margin: 0;
  color: #aaa;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.45;
}

.landing-tour-closing-actions {
  display: grid;
  width: min(272px, 100%);
  gap: 9px;
}

.landing-tour-closing-actions button {
  min-height: 56px;
  border-radius: 2px;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: 0.015em;
}

.landing-tour-closing-free {
  border: 1px solid #fff;
  background: #f5f5f2;
  color: #030303;
}

.landing-tour-closing-buy {
  border: 1px solid var(--brand-gold);
  background: var(--brand-gold);
  color: var(--brand-gold-ink);
}

.landing-tour-assurance {
  color: rgba(255, 255, 255, 0.42);
  font-family: var(--font-ui);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: 0.1em;
  line-height: 1.4;
}

/* The lower landing page is deliberately calmer than the opening fold. It is
   an editorial product explanation: real output floats inside the reading
   flow, while brand color is reserved for actions and tiny wayfinding marks. */
.landing-tour-intro {
  display: grid;
  gap: 13px;
  border-top: 0;
  padding: 64px 20px 48px;
}

.landing-tour-intro-kicker {
  color: var(--brand-purple);
  font-family: var(--font-ui);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.17em;
  line-height: 1;
}

.landing-tour-intro-title {
  max-width: 9ch;
  margin: 0;
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(39px, 11.8vw, 49px);
  font-weight: 400;
  letter-spacing: -0.052em;
  line-height: 0.9;
  text-wrap: balance;
}

.landing-tour-intro-copy {
  max-width: 35ch;
  margin: 0;
  color: rgba(255, 255, 255, 0.62);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.55;
}

.landing-tour-product,
.landing-tour-live {
  position: relative;
  min-height: 0;
  scroll-margin-top: 70px;
  border-top: 1px solid rgba(169, 88, 255, 0.3);
  background: #000;
  padding: 52px 20px 50px;
}

.landing-tour-product {
  display: flow-root;
}

.landing-tour-product::before,
.landing-tour-live::before {
  display: none;
  content: none;
}

.landing-tour-product-head {
  display: grid;
  gap: 11px;
  margin-bottom: 22px;
}

.landing-tour-index {
  color: rgba(218, 188, 244, 0.64);
  font-size: 7.5px;
  letter-spacing: 0.16em;
}

.landing-tour-title {
  color: #d8b9f3;
  font-size: clamp(35px, 10.4vw, 43px);
  line-height: 0.9;
}

.landing-tour-product .landing-tour-media {
  float: right;
  width: 44%;
  margin: 2px 0 14px 16px;
}

.landing-tour-media {
  border-color: rgba(255, 255, 255, 0.24);
  border-radius: 3px;
  background: #141414;
  box-shadow: none;
}

.landing-tour-media::after {
  position: absolute;
  z-index: 3;
  top: -1px;
  right: -1px;
  width: 28px;
  height: 2px;
  background: var(--brand-purple);
  content: "";
}

.landing-tour-media-badge {
  min-height: 16px;
  gap: 4px;
  border: 0;
  background: rgba(0, 0, 0, 0.76);
  padding: 4px 5px;
  font-size: 5.8px;
  letter-spacing: 0.09em;
}

.landing-tour-media-badge i {
  width: 4px;
  height: 4px;
  background: var(--brand-purple);
}

.landing-tour-media-label {
  min-height: 28px;
  padding: 13px 7px 6px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 6px;
}

.landing-tour-narrative {
  color: #fff;
}

.landing-tour-description,
.landing-tour-body {
  margin: 0 0 13px;
  font-family: var(--font-ui);
  letter-spacing: 0;
}

.landing-tour-description {
  color: rgba(255, 255, 255, 0.91);
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.48;
}

.landing-tour-body {
  color: rgba(255, 255, 255, 0.61);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.58;
}

.landing-tour-features {
  clear: both;
  display: grid;
  gap: 0;
  margin: 25px 0 0;
  border-top: 1px solid rgba(169, 88, 255, 0.2);
  color: inherit;
  font-size: inherit;
}

.landing-tour-features li {
  display: grid;
  grid-template-columns: 5px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  border-bottom: 1px solid rgba(169, 88, 255, 0.14);
  padding: 11px 0 12px;
}

.landing-tour-features li i {
  width: 4px;
  height: 4px;
  margin-top: 5px;
  background: var(--brand-purple);
}

.landing-tour-feature-copy {
  display: grid;
  grid-template-columns: minmax(92px, 0.75fr) minmax(0, 1.6fr);
  gap: 12px;
  min-width: 0;
}

.landing-tour-feature-copy strong,
.landing-tour-feature-copy small {
  font-family: var(--font-ui);
  font-style: normal;
}

.landing-tour-feature-copy strong {
  color: rgba(255, 255, 255, 0.9);
  font-size: 8.5px;
  font-weight: 900;
  letter-spacing: 0.07em;
  line-height: 1.35;
}

.landing-tour-feature-copy small {
  color: rgba(255, 255, 255, 0.52);
  font-size: 9.5px;
  font-weight: 700;
  line-height: 1.42;
}

.landing-tour-link {
  position: relative;
  min-height: 38px;
  margin-top: 17px;
  border-bottom: 0;
  color: rgba(255, 255, 255, 0.93);
  font-size: 8px;
  letter-spacing: 0.12em;
}

.landing-tour-link::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: rgba(169, 88, 255, 0.5);
  content: "";
}

.landing-tour-link span {
  color: var(--brand-purple);
  font-size: 14px;
}

.landing-tour-live {
  display: grid;
  align-content: start;
  gap: 22px;
}

.landing-tour-live-copy {
  display: grid;
  justify-items: start;
  gap: 11px;
  text-align: left;
}

.landing-tour-live-copy .landing-tour-description,
.landing-tour-live-copy .landing-tour-body {
  max-width: none;
  margin-bottom: 0;
}

.landing-tour-live-media {
  gap: 10px;
}

.landing-tour-live .landing-tour-media {
  border-color: rgba(255, 255, 255, 0.24);
}

.landing-tour-live-footer {
  display: block;
}

.landing-tour-live-footer .landing-tour-features {
  margin-top: 0;
}

.landing-tour-live-footer .landing-tour-link {
  width: max-content;
  white-space: nowrap;
}

.landing-tour-link.is-gold::after {
  background: rgba(214, 168, 63, 0.5);
}

.landing-tour-closing {
  min-height: 0;
  gap: 14px;
  border-top-color: rgba(169, 88, 255, 0.3);
  background: #0a0a0a;
  padding: 54px 20px max(48px, calc(env(safe-area-inset-bottom, 0px) + 36px));
}

.landing-tour-closing-kicker {
  color: rgba(255, 255, 255, 0.5);
  font-size: 8px;
}

.landing-tour-closing-title {
  max-width: 10ch;
  font-size: clamp(37px, 11vw, 46px);
  line-height: 0.91;
}

.landing-tour-closing-copy {
  max-width: 36ch;
  font-size: 10.5px;
  line-height: 1.55;
}

.landing-tour-closing-actions {
  width: min(292px, 100%);
  margin-top: 3px;
}

.landing-tour-closing-actions button {
  min-height: 52px;
  font-size: 20px;
}

@media (max-width: 350px) {
  .landing-tour-product,
  .landing-tour-live {
    padding-right: 16px;
    padding-left: 16px;
  }

  .landing-tour-product .landing-tour-media {
    width: 42%;
    margin-left: 12px;
  }

  .landing-tour-feature-copy {
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 9px;
  }
}

@media (max-width: 760px) {
  body[data-step="mode"][data-mode-surface="landing"] {
    height: var(--app-height);
    min-height: var(--app-height);
    overflow: hidden;
  }

  body[data-step="mode"][data-mode-surface="landing"] .wizard-shell {
    height: var(--app-height);
    min-height: var(--app-height);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scrollbar-width: none;
  }

  body[data-step="mode"][data-mode-surface="landing"] .wizard-shell::-webkit-scrollbar {
    display: none;
  }

  body[data-step="mode"][data-mode-surface="landing"] .wizard-root,
  body[data-step="mode"][data-mode-surface="landing"] .landing-screen {
    height: auto;
    min-height: var(--app-height);
    overflow: visible;
  }

  body[data-step="mode"][data-mode-surface="landing"] .landing-screen {
    display: flex;
    flex-direction: column;
  }

  body[data-step="mode"][data-mode-surface="landing"] .landing-stage {
    margin: 0 auto;
  }

  body[data-step="mode"][data-mode-surface="landing"] .landing-product-tour {
    display: block;
  }

  body[data-step="mode"][data-mode-surface="landing"] .landing-scroll-cue,
  body[data-step="mode"][data-mode-surface="landing"] .landing-scroll-position {
    display: block;
  }

  body[data-step="mode"][data-mode-surface="landing"] .landing-screen::before,
  body[data-step="mode"][data-mode-surface="landing"] .landing-screen::after {
    display: none;
  }
}

/* The desktop Browser's phone-preview wrapper scrolls internally while still
   preserving the exact 390 x 844 viewport used for visual QA. */
body[data-phone-preview="true"][data-step="mode"][data-mode-surface="landing"] .wizard-shell {
  height: 844px;
  min-height: 844px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scrollbar-width: none;
}

body[data-phone-preview="true"][data-step="mode"][data-mode-surface="landing"] .wizard-shell::-webkit-scrollbar {
  display: none;
}

body[data-phone-preview="true"][data-step="mode"][data-mode-surface="landing"] .wizard-root,
body[data-phone-preview="true"][data-step="mode"][data-mode-surface="landing"] .landing-screen {
  height: auto;
  min-height: 844px;
  overflow: visible;
}

body[data-phone-preview="true"][data-step="mode"][data-mode-surface="landing"] .landing-screen {
  display: flex;
  flex-direction: column;
}

body[data-phone-preview="true"][data-step="mode"][data-mode-surface="landing"] .landing-stage {
  margin: 0 auto;
}

body[data-phone-preview="true"][data-step="mode"][data-mode-surface="landing"] .landing-product-tour {
  display: block;
}

body[data-phone-preview="true"][data-step="mode"][data-mode-surface="landing"] .landing-hero-fold::after {
  bottom: calc(env(safe-area-inset-bottom, 0px) + 30px);
}

body[data-phone-preview="true"][data-step="mode"][data-mode-surface="landing"] .landing-scroll-cue,
body[data-phone-preview="true"][data-step="mode"][data-mode-surface="landing"] .landing-scroll-position {
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .landing-scroll-cue-glyph {
    animation: none;
  }
}

@media (max-width: 360px) {
  .landing-tour-product {
    grid-template-columns: minmax(0, 0.82fr) minmax(148px, 1.18fr);
    gap: 11px;
    padding-right: 15px;
    padding-left: 15px;
  }

  .landing-tour-title {
    font-size: 29px;
  }

  .landing-tour-description {
    font-size: 11px;
  }

  .landing-tour-features {
    font-size: 8.8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .landing-tour-link span {
    transition: none;
  }
}

@supports (height: 100dvh) {
  :root {
    --app-height: 100dvh;
  }
}

* {
  box-sizing: border-box;
  forced-color-adjust: none;
}

html {
  min-height: 100%;
  background: #000 !important;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: var(--app-height);
  background: #000 !important;
  color: #fff !important;
  font-family: var(--font-display);
  overflow-x: hidden;
}

button,
input,
select,
textarea {
  font: inherit;
  appearance: none;
  border-radius: 0;
}

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

button {
  line-height: 1.05;
  touch-action: manipulation;
}

[hidden] {
  display: none !important;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 2px solid #9a48ff;
  outline-offset: 3px;
}

.wizard-shell {
  width: min(1480px, calc(100vw - 72px));
  min-height: 100vh;
  min-height: var(--app-height);
  margin: 0 auto;
  padding: clamp(18px, 3vh, 34px) 0 48px;
}

.wizard-topbar {
  display: grid;
  grid-template-columns: minmax(104px, 140px) minmax(120px, 1fr) minmax(140px, 190px) minmax(160px, 230px);
  align-items: center;
  gap: 14px;
  min-height: 44px;
  margin-bottom: clamp(16px, 2.6vh, 28px);
  font-family: var(--font-ui);
  letter-spacing: 0;
}

.back-button,
.account-button,
.status-mark,
.progress-mark {
  min-width: 0;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.back-button {
  grid-column: 1;
  width: 104px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  padding: 10px 12px;
  cursor: pointer;
}

.account-button {
  display: inline-flex;
  grid-column: 4;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  justify-self: end;
  width: auto;
  min-width: 138px;
  max-width: 230px;
  border: 1px solid rgba(255, 255, 255, 0.44);
  border-radius: 4px;
  background: #070707;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.025) inset;
  color: var(--text);
  padding: 7px 12px 7px 8px;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.account-button:hover,
.account-button:focus-visible,
.mode-account-button:hover,
.mode-account-button:focus-visible {
  border-color: #9a48ff;
  outline: 0;
  box-shadow: 0 0 18px rgba(133, 44, 255, 0.22);
}

.account-action-mark {
  display: grid;
  width: 27px;
  height: 27px;
  flex: 0 0 27px;
  place-items: center;
  border: 1px solid rgba(154, 72, 255, 0.72);
  border-radius: 50%;
  background: #000;
  overflow: hidden;
}

.account-action-mark img {
  display: block;
  width: 100%;
  height: 100%;
}

.account-action-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.progress-mark {
  grid-column: 2;
  justify-self: center;
  color: var(--muted);
}

.status-mark {
  grid-column: 3;
  justify-self: end;
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
}

.status-mark[data-tone="done"] {
  color: var(--text);
}

.status-mark[data-tone="working"] {
  color: #d7d7d7;
}

.status-mark[data-tone="error"] {
  color: var(--danger);
}

.wizard-root {
  display: flex;
  min-height: calc(100vh - 116px);
  min-height: calc(var(--app-height) - 116px);
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.seo-summary {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.app-menu-trigger {
  display: none;
  position: fixed;
  z-index: 92;
  top: max(18px, env(safe-area-inset-top, 0px));
  left: max(18px, env(safe-area-inset-left, 0px));
  width: 44px;
  height: 44px;
  min-height: 44px;
  place-items: center;
  border: 0;
  border-radius: 3px;
  background: transparent;
  padding: 11px;
  cursor: pointer;
}

body[data-step="mode"] .app-menu-trigger {
  display: grid;
}

.app-menu-trigger > span {
  display: block;
  width: 22px;
  height: 2px;
  background: #9a48ff;
  transition: transform 170ms ease, opacity 120ms ease;
}

.app-menu-trigger[data-nav-mode="menu"] > span:nth-child(2) {
  background: var(--brand-gold);
}

.app-menu-trigger:hover,
.app-menu-trigger:focus-visible,
body.app-menu-open .app-menu-trigger {
  background: rgba(154, 72, 255, 0.08);
  outline: 1px solid rgba(154, 72, 255, 0.62);
  outline-offset: -1px;
}

.app-menu-shell {
  position: fixed;
  z-index: 160;
  inset: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.app-menu-shell[hidden] {
  display: none;
}

.app-menu-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: rgba(0, 0, 0, 0);
  cursor: default;
  transition: background 190ms ease;
}

.app-menu-drawer {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  display: flex;
  width: min(340px, 88vw);
  flex-direction: column;
  border: 0;
  border-right: 1px solid rgba(154, 72, 255, 0.66);
  background: #040404;
  color: #fff;
  outline: 0;
  font-family: var(--font-ui);
  padding: max(22px, env(safe-area-inset-top, 0px)) 18px max(18px, env(safe-area-inset-bottom, 0px));
  transform: translateX(-102%);
  transition: transform 210ms cubic-bezier(0.22, 0.75, 0.2, 1);
}

.app-menu-shell[data-open="true"] .app-menu-backdrop {
  background: rgba(0, 0, 0, 0.76);
}

.app-menu-shell[data-open="true"] .app-menu-drawer {
  transform: translateX(0);
}

.app-menu-header {
  display: flex;
  min-height: 54px;
  align-items: flex-start;
  justify-content: space-between;
  border-bottom: 1px solid rgba(154, 72, 255, 0.48);
  padding: 0 0 17px;
}

.app-menu-home {
  display: grid;
  gap: 4px;
  color: #fff;
  text-decoration: none;
}

.app-menu-kicker {
  color: #9a48ff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.app-menu-home strong {
  font-family: var(--font-display);
  font-size: 25px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.035em;
}

.app-menu-close {
  position: relative;
  width: 42px;
  height: 42px;
  min-height: 42px;
  border: 0;
  border-radius: 3px;
  background: transparent;
  cursor: pointer;
}

.app-menu-close::before,
.app-menu-close::after {
  position: absolute;
  top: 20px;
  left: 10px;
  width: 22px;
  height: 2px;
  background: #9a48ff;
  content: "";
}

.app-menu-close::before {
  transform: rotate(45deg);
}

.app-menu-close::after {
  transform: rotate(-45deg);
}

.app-menu-close:hover,
.app-menu-close:focus-visible {
  background: rgba(154, 72, 255, 0.08);
  outline: 1px solid rgba(154, 72, 255, 0.62);
  outline-offset: -1px;
}

.app-menu-nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 12px 2px 18px;
  scrollbar-color: #9a48ff #0a0a0a;
  scrollbar-width: thin;
}

.app-menu-group {
  border-bottom: 1px solid rgba(154, 72, 255, 0.15);
}

.app-menu-group > summary {
  display: flex;
  min-height: 46px;
  align-items: center;
  justify-content: space-between;
  color: #bdbdbd;
  cursor: pointer;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  list-style: none;
}

.app-menu-group > summary::-webkit-details-marker {
  display: none;
}

.app-menu-group > summary i {
  position: relative;
  width: 12px;
  height: 12px;
}

.app-menu-group > summary i::before,
.app-menu-group > summary i::after {
  position: absolute;
  top: 5px;
  left: 1px;
  width: 10px;
  height: 1px;
  background: #9a48ff;
  content: "";
}

.app-menu-group > summary i::after {
  transform: rotate(90deg);
  transition: transform 140ms ease;
}

.app-menu-group[open] > summary i::after {
  transform: rotate(0);
}

.app-menu-group > summary:hover,
.app-menu-group > summary:focus-visible {
  color: #fff;
  outline: 0;
}

.app-menu-group-links {
  display: grid;
  border-top: 1px solid rgba(154, 72, 255, 0.12);
  padding: 5px 0 10px 10px;
}

.app-menu-group-links a,
.app-menu-direct {
  display: grid;
  width: 100%;
  min-height: 48px;
  align-content: center;
  gap: 4px;
  border: 0;
  border-left: 2px solid transparent;
  background: transparent;
  color: #e5e5e5;
  padding: 8px 10px;
  cursor: pointer;
  font: inherit;
  text-align: left;
  text-decoration: none;
}

.app-menu-group-links a span,
.app-menu-direct > span {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.01em;
}

.app-menu-group-links a small,
.app-menu-direct > small {
  color: #7e7e7e;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.app-menu-group-links a:hover,
.app-menu-group-links a:focus-visible,
.app-menu-group-links a[aria-current="page"],
.app-menu-direct:hover,
.app-menu-direct:focus-visible,
.app-menu-direct[aria-current="page"] {
  border-left-color: #9a48ff;
  background: rgba(154, 72, 255, 0.045);
  color: #fff;
  outline: 0;
}

.app-menu-direct {
  min-height: 54px;
  border-bottom: 1px solid rgba(154, 72, 255, 0.15);
  padding-left: 0;
}

.app-menu-direct:hover,
.app-menu-direct:focus-visible,
.app-menu-direct[aria-current="page"] {
  padding-left: 10px;
}

.app-menu-separator {
  height: 12px;
  border-bottom: 1px solid rgba(154, 72, 255, 0.26);
  margin-bottom: 3px;
}

.app-menu-footer {
  flex: none;
  border-top: 1px solid rgba(154, 72, 255, 0.28);
  padding-top: 13px;
}

.app-menu-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 9px 14px;
  margin-bottom: 13px;
}

.app-menu-footer a {
  color: #888;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-decoration: none;
}

.app-menu-footer a:hover,
.app-menu-footer a:focus-visible {
  color: #fff;
  outline: 0;
}

.app-menu-account {
  width: 100%;
  min-height: 46px;
  border: 1px solid #9a48ff;
  border-radius: 2px;
  background: transparent;
  color: #fff;
  cursor: pointer;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.035em;
}

.app-menu-account:hover,
.app-menu-account:focus-visible {
  background: rgba(154, 72, 255, 0.14);
  outline: 0;
}

body.app-menu-open {
  overflow: hidden !important;
}

body[data-step="mode"] .wizard-shell {
  width: min(1320px, calc(100vw - 36px));
}

body[data-step="mode"] .wizard-topbar {
  grid-template-columns: 1fr auto;
  margin-bottom: 0;
}

body[data-step="mode"] .account-button {
  grid-column: 2;
}

@media (min-width: 761px) {
  body[data-step="mode"] .wizard-shell {
    display: grid;
    height: 100svh;
    min-height: 0;
    grid-template-rows: auto minmax(0, 1fr);
  }

  body[data-step="mode"] .wizard-root,
  body[data-step="mode"] .mode-screen {
    min-height: 0;
  }

  body[data-step="final"] .wizard-root,
  body[data-step="theme"] .wizard-root,
  body[data-step="format"] .wizard-root,
  body[data-step="script"] .wizard-root,
  body[data-step="background"] .wizard-root,
  body[data-step="storiesTheme"] .wizard-root,
  body[data-step="confirm"] .wizard-root,
  body[data-step="storiesQuestion"] .wizard-root,
  body[data-step="storiesConfirm"] .wizard-root {
    min-height: 0;
  }

  body[data-step="theme"] .wizard-shell,
  body[data-step="format"] .wizard-shell,
  body[data-step="script"] .wizard-shell,
  body[data-step="background"] .wizard-shell,
  body[data-step="storiesTheme"] .wizard-shell,
  body[data-step="storiesQuestion"] .wizard-shell,
  body[data-step="confirm"] .wizard-shell,
  body[data-step="storiesConfirm"] .wizard-shell,
  body[data-step="final"] .wizard-shell {
    padding-bottom: 24px;
  }

  body[data-step="script"] .script-option {
    min-height: 300px;
    padding: 22px 26px;
  }

  body[data-step="script"] .script-hook {
    font-size: 34px;
  }

  body[data-step="script"] .script-snippet {
    font-size: 15px;
  }

  body[data-step="script"] .script-actions,
  body[data-step="script"] .bottom-actions {
    margin-top: 18px;
  }
}

body[data-step="auth"] .wizard-topbar {
  grid-template-columns: minmax(104px, 140px) minmax(120px, 1fr) minmax(140px, 190px);
}

body[data-step="auth"] .progress-mark {
  grid-column: 2;
  justify-self: center;
}

body[data-step="auth"] .status-mark {
  grid-column: 3;
  justify-self: end;
  max-width: 190px;
}

body[data-step="auth"] .account-button {
  display: none;
}

.page-title {
  margin: 0 0 clamp(18px, 3vh, 30px);
  color: var(--text);
  font-size: 58px;
  font-weight: 500;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
}

.mode-screen {
  display: flex;
  width: 100%;
  min-height: calc(100vh - 116px);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-bottom: 8px;
}

.mode-title {
  margin: 0 0 22px;
  color: var(--text);
  font-size: 62px;
  font-weight: 500;
  line-height: 0.98;
  text-align: center;
  text-transform: uppercase;
}

.mode-brand {
  display: none;
}

.mode-account-button {
  display: none;
}

.mode-grid {
  display: grid;
  width: min(1120px, 90vw);
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: center;
  gap: clamp(24px, 5vw, 78px);
}

@media (min-width: 761px) {
  .generator-hub .generator-mode-grid {
    width: min(1080px, 92vw);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(24px, 4vw, 58px);
  }

  .generator-hub .mode-card,
  .generator-hub .mode-card.primary {
    transform: translateY(-2px);
  }

  .generator-hub .mode-card:hover,
  .generator-hub .mode-card:focus-visible,
  .generator-hub .mode-card.primary:hover,
  .generator-hub .mode-card.primary:focus-visible {
    transform: translateY(-8px) scale(1.012);
  }

  .generator-hub .mode-preview,
  .generator-hub .mode-card.primary .mode-preview {
    width: 100%;
    height: auto;
    max-height: min(500px, 48vh);
    aspect-ratio: 9 / 14.1;
    border-width: 1px;
  }

  .generator-hub .mode-label,
  .generator-hub .mode-card.primary .mode-label {
    font-size: clamp(27px, 2.65vw, 40px);
  }

  .game-mode-selector .mode-grid {
    width: min(780px, 86vw);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(48px, 8vw, 110px);
  }

  .game-mode-selector .mode-card,
  .game-mode-selector .mode-card.primary {
    transform: translateY(-2px);
  }

  .game-mode-selector .mode-card:hover,
  .game-mode-selector .mode-card:focus-visible,
  .game-mode-selector .mode-card.primary:hover,
  .game-mode-selector .mode-card.primary:focus-visible {
    transform: translateY(-8px) scale(1.018);
  }

  .game-mode-selector .mode-preview,
  .game-mode-selector .mode-card.primary .mode-preview {
    width: 100%;
    height: auto;
    max-height: min(520px, 50vh);
    aspect-ratio: 9 / 14.1;
    border-width: 1px;
  }
}

.mode-card {
  display: grid;
  gap: 20px;
  justify-items: center;
  border: 0;
  background: transparent;
  color: var(--text);
  padding: 0;
  cursor: pointer;
  text-align: center;
  transform: translateY(-16px);
  transition: transform 160ms ease, opacity 160ms ease;
}

.mode-card.primary {
  transform: translateY(4px);
}

.mode-card:hover,
.mode-card:focus-visible {
  outline: 0;
  opacity: 1;
  transform: translateY(-22px) scale(1.018);
}

.mode-card.primary:hover,
.mode-card.primary:focus-visible {
  transform: translateY(-2px) scale(1.018);
}

.mode-preview {
  display: flex;
  position: relative;
  width: auto;
  height: min(445px, 44vh);
  aspect-ratio: 9 / 14.1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid #bdbdbd;
  background: #040404;
  overflow: hidden;
}

.mode-card.primary .mode-preview {
  height: min(538px, 50vh);
  aspect-ratio: 9 / 13.2;
  border: 2px solid var(--line);
}

.mode-card:hover .mode-preview,
.mode-card:focus-visible .mode-preview {
  border-color: var(--line);
}

.mode-preview-line {
  display: block;
  height: 2px;
  margin: 0 auto 26px;
  background: #363636;
}

.mode-preview-box {
  display: block;
  width: 54%;
  height: 60px;
  margin-top: 6px;
  border: 1px solid #2f2f2f;
}

.stories-mode-mock {
  display: grid;
  width: 100%;
  height: 100%;
  align-content: center;
  gap: 12px;
  padding: 32px 24px;
  background: #000;
}

.stories-mode-question,
.stories-mode-comment {
  border: 0;
  background: #121214;
  color: #eeeeef;
  font-family: Arial, Helvetica, sans-serif;
  text-align: left;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.02);
}

.stories-mode-question {
  padding: 15px 14px 18px;
}

.stories-mode-meta {
  margin-bottom: 10px;
  color: #a7a9ad;
  font-size: 10px;
  font-weight: 900;
}

.stories-mode-title {
  font-size: 17px;
  font-weight: 900;
  line-height: 1.08;
}

.stories-mode-comment {
  padding: 11px 13px;
  color: #d9d9dc;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
}

.mode-preview-video {
  display: flex;
  position: relative;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  border: 0;
  background: #080808;
  box-shadow: none;
  margin: 0;
  overflow: hidden;
}

.mode-preview-clip {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.mode-lock-overlay {
  display: flex;
  position: absolute;
  z-index: 4;
  inset: 0;
  align-items: center;
  justify-content: center;
  opacity: 0.96;
  pointer-events: none;
}

.mode-lock-icon {
  display: block;
  width: min(34%, 98px);
  min-width: 62px;
  height: auto;
  color: #9130ff;
  fill: currentColor;
  transform: scaleX(1.08) scaleY(1.14);
  transform-origin: center;
  filter:
    drop-shadow(0 0 8px rgba(154, 72, 255, 0.95))
    drop-shadow(0 0 22px rgba(133, 44, 255, 0.66))
    drop-shadow(0 0 44px rgba(133, 44, 255, 0.34));
}

.interactive-live-mode-demo {
  display: grid;
  position: relative;
  grid-template-rows: repeat(3, 1fr);
  background: #020202;
}

.interactive-live-demo-game {
  position: relative;
  overflow: hidden;
  background: #000;
}

.interactive-live-demo-pong {
  border-bottom: 1px solid rgba(154, 72, 255, 0.42);
}

.interactive-live-demo-paddle,
.interactive-live-demo-ball,
.interactive-live-demo-ring {
  position: absolute;
  display: block;
}

.interactive-live-demo-paddle {
  top: 34%;
  width: 4px;
  height: 31%;
  border-radius: 3px;
  background: #9a48ff;
  box-shadow: 0 0 12px rgba(154, 72, 255, 0.72);
}

.interactive-live-demo-paddle.left { left: 12%; }
.interactive-live-demo-paddle.right { right: 12%; }

.interactive-live-demo-ball {
  top: 47%;
  left: 49%;
  width: 10px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.8);
}

.interactive-live-demo-escape {
  display: grid;
  place-items: center;
}

.interactive-live-demo-ring {
  width: 64%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(from 35deg, #9a48ff 0 320deg, transparent 320deg 360deg);
  -webkit-mask: radial-gradient(circle, transparent 0 46%, #000 47% 51%, transparent 52%);
  mask: radial-gradient(circle, transparent 0 46%, #000 47% 51%, transparent 52%);
  filter: drop-shadow(0 0 7px rgba(154, 72, 255, 0.55));
}

.interactive-live-demo-ball.escape-ball {
  top: 48%;
  left: 48%;
}

.interactive-live-demo-badge {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  border: 1px solid #9a48ff;
  border-radius: 999px;
  background: #050107;
  box-shadow: 0 0 18px rgba(154, 72, 255, 0.56);
  color: #fff;
  padding: 6px 12px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.18em;
  transform: translate(-50%, -50%);
}

.mode-preview-livebox {
  display: block;
  height: 34px;
  margin: 0 auto 8px;
  border: 1px solid #303030;
}

.mode-preview-line.live-line {
  margin-top: 46px;
  margin-bottom: 0;
}

.mode-copy {
  display: grid;
  gap: 2px;
  justify-items: center;
}

.mode-label {
  font-size: 42px;
  line-height: 0.92;
  text-transform: uppercase;
}

.mode-card.primary .mode-label {
  font-size: 48px;
}

.mode-subtitle,
.mode-soon,
.mode-instruction {
  font-family: Arial, Helvetica, sans-serif;
  letter-spacing: 0;
  text-transform: uppercase;
}

.mode-subtitle {
  color: #d4d4d4;
  font-size: 15px;
  font-weight: 700;
}

.mode-soon {
  margin-top: 8px;
  border: 1px solid #444;
  color: #9d9d9d;
  padding: 7px 10px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.mode-instruction {
  margin-top: 16px;
  color: #b8b8b8;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  font-weight: 700;
}

.mode-mobile-controls {
  display: none;
}

.mode-ready-label {
  display: none;
}

.mode-preview-shell {
  display: none;
}

.mode-placeholder {
  width: min(360px, 76vw);
}

.stories-desktop-theme-grid {
  display: grid;
  width: min(980px, 92vw);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 28px);
}

.stories-desktop-theme-card {
  display: grid;
  gap: 15px;
  border: 0;
  background: transparent;
  color: var(--text);
  padding: 0;
  cursor: pointer;
  text-align: center;
}

.stories-desktop-theme-card:hover,
.stories-desktop-theme-card:focus-visible {
  outline: 0;
}

.stories-desktop-theme-preview {
  position: relative;
  aspect-ratio: 9 / 16;
  border: 1px solid rgba(255, 255, 255, 0.54);
  background: #030303;
  overflow: hidden;
  box-shadow: none;
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

.stories-desktop-theme-card:hover .stories-desktop-theme-preview,
.stories-desktop-theme-card:focus-visible .stories-desktop-theme-preview,
.stories-desktop-theme-card.selected .stories-desktop-theme-preview {
  border-color: #9a48ff;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.08) inset,
    0 0 18px rgba(133, 44, 255, 0.52),
    0 0 54px rgba(133, 44, 255, 0.18);
  transform: translateY(-4px);
}

.stories-desktop-theme-video,
.stories-desktop-theme-scrim {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.stories-desktop-theme-video {
  object-fit: cover;
  filter: saturate(0.86) contrast(1.08) brightness(0.72);
}

.stories-desktop-theme-scrim {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.24), rgba(0, 0, 0, 0.12) 34%, rgba(0, 0, 0, 0.76)),
    radial-gradient(circle at 50% 72%, rgba(154, 72, 255, 0.22), transparent 42%);
}

.stories-desktop-theme-question-stack {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: end center;
  padding: clamp(16px, 1.8vw, 24px);
  pointer-events: none;
}

.stories-desktop-theme-question-card {
  display: grid;
  position: absolute;
  right: clamp(16px, 1.8vw, 24px);
  bottom: clamp(18px, 2vw, 28px);
  left: clamp(16px, 1.8vw, 24px);
  gap: 9px;
  border: 1px solid rgba(154, 72, 255, 0.72);
  background:
    linear-gradient(180deg, rgba(19, 8, 30, 0.92), rgba(2, 2, 3, 0.9)),
    rgba(0, 0, 0, 0.72);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.1) inset,
    0 0 24px rgba(133, 44, 255, 0.26);
  padding: clamp(15px, 1.7vw, 22px);
  opacity: 0;
  transform: translateY(12px) scale(0.98);
  animation: storiesDesktopQuestionCycle 9s infinite;
  animation-delay: var(--stories-desktop-card-delay, 0s);
  text-align: left;
}

.stories-desktop-theme-question-kicker,
.stories-desktop-theme-desc {
  font-family: Arial, Helvetica, sans-serif;
  text-transform: uppercase;
}

.stories-desktop-theme-question-kicker {
  color: #9a48ff;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.11em;
  line-height: 1.1;
}

.stories-desktop-theme-question-text {
  display: -webkit-box;
  overflow: hidden;
  color: #fff;
  font-size: clamp(22px, 2.15vw, 34px);
  line-height: 0.98;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
}

.stories-desktop-theme-copy {
  display: grid;
  gap: 6px;
  justify-items: center;
}

.stories-desktop-theme-label {
  color: var(--text);
  font-size: clamp(34px, 3.2vw, 48px);
  line-height: 0.92;
  text-transform: uppercase;
}

.stories-desktop-theme-desc {
  max-width: 32ch;
  color: #d2d2d2;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1.35;
}

@keyframes storiesDesktopQuestionCycle {
  0%,
  30% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  37%,
  100% {
    opacity: 0;
    transform: translateY(-8px) scale(0.985);
  }
}

.story-carousel-option-grid {
  display: grid;
  width: min(1120px, 92vw);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 26px;
}

.story-carousel-option {
  display: grid;
  min-height: 360px;
  align-content: start;
  gap: 16px;
  border: 1px solid rgba(154, 72, 255, 0.54);
  background:
    radial-gradient(circle at 50% 0%, rgba(154, 72, 255, 0.16), transparent 38%),
    #050505;
  color: var(--text);
  padding: 26px;
  cursor: pointer;
  text-align: left;
}

.story-carousel-option:hover,
.story-carousel-option:focus-visible,
.story-carousel-option.selected {
  outline: 0;
  background: var(--text);
  color: var(--bg);
}

.story-carousel-option-label,
.story-carousel-option-meta {
  font-family: Arial, Helvetica, sans-serif;
  letter-spacing: 0;
  text-transform: uppercase;
}

.story-carousel-option-label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.story-carousel-option:hover .story-carousel-option-label,
.story-carousel-option:focus-visible .story-carousel-option-label,
.story-carousel-option.selected .story-carousel-option-label {
  color: #303030;
}

.story-carousel-option-question {
  font-size: clamp(30px, 2.7vw, 44px);
  line-height: 0.98;
}

.story-carousel-option-rule {
  width: 100%;
  height: 1px;
  margin-top: auto;
  background: rgba(154, 72, 255, 0.72);
}

.story-carousel-option-meta {
  color: #c8c8c8;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.1em;
}

.story-carousel-option:hover .story-carousel-option-meta,
.story-carousel-option:focus-visible .story-carousel-option-meta,
.story-carousel-option.selected .story-carousel-option-meta {
  color: #383838;
}

.story-carousel-output {
  display: grid;
  justify-items: center;
  gap: 18px;
  width: min(480px, 88vw);
}

.story-carousel-output img {
  display: block;
  width: min(420px, 82vw);
  aspect-ratio: 9 / 16;
  border: 1px solid var(--line);
  object-fit: cover;
  background: #000;
}

.live-sales-layout {
  display: grid;
  width: min(1180px, 92vw);
  grid-template-columns: minmax(280px, 0.74fr) minmax(420px, 1fr);
  gap: clamp(36px, 6vw, 84px);
  align-items: center;
  margin-top: clamp(8px, 1vh, 14px);
}

.live-sales-preview {
  display: flex;
  position: relative;
  height: min(660px, 64vh);
  aspect-ratio: 9 / 16;
  flex-direction: column;
  justify-content: flex-end;
  border: 1px solid var(--line);
  background: #050505;
  overflow: hidden;
  padding: 0;
}

.stories-sales-layout {
  display: grid;
  width: min(1180px, 92vw);
  grid-template-columns: minmax(420px, 1fr) minmax(280px, 0.74fr);
  gap: clamp(36px, 6vw, 84px);
  align-items: center;
  margin-top: clamp(8px, 1vh, 14px);
}

.stories-sales-preview {
  position: relative;
  height: min(660px, 64vh);
  aspect-ratio: 9 / 16;
  border: 1px solid var(--line);
  background: #050505;
  overflow: hidden;
  color: var(--text);
}

.stories-sales-noise {
  position: absolute;
  inset: 0;
  z-index: 4;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 4px),
    radial-gradient(circle at 50% 50%, transparent 0 58%, rgba(0, 0, 0, 0.3) 100%);
  opacity: 0.42;
  pointer-events: none;
}

.stories-sales-split {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: 1fr 1fr;
}

.stories-sales-panel {
  position: relative;
  display: block;
  overflow: hidden;
  padding: 18px 12px;
}

.stories-sales-replies-panel {
  border-top: 1px solid rgba(255, 255, 255, 0.34);
  padding-top: 18px;
  padding-bottom: 18px;
}

.stories-sales-bg-video,
.stories-sales-panel-scrim {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.stories-sales-bg-video {
  object-fit: cover;
  opacity: 0.82;
  filter: brightness(0.76) contrast(1.08) saturate(0.92);
}

.stories-sales-panel-scrim {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.24), rgba(0, 0, 0, 0.45)),
    radial-gradient(circle at 50% 50%, transparent 0 46%, rgba(0, 0, 0, 0.3) 100%);
}

.stories-sales-cycle {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  min-height: 0;
  display: grid;
  box-sizing: border-box;
  padding: clamp(6px, 2.8%, 14px) 0;
  align-items: center;
}

.stories-sales-cycle-card {
  position: relative;
  grid-area: 1 / 1;
  align-self: center;
  width: 100%;
  max-height: 100%;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateX(28px) scale(0.985);
  transition:
    opacity 240ms ease,
    transform 300ms cubic-bezier(0.22, 0.72, 0.26, 1);
  will-change: opacity, transform;
}

.stories-sales-cycle-card.is-active {
  opacity: 1;
  transform: translateX(0) scale(1);
}

.stories-sales-stack {
  position: absolute;
  inset: 72px 18px 54px;
  display: grid;
  align-content: center;
  gap: 13px;
}

.stories-sales-card {
  position: relative;
  z-index: 2;
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: #121212;
  box-shadow:
    0 18px 34px rgba(0, 0, 0, 0.44),
    inset 0 0 0 1px rgba(255, 255, 255, 0.02);
  font-family: Arial, Helvetica, sans-serif;
  filter: blur(0.12px);
}

.stories-sales-question-card {
  padding: 10px 11px 9px;
}

.stories-sales-response-card {
  padding: 10px 11px 11px;
}

.stories-sales-reddit-header,
.stories-sales-response-header {
  display: grid;
  align-items: center;
  min-width: 0;
}

.stories-sales-reddit-header {
  grid-template-columns: 34px 1fr;
  gap: 9px;
  margin-bottom: 8px;
}

.stories-sales-response-header {
  grid-template-columns: 26px 1fr auto;
  gap: 8px;
  margin-bottom: 8px;
}

.stories-sales-avatar {
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 42%, #f7f7f7 0 16%, transparent 17%),
    radial-gradient(circle at 36% 46%, #ff734f 0 8%, transparent 9%),
    radial-gradient(circle at 62% 46%, #ff734f 0 8%, transparent 9%),
    radial-gradient(circle at 50% 52%, #ffffff 0 34%, #c6eaff 35% 74%, #74c8f6 75% 100%);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.42);
}

.stories-sales-avatar-ask {
  width: 34px;
  height: 34px;
}

.stories-sales-avatar-1,
.stories-sales-avatar-2,
.stories-sales-avatar-3 {
  width: 26px;
  height: 26px;
}

.stories-sales-avatar-1 {
  background:
    radial-gradient(circle at 50% 46%, #2b4420 0 34%, transparent 35%),
    #8cff59;
}

.stories-sales-avatar-2 {
  background:
    radial-gradient(circle at 50% 46%, #5830a8 0 34%, transparent 35%),
    #8db2ff;
}

.stories-sales-avatar-3 {
  background:
    radial-gradient(circle at 50% 46%, #374457 0 34%, transparent 35%),
    #b7c9ff;
}

.stories-sales-meta {
  min-width: 0;
}

.stories-sales-subreddit {
  color: #e8e8e8;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.1;
}

.stories-sales-user,
.stories-sales-commenter,
.stories-sales-age {
  color: #8d8d8d;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
}

.stories-sales-user {
  color: #2e9fec;
  margin-top: 2px;
}

.stories-sales-question {
  color: #f3f3f3;
  font-size: clamp(17px, 1.2vw, 20px);
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.12;
}

.stories-sales-stats {
  display: flex;
  gap: 14px;
  margin-top: 8px;
  color: #d9d9d9;
  font-size: 11px;
  font-weight: 900;
}

.stories-sales-stats span::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 6px;
  border: 2px solid currentColor;
  border-radius: 50%;
  vertical-align: -2px;
}

.stories-sales-commenter {
  color: #bdbdbd;
  font-size: 11px;
}

.stories-sales-age {
  justify-self: end;
}

.stories-sales-response-text {
  color: #efefef;
  font-size: clamp(14px, 1.05vw, 17px);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.24;
}

.live-mock-heading.stories-sales-heading {
  max-width: min(640px, 100%);
  font-size: clamp(46px, 4.6vw, 70px);
  line-height: 0.92;
  white-space: pre-line;
}

.stories-benefit {
  background: var(--box);
}

.stories-sales-actions {
  margin-top: 2px;
}

.sales-inline-actions {
  justify-content: flex-start;
  width: 100%;
  margin-top: 2px;
}

.stories-benefit .live-benefit-icon {
  color: #7f39ff;
  filter: none;
}

button.stories-sales-buy {
  border-color: #c49cff !important;
  background: #7f39ff !important;
  color: #fff !important;
}

.live-sales-preview-art,
.live-sales-preview-scrim {
  position: absolute;
  inset: 0;
}

.live-sales-preview-art {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  opacity: 0.92;
}

.live-sales-preview-scrim {
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.34), rgba(0, 0, 0, 0.08) 20%, rgba(0, 0, 0, 0.12) 52%, rgba(0, 0, 0, 0.76) 100%),
    radial-gradient(circle at 50% 42%, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.48) 78%);
}

.live-interaction-layer {
  position: absolute;
  inset: 0;
  z-index: 4;
  overflow: hidden;
  pointer-events: none;
}

.live-top-strip {
  position: absolute;
  z-index: 3;
  top: 18px;
  left: 16px;
  right: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.live-app-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(255, 255, 255, 0.74);
  background: rgba(218, 26, 69, 0.92);
  padding: 6px 9px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.1em;
  box-shadow: 0 7px 18px rgba(0, 0, 0, 0.38);
}

.live-app-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}

.live-view-count {
  display: inline-flex;
  align-items: center;
  min-width: 54px;
  border: 1px solid rgba(255, 255, 255, 0.34);
  background: rgba(0, 0, 0, 0.28);
  padding: 6px 8px;
  color: #efefef;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  backdrop-filter: blur(5px);
}

.live-view-count::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 7px;
  border: 2px solid currentColor;
  border-radius: 50%;
  vertical-align: -1px;
}

.live-sales-comments {
  position: absolute;
  z-index: 3;
  left: 16px;
  right: 68px;
  bottom: 20px;
  display: grid;
  height: 164px;
  align-content: end;
  gap: 9px;
  font-family: Arial, Helvetica, sans-serif;
  overflow: hidden;
  mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, 0.2) 8%, #000 24%, #000 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, 0.2) 8%, #000 24%, #000 100%);
  pointer-events: none;
}

.live-sales-comment {
  display: grid;
  grid-template-columns: 30px 1fr;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: #f1f1f1;
  font-size: 12px;
  font-weight: 800;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.85);
  transform-origin: 0 100%;
  transition: transform 360ms cubic-bezier(0.2, 0.72, 0.2, 1), opacity 300ms ease;
}

.live-sales-avatar {
  width: 30px;
  height: 30px;
  border: 1px solid rgba(255, 255, 255, 0.82);
  border-radius: 50%;
  background: #343434;
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.48);
}

.live-sales-comment-text {
  display: block;
  max-width: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.34), rgba(0, 0, 0, 0.08));
  padding: 4px 8px 5px;
  backdrop-filter: blur(3px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.live-sales-comment.is-entering {
  animation: live-comment-in 420ms ease-out;
}

.live-float-heart {
  position: absolute;
  right: calc(20px + var(--heart-x));
  bottom: 39%;
  color: #ff4678;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 28px;
  font-weight: 900;
  line-height: 1;
  opacity: 0;
  text-shadow: 0 2px 7px rgba(0, 0, 0, 0.8);
  transform: translateY(0) translateX(0) rotate(0) scale(var(--heart-scale));
  animation: live-heart-rise var(--heart-duration) linear forwards;
}

.live-gift-bubble {
  position: absolute;
  right: 44px;
  bottom: 11%;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(14, 14, 14, 0.82), rgba(44, 18, 32, 0.58));
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.42);
  color: #fff;
  padding: 4px 8px 4px 5px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  opacity: 0;
  backdrop-filter: blur(5px);
  animation: live-gift-rise 2.55s cubic-bezier(0.12, 0.72, 0.18, 1) forwards;
}

.live-rose-icon {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.55));
}

/* Shared Live presentation: one TikTok-style overlay at every preview size. */
.live-sales-preview {
  container-type: inline-size;
  isolation: isolate;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
}

.mode-preview .live-preview-card {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border: 0;
}

.mode-preview .mode-lock-overlay {
  z-index: 10;
}

.live-preview-compact .live-host-meta {
  display: none;
}

.live-preview-compact .live-host {
  max-width: none;
  flex: 1 1 auto;
}

.live-preview-compact .live-follow-mark {
  display: none;
}

.live-sales-preview-art {
  z-index: 0;
  opacity: 1;
}

.live-sales-preview-scrim {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.42), transparent 22%, transparent 58%, rgba(0, 0, 0, 0.72) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.16), transparent 40%, transparent 76%, rgba(0, 0, 0, 0.12));
}

.live-top-strip {
  z-index: 7;
  top: clamp(8px, 4.3cqw, 18px);
  left: clamp(7px, 4.3cqw, 16px);
  right: clamp(7px, 4.3cqw, 16px);
  gap: clamp(4px, 1.6cqw, 8px);
  color: #fff;
  letter-spacing: 0;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);
}

.live-host {
  display: flex;
  min-width: 0;
  max-width: 68%;
  align-items: center;
  gap: clamp(4px, 1.8cqw, 8px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.2);
  padding: clamp(2px, 0.8cqw, 4px) clamp(4px, 1.5cqw, 7px) clamp(2px, 0.8cqw, 4px) clamp(2px, 0.8cqw, 4px);
  backdrop-filter: blur(7px);
}

.live-host-avatar-frame {
  display: grid;
  width: clamp(17px, 8.7cqw, 34px);
  aspect-ratio: 1;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  background: #050505;
  overflow: hidden;
}

.live-host-avatar {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.live-host-copy {
  display: grid;
  min-width: 0;
  gap: 1px;
  line-height: 1;
}

.live-host-name {
  overflow: hidden;
  font-size: clamp(7px, 3.2cqw, 12px);
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.live-host-meta {
  color: rgba(255, 255, 255, 0.72);
  font-size: clamp(6px, 2.5cqw, 10px);
  font-weight: 700;
  white-space: nowrap;
}

.live-follow-mark {
  display: grid;
  width: clamp(13px, 5.8cqw, 22px);
  aspect-ratio: 1;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  background: #fe2c55;
  color: #fff;
  font-size: clamp(9px, 3.8cqw, 15px);
  font-weight: 800;
  line-height: 1;
  text-shadow: none;
}

.live-app-badge {
  flex: 0 0 auto;
  gap: 0;
  border: 0;
  border-radius: 3px;
  background: #fe2c55;
  padding: clamp(3px, 1.4cqw, 6px) clamp(4px, 2cqw, 8px);
  font-size: clamp(6px, 2.7cqw, 10px);
  letter-spacing: 0;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.32);
}

.live-app-badge::before {
  display: none;
}

.live-view-count {
  display: inline-flex;
  min-width: 0;
  flex: 0 0 auto;
  gap: clamp(2px, 1cqw, 4px);
  border: 0;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.36);
  padding: clamp(3px, 1.4cqw, 6px) clamp(4px, 1.8cqw, 7px);
  font-size: clamp(6px, 2.7cqw, 10px);
  letter-spacing: 0;
  backdrop-filter: blur(6px);
}

.live-view-count::before {
  display: none;
}

.live-view-count-icon {
  width: clamp(7px, 3cqw, 12px);
  height: clamp(7px, 3cqw, 12px);
  flex: 0 0 auto;
  stroke-width: 2.2;
}

.live-sales-comments {
  z-index: 5;
  left: clamp(8px, 4.3cqw, 16px);
  right: clamp(12px, 12cqw, 46px);
  bottom: clamp(46px, 16cqw, 64px);
  height: clamp(100px, 42cqw, 166px);
  gap: clamp(5px, 2.1cqw, 9px);
  letter-spacing: 0;
  mask-image: linear-gradient(180deg, transparent 0, #000 24%, #000 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 24%, #000 100%);
}

.live-sales-comment {
  grid-template-columns: clamp(18px, 7.6cqw, 30px) minmax(0, 1fr);
  align-items: start;
  gap: clamp(5px, 2cqw, 8px);
  color: #fff;
  font-size: inherit;
  font-weight: 700;
  letter-spacing: 0;
  text-align: left;
}

.live-sales-avatar {
  display: grid;
  width: clamp(18px, 7.6cqw, 30px);
  height: auto;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 50%;
  background-image: none;
  background-color: #d9537d;
  color: #fff;
  font-size: clamp(6px, 2.6cqw, 10px);
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.34);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.42);
}

.live-avatar-tone-1 {
  background-color: #2d9cdb;
}

.live-avatar-tone-2 {
  background-color: #8f5ed7;
}

.live-avatar-tone-3 {
  background-color: #1d9b78;
}

.live-avatar-tone-4 {
  background-color: #d37b32;
}

.live-avatar-tone-5 {
  background-color: #5268b7;
}

.live-sales-comment-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
  padding-top: 1px;
  text-align: left;
}

.live-sales-comment-name {
  overflow: hidden;
  color: rgba(255, 255, 255, 0.7);
  font-size: clamp(7px, 2.8cqw, 11px);
  font-weight: 700;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.live-sales-comment-text {
  display: -webkit-box;
  max-width: 100%;
  border-radius: 0;
  background: transparent;
  padding: 0;
  color: #fff;
  font-size: clamp(8px, 3.2cqw, 12px);
  font-weight: 700;
  line-height: 1.18;
  text-align: left;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  backdrop-filter: none;
  overflow: hidden;
}

.live-bottom-bar {
  position: absolute;
  z-index: 7;
  left: clamp(7px, 4.3cqw, 16px);
  right: clamp(7px, 4.3cqw, 16px);
  bottom: clamp(7px, 3.2cqw, 13px);
  display: flex;
  min-width: 0;
  align-items: center;
  gap: clamp(4px, 1.7cqw, 7px);
  letter-spacing: 0;
}

.live-comment-composer {
  display: flex;
  min-width: 0;
  height: clamp(22px, 8.8cqw, 35px);
  flex: 1 1 auto;
  align-items: center;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.18);
  padding: 0 clamp(7px, 3cqw, 12px);
  color: rgba(255, 255, 255, 0.8);
  font-size: clamp(7px, 2.9cqw, 11px);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
  backdrop-filter: blur(6px);
}

.live-bottom-toolbar {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: clamp(3px, 1.3cqw, 5px);
}

.live-toolbar-control {
  display: grid;
  width: clamp(21px, 8.6cqw, 34px);
  aspect-ratio: 1;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.24);
  color: #fff;
  backdrop-filter: blur(6px);
}

.live-toolbar-control > svg {
  width: 54%;
  height: 54%;
  stroke-width: 2;
}

.live-toolbar-control .live-rose-icon {
  width: 72%;
  height: 72%;
}

.live-like-control {
  border-color: rgba(255, 255, 255, 0.38);
  background: rgba(254, 44, 85, 0.84);
}

.live-like-control > svg {
  fill: #fff;
}

.live-interaction-layer {
  z-index: 6;
}

.live-float-heart {
  right: calc(clamp(9px, 4.8cqw, 18px) + var(--heart-x));
  bottom: clamp(42px, 15cqw, 60px);
  color: var(--heart-color);
  font-size: clamp(15px, 7cqw, 27px);
  text-shadow: 0 2px 7px rgba(0, 0, 0, 0.68);
}

.live-gift-bubble {
  right: auto;
  left: clamp(8px, 4.3cqw, 16px);
  bottom: clamp(74px, 27cqw, 108px);
  gap: clamp(3px, 1.3cqw, 5px);
  max-width: 72%;
  border-color: rgba(255, 255, 255, 0.26);
  border-radius: 5px;
  background: rgba(24, 24, 28, 0.76);
  padding: clamp(3px, 1.2cqw, 5px) clamp(5px, 1.8cqw, 8px);
  font-size: clamp(7px, 2.8cqw, 11px);
  font-weight: 600;
  letter-spacing: 0;
  backdrop-filter: blur(7px);
  animation-name: live-gift-rise;
}

.live-gift-bubble .live-rose-icon {
  width: clamp(14px, 6cqw, 24px);
  height: clamp(14px, 6cqw, 24px);
}

.live-gift-copy {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.live-gift-name {
  color: #ff9ab6;
}

@container (max-width: 180px) {
  .live-top-strip {
    top: 6px;
    left: 6px;
    right: 6px;
    gap: 3px;
  }

  .live-host {
    max-width: none;
    flex: 1 1 auto;
    gap: 3px;
    padding: 2px 3px 2px 2px;
  }

  .live-host-avatar-frame {
    width: 16px;
  }

  .live-host-name {
    font-size: 6.5px;
  }

  .live-host-copy {
    display: none;
  }

  .live-follow-mark {
    display: none;
  }

  .live-app-badge,
  .live-view-count {
    padding: 3px 4px;
    font-size: 6px;
  }

  .live-view-count-icon {
    width: 7px;
    height: 7px;
  }

  .live-sales-comments {
    left: 6px;
    right: 7px;
    bottom: 30px;
    height: 68px;
    gap: 4px;
  }

  .live-sales-comment {
    grid-template-columns: 14px minmax(0, 1fr);
    gap: 4px;
  }

  .live-sales-avatar {
    width: 14px;
    font-size: 5px;
  }

  .live-sales-comment-name {
    font-size: 6px;
  }

  .live-sales-comment-text {
    font-size: 6.5px;
    line-height: 1.1;
    -webkit-line-clamp: 1;
  }

  .live-bottom-bar {
    left: 5px;
    right: 5px;
    bottom: 5px;
    gap: 3px;
  }

  .live-comment-composer {
    height: 18px;
    padding: 0 5px;
    font-size: 6px;
  }

  .live-bottom-toolbar {
    gap: 2px;
  }

  .live-toolbar-control {
    width: 16px;
  }

  .live-float-heart {
    right: calc(5px + var(--heart-x));
    bottom: 27px;
    font-size: 14px;
  }

  .live-gift-bubble {
    display: none;
  }
}

.live-sales-copy-panel {
  display: grid;
  gap: 18px;
  justify-items: start;
}

.live-mock-kicker,
.live-mock-text,
.live-benefit,
.live-sales-footnote {
  font-family: Arial, Helvetica, sans-serif;
}

.live-mock-kicker {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.live-mock-heading {
  max-width: 11ch;
  margin: 0;
  color: var(--text);
  font-size: clamp(46px, 5.2vw, 88px);
  font-weight: 500;
  line-height: 0.92;
}

.live-download-heading {
  max-width: 10ch;
}

.live-mock-text {
  max-width: 58ch;
  margin: 0;
  color: #d1d1d1;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.55;
}

.live-download-layout {
  grid-template-columns: minmax(280px, 0.72fr) minmax(440px, 1fr);
}

.live-download-copy-panel {
  gap: 16px;
}

.live-download-copy-panel .live-download-actions {
  display: grid;
  width: min(560px, 100%);
  grid-template-columns: minmax(0, 1fr) minmax(150px, 0.42fr);
  gap: 10px;
  margin: 0;
}

.live-download-actions .primary-action,
.live-download-actions .secondary-action {
  width: 100%;
  min-width: 0;
  padding: 15px 18px;
  font-size: 20px;
}

.live-download-status-panel {
  display: grid;
  width: min(560px, 100%);
  border: 1px solid var(--line);
  color: var(--text);
  font-family: Arial, Helvetica, sans-serif;
}

.live-download-status-row {
  display: flex;
  min-height: 42px;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.28);
  padding: 0 16px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.13em;
}

.live-download-status-row:last-child {
  border-bottom: 0;
}

.live-device-token-panel {
  display: grid;
  width: min(560px, 100%);
  gap: 10px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  padding: 14px;
  background: rgba(255, 255, 255, 0.035);
}

.live-device-token-title {
  color: #8a3ffc;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0;
}

.live-device-token-copy,
.live-device-token-note {
  color: #d8d8d8;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
}

.live-device-token-value {
  width: 100%;
  min-height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  padding: 0 12px;
  background: #050505;
  color: #ffffff;
  font: 800 13px Arial, sans-serif;
  letter-spacing: 0;
}

.live-device-token-value:focus {
  outline: 2px solid #8a3ffc;
  outline-offset: 2px;
}

.live-token-button {
  min-height: 42px;
  font-size: 13px;
}

.live-download-steps .live-benefit {
  min-height: 84px;
}

.live-benefit-list {
  display: grid;
  width: min(560px, 100%);
  gap: 10px;
}

.live-benefit {
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 6px;
  align-items: center;
  border: 1px solid var(--line);
  padding: 15px 18px;
  color: var(--text);
}

.live-benefit-icon {
  width: 42px;
  height: 42px;
  color: #7f39ff;
}

.live-benefit-body {
  display: grid;
  gap: 5px;
}

.live-benefit-title {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.16em;
}

.live-benefit-text {
  color: #d1d1d1;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.42;
}

.live-sales-footnote {
  margin: -2px 0 0;
  color: #c4c4c4;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

button.live-sales-buy {
  width: min(300px, 92vw);
  min-width: 0;
  border-color: #c49cff;
  background: #7f39ff !important;
  color: #fff !important;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0.12em;
  white-space: nowrap;
}

button.live-sales-back {
  width: min(300px, 92vw);
  min-width: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 0.16em;
}

button.live-billing-button {
  width: min(220px, 92vw);
}

@keyframes live-comment-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes live-heart-rise {
  0% {
    opacity: 0;
    transform: translateY(0) translateX(0) rotate(0) scale(calc(var(--heart-scale) * 0.72));
  }
  14% {
    opacity: 0.96;
  }
  52% {
    opacity: 0.68;
  }
  78% {
    opacity: 0.32;
  }
  100% {
    opacity: 0;
    transform: translateY(-132px) translateX(var(--heart-drift)) rotate(var(--heart-tilt)) scale(calc(var(--heart-scale) * 1.18));
  }
}

@keyframes live-gift-rise {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(0.96);
  }
  12% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(-18px) scale(1);
  }
}

.showcase-rect {
  display: flex;
  width: auto;
  height: min(540px, 56vh);
  aspect-ratio: 9 / 16;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  background: #030303;
  overflow: hidden;
  padding: 0;
  text-align: center;
}

.theme-showcase {
  height: min(540px, 56vh);
}

.format-showcase {
  height: min(540px, 56vh);
  background: #030303;
}

.format-split-showcase {
  position: relative;
  display: block;
  padding: 0;
  color: var(--text);
}

.format-preview-split {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: 1fr 1fr;
}

.format-preview-panel {
  position: relative;
  display: block;
  overflow: hidden;
  padding: 0;
}

.format-preview-story-panel {
  border-top: 1px solid rgba(255, 255, 255, 0.34);
}

.format-preview-bg-video,
.format-preview-scrim {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.format-preview-bg-video {
  object-fit: cover;
  opacity: 0.8;
  filter: brightness(0.76) contrast(1.08) saturate(0.94);
}

.format-preview-scrim {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.48)),
    radial-gradient(circle at 50% 50%, transparent 0 48%, rgba(0, 0, 0, 0.34) 100%);
}

.format-preview-noise {
  position: absolute;
  inset: 0;
  z-index: 4;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.016) 0 1px, transparent 1px 4px),
    radial-gradient(circle at 50% 50%, transparent 0 58%, rgba(0, 0, 0, 0.28) 100%);
  opacity: 0.44;
  pointer-events: none;
}

.format-preview-cycle {
  position: relative;
  z-index: 2;
  display: grid;
  align-items: center;
  width: 100%;
  height: 100%;
  min-height: 0;
  box-sizing: border-box;
  padding: clamp(6px, 2.8%, 14px) 0;
}

.format-preview-cycle-card {
  position: relative;
  grid-area: 1 / 1;
  width: 100%;
  max-height: 100%;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateX(28px) scale(0.985);
  transition:
    opacity 260ms ease,
    transform 320ms cubic-bezier(0.22, 0.72, 0.26, 1);
  will-change: opacity, transform;
}

.format-preview-cycle-card.is-active {
  opacity: 1;
  transform: translateX(0) scale(1);
}

.format-preview-real-card {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.format-preview-real-card-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 18px 34px rgba(0, 0, 0, 0.46));
}

.format-preview-card {
  position: relative;
  z-index: 2;
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow:
    0 18px 34px rgba(0, 0, 0, 0.44),
    inset 0 0 0 1px rgba(255, 255, 255, 0.02);
  font-family: Arial, Helvetica, sans-serif;
  filter: blur(0.1px);
}

.format-preview-ask-card {
  padding: 8px 9px 7px;
  background: #121212;
}

.format-preview-normal-card {
  padding: 12px;
  background: #f4f4f4;
  color: #080808;
}

.format-preview-reddit-header,
.format-preview-brand-header {
  display: grid;
  align-items: center;
  min-width: 0;
}

.format-preview-reddit-header {
  grid-template-columns: 28px 1fr;
  gap: 7px;
  margin-bottom: 6px;
}

.format-preview-brand-header {
  grid-template-columns: 40px 1fr;
  gap: 10px;
  margin-bottom: 10px;
}

.format-preview-brand-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #030303 url("/static/wizard-previews/format_preview_smiley_pfp.jpg?v=20260803_public_asset_boundary_v1") center / cover no-repeat;
}

.format-preview-reddit-header .stories-sales-avatar-ask {
  width: 28px;
  height: 28px;
}

.format-preview-meta {
  min-width: 0;
}

.format-preview-subreddit,
.format-preview-brand-name {
  font-size: 12px;
  font-weight: 900;
  line-height: 1.1;
}

.format-preview-subreddit {
  color: #e8e8e8;
}

.format-preview-brand-name {
  color: #060606;
}

.format-preview-user,
.format-preview-brand-handle {
  margin-top: 2px;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.2;
}

.format-preview-user {
  color: #2e9fec;
}

.format-preview-brand-handle {
  color: #4c4c4c;
}

.format-preview-question,
.format-preview-hook {
  letter-spacing: 0;
}

.format-preview-question {
  color: #f3f3f3;
  font-size: clamp(15px, 1.05vw, 18px);
  font-weight: 900;
  line-height: 1.08;
}

.format-preview-hook {
  color: #080808;
  font-size: clamp(18px, 1.3vw, 22px);
  font-weight: 900;
  line-height: 1.12;
}

.format-preview-stats {
  display: flex;
  gap: 10px;
  margin-top: 5px;
  color: #d9d9d9;
  font-size: 9px;
  font-weight: 900;
}

.format-preview-stats span::before {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 5px;
  border: 1.6px solid currentColor;
  border-radius: 50%;
  vertical-align: -2px;
}

.showcase-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.showcase-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.showcase-line {
  max-width: 36ch;
  font-size: 44px;
  line-height: 1.14;
  text-transform: uppercase;
}

.showcase-line + .showcase-line {
  margin-top: 14px;
  color: var(--muted);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 1.45;
}

.choice-row,
.bottom-actions,
.script-actions,
.final-controls {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-top: clamp(18px, 2.8vh, 32px);
  flex-wrap: wrap;
}

.choice-button,
.primary-action,
.secondary-action,
.format-preview-button,
.control-button {
  border: 1px solid var(--line);
  background: var(--box);
  color: var(--text);
  min-width: 190px;
  padding: clamp(15px, 2.2vh, 22px) 28px;
  cursor: pointer;
  text-align: center;
  text-transform: uppercase;
}

.choice-button {
  font-size: 34px;
}

.choice-button.selected,
.format-preview-button.selected,
.script-option.selected,
.background-card.selected,
.primary-action {
  background: var(--text);
  color: var(--bg);
}

.primary-action {
  min-width: 280px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 34px;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.02;
}

.secondary-action {
  min-width: 210px;
  padding: 16px 24px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.05;
}

button:disabled {
  cursor: not-allowed;
}

.purchase-locked,
.purchase-locked:disabled {
  border-color: #7f39ff;
  background: #080808 !important;
  color: #d8d8d8 !important;
  cursor: default;
  opacity: 0.88;
}

.disabled-choice {
  border-color: #555;
  background: var(--disabled) !important;
  color: #777 !important;
}

.format-preview-button {
  width: min(320px, 72vw);
  padding: 26px;
  font-size: 44px;
}

.script-list {
  display: grid;
  width: min(820px, 88vw);
  gap: 20px;
}

.script-preview-unlock-note {
  margin-top: 16px;
  color: #9a48ff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1.25;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 0 14px rgba(133, 44, 255, 0.48);
}

@media (min-width: 860px) {
  body[data-step="script"] .script-list {
    width: min(1180px, 92vw);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
  }

  body[data-step="script"] .script-option {
    min-height: 330px;
    align-content: start;
  }
}

@media (max-width: 1080px) {
  .stories-desktop-theme-grid,
  .story-carousel-option-grid {
    grid-template-columns: 1fr;
    width: min(620px, 92vw);
  }

  .story-carousel-option {
    min-height: 0;
  }

  .background-grid {
    width: min(760px, 92vw);
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.generation-list {
  display: grid;
  width: min(960px, 90vw);
  gap: 12px;
}

.generation-summary {
  display: flex;
  width: min(960px, 90vw);
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
  border-top: 1px solid rgba(154, 72, 255, 0.72);
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
  background: transparent;
  padding: 13px 2px;
  font-family: Arial, Helvetica, sans-serif;
  text-transform: uppercase;
}

.generation-summary-primary {
  color: #9a48ff;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
}

.generation-summary-secondary {
  color: #9f9f9f;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.2;
  text-align: right;
}

.script-option {
  display: grid;
  width: 100%;
  gap: 10px;
  border: 1px solid var(--line);
  background: var(--box);
  color: var(--text);
  padding: 22px 26px;
  cursor: pointer;
  text-align: left;
  transition:
    border-color 160ms ease,
    background-color 160ms ease,
    color 160ms ease,
    transform 160ms ease;
}

.script-option:hover,
.script-option:focus-visible {
  border-color: #fff;
  outline: 0;
  transform: translateY(-2px);
}

.generation-card {
  display: grid;
  position: relative;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 0;
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 4px;
  background: #050505;
  color: var(--text);
  padding: 0;
  overflow: hidden;
}

.generation-card::before {
  content: "";
  position: absolute;
  top: auto;
  right: 0;
  bottom: 0;
  left: 0;
  width: auto;
  height: 2px;
  background: #9a48ff;
  opacity: 0.72;
}

.generation-card[data-status="ready"] {
  border-color: rgba(154, 72, 255, 0.76);
  box-shadow: 0 0 22px rgba(133, 44, 255, 0.1);
}

.generation-card[data-status="working"]::before {
  animation: generationWorkingPulse 0.92s ease-in-out infinite alternate;
}

.generation-card[data-status="failed"] {
  border-color: var(--danger);
}

.generation-card[data-status="failed"]::before {
  background: var(--danger);
}

.generation-card-mark {
  display: flex;
  min-height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-right: 1px solid rgba(255, 255, 255, 0.16);
  background: #020202;
  padding: 18px 10px;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}

.generation-card-mark-word {
  color: #fff;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 25px;
  line-height: 0.86;
}

.generation-card-mark-type {
  color: #9a48ff;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0;
}

.generation-card-copy {
  display: grid;
  min-width: 0;
  gap: 9px;
  padding: 17px 20px 13px;
}

.generation-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-family: Arial, Helvetica, sans-serif;
  text-transform: uppercase;
}

.generation-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 0;
  color: #9a48ff;
  padding: 0;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
}

.generation-status-pill::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 10px currentColor;
}

.generation-card[data-status="ready"] .generation-status-pill {
  background: transparent;
  color: #b678ff;
  box-shadow: none;
}

.generation-card[data-status="failed"] .generation-status-pill {
  border-color: var(--danger);
  color: var(--danger);
}

.generation-kind {
  min-width: 0;
  color: var(--muted);
  overflow: hidden;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.generation-title {
  font-size: 24px;
  line-height: 1.08;
}

.generation-meta {
  color: var(--muted);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.generation-snippet {
  color: #bdbdbd;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  line-height: 1.4;
}

.generation-card .secondary-action,
.generation-card .download-link {
  grid-column: 2;
  justify-self: start;
  margin: 0 20px 18px;
}

.generation-card .generation-pending {
  grid-column: 2;
  justify-self: start;
  margin: 0 20px 18px;
}

.generation-action {
  width: fit-content;
  min-width: 176px;
  border-color: #9a48ff;
  background: transparent;
  color: #9a48ff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
}

.generation-card .generation-action {
  min-width: 176px;
  min-height: 48px;
  padding: 13px 18px;
  font-size: 10px;
}

.generation-card[data-status="ready"] .generation-action {
  background: var(--text);
  color: var(--bg);
}

.generation-empty {
  display: grid;
  min-height: 190px;
  place-items: center;
  align-content: center;
  gap: 14px;
  border-top: 1px solid rgba(154, 72, 255, 0.72);
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
  background: transparent;
  padding: 28px;
  text-align: center;
}

.generation-actions {
  display: flex;
  width: min(960px, 90vw);
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
}

.generation-actions .primary-action,
.generation-actions .secondary-action,
.output-actions .primary-action,
.output-actions .secondary-action {
  min-width: 176px;
  min-height: 48px;
  padding: 13px 18px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0;
}

.generation-empty-title {
  color: #aaa;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
  text-transform: uppercase;
}

.generation-empty-mark {
  color: #fff;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 52px;
  line-height: 0.9;
  text-shadow: 0 0 24px rgba(133, 44, 255, 0.34);
}

.script-option.selected .script-snippet,
.script-option.selected .script-meta {
  color: #111;
}

.script-hook {
  font-size: 34px;
  line-height: 1.05;
}

.script-snippet {
  color: #cfcfcf;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  line-height: 1.45;
}

.script-meta {
  color: var(--muted);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.empty-box,
.auth-box,
.custom-script-box,
.confirm-box,
.progress-panel {
  width: min(820px, 88vw);
  border: 1px solid var(--line);
  background: var(--box);
  padding: 26px;
}

.empty-box {
  text-align: center;
  color: var(--muted);
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.custom-script-box {
  display: grid;
  gap: 18px;
}

body[data-step="auth"] .wizard-shell {
  display: flex;
  min-height: var(--app-height);
  flex-direction: column;
}

body[data-step="auth"] .wizard-root {
  min-height: 0;
  flex: 1 1 auto;
  justify-content: center;
  padding-bottom: 44px;
}

.auth-screen {
  display: grid;
  width: min(560px, 90vw);
  gap: 22px;
  justify-items: stretch;
}

.auth-intro {
  display: grid;
  justify-items: center;
  gap: 8px;
  text-align: center;
}

.auth-mark {
  display: block;
  width: 18px;
  height: 18px;
  margin-bottom: 4px;
  background: #9a48ff;
  box-shadow: 0 0 22px rgba(133, 44, 255, 0.66);
  transform: rotate(45deg);
}

.auth-kicker,
.auth-lead,
.auth-note,
.auth-field-header,
.auth-feedback {
  font-family: Arial, Helvetica, sans-serif;
}

.auth-kicker {
  color: #9a48ff;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
  text-transform: uppercase;
}

.auth-screen .auth-title {
  font-size: clamp(34px, 8vw, 48px);
  line-height: 1.08;
  text-transform: none;
}

.auth-screen .auth-lead {
  font-weight: 400;
}

.auth-screen .auth-field-header {
  color: #ddd;
  font-size: 13px;
  line-height: 1.3;
  font-weight: 600;
}

.auth-password-entry {
  display: flex;
  position: relative;
  min-width: 0;
}

.auth-password-entry .auth-input {
  width: 100%;
  min-width: 0;
  padding-right: 70px;
}

.auth-password-toggle {
  position: absolute;
  right: 5px;
  top: 5px;
  bottom: 5px;
  min-width: 54px;
  border: 0;
  background: transparent;
  color: #d5b9ff;
  font: 600 13px Arial, sans-serif;
  cursor: pointer;
}

.auth-password-toggle:focus-visible {
  outline: 2px solid #9a48ff;
  outline-offset: -2px;
}

.auth-password-help,
.auth-session-note {
  margin: 0;
  font: 400 12px/1.5 Arial, sans-serif;
  color: #aaa;
}

.auth-password-help { margin-top: -6px; }
.auth-session-note { text-align: center; }
.auth-screen .auth-feedback { font-size: 13px; font-weight: 400; text-transform: none; }
.auth-screen .auth-mode-option { font-size: 13px; font-weight: 600; }

.auth-title {
  margin: 0;
  font-size: 64px;
  line-height: 0.94;
}

.auth-lead {
  max-width: 48ch;
  margin: 0;
  color: #cfcfcf;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.42;
}

.auth-box {
  display: grid;
  width: 100%;
  gap: 18px;
  border-color: #9a48ff;
  background: #050505;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.04) inset,
    0 0 30px rgba(133, 44, 255, 0.18);
  padding: 24px;
}

.auth-mode-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid #343434;
}

.auth-mode-option {
  min-width: 0;
  min-height: 46px;
  border: 0;
  background: #080808;
  color: #8f8f8f;
  padding: 12px 10px;
  cursor: pointer;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0;
}

.auth-mode-option + .auth-mode-option {
  border-left: 1px solid #343434;
}

.auth-mode-option.selected {
  background: #fff;
  color: #000;
}

.auth-note {
  width: 100%;
  margin: 0;
  border-left: 2px solid #9a48ff;
  background: rgba(154, 72, 255, 0.08);
  color: #d8d8d8;
  padding: 11px 13px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.4;
  text-align: left;
  text-transform: uppercase;
}

.auth-form {
  display: grid;
  gap: 15px;
}

.auth-field {
  display: grid;
  gap: 7px;
}

.auth-field-header {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  color: #9a48ff;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
}

.auth-field-hint {
  color: #777;
}

.auth-box .auth-input {
  min-height: 54px;
  border-color: #555;
  background: #020202;
  padding: 14px 15px;
  font-size: 17px;
  line-height: 1.2;
}

.auth-box .auth-input:focus {
  border-color: #9a48ff;
  box-shadow: 0 0 18px rgba(133, 44, 255, 0.18);
}

.auth-box .auth-input:disabled {
  color: #777;
}

.auth-feedback {
  border: 1px solid rgba(255, 90, 90, 0.72);
  color: #ff8c8c;
  padding: 10px 12px;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.35;
  text-transform: uppercase;
}

.auth-submit {
  width: 100%;
  min-width: 0;
  min-height: 54px;
  margin-top: 2px;
  border-color: #c49cff;
  background: #7f39ff;
  color: #fff;
  padding: 15px 20px;
  font-size: 20px;
}

.billing-return-panel {
  display: grid;
  width: min(760px, 90vw);
  gap: 18px;
  border: 1px solid var(--line);
  background: var(--box);
  padding: clamp(28px, 5vw, 54px);
  text-align: center;
}

.billing-return-panel.active {
  border-color: #8a3ffc;
  box-shadow: 0 0 0 1px #8a3ffc inset;
}

.billing-return-kicker,
.billing-return-small {
  color: var(--muted);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.1em;
  line-height: 1.45;
  text-transform: uppercase;
}

.billing-return-status {
  color: var(--text);
  font-size: clamp(44px, 7vw, 88px);
  font-weight: 500;
  line-height: 0.92;
  text-transform: uppercase;
}

.billing-return-copy {
  max-width: 560px;
  margin: 0 auto;
  color: #e8e8e8;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.45;
}

.creator-offer-screen {
  display: grid;
  width: min(1100px, 92vw);
  gap: 24px;
  padding-bottom: 30px;
}

.creator-offer-intro {
  display: grid;
  max-width: 760px;
  margin: 0 auto;
  gap: 8px;
  text-align: center;
}

.creator-offer-kicker,
.creator-offer-lead,
.creator-offer-product-detail,
.creator-offer-price-term,
.creator-offer-plan-copy,
.creator-offer-utility,
.checkout-identity-note,
.purchase-activate-action,
.billing-license-recovery {
  font-family: Arial, Helvetica, sans-serif;
  letter-spacing: 0;
}

.creator-offer-kicker {
  color: #9a48ff;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.creator-offer-heading {
  margin: 0;
  color: var(--text);
  font-size: 64px;
  font-weight: 500;
  line-height: 0.94;
  text-transform: uppercase;
}

.creator-offer-lead {
  max-width: 62ch;
  margin: 2px auto 0;
  color: #d8d8d8;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.48;
}

.creator-offer-products {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.creator-offer-product {
  display: grid;
  min-width: 0;
  grid-template-rows: 190px auto;
  border: 1px solid rgba(154, 72, 255, 0.7);
  background: #050505;
}

.creator-offer-product-image {
  display: block;
  width: 100%;
  height: 190px;
  border-bottom: 1px solid rgba(154, 72, 255, 0.7);
  background: #090909;
  object-fit: cover;
  object-position: center 36%;
}

.creator-offer-product-copy {
  display: grid;
  align-content: start;
  gap: 7px;
  padding: 16px;
}

.creator-offer-product-label {
  margin: 0;
  color: #9a48ff;
  font-size: 30px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1;
}

.creator-offer-product-detail {
  margin: 0;
  color: #e0e0e0;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.38;
}

.creator-offer-plan {
  display: grid;
  align-items: center;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 24px;
  border-top: 1px solid #9a48ff;
  border-bottom: 1px solid #9a48ff;
  padding: 18px 4px;
}

.creator-offer-price {
  display: flex;
  align-items: baseline;
  gap: 9px;
  white-space: nowrap;
}

.creator-offer-price-value {
  color: var(--text);
  font-size: 58px;
  line-height: 0.9;
}

.creator-offer-price-term {
  color: #bdbdbd;
  font-size: 11px;
  font-weight: 900;
}

.creator-offer-plan-copy {
  display: grid;
  gap: 4px;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.3;
  text-align: right;
}

.creator-offer-plan-small {
  color: #a8a8a8;
  font-size: 11px;
}

.checkout-identity-note {
  max-width: 68ch;
  margin: 0;
  color: #bdbdbd;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.42;
  overflow-wrap: anywhere;
}

.creator-offer-identity {
  margin: -6px auto 0;
  text-align: center;
}

.creator-offer-actions {
  margin-top: 0;
}

button.creator-offer-buy {
  border-color: #c49cff;
  background: #7f39ff;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 0;
}

button.creator-offer-generations {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0;
}

.creator-offer-utility {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 24px;
}

.creator-offer-activate,
.purchase-activate-action {
  border: 0;
  border-bottom: 1px solid currentColor;
  background: transparent;
  color: #c9c9c9;
  padding: 3px 0;
  cursor: pointer;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.creator-offer-activate,
.purchase-activate-action {
  color: #b98aff;
}

.billing-license-recovery {
  display: grid;
  gap: 9px;
  margin-top: 4px;
  border-top: 1px solid rgba(154, 72, 255, 0.5);
  padding-top: 18px;
  text-align: left;
}

.billing-license-heading {
  color: #9a48ff;
  font-size: 12px;
  font-weight: 900;
}

.billing-license-copy,
.billing-license-help {
  color: #cfcfcf;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.38;
}

.billing-license-help {
  color: #8f8f8f;
  font-size: 10px;
}

.billing-license-form-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.billing-license-input {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  background: #000;
  color: #fff;
  padding: 0 14px;
  font: 800 13px Arial, Helvetica, sans-serif;
  letter-spacing: 0;
}

.billing-license-input:focus {
  outline: 2px solid #8a3ffc;
  outline-offset: 2px;
}

.billing-license-submit {
  min-height: 48px;
  border: 1px solid #c49cff;
  background: #7f39ff;
  color: #fff;
  padding: 0 18px;
  cursor: pointer;
  font: 900 12px Arial, Helvetica, sans-serif;
  letter-spacing: 0;
  text-transform: uppercase;
}

.billing-license-submit:disabled,
.billing-license-input:disabled {
  cursor: wait;
  opacity: 0.65;
}

.live-sales-copy-panel > .checkout-identity-note,
.stories-sales-copy-panel > .checkout-identity-note {
  width: min(560px, 100%);
}

.live-sales-copy-panel > .purchase-activate-action,
.stories-sales-copy-panel > .purchase-activate-action {
  justify-self: start;
}

.progress-panel {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 22px;
  font-family: Arial, Helvetica, sans-serif;
}

.progress-panel.active {
  border-width: 3px;
  background: #fff;
  color: #000;
}

.progress-pulse {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  border: 2px solid currentColor;
}

.progress-panel.active .progress-pulse {
  animation: progressPulse 0.82s ease-in-out infinite alternate;
}

.progress-copy {
  display: grid;
  gap: 6px;
}

.progress-title {
  font-size: 34px;
  font-weight: 900;
  line-height: 1;
}

.progress-message {
  color: inherit;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.generating-screen {
  display: flex;
  width: min(780px, 92vw);
  min-height: min(560px, 66vh);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  text-align: center;
}

body[data-step="final"][data-final-variant="creating"] .page-title {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.generating-saved,
.output-ready-banner {
  display: grid;
  width: min(580px, 100%);
  align-items: center;
  grid-template-columns: minmax(0, 1fr) auto auto minmax(0, 1fr);
  gap: 10px;
  color: #b678ff;
  font-family: Arial, Helvetica, sans-serif;
}

.generating-saved-rule,
.output-ready-rule {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(154, 72, 255, 0.92));
}

.generating-saved-rule:last-child,
.output-ready-rule:last-child {
  background: linear-gradient(90deg, rgba(154, 72, 255, 0.92), transparent);
}

.generating-saved-mark,
.output-ready-mark {
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #9a48ff;
  box-shadow: 0 0 14px rgba(133, 44, 255, 0.58);
}

.generating-saved-mark::after,
.output-ready-mark::after {
  content: "";
  display: block;
  width: 7px;
  height: 4px;
  margin: 5px auto 0;
  border: solid #170526;
  border-width: 0 0 2px 2px;
  transform: rotate(-45deg);
}

.generating-saved-text,
.output-ready-text {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.render-stage-status {
  color: var(--text);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
  text-transform: uppercase;
}

.generating-dots {
  display: inline-block;
  width: 1.1em;
  color: #b678ff;
  text-align: left;
}

.render-stage-wrap {
  display: grid;
  width: min(560px, 100%);
  gap: 10px;
}

.render-progress-rail {
  position: relative;
  height: 5px;
  border: 0;
  background: #202020;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.07);
}

.render-progress-glow {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(90deg, #ff4d75, #ffd166, #43dfa2, #41a8ff, #9a48ff, #ff4d75);
  background-size: 220% 100%;
  box-shadow: 0 0 18px rgba(133, 44, 255, 0.58);
}

.render-progress-glow.is-timed {
  width: 0;
  animation:
    previewProgressFill 3s cubic-bezier(0.22, 0.72, 0.22, 1) forwards,
    creationSpectrum 1.4s linear infinite;
}

.render-progress-glow.is-indeterminate {
  left: -42%;
  width: 42%;
  animation:
    renderProgressSweep 1.55s ease-in-out infinite,
    creationSpectrum 1.4s linear infinite;
}

.creation-wordmark {
  display: block;
  position: relative;
  color: #fff;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 150px;
  font-weight: 400;
  line-height: 0.76;
  text-shadow: 0 0 34px rgba(255, 255, 255, 0.1);
}

.creation-wordmark::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #ff4d75, #ffd166, #43dfa2, #41a8ff, #9a48ff, #ff4d75);
  background-clip: text;
  color: transparent;
  clip-path: inset(0 100% 0 0);
  -webkit-background-clip: text;
  animation: creationWordmarkScan 3s cubic-bezier(0.22, 0.72, 0.22, 1) infinite;
}

.render-progress-caption {
  color: #747474;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
  text-transform: uppercase;
}

.generating-note {
  max-width: 34ch;
  color: #9a9a9a;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.36;
  letter-spacing: 0;
  text-transform: uppercase;
}

.generating-actions {
  width: min(620px, 92vw);
}

@keyframes progressPulse {
  from {
    transform: scale(0.72);
    opacity: 0.38;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes renderProgressSweep {
  0% {
    left: -42%;
  }

  52% {
    left: 100%;
  }

  100% {
    left: 100%;
  }
}

@keyframes previewProgressFill {
  from {
    width: 0;
  }

  to {
    width: 100%;
  }
}

@keyframes creationSpectrum {
  from {
    background-position: 0 0;
  }

  to {
    background-position: 220% 0;
  }
}

@keyframes creationWordmarkScan {
  0% {
    clip-path: inset(0 100% 0 0);
    opacity: 0.28;
  }

  72% {
    clip-path: inset(0 0 0 0);
    opacity: 0.9;
  }

  100% {
    clip-path: inset(0 0 0 0);
    opacity: 0;
  }
}

@keyframes generationWorkingPulse {
  from {
    opacity: 0.32;
  }

  to {
    opacity: 1;
  }
}

.custom-title,
.auth-input,
.custom-text,
.final-script,
.control-select {
  width: 100%;
  border: 1px solid var(--line);
  background: #030303;
  color: var(--text);
  padding: 16px;
}

.custom-title {
  font-size: 28px;
  text-transform: uppercase;
}

.auth-input {
  min-height: 58px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
}

.custom-text {
  min-height: 360px;
  resize: vertical;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.55;
}

.background-grid {
  display: grid;
  width: min(980px, 88vw);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
}

.background-card {
  display: grid;
  gap: 12px;
  justify-items: center;
  border: 0;
  background: transparent;
  color: var(--text);
  padding: 0;
  cursor: pointer;
}

.background-preview {
  display: flex;
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  background: #050505;
  overflow: hidden;
  padding: 0;
  text-align: left;
  font-size: 42px;
  line-height: 1.15;
}

.background-card.disabled-choice {
  background: transparent !important;
}

.background-card.disabled-choice .background-preview,
.background-card.disabled-choice .background-select {
  border-color: #555;
  background: #030303 !important;
  color: #777 !important;
}

.background-preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.background-card.is-locked,
.background-mobile-card.is-locked {
  cursor: not-allowed;
}

.background-card.is-locked .background-preview img,
.background-mobile-card.is-locked .background-mobile-preview img {
  filter: grayscale(0.62) saturate(0.68) brightness(0.48);
}

.background-card.is-locked .background-select {
  color: #a9a9a9;
}

.background-lock-overlay {
  background: rgba(0, 0, 0, 0.2);
}

.background-placeholder {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  align-content: center;
  gap: 12px;
  padding: 24px;
  background:
    radial-gradient(circle at 50% 42%, rgba(154, 72, 255, 0.18), transparent 36%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.006)),
    #050505;
  text-align: center;
}

.background-placeholder-title {
  color: var(--text);
  max-width: 9ch;
  font-size: clamp(22px, 1.65vw, 28px);
  line-height: 0.96;
  text-transform: uppercase;
}

.background-placeholder-note {
  color: #9a48ff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.13em;
  line-height: 1;
  text-transform: uppercase;
}

.background-select {
  width: 100%;
  border: 1px solid var(--line);
  background: var(--box);
  padding: 12px;
  font-size: clamp(21px, 1.65vw, 28px);
  line-height: 1.02;
  text-align: center;
}

.background-card.selected .background-preview,
.background-card.selected .background-select {
  border-color: #9a48ff;
  background:
    linear-gradient(90deg, rgba(154, 72, 255, 0.18), rgba(154, 72, 255, 0.04)),
    #050505;
  color: var(--text);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.08) inset,
    0 0 18px rgba(133, 44, 255, 0.42);
}

.background-card.selected .background-preview {
  border-width: 3px;
}

.summary-line {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 18px;
  padding: 10px 0;
  border-bottom: 1px solid #333;
}

.summary-line:last-child {
  border-bottom: 0;
}

.summary-label {
  color: var(--muted);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.summary-value {
  font-size: 27px;
  line-height: 1.12;
}

.shorts-confirm-box {
  border-color: #9a48ff;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.1) inset,
    0 0 18px rgba(133, 44, 255, 0.42),
    0 0 46px rgba(133, 44, 255, 0.16);
}

.shorts-confirm-box .summary-line {
  border-bottom-color: rgba(154, 72, 255, 0.62);
}

.shorts-confirm-box .summary-label {
  color: #9a48ff;
}

.shorts-confirm-box .summary-line[data-summary-label="hook"] .summary-value {
  max-width: 18ch;
}

.final-check-note {
  display: flex;
  width: min(820px, 88vw);
  align-items: center;
  gap: 18px;
  margin-top: 16px;
  border: 1px solid #9a48ff;
  background:
    linear-gradient(90deg, rgba(154, 72, 255, 0.18), rgba(154, 72, 255, 0.06)),
    #060606;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.08) inset,
    0 0 24px rgba(133, 44, 255, 0.18);
  padding: 18px 22px;
}

.final-check-note-mark {
  display: block;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  background: #9a48ff;
  box-shadow: 0 0 18px rgba(133, 44, 255, 0.68);
  transform: rotate(45deg);
}

.final-check-note-copy {
  display: grid;
  gap: 6px;
}

.final-check-note-title {
  color: #9a48ff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.2;
}

.final-check-note-body {
  color: #cfcfcf;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
}

.final-script {
  width: min(860px, 90vw);
  min-height: min(560px, 56vh);
  resize: vertical;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 17px;
  line-height: 1.55;
}

.final-desktop-screen {
  display: grid;
  width: min(1180px, 92vw);
  min-height: min(620px, calc(100svh - 240px));
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.72fr);
  gap: 24px;
  align-items: stretch;
}

.final-desktop-editor {
  display: grid;
  min-height: 0;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px;
  border: 1px solid #9a48ff;
  background: #050505;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.06) inset,
    0 0 30px rgba(133, 44, 255, 0.16);
  padding: 20px;
}

.final-desktop-editor-label {
  color: #9a48ff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.final-desktop-editor .final-script {
  width: 100%;
  height: 100%;
  min-height: 0;
  resize: none;
}

.final-desktop-side {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 14px;
}

.final-desktop-side .progress-panel {
  width: 100%;
  margin: 0;
  padding: 20px;
}

.final-desktop-side .progress-title {
  font-size: 27px;
}

.final-desktop-side .final-desktop-controls {
  display: grid;
  width: 100%;
  gap: 12px;
  margin: 0;
}

.final-desktop-controls .select-control {
  min-width: 0;
}

.final-desktop-controls .control-select {
  min-height: 52px;
}

.final-desktop-side .credit-note {
  width: 100%;
  margin: 0;
  border: 1px solid rgba(154, 72, 255, 0.5);
  padding: 13px 14px;
  text-align: left;
}

.final-desktop-side .final-desktop-actions {
  display: grid;
  width: 100%;
  gap: 10px;
  margin-top: auto;
}

.final-desktop-actions .primary-action,
.final-desktop-actions .secondary-action {
  width: 100%;
  min-width: 0;
  padding: 16px 18px;
  font-size: 22px;
}

.control-select:disabled {
  color: #858585;
  cursor: not-allowed;
}

.final-controls {
  width: min(860px, 90vw);
  align-items: end;
}

.final-mobile-screen {
  width: 100%;
}

.final-mobile-saved,
.final-mobile-editor,
.final-mobile-controls,
.final-mobile-actions {
  width: 100%;
}

.credit-note {
  width: min(860px, 90vw);
  margin-top: 14px;
  color: #d8d8d8;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}

.credit-note.empty {
  color: var(--danger);
}

.preview-tier-note {
  display: grid;
  width: 100%;
  gap: 4px;
  border: 1px solid rgba(154, 72, 255, 0.62);
  background: #070707;
  box-shadow: 0 0 18px rgba(133, 44, 255, 0.14);
  padding: 11px 13px;
  font-family: Arial, Helvetica, sans-serif;
  letter-spacing: 0;
  text-transform: uppercase;
}

.preview-tier-note-label {
  color: #9a48ff;
  font-size: 11px;
  font-weight: 900;
}

.preview-tier-note-copy {
  color: #d8d8d8;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.3;
}

.select-control {
  display: grid;
  min-width: 210px;
  gap: 8px;
}

.select-label {
  color: var(--muted);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.control-button {
  min-width: 150px;
  align-self: stretch;
}

.output-screen {
  display: grid;
  width: min(620px, 90vw);
  justify-items: center;
}

.output-box {
  display: grid;
  justify-items: center;
  gap: 14px;
  width: 100%;
  padding: 0;
  background: transparent;
  border: 0;
}

.output-intro {
  display: grid;
  gap: 4px;
  text-align: center;
}

.output-intro-title {
  color: #fff;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 30px;
  line-height: 1;
}

.output-intro-meta,
.output-save-note {
  color: #8e8e8e;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.25;
  text-transform: uppercase;
}

.output-media-frame {
  display: grid;
  width: min(360px, 76vw);
  padding: 7px;
  border: 1px solid rgba(154, 72, 255, 0.76);
  border-radius: 4px;
  background: #030303;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.05) inset,
    0 0 28px rgba(133, 44, 255, 0.18);
}

.output-box video {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  border: 0;
  border-radius: 2px;
  background: #050505;
  object-fit: contain;
}

.output-download {
  width: min(360px, 100%);
  min-height: 54px;
  border-color: #9a48ff;
  background: #fff;
  color: #050505;
  font-size: 16px;
}

.output-actions {
  display: grid;
  width: min(620px, 90vw);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.download-link {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  color: var(--text);
  padding: 14px 18px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.05;
  text-align: center;
  text-decoration: none;
}

.generation-pending {
  justify-self: start;
  border: 1px solid var(--line);
  color: var(--muted);
  padding: 12px 14px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

@media (min-width: 1200px) and (min-height: 850px) {
  .wizard-shell {
    width: min(1560px, calc(100vw - 96px));
    padding-top: 42px;
  }

  .wizard-topbar {
    margin-bottom: 28px;
  }

  .page-title {
    margin-bottom: 32px;
    font-size: 68px;
  }

  .mode-title {
    font-size: 70px;
  }

  .mode-grid {
    width: min(1280px, 88vw);
    gap: 86px;
  }

  .mode-preview {
    height: min(540px, 48vh);
  }

  .mode-card.primary .mode-preview {
    height: min(660px, 56vh);
  }

  .theme-showcase,
  .format-showcase,
  .showcase-rect {
    height: min(640px, 58vh);
  }

  .choice-row,
  .bottom-actions,
  .script-actions,
  .final-controls {
    gap: 28px;
    margin-top: 30px;
  }

  .choice-button {
    min-width: 218px;
    padding: 22px 32px;
    font-size: 40px;
  }

  .primary-action {
    min-width: 320px;
    padding: 22px 34px;
    font-size: 38px;
  }

  .secondary-action {
    min-width: 230px;
    padding: 18px 28px;
    font-size: 24px;
  }

  .script-list,
  .generation-list,
  .custom-script-box,
  .confirm-box,
  .progress-panel {
    width: min(960px, 82vw);
  }

  .script-option {
    padding: 28px 34px;
  }

  .script-hook {
    font-size: 38px;
  }

  .script-snippet {
    font-size: 17px;
  }

  .background-grid {
    width: min(980px, 88vw);
    gap: 24px;
  }

  .background-preview {
    height: auto;
  }

  .final-script,
  .final-controls,
  .credit-note {
    width: min(980px, 82vw);
  }

  .output-box {
    width: min(560px, 40vw);
  }
}

@media (min-width: 1900px) and (min-height: 1000px) {
  .wizard-shell {
    width: min(1680px, calc(100vw - 120px));
  }

  .page-title {
    font-size: 76px;
  }

  .theme-showcase,
  .format-showcase,
  .showcase-rect {
    height: min(700px, 59vh);
  }

  .choice-button {
    min-width: 240px;
    font-size: 46px;
  }

  .primary-action {
    min-width: 360px;
    font-size: 42px;
  }

  .background-preview {
    height: min(650px, 59vh);
  }
}

@media (max-height: 760px) and (min-width: 761px) {
  .wizard-shell {
    padding-top: 16px;
  }

  .wizard-topbar {
    margin-bottom: 14px;
  }

  .page-title {
    margin-bottom: 18px;
    font-size: 46px;
  }

  .theme-showcase,
  .format-showcase,
  .showcase-rect {
    height: min(430px, 48vh);
  }

  .format-showcase {
    height: min(430px, 56vh);
  }

  .choice-row,
  .bottom-actions,
  .script-actions,
  .final-controls {
    margin-top: 18px;
  }
}

@media (min-width: 1081px) and (max-height: 820px) {
  body[data-step="storiesTheme"] .wizard-shell {
    padding-bottom: 20px;
  }

  .stories-desktop-theme-grid {
    width: min(820px, 92vw);
    gap: 18px;
  }

  .stories-desktop-theme-card {
    gap: 11px;
  }

  .stories-desktop-theme-label {
    font-size: 36px;
  }

  .stories-desktop-theme-desc {
    font-size: 10px;
  }
}

@media (max-width: 760px) {
  body[data-step="mode"] {
    height: 100svh;
    overflow: hidden;
  }

  body[data-step="theme"],
  body[data-step="format"],
  body[data-step="background"],
  body[data-step="script"],
  body[data-step="confirm"],
  body[data-step="final"],
  body[data-step="output"],
  body[data-step="liveApp"][data-live-variant="paywall"],
  body[data-step="storiesApp"],
  body[data-step="storiesTheme"],
  body[data-step="storiesQuestion"],
  body[data-step="storiesConfirm"],
  body[data-step="storiesOutput"] {
    height: 100svh;
    overflow: hidden;
  }

  .wizard-shell {
    width: min(100% - 24px, 1180px);
    padding-top: 16px;
  }

  body[data-step="mode"] .wizard-shell {
    width: 100%;
    height: 100svh;
    min-height: 100svh;
    overflow: hidden;
    padding: 0;
  }

  body[data-step="theme"] .wizard-shell,
  body[data-step="format"] .wizard-shell,
  body[data-step="background"] .wizard-shell,
  body[data-step="script"] .wizard-shell,
  body[data-step="storiesTheme"] .wizard-shell,
  body[data-step="storiesQuestion"] .wizard-shell {
    position: relative;
    width: 100%;
    height: 100svh;
    min-height: 100svh;
    overflow: hidden;
    padding: calc(env(safe-area-inset-top, 0px) + 14px) 0 calc(env(safe-area-inset-bottom, 0px) + 12px);
  }

  .wizard-topbar {
    grid-template-columns: 82px 1fr 80px;
    gap: 8px;
  }

  body[data-step="mode"] .wizard-topbar {
    position: absolute;
    z-index: 10;
    top: calc(env(safe-area-inset-top, 0px) + 18px);
    left: 0;
    width: 100%;
    grid-template-columns: 1fr auto;
    padding: 0 clamp(18px, 6vw, 28px);
  }

  body[data-step="mode"] #account-button.account-button {
    display: none;
  }

  body[data-step="theme"] #account-button.account-button,
  body[data-step="format"] #account-button.account-button,
  body[data-step="background"] #account-button.account-button,
  body[data-step="script"] #account-button.account-button,
  body[data-step="confirm"] #account-button.account-button,
  body[data-step="final"] #account-button.account-button,
  body[data-step="output"] #account-button.account-button,
  body[data-step="liveApp"] #account-button.account-button,
  body[data-step="storiesApp"] #account-button.account-button,
  body[data-step="storiesTheme"] #account-button.account-button,
  body[data-step="storiesQuestion"] #account-button.account-button,
  body[data-step="storiesConfirm"] #account-button.account-button,
  body[data-step="storiesOutput"] #account-button.account-button,
  body[data-step="creatorOffer"] #account-button.account-button,
  body[data-step="billingReturn"] #account-button.account-button,
  body[data-step="inbox"] #account-button.account-button {
    display: none;
  }

  body[data-step="theme"] .wizard-topbar,
  body[data-step="format"] .wizard-topbar,
  body[data-step="background"] .wizard-topbar,
  body[data-step="script"] .wizard-topbar,
  body[data-step="storiesTheme"] .wizard-topbar,
  body[data-step="storiesQuestion"] .wizard-topbar {
    position: relative;
    z-index: 20;
    width: min(100% - 24px, 520px);
    margin: 0 auto clamp(8px, 1.6svh, 14px);
  }

  body[data-step="storiesApp"] .wizard-shell {
    display: flex;
    width: 100%;
    height: 100svh;
    min-height: 100svh;
    flex-direction: column;
    overflow: hidden;
    padding: calc(env(safe-area-inset-top, 0px) + 14px) 12px calc(env(safe-area-inset-bottom, 0px) + 14px);
  }

  body[data-step="storiesApp"] .wizard-topbar {
    position: relative;
    z-index: 20;
    width: min(100% - 24px, 520px);
    flex: 0 0 auto;
    margin: 0 auto clamp(8px, 1.6svh, 12px);
  }

  body[data-step="storiesApp"] .wizard-root {
    display: flex;
    width: min(100% - 20px, 520px);
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    margin: 0 auto;
  }

  body[data-step="storiesApp"] .page-title {
    flex: 0 0 auto;
    margin-bottom: clamp(8px, 1.5svh, 12px);
    font-size: clamp(32px, 9vw, 40px);
    line-height: 0.96;
  }

  body[data-step="liveApp"][data-live-variant="paywall"] .wizard-shell {
    display: flex;
    width: 100%;
    height: 100svh;
    min-height: 100svh;
    flex-direction: column;
    overflow: hidden;
    padding: calc(env(safe-area-inset-top, 0px) + 14px) 12px calc(env(safe-area-inset-bottom, 0px) + 14px);
  }

  body[data-step="liveApp"][data-live-variant="paywall"] .wizard-topbar {
    position: relative;
    z-index: 20;
    width: min(100% - 24px, 520px);
    flex: 0 0 auto;
    margin: 0 auto clamp(8px, 1.6svh, 12px);
  }

  body[data-step="liveApp"][data-live-variant="paywall"] .wizard-root {
    display: flex;
    width: min(100% - 20px, 520px);
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    margin: 0 auto;
  }

  body[data-step="liveApp"][data-live-variant="paywall"] .page-title {
    flex: 0 0 auto;
    margin-bottom: clamp(8px, 1.5svh, 12px);
    font-size: clamp(32px, 9vw, 40px);
    line-height: 0.96;
  }

  .back-button {
    grid-column: 1;
    width: 82px;
    padding: 8px;
  }

  .account-button {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: stretch;
    width: 100%;
    max-width: none;
    padding: 9px 10px;
  }

  .status-mark {
    grid-column: 3;
    max-width: 80px;
  }

  .progress-mark {
    grid-column: 2;
  }

  .page-title {
    margin-bottom: 24px;
    font-size: 34px;
    line-height: 1.04;
  }

  body[data-step="creatorOffer"] .wizard-shell,
  body[data-step="billingReturn"] .wizard-shell {
    width: 100%;
    padding: calc(env(safe-area-inset-top, 0px) + 14px) 12px calc(env(safe-area-inset-bottom, 0px) + 30px);
  }

  body[data-step="creatorOffer"] .wizard-topbar,
  body[data-step="billingReturn"] .wizard-topbar {
    width: min(100% - 24px, 520px);
    margin: 0 auto 18px;
  }

  body[data-step="creatorOffer"] .wizard-root,
  body[data-step="billingReturn"] .wizard-root {
    width: min(100% - 20px, 520px);
    min-height: 0;
    margin: 0 auto;
  }

  body[data-step="creatorOffer"] .page-title,
  body[data-step="billingReturn"] .page-title {
    margin-bottom: 16px;
    font-size: 36px;
  }

  .creator-offer-screen {
    width: 100%;
    gap: 16px;
    padding-bottom: 12px;
  }

  .creator-offer-intro {
    gap: 6px;
  }

  .creator-offer-kicker {
    font-size: 10px;
  }

  .creator-offer-heading {
    font-size: 42px;
  }

  .creator-offer-lead {
    font-size: 12px;
    line-height: 1.4;
  }

  .creator-offer-products {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .creator-offer-product {
    grid-template-columns: 82px minmax(0, 1fr);
    grid-template-rows: auto;
  }

  .creator-offer-product-image {
    width: 82px;
    height: 108px;
    border-right: 1px solid rgba(154, 72, 255, 0.7);
    border-bottom: 0;
  }

  .creator-offer-product-copy {
    align-content: center;
    padding: 12px 13px;
  }

  .creator-offer-product-label {
    font-size: 27px;
  }

  .creator-offer-product-detail {
    font-size: 11px;
    line-height: 1.3;
  }

  .creator-offer-plan {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 14px 2px;
  }

  .creator-offer-price {
    justify-content: center;
  }

  .creator-offer-price-value {
    font-size: 50px;
  }

  .creator-offer-plan-copy {
    text-align: center;
  }

  .creator-offer-identity {
    margin-top: -3px;
  }

  .creator-offer-actions {
    display: grid;
    width: 100%;
    gap: 8px;
  }

  .creator-offer-actions .primary-action,
  .creator-offer-actions .secondary-action {
    width: 100%;
    min-width: 0;
    padding: 15px 18px;
  }

  button.creator-offer-buy {
    font-size: 19px;
  }

  button.creator-offer-generations {
    font-size: 16px;
  }

  .creator-offer-utility {
    gap: 10px 18px;
  }

  .billing-return-panel {
    width: 100%;
    gap: 14px;
    padding: 24px 18px;
  }

  .billing-return-status {
    font-size: 42px;
  }

  .billing-return-copy {
    font-size: 14px;
  }

  .billing-license-form-row {
    grid-template-columns: 1fr;
  }

  .billing-license-submit {
    min-height: 46px;
  }

  body[data-step="billingReturn"] .bottom-actions {
    display: grid;
    width: 100%;
    gap: 8px;
  }

  body[data-step="billingReturn"] .primary-action,
  body[data-step="billingReturn"] .secondary-action {
    width: 100%;
    min-width: 0;
    padding: 14px 18px;
    font-size: 18px;
  }

  body[data-step="confirm"] .wizard-shell,
  body[data-step="storiesConfirm"] .wizard-shell {
    width: 100%;
    height: 100svh;
    min-height: 100svh;
    overflow: hidden;
    padding: calc(env(safe-area-inset-top, 0px) + 16px) 12px calc(env(safe-area-inset-bottom, 0px) + 18px);
  }

  body[data-step="confirm"] .wizard-topbar,
  body[data-step="storiesConfirm"] .wizard-topbar {
    position: relative;
    z-index: 20;
    width: min(100% - 24px, 520px);
    margin: 0 auto clamp(18px, 3.2svh, 28px);
  }

  body[data-step="confirm"] .wizard-root,
  body[data-step="storiesConfirm"] .wizard-root {
    width: min(100% - 20px, 520px);
    height: auto;
    min-height: 0;
    margin: 0 auto;
    overflow: hidden;
  }

  body[data-step="confirm"] .page-title,
  body[data-step="storiesConfirm"] .page-title {
    margin-bottom: clamp(16px, 2.6svh, 22px);
    font-size: clamp(36px, 10vw, 44px);
    line-height: 0.96;
  }

  body[data-step="confirm"] .shorts-confirm-box,
  body[data-step="storiesConfirm"] .shorts-confirm-box {
    width: 100%;
    padding: clamp(20px, 5.5vw, 28px) clamp(26px, 7.2vw, 38px);
  }

  body[data-step="confirm"] .shorts-confirm-box .summary-line,
  body[data-step="storiesConfirm"] .shorts-confirm-box .summary-line {
    grid-template-columns: 1fr;
    gap: clamp(7px, 1.1svh, 10px);
    padding: clamp(10px, 1.75svh, 14px) 0;
  }

  body[data-step="confirm"] .shorts-confirm-box .summary-line:first-child,
  body[data-step="storiesConfirm"] .shorts-confirm-box .summary-line:first-child {
    padding-top: 0;
  }

  body[data-step="confirm"] .shorts-confirm-box .summary-line:last-child,
  body[data-step="storiesConfirm"] .shorts-confirm-box .summary-line:last-child {
    padding-bottom: 0;
  }

  body[data-step="confirm"] .shorts-confirm-box .summary-label,
  body[data-step="storiesConfirm"] .shorts-confirm-box .summary-label {
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.12em;
  }

  body[data-step="confirm"] .shorts-confirm-box .summary-value,
  body[data-step="storiesConfirm"] .shorts-confirm-box .summary-value {
    font-size: clamp(28px, 7.8vw, 36px);
    line-height: 0.98;
  }

  body[data-step="confirm"] .shorts-confirm-box .summary-line[data-summary-label="hook"] .summary-value,
  body[data-step="storiesConfirm"] .shorts-confirm-box .summary-line[data-summary-label="question"] .summary-value {
    max-width: none;
    font-size: clamp(25px, 6.8vw, 32px);
    line-height: 1.08;
  }

  body[data-step="confirm"] .final-check-note,
  body[data-step="storiesConfirm"] .final-check-note {
    width: 100%;
    gap: 16px;
    margin-top: clamp(12px, 2svh, 16px);
    padding: 14px 16px;
  }

  body[data-step="confirm"] .final-check-note-title,
  body[data-step="storiesConfirm"] .final-check-note-title {
    font-size: clamp(18px, 5vw, 22px);
  }

  body[data-step="confirm"] .final-check-note-body,
  body[data-step="storiesConfirm"] .final-check-note-body {
    font-size: clamp(12px, 3.5vw, 14px);
  }

  body[data-step="confirm"] .bottom-actions,
  body[data-step="storiesConfirm"] .bottom-actions {
    width: 100%;
    margin-top: clamp(14px, 2.4svh, 20px);
  }

  body[data-step="confirm"] .primary-action,
  body[data-step="storiesConfirm"] .primary-action {
    padding: 16px 24px;
  }

  body[data-step="storiesConfirm"] .wizard-shell {
    height: 100dvh;
    min-height: 100dvh;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + clamp(28px, 5.5svh, 50px));
  }

  body[data-step="storiesConfirm"] .wizard-topbar {
    margin-bottom: clamp(10px, 2svh, 16px);
  }

  body[data-step="storiesConfirm"] .page-title {
    margin-bottom: clamp(10px, 1.9svh, 15px);
    font-size: clamp(32px, 9vw, 40px);
  }

  body[data-step="storiesConfirm"] .stories-confirm-box {
    padding: clamp(14px, 3.8vw, 20px) clamp(20px, 5.6vw, 28px);
  }

  body[data-step="storiesConfirm"] .stories-confirm-box .summary-line {
    gap: 5px;
    padding: clamp(6px, 1.15svh, 9px) 0;
  }

  body[data-step="storiesConfirm"] .stories-confirm-box .summary-label {
    font-size: 10px;
  }

  body[data-step="storiesConfirm"] .stories-confirm-box .summary-value {
    font-size: clamp(23px, 6.45vw, 30px);
    line-height: 0.98;
  }

  body[data-step="storiesConfirm"] .stories-confirm-box .summary-line[data-summary-label="question"] .summary-value {
    display: -webkit-box;
    overflow: hidden;
    font-size: clamp(18px, 5.1vw, 24px);
    line-height: 1.04;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
  }

  body[data-step="storiesConfirm"] .stories-final-check-note {
    gap: 11px;
    margin-top: 8px;
    padding: 10px 12px;
  }

  body[data-step="storiesConfirm"] .stories-final-check-note .final-check-note-title {
    font-size: clamp(16px, 4.5vw, 20px);
  }

  body[data-step="storiesConfirm"] .stories-final-check-note .final-check-note-body {
    font-size: clamp(11px, 3.1vw, 13px);
    line-height: 1.25;
  }

  body[data-step="storiesConfirm"] .bottom-actions {
    margin-top: 8px;
  }

  body[data-step="storiesConfirm"] .primary-action {
    padding: 12px 20px;
    font-size: clamp(25px, 7.1vw, 31px);
  }

  body[data-step="final"] .wizard-shell,
  body[data-step="output"] .wizard-shell,
  body[data-step="storiesOutput"] .wizard-shell {
    display: flex;
    width: 100%;
    height: 100svh;
    min-height: 100svh;
    flex-direction: column;
    overflow: hidden;
    padding: calc(env(safe-area-inset-top, 0px) + 16px) 12px calc(env(safe-area-inset-bottom, 0px) + 16px);
  }

  body[data-step="final"] .wizard-topbar,
  body[data-step="output"] .wizard-topbar,
  body[data-step="storiesOutput"] .wizard-topbar {
    position: relative;
    z-index: 20;
    width: min(100% - 24px, 520px);
    flex: 0 0 auto;
    margin: 0 auto clamp(14px, 2.4svh, 20px);
  }

  body[data-step="final"] .wizard-root,
  body[data-step="output"] .wizard-root,
  body[data-step="storiesOutput"] .wizard-root {
    display: flex;
    width: min(100% - 20px, 520px);
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    margin: 0 auto;
  }

  body[data-step="final"] .page-title,
  body[data-step="output"] .page-title,
  body[data-step="storiesOutput"] .page-title {
    flex: 0 0 auto;
    margin-bottom: clamp(12px, 2svh, 18px);
    font-size: clamp(34px, 9.5vw, 42px);
    line-height: 0.96;
  }

  .final-mobile-screen {
    display: grid;
    min-height: 0;
    flex: 1 1 auto;
    grid-template-rows: auto minmax(0, 1fr) auto auto auto;
    gap: clamp(10px, 1.8svh, 14px);
  }

  .final-mobile-saved {
    display: grid;
    align-items: center;
    grid-template-columns: minmax(0, 1fr) auto auto minmax(0, 1fr);
    gap: 12px;
    color: #9a48ff;
    font-family: Arial, Helvetica, sans-serif;
  }

  .final-mobile-saved-rule {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(154, 72, 255, 0.92));
  }

  .final-mobile-saved-rule:last-child {
    background: linear-gradient(90deg, rgba(154, 72, 255, 0.92), transparent);
  }

  .final-mobile-saved-mark {
    display: block;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: #9a48ff;
    box-shadow: 0 0 18px rgba(133, 44, 255, 0.72);
  }

  .final-mobile-saved-mark::after {
    content: "";
    display: block;
    width: 9px;
    height: 5px;
    margin: 6px auto 0;
    border: solid #170526;
    border-width: 0 0 2px 2px;
    transform: rotate(-45deg);
  }

  .final-mobile-saved-text {
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.1em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .final-mobile-editor {
    display: grid;
    position: relative;
    min-height: 0;
    grid-template-rows: auto minmax(0, 1fr);
    border: 1px solid #9a48ff;
    background:
      linear-gradient(180deg, rgba(154, 72, 255, 0.08), transparent 28%),
      #050505;
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.08) inset,
      0 0 18px rgba(133, 44, 255, 0.42),
      0 0 46px rgba(133, 44, 255, 0.16);
    padding: clamp(16px, 4.2vw, 22px);
    overflow: hidden;
  }

  .final-mobile-editor-label {
    margin-bottom: 10px;
    color: #9a48ff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.12em;
    line-height: 1;
    text-transform: uppercase;
  }

  .final-mobile-editor .final-script {
    width: 100%;
    min-height: 0;
    height: 100%;
    border: 0;
    background: #000;
    color: var(--text);
    padding: 0 10px 18px 0;
    resize: none;
    outline: 0;
    overflow: auto;
    font-family: Arial, Helvetica, sans-serif;
    font-size: clamp(15px, 4vw, 17px);
    line-height: 1.48;
  }

  .final-mobile-editor .final-script:focus {
    outline: 0;
  }

  .final-mobile-editor .final-script::-webkit-scrollbar {
    width: 3px;
  }

  .final-mobile-editor .final-script::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.12);
  }

  .final-mobile-editor .final-script::-webkit-scrollbar-thumb {
    background: #9a48ff;
  }

  .final-mobile-editor-fade {
    position: absolute;
    right: 1px;
    bottom: 1px;
    left: 1px;
    height: 44px;
    background: linear-gradient(180deg, transparent, rgba(5, 5, 5, 0.94));
    pointer-events: none;
  }

  .final-mobile-controls {
    display: grid;
    flex-wrap: nowrap;
    gap: 8px;
    margin: 0;
  }

  .final-mobile-controls .select-control {
    position: relative;
    display: grid;
    min-width: 0;
    grid-template-columns: minmax(82px, auto) minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    border: 1px solid #9a48ff;
    background: rgba(8, 8, 8, 0.9);
    box-shadow: 0 0 16px rgba(133, 44, 255, 0.12);
    padding: 12px 36px 12px 16px;
  }

  .final-mobile-controls .select-control::after {
    content: "";
    position: absolute;
    right: 16px;
    width: 9px;
    height: 9px;
    border: solid rgba(255, 255, 255, 0.78);
    border-width: 1px 1px 0 0;
    transform: rotate(45deg);
    pointer-events: none;
  }

  .final-mobile-controls .select-label {
    color: #9a48ff;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.12em;
    line-height: 1;
  }

  .final-mobile-controls .control-select {
    min-width: 0;
    border: 0;
    background: transparent;
    color: var(--text);
    padding: 0;
    overflow: hidden;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(17px, 4.9vw, 21px);
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .final-mobile-actions {
    display: grid;
    flex: 0 0 auto;
    gap: 10px;
    margin-top: 0;
  }

  .final-mobile-actions .primary-action,
  .final-mobile-actions .secondary-action {
    width: 100%;
    min-width: 0;
  }

  .final-mobile-actions .primary-action {
    padding: 15px 24px;
    font-size: clamp(28px, 8vw, 34px);
  }

  .final-mobile-actions .preview-generate-action {
    font-size: clamp(21px, 6.2vw, 27px);
  }

  .final-mobile-actions .secondary-action {
    border-color: rgba(255, 255, 255, 0.74);
    background: transparent;
    color: var(--text);
    padding: 12px 18px;
    font-size: clamp(18px, 5.2vw, 22px);
  }

  body[data-step="final"] .generating-screen {
    width: 100%;
    min-height: 0;
    flex: 1 1 auto;
    justify-content: center;
    gap: clamp(15px, 2.6svh, 22px);
    padding: clamp(18px, 3svh, 28px) 0;
  }

  body[data-step="final"] .creation-wordmark {
    font-size: 96px;
  }

  body[data-step="final"] .render-stage-status {
    font-size: 12px;
    letter-spacing: 0;
  }

  body[data-step="final"] .render-stage-wrap {
    width: 100%;
    gap: clamp(11px, 2svh, 16px);
  }

  body[data-step="final"] .generating-note {
    max-width: 30ch;
    font-size: 10px;
  }

  .generating-actions {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 0;
  }

  .generating-actions .primary-action,
  .generating-actions .secondary-action {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 11px 12px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0;
  }

  .generating-actions .primary-action:only-child {
    grid-column: 1 / -1;
  }

  .generating-actions .primary-action {
    border-color: #9a48ff;
    background: transparent;
    color: #9a48ff;
    box-shadow: 0 0 18px rgba(133, 44, 255, 0.18);
  }

  .generating-actions .secondary-action {
    border-color: rgba(255, 255, 255, 0.74);
    background: transparent;
    color: var(--text);
  }

  body[data-step="output"] .wizard-root,
  body[data-step="storiesOutput"] .wizard-root {
    justify-content: flex-start;
  }

  body[data-step="output"] .output-screen {
    display: flex;
    width: 100%;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
  }

  body[data-step="output"] .output-box,
  body[data-step="storiesOutput"] .output-box {
    width: 100%;
    min-height: 0;
    flex: 1 1 auto;
    gap: clamp(7px, 1.2svh, 11px);
    align-content: start;
  }

  body[data-step="output"] .output-ready-banner,
  body[data-step="storiesOutput"] .output-ready-banner {
    width: 100%;
  }

  body[data-step="output"] .output-intro {
    gap: 2px;
  }

  body[data-step="output"] .output-intro-title {
    font-size: clamp(22px, 6.4vw, 27px);
  }

  body[data-step="output"] .output-media-frame {
    width: auto;
    max-width: 100%;
    height: clamp(218px, 36svh, 330px);
    aspect-ratio: 9 / 16;
    padding: 5px;
  }

  body[data-step="output"] .output-box video {
    width: 100%;
    height: 100%;
    max-height: none;
    aspect-ratio: auto;
    box-shadow: none;
  }

  body[data-step="storiesOutput"] .story-carousel-output img {
    width: min(70vw, 280px);
    max-height: clamp(320px, 49svh, 500px);
    border-color: #9a48ff;
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.08) inset,
      0 0 18px rgba(133, 44, 255, 0.34),
      0 0 46px rgba(133, 44, 255, 0.12);
  }

  body[data-step="output"] .download-link,
  body[data-step="storiesOutput"] .download-link {
    width: 100%;
    border-color: #9a48ff;
    background: var(--text);
    color: var(--bg);
    padding: 14px 18px;
    font-size: 14px;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
  }

  body[data-step="output"] .output-download {
    width: min(280px, 100%);
    min-height: 44px;
    padding: 12px 15px;
  }

  body[data-step="output"] .bottom-actions,
  body[data-step="storiesOutput"] .bottom-actions {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: clamp(7px, 1.2svh, 11px);
  }

  body[data-step="output"] .bottom-actions .primary-action,
  body[data-step="output"] .bottom-actions .secondary-action,
  body[data-step="storiesOutput"] .bottom-actions .primary-action,
  body[data-step="storiesOutput"] .bottom-actions .secondary-action {
    width: 100%;
    min-width: 0;
  }

  body[data-step="output"] .bottom-actions .primary-action,
  body[data-step="storiesOutput"] .bottom-actions .primary-action {
    border-color: #9a48ff;
    background: transparent;
    color: #b678ff;
    padding: 11px 12px;
    font-size: 11px;
  }

  body[data-step="output"] .bottom-actions .secondary-action,
  body[data-step="storiesOutput"] .bottom-actions .secondary-action {
    border-color: rgba(255, 255, 255, 0.74);
    background: transparent;
    color: var(--text);
    padding: 11px 12px;
    font-size: 11px;
  }

  body[data-step="inbox"] .wizard-shell {
    width: 100%;
    min-height: 100svh;
    padding: calc(env(safe-area-inset-top, 0px) + 16px) 12px calc(env(safe-area-inset-bottom, 0px) + 22px);
  }

  body[data-step="inbox"] .wizard-topbar {
    position: relative;
    z-index: 20;
    width: min(100% - 24px, 520px);
    margin: 0 auto clamp(14px, 2.4svh, 20px);
  }

  body[data-step="inbox"] .wizard-root {
    width: min(100% - 20px, 520px);
    margin: 0 auto;
  }

  body[data-step="inbox"] .page-title {
    margin-bottom: clamp(12px, 2svh, 18px);
    font-size: clamp(34px, 9.5vw, 42px);
    line-height: 0.96;
  }

  body[data-step="inbox"] .generation-summary,
  body[data-step="inbox"] .generation-list,
  body[data-step="inbox"] .generation-actions {
    width: 100%;
  }

  body[data-step="inbox"] .generation-summary {
    align-items: flex-start;
    margin-bottom: 12px;
    padding: 12px 2px;
  }

  body[data-step="inbox"] .generation-summary-primary {
    font-size: 12px;
    letter-spacing: 0;
  }

  body[data-step="inbox"] .generation-summary-secondary {
    max-width: 46%;
    font-size: 9px;
    letter-spacing: 0;
  }

  body[data-step="inbox"] .generation-list {
    gap: 12px;
  }

  body[data-step="inbox"] .generation-card {
    grid-template-columns: 68px minmax(0, 1fr);
    gap: 0;
    border-color: rgba(255, 255, 255, 0.26);
    padding: 0;
  }

  body[data-step="inbox"] .generation-card[data-status="ready"] {
    border-color: #9a48ff;
  }

  body[data-step="inbox"] .generation-card-mark {
    gap: 5px;
    padding: 12px 6px;
  }

  body[data-step="inbox"] .generation-card-mark-word {
    font-size: 20px;
  }

  body[data-step="inbox"] .generation-card-mark-type {
    font-size: 8px;
  }

  body[data-step="inbox"] .generation-card-copy {
    gap: 7px;
    padding: 13px 14px 11px;
  }

  body[data-step="inbox"] .generation-card-top {
    gap: 10px;
  }

  body[data-step="inbox"] .generation-status-pill {
    padding: 0;
    font-size: 9px;
    letter-spacing: 0;
  }

  body[data-step="inbox"] .generation-kind {
    font-size: 8px;
    letter-spacing: 0;
  }

  body[data-step="inbox"] .generation-title {
    font-size: 20px;
    line-height: 1.08;
  }

  body[data-step="inbox"] .generation-meta {
    font-size: 9px;
    letter-spacing: 0;
  }

  body[data-step="inbox"] .generation-snippet {
    display: -webkit-box;
    overflow: hidden;
    font-size: 11px;
    line-height: 1.36;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  body[data-step="inbox"] .generation-card .generation-action,
  body[data-step="inbox"] .generation-card .generation-pending {
    width: calc(100% - 28px);
    grid-column: 2;
    justify-self: stretch;
    margin: 0 14px 14px;
  }

  body[data-step="inbox"] .generation-action {
    min-width: 0;
    min-height: 42px;
    padding: 11px 12px;
    font-size: 10px;
  }

  body[data-step="inbox"] .generation-pending {
    border-color: #9a48ff;
    color: #9a48ff;
    text-align: center;
  }

  body[data-step="inbox"] .generation-empty {
    min-height: 180px;
  }

  body[data-step="inbox"] .generation-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 14px;
  }

  body[data-step="inbox"] .generation-actions .primary-action,
  body[data-step="inbox"] .generation-actions .secondary-action {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 11px 12px;
    font-size: 10px;
  }

  body[data-step="inbox"] .generation-actions .primary-action {
    grid-column: 1 / -1;
  }

  body[data-step="inbox"] .generation-actions .secondary-action {
    border-color: rgba(255, 255, 255, 0.74);
    background: transparent;
    color: var(--text);
  }

  body[data-step="mode"] .wizard-root {
    min-height: 100svh;
    overflow: hidden;
  }

  body[data-step="theme"] .wizard-root,
  body[data-step="format"] .wizard-root,
  body[data-step="background"] .wizard-root {
    min-height: 0;
    overflow: hidden;
  }

  .mode-screen {
    --mode-active-top: clamp(28px, 5svh, 42px);
    --mode-side-top: clamp(68px, 11.4svh, 98px);
    position: relative;
    height: 100svh;
    min-height: 100svh;
    justify-content: flex-start;
    overflow: hidden;
    padding: calc(env(safe-area-inset-top, 0px) + clamp(108px, 14svh, 132px)) 0 calc(env(safe-area-inset-bottom, 0px) + 14px);
  }

  .mode-brand {
    display: block;
    position: absolute;
    z-index: 11;
    top: calc(env(safe-area-inset-top, 0px) + 23px);
    left: clamp(20px, 6vw, 30px);
    max-width: calc(100vw - 190px);
    overflow: hidden;
    color: var(--text);
    font-size: 26px;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mode-account-button {
    display: inline-flex;
    position: absolute;
    z-index: 12;
    top: calc(env(safe-area-inset-top, 0px) + 23px);
    right: clamp(20px, 6vw, 30px);
    left: auto;
    width: auto;
    min-width: 112px;
    max-width: 142px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid rgba(255, 255, 255, 0.44);
    border-radius: 4px;
    background: #070707;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.025) inset;
    color: var(--text);
    padding: 7px 10px 7px 7px;
    cursor: pointer;
    overflow: hidden;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .mode-account-button .account-action-mark {
    width: 27px;
    height: 27px;
    flex-basis: 27px;
  }

  .mode-title {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .mode-grid {
    --mode-card-width: clamp(172px, min(62vw, 246px, calc((100svh - 316px) / 2)), 246px);
    --mode-preview-ratio: 9 / 16;
    --mode-side-offset: min(56vw, 230px);
    --mode-drag-x: 0px;
    display: block;
    position: relative;
    width: 100vw;
    height: clamp(404px, calc(100svh - 232px), 586px);
    margin-top: 0;
    outline: 0;
    overflow: hidden;
    touch-action: none;
  }

  .mode-card,
  .mode-card.primary,
  .mode-card:hover,
  .mode-card.primary:hover,
  .mode-card:focus-visible,
  .mode-card.primary:focus-visible {
    transform: translateX(-50%);
  }

  .mode-card.primary {
    order: 0;
  }

  .mode-card {
    position: absolute;
    top: var(--mode-active-top);
    left: 50%;
    z-index: 1;
    width: var(--mode-card-width);
    gap: clamp(7px, 1.35svh, 13px);
    opacity: 1;
    pointer-events: auto;
    transform-origin: center top;
    transition:
      transform 320ms cubic-bezier(0.18, 0.84, 0.22, 1),
      top 320ms cubic-bezier(0.18, 0.84, 0.22, 1),
      filter 220ms ease;
  }

  .mode-grid.is-dragging .mode-card,
  .mode-grid.is-inertial .mode-card {
    transition: none;
  }

  .mode-card.is-active,
  .mode-card.is-active:hover,
  .mode-card.is-active:focus-visible,
  .mode-card.primary.is-active:hover,
  .mode-card.primary.is-active:focus-visible {
    z-index: 3;
    opacity: 1;
    transform: translateX(calc(-50% + var(--mode-drag-x)));
  }

  .mode-card.is-left,
  .mode-card.is-left:hover,
  .mode-card.is-left:focus-visible,
  .mode-card.primary.is-left:hover,
  .mode-card.primary.is-left:focus-visible {
    top: var(--mode-side-top);
    opacity: 1;
    transform: translateX(calc(-50% - var(--mode-side-offset) + var(--mode-drag-x))) scale(0.66);
  }

  .mode-card.is-right,
  .mode-card.is-right:hover,
  .mode-card.is-right:focus-visible,
  .mode-card.primary.is-right:hover,
  .mode-card.primary.is-right:focus-visible {
    top: var(--mode-side-top);
    opacity: 1;
    transform: translateX(calc(-50% + var(--mode-side-offset) + var(--mode-drag-x))) scale(0.66);
  }

  .mode-card.is-left,
  .mode-card.is-right {
    filter: none;
  }

  .mode-card.is-active::before {
    content: none;
  }

  .mode-ready-label {
    display: block;
    position: absolute;
    z-index: 4;
    top: clamp(6px, 1.4svh, 10px);
    left: 50%;
    color: rgb(var(--mode-ready-rgb, 139, 61, 255));
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 0.18em;
    line-height: 1;
    text-transform: uppercase;
    transform: translateX(-50%);
    transition: color 240ms ease;
  }

  .mode-preview,
  .mode-card.primary .mode-preview {
    position: relative;
    width: 100%;
    height: auto;
    aspect-ratio: var(--mode-preview-ratio);
    border: 2px solid rgba(255, 255, 255, 0.38);
    background: #020202;
    border-radius: 8px;
    box-shadow: none;
    transition:
      border-color 280ms ease,
      box-shadow 280ms ease;
  }

  .mode-card.is-active .mode-preview,
  .mode-card.is-active.primary .mode-preview {
    border-color: #9a48ff;
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.12) inset,
      0 0 18px rgba(133, 44, 255, 0.7),
      0 0 46px rgba(133, 44, 255, 0.26);
  }

  .mode-card.primary.is-active .mode-preview {
    border-color: #9a48ff;
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.12) inset,
      0 0 18px rgba(133, 44, 255, 0.7),
      0 0 46px rgba(133, 44, 255, 0.26);
  }

  .mode-grid.is-dragging .mode-preview,
  .mode-grid.is-inertial .mode-preview {
    transition: none;
  }

  .mode-preview > .mode-preview-video {
    position: absolute;
    z-index: 1;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 6px;
    opacity: 1;
    filter: none;
  }

  .mode-card.is-active .mode-preview > .mode-preview-video {
    opacity: 1;
    filter: none;
  }

  .mode-card.is-left .mode-preview > .mode-preview-video,
  .mode-card.is-right .mode-preview > .mode-preview-video {
    opacity: 1;
    filter: grayscale(0.42) saturate(0.82) brightness(0.64);
  }

  .mode-preview-clip {
    object-position: 50% 50%;
  }

  .mode-lock-overlay {
    display: flex;
    position: absolute;
    z-index: 4;
    inset: 0;
    align-items: center;
    justify-content: center;
    opacity: 0.96;
  }

  .mode-preview-shell {
    display: none;
  }

  .mode-preview-window {
    display: none;
  }

  .mode-preview-word {
    display: none;
  }

  .mode-preview-rule {
    position: absolute;
    z-index: 3;
    left: 10%;
    height: 1px;
    background: rgba(255, 255, 255, 0.62);
  }

  .mode-preview-rule.primary-rule {
    bottom: 15.2%;
    width: 80%;
  }

  .mode-preview-rule.secondary-rule {
    bottom: 10.2%;
    left: 16%;
    width: 68%;
  }

  .mode-label,
  .mode-card.primary .mode-label {
    font-size: clamp(24px, 7.2vw, 36px);
    text-shadow: 0 0 12px rgba(255, 255, 255, 0.1);
  }

  .mode-card.is-active .mode-label,
  .mode-card.is-active.primary .mode-label {
    font-size: clamp(36px, 11.4vw, 50px);
  }

  .mode-card[data-mode-id="stories"].is-active .mode-label {
    font-size: clamp(34px, 10.2vw, 46px);
  }

  .mode-card.is-left .mode-copy,
  .mode-card.is-right .mode-copy {
    opacity: 0;
  }

  .mode-card.is-left .mode-subtitle,
  .mode-card.is-right .mode-subtitle {
    opacity: 0;
    transform: translateY(-5px);
  }

  .mode-copy {
    gap: 5px;
    opacity: 1;
    transform: translateY(0);
    transition:
      opacity 240ms ease,
      transform 240ms ease;
  }

  .mode-label,
  .mode-subtitle {
    transition:
      opacity 220ms ease,
      transform 220ms ease,
      font-size 280ms cubic-bezier(0.18, 0.84, 0.22, 1);
  }

  .mode-subtitle {
    font-size: 13px;
    letter-spacing: 0.1em;
  }

  .mode-mobile-controls {
    display: grid;
    width: min(58vw, 230px);
    gap: clamp(14px, 2.2svh, 18px);
    justify-items: center;
    margin-top: clamp(2px, 0.7svh, 8px);
  }

  .mode-start-button {
    position: relative;
    width: 100%;
    border: 0;
    background: rgb(var(--mode-cta-rgb, 129, 50, 255));
    color: #fff;
    padding: clamp(14px, 2.2svh, 18px) 20px;
    cursor: pointer;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 21px;
    font-weight: 900;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    min-height: 58px;
    overflow: hidden;
    box-shadow:
      0 0 24px rgba(129, 50, 255, 0.28),
      inset 0 0 0 1px rgba(255, 255, 255, 0.12);
    transition:
      background-color 240ms ease,
      box-shadow 240ms ease,
      transform 180ms ease;
  }

  .mode-start-button:active {
    transform: translateY(1px) scale(0.992);
  }

  .mode-start-label {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    white-space: nowrap;
    transform: translate(-50%, -50%);
    transition:
      opacity 180ms ease,
      transform 220ms ease;
  }

  .mode-start-label-info {
    font-size: clamp(16px, 4.6vw, 20px);
    letter-spacing: 0.14em;
    opacity: 0;
  }

  .mode-start-label-start {
    opacity: 1;
  }

  .mode-dots {
    display: flex;
    position: relative;
    justify-content: center;
    gap: 26px;
    isolation: isolate;
  }

  .mode-dot {
    position: relative;
    z-index: 1;
    width: 13px;
    height: 13px;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.32);
    padding: 0;
    cursor: pointer;
    transition:
      background 220ms ease,
      box-shadow 220ms ease;
  }

  .mode-grid.is-dragging .mode-label,
  .mode-grid.is-dragging .mode-subtitle,
  .mode-grid.is-dragging .mode-copy,
  .mode-grid.is-inertial .mode-label,
  .mode-grid.is-inertial .mode-subtitle,
  .mode-grid.is-inertial .mode-copy,
  .mode-grid.is-dragging ~ .mode-mobile-controls .mode-start-button,
  .mode-grid.is-dragging ~ .mode-mobile-controls .mode-start-label,
  .mode-grid.is-inertial ~ .mode-mobile-controls .mode-start-button,
  .mode-grid.is-inertial ~ .mode-mobile-controls .mode-start-label,
  .mode-grid.is-dragging ~ .mode-mobile-controls .mode-dot,
  .mode-grid.is-inertial ~ .mode-mobile-controls .mode-dot {
    transition: none;
  }

  .mode-dot.active {
    background: rgba(255, 255, 255, 0.32);
  }

  body[data-step="theme"] .page-title,
  body[data-step="background"] .page-title,
  body[data-step="script"] .page-title,
  body[data-step="storiesTheme"] .page-title,
  body[data-step="storiesQuestion"] .page-title {
    position: relative;
    z-index: 20;
    margin: clamp(4px, 0.9svh, 8px) 0 clamp(4px, 0.8svh, 8px);
    padding: 0 20px;
    font-size: clamp(26px, 6.6vw, 33px);
    line-height: 1;
    pointer-events: none;
  }

  body[data-step="format"] .page-title {
    position: relative;
    z-index: 20;
    margin: clamp(4px, 0.9svh, 8px) 0 clamp(4px, 0.8svh, 8px);
    padding: 0 20px;
    font-size: clamp(26px, 6.6vw, 33px);
    line-height: 1;
    pointer-events: none;
  }

  body[data-step="theme"] .theme-showcase,
  body[data-step="theme"] .theme-choice-row,
  body[data-step="storiesQuestion"] .story-carousel-option-grid,
  body[data-step="storiesQuestion"] .bottom-actions {
    display: none;
  }

  .theme-mobile-screen {
    display: flex;
    position: fixed;
    z-index: 2;
    inset: 0;
    width: 100%;
    height: 100svh;
    min-height: 100svh;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
    padding: calc(env(safe-area-inset-top, 0px) + clamp(108px, 14svh, 132px)) 0 calc(env(safe-area-inset-bottom, 0px) + 14px);
    pointer-events: none;
  }

  .theme-mobile-deck {
    --theme-card-shift-y: 38px;
    --theme-active-top: calc(clamp(28px, 5svh, 42px) + var(--theme-card-shift-y));
    --theme-side-top: calc(clamp(68px, 11.4svh, 98px) + var(--theme-card-shift-y));
    --theme-card-width: clamp(184px, min(68vw, 272px, calc((100svh - 280px) / 2)), 272px);
    --theme-side-offset: min(56vw, 230px);
    display: block;
    position: relative;
    width: 100vw;
    height: clamp(404px, calc(100svh - 232px), 586px);
    outline: 0;
    overflow: visible;
    touch-action: none;
    pointer-events: auto;
  }

  .theme-mobile-ready {
    position: absolute;
    z-index: 4;
    top: clamp(6px, 1.4svh, 10px);
    left: 50%;
    color: rgb(var(--mode-ready-rgb, 139, 61, 255));
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 0.18em;
    line-height: 1;
    text-transform: uppercase;
    transform: translateX(-50%);
  }

  .theme-mobile-card,
  .theme-mobile-card:hover,
  .theme-mobile-card:focus-visible {
    position: absolute;
    top: var(--theme-active-top);
    left: 50%;
    z-index: 1;
    display: grid;
    width: var(--theme-card-width);
    gap: clamp(7px, 1.35svh, 13px);
    border: 0;
    background: transparent;
    color: var(--text);
    padding: 0;
    cursor: pointer;
    outline: 0;
    text-align: center;
    transform: translateX(-50%);
    transform-origin: center top;
    transition:
      transform 320ms cubic-bezier(0.18, 0.84, 0.22, 1),
      top 320ms cubic-bezier(0.18, 0.84, 0.22, 1),
      filter 220ms ease;
  }

  .theme-mobile-deck.is-dragging .theme-mobile-card,
  .theme-mobile-deck.is-inertial .theme-mobile-card {
    transition: none;
  }

  .theme-mobile-card.is-active,
  .theme-mobile-card.is-active:hover,
  .theme-mobile-card.is-active:focus-visible {
    z-index: 3;
    transform: translateX(calc(-50% + var(--theme-drag-x, 0px)));
  }

  .theme-mobile-card.is-left,
  .theme-mobile-card.is-left:hover,
  .theme-mobile-card.is-left:focus-visible {
    top: var(--theme-side-top);
    transform: translateX(calc(-50% - var(--theme-side-offset) + var(--theme-drag-x, 0px))) scale(0.66);
  }

  .theme-mobile-card.is-right,
  .theme-mobile-card.is-right:hover,
  .theme-mobile-card.is-right:focus-visible {
    top: var(--theme-side-top);
    transform: translateX(calc(-50% + var(--theme-side-offset) + var(--theme-drag-x, 0px))) scale(0.66);
  }

  .theme-mobile-preview {
    position: relative;
    width: 100%;
    aspect-ratio: 9 / 16;
    border: 2px solid rgba(255, 255, 255, 0.38);
    border-radius: 8px;
    background: #020202;
    box-shadow: none;
    overflow: hidden;
    transition:
      border-color 280ms ease,
      box-shadow 280ms ease;
    pointer-events: none;
  }

  .theme-mobile-card.is-active .theme-mobile-preview {
    border-color: #9a48ff;
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.12) inset,
      0 0 18px rgba(133, 44, 255, 0.7),
      0 0 46px rgba(133, 44, 255, 0.26);
  }

  .theme-mobile-deck.is-dragging .theme-mobile-preview,
  .theme-mobile-deck.is-inertial .theme-mobile-preview {
    transition: none;
  }

  .theme-mobile-video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
  }

  .theme-mobile-copy {
    display: grid;
    gap: 5px;
    opacity: 1;
    transform: translateY(0);
    transition:
      opacity 220ms ease,
      transform 220ms ease;
  }

  .theme-mobile-card.is-left .theme-mobile-copy,
  .theme-mobile-card.is-right .theme-mobile-copy {
    opacity: 0;
    transform: translateY(-5px);
  }

  .theme-mobile-label {
    color: var(--text);
    font-size: clamp(36px, 11.4vw, 50px);
    line-height: 0.92;
    text-transform: uppercase;
    text-shadow: 0 0 12px rgba(255, 255, 255, 0.1);
  }

  .theme-mobile-subtitle {
    display: none;
  }

  body[data-step="background"] .background-grid {
    display: none;
  }

  .background-mobile-deck {
    --theme-card-width: clamp(194px, min(70vw, 276px, calc((100svh - 280px) / 2)), 276px);
  }

  .background-mobile-card.is-far {
    top: var(--theme-side-top);
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) scale(0.52);
  }

  .background-mobile-preview {
    border-color: rgba(255, 255, 255, 0.42);
    background: #020202;
  }

  .background-mobile-preview img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .background-mobile-blank {
    position: absolute;
    inset: 0;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 22%, rgba(255, 255, 255, 0.025)),
      #020202;
  }

  .background-mobile-card.is-active .background-mobile-preview {
    border-color: #9a48ff;
  }

  .background-mobile-label {
    font-size: clamp(26px, 7.8vw, 36px);
    line-height: 1;
  }

  .background-mobile-dots {
    gap: 18px;
  }

  .format-mobile-preview .format-preview-panel {
    position: absolute;
    inset: 0;
    padding: 0;
  }

  .format-mobile-preview .format-preview-cycle {
    padding: 0;
  }

  .format-mobile-preview .format-preview-card {
    margin: 0 auto;
    transform: translateY(18px) scale(0.985);
  }

  .format-mobile-preview .format-preview-real-card-image {
    filter: drop-shadow(0 16px 30px rgba(0, 0, 0, 0.44));
  }

  .format-mobile-preview .format-preview-cycle-card.is-active {
    transform: translateY(0) scale(1);
  }

  .format-mobile-preview .format-preview-question {
    font-size: clamp(16px, 4.4vw, 22px);
  }

  .format-mobile-preview .format-preview-hook {
    font-size: clamp(19px, 5vw, 25px);
  }

  .format-mobile-preview .format-preview-normal-card {
    padding: clamp(12px, 3.4vw, 17px);
  }

  .format-mobile-preview .format-preview-noise {
    opacity: 0.36;
  }

  .format-mobile-label {
    font-size: clamp(30px, 8.6vw, 42px);
  }

  body[data-step="script"] .script-list,
  body[data-step="script"] .script-actions,
  body[data-step="script"] .bottom-actions {
    display: none;
  }

  body[data-step="script"] .custom-script-box {
    width: min(100% - 32px, 520px);
    gap: clamp(10px, 1.8svh, 16px);
    padding: clamp(14px, 2.5svh, 20px);
  }

  body[data-step="script"] .custom-title {
    min-height: 48px;
    padding: 12px;
    font-size: clamp(19px, 5.8vw, 25px);
  }

  body[data-step="script"] .custom-text {
    min-height: clamp(224px, 39svh, 340px);
    padding: 13px;
    resize: none;
    font-size: 16px;
  }

  body[data-step="script"] .script-actions.custom-script-actions {
    display: grid;
    width: min(100% - 32px, 520px);
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
    margin-top: clamp(12px, 2svh, 18px);
  }

  body[data-step="script"] .custom-script-actions .secondary-action,
  body[data-step="script"] .custom-script-actions .primary-action {
    width: 100%;
    min-width: 0;
    min-height: 48px;
    padding: 11px 8px;
    font-size: clamp(12px, 3.5vw, 15px);
  }

  .script-mobile-deck {
    --theme-card-width: clamp(202px, min(72vw, 288px, calc((100svh - 274px) / 2)), 288px);
  }

  .script-mobile-ready {
    letter-spacing: 0.16em;
  }

  .script-mobile-preview {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01)),
      radial-gradient(circle at 50% 4%, rgba(154, 72, 255, 0.2), transparent 34%),
      #060606;
  }

  .script-mobile-card-content {
    display: grid;
    height: 100%;
    align-content: start;
    gap: clamp(9px, 1.65svh, 14px);
    padding: clamp(18px, 5vw, 26px);
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    text-align: left;
    transition: filter 220ms ease;
  }

  .script-mobile-kicker,
  .script-mobile-mini-label,
  .script-mobile-meta {
    color: #a8a8a8;
    font-size: clamp(9px, 2.5vw, 11px);
    font-weight: 900;
    letter-spacing: 0.1em;
    line-height: 1.2;
    text-transform: uppercase;
  }

  .script-mobile-hook {
    color: #fff;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(24px, 6.8vw, 34px);
    line-height: 0.98;
  }

  .script-mobile-preview.prebuilt-question-only .script-mobile-card-content {
    align-content: center;
    gap: 18px;
  }

  .script-mobile-preview.prebuilt-question-only .script-mobile-kicker {
    color: #9a48ff;
  }

  .script-mobile-preview.prebuilt-question-only .script-mobile-hook {
    line-height: 1.04;
  }

  .script-mobile-card.is-locked {
    cursor: not-allowed;
  }

  .script-mobile-preview.custom-blank-script {
    background:
      linear-gradient(180deg, rgba(154, 72, 255, 0.08), rgba(255, 255, 255, 0.012)),
      #050505;
  }

  .custom-blank-script-content {
    align-content: start;
  }

  .custom-blank-script-content .script-mobile-kicker {
    color: #9a48ff;
  }

  .script-mobile-blank-lines {
    display: grid;
    gap: clamp(15px, 2.5svh, 23px);
    padding-top: clamp(18px, 3svh, 28px);
  }

  .script-mobile-blank-line {
    display: block;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, rgba(154, 72, 255, 0.62), rgba(154, 72, 255, 0.12));
  }

  .script-mobile-blank-line:nth-child(3n) {
    width: 74%;
  }

  .script-lock-overlay {
    background: rgba(0, 0, 0, 0.38);
  }

  .script-lock-overlay .mode-lock-icon {
    width: min(31%, 88px);
  }

  .script-mobile-rule {
    width: 100%;
    height: 1px;
    margin: clamp(4px, 1svh, 8px) 0;
    background: rgba(255, 255, 255, 0.32);
  }

  .script-mobile-snippet {
    display: -webkit-box;
    color: #d8d8d8;
    overflow: hidden;
    font-size: clamp(13px, 3.55vw, 16px);
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1.34;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 8;
  }

  .script-mobile-meta {
    align-self: end;
    margin-top: auto;
    color: #d0d0d0;
  }

  .script-mobile-label {
    font-size: clamp(31px, 9vw, 42px);
  }

  .script-mobile-custom {
    border: 1px solid rgba(255, 255, 255, 0.58);
    background: rgba(0, 0, 0, 0.28);
    color: var(--text);
    padding: 10px 18px;
    cursor: pointer;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  .script-mobile-custom-spacer {
    display: block;
    width: 1px;
    height: 38px;
  }

  .script-mobile-unlock-note {
    display: grid;
    width: 100%;
    min-height: 24px;
    place-items: center;
    color: #9a48ff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1.25;
    text-align: center;
    text-transform: uppercase;
    text-shadow: 0 0 12px rgba(133, 44, 255, 0.5);
  }

  .stories-theme-mobile-deck {
    --theme-card-width: clamp(184px, min(68vw, 272px, calc((100svh - 280px) / 2)), 272px);
  }

  .live-mobile-paywall {
    display: grid;
    width: 100%;
    min-height: 0;
    flex: 1 1 auto;
    align-content: center;
    grid-template-rows: auto auto auto auto;
    gap: clamp(6px, 1svh, 8px);
    justify-items: center;
  }

  .live-mobile-paywall-preview-wrap {
    display: grid;
    min-height: 0;
    place-items: center;
  }

  .live-mobile-paywall .live-sales-preview {
    width: min(36.5vw, 142px);
    height: auto;
    max-height: 100%;
    aspect-ratio: 9 / 16;
    border-color: #9a48ff;
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.08) inset,
      0 0 18px rgba(133, 44, 255, 0.4),
      0 0 46px rgba(133, 44, 255, 0.13);
  }

  .live-mobile-paywall-copy {
    display: grid;
    max-width: 34ch;
    gap: 4px;
    text-align: center;
  }

  .live-mobile-paywall-kicker {
    color: #9a48ff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.13em;
    line-height: 1;
    text-transform: uppercase;
  }

  .live-mobile-paywall-heading {
    max-width: 15ch;
    margin: 0;
    color: var(--text);
    font-size: clamp(23px, 6.7vw, 29px);
    font-weight: 500;
    line-height: 0.94;
    text-transform: uppercase;
  }

  .live-mobile-paywall-text {
    margin: 0;
    color: #d8d8d8;
    font-family: Arial, Helvetica, sans-serif;
    font-size: clamp(10px, 2.9vw, 12px);
    font-weight: 800;
    line-height: 1.26;
  }

  .live-mobile-paywall-points {
    display: grid;
    width: 100%;
    gap: 5px;
  }

  .live-mobile-paywall-point {
    display: grid;
    align-items: center;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px;
    border: 1px solid rgba(154, 72, 255, 0.5);
    background:
      linear-gradient(90deg, rgba(154, 72, 255, 0.14), rgba(154, 72, 255, 0.03)),
      #050505;
    padding: 6px 9px;
  }

  .live-mobile-paywall-point-mark {
    display: block;
    width: 11px;
    height: 11px;
    background: #9a48ff;
    box-shadow: 0 0 13px rgba(133, 44, 255, 0.6);
    transform: rotate(45deg);
  }

  .live-mobile-paywall-point-copy {
    display: grid;
    min-width: 0;
    gap: 2px;
    font-family: Arial, Helvetica, sans-serif;
    text-align: left;
  }

  .live-mobile-paywall-point-label {
    color: #9a48ff;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.11em;
    line-height: 1;
    text-transform: uppercase;
  }

  .live-mobile-paywall-point-text {
    color: #e8e8e8;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.2;
  }

  .live-mobile-paywall-actions {
    display: grid;
    width: 100%;
    align-items: start;
    gap: 5px;
    justify-items: center;
  }

  .live-mobile-paywall-actions .primary-action {
    width: 100%;
    min-width: 0;
  }

  .live-mobile-paywall-actions .live-mobile-paywall-cta {
    border-color: #c49cff;
    background: #7f39ff;
    color: #fff;
    min-height: 0;
    padding: 10px 16px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: clamp(14px, 3.9vw, 15px);
    font-weight: 900;
    letter-spacing: 0.06em;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
  }

  .live-mobile-paywall-activate,
  .stories-mobile-paywall-activate {
    font-size: 9px;
    line-height: 1.1;
  }

  .live-mobile-paywall-actions .checkout-identity-note,
  .stories-mobile-paywall-actions .checkout-identity-note {
    max-width: 43ch;
    color: #a8a8a8;
    font-size: 8px;
    line-height: 1.22;
    text-align: center;
  }

  .stories-mobile-paywall {
    display: grid;
    width: 100%;
    min-height: 0;
    flex: 1 1 auto;
    align-content: center;
    grid-template-rows: auto auto auto auto;
    gap: clamp(6px, 1svh, 8px);
    justify-items: center;
  }

  .stories-mobile-paywall-preview-wrap {
    display: grid;
    min-height: 0;
    place-items: center;
  }

  .stories-mobile-paywall .stories-sales-preview {
    width: min(36.5vw, 142px);
    height: auto;
    max-height: 100%;
    aspect-ratio: 9 / 16;
    border-color: #9a48ff;
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.08) inset,
      0 0 18px rgba(133, 44, 255, 0.4),
      0 0 46px rgba(133, 44, 255, 0.13);
  }

  .stories-mobile-paywall .stories-sales-panel {
    padding: 10px 8px;
  }

  .stories-mobile-paywall .stories-sales-replies-panel {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .stories-mobile-paywall .stories-sales-card {
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.38);
  }

  .stories-mobile-paywall .stories-sales-reddit-header {
    grid-template-columns: 24px 1fr;
    gap: 6px;
    margin-bottom: 5px;
  }

  .stories-mobile-paywall .stories-sales-response-header {
    grid-template-columns: 20px 1fr auto;
    gap: 5px;
    margin-bottom: 5px;
  }

  .stories-mobile-paywall .stories-sales-avatar-ask {
    width: 24px;
    height: 24px;
  }

  .stories-mobile-paywall .stories-sales-avatar-1,
  .stories-mobile-paywall .stories-sales-avatar-2,
  .stories-mobile-paywall .stories-sales-avatar-3 {
    width: 20px;
    height: 20px;
  }

  .stories-mobile-paywall .stories-sales-subreddit {
    font-size: 10px;
  }

  .stories-mobile-paywall .stories-sales-user,
  .stories-mobile-paywall .stories-sales-commenter,
  .stories-mobile-paywall .stories-sales-age {
    font-size: 8px;
  }

  .stories-mobile-paywall .stories-sales-question {
    font-size: clamp(11px, 3vw, 14px);
    line-height: 1.06;
  }

  .stories-mobile-paywall .stories-sales-response-text {
    font-size: clamp(9px, 2.5vw, 12px);
    line-height: 1.16;
  }

  .stories-mobile-paywall .stories-sales-stats {
    gap: 8px;
    margin-top: 5px;
    font-size: 8px;
  }

  .stories-mobile-paywall .stories-sales-stats span::before {
    width: 8px;
    height: 8px;
    margin-right: 4px;
    border-width: 1px;
  }

  .stories-mobile-paywall-copy {
    display: grid;
    max-width: 34ch;
    gap: 4px;
    text-align: center;
  }

  .stories-mobile-paywall-kicker {
    color: #9a48ff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.13em;
    line-height: 1;
    text-transform: uppercase;
  }

  .stories-mobile-paywall-heading {
    margin: 0;
    color: var(--text);
    font-size: clamp(23px, 6.7vw, 29px);
    font-weight: 500;
    line-height: 0.94;
    text-transform: uppercase;
  }

  .stories-mobile-paywall-text {
    margin: 0;
    color: #d8d8d8;
    font-family: Arial, Helvetica, sans-serif;
    font-size: clamp(10px, 2.9vw, 12px);
    font-weight: 800;
    line-height: 1.26;
  }

  .stories-mobile-paywall-points {
    display: grid;
    width: 100%;
    gap: 5px;
  }

  .stories-mobile-paywall-point {
    display: grid;
    align-items: center;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px;
    border: 1px solid rgba(154, 72, 255, 0.5);
    background:
      linear-gradient(90deg, rgba(154, 72, 255, 0.14), rgba(154, 72, 255, 0.03)),
      #050505;
    padding: 6px 9px;
  }

  .stories-mobile-paywall-point-mark {
    display: block;
    width: 11px;
    height: 11px;
    background: #9a48ff;
    box-shadow: 0 0 13px rgba(133, 44, 255, 0.6);
    transform: rotate(45deg);
  }

  .stories-mobile-paywall-point-copy {
    display: grid;
    min-width: 0;
    gap: 2px;
    font-family: Arial, Helvetica, sans-serif;
    text-align: left;
  }

  .stories-mobile-paywall-point-label {
    color: #9a48ff;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.11em;
    line-height: 1;
    text-transform: uppercase;
  }

  .stories-mobile-paywall-point-text {
    color: #e8e8e8;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.2;
  }

  .stories-mobile-paywall-actions {
    display: grid;
    width: 100%;
    align-items: start;
    gap: 5px;
    justify-items: center;
  }

  .stories-mobile-paywall-actions .primary-action,
  .stories-mobile-paywall-actions .secondary-action {
    width: 100%;
    min-width: 0;
  }

  .stories-mobile-paywall-actions .stories-mobile-paywall-cta {
    border-color: #c49cff;
    background: #7f39ff;
    color: #fff;
    min-height: 0;
    padding: 10px 16px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: clamp(14px, 3.9vw, 15px);
    font-weight: 900;
    letter-spacing: 0.06em;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
  }

  .stories-mobile-paywall-back {
    padding: 10px 16px;
    font-size: clamp(17px, 4.8vw, 21px);
  }

  .stories-theme-mobile-label {
    font-size: clamp(36px, 11.4vw, 50px);
  }

  .stories-theme-preview {
    background: #020202;
  }

  .stories-theme-preview-video {
    filter: saturate(0.88) contrast(1.08) brightness(0.72);
  }

  .stories-theme-preview-scrim {
    position: absolute;
    inset: 0;
    background:
      linear-gradient(180deg, rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0.1) 34%, rgba(0, 0, 0, 0.74)),
      radial-gradient(circle at 50% 72%, rgba(154, 72, 255, 0.22), transparent 40%);
    pointer-events: none;
  }

  .stories-theme-question-stack {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: end center;
    padding: clamp(12px, 3.4vw, 17px);
    pointer-events: none;
  }

  .stories-theme-question-card {
    display: grid;
    position: absolute;
    right: clamp(12px, 3.4vw, 17px);
    bottom: clamp(14px, 3.8vw, 20px);
    left: clamp(12px, 3.4vw, 17px);
    gap: clamp(7px, 1.25svh, 10px);
    border: 1px solid rgba(154, 72, 255, 0.72);
    background:
      linear-gradient(180deg, rgba(19, 8, 30, 0.92), rgba(2, 2, 3, 0.9)),
      rgba(0, 0, 0, 0.72);
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.1) inset,
      0 0 24px rgba(133, 44, 255, 0.26);
    padding: clamp(13px, 3.8vw, 18px);
    color: var(--text);
    opacity: 0;
    transform: translateY(12px) scale(0.98);
    animation: storiesThemeQuestionCycle 9s infinite;
    animation-delay: var(--stories-theme-card-delay, 0s);
    text-align: left;
  }

  .theme-mobile-card.is-left .stories-theme-question-card,
  .theme-mobile-card.is-right .stories-theme-question-card {
    animation-play-state: paused;
  }

  .stories-theme-question-kicker {
    color: #9a48ff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: clamp(8px, 2.2vw, 10px);
    font-weight: 900;
    letter-spacing: 0.11em;
    line-height: 1.1;
    text-transform: uppercase;
  }

  .stories-theme-question-text {
    display: -webkit-box;
    color: #fff;
    overflow: hidden;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(18px, 5.1vw, 25px);
    line-height: 1;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
  }

  @keyframes storiesThemeQuestionCycle {
    0%,
    30% {
      opacity: 1;
      transform: translateY(0) scale(1);
    }

    37%,
    100% {
      opacity: 0;
      transform: translateY(-8px) scale(0.985);
    }
  }

  .story-carousel-mobile-deck {
    --theme-card-width: clamp(202px, min(72vw, 288px, calc((100svh - 274px) / 2)), 288px);
  }

  .story-carousel-mobile-ready {
    letter-spacing: 0.16em;
  }

  .story-carousel-mobile-preview {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01)),
      radial-gradient(circle at 50% 5%, rgba(154, 72, 255, 0.22), transparent 36%),
      #060606;
  }

  .story-carousel-mobile-card-content {
    display: grid;
    height: 100%;
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    gap: clamp(11px, 1.9svh, 16px);
    padding: clamp(18px, 5vw, 25px);
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    text-align: left;
  }

  .story-carousel-mobile-kicker,
  .story-carousel-mobile-meta {
    color: #a8a8a8;
    font-size: clamp(9px, 2.5vw, 11px);
    font-weight: 900;
    letter-spacing: 0.1em;
    line-height: 1.2;
    text-transform: uppercase;
  }

  .story-carousel-mobile-question {
    display: -webkit-box;
    align-self: start;
    color: #fff;
    overflow: hidden;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(24px, 6.9vw, 35px);
    line-height: 0.96;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 10;
  }

  .story-carousel-mobile-rule {
    width: 100%;
    height: 1px;
    margin: clamp(4px, 1svh, 8px) 0;
    background: rgba(154, 72, 255, 0.72);
  }

  .story-carousel-mobile-meta {
    align-self: end;
    margin-top: auto;
    color: #d0d0d0;
  }

  .story-carousel-mobile-label {
    font-size: clamp(28px, 8.2vw, 38px);
  }

  .story-carousel-mobile-randomize {
    border: 1px solid rgba(255, 255, 255, 0.58);
    background: rgba(0, 0, 0, 0.28);
    color: var(--text);
    padding: 10px 18px;
    cursor: pointer;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  .story-carousel-mobile-dots {
    gap: 18px;
  }

  .theme-mobile-controls {
    display: grid;
    width: min(58vw, 230px);
    gap: clamp(14px, 2.2svh, 18px);
    justify-items: center;
    margin-top: clamp(2px, 0.7svh, 8px);
    pointer-events: auto;
  }

  .theme-mobile-cta-spacer {
    width: 100%;
    min-height: 58px;
    pointer-events: none;
  }

  .theme-mobile-dots {
    display: flex;
    justify-content: center;
    gap: 26px;
    margin-top: 0;
  }

  .theme-mobile-dot {
    width: 13px;
    height: 13px;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.32);
    padding: 0;
    cursor: pointer;
    transition:
      background 220ms ease,
      box-shadow 220ms ease;
  }

  .theme-mobile-dot.active {
    background: rgba(129, 50, 255, 1);
    box-shadow: 0 0 16px rgba(133, 44, 255, 0.74);
  }

  .theme-mobile-deck.is-dragging ~ .theme-mobile-dots .theme-mobile-dot,
  .theme-mobile-deck.is-inertial ~ .theme-mobile-dots .theme-mobile-dot {
    transition: none;
  }

  .mode-instruction {
    display: none;
  }

  @media (max-height: 740px) {
    .mode-screen {
      --mode-active-top: clamp(24px, 4.4svh, 34px);
      --mode-side-top: clamp(60px, 10.2svh, 78px);
      padding-top: calc(env(safe-area-inset-top, 0px) + clamp(88px, 12.7svh, 102px));
    }

    .mode-grid {
      --mode-card-width: min(50vw, 172px);
      --mode-side-offset: min(57vw, 214px);
      height: clamp(374px, calc(100svh - 216px), 462px);
    }

    .mode-card {
      gap: 7px;
    }

    .mode-card.is-active .mode-label,
    .mode-card.is-active.primary .mode-label {
      font-size: clamp(32px, 10vw, 40px);
    }

    .mode-card[data-mode-id="stories"].is-active .mode-label {
      font-size: clamp(30px, 9.2vw, 38px);
    }

    .mode-subtitle {
      font-size: 11px;
    }

    .mode-mobile-controls {
      width: min(62vw, 230px);
      gap: 14px;
      margin-top: 0;
    }

    .mode-start-button {
      padding: 13px 18px;
      font-size: 19px;
    }

    .mode-dot {
      width: 12px;
      height: 12px;
    }

    body[data-step="theme"] .wizard-shell,
    body[data-step="format"] .wizard-shell,
    body[data-step="background"] .wizard-shell,
    body[data-step="script"] .wizard-shell,
    body[data-step="storiesTheme"] .wizard-shell,
    body[data-step="storiesQuestion"] .wizard-shell {
      padding-top: calc(env(safe-area-inset-top, 0px) + 10px);
    }

    body[data-step="theme"] .page-title,
    body[data-step="background"] .page-title,
    body[data-step="script"] .page-title,
    body[data-step="storiesTheme"] .page-title,
    body[data-step="storiesQuestion"] .page-title {
      margin: 4px 0 4px;
      font-size: clamp(24px, 6.8vw, 30px);
    }

    body[data-step="format"] .page-title {
      margin: 4px 0 4px;
      font-size: clamp(24px, 6.8vw, 30px);
    }

    body[data-step="confirm"] .wizard-shell,
    body[data-step="storiesConfirm"] .wizard-shell {
      padding: calc(env(safe-area-inset-top, 0px) + 8px) 10px calc(env(safe-area-inset-bottom, 0px) + 8px);
    }

    body[data-step="confirm"] .wizard-topbar,
    body[data-step="storiesConfirm"] .wizard-topbar {
      margin-bottom: 8px;
    }

    body[data-step="confirm"] .page-title,
    body[data-step="storiesConfirm"] .page-title {
      margin-bottom: 8px;
      font-size: clamp(28px, 8.2vw, 34px);
    }

    body[data-step="confirm"] .shorts-confirm-box,
    body[data-step="storiesConfirm"] .shorts-confirm-box {
      padding: 12px 18px;
    }

    body[data-step="confirm"] .shorts-confirm-box .summary-line,
    body[data-step="storiesConfirm"] .shorts-confirm-box .summary-line {
      gap: 4px;
      padding: 6px 0;
    }

    body[data-step="confirm"] .shorts-confirm-box .summary-label,
    body[data-step="storiesConfirm"] .shorts-confirm-box .summary-label {
      font-size: 10px;
    }

    body[data-step="confirm"] .shorts-confirm-box .summary-value,
    body[data-step="storiesConfirm"] .shorts-confirm-box .summary-value {
      font-size: clamp(22px, 6.5vw, 28px);
    }

    body[data-step="confirm"] .shorts-confirm-box .summary-line[data-summary-label="hook"] .summary-value,
    body[data-step="storiesConfirm"] .shorts-confirm-box .summary-line[data-summary-label="question"] .summary-value {
      font-size: clamp(19px, 5.7vw, 25px);
      line-height: 1.04;
    }

    body[data-step="confirm"] .final-check-note,
    body[data-step="storiesConfirm"] .final-check-note {
      gap: 10px;
      margin-top: 8px;
      padding: 9px 11px;
    }

    body[data-step="confirm"] .final-check-note-mark,
    body[data-step="storiesConfirm"] .final-check-note-mark {
      width: 14px;
      height: 14px;
    }

    body[data-step="confirm"] .final-check-note-copy,
    body[data-step="storiesConfirm"] .final-check-note-copy {
      gap: 2px;
    }

    body[data-step="confirm"] .final-check-note-title,
    body[data-step="storiesConfirm"] .final-check-note-title {
      font-size: 16px;
    }

    body[data-step="confirm"] .final-check-note-body,
    body[data-step="storiesConfirm"] .final-check-note-body {
      font-size: 11px;
      line-height: 1.25;
    }

    body[data-step="confirm"] .bottom-actions,
    body[data-step="storiesConfirm"] .bottom-actions {
      margin-top: 8px;
    }

    body[data-step="confirm"] .primary-action,
    body[data-step="storiesConfirm"] .primary-action {
      padding: 10px 18px;
      font-size: 24px;
    }

    body[data-step="storiesConfirm"] .wizard-shell {
      padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 34px);
    }

    body[data-step="storiesConfirm"] .stories-confirm-box {
      padding: 10px 16px;
    }

    body[data-step="storiesConfirm"] .stories-confirm-box .summary-line {
      padding: 5px 0;
    }

    body[data-step="storiesConfirm"] .stories-confirm-box .summary-value {
      font-size: clamp(20px, 5.9vw, 25px);
    }

    body[data-step="storiesConfirm"] .stories-confirm-box .summary-line[data-summary-label="question"] .summary-value {
      font-size: clamp(17px, 5vw, 22px);
      -webkit-line-clamp: 4;
    }

    body[data-step="storiesConfirm"] .stories-final-check-note {
      margin-top: 6px;
      padding: 8px 10px;
    }

    body[data-step="storiesConfirm"] .bottom-actions {
      margin-top: 6px;
    }

    body[data-step="storiesConfirm"] .primary-action {
      padding: 9px 16px;
      font-size: 22px;
    }

    body[data-step="liveApp"][data-live-variant="paywall"] .wizard-shell {
      padding: calc(env(safe-area-inset-top, 0px) + 8px) 10px calc(env(safe-area-inset-bottom, 0px) + 8px);
    }

    body[data-step="liveApp"][data-live-variant="paywall"] .wizard-topbar {
      margin-bottom: 6px;
    }

    body[data-step="liveApp"][data-live-variant="paywall"] .page-title {
      margin-bottom: 6px;
      font-size: clamp(28px, 8.2vw, 34px);
    }

    .live-mobile-paywall {
      grid-template-rows: auto auto auto auto;
      gap: 6px;
    }

    .live-mobile-paywall .live-sales-preview {
      width: min(37vw, 142px);
    }

    .live-mobile-paywall-heading {
      font-size: clamp(22px, 6.3vw, 27px);
    }

    .live-mobile-paywall-text {
      font-size: 10px;
      line-height: 1.22;
    }

    .live-mobile-paywall-point {
      gap: 8px;
      padding: 6px 9px;
    }

    .live-mobile-paywall-point-mark {
      width: 11px;
      height: 11px;
    }

    .live-mobile-paywall-point-label {
      font-size: 9px;
    }

    .live-mobile-paywall-point-text {
      font-size: 10px;
    }

    .live-mobile-paywall-actions .live-mobile-paywall-cta {
      padding: 10px 16px;
      font-size: 15px;
    }

    body[data-step="storiesApp"] .wizard-shell {
      padding: calc(env(safe-area-inset-top, 0px) + 8px) 10px calc(env(safe-area-inset-bottom, 0px) + 8px);
    }

    body[data-step="storiesApp"] .wizard-topbar {
      margin-bottom: 6px;
    }

    body[data-step="storiesApp"] .page-title {
      margin-bottom: 6px;
      font-size: clamp(28px, 8.2vw, 34px);
    }

    .stories-mobile-paywall {
      grid-template-rows: auto auto auto auto;
      gap: 6px;
    }

    .stories-mobile-paywall .stories-sales-preview {
      width: min(37vw, 142px);
    }

    .stories-mobile-paywall-heading {
      font-size: clamp(22px, 6.3vw, 27px);
    }

    .stories-mobile-paywall-text {
      font-size: 10px;
      line-height: 1.22;
    }

    .stories-mobile-paywall-point {
      gap: 8px;
      padding: 6px 9px;
    }

    .stories-mobile-paywall-point-mark {
      width: 11px;
      height: 11px;
    }

    .stories-mobile-paywall-point-label {
      font-size: 9px;
    }

    .stories-mobile-paywall-point-text {
      font-size: 10px;
    }

    .stories-mobile-paywall-actions .stories-mobile-paywall-cta {
      padding: 10px 16px;
      font-size: 15px;
    }

    body[data-step="final"] .wizard-shell,
    body[data-step="storiesOutput"] .wizard-shell {
      padding: calc(env(safe-area-inset-top, 0px) + 8px) 10px calc(env(safe-area-inset-bottom, 0px) + 8px);
    }

    body[data-step="final"] .wizard-topbar,
    body[data-step="storiesOutput"] .wizard-topbar {
      margin-bottom: 7px;
    }

    body[data-step="final"] .page-title,
    body[data-step="storiesOutput"] .page-title {
      margin-bottom: 7px;
      font-size: clamp(28px, 8.2vw, 34px);
    }

    .final-mobile-screen {
      gap: 7px;
    }

    .final-mobile-saved {
      gap: 8px;
    }

    .final-mobile-saved-mark {
      width: 18px;
      height: 18px;
    }

    .final-mobile-saved-mark::after {
      width: 8px;
      height: 4px;
      margin-top: 5px;
    }

    .final-mobile-saved-text {
      font-size: 11px;
    }

    .final-mobile-editor {
      padding: 12px 14px;
    }

    .final-mobile-editor-label {
      margin-bottom: 6px;
      font-size: 10px;
    }

    .final-mobile-editor .final-script {
      padding-right: 8px;
      font-size: clamp(13px, 3.75vw, 15px);
      line-height: 1.38;
    }

    .final-mobile-editor-fade {
      height: 30px;
    }

    .final-mobile-controls {
      gap: 6px;
    }

    .final-mobile-controls .select-control {
      grid-template-columns: minmax(74px, auto) minmax(0, 1fr);
      gap: 8px;
      padding: 9px 32px 9px 12px;
    }

    .final-mobile-controls .select-control::after {
      right: 13px;
      width: 8px;
      height: 8px;
    }

    .final-mobile-controls .select-label {
      font-size: 10px;
    }

    .final-mobile-controls .control-select {
      font-size: clamp(15px, 4.4vw, 18px);
    }

    .preview-tier-note {
      gap: 2px;
      padding: 7px 10px;
    }

    .preview-tier-note-label,
    .preview-tier-note-copy {
      font-size: 9px;
    }

    .final-mobile-actions {
      gap: 7px;
    }

    .final-mobile-actions .primary-action {
      padding: 11px 18px;
      font-size: clamp(23px, 6.8vw, 28px);
    }

    .final-mobile-actions .preview-generate-action {
      font-size: clamp(19px, 5.8vw, 24px);
    }

    .final-mobile-actions .secondary-action {
      padding: 9px 16px;
      font-size: clamp(16px, 4.6vw, 19px);
    }

    .theme-mobile-screen {
      padding-top: calc(env(safe-area-inset-top, 0px) + clamp(88px, 12.7svh, 102px));
    }

    .theme-mobile-deck {
      --theme-active-top: calc(clamp(24px, 4.4svh, 34px) + var(--theme-card-shift-y));
      --theme-side-top: calc(clamp(60px, 10.2svh, 78px) + var(--theme-card-shift-y));
      --theme-card-width: min(54vw, 190px);
      --theme-side-offset: min(57vw, 214px);
      height: clamp(374px, calc(100svh - 216px), 462px);
    }

    .script-mobile-deck {
      --theme-card-width: min(58vw, 204px);
    }

    .story-carousel-mobile-deck {
      --theme-card-width: min(58vw, 204px);
    }

    .background-mobile-deck {
      --theme-card-width: min(58vw, 204px);
    }

    .theme-mobile-card {
      gap: 7px;
    }

    .theme-mobile-ready {
      font-size: 14px;
    }

    .theme-mobile-label {
      font-size: clamp(32px, 10vw, 40px);
    }

    .format-mobile-label {
      font-size: clamp(27px, 7.6vw, 34px);
    }

    .script-mobile-label {
      font-size: clamp(28px, 8.2vw, 36px);
    }

    .story-carousel-mobile-label {
      font-size: clamp(24px, 7.2vw, 32px);
    }

    .background-mobile-label {
      font-size: clamp(24px, 7.2vw, 31px);
    }

    .script-mobile-card-content {
      padding: clamp(15px, 4.2vw, 20px);
    }

    .script-mobile-hook {
      font-size: clamp(21px, 6.2vw, 28px);
    }

    .story-carousel-mobile-card-content {
      padding: clamp(15px, 4.2vw, 20px);
    }

    .story-carousel-mobile-question {
      font-size: clamp(20px, 5.9vw, 27px);
      -webkit-line-clamp: 9;
    }

    .script-mobile-snippet {
      font-size: clamp(12px, 3.3vw, 14px);
      -webkit-line-clamp: 6;
    }

    .theme-mobile-controls {
      width: min(62vw, 230px);
      gap: 14px;
      margin-top: 0;
    }

    .theme-mobile-dots {
      gap: 26px;
    }

    .background-mobile-dots {
      gap: 16px;
    }

    .theme-mobile-dot {
      width: 12px;
      height: 12px;
    }
  }

  .showcase-rect {
    width: min(300px, 76vw);
    height: min(470px, 58vh);
  }

  .live-sales-layout,
  .stories-sales-layout {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 28px;
  }

  .live-sales-preview,
  .stories-sales-preview {
    height: min(460px, 54vh);
  }

  .live-sales-preview:not(.live-preview-compact) .live-top-strip {
    top: 14px;
    left: 12px;
    right: 12px;
  }

  .live-sales-copy-panel,
  .stories-sales-copy-panel {
    width: min(360px, 92vw);
    justify-items: center;
    text-align: center;
  }

  .live-mock-heading {
    max-width: 11ch;
    font-size: 40px;
  }

  .live-mock-heading.stories-sales-heading {
    max-width: min(360px, 92vw);
  }

  .live-benefit-list {
    width: 100%;
  }

  .stories-sales-stack {
    inset: 58px 13px 46px;
    gap: 10px;
  }

  .stories-sales-question-card {
    padding: 13px 12px 12px;
  }

  .stories-sales-response-card {
    padding: 11px 12px 12px;
  }

  .stories-sales-question {
    font-size: 16px;
  }

  .stories-sales-response-text {
    font-size: 13px;
  }

  .format-preview-panel {
    padding: 14px 10px;
  }

  .format-preview-question {
    font-size: 16px;
  }

  .format-preview-hook {
    font-size: 16px;
  }

  .live-sales-preview:not(.live-preview-compact) .live-sales-comments {
    left: 12px;
    right: 12px;
    bottom: 54px;
    height: 150px;
    gap: 7px;
  }

  .background-grid {
    grid-template-columns: 1fr;
  }

  .background-preview {
    max-height: 520px;
  }

  .summary-line {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .choice-button,
  .primary-action,
  .secondary-action {
    width: 100%;
    min-width: 0;
    font-size: 28px;
  }

  .secondary-action {
    font-size: 21px;
  }

  .script-hook,
  .generation-title,
  .progress-title {
    font-size: 26px;
  }

  .format-preview-button,
  .showcase-line,
  .background-preview,
  .background-select,
  .summary-value {
    font-size: 28px;
  }

}

/* Shared landing gateway. Desktop reuses the finalized proportional stage as a lightweight variant. */
  body[data-step="mode"][data-mode-surface="landing"] .wizard-shell {
    height: var(--app-height);
    min-height: var(--app-height);
    overflow: hidden;
    padding: 0;
  }

  body[data-step="mode"][data-mode-surface="landing"] .wizard-topbar,
  body[data-step="mode"][data-mode-surface="products"] .wizard-topbar {
    display: none;
  }

  body[data-step="mode"][data-mode-surface="landing"] .wizard-root {
    display: block;
    width: 100%;
    height: var(--app-height);
    min-height: var(--app-height);
    overflow: hidden;
  }

  .landing-screen {
    display: flex;
    position: relative;
    width: 100%;
    height: var(--app-height);
    min-height: var(--app-height);
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    padding: calc(env(safe-area-inset-top, 0px) + 88px) 22px 0;
    isolation: isolate;
  }

  .landing-screen::before,
  .landing-screen::after {
    position: absolute;
    z-index: -1;
    width: 1px;
    height: 1px;
    border-radius: 50%;
    content: "";
    pointer-events: none;
  }

  .landing-screen::before {
    top: 19%;
    left: 16%;
    box-shadow: 0 0 94px 45px rgba(133, 44, 255, 0.11);
  }

  .landing-screen::after {
    right: 19%;
    bottom: 19%;
    box-shadow: 0 0 88px 42px rgba(214, 168, 63, 0.08);
  }

  .landing-account-button {
    top: calc(env(safe-area-inset-top, 0px) + 18px);
    right: 18px;
    width: 108px;
    min-width: 108px;
    max-width: 108px;
    height: 42px;
    min-height: 42px;
    border-color: rgba(255, 255, 255, 0.52);
    background: rgba(5, 5, 5, 0.96);
  }

  .landing-account-button .account-action-mark {
    width: 25px;
    height: 25px;
    flex-basis: 25px;
  }

  .landing-brand {
    width: 100%;
    color: #fff;
    font-size: clamp(48px, 14.2vw, 58px);
    font-weight: 400;
    line-height: 0.92;
    text-align: center;
    letter-spacing: -0.045em;
    text-wrap: nowrap;
  }

  .landing-brand::after {
    display: block;
    width: 34px;
    height: 1px;
    margin: 13.5px auto 0;
    background: #9a48ff;
    box-shadow: 0 0 11px rgba(154, 72, 255, 0.82);
    content: "";
  }

  .landing-copy {
    display: grid;
    width: min(346px, calc(100vw - 44px));
    justify-items: center;
    margin-top: clamp(22px, 3.2svh, 28px);
    text-align: center;
  }

  .landing-lead,
  .landing-detail {
    margin: 0;
  }

  .landing-lead {
    max-width: 15ch;
    color: #f7f7f5;
    font-size: clamp(24px, 6.7vw, 27px);
    font-weight: 400;
    line-height: 1.13;
    letter-spacing: -0.025em;
    text-wrap: balance;
  }

  .landing-showcase {
    position: relative;
    width: min(228px, 61vw);
    height: 250px;
    min-height: 150px;
    flex: 0 1 250px;
    margin: 18px 0 0;
    overflow: hidden;
    background: transparent;
  }

  .landing-actions {
    display: grid;
    width: min(272px, calc(100vw - 52px));
    gap: 9px;
    margin-top: auto;
    margin-bottom: max(58px, calc(env(safe-area-inset-bottom, 0px) + 54px));
  }

  button.landing-action {
    display: inline-flex;
    width: 100%;
    min-height: 58px;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    padding: 12px 18px;
    cursor: pointer;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 23px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.015em;
    text-transform: uppercase;
    transition:
      border-color 140ms ease,
      box-shadow 140ms ease,
      transform 100ms ease;
  }

  button.landing-action:active {
    transform: translateY(1px);
  }

  button.landing-action-free {
    border: 1px solid #a958ff;
    background: #5e199f;
    box-shadow: 0 0 20px rgba(133, 44, 255, 0.25);
    color: #fff;
  }

  button.landing-action-free:hover,
  button.landing-action-free:focus-visible {
    border-color: #c48aff;
    outline: 0;
    box-shadow: 0 0 26px rgba(133, 44, 255, 0.38);
  }

  button.landing-action-affiliates {
    border: 1px solid #a958ff;
    background: #5e199f;
    box-shadow: 0 0 20px rgba(133, 44, 255, 0.25);
    color: #fff;
  }

  button.landing-action-affiliates:hover,
  button.landing-action-affiliates:focus-visible {
    border-color: #c48aff;
    outline: 0;
    box-shadow: 0 0 26px rgba(133, 44, 255, 0.38);
  }

  button.landing-action-buy {
    border: 1px solid var(--brand-gold);
    background: var(--brand-gold);
    box-shadow: 0 0 20px var(--brand-gold-glow);
    color: var(--brand-gold-ink);
  }

  button.landing-action-buy:hover,
  button.landing-action-buy:focus-visible {
    border-color: var(--brand-gold-highlight);
    background: var(--brand-gold-highlight);
    outline: 0;
    box-shadow: 0 0 27px rgba(214, 168, 63, 0.32);
  }

  button.landing-action-buy:active {
    border-color: var(--brand-gold-deep);
    background: var(--brand-gold-deep);
  }

  .mode-hub-back {
    position: absolute;
    z-index: 12;
    top: calc(env(safe-area-inset-top, 0px) + 18px);
    left: clamp(18px, 6vw, 28px);
    width: 76px;
    height: 44px;
    min-height: 44px;
    border: 1px solid rgba(255, 255, 255, 0.54);
    border-radius: 4px;
    background: rgba(5, 5, 5, 0.94);
    color: #fff;
    cursor: pointer;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: 900;
  }

  .mode-hub-back:hover,
  .mode-hub-back:focus-visible {
    border-color: #9a48ff;
    outline: 0;
    box-shadow: 0 0 18px rgba(133, 44, 255, 0.22);
  }

@media (max-height: 720px) {
    .landing-screen {
      padding-top: calc(env(safe-area-inset-top, 0px) + 72px);
    }

    .landing-brand {
      font-size: clamp(42px, 12.5vw, 49px);
    }

    .landing-brand::after {
      margin-top: 12px;
    }

    .landing-copy {
      margin-top: 18px;
    }

    .landing-lead {
      font-size: clamp(22px, 6.1vw, 24px);
      line-height: 1.12;
    }

    .landing-showcase {
      width: min(210px, 56vw);
      min-height: 138px;
      flex-basis: 190px;
      margin-top: 12px;
    }

    .landing-actions {
      gap: 7px;
      margin-bottom: max(58px, calc(env(safe-area-inset-bottom, 0px) + 54px));
    }

    button.landing-action {
      min-height: 51px;
      font-size: 21px;
    }
}

@media (max-width: 760px) and (max-height: 620px) {
  .landing-screen {
    padding-top: calc(env(safe-area-inset-top, 0px) + 62px);
  }

  .landing-brand {
    font-size: 40px;
  }

  .landing-brand::after {
    margin-top: 10px;
  }

  .landing-copy {
    margin-top: 14px;
  }

  .landing-lead {
    font-size: 20.5px;
    line-height: 1.08;
  }

  .landing-showcase {
    width: min(150px, 48vw);
    min-height: 104px;
    flex-basis: 138px;
    margin-top: 8px;
  }

  .landing-actions {
    gap: 6px;
    margin-bottom: max(56px, calc(env(safe-area-inset-bottom, 0px) + 50px));
  }

  button.landing-action {
    min-height: 44px;
    font-size: 19px;
  }
}

body[data-phone-preview="true"] {
  --app-height: 844px;
  width: 390px;
  min-width: 390px;
  max-width: 390px;
  height: 844px;
  min-height: 844px;
  margin: 0 auto;
  overflow: hidden;
}

body[data-phone-preview="true"] .wizard-shell,
body[data-phone-preview="true"] .wizard-root,
body[data-phone-preview="true"] .landing-screen {
  width: 390px;
  min-width: 390px;
  max-width: 390px;
  height: 844px;
  min-height: 844px;
}

body[data-phone-preview="true"] .wizard-shell {
  display: block;
  margin: 0;
  padding: 0;
}

body[data-phone-preview="true"] .landing-account-button {
  display: inline-flex;
  position: absolute;
  z-index: 12;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 7px 7px 7px 6px;
  color: #fff;
  cursor: pointer;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  top: 0 !important;
  right: 18px !important;
}

body[data-phone-preview="true"] .app-menu-trigger {
  position: absolute;
  top: 18px;
  left: 18px;
}

body[data-phone-preview="true"] .app-menu-shell {
  position: absolute;
  width: 390px;
  height: 844px;
}

body[data-phone-preview="true"] .landing-screen {
  padding-top: 88px;
}

body[data-phone-preview="true"] .landing-brand {
  font-size: 55px;
}

body[data-phone-preview="true"] .landing-brand::after {
  margin-top: 18px;
}

body[data-phone-preview="true"] .landing-copy {
  margin-top: 27px;
}

body[data-phone-preview="true"] .landing-lead {
  font-size: 26px;
  line-height: 1.13;
}

body[data-phone-preview="true"] .landing-showcase {
  width: 228px;
  min-height: 150px;
  flex-basis: 250px;
  margin-top: 18px;
}

body[data-phone-preview="true"] .landing-actions {
  gap: 9px;
  margin-bottom: 58px;
}

body[data-phone-preview="true"] button.landing-action {
  min-height: 58px;
  font-size: 23px;
}

/* The landing video and live UI share one proportional 390 x 844 design stage. */
body[data-step="mode"][data-mode-surface="landing"] .landing-screen {
  justify-content: center;
  padding: 0;
}

.landing-stage {
  /* Canonical 390 x 844 landing geometry. The offline landing-video renderer
     reads these same values when it builds the two UI collision regions. */
  --landing-upper-hitbox-left: 5.641cqw;
  --landing-upper-hitbox-top: 22.5641cqw;
  --landing-upper-hitbox-right: 94.359cqw;
  --landing-upper-hitbox-bottom: 65.6731cqw;
  --landing-actions-hitbox-left: 13.8462cqw;
  --landing-actions-hitbox-top: 152.3077cqw;
  --landing-actions-hitbox-right: 86.1538cqw;
  --landing-actions-hitbox-bottom: 201.5385cqw;
  container-type: inline-size;
  position: relative;
  width: min(100%, calc(var(--app-height) * 0.4620853));
  aspect-ratio: 390 / 844;
  flex: none;
  overflow: hidden;
  background: #000;
  isolation: isolate;
}

body[data-step="mode"][data-mode-surface="landing"] .landing-stage .landing-showcase {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  background: #000;
  pointer-events: none;
}

.landing-stage-video {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
  object-fit: fill;
  pointer-events: none;
}

.landing-stage > .landing-brand,
.landing-stage > .landing-copy,
.landing-stage > .landing-actions {
  position: absolute;
  z-index: 20;
  margin: 0;
}

body[data-step="mode"][data-mode-surface="landing"] .landing-account-anchor > .landing-account-button {
  position: absolute;
  z-index: 22;
  top: 0;
  right: max(18px, env(safe-area-inset-right, 0px));
  width: 108px;
  min-width: 108px;
  max-width: 108px;
  height: 42px;
  min-height: 42px;
  padding: 7px 7px 7px 6px;
  gap: 5px;
  font-size: 10px;
}

body[data-step="mode"][data-mode-surface="landing"] .landing-account-anchor > .landing-account-button .account-action-mark {
  width: 25px;
  height: 25px;
  flex-basis: 25px;
}

.landing-stage > .landing-brand {
  top: var(--landing-upper-hitbox-top);
  left: var(--landing-upper-hitbox-left);
  width: calc(var(--landing-upper-hitbox-right) - var(--landing-upper-hitbox-left));
  color: #fff;
  font-size: 14.1026cqw;
  line-height: 0.92;
}

.landing-stage > .landing-brand::after {
  width: 8.7179cqw;
  height: max(1px, 0.2564cqw);
  margin-top: 3.4615cqw;
}

body[data-step="mode"][data-mode-surface="landing"] .landing-stage > .landing-copy {
  top: 43.0769cqw;
  left: var(--landing-upper-hitbox-left);
  display: grid;
  width: calc(var(--landing-upper-hitbox-right) - var(--landing-upper-hitbox-left));
  justify-items: center;
  margin: 0;
  text-align: center;
}

.landing-stage > .landing-copy .landing-lead {
  width: 79.4872cqw;
  max-width: 79.4872cqw;
  color: #f7f7f5;
  font-size: 6.6667cqw;
  line-height: 1.13;
}

.landing-stage > .landing-actions {
  top: var(--landing-actions-hitbox-top);
  left: var(--landing-actions-hitbox-left);
  display: grid;
  width: calc(var(--landing-actions-hitbox-right) - var(--landing-actions-hitbox-left));
  gap: 2.3077cqw;
}

.landing-stage button.landing-action {
  width: 100%;
  min-height: 14.8718cqw;
  padding: 3.0769cqw 4.6154cqw;
  font-size: 5.8974cqw;
}

/* Mobile app-shell hardening: Safari-safe viewport sizing and predictable controls. */
@media (max-width: 760px) {
  body[data-step="mode"],
  body[data-step="theme"],
  body[data-step="format"],
  body[data-step="background"],
  body[data-step="script"],
  body[data-step="confirm"],
  body[data-step="final"],
  body[data-step="output"],
  body[data-step="liveApp"][data-live-variant="paywall"],
  body[data-step="storiesApp"],
  body[data-step="storiesTheme"],
  body[data-step="storiesQuestion"],
  body[data-step="storiesConfirm"],
  body[data-step="storiesOutput"] {
    height: var(--app-height);
  }

  body[data-step="mode"] .wizard-shell,
  body[data-step="theme"] .wizard-shell,
  body[data-step="format"] .wizard-shell,
  body[data-step="background"] .wizard-shell,
  body[data-step="script"] .wizard-shell,
  body[data-step="confirm"] .wizard-shell,
  body[data-step="final"] .wizard-shell,
  body[data-step="output"] .wizard-shell,
  body[data-step="liveApp"][data-live-variant="paywall"] .wizard-shell,
  body[data-step="storiesApp"] .wizard-shell,
  body[data-step="storiesTheme"] .wizard-shell,
  body[data-step="storiesQuestion"] .wizard-shell,
  body[data-step="storiesConfirm"] .wizard-shell,
  body[data-step="storiesOutput"] .wizard-shell {
    height: var(--app-height);
    min-height: var(--app-height);
  }

  .mode-screen,
  .theme-mobile-screen {
    height: var(--app-height);
    min-height: var(--app-height);
  }

  .wizard-topbar {
    min-height: 44px;
  }

  .back-button,
  .account-button,
  .mode-account-button,
  .primary-action,
  .secondary-action,
  .format-preview-button,
  .control-button {
    min-height: 44px;
  }

  .back-button {
    min-height: 44px;
    padding: 10px 8px;
  }

  .primary-action,
  .secondary-action {
    line-height: 1.05;
  }

  .purchase-activate-action,
  .creator-offer-activate {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    padding: 8px 2px;
    font-size: 10px;
    line-height: 1.2;
  }

  body[data-step="auth"] {
    min-height: var(--app-height);
    overflow-x: hidden;
    overflow-y: auto;
  }

  body[data-step="auth"] .wizard-shell {
    width: 100%;
    min-height: var(--app-height);
    padding: calc(env(safe-area-inset-top, 0px) + 14px) 12px calc(env(safe-area-inset-bottom, 0px) + 76px);
  }

  body[data-step="auth"] .wizard-topbar {
    width: min(100% - 24px, 520px);
    grid-template-columns: 82px minmax(0, 1fr) 80px;
    flex: 0 0 auto;
    margin: 0 auto 14px;
  }

  body[data-step="auth"] .progress-mark {
    grid-column: 2;
    justify-self: center;
  }

  body[data-step="auth"] .status-mark {
    grid-column: 3;
    justify-self: end;
    max-width: 80px;
  }

  body[data-step="auth"] .wizard-root {
    width: min(100% - 20px, 500px);
    min-height: 0;
    justify-content: center;
    overflow: visible;
    margin: 0 auto;
    padding-bottom: 12px;
  }

  .auth-screen {
    width: 100%;
    gap: clamp(16px, 2.5svh, 22px);
  }

  .auth-intro {
    gap: 6px;
  }

  .auth-mark {
    width: 15px;
    height: 15px;
    margin-bottom: 2px;
  }

  .auth-kicker {
    font-size: 10px;
  }

  .auth-title {
    font-size: 40px;
  }

  .auth-lead {
    max-width: 36ch;
    font-size: 12px;
    line-height: 1.36;
  }

  .auth-box {
    gap: 14px;
    padding: 18px;
  }

  .auth-mode-option {
    min-height: 44px;
    padding: 11px 7px;
    font-size: 10px;
    letter-spacing: 0;
  }

  .auth-note {
    padding: 10px 11px;
    font-size: 10px;
  }

  .auth-form {
    gap: 12px;
  }

  .auth-box .auth-input {
    min-height: 50px;
    padding: 12px 13px;
    font-size: 16px;
  }

  .auth-submit {
    min-height: 50px;
    padding: 13px 16px;
    font-size: 18px;
  }

  body[data-step="confirm"] .wizard-shell,
  body[data-step="storiesConfirm"] .wizard-shell {
    display: flex;
    flex-direction: column;
  }

  body[data-step="confirm"] .wizard-root,
  body[data-step="storiesConfirm"] .wizard-root,
  body[data-step="output"] .wizard-root,
  body[data-step="storiesOutput"] .wizard-root,
  body[data-step="liveApp"][data-live-variant="paywall"] .wizard-root,
  body[data-step="storiesApp"] .wizard-root {
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  body[data-step="confirm"] .wizard-root::-webkit-scrollbar,
  body[data-step="storiesConfirm"] .wizard-root::-webkit-scrollbar,
  body[data-step="output"] .wizard-root::-webkit-scrollbar,
  body[data-step="storiesOutput"] .wizard-root::-webkit-scrollbar,
  body[data-step="liveApp"][data-live-variant="paywall"] .wizard-root::-webkit-scrollbar,
  body[data-step="storiesApp"] .wizard-root::-webkit-scrollbar {
    display: none;
  }

  body[data-step="confirm"] .wizard-root,
  body[data-step="storiesConfirm"] .wizard-root {
    flex: 1 1 auto;
    padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
  }

  body[data-step="output"] .output-box,
  body[data-step="storiesOutput"] .output-box {
    flex: 0 0 auto;
  }

  body[data-step="output"] .wizard-root,
  body[data-step="storiesOutput"] .wizard-root {
    padding-bottom: max(14px, env(safe-area-inset-bottom, 0px));
  }

  .live-mobile-paywall,
  .stories-mobile-paywall {
    min-height: min-content;
    flex: 0 0 auto;
    align-content: start;
    gap: clamp(6px, 1svh, 8px);
    padding-bottom: max(10px, env(safe-area-inset-bottom, 0px));
  }

  .live-mobile-paywall-actions,
  .stories-mobile-paywall-actions {
    gap: 6px;
  }

  .live-mobile-paywall-actions .live-mobile-paywall-cta,
  .stories-mobile-paywall-actions .stories-mobile-paywall-cta {
    min-height: 46px;
  }

  .live-mobile-paywall-activate,
  .stories-mobile-paywall-activate {
    min-height: 36px;
    padding: 8px 2px;
    font-size: 10px;
  }

  .live-mobile-paywall-actions .checkout-identity-note,
  .stories-mobile-paywall-actions .checkout-identity-note {
    font-size: 10px;
    line-height: 1.28;
  }
}

@media (max-width: 760px) and (min-height: 780px) {
  .live-mobile-paywall,
  .stories-mobile-paywall {
    min-height: 100%;
    align-content: center;
  }
}

@media (max-width: 760px) and (max-height: 740px) {
  body[data-step="auth"] .wizard-root {
    justify-content: flex-start;
  }

  .live-mobile-paywall .live-sales-preview,
  .stories-mobile-paywall .stories-sales-preview {
    width: min(32vw, 124px);
  }

  .live-mobile-paywall-heading,
  .stories-mobile-paywall-heading {
    font-size: 24px;
  }

  .live-mobile-paywall-text,
  .stories-mobile-paywall-text {
    font-size: 10px;
    line-height: 1.22;
  }

  .live-mobile-paywall-point,
  .stories-mobile-paywall-point {
    gap: 8px;
    padding: 5px 8px;
  }

  .live-mobile-paywall-point-label,
  .stories-mobile-paywall-point-label {
    font-size: 9px;
  }

  .live-mobile-paywall-point-text,
  .stories-mobile-paywall-point-text {
    font-size: 10px;
    line-height: 1.22;
  }

  .live-mobile-paywall-actions .live-mobile-paywall-cta,
  .stories-mobile-paywall-actions .stories-mobile-paywall-cta {
    min-height: 44px;
    padding: 10px 16px;
    font-size: 14px;
  }
}

@media (max-width: 760px) and (max-height: 700px) {
  .live-mobile-paywall,
  .stories-mobile-paywall {
    gap: 4px;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .live-mobile-paywall .live-sales-preview,
  .stories-mobile-paywall .stories-sales-preview {
    width: min(24.5vw, 96px);
  }

  .live-mobile-paywall-heading,
  .stories-mobile-paywall-heading {
    font-size: 21px;
  }

  .live-mobile-paywall-text,
  .stories-mobile-paywall-text {
    font-size: 9px;
    line-height: 1.16;
  }

  .live-mobile-paywall-points,
  .stories-mobile-paywall-points {
    gap: 4px;
  }

  .live-mobile-paywall-point,
  .stories-mobile-paywall-point {
    gap: 6px;
    padding: 3px 7px;
  }

  .live-mobile-paywall-point-label,
  .stories-mobile-paywall-point-label {
    font-size: 8px;
  }

  .live-mobile-paywall-point-text,
  .stories-mobile-paywall-point-text {
    font-size: 9px;
    line-height: 1.14;
  }

  .live-mobile-paywall-actions,
  .stories-mobile-paywall-actions {
    gap: 4px;
  }

  .live-mobile-paywall-actions .live-mobile-paywall-cta,
  .stories-mobile-paywall-actions .stories-mobile-paywall-cta {
    min-height: 40px;
    padding-block: 8px;
  }

  .live-mobile-paywall-activate,
  .stories-mobile-paywall-activate {
    min-height: 30px;
    padding-block: 6px;
    font-size: 9px;
  }

  .live-mobile-paywall-actions .checkout-identity-note,
  .stories-mobile-paywall-actions .checkout-identity-note {
    font-size: 8px;
    line-height: 1.15;
  }
}

.monetize-button {
  display: none;
}

@media (min-width: 761px) {
  body[data-step="mode"] .wizard-topbar {
    grid-template-columns: minmax(138px, 160px) minmax(0, 1fr) minmax(138px, 160px);
  }

  body[data-step="mode"] #monetize-button.monetize-button:not([hidden]) {
    display: inline-flex;
    grid-column: 1;
    width: 100%;
    min-width: 138px;
    max-width: 160px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    justify-self: start;
    border: 1px solid rgba(154, 72, 255, 0.82);
    border-radius: 4px;
    background: #070707;
    box-shadow: 0 0 18px rgba(133, 44, 255, 0.18);
    color: #fff;
    padding: 9px 13px;
    cursor: pointer;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0;
  }

  body[data-step="mode"] #monetize-button.monetize-button:hover,
  body[data-step="mode"] #monetize-button.monetize-button:focus-visible {
    border-color: #b878ff;
    outline: 0;
    box-shadow: 0 0 20px rgba(133, 44, 255, 0.28);
  }

  body[data-step="mode"] #account-button.account-button {
    grid-column: 3;
    width: 100%;
    min-width: 138px;
    max-width: 160px;
  }
}

.affiliate-screen {
  display: grid;
  width: min(720px, 100%);
  gap: 22px;
  padding-bottom: 48px;
}

.affiliate-intro {
  display: grid;
  gap: 7px;
  text-align: center;
}

.affiliate-kicker,
.affiliate-link-kicker,
.affiliate-path-number,
.affiliate-connected-mark,
.affiliate-code,
.affiliate-input-label,
.affiliate-feedback,
.affiliate-unavailable {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 900;
  letter-spacing: 0;
}

.affiliate-kicker,
.affiliate-link-kicker,
.affiliate-path-number,
.affiliate-input-label {
  color: #9a48ff;
  font-size: 11px;
}

.affiliate-title {
  margin: 0;
  color: #fff;
  font-size: clamp(48px, 8vw, 76px);
  font-weight: 400;
  line-height: 0.94;
}

.affiliate-lead {
  max-width: 58ch;
  margin: 0 auto;
  color: #b6b6b6;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 1.45;
}

.affiliate-commission {
  display: grid;
  grid-template-columns: minmax(150px, 0.7fr) minmax(220px, 1fr);
  align-items: center;
  border: 1px solid #9a48ff;
  border-radius: 4px;
  background: #050505;
  box-shadow: 0 0 24px rgba(133, 44, 255, 0.2);
}

.affiliate-commission-number {
  border-right: 1px solid rgba(154, 72, 255, 0.7);
  color: #fff;
  padding: 22px;
  font-size: 58px;
  line-height: 0.9;
  text-align: center;
}

.affiliate-commission-copy {
  display: grid;
  gap: 5px;
  padding: 20px 24px;
  font-family: Arial, Helvetica, sans-serif;
  letter-spacing: 0;
}

.affiliate-commission-copy strong {
  color: #9a48ff;
  font-size: 13px;
}

.affiliate-commission-copy span {
  color: #d0d0d0;
  font-size: 11px;
}

.affiliate-path {
  display: grid;
  border-top: 1px solid #262626;
}

.affiliate-path-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  border-bottom: 1px solid #262626;
  padding: 13px 4px;
}

.affiliate-path-copy {
  display: grid;
  gap: 3px;
  font-family: Arial, Helvetica, sans-serif;
}

.affiliate-path-copy strong {
  color: #fff;
  font-size: 12px;
}

.affiliate-path-copy span {
  color: #979797;
  font-size: 11px;
  line-height: 1.35;
}

.affiliate-connect-panel,
.affiliate-link-panel {
  display: grid;
  gap: 16px;
  border: 1px solid #9a48ff;
  border-radius: 4px;
  background: #060606;
  box-shadow: 0 0 24px rgba(133, 44, 255, 0.16);
  padding: 20px;
}

.affiliate-connect-heading,
.affiliate-link-heading {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.affiliate-connected-mark {
  color: #fff;
  font-size: 10px;
}

.affiliate-terms-note a:hover,
.affiliate-terms-note a:focus-visible {
  color: #b878ff;
}

.affiliate-link-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  border: 1px solid #303030;
  background: #000;
}

.affiliate-link-output,
.affiliate-link-input {
  width: 100%;
  min-width: 0;
  border: 0;
  border-radius: 0;
  background: #000;
  color: #fff;
  padding: 13px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  letter-spacing: 0;
}

.affiliate-copy-button {
  min-width: 74px;
  border: 0;
  border-left: 1px solid #9a48ff;
  background: #10061b;
  color: #fff;
  padding: 10px 13px;
  cursor: pointer;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0;
}

.affiliate-copy-button:hover,
.affiliate-copy-button:focus-visible {
  background: #1a082e;
}

.affiliate-code {
  color: #858585;
  font-size: 9px;
}

.affiliate-disclosure-block {
  display: grid;
  padding-top: 16px;
  border-top: 1px solid #9a48ff;
  gap: 9px;
}

.affiliate-link-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.affiliate-asset-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  border-top: 1px solid #262626;
  border-bottom: 1px solid #262626;
  padding: 15px 0;
}

.affiliate-asset-copy {
  display: grid;
  min-width: 0;
  gap: 4px;
  font-family: Arial, Helvetica, sans-serif;
  letter-spacing: 0;
}

.affiliate-asset-copy strong {
  color: #fff;
  font-size: 13px;
}

.affiliate-asset-copy > span:last-child {
  color: #8e8e8e;
  font-size: 10px;
  font-weight: 700;
}

.affiliate-download-button {
  display: inline-flex;
  min-width: 156px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  letter-spacing: 0;
  text-decoration: none;
}

.affiliate-setup-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.affiliate-link-actions > :only-child {
  grid-column: 1 / -1;
}

.affiliate-share-button,
.affiliate-change-button,
.affiliate-signin-button,
.affiliate-gumroad-button,
.affiliate-have-link-button,
.affiliate-connect-button,
.affiliate-cancel-button {
  width: 100%;
  min-width: 0;
  font-family: Arial, Helvetica, sans-serif;
  letter-spacing: 0;
}

.affiliate-gumroad-button {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.affiliate-connect-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}

.affiliate-input-label {
  display: grid;
  grid-column: 1 / -1;
  gap: 8px;
}

.affiliate-link-input {
  min-height: 50px;
  border: 1px solid #383838;
  font-size: 16px;
}

.affiliate-link-input:focus {
  border-color: #9a48ff;
  outline: 0;
  box-shadow: 0 0 18px rgba(133, 44, 255, 0.2);
}

.affiliate-connect-button {
  grid-column: 1 / -1;
}

.affiliate-cancel-button {
  grid-column: 1 / -1;
}

.affiliate-panel-note,
.affiliate-terms-note {
  margin: 0;
  color: #8e8e8e;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
  line-height: 1.45;
}

.affiliate-terms-note {
  text-align: center;
}

.affiliate-terms-note a {
  color: #c7c7c7;
}

.affiliate-feedback,
.affiliate-unavailable {
  border-left: 2px solid #9a48ff;
  background: #0b0710;
  color: #e4e4e4;
  padding: 11px 13px;
  font-size: 10px;
  line-height: 1.35;
}

@media (max-width: 760px) {
  body[data-step="mode"] #monetize-button.monetize-button:not([hidden]) {
    display: inline-flex;
    grid-column: 1;
    align-items: center;
    justify-content: center;
    justify-self: start;
    width: 112px;
    min-width: 112px;
    max-width: 112px;
    height: 44px;
    min-height: 44px;
    border: 1px solid rgba(154, 72, 255, 0.82);
    border-radius: 4px;
    background: rgba(5, 5, 5, 0.94);
    box-shadow: 0 0 18px rgba(133, 44, 255, 0.2);
    color: #fff;
    padding: 9px 13px;
    cursor: pointer;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0;
  }

  body[data-step="mode"] .mode-account-button {
    top: calc(env(safe-area-inset-top, 0px) + 18px);
    right: clamp(18px, 6vw, 28px);
    width: 112px;
    min-width: 112px;
    max-width: 112px;
    height: 44px;
    min-height: 44px;
    gap: 5px;
    padding: 7px 7px 7px 6px;
    font-size: 10px;
  }

  body[data-step="mode"] .mode-account-button .account-action-mark {
    width: 25px;
    height: 25px;
    flex-basis: 25px;
  }

  body[data-step="mode"] .mode-brand {
    top: calc(env(safe-area-inset-top, 0px) + 74px);
    left: 50%;
    max-width: calc(100vw - 40px);
    color: #a8a8a8;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
    transform: translateX(-50%);
  }

  body[data-step="affiliate"] {
    min-height: var(--app-height);
    overflow-x: hidden;
    overflow-y: auto;
  }

  body[data-step="affiliate"] .wizard-shell {
    width: 100%;
    min-height: var(--app-height);
    padding: calc(env(safe-area-inset-top, 0px) + 14px) 12px calc(env(safe-area-inset-bottom, 0px) + 28px);
  }

  body[data-step="affiliate"] .wizard-topbar {
    width: min(100% - 24px, 520px);
    margin: 0 auto 18px;
  }

  body[data-step="affiliate"] #account-button.account-button {
    display: none;
  }

  body[data-step="affiliate"] .wizard-root {
    width: min(100% - 20px, 520px);
    min-height: 0;
    margin: 0 auto;
  }

  .affiliate-screen {
    gap: 16px;
    padding-bottom: 18px;
  }

  .affiliate-title {
    font-size: 48px;
  }

  .affiliate-lead {
    max-width: 36ch;
    font-size: 11px;
    line-height: 1.4;
  }

  .affiliate-commission {
    grid-template-columns: 42% 58%;
  }

  .affiliate-commission-number {
    padding: 18px 10px;
    font-size: 46px;
  }

  .affiliate-commission-copy {
    padding: 14px;
  }

  .affiliate-commission-copy strong {
    font-size: 11px;
  }

  .affiliate-commission-copy span {
    font-size: 9px;
  }

  .affiliate-connect-panel,
  .affiliate-link-panel {
    gap: 13px;
    padding: 16px;
  }

  .affiliate-link-actions {
    grid-template-columns: 1fr;
  }

  .affiliate-asset-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .affiliate-download-button {
    width: 100%;
    min-height: 46px;
    font-size: 13px;
  }

  .affiliate-setup-actions {
    grid-template-columns: 1fr;
  }

  .affiliate-link-actions > * {
    grid-column: 1;
  }

  .affiliate-share-button,
  .affiliate-change-button,
  .affiliate-signin-button,
  .affiliate-gumroad-button,
  .affiliate-have-link-button,
  .affiliate-connect-button,
  .affiliate-cancel-button {
    min-height: 46px;
    padding: 11px 12px;
    font-size: 13px;
  }
}

@media (max-width: 390px) {
  .affiliate-link-field {
    grid-template-columns: minmax(0, 1fr) 64px;
  }

  .affiliate-copy-button {
    min-width: 64px;
    padding-inline: 8px;
  }

  .affiliate-connect-heading,
  .affiliate-link-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
  }
}

.creator-access-panel {
  display: block;
  width: min(960px, 90vw);
  margin: 0 0 16px;
  border: 1px solid rgba(154, 72, 255, 0.82);
  border-radius: 4px;
  background: #050505;
  box-shadow: 0 0 16px rgba(133, 44, 255, 0.1);
  overflow: hidden;
}

.creator-access-panel[open] {
  box-shadow: 0 0 22px rgba(133, 44, 255, 0.15);
}

.creator-access-summary {
  display: flex;
  min-height: 52px;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  font-family: Arial, Helvetica, sans-serif;
  letter-spacing: 0;
}

.creator-access-summary::-webkit-details-marker {
  display: none;
}

.creator-access-summary::marker {
  content: "";
}

.creator-access-summary:focus-visible {
  outline: 2px solid #9a48ff;
  outline-offset: -2px;
}

.creator-access-summary::after {
  display: grid;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  place-items: center;
  border: 1px solid #5a5a5a;
  color: #fff;
  content: "+";
  font-size: 17px;
  font-weight: 500;
  line-height: 1;
}

.creator-access-panel[open] .creator-access-summary {
  border-bottom: 1px solid rgba(154, 72, 255, 0.38);
}

.creator-access-panel[open] .creator-access-summary::after {
  content: "-";
}

.creator-access-summary-label,
.creator-access-summary-status {
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.creator-access-summary-label {
  color: #c49cff;
}

.creator-access-summary-status {
  margin-left: auto;
  color: #8f8f8f;
}

.creator-access-summary-status.active {
  color: #c49cff;
}

.creator-access-body {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(360px, 1.15fr);
  align-items: center;
  gap: 8px 28px;
  padding: 20px;
}

.creator-access-panel:not([open]) > .creator-access-body {
  display: none;
}

.creator-access-kicker,
.creator-access-copy,
.creator-access-expiry,
.creator-access-note,
.creator-access-feedback,
.creator-access-input,
.creator-access-submit,
.creator-access-keep {
  font-family: Arial, Helvetica, sans-serif;
  letter-spacing: 0;
}

.creator-access-kicker {
  color: #9a48ff;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.creator-access-title {
  margin: 0;
  color: #fff;
  font-size: 28px;
  font-weight: 500;
  line-height: 1;
}

.creator-access-copy,
.creator-access-note {
  margin: 0;
  color: #a9a9a9;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
}

.creator-access-form {
  display: grid;
  min-width: 0;
  grid-column: 2;
  grid-row: 1 / span 3;
  grid-template-columns: minmax(0, 1fr) auto;
  align-self: center;
  border: 1px solid #393939;
  background: #000;
}

.creator-access-input {
  width: 100%;
  min-width: 0;
  min-height: 50px;
  border: 0;
  border-radius: 0;
  background: #000;
  color: #fff;
  padding: 0 13px;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
}

.creator-access-input:focus {
  outline: 2px solid #9a48ff;
  outline-offset: -2px;
}

.creator-access-submit {
  min-height: 50px;
  border: 0;
  border-left: 1px solid #9a48ff;
  background: #7f39ff;
  color: #fff;
  padding: 0 16px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  white-space: nowrap;
}

.creator-access-submit:disabled,
.creator-access-input:disabled {
  cursor: wait;
  opacity: 0.65;
}

.creator-access-feedback {
  grid-column: 2;
  color: #c49cff;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.creator-access-panel.active .creator-access-body {
  grid-template-columns: minmax(0, 1fr) auto;
}

.creator-access-panel.active .creator-access-title,
.creator-access-panel.active .creator-access-copy,
.creator-access-panel.active .creator-access-note {
  grid-column: 1;
}

.creator-access-expiry {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  text-align: right;
  text-transform: uppercase;
}

.creator-access-keep {
  min-width: 160px;
  grid-column: 2;
  grid-row: 3 / span 2;
  align-self: end;
  justify-self: end;
}

/* Lightweight hub previews. The full physics engines are loaded only after a route is opened. */
.generator-mode-demo {
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 45%, rgba(154, 72, 255, 0.1), transparent 42%),
    #020202;
}

.generator-demo-field {
  position: relative;
  width: 82%;
  aspect-ratio: 9 / 13;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: #000;
}

.ball-escape-demo-field {
  display: grid;
  place-items: center;
}

.generator-demo-ring {
  --demo-ring-index: 0;
  position: absolute;
  width: var(--demo-ring-size, 56%);
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(
    from var(--demo-ring-angle, 28deg),
    #9a48ff 0 318deg,
    transparent 318deg 360deg
  );
  -webkit-mask: radial-gradient(circle, transparent 0 43%, #000 44% 51%, transparent 52%);
  mask: radial-gradient(circle, transparent 0 43%, #000 44% 51%, transparent 52%);
  filter: drop-shadow(0 0 5px rgba(154, 72, 255, 0.35));
  animation: generator-ring-turn var(--demo-ring-duration, 8s) linear infinite;
}

.generator-demo-ring:nth-child(even) {
  animation-direction: reverse;
}

.generator-demo-ball,
.pong-demo-ball {
  position: absolute;
  z-index: 2;
  width: 11px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.72);
}

.generator-demo-ball {
  animation: generator-ball-bounce 3.4s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite alternate;
}

.pong-demo-field {
  background:
    linear-gradient(rgba(154, 72, 255, 0.07), rgba(154, 72, 255, 0.02)),
    #000;
}

.pong-demo-net {
  position: absolute;
  top: 8%;
  bottom: 8%;
  left: 50%;
  border-left: 2px dashed rgba(255, 255, 255, 0.24);
}

.pong-demo-paddle {
  position: absolute;
  top: 40%;
  width: 5px;
  height: 19%;
  border-radius: 3px;
  background: #9a48ff;
  box-shadow: 0 0 12px rgba(154, 72, 255, 0.64);
  animation: pong-paddle-slide 2.8s ease-in-out infinite alternate;
}

.pong-demo-paddle-left {
  left: 10%;
}

.pong-demo-paddle-right {
  right: 10%;
  animation-delay: -1.4s;
}

.pong-demo-ball {
  top: 48%;
  left: 14%;
  animation: pong-ball-rally 3.1s linear infinite;
}

@keyframes generator-ring-turn {
  to { transform: rotate(1turn); }
}

@keyframes generator-ball-bounce {
  0% { transform: translate(-38px, 52px); }
  45% { transform: translate(34px, -62px); }
  100% { transform: translate(-12px, -108px); }
}

@keyframes pong-paddle-slide {
  from { transform: translateY(-34%); }
  to { transform: translateY(68%); }
}

@keyframes pong-ball-rally {
  0% { transform: translate(0, 68px); }
  48% { transform: translate(148px, -74px); }
  52% { transform: translate(148px, -74px); }
  100% { transform: translate(0, 68px); }
}

.interactive-live-page {
  display: grid;
  width: min(1160px, 92vw);
  grid-template-columns: minmax(260px, 0.78fr) minmax(420px, 1.18fr);
  gap: clamp(38px, 6vw, 86px);
  align-items: center;
  margin: 0 auto;
}

.interactive-live-hero-visual {
  display: grid;
  position: relative;
  justify-items: center;
  gap: 16px;
}

.interactive-live-hero-frame {
  display: grid;
  position: relative;
  width: min(330px, 29vw);
  aspect-ratio: 9 / 16;
  grid-template-rows: 1fr 1fr;
  border: 1px solid rgba(255, 255, 255, 0.58);
  background: #000;
  box-shadow:
    0 0 0 1px rgba(154, 72, 255, 0.22) inset,
    0 0 30px rgba(133, 44, 255, 0.2);
  overflow: hidden;
}

.interactive-live-hero-frame.single-game {
  grid-template-rows: 1fr;
}

.interactive-live-hero-game {
  position: relative;
  overflow: hidden;
}

.interactive-live-hero-game.pong {
  border-bottom: 1px solid rgba(154, 72, 255, 0.5);
  background:
    linear-gradient(90deg, transparent 49.6%, rgba(255, 255, 255, 0.18) 49.6% 50.4%, transparent 50.4%),
    #020202;
}

.interactive-live-hero-game.escape {
  display: grid;
  place-items: center;
  background: radial-gradient(circle at center, rgba(154, 72, 255, 0.09), transparent 54%), #000;
}

.interactive-live-hero-game.brick {
  border-top: 1px solid rgba(255, 107, 53, 0.45);
  background: radial-gradient(circle at 50% 75%, rgba(255, 107, 53, 0.08), transparent 45%), #030203;
}

.interactive-live-hero-brick-wall {
  position: absolute;
  top: 14%;
  left: 12%;
  width: 76%;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
}

.interactive-live-hero-brick-wall i {
  display: block;
  height: 8px;
  background: #ff6b35;
  box-shadow: 0 0 7px rgba(255, 107, 53, 0.5);
}

.interactive-live-hero-brick-wall i:nth-child(5n + 1),
.interactive-live-hero-brick-wall i:nth-child(5n + 4) { background: #ff4d8d; }

.interactive-live-hero-brick-paddle {
  position: absolute;
  left: 36%;
  bottom: 11%;
  width: 28%;
  height: 5px;
  background: #ff6b35;
  box-shadow: 0 0 12px rgba(255, 107, 53, 0.7);
}

.interactive-live-hero-ball.brick {
  top: 62%;
  left: 48%;
}

.interactive-live-hero-paddle,
.interactive-live-hero-ball,
.interactive-live-hero-ring {
  position: absolute;
  display: block;
}

.interactive-live-hero-paddle {
  top: 34%;
  width: 6px;
  height: 30%;
  border-radius: 3px;
  background: #9a48ff;
  box-shadow: 0 0 15px rgba(154, 72, 255, 0.78);
}

.interactive-live-hero-paddle.left { left: 11%; }
.interactive-live-hero-paddle.right { right: 11%; }

.interactive-live-hero-ball {
  width: 13px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 16px rgba(255, 255, 255, 0.8);
}

.interactive-live-hero-ball.pong {
  top: 48%;
  left: 48%;
}

.interactive-live-hero-ring {
  width: 66%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(from 28deg, #9a48ff 0 324deg, transparent 324deg 360deg);
  -webkit-mask: radial-gradient(circle, transparent 0 46%, #000 47% 51%, transparent 52%);
  mask: radial-gradient(circle, transparent 0 46%, #000 47% 51%, transparent 52%);
  filter: drop-shadow(0 0 9px rgba(154, 72, 255, 0.66));
}

.interactive-live-hero-ball.escape {
  top: 48%;
  left: 48%;
}

.interactive-live-hero-live {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 1px solid #9a48ff;
  border-radius: 999px;
  background: #08010c;
  box-shadow: 0 0 24px rgba(154, 72, 255, 0.62);
  color: #fff;
  padding: 8px 15px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.2em;
  transform: translate(-50%, -50%);
}

.interactive-live-hero-caption,
.interactive-live-kicker,
.interactive-live-feature,
.interactive-live-activation-panel,
.interactive-live-actions,
.interactive-live-feedback,
.interactive-live-footnote {
  font-family: Arial, Helvetica, sans-serif;
}

.interactive-live-hero-caption {
  color: #bdbdbd;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.14em;
}

.interactive-live-copy {
  display: grid;
  gap: 18px;
  align-content: center;
}

.interactive-live-kicker {
  color: #9a48ff;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.14em;
}

.interactive-live-heading {
  margin: 0;
  color: #fff;
  font-size: clamp(58px, 6.4vw, 92px);
  font-weight: 500;
  line-height: 0.82;
  text-transform: uppercase;
  white-space: pre-line;
}

.interactive-live-lead {
  max-width: 58ch;
  margin: 0;
  color: #d2d2d2;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  line-height: 1.45;
}

.interactive-live-features {
  display: grid;
  gap: 1px;
  border: 1px solid #292929;
  background: #292929;
}

.interactive-live-feature {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  background: #050505;
  padding: 14px 16px;
}

.interactive-live-feature-number {
  color: #9a48ff;
  font-size: 12px;
  font-weight: 900;
}

.interactive-live-feature-copy {
  display: grid;
  gap: 4px;
}

.interactive-live-feature-label,
.interactive-live-feature-detail {
  display: block;
}

.interactive-live-feature-label {
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.interactive-live-feature-detail {
  color: #aaa;
  font-size: 12px;
  line-height: 1.35;
}

.interactive-live-activation-panel {
  display: grid;
  gap: 8px;
  border: 1px solid rgba(154, 72, 255, 0.78);
  background: rgba(154, 72, 255, 0.08);
  box-shadow: 0 0 26px rgba(133, 44, 255, 0.15);
  padding: 20px;
}

.interactive-live-activation-label {
  color: #c7a0ff;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.14em;
}

.interactive-live-activation-code {
  color: #fff;
  font-size: clamp(36px, 4.4vw, 58px);
  font-weight: 900;
  letter-spacing: 0.12em;
  line-height: 1;
}

.interactive-live-activation-note {
  color: #bcbcbc;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
}

.interactive-live-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.interactive-live-primary,
.interactive-live-secondary {
  min-width: 220px;
}

.interactive-live-feedback {
  border-left: 3px solid #ff5b74;
  background: rgba(255, 91, 116, 0.08);
  color: #ff9aab;
  padding: 12px 14px;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.4;
}

.interactive-live-feedback.success {
  border-color: #69e7a7;
  background: rgba(105, 231, 167, 0.08);
  color: #91f2bd;
}

.interactive-live-footnote {
  max-width: 64ch;
  margin: 0;
  color: #777;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.45;
  text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce) {
  .generator-demo-ring,
  .generator-demo-ball,
  .pong-demo-paddle,
  .pong-demo-ball {
    animation: none;
  }
}

@media (max-width: 760px) {
  .mode-card.is-distant {
    opacity: 0;
    pointer-events: none;
  }

  .interactive-live-page {
    width: calc(100vw - 28px);
    grid-template-columns: 1fr;
    gap: 20px;
    padding-bottom: 24px;
  }

  .interactive-live-hero-visual {
    order: 0;
  }

  .interactive-live-hero-frame {
    width: min(42vw, 180px);
  }

  .interactive-live-hero-caption {
    display: none;
  }

  .interactive-live-copy {
    order: 1;
    gap: 14px;
    text-align: left;
  }

  .interactive-live-heading {
    font-size: clamp(48px, 16vw, 68px);
  }

  .interactive-live-lead {
    font-size: 15px;
  }

  .interactive-live-actions {
    display: grid;
  }

  .interactive-live-primary,
  .interactive-live-secondary {
    width: 100%;
    min-width: 0;
  }

  .interactive-live-activation-code {
    font-size: clamp(32px, 10.5vw, 46px);
  }

  body[data-step="inbox"] .creator-access-panel {
    width: calc(100vw - 28px);
    margin-bottom: 12px;
  }

  body[data-step="inbox"] .creator-access-summary {
    min-height: 48px;
    padding: 0 13px;
  }

  body[data-step="inbox"] .creator-access-body {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 15px;
  }

  body[data-step="inbox"] .creator-access-form,
  body[data-step="inbox"] .creator-access-feedback,
  body[data-step="inbox"] .creator-access-expiry,
  body[data-step="inbox"] .creator-access-keep,
  body[data-step="inbox"] .creator-access-panel.active .creator-access-title,
  body[data-step="inbox"] .creator-access-panel.active .creator-access-copy,
  body[data-step="inbox"] .creator-access-panel.active .creator-access-note {
    grid-column: 1;
    grid-row: auto;
  }

  body[data-step="inbox"] .creator-access-title {
    font-size: 24px;
  }

  body[data-step="inbox"] .creator-access-form {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 6px;
    border: 0;
    gap: 8px;
  }

  body[data-step="inbox"] .creator-access-input {
    border: 1px solid #393939;
    font-size: 12px;
  }

  body[data-step="inbox"] .creator-access-submit {
    width: 100%;
    border: 1px solid #c49cff;
  }

  body[data-step="inbox"] .creator-access-expiry {
    margin-top: 4px;
    color: #c49cff;
    font-size: 10px;
    text-align: left;
  }

  body[data-step="inbox"] .creator-access-keep {
    width: 100%;
    min-width: 0;
    justify-self: stretch;
    margin-top: 6px;
  }
}

/* Account status uses one consistent UI treatment across landing, products, and navigation. */
.account-button,
.mode-account-button,
.app-menu-account {
  border-color: #a958ff;
  background: #5e199f;
  box-shadow: 0 0 20px rgba(133, 44, 255, 0.25);
  color: #fff;
  font-family: var(--font-ui);
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}

.account-button:hover,
.account-button:focus-visible,
.mode-account-button:hover,
.mode-account-button:focus-visible,
.app-menu-account:hover,
.app-menu-account:focus-visible {
  border-color: #c48aff;
  background: #5e199f;
  box-shadow: 0 0 26px rgba(133, 44, 255, 0.38);
  color: #fff;
}

.account-button .account-action-mark,
.mode-account-button .account-action-mark {
  border-color: rgba(255, 255, 255, 0.58);
}

body[data-creator-access="active"] .account-button,
body[data-creator-access="active"] .mode-account-button,
body[data-creator-access="active"] .app-menu-account {
  border-color: var(--brand-gold);
  background: var(--brand-gold);
  box-shadow: 0 0 20px var(--brand-gold-glow);
  color: var(--brand-gold-ink);
}

body[data-creator-access="active"] .account-button:hover,
body[data-creator-access="active"] .account-button:focus-visible,
body[data-creator-access="active"] .mode-account-button:hover,
body[data-creator-access="active"] .mode-account-button:focus-visible,
body[data-creator-access="active"] .app-menu-account:hover,
body[data-creator-access="active"] .app-menu-account:focus-visible {
  border-color: var(--brand-gold-highlight);
  background: var(--brand-gold-highlight);
  box-shadow: 0 0 24px rgba(214, 168, 63, 0.32);
  color: var(--brand-gold-ink);
}

.account-button[data-account-action="buy"],
.account-button[data-account-action="pro"],
.mode-account-button[data-account-action="buy"],
.mode-account-button[data-account-action="pro"] {
  border-color: var(--brand-gold);
  background: var(--brand-gold);
  box-shadow: 0 0 20px var(--brand-gold-glow);
  color: var(--brand-gold-ink);
}

.account-button[data-account-action="buy"]:hover,
.account-button[data-account-action="buy"]:focus-visible,
.account-button[data-account-action="pro"]:hover,
.account-button[data-account-action="pro"]:focus-visible,
.mode-account-button[data-account-action="buy"]:hover,
.mode-account-button[data-account-action="buy"]:focus-visible,
.mode-account-button[data-account-action="pro"]:hover,
.mode-account-button[data-account-action="pro"]:focus-visible {
  border-color: var(--brand-gold-highlight);
  background: var(--brand-gold-highlight);
  box-shadow: 0 0 24px rgba(214, 168, 63, 0.32);
  color: var(--brand-gold-ink);
}

.account-button[data-account-action="buy"] .account-action-mark,
.account-button[data-account-action="pro"] .account-action-mark,
.mode-account-button[data-account-action="buy"] .account-action-mark,
.mode-account-button[data-account-action="pro"] .account-action-mark {
  border-color: rgba(9, 7, 4, 0.48);
}

/* Products-only mobile carousel. Other creator and configuration decks keep their current layout. */
@media (max-width: 760px) {
  body[data-mobile-nav="back"] .app-menu-trigger {
    display: grid;
  }

  .app-menu-trigger[data-nav-mode="back"] > span {
    position: absolute;
    top: 21px;
    left: 11px;
    width: 23px;
    height: 2px;
    background: #a958ff;
    transform-origin: left center;
  }

  .app-menu-trigger[data-nav-mode="back"] > span:nth-child(1) {
    width: 13px;
    transform: translateY(0) rotate(-42deg);
  }

  .app-menu-trigger[data-nav-mode="back"] > span:nth-child(2) {
    transform: none;
  }

  .app-menu-trigger[data-nav-mode="back"] > span:nth-child(3) {
    width: 13px;
    transform: translateY(0) rotate(42deg);
  }

  body[data-mobile-nav="back"] .wizard-topbar {
    display: none;
  }

  body[data-mobile-nav="back"] .wizard-shell,
  body[data-mobile-nav="back"] .wizard-root {
    display: block;
    width: 100%;
    height: var(--app-height);
    min-height: var(--app-height);
    overflow: hidden;
    padding: 0;
  }

  body[data-step="mode"][data-mode-surface="products"] {
    height: var(--app-height);
    overflow: hidden;
  }

  body[data-step="mode"][data-mode-surface="products"] .wizard-root {
    display: block;
    width: 100%;
    height: var(--app-height);
    min-height: var(--app-height);
    overflow: hidden;
  }

  .products-carousel-screen {
    --mode-active-top: clamp(28px, 5svh, 42px);
    --mode-side-top: clamp(68px, 11.4svh, 98px);
    --products-card-width: min(66vw, 276px, calc((var(--app-height) - 260px) * 0.5625));
    --products-card-height: calc(var(--products-card-width) * 1.777778);
    --products-stage-height: calc(var(--products-card-height) + var(--mode-active-top));
    display: grid;
    position: relative;
    width: 100%;
    height: var(--app-height);
    min-height: var(--app-height);
    grid-template-rows: auto var(--products-stage-height) 64px;
    align-content: start;
    gap: clamp(4px, 1svh, 9px);
    overflow: hidden;
    padding: calc(env(safe-area-inset-top, 0px) + 80px) 0 calc(env(safe-area-inset-bottom, 0px) + 9px);
    background: #000;
    isolation: isolate;
  }

  .products-carousel-account {
    top: calc(env(safe-area-inset-top, 0px) + 18px);
    right: clamp(18px, 6vw, 28px);
  }

  .products-carousel-copy {
    display: grid;
    width: min(100% - 40px, 440px);
    min-height: 48px;
    align-content: end;
    justify-self: center;
    gap: 3px;
    text-align: center;
  }

  .products-carousel-title,
  .products-carousel-subtitle {
    margin: 0;
  }

  .products-carousel-title {
    overflow: visible;
    color: #f5f5f2;
    font-family: var(--font-display);
    font-size: clamp(27px, 8.8vw, 39px);
    font-weight: 400;
    letter-spacing: -0.035em;
    line-height: 0.98;
    text-overflow: clip;
    white-space: nowrap;
  }

  .products-carousel-subtitle {
    color: #a8a8a8;
    font-family: var(--font-ui);
    font-size: clamp(9px, 2.7vw, 11px);
    font-weight: 800;
    letter-spacing: 0.15em;
    line-height: 1;
    text-transform: uppercase;
  }

  .products-carousel-viewport {
    --mode-card-width: var(--products-card-width);
    --mode-preview-ratio: 9 / 16;
    --mode-side-offset: min(56vw, 230px);
    display: block;
    position: relative;
    width: 100%;
    height: var(--products-stage-height);
    min-height: var(--products-stage-height);
    overflow: hidden;
    outline: 0;
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
  }

  .products-carousel-viewport.is-dragging {
    cursor: grabbing;
  }

  .products-carousel-viewport:focus-visible::after {
    position: absolute;
    inset: 2px 8px;
    border: 1px solid rgba(169, 88, 255, 0.78);
    content: "";
    pointer-events: none;
  }

  .products-carousel-track {
    display: flex;
    width: max-content;
    align-items: center;
    gap: clamp(6px, 2vw, 10px);
    isolation: isolate;
    transform: translate3d(0, 0, 0);
    will-change: transform;
  }

  .products-carousel-viewport.is-looping .products-carousel-track {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
  }

  .products-carousel-card,
  .products-carousel-card:hover,
  .products-carousel-card:focus-visible {
    display: block;
    width: var(--products-card-width);
    min-width: var(--products-card-width);
    flex: 0 0 var(--products-card-width);
    border: 0;
    outline: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
    opacity: 1;
    transform: none;
    transition:
      transform 320ms cubic-bezier(0.18, 0.84, 0.22, 1),
      top 320ms cubic-bezier(0.18, 0.84, 0.22, 1),
      filter 220ms ease;
    touch-action: none;
  }

  .products-carousel-viewport.is-looping .products-carousel-card {
    position: absolute;
    top: calc(var(--products-stage-height) - var(--products-card-height) - 8px);
    left: 0;
    z-index: 1;
    transform-origin: center center;
    will-change: transform;
  }

  .products-carousel-viewport.is-clone-track .products-carousel-track {
    display: flex;
    position: relative;
    width: max-content;
    height: 100%;
    align-items: flex-start;
    gap: 0;
  }

  .products-carousel-viewport.is-clone-track .products-carousel-card,
  .products-carousel-viewport.is-clone-track .products-carousel-card:hover,
  .products-carousel-viewport.is-clone-track .products-carousel-card:focus-visible {
    position: relative;
    top: calc(var(--products-stage-height) - var(--products-card-height) - 8px);
    left: auto;
    z-index: auto;
    flex: 0 0 var(--products-card-width);
    opacity: 1;
    transform: none;
    transition: none;
    mix-blend-mode: normal;
    will-change: auto;
  }

  .products-carousel-card.is-active,
  .products-carousel-card.is-active:hover,
  .products-carousel-card.is-active:focus-visible {
    z-index: 2;
    opacity: 1;
    transform: translateX(-50%);
  }

  .products-carousel-card.is-left,
  .products-carousel-card.is-left:hover,
  .products-carousel-card.is-left:focus-visible {
    top: var(--mode-side-top);
    transform: translateX(calc(-50% - var(--mode-side-offset))) scale(0.66);
  }

  .products-carousel-card.is-right,
  .products-carousel-card.is-right:hover,
  .products-carousel-card.is-right:focus-visible {
    top: var(--mode-side-top);
    transform: translateX(calc(-50% + var(--mode-side-offset))) scale(0.66);
  }

  .products-carousel-card::after {
    position: absolute;
    z-index: 3;
    top: 0;
    right: var(--carousel-clip-right, 0px);
    bottom: 0;
    left: var(--carousel-clip-left, 0px);
    border: 1px solid #a958ff;
    border-radius: 2px;
    content: "";
    pointer-events: none;
  }

  .products-carousel-card .mode-preview,
  .products-carousel-card:hover .mode-preview,
  .products-carousel-card:focus-visible .mode-preview,
  .products-carousel-card.is-active .mode-preview {
    display: block;
    position: relative;
    width: 100%;
    height: auto;
    aspect-ratio: 9 / 16;
    border: 0;
    border-radius: 2px;
    background: #020202;
    box-shadow: none;
    overflow: hidden;
  }

  body[data-mode-surface="products"] .products-carousel-card .mode-preview,
  body[data-mode-surface="products"] .products-carousel-card.primary .mode-preview,
  body[data-mode-surface="products"] .products-carousel-card.is-active .mode-preview,
  body[data-mode-surface="products"] .products-carousel-card.primary.is-active .mode-preview {
    border-color: #a958ff;
    box-shadow: none;
  }

  .products-carousel-card .mode-preview > .mode-preview-video {
    position: absolute;
    z-index: 1;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 1px;
    opacity: 1;
    filter: none;
  }

  .products-carousel-card .mode-preview-clip {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: 50% 50%;
  }

  .products-carousel-card .mode-preview-shell,
  .products-carousel-card .mode-preview-window,
  .products-carousel-card .mode-preview-word,
  .products-carousel-card .mode-preview-rule {
    display: none;
  }

  .products-carousel-indicators {
    display: flex;
    width: 100%;
    height: 64px;
    min-height: 64px;
    align-items: center;
    justify-content: center;
    gap: 24px;
    transform: translateY(-8px);
  }

  .products-carousel-indicator {
    display: block;
    position: relative;
    width: 16px;
    height: 16px;
    border: 0;
    border-radius: 50%;
    padding: 0;
    cursor: pointer;
    transition:
      background-color 90ms linear,
      box-shadow 90ms linear,
      transform 160ms ease;
  }

  .products-carousel-indicator::before {
    position: absolute;
    inset: -12px;
    content: "";
  }

  .products-carousel-indicator.active {
    transform: scale(1.22);
  }

  .products-carousel-indicator-line {
    display: block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #a958ff;
    opacity: calc(0.48 + (0.52 * var(--indicator-progress, 0)));
    transform: scale(calc(0.86 + (0.32 * var(--indicator-progress, 0))));
    transition: opacity 90ms linear;
  }

  .products-carousel-indicator:focus-visible {
    outline: 0;
  }

  .products-carousel-indicator:focus-visible .products-carousel-indicator-line {
    box-shadow: 0 0 0 1px #000, 0 0 0 2px rgba(169, 88, 255, 0.72);
  }

  .mobile-carousel-screen .mobile-carousel-preview {
    display: block;
    position: relative;
    width: 100%;
    height: auto;
    aspect-ratio: 9 / 16;
    border: 0;
    border-radius: 2px;
    background: #020202;
    box-shadow: none;
    overflow: hidden;
    pointer-events: none;
  }

  .mobile-carousel-screen {
    align-items: stretch;
    justify-content: stretch;
    justify-items: stretch;
    pointer-events: auto;
  }

  .mobile-carousel-screen .mobile-carousel-account {
    pointer-events: auto;
  }

  .mobile-carousel-screen .mobile-carousel-viewport {
    --theme-card-shift-y: 0px;
    --theme-active-top: var(--mode-active-top);
    --theme-side-top: var(--mode-side-top);
    --theme-card-width: var(--products-card-width);
    width: 100%;
    min-width: 100%;
  }

  .mobile-carousel-screen .mobile-carousel-card .mobile-carousel-preview,
  .mobile-carousel-screen .mobile-carousel-card.is-active .mobile-carousel-preview,
  .mobile-carousel-screen .mobile-carousel-card.is-left .mobile-carousel-preview,
  .mobile-carousel-screen .mobile-carousel-card.is-right .mobile-carousel-preview {
    border: 0;
    box-shadow: none;
  }

  .mobile-carousel-screen .mobile-carousel-card::after {
    border-color: #a958ff;
    box-shadow: none;
  }

  .mobile-carousel-screen .mobile-carousel-indicators {
    width: 100%;
    min-width: 100%;
    margin: 0;
  }

  .mobile-carousel-screen .mobile-carousel-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin: 0;
  }

  .mobile-carousel-screen .mobile-carousel-indicator {
    display: block;
    width: 16px;
    height: 16px;
    min-height: 16px;
    flex: 0 0 16px;
    border: 0;
    border-radius: 50%;
    padding: 0;
  }

  .mobile-carousel-screen .mobile-carousel-indicator.active {
    transform: scale(1.22);
  }

  .mobile-carousel-screen .theme-mobile-ready,
  .mobile-carousel-screen .theme-mobile-copy,
  .mobile-carousel-screen .theme-mobile-cta-spacer {
    display: none;
  }

  .story-carousel-mobile-screen {
    grid-template-rows: auto var(--products-stage-height) 78px;
  }

  .story-carousel-mobile-controls {
    height: 78px;
    min-height: 78px;
    flex-direction: column;
    gap: 4px;
    transform: none;
  }

  .mobile-carousel-secondary-action {
    min-height: 25px;
    border: 0;
    border-bottom: 1px solid rgba(169, 88, 255, 0.74);
    background: transparent;
    color: #bfbfbf;
    padding: 4px 7px 3px;
    cursor: pointer;
    font-family: var(--font-ui);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.1em;
  }

}

@media (max-width: 760px) and (max-height: 620px) {
  .products-carousel-screen {
    --mode-active-top: clamp(24px, 4.4svh, 34px);
    --mode-side-top: clamp(60px, 10.2svh, 78px);
    --products-card-width: min(64vw, calc((var(--app-height) - 190px) * 0.5625));
    --products-card-height: calc(var(--products-card-width) * 1.777778);
    --products-stage-height: calc(var(--products-card-height) + var(--mode-active-top));
    grid-template-rows: auto var(--products-stage-height) 44px;
    gap: 3px;
    padding-top: calc(env(safe-area-inset-top, 0px) + 73px);
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 7px);
  }

  .products-carousel-indicators {
    height: 44px;
    min-height: 44px;
  }

  .products-carousel-indicator {
    width: 14px;
    height: 14px;
  }

  .products-carousel-copy {
    min-height: 42px;
  }

  .products-carousel-title {
    font-size: clamp(24px, 8.2vw, 31px);
  }

}

@media (prefers-reduced-motion: reduce) {
  .products-carousel-card,
  .products-carousel-indicator-line {
    transition: none;
  }
}

/* Locked mobile visual system: black / white / Slop purple / Creator gold. */
.purchase-action,
button.purchase-action,
a.purchase-action {
  border-color: var(--brand-gold) !important;
  background: var(--brand-gold) !important;
  box-shadow: 0 0 20px var(--brand-gold-glow) !important;
  color: var(--brand-gold-ink) !important;
}

.purchase-action:hover,
.purchase-action:focus-visible,
button.purchase-action:hover,
button.purchase-action:focus-visible,
a.purchase-action:hover,
a.purchase-action:focus-visible {
  border-color: var(--brand-gold-highlight) !important;
  background: var(--brand-gold-highlight) !important;
  box-shadow: 0 0 24px rgba(214, 168, 63, 0.3) !important;
  color: var(--brand-gold-ink) !important;
}

@media (max-width: 760px) {
  body[data-mobile-nav="menu"] .app-menu-trigger,
  body[data-mobile-nav="back"] .app-menu-trigger {
    display: grid;
  }

  body:not([data-step="mode"]):not([data-step="generator"]) .wizard-topbar {
    position: fixed;
    z-index: 90;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    min-height: 0;
    margin: 0;
    pointer-events: none;
  }

  body:not([data-step="mode"]):not([data-step="generator"]) .wizard-topbar .back-button,
  body:not([data-step="mode"]):not([data-step="generator"]) .wizard-topbar .monetize-button,
  body:not([data-step="mode"]):not([data-step="generator"]) .wizard-topbar .progress-mark,
  body:not([data-step="mode"]):not([data-step="generator"]) .wizard-topbar .status-mark {
    display: none !important;
  }

  body[data-step="affiliate"] #account-button.account-button,
  body[data-step="liveGamesApp"] #account-button.account-button,
  body[data-step="storiesApp"] #account-button.account-button,
  body[data-step="creatorOffer"] #account-button.account-button,
  body[data-step="billingReturn"] #account-button.account-button,
  body[data-step="confirm"] #account-button.account-button,
  body[data-step="final"] #account-button.account-button,
  body[data-step="output"] #account-button.account-button,
  body[data-step="inbox"] #account-button.account-button,
  body[data-step="storiesConfirm"] #account-button.account-button,
  body[data-step="storiesOutput"] #account-button.account-button {
    position: fixed;
    z-index: 91;
    top: max(18px, env(safe-area-inset-top, 0px));
    right: max(18px, env(safe-area-inset-right, 0px));
    display: inline-flex !important;
    width: 108px;
    min-width: 108px;
    max-width: 108px;
    height: 42px;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: 3px;
    padding: 6px 9px;
    pointer-events: auto;
    font-family: var(--font-ui);
    font-size: 10px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.02em;
  }

  body[data-step="affiliate"] #account-button .account-action-mark,
  body[data-step="liveGamesApp"] #account-button .account-action-mark,
  body[data-step="storiesApp"] #account-button .account-action-mark,
  body[data-step="creatorOffer"] #account-button .account-action-mark,
  body[data-step="billingReturn"] #account-button .account-action-mark,
  body[data-step="confirm"] #account-button .account-action-mark,
  body[data-step="final"] #account-button .account-action-mark,
  body[data-step="output"] #account-button .account-action-mark,
  body[data-step="inbox"] #account-button .account-action-mark,
  body[data-step="storiesConfirm"] #account-button .account-action-mark,
  body[data-step="storiesOutput"] #account-button .account-action-mark {
    width: 25px;
    height: 25px;
    flex: 0 0 25px;
  }

  body[data-step="affiliate"] .wizard-shell,
  body[data-step="liveGamesApp"] .wizard-shell,
  body[data-step="storiesApp"] .wizard-shell,
  body[data-step="billingReturn"] .wizard-shell,
  body[data-step="confirm"] .wizard-shell,
  body[data-step="final"] .wizard-shell,
  body[data-step="output"] .wizard-shell,
  body[data-step="inbox"] .wizard-shell,
  body[data-step="storiesConfirm"] .wizard-shell,
  body[data-step="storiesOutput"] .wizard-shell,
  body[data-step="auth"] .wizard-shell {
    width: 100%;
    min-height: var(--app-height);
    padding-top: calc(env(safe-area-inset-top, 0px) + 76px) !important;
    padding-right: 18px;
    padding-left: 18px;
  }

  body[data-step="affiliate"] .wizard-root,
  body[data-step="liveGamesApp"] .wizard-root,
  body[data-step="storiesApp"] .wizard-root,
  body[data-step="billingReturn"] .wizard-root,
  body[data-step="confirm"] .wizard-root,
  body[data-step="final"] .wizard-root,
  body[data-step="output"] .wizard-root,
  body[data-step="inbox"] .wizard-root,
  body[data-step="storiesConfirm"] .wizard-root,
  body[data-step="storiesOutput"] .wizard-root,
  body[data-step="auth"] .wizard-root {
    width: min(100%, 520px);
    margin-right: auto;
    margin-left: auto;
  }

  body[data-step="liveGamesApp"] .wizard-root > .page-title,
  body[data-step="storiesApp"] .wizard-root > .page-title,
  body[data-step="creatorOffer"] .wizard-root > .page-title {
    display: none;
  }

  body[data-step="liveGamesApp"] {
    height: auto;
    min-height: var(--app-height);
    overflow-x: hidden;
    overflow-y: auto;
  }

  body[data-step="liveGamesApp"] .wizard-shell {
    height: auto;
    overflow: visible;
    padding-bottom: max(28px, env(safe-area-inset-bottom, 0px));
  }

  body[data-step="liveGamesApp"] .wizard-root {
    display: block;
    overflow: visible;
  }

  .interactive-live-page {
    display: grid;
    width: 100%;
    gap: 14px;
    align-items: start;
    padding: 0 0 20px;
  }

  .interactive-live-copy {
    display: contents;
  }

  .interactive-live-kicker {
    order: 1;
    color: #a958ff;
    font-family: var(--font-ui);
    font-size: 10px;
    text-align: center;
  }

  .interactive-live-heading {
    order: 2;
    max-width: 7ch;
    margin: 0 auto;
    font-family: var(--font-display);
    font-size: clamp(46px, 14vw, 58px);
    font-weight: 400;
    line-height: 0.86;
    text-align: center;
    letter-spacing: -0.035em;
  }

  .interactive-live-lead {
    order: 3;
    max-width: 38ch;
    margin: 0 auto;
    color: #d8d8d8;
    font-family: var(--font-display);
    font-size: 15px;
    line-height: 1.38;
    text-align: center;
  }

  .interactive-live-hero-visual {
    order: 4;
    width: 100%;
    gap: 0;
  }

  .interactive-live-hero-frame {
    width: min(132px, 36vw);
    border-color: #a958ff;
    box-shadow: none;
  }

  .interactive-live-hero-paddle,
  .interactive-live-hero-ring {
    box-shadow: none;
  }

  .interactive-live-hero-live {
    box-shadow: none;
  }

  .interactive-live-activation-panel {
    order: 4;
    width: 100%;
    border-color: #a958ff;
    background: #0b0610;
    box-shadow: none;
    padding: 18px;
    text-align: center;
  }

  .interactive-live-activation-code {
    color: var(--brand-gold);
    font-size: clamp(32px, 10vw, 42px);
    letter-spacing: 0.1em;
  }

  .interactive-live-actions {
    order: 5;
    display: grid;
    width: 100%;
    gap: 8px;
  }

  .interactive-live-actions .primary-action,
  .interactive-live-actions .secondary-action {
    min-height: 52px;
    font-family: var(--font-ui);
    font-size: 16px;
  }

  .interactive-live-features {
    order: 6;
    border-color: #242424;
    background: #242424;
  }

  .interactive-live-feature {
    padding: 13px 14px;
  }

  .interactive-live-feature-number {
    color: var(--brand-gold);
  }

  .interactive-live-feedback {
    order: 7;
  }

  .interactive-live-footnote {
    order: 8;
    max-width: 42ch;
    margin: 0 auto;
    color: #999;
    font-size: 10px;
    text-align: center;
  }

  .interactive-live-page.is-activation .interactive-live-hero-visual {
    display: none;
  }

  .interactive-live-page.is-activation .interactive-live-heading {
    max-width: 8ch;
  }

  .stories-mobile-paywall {
    min-height: 0 !important;
    align-content: start !important;
    gap: 8px;
    padding: 0 4px max(18px, env(safe-area-inset-bottom, 0px));
  }

  .stories-mobile-paywall-copy {
    order: 1;
    gap: 3px;
  }

  .stories-mobile-paywall-preview-wrap {
    order: 2;
  }

  .stories-mobile-paywall-points {
    order: 3;
  }

  .stories-mobile-paywall-actions {
    order: 4;
  }

  .stories-mobile-paywall-kicker {
    color: #a958ff;
    font-size: 9px;
  }

  .stories-mobile-paywall-heading {
    max-width: 13ch;
    margin: 0 auto;
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 400;
    line-height: 0.94;
    letter-spacing: -0.025em;
  }

  .stories-mobile-paywall-text {
    max-width: 40ch;
    margin: 0 auto;
    color: #d4d4d4;
    font-size: 11px;
    line-height: 1.32;
  }

  .stories-mobile-paywall-point {
    min-height: 48px;
    border-color: rgba(169, 88, 255, 0.7);
  }

  .stories-mobile-paywall-point-label {
    color: var(--brand-gold);
  }

  .stories-mobile-paywall-cta {
    min-height: 52px !important;
    font-size: 16px !important;
  }

  .creator-offer-screen {
    width: 100%;
  }

  .creator-offer-heading {
    font-family: var(--font-display);
    font-weight: 400;
    letter-spacing: -0.025em;
  }

  .creator-offer-kicker,
  .creator-offer-product-detail,
  .creator-offer-plan-copy,
  .creator-offer-utility,
  .checkout-identity-note {
    font-family: var(--font-ui);
  }

  .creator-offer-plan {
    border-top-color: rgba(214, 168, 63, 0.7);
    border-bottom-color: rgba(214, 168, 63, 0.7);
  }

  .creator-offer-price-value {
    color: var(--brand-gold);
  }

  button.creator-offer-buy.purchase-action {
    font-family: var(--font-ui);
  }

  .affiliate-screen {
    width: 100%;
    max-width: 520px;
  }

  .affiliate-kicker,
  .affiliate-commission-copy strong,
  .affiliate-path-number,
  .affiliate-link-kicker {
    color: #a958ff;
  }

  .affiliate-title,
  .affiliate-commission-number {
    font-family: var(--font-display);
    font-weight: 400;
  }

  .affiliate-commission-number {
    color: var(--brand-gold);
  }

  .affiliate-lead,
  .affiliate-panel-note,
  .affiliate-terms-note,
  .affiliate-path-copy span {
    font-size: 12px;
    line-height: 1.45;
  }

  .affiliate-signin-button,
  .affiliate-connect-button,
  .affiliate-share-button,
  .affiliate-download-button {
    border-color: #a958ff !important;
    background: #5e199f !important;
    color: #fff !important;
  }

  .auth-title,
  .page-title,
  .summary-value,
  .output-intro-title {
    font-family: var(--font-display);
  }

  body[data-step="auth"] .wizard-root {
    justify-content: start;
    padding-top: 8px;
  }

  .auth-screen {
    gap: 16px;
  }

  .auth-box {
    border-color: rgba(169, 88, 255, 0.8);
    box-shadow: none;
  }

  .auth-submit {
    border-color: #a958ff;
    background: #5e199f;
    box-shadow: none;
  }

  .final-check-note-title {
    color: var(--brand-gold);
  }

  .creation-wordmark {
    font-family: var(--font-display);
    font-size: clamp(34px, 10vw, 46px) !important;
    letter-spacing: -0.04em;
  }

  body[data-step="inbox"] .generation-card-mark-word,
  body[data-step="inbox"] .generation-empty-mark {
    font-size: 8px;
    line-height: 1.15;
    letter-spacing: 0.05em;
    overflow-wrap: anywhere;
  }

  body[data-step="inbox"] .generation-status-pill[data-tone="ready"],
  body[data-step="inbox"] .generation-card[data-status="ready"] .generation-status-pill {
    color: var(--brand-gold);
  }
}

/* Scrolling is the last-resort fallback for unusually short mobile viewports.
   This must follow the shared back-navigation shell, which normally locks the
   app to one screen. */
@media (max-width: 760px) and (max-height: 600px) {
  body[data-step="creatorOffer"] {
    height: auto;
    min-height: var(--app-height);
    overflow-x: hidden;
    overflow-y: auto;
  }

  body[data-step="creatorOffer"][data-mobile-nav="back"] .wizard-shell,
  body[data-step="creatorOffer"][data-mobile-nav="back"] .wizard-root {
    height: auto;
    min-height: var(--app-height);
    overflow: visible;
  }
}

/* Final mobile landing cascade: the app shell becomes the scroll viewport only
   on the landing surface, after every one-screen mobile shell rule above. */
@media (max-width: 760px) {
  body[data-step="mode"][data-mode-surface="landing"] {
    height: var(--app-height);
    min-height: var(--app-height);
    overflow: hidden;
  }

  body[data-step="mode"][data-mode-surface="landing"] .wizard-shell {
    height: var(--app-height);
    min-height: var(--app-height);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scrollbar-width: none;
  }

  body[data-step="mode"][data-mode-surface="landing"] .wizard-shell::-webkit-scrollbar {
    display: none;
  }

  body[data-step="mode"][data-mode-surface="landing"] .wizard-root,
  body[data-step="mode"][data-mode-surface="landing"] .landing-screen {
    height: auto;
    min-height: var(--app-height);
    overflow: visible;
  }

  body[data-step="mode"][data-mode-surface="landing"] .landing-screen {
    display: flex;
    flex-direction: column;
  }

  body[data-step="mode"][data-mode-surface="landing"] .landing-product-tour {
    display: block;
  }
}

body[data-phone-preview="true"][data-step="mode"][data-mode-surface="landing"] .wizard-shell {
  height: 844px;
  min-height: 844px;
  overflow-x: hidden;
  overflow-y: auto;
}

body[data-phone-preview="true"][data-step="mode"][data-mode-surface="landing"] .wizard-root,
body[data-phone-preview="true"][data-step="mode"][data-mode-surface="landing"] .landing-screen {
  height: auto;
  min-height: 844px;
  overflow: visible;
}
/* Affiliate ad studio: mobile-first timeline, scene editor, and player. */
.affiliate-ad-entry {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
  padding: 16px;
  border: 1px solid rgba(169, 88, 255, 0.62);
  border-radius: 18px;
  background:
    radial-gradient(circle at 0 0, rgba(169, 88, 255, 0.18), transparent 48%),
    #080808;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.28);
}

.affiliate-ad-entry.is-locked {
  border-color: #303030;
  background: #070707;
  opacity: 0.78;
}

.affiliate-ad-entry-icon {
  display: grid;
  width: 52px;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid var(--brand-purple);
  border-radius: 50%;
  color: #fff;
  font-family: var(--font-ui);
  font-size: 30px;
  font-weight: 300;
  line-height: 1;
  box-shadow: inset 0 0 24px rgba(169, 88, 255, 0.18);
}

.affiliate-ad-entry.is-locked .affiliate-ad-entry-icon {
  border-color: #4b4b4b;
  color: #737373;
}

.affiliate-ad-entry-copy {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.affiliate-ad-entry-copy strong,
.affiliate-ad-entry-copy > span:last-child,
.affiliate-ad-entry-action {
  font-family: var(--font-ui);
}

.affiliate-ad-entry-copy strong {
  color: #fff;
  font-size: 15px;
  letter-spacing: 0.02em;
}

.affiliate-ad-entry-copy > span:last-child {
  color: #a9a9a9;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
}

.affiliate-ad-entry-action {
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid var(--brand-purple);
  border-radius: 999px;
  background: var(--brand-purple);
  color: #08030d;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.06em;
  cursor: pointer;
}

.affiliate-ad-entry-action:disabled {
  border-color: #393939;
  background: #151515;
  color: #666;
  cursor: not-allowed;
}

body[data-step^="affiliateAd"] .wizard-root,
body[data-step="affiliateAds"] .wizard-root {
  align-items: start;
  overflow-x: hidden;
}

.affiliate-ad-screen {
  display: grid;
  width: min(430px, 100%);
  min-height: calc(var(--app-height) - 94px);
  margin: 0 auto;
  align-content: start;
  color: #fff;
  font-family: var(--font-ui);
}

.affiliate-ad-header {
  display: grid;
  justify-items: center;
  gap: 3px;
  padding: 8px 18px 14px;
  text-align: center;
}

.affiliate-ad-timeline-screen {
  position: relative;
}

.affiliate-ad-timeline-screen .affiliate-ad-header {
  padding-top: 38px;
}

.affiliate-ad-autoplay-toggle {
  position: absolute;
  top: 8px;
  right: 10px;
  z-index: 8;
  display: grid;
  grid-template-columns: auto 29px auto;
  min-height: 27px;
  align-items: center;
  gap: 5px;
  padding: 4px 7px;
  border: 1px solid #343434;
  border-radius: 999px;
  background: rgba(7, 7, 7, 0.92);
  color: #777;
  font-family: var(--font-ui);
  font-size: 6px;
  font-weight: 950;
  letter-spacing: 0.07em;
  backdrop-filter: blur(10px);
}

.affiliate-ad-autoplay-toggle.is-on {
  border-color: rgba(169, 88, 255, 0.72);
  color: #d9b8ff;
}

.affiliate-ad-autoplay-toggle:disabled {
  opacity: 0.42;
}

.affiliate-ad-autoplay-switch {
  position: relative;
  width: 29px;
  height: 16px;
  border: 1px solid #3b3b3b;
  border-radius: 999px;
  background: #171717;
}

.affiliate-ad-autoplay-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #777;
  transition: transform 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.affiliate-ad-autoplay-toggle.is-on .affiliate-ad-autoplay-switch {
  border-color: #6c2ca9;
  background: rgba(169, 88, 255, 0.22);
}

.affiliate-ad-autoplay-toggle.is-on .affiliate-ad-autoplay-knob {
  background: #b46fff;
  box-shadow: 0 0 8px rgba(180, 111, 255, 0.72);
  transform: translateX(13px);
}

.affiliate-ad-autoplay-status {
  min-width: 15px;
  color: currentColor;
}

.affiliate-ad-kicker,
.affiliate-ad-header p,
.affiliate-ad-field-heading,
.affiliate-ad-choice-heading,
.affiliate-ad-estimate,
.affiliate-ad-form-note,
.affiliate-ad-action-note,
.affiliate-ad-disclosure-reminder {
  font-family: var(--font-ui);
  font-weight: 900;
  letter-spacing: 0.08em;
}

.affiliate-ad-kicker {
  color: var(--brand-purple);
  font-size: 9px;
}

.affiliate-ad-header h1 {
  margin: 0;
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(38px, 11vw, 50px);
  font-weight: 400;
  letter-spacing: -0.045em;
  line-height: 0.92;
}

.affiliate-ad-header p {
  margin: 3px 0 0;
  color: #8f8f8f;
  font-size: 9px;
}

.affiliate-ad-feedback {
  margin: 0 18px 12px;
  padding: 10px 12px;
  border-left: 2px solid var(--brand-purple);
  background: rgba(169, 88, 255, 0.1);
  color: #d9c2f2;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.045em;
  line-height: 1.4;
}

.affiliate-ad-carousel-viewport {
  position: relative;
  width: 100%;
  height: min(59svh, 510px);
  min-height: 390px;
  overflow: hidden;
  outline: 0;
  touch-action: pan-y;
  cursor: grab;
}

.affiliate-ad-carousel-viewport.is-dragging {
  cursor: grabbing;
}

.affiliate-ad-carousel-viewport:focus-visible::after {
  position: absolute;
  inset: 6px;
  border: 1px solid var(--brand-purple);
  border-radius: 18px;
  content: "";
  pointer-events: none;
}

.affiliate-ad-carousel-track {
  display: flex;
  width: max-content;
  height: 100%;
  align-items: center;
  gap: 16px;
  will-change: transform;
}

.affiliate-ad-slide {
  position: relative;
  flex: 0 0 auto;
  width: min(68vw, 286px);
  aspect-ratio: 9 / 16;
  opacity: 0.46;
  scale: 0.91;
  transition: opacity 180ms ease, scale 260ms cubic-bezier(.2,.8,.2,1);
}

.affiliate-ad-slide.is-active {
  z-index: 2;
  opacity: 1;
  scale: 1;
}

.affiliate-ad-scene-card,
.affiliate-ad-plus-card {
  position: relative;
  display: grid;
  width: 100%;
  height: 100%;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(169, 88, 255, 0.76);
  border-radius: 22px;
  background: #080808;
  color: #fff;
  text-align: left;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.58), inset 0 0 0 1px rgba(255, 255, 255, 0.035);
  cursor: pointer;
}

.affiliate-ad-slide.is-active .affiliate-ad-scene-card,
.affiliate-ad-slide.is-active .affiliate-ad-plus-card {
  border-color: var(--brand-purple);
  box-shadow: 0 24px 80px rgba(94, 25, 159, 0.28), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.affiliate-ad-scene-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #000;
}

.affiliate-ad-scene-media video,
.affiliate-ad-scene-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.affiliate-ad-scene-media::after {
  position: absolute;
  inset: 58% 0 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.92));
  content: "";
  pointer-events: none;
}

.affiliate-ad-media-veil {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 10px;
  background: rgba(0, 0, 0, 0.67);
  backdrop-filter: blur(4px);
  color: #fff;
}

.affiliate-ad-media-veil.is-failed {
  background: rgba(24, 0, 7, 0.76);
}

.affiliate-ad-media-veil strong,
.affiliate-ad-full-stage > strong,
.affiliate-ad-loading strong {
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.12em;
}

.affiliate-ad-render-mark {
  display: block;
  width: 38px;
  height: 38px;
  border: 2px solid rgba(255, 255, 255, 0.18);
  border-top-color: var(--brand-purple);
  border-radius: 50%;
  color: #fff;
  font-size: 24px;
  line-height: 34px;
  text-align: center;
  animation: affiliate-ad-spin 1s linear infinite;
}

.affiliate-ad-media-veil.is-failed .affiliate-ad-render-mark {
  border-color: #ff5a76;
  animation: none;
}

@keyframes affiliate-ad-spin {
  to { transform: rotate(360deg); }
}

.affiliate-ad-scene-number {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 3;
  display: grid;
  width: 36px;
  height: 24px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.58);
  font-size: 9px;
  font-weight: 950;
  letter-spacing: 0.08em;
  backdrop-filter: blur(10px);
}

.affiliate-ad-scene-meta {
  position: absolute;
  right: 17px;
  bottom: 17px;
  left: 17px;
  z-index: 3;
  display: grid;
  gap: 3px;
}

.affiliate-ad-scene-meta strong {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 400;
  letter-spacing: -0.04em;
}

.affiliate-ad-scene-meta span {
  color: #c5c5c5;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.1em;
}

.affiliate-ad-scene-delete {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 6;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  padding: 0 0 2px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.72);
  color: #fff;
  font-size: 24px;
  font-weight: 300;
  line-height: 1;
  backdrop-filter: blur(10px);
  cursor: pointer;
}

.affiliate-ad-plus-card {
  place-content: center;
  justify-items: center;
  gap: 7px;
  border-style: dashed;
  background:
    radial-gradient(circle at 50% 42%, rgba(169, 88, 255, 0.2), transparent 31%),
    linear-gradient(155deg, #0d0713, #050505 62%);
  text-align: center;
}

.affiliate-ad-plus-mark {
  display: grid;
  width: 72px;
  aspect-ratio: 1;
  margin-bottom: 7px;
  place-items: center;
  border: 1px solid var(--brand-purple);
  border-radius: 50%;
  font-size: 54px;
  font-weight: 200;
  line-height: 1;
  box-shadow: 0 0 46px rgba(169, 88, 255, 0.2), inset 0 0 28px rgba(169, 88, 255, 0.12);
}

.affiliate-ad-plus-card strong {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 400;
  letter-spacing: -0.03em;
}

.affiliate-ad-plus-card small {
  color: #878787;
  font-size: 8px;
  font-weight: 950;
  letter-spacing: 0.12em;
}

.affiliate-ad-carousel-dots {
  display: flex;
  min-height: 12px;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 7px 16px 5px;
}

.affiliate-ad-carousel-dot {
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: #404040;
  transition: width 180ms ease, background 180ms ease;
}

.affiliate-ad-carousel-dot.is-active {
  width: 22px;
  background: var(--brand-purple);
}

.affiliate-ad-project-actions,
.affiliate-ad-full-actions {
  display: grid;
  gap: 8px;
  padding: 4px 18px max(20px, env(safe-area-inset-bottom));
}

.affiliate-ad-project-actions .primary-action,
.affiliate-ad-project-actions .secondary-action,
.affiliate-ad-full-actions .primary-action,
.affiliate-ad-full-actions .secondary-action,
.affiliate-ad-save-video {
  display: grid;
  width: 100%;
  min-height: 48px;
  place-items: center;
  border-radius: 14px;
  text-decoration: none;
}

.affiliate-ad-action-note,
.affiliate-ad-form-note,
.affiliate-ad-disclosure-reminder {
  margin: 0;
  color: #6f6f6f;
  font-size: 8px;
  line-height: 1.45;
  text-align: center;
}

.affiliate-ad-dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: end;
  justify-content: center;
  padding: 18px;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(8px);
}

.affiliate-ad-dialog {
  display: grid;
  width: min(430px, 100%);
  gap: 11px;
  padding: 22px;
  border: 1px solid rgba(255, 90, 118, 0.6);
  border-radius: 22px;
  background: linear-gradient(155deg, #18040b, #080808 58%);
  box-shadow: 0 28px 100px rgba(0, 0, 0, 0.72);
}

.affiliate-ad-dialog-kicker {
  color: #ff7891;
  font-size: 8px;
  font-weight: 950;
  letter-spacing: 0.12em;
}

.affiliate-ad-dialog h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 400;
  letter-spacing: -0.04em;
}

.affiliate-ad-dialog p {
  margin: 0;
  color: #aaa;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
}

.affiliate-ad-dialog-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin-top: 5px;
}

.affiliate-ad-dialog-actions button {
  min-height: 48px;
  border-radius: 13px;
}

.affiliate-ad-danger-action {
  border: 1px solid #ff5a76;
  background: #ff5a76;
  color: #180108;
  font-weight: 950;
  letter-spacing: 0.05em;
}

.affiliate-ad-form-screen {
  padding-bottom: max(28px, env(safe-area-inset-bottom));
}

.affiliate-ad-form {
  display: grid;
  gap: 13px;
  padding: 0 18px;
}

.affiliate-ad-library-screen {
  min-height: calc(100svh - 76px);
  padding-bottom: max(24px, env(safe-area-inset-bottom));
}

.affiliate-ad-library-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 0 18px;
  overflow-x: auto;
  color: #555;
  scrollbar-width: none;
}

.affiliate-ad-library-breadcrumbs::-webkit-scrollbar {
  display: none;
}

.affiliate-ad-library-crumb {
  flex: 0 0 auto;
  padding: 4px 0;
  border: 0;
  background: transparent;
  color: #a958ff;
  font-size: 8px;
  font-weight: 950;
  letter-spacing: 0.08em;
}

.affiliate-ad-library-description {
  margin: 0;
  padding: 0 18px;
  color: #777;
  font-size: 9px;
  line-height: 1.5;
}

.affiliate-ad-library-grid {
  display: grid;
  gap: 9px;
  padding: 2px 18px;
}

.affiliate-ad-library-node {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  min-height: 78px;
  align-items: center;
  gap: 11px;
  padding: 11px;
  border: 1px solid #292929;
  border-radius: 15px;
  background: linear-gradient(130deg, #111, #080808);
  color: #fff;
  text-align: left;
}

.affiliate-ad-library-node.is-folder {
  border-color: #38224f;
  background: linear-gradient(130deg, rgba(169, 88, 255, 0.12), #080808 62%);
}

.affiliate-ad-library-node.is-disabled {
  border-style: dashed;
  color: #777;
}

.affiliate-ad-library-node-icon {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border: 1px solid #3a2450;
  border-radius: 12px;
  background: #160d20;
  color: #b677ff;
  font-size: 14px;
}

.affiliate-ad-library-node-copy {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.affiliate-ad-library-node-copy strong {
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.035em;
}

.affiliate-ad-library-node-copy small {
  color: #797979;
  font-size: 8px;
  line-height: 1.4;
}

.affiliate-ad-library-node-meta {
  max-width: 66px;
  color: #72538f;
  font-size: 7px;
  font-weight: 950;
  letter-spacing: 0.07em;
  text-align: right;
}

.affiliate-ad-library-footer {
  display: grid;
  padding: 3px 18px;
}

.affiliate-ad-library-footer .secondary-action,
.affiliate-ad-library-up {
  min-height: 42px;
  border-radius: 13px;
}

.affiliate-ad-quick-form {
  width: min(430px, 100%);
  margin: 0 auto;
}

.affiliate-ad-selected-type {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  min-height: 66px;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border: 1px solid #342047;
  border-radius: 14px;
  background: rgba(169, 88, 255, 0.07);
}

.affiliate-ad-selected-type img {
  width: 58px;
  height: 50px;
  object-fit: cover;
  border-radius: 9px;
}

.affiliate-ad-selected-type > span {
  display: grid;
  gap: 3px;
}

.affiliate-ad-selected-type small {
  color: #765a8e;
  font-size: 7px;
}

.affiliate-ad-selected-type strong {
  color: #fff;
  font-size: 10px;
}

.affiliate-ad-selected-type-change {
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid #48315c;
  border-radius: 999px;
  background: #120b18;
  color: #b677ff;
  font-size: 8px;
  font-weight: 950;
}

.affiliate-ad-dynamic-controls {
  display: grid;
  gap: 10px;
}

.affiliate-ad-narration-controls {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid #292929;
  border-radius: 15px;
  background: linear-gradient(145deg, rgba(169, 88, 255, 0.08), #090909 68%);
}

.affiliate-ad-select-field,
.affiliate-ad-palette-select-field {
  display: grid;
  gap: 6px;
}

.affiliate-ad-select-label {
  color: #8a8a8a;
  font-size: 8px;
  font-weight: 950;
  letter-spacing: 0.08em;
}

.affiliate-ad-select {
  width: 100%;
  min-height: 45px;
  padding: 0 42px 0 12px;
  border: 1px solid #3a3a3a;
  border-radius: 12px;
  outline: 0;
  appearance: none;
  background:
    linear-gradient(45deg, transparent 50%, #a958ff 50%) calc(100% - 18px) 19px / 6px 6px no-repeat,
    linear-gradient(135deg, #a958ff 50%, transparent 50%) calc(100% - 12px) 19px / 6px 6px no-repeat,
    #090909;
  color: #fff;
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 900;
}

.affiliate-ad-select:focus {
  border-color: #a958ff;
  box-shadow: 0 0 0 3px rgba(169, 88, 255, 0.11);
}

.affiliate-ad-select-meta {
  color: #686868;
  font-size: 7px;
  line-height: 1.45;
}

.affiliate-ad-field {
  display: grid;
  gap: 7px;
}

.affiliate-ad-field-heading,
.affiliate-ad-choice-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.affiliate-ad-field-heading strong,
.affiliate-ad-choice-heading strong {
  color: #fff;
  font-size: 10px;
}

.affiliate-ad-field-heading small,
.affiliate-ad-choice-heading small {
  color: #686868;
  font-size: 8px;
}

.affiliate-ad-textarea {
  width: 100%;
  min-height: 122px;
  resize: vertical;
  padding: 14px;
  border: 1px solid #343434;
  border-radius: 14px;
  outline: 0;
  background: #090909;
  color: #fff;
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 650;
  line-height: 1.45;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.015);
}

.affiliate-ad-textarea:focus {
  border-color: var(--brand-purple);
  box-shadow: 0 0 0 3px rgba(169, 88, 255, 0.12);
}

.affiliate-ad-estimate {
  color: var(--brand-purple);
  font-size: 8px;
}

.affiliate-ad-game-choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}

.affiliate-ad-game-choice {
  position: relative;
  min-height: 116px;
  padding: 0;
  overflow: hidden;
  border: 1px solid #2b2b2b;
  border-radius: 15px;
  background: #080808;
  color: #fff;
  text-align: left;
}

.affiliate-ad-game-choice.is-selected {
  border-color: var(--brand-purple);
  box-shadow: 0 0 0 2px rgba(169, 88, 255, 0.12);
}

.affiliate-ad-game-choice img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.7;
}

.affiliate-ad-game-choice::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent 25%, rgba(0, 0, 0, 0.94));
  content: "";
}

.affiliate-ad-game-choice-copy {
  position: absolute;
  right: 11px;
  bottom: 10px;
  left: 11px;
  z-index: 2;
  display: grid;
  gap: 2px;
}

.affiliate-ad-game-choice-copy strong {
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.04em;
}

.affiliate-ad-game-choice-copy small {
  color: #aaa;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: 0.09em;
}

.affiliate-ad-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.affiliate-ad-chip {
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid #343434;
  border-radius: 999px;
  background: #090909;
  color: #8c8c8c;
  font-size: 9px;
  font-weight: 950;
  letter-spacing: 0.07em;
}

.affiliate-ad-chip.is-selected {
  border-color: var(--brand-purple);
  background: rgba(169, 88, 255, 0.13);
  color: #fff;
}

.affiliate-ad-order-row {
  display: grid;
}

.affiliate-ad-order-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 34px 34px;
  align-items: center;
  gap: 5px;
  min-height: 42px;
  padding: 4px 5px 4px 12px;
  border: 1px solid #343434;
  border-radius: 12px;
  background: #090909;
  color: #fff;
  font-size: 9px;
  letter-spacing: 0.06em;
}

.affiliate-ad-order-item.is-outside-path {
  opacity: 0.46;
}

.affiliate-ad-order-state {
  color: #8a8a8a;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.affiliate-ad-order-move {
  min-height: 32px;
  border: 1px solid #383838;
  border-radius: 9px;
  background: #111;
  color: #fff;
  font-size: 15px;
}

.affiliate-ad-order-move:disabled {
  color: #3b3b3b;
}

.affiliate-ad-control-text-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 7px 10px 7px 12px;
  border: 1px solid #343434;
  border-radius: 13px;
  background: #090909;
}

.affiliate-ad-control-text {
  width: 100%;
  min-height: 34px;
  border: 0;
  outline: 0;
  background: transparent;
  color: #fff;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.035em;
}

.affiliate-ad-control-text-field:focus-within {
  border-color: var(--brand-purple);
  box-shadow: 0 0 0 3px rgba(169, 88, 255, 0.11);
}

.affiliate-ad-control-text-count {
  color: #626262;
  font-size: 7px;
  white-space: nowrap;
}

.affiliate-ad-control-number-field {
  border-color: rgba(169, 88, 255, 0.42);
}

.affiliate-ad-control-number {
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

.affiliate-ad-control-number-suffix {
  color: var(--brand-purple);
  font-weight: 950;
  letter-spacing: 0.08em;
}

.affiliate-ad-palette-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
}

.affiliate-ad-palette {
  display: grid;
  min-height: 58px;
  place-items: center;
  gap: 5px;
  padding: 7px;
  border: 1px solid #333;
  border-radius: 13px;
  background: #090909;
  color: #858585;
}

.affiliate-ad-palette.is-selected {
  border-color: #fff;
  color: #fff;
}

.affiliate-ad-palette-swatch {
  display: block;
  width: 100%;
  height: 17px;
  border-radius: 999px;
  background: linear-gradient(90deg, #a958ff, #d6a83f, #fff);
}

.affiliate-ad-palette-select-field {
  grid-template-columns: 92px minmax(0, 1fr);
  align-items: center;
  padding: 7px;
  border: 1px solid #303030;
  border-radius: 13px;
  background: #090909;
}

.affiliate-ad-palette-select-field .affiliate-ad-palette-swatch {
  height: 31px;
}

.affiliate-ad-palette-select {
  min-height: 38px;
  border: 0;
  background-color: #101010;
}

.affiliate-ad-live-palette-preview {
  --preview-bg: #050505;
  --preview-primary: #a958ff;
  --preview-secondary: #d6a83f;
  --preview-ball: #fff;
  position: relative;
  height: 142px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--preview-primary) 58%, #222);
  border-radius: 15px;
  background:
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--preview-primary) 17%, transparent), transparent 48%),
    var(--preview-bg);
  box-shadow: inset 0 0 40px color-mix(in srgb, var(--preview-primary) 9%, transparent);
}

.affiliate-ad-live-preview-label {
  position: absolute;
  top: 9px;
  left: 11px;
  z-index: 3;
  color: color-mix(in srgb, var(--preview-primary) 78%, white);
  font-size: 7px;
  font-weight: 950;
  letter-spacing: 0.075em;
}

.affiliate-ad-live-preview-stage {
  position: absolute;
  inset: 24px 12px 8px;
  overflow: hidden;
  border-radius: 10px;
}

.affiliate-ad-live-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 3px solid var(--preview-primary);
  border-right-color: transparent;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 0 6px var(--preview-primary));
  animation: affiliate-ad-live-ring-spin 4.8s linear infinite;
}

.affiliate-ad-live-ring.is-outer { width: 94px; height: 94px; }
.affiliate-ad-live-ring.is-middle { width: 68px; height: 68px; border-color: var(--preview-secondary); border-left-color: transparent; animation-direction: reverse; }
.affiliate-ad-live-ring.is-inner { width: 42px; height: 42px; }
.affiliate-ad-live-ring.is-core { width: 22px; height: 22px; border-color: var(--preview-secondary); animation-direction: reverse; }

.affiliate-ad-live-preview-ball {
  position: absolute;
  top: 46%;
  left: 53%;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--preview-ball);
  box-shadow: 0 0 12px var(--preview-ball), -13px 8px 13px color-mix(in srgb, var(--preview-primary) 55%, transparent);
  animation: affiliate-ad-live-ball-bounce 1.55s ease-in-out infinite alternate;
}

.affiliate-ad-live-pong-line {
  position: absolute;
  top: 7px;
  bottom: 7px;
  left: 50%;
  border-left: 2px dashed color-mix(in srgb, var(--preview-secondary) 55%, transparent);
}

.affiliate-ad-live-pong-paddle {
  position: absolute;
  top: 31%;
  width: 7px;
  height: 43px;
  border-radius: 999px;
  background: var(--preview-primary);
  box-shadow: 0 0 10px var(--preview-primary);
}

.affiliate-ad-live-pong-paddle.is-left { left: 18%; }
.affiliate-ad-live-pong-paddle.is-right { right: 18%; top: 48%; background: var(--preview-secondary); box-shadow: 0 0 10px var(--preview-secondary); }
.affiliate-ad-live-palette-preview.is-pong .affiliate-ad-live-preview-ball { animation-name: affiliate-ad-live-pong-ball; animation-duration: 1.8s; }

.affiliate-ad-live-brick-wall {
  position: absolute;
  top: 10px;
  left: 14px;
  right: 14px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
}

.affiliate-ad-live-brick-wall i {
  display: block;
  height: 11px;
  border-radius: 3px;
  background: var(--preview-primary);
  box-shadow: 0 0 7px color-mix(in srgb, var(--preview-primary) 68%, transparent);
}

.affiliate-ad-live-brick-wall i:nth-child(3n + 2) { background: var(--preview-secondary); }
.affiliate-ad-live-brick-wall i:nth-child(3n) { background: var(--preview-ball); }

.affiliate-ad-live-brick-paddle {
  position: absolute;
  left: 50%;
  bottom: 8px;
  width: 54px;
  height: 7px;
  border-radius: 999px;
  background: var(--preview-secondary);
  box-shadow: 0 0 10px var(--preview-secondary);
  transform: translateX(-50%);
}

.affiliate-ad-live-palette-preview.is-brick .affiliate-ad-live-preview-ball {
  top: 66%;
  animation-name: affiliate-ad-live-pong-ball;
  animation-duration: 1.45s;
}

.affiliate-ad-live-product-card {
  position: absolute;
  top: 10px;
  left: 50%;
  width: 72px;
  height: 92px;
  border: 2px solid var(--preview-primary);
  border-radius: 11px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--preview-primary) 28%, #090909), #070707 60%),
    #090909;
  box-shadow: 0 0 14px color-mix(in srgb, var(--preview-primary) 42%, transparent);
}

.affiliate-ad-live-product-card::after {
  position: absolute;
  right: 9px;
  bottom: 9px;
  left: 9px;
  height: 6px;
  border-radius: 99px;
  background: var(--preview-secondary);
  content: "";
}

.affiliate-ad-live-product-card.is-front {
  transform: translateX(-50%);
  animation: affiliate-ad-live-product-swipe 2.2s cubic-bezier(.2,.8,.2,1) infinite;
}

.affiliate-ad-live-product-card.is-left { opacity: 0.28; transform: translate(-128px, 8px) rotate(-3deg) scale(.84); }
.affiliate-ad-live-product-card.is-right { opacity: 0.42; transform: translate(50px, -3px) rotate(2deg) scale(.91); }

.affiliate-ad-live-product-touch {
  position: absolute;
  top: 74px;
  left: calc(50% + 37px);
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--preview-ball);
  box-shadow: 0 0 13px var(--preview-primary);
  animation: affiliate-ad-live-product-touch 2.2s cubic-bezier(.2,.8,.2,1) infinite;
}

.affiliate-ad-live-brand-mark {
  position: absolute;
  top: 12px;
  left: 50%;
  width: 70px;
  height: 70px;
  border: 3px solid var(--preview-primary);
  border-radius: 17px;
  box-shadow: 0 0 20px color-mix(in srgb, var(--preview-primary) 52%, transparent);
  transform: translateX(-50%);
  animation: affiliate-ad-live-brand-pulse 1.8s ease-in-out infinite;
}

.affiliate-ad-live-brand-mark i {
  position: absolute;
  top: 25px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--preview-ball);
}

.affiliate-ad-live-brand-mark i:first-child { left: 20px; }
.affiliate-ad-live-brand-mark i:nth-child(2) { right: 20px; }

.affiliate-ad-live-brand-mark b {
  position: absolute;
  bottom: 13px;
  left: 19px;
  width: 27px;
  height: 14px;
  border-bottom: 4px solid var(--preview-ball);
  border-radius: 50%;
}

.affiliate-ad-live-brand-copy {
  position: absolute;
  right: 0;
  bottom: 6px;
  left: 0;
  color: var(--preview-ball);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.05em;
  text-align: center;
}

.affiliate-ad-live-brand-cta {
  position: absolute;
  right: 23%;
  bottom: 25px;
  left: 23%;
  overflow: hidden;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--preview-primary), var(--preview-secondary));
  color: #050505;
  font-size: 6px;
  font-weight: 950;
  line-height: 15px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@keyframes affiliate-ad-live-ring-spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes affiliate-ad-live-ball-bounce {
  to { transform: translate(18px, -26px); }
}

@keyframes affiliate-ad-live-pong-ball {
  0% { transform: translate(-72px, 24px); }
  50% { transform: translate(0, -18px); }
  100% { transform: translate(72px, 11px); }
}

@keyframes affiliate-ad-live-product-swipe {
  0%, 18% { transform: translateX(-50%); }
  68%, 100% { transform: translateX(calc(-50% - 94px)) scale(.92); opacity: .35; }
}

@keyframes affiliate-ad-live-product-touch {
  0%, 18% { transform: translateX(0); opacity: 0; }
  28% { opacity: 1; }
  68% { transform: translateX(-75px); opacity: 1; }
  78%, 100% { transform: translateX(-75px); opacity: 0; }
}

@keyframes affiliate-ad-live-brand-pulse {
  50% { transform: translateX(-50%) scale(1.035); box-shadow: 0 0 30px color-mix(in srgb, var(--preview-primary) 68%, transparent); }
}

@media (prefers-reduced-motion: reduce) {
  .affiliate-ad-live-ring,
  .affiliate-ad-live-preview-ball,
  .affiliate-ad-live-product-card,
  .affiliate-ad-live-product-touch,
  .affiliate-ad-live-brand-mark {
    animation: none;
  }
}

.affiliate-ad-palette.is-fire .affiliate-ad-palette-swatch {
  background: linear-gradient(90deg, #ff1744, #ff9100, #ffd600);
}

.affiliate-ad-palette.is-ocean .affiliate-ad-palette-swatch {
  background: linear-gradient(90deg, #00e5ff, #2979ff, #651fff);
}

.affiliate-ad-palette strong {
  font-size: 8px;
  font-weight: 950;
  letter-spacing: 0.08em;
}

.affiliate-ad-submit,
.affiliate-ad-sheet-save {
  min-height: 50px;
  margin-top: 3px;
  border-radius: 14px;
}

.affiliate-ad-edit-sheet .affiliate-ad-sheet-save {
  display: grid;
  width: 100%;
  min-width: 0;
  min-height: 50px;
  height: auto;
  place-items: center;
  padding: 14px 18px;
  font-size: 14px;
  line-height: 1.3;
  letter-spacing: 0.04em;
}

.affiliate-ad-viewer-screen {
  min-height: calc(var(--app-height) - 72px);
  align-content: start;
  background: #000;
}

.affiliate-ad-viewer-stage,
.affiliate-ad-full-stage {
  position: relative;
  width: min(100%, 390px);
  aspect-ratio: 9 / 16;
  max-height: calc(var(--app-height) - 196px);
  justify-self: center;
  overflow: hidden;
  border: 1px solid #242424;
  border-radius: 22px;
  background: #050505;
  box-shadow: 0 24px 90px rgba(0, 0, 0, 0.66);
}

.affiliate-ad-viewer-stage .affiliate-ad-scene-media::after {
  display: none;
}

.affiliate-ad-viewer-stage .affiliate-ad-scene-media video,
.affiliate-ad-full-stage video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.affiliate-ad-viewer-header {
  position: absolute;
  top: 13px;
  right: 13px;
  left: 13px;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 11px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.52);
  font-size: 8px;
  font-weight: 950;
  letter-spacing: 0.09em;
  pointer-events: none;
  backdrop-filter: blur(10px);
}

.affiliate-ad-viewer-header strong {
  color: var(--brand-purple);
}

.affiliate-ad-viewer-controls {
  display: grid;
  grid-template-columns: 1fr 1fr 1.25fr .76fr;
  gap: 6px;
  padding: 10px 9px max(10px, env(safe-area-inset-bottom));
}

.affiliate-ad-viewer-action {
  min-height: 43px;
  padding: 0 6px;
  border: 1px solid #343434;
  border-radius: 12px;
  background: #0a0a0a;
  color: #a6a6a6;
  font-size: 7px;
  font-weight: 950;
  letter-spacing: 0.055em;
}

.affiliate-ad-viewer-action.is-active,
.affiliate-ad-viewer-action.is-reroll {
  border-color: rgba(169, 88, 255, 0.7);
  color: #fff;
}

.affiliate-ad-viewer-action.is-done {
  border-color: var(--brand-purple);
  background: var(--brand-purple);
  color: #0c0412;
}

.affiliate-ad-edit-sheet {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 20;
  display: grid;
  width: min(430px, calc(100% - 18px));
  max-height: min(62svh, 540px);
  gap: 11px;
  margin: 0 auto max(9px, env(safe-area-inset-bottom));
  padding: 18px;
  overflow-y: auto;
  border: 1px solid #333;
  border-radius: 18px;
  background: #0a0a0a;
  box-shadow: 0 -24px 90px rgba(0, 0, 0, 0.82);
}

.affiliate-ad-sheet-close {
  position: absolute;
  top: 11px;
  right: 11px;
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  padding: 0 0 2px;
  border: 1px solid #414141;
  border-radius: 50%;
  background: #111;
  color: #aaa;
  font-size: 22px;
  line-height: 1;
}

.affiliate-ad-edit-sheet > .affiliate-ad-choice-heading {
  padding-right: 38px;
}

.affiliate-ad-visual-workspace {
  top: 72px;
  bottom: 0;
  width: min(470px, 100%);
  max-height: none;
  align-content: start;
  margin-bottom: 0;
  padding: 20px 18px max(24px, env(safe-area-inset-bottom));
  border-right: 0;
  border-bottom: 0;
  border-left: 0;
  border-radius: 22px 22px 0 0;
  background: linear-gradient(#0d0d0d, #060606 38%);
}

.affiliate-ad-visual-actions { display: grid; gap: 12px; min-width: 0; padding-top: 16px; border-top: 1px solid #35243e; }
.affiliate-ad-automatic-narration > summary { min-height: 44px; padding: 12px 0; color: #e7d5f5; cursor: pointer; font-size: 13px; }
.affiliate-ad-refresh-script { min-height: 44px; color: #e7d5f5; font-size: 12px; }
.affiliate-ad-narration-controls input[type="color"] { width: 100%; height: 44px; padding: 4px; border: 1px solid #574162; border-radius: 8px; background: #16101d; cursor: pointer; forced-color-adjust: none; }
.affiliate-ad-narration-controls input[type="range"] { appearance: none; width: 100%; min-width: 0; min-height: 44px; margin: 0; padding: 0; border: 0; background: transparent; accent-color: #ad65ff; forced-color-adjust: none; }
.affiliate-ad-narration-controls input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 6px; background: #44324f; }
.affiliate-ad-narration-controls input[type="range"]::-webkit-slider-thumb { appearance: none; width: 18px; height: 18px; margin-top: -6px; border: 2px solid #d6b3ff; border-radius: 50%; background: #ad65ff; }
.affiliate-ad-narration-controls input[type="range"]::-moz-range-track { height: 6px; border-radius: 6px; background: #44324f; }
.affiliate-ad-narration-controls input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; border: 2px solid #d6b3ff; border-radius: 50%; background: #ad65ff; }
.affiliate-ad-caption-preview { display: grid; min-height: 70px; place-items: center; padding: 14px; border: 1px solid #35243e; border-radius: 10px; background: #151119; forced-color-adjust: none; }
.affiliate-ad-caption-preview > span { color: #fff; font-size: 22px; font-weight: 800; text-shadow: 0 2px 3px #000; forced-color-adjust: none; }
.affiliate-ad-caption-position-row { display: flex; align-items: center; gap: 14px; }
.affiliate-ad-caption-position-row > select { flex: 1; min-width: 0; }
.affiliate-ad-caption-position-preview { position: relative; flex: 0 0 36px; width: 36px; height: 64px; border: 1px solid #6f5381; border-radius: 5px; background: #17101e; forced-color-adjust: none; }
.affiliate-ad-caption-position-preview > i { position: absolute; left: 6px; right: 6px; height: 4px; transform: translateY(-50%); border-radius: 3px; background: #e7cbff; forced-color-adjust: none; }
.affiliate-ad-automatic-start { width: min(470px,calc(100% - 32px)); margin: 8px auto 24px; padding: 18px; border: 1px solid #35243e; border-radius: 14px; background: #100b15; }
.affiliate-ad-automatic-start > select { appearance: auto; width: 100%; min-height: 44px; padding: 10px; border: 1px solid #624478; border-radius: 8px; color: #f1e4fc; background: #1b1124; }
.affiliate-ad-visual-action { display: grid; gap: 10px; min-width: 0; padding: 14px; border: 1px solid #37283f; border-radius: 12px; background: #110c16; }
.affiliate-ad-visual-action-header { display: grid; gap: 10px; }
.affiliate-ad-visual-action-header > strong { color: #e7d5f5; font-size: 12px; line-height: 1.5; }
.affiliate-ad-visual-actions .affiliate-ad-chip { min-width: 44px; min-height: 44px; padding: 8px 14px; font-size: 11px; line-height: 1.3; }
.affiliate-ad-visual-action .affiliate-ad-palette-select-field { display: grid; gap: 7px; color: #bcaaca; font-size: 11px; }
.affiliate-ad-visual-action select { min-width: 0; width: 100%; min-height: 44px; padding: 8px; border: 1px solid #574162; border-radius: 7px; color: #f4e9fb; background: #1a1222; font: inherit; }

.affiliate-ad-visual-type-card {
  position: relative;
  display: grid;
  min-height: 154px;
  overflow: hidden;
  border: 1px solid #332044;
  border-radius: 17px;
  background: #090909;
}

.affiliate-ad-visual-type-card::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.95), rgba(0, 0, 0, 0.48));
  content: "";
}

.affiliate-ad-visual-type-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.62;
}

.affiliate-ad-visual-type-card > span {
  position: relative;
  z-index: 1;
  display: grid;
  width: min(64%, 250px);
  align-content: end;
  gap: 5px;
  padding: 18px;
}

.affiliate-ad-visual-type-card small {
  color: #b677ff;
  font-size: 7px;
  font-weight: 950;
  letter-spacing: 0.1em;
}

.affiliate-ad-visual-type-card strong {
  color: #fff;
  font-size: 17px;
  font-weight: 950;
}

.affiliate-ad-visual-type-card p {
  margin: 0;
  color: #9a9a9a;
  font-size: 8px;
  line-height: 1.45;
}

.affiliate-ad-browse-library {
  min-height: 44px;
  border-color: #4c2868;
  border-radius: 13px;
  color: #b677ff;
}

.affiliate-ad-visual-library .affiliate-ad-library-breadcrumbs,
.affiliate-ad-visual-library .affiliate-ad-library-description,
.affiliate-ad-visual-library .affiliate-ad-library-grid {
  padding-right: 0;
  padding-left: 0;
}

.affiliate-ad-full-screen {
  gap: 5px;
  padding-bottom: max(20px, env(safe-area-inset-bottom));
}

.affiliate-ad-full-stage.is-preparing {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 12px;
  padding: 24px;
  text-align: center;
}

.affiliate-ad-full-stage > small {
  max-width: 28ch;
  color: #8d8d8d;
  font-size: 9px;
  line-height: 1.45;
}

.affiliate-ad-preparing-reel {
  position: absolute;
  inset: 0;
  display: flex;
  opacity: 0.18;
}

.affiliate-ad-preparing-reel img {
  width: 100%;
  min-width: 100%;
  height: 100%;
  object-fit: cover;
  animation: affiliate-ad-reel 8s steps(1) infinite;
}

@keyframes affiliate-ad-reel {
  0%, 24% { transform: translateX(0); }
  25%, 49% { transform: translateX(-100%); }
  50%, 74% { transform: translateX(-200%); }
  75%, 100% { transform: translateX(-300%); }
}

.affiliate-ad-loading {
  place-content: center;
  justify-items: center;
  gap: 14px;
}

@media (max-width: 760px) {
  body[data-step^="affiliateAd"] .wizard-shell,
  body[data-step="affiliateAds"] .wizard-shell {
    width: 100%;
    min-height: var(--app-height);
  }

  body[data-step^="affiliateAd"] .wizard-root,
  body[data-step="affiliateAds"] .wizard-root {
    width: 100%;
    padding-top: 58px !important;
    padding-right: 0;
    padding-left: 0;
    overflow-y: auto !important;
    overscroll-behavior-y: contain;
  }

  .affiliate-ad-entry {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 11px;
  }

  .affiliate-ad-entry-icon {
    width: 44px;
  }

  .affiliate-ad-entry-action {
    grid-column: 1 / -1;
    width: 100%;
  }
}

@media (max-width: 760px) and (max-height: 700px) {
  .affiliate-ad-header {
    padding-top: 2px;
    padding-bottom: 7px;
  }

  .affiliate-ad-header h1 {
    font-size: 34px;
  }

  .affiliate-ad-carousel-viewport {
    height: min(56svh, 405px);
    min-height: 330px;
  }

  .affiliate-ad-slide {
    width: min(58vw, 228px);
  }

  .affiliate-ad-viewer-stage,
  .affiliate-ad-full-stage {
    width: min(63vw, 278px);
    max-height: calc(var(--app-height) - 160px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .affiliate-ad-render-mark,
  .affiliate-ad-preparing-reel img {
    animation: none;
  }
}

/* Final Check can grow with a long hook or question. Keep the mobile chrome
   fixed, but let the content pane accept touch scrolling instead of clipping
   the action below the viewport. Kept last so shared mobile-nav rules cannot
   disable touch scrolling later in the cascade. */
@media (max-width: 760px) {
  body[data-mobile-nav="back"][data-step="confirm"] .wizard-shell,
  body[data-mobile-nav="back"][data-step="storiesConfirm"] .wizard-shell {
    display: flex;
    flex-direction: column;
  }

  body[data-mobile-nav="back"][data-step="confirm"] .wizard-root,
  body[data-mobile-nav="back"][data-step="storiesConfirm"] .wizard-root {
    display: flex;
    height: auto;
    min-height: 0;
    flex: 1 1 auto;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  body[data-mobile-nav="back"][data-step="confirm"] .wizard-root::-webkit-scrollbar,
  body[data-mobile-nav="back"][data-step="storiesConfirm"] .wizard-root::-webkit-scrollbar {
    display: none;
  }
}

/* Affiliate hub: creation-first dashboard. Kept last so the mobile hub owns
   its scroll viewport and cannot be clipped by the shared one-screen shell. */
.affiliate-screen {
  width: min(560px, 100%);
  gap: 16px;
  padding-bottom: 64px;
}

.affiliate-intro {
  gap: 9px;
  padding: 4px 18px 0;
}

.affiliate-title {
  max-width: 11ch;
  margin-inline: auto;
  font-family: var(--font-display);
  font-size: clamp(44px, 8vw, 66px);
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: -0.035em;
}

.affiliate-lead {
  max-width: 48ch;
  color: #b8b8b8;
  font-size: 13px;
}

.affiliate-program-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  border: 1px solid #292929;
  border-radius: 14px;
  background: #070707;
  overflow: hidden;
}

.affiliate-program-stat,
.affiliate-program-readiness {
  display: flex;
  min-width: 0;
  min-height: 62px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 15px;
  font-family: var(--font-ui);
}

.affiliate-program-stat {
  border-right: 1px solid #292929;
}

.affiliate-program-stat strong {
  color: var(--brand-gold);
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 400;
  line-height: 1;
}

.affiliate-program-stat span,
.affiliate-program-readiness strong {
  color: #b9b9b9;
  font-size: 9px;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0.06em;
}

.affiliate-program-status-dot {
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  border-radius: 50%;
  background: #5d5d5d;
  box-shadow: 0 0 0 4px rgba(93, 93, 93, 0.12);
}

.affiliate-program-readiness.is-ready .affiliate-program-status-dot {
  background: #a958ff;
  box-shadow: 0 0 0 4px rgba(169, 88, 255, 0.14), 0 0 16px rgba(169, 88, 255, 0.7);
}

.affiliate-program-readiness.is-ready strong {
  color: #fff;
}

.affiliate-ad-entry {
  display: grid;
  grid-template-columns: 1fr;
  gap: 15px;
  margin-top: 0;
  padding: 23px;
  border: 1px solid rgba(169, 88, 255, 0.8);
  border-radius: 22px;
  background:
    radial-gradient(circle at 88% 0%, rgba(169, 88, 255, 0.28), transparent 38%),
    linear-gradient(145deg, #11061c 0%, #070707 48%, #050505 100%);
  box-shadow: 0 20px 64px rgba(0, 0, 0, 0.38), inset 0 0 36px rgba(169, 88, 255, 0.04);
}

.affiliate-ad-entry.is-locked {
  border-color: #343434;
  background: linear-gradient(145deg, #101010, #060606);
  opacity: 1;
}

.affiliate-ad-entry-heading {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.affiliate-ad-entry-status {
  flex: 0 0 auto;
  border: 1px solid #343434;
  border-radius: 999px;
  padding: 6px 9px;
  color: #777;
  font-family: var(--font-ui);
  font-size: 8px;
  font-weight: 950;
  line-height: 1;
  letter-spacing: 0.08em;
}

.affiliate-ad-entry-status.is-ready {
  border-color: rgba(169, 88, 255, 0.65);
  background: rgba(169, 88, 255, 0.12);
  color: #fff;
}

.affiliate-ad-entry-title {
  max-width: 15ch;
  margin: 0;
  color: #fff;
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.025em;
}

.affiliate-ad-entry-description {
  max-width: 54ch;
  margin: -3px 0 0;
  color: #bcbcbc;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.5;
}

.affiliate-ad-entry-flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.affiliate-ad-entry-flow-step {
  display: grid;
  min-width: 0;
  gap: 7px;
  border: 1px solid rgba(169, 88, 255, 0.22);
  border-radius: 11px;
  background: rgba(0, 0, 0, 0.38);
  padding: 11px;
  font-family: var(--font-ui);
}

.affiliate-ad-entry.is-locked .affiliate-ad-entry-flow-step {
  border-color: #292929;
}

.affiliate-ad-entry-flow-step span {
  color: #a958ff;
  font-size: 8px;
  font-weight: 950;
}

.affiliate-ad-entry-flow-step strong {
  overflow-wrap: anywhere;
  color: #fff;
  font-size: 9px;
  font-weight: 950;
  line-height: 1.15;
  letter-spacing: 0.035em;
}

.affiliate-ad-entry-action {
  width: 100%;
  min-height: 54px;
  border: 1px solid #b76bff;
  border-radius: 10px;
  background: linear-gradient(180deg, #a958ff, #7419c7);
  box-shadow: 0 10px 28px rgba(117, 25, 199, 0.3);
  color: #fff;
  font-size: 13px;
  letter-spacing: 0.04em;
}

.affiliate-ad-entry-action:hover,
.affiliate-ad-entry-action:focus-visible {
  border-color: #d1a3ff;
  background: linear-gradient(180deg, #bd7aff, #8729d9);
  outline: 0;
}

.affiliate-ad-entry-action:disabled {
  border-color: #343434;
  background: #151515;
  box-shadow: none;
  color: #707070;
}

.affiliate-ad-entry-note {
  color: #777;
  font-family: var(--font-ui);
  font-size: 8px;
  font-weight: 900;
  line-height: 1.3;
  text-align: center;
  letter-spacing: 0.07em;
}

.affiliate-link-panel,
.affiliate-connect-panel,
.affiliate-setup-path,
.affiliate-resource-card {
  border: 1px solid #292929;
  border-radius: 16px;
  background: #070707;
  box-shadow: none;
}

.affiliate-link-panel,
.affiliate-connect-panel {
  gap: 13px;
  padding: 18px;
}

.affiliate-link-heading {
  padding-bottom: 2px;
}

.affiliate-connected-mark {
  border: 1px solid rgba(169, 88, 255, 0.5);
  border-radius: 999px;
  background: rgba(169, 88, 255, 0.1);
  padding: 5px 8px;
  color: #fff;
  font-size: 8px;
}

.affiliate-link-explainer {
  max-width: 50ch;
  margin: -3px 0 0;
}

.affiliate-link-field {
  border-color: #3a3a3a;
  border-radius: 9px;
  overflow: hidden;
}

.affiliate-copy-button {
  border-left-color: rgba(169, 88, 255, 0.65);
  background: #180924;
}

.affiliate-link-actions {
  gap: 9px;
}

.affiliate-change-button,
.affiliate-share-button {
  min-height: 44px;
  border-radius: 9px;
}

.affiliate-self-referral-note {
  margin: -2px 0 0;
  color: #737373;
  font-size: 10px !important;
}

.affiliate-setup-path {
  display: grid;
  padding: 18px;
}

.affiliate-setup-path > .affiliate-link-kicker {
  padding-bottom: 7px;
}

.affiliate-resource-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.affiliate-resource-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 18px;
}

.affiliate-resource-title {
  max-width: 22ch;
  color: #fff;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 950;
  line-height: 1.2;
}

.affiliate-resource-copy {
  margin: 0;
  color: #999;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.45;
}

.affiliate-resource-link {
  margin-top: auto;
  color: #b878ff;
  font-family: var(--font-ui);
  font-size: 9px;
  font-weight: 950;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-decoration: none;
}

.affiliate-resource-link:hover,
.affiliate-resource-link:focus-visible {
  color: #d5b0ff;
  outline: 0;
  text-decoration: underline;
}

.affiliate-kit-card .affiliate-download-button {
  width: 100%;
  min-height: 40px;
  margin-top: auto;
  border-radius: 8px;
  padding: 9px 11px;
  font-size: 10px;
}

.affiliate-terms-note {
  max-width: 52ch;
  margin: 0 auto;
  color: #6f6f6f;
  text-align: center;
}

@media (max-width: 760px) {
  body[data-step="affiliate"] {
    height: var(--app-height);
    min-height: var(--app-height);
    overflow: hidden;
  }

  body[data-step="affiliate"] .wizard-shell {
    display: block;
    width: 100%;
    height: var(--app-height);
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    padding: calc(env(safe-area-inset-top, 0px) + 76px) 18px max(30px, env(safe-area-inset-bottom, 0px)) !important;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  body[data-step="affiliate"] .wizard-shell::-webkit-scrollbar {
    display: none;
  }

  body[data-step="affiliate"] .wizard-root {
    display: block;
    width: min(100%, 520px);
    height: auto;
    min-height: 0;
    overflow: visible;
    margin: 0 auto;
  }

  .affiliate-screen {
    width: 100%;
    gap: 14px;
    padding-bottom: 34px;
  }

  .affiliate-intro {
    gap: 7px;
    padding-inline: 10px;
  }

  .affiliate-title {
    font-size: clamp(39px, 12.4vw, 55px);
  }

  .affiliate-lead {
    max-width: 38ch;
    font-size: 11px;
  }

  .affiliate-program-stat,
  .affiliate-program-readiness {
    min-height: 56px;
    padding: 11px 10px;
  }

  .affiliate-program-stat strong {
    font-size: 29px;
  }

  .affiliate-ad-entry {
    grid-template-columns: 1fr;
    gap: 13px;
    padding: 19px;
    border-radius: 18px;
  }

  .affiliate-ad-entry-title {
    font-size: 30px;
  }

  .affiliate-ad-entry-flow-step {
    padding: 10px 8px;
  }

  .affiliate-ad-entry-action {
    grid-column: auto;
  }

  .affiliate-resource-grid {
    grid-template-columns: 1fr;
  }

  .affiliate-resource-card {
    padding: 16px;
  }
}

@media (max-width: 390px) {
  .affiliate-program-stat,
  .affiliate-program-readiness {
    gap: 6px;
    padding-inline: 8px;
  }

  .affiliate-program-stat strong {
    font-size: 26px;
  }

  .affiliate-program-stat span,
  .affiliate-program-readiness strong {
    font-size: 8px;
  }

  .affiliate-ad-entry-flow-step strong {
    font-size: 8px;
  }
}
.brick-destroy-preview {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: radial-gradient(circle at 50% 72%, rgba(169, 88, 255, 0.22), transparent 38%), #05030a;
}

.brick-destroy-preview-wall {
  position: absolute;
  top: 15%;
  left: 9%;
  right: 9%;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3.2%;
}

.brick-destroy-preview-brick {
  aspect-ratio: 1.65;
  border-radius: 2px;
  background: hsl(calc(335deg + var(--brick-hue) * 1deg) 95% 65%);
  box-shadow: 0 0 12px currentColor;
  animation: brick-preview-pulse 3.2s ease-in-out infinite;
  animation-delay: calc(var(--brick-index) * -70ms);
}

.brick-destroy-preview-ball {
  position: absolute;
  width: 5%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 14px #fff, 0 0 30px #ff8a3d;
  animation: brick-preview-ball 2.25s linear infinite;
}

.brick-destroy-preview-paddle {
  position: absolute;
  bottom: 9%;
  left: 36%;
  width: 28%;
  height: 2.3%;
  border-radius: 999px;
  background: linear-gradient(90deg, #a958ff, #ff4d8d);
  box-shadow: 0 0 18px rgba(169, 88, 255, 0.85);
  animation: brick-preview-paddle 2.25s ease-in-out infinite;
}

@keyframes brick-preview-ball {
  0% { left: 48%; top: 80%; }
  24% { left: 78%; top: 46%; }
  48% { left: 36%; top: 20%; }
  72% { left: 14%; top: 48%; }
  100% { left: 48%; top: 80%; }
}

@keyframes brick-preview-paddle {
  0%, 100% { transform: translateX(0); }
  35% { transform: translateX(54%); }
  72% { transform: translateX(-48%); }
}

@keyframes brick-preview-pulse {
  0%, 80%, 100% { opacity: 1; transform: scale(1); }
  88% { opacity: 0.35; transform: scale(0.86); }
}

@media (prefers-reduced-motion: reduce) {
  .brick-destroy-preview * { animation: none !important; }
}
.affiliate-ad-music { width: min(calc(100% - 32px), 680px); margin: 24px auto; padding: 22px; border: 1px solid #55316f; border-radius: 18px; background: #0e0b13; color: #f8f5fc; text-align: left; forced-color-adjust: none; }
.affiliate-ad-music-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.affiliate-ad-music-heading h2 { margin: 0; font: inherit; font-weight: 750; font-size: 17px; }
.affiliate-ad-music-title { display: block; font-size: 19px; }
.affiliate-ad-music-byline { display: block; margin: 5px 0 16px; color: #bcb2ca; font-size: 12px; }
.affiliate-ad-music audio { display: block; width: 100%; height: 44px; color-scheme: dark; margin-bottom: 16px; }
.affiliate-ad-music-actions { display: flex; gap: 10px; }
.affiliate-ad-music-actions button { flex: 1; min-height: 44px; font-size: 14px; text-transform: none; color: #f8f5fc; letter-spacing: 0; }
.affiliate-ad-music-actions button:last-child { background: #7134ac; border-color: #a666e4; }
.affiliate-ad-music-note { font-size: 12px; line-height: 1.5; color: #bcb2ca; margin: 12px 0 0; }
@media (max-width: 480px) { .affiliate-ad-music { padding: 16px; border-radius: 14px; } }

/* Plan details belong to the purchase screen; the opening page stays separate. */
.buy-screen .buy-plans {
  min-width: 0;
  padding: 24px 0;
  font-family: var(--font-ui);
  color: #f5f1fa;
  text-align: left;
}
.buy-screen .buy-plans-title {
  margin: 0 0 8px;
  font: 400 30px/1.2 var(--font-display);
  text-transform: none;
}
.buy-screen .buy-plans-intro {
  margin: 0 0 24px;
  color: #c1bac8;
  font-size: 14px;
  line-height: 1.6;
}
.buy-screen .buy-plan-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.5;
}
.buy-screen .buy-plan-table th,
.buy-screen .buy-plan-table td {
  padding: 18px 16px;
  border-bottom: 1px solid #32253e;
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
}
.buy-screen .buy-plan-table th:first-child { width: 25%; padding-left: 0; }
.buy-screen .buy-plan-table thead th { border-top: 1px solid #704099; font-weight: 700; }
.buy-screen .buy-plan-table thead th:last-child { color: #f1cf54; }
.buy-screen .buy-plan-table td { color: #ccc5d2; font-weight: 400; }
.buy-screen .buy-plan-table :is(th,td):last-child { background: #140d1a; }
.buy-screen .buy-plan-price { display: block; margin-top: 4px; font-size: 12px; font-weight: 400; }
.buy-screen .buy-plan-note,
.buy-screen .buy-plan-affiliates,
.buy-screen .buy-cancellation { margin: 16px 0 0; color: #bcb4c6; font: 400 13px/1.6 var(--font-ui); }
.buy-screen .buy-plan-affiliates { padding-top: 16px; border-top: 1px solid #32253e; }
.buy-screen .buy-plan-help { display: inline-flex; align-items: center; min-height: 44px; color: #d5a2ff; font-size: 13px; text-underline-offset: 4px; }
.buy-screen .buy-plan-help:focus-visible { outline: 2px solid #d5a2ff; outline-offset: 3px; }
.buy-screen .buy-plan-checkout { float: right; color: #f1cf54; }
.buy-screen #creator-checkout { scroll-margin-top: calc(var(--site-header-height) + var(--site-context-height) + 24px); }
.buy-screen .buy-cancellation { max-width: 48ch; margin: 4px auto 0; text-align: center; }
.buy-screen .buy-trial { margin: 0 0 8px; color: #f1cf54; font: 600 20px/1.4 var(--font-ui); text-align: center; }
.buy-screen button.buy-primary { white-space: normal; }
@media (max-width: 600px) {
  .buy-screen .buy-plans { padding: 24px 0 12px; }
  .buy-screen .buy-plan-table { display: block; font-size: 14px; }
  .buy-screen .buy-plan-table thead,
  .buy-screen .buy-plan-table tbody { display: block; }
  .buy-screen .buy-plan-table tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .buy-screen .buy-plan-table th,
  .buy-screen .buy-plan-table td { padding: 12px; }
  .buy-screen .buy-plan-table thead th:first-child { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .buy-screen .buy-plan-table tbody th:first-child { grid-column: 1 / -1; width: auto; padding: 18px 0 6px; border-bottom: 0; }
  .buy-screen .buy-plan-table td { padding-top: 10px; }
}