@import url('/styles/theme.css');
html { color-scheme: dark; --ground: var(--bua-bg); --ink: var(--bua-text); --muted: var(--bua-muted); --action: var(--bua-action); }

html[data-theme="light"] { color-scheme: light; }

*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--ink);font-family:Archivo,system-ui,sans-serif}
header,main,footer{max-width:760px;margin:auto;padding:24px max(24px,env(safe-area-inset-left))}
header{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
a,button{color:var(--action);min-height:48px;display:inline-flex;align-items:center}
button{background:transparent;border:1px solid var(--action);border-radius:6px;padding:12px;font:inherit}
a:focus-visible,button:focus-visible{outline:2px solid var(--action);outline-offset:4px}
h1{font-size:clamp(28px,6vw,40px);line-height:1.2}
h2{font-size:24px;line-height:1.3}
p{font-size:16px;line-height:1.65;color:var(--muted);overflow-wrap:anywhere}
section{padding-block:24px}
small{font-family:'IBM Plex Mono',monospace;color:var(--action)}
.light{display:none}
[data-theme="light"] .light{display:block}
[data-theme="light"] .dark{display:none}
footer{color:var(--muted);line-height:1.6}