html[data-route="app"] {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
  overscroll-behavior-x: none;
  scroll-padding-top: 160px;
}

html[data-route="app"] body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
  overscroll-behavior-x: none;
  touch-action: pan-y;
  --guide-backdrop:
    linear-gradient(90deg,
      rgba(var(--scene-rgb-a),.055) 0%,
      transparent 31%,
      rgba(var(--scene-rgb-b),.035) 72%,
      transparent 100%),
    linear-gradient(90deg, #0a0913 0%, #0d0b18 48%, #090911 100%);
  background-color: #080810;
  background-image: var(--guide-backdrop);
  background-size: 100vw 100%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  animation: none;
}

html[data-route="app"] body::before {
  display: none;
  content: none;
}

html[data-route="app"] body::after {
  background: linear-gradient(180deg, transparent 0 82%, rgba(8,8,16,.42) 100%);
}

html[data-route="app"] .app {
  width: 100%;
  max-width: 500px;
  overflow-x: hidden;
  overflow-x: clip;
  padding-top: calc(8px + var(--tg-content-safe-area-inset-top, 0px));
  padding-bottom: 28px;
}

html[data-route="app"] .app:has(.step[data-step="home"].active) {
  padding-top: calc(8px + var(--tg-content-safe-area-inset-top, 0px));
}

html[data-route="app"] .guide-head-shell {
  position: sticky;
  top: var(--tg-content-safe-area-inset-top, 0px);
  left: auto;
  z-index: 50;
  width: 100%;
  margin: 0;
  padding: 8px 2px 6px;
  background-color: #080810;
  background-image: var(--guide-backdrop);
  background-size: 100vw 100%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  box-shadow: none;
  transform: none;
}

html[data-route="app"] .guide-head-shell::after {
  content: "";
  position: absolute;
  top: calc(100% - 2px);
  left: -14px;
  right: -14px;
  z-index: 1;
  display: block;
  height: 56px;
  pointer-events: none;
  background-color: #080810;
  background-image: var(--guide-backdrop);
  background-size: 100vw 100%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.58) 16%, rgba(0,0,0,.22) 44%, rgba(0,0,0,.06) 72%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.58) 16%, rgba(0,0,0,.22) 44%, rgba(0,0,0,.06) 72%, transparent 100%);
  transform: translateZ(0);
  will-change: transform;
}

html[data-route="app"] .topbar {
  position: relative;
  top: auto;
  z-index: 2;
  margin-bottom: 8px;
  border-color: rgba(255,255,255,.11);
  border-radius: 16px;
  background:
    linear-gradient(110deg, rgba(var(--scene-rgb-a),.045), rgba(var(--scene-rgb-b),.025)),
    rgba(11,11,20,.78);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 16px 42px rgba(0,0,0,.30),
    0 0 30px rgba(139,92,255,.07);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  backdrop-filter: blur(22px) saturate(140%);
}

html[data-route="app"] .progress-wrap {
  position: relative;
  top: auto;
  z-index: 2;
  margin: 0 2px;
  border-color: rgba(255,255,255,.09);
  background:
    linear-gradient(110deg, rgba(var(--scene-rgb-a),.035), rgba(var(--scene-rgb-b),.02)),
    rgba(12,12,22,.76);
  box-shadow: 0 12px 30px rgba(0,0,0,.22);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

html[data-route="app"] .stage {
  flex: 0 0 auto;
  width: 100%;
  min-height: 0;
  margin-top: 20px;
  overflow-x: hidden;
  overflow-x: clip;
}

html[data-route="app"] .app:has(.step[data-step="home"].active) .stage {
  margin-top: 6px;
}

html[data-route="app"] .app:has(.step[data-step="home"].active) .guide-head-shell {
  margin-bottom: 0;
}

html[data-route="app"] .app:has(.step[data-step="home"].active) .guide-head-shell::after {
  height: 16px;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.32), rgba(0,0,0,.08) 46%, transparent 100%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.32), rgba(0,0,0,.08) 46%, transparent 100%);
}

