g[data-v-7931de46]{animation:svg-animation-23116f45-7931de46 2s linear infinite}circle[data-v-7931de46],g[data-v-7931de46]{transform-origin:50% 50%}circle[data-v-7931de46]{animation:circle-animation-23116f45-7931de46 2s ease-in-out infinite both}@keyframes svg-animation-23116f45-7931de46{0%{transform:rotate(0)}to{transform:rotate(1turn)}}@keyframes circle-animation-23116f45-7931de46{0%,25%{stroke-dashoffset:280;transform:rotate(0)}50%,75%{stroke-dashoffset:75;transform:rotate(45deg)}to{stroke-dashoffset:280;transform:rotate(1turn)}}.color-preview[data-v-058d2f4c]{border-radius:50%;box-shadow:0 0 0 5px #ffffff0d;height:80px;width:80px}.color-codes[data-v-058d2f4c]{gap:16px;width:100%}.color-codes[data-v-058d2f4c],.color-info[data-v-058d2f4c]{display:flex;flex-direction:column}.color-info[data-v-058d2f4c]{align-items:center;flex-grow:1;gap:8px;height:100%;justify-content:center;padding-bottom:24px}.color-code-container[data-v-058d2f4c]{position:relative}.color-code-container .color-input[data-v-058d2f4c]{padding-left:100px;text-align:left}.color-input-type[data-v-058d2f4c]{align-items:center;background:linear-gradient(180deg,hsla(0,0%,100%,.08),hsla(0,0%,100%,.05));border-radius:8px;bottom:4px;box-shadow:inset 0 1px 1px #ffffff1a,0 0 0 2px #00000026;display:inline-flex;font-size:14px;font-style:normal;font-weight:500;justify-content:center;left:4px;opacity:.75;position:absolute;text-transform:uppercase;top:4px;width:72px}.panel-loader[data-v-058d2f4c]{position:absolute;right:24px;top:24px}.vertical[data-v-058d2f4c]{display:flex;flex-direction:column;gap:24px;width:100%}.help h4[data-v-058d2f4c]{color:#ffffffbf;font-size:16px;font-weight:500}.help p[data-v-058d2f4c]{font-size:14px;font-weight:400;line-height:1.45;margin-top:16px}.help a[data-v-058d2f4c],.help p[data-v-058d2f4c]{color:#ffffff80}.help a[data-v-058d2f4c]{text-decoration:underline;transition:none}.color-data[data-v-058d2f4c]{align-items:center;display:flex;flex-direction:column;height:100%}.css-switcher[data-v-058d2f4c]{background:transparent;border:1px solid hsla(0,0%,100%,.25);border-radius:999px;color:#ffffff80;cursor:pointer;font-size:12px;font-weight:500;margin-top:12px;padding:6px 16px;text-align:right;text-transform:uppercase;transition:color .25s ease}.css-switcher[data-v-058d2f4c]:hover{color:#fff}@media screen and (max-width:600px){.color-input-type[data-v-058d2f4c]{font-size:12px;width:56px}.color-code-container .color-input[data-v-058d2f4c]{padding-left:72px}.help[data-v-058d2f4c]{display:none}.color-info[data-v-058d2f4c]{padding:32px 0}}