:root {
  color-scheme: light;
  --bg: #f7f6fb;
  --panel: #ffffff;
  --panel-2: #f7f6fa;
  --line: rgba(57,43,76,.10);
  --text: #1d1824;
  --dim: #716979;
  --studio-bg: #f7f6fb;
  --studio-surface: rgba(255,255,255,.90);
  --studio-surface-solid: #ffffff;
  --studio-line: rgba(57,43,76,.10);
}

html[data-route="app"] {
  background: #f7f6fb;
}

html[data-route="app"] body {
  --guide-backdrop:
    linear-gradient(118deg, rgba(var(--scene-rgb-a),.075) 0%, transparent 34%),
    linear-gradient(242deg, rgba(var(--scene-rgb-b),.055) 0%, transparent 31%),
    linear-gradient(90deg, #f8f7fc 0%, #fcfbfe 48%, #f5f7fb 100%);
  color: #1d1824;
  background-color: #f7f6fb;
  background-image: var(--guide-backdrop);
}

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

html[data-route="app"] ::selection {
  color: #17121e;
  background: rgba(255,78,154,.22);
}

html[data-route="app"] .guide-head-shell {
  background-color: #f7f6fb;
  background-image: var(--guide-backdrop);
}

html[data-route="app"] .guide-head-shell::after {
  background-color: #f7f6fb;
  background-image: var(--guide-backdrop);
}

html[data-route="app"] .topbar,
html[data-route="app"] .progress-wrap {
  border-color: rgba(45,35,62,.105);
  background:
    linear-gradient(115deg, rgba(var(--scene-rgb-a),.035), rgba(var(--scene-rgb-b),.022)),
    rgba(255,255,255,.88);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 12px 34px rgba(55,40,80,.075),
    0 0 26px rgba(var(--scene-rgb-a),.045);
  -webkit-backdrop-filter: blur(22px) saturate(145%);
  backdrop-filter: blur(22px) saturate(145%);
}

html[data-route="app"] .brand {
  color: #1d1824;
}

html[data-route="app"] .mark-img {
  box-shadow:
    0 0 0 1px rgba(83,62,112,.10),
    0 8px 20px rgba(87,55,130,.14),
    0 0 20px rgba(207,63,180,.13);
}

html[data-route="app"] .language-select,
html[data-route="app"] .age {
  color: #332a3d;
  border-color: rgba(57,43,76,.12);
  background-color: rgba(250,249,253,.94);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.94);
}

html[data-route="app"] .language-select:focus-visible,
html[data-route="app"] .age:focus-visible {
  outline: 0;
  border-color: rgba(124,92,255,.30);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.94),
    0 0 0 2px rgba(124,92,255,.12);
}

html[data-route="app"] .language-select:focus,
html[data-route="app"] .age:focus {
  outline: 0 !important;
}

html[data-route="app"] .app,
html[data-route="app"] .app * {
  -webkit-tap-highlight-color: transparent;
}

html[data-route="app"] .progress-track {
  background: rgba(40,31,54,.075);
}

html[data-route="app"] .progress-copy,
html[data-route="app"] .progress-label,
html[data-route="app"] #stepCounter {
  color: #6d6575;
}

html[data-route="app"] .progress-title,
html[data-route="app"] #stepTitle,
html[data-route="app"] #stepTitleShort,
html[data-route="app"] .progress-label b,
html[data-route="app"] .progress-label span:last-child {
  color: #231d2a;
}

html[data-route="app"] .dots i {
  background: rgba(42,33,56,.10);
  box-shadow: none;
}

html[data-route="app"] .dots i.active {
  background: #2d2635;
  box-shadow: 0 0 0 3px rgba(45,38,53,.07);
}

html[data-route="app"] .home-hero {
  min-height: 500px;
  border-color: rgba(57,42,77,.11);
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.02) 0%,
      rgba(253,250,255,.08) 35%,
      rgba(250,247,253,.43) 48%,
      rgba(253,251,255,.84) 59%,
      rgba(255,255,255,.98) 67%,
      #fff 72%,
      #fff 100%
    ),
    linear-gradient(125deg, rgba(139,92,255,.08), transparent 58%),
    url("./assets/live-stars-signature-hero.png") 50% 0 / auto 78% no-repeat,
    #fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 22px 55px rgba(68,49,94,.105),
    0 0 34px rgba(211,70,166,.055);
}

