:root { color-scheme: light dark; font-family: system-ui, sans-serif; background: #f7f5ee; color: #252d27; line-height: 1.6; }
* { box-sizing: border-box; }
body { margin: 0; }
.shell { max-width: 46rem; margin: 0 auto; padding: 2rem 1.5rem 4rem; }
a { color: inherit; text-underline-offset: .3em; }
nav { display: flex; gap: .75rem; margin: 1rem 0 2rem; }
h1 { font: 400 clamp(2.2rem, 6vw, 3.2rem)/1.15 Georgia, serif; margin: 1rem 0; }
h2 { font-size: 1.2rem; margin-top: 2rem; }
label { display: block; font-weight: 600; }
input { display: block; width: 100%; font: inherit; border: 1px solid #7a8274; border-radius: .6rem; background: transparent; color: inherit; padding: .75rem; margin: .4rem 0 1.1rem; }
button { min-height: 48px; border: 0; border-radius: 2rem; padding: .8rem 1.5rem; background: #244d3e; color: white; font: inherit; font-weight: 600; cursor: pointer; }
button:disabled { opacity: .5; cursor: wait; }
input:focus-visible, button:focus-visible, a:focus-visible { outline: 3px solid #65834a; outline-offset: 4px; }
#status:not(:empty) { border-left: 4px solid #9a422d; padding: .75rem 1rem; background: #f1e5d6; }
#retention { border-top: 1px solid #aeb4a2; padding-top: 1.5rem; margin-top: 2rem; }
[hidden] { display: none !important; }
@media(prefers-color-scheme:dark) { :root { background: #161e19; color: #e0e4d7; } button { background: #c8db91; color: #19221a; } #status:not(:empty) { background: #38291f; } }