:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  background: #11131a;
  color: #edf0f6;
}

body { margin: 0; }
main { max-width: 860px; margin: 0 auto; padding: 64px 24px; }
h1 { font-size: clamp(2.4rem, 8vw, 4.6rem); letter-spacing: -0.06em; margin: 0; }
.eyebrow { color: #78d9b0; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; }
.lede { color: #bbc3d2; font-size: 1.2rem; line-height: 1.5; max-width: 48rem; }
details { border: 1px solid #3a4354; border-radius: 10px; margin: 24px 0; padding: 14px 16px; }
summary { cursor: pointer; font-weight: 700; }
details li { margin: 8px 0; }
code { color: #a8e8ce; }
label { display: block; margin: 28px 0 9px; font-weight: 700; }
textarea { box-sizing: border-box; min-height: 340px; width: 100%; resize: vertical; border: 1px solid #3a4354; border-radius: 12px; padding: 18px; background: #181c26; color: #f7f9ff; font: 15px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; }
input[type="file"] { width: 100%; color: #bbc3d2; }
.hint { color: #aeb7c7; font-size: .9rem; margin: 8px 0; }
.controls { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; }
.controls label { margin-bottom: 9px; width: 100%; }
select, button { border-radius: 8px; padding: 11px 14px; font: inherit; }
select { background: #181c26; border: 1px solid #3a4354; color: inherit; }
button { border: 0; background: #78d9b0; color: #102018; font-weight: 800; cursor: pointer; }
button:disabled { cursor: wait; opacity: .6; }
output { display: block; min-height: 1.5em; margin-top: 22px; color: #b7c5e1; }
.note { border-left: 3px solid #4f5e78; color: #aeb7c7; line-height: 1.5; padding-left: 14px; }