html[data-route="app"] .step[data-step]:not([data-step="home"]):not([data-step="final"]) {
  position: relative;
  isolation: isolate;
  align-items: center;
}

html[data-route="app"] .step[data-step]:not([data-step="home"]):not([data-step="final"])::before {
  content: "";
  position: absolute;
  top: -20px;
  left: 0;
  z-index: 0;
  width: 132px;
  height: 112px;
  pointer-events: none;
  background: radial-gradient(
    ellipse 62px 50px at 35px 49px,
    rgba(var(--scene-rgb-a),.27) 0%,
    rgba(var(--scene-rgb-b),.14) 42%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.46) 8px, #000 20px, #000 70%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.46) 8px, #000 20px, #000 70%, transparent 100%);
}

html[data-route="app"] .step[data-step]:not([data-step="home"]):not([data-step="final"]) > * {
  position: relative;
  z-index: 1;
}

html[data-route="app"] .step[data-step]:not([data-step="home"]) > .icon-badge::after {
  display: none !important;
  content: none !important;
}

html[data-route="app"] .home-hero {
  min-height: 500px;
  background:
    linear-gradient(
      180deg,
      rgba(8,8,16,.04) 0%,
      rgba(8,8,16,.08) 34%,
      rgba(11,9,20,.30) 45%,
      rgba(14,11,24,.70) 57%,
      rgba(17,14,28,.95) 70%,
      rgba(17,14,28,.99) 100%
    ),
    linear-gradient(125deg, rgba(139,92,255,.14), transparent 58%),
    url("./assets/live-stars-signature-hero.png") 50% 0 / auto 65% no-repeat,
    #11111d;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    0 22px 54px rgba(0,0,0,.30),
    0 0 34px rgba(139,92,255,.09);
}

html[data-route="app"] .home-hero::after {
  background: linear-gradient(108deg, transparent 18%, rgba(255,255,255,.055) 47%, transparent 70%);
}

html[data-route="app"] .home h1 {
  text-shadow: 0 3px 16px rgba(7,6,14,.72);
}

html[data-route="app"] .home-logo {
  background:
    radial-gradient(circle at 18% 18%, var(--scene-a) 0, transparent 58%),
    radial-gradient(circle at 84% 84%, var(--scene-c) 0, transparent 62%),
    var(--scene-b);
}

