@property --vx{syntax:"<length>";inherits:false;initial-value:0}@property --vy{syntax:"<length>";inherits:false;initial-value:0}@property --vr{syntax:"<length>";inherits:false;initial-value:2000px}.tour{--tour-ease:cubic-bezier(.65, 0, .25, 1);--tour-out:cubic-bezier(.16, 1, .3, 1);text-align:left;grid-template-columns:minmax(0,1.8fr) minmax(0,1fr);align-items:center;gap:clamp(20px,3vw,48px);display:grid}@media (max-width:960px){.tour{grid-template-columns:minmax(0,1fr)}}.tour-app{box-shadow:0 0 0 1px var(--rule), inset 0 1px 0 #ffffff0f, 0 40px 90px #00000080;isolation:isolate;background:linear-gradient(#f0ece312,#f0ece305);border-radius:14px;padding:clamp(6px,.7vw,10px);position:relative;overflow:hidden}.tour-app .au{border-radius:8px}.tour-cam{transform-origin:0 0;position:relative}.tour-veil{z-index:2;pointer-events:none;background:radial-gradient(circle at var(--vx) var(--vy), transparent var(--vr), #0a0b0d9e calc(var(--vr) + 90px));opacity:0;transition:opacity .32s;position:absolute;inset:0}.tour-veil.on{opacity:1;transition:opacity .6s 50ms}.tour-ring{z-index:3;pointer-events:none;box-shadow:0 0 0 1.5px var(--cream), 0 0 0 5px #f0ece324;opacity:0;border-radius:9px;transition:opacity .26s,transform .26s;position:absolute;transform:scale(1.025)}.tour-ring.on{opacity:1;transition:opacity .45s ease, transform .6s var(--tour-out);transform:none}.tour-ripple{z-index:4;border:2px solid var(--cream);pointer-events:none;width:56px;height:56px;animation:tour-ripple .7s var(--tour-out) forwards;border-radius:50%;margin:-28px 0 0 -28px;position:absolute}@keyframes tour-ripple{0%{opacity:.9;transform:scale(.15)}to{opacity:0;transform:scale(1.4)}}.tour-cursor{z-index:5;pointer-events:none;opacity:0;filter:drop-shadow(0 6px 10px #00000080);margin:-3px 0 0 -5px;transition:opacity .4s;position:absolute;top:0;left:0}.tour-cursor.on{opacity:1}.tour-cursor.gone{opacity:0}.tour-tag{background:var(--cream);width:max-content;max-width:min(230px,42vw);color:var(--void);transform-origin:0 0;opacity:0;border-radius:10px;padding:7px 12px;font-size:13px;font-weight:600;line-height:1.3;transition:opacity .2s,transform .2s;position:absolute;top:24px;left:16px;transform:translate(-4px,-4px)scale(.92);box-shadow:0 10px 24px #00000073}.tour-tag.on{opacity:1;transition:opacity .35s ease .12s, transform .5s var(--tour-out) .12s;transform:none}.tour-tag.left{transform-origin:100% 0;left:auto;right:8px}.tour-tag.up{transform-origin:0 100%;top:auto;bottom:30px}.tour-tag.left.up{transform-origin:100% 100%}@keyframes tour-tag{0%{opacity:0;transform:translate(-6px,-6px)scale(.7)}}.tour-hud{z-index:6;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--cream);font-family:var(--font-mono), monospace;letter-spacing:.08em;opacity:0;transition:opacity .4s ease, transform .5s var(--tour-out);background:#0a0b0db3;border-radius:999px;gap:6px;padding:6px 10px;font-size:12px;font-weight:700;display:flex;position:absolute;top:16px;right:18px;transform:translateY(-6px)}.tour-hud i{opacity:.4;font-style:normal}.tour-hud.on{opacity:1;transform:none}.tour-resume{z-index:6;background:var(--cream);color:var(--void);animation:tour-tag .4s var(--tour-out) both;transition:transform .25s var(--tour-out);border-radius:999px;align-items:center;gap:8px;padding:10px 16px;font-size:13.5px;font-weight:600;display:inline-flex;position:absolute;bottom:18px;right:18px;box-shadow:0 12px 28px #00000073}.tour-resume:hover{transform:translateY(-2px)}.tour-resume span{font-size:12px}.tour-steps{flex-direction:column;margin:0;padding:0;list-style:none;display:flex;position:relative}.tour-steps li{padding-left:40px;position:relative}.tour-steps li:before{content:"";background:var(--rule);width:1px;position:absolute;top:0;bottom:0;left:13px}.tour-steps li:first-child:before{top:22px}.tour-steps li:last-child:before{bottom:calc(100% - 22px)}.tour-steps li.done:before{background:#3b76e88c}.tour-steps button{text-align:left;cursor:pointer;align-items:center;width:100%;min-height:44px;display:flex}.tour-n{border:1px solid var(--rule-strong);background:var(--bone);width:27px;height:27px;color:var(--ink-60);font-family:var(--font-mono), monospace;transition:background .35s ease, border-color .35s ease, color .35s ease, transform .4s var(--tour-out);border-radius:50%;place-items:center;font-size:12px;font-weight:700;display:grid;position:absolute;top:8px;left:0}.tour-steps li.done .tour-n{color:var(--blue-soft);border-color:#3b76e88c}.tour-steps li.on .tour-n{background:var(--cream);border-color:var(--cream);color:var(--void);transform:scale(1.08)}.tour-t{letter-spacing:-.006em;color:var(--ink-60);font-size:16px;font-weight:600;transition:color .3s}.tour-steps li:not(.on) button:hover .tour-t,.tour-steps li.on .tour-t{color:var(--ink)}.tour-body{opacity:0;transition:grid-template-rows .5s var(--tour-out), opacity .3s ease;grid-template-rows:0fr;display:grid}.tour-body>div{overflow:hidden}.tour-steps li.on .tour-body{opacity:1;transition:grid-template-rows .55s var(--tour-out), opacity .45s ease .1s;grid-template-rows:1fr}.tour-body>div>:last-child{margin-bottom:18px}.tour-body p{max-width:36ch;color:var(--ink-72);font-size:15px;line-height:1.55}.tour-more{color:var(--blue-soft);margin-top:10px;font-size:14px;font-weight:600;display:inline-block}.tour-more:hover{text-decoration:underline}.tour-timer{background:var(--blue);transform-origin:50% 0;width:1px;animation:linear both tour-timer;position:absolute;top:36px;bottom:0;left:13px}.tour-steps li:last-child .tour-timer{display:none}@keyframes tour-timer{0%{transform:scaleY(0)}}@media (prefers-reduced-motion:reduce){.tour-veil,.tour-ring,.tour-tag,.tour-body{transition:none}.tour-ripple{animation:none}}
