:root { color-scheme: light dark; --paper:#f5f4eb; --panel:#fffdf5; --ink:#172b23; --line:#a7b2a4; --accent:#245640; --button:#fff; }
:root[data-theme="dark"] { color-scheme:dark; --paper:#14231d; --panel:#1c3027; --ink:#eff5e8; --line:#678475; --accent:#b9e5c8; --button:#14231d; }
@media (prefers-color-scheme:dark) { :root:not([data-theme="light"]) { --paper:#14231d; --panel:#1c3027; --ink:#eff5e8; --line:#678475; --accent:#b9e5c8; --button:#14231d; } }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; background:var(--paper); color:var(--ink); font: 1rem/1.65 system-ui,sans-serif; }
main { max-width:900px; margin:auto; padding:clamp(16px,4vw,48px); }
nav { display:flex; justify-content:space-between; gap:12px; }
a { color:var(--accent); }
header { margin:36px 0 24px; }
header p:first-child { letter-spacing:.15em; font-weight:700; }
h1 { font-size:clamp(2rem,6vw,3.5rem); line-height:1.1; margin:8px 0; }
section { padding:clamp(16px,4vw,32px); border:1px solid var(--line); border-radius:16px; margin-block:18px; background:var(--panel); }
form { display:grid; gap:12px; padding-block:16px; border-top:1px solid var(--line); }
label { display:grid; gap:4px; }
input,select,button { font:inherit; min-height:44px; border-radius:8px; padding:6px 12px; }
input,select { min-width:0; background:var(--paper); color:var(--ink); border:1px solid var(--line); }
button { justify-self:start; background:var(--accent); color:var(--button); border:0; cursor:pointer; }
button:disabled { opacity:.6; }
li { margin-block:10px; overflow-wrap:anywhere; }
li button { margin-inline-start:8px; }

@media (max-width: 600px) {
  section { min-width: 0 }
  input:not([type=checkbox]), select, textarea { font-size: 16px; width: 100% }
  form button { width: 100% }
  li button { display: block; margin: .5rem 0 0 }
}