.palette[data-v-f90453a6]{--palette-width:180px;--palette-height:100px;--palette-radius:10px;width:var(--palette-width);height:var(--palette-height);border-radius:var(--palette-radius);overflow:hidden;box-shadow:0 4px 4px #00000080}.palette>div[data-v-f90453a6]{height:50%}.palette .colors[data-v-f90453a6]{display:flex;position:relative}.palette .colors>div[data-v-f90453a6]{cursor:pointer;flex:1}@media (pointer:fine){.palette .colors>div[data-v-f90453a6][data-v-f90453a6]:hover{filter:brightness(102%)}}.palette .colors .tip[data-v-f90453a6]{color:#fff;text-align:center;background:#333;border-radius:2px;width:65px;height:25px;line-height:25px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.palette .colors .tip[data-v-f90453a6]:before{content:"";background:#333;width:8px;height:8px;position:absolute;top:-4px;left:50%;transform:translate(-50%)rotate(45deg)}.palette .info[data-v-f90453a6]{background:#fff;flex-direction:column;justify-content:center;align-items:center;padding:5px 15px;font-size:12px;display:flex}.palette .info h4[data-v-f90453a6]{color:#444;font-size:1.1em}.palette .info p[data-v-f90453a6]{color:#aaa}.palette.big[data-v-f90453a6]{--palette-width:260px}.palette.square[data-v-f90453a6]{--palette-height:var(--palette-width)}.palette.round[data-v-f90453a6]{--palette-height:var(--palette-width);--palette-radius:50%}:is(.palette.big.square,.palette.big.round) .info[data-v-f90453a6]{font-size:14px}main[data-v-dcfba94e]{flex-wrap:wrap;justify-content:center;gap:20px;max-width:60%;margin:1rem auto;display:flex}main section[data-v-dcfba94e]{flex:1}main section select[data-v-dcfba94e]{appearance:none;box-shadow:none;color:#444;cursor:pointer;background:0 0;border:none;outline:none;padding:3px 0;display:block}main section h3[data-v-dcfba94e],main section select[data-v-dcfba94e]{text-align:center;margin:1rem auto;font-size:1.2rem;font-weight:500}main section .group[data-v-dcfba94e]{grid-template-columns:repeat(auto-fit,180px);justify-content:center;gap:20px;display:grid}main section .example[data-v-dcfba94e]{flex-direction:column;align-items:center;gap:20px;display:flex}.container[data-v-acd16a3a]{color:#444;background:#f0f0f0;min-height:100vh;padding:2rem;transition:color .3s,background .3s}.container header[data-v-acd16a3a]{text-align:center}.container header h1[data-v-acd16a3a]{cursor:pointer;font-size:1.8rem;display:inline-block}.container header h2[data-v-acd16a3a]{font-size:1.1rem;font-weight:300}.container header h2 a[data-v-acd16a3a]{color:#eb4d4b;transition:color .3s}@media (pointer:fine){.container header h2 a[data-v-acd16a3a][data-v-acd16a3a]:hover{color:#fd79a8}}.container.dark[data-v-acd16a3a]{color:#eee;background:#444}.container.dark [data-v-acd16a3a] select{color:#eee}*{box-sizing:border-box}body,h1,h2,h3,h4,p,ul,li{margin:0;padding:0}a{color:#444;text-decoration:none}