:root { color-scheme: dark; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #101112; color: #f2f0e9; --accent: #bcf66c; --muted: #a4aaa4; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
header, footer { display: flex; align-items: center; justify-content: space-between; padding: 1.75rem clamp(1.5rem, 6vw, 5rem); }
header { border-bottom: 1px solid #30342f; }
.brand { display: inline-flex; align-items: center; gap: .8rem; font-size: .8rem; font-weight: 800; letter-spacing: .16em; color: inherit; text-decoration: none; }
.brand-dot { width: .45rem; height: .45rem; background: var(--accent); border-radius: 50%; }
main { flex: 1; display: grid; place-items: center; padding: 4rem 1.5rem; }
.sign-in { width: min(100%, 28rem); }
.mark { position: relative; display: grid; place-items: center; width: 4.5rem; height: 4.5rem; margin-bottom: 3rem; border: 1px solid #41473d; font-size: 1.5rem; font-weight: 800; letter-spacing: -.08em; }
.mark span { position: absolute; right: -.25rem; bottom: -.25rem; width: .7rem; height: .7rem; background: var(--accent); }
.eyebrow { margin: 0 0 1rem; color: var(--muted); font-size: .7rem; font-weight: 700; letter-spacing: .2em; }
h1 { margin: 0 0 2.75rem; font-size: clamp(3.75rem, 12vw, 6rem); font-weight: 550; letter-spacing: -.065em; line-height: 1; }
h1 span { color: var(--accent); }
form { margin: 0; }
button { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 1rem 1.25rem; border: 1px solid transparent; border-radius: 6px; background: var(--accent); color: #17200f; font: inherit; font-weight: 650; cursor: pointer; }
button span { font-size: 1.4rem; line-height: 1; }
button:hover { background: #d0ff90; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 5px; }
footer { border-top: 1px solid #30342f; color: var(--muted); font-size: .75rem; }