:root {
  --bg: #0f1a14; --panel: #182a20; --line: #2f4a3a; --text: #f7f1e3;
  --muted: #a9bfae; --orange: #ff7a1a; --lime: #b8f04a; --danger: #ff6b5a;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 5rem; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 1rem/1.6 "Avenir Next", "Trebuchet MS", system-ui, sans-serif;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.top, main, footer { max-width: 44rem; margin: 0 auto; padding: 0 1rem; }
.top { padding-top: 2rem; }
h1 {
  font-size: clamp(2.4rem, 11vw, 4rem); line-height: 1; margin: 0 0 .6rem;
  color: var(--orange); letter-spacing: -.03em;
}
h2 { font-size: 1.35rem; margin: 2.2rem 0 .5rem; color: var(--lime); }
p { max-width: 62ch; }
.sticky {
  position: sticky; top: 0; z-index: 5; background: var(--bg);
  padding: .6rem 0 .1rem; border-bottom: 1px solid var(--line);
}
#progress { margin: 0; font-weight: 700; font-size: 1.1rem; }
.bar { height: .75rem; background: var(--panel); border-radius: 1rem; overflow: hidden; margin: .5rem 0 .6rem; }
#bar-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--orange), var(--lime)); }
label { display: block; margin: 1rem 0 .3rem; color: var(--muted); }
input, select, textarea {
  width: 100%; min-height: 3rem; padding: .7rem .85rem; font: inherit; font-size: 1rem;
  color: var(--text); background: var(--panel); border: 1px solid var(--line); border-radius: .6rem;
}
select { margin-bottom: .25rem; }
:focus-visible { outline: 3px solid var(--lime); outline-offset: 2px; }
button {
  width: 100%; min-height: 3.25rem; margin-top: 1.25rem; padding: .8rem 1.4rem; font: inherit;
  font-weight: 800; color: #1a0d00; background: var(--orange); border: 0; border-radius: .7rem; cursor: pointer;
}
button:active { transform: translateY(1px); }
button:disabled { opacity: .6; cursor: wait; }
.list { list-style: none; padding: 0; margin: 1rem 0 0; }
.list li { border-top: 1px solid var(--line); }
.list > li { padding: .8rem .25rem; }
.list label { display: flex; gap: .9rem; margin: 0; color: var(--text); cursor: pointer; min-height: 2.75rem; }
.list input[type="checkbox"] { width: 1.6rem; height: 1.6rem; min-height: 0; flex: none; margin-top: .15rem; accent-color: var(--orange); }
.list .done .title { text-decoration: line-through; color: var(--muted); }
.title { font-weight: 700; }
.meta, .desc, .empty, footer { color: var(--muted); }
.desc { display: block; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
#form-msg { min-height: 1.6rem; font-weight: 600; }
#form-msg.error { color: var(--danger); }
#form-msg.ok { color: var(--lime); }
footer { padding-top: 2rem; padding-bottom: 3rem; font-size: .9rem; }
@media (min-width: 40rem) {
  button { width: auto; }
  select { width: auto; min-width: 14rem; }
}
@media (prefers-reduced-motion: no-preference) { #bar-fill { transition: width .3s ease; } }