.tour { position: fixed; inset: 0; z-index: 1000; pointer-events: none; opacity: 0; transition: opacity .3s ease; font-family: var(--f-ui, system-ui, sans-serif); }
.tour.is-in { opacity: 1; }
.tour__shade { position: absolute; inset: 0; pointer-events: auto; background: transparent; }
.tour__spot { position: absolute; left: 50%; top: 50%; width: 0; height: 0; border-radius: 16px; pointer-events: none; box-shadow: 0 0 0 200vmax rgba(8, 3, 1, .66); transition: left .45s cubic-bezier(.2, .8, .2, 1), top .45s cubic-bezier(.2, .8, .2, 1), width .45s cubic-bezier(.2, .8, .2, 1), height .45s cubic-bezier(.2, .8, .2, 1), border-radius .45s, opacity .3s; }
.tour:has(.tour__card.is-center) .tour__shade { background: rgba(8, 3, 1, .66); }
.tour__aura { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

.tour__card { position: absolute; left: 50%; top: 50%; width: min(400px, calc(100vw - 24px)); padding: 18px 20px 16px; border-radius: 20px; pointer-events: auto; color: #fff2e4;
  background: radial-gradient(120% 80% at 0% 0%, rgba(255, 120, 30, .2), transparent 60%), linear-gradient(170deg, #2a1408, #120704 80%);
  border: 1px solid rgba(255, 160, 70, .45); box-shadow: 0 30px 80px -24px rgba(0, 0, 0, .95), 0 0 50px -20px rgba(255, 110, 20, .8);
  transition: left .45s cubic-bezier(.2, .8, .2, 1), top .45s cubic-bezier(.2, .8, .2, 1); }
.tour__card.is-center { left: 50% !important; top: 50% !important; width: min(460px, calc(100vw - 24px)); transform: translate(-50%, -50%); padding: 24px 26px 20px; }
.tour__card.is-pop { animation: tour-pop .45s cubic-bezier(.2, 1.3, .4, 1) both; }
.tour__card.is-center.is-pop { animation: tour-pop-c .5s cubic-bezier(.2, 1.3, .4, 1) both; }
@keyframes tour-pop { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes tour-pop-c { from { opacity: 0; transform: translate(-50%, -46%) scale(.94); } to { opacity: 1; transform: translate(-50%, -50%); } }

.tour__who { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.tour__who img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; background: #0c0503; box-shadow: 0 0 0 2px rgba(255, 170, 80, .6), 0 0 18px -2px rgba(255, 120, 20, .8); }
.tour__who span { display: grid; gap: 1px; min-width: 0; }
.tour__who b { font: 800 15px var(--f-ui, system-ui); color: #fff2e4; }
.tour__who small { color: #ffb35a; font-size: 9.5px; }
.tour__skip { align-self: start; padding: 6px 8px; border: 0; border-radius: 8px; background: none; color: rgba(255, 228, 205, .55); font-size: 10px; cursor: pointer; }
.tour__skip:hover { color: #fff2e4; background: rgba(255, 170, 90, .1); }
.tour__t { margin: 14px 0 6px; font-size: clamp(26px, 3vw, 34px); line-height: .95; color: #fff2e4; text-shadow: 0 0 22px rgba(255, 110, 20, .4); }
.tour__p { margin: 0; font-size: 14.5px; line-height: 1.6; color: rgba(255, 232, 214, .85); }
.tour__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }
.tour__dots { display: flex; flex-wrap: nowrap; gap: 4px; }
.tour__dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 200, 150, .18); }
.tour__dots i.is-done { background: rgba(255, 170, 80, .55); }
.tour__dots i.is-on { width: 16px; border-radius: 3px; background: #ff8a1f; box-shadow: 0 0 8px rgba(255, 120, 20, .8); }
.tour__acts { display: flex; gap: 8px; margin-left: auto; }
.tour__btn { height: 40px; padding: 0 18px; border-radius: 12px; border: 0; cursor: pointer; color: #2a0700; font: italic 900 15px/1 var(--f-display, sans-serif); font-variation-settings: "wdth" 80; text-transform: uppercase; letter-spacing: .02em;
  background: linear-gradient(180deg, #ffe2a6 0%, #ff9a3c 45%, #ff5a1a 100%); box-shadow: 0 0 0 1px rgba(255, 214, 160, .6) inset, 0 0 18px rgba(255, 90, 20, .55); white-space: nowrap; }
.tour__btn:hover { filter: brightness(1.08); }
.tour__btn:focus-visible { outline: 2px solid #ffd27a; outline-offset: 2px; }
.tour__btn.is-ghost { color: #fff2e4; background: rgba(10, 4, 2, .6); box-shadow: 0 0 0 1px rgba(255, 170, 90, .35) inset; font-style: normal; font: 800 11px var(--f-ui, system-ui); letter-spacing: .1em; }

@media (max-width: 640px) {
  .tour__card:not(.is-center) { left: 12px !important; right: 12px; top: auto !important; bottom: max(12px, env(safe-area-inset-bottom)); width: auto; }
  .tour__card.is-top:not(.is-center) { top: max(12px, env(safe-area-inset-top)) !important; bottom: auto; }
  .tour__card.is-center { padding: 20px 18px 16px; }
  .tour__t { font-size: 26px; }
  .tour__p { font-size: 14px; }
  .tour__dots { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tour__spot, .tour__card { transition: none; }
  .tour__card.is-pop, .tour__card.is-center.is-pop { animation: none; }
  .tour__spot { outline: 2px solid rgba(255, 160, 70, .8); }
}