:root { color-scheme: dark; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #101827; color: #eef3fb; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(ellipse at top, #243b59, #101827 55%); }
main { width: min(680px, 100%); margin: 0 auto; padding: max(24px, env(safe-area-inset-top)) 18px max(28px, env(safe-area-inset-bottom)); }
header { padding: 22px 4px 12px; }
.eyebrow { color: #70d9c6; letter-spacing: .16em; font-size: 12px; font-weight: 700; }
h1 { font-size: clamp(30px, 8vw, 42px); margin: 8px 0; }
h2 { margin: 0 0 12px; font-size: 20px; }
.lede, .trust p, section > p, footer { color: #bac8da; line-height: 1.55; }
.card { background: rgba(26, 39, 57, .94); border: 1px solid #334861; border-radius: 16px; padding: 18px; margin: 14px 0; box-shadow: 0 12px 36px rgba(0,0,0,.16); }
.label { display: block; color: #91a6bf; font-size: 12px; margin-bottom: 6px; }
code { display: block; color: #8ce2d2; word-break: break-word; font-size: 13px; }
label { display: block; color: #cfdae8; margin: 16px 0 8px; font-size: 14px; }
textarea { width: 100%; resize: vertical; min-height: 120px; border: 1px solid #50657e; border-radius: 10px; padding: 12px; color: #f6f8fb; background: #0d1521; font: inherit; line-height: 1.45; }
textarea:focus { outline: 2px solid #70d9c6; border-color: transparent; }
button { width: 100%; margin-top: 14px; border: 0; border-radius: 10px; padding: 13px 16px; background: #70d9c6; color: #08141b; font: inherit; font-weight: 700; cursor: pointer; }
button:disabled { opacity: .55; cursor: wait; }
.status { min-height: 1.3em; font-size: 13px; color: #9ddcca; overflow-wrap: anywhere; }
.response { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 45vh; overflow: auto; border-radius: 10px; background: #0d1521; padding: 14px; color: #f6f8fb; }
.hidden { display: none; }
footer { padding: 8px 4px; font-size: 12px; }