/* Guided tour (owned by the tour section). Fixed overlay: amber ring with a huge shadow = dimmed page. */
:root{--tour-dim:rgba(0,0,0,.6);--tour-ring-glow:rgba(245,158,11,.2);--tour-tip-bg:#141A22;--tour-tip-line:#2A3441;--tour-tip-shadow:none;
  --tour-count:#F59E0B;--tour-skip:#8A93A6;--tour-title:#F3F3F3;--tour-text:#B4BBC8;--tour-dot:#3A4555;--tour-back:#8A93A6;
  --tour-next-bg:#F3F3F3;--tour-next-ink:#0A0D12;--tour-done:#10B981}
:root[data-theme="light"]{--tour-dim:rgba(6,18,54,.45);--tour-ring-glow:rgba(245,158,11,.27);--tour-tip-bg:#FFFFFF;--tour-tip-line:#E5E7EB;--tour-tip-shadow:0 12px 32px rgba(6,18,54,.22);
  --tour-count:#B45309;--tour-skip:#4C5265;--tour-title:#061236;--tour-text:#4C5265;--tour-dot:#D5D9E3;--tour-back:#848BA1;
  --tour-next-bg:#121212;--tour-next-ink:#FFFFFF;--tour-done:#047857}
.tour[hidden]{display:none}
.tour{position:fixed;inset:0;z-index:1000;pointer-events:none}
.tour-block{position:fixed;pointer-events:auto;background:transparent}
.tour-ring{position:fixed;border:2px solid #F59E0B;border-radius:10px;pointer-events:none;box-shadow:0 0 0 5px var(--tour-ring-glow),0 0 0 2000px var(--tour-dim)}
.tour-ring[hidden]{display:none}
.tour-tip{position:fixed;pointer-events:auto;display:flex;flex-direction:column;gap:10px;padding:16px;width:320px;max-width:calc(100vw - 24px);
  background:var(--tour-tip-bg);border:1px solid var(--tour-tip-line);border-radius:12px;box-shadow:var(--tour-tip-shadow);outline:0;font-family:var(--font-body)}
.tour-top{display:flex;align-items:center;justify-content:space-between}
.tour-count{font-size:12px;font-weight:700;letter-spacing:.04em;line-height:16px;color:var(--tour-count)}
.tour-tip.is-done .tour-count::after{content:"\00A0\00B7\00A0done\00A0\2713";color:var(--tour-done);font-weight:600}
.tour-title{font-family:var(--font-heading);font-size:18px;font-weight:700;line-height:22px;color:var(--tour-title)}
.tour-body{font-size:14px;line-height:21px;color:var(--tour-text)}
.tour-foot{display:flex;align-items:center;justify-content:space-between;padding-top:6px}
.tour-dots{display:flex;align-items:center;gap:6px}
.tour-dots i{display:block;width:6px;height:6px;border-radius:3px;background:var(--tour-dot)}
.tour-dots i.on{width:18px;background:#F59E0B}
.tour-dots i.done{background:var(--tour-done)}
.tour-nav{display:flex;align-items:center;gap:6px}
.tour-tip button{font-family:var(--font-body);cursor:pointer;border:0;background:none;padding:0}
.tour-skip{font-size:12px;font-weight:500;line-height:16px;color:var(--tour-skip)}
.tour-skip:hover{text-decoration:underline}
.tour-back{height:32px;padding-inline:12px!important;font-size:13px;font-weight:500;color:var(--tour-back)}
.tour-back:hover:not(:disabled){color:var(--tour-title)}
.tour-back:disabled{cursor:default;opacity:.7}
.tour-next{height:32px;padding-inline:16px!important;border-radius:8px;background:var(--tour-next-bg)!important;color:var(--tour-next-ink);font-size:13px;font-weight:700}
.tour-tip button:focus-visible{outline:2px solid #F59E0B;outline-offset:2px}
.tour-arrow{position:absolute;width:12px;height:12px;background:var(--tour-tip-bg);border:1px solid var(--tour-tip-line);transform:rotate(45deg)}
.tour-tip[data-side="bottom"] .tour-arrow{top:-7px;border-right:0;border-bottom:0}
.tour-tip[data-side="top"] .tour-arrow{bottom:-7px;border-left:0;border-top:0}
.tour-tip[data-side="right"] .tour-arrow{left:-7px;border-right:0;border-top:0}
.tour-tip[data-side="left"] .tour-arrow{right:-7px;border-left:0;border-bottom:0}

/* trigger under the demo: quiet text button, same voice as the data note */
.tour-trigger{display:inline;margin:0 0 0 4px;padding:0;border:0;background:none;font:inherit;color:var(--color-sub);text-decoration:underline;text-underline-offset:3px;cursor:pointer;transition:color .12s}
.tour-trigger:hover{color:var(--color-ink)}
.tour-trigger:focus-visible{outline:2px solid #F59E0B;outline-offset:3px;border-radius:2px}
@media (max-width:600px){.tour-tip{padding:14px}}