.ui-tuto{z-index:35;pointer-events:none;position:absolute;inset:0}.ui-tuto[data-mode=center]{pointer-events:auto;background:radial-gradient(circle at 50% 45%,#211b2933,#211b2999);place-items:center;padding:12px;animation:.2s ease-out ui-fade;display:grid}.ui-tuto .ui-tuto-bubble{pointer-events:auto;background:var(--dp-cream-hi);width:min(400px,100vw - 16px);color:var(--dp-text);align-items:flex-start;gap:10px;padding:12px 14px 12px 10px;display:flex;position:absolute}.ui-tuto[data-mode=center] .ui-tuto-bubble{align-items:center;width:min(520px,100%);padding:16px 18px 16px 12px;position:relative}.ui-tuto .ui-tuto-bubble.ui-tuto-pop{animation:.32s cubic-bezier(.2,1.5,.4,1) ui-pop}.ui-tuto-mascot{filter:drop-shadow(2px 3px #211b2940);transform-origin:50% 60%;flex:none;width:72px;height:auto;margin-top:2px;animation:2.4s ease-in-out infinite ui-tuto-swim}.ui-tuto[data-mode=center] .ui-tuto-mascot{width:128px}@keyframes ui-tuto-swim{0%,to{transform:translateY(0)rotate(-3deg)}50%{transform:translateY(-4px)rotate(3deg)}}.ui-tuto-content{flex:auto;min-width:0}.ui-tuto-praise{color:var(--dp-success-ink);margin:0 0 2px;font-size:14px;font-weight:700}.ui-tuto-title{font:400 20px/1.15 var(--ui-font-title);letter-spacing:.3px;color:var(--dp-text);overflow-wrap:anywhere;margin:0 0 4px}.ui-tuto[data-mode=center] .ui-tuto-title{font-size:24px}.ui-tuto-text{color:var(--dp-text);margin:0;font-size:15px;font-weight:500;line-height:1.3}.ui-tuto-hint{color:var(--dp-text-muted);margin:6px 0 0;font-size:13px}.ui-tuto-actions{flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:8px;display:flex}.ui-tuto-actions:empty{display:none}.ui-tuto-skip{font:600 13px/1 var(--ui-font);cursor:pointer;background:0 0;border:none;margin-left:auto;padding:4px 2px;text-decoration:underline;color:var(--dp-text-muted)!important}.ui-tuto-progress{border:var(--dp-line-thin);border-radius:var(--dp-radius-pill);background:var(--dp-info);box-shadow:var(--dp-shadow-sm);color:var(--dp-ink);font:700 12px/1.2 var(--ui-font);font-variant-numeric:tabular-nums;padding:2px 9px;position:absolute;top:-12px;right:12px}.ui-tuto-ring,.ui-tuto-arrow{pointer-events:none;display:none;position:absolute}.ui-tuto[data-mode=target] .ui-tuto-ring,.ui-tuto[data-mode=target] .ui-tuto-arrow{display:block}.ui-tuto-ring{border:4px solid var(--dp-lime);box-shadow:0 0 0 3px var(--dp-ink), inset 0 0 0 2px var(--dp-ink);border-radius:16px;animation:1.1s ease-in-out infinite ui-tuto-pulse}@keyframes ui-tuto-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.65;transform:scale(1.06)}}.ui-tuto-arrow{width:44px;height:44px}.ui-tuto-arrow svg{width:100%;height:100%;filter:drop-shadow(2px 3px 0 var(--dp-ink));animation:.8s ease-in-out infinite alternate ui-tuto-bob-down;display:block}.ui-tuto-arrow.up svg{animation-name:ui-tuto-bob-up}@keyframes ui-tuto-bob-down{0%{transform:translateY(-5px)}to{transform:translateY(3px)}}@keyframes ui-tuto-bob-up{0%{transform:rotate(180deg)translateY(-5px)}to{transform:rotate(180deg)translateY(3px)}}@media (width<=480px){.ui-tuto-mascot{width:52px}.ui-tuto[data-mode=center] .ui-tuto-bubble{text-align:center;flex-direction:column}.ui-tuto[data-mode=center] .ui-tuto-mascot{width:96px}.ui-tuto[data-mode=center] .ui-tuto-actions{justify-content:center}.ui-tuto-title{font-size:18px}.ui-tuto-text{font-size:14px}}@media (prefers-reduced-motion:reduce){.ui-tuto-mascot,.ui-tuto-ring,.ui-tuto-arrow svg{animation:none}}
