/* The guided tour (tour.js): a dimmed page with a spotlight on one part of the app and a card that explains it. Everything is drawn by the tour itself; nothing here loads from anywhere else. */
.demo-tour-btn { margin-left: 12px; padding: 1px 10px; border-radius: 999px; border: 1px solid #388bfd; background: #1f6feb; color: #fff; font: 600 11px/16px system-ui, -apple-system, 'Segoe UI', sans-serif; cursor: pointer; }
.demo-tour-btn:hover, .demo-tour-btn:focus-visible { background: #388bfd; outline: 2px solid #fff; outline-offset: 1px; }
.demo-banner { position: relative; }
.tour-root { position: fixed; inset: 0; z-index: 2147483001; }
.tour-root[hidden] { display: none; }
.tour-block { position: absolute; inset: 0; background: transparent; }
.tour-spot { position: absolute; border-radius: 10px; box-shadow: 0 0 0 9999px rgba(1, 4, 9, 0.72), 0 0 0 2px #58a6ff inset; transition: left .25s ease, top .25s ease, width .25s ease, height .25s ease; pointer-events: none; }
.tour-spot.tour-light { box-shadow: 0 0 0 2px #58a6ff, 0 0 0 7px rgba(88, 166, 255, 0.28); }
.tour-spot.tour-none { box-shadow: 0 0 0 9999px rgba(1, 4, 9, 0.72); border-radius: 0; width: 0; height: 0; }
.tour-card { position: absolute; box-sizing: border-box; width: min(380px, calc(100vw - 24px)); padding: 18px 20px 16px; border-radius: 14px; background: #161b22; color: #e6edf3; border: 1px solid #30363d; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55); font: 400 15px/1.5 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; }
.tour-card:focus { outline: none; }
.tour-count { margin: 0 0 6px; font: 700 11px/1.2 system-ui, -apple-system, 'Segoe UI', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #8b949e; }
.tour-title { margin: 0 0 8px; font-size: 19px; line-height: 1.25; font-weight: 700; color: #fff; }
.tour-text { margin: 0 0 14px; color: #c9d1d9; }
.tour-text strong { color: #fff; }
.tour-dots { display: flex; gap: 5px; margin: 0 0 14px; padding: 0; list-style: none; }
.tour-dots li { width: 7px; height: 7px; border-radius: 50%; background: #30363d; }
.tour-dots li.on { background: #58a6ff; }
.tour-dots li.done { background: #1f6feb; }
.tour-actions { display: flex; align-items: center; gap: 8px; }
.tour-actions .tour-skip { margin-right: auto; background: none; border: 0; padding: 8px 4px; color: #8b949e; font: inherit; font-size: 13px; cursor: pointer; text-decoration: underline; }
.tour-actions .tour-skip:hover, .tour-actions .tour-skip:focus-visible { color: #e6edf3; }
.tour-btn { min-height: 40px; padding: 8px 16px; border-radius: 8px; border: 1px solid #30363d; background: #21262d; color: #e6edf3; font: 600 14px/1.2 inherit; font-family: inherit; cursor: pointer; }
.tour-btn:hover, .tour-btn:focus-visible { border-color: #58a6ff; }
.tour-btn:focus-visible, .tour-skip:focus-visible { outline: 2px solid #58a6ff; outline-offset: 2px; }
.tour-btn.primary { background: #1f6feb; border-color: #388bfd; color: #fff; }
.tour-btn.primary:hover { background: #388bfd; }
.tour-btn[disabled] { opacity: .4; cursor: default; }
@media (max-width: 700px) { .tour-card { left: 12px !important; right: 12px; top: auto !important; bottom: 12px; width: auto; } }
@media (prefers-reduced-motion: reduce) { .tour-spot { transition: none; } }