.tut { position: fixed; inset: 0; z-index: 60; }
.tut__hole { position: fixed; border-radius: 1rem; box-shadow: 0 0 0 200vmax var(--color-web-shade); pointer-events: none; transition-property: none; } 
.tut.is-free .tut__hole { left: 50%; top: 50%; width: 0; height: 0; }
.tut__ring { position: absolute; inset: -.25rem; border-radius: inherit; box-shadow: 0 0 0 .22rem var(--color-web-lime), 0 0 1.4rem var(--color-web-lime-glow); }
.tut__ring.is-in { animation: tut-ring calc(var(--motion-slow) * 2) var(--motion-ease-out) 3; }
.tut__arrow { position: fixed; z-index: 2; width: 1.8rem; height: 1.4rem; translate: -50% 0; background: var(--color-web-lime); clip-path: polygon(50% 100%, 0 0, 100% 0); pointer-events: none; }
.tut.is-below .tut__arrow { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.tut__arrow.is-in { animation: tut-bob calc(var(--motion-slow) * 1.4) ease-in-out 4; }
.tut.is-free :is(.tut__ring, .tut__arrow) { display: none; }
.tut__bubble { position: fixed; left: 50%; z-index: 3; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "face words" "foot foot"; gap: .5rem .8rem; width: min(calc(100% - 2rem), 24rem); padding: .9rem 1rem .8rem; border-radius: 1.3rem; background: var(--color-web-paper); color: var(--color-web-ink); box-shadow: inset 0 0 0 .2rem var(--color-web-blue), 0 .8rem 2rem var(--color-web-shade); translate: -50% 0; transition: opacity var(--motion-fast); }
.tut.is-free .tut__bubble { top: 50%; translate: -50% -50%; }
.tut__bubble.is-in { animation: tut-pop var(--motion-slow) var(--motion-ease-back) both; }
.tut.is-moving .tut__bubble { opacity: .35; }
.tut__face { grid-area: face; display: grid; place-items: center; width: 4.6rem; height: 4.6rem; overflow: visible; border-radius: 50%; background: radial-gradient(circle at 50% 65%, var(--color-web-blue-pale), var(--color-web-mist)); box-shadow: inset 0 0 0 .18rem var(--color-web-blue-light); }
.tut__words { grid-area: words; display: grid; align-content: center; gap: .25rem; min-width: 0; }
.tut__t { color: var(--color-web-blue); font-size: 1.2rem; line-height: 1.1; }
.tut__say { margin: 0; font-size: 1rem; line-height: 1.35; }
.tut__foot { grid-area: foot; display: flex; align-items: center; gap: .5rem; }
.tut__n { margin-right: auto; color: var(--color-web-muted); font-size: .875rem; font-weight: 800; }
.tut__skip { min-height: 2.75rem; padding: 0 .6rem; border: 0; background: none; color: var(--color-web-muted); font: inherit; font-weight: 800; text-decoration: underline; cursor: pointer; }
.tut__foot .gb { min-width: 8rem; }
.tut.is-out { animation: tut-out var(--motion-base) var(--motion-ease-out) forwards; pointer-events: none; }

[data-look] .menu-grid__b.menu-grid__b--tut, .menu-grid__b.menu-grid__b--tut { grid-column: 1 / -1; background: var(--color-web-lime); color: var(--color-web-lime-ink); }
@keyframes tut-ring { 0% { opacity: 0; transform: scale(1.25); } 40% { opacity: 1; transform: none; } }
@keyframes tut-bob { 50% { transform: translateY(.45rem); } }
@keyframes tut-pop { from { opacity: 0; transform: scale(.85) translateY(.6rem); } }
@keyframes tut-out { to { opacity: 0; } }


.tut__face.has-art { width: 6rem; background: radial-gradient(circle at 50% 70%, var(--color-web-blue-pale), transparent 70%); }
.tut__rotom { width: 6rem; height: 6rem; margin-top: -1.6rem; object-fit: contain; filter: drop-shadow(0 .3rem .35rem var(--color-web-faint)); }
.tut__rotom.is-pop { animation: tut-pop var(--motion-slow) cubic-bezier(.2, 1.6, .4, 1); }
@keyframes tut-pop { from { opacity: 0; transform: scale(.55) rotate(-10deg); } }