html[data-route="app"] .home-hero::before {
  background: linear-gradient(90deg, transparent 5%, #49d8ec, #925cff 34%, #f3499d 66%, #ff8050, transparent 95%);
  box-shadow: 0 2px 13px rgba(236,68,151,.13);
}

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

html[data-route="app"] .home h1,
html[data-route="app"] .step h2,
html[data-route="app"] .final h2 {
  color: #1d1824;
  text-shadow: none;
}

html[data-route="app"] .home h1 {
  text-shadow: 0 2px 14px rgba(255,255,255,.65);
}

html[data-route="app"] .home .desc,
html[data-route="app"] .final p {
  color: #61596b;
}

html[data-route="app"] .home-cta,
html[data-route="app"] .btn.primary {
  color: #17121d;
  border-color: rgba(133,67,159,.06);
  background: linear-gradient(110deg, #6dddf2 0%, #8d65ff 31%, #f3449b 68%, #ff8352 100%);
  box-shadow:
    0 13px 30px rgba(224,64,153,.18),
    0 0 26px rgba(95,198,236,.13),
    inset 0 1px 0 rgba(255,255,255,.32);
}

html[data-route="app"] .home-cta:hover,
html[data-route="app"] .btn.primary:hover {
  box-shadow:
    0 16px 34px rgba(224,64,153,.23),
    0 0 30px rgba(95,198,236,.16),
    inset 0 1px 0 rgba(255,255,255,.36);
}

html[data-route="app"] .home-point,
html[data-route="app"] .home-chip {
  color: #211b28;
  border-color: rgba(61,45,80,.105);
  background:
    linear-gradient(135deg, rgba(var(--scene-rgb-a),.025), rgba(var(--scene-rgb-b),.014)),
    rgba(255,255,255,.91);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.96),
    0 12px 29px rgba(63,46,85,.07);
}

html[data-route="app"] .home-row > .home-chip:only-child {
  width: 100%;
  flex-basis: 100%;
}

html[data-route="app"] .home-point strong,
html[data-route="app"] .home-chip .chip-label {
  color: #211b28;
}

html[data-route="app"] .home-point span,
html[data-route="app"] .home-chip small {
  color: #756d7e;
}

html[data-route="app"] .home-point .ico {
  border-color: rgba(var(--scene-rgb-a),.16);
  background: rgba(var(--scene-rgb-a),.065);
}

html[data-route="app"] .home-foot {
  color: #948d9b;
}

html[data-route="app"] .eyebrow {
  color: color-mix(in srgb, var(--scene-a) 72%, #463b55);
}

html[data-route="app"] .step[data-step]:not([data-step="home"]):not([data-step="final"])::before {
  content: none;
  display: none;
}

html[data-route="app"] .step[data-step]:not([data-step="home"]):not([data-step="final"]) {
  background: none;
}

html[data-route="app"] .icon-badge {
  box-shadow:
    inset 0 0 15px rgba(255,255,255,.16),
    inset 0 1px 0 rgba(255,255,255,.30);
}

html[data-route="app"] .card {
  color: #2b2433;
  border-color: rgba(58,43,77,.105);
  background:
    linear-gradient(135deg, rgba(var(--scene-rgb-a),.027), transparent 48%),
    rgba(255,255,255,.92);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    0 17px 42px rgba(58,42,78,.085);
}

html[data-route="app"] .card p.lead,
html[data-route="app"] .card > p,
html[data-route="app"] .final > p {
  color: #403847;
}

html[data-route="app"] .bullet {
  color: #27202f;
  border-color: rgba(60,45,79,.085);
  background: rgba(249,248,252,.93);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.92);
}

html[data-route="app"] .bullet b {
  color: #27202f;
}

html[data-route="app"] .bullet div,
html[data-route="app"] .bullet span,
html[data-route="app"] .bullet small {
  color: #6e6677;
}

html[data-route="app"] .bullet .dot-ico {
  border-color: color-mix(in srgb, var(--scene-a) 82%, #fff);
  background: var(--scene-a);
  box-shadow: none;
}

html[data-route="app"] .bullet .dot-ico svg {
  stroke: #fff;
  filter: none;
}

html[data-route="app"] .rate-box,
html[data-route="app"] .pay-chip {
  color: #2a2332;
  border-color: rgba(60,45,79,.09);
  background: rgba(247,246,251,.95);
}

html[data-route="app"] .rate-box span,
html[data-route="app"] .rate-box small,
html[data-route="app"] .rate-box .lbl,
html[data-route="app"] .pay-chip .tag {
  color: #716979;
}

html[data-route="app"] .rate-box strong,
html[data-route="app"] .rate-box .val,
html[data-route="app"] .pay-chip strong {
  color: #241d2c;
  text-shadow: none;
}

html[data-route="app"] .note,
html[data-route="app"] .inline-warning {
  color: #534a5c;
  border-color: rgba(var(--scene-rgb-a),.20);
  background:
    linear-gradient(120deg, rgba(var(--scene-rgb-a),.095), rgba(var(--scene-rgb-b),.03)),
    rgba(255,255,255,.88);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.80),
    0 10px 26px rgba(67,48,91,.055);
}

html[data-route="app"] .note strong,
html[data-route="app"] .inline-warning strong {
  color: #2c2435;
}

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,
html[data-route="app"] [class*="diamond-cut-"]::after {
  content: none !important;
  display: none !important;
  background: none !important;
}

html[data-route="app"] .stage::before,
html[data-route="app"] .stage::after {
  content: none;
  display: none;
}

html[data-route="app"] .nav {
  border-color: rgba(56,42,74,.105);
  background: rgba(255,255,255,.92);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    0 16px 38px rgba(58,42,79,.11);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
}

html[data-route="app"] .btn.ghost {
  color: #302839;
  border-color: rgba(60,44,78,.11);
  background: #f7f6fa;
}

html[data-route="app"] .btn.ghost:hover {
  background: #f0eef6;
}

html[data-route="app"] .final {
  --final-banner-height: clamp(164px, 38vw, 196px);
  padding-top: calc(var(--final-banner-height) - 2px);
  color: #282130;
  border-color: rgba(59,44,77,.11);
  background:
    linear-gradient(120deg, rgba(69,226,188,.055), transparent 48%, rgba(140,103,255,.045)),
    #fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.96),
    0 19px 44px rgba(60,43,81,.10),
    0 0 30px rgba(69,226,188,.055);
}

html[data-route="app"] .final::after {
  height: var(--final-banner-height);
  background:
    linear-gradient(180deg, rgba(255,255,255,.02) 0 70%, rgba(255,255,255,.88) 93%, #fff 100%),
    linear-gradient(90deg, rgba(255,255,255,.05), transparent 44%, rgba(134,82,178,.05)),
    url("./assets/final-streamer-studio.png") 52% 50% / auto 126% no-repeat;
}

html[data-route="app"] #appView {
  padding-bottom: calc(104px + env(safe-area-inset-bottom));
}

html[data-route="app"] #appView::after {
  content: "";
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 70;
  height: calc(142px + env(safe-area-inset-bottom));
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(247,246,251,0) 0%,
    rgba(247,246,251,.18) 18%,
    rgba(247,246,251,.68) 42%,
    rgba(247,246,251,.94) 64%,
    #f7f6fb 82%,
    #f7f6fb 100%
  );
}

