*{box-sizing:border-box}body{font-family:Inter,system-ui,-apple-system,sans-serif;margin:0;background:#0b0c10;color:#e5e7eb}
.hero{padding:64px 24px;text-align:center;background:radial-gradient(80% 80% at 50% 0%,#111827 0%,#0b0c10 60%)}.hero h1{font-size:48px;margin:0 0 12px;font-weight:800}
.hero h1 span{color:#60a5fa}.hero p{opacity:.9;margin:0 0 16px}.cta{display:inline-block;padding:12px 18px;background:#111827;color:#fff;border:1px solid #374151;border-radius:12px;text-decoration:none}
.container{max-width:980px;margin:32px auto;padding:0 16px}.card{background:#111827;border:1px solid #1f2937;border-radius:16px;padding:20px;margin:16px 0;box-shadow:0 10px 24px rgba(0,0,0,.2)}
.card h2{margin:0 0 12px}.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
input{width:100%;padding:12px;border-radius:12px;background:#0b0c10;border:1px solid #374151;color:#e5e7eb;margin:6px 0 14px}
.actions{display:flex;gap:12px;margin:8px 0 0}.actions button{padding:10px 16px;border-radius:12px;border:1px solid #374151;background:#0b0c10;color:#fff;cursor:pointer}
pre{background:#0b0c10;border:1px solid #1f2937;padding:12px;border-radius:12px;overflow:auto}
.note{font-size:12px;opacity:.8}
footer{opacity:.6;text-align:center;margin:24px 0}