.onboarding-dialog {
  --onboard-violet: #d0a9ff;
  --onboard-mint: #a5f3dd;
  width: min(860px, calc(100% - 32px));
  max-width: none;
  max-height: calc(100dvh - 30px);
  margin: auto;
  padding: 0;
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid #a480c7;
  border-radius: 25px;
  background: #15101e;
  color: #fff8ff;
  box-shadow: 0 34px 120px #050209c9, 0 0 52px #a16de043;
  color-scheme: dark;
}

.onboarding-dialog::backdrop {
  background: #090610bf;
  backdrop-filter: blur(8px);
}

.onboarding-dialog[open] {
  scrollbar-width: thin;
  scrollbar-color: #7d5b9b #1a1126;
}

.vybe-onboard {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .77fr) minmax(0, 1.23fr);
  isolation: isolate;
  overflow: hidden;
}

.vybe-onboard[data-step="1"] { --onboard-violet: #c0bbff; }
.vybe-onboard[data-step="2"] { --onboard-violet: #f0b8f5; }
.vybe-onboard[data-step="3"] { --onboard-violet: #b4f3e4; }

.vybe-onboard-art {
  position: relative;
  min-width: 0;
  min-height: 100%;
  overflow: hidden;
  isolation: isolate;
  border-right: 1px solid #cfaff33c;
  background: #181026;
}

.vybe-onboard-art::before {
  position: absolute;
  z-index: -2;
  inset: -11% -24%;
  content: "";
  background: url("/assets/vybe-prism.jpg") 69% center / auto 100% no-repeat;
  rotate: -17deg;
  filter: saturate(1.12);
}

.vybe-onboard-art::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  background:
    linear-gradient(180deg, #170f2596, transparent 42%, #100a1ad9 84%),
    radial-gradient(ellipse at 69% 58%, #a067d044, transparent 58%);
}

.vybe-onboard-orbit {
  position: absolute;
  inset: 10% -49% 4% -21%;
  width: 168%;
  height: 86%;
  color: var(--onboard-violet);
  opacity: .67;
}

.vybe-onboard-orbit path {
  stroke-width: .9;
  vector-effect: non-scaling-stroke;
}

.vybe-onboard-orbit .vybe-orbit-ray {
  stroke: #e5fff7;
  stroke-dasharray: 15 85;
  opacity: .9;
  filter: drop-shadow(0 0 4px #b7ffe4);
}

.vybe-onboard-art-top,
.vybe-onboard-art-bottom {
  position: absolute;
  inset-inline: clamp(15px, 2.5vw, 26px);
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 9px;
}

.vybe-onboard-art-top {
  inset-block-start: clamp(15px, 2.6vw, 26px);
  color: #fff3fe;
  font: 800 11px/1.3 var(--heading, sans-serif);
  letter-spacing: .16em;
  text-transform: uppercase;
}

.vybe-onboard-logo {
  width: 30px;
  height: 30px;
  flex: none;
  background: url("/assets/vybe-logo-icon.svg") center / contain no-repeat;
}

.vybe-onboard-art-bottom {
  inset-block-end: clamp(15px, 2.6vw, 26px);
  justify-content: space-between;
  color: #ebd9ff;
  font: 700 10px/1.3 var(--heading, sans-serif);
  letter-spacing: .13em;
  text-transform: uppercase;
}

.vybe-onboard-art-bottom i {
  width: 25%;
  height: 1px;
  background: linear-gradient(90deg, #b685ef, #b1f5df);
  box-shadow: 0 0 12px #c18aff;
}

.vybe-onboard-close {
  position: absolute;
  z-index: 2;
  top: 13px;
  right: 13px;
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  padding: 0;
  border: 1px solid #c7a1f36b;
  border-radius: 50%;
  background: #21142df0;
  color: #fff3ff;
}

.vybe-onboard-close svg { width: 19px; height: 19px; }

.vybe-onboard-main {
  min-width: 0;
  padding: clamp(23px, 3.5vw, 40px);
  background: radial-gradient(ellipse at 100% 0%, #4b2e5b6b, transparent 62%),
    linear-gradient(153deg, #21162e, #171020 66%);
}

.vybe-onboard-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: calc(100% - 38px);
  margin: 0 0 15px;
  color: #e2c7ff;
  font: 760 10px/1.4 var(--heading, sans-serif);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.vybe-onboard-progress ol {
  display: flex;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.vybe-onboard-progress li {
  width: clamp(14px, 3.3vw, 25px);
  height: 3px;
  border-radius: 10px;
  background: #9171ae54;
}

.vybe-onboard-progress li:is([data-done], [aria-current="step"]) {
  background: linear-gradient(90deg, #aa7ee8, #a6f5de);
}

.vybe-onboard-progress li[aria-current="step"] { box-shadow: 0 0 11px #a6f5de6e; }

.vybe-onboard-heading {
  margin: 0;
  color: #fff5ff;
  font: 800 clamp(30px, 4.1vw, 52px)/.99 var(--heading, sans-serif);
  letter-spacing: -.065em;
  text-wrap: balance;
}

.vybe-onboard-heading:focus { outline: none; }

.vybe-onboard-intro {
  max-width: 43ch;
  margin: 9px 0 15px;
  color: #dcd0e8;
  font-size: clamp(13px, 1.7vw, 15px);
  line-height: 1.45;
}

.vybe-onboard-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.vybe-onboard-option {
  position: relative;
  display: grid;
  grid-template-columns: 27px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 63px;
  padding: 8px 23px 8px 9px;
  overflow: hidden;
  border: 1px solid #c8a1eb52;
  border-radius: 11px;
  background: linear-gradient(151deg, #352543, #271a35);
  color: #fff5ff;
  text-align: left;
  transition: background .25s, border-color .25s, box-shadow .25s, scale .25s;
}

.vybe-onboard-option:hover {
  border-color: #cda7ef;
  background: linear-gradient(151deg, #483458, #30203e);
}

.vybe-onboard-option[aria-pressed="true"] {
  border-color: #b7f2e1;
  background: linear-gradient(151deg, #344c49, #26343c);
  box-shadow: inset 0 1px #c4fdec47, 0 0 16px #83f1d128;
}

.vybe-onboard-option > svg:first-child {
  width: 23px;
  height: 23px;
  color: var(--onboard-violet);
}

.vybe-onboard-option[aria-pressed="true"] > svg:first-child { color: var(--onboard-mint); }

.vybe-onboard-option strong,
.vybe-onboard-option small {
  display: block;
  overflow-wrap: anywhere;
}

.vybe-onboard-option strong {
  font: 770 13px/1.15 var(--heading, sans-serif);
}

.vybe-onboard-option small {
  margin-top: 3px;
  color: #d7c7e4;
  font-size: 11px;
  line-height: 1.15;
}

.vybe-onboard-option .vybe-onboard-check {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 13px;
  height: 13px;
  color: var(--onboard-mint);
  opacity: 0;
}

.vybe-onboard-option[aria-pressed="true"] .vybe-onboard-check { opacity: 1; }

.vybe-onboard-persona {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding: 10px;
  border: 1px solid #b3f5e065;
  border-radius: 12px;
  background: linear-gradient(150deg, #314644, #291c38);
}

.vybe-onboard-persona > svg {
  width: 40px;
  height: 40px;
  padding: 8px;
  border: 1px solid #a7f5df69;
  border-radius: 9px;
  background: #98efdb21;
  color: var(--onboard-mint);
}

.vybe-onboard-persona strong { font: 800 17px/1.15 var(--heading, sans-serif); }
.vybe-onboard-persona p { margin: 4px 0 0; color: #e3d7ef; font-size: 12px; line-height: 1.35; }

.vybe-onboard-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin-top: 13px;
}

.vybe-onboard-action {
  position: relative;
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 12px;
  border: 1px solid #bc95e361;
  border-radius: 9px;
  background: #342347;
  color: #fff4ff;
  font: 740 12px/1.2 var(--heading, sans-serif);
  text-align: center;
}

.vybe-onboard-action:hover { border-color: #d9b7ff; background: #442e58; }
.vybe-onboard-action svg { width: 15px; height: 15px; }

.vybe-onboard-action--primary {
  margin-left: auto;
  overflow: hidden;
  border-color: #d7ffef;
  background: linear-gradient(145deg, #effff8, #98ebd6 75%);
  color: #142b26;
  box-shadow: 0 4px 20px #95e8d02b;
}

.vybe-onboard-action--primary:hover { border-color: #effff9; background: #c6f8e9; }
.vybe-onboard-action--primary:disabled { opacity: .53; }

.vybe-onboard-action--quiet {
  padding-inline: 6px;
  border-color: transparent;
  background: transparent;
  color: #d9c8e9;
}

.vybe-onboard-action--quiet:hover { border-color: transparent; background: #c9a1f020; }

.vybe-onboard-note {
  margin: 9px 0 0;
  color: #d2bfdc;
  font-size: 11px;
  line-height: 1.4;
}

.onboarding-dialog :is(button, a, input):focus-visible {
  outline: 2px solid #d9b6ff;
  outline-offset: 2px;
}

@media (max-width: 650px) {
  .onboarding-dialog {
    width: min(480px, calc(100% - 18px));
    max-height: calc(100dvh - 18px);
    border-radius: 18px;
  }

  .vybe-onboard { grid-template-columns: minmax(0, 1fr); }
  .vybe-onboard-art { min-height: 93px; border-right: 0; border-bottom: 1px solid #cfaff342; }
  .vybe-onboard-art::before { inset: -65% -8%; background-position: 64% center; background-size: cover; rotate: -8deg; }
  .vybe-onboard-orbit { inset: -70% -31% -70% auto; width: 105%; height: 240%; }
  .vybe-onboard-art-top { inset-block-start: 10px; }
  .vybe-onboard-art-bottom { inset-block-end: 12px; }
  .vybe-onboard-main { padding: 16px 13px 14px; }
  .vybe-onboard-progress { margin-bottom: 10px; }
  .vybe-onboard-intro { margin: 7px 0 11px; }
  .vybe-onboard-option { min-height: 57px; padding-right: 16px; gap: 5px; grid-template-columns: 22px minmax(0, 1fr); }
  .vybe-onboard-option > svg:first-child { width: 20px; height: 20px; }
  .vybe-onboard-option strong { font-size: 12px; }
  .vybe-onboard-option small { font-size: 10px; }
}

@media (max-width: 360px) {
  .vybe-onboard-art { min-height: 74px; }
  .vybe-onboard-art-bottom { inset-block-end: 7px; }
  .vybe-onboard-option small { display: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .onboarding-dialog[open] { animation: vybe-onboarding-open .5s cubic-bezier(.16,1,.3,1) both; }
  .onboarding-dialog[open]::backdrop { animation: vybe-onboarding-shade .42s ease both; }
  .vybe-onboard-main { animation: vybe-onboarding-panel .42s cubic-bezier(.16,1,.3,1) both; }
  .vybe-onboard-option { animation: vybe-onboarding-panel .42s cubic-bezier(.16,1,.3,1) calc(var(--onboard-index, 0) * 32ms) backwards; }
  .vybe-onboard-option:active { scale: .98; }
  .vybe-onboard-option[aria-pressed="true"] .vybe-onboard-check { animation: vybe-onboarding-tick .38s cubic-bezier(.24,.8,.24,1.4) both; }
  .vybe-onboard-orbit .vybe-orbit-ray { animation: vybe-onboarding-orbit 2.15s ease-out 2 backwards; }
  .vybe-onboard-art::before { animation: vybe-onboarding-prism 1.3s cubic-bezier(.16,1,.3,1) backwards; }
  .vybe-onboard-action--primary::after {
    position: absolute;
    inset: 0;
    content: "";
    background: linear-gradient(115deg, transparent 30%, #fff9 50%, transparent 68%);
    pointer-events: none;
    translate: -115% 0;
  }
  .vybe-onboard-action--primary:not(:disabled):is(:hover, :focus-visible)::after {
    animation: vybe-onboarding-glint .6s ease both;
  }
}

@keyframes vybe-onboarding-open {
  from { opacity: .55; translate: 0 16px; scale: .97; }
  to { opacity: 1; translate: 0 0; scale: 1; }
}

@keyframes vybe-onboarding-shade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes vybe-onboarding-panel {
  from { opacity: .35; translate: 0 8px; }
  to { opacity: 1; translate: 0 0; }
}

@keyframes vybe-onboarding-prism {
  from { opacity: .54; scale: 1.12; }
  to { opacity: 1; scale: 1; }
}

@keyframes vybe-onboarding-tick {
  from { opacity: 0; scale: .45; }
  to { opacity: 1; scale: 1; }
}

@keyframes vybe-onboarding-orbit {
  from { stroke-dashoffset: 100; opacity: 0; }
  30%, 75% { opacity: .9; }
  to { stroke-dashoffset: 0; opacity: .25; }
}

@keyframes vybe-onboarding-glint {
  to { translate: 115% 0; }
}