/* study-welcome-tour.css — the ten-second first-run tour
   (public/js/study/study-welcome-tour.js). One rounded hole whose shadow dims
   everything else, gliding from target to target, and a small card beside it
   in the landing's type (khio-ui.css tokens and .k-btn). */

.kwt { position: fixed; inset: 0; z-index: 2147480000; font-family: var(--k-sans, system-ui, sans-serif); opacity: 0; transition: opacity .3s ease; }
.kwt.is-in { opacity: 1; }
/* 16px: the shell's 10px controls (study-rail.css) plus the 6px the hole pads them by, so it hugs them. */
.kwt-hole { position: fixed; left: 50%; top: 50%; width: 0; height: 0; border-radius: 16px; pointer-events: none;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .92), 0 0 0 9999px rgba(12, 12, 16, .5);
    transition: left .5s cubic-bezier(.22, 1, .36, 1), top .5s cubic-bezier(.22, 1, .36, 1), width .5s cubic-bezier(.22, 1, .36, 1), height .5s cubic-bezier(.22, 1, .36, 1), opacity .3s ease; }
.kwt-card { position: fixed; width: 300px; padding: 18px 18px 16px; border-radius: 20px; background: var(--k-surface, #fff); color: var(--k-ink, #111114);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 24px 60px rgba(0, 0, 0, .28); overflow: hidden;
    transition: left .5s cubic-bezier(.22, 1, .36, 1), top .5s cubic-bezier(.22, 1, .36, 1), opacity .18s ease, transform .18s ease; }
.kwt-card.is-switching { opacity: .35; transform: scale(.985); }
.kwt-dots { display: flex; gap: 5px; margin-bottom: 12px; }
.kwt-dots i { width: 18px; height: 4px; border-radius: 2px; background: var(--k-line, rgba(17, 17, 20, .1)); transition: background .3s ease; }
.kwt-dots i.is-on { background: var(--k-ink, #111114); }
.kwt-title { margin: 0; font-family: var(--k-display, Georgia, serif); font-weight: 500; font-size: 25px; line-height: 1.05; letter-spacing: -.018em; }
.kwt-body { margin: 7px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--k-ink-2, rgba(17, 17, 20, .64)); }
.kwt-body b { color: var(--k-ink, #111114); font-weight: 600; }
.kwt-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; }
.kwt-skip { padding: 6px 2px; border: 0; background: none; font: 500 14px var(--k-sans, system-ui, sans-serif); color: var(--k-ink-3, rgba(17, 17, 20, .45)); cursor: pointer; }
.kwt-skip:hover { color: var(--k-ink, #111114); }
.kwt-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: transparent; }
.kwt-bar i { display: block; height: 100%; width: 0; background: var(--k-blue, #0a84ff); }
@media (prefers-reduced-motion: reduce) {
    .kwt, .kwt-hole, .kwt-card { transition: none; }
}