:root { color-scheme: light dark; --accent: light-dark(#4b4bc4, #a9a9ff); --line: light-dark(#d4d4dc, #44444f); --surface: light-dark(#f4f4f8, #24242c); }
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
* { box-sizing: border-box; }
body { margin: 0; padding: 1rem; font: 1rem/1.5 system-ui, sans-serif; background: Canvas; color: CanvasText; }
.stack > * + * { margin-block-start: 1rem; }
.row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.label { margin-block-end: 0; font-size: 0.8rem; color: GrayText; }
.stack > .label + * { margin-block-start: 0.35rem; }
button, [role="radio"], [role="tab"], [role="menuitem"] { font: inherit; color: inherit; padding: 0.35em 0.8em; border: thin solid var(--line); border-radius: 0.4em; background: var(--surface); cursor: pointer; }
:focus-visible { outline: 0.15em solid var(--accent); outline-offset: 0.1em; }
[aria-selected="true"], [aria-checked="true"] { border-color: var(--accent); color: var(--accent); font-weight: 600; }
[role="radio"]::before { content: "○ "; }
[role="radio"][aria-checked="true"]::before { content: "● "; }
[role="tabpanel"] { padding: 0.75rem 1rem; border: thin solid var(--line); border-radius: 0.4em; }
output, pre { display: block; margin: 0; padding: 0.5rem 0.75rem; border-radius: 0.4em; background: var(--surface); font: 0.85rem/1.5 ui-monospace, monospace; white-space: pre-wrap; }
kbd { padding: 0.05em 0.4em; border: thin solid var(--line); border-block-end-width: 0.15em; border-radius: 0.3em; font: 0.85em ui-monospace, monospace; }