:root { color-scheme: light dark; --warn: #b45309; --err: #b91c1c; }
body { font: 16px/1.5 system-ui, -apple-system, sans-serif; max-width: 60rem; margin: 0 auto; padding: 1rem 1.25rem 3rem; }
h1 { font-size: 1.4rem; margin: 0.5rem 0; }
h2 { font-size: 1.15rem; margin-top: 1.5rem; }
.banner { border: 2px solid var(--warn); border-radius: 6px; padding: 0.75rem 1rem; background: color-mix(in srgb, var(--warn) 12%, transparent); }
.warn { border-left: 4px solid var(--warn); padding: 0.5rem 0.75rem; background: color-mix(in srgb, var(--warn) 10%, transparent); }
h3 { font-size: 1rem; margin: 1rem 0 0.25rem; }
.error { border-left: 4px solid var(--err); padding: 0.5rem 0.75rem; background: color-mix(in srgb, var(--err) 10%, transparent); white-space: pre-wrap; }
fieldset { border: 1px solid color-mix(in srgb, currentColor 25%, transparent); border-radius: 6px; margin: 0.75rem 0; padding: 0.5rem 1rem 0.75rem; }
button { font: inherit; padding: 0.35rem 0.9rem; margin-right: 0.5rem; cursor: pointer; }
button:disabled { cursor: default; opacity: 0.5; }
#rec-stop:not(:disabled) { border-color: var(--err); }
audio { width: 100%; margin: 0.5rem 0; }
.replies { font-size: 1.15rem; }
.replies .t { font-variant-numeric: tabular-nums; opacity: 0.7; font-size: 0.85rem; }
.small { font-size: 0.85rem; opacity: 0.75; }
table { border-collapse: collapse; width: 100%; font-size: 0.9rem; }
th, td { text-align: left; vertical-align: top; border-top: 1px solid color-mix(in srgb, currentColor 20%, transparent); padding: 0.35rem 0.5rem; }
.badge { display: inline-block; white-space: nowrap; font-weight: 600; font-size: 0.8rem; padding: 0 0.4rem; border-radius: 4px; border: 1px solid var(--warn); color: var(--warn); }