:root { color-scheme: dark; font-family: system-ui, sans-serif; background: #07111f; color: #f4f7fb; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 80% 10%, #14345d, transparent 35%), #07111f; }
main { width: min(900px, calc(100% - 3rem)); margin: 0 auto; padding: 12vh 0; }
.eyebrow { color: #6ee7d2; letter-spacing: .18em; font-weight: 700; }
h1 { max-width: 760px; font-size: clamp(2.5rem, 7vw, 5.5rem); line-height: 1.05; margin: 1rem 0 2rem; }
#status { color: #b9c7dc; font-size: 1.1rem; }
article { margin-top: 2rem; padding: 1.5rem; border: 1px solid #315175; border-radius: 1rem; background: #0d1c30; }
form { display: grid; gap: .8rem; max-width: 680px; margin-top: 2rem; padding: 1.5rem; border: 1px solid #315175; border-radius: 1rem; background: #0d1c30; }
select, input, button { font: inherit; padding: .8rem; border-radius: .6rem; border: 1px solid #46688e; }
button { cursor: pointer; color: #07111f; background: #6ee7d2; font-weight: 700; }
button:disabled { cursor: wait; opacity: .6; }
#cancel { background: #ffb4a8; }
#result { margin-top: 2rem; padding: 1.5rem; border: 1px solid #315175; border-radius: 1rem; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 32rem; overflow: auto; direction: ltr; text-align: left; }
[hidden] { display: none !important; }