.tools-main{padding-block:28px 76px}.tools-hero{padding:48px 0 42px;max-width:900px}.tools-hero h1{font-size:clamp(2.3rem,4.4vw,4.4rem);font-weight:580;letter-spacing:-.055em;line-height:1.08;margin:18px 0}.tools-hero>p{font-size:1.125rem;color:var(--muted);max-width:65ch}.tool-promises{display:flex;flex-wrap:wrap;gap:10px 28px;list-style:none;padding:0;margin:25px 0 0;font-size:.875rem}.tool-promises li:before{content:'✓';margin-right:8px;color:#466228}.tools-directory{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}.tool-directory-item{display:flex;flex-direction:column;align-items:start;border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:30px;min-height:350px;background:#fff;transition:background .15s}.tool-directory-item:hover{background:#eef3e6}.tool-number{color:var(--muted);font-size:.875rem}.tool-mark{font-size:3.5rem;font-family:Georgia,serif;line-height:1;margin:28px 0;color:var(--green)}.tool-directory-item h2{font-size:1.45rem;letter-spacing:-.04em}.tool-directory-item p{margin:12px 0 26px;color:var(--muted)}.tool-open{margin-top:auto;font-weight:600;font-size:.9375rem;display:flex;justify-content:space-between;width:100%}.tool-workbench{display:grid;grid-template-columns:300px minmax(0,1fr);border:1px solid var(--line);background:#fff;border-radius:10px;overflow:hidden}.tool-controls{padding:26px;border-right:1px solid var(--line);min-width:0;display:flex;flex-direction:column;align-self:start;gap:18px}.tool-controls h2{font-size:1.25rem;margin-bottom:4px}.tool-controls label{display:block;font-size:.9375rem;font-weight:550;min-width:0}.tool-controls input:not([type=color]):not([type=range]),.tool-controls select{display:block;width:100%;border:1px solid #c8cfc2;border-radius:5px;background:#fff;padding:10px;min-height:46px;color:var(--ink);font-size:1rem;margin-top:7px}.tool-controls input[type=file]{font-size:.875rem!important;padding:10px 6px!important;overflow:hidden}.tool-controls input[type=color]{width:100%;height:44px;border:1px solid var(--line);background:#fff;margin-top:6px;border-radius:4px;cursor:pointer}.tool-controls input[type=range]{display:block;width:100%;accent-color:#536d2e;margin-top:12px}.tool-controls output{font-size:.875rem;color:var(--muted)}.tool-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.tool-controls .button{white-space:normal;justify-content:center;font-size:.9375rem;min-height:48px}.tool-secondary{padding:10px 14px;border:1px solid #b9c3af;border-radius:5px;background:#fff;font-size:.9375rem;font-weight:550;min-height:44px}.tool-secondary:hover{background:#f1f5eb}.tool-help{font-size:.875rem;line-height:1.65;color:var(--muted);margin:0}.tool-status{font-size:.9375rem;overflow-wrap:anywhere}.tool-status:empty{display:none}.tool-preview{min-width:0;background:#fafbf8}.tool-preview-bar{padding:16px 22px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;font-size:.875rem;background:#fff}.tool-preview-bar a{text-decoration:underline;text-underline-offset:3px;min-height:44px;display:inline-flex;align-items:center}.tool-frame-scroll{width:100%;overflow:auto;background:#e5e9df;padding:14px;text-align:center}.tool-frame-scroll iframe{display:block;width:100%;min-width:320px;height:740px;border:0;background:#fff;margin:auto}.tool-preview>.tool-help{padding:16px 22px}.tool-image-results{padding:24px;display:grid;gap:24px}.tool-empty{min-height:410px;display:flex;flex-direction:column;justify-content:center;align-items:start;max-width:440px;padding:20px}.tool-empty>span{font-size:4rem;line-height:1;color:#718854;margin-bottom:30px}.tool-empty h2{font-size:1.75rem;letter-spacing:-.04em}.tool-empty p{margin-top:16px;color:var(--muted)}.image-result{padding-bottom:24px;border-bottom:1px solid var(--line);min-width:0}.image-result img{max-height:300px;width:100%;object-fit:contain;background:repeating-conic-gradient(#e1e4df 0% 25%,#fff 0% 50%) 50%/16px 16px}.image-result h3{font-size:1rem;margin:14px 0 7px;overflow-wrap:anywhere}.image-result p{font-size:.875rem;color:var(--muted);margin-bottom:12px}.image-result a{display:inline-flex;align-items:center;min-height:44px;text-decoration:underline}.contrast-specimen{padding:48px 36px;min-height:350px}.contrast-specimen h2{font-size:clamp(2rem,3.7vw,3.5rem);letter-spacing:-.04em;margin:25px 0 18px;line-height:1.1}.contrast-specimen p{max-width:50ch}.contrast-specimen a{color:inherit;display:inline-block;margin-top:20px;text-decoration:underline}.contrast-report{padding:26px 36px;background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.contrast-report>strong{font-size:3rem;letter-spacing:-.05em;line-height:1.2}.contrast-report>p{font-size:.875rem;color:var(--muted)}.contrast-report ul{display:grid;grid-template-columns:1fr 1fr;list-style:none;padding:0;margin:22px 0 0;gap:12px;font-size:.9375rem}.tool-code{padding:24px 30px;background:#fff}.tool-code label{display:block;font-size:.875rem;font-weight:600;margin-bottom:12px}.tool-code textarea{display:block;width:100%;resize:vertical;min-height:120px;padding:16px;background:#f3f5ef;color:#273323;border:1px solid var(--line);border-radius:5px;font: .875rem/1.65 ui-monospace,monospace;white-space:pre;overflow:auto}.tool-code button{margin-top:14px}.type-specimen{padding:40px 32px;min-height:360px;overflow-wrap:anywhere}.type-specimen h2{letter-spacing:-.04em;margin:24px 0}.type-specimen h3{margin-bottom:18px}.type-specimen p{max-width:60ch}.favicon-specimen{padding:35px;display:flex;flex-direction:column;align-items:center;gap:36px}.favicon-tab{display:flex;align-items:center;gap:12px;padding:14px 18px;border:1px solid var(--line);border-radius:9px 9px 0 0;background:white;width:100%;max-width:350px;min-width:0}.favicon-tab>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.favicon-tab>span:last-child{margin-left:auto}.favicon-tab canvas{width:16px;height:16px;flex:none}.favicon-specimen>canvas{width:200px;height:200px;max-width:100%;border-radius:12px;box-shadow:0 8px 30px #27332318}.favicon-sizes{display:flex;gap:40px;align-items:end}.favicon-sizes figure{margin:0;text-align:center}.favicon-sizes figcaption{margin-top:10px;font-size:.875rem;color:var(--muted)}.tool-explainer{padding-block:52px;display:grid;grid-template-columns:1fr 1fr;gap:50px;border-bottom:1px solid var(--line);line-height:1.85}.tool-explainer h2{font-size:1.5rem;letter-spacing:-.035em;margin-bottom:20px}.tool-explainer p{max-width:65ch;margin-block:15px}.tool-explainer ol{padding-left:22px;margin:0}.tool-explainer li{padding-left:6px;margin-bottom:14px}.tool-explainer a{text-decoration:underline;text-underline-offset:4px}.tool-more{padding-top:42px}.tool-more h2{font-size:1.75rem;letter-spacing:-.04em;margin-bottom:26px}.tool-more>div{display:grid;grid-template-columns:1fr 1fr;gap:0 35px}.tool-more a{padding:18px 0;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:18px}.tool-notice{padding:20px;border:1px solid var(--line);margin-bottom:20px}.template-tools-note{margin-top:26px;padding:20px;background:#f0f4e9;border:1px solid var(--line);font-size:.9375rem}.template-tools-note a{text-decoration:underline;display:inline-block;min-height:44px;padding-block:8px}.template-tools-note h2{font-size:1.1rem;margin-bottom:10px}
@media(max-width:1000px){.tool-workbench{grid-template-columns:260px minmax(0,1fr)}.tools-directory{grid-template-columns:1fr 1fr}.header-inner{gap:22px}.main-nav{gap:18px}}@media(max-width:720px){.tool-workbench{grid-template-columns:1fr}.tool-controls{border-right:0;border-bottom:1px solid var(--line);padding:22px}.tools-hero{padding-top:32px}.tools-hero h1{font-size:2.4rem}.tool-frame-scroll iframe{height:600px}.tool-explainer{grid-template-columns:1fr;gap:22px}.tool-more>div{grid-template-columns:1fr}.contrast-specimen,.contrast-report,.tool-code,.type-specimen{padding:26px 22px}.tool-promises{gap:8px 18px}.main-nav{gap:14px}}@media(max-width:480px){.tools-directory{grid-template-columns:1fr}.tool-directory-item{min-height:280px;padding:26px}.tool-mark{margin-block:22px}.contrast-report ul{grid-template-columns:1fr}.tool-frame-scroll{padding:0}.tool-frame-scroll iframe{min-width:280px}.favicon-specimen{padding:24px 18px}.tools-hero h1{font-size:2.1rem}.tool-more a{font-size:.9375rem}}

.tool-controls fieldset{border:0;padding:0;margin:0;min-width:0;display:flex;flex-direction:column;gap:18px}

/* Shared progressive advanced controls. */
.tool-advanced{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:4px 0}.tool-advanced>summary{font-size:1rem;font-weight:650;cursor:pointer;min-height:52px;padding:12px 0;line-height:1.6}.tool-advanced>summary>span{display:block;font-weight:400;font-size:.875rem;color:var(--muted);margin-left:16px}.advanced-fields{display:flex;flex-direction:column;gap:25px;padding-block:20px}.tool-controls fieldset.advanced-group{border-top:1px solid var(--line);padding-top:18px;gap:16px}.advanced-group legend{font-weight:600;font-size:.9375rem;padding-right:10px}.tool-controls .image-check{display:flex;align-items:flex-start;gap:10px;font-size:.9375rem;font-weight:400}.tool-controls .image-check input[type=checkbox]{width:20px;height:20px;min-height:20px;flex:none;padding:0;margin:3px 0 0;accent-color:#536d2e}

.favicon-specimen>[data-icon-maskable]{width:128px;height:128px;border-radius:0}.favicon-specimen>[data-maskable-note]{text-align:center;max-width:35ch}

.contrast-specimen p{font-size:18px}