.tool-intro{max-width:720px;margin:32px 0}.image-tools{display:grid;grid-template-columns:minmax(240px,330px) minmax(0,1fr);gap:24px;padding:24px;border:1px solid var(--line);border-radius:22px;background:var(--white);margin-block:24px}.tool-controls{display:grid;gap:16px;align-content:start}.tool-controls label{display:grid;gap:6px;font-size:14px}.tool-controls input:not([type=checkbox]),.tool-controls select{width:100%;min-height:44px;padding:10px;border:1px solid var(--line);border-radius:10px;background:var(--paper);color:var(--ink);font:inherit}.tool-controls input[type=range]{padding:0}.tool-controls [data-dimensions],.tool-controls [data-encoding]{display:grid;gap:14px}.tool-controls [hidden]{display:none!important}.tool-controls .check-label{display:flex;align-items:center;gap:8px}.tool-controls input[type=checkbox]{min-width:20px;min-height:20px}.tool-preview-area{min-height:250px;border:1px dashed var(--line);border-radius:16px;padding:18px;display:grid;place-items:center;align-content:start;gap:16px;overflow:hidden;background:repeating-conic-gradient(#ddd 0% 25%,#fff 0% 50%) 0/20px 20px}.tool-preview-area canvas{max-width:100%;height:auto;max-height:550px;object-fit:contain}.tool-result{display:grid;gap:12px;text-align:center;padding:14px;background:var(--white);border-radius:12px;width:100%}.tool-result p{margin:0;font-size:14px}.tool-palette{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}.palette-swatch{display:grid;gap:8px;padding:8px;background:var(--white);border:1px solid var(--line);border-radius:12px;color:var(--ink);cursor:pointer;min-width:92px;min-height:100px}.palette-swatch span{display:block;height:56px;border-radius:6px}.palette-swatch code{direction:ltr}.tool-notes{font-size:14px;line-height:1.8;color:var(--muted)}.ad-reserved{min-height:280px;margin-block:48px}.ad-placement[hidden]{display:none!important}.pro-note{font-size:12px;line-height:1.7;color:var(--muted)}:focus-visible{outline:3px solid #6b841c;outline-offset:4px}@media(max-width:700px){.image-tools{grid-template-columns:1fr;padding:16px;gap:18px}.tool-preview-area{min-height:180px}.tool-intro{margin-block:20px}}@media(prefers-color-scheme:dark){.tool-preview-area{background:repeating-conic-gradient(#383838 0% 25%,#292929 0% 50%) 0/20px 20px}}