@import "https://fonts.googleapis.com/css2?family=DM+Sans:wght@400&display=swap";
.candy-page{background:0 0;flex-direction:column;justify-content:center;align-items:center;min-height:100vh;padding:4rem 2rem;font-family:DM Sans,sans-serif;display:flex}.candy-grid{grid-template-columns:repeat(5,1fr);gap:3rem 2.5rem;width:100%;max-width:760px;display:grid}.candy-cell{flex-direction:column;align-items:center;gap:1rem;display:flex}.candy-icon{cursor:pointer;border-radius:28px;justify-content:center;align-items:center;width:128px;height:128px;transition:transform .22s cubic-bezier(.34,1.56,.64,1);display:flex;position:relative}.candy-icon:active{transition:transform 80ms;transform:scale(.94)}.candy-icon svg{z-index:2;flex-shrink:0;width:69px;height:69px;position:relative}.candy-floor-shadow{opacity:.4;width:96px;height:14px}.candy-icon{background:radial-gradient(ellipse 55% 28% at 24% 10%,#ffffff9e 0%,transparent 100%),linear-gradient(148deg,hsl(var(--hue),86%,64%)0%,hsl(var(--hue),90%,50%)30%,hsl(var(--hue),84%,34%)64%,hsl(var(--hue),80%,20%)100%);border-radius:38px;box-shadow:inset 0 3px 4px #ffffff6b,inset 0 -5px 12px #00000061}.candy-icon:before{content:"";z-index:1;pointer-events:none;background:linear-gradient(#ffffff47 0%,#ffffff1a 47%,#fff0 48%);border-radius:38px;position:absolute;inset:0}.candy-icon:after{content:"";z-index:0;background:hsl(var(--hue),58%,72%);opacity:.92;border-radius:21px;position:absolute;inset:14px}.candy-icon svg{filter:drop-shadow(0 1px 3px #0003);z-index:3}@media (max-width:680px){.candy-grid{gap:1.5rem 1rem}.candy-icon{border-radius:29px;width:96px;height:96px}.candy-icon:after{border-radius:15px;inset:12px}.candy-icon svg{width:53px;height:53px}}@media (max-width:480px){.candy-grid{grid-template-columns:repeat(3,1fr);gap:2rem 1.5rem;max-width:360px}}