.tool-intro{margin:28px 0 22px}.tool-intro h1{margin:6px 0 12px}.tool-intro>p:last-child{color:#526174;max-width:760px}.tool-workspace{background:#fff;border:1px solid #dbe3ee;border-radius:14px;min-width:0;margin-bottom:38px;padding:28px}.settings-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;display:grid}.settings-grid label{color:#263649;flex-direction:column;gap:8px;font-size:15px;font-weight:600;display:flex}.settings-grid input:not([type=checkbox]),.settings-grid select,.settings-grid textarea,#output{box-sizing:border-box;color:#172b44;width:100%;min-width:0;min-height:44px;font:inherit;background:#fff;border:1px solid #b9c6d7;border-radius:7px;padding:10px 12px;font-size:16px}.settings-grid input[type=color]{max-width:100%;padding:5px}.settings-grid textarea,#output{resize:vertical}.settings-grid .check{flex-direction:row;align-items:center;min-height:44px;font-weight:400}.check input{accent-color:#2563eb;flex:0 0 19px;width:19px;height:19px}.wide{grid-column:1/-1}.settings-grid fieldset{border:1px solid #dbe3ee;border-radius:8px;min-width:0;margin:0;padding:12px 16px}.settings-grid legend{padding:0 5px;font-size:15px}.check-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 16px;display:grid}.form-actions,.result-actions{flex-wrap:wrap;gap:12px;margin-top:24px;display:flex}.tool-workspace button{color:#fff;min-height:44px;font:inherit;cursor:pointer;background:#2563eb;border:1px solid #2563eb;border-radius:7px;padding:10px 22px;font-size:15px;font-weight:600}.tool-workspace button.secondary{color:#1f55ac;background:#fff;border-color:#c5d3e6}.tool-workspace button:hover{filter:brightness(.96)}.tool-workspace button:disabled{opacity:.55;cursor:wait}.tool-workspace :focus-visible{outline-offset:3px;outline:3px solid #90b8ff}.tool-status{color:#526174;overflow-wrap:anywhere;min-height:24px;margin:18px 0 0;font-size:14px}.tool-status.error{color:#b42318}.result-panel{border-top:1px solid #e1e7ef;min-width:0;margin-top:22px;padding-top:20px}.result-panel h2{margin:0 0 15px;font-size:19px}#output{overflow-wrap:anywhere;white-space:pre-wrap;word-break:break-all;min-height:160px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace}.field-note{color:#526174;overflow-wrap:anywhere;margin:0;font-size:14px;font-weight:400;line-height:1.7}.image-preview{background:#f6f8fb;border-radius:8px;justify-content:center;min-width:0;padding:20px;display:flex;overflow:hidden}.image-preview img,.image-preview canvas,.image-preview svg{object-fit:contain;max-width:100%;height:auto;display:block}.color-results{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;display:grid}.color-item{border:1px solid #dbe3ee;border-radius:8px;min-width:0;overflow:hidden}.color-swatch{height:90px}.color-values{gap:8px;padding:12px;display:grid}.color-values button{text-align:left;overflow-wrap:anywhere;padding:8px 10px;font-family:ui-monospace,Consolas,monospace;font-size:14px}.related-tools{margin:36px 0}.sr-only{clip:rect(0,0,0,0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}[hidden]{display:none!important}@media (width<=600px){.tool-workspace{padding:18px}.settings-grid{grid-template-columns:1fr;gap:16px}.check-grid,.color-results{grid-template-columns:1fr}.form-actions button,.result-actions button{flex:auto}.tool-intro{margin-top:22px}.image-preview{padding:12px}}
