:root{color-scheme:dark;font:16px/1.6 system-ui,sans-serif;color:#eee9fa;background:#100d19}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 70% 0,#30204488,transparent 55%)}main{max-width:1140px;margin:auto;padding:32px 28px}header,footer,.heading{display:flex;align-items:center;justify-content:space-between;gap:16px}.brand{font-weight:800;letter-spacing:.12em;color:#c4a3ff}.pill{font-size:12px;border:1px solid #56466e;border-radius:20px;padding:4px 12px;color:#cbbadd}.intro{max-width:760px;padding:70px 0 35px}.eyebrow{font-size:12px;letter-spacing:.15em;color:#b792ef}h1{font-size:clamp(40px,6vw,72px);line-height:1.08;letter-spacing:-.04em;margin:14px 0 22px}p{color:#b9adc9}h2{font-size:20px;margin:0}.flow{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;border:1px solid #473653;background:#20172d;border-radius:12px;padding:22px 28px;margin:18px 0 28px}.flow b{color:#a47adc}.flow small{color:#c2a1ee}.grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}article{min-width:0;background:#1a1424;border:1px solid #3c2f4b;border-radius:14px;padding:26px}article p{font-size:14px}button{font:inherit;font-size:14px;font-weight:600;background:#ad7af1;color:#130e1d;border:0;border-radius:8px;padding:10px 16px;cursor:pointer}button:hover{background:#c59aff}button:disabled{opacity:.55;cursor:wait}button:focus-visible,input:focus-visible{outline:2px solid #dbc0ff;outline-offset:3px}label{display:block;font-size:13px;color:#d8c6ec;margin-bottom:6px}input{width:100%;font:inherit;border:1px solid #544064;border-radius:8px;padding:10px 12px;background:#100c18;color:#eee9fa;margin-bottom:14px}pre{font:12px/1.7 ui-monospace,monospace;white-space:pre-wrap;overflow-wrap:anywhere;background:#0f0b16;border-radius:8px;padding:18px;min-height:190px;color:#d7c1f5;margin:20px 0 0}[data-state=ok]{color:#a5e8c3;border-color:#32664c}[data-state=error]{color:#ffa6b5;border-color:#864256}footer{font-size:12px;color:#93839f;border-top:1px solid #392d44;margin-top:42px;padding:22px 0}@media(max-width:720px){main{padding:22px 18px}.grid{grid-template-columns:1fr}.intro{padding-top:45px}.flow{justify-content:flex-start}header,footer{flex-wrap:wrap}.heading{flex-wrap:wrap}}
