:root { color-scheme: dark; font: 16px/1.5 system-ui, sans-serif; background: #101813; color: #f0f4ed; }
* { box-sizing: border-box; }
main { width: min(68rem, 94%); margin: 2.5rem auto; }
h1 { font-size: clamp(2rem, 5vw, 3.25rem); margin: 0 0 1rem; line-height: 1.1; }
h2 { margin-top: 0; }
.eyebrow, a { color: #a7e7a1; }
.eyebrow { font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
nav, .inline { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; align-items: end; }
.account { margin-block: 1.25rem; align-items: center; }
section, .login { margin-block: 1.25rem; padding: clamp(1rem, 3vw, 2rem); background: #18261e; border: 1px solid #375143; border-radius: .8rem; }
.login { max-width: 28rem; }
label { display: grid; gap: .25rem; margin-bottom: .5rem; }
input, button { font: inherit; border-radius: .4rem; padding: .6rem .8rem; }
input { border: 1px solid #678575; background: #101813; color: inherit; min-width: 0; width: 100%; }
button { cursor: pointer; border: 1px solid #a7e7a1; background: #a7e7a1; color: #102219; font-weight: 650; }
.inline label { margin-bottom: 0; }
.check { display: flex; align-items: center; }
.check input { width: auto; }
ul { padding-left: 1.25rem; }
li, article { padding-block: .65rem; overflow-wrap: anywhere; }
li form { margin-top: .5rem; }
pre { white-space: pre-wrap; }
.tag { display: inline-block; padding: .1rem .5rem; border-radius: 1rem; background: #334b3d; }
:focus-visible { outline: 3px solid #ffdf88; outline-offset: 3px; }