:root { color-scheme: light; font-family: system-ui, sans-serif; background: #f6f1e8; color: #34291e; }
* { box-sizing: border-box; }
body { margin: 0; }
main { max-width: 700px; margin: 0 auto; padding: 24px 16px 64px; }
header { display: flex; align-items: center; gap: 16px; margin: 20px 0 32px; }
.mark { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 18px; background: #473b2e; color: #fbe2b4; font-size: 48px; line-height: 1; }
h1 { margin: 0; font-size: 1.65rem; }
header p { margin: 4px 0 0; color: #66594d; }
.card { background: #fffdf8; border: 1px solid #e3d8c6; border-radius: 20px; padding: 24px; margin: 16px 0; box-shadow: 0 8px 24px #4c32100d; }
.eyebrow { text-transform: uppercase; letter-spacing: .12em; font-weight: 700; color: #816a50; font-size: .75rem; }
h2 { margin: 0 0 12px; font-size: 1.3rem; }
#instruction { color: #66594d; }
#countdown { display: block; margin: 26px 0 8px; font-size: clamp(2.6rem, 11vw, 5rem); font-weight: 750; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
#due { min-height: 1.4em; color: #66594d; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
button { border: 0; background: #473b2e; color: white; font: inherit; font-weight: 650; padding: 13px 18px; border-radius: 10px; cursor: pointer; }
button.secondary { background: #eee5d8; color: #34291e; }
button:focus-visible { outline: 3px solid #b57628; outline-offset: 3px; }
button:disabled { opacity: .55; cursor: default; }
[hidden] { display: none !important; }
ol { padding-left: 24px; line-height: 2; }
li { padding-left: 7px; }
li.complete { color: #81786f; text-decoration: line-through; }
li.current { font-weight: 750; color: #955622; }
.settings p { line-height: 1.5; color: #66594d; }