.ninja-key{white-space:nowrap;border:1px solid;border-radius:5px;padding:3px 5px;font:600 11px/1.3 ui-monospace,monospace}.ninja-box{aspect-ratio:1;width:clamp(106px,16vw,154px);transform:translate(-50%, -50%) rotate(var(--box-rotate));pointer-events:none;transition:top 50ms linear,left 50ms linear;position:absolute}.ninja-box-half{border:1px solid color-mix(in srgb, var(--box-color) 70%, transparent);background:linear-gradient(145deg, color-mix(in srgb, var(--box-color) 20%, #101923), #101923 65%);box-shadow:inset 0 1px 0 color-mix(in srgb, var(--box-color) 35%, transparent), inset 0 -5px 0 #00000040;border-radius:16px;position:absolute;inset:0}.ninja-box-top{clip-path:polygon(-20% -30%,120% -30%,120% 39%,-20% 61%)}.ninja-box-top:before{content:"";background:var(--box-color);opacity:.8;border-radius:2px;height:4px;position:absolute;inset:10px 10px auto}.ninja-box-bottom:after{content:"";border-right:2px solid var(--box-color);border-bottom:2px solid var(--box-color);opacity:.45;border-radius:0 0 4px;width:16px;height:16px;position:absolute;inset:auto 12px 12px auto}.ninja-box-bottom{clip-path:polygon(-20% 61%,120% 39%,120% 130%,-20% 130%)}.ninja-box-label{color:#f0fdf4;transform:rotate(calc(-1 * var(--box-rotate)));flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.ninja-box[data-sliced=true] .ninja-box-top{animation:.42s ease-out forwards ninja-split-top}.ninja-box[data-sliced=true] .ninja-box-bottom{animation:.42s ease-out forwards ninja-split-bottom}.ninja-box[data-sliced=true] .ninja-box-label{opacity:0}.ninja-slice{background:#ecfdf5;height:3px;animation:.3s ease-out forwards ninja-slash;position:absolute;inset:48% -25% auto;transform:rotate(-12deg);box-shadow:0 0 18px #a7f3d0}@keyframes ninja-split-top{to{opacity:0;transform:translate(-22px,-24px)rotate(-24deg)}}@keyframes ninja-split-bottom{to{opacity:0;transform:translate(22px,32px)rotate(24deg)}}@keyframes ninja-slash{0%{scale:.2 1}to{opacity:0;scale:1.2 1}}@media (width<=480px){.ninja-box .ninja-key{padding:3px;font-size:9px}}@media (prefers-reduced-motion:reduce){.ninja-box,.ninja-box *{transition:none!important;animation:none!important}.ninja-box[data-sliced=true]{opacity:.2}}