.visualizer-container{gap:40px;margin:100px 40px;display:flex}.visualizer-content{width:70%;height:70vh;position:relative}.loading-overlay{z-index:2;background:#ffffffb3;justify-content:center;align-items:center;font-size:18px;font-weight:600;display:flex;position:absolute;inset:0}.visualizer-content img{transition:opacity .3s}.color-section{width:30%}.color-detail{flex-direction:column;justify-content:center;align-items:center;margin-bottom:20px;display:flex}.color-title{color:#f4c67c;text-transform:uppercase;margin-bottom:10px;font-size:28px;font-weight:500}.color-list{grid-template-columns:repeat(4,1fr);gap:15px;max-height:460px;display:grid;overflow-y:auto}.color-item{cursor:pointer;text-align:center;border:2px solid #0000;border-radius:8px;padding:5px}.color-item img{transition:transform .3s}.color-item:hover img{border-radius:8px;transform:scale(1.1)}.color-item.active{border:2px solid #f4c67c}@media (max-width:1024px){.visualizer-container{flex-direction:column}.visualizer-content{width:100%;height:50vh}.color-section{width:100%}.color-list{grid-template-columns:repeat(3,1fr)}}@media (max-width:600px){.color-list{grid-template-columns:repeat(2,1fr)}}