/* The guided tour (strippi-guide.js): a dim veil with one soft spotlight, Strippi's speech bubble in the stone style, stories-style progress segments.
   Everything lives in #sg-root on the root element, above the page; Strippi's canvas (z-index 710) sits between the veil and the bubble.
   No blur and no backdrop filter: the spotlight is a single element whose large shadow dims everything around it. */
#sg-root{position:fixed;inset:0;z-index:700;pointer-events:none;font:16px/1.5 'Segoe UI',Arial,sans-serif;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
#sg-root.sg-off{display:none}
#sg-root .sg-veil{position:fixed;inset:0;pointer-events:auto;touch-action:none;overscroll-behavior:contain;cursor:default;background:transparent;-webkit-tap-highlight-color:transparent}
#sg-root .sg-spot{position:fixed;left:0;top:0;width:0;height:0;pointer-events:none;
 box-shadow:0 0 0 2px rgba(255,246,222,calc(.7 * var(--sg-ring,0))),0 0 22px 3px rgba(255,246,222,calc(.2 * var(--sg-ring,0))),0 0 0 var(--sg-spread,2400px) rgba(20,20,18,.45)}
#sg-root .sg-bubble{position:fixed;left:0;top:0;z-index:720;box-sizing:border-box;pointer-events:auto;touch-action:none;overscroll-behavior:contain;
 padding:10px 14px 12px;border-radius:20px;background:var(--s-solid,#f5f3ee);color:var(--s-ink,#1c1c1a);border:1px solid var(--s-line,rgba(28,28,26,.1));
 box-shadow:var(--s-shadow,0 26px 50px -30px rgba(30,28,24,.5),0 6px 16px -10px rgba(30,28,24,.2));
 opacity:0;transition:transform .45s cubic-bezier(.4,0,.2,1),opacity .3s ease;outline:none}
#sg-root .sg-bubble.show{opacity:1}
#sg-root .sg-segs{display:flex;gap:3px;height:3px;margin:2px 0 9px}
#sg-root[data-mode=ask] .sg-segs{display:none}
#sg-root .sg-segs i{flex:1 1 0;position:relative;overflow:hidden;border-radius:2px;background:var(--s-line2,rgba(28,28,26,.2))}
#sg-root .sg-segs b{position:absolute;inset:0;background:var(--s-gold,#86641f);transform:scaleX(0);transform-origin:left center}
html[dir=rtl] #sg-root .sg-segs b{transform-origin:right center}
#sg-root .sg-segs i.done b{transform:scaleX(1);opacity:.55}
#sg-root .sg-segs i.cur b{animation:sg-fill var(--d,5s) linear forwards}
#sg-root.sg-paused .sg-segs i.cur b{animation-play-state:paused}
@keyframes sg-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
#sg-root[data-mode=last] .sg-segs i b{opacity:1}
#sg-root .sg-head{display:flex;align-items:center;gap:8px}
#sg-root .sg-title{flex:1 1 auto;margin:0;min-width:0;font-family:var(--serif,Georgia,serif);font-weight:500;font-size:19px;line-height:1.2;letter-spacing:-.01em;color:var(--s-ink,#1c1c1a)}
#sg-root .sg-text{margin:3px 0 0;font-size:13.5px;line-height:1.42;color:var(--s-soft,#45443f)}
#sg-root .sg-sub{margin:5px 0 0;font-size:12px;line-height:1.4;color:var(--s-muted,#5c5b56)}
#sg-root .sg-btns{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;margin-top:10px}
#sg-root .sg-gap{flex:1 1 0}
#sg-root .sg-btn,#sg-root .sg-pause{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent}
#sg-root .sg-btn{min-height:38px;padding:0 15px;border-radius:999px;font-size:13.5px;font-weight:600;color:var(--s-ink,#1c1c1a);border:1px solid var(--s-line2,rgba(28,28,26,.2));transition:background .15s}
#sg-root .sg-btn:hover,#sg-root .sg-pause:hover{background:var(--s-hover,rgba(28,28,26,.055))}
#sg-root .sg-btn:focus-visible,#sg-root .sg-pause:focus-visible{outline:2px solid var(--s-accent,#1f5f5c);outline-offset:2px}
#sg-root .sg-skip,#sg-root .sg-later{border-color:transparent;color:var(--s-muted,#5c5b56);padding:0 10px;font-weight:500}
#sg-root .sg-primary{background:var(--s-btn,#1c1c1a);color:var(--s-btn-ink,#f6f4ef);border-color:transparent}
#sg-root .sg-primary:hover{background:var(--s-btn,#1c1c1a);filter:brightness(1.15)}
#sg-root .sg-pause{flex:0 0 auto;width:34px;height:34px;border-radius:50%;border:1px solid var(--s-line2,rgba(28,28,26,.2));color:var(--s-ink,#1c1c1a)}
#sg-root .sg-pause svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
#sg-root .sg-pause .sg-i-play{display:none;fill:currentColor;stroke-width:1.6}
#sg-root.sg-paused .sg-pause .sg-i-play{display:block}
#sg-root.sg-paused .sg-pause .sg-i-pause{display:none}
#sg-root .sg-ask-only,#sg-root .sg-play-only,#sg-root .sg-last-only{display:none}
#sg-root[data-mode=ask] .sg-ask-only,#sg-root[data-mode=play] .sg-play-only,#sg-root[data-mode=last] .sg-last-only{display:inline-flex}
#sg-root .sg-btn[hidden],#sg-root .sg-sub[hidden]{display:none!important}
#sg-root .sg-tail{position:absolute;width:14px;height:14px;background:var(--s-solid,#f5f3ee);transform:rotate(45deg);border:1px solid var(--s-line,rgba(28,28,26,.1));border-radius:3px}
#sg-root .sg-t-top{top:-7px;left:var(--o);margin-left:-7px;border-right:0;border-bottom:0}
#sg-root .sg-t-bottom{bottom:-7px;left:var(--o);margin-left:-7px;border-left:0;border-top:0}
#sg-root .sg-t-left{left:-7px;top:var(--o);margin-top:-7px;border-right:0;border-top:0}
#sg-root .sg-t-right{right:-7px;top:var(--o);margin-top:-7px;border-left:0;border-bottom:0}
#sg-root .sg-bot{display:none}
#sg-root.sg-nogl .sg-bot{display:block;flex:0 0 44px;width:44px;height:44px}
.sg-tour-card{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-block:18px}
.sg-tour-card h2{margin:0 0 2px}.sg-tour-card .explain{margin:0}
.sg-tour-card .sg-start{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;min-height:42px;padding:0 20px;border-radius:999px;font-weight:600;font-size:14px;background:var(--s-btn,#1c1c1a);color:var(--s-btn-ink,#f6f4ef)}
.sg-tour-card .sg-start:focus-visible{outline:2px solid var(--s-accent,#1f5f5c);outline-offset:3px}
html.sg-tour #strippi-greet{display:none!important}
@media(min-width:761px){
 #sg-root .sg-bubble{padding:12px 16px 14px;border-radius:22px}
 #sg-root .sg-title{font-size:21px}
 #sg-root .sg-text{font-size:14.5px}
 #sg-root .sg-btn{min-height:40px}
}
@media(prefers-reduced-motion:reduce){
 #sg-root .sg-bubble{transition:none}
 #sg-root .sg-segs i.cur b{animation:none;transform:scaleX(1);opacity:.55}
}
