body { margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.am-start { width: 100%; max-width: 480px; padding: 16px; box-sizing: border-box; }
.am-start h1 { margin: 0 0 8px; }
.am-start p { margin: 0 0 16px; }
/* the card's own lines only: a notice's text and the hints keep the design system's colours (this CSS is unlayered: it would win) */
.am-start .card > p, .am-start [data-ready] > p, .am-start [data-ready] > div > p { color: var(--ink-2); }
.am-start .notice p { margin: 0; }
.am-start form { margin: 0 0 12px; }
.am-start .field p { margin: 0; }
#slug-status { min-height: 16px; }
.am-start .btn { width: 100%; margin-top: 8px; }
.am-start-row { display: flex; gap: 12px; }
.am-start-row > .field { flex: 1; min-width: 0; }
.am-start-choice { display: flex; flex-wrap: wrap; gap: 16px; }
.am-start-foot { margin-top: 16px; font-size: 12px; color: var(--ink-3); text-align: center; }