:root {
  color-scheme: light;
  --paper: #f8f3f8;
  --ink: #321f35;
  --muted: #65546a;
  --rule: #dfd1e2;
  --surface: #fffaff;
  --plum: #63386a;
  font: 100%/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--paper);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; }
main { width: min(calc(100% - 2rem), 34rem); margin: auto; padding: clamp(1.8rem, 7vw, 4rem) 0 2rem; }
header { text-align: center; margin-bottom: 1.5rem; }
header svg { display: block; margin: 0 auto .2rem; }
h1 { font: 400 clamp(3rem, 11vw, 4.3rem)/1 "Iowan Old Style", "Palatino Linotype", Georgia, serif; letter-spacing: -.055em; margin: .15em 0 .22em; }
p { margin: 0; }
header p, footer, .note { color: var(--muted); }
.workbench { background: var(--surface); border: 1px solid var(--rule); border-radius: 1rem; padding: 1.1rem; text-align: center; }
.button { display: block; border: 0; border-radius: .65rem; width: 100%; min-height: 3.15rem; padding: .8rem; font: inherit; font-weight: 650; background: var(--plum); color: white; cursor: pointer; }
.button:hover { background: #502a57; }
.pick { position: relative; display: block; }
.pick input { position: absolute; width: 100%; height: 100%; inset: 0; opacity: 0; cursor: pointer; }
.pick:focus-within .button, :focus-visible { outline: 2px solid var(--plum); outline-offset: 3px; }
.pick:has(input:disabled) .button { opacity: .65; cursor: wait; }
.workbench:has(#results:not([hidden])) .pick .button { background: #efe3f0; color: var(--ink); }
.note { margin-top: .65rem; font-size: .9rem; }
#results { margin-top: 1rem; }
figure { margin: 1rem 0 .35rem; background: #f2e9f3; border-radius: .65rem; overflow: hidden; }
#preview { display: block; width: 100%; height: min(48vh, 24rem); object-fit: contain; }
figcaption { display: flex; align-items: center; justify-content: space-between; padding: .2rem .4rem; border-top: 1px solid var(--rule); }
#position { font-size: .9rem; color: var(--muted); }
.step { width: 3rem; height: 2.75rem; border: none; background: transparent; font: inherit; font-size: 1.7rem; color: var(--plum); cursor: pointer; }
.step:disabled { opacity: .35; cursor: default; }
.download { display: inline-block; color: var(--plum); padding: .7rem; text-underline-offset: .18em; }
footer { text-align: center; font-size: .82rem; margin: .95rem auto 0; max-width: 24rem; }