@layer components{:where(.mascot-moment){width:128px}}:where(.mascot-moment){aspect-ratio:1.12;pointer-events:none;-webkit-user-select:none;user-select:none;flex:none;position:relative;overflow:clip}.mascot-moment__scene{position:absolute;inset:0}.mascot-moment__actor{transform-origin:50% 82%;width:94%;position:absolute;inset-block-end:-6%;inset-inline-start:0}.mascot-moment__document{width:27%;height:35%;color:color-mix(in srgb, var(--moment-agent-color) 45%, #20231f);background:color-mix(in srgb, var(--moment-agent-color) 10%, #fff);border:1px solid color-mix(in srgb, var(--moment-agent-color) 40%, #62675f);opacity:0;transform-origin:12% 90%;flex-direction:column;gap:12%;padding:7% 5%;display:flex;position:absolute;inset-block-end:17%;inset-inline-end:10%}.mascot-moment__document-line{transform-origin:0;background:currentColor;width:100%;height:1px;min-height:1px;display:block}.mascot-moment__document-line:last-of-type{width:65%}.mascot-moment__mark{opacity:0;width:70%;height:70%;position:absolute;inset:15%}.mascot-moment[data-state=working] .mascot-moment__actor{animation:.92s cubic-bezier(.16,1,.3,1) both mascot-moment-work;transform:rotate(-5deg)}.mascot-moment[data-state=working] .mascot-moment__document{opacity:1;transform:rotate(-9deg)}.mascot-moment[data-state=working] .mascot-moment__document-line{animation:.68s cubic-bezier(.16,1,.3,1) both mascot-moment-write}.mascot-moment[data-state=working] .mascot-moment__document-line:nth-child(2){animation-delay:.1s}.mascot-moment[data-state=working] .mascot-moment__document-line:nth-child(3){animation-delay:.2s}.mascot-moment[data-state=success] .mascot-moment__actor{animation:.62s cubic-bezier(.16,1,.3,1) both mascot-moment-proud}.mascot-moment[data-state=success] .mascot-moment__document{opacity:1;animation:.54s cubic-bezier(.16,1,.3,1) both mascot-moment-present;transform:translateY(-12%)rotate(6deg)}.mascot-moment[data-state=success] .mascot-moment__document-line,.mascot-moment[data-state=handoff] .mascot-moment__document-line{opacity:0}.mascot-moment[data-state=success] .mascot-moment__mark,.mascot-moment[data-state=handoff] .mascot-moment__mark{opacity:1}.mascot-moment[data-state=handoff] .mascot-moment__actor{animation:.72s cubic-bezier(.16,1,.3,1) both mascot-moment-reach;transform:rotate(7deg)}.mascot-moment[data-state=handoff] .mascot-moment__document{opacity:1;animation:.72s cubic-bezier(.16,1,.3,1) both mascot-moment-handoff;transform:translate(22%,-8%)rotate(10deg)}@keyframes mascot-moment-work{0%,48%{transform:rotate(-2deg)}24%,72%{transform:translateY(2%)rotate(-7deg)}to{transform:rotate(-5deg)}}@keyframes mascot-moment-write{0%{transform:scaleX(.15)}to{transform:scaleX(1)}}@keyframes mascot-moment-proud{0%{transform:translateY(3%)rotate(-5deg)}40%{transform:translateY(-4%)rotate(3deg)}to{transform:none}}@keyframes mascot-moment-present{0%{transform:translateY(10%)rotate(-9deg)}to{transform:translateY(-12%)rotate(6deg)}}@keyframes mascot-moment-reach{0%{transform:rotate(-3deg)}48%{transform:translate(3%)rotate(10deg)}to{transform:rotate(7deg)}}@keyframes mascot-moment-handoff{0%{transform:translate(-24%,4%)rotate(-9deg)}65%{transform:translate(28%,-8%)rotate(12deg)}to{transform:translate(22%,-8%)rotate(10deg)}}@media (prefers-reduced-motion:reduce){.mascot-moment[data-state] .mascot-moment__actor,.mascot-moment[data-state] .mascot-moment__document,.mascot-moment[data-state] .mascot-moment__document-line{animation:none;transform:none}}