*,:before,:after{box-sizing:border-box}body{background:oklch(0% 0 0);justify-content:center;align-items:center;height:100vh;margin:0;font-size:4vmin;display:flex}.box{--delay:.25s;--dur:1.3s;--timing:cubic-bezier(.25, 1, 0, 1);opacity:0;width:5em;height:5em;animation:rotateIn var(--dur) var(--delay) 2 alternate forwards var(--timing);background:oklch(54.1994% .253735 263.248);transition:all .19s,opacity .11s;position:relative;transform:scale(0)rotate(-45deg)}.box-m{animation:enterScene var(--dur) var(--delay) 2 alternate forwards var(--timing);--delay:.5555s;--dur:.982s;transform-origin:0 3.33em;background:oklch(70.7181% .167949 242.042);width:3.33em;height:3.33em;transition:transform .175s;position:absolute;bottom:0;left:0;transform:scale(0)}.box-s{animation:enterScene var(--dur) var(--delay) 2 alternate forwards var(--timing);--delay:.7565s;--dur:.74971s;transform-origin:0 1.65em;background:oklch(100% 5.96046e-8 90);width:1.65em;height:1.65em;transition:transform .14s;position:absolute;bottom:0;left:0;transform:scale(0)}@keyframes enterScene{0%{transform:scale(0)}76%,to{transform:scale(1)}}@keyframes rotateIn{0%{opacity:0;transform:scale(0)rotate(0)}95%,to{opacity:1;transform:scale(1)rotate(45deg)}}.reset-btn{color:oklch(100% 5.96046e-8 90);cursor:pointer;opacity:.5;background:0 0;border:none;font-family:sans-serif;font-weight:700;transition:opacity .2s;position:fixed;bottom:4cqi;right:4cqi;&:hover{opacity:1}}