:root {
  --paper-0:#fbf8f1; --paper-1:#f3eee2; --paper-2:#e8e1d0; --rule:#cfc6b0;
  --ink-900:#17201c; --ink-700:#35423b; --ink-600:#4c5a52;
  --pine-700:#1f5a43; --pine-100:#dcebe2;
  --amber-700:#8a4b00; --amber-100:#f8e6c4; --amber-500:#c7770a;
  --brick-700:#a22a1d; --brick-100:#f6dcd6;
  --slate-700:#3a4f66; --slate-100:#dde6ef;
  --bg:var(--paper-0); --surface:#fffdf8; --surface-sunk:var(--paper-1);
  --text:var(--ink-900); --text-muted:var(--ink-600); --border:var(--rule);
  --accent:var(--pine-700); --accent-bg:var(--pine-100);
  --money:var(--amber-700); --money-bg:var(--amber-100);
  --danger:var(--brick-700); --danger-bg:var(--brick-100);
  --info:var(--slate-700); --info-bg:var(--slate-100); --focus:#0b57d0;
  --font-ui:"Inter","Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",sans-serif;
  --font-num:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;
  --fs-xs:.75rem; --fs-sm:.875rem; --fs-md:1rem; --fs-lg:1.25rem; --fs-xl:clamp(1.5rem,1.1rem + 2vw,2.25rem); --lh:1.5;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;
  --r-sm:4px; --r-md:10px; --e0:none; --e1:0 1px 0 var(--rule),0 2px 6px rgba(23,32,28,.08);
  --dur:140ms; --ease:cubic-bezier(.2,.7,.2,1);
}
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:var(--fs-md)/var(--lh) var(--font-ui); }
a { color:var(--accent); }
:focus-visible { outline:3px solid var(--focus); outline-offset:2px; border-radius:var(--r-sm); }
[hidden] { display:none !important; }
.wrap { max-width:880px; margin:auto; padding:var(--s5) var(--s4) var(--s7); }
.app { display:flex; flex-wrap:wrap; gap:var(--s3); align-items:baseline; justify-content:space-between; border-bottom:2px solid var(--ink-900); padding-bottom:var(--s3); }
.brand { font-weight:700; font-size:var(--fs-lg); text-decoration:none; }
.brand span { color:var(--accent); }
.privacy { display:inline-flex; font-size:var(--fs-sm); background:var(--accent-bg); color:var(--accent); padding:var(--s1) var(--s3); border-radius:var(--r-sm); font-weight:600; }
.eyebrow { text-transform:uppercase; font-size:var(--fs-xs); letter-spacing:.08em; margin-top:var(--s7); color:var(--text-muted); }
h1 { font-size:var(--fs-xl); line-height:1.15; margin:var(--s4) 0; }
h2 { font-size:var(--fs-lg); margin:0 0 var(--s4); }
.lead { font-size:var(--fs-lg); color:var(--ink-700); margin-bottom:var(--s6); }
.panel { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); padding:var(--s5); box-shadow:var(--e1); margin-top:var(--s5); }
.steps { display:flex; gap:var(--s2); list-style:none; padding:0; margin:0 0 var(--s5); font-size:var(--fs-sm); flex-wrap:wrap; }
.steps li { padding:var(--s1) var(--s3); border-radius:var(--r-sm); background:var(--paper-2); color:var(--ink-700); }
.steps li[aria-current="step"] { background:var(--ink-900); color:var(--surface); }
.drop { border:2px dashed var(--border); border-radius:var(--r-md); padding:var(--s5); background:var(--surface-sunk); margin-bottom:var(--s4); }
.drop.dragging { border-color:var(--accent); background:var(--accent-bg); }
label { display:block; font-weight:700; margin-bottom:var(--s3); }
input { font:inherit; max-width:100%; min-height:44px; }
input::file-selector-button { font:inherit; min-height:44px; padding:var(--s2) var(--s3); margin-right:var(--s2); }
#file-help, #status, footer { color:var(--text-muted); font-size:var(--fs-sm); }
.btn { display:inline-flex; align-items:center; min-height:44px; padding:var(--s2) var(--s5); border-radius:var(--r-md); border:2px solid var(--accent); background:var(--accent); color:var(--surface); font:inherit; font-weight:700; cursor:pointer; transition:background var(--dur) var(--ease); text-decoration:none; }
.btn:hover { background:var(--ink-700); }
.btn:disabled { background:var(--paper-2); border-color:var(--paper-2); color:var(--ink-600); cursor:not-allowed; }
.secondary { background:var(--surface); color:var(--accent); }
.secondary:hover { background:var(--accent-bg); }
.downloads { display:flex; flex-direction:column; align-items:flex-start; gap:var(--s3); overflow-wrap:anywhere; }
.actions { display:flex; flex-wrap:wrap; gap:var(--s4); }
.workflow { padding-left:var(--s5); }
.workflow li { padding-bottom:var(--s4); }
.alert { border-left:6px solid var(--danger); background:var(--danger-bg); color:var(--danger); padding:var(--s4); margin-bottom:var(--s4); border-radius:0 var(--r-md) var(--r-md) 0; }
footer { margin-top:var(--s6); }
code { font-family:var(--font-num); overflow-wrap:anywhere; }
@media (max-width:720px) { .panel,.drop { padding:var(--s4); } .btn { max-width:100%; } }
@media (prefers-reduced-motion:reduce) { * { transition:none !important; } }