.color_container{flex-direction:column;gap:1rem;display:flex}.color_subtitle{opacity:.7;margin-top:.5rem}.color_picker{align-items:center;gap:1rem;display:flex}.color_grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;display:grid}.color_card{cursor:pointer;background:linear-gradient(180deg, var(--panel), var(--panel-2));-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:2px solid #ffc8502e;border-radius:12px;padding:10px;transition:transform .15s,border-color .15s,box-shadow .15s;display:flex;position:relative;overflow:hidden}.color_card:before{content:"";pointer-events:none;background:repeating-linear-gradient(45deg,#ffd7780f,#ffd7780f 8px,#ff000008 8px 16px);position:absolute;inset:0}.color_info{color:#242320;flex-direction:column;gap:.3rem;padding:.8rem;display:flex}.color_info p{margin:0;font-family:monospace}.color_box{cursor:pointer;border-radius:8px;width:80px;min-width:80px;height:80px;transition:transform .2s;position:relative;overflow:hidden;box-shadow:0 4px #0000001f,0 10px 18px #00000026}.color_box_overlay{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:0;background:#00000059;justify-content:center;align-items:center;transition:opacity .2s;display:flex;position:absolute;inset:0}.color_box:hover{transform:translateY(-3px)rotate(-.5deg)}.color_box:hover .color_box_overlay{opacity:1}.color_box:hover .color_box_icon{transform:scale(1)}.color_box_icon{color:#fff;text-shadow:0 2px 6px #0006;font-size:18px;transition:transform .2s;transform:scale(.9)}.color_strip{border-radius:10px;gap:0;display:flex;overflow:hidden;box-shadow:0 6px 18px #00000040}.color_swatch{cursor:pointer;flex-direction:column;flex:1;min-width:0;display:flex}.color_swatch-color{height:120px;transition:filter .15s;position:relative}.color_swatch:hover .tcp-swatch-color{filter:brightness(.85)saturate(1.2)}.color_swatch-overlay{opacity:0;color:#ffd36a;letter-spacing:.5px;background:#00000040;justify-content:center;align-items:center;font-size:12px;font-weight:700;transition:opacity .15s;display:flex;position:absolute;inset:0}.color_swatch:hover .color_swatch-overlay{opacity:1}.color_swatch-label{background:linear-gradient(#1a1a1a,#0e0e0e);border-top:1px solid #ffd36a26;flex-direction:column;align-items:center;gap:2px;padding:8px 4px 6px;display:flex}.color_swatch-name{color:#ffd36a;white-space:nowrap;font-size:11px;font-weight:700}.color_swatch-hex{color:#ffe6b4bf;white-space:nowrap;font-family:monospace;font-size:11px}.color_swatch+.color_swatch .color_swatch-color{border-left:1px solid #ffd36a33}.tool-info{flex-direction:column;gap:12px;width:100%;max-width:1000px;margin:0 auto;display:flex}@media (max-width:640px){.tool-info{gap:10px}}