@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.swatch-container{position:relative}.shimmer-placeholder{background:#f3f3f3;border-radius:1.5rem;overflow:hidden;z-index:-1}.shimmer-placeholder:before{animation:shimmer 1.5s infinite;background:linear-gradient(90deg,#fff0,#fff6 50%,#fff0);content:"";inset:0;position:absolute}.saved-swatch-card{position:relative;z-index:1}.container{margin:0 auto;max-width:100%;padding:1rem}.header{margin-bottom:2rem;text-align:center}.header h1{font-size:clamp(1.5rem,5vw,2.5rem);margin-bottom:.5rem}.header p{color:#666;font-size:clamp(.875rem,3vw,1rem)}.color-picker-container{aspect-ratio:1;margin:0 auto;max-width:min(90vw,400px);-moz-user-select:none;user-select:none;-webkit-user-select:none}.color-picker,.color-picker-container{position:relative;touch-action:none;width:100%}.color-picker{border-radius:8px;height:100%;overflow:hidden}.picker-handle{border:2px solid #fff;border-radius:50%;box-shadow:0 0 0 1px #0000004d;height:20px;pointer-events:none;position:absolute;transform:translate(-50%,-50%);width:20px}.controls{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;margin:2rem auto;max-width:min(90vw,400px)}.button{border-radius:6px;font-size:clamp(.875rem,3vw,1rem);padding:.5rem 1rem;white-space:nowrap}.swatches-container{margin:0 auto;max-width:min(90vw,400px);width:100%}.swatches-grid{display:grid;gap:.5rem;grid-template-columns:repeat(auto-fit,minmax(40px,1fr));margin:1rem 0}.swatch{aspect-ratio:1;border-radius:6px;cursor:pointer;transition:transform .2s}.swatch:hover{transform:scale(1.1)}.saved-swatches{margin-top:2rem}.saved-swatches-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:1rem}.saved-swatches-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}.saved-swatch-card{background:#fff;border-radius:8px;box-shadow:0 2px 4px #0000001a;padding:.5rem}.saved-swatch-colors{aspect-ratio:2/1;border-radius:6px;display:grid;gap:2px;grid-template-columns:repeat(auto-fit,minmax(20px,1fr));overflow:hidden}.saved-swatch-info{font-size:.875rem;margin-top:.5rem}@media(max-width:640px){.container{padding:.5rem}.controls{gap:.5rem}.button{font-size:.875rem;padding:.5rem}.saved-swatches-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}}@media(max-width:480px){.saved-swatches-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}.saved-swatch-info{font-size:.75rem}}@keyframes fade-in{0%{opacity:0;transform:translateY(1rem)}10%{opacity:1;transform:translateY(0)}90%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(1rem)}}.animate-fade-in{animation:fade-in 2s ease-in-out forwards}.shadow-lg{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}