:root{--clay-bg:#fbf6ec;--clay-ink:#2c2416;--clay-ink-soft:#5b4f3c;--clay-butter:#ffd65c;--clay-butter-shade:176, 120, 0;--clay-cream:#fffaf0;--clay-cream-shade:150, 120, 70;--clay-mint:#bfe8cf;--clay-mint-shade:46, 120, 80;--clay-peach:#ffc9b0;--clay-peach-shade:170, 80, 50;--clay-lavender:#d9cdfa;--clay-lavender-shade:90, 66, 170;--clay-sky:#bfe1f7;--clay-sky-shade:40, 110, 160;--clay-radius:32px;--clay-spring:cubic-bezier(.34, 1.56, .64, 1)}.clay-home{background:var(--clay-bg);color:var(--clay-ink)}body:has(.clay-home){background:var(--clay-bg)}@layer components{.clay{--fill:var(--clay-cream);--shade:var(--clay-cream-shade);background:var(--fill);border-radius:var(--clay-radius);box-shadow:0 18px 36px -14px rgba(var(--shade), .45), inset -8px -8px 16px rgba(var(--shade), .22), inset 8px 8px 16px #ffffffbf}.clay-sm{box-shadow:0 10px 20px -10px rgba(var(--shade), .5), inset -4px -4px 8px rgba(var(--shade), .25), inset 4px 4px 8px #ffffffbf}.clay-inset{border-radius:calc(var(--clay-radius) - 8px);box-shadow:inset 6px 6px 14px rgba(var(--shade), .3), inset -6px -6px 14px #ffffffb3}.clay-butter{--fill:var(--clay-butter);--shade:var(--clay-butter-shade)}.clay-cream{--fill:var(--clay-cream);--shade:var(--clay-cream-shade)}.clay-white{--fill:#fff;--shade:var(--clay-cream-shade)}.clay-mint{--fill:var(--clay-mint);--shade:var(--clay-mint-shade)}.clay-peach{--fill:var(--clay-peach);--shade:var(--clay-peach-shade)}.clay-lavender{--fill:var(--clay-lavender);--shade:var(--clay-lavender-shade)}.clay-sky{--fill:var(--clay-sky);--shade:var(--clay-sky-shade)}.clay-press{transition:transform .18s var(--clay-spring), box-shadow .18s ease;will-change:transform}.clay-press:hover{transform:translateY(-3px)}.clay-press:active{box-shadow:0 6px 12px -8px rgba(var(--shade), .5), inset -6px -6px 12px rgba(var(--shade), .3), inset 6px 6px 12px #fff9;transform:translateY(1px)scale(.97)}.clay-press:focus-visible{outline:3px solid var(--clay-ink);outline-offset:4px}.clay-card:hover .clay-card-img{transform:scale(1.06)rotate(-1deg)}.clay-card-img{transition:transform .3s var(--clay-spring)}.clay-blob{pointer-events:none;border-radius:9999px;animation:7s ease-in-out infinite clay-float;position:absolute}.clay-blob:nth-of-type(2n){animation-duration:9s;animation-delay:-3s}@keyframes clay-float{0%,to{transform:translateY(0)rotate(0)}50%{transform:translateY(-14px)rotate(6deg)}}.clay-skeleton{animation:1.4s ease-in-out infinite clay-pulse}@keyframes clay-pulse{0%,to{opacity:1}50%{opacity:.55}}@media (prefers-reduced-motion:reduce){.clay-press,.clay-card-img{transition:none}.clay-press:hover,.clay-press:active,.clay-card:hover .clay-card-img{transform:none}.clay-blob,.clay-skeleton{animation:none}}}