:root {
  --legacy-tour-pink: #ff0080;
  --legacy-tour-cyan: #00b8d4;
  --legacy-tour-ink: #101010;
}

.legacy-tour-launcher-wrap {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 2147483000;
  display: flex;
  align-items: center;
  gap: 8px;
}

.legacy-tour-launcher {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 3px 10px 3px 3px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, var(--legacy-tour-ink), #2a071b);
  box-shadow: 0 8px 22px rgba(16, 16, 16, .16);
  font: 800 9px/1 system-ui, sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
}

.legacy-tour-launcher span {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: var(--legacy-tour-ink);
  background: #fff;
  font-size: 12px;
}

.legacy-tour-launcher:hover,
.legacy-tour-launcher:focus-visible,
.legacy-tour-disable:hover,
.legacy-tour-disable:focus-visible {
  transform: translateY(-1px);
  outline: 2px solid rgba(255, 0, 128, .2);
  outline-offset: 2px;
}

.legacy-tour-launcher.is-off {
  width: 28px;
  height: 28px;
  min-height: 0;
  padding: 0;
  gap: 0;
  justify-content: center;
  color: rgba(16, 16, 16, .38);
  background: rgba(16, 16, 16, .06);
  border: 1px solid rgba(16, 16, 16, .1);
  box-shadow: none;
  opacity: .72;
}

.legacy-tour-launcher.is-off span {
  width: 28px;
  height: 28px;
  color: rgba(16, 16, 16, .38);
  background: transparent;
  font-size: 13px;
  font-weight: 700;
}

.legacy-tour-launcher.is-off strong {
  display: none;
}

.legacy-tour-launcher.is-off:hover,
.legacy-tour-launcher.is-off:focus-visible {
  transform: none;
  opacity: 1;
  color: rgba(16, 16, 16, .55);
  background: rgba(16, 16, 16, .1);
  outline: 2px solid rgba(16, 16, 16, .16);
  outline-offset: 2px;
}

.legacy-tour-disable {
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid rgba(16, 16, 16, .1);
  border-radius: 999px;
  color: rgba(16, 16, 16, .62);
  background: rgba(255, 255, 255, .86);
  box-shadow: none;
  font: 800 9px/1 system-ui, sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
}

#legacy-tour-layer[hidden] { display: none !important; }

.legacy-tour__blocker {
  position: fixed;
  inset: 0;
  z-index: 2147483500;
  background: transparent;
}

.legacy-tour__spotlight {
  position: fixed;
  z-index: 2147483550;
  border: 3px solid var(--legacy-tour-pink);
  border-radius: 18px;
  pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(8, 8, 12, .68), 0 0 0 7px rgba(255, 255, 255, .9), 0 18px 65px rgba(255, 0, 128, .28);
  transition: left .2s ease, top .2s ease, width .2s ease, height .2s ease;
}

.legacy-tour__card {
  position: fixed;
  z-index: 2147483600;
  width: min(420px, calc(100vw - 24px));
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 26px;
  color: #fff;
  background:
    radial-gradient(circle at 88% 12%, rgba(255, 0, 128, .22), transparent 28%),
    linear-gradient(145deg, #111 0%, #190b13 100%);
  box-shadow: 0 28px 90px rgba(0, 0, 0, .42);
  font-family: "Rethink Sans", system-ui, sans-serif;
}

.legacy-tour__card--center {
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%);
}

.legacy-tour__card:not(.legacy-tour__card--center) { transform: none; }

.legacy-tour__eyebrow {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  color: #ff5cae;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.legacy-tour__card h2 {
  margin: 14px 0 0;
  color: #fff;
  font: 900 clamp(25px, 4vw, 34px)/.98 "Epilogue", system-ui, sans-serif;
  letter-spacing: -.045em;
  text-transform: uppercase;
}

.legacy-tour__card > p {
  margin: 14px 0 0;
  color: rgba(255, 255, 255, .74);
  font-size: 15px;
  line-height: 1.55;
}

.legacy-tour__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 22px;
}

.legacy-tour__actions > div { display: flex; gap: 8px; }

.legacy-tour__actions button {
  min-height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.legacy-tour__primary {
  color: #fff;
  background: var(--legacy-tour-pink);
  box-shadow: 0 10px 30px rgba(255, 0, 128, .3);
}

.legacy-tour__secondary {
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .06);
}

.legacy-tour__secondary:disabled { opacity: .3; }

.legacy-tour__keys {
  margin-top: 14px !important;
  font-size: 10px !important;
  font-weight: 700;
  letter-spacing: .08em;
  text-align: center;
  text-transform: uppercase;
}

.legacy-tour__quiet {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, .62);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
}

.legacy-tour__quiet:hover,
.legacy-tour__quiet:focus-visible {
  color: #fff;
  outline: none;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 640px) {
  .legacy-tour-launcher-wrap { right: 12px; bottom: 12px; }
  .legacy-tour-launcher:not(.is-off) { padding-right: 10px; }
  .legacy-tour-launcher strong { display: none; }
  .legacy-tour__card { padding: 20px; border-radius: 22px; }
  .legacy-tour__actions { align-items: stretch; flex-direction: column-reverse; }
  .legacy-tour__actions > div { display: grid; grid-template-columns: 1fr 1.25fr; }
  .legacy-tour__actions button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .legacy-tour__spotlight,
  .legacy-tour-launcher { transition: none; }
}
