@layer components{.clay-card{background-color:#f0f4f8;border-radius:40px;box-shadow:20px 20px 60px #ced1d6,-20px -20px 60px #fff}.clay-inset{box-shadow:inset 6px 6px 10px #a3b1c64d,inset -6px -6px 10px #fffc}.clay-convex{background:linear-gradient(145deg,#fff,#e6eaf0);box-shadow:5px 5px 10px #d1d9e6,-5px -5px 10px #fff}.clay-pressed{box-shadow:inset 4px 4px 8px #d1d9e6,inset -4px -4px 8px #fff}.clay-knob{background:linear-gradient(145deg,#e6eaf0,#fff);box-shadow:6px 6px 12px #b8b9be,-6px -6px 12px #fff}@keyframes anticipate{0%{transform:rotate(0)}40%{transform:rotate(1.8deg)}to{transform:rotate(0)}}@keyframes overshoot{0%{transform:rotate(0)}40%{transform:rotate(-1.8deg)}to{transform:rotate(0)}}.animate-anticipate{animation:.6s cubic-bezier(.22,1,.36,1) anticipate}.animate-overshoot{animation:.6s cubic-bezier(.22,1,.36,1) overshoot}}