.tour { position: fixed; inset: 0; z-index: 2000; }
.tour-dim { position: absolute; inset: 0; background: rgba(22, 40, 42, .5); backdrop-filter: blur(3px); }
.tour-spot { position: absolute; display: none; border-radius: 16px; box-shadow: 0 0 0 9999px rgba(22, 40, 42, .5), 0 0 0 3px #fff; pointer-events: none; transition: all .3s ease; }
.tour-spot[style*="block"] ~ .tour-dim, .tour:has(.tour-spot[style*="block"]) .tour-dim { background: transparent; backdrop-filter: none; }
.tour-card { position: absolute; width: min(92vw, 420px); display: flex; gap: 14px; align-items: flex-end; padding: 22px 22px 20px 12px; border-radius: 24px; background: #fff; box-shadow: 0 30px 70px rgba(22, 40, 42, .35); }
.tour-card.pop { animation: tourpop .4s cubic-bezier(.2, 1.2, .4, 1) both; }
@keyframes tourpop { from { opacity: 0; scale: .94; } to { opacity: 1; scale: 1; } }
.tour-nami { flex: none; width: 84px; height: auto; margin-bottom: -4px; filter: drop-shadow(0 8px 10px rgba(22, 40, 42, .18)); }
.tour-body { min-width: 0; flex: 1; }
.tour-kick { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.tour-card h2 { margin: 4px 0 6px; font-size: 20px; letter-spacing: -.02em; color: var(--ink); line-height: 1.2; }
.tour-card p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--body); }
.tour-mouse { margin: 12px 0 0; width: 22px; height: 34px; border: 2px solid var(--ink); border-radius: 12px; position: relative; opacity: .7; }
.tour-mouse i { position: absolute; left: 50%; top: 6px; width: 3px; height: 7px; margin-left: -1.5px; border-radius: 2px; background: var(--ink); animation: tmouse 1.5s ease-in-out infinite; }
@keyframes tmouse { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(11px); opacity: 0; } 100% { opacity: 0; } }
.tour-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }
.tour-dots { display: flex; gap: 5px; } .tour-dots i { width: 7px; height: 7px; border-radius: 50%; background: #d8d3c9; } .tour-dots i.cur { background: var(--accent); width: 18px; border-radius: 4px; } .tour-dots i.done { background: var(--accent); opacity: .45; }
.tour-btns { display: flex; align-items: center; gap: 6px; }
.tour-skip { font: inherit; font-size: 13.5px; font-weight: 600; padding: 9px 12px; border: 0; background: none; color: var(--muted); cursor: pointer; border-radius: 999px; } .tour-skip:hover { color: var(--ink); }
.tour-next { font: inherit; font-size: 14px; font-weight: 700; padding: 10px 20px; border: 0; border-radius: 999px; background: var(--ink); color: #fff; cursor: pointer; transition: transform .15s, box-shadow .15s; } .tour-next:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(22, 40, 42, .25); }
.jump .round { width: 30px; padding: 0; text-align: center; color: var(--muted); }
@media (max-width: 520px) { .tour-nami { width: 64px; } .tour-card { padding: 18px 16px 16px 8px; } .tour-card h2 { font-size: 18px; } }
@media (prefers-reduced-motion: reduce) { .tour-card.pop, .tour-mouse i { animation: none; } }

/* the toast */
.tour-toast { position: fixed; left: 50%; top: 78px; z-index: 1900; display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; border-radius: 999px; background: #fff; box-shadow: 0 16px 40px rgba(22, 40, 42, .22); border: 1px solid var(--line); transform: translate(-50%, -16px); opacity: 0; pointer-events: none; transition: opacity .35s, transform .35s cubic-bezier(.2, 1.1, .4, 1); max-width: calc(100vw - 24px); }
.tour-toast.in { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.tour-toast img { flex: none; width: 40px; height: auto; margin: -8px 0 -4px; }
.tour-toast .tt { font-size: 15px; color: var(--body); line-height: 1.35; } .tour-toast .tt b { color: var(--ink); }
.tour-toast.ok .tt b { color: var(--accent); }
.tour-toast .tour-mouse { margin: 0 4px; }
.tour-toast .tour-skip { padding: 6px 8px; font-size: 12.5px; }
.tour-toast .tt { white-space: nowrap; }
@media (max-width: 460px) { .tour-toast { border-radius: 22px; } .tour-toast .tt { white-space: normal; } .tour-toast .tour-mouse { display: none; } }