html[data-route="app"] #appView:has(.step[data-step="home"].active) {
  padding-bottom: 28px;
}

html[data-route="app"] #appView:has(.step[data-step="home"].active)::after {
  content: none;
  display: none;
}

html[data-route="app"] #navWrap {
  position: fixed;
  left: 50%;
  bottom: max(10px, env(safe-area-inset-bottom));
  z-index: 80;
  width: min(calc(100% - 24px), 476px);
  margin: 0;
  padding: 9px;
  overflow: visible;
  transform: translateX(-50%);
  border-color: rgba(58,43,76,.11);
  background: rgba(255,255,255,.94);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    0 14px 38px rgba(58,42,79,.14);
  -webkit-backdrop-filter: blur(18px) saturate(145%);
  backdrop-filter: blur(18px) saturate(145%);
}

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

html[data-route="app"] #navWrap > .btn,
html[data-route="app"] #navWrap > .register-pointer,
html[data-route="app"] #navWrap > .scroll-cue {
  z-index: 2;
}

html[data-route="app"] .scroll-cue {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 9px);
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(104,75,136,.13);
  border-radius: 50%;
  color: #6f4fc8;
  background: rgba(255,255,255,.92);
  box-shadow: 0 9px 24px rgba(74,50,105,.14);
  pointer-events: none;
  transform: translateX(-50%);
  animation: guideScrollCue 1.45s ease-in-out infinite;
}

html[data-route="app"] .scroll-cue[hidden] {
  display: none;
}

html[data-route="app"] .scroll-cue svg {
  width: 18px;
  height: 18px;
}

@keyframes guideScrollCue {
  0%, 100% { transform: translate(-50%, 0); opacity: .74; }
  50% { transform: translate(-50%, 6px); opacity: 1; }
}

html[data-route="app"] .register-pointer {
  color: #31263b;
  border-color: rgba(224,65,151,.16);
  background: rgba(255,255,255,.96);
  box-shadow: 0 12px 28px rgba(69,48,93,.12);
}

@media (max-width: 380px) {
  html[data-route="app"] .home-hero {
    min-height: 488px;
    background-size: auto, auto, auto 76%;
  }
}

@media (max-width: 420px), (max-height: 780px) {
  html[data-route="app"] .final {
    --final-banner-height: clamp(154px, 43vw, 180px);
    padding: calc(var(--final-banner-height) - 4px) 18px 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-route="app"] .home-cta,
  html[data-route="app"] .btn.primary {
    transition: none;
  }

  html[data-route="app"] .scroll-cue {
    animation: none;
  }
}