:root{color-scheme:light dark;--ink:#1e1e1e;--bg:#fff;--muted:#666;--line:#ccc;--accent:#2f4f3a}
@media (prefers-color-scheme:dark){:root{--ink:#eee;--bg:#161616;--muted:#aaa;--line:#444;--accent:#9cc3a6}}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 system-ui,sans-serif}
main{max-width:40rem;margin:0 auto;padding:1rem}
footer{max-width:40rem;margin:2rem auto;padding:1rem;font-size:.85rem;color:var(--muted)}
fieldset{border:1px solid var(--line);margin:0 0 1rem;padding:.75rem}
label{display:block;margin:.35rem 0}
input,textarea,select,button{font:inherit}
input:not([type=radio]):not([type=checkbox]),textarea,select{width:100%;box-sizing:border-box;padding:.4rem}
button{padding:.6rem 1rem;background:var(--accent);color:#fff;border:0;cursor:pointer}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.error{color:#b43c2c}.small{font-size:.85rem;color:var(--muted)}.demo{background:#b43c2c;color:#fff;padding:.4rem}
.note{border-left:4px solid var(--accent);padding-left:.5rem}.giro svg{width:12rem;height:12rem;background:#fff}
dl{display:grid;grid-template-columns:auto 1fr;gap:.25rem 1rem}dt{color:var(--muted)}dd{margin:0}
form.inline{display:inline}table{border-collapse:collapse;width:100%}td,th{border-bottom:1px solid var(--line);padding:.3rem;text-align:left}