@charset "UTF-8";.color-palette-container{max-width:1200px;margin:0 auto;padding:20px;display:flex;flex-direction:column;height:calc(100vh - 40px)}.color-palette{flex-grow:1;overflow-y:auto;padding:20px;border:1px solid #e2e8f0;border-radius:8px;box-shadow:0 4px 6px #0000001a;position:relative;margin-bottom:20px}.scroll-icon-container{position:absolute;bottom:20px;left:50%;transform:translate(-50%);background-color:#945bd5;border-radius:50%;padding:10px;box-shadow:0 2px 4px #0000001a;z-index:10;transition:background-color .3s ease;animation:pulse 2s infinite}.scroll-icon{width:24px;height:24px;color:#fff;animation:bounce 1s infinite}@keyframes pulse{0%{transform:translate(-50%) scale(1)}50%{transform:translate(-50%) scale(1)}to{transform:translate(-50%) scale(1)}}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}.color-palette::-webkit-scrollbar{width:8px}.color-palette::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.color-palette::-webkit-scrollbar-thumb{background:#888;border-radius:4px}.color-palette::-webkit-scrollbar-thumb:hover{background:#555}.fade-enter-active,.fade-leave-active{transition:opacity .3s ease}.fade-enter-from,.fade-leave-to{opacity:0}@media (max-width: 640px){.color-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}.color-circle{width:120px;height:120px}}