.tut-stage{--tut-loop:9s;border:1px solid var(--color-ink);background:var(--color-sheet);border-radius:.5rem;position:relative;overflow:hidden}.tut-stage img{width:100%;height:auto;display:block}.tut-layer{position:absolute;inset:0}.tut-tag{background:var(--color-ink);color:var(--color-sheet);border-radius:.25rem;padding:.15rem .55rem;font-size:.8125rem;font-weight:600;position:absolute;top:.6rem;left:.6rem}.tut-badge{text-align:center;border:2px solid var(--color-marker);background:var(--color-sheet);width:max-content;max-width:90%;color:var(--color-ink);border-radius:999px;padding:.3rem .85rem;font-size:.875rem;font-weight:600;position:absolute;bottom:.9rem;left:50%;transform:translate(-50%)}.tut-add-empty{border:2px dashed var(--color-rule);color:var(--color-graphite);opacity:0;animation:tut-add-empty var(--tut-loop) infinite;border-radius:.5rem;justify-content:center;align-items:center;margin:.75rem;font-weight:600;display:flex}.tut-add-sketch{animation:tut-add-sketch var(--tut-loop) infinite}@keyframes tut-add-empty{0%,18%{opacity:1}26%,to{opacity:0}}@keyframes tut-add-sketch{0%,15%{opacity:0;transform:translateY(-12%)scale(.92)}28%{opacity:1;transform:translateY(0)scale(1)}to{opacity:1;transform:none}}.tut-field{border:1px solid var(--color-rule);background:var(--color-sheet);border-radius:.375rem;padding:.75rem .85rem;line-height:1.5}.tut-field-tall{min-height:5.5rem}.tut-typed{animation:tut-type var(--tut-loop) steps(28, end) infinite;clip-path:inset(0);display:inline-block}.tut-added{animation:tut-added var(--tut-loop) infinite;display:inline}.tut-chip-press{animation:tut-chip-press var(--tut-loop) infinite}.tut-subject{animation:tut-subject var(--tut-loop) infinite}@keyframes tut-type{0%{clip-path:inset(0 100% 0 0)}38%,to{clip-path:inset(0)}}@keyframes tut-added{0%,52%{opacity:0}58%,to{opacity:1}}@keyframes tut-chip-press{0%,44%{background:var(--color-sheet);color:var(--color-ink);transform:none}48%,54%{background:var(--color-ink);color:var(--color-sheet);transform:scale(.94)}60%,to{background:var(--color-sheet);color:var(--color-ink);transform:none}}@keyframes tut-subject{0%,66%{opacity:0;transform:translateY(.4rem)}74%,to{opacity:1;transform:none}}.tut-progress{background:var(--color-rule);opacity:0;height:.5rem;animation:tut-progress-box var(--tut-loop) infinite;border-radius:999px;position:absolute;top:50%;left:1.5rem;right:1.5rem;overflow:hidden}.tut-progress:after{content:"";background:var(--color-cobalt);transform-origin:0;animation:tut-progress-fill var(--tut-loop) infinite;position:absolute;inset:0}.tut-render-wipe{animation:tut-render-wipe var(--tut-loop) infinite}.tut-handle{background:var(--color-ink);opacity:0;width:2px;animation:tut-handle var(--tut-loop) infinite;position:absolute;top:0;bottom:0;left:100%}@keyframes tut-progress-box{0%,26%{opacity:1}30%,to{opacity:0}}@keyframes tut-progress-fill{0%{transform:scaleX(0)}26%,to{transform:scaleX(1)}}@keyframes tut-render-wipe{0%,28%{clip-path:inset(0 100% 0 0)}44%{clip-path:inset(0)}56%{clip-path:inset(0)}72%{clip-path:inset(0 0 0 50%)}88%,to{clip-path:inset(0)}}@keyframes tut-handle{0%,54%{opacity:0;left:0}56%{opacity:1;left:0}72%{opacity:1;left:50%}88%{opacity:1;left:0}92%,to{opacity:0;left:0}}.tut-check{animation:tut-check var(--tut-loop) infinite}.tut-check-badge{animation:tut-check-badge var(--tut-loop) infinite}@keyframes tut-check{0%,22%{opacity:0}40%,to{opacity:1}}@keyframes tut-check-badge{0%,48%{opacity:0;transform:translate(-50%,.5rem)}56%,to{opacity:1;transform:translate(-50%)}}.tut-v2-view{opacity:0;animation:tut-v2-view var(--tut-loop) infinite}.tut-v2-thumb{animation:tut-v2-thumb var(--tut-loop) infinite}.tut-v1-ring{animation:tut-v1-ring var(--tut-loop) infinite}.tut-v2-ring{animation:tut-v2-ring var(--tut-loop) infinite}@keyframes tut-v2-view{0%,24%{opacity:0}34%,66%{opacity:1}74%,to{opacity:0}}@keyframes tut-v2-thumb{0%,24%{opacity:0;transform:translate(-.5rem)}34%,to{opacity:1;transform:none}}@keyframes tut-v1-ring{0%,24%{border-color:var(--color-cobalt)}30%,68%{border-color:var(--color-rule)}74%,to{border-color:var(--color-cobalt)}}@keyframes tut-v2-ring{0%,30%{border-color:var(--color-rule)}34%,68%{border-color:var(--color-cobalt)}74%,to{border-color:var(--color-rule)}}.tut-mark{stroke-dasharray:1;stroke-dashoffset:0;opacity:0;animation:tut-mark var(--tut-loop) infinite, tut-mark-fade var(--tut-loop) infinite}.tut-request{animation:tut-request var(--tut-loop) steps(20, end) infinite;clip-path:inset(0);display:inline-block}.tut-area{animation:tut-area var(--tut-loop) infinite}.tut-change-after{animation:tut-change-after var(--tut-loop) infinite}@keyframes tut-mark{0%,6%{stroke-dashoffset:1px}32%,to{stroke-dashoffset:0}}@keyframes tut-request{0%,36%{clip-path:inset(0 100% 0 0)}56%,to{clip-path:inset(0)}}@keyframes tut-area{0%,66%{opacity:0}74%,to{opacity:1}}@keyframes tut-change-after{0%,58%{opacity:0}68%,to{opacity:1}}@keyframes tut-mark-fade{0%,58%{opacity:1}66%,to{opacity:0}}.tut-crop{border:2px solid var(--color-sheet);animation:tut-crop var(--tut-loop) infinite;position:absolute;inset:21.875% 0;box-shadow:0 0 0 999px #14233b8c}.tut-warm{filter:sepia(.22)saturate(1.2)brightness(1.03);animation:tut-warm var(--tut-loop) infinite}.tut-saved{animation:tut-saved var(--tut-loop) infinite}@keyframes tut-crop{0%,8%{inset:0}30%,to{inset:21.875% 0}}@keyframes tut-warm{0%,36%{filter:none}56%,to{filter:sepia(.22)saturate(1.2)brightness(1.03)}}@keyframes tut-saved{0%,64%{opacity:0;transform:translate(-50%,.5rem)}72%,to{opacity:1;transform:translate(-50%)}}.tut-press-1{animation:tut-press-1 var(--tut-loop) infinite}.tut-press-2{animation:tut-press-2 var(--tut-loop) infinite}@keyframes tut-press-1{0%,10%{background:var(--color-sheet);color:var(--color-ink)}14%,26%{background:var(--color-ink);color:var(--color-sheet)}30%,to{background:var(--color-sheet);color:var(--color-ink)}}@keyframes tut-press-2{0%,36%{background:var(--color-sheet);color:var(--color-ink)}40%,52%{background:var(--color-ink);color:var(--color-sheet)}56%,to{background:var(--color-sheet);color:var(--color-ink)}}@media (prefers-reduced-motion:reduce){.tut-stage *,.tut-stage :after,.tut-animated,.tut-animated *{animation:none!important}}
