:root{color-scheme:dark;font:17px/1.7 system-ui,sans-serif;color:#e8edf5;background:#111722}*{box-sizing:border-box}body{margin:0}header,main,footer{max-width:960px;margin:auto;padding:24px}header{display:flex;justify-content:space-between;gap:16px;border-bottom:1px solid #344050}a{color:#72ddbb;text-underline-offset:4px}h1{font-size:clamp(30px,5vw,48px);line-height:1.16;letter-spacing:-1px}h2{line-height:1.3}h3{font-size:18px}.eyebrow{font:12px monospace;color:#72ddbb;letter-spacing:2px}.lead{font-size:20px;color:#b8c7da}section{margin:28px 0;padding:24px;border:1px solid #344050;border-radius:12px;background:#192230}section p{color:#c1ccdc}form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}label{display:grid;font-size:14px;gap:6px}input,button{font:inherit;border:1px solid #63738a;border-radius:6px;padding:10px;min-width:0}input{background:#111722;color:#edf2f8;width:100%}button,.cta{background:#72ddbb;color:#10211b;cursor:pointer;font-weight:600}button{align-self:end}output{display:block;padding:18px 0;font-weight:600;white-space:pre-line}code{display:block;overflow-wrap:anywhere;color:#a9cdff;background:#111722;padding:16px}svg{width:100%;height:auto;display:block}nav{margin-top:45px}nav a{display:block;margin:12px 0}.cta{display:inline-block;padding:12px;border-radius:6px;text-decoration:none}footer{font-size:13px;color:#bac4d4}a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid #a9cdff;outline-offset:3px}@media(max-width:600px){form{grid-template-columns:1fr}header{flex-wrap:wrap}section{padding:18px}main{padding:18px}}