.tut-stage{border:1px solid var(--border);background:var(--card);width:min(100%, calc(min(70svh, 40rem) * var(--tut-ar,1.6)));aspect-ratio:var(--tut-ar,1.6);border-radius:.75rem;margin-inline:auto;position:relative;overflow:hidden}.tut-camera{transform-origin:0 0;transform:translate(var(--tut-tx), var(--tut-ty)) scale(var(--tut-s));animation:1.4s cubic-bezier(.22,1,.36,1) both tut-camera;position:absolute;inset:0}.tut-camera img{object-fit:cover;-webkit-user-select:none;user-select:none;width:100%;height:100%;display:block}@keyframes tut-camera{0%{transform:none}}.tut-ring{outline:calc(3px / var(--tut-s)) solid var(--accent);outline-offset:calc(2px / var(--tut-s));pointer-events:none;border-radius:.5rem;animation:.5s ease-out 1.15s both tut-ring;position:absolute;box-shadow:0 0 0 9999px #00000047}@keyframes tut-ring{0%{opacity:0;transform:scale(1.06)}}.tut-cursor{pointer-events:none;width:0;height:0;animation:1.2s cubic-bezier(.45,0,.2,1) .2s both tut-cursor;position:absolute}.tut-cursor svg{transform-origin:0 0;transform:scale(calc(1 / var(--tut-s)));filter:drop-shadow(0 1px 1px #00000073);display:block}.tut-cursor:after{content:"";width:calc(28px / var(--tut-s));height:calc(28px / var(--tut-s));margin:calc(-14px / var(--tut-s)) 0 0 calc(-14px / var(--tut-s));border:calc(2px / var(--tut-s)) solid var(--accent);opacity:0;border-radius:9999px;animation:.5s ease-out 1.3s both tut-click;position:absolute;top:0;left:0}@keyframes tut-cursor{0%{left:var(--tut-cursor-from-x,70%);top:var(--tut-cursor-from-y,85%);opacity:0}20%{opacity:1}}@keyframes tut-click{0%{opacity:.9;transform:scale(.4)}to{opacity:0;transform:scale(1.4)}}.tut-stage[data-paused=true] .tut-camera,.tut-stage[data-paused=true] .tut-ring,.tut-stage[data-paused=true] .tut-cursor,.tut-stage[data-paused=true] .tut-cursor:after{animation-play-state:paused}.tut-stage[data-still=true] .tut-camera,.tut-stage[data-motion=reduced] .tut-camera{animation:none;transform:none}.tut-stage[data-still=true] .tut-ring,.tut-stage[data-motion=reduced] .tut-ring{outline-offset:2px;outline-width:3px;animation:none}.tut-stage[data-still=true] .tut-cursor,.tut-stage[data-motion=reduced] .tut-cursor{display:none}.tut-progress{background:color-mix(in srgb, var(--foreground) 12%, transparent);height:3px;position:absolute;bottom:0;left:0;right:0}.tut-progress>span{background:var(--accent);transform-origin:0;height:100%;animation:tut-progress var(--tut-step-ms,4.5s) linear both;display:block}.tut-stage[data-paused=true] .tut-progress>span{animation-play-state:paused}@keyframes tut-progress{0%{transform:scaleX(0)}}