.color-item{cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);border-radius:.375rem}.color-item:hover{transform:scale(1.15) translateY(-2px);box-shadow:0 8px 25px rgba(0,0,0,.15),0 0 0 2px hsla(0,0%,100%,.3);z-index:20}.card{background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:.5rem;padding:.5rem;transition:all .25s cubic-bezier(.16,1,.3,1);box-shadow:0 1px 2px -1px rgba(0,0,0,.03),0 1px 1px -1px rgba(0,0,0,.01);display:flex;flex-direction:column;height:100%;position:relative;overflow:hidden;cursor:pointer}.card:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,hsla(0,0%,100%,.1),transparent);transition:left .6s ease}.card:hover{transform:translateY(-2px) scale(1.01);box-shadow:0 8px 20px -4px rgba(0,0,0,.08),0 4px 6px -2px rgba(0,0,0,.03);border-color:hsl(var(--primary)/.3)}.card:hover:before{left:100%}.color-spectrum{display:flex;height:20px;margin:.25rem 0;border-radius:.25rem;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.06)}.color-spectrum-item{height:100%;flex:1;min-width:2px;transition:all .2s ease}.color-spectrum-item:hover{transform:scaleY(1.2);z-index:10;box-shadow:0 0 8px rgba(0,0,0,.3)}.card-header{padding-bottom:.25rem;border-bottom:1px solid hsl(var(--border));margin-bottom:.25rem;transition:border-color .2s ease}.card:hover .card-header{border-color:hsl(var(--primary)/.15)}.card-footer{padding-top:.25rem;border-top:1px solid hsl(var(--border));margin-top:.25rem;font-size:.625rem;color:hsl(var(--muted-foreground));transition:border-color .2s ease}.card:hover .card-footer{border-color:hsl(var(--primary)/.15)}