:root {
  --ink: #0C1820; --paper: #F4F6F3; --amber: #F2B544; --slate: #93A6AC; --muted: #4D5F66;
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
h1, h2, h3 { font-family: "Bricolage Grotesque", var(--sans); }
[hidden] { display: none !important; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--paper); color: var(--ink); font: 1rem/1.6 var(--sans); }
header, main, footer { width: 100%; max-width: 40rem; margin: 0 auto; padding: 0 16px; }
header { padding-top: 24px; }
main { overflow-wrap: anywhere; flex: 1; padding-top: 32px; padding-bottom: 48px; }
.mark { font: 600 1.25rem var(--mono); }
.sq { display: inline-block; width: 0.45em; height: 0.45em; margin-left: 0.15em; background: var(--amber); }
h1 { font-size: 1.75rem; line-height: 1.2; margin: 0 0 16px; }
label { display: block; font: 0.85rem var(--mono); margin: 24px 0 6px; }
input { width: 100%; padding: 12px; font: inherit; color: var(--ink); background: #fff; border: 1px solid var(--muted); border-radius: 6px; }
input:focus, button:focus, a:focus { outline: 3px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 2px var(--amber); }
button { margin-top: 16px; padding: 12px 20px; font: 600 1rem var(--sans); color: var(--ink); background: var(--amber); border: 0; border-radius: 6px; cursor: pointer; }
button:disabled { opacity: 0.6; cursor: wait; }
button.quiet { background: transparent; border: 1px solid var(--muted); }
a { color: var(--ink); }
.note { padding: 12px; border-left: 4px solid var(--amber); background: #fff; }
.empty { color: var(--muted); }
footer { padding-bottom: 24px; font-size: 0.875rem; color: var(--muted); }
footer a { color: inherit; }
h1:focus, h3:focus, .note:focus { outline: none; }
.meta, .small { display: block; font: 0.8rem var(--mono); color: var(--muted); }
.prose { white-space: pre-line; }
h2 { font-size: 1.2rem; margin: 32px 0 8px; }
h3 { font-size: 1rem; margin: 0; }
.list { list-style: none; padding: 0; }
button.item { display: block; width: 100%; text-align: left; background: #fff; border: 1px solid var(--muted); margin-top: 8px; }
.mockup { margin-top: 16px; }
.phone { max-width: 300px; height: 540px; display: flex; flex-direction: column; overflow: hidden; background: #fff; border: 8px solid var(--ink); border-radius: 36px; }
.sample { margin: 0; text-align: center; font: 0.65rem var(--mono); color: var(--muted); background: var(--paper); }
.bar { display: flex; gap: 8px; align-items: center; padding: 8px 16px 8px 4px; border-bottom: 1px solid var(--slate); }
.phone button { margin: 0; }
.back { padding: 4px 10px; background: transparent; font-size: 1.25rem; }
.screen { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; font-size: 0.9rem; }
.box { display: block; width: 100%; padding: 10px 12px; background: var(--paper); border-radius: 12px; text-align: left; font: inherit; }
.white, .row { background: #fff; border: 1px solid var(--slate); }
.row { display: flex; gap: 10px; align-items: center; color: var(--ink); }
.grow { flex: 1; display: flex; flex-direction: column; }
.value { font-size: 0.8rem; text-align: right; }
.big { display: block; font-size: 1.4rem; }
.dot { flex: none; display: inline-block; width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--ink); }
.s-ok { background: #2E7D4F; } .s-warn { background: #C0392B; } .s-todo { background: var(--amber); } .s-none { background: var(--slate); }
button.go, button.flat { width: 100%; }
button.flat { background: transparent; border: 1px solid var(--slate); color: var(--muted); cursor: default; opacity: 1; }
.bars { display: flex; align-items: flex-end; gap: 4px; height: 60px; margin-top: 6px; }
.bar-v { flex: 1; background: var(--ink); }
.badge { display: inline-flex; gap: 6px; align-items: center; align-self: flex-start; padding: 4px 10px; background: var(--paper); border-radius: 99px; font: 0.8rem var(--mono); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; max-width: 300px; margin: 10px 0 24px; }
button.chip { margin: 0; padding: 4px 10px; font: 0.8rem var(--sans); background: #fff; border: 1px solid var(--slate); border-radius: 99px; }
button.chip[aria-pressed="true"] { background: var(--amber); border-color: var(--ink); }
.scroll { overflow-x: auto; }
table { border-collapse: collapse; background: #fff; font-size: 0.85rem; }
th, td { border: 1px solid var(--slate); padding: 8px 10px; text-align: left; vertical-align: top; }
th { font: 0.75rem var(--mono); text-transform: uppercase; background: var(--paper); }
.banner { margin: 16px 0; padding: 12px 16px; background: #fff; border-left: 4px solid #2E7D4F; }
.banner p { margin: 0; }
.banner p + p { margin-top: 8px; }
.banner:focus, #a-closed:focus { outline: none; }
.accept { margin-top: 40px; padding-top: 8px; border-top: 1px solid var(--slate); }
label.check { display: flex; gap: 10px; align-items: flex-start; font: inherit; margin: 16px 0 0; }
label.check input { flex: none; width: 20px; height: 20px; margin: 3px 0 0; padding: 0; }
form:not([aria-busy]) button:disabled { cursor: not-allowed; }
#fresh-form button + button, #confirm-form button + button { margin-left: 8px; }
.feedback { margin-top: 40px; padding-top: 8px; border-top: 1px solid var(--slate); }
#f-heading:focus { outline: none; }
#f-hint { margin: 0 0 6px; }
textarea { display: block; width: 100%; min-height: 8rem; padding: 12px; font: inherit; color: var(--ink); background: #fff; border: 1px solid var(--muted); border-radius: 6px; resize: vertical; }
textarea:focus { outline: 3px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 2px var(--amber); }
textarea[aria-invalid="true"] { border: 2px solid #C0392B; }
#f-count, #f-limit { margin: 4px 0 0; }
.thread li { margin-top: 12px; padding: 12px; background: #fff; border: 1px solid var(--slate); border-radius: 6px; }
.said { margin: 4px 0 0; white-space: pre-wrap; }
.reply { margin-top: 12px; padding-left: 12px; border-left: 4px solid var(--amber); }
.activity { margin-top: 40px; padding-top: 8px; border-top: 1px solid var(--slate); }
#l-heading:focus { outline: none; }
.log li { margin-top: 8px; }
.log p { margin: 0; }
.agreement { margin-top: 40px; padding-top: 8px; border-top: 1px solid var(--slate); }
#k-heading:focus { outline: none; }
summary { cursor: pointer; font-weight: 600; margin-top: 8px; padding: 10px 0; }
summary:focus { outline: 3px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 2px var(--amber); }
#k-body h3 { margin-top: 24px; }
#k-body p { margin: 8px 0 0; }
.clause strong { margin-right: 6px; }
#k-print { overflow-wrap: anywhere; }
.tbc { padding: 0 4px; font: 600 0.9rem var(--mono); background: var(--amber); }
.note p { margin: 0; }
.steps li { margin-top: 12px; padding: 12px; background: #fff; border: 1px solid var(--slate); border-radius: 6px; }
.steps p { margin: 4px 0 0; }
.status { margin-top: 16px; padding: 12px 16px; background: #fff; border: 1px solid var(--slate); border-radius: 6px; }
.status h2 { margin: 0 0 4px; }
.status h3 { margin-top: 12px; }
.status p { margin: 4px 0 0; }
.st-state { font: 600 0.95rem var(--mono); }
.st-waiting { margin: 0; }
.st-waiting button { margin-top: 8px; text-align: left; }
.state { display: flex; gap: 8px; align-items: center; font: 600 0.85rem var(--mono); }
.choice { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 16px; }
.choice button { margin: 0; }
.choice p { flex-basis: 100%; margin: 0; }
#cr-heading:focus, #rl-heading:focus, .choice p:focus { outline: none; }
.items { margin: 12px 0 0; padding-left: 0; list-style: none; }
.steps .items li { margin-top: 8px; padding: 12px 0 0; border: 0; border-top: 1px solid var(--slate); border-radius: 0; }
.items h4 { margin: 0; }
.choice form { flex-basis: 100%; }
.choice form label { display: block; margin: 0 0 6px; }
.choice form button { margin-top: 12px; }
.choice form button + button { margin-left: 8px; }