/* Shared by A and B so the only difference is markup. Hosted copy of agent-ready-lab experiments/001. */
* { box-sizing: border-box; margin: 0; }
body { min-height: 100vh; display: grid; place-items: center; background: #f4f4f2; font: 16px/1.4 Inter, system-ui, sans-serif; color: #1a1a1a; }
.card { width: min(420px, calc(100% - 32px)); background: #fff; border: 1px solid #d6d6d2; border-radius: 16px; padding: 32px; }
.title { font-size: 24px; font-weight: 700; margin-bottom: 20px; }
.form { display: grid; gap: 12px; }
.field, .select { width: 100%; height: 48px; padding: 0 14px; border: 1px solid #8a8a86; border-radius: 10px; font: inherit; background: #fff; color: #1a1a1a; }
.field::placeholder { color: #6b6b67; }
.select { position: relative; display: flex; align-items: center; cursor: pointer; color: #6b6b67; }
.select.chosen, .select.native:valid { color: #1a1a1a; }
.select.native { appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%231a1a1a' stroke-width='2' fill='none'/%3E%3C/svg%3E") no-repeat right 16px center; }
.chevron { position: absolute; right: 16px; width: 12px; height: 8px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%231a1a1a' stroke-width='2' fill='none'/%3E%3C/svg%3E"); }
.options { display: none; position: absolute; top: 52px; left: 0; right: 0; background: #fff; border: 1px solid #8a8a86; border-radius: 10px; z-index: 1; color: #1a1a1a; }
.options.open { display: block; }
.option { padding: 12px 14px; }
.option:hover { background: #f0f0ec; }
.submit { justify-self: end; width: 56px; height: 48px; display: grid; place-items: center; border: 0; border-radius: 10px; background: #1a1a1a; color: #fff; cursor: pointer; }
.status { margin-top: 16px; min-height: 1.4em; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.demo-note { position: fixed; bottom: 16px; left: 16px; right: 16px; text-align: center; font-size: 14px; color: #4a4a46; }
.demo-note a { color: inherit; }