:root { color-scheme: dark; font-family: system-ui, sans-serif; color: #ecebe2; background: #142320; }
* { box-sizing: border-box; }
body { margin: 0; }
main { max-width: 40rem; margin: 6vh auto; padding: 1.5rem; }
h1 { font-size: clamp(2rem, 7vw, 3rem); line-height: 1.15; margin-top: .6rem; }
h2 { font-size: 1.35rem; }
p { line-height: 1.6; }
.eyebrow { color: #d9bd7b; letter-spacing: .14em; font-size: .8rem; }
section { background: #1e332d; border: 1px solid #456158; border-radius: 1rem; padding: 1.5rem; margin: 2rem 0; }
.muted { color: #becdc5; font-size: .92rem; }
.connection { font-family: ui-monospace, monospace; font-size: 1.3rem; overflow-wrap: anywhere; user-select: all; }
button { background: #e3c37e; color: #18281f; border: 1px solid transparent; border-radius: .4rem; padding: .85rem 1.2rem; font: inherit; font-weight: 650; cursor: pointer; min-height: 48px; margin: .3rem .3rem .3rem 0; }
button.secondary { background: transparent; border-color: #9bb9aa; color: #ecebe2; }
button:disabled { opacity: .5; cursor: default; }
button:focus-visible { outline: 3px solid #faf7eb; outline-offset: 3px; }
[hidden] { display: none !important; }