:root { font-family: system-ui, sans-serif; color: #343b37; background: #f1f4ef; line-height: 1.6; }
* { box-sizing: border-box; } body { margin: 0; } main { max-width: 760px; margin: auto; padding: 1.5rem; }
a { color: #225e59; } h1 { margin-bottom: .25rem; } h2 { font-size: 1.2rem; } .people { max-width: 260px; margin: 1rem 0; } svg { display: block; width: 100%; height: auto; }
button, select { font: inherit; min-height: 48px; border: 2px solid #65786d; border-radius: .6rem; background: white; color: #343b37; padding: .55rem .8rem; cursor: pointer; }
button:focus-visible, select:focus-visible, a:focus-visible { outline: 3px solid #1a6590; outline-offset: 3px; }
button:disabled { opacity: .75; cursor: default; } button[aria-pressed='true'] { background: #d8e9d9; }
.choices, .controls { display: flex; flex-wrap: wrap; gap: .5rem; } .choices button { text-align: left; }
.bubble, .conversation, .result { padding: .8rem 1rem; border-radius: .75rem; background: #e1eadf; } .conversation, .result { margin: 1rem 0; }
.more { margin: .75rem 0; } .more summary { min-height: 48px; display: flex; align-items: center; cursor: pointer; }