:root{--bg:#f6f7fb;--surface:#fff;--text:#161a2e;--muted:#5d6380;--border:#dde0ec;--accent:#1a2a80;--accent-text:#fff;--accent-soft:#e8ebf8;--warn-bg:#fff6e0;--warn-text:#7a5300;--error:#b3261e;--radius:14px;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}@media (prefers-color-scheme:dark){:root{--bg:#10121c;--surface:#1a1d2b;--text:#e9ebf5;--muted:#9ca2bf;--border:#2c3046;--accent:#7d8fff;--accent-text:#0d1030;--accent-soft:#23284a;--warn-bg:#3a2e10;--warn-text:#f3cf7a;--error:#ff8a80;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}}*{box-sizing:border-box}body{background:var(--bg);color:var(--text);margin:0;line-height:1.5}.app{gap:20px;max-width:720px;margin:0 auto;padding:40px 16px 32px;display:grid}.hero{text-align:center}.hero h1{letter-spacing:-.02em;margin:0 0 8px;font-size:clamp(2rem,7vw,3rem)}.hero p{max-width:52ch;color:var(--muted);margin:0 auto}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);gap:18px;padding:20px;display:grid}.dropzone{border:2px dashed var(--border);border-radius:var(--radius);text-align:center;cursor:pointer;overflow-wrap:anywhere;justify-items:center;gap:6px;padding:32px 16px;transition:border-color .15s,background .15s;display:grid}.dropzone:hover,.dropzone:focus-visible,.dropzone.dragging{border-color:var(--accent);background:var(--accent-soft);outline:none}.dropzone.has-file{border-style:solid}.dropzone[aria-disabled=true]{opacity:.6;cursor:default}.dropzone-icon{fill:none;width:36px;height:36px;stroke:var(--accent);stroke-width:1.8px;stroke-linecap:round;stroke-linejoin:round}.dropzone-title{font-size:1.05rem}.dropzone-hint{color:var(--muted);font-size:.9rem}.color-picker{border:0;gap:10px;margin:0;padding:0;display:grid}.color-picker legend{margin-bottom:10px;font-weight:600}.swatches{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.swatch{border:3px solid var(--surface);width:40px;height:40px;box-shadow:0 0 0 1px var(--border);cursor:pointer;border-radius:50%}.swatch[aria-pressed=true]{box-shadow:0 0 0 3px var(--accent)}.custom-color{align-items:center;gap:6px;margin-left:4px;display:flex}.custom-color input[type=color]{border:1px solid var(--border);background:var(--surface);cursor:pointer;border-radius:10px;width:40px;height:40px;padding:2px}.hex-input{width:6.5em;font:inherit;border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:10px;padding:8px 10px;font-family:ui-monospace,monospace}.warning{background:var(--warn-bg);color:var(--warn-text);border-radius:10px;margin:0;padding:10px 12px;font-size:.9rem}.clean{gap:8px;display:grid}.check{flex-wrap:wrap;align-items:baseline;gap:8px;font-weight:600;display:flex}.check-hint{flex-basis:100%;padding-left:24px;font-size:.9rem;font-weight:400}.slider{color:var(--muted);align-items:center;gap:12px;padding-left:24px;font-size:.9rem;display:flex}.slider input{accent-color:var(--accent);flex:1}input[type=checkbox]{accent-color:var(--accent);width:16px;height:16px}button{font:inherit;cursor:pointer}button:disabled{cursor:not-allowed;opacity:.5}.primary,.secondary{border-radius:12px;padding:12px 20px;font-size:1rem;font-weight:600}.primary{background:var(--accent);color:var(--accent-text);border:0}.primary:not(:disabled):hover{filter:brightness(1.1)}.secondary{color:var(--text);border:1px solid var(--border);background:0 0}.secondary:hover{border-color:var(--accent)}.link{color:var(--muted);background:0 0;border:0;padding:12px 4px;text-decoration:underline}:is(.primary,.secondary,.link,.swatch):focus-visible{outline:3px solid var(--accent);outline-offset:2px}.progress{background:var(--accent-soft);border-radius:10px;place-items:center;height:32px;display:grid;position:relative;overflow:hidden}.progress-bar{background:var(--accent);opacity:.25;transition:width .2s;position:absolute;inset:0 auto 0 0}.progress span{font-size:.9rem;position:relative}.error{color:var(--error);margin:0;font-weight:600}.compare{border:1px solid var(--border);background:var(--bg);border-radius:10px;max-height:70vh;display:grid;position:relative;overflow:hidden}.compare-img{object-fit:contain;filter:drop-shadow(0 1px 3px #00000026);grid-area:1/1;width:100%;height:100%;max-height:70vh;display:block}.compare-line{background:var(--accent);pointer-events:none;width:2px;position:absolute;top:0;bottom:0;transform:translate(-1px)}.compare-label{color:#fff;background:#0000008c;border-radius:99px;padding:2px 8px;font-size:.75rem;font-weight:600;position:absolute;top:8px}.compare-label.left{left:8px}.compare-label.right{right:8px}.compare-range{opacity:0;cursor:ew-resize;width:100%;height:100%;margin:0;position:absolute;inset:0}.actions{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.actions .primary{min-width:140px}.tips{gap:8px;display:grid}.tips details{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:12px 16px}.tips summary{cursor:pointer;font-weight:600}.tips p{color:var(--muted);margin:10px 0 0}.muted{color:var(--muted)}.center{text-align:center;margin:0}footer{font-size:.85rem}@media (max-width:480px){.app{padding-top:24px}.card{padding:16px}.actions>button:not(.link){flex:100%}}#print-root{display:none}@media print{body{background:#fff}#root{display:none}#print-root{display:block}.print-page{break-after:page;overflow:hidden}.print-page:last-child{break-after:auto}.print-page img{width:100%;height:100%;display:block}.print-page.fit{justify-content:center;display:flex}.print-page.fit img{object-fit:contain;width:auto;max-width:100%;height:auto;max-height:100vh}}@media (prefers-color-scheme:dark){.hero h1 span[style]{filter:brightness(2.2)saturate(1.2)}}.notice{background:var(--accent-soft);border-radius:var(--radius);justify-items:start;gap:12px;margin:0;padding:14px 18px;display:grid}.notice p{margin:0}a{color:var(--accent)}.prose{gap:14px;max-width:680px}.prose h1{letter-spacing:-.02em;margin:8px 0 0;font-size:clamp(1.8rem,6vw,2.4rem)}.prose h2{margin:18px 0 0;font-size:1.2rem}.prose .card h2,.prose p,.prose ul,.prose ol{margin:0}.prose li+li{margin-top:6px}.hero h1 .accent{color:var(--accent)}.hero img{margin-bottom:8px}.crumbs a{font-weight:600;text-decoration:none}.steps{padding-left:1.4em}code{background:var(--accent-soft);border-radius:6px;padding:1px 6px;font-family:ui-monospace,monospace;font-size:.9em}a.button{justify-self:start;text-decoration:none;display:inline-block}.promo{flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 10px;margin:12px auto 0;font-size:.95rem;display:flex}.promo a{font-weight:600}.site-links{flex-wrap:wrap;justify-content:center;gap:16px;display:flex}.hero .promo{margin:12px auto 0}.prose .hero p{margin:0 auto}