:root { color-scheme: light; --ink:#142c3b; --paper:#f5f7f8; --line:#9aaeb9; --accent:#075a75; }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font:1rem/1.6 system-ui,sans-serif; }
main { max-width:64rem; margin:auto; padding:2rem 1rem; }
h1 { line-height:1.2; font-size:2rem; } h2 { margin-top:2rem; font-size:1.25rem; }
.badge { font-size:.75rem; font-weight:700; letter-spacing:.1em; }
#controls { display:flex; flex-wrap:wrap; gap:.75rem; }
button { padding:.75rem 1rem; border:1px solid var(--accent); border-radius:.25rem; background:white; color:var(--accent); font:inherit; cursor:pointer; }
button:hover { background:#e0eff3; } button:disabled { opacity:.6; cursor:wait; }
button:focus-visible { outline:3px solid var(--ink); outline-offset:3px; }
pre { white-space:pre-wrap; overflow-wrap:anywhere; padding:1rem; background:white; border:1px solid var(--line); }
iframe { width:100%; min-height:16rem; border:1px solid var(--line); background:white; }