@charset "UTF-8";.color-grid[data-v-fe0f2ff5]{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));justify-content:center;align-content:center;gap:20px;min-height:300px}.color-item[data-v-fe0f2ff5]{display:flex;justify-content:center;width:100%}.color-item .color-circle[data-v-fe0f2ff5]{position:relative;width:150px;height:150px;border-radius:50%;display:flex;align-items:center;justify-content:center;overflow:hidden;transition:all .3s ease;box-shadow:0 4px 6px #9b9999;cursor:pointer}.color-item .color-circle .color-text[data-v-fe0f2ff5]{position:relative;z-index:2;text-align:center;font-family:Arial,sans-serif;display:flex;flex-direction:column;justify-content:center;height:100%;padding:10px;box-sizing:border-box;transform:translateY(8px);transition:all .3s ease}.color-item .color-circle .color-name[data-v-fe0f2ff5]{font-weight:700;font-size:14px;margin-bottom:4px;line-height:1.2}.color-item .color-circle .color-code[data-v-fe0f2ff5]{font-size:.9em;line-height:1}.color-item .color-circle[data-v-fe0f2ff5]:hover{transform:scale(1.05) rotate(15deg)}.color-item .color-circle:hover .color-text[data-v-fe0f2ff5]{transform:rotate(-15deg)}.color-item .color-circle[data-v-fe0f2ff5]:after{content:"";position:absolute;bottom:15px;left:15px;width:41px;height:9px;background:#ffffff1a;border-radius:50% 50% 0;transform:rotate(-140deg);box-shadow:inset 0 3px 3px #fff0,0 0 #0006;transition:all .3s ease}