/* ---------- GUIDED TOUR ---------- */
:root{--shade:rgba(3,6,14,.74);--shade0:rgba(3,6,14,0)}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]){--shade:rgba(17,22,38,.58);--shade0:rgba(17,22,38,0)}}
:root[data-theme="light"]{--shade:rgba(17,22,38,.58);--shade0:rgba(17,22,38,0)}
.tour-spot{position:fixed;z-index:80;pointer-events:none;border-radius:12px;box-shadow:0 0 0 200vmax var(--shade0);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,box-shadow .6s ease}
.tour-spot.on{box-shadow:0 0 0 200vmax var(--shade)}
.tour-spot.on.ring{box-shadow:0 0 0 2px var(--accent),0 0 28px 6px var(--accent-soft),0 0 0 200vmax var(--shade)}
.tour-block{position:fixed;z-index:81}
.tour-pulse{position:fixed;z-index:82;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:var(--accent);pointer-events:none;box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 30%,transparent)}
.tour-pulse::before,.tour-pulse::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--accent);animation:tp 1.6s ease-out infinite}
.tour-pulse::after{animation-delay:.8s}
.tour-pulse.boost{animation:tb .5s}
@keyframes tp{0%{transform:scale(1);opacity:.95}100%{transform:scale(3.8);opacity:0}}
@keyframes tb{50%{transform:scale(1.9)}}
.tour-card{position:fixed;z-index:83;width:min(360px,calc(100vw - 32px));background:var(--panel);border:1px solid var(--line-2);border-radius:16px;padding:18px 20px;box-shadow:0 30px 80px -24px rgba(0,0,0,.6);transition:left .45s cubic-bezier(.2,.8,.2,1),top .45s cubic-bezier(.2,.8,.2,1)}
.tour-card.welcome{width:min(520px,calc(100vw - 32px));padding:26px 28px 24px}
.tour-card.enter{animation:tcin .38s ease both}
.tour-card.shake{animation:tsh .35s}
@keyframes tcin{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
@keyframes tsh{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.t-sec{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.tour-card h3{font-family:var(--f-display);font-weight:700;font-size:20px;line-height:1.2;letter-spacing:-.01em;margin:6px 0 10px;text-wrap:balance}
.tour-card.welcome h3{font-size:28px;margin-top:8px}
.t-body p{margin:0 0 9px;font-size:15px;color:var(--ink-2);line-height:1.55}
.t-body p:last-child{margin-bottom:0}
.t-body b{color:var(--ink);font-weight:600}
.t-body ul{margin:0 0 10px;padding-left:1.1em;font-size:15px;color:var(--ink-2)}
.t-body li{margin:4px 0}
.t-body code{font-family:var(--f-mono);font-size:12.5px;background:var(--code-bg);border:1px solid var(--line);border-radius:4px;padding:0 4px;color:var(--ink)}
.t-hint{display:flex;align-items:center;gap:8px;margin-top:12px;font-family:var(--f-mono);font-size:12px;color:var(--accent)}
.t-hint .dotp{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:tblink 1.1s ease-in-out infinite}
.t-hint.ok{color:var(--good)}
@keyframes tblink{50%{opacity:.25}}
.t-acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.t-art{width:88px;height:88px;display:block;margin:0 0 6px}
.t-art .chord{fill:none;stroke:var(--accent);stroke-width:1.6;stroke-linecap:round;stroke-dasharray:130;stroke-dashoffset:130;animation:tdraw 2.6s ease-in-out infinite alternate}
.t-art .c2{animation-delay:.5s}.t-art .c3{animation-delay:1s}
@keyframes tdraw{to{stroke-dashoffset:0}}
.tour-dock{position:fixed;z-index:84;left:50%;transform:translateX(-50%);bottom:calc(18px + env(safe-area-inset-bottom,0px));width:min(840px,calc(100vw - 32px));display:flex;align-items:center;gap:12px;padding:10px 12px;background:var(--panel);border:1px solid var(--line-2);border-radius:14px;box-shadow:0 20px 50px -20px rgba(0,0,0,.6)}
.tour-dock .segs{flex:1;display:flex;gap:6px;min-width:0}
.tour-dock .seg{border:0;background:transparent;padding:4px 0;display:flex;flex-direction:column;gap:6px;min-width:0;text-align:left}
.tour-dock .seg .tbar{display:block;height:4px;border-radius:2px;background:var(--line-2);overflow:hidden}
.tour-dock .seg .tbar i{display:block;height:100%;background:var(--accent);transition:width .4s ease}
.tour-dock .seg .nm{font-family:var(--f-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tour-dock .seg.cur .nm{color:var(--ink)}.tour-dock .seg.done .nm{color:var(--ink-2)}
.t-count{font-family:var(--f-mono);font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.t-btn{height:34px;padding:0 12px;border-radius:9px;border:1px solid var(--line-2);background:var(--raised);font-family:var(--f-mono);font-size:12.5px;white-space:nowrap;color:var(--ink)}
.t-btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600}
.t-btn[disabled]{opacity:.4;cursor:default}
.t-skip{border:0;background:transparent;font-family:var(--f-mono);font-size:11.5px;color:var(--muted);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.tour-dock.top{bottom:auto;top:calc(var(--bar) + 10px + env(safe-area-inset-top,0px))}
@media (max-width:760px){.tour-dock{bottom:calc(72px + env(safe-area-inset-bottom,0px));gap:8px;padding:8px}.tour-dock .seg .nm,.t-count{display:none}.tour-card.welcome{padding:20px}.tour-card.welcome h3{font-size:23px}.t-art{width:64px;height:64px}}

/* the part being explained grows slightly so it stands out */
.tour-zoom{transform:scale(var(--tz,1.03));transition:transform .5s cubic-bezier(.2,.8,.2,1);position:relative;z-index:2}
@media (prefers-reduced-motion:reduce){.tour-zoom{transform:none}}