.how-button {
  min-width: 92px;
}

.onboarding-dialog {
  width: min(620px, calc(100% - 28px));
  border: 1px solid rgba(182, 244, 79, 0.68);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(182, 244, 79, 0.09), transparent 40%),
    linear-gradient(315deg, rgba(126, 199, 216, 0.1), transparent 45%),
    #10150d;
  color: var(--ink, #f6f1e4);
  padding: 0;
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.42);
}

.onboarding-dialog:not([open]) {
  display: none;
}

.onboarding-dialog[open] {
  display: block;
  position: fixed;
  inset: 50% auto auto 50%;
  z-index: 55;
  max-height: calc(100vh - 28px);
  overflow: auto;
  transform: translate(-50%, -50%);
}

.onboarding-dialog::backdrop {
  background: rgba(0, 0, 0, 0.76);
  backdrop-filter: blur(8px);
}

.onboarding-card {
  display: grid;
  gap: 18px;
  padding: clamp(20px, 4vw, 30px);
}

.onboarding-eyebrow {
  margin: 0;
  color: var(--acid, #b6f44f);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.onboarding-card h2 {
  margin: 0;
  font-size: clamp(32px, 6vw, 48px);
  line-height: 0.95;
}

.onboarding-steps {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.onboarding-steps li {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 12px;
  min-height: 58px;
  padding: 12px;
  border: 1px solid var(--line, #33402b);
  border-radius: 8px;
  background: rgba(8, 9, 7, 0.56);
  color: var(--muted, #aaa792);
  line-height: 1.4;
}

.onboarding-steps b {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(182, 244, 79, 0.52);
  border-radius: 50%;
  background: rgba(182, 244, 79, 0.14);
  color: var(--acid, #b6f44f);
  font-size: 18px;
}

.onboarding-steps strong {
  display: block;
  margin-bottom: 3px;
  color: var(--ink, #f6f1e4);
}

.onboarding-tip {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid rgba(255, 112, 66, 0.42);
  border-radius: 8px;
  background: rgba(255, 112, 66, 0.1);
  color: #f8d8c7;
  line-height: 1.45;
}

.onboarding-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.onboarding-actions button {
  min-height: 46px;
  min-width: 132px;
  border-radius: 8px;
  background: var(--acid, #b6f44f);
  color: #101608;
  font-weight: 950;
}

@supports (-moz-appearance: none) {
  .onboarding-dialog::backdrop {
    backdrop-filter: none;
  }
}

@supports (-webkit-touch-callout: none) {
  .onboarding-dialog::backdrop {
    backdrop-filter: none;
  }
}

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

@media (max-width: 560px) {
  .how-button {
    min-width: 0;
  }

  .onboarding-steps li {
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 10px;
  }

  .onboarding-steps b {
    width: 32px;
    height: 32px;
    font-size: 16px;
  }
}