.lead{font-size:20px;margin-bottom:var(--block)}
.tool-list{margin:0 0 var(--block);padding-left:20px;color:var(--muted)}
.tool-list li{margin:4px 0}
.tool-list a{color:var(--fg)}
.status{color:var(--muted);font-size:15px;padding-top:var(--block);border-top:1px solid var(--line)}
.file-input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;overflow:hidden}
.dropzone{width:100%;min-height:224px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--block);padding:var(--block);background:var(--bg);border:1px dashed var(--muted);border-radius:8px;text-align:center}
.dropzone svg{width:32px;height:32px;fill:none;stroke:currentColor;stroke-width:1.5}
.dropzone strong{max-width:240px;font-size:20px;font-weight:500}
.dropzone.over{border-style:solid;border-color:var(--fg)}
.dropzone.compact{min-height:112px;gap:var(--item)}
.dropzone.compact strong{font-size:16px;max-width:none}
.dropzone.compact svg{width:24px;height:24px}
.dropzone[aria-invalid=true]{border:2px solid var(--error);outline:2px solid var(--error);outline-offset:4px}
.error{display:flex;gap:var(--item);align-items:center;color:var(--error);font-size:13px}
.error:not(:empty){margin-top:var(--block)}
.error:not(:empty)::before{content:"!";font-weight:600;border:1px solid currentColor;border-radius:50%;width:16px;height:16px;line-height:14px;text-align:center;flex-shrink:0}
.conditions{display:flex;gap:var(--block);align-items:center;margin:var(--block) 0;border:0;padding:0;min-width:0;font-size:13px}
.mode{display:flex;align-items:center;gap:4px;min-width:0}
.quality{flex:1}.target{flex:0 0 auto}
.mode input[type=radio]{margin:0;width:16px;height:16px;accent-color:var(--fg)}
.mode label{white-space:nowrap}
.mode input[type=range]{min-width:32px;width:100%;height:24px;margin:0;accent-color:var(--fg)}
.mode input[type=number]{width:64px;height:32px;padding:4px;border:1px solid var(--line);border-radius:4px;background:var(--bg);appearance:textfield;-moz-appearance:textfield}
.mode input[type=number][aria-invalid=true]{border-color:var(--error)}
.mode:not(:has(input[type=radio]:checked)){opacity:.4}
.mode:focus-within{opacity:1}
output{min-width:24px;font-variant-numeric:tabular-nums}
.actions{display:flex;justify-content:flex-end;margin-bottom:var(--block)}
.results{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.result{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:var(--item);align-items:center;padding:var(--block) 0;border-bottom:1px solid var(--line)}
.thumb{width:40px;height:40px;border:1px solid var(--line);border-radius:4px;object-fit:cover;background:var(--line)}
.info{min-width:0}
.name{font-size:13px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.size{font-size:13px;white-space:nowrap;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.note{font-size:13px;color:var(--muted)}
.handoff{margin-top:var(--block);font-size:13px;color:var(--muted)}
.docs{margin-top:var(--section);padding-top:var(--section);border-top:1px solid var(--line)}
.docs section+section{margin-top:var(--section)}
.docs ul{list-style:none;padding:0;margin:0}
.docs li+li{margin-top:var(--item)}
.docs p,.docs li,.docs dd{color:var(--muted)}
dl{margin:0}dt{font-weight:600}dt:not(:first-child){margin-top:var(--block)}dd{margin:0}
.legal p,.legal ul{margin:0 0 var(--block);color:var(--fg);overflow-wrap:anywhere}
.legal .policy-heading{margin:var(--section) 0 var(--item)}
.legal .policy-list{padding-left:20px}
.legal .policy-list li+li{margin-top:var(--item)}
.policy-operator,.policy-ai,.policy-revised{color:var(--muted);font-size:13px}
.drop-meta{font-size:13px;color:var(--muted);font-weight:400}
.drop-meta span{display:block}
.conditions{align-items:flex-start}
.target{flex-wrap:wrap;max-width:224px}
.presets{display:flex;gap:4px;flex-basis:100%}
.preset{flex:1;min-height:32px;padding:4px;font-weight:400}
.secondary[aria-pressed=true]{border-width:2px;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.thumb-button{padding:0;border:0;background:none;width:40px;height:40px;cursor:zoom-in}
.thumb-button .thumb{display:block}
.overlay{width:min(40rem,calc(100vw - 32px));max-height:calc(100vh - 32px);background:var(--bg);color:var(--fg);border:1px solid var(--fg);border-radius:8px;padding:var(--block)}
.overlay::backdrop{background:rgb(0 0 0 / .4)}
.overlay-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--item);margin-bottom:var(--block)}
.toggle{display:flex;gap:var(--item)}
.text-button{background:none;color:var(--fg);border:0;min-width:40px;min-height:40px;padding:0;font-size:20px}
.preview-image{display:block;width:100%;max-height:calc(100vh - 180px);object-fit:contain;background:var(--line);border-radius:4px}
.preview-size{margin-top:var(--block);font-size:13px;font-variant-numeric:tabular-nums}
.size{white-space:normal}
.tools{font-size:13px;margin-inline:var(--item) auto}
.tools a{display:inline-block;padding:12px 4px}
.tools a[aria-current=page]{font-weight:600}
.language{white-space:nowrap}
.language a{display:inline-block;padding:12px 4px}
.language a[aria-current=page]{font-weight:600;color:var(--fg)}
.conditions.resize{flex-direction:column;align-items:stretch;gap:var(--item)}
.dimensions{display:flex;align-items:center;flex-wrap:wrap;gap:var(--item)}
.dimensions input[type=number]{width:80px;height:32px;padding:4px;border:1px solid var(--line);border-radius:4px;background:var(--bg);appearance:textfield;-moz-appearance:textfield}
.dimensions input[aria-invalid=true]{border-color:var(--error)}
.dimension-label{flex-basis:100%;font-weight:600}
.lock{display:flex;align-items:center;gap:var(--item);min-height:32px;margin-top:var(--item)}
.lock input{margin:0;width:16px;height:16px;accent-color:var(--fg)}
#px-panel .presets{margin-top:var(--item)}
.scope,.hint{font-size:13px;color:var(--muted)}
.hint{margin-bottom:var(--block)}
.nowrap{white-space:nowrap}
.photo{position:relative;width:max-content;max-width:100%;margin:var(--block) auto 0;touch-action:none}
.photo canvas#photo{display:block;max-width:100%;touch-action:none;cursor:crosshair;background:var(--line)}
.photo .cross{position:absolute;width:20px;height:20px;transform:translate(-50%,-50%);pointer-events:none}
.cross:before,.cross:after{content:"";position:absolute;background:var(--fg);box-shadow:0 0 0 1px var(--bg)}
.cross:before{width:20px;height:2px;left:0;top:9px}
.cross:after{width:2px;height:20px;left:9px;top:0}
.loupe{position:absolute;width:88px;height:88px;transform:translate(-50%,-50%);border:2px solid var(--fg);border-radius:50%;box-shadow:0 0 0 2px var(--bg);pointer-events:none;image-rendering:pixelated}
.picked,.palette{margin-top:var(--block)}
.picked-value{display:grid;grid-template-columns:40px minmax(0,1fr);gap:var(--item);align-items:start}
.picked-value.preview{opacity:.4}
.swatch{display:block;background:var(--sample);border:1px solid var(--line);border-radius:4px;width:40px;height:40px}
.value-rows{display:grid;gap:var(--item)}
.value-row{display:flex;align-items:center;justify-content:space-between;width:100%;text-align:left;font-variant-numeric:tabular-nums}
.value-row .v,.palette-grid .v{user-select:all;-webkit-user-select:all}
.palette-label{font-size:13px;color:var(--muted);margin-bottom:var(--item)}
.palette-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--block) var(--item)}
.palette-grid .text-button{display:flex;align-items:center;gap:4px;font-size:13px;font-variant-numeric:tabular-nums;text-align:left}
.palette-grid .swatch{width:24px;height:32px;flex-shrink:0}
.tool.color .hint:empty{display:none}
.tool.color #color-status{margin-top:var(--block)}
.header-inner{flex-wrap:wrap}
@media(max-width:430px){.tools{order:3;flex-basis:100%;margin-inline:0}}
.crop-stage{padding:24px;margin-top:var(--block)}
.tool.crop .photo{margin:0 auto;outline:none;touch-action:none}
.tool.crop .photo:focus-visible{outline:2px solid var(--fg);outline-offset:4px}
.tool.crop canvas#photo{display:block;max-width:100%;background:var(--line)}
.shade{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.shade span,.crop-box{position:absolute}
.shade span{box-shadow:0 0 0 9999px rgb(0 0 0 / .55)}
.crop-box{border:1px solid #fff;outline:1px solid #000;cursor:move}
.handle{position:absolute;width:44px;height:44px;transform:translate(-50%,-50%);display:grid;place-items:center;touch-action:none}
.handle:after{content:"";width:8px;height:8px;background:#fff;border:1px solid #000}
.handle.nw{left:0;top:0;cursor:nwse-resize}.handle.ne{left:100%;top:0;cursor:nesw-resize}.handle.sw{left:0;top:100%;cursor:nesw-resize}.handle.se{left:100%;top:100%;cursor:nwse-resize}
.handle.n{left:50%;top:0;cursor:ns-resize}.handle.s{left:50%;top:100%;cursor:ns-resize}.handle.w{left:0;top:50%;cursor:ew-resize}.handle.e{left:100%;top:50%;cursor:ew-resize}
@media(max-width:719px){.handle.edge{display:none}}
.ratios{display:flex;flex-wrap:wrap;gap:var(--item);margin-bottom:var(--block)}
.ratios .button{min-width:44px;min-height:44px}
.crop-size{border:0;padding:0;margin:0}
.crop-size legend{padding:0;margin-bottom:var(--item);font-weight:600}
.crop-size label{display:inline-flex;align-items:center;gap:var(--item)}
.tool.crop .reset{font-size:13px;text-decoration:underline;text-underline-offset:3px;min-height:44px}
.tool.crop .hint{margin:var(--item) 0 0}
.tool.crop .hint:empty{display:none}
.tool.crop .download{margin-top:var(--block);min-height:44px;padding-inline:var(--block)}
.tp-stage{margin-top:var(--block)}
.tool.transparent canvas#photo{display:block;margin:0 auto;max-width:100%;cursor:crosshair}
.checker{background:repeating-conic-gradient(#ccc 0 25%,#fff 0 50%) 0 0/16px 16px}
.tool.transparent .toggle{display:flex;flex-wrap:wrap;gap:var(--item);margin-top:var(--item)}
.tool.transparent .toggle .button{min-height:44px}
.tool.transparent .selection{display:flex;align-items:center;gap:var(--item);margin:var(--item) 0 0}
.tool.transparent .swatch{width:24px;height:24px;flex-shrink:0;background:var(--sample);border:1px solid var(--line)}
.tool.transparent .tp-conditions{margin-top:var(--block)}
.tool.transparent input[type=range]{display:block;width:100%;min-height:44px}
.range-labels{display:flex;justify-content:space-between;font-size:13px}
.tool.transparent .options{display:flex;flex-wrap:wrap;align-items:center;gap:var(--block);margin-top:var(--item)}
.tool.transparent .options label{display:inline-flex;align-items:center;gap:var(--item);min-height:44px}
.tool.transparent .reset{font-size:13px;text-decoration:underline;text-underline-offset:3px;min-height:44px}
.tool.transparent .hint{margin:var(--item) 0 0}
.tool.transparent .hint:empty{display:none}
.tool.transparent .download{margin-top:var(--block);min-height:44px;padding-inline:var(--block)}
.tool.transparent .swatch[hidden]{display:none}
.tool.convert .footnote{margin:var(--item) 0 0}
.tool.convert .other{margin-top:var(--block);font-size:14px}
.tool.convert .mode{opacity:1;flex:1}
.tool.palette{--c0:#F7F5EF;--c1:#202C39;--c2:#D8A47F;--c3:#A3B18A;--c4:#596F62}
.gen-row,.export-row,.edit-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--item);margin-top:var(--block)}
.gen-row .button,.export-row .button{min-height:44px;padding-inline:var(--block)}
.tool.palette .button:disabled{opacity:.4;cursor:default}
.keyboard{font-size:13px;color:var(--muted)}
@media(pointer:coarse){.keyboard{display:none}}
.tool.palette .hint{margin:var(--item) 0 0}
.tool.palette .hint:empty{display:none}
.tool.palette .palette-grid{grid-template-columns:1fr;gap:var(--item);margin-top:var(--block)}
.swatch-card{display:grid;grid-template-columns:64px minmax(0,1fr);min-width:0;border:1px solid var(--line);border-radius:4px;overflow:hidden}
.swatch-card .paint{border-right:1px solid var(--line);min-height:88px}
.swatch-card[data-i="0"] .paint{background:var(--c0)}.swatch-card[data-i="1"] .paint{background:var(--c1)}.swatch-card[data-i="2"] .paint{background:var(--c2)}
.swatch-card[data-i="3"] .paint{background:var(--c3)}.swatch-card[data-i="4"] .paint{background:var(--c4)}
.color-info{padding:var(--item);min-width:0}
.tool.palette .role{font-size:13px;font-weight:600;margin:0}
.tool.palette .hex{font-size:13px;font-variant-numeric:tabular-nums;user-select:all;-webkit-user-select:all}
.color-actions{display:flex;flex-wrap:wrap;gap:0 var(--block)}
.color-actions .text-button{display:inline-flex;align-items:center;gap:4px;min-width:0;min-height:44px;font-size:13px}
.lock-icon{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.5}
.color-actions .lock[aria-pressed=true]{font-weight:600}
.editor{padding:var(--block);border:1px solid var(--fg);border-radius:4px}
.editor h3{font-size:16px;margin:0 0 var(--item)}
.edit-fields{display:flex;gap:var(--item);align-items:center}
.edit-fields input[type=text]{min-width:0;width:160px;height:44px;padding:8px;border:1px solid var(--line);border-radius:4px;background:var(--bg);font-variant-numeric:tabular-nums}
.edit-fields input[aria-invalid=true]{border-color:var(--error)}
.edit-fields input[type=color]{width:44px;height:44px;padding:2px;background:var(--bg);border:1px solid var(--line);border-radius:4px}
@media(min-width:720px){
  .tool.palette .palette-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
  .swatch-card{grid-template-columns:1fr}
  .swatch-card .paint{border-right:0;border-bottom:1px solid var(--line);min-height:112px}
  .palette-grid .editor{grid-column:1/-1;order:1}
}
.card-section,.contrast{margin-top:var(--section)}
.sample-card{background:var(--c0);color:var(--c1);border:1px solid var(--line);border-radius:8px;padding:24px}
.sample-card h3{margin:0 0 var(--item);font-size:24px;line-height:1.5}
.sample-card p{margin-bottom:var(--block);font-size:16px}
.sample-cta{display:inline-flex;align-items:center;min-height:40px;padding:8px 16px;border-radius:4px;background:var(--c2);color:var(--c1);font-size:13px;font-weight:600}
.pairs{display:grid;grid-template-columns:1fr;gap:var(--block)}
@media(min-width:560px){.pairs{grid-template-columns:1fr 1fr}}
.pair{padding:var(--block);border:1px solid var(--line);border-radius:4px;min-width:0}
.pair h3{font-size:16px;margin:0 0 var(--item)}
.pair-hex{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.ratio{font-size:24px;font-weight:600;font-variant-numeric:tabular-nums}
.pair table{width:100%;border-collapse:collapse;font-size:13px;margin-top:var(--item);text-align:left}
.pair th,.pair td{padding:4px 8px 4px 0}
.pair th{font-weight:600}
.pair td.fail{font-weight:600;color:var(--error)}
.contrast-note{font-size:13px;color:var(--muted);margin-top:var(--item)}
.css-code{margin:var(--item) 0 0;padding:var(--item);border:1px solid var(--line);border-radius:4px;font-size:13px;white-space:pre-wrap;overflow-wrap:anywhere;user-select:all;-webkit-user-select:all}
.example{margin-top:var(--block);padding-top:var(--block);border-top:1px solid var(--line)}
.example h2{font-size:15px;margin-bottom:var(--block)}
.example-row,.example-answer{display:flex;flex-wrap:wrap;gap:var(--block);align-items:flex-start}
.example-answer{flex:1 1 12rem;min-width:0}
.example-fig{margin:0;flex-shrink:0}
.example-fig img{display:block;box-sizing:content-box;border:1px solid var(--line);border-radius:4px}
.example-fig figcaption{font-size:13px;color:var(--muted);margin-top:4px}
.example-value,.example-note{flex:1 0 100%}
.example-value{font-size:15px;overflow-wrap:anywhere}
.example-note{font-size:13px;color:var(--muted)}
.example-swatch{display:block;width:40px;height:40px;border:1px solid var(--line);border-radius:4px;background:#fbfbfa}