.coloring-heading{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:28px}.coloring-heading h1{font-size:clamp(24px,2.4vw,32px)}.coloring-heading p{margin-top:8px;font-size:15px;color:#717784;line-height:1.7}.coloring-privacy{font-size:12px;color:#626a78;background:#e8ecf1;padding:10px 14px;border-radius:6px;white-space:nowrap}.coloring-field{display:block;font-size:14px;font-weight:600;margin:22px 0 10px}.coloring-workspace select{font:inherit;display:block;width:100%;min-width:0;min-height:44px;padding:10px 12px;border:1px solid #cbd0d9;background:white;border-radius:6px;color:#242831;font-size:14px}.coloring-workspace select:focus-visible{outline:3px solid #436cff;outline-offset:3px}.coloring-range-label{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:14px;font-weight:600;margin:24px 0 12px}.coloring-range-label output{font-variant-numeric:tabular-nums;color:#626a78;font-size:13px;font-weight:400;min-width:40px;text-align:right}.coloring-workspace input[type=range]{display:block;width:100%;min-width:0;accent-color:#242831;height:24px;margin:0;cursor:pointer}.coloring-range-ends{display:flex;justify-content:space-between;font-size:11px;color:#7c828d;margin-top:4px}.coloring-setting-actions{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:16px;font-size:11px;color:#7c828d}.coloring-setting-actions button{font-size:12px}.coloring-workspace .accent{margin-top:10px}.coloring-cancel{width:100%;margin-top:8px}.coloring-file-info{display:flex;align-items:center;gap:12px;background:#f4f6f8;border-radius:6px;margin-top:14px;padding:10px 12px;min-width:0}.coloring-file-info>div{flex:1;min-width:0}.coloring-file-info strong{font-size:12px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.coloring-file-info span{font-size:12px;color:#747b87;margin-top:5px;display:block}.coloring-results{min-height:640px}.coloring-empty-icon{color:#a9b0bb;margin-bottom:24px}.coloring-results .empty h3{font-size:16px;color:#626a78}.coloring-comparison{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;padding:24px}.coloring-comparison figure{margin:0;min-width:0;border:1px solid #e1e5eb;border-radius:8px;overflow:hidden}.coloring-comparison figcaption{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;padding:12px 14px;border-bottom:1px solid #e1e5eb;font-size:12px;background:#fafbfc}.coloring-comparison figcaption strong{font-size:13px}.coloring-comparison figcaption span{font-size:11px;color:#7c828d;font-variant-numeric:tabular-nums}.coloring-picture{display:flex;align-items:center;justify-content:center;min-height:380px;height:clamp(300px,40vw,520px);padding:16px;background:white}.coloring-source-picture{background:repeating-conic-gradient(#f1f3f6 0% 25%,white 0% 50%) 0/16px 16px}.coloring-picture img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}.coloring-picture p{font-size:13px;color:#89909c;line-height:1.7;text-align:center}.coloring-output-note{font-size:12px;color:#7c828d;line-height:1.8;margin:0 24px 24px;overflow-wrap:anywhere}.coloring-progress-wrap{padding:12px 24px 0}.coloring-progress-wrap progress{display:block;width:100%;height:6px;accent-color:#ffc844}.coloring-results[aria-busy=true] #coloring-output{opacity:.55}.coloring-results[aria-busy=true] .coloring-picture{transition:opacity .15s}@media(max-width:1100px){.coloring-comparison{gap:12px;padding:20px}.coloring-picture{min-height:260px;height:340px;padding:12px}.coloring-comparison figcaption{padding:10px}.coloring-privacy{white-space:normal;max-width:230px}}@media(max-width:800px){.coloring-heading{align-items:flex-start;flex-direction:column;gap:12px;margin-bottom:22px}.coloring-privacy{max-width:none}.coloring-picture{height:clamp(240px,42vw,420px)}.coloring-results{min-height:420px}.coloring-output-note{margin:0 20px 20px}}@media(max-width:480px){.coloring-comparison{grid-template-columns:minmax(0,1fr);padding:16px;gap:16px}.coloring-picture{height:340px;min-height:220px}.coloring-output-note{margin:0 16px 16px}.coloring-heading h1{font-size:24px}.coloring-setting-actions{flex-wrap:wrap}.coloring-privacy{font-size:11px}}

.coloring-color-settings{border:0;padding:0;margin:24px 0 0;min-width:0}.coloring-color-settings legend{font-size:14px;font-weight:600;padding:0}.coloring-color-presets{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0}.coloring-color-presets button{display:flex;align-items:center;justify-content:center;gap:6px;min-height:44px;flex:1 1 auto;padding:8px;border:1px solid #cbd0d9;border-radius:6px;background:#fff;color:#242831;font:inherit;font-size:12px;cursor:pointer}.coloring-color-presets button[aria-pressed=true]{border-color:#242831;background:#f0f2f5;box-shadow:inset 0 0 0 1px #242831}.coloring-color-presets button:focus-visible,.coloring-custom-color input:focus-visible{outline:3px solid #436cff;outline-offset:3px}.coloring-color-swatch{width:14px;height:14px;flex:none;border-radius:50%;border:1px solid #cbd0d9}.coloring-swatch-black{background:#000}.coloring-swatch-gray{background:#808080}.coloring-swatch-light{background:#b8b8b8}.coloring-custom-color{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:12px;color:#626a78}.coloring-custom-color input{width:48px;height:44px;padding:3px;background:#fff;border:1px solid #cbd0d9;border-radius:6px;cursor:pointer}.coloring-custom-color output{font-variant-numeric:tabular-nums}.coloring-line-preview{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;font-size:12px;color:#626a78}.coloring-line-preview svg{flex:none;border:1px solid #e1e5eb;border-radius:6px;background:white}
.coloring-style-warning{margin:12px 0 0;padding:12px;border-left:3px solid #d5a443;border-radius:4px;background:#fff8e8;color:#735018;font-size:12px;line-height:1.8}