:root { color-scheme: dark; font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #f2f4ed; background: #141815; font-synthesis: none; }
* { box-sizing: border-box; }
body { margin: 0; }
main { max-width: 820px; margin: auto; padding: 56px 28px 32px; }
.brand { color: inherit; font-size: 23px; font-weight: 750; letter-spacing: -.8px; text-decoration: none; }
.brand span { color: #b5ea78; }
.eyebrow { color: #b5ea78; margin: 84px 0 20px; font-size: 14px; }
h1 { font-size: clamp(48px, 8vw, 78px); line-height: 1.05; letter-spacing: -3px; margin: 0 0 26px; }
h1 span { color: #8c978f; }
.intro { max-width: 530px; line-height: 1.7; color: #bbc4bd; font-size: 18px; }
form { margin-top: 42px; padding: 26px; border: 1px solid #384239; border-radius: 14px; background: #1b211c; }
label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 12px; }
.input-row { display: flex; gap: 10px; }
input { min-width: 0; flex: 1; width: 100%; color: #f2f4ed; background: #141815; border: 1px solid #49574a; border-radius: 7px; padding: 14px; font: inherit; }
input::placeholder { color: #8c978f; }
button { border: 0; border-radius: 7px; padding: 14px 20px; background: #b5ea78; color: #172510; font: inherit; font-weight: 650; cursor: pointer; white-space: nowrap; }
button:hover { background: #c5f58e; }
:focus-visible { outline: 3px solid #d5ffad; outline-offset: 3px; }
#message { color: #b5ea78; font-size: 14px; min-height: 1.2em; margin-bottom: 0; }
#result { margin-top: 25px; }
aside { margin: 36px 0 52px; color: #aeb9b0; font-size: 14px; line-height: 1.8; }
h2 { font-size: 15px; color: #e5eae5; }
code { color: #cce9af; overflow-wrap: anywhere; }
footer { border-top: 1px solid #323b33; padding-top: 24px; color: #8c978f; font-size: 12px; line-height: 1.7; }
@media (max-width: 560px) { main { padding: 30px 20px; } .eyebrow { margin-top: 60px; } form { padding: 18px; } .input-row { flex-direction: column; } h1 { letter-spacing: -2px; } button { width: 100%; } }