:root { color: #242a26; background: #fafbf9; font-family: system-ui, sans-serif; font-size: 16px; line-height: 1.5; }
* { box-sizing: border-box; }
body { margin: 0; }
main { max-width: 68rem; margin: auto; padding: 2.5rem 1.25rem 5rem; }
header { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; padding-bottom: 1rem; }
h1 { font-size: 1.6rem; letter-spacing: -.025em; margin: 0; }
#session { flex: 1 1 20rem; color: #515b53; font-size: .875rem; overflow-wrap: anywhere; margin: 0; }
nav { display: flex; flex-wrap: wrap; gap: .35rem; border-bottom: 1px solid #cbd2ca; padding-bottom: .75rem; }
nav button { border-color: transparent; background: transparent; }
nav [aria-current="page"] { color: white; background: #254f3e; }
h2 { font-size: 1.25rem; margin: 1.75rem 0 .75rem; }
h3 { font-size: 1rem; margin: 0 0 .5rem; }
p { margin: .5rem 0 1rem; max-width: 72ch; }
form { max-width: 40rem; margin-bottom: 1.5rem; }
label { display: block; font-size: .875rem; font-weight: 550; margin-bottom: .85rem; }
input, textarea, select, button { font: inherit; max-width: 100%; border: 1px solid #98a697; border-radius: .25rem; }
input:not([type="hidden"]), textarea, select { display: block; width: 100%; padding: .55rem .7rem; margin-top: .3rem; color: #242a26; background: white; caret-color: #254f3e; }
textarea { resize: vertical; }
button { min-height: 2.5rem; padding: .45rem .85rem; background: #fff; color: #242a26; cursor: pointer; }
form > button:not([type="button"]) { background: #254f3e; border-color: #254f3e; color: white; }
button:active:not(:disabled) { transform: scale(.98); }
button:disabled { opacity: .55; cursor: default; }
:focus-visible { outline: 2px solid #254f3e; outline-offset: 3px; }
fieldset { min-width: 0; border: 1px solid #cbd2ca; padding: .75rem; margin: 0 0 1rem; }
legend, .hint, form > p { color: #515b53; font-size: .875rem; }
article { border-bottom: 1px solid #cbd2ca; padding-block: 1.1rem; overflow-wrap: anywhere; }
article p, article h3, article li { white-space: pre-wrap; }
article p { margin-bottom: .5rem; }
article button { margin: .25rem .4rem .25rem 0; }
article p:last-of-type { color: #515b53; font-size: .875rem; }
#message { white-space: pre-wrap; overflow-wrap: anywhere; padding-block: .75rem; margin: 0; color: #515b53; min-height: 3rem; }
#message[data-error="true"] { color: #a22a23; }
#auth { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; }
::selection { background: #d4e8d9; color: #162d23; }
@media (hover: hover) and (pointer: fine) { button:hover:not(:disabled) { border-color: #254f3e; } }
@media (max-width: 42rem) { main { padding-top: 1.25rem; } #auth { grid-template-columns: 1fr; gap: .5rem; } nav button { flex: 1 0 auto; } }
[hidden] { display: none !important; }