.tour-btn{grid-row:1;grid-column:3;justify-self:end;display:grid;place-items:center;padding:4px;margin:-4px;color:var(--dim);transition:color .2s linear}
.tour-btn:is(:hover, :focus-visible), .tour-btn[aria-expanded="true"]{color:var(--fg)}
.tour-btn:focus-visible{outline-offset:0}
.bar-right{margin-right:64px}
.tour-icon{display:block;overflow:visible;fill:none;stroke:currentColor;stroke-width:1}
.tour-icon .tq-dot{fill:currentColor;stroke:none}
.tour-icon .tq{transform-box:view-box;transform-origin:8px 12.5px}
.tour-icon .tq-ring{stroke-dasharray:1;stroke-dashoffset:0;transform-box:view-box;transform-origin:center;rotate:-90deg}
@media (hover:hover){ .tour-btn:hover .tq{animation:tour-nod .9s cubic-bezier(.22,1,.36,1)} }
@keyframes tour-nod{25%{rotate:-14deg}55%{rotate:9deg}80%{rotate:-3deg}}
.tour-btn:not(:disabled):active .tour-icon{scale:.86;transition:scale .08s}
.tour-icon{transition:scale .4s cubic-bezier(.34,1.56,.64,1)}
.tour-btn.nudge{color:var(--fg)}
.tour-btn.nudge .tq-ring{animation:tour-ring 2.5s cubic-bezier(.22,1,.36,1) 2}
.tour-btn.nudge .tq{animation:tour-call 2.5s ease-in-out 2}
@keyframes tour-ring{0%{stroke-dashoffset:0}12%{stroke-dashoffset:-1}12.01%{stroke-dashoffset:1}50%,100%{stroke-dashoffset:0}}
@keyframes tour-call{0%,20%{rotate:0deg}30%{rotate:-16deg}42%{rotate:11deg}52%{rotate:-4deg}62%,100%{rotate:0deg}}


.tour{position:fixed;inset:0;z-index:25;pointer-events:none;transition:opacity .25s linear, visibility 0s}
.tour.aside{opacity:0;visibility:hidden;transition:opacity .2s linear, visibility 0s .2s}
.tour-pen{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.tour-pen path{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 1}
.tour-pen .tp-c{stroke:var(--bg);stroke-width:5}
.tour-pen .tp-s{stroke:var(--fg);stroke-width:1}
.tour-pen .tp-d{fill:var(--fg);stroke:var(--bg);stroke-width:2;paint-order:stroke;transform-box:fill-box;transform-origin:center}
.tour-card{position:absolute;left:0;top:0;width:min(340px, calc(100vw - 32px));padding:20px 22px 18px;pointer-events:auto;
  background:var(--bg);outline:1px solid var(--fg);outline-offset:-1px;color:var(--fg);font-size:12px}
.tour-in{display:grid;align-content:start;overflow-x:visible;overflow-y:clip;transition:height .34s cubic-bezier(.22,1,.36,1)}
.tour-meas{position:absolute;left:0;top:0;visibility:hidden;pointer-events:none;transition:none}
.tour-in > *{transition:opacity .14s linear, translate .2s cubic-bezier(.4,0,1,1)}
.tour-in.out > *{opacity:0;translate:var(--dx, -12px) 0}
.tour-in.in > *{animation:tour-in .55s cubic-bezier(.22,1,.36,1) both}
.tour-in.in > :nth-child(2){animation-delay:.05s}
.tour-in.in > :nth-child(3){animation-delay:.1s}
@keyframes tour-in{from{opacity:0;translate:var(--dx2, 14px) 0}}
.tour-n{min-height:11px;margin:0 36px 0 0;color:var(--dim);font-size:11px;line-height:1;letter-spacing:.04em;font-variant-numeric:tabular-nums}
.tour-t{margin:12px 36px 8px 0;font-size:14px;line-height:1.5;letter-spacing:.04em}
.tour-p{font-size:12.5px;line-height:1.85;letter-spacing:.02em;line-break:strict}
.tour-p p{margin:0}
.tour-p .tour-k{margin-top:10px;color:var(--dim);font-size:11.5px;line-height:1.6}
.tour-card kbd{display:inline-block;min-width:1.6em;padding:1px 4px;border:1px solid var(--faint);color:var(--fg);font:inherit;font-size:10.5px;line-height:1.4;text-align:center}
.tour-x{position:absolute;right:10px;top:10px;display:grid;place-items:center;width:32px;height:32px;color:var(--dim);transition:color .2s linear}
.tour-x svg{display:block;overflow:visible;fill:none;stroke:currentColor;stroke-width:1;transition:rotate .46s cubic-bezier(.22,1,.36,1), scale .36s cubic-bezier(.34,1.56,.64,1)}
.tour-x:is(:hover, :focus-visible){color:var(--fg)}
.tour-x:is(:hover, :focus-visible) svg{rotate:90deg}
.tour-x:active svg{scale:.8;transition-duration:.46s, .08s}
.tour-f{position:relative;margin-top:20px}
.tour-nav{display:flex;align-items:center;justify-content:flex-end;gap:16px;min-height:32px;transition:opacity .25s linear, visibility 0s}
.tour-picks{position:absolute;inset:0;display:flex;align-items:center;gap:20px;transition:opacity .25s linear, visibility 0s}
.tour-card[data-mode=intro] .tour-nav, .tour-card:not([data-mode=intro]) .tour-picks{opacity:0;visibility:hidden;transition:opacity .2s linear, visibility 0s .2s}
.tour-end[hidden]{display:none}
.tour-back, .tour-end, .tour-alt{color:var(--dim);transition:color .2s linear}
.tour-back:is(:hover, :focus-visible), .tour-end:is(:hover, :focus-visible), .tour-alt:is(:hover, :focus-visible){color:var(--fg)}
.tour-next, .tour-go{padding:7px 14px 8px;background:var(--fg);color:var(--bg)}
.tour-picks small{margin-left:6px;font-size:10.5px;opacity:.6;font-variant-numeric:tabular-nums}
.tour-picks button{display:inline-flex;align-items:baseline}

.tour-hint{position:fixed;z-index:26;width:max-content;max-width:calc(100vw - 24px);margin:0;padding:5px 9px 6px;background:var(--fg);color:var(--bg);font:500 11px/1.5 var(--ui);letter-spacing:.02em;line-break:strict;pointer-events:none;
  clip-path:inset(0 50% 0 50%);transition:clip-path .28s cubic-bezier(.4,0,1,1)}
.tour-hint.on{clip-path:inset(-6px 0 0 0);transition:clip-path .46s cubic-bezier(.22,1,.36,1)}
.tour-hint::before{content:"";position:absolute;left:var(--ax, 50%);bottom:100%;margin-left:-5px;border:5px solid transparent;border-top:0;border-bottom-color:var(--fg)}

@media (max-width:720px){
  .tour-card{width:calc(100vw - 32px);padding:18px 18px 16px}
}
@media (prefers-reduced-motion:reduce){
  .tour-btn.nudge :is(.tq, .tq-ring), .tour-btn:hover .tq{animation:none}
  .tour-hint, .tour-hint.on{transition:none}
}