:root {
  --ground:#FBFAF8; --surface:#FFFFFF; --ink:#1A1D21; --muted:#5F6772;
  --rule:#E4E1DC; --accent:#1F4E5F; --accent-ink:#FFFFFF;
  --warn:#8A5A1E; --warn-bg:#FBF3E6; --ok:#2C6046;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:#14161A; --surface:#1C1F24; --ink:#E7E4DF; --muted:#98A0AA;
    --rule:#2B2F36; --accent:#7FB2C4; --accent-ink:#12161A;
    --warn:#D9A860; --warn-bg:#2A2317; --ok:#79B79A;
  }
}
* { box-sizing:border-box; }
body {
  margin:0; background:var(--ground); color:var(--ink);
  font:16px/1.6 ui-sans-serif,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.wrap { max-width:44rem; margin:0 auto; padding:4rem 1.5rem 6rem; }
h1 { font:600 1.9rem/1.15 ui-serif,Georgia,serif; letter-spacing:-.01em; margin:0 0 .5rem; }
h2 { font:600 1.15rem/1.3 ui-serif,Georgia,serif; margin:2.5rem 0 .4rem; }
.lede { color:var(--muted); margin:0 0 2.5rem; }
label { display:block; font-weight:500; margin:1.25rem 0 .3rem; }
.hint { color:var(--muted); font-size:.87rem; margin:.2rem 0 0; }
input[type=text], input[type=email], textarea, select {
  width:100%; padding:.65rem .75rem; background:var(--surface);
  border:1px solid var(--rule); border-radius:3px; color:var(--ink);
  font:inherit; font-size:.95rem;
}
textarea { min-height:5rem; resize:vertical; }
button {
  margin-top:1.75rem; padding:.7rem 1.4rem; background:var(--accent);
  color:var(--accent-ink); border:0; border-radius:3px; font:inherit;
  font-weight:500; cursor:pointer;
}
button:disabled { opacity:.5; cursor:default; }
button.quiet { background:transparent; color:var(--accent); border:1px solid var(--rule); }
.note { padding:.9rem 1.1rem; border:1px solid var(--rule); border-left:3px solid var(--accent);
        background:var(--surface); margin:1.5rem 0; }
.note.warn { border-left-color:var(--warn); background:var(--warn-bg); color:var(--warn); }
.events { list-style:none; padding:0; margin:1.5rem 0 0; }
.events li { border-top:1px solid var(--rule); padding:.7rem 0; display:flex;
             gap:1rem; justify-content:space-between; align-items:baseline; }
.events li:last-child { border-bottom:1px solid var(--rule); }
.events time { color:var(--muted); font:400 .8rem ui-monospace,Menlo,monospace;
               white-space:nowrap; font-variant-numeric:tabular-nums; }
.bar { height:.4rem; background:var(--rule); border-radius:2px; overflow:hidden; margin:.6rem 0 0; }
.bar span { display:block; height:100%; background:var(--accent); }
footer { margin-top:4rem; padding-top:1.25rem; border-top:1px solid var(--rule);
         color:var(--muted); font-size:.85rem; }
a { color:var(--accent); }