/* Interactive tour: spotlight ring (its huge shadow dims the page), four blockers around the hole, a tip with an arrow. */
#tour[hidden]{display:none}
#tour{position:fixed;inset:0;z-index:60;pointer-events:none;overflow:hidden}
#tour .tr-b{position:fixed;pointer-events:auto;background:transparent}
#tour.dim .tr-b:first-child{background:rgba(0,0,0,.6)}
.tr-ring{position:fixed;pointer-events:none;border-radius:14px;box-shadow:0 0 0 100vmax rgba(0,0,0,.6);outline:2px solid var(--accent);outline-offset:0}
.tr-ring::after{content:"";position:absolute;inset:-2px;border-radius:inherit;border:2px solid var(--accent);animation:trpulse 1.4s ease-out infinite}
@keyframes trpulse{from{opacity:.9;transform:scale(1)}to{opacity:0;transform:scale(1.12)}}
.tr-tip{position:fixed;pointer-events:auto;background:var(--paper);color:var(--fg);border:1px solid var(--line);border-radius:16px;padding:14px 16px 12px;box-shadow:0 8px 28px rgba(0,0,0,.35);font-family:var(--ru)}
.tr-tip.mid{left:50%!important;top:50%!important;transform:translate(-50%,-50%)}
.tr-tip b{display:block;font:700 var(--t-l) var(--ru);margin-bottom:4px}
.tr-tip p{margin:0;font:400 var(--t-m)/1.45 var(--ru)}
.tr-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px}
.tr-row:has(.tr-ok){margin-top:14px}
.tr-skip{border:0;background:none;color:var(--muted);font:400 var(--t-s) var(--ru);padding:6px 0}
.tr-ok{border:0;background:var(--accent);color:#fff;border-radius:var(--r);padding:10px 20px;font:700 var(--t-m) var(--ru)}
.tr-arw{position:absolute;width:14px;height:14px;background:var(--paper);border:1px solid var(--line);transform:translateX(-50%) rotate(45deg);animation:trbob 1s ease-in-out infinite}
.tr-tip.up .tr-arw{top:-8px;border-right:0;border-bottom:0}
.tr-tip.dn .tr-arw{bottom:-8px;border-left:0;border-top:0;animation-name:trbobd}
.tr-tip.mid .tr-arw{display:none}
@keyframes trbob{50%{margin-top:-4px}}
@keyframes trbobd{50%{margin-bottom:-4px}}
.tr-tip.mid{width:min(calc(100vw - 24px),340px)}
.tr-l{display:flex;gap:16px}
.tr-n{display:block;color:var(--muted);font:700 var(--t-s) var(--ru);margin-bottom:4px}
.tr-tip.plain .tr-arw{display:none}

/* Pro: gold crown for Pro users, the PRO badge, the feature list and the welcome sheet */
:root{--gold:#b7791f;--gold-soft:#fff1c2;--gold-line:#e6b84a;--gold-2:#ffd66b}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--gold:#f0be4d;--gold-soft:#3a2f12;--gold-line:#8a6a1c;--gold-2:#ffd66b}}
:root[data-theme="dark"]{--gold:#f0be4d;--gold-soft:#3a2f12;--gold-line:#8a6a1c;--gold-2:#ffd66b}
.prem.pro{color:var(--gold);background:var(--gold-soft);border-color:var(--gold-line)}
.probadge{display:inline-block;vertical-align:middle;font:700 11px var(--ru);letter-spacing:.04em;padding:2px 8px;border-radius:var(--r-p);background:var(--gold-soft);color:var(--gold);border:1px solid var(--gold-line)}
.pfeats{display:grid;gap:var(--s2)}
.pf{display:flex;gap:var(--s3);align-items:flex-start;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:var(--s3) var(--s4)}
.pf>span:last-child{display:flex;flex-direction:column;gap:2px;font:400 var(--t-m)/1.35 var(--ru)}
.pf small{color:var(--muted);font-size:var(--t-s)}
#welcome{position:fixed;inset:0;z-index:70;display:flex;align-items:flex-end;justify-content:center;background:rgba(0,0,0,.55);animation:wlfade .25s ease-out}
#welcome.out{opacity:0;transition:opacity .25s}
.wl-card{width:100%;max-width:480px;max-height:96vh;overflow:auto;background:var(--paper);border-radius:20px 20px 0 0;padding:var(--s5) var(--s4) calc(var(--s4) + env(safe-area-inset-bottom,0px));text-align:center;font-family:var(--ru);animation:wlup .35s cubic-bezier(.2,.9,.3,1)}
.wl-card h2{margin:var(--s2) 0 var(--s1);font:700 var(--t-xxl)/1.1 var(--ru)}
.wl-lead{margin:0 0 var(--s2);font:400 var(--t-l)/1.4 var(--ru)}
.wl-hint{margin:0 0 var(--s3);color:var(--muted);font:400 var(--t-m)/1.4 var(--ru)}
.wl-hero{position:relative;height:110px;display:grid;place-items:center}
.wl-crown{position:relative;z-index:1;width:84px;height:84px;border-radius:50%;border:2px solid var(--gold-line);background:linear-gradient(135deg,var(--gold-soft),var(--gold-2));color:#8a5a00;display:grid;place-items:center;cursor:pointer;animation:wlpulse 2.4s ease-in-out infinite;padding:0}
.wl-crown svg{width:44px;height:44px}
.wl-crown:active{transform:scale(.93)}
.wl-burst{position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none}
.wl-burst i{position:absolute;width:8px;height:12px;border-radius:2px;opacity:0;animation:wlconf .9s ease-out forwards}
.wl-tiles{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2);margin-bottom:var(--s2)}
.wl-t{display:flex;align-items:center;gap:var(--s2);text-align:left;padding:var(--s3);border:1px solid var(--line);border-radius:var(--r);background:var(--paper);font:600 var(--t-m)/1.2 var(--ru);color:var(--fg);transition:border-color .15s,background .15s}
.wl-t.on{border-color:var(--gold-line);background:var(--gold-soft)}
.wl-info{min-height:64px;margin-bottom:var(--s3);padding:var(--s3);border-radius:var(--r);background:var(--bg);text-align:left;font:400 var(--t-m)/1.4 var(--ru);display:flex;flex-direction:column;gap:2px;animation:wlfade .2s}
.wl-info span{color:var(--muted)}
.wl-go{width:100%;justify-content:center}
.wl-later{display:block;margin:var(--s3) auto 0;border:0;background:none;color:var(--muted);font:600 var(--t-m) var(--ru);padding:var(--s2) var(--s4)}
@keyframes wlfade{from{opacity:0}to{opacity:1}}
@keyframes wlup{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
@keyframes wlpulse{0%,100%{box-shadow:0 0 0 0 rgba(255,214,107,.55)}50%{box-shadow:0 0 0 16px rgba(255,214,107,0)}}
@keyframes wlconf{0%{opacity:1;transform:translate(0,0) rotate(0)}100%{opacity:0;transform:translate(var(--x),var(--y)) rotate(var(--r))}}
@media (prefers-reduced-motion:reduce){.wl-crown,.wl-card,#welcome,.wl-info{animation:none}.wl-burst{display:none}}

.wl-bg{position:absolute;inset:0}
.wl-card{position:relative}
.wl-crown.dim{color:var(--muted);background:var(--bg);border-color:var(--line);animation:none}

/* Welcome scene (guide.js: welcomeScene) */
#scene{position:fixed;inset:0;z-index:80;display:flex;flex-direction:column;background:var(--bg);color:var(--fg);font-family:var(--ru);overflow:hidden;animation:wlfade .35s ease-out;padding-top:var(--tg-top,0px)}
#scene.out{opacity:0;transition:opacity .3s}
.sc-aur{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.sc-aur i{position:absolute;width:90vmin;height:90vmin;border-radius:50%;filter:blur(70px);opacity:.38;animation:scaur 14s ease-in-out infinite alternate}
.sc-aur i:first-child{left:-25vmin;top:-20vmin;background:var(--accent)}
.sc-aur i:last-child{right:-30vmin;bottom:-20vmin;background:var(--gold-2);animation-duration:18s;animation-direction:alternate-reverse}
.sc-bg{position:absolute;inset:0;pointer-events:none}
.sc-bg b{position:absolute;font:700 var(--s) var(--ka);color:var(--accent);opacity:var(--o);animation:scfloat var(--t) ease-in-out infinite}
.sc-slides{position:relative;flex:1;min-height:0}
.sc-slide{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s3);padding:var(--s4) var(--s5);text-align:center;opacity:0;transform:translateX(40px);transition:opacity .45s ease,transform .45s cubic-bezier(.2,.8,.2,1);pointer-events:none;overflow:auto}
.sc-slide.on{opacity:1;transform:none;pointer-events:auto}
.sc-slide.before{transform:translateX(-40px)}
.sc-slide h2{margin:0;font:700 var(--t-xxl)/1.1 var(--ru)}
.sc-sub{margin:0;max-width:30ch;color:var(--muted);font:400 var(--t-l)/1.45 var(--ru)}
.sc-tap{margin:var(--s2) 0 0;color:var(--accent);font:600 var(--t-m) var(--ru);opacity:0}
.sc-slide.on .sc-sub{animation:scrise .6s .9s both}
.sc-slide.on .sc-tap{animation:scrise .6s 1.6s both,sctap 2.4s 2.4s ease-in-out infinite}
.sc-hello{display:flex;flex-wrap:nowrap;justify-content:center;font:700 clamp(2.4rem,12vw,3.6rem)/1.1 var(--ka);padding:var(--s2) 0}
.sc-l{display:inline-block;opacity:0;cursor:pointer;background:linear-gradient(100deg,var(--fg) 40%,var(--accent) 50%,var(--fg) 60%) 140% 0/250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;user-select:none}
.sc-slide.on .sc-l{animation:scdrop .75s var(--d) cubic-bezier(.2,1.4,.4,1) both,scsheen 1.6s calc(var(--d) + 1.1s) ease-out both}
.sc-slide.on .sc-l.hop{animation:schop .6s ease-out both}
.sc-crownwrap{position:relative;width:120px;height:120px;display:grid;place-items:center}
.sc-crown{width:96px;height:96px}
.sc-crown svg{width:50px;height:50px}
.sc-slide.on .sc-crown{animation:sccrown .9s cubic-bezier(.2,1.3,.4,1) both,wlpulse 2.4s 1s ease-in-out infinite}
.sc-slide.on h2,.sc-slide.on .wl-lead{animation:scrise .5s .45s both}
.sc-slide.on .sc-tiles{animation:scrise .5s .7s both}
.sc-slide.on .sc-info{animation:scrise .5s .85s both}
.sc-tiles{width:100%;max-width:420px;margin:0}
.sc-info{width:100%;max-width:420px;margin:0}
.sc-path{position:relative;display:flex;flex-direction:column;gap:var(--s4);width:100%;max-width:380px;padding-left:var(--s2);text-align:left}
.sc-line{position:absolute;left:calc(var(--s2) + 22px);top:22px;bottom:22px;width:2px;background:linear-gradient(var(--accent),var(--gold-2));transform-origin:top;transform:scaleY(0);border-radius:2px}
.sc-slide.on .sc-line{animation:scline 1.1s .2s ease-out both}
.sc-step{position:relative;display:flex;align-items:center;gap:var(--s3);opacity:0;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:var(--s3) var(--s4)}
.sc-slide.on .sc-step{animation:scpop .55s var(--d) cubic-bezier(.2,1.3,.4,1) both}
.sc-step>span:last-child{display:flex;flex-direction:column;gap:2px;font:400 var(--t-m)/1.3 var(--ru)}
.sc-step small{color:var(--muted);font-size:var(--t-s)}
.sc-foot{position:relative;display:flex;flex-direction:column;align-items:center;gap:var(--s2);padding:var(--s2) var(--s4) calc(var(--s4) + env(safe-area-inset-bottom,0px))}
.sc-dots{display:flex;gap:8px;margin-bottom:var(--s2)}
.sc-dots i{width:8px;height:8px;border-radius:999px;background:var(--line);transition:width .3s,background .3s}
.sc-dots i.on{width:26px;background:var(--accent)}
.sc-next{width:100%;max-width:420px;justify-content:center;position:relative;overflow:hidden}
.sc-next::after{content:'';position:absolute;top:0;bottom:0;width:40%;left:-60%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);animation:scshine 3.2s 1.5s ease-in-out infinite}
.sc-skip{margin:0}
@keyframes scaur{from{transform:translate(0,0) scale(1)}to{transform:translate(8vmin,6vmin) scale(1.2)}}
@keyframes scfloat{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-26px) rotate(8deg)}}
@keyframes scdrop{0%{opacity:0;transform:translateY(-70px) scale(1.7) rotate(-14deg);filter:blur(6px)}60%{opacity:1;filter:blur(0)}100%{opacity:1;transform:none;filter:blur(0)}}
@keyframes scsheen{from{background-position:140% 0}to{background-position:-40% 0}}
@keyframes schop{0%{opacity:1;transform:none}35%{transform:translateY(-22px) scale(1.25) rotate(-8deg)}70%{transform:translateY(3px) scale(.95)}100%{opacity:1;transform:none}}
@keyframes scrise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes sctap{0%,100%{opacity:.35}50%{opacity:1}}
@keyframes sccrown{from{opacity:0;transform:translateY(-120px) rotate(-30deg) scale(.6)}to{opacity:1;transform:none}}
@keyframes scline{to{transform:scaleY(1)}}
@keyframes scpop{from{opacity:0;transform:translateX(-18px) scale(.9)}to{opacity:1;transform:none}}
@keyframes scshine{0%{left:-60%}55%,100%{left:130%}}
@media (prefers-reduced-motion:reduce){.sc-aur i,.sc-bg b,.sc-next::after{animation:none}.sc-slide,.sc-slide.on .sc-l,.sc-slide.on .sc-crown,.sc-slide.on .sc-step,.sc-slide.on .sc-sub,.sc-slide.on .sc-tap,.sc-slide.on h2{animation:none;opacity:1;transform:none}.sc-line{transform:none}}

.btn.wl-ads{width:100%;flex-direction:column;align-items:center;justify-content:center;gap:2px;margin-top:var(--s2);border-color:var(--gold-line);color:var(--fg);text-align:center}
.btn.wl-ads small{font:600 var(--t-s) var(--ru);color:var(--gold)}
.btn.wl-ads:disabled{opacity:.6}