html[data-route="app"] .home-point,
html[data-route="app"] .home-chip {
  border-color: rgba(255,255,255,.105);
  background: #11111c;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    0 12px 28px rgba(0,0,0,.18);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

html[data-route="app"] .home-point {
  position: relative;
  overflow: hidden;
}

html[data-route="app"] .home-point > * {
  position: relative;
  z-index: 1;
}

html[data-route="app"] .home-point::after {
  content: "";
  position: absolute;
  right: -2px;
  bottom: -12px;
  width: 124px;
  height: 124px;
  border: 0;
  border-radius: 0;
  background: url("./assets/diamond-watermark.png") center / cover no-repeat;
  box-shadow: none;
  opacity: .12;
  mix-blend-mode: screen;
  filter: saturate(1.28) brightness(1.22);
  transform: rotate(-7deg);
  -webkit-mask-image: radial-gradient(ellipse at 70% 55%, #000 0 26%, transparent 72%);
  mask-image: radial-gradient(ellipse at 70% 55%, #000 0 26%, transparent 72%);
}

html[data-route="app"] .home-point:nth-child(2)::after {
  background-position: center;
  transform: scaleX(-1) rotate(6deg);
}

html[data-route="app"] .home-point:nth-child(3)::after {
  background-position: center;
  transform: rotate(8deg);
}

html[data-route="app"] .card {
  margin-top: 20px;
  border-color: rgba(255,255,255,.105);
  background:
    linear-gradient(135deg, rgba(var(--scene-rgb-a),.025), transparent 48%),
    #11111b;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.03),
    0 16px 38px rgba(0,0,0,.23);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

html[data-route="app"] .card::before {
  top: 0;
  left: 30px;
  right: 30px;
  width: auto;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(var(--scene-rgb-a),.42) 16%,
    var(--scene-a) 38%,
    var(--scene-b) 64%,
    rgba(var(--scene-rgb-b),.38) 84%,
    transparent 100%
  );
  box-shadow:
    0 2px 8px rgba(var(--scene-rgb-a),.16),
    0 3px 12px rgba(var(--scene-rgb-b),.12);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
}

html[data-route="app"] .card > * {
  position: relative;
  z-index: 1;
}

html[data-route="app"] .card::after {
  content: "";
  position: absolute;
  top: 2px;
  right: 6px;
  z-index: 0;
  width: 160px;
  height: 160px;
  pointer-events: none;
  opacity: .18;
  background: url("./assets/diamond-watermark.png") center / cover no-repeat;
  mix-blend-mode: screen;
  filter: saturate(1.30) brightness(1.24);
  transform: rotate(7deg);
  -webkit-mask-image: radial-gradient(ellipse at 72% 42%, #000 0 24%, transparent 72%);
  mask-image: radial-gradient(ellipse at 72% 42%, #000 0 24%, transparent 72%);
}

html[data-route="app"] .step[data-step="2"] .card::after {
  background-position: center;
  transform: scaleX(-1) rotate(-5deg);
}

html[data-route="app"] .step[data-step="3"] .card::after {
  background-position: center;
  transform: rotate(5deg);
}

html[data-route="app"] .step[data-step="4"] .card::after {
  background-position: center;
  transform: scaleX(-1) rotate(8deg);
}

html[data-route="app"] .step[data-step="5"] .card::after {
  background-position: center;
  transform: rotate(-6deg);
}

html[data-route="app"] .card + .card {
  margin-top: 14px;
}

html[data-route="app"] .bullet {
  position: relative;
  overflow: hidden;
  border-color: rgba(255,255,255,.07);
  background: #171722;
}

html[data-route="app"] .bullet > * {
  position: relative;
  z-index: 1;
}

html[data-route="app"] .bullet::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -5px;
  width: 76px;
  height: 76px;
  pointer-events: none;
  opacity: .09;
  background: url("./assets/diamond-watermark.png") center / cover no-repeat;
  mix-blend-mode: screen;
  filter: saturate(1.25) brightness(1.20);
  transform: translateY(-50%) rotate(8deg);
}

html[data-route="app"] .bullet:nth-child(even)::after {
  transform: translateY(-50%) scaleX(-1) rotate(-7deg);
}

html[data-route="app"] .rate-box,
html[data-route="app"] .pay-chip {
  border-color: rgba(255,255,255,.075);
  background: #191924;
}

html[data-route="app"] .note,
html[data-route="app"] .inline-warning {
  margin-top: 14px;
  border-color: rgba(var(--scene-rgb-a),.23);
  background:
    linear-gradient(120deg, rgba(var(--scene-rgb-a),.085), rgba(var(--scene-rgb-b),.025)),
    #11111b;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

html[data-route="app"] .final {
  --final-banner-height: clamp(118px, 30vw, 148px);
  min-height: 0;
  padding-top: calc(var(--final-banner-height) + 18px);
  background:
    linear-gradient(120deg, rgba(69,226,188,.04), transparent 48%, rgba(140,103,255,.05)),
    #11111b;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 18px 42px rgba(0,0,0,.25),
    0 0 34px rgba(69,226,188,.07);
}

html[data-route="app"] .final::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  z-index: 0;
  height: var(--final-banner-height);
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(17,5,35,.04), transparent 42%, rgba(62,15,92,.08)),
    url("./assets/final-streamer-studio.png") 52% 50% / auto 122% no-repeat;
  transform-origin: 70% 38%;
  animation: signatureFinalBanner 12s ease-in-out infinite;
  -webkit-mask-image: linear-gradient(to bottom, #000 0 78%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0 78%, transparent 100%);
}

html[data-route="app"] .final::before {
  display: none;
}

html[data-route="app"] .final > * {
  z-index: 3;
}

html[data-route="app"] .nav {
  position: relative;
  left: auto;
  bottom: auto;
  z-index: 8;
  width: 100%;
  margin: 22px 0 0;
  padding: 9px;
  border-color: rgba(255,255,255,.10);
  background: #10101a;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 14px 32px rgba(0,0,0,.25);
  transform: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

html[data-route="app"] .btn {
  min-height: 54px;
}

html[data-route="app"] .btn.primary {
  box-shadow:
    0 10px 26px rgba(var(--scene-rgb-b),.23),
    0 0 20px rgba(var(--scene-rgb-a),.13);
}

html[data-route="app"] .register-pointer {
  bottom: calc(100% + 9px);
}

@keyframes studioStepIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 380px) {
  html[data-route="app"] .guide-head-shell {
    margin-bottom: 15px;
  }

  html[data-route="app"] .home-hero {
    min-height: 488px;
    background-size: auto, auto, auto 63%;
  }

  html[data-route="app"] .card {
    margin-top: 17px;
  }

  html[data-route="app"] .nav {
    margin-top: 18px;
  }

}

/* Varied premium diamond watermarks */
html[data-route="app"] .card::after {
  display: none;
}

html[data-route="app"] .home-point,
html[data-route="app"] .bullet,
html[data-route="app"] .rate-box,
html[data-route="app"] .note,
html[data-route="app"] .inline-warning {
  position: relative;
  overflow: hidden;
}

html[data-route="app"] .home-point > *,
html[data-route="app"] .bullet > *,
html[data-route="app"] .rate-box > *,
html[data-route="app"] .note > *,
html[data-route="app"] .inline-warning > * {
  position: relative;
  z-index: 1;
}

html[data-route="app"] .home-point::after,
html[data-route="app"] .bullet::after,
html[data-route="app"] .rate-box::after,
html[data-route="app"] .note::after,
html[data-route="app"] .inline-warning::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -2px;
  bottom: auto;
  width: 145px;
  height: 145px;
  border: 0;
  border-radius: 0;
  pointer-events: none;
  opacity: .13;
  background: url("./assets/diamond-watermark.png") center / cover no-repeat;
  box-shadow: none;
  mix-blend-mode: screen;
  filter: saturate(1.3) contrast(1.04) brightness(1.18);
  transform: translateY(-50%);
  -webkit-mask-image: radial-gradient(ellipse at 72% 52%, #000 0 30%, rgba(0,0,0,.86) 48%, transparent 76%);
  mask-image: radial-gradient(ellipse at 72% 52%, #000 0 30%, rgba(0,0,0,.86) 48%, transparent 76%);
}

html[data-route="app"] .diamond-cut-1::after {
  top: 48%;
  right: -6px;
  width: 145px;
  height: 145px;
  opacity: .13;
  transform: translateY(-50%) rotate(-9deg);
}

html[data-route="app"] .diamond-cut-2::after {
  top: 34%;
  right: 0;
  width: 112px;
  height: 112px;
  opacity: .16;
  transform: translateY(-50%) scaleX(-1) rotate(13deg);
}

html[data-route="app"] .diamond-cut-3::after {
  top: 67%;
  right: 20px;
  width: 158px;
  height: 158px;
  opacity: .11;
  transform: translateY(-50%) rotate(22deg);
}

html[data-route="app"] .diamond-cut-4::after {
  top: 43%;
  right: -44px;
  width: 184px;
  height: 184px;
  opacity: .09;
  transform: translateY(-50%) scaleX(-1) rotate(-18deg);
}

html[data-route="app"] .diamond-cut-5::after {
  top: 71%;
  right: 12px;
  width: 104px;
  height: 104px;
  opacity: .17;
  transform: translateY(-50%) rotate(7deg);
}

html[data-route="app"] .diamond-cut-6::after {
  top: 30%;
  right: 30px;
  width: 136px;
  height: 136px;
  opacity: .12;
  transform: translateY(-50%) scaleX(-1) rotate(28deg);
}

@media (max-width: 380px) {
  html[data-route="app"] .home-point::after,
  html[data-route="app"] .bullet::after,
  html[data-route="app"] .rate-box::after,
  html[data-route="app"] .note::after,
  html[data-route="app"] .inline-warning::after {
    opacity: .105;
  }
}

/* Precision icon alignment */
html[data-route="app"] .brand,
html[data-route="app"] .home-point,
html[data-route="app"] .bullet,
html[data-route="app"] .note,
html[data-route="app"] .inline-warning,
html[data-route="app"] .home-chip,
html[data-route="app"] .btn {
  align-items: center;
}

html[data-route="app"] .mark-img,
html[data-route="app"] .icon-badge svg,
html[data-route="app"] .home-point .ico svg,
html[data-route="app"] .bullet .dot-ico svg,
html[data-route="app"] .note svg,
html[data-route="app"] .inline-warning svg,
html[data-route="app"] .home-chip svg,
html[data-route="app"] .btn svg {
  display: block;
  margin: 0;
}

html[data-route="app"] .icon-badge {
  display: grid;
  place-items: center;
  flex: 0 0 58px;
  width: 58px;
  height: 58px;
  padding: 0;
  overflow: hidden;
  border: 0;
  background:
    radial-gradient(circle at 18% 18%, var(--scene-a) 0, transparent 58%),
    radial-gradient(circle at 84% 84%, var(--scene-c) 0, transparent 62%),
    var(--scene-b);
  box-shadow:
    inset 0 0 15px rgba(255,255,255,.10),
    inset 0 1px 0 rgba(255,255,255,.16),
    0 10px 24px rgba(0,0,0,.24);
  line-height: 0;
}

html[data-route="app"] .icon-badge::before {
  display: none !important;
  content: none !important;
}

html[data-route="app"] .step[data-step]:not([data-step="home"]):not([data-step="final"]) > .icon-badge {
  align-self: center;
  margin-left: 0;
}

html[data-route="app"] .icon-badge svg {
  place-self: center;
  width: 25px;
  height: 25px;
  transform: none;
  filter: none;
}

html[data-route="app"] .home-point .ico {
  display: grid;
  place-items: center;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-image: none;
  line-height: 0;
}

html[data-route="app"] .home-point .ico::before,
html[data-route="app"] .home-point .ico::after {
  display: none !important;
  content: none !important;
}

html[data-route="app"] .home-point .ico svg {
  place-self: center;
  width: 18px;
  height: 18px;
  transform: none;
}

html[data-route="app"] .bullet {
  align-items: flex-start;
}

html[data-route="app"] .bullet .dot-ico {
  display: grid;
  place-items: center;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  margin-top: 1px;
  line-height: 0;
}

html[data-route="app"] .bullet .dot-ico svg {
  width: 12px;
  height: 12px;
}

html[data-route="app"] .note,
html[data-route="app"] .inline-warning {
  align-items: flex-start;
}

html[data-route="app"] .note svg,
html[data-route="app"] .inline-warning svg {
  flex: 0 0 17px;
  width: 17px;
  height: 17px;
  margin-top: 2px;
}

html[data-route="app"] .home-chip svg {
  flex: 0 0 21px;
  width: 21px;
  height: 21px;
}

html[data-route="app"] .btn svg {
  flex: 0 0 18px;
}

/* Quiet ambient depth behind the page content */
html[data-route="app"] .stage {
  isolation: isolate;
}

html[data-route="app"] .stage::before,
html[data-route="app"] .stage::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 250px;
  height: 250px;
  pointer-events: none;
  opacity: .035;
  background: url("./assets/diamond-watermark.png") center / cover no-repeat;
  mix-blend-mode: screen;
  filter: saturate(1.25) brightness(1.15);
  animation: signatureAmbientFloat 10s ease-in-out infinite;
}

html[data-route="app"] .stage::before {
  top: 7%;
  left: -158px;
  transform: rotate(-13deg);
}

html[data-route="app"] .stage::after {
  top: 58%;
  right: -156px;
  opacity: .028;
  transform: scaleX(-1) rotate(17deg);
  animation-delay: -4.5s;
}

/* Staggered scene reveal */
html[data-route="app"] .step.active > .icon-badge,
html[data-route="app"] .step.active > .eyebrow,
html[data-route="app"] .step.active > h2,
html[data-route="app"] .step.active > .card,
html[data-route="app"] .step.active > .note,
html[data-route="app"] .step.active > .inline-warning,
html[data-route="app"] .step.active .home-hero,
html[data-route="app"] .step.active .home-point,
html[data-route="app"] .step.active .home-row {
  animation: signatureContentReveal .52s cubic-bezier(.2,.78,.2,1) both;
}

html[data-route="app"] .step.active > .eyebrow,
html[data-route="app"] .step.active .home-point:nth-child(1) {
  animation-delay: .04s;
}

html[data-route="app"] .step.active > h2,
html[data-route="app"] .step.active .home-point:nth-child(2) {
  animation-delay: .09s;
}

html[data-route="app"] .step.active > .card:first-of-type,
html[data-route="app"] .step.active .home-point:nth-child(3) {
  animation-delay: .14s;
}

html[data-route="app"] .step.active > .card {
  animation-delay: .14s;
}

html[data-route="app"] .step.active > .card + .card {
  animation-delay: .20s;
}

html[data-route="app"] .step.active > .card:nth-of-type(2),
html[data-route="app"] .step.active > .note,
html[data-route="app"] .step.active > .inline-warning,
html[data-route="app"] .step.active .home-row {
  animation-delay: .20s;
}

@keyframes signatureContentReveal {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes signatureAmbientFloat {
  0%, 100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -12px;
  }
}

@keyframes signatureFinalGifts {
  0%, 100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(-4px, -3px, 0) scale(1.015);
  }
}

@keyframes signatureFinalBanner {
  0%, 100% {
    transform: scale(1.01) translate3d(0, 0, 0);
  }
  50% {
    transform: scale(1.035) translate3d(-2px, -1px, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-route="app"] .stage::before,
  html[data-route="app"] .stage::after,
  html[data-route="app"] .step.active > .icon-badge,
  html[data-route="app"] .step.active > .eyebrow,
  html[data-route="app"] .step.active > h2,
  html[data-route="app"] .step.active > .card,
  html[data-route="app"] .step.active > .note,
  html[data-route="app"] .step.active > .inline-warning,
  html[data-route="app"] .step.active .home-hero,
  html[data-route="app"] .step.active .home-point,
  html[data-route="app"] .step.active .home-row,
  html[data-route="app"] .final::after,
  html[data-route="app"] .final::before {
    animation: none !important;
  }
}

@media (max-width: 420px), (max-height: 780px) {
  html[data-route="app"] .final {
    padding: calc(var(--final-banner-height) + 14px) 18px 18px;
  }

  html[data-route="app"] .final::after {
    height: var(--final-banner-height);
    background:
      linear-gradient(90deg, rgba(17,5,35,.04), transparent 42%, rgba(62,15,92,.08)),
      url("./assets/final-streamer-studio.png") 52% 50% / auto 122% no-repeat;
  }

  html[data-route="app"] .final .icon-badge {
    top: 14px;
    left: 14px;
    width: 52px;
    height: 52px;
    flex-basis: 52px;
    border-radius: 15px;
  }

  html[data-route="app"] .final .icon-badge svg {
    width: 23px;
    height: 23px;
  }

  html[data-route="app"] .final h2 {
    margin-bottom: 6px;
    font-size: 24px;
  }

  html[data-route="app"] .final p {
    margin-bottom: 12px;
    font-size: 12.5px;
    line-height: 1.42;
  }

  html[data-route="app"] .final-home-row {
    margin-top: 10px;
  }

  html[data-route="app"] .final-support-chip {
    min-height: 58px;
    padding: 10px 12px;
  }

  html[data-route="app"] .nav {
    margin-top: 12px;
  }
}