:root { font-family: system-ui, sans-serif; color: #163d36; background: #f3f2e9; line-height: 1.6; }
* { box-sizing: border-box; }
body { margin: 0; } main { max-width: 900px; margin: auto; padding: 1.2rem; }
header, section { background: #fffdf8; border: 1px solid #ccd8ce; border-radius: 1rem; padding: 1.2rem; margin-bottom: 1rem; }
[hidden] { display: none !important; } h1, h2, h3, p { overflow-wrap: anywhere; }
.eyebrow { color: #365c50; font-weight: 700; } .buttons { display: flex; flex-wrap: wrap; gap: .55rem; }
button, summary { font: inherit; } button { min-height: 48px; padding: .55rem .85rem; border: 2px solid #315a4d; border-radius: .6rem; background: #fff; color: #173c31; cursor: pointer; }
button[aria-pressed="true"] { background: #dbead0; border-style: double; border-width: 4px; font-weight: 700; }
button:disabled { opacity: .55; cursor: default; } .primary { background: #245f4b; color: white; }
button:focus-visible, summary:focus-visible, a:focus-visible { outline: 3px solid #9b4b17; outline-offset: 3px; }
fieldset { border: 2px solid #9ab2a0; border-radius: .8rem; margin: .8rem 0; min-width: 0; } legend { font-weight: 700; }
#moment, #summary { background: #e7efe7; padding: .8rem; border-radius: .5rem; } #status { min-height: 1.6em; font-weight: 700; }
dialog { max-width: min(90vw, 34rem); border: 2px solid #315a4d; border-radius: .8rem; } dialog::backdrop { background: #182f29a8; }
footer { padding: .5rem; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }