@font-face{font-family:"Pixel Archivo";src:url("/fonts/archivo.ttf") format("truetype");font-display:swap}
:root{--bg:#eef2f7;--surface:#fff;--ink:#1e2a3c;--muted:#4d5a6e;--line:#c9d3e0;--accent:#244ca5;--tint:#e0e8f7;--focus:#d36a3e;font-family:"Pixel Archivo",sans-serif}:root[data-theme="dark"]{--bg:#142030;--surface:#1d2b3e;--ink:#edf3ff;--muted:#bac8dd;--line:#405771;--accent:#a8c5ff;--tint:#243e60}
body{font-family:"Pixel Archivo",sans-serif;background:var(--bg);color:var(--ink)}h1{font-size:clamp(2rem,4.8vw,4.2rem);letter-spacing:-.035em;line-height:1.02;max-width:18ch}.pixel-intro{display:grid;grid-template-columns:1.2fr 1fr;gap:2rem;align-items:end;margin:2rem 0}.pixel-intro p{color:var(--muted);max-width:50ch;line-height:1.6}.pixel-desk{background:var(--surface);border-top:3px solid var(--accent);padding:1.8rem;margin-bottom:3rem}.file-drop{display:flex;gap:1rem;align-items:center;flex-wrap:wrap;padding:1.1rem 0;border-bottom:1px solid var(--line)}.file-drop strong{font-size:1.15rem}.file-drop span{color:var(--muted);font-size:.9rem}.file-drop input{flex:1 1 280px;min-width:0;max-width:100%;border:0;padding:.5rem 0}.image-settings{display:grid;grid-template-columns:1fr 1fr;gap:1rem 2.2rem;margin:1.2rem 0}.field-pair{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}.image-settings label{display:block;font-weight:600;margin-bottom:.35rem}.image-settings input,.image-settings select,.output-controls input{display:block;width:100%;font:inherit;font-size:1rem;padding:.7rem;border:1px solid var(--line);border-radius:2px;color:var(--ink);background:var(--surface);min-width:0}.image-settings input[type=color]{height:44px}.choice{display:flex!important;align-items:center;gap:.6rem}.choice input{width:1.15rem;height:1.15rem;display:inline-block}.field-help{font-size:.9rem;color:var(--muted);line-height:1.5}.output-personalization{border-top:1px solid var(--line);padding-top:.8rem;grid-column:1/-1}summary{font-weight:600;cursor:pointer}.output-personalization label{margin-top:1rem;max-width:28rem}.run-line{display:flex;flex-wrap:wrap;gap:.6rem;margin:1.4rem 0}.primary{background:var(--accent);color:var(--surface);border-color:var(--accent)}button{min-height:44px;padding:.7rem 1rem;border:1px solid var(--line);border-radius:2px;background:var(--surface);color:var(--ink);font:inherit;font-weight:600;cursor:pointer}button:disabled{opacity:.5;cursor:default}button:hover:not(:disabled){filter:brightness(.93)}.quiet{border-color:transparent}.result-line{display:flex;gap:1rem;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding-top:1.3rem}#image-status{color:var(--muted);max-width:65ch}#image-errors{background:#fff0eb;color:#a1301b;white-space:pre-wrap;padding:1rem}.image-output{padding:1.5rem 0;border-bottom:1px solid var(--line)}.comparison{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}.comparison figure{margin:0;min-width:0}.comparison img{width:100%;height:270px;object-fit:contain;background:var(--bg)}.comparison figcaption{font-size:.9rem;color:var(--muted);padding:.65rem 0;font-variant-numeric:tabular-nums}.output-controls{display:grid;grid-template-columns:auto minmax(150px,1fr) auto;gap:.8rem;align-items:center}.output-controls label{font-size:.9rem}.reading{max-width:72ch;line-height:1.7;margin-bottom:3rem}.reading h2{margin-top:2rem}::selection{background:#c7d9fb;color:#162d57}:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
@media(max-width:48em){.pixel-intro{grid-template-columns:1fr;gap:.25rem}.pixel-desk{padding:1rem}.image-settings{grid-template-columns:1fr;gap:.7rem}.output-controls{grid-template-columns:1fr}.comparison{gap:.65rem}.comparison img{height:170px}.comparison figcaption{font-size:.8rem}.result-line{align-items:flex-start;flex-direction:column}.file-drop{align-items:flex-start;flex-direction:column}.file-drop input{flex:auto;width:100%}}