:root { --brand: #1b365d; --ink: #172033; --paper: #f8fafc; --line: #d8dee8; font: 17px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color: var(--ink); background: var(--paper); } * { box-sizing: border-box; } body { margin: 0; min-width: 320px; } header, main { max-width: 620px; margin: auto; padding: 16px; } .brand { font-weight: 700; } .track { height: 4px; background: var(--line); margin-top: 12px; } #bar { height: 100%; background: var(--brand); } h1:focus { outline: none; } button, input, textarea { font: inherit; } button { min-height: 44px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 8px; background: white; color: inherit; cursor: pointer; } button.primary { background: var(--brand); color: white; border-color: var(--brand); } button[aria-pressed="true"] { background: var(--brand); color: white; border-color: var(--brand); font-weight: 600; } button[aria-pressed="true"]::before { content: "\2713\00a0"; } .choices, .actions, .group-item { display: grid; gap: 10px; margin: 18px 0; } input, textarea { width: 100%; min-height: 44px; padding: 10px; border: 1px solid var(--line); border-radius: 8px; } textarea { min-height: 120px; } label { display: block; margin: 12px 0 4px; } fieldset label { margin: 8px 0; } fieldset input { width: auto; min-height: auto; } .help, .muted { color: #586174; } .error { color: #a32020; } .review { padding: 0; list-style: none; } .review li { border-bottom: 1px solid var(--line); padding: 10px 0; } a { color: var(--brand); }