.kh{--kh-floor:26px;--kh-door-x:64%;--kh-eye-x:30%;contain:paint;width:100%;max-width:420px;height:190px;margin-inline:auto;position:relative;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,#0000,#000 14% 86%,#0000);mask-image:linear-gradient(90deg,#0000,#000 14% 86%,#0000)}.kh svg{width:100%;height:100%;display:block;overflow:visible}.kh-pool{left:calc(var(--kh-door-x) - 60px);bottom:var(--kh-floor);background:radial-gradient(ellipse 50% 60% at 50% 100%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%);width:180px;height:150px;position:absolute}.kh-floor{left:0;right:0;bottom:var(--kh-floor);background:linear-gradient(90deg, transparent, var(--border-strong) 15%, var(--border-strong) 85%, transparent);height:1px;position:absolute}.kh-spill{left:var(--kh-door-x);bottom:calc(var(--kh-floor) - 8px);background:radial-gradient(closest-side, color-mix(in srgb, var(--accent) 45%, transparent), transparent);width:62px;height:16px;position:absolute}.kh-door,.kh-leaf{left:var(--kh-door-x);bottom:var(--kh-floor);width:62px;height:94px;position:absolute}.kh-leaf svg{transform-origin:92%}.kh-leaf .door-keyglow{opacity:.6}.kh-eye{left:calc(var(--kh-eye-x) - 22px);bottom:calc(var(--kh-floor) - 13.4px);opacity:0;width:44px;height:44px;position:absolute}.kh-eye svg{position:relative}.kh-eye-glow{background:radial-gradient(closest-side, color-mix(in srgb, var(--accent) 40%, transparent), transparent 75%);border-radius:50%;position:absolute;inset:-30%}.kh-eye [data-lid=top],.kh-peek [data-lid=top]{transform-box:fill-box;transform-origin:50% 0}.kh-eye [data-lid=bottom],.kh-peek [data-lid=bottom]{transform-box:fill-box;transform-origin:50% 100%}.kh-track{left:0;right:0;bottom:calc(var(--kh-floor) - 4.5px);height:96px;position:absolute}.kh-kee{opacity:0;transform-origin:50% 100%;width:72px;height:96px;position:absolute;bottom:0;left:0}.kh-kee .k-leg-l,.kh-kee .k-leg-r{transform-box:fill-box;transform-origin:50% 0}.kh-kee .k-arm-l,.kh-kee .k-arm-r{transform-box:fill-box;transform-origin:50% 8%}.kh-peek-clip{left:calc(var(--kh-door-x) + 1px);bottom:calc(var(--kh-floor) + 90px);width:60px;height:36px;position:absolute;overflow:hidden}@media (prefers-reduced-motion:no-preference){html[data-motion=on] .kh-eye{animation:.26s cubic-bezier(.5,0,.3,1) 1.76s both kh-tuck}html[data-motion=on] .kh-eye [data-lid]{animation:.24s ease-in-out .8s kh-lid}html[data-motion=on] .kh-track{animation:2.45s linear .5s both kh-walk}html[data-motion=on] .kh-kee{animation:.35s ease-in 2.95s both kh-enter}html[data-motion=on] .kh-kee .k-leg-l{animation:.4s ease-in-out .5s 3 kh-swing,.36s ease-in-out 2.05s 2.5 kh-swing}html[data-motion=on] .kh-kee .k-leg-r{animation:.4s ease-in-out .5s 3 kh-swing-r,.36s ease-in-out 2.05s 2.5 kh-swing-r}html[data-motion=on] .kh-kee .k-arm-l{animation:.4s ease-in-out .5s 3 kh-arm,.36s ease-in-out 2.05s 2.5 kh-arm}html[data-motion=on] .kh-kee .k-torso{animation:.2s ease-in-out .5s 6 kh-bob,.18s ease-in-out 2.05s 5 kh-bob}html[data-motion=on] .kh-kee .k-arm-r{animation:.38s ease-in-out 1.66s kh-reach}html[data-motion=on] .kh-kee .k-pocket{animation:.42s ease-out 1.98s both kh-glint}html[data-motion=on] .kh-leaf svg{animation:.34s linear 3.05s both kh-shut}html[data-motion=on] .kh-leaf .door-keyglow{animation:.7s ease-out 3.35s both kh-keyglow}html[data-motion=on] .kh-spill{animation:.6s ease-out 3.35s both kh-fade-in}html[data-motion=on] .kh-peek{animation:.5s cubic-bezier(.34,1.3,.64,1) 3.8s both kh-rise}html[data-motion=on] .kh-peek [data-lid]{animation:.22s ease-in-out 4.7s kh-lid}}@keyframes kh-walk{0%{animation-timing-function:cubic-bezier(.3,.1,.45,1);transform:translate(-72px)}49%{transform:translateX(calc(var(--kh-eye-x) - 68px))}63.3%{transform:translateX(calc(var(--kh-eye-x) - 68px));animation-timing-function:cubic-bezier(.3,.1,.45,1)}to{transform:translateX(calc(var(--kh-door-x) - 5px))}}@keyframes kh-enter{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.9)}}@keyframes kh-swing{0%,50%,to{transform:rotate(0)}25%{transform:rotate(26deg)}75%{transform:rotate(-26deg)}}@keyframes kh-swing-r{0%,50%,to{transform:rotate(0)}25%{transform:rotate(-26deg)}75%{transform:rotate(26deg)}}@keyframes kh-arm{0%,50%,to{transform:rotate(0)}25%{transform:rotate(-14deg)}75%{transform:rotate(14deg)}}@keyframes kh-bob{0%,to{transform:translateY(0)}50%{transform:translateY(-3px)}}@keyframes kh-reach{0%,to{transform:rotate(0)}35%{transform:rotate(-40deg)}75%{transform:rotate(18deg)}}@keyframes kh-tuck{0%{opacity:1;transform:translate(0)scale(1)}70%{opacity:1;transform:translate(-26px,-24px)scale(.32)}to{opacity:0;transform:translate(-26px,-24px)scale(.2)}}@keyframes kh-glint{0%{opacity:0}40%{opacity:1}to{opacity:.7}}@keyframes kh-lid{0%,to{transform:scaleY(0)}42%,55%{transform:scaleY(1)}}@keyframes kh-shut{0%{animation-timing-function:cubic-bezier(.55,0,.9,.3);transform:scaleX(.16)}72%{animation-timing-function:ease-out;transform:scaleX(1.03)}to{transform:scaleX(1)}}@keyframes kh-keyglow{0%{opacity:0}30%{opacity:1}to{opacity:.6}}@keyframes kh-fade-in{0%{opacity:0}to{opacity:1}}@keyframes kh-rise{0%{transform:translateY(100%)}to{transform:translateY(0)}}