.color-picker-container.svelte-1421ck1{display:flex;flex-direction:column;gap:1.5rem;position:relative}.color-display.svelte-1421ck1{height:100px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:background-color .3s;position:relative}.color-value.svelte-1421ck1{font-family:var(--font-mono);font-size:1.5rem;font-weight:700;background-color:#00000026;padding:.5rem 1rem;border-radius:4px;display:flex;align-items:center;gap:.5rem}.copy-button.svelte-1421ck1{background:none;border:none;cursor:pointer;opacity:.8;display:flex;align-items:center;justify-content:center;padding:.2rem;border-radius:4px;transition:opacity .2s}.copy-button.svelte-1421ck1:hover{opacity:1;background-color:#0000001a}.satval-container.svelte-1421ck1{position:relative;width:100%;height:200px;border-radius:8px;overflow:visible;cursor:crosshair}.satval-picker.svelte-1421ck1{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:8px;box-shadow:0 2px 10px #0000001a}.satval-marker.svelte-1421ck1{position:absolute;width:20px;height:20px;border:2px solid white;background-color:transparent;border-radius:50%;box-shadow:0 0 0 1px #0000004d,0 0 5px #00000080;transform:translate(-50%,-50%);pointer-events:none;z-index:100}.hue-slider-container.svelte-1421ck1{position:relative;margin-top:1.5rem;margin-bottom:.5rem;height:24px}.hue-slider.svelte-1421ck1{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:12px;overflow:hidden;cursor:pointer;box-shadow:0 2px 5px #0000001a}.hue-marker.svelte-1421ck1{position:absolute;top:50%;width:12px;height:32px;background-color:#fff;border:1px solid rgba(0,0,0,.3);border-radius:4px;box-shadow:0 0 5px #00000080;transform:translate(-50%,-50%);pointer-events:none;z-index:10}.contrast-toggle.svelte-1421ck1{margin-top:1rem;border-top:1px solid var(--color-border);padding-top:1rem}.contrast-toggle-button.svelte-1421ck1{width:100%;display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;background-color:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:6px;cursor:pointer;font-weight:500;transition:background-color .2s}.contrast-toggle-button.svelte-1421ck1:hover{background-color:var(--color-bg-primary)}.contrast-panel.svelte-1421ck1{margin-top:.75rem;background-color:var(--color-bg-secondary);padding:1rem;border-radius:6px;border:1px solid var(--color-border);animation:svelte-1421ck1-fade-in .3s ease-in-out}@keyframes svelte-1421ck1-fade-in{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.contrast-samples.svelte-1421ck1{display:flex;gap:1rem}.contrast-sample.svelte-1421ck1{flex:1;padding:.75rem;border-radius:4px;display:flex;justify-content:space-between;align-items:center;font-weight:500}.contrast-value.svelte-1421ck1{font-family:var(--font-mono);font-size:.9rem}.contrast-message.svelte-1421ck1{margin-top:.75rem;padding:.5rem .75rem;border-radius:4px;background-color:var(--color-bg-primary);text-align:center;font-size:.9rem}.contrast-message.warning.svelte-1421ck1{background-color:var(--color-warning);color:#fff}.color-picker-controls.svelte-1421ck1{display:flex;flex-direction:column;gap:1.25rem}.format-tabs.svelte-1421ck1{display:flex;border:1px solid var(--color-border);border-radius:4px;overflow:hidden}.format-tabs.svelte-1421ck1 button:where(.svelte-1421ck1){flex:1;background-color:var(--color-bg-secondary);border:none;padding:.6rem 0;cursor:pointer;font-family:var(--font-mono);transition:background-color .2s}.format-tabs.svelte-1421ck1 button.active:where(.svelte-1421ck1){background-color:var(--color-accent);color:#fff}.color-inputs.svelte-1421ck1{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}.input-group.svelte-1421ck1{display:flex;flex-direction:column;gap:.25rem}.input-group.full-width.svelte-1421ck1{grid-column:1 / -1;margin-top:.5rem}.input-with-copy.svelte-1421ck1{display:flex;align-items:center}.input-with-copy.svelte-1421ck1 input:where(.svelte-1421ck1){flex:1;border-top-right-radius:0;border-bottom-right-radius:0}.copy-input-button.svelte-1421ck1{height:100%;padding:0 .6rem;border:1px solid var(--color-border);border-left:none;background-color:var(--color-bg-secondary);cursor:pointer;border-top-right-radius:4px;border-bottom-right-radius:4px;display:flex;align-items:center;justify-content:center;transition:background-color .2s}.copy-input-button.svelte-1421ck1:hover{background-color:var(--color-accent);color:#fff}.component-input.svelte-1421ck1{text-align:center}.color-shades.svelte-1421ck1,.recent-colors.svelte-1421ck1{margin-top:1.5rem}.color-shades.svelte-1421ck1 h3:where(.svelte-1421ck1),.recent-colors.svelte-1421ck1 h3:where(.svelte-1421ck1){margin-bottom:.75rem;font-size:1rem;color:var(--color-text-secondary)}.shade-palette.svelte-1421ck1,.color-palette.svelte-1421ck1{display:flex;flex-wrap:wrap;gap:.5rem}.shade-swatch.svelte-1421ck1,.color-swatch.svelte-1421ck1{width:40px;height:40px;border-radius:4px;border:1px solid var(--color-border);cursor:pointer;transition:transform .2s}.shade-swatch.svelte-1421ck1:hover,.color-swatch.svelte-1421ck1:hover{transform:scale(1.1)}.copied-notification.svelte-1421ck1{position:fixed;bottom:20px;right:20px;background-color:var(--color-success);color:#fff;padding:.75rem 1.5rem;border-radius:4px;animation:svelte-1421ck1-fade-in-out 2s forwards;z-index:10}@keyframes svelte-1421ck1-fade-in-out{0%{opacity:0;transform:translateY(10px)}20%{opacity:1;transform:translateY(0)}80%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-10px)}}.contrast-sample.svelte-1421ck1{display:flex;justify-content:space-between;align-items:center;font-weight:500;padding:.75rem;border-radius:4px}.contrast-sample.svelte-1421ck1 span:where(.svelte-1421ck1){font-weight:600}.contrast-sample[style*="background-color: white"].svelte-1421ck1{color:var(--color-text-primary)!important}.contrast-sample[style*="background-color: black"].svelte-1421ck1{color:#fff!important}.contrast-value.svelte-1421ck1{font-family:var(--font-mono);font-size:.9rem;background-color:#8883;padding:.1rem .3rem;border-radius:3px}@media (max-width: 768px){.color-inputs.svelte-1421ck1{grid-template-columns:1fr;gap:.75rem}.color-value.svelte-1421ck1{font-size:1.2rem;padding:.4rem .8rem}.format-tabs.svelte-1421ck1 button:where(.svelte-1421ck1){padding:.5rem 0;font-size:.9rem}.color-display.svelte-1421ck1{height:80px}.contrast-samples.svelte-1421ck1{flex-direction:column;gap:.5rem}.shade-palette.svelte-1421ck1,.color-palette.svelte-1421ck1{justify-content:center}.contrast-toggle-button.svelte-1421ck1 svg:where(.svelte-1421ck1){width:16px;height:16px}}@media (max-width: 480px){.color-value.svelte-1421ck1{font-size:1rem}.copy-button.svelte-1421ck1 svg:where(.svelte-1421ck1){width:14px;height:14px}.shade-swatch.svelte-1421ck1,.color-swatch.svelte-1421ck1{width:35px;height:35px}.contrast-message.svelte-1421ck1{font-size:.8rem}}.tool-page.svelte-1x1xuqt{max-width:800px;margin:0 auto}.tool-header.svelte-1x1xuqt{margin-bottom:2rem}.tool-header.svelte-1x1xuqt h1:where(.svelte-1x1xuqt){margin-bottom:.5rem}.tool-header.svelte-1x1xuqt p:where(.svelte-1x1xuqt){color:var(--color-text-secondary)}.tool-info.svelte-1x1xuqt{border-top:1px solid var(--color-border);padding-top:2rem}.tool-info.svelte-1x1xuqt ul:where(.svelte-1x1xuqt){margin:1rem 0;padding-left:1.5rem}.tool-info.svelte-1x1xuqt li:where(.svelte-1x1xuqt){margin-bottom:.5rem}