:root{--vt-c-white: #ffffff;--vt-c-white-soft: #f8f8f8;--vt-c-white-mute: #f2f2f2;--vt-c-black: #181818;--vt-c-black-soft: #222222;--vt-c-black-mute: #282828;--vt-c-indigo: #2c3e50;--vt-c-divider-light-1: rgba(60, 60, 60, .29);--vt-c-divider-light-2: rgba(60, 60, 60, .12);--vt-c-divider-dark-1: rgba(84, 84, 84, .65);--vt-c-divider-dark-2: rgba(84, 84, 84, .48);--vt-c-text-light-1: var(--vt-c-indigo);--vt-c-text-light-2: rgba(60, 60, 60, .66);--vt-c-text-dark-1: var(--vt-c-white);--vt-c-text-dark-2: rgba(235, 235, 235, .64)}:root{--color-background: var(--vt-c-white);--color-background-soft: var(--vt-c-white-soft);--color-background-mute: var(--vt-c-white-mute);--color-border: var(--vt-c-divider-light-2);--color-border-hover: var(--vt-c-divider-light-1);--color-heading: var(--vt-c-text-light-1);--color-text: var(--vt-c-text-light-1);--section-gap: 160px}@media (prefers-color-scheme: dark){:root{--color-background: var(--vt-c-black);--color-background-soft: var(--vt-c-black-soft);--color-background-mute: var(--vt-c-black-mute);--color-border: var(--vt-c-divider-dark-2);--color-border-hover: var(--vt-c-divider-dark-1);--color-heading: var(--vt-c-text-dark-1);--color-text: var(--vt-c-text-dark-2)}}*,*:before,*:after{box-sizing:border-box;margin:0;font-weight:400}body{width:100vw;height:100vh;color:var(--color-text);background:var(--color-background);transition:color .5s,background-color .5s;line-height:1.6;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-size:16px;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#app{display:flex;justify-content:center;align-items:center;width:100%;height:100%}.gradient-content[data-v-1ab681d0]{position:relative;width:100%;height:168px;cursor:pointer;-webkit-user-select:none;user-select:none;overflow:hidden}.sat-container[data-v-1ab681d0],.val-container[data-v-1ab681d0]{position:absolute;top:0;left:0;right:0;bottom:0}.sat-container[data-v-1ab681d0]{background-image:linear-gradient(90deg,#ffffff,transparent)}.val-container[data-v-1ab681d0]{background-image:linear-gradient(0deg,#000000,transparent)}.cursor-container[data-v-1ab681d0]{position:absolute;left:-8px;top:-8px;border:2px solid #fff;border-radius:50%;width:14px;height:14px;background-color:#fff;cursor:move;-webkit-user-select:none;user-select:none}.hue-slider[data-v-8523a3c0]{position:relative;border-radius:4px;width:100%;height:8px;cursor:pointer;-webkit-user-select:none;user-select:none;background-image:linear-gradient(90deg,red 0,#ff0 17%,#0f0 33%,#0ff,#00f 67%,#f0f 83%,red)}.slider-cursor[data-v-8523a3c0]{position:absolute;top:-2px;left:-8px;border:2px solid #fff;border-radius:50%;width:12px;height:12px;cursor:e-resize;-webkit-user-select:none;user-select:none;box-shadow:inset 0 0 1px #00000040,0 0 0 1px #0000000f}.alpha-slider[data-v-4490f8e8]{position:relative;border-radius:4px;width:100%;height:8px;cursor:pointer;-webkit-user-select:none;user-select:none;background-image:conic-gradient(rgba(0,0,0,.06) 0 25%,transparent 0 50%,rgba(0,0,0,.06) 0 75%,transparent 0);background-size:8px 8px;box-shadow:inset 0 0 1px #00000040}.alpha-slider-content[data-v-4490f8e8]{position:relative;border-radius:4px;width:100%;height:100%}.slider-cursor[data-v-4490f8e8]{position:absolute;top:-2px;left:-8px;border:2px solid #fff;border-radius:50%;width:12px;height:12px;cursor:e-resize;-webkit-user-select:none;user-select:none;box-shadow:inset 0 0 1px #00000040,0 0 0 1px #0000000f}.input-content[data-v-bf2c08b3]{display:flex;align-items:center;gap:8px}.input-content .input-select[data-v-bf2c08b3]{padding:2px 4px;border:1px solid #dcdcdc;border-radius:4px;align-items:center;width:60px;height:24px;background:#fff}.input-content .input-select[data-v-bf2c08b3]:focus{outline:none}.input-content .input-rgb[data-v-bf2c08b3]{display:flex;align-items:center;gap:4px;width:100%}.input-content .input-rgb .input-rgb-item[data-v-bf2c08b3]{flex:1;display:flex;gap:12px;height:24px}.input-content .input-rgb .input-rgb-item[data-v-bf2c08b3]:nth-child(4){width:40px;flex:unset}.input-content .input-hex[data-v-bf2c08b3]{display:flex;gap:4px;width:100%}.input-content input[data-v-bf2c08b3]{flex:1;border:1px solid #dcdcdc;border-radius:4px;width:100%;height:24px;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:center;outline:none;box-sizing:border-box;text-transform:uppercase}.input-content input.alpha-input[data-v-bf2c08b3]{width:40px;flex:unset}.swatch-content[data-v-059ca815]{display:grid;grid-template-columns:repeat(auto-fill,20px);justify-content:space-between;gap:8px}.swatch-item[data-v-059ca815]{position:relative;border-radius:2px;width:20px;height:20px;cursor:pointer;transition:all .3s}.swatch-item.has-border[data-v-059ca815]{box-shadow:inset 0 0 0 1px #87ceeb;border-radius:50%}.panel-content[data-v-5b290b4f]{display:flex;flex-direction:column;gap:12px;width:240px;background-color:#fff}.panel-content .controls-container[data-v-5b290b4f]{display:flex;align-items:center;gap:12px}.panel-content .controls-container .slider-container[data-v-5b290b4f]{flex:1;width:100%;display:flex;flex-direction:column;gap:12px}.panel-content .controls-container .square[data-v-5b290b4f]{border-radius:4px;overflow:hidden;width:28px;height:28px;box-shadow:inset 0 0 1px #00000040;background-image:conic-gradient(rgba(0,0,0,.06) 0 25%,transparent 0 50%,rgba(0,0,0,.06) 0 75%,transparent 0);background-size:50% 50%}.panel-content .controls-container .square span[data-v-5b290b4f]{display:block;width:100%;height:100%;border-radius:4px;cursor:pointer}.color-panel[data-v-aedabde4]{padding:12px;background-color:#fff;border-radius:8px}.preview-wrapper[data-v-b237e2a8]{display:flex;justify-content:center;align-items:center;width:100%;height:100%;background-color:#fff;background-image:conic-gradient(rgba(0,0,0,.06) 0 25%,transparent 0 50%,rgba(0,0,0,.06) 0 75%,transparent 0);background-size:24px 24px}.preview-content[data-v-b237e2a8]{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:16px;width:100%;height:100%}.preview-content .tips[data-v-b237e2a8]{font-size:3rem;font-weight:700;color:#fff;mix-blend-mode:difference}.preview-content .color-panel[data-v-b237e2a8]{padding:12px;background-color:#fff;border-radius:8px}