.oc-focused-tour[hidden] { display: none !important; }
.oc-focused-tour {
  --oc-tour-accent: var(--app-accent, #8d5966);
  --oc-tour-paper: var(--app-paper, #fffdfa);
  --oc-tour-ink: var(--app-ink, #2f292b);
  --oc-tour-muted: var(--app-muted, #746b6e);
  --oc-tour-line: var(--app-line, #ddd4d6);
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  color: var(--oc-tour-ink);
  font-family: inherit;
}
.oc-focused-tour__guard {
  position: fixed;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: default;
}
.oc-focused-tour__focus {
  position: fixed;
  z-index: 1;
  min-width: 28px;
  min-height: 28px;
  border: 2px solid #fff;
  border-radius: 0;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, .68), 0 0 0 5px rgba(255, 255, 255, .18);
  pointer-events: none;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  transition: left .2s ease, top .2s ease, width .2s ease, height .2s ease;
}
.oc-focused-tour__card {
  position: fixed;
  z-index: 2;
  width: min(380px, calc(100vw - 24px));
  padding: 18px;
  border: 1px solid var(--oc-tour-line);
  border-radius: 10px;
  background: var(--oc-tour-paper);
  box-shadow: 0 22px 70px rgba(0, 0, 0, .3);
}
.oc-focused-tour__head,
.oc-focused-tour__foot,
.oc-focused-tour__actions { display: flex; align-items: center; }
.oc-focused-tour__head { justify-content: space-between; gap: 12px; }
.oc-focused-tour__eyebrow,
.oc-focused-tour__progress {
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.oc-focused-tour__eyebrow { color: var(--oc-tour-accent); }
.oc-focused-tour__progress { margin-left: auto; color: var(--oc-tour-muted); letter-spacing: .08em; }
.oc-focused-tour__close {
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--oc-tour-line);
  border-radius: 6px;
  color: var(--oc-tour-muted);
  background: transparent;
  font: 700 18px/1 sans-serif;
}
.oc-focused-tour__card h2 { margin: 16px 0 8px; font-size: 21px; line-height: 1.3; }
.oc-focused-tour__card p { margin: 0; color: var(--oc-tour-muted); font-size: 12px; line-height: 1.7; }
.oc-focused-tour__foot { justify-content: space-between; gap: 12px; margin-top: 18px; }
.oc-focused-tour__actions { gap: 8px; }
.oc-focused-tour__button {
  min-height: 38px;
  padding: 0 13px;
  border: 1px solid var(--oc-tour-line);
  border-radius: 6px;
  color: var(--oc-tour-ink);
  background: #fff;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
}
.oc-focused-tour__button--text { padding-inline: 3px; border-color: transparent; color: var(--oc-tour-muted); background: transparent; }
.oc-focused-tour__button--primary { border-color: var(--oc-tour-accent); color: #fff; background: var(--oc-tour-accent); }
.oc-focused-tour__button:disabled { opacity: .38; cursor: default; }
body.oc-focused-tour-open { overflow: hidden; }

@media (max-width: 760px) {
  .oc-focused-tour__card {
    left: 10px !important;
    right: 10px;
    top: auto !important;
    bottom: calc(10px + env(safe-area-inset-bottom));
    width: auto;
    padding: 16px;
    max-height: min(46dvh, 430px);
    overflow: auto;
  }
  .oc-focused-tour__card.is-top {
    top: calc(10px + env(safe-area-inset-top)) !important;
    bottom: auto;
  }
  .oc-focused-tour__card h2 { margin-top: 13px; font-size: 19px; }
  .oc-focused-tour__focus { transition-duration: .12s; }
}

@media (prefers-reduced-motion: reduce) {
  .oc-focused-tour__focus { transition: none; }
}