:root{--bg:#eef1f4;--panel:#ffffff;--ink:#16212c;--muted:#5a6876;--rule:#cfd6dd;--accent:#2447d6;--accent-ink:#ffffff;--err:#b3261e;color-scheme:light dark}@media (prefers-color-scheme:dark){:root{--bg:#11161c;--panel:#1a2129;--ink:#e8edf2;--muted:#98a5b3;--rule:#2d3844;--accent:#7a96ff;--accent-ink:#0c1220;--err:#ff8a80}}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 system-ui,-apple-system,Segoe UI,sans-serif}main{max-width:860px;margin:0 auto;padding:40px 20px 64px}.top h1,header h1{font-size:2.25rem;letter-spacing:-.02em;margin:0 0 4px}.note,header p{color:var(--muted);margin:0 0 16px;max-width:62ch}section{background:var(--panel);border:1px solid var(--rule);border-radius:10px;padding:24px;margin-top:24px}h2{margin:0 0 4px;font-size:1.25rem}h3{margin:16px 0 8px;font-size:1rem}.drop{position:relative;display:block;border:2px dashed var(--rule);border-radius:8px;padding:28px;text-align:center;cursor:pointer;color:var(--muted)}.drop.over,.drop:focus-within,.drop:hover{border-color:var(--accent);color:var(--ink)}.drop input{position:absolute;opacity:0;width:1px;height:1px}.grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-gap:24px;gap:24px;margin-top:20px;align-items:start}.preview{width:100%;max-height:320px;object-fit:contain;background:repeating-conic-gradient(var(--rule) 0 25%,transparent 0 50%) 0 0 /16px 16px;border-radius:6px}dl{display:grid;grid-template-columns:auto 1fr;grid-gap:4px 16px;gap:4px 16px;margin:0 0 16px}dt{color:var(--muted)}dd{margin:0;overflow-wrap:anywhere;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.field{display:flex;flex-direction:column;gap:4px;font-size:.9rem;color:var(--muted);flex:1 1;min-width:0}input:not([type=file]):not([type=radio]),select{font:inherit;padding:8px 10px;border:1px solid var(--rule);border-radius:6px;background:var(--bg);color:var(--ink);width:100%;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}input[aria-invalid=true]{border-color:var(--err)}:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.row{display:flex;gap:12px;margin-top:12px}.two{display:grid;grid-template-columns:1fr 1fr;grid-gap:24px;gap:24px}.chips{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}.chip{font:inherit;padding:4px 12px;border-radius:999px;border:1px solid var(--rule);background:transparent;color:var(--ink);cursor:pointer}.chip.on{border-color:var(--accent)}.chip.on,.primary{background:var(--accent);color:var(--accent-ink)}.primary{font:inherit;font-weight:600;padding:10px 18px;border:0;border-radius:6px;cursor:pointer}.primary:disabled{opacity:.45;cursor:not-allowed}.result{margin:12px 0;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.error{color:var(--err);margin:8px 0}.error:empty{display:none}.top{display:flex;justify-content:space-between;align-items:center;gap:16px}.center{display:flex;justify-content:center;padding-top:64px}a{color:var(--accent)}a.primary,a.secondary,button.secondary{text-decoration:none;display:inline-block;text-align:center}a.primary{color:var(--accent-ink)}.secondary{font:inherit;font-weight:600;padding:10px 18px;border:1px solid var(--rule);border-radius:6px;background:transparent;color:var(--ink);cursor:pointer}.mode{border:0;padding:0;margin:0 0 12px;display:flex;flex-direction:column;gap:6px}.mode legend{color:var(--muted);font-size:.9rem;padding:0;margin-bottom:4px}.mode label input[type=radio]{width:auto;padding:0;margin-right:8px}.row form{margin:0}@media (max-width:640px){.grid,.two{grid-template-columns:1fr}.row{flex-direction:column}}