.tool-card.svelte-1s3bzst{background:#fff;border-radius:.75rem;padding:1.5rem;box-shadow:0 1px 3px #0000001a;margin-bottom:2rem}.input-label.svelte-1s3bzst{display:block;font-weight:600;color:var(--gray-700);margin-bottom:.75rem}.color-input-container.svelte-1s3bzst{display:flex;gap:1rem;align-items:center;margin-bottom:2rem}.color-input.svelte-1s3bzst{width:60px;height:60px;border:none;border-radius:.5rem;cursor:pointer}.hex-input.svelte-1s3bzst{flex:1;padding:1rem;border:2px solid var(--gray-200);border-radius:.5rem;font-family:Courier New,monospace;font-size:1.125rem;text-transform:uppercase}.hex-input.svelte-1s3bzst:focus{outline:none;border-color:var(--primary)}.color-preview.svelte-1s3bzst{display:flex;align-items:center;gap:1.5rem;padding:1.5rem;background-color:var(--gray-50);border-radius:.5rem}.color-swatch.svelte-1s3bzst{width:80px;height:80px;border-radius:.5rem;box-shadow:0 4px 6px -1px #0000001a}.color-info.svelte-1s3bzst h3:where(.svelte-1s3bzst){margin:0 0 .5rem;color:var(--gray-800)}.color-info.svelte-1s3bzst p:where(.svelte-1s3bzst){margin:0;color:var(--gray-600)}.color-codes.svelte-1s3bzst,.color-palette.svelte-1s3bzst{background:#fff;border-radius:.75rem;padding:1.5rem;box-shadow:0 1px 3px #0000001a;margin-bottom:2rem}.color-codes.svelte-1s3bzst h3:where(.svelte-1s3bzst),.color-palette.svelte-1s3bzst h3:where(.svelte-1s3bzst){margin:0 0 1.5rem;color:var(--gray-800)}.code-group.svelte-1s3bzst{display:grid;gap:1rem}.code-item.svelte-1s3bzst{display:flex;flex-direction:column;gap:.5rem}.code-item.svelte-1s3bzst label:where(.svelte-1s3bzst){font-weight:600;color:var(--gray-700);font-size:.875rem}.code-display.svelte-1s3bzst{display:flex;gap:.5rem}.code-input.svelte-1s3bzst{flex:1;padding:.75rem;border:2px solid var(--gray-200);border-radius:.375rem;font-family:Courier New,monospace;background-color:var(--gray-50)}.shades-grid.svelte-1s3bzst{display:grid;grid-template-columns:repeat(auto-fit,minmax(80px,1fr));gap:1rem}.shade-item.svelte-1s3bzst{text-align:center}.shade-color.svelte-1s3bzst{width:100%;height:60px;border-radius:.375rem;margin-bottom:.5rem;box-shadow:0 1px 3px #0000001a}.shade-label.svelte-1s3bzst{font-size:.875rem;font-weight:500;color:var(--gray-600)}@media(max-width:768px){.color-input-container.svelte-1s3bzst{flex-direction:column;align-items:flex-start}.color-preview.svelte-1s3bzst{flex-direction:column;text-align:center}.code-display.svelte-1s3bzst{flex-direction:column}}