:root { color-scheme: dark; --ink:#100d28; --surface:#211b47; --surface-2:#2c235b; --text:#f8f5ff; --muted:#c6bedc; --gold:#ffd166; --focus:#84e5ff; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; background:radial-gradient(circle at top left,#413680,transparent 45%),var(--ink); color:var(--text); font:16px/1.55 OpenSansRegular,Arial,sans-serif; }
a { color:var(--gold); } .site-header, footer { max-width:1120px; margin:auto; padding:1.25rem 1.5rem; display:flex; align-items:center; gap:1rem; justify-content:space-between; } .site-header a { color:var(--text); font-size:1.2rem; font-weight:800; text-decoration:none; } .site-header span { color:var(--muted); font-size:.9rem; } main { max-width:820px; margin:auto; padding:3rem 1.5rem 5rem; } footer { justify-content:flex-start; flex-wrap:wrap; border-top:1px solid #4a3f7c; font-size:.9rem; }
.hero { max-width:720px; margin-bottom:2.5rem; } .eyebrow { color:var(--gold); font-weight:800; letter-spacing:.12em; font-size:.77rem; } h1 { font-size:clamp(2.35rem,7vw,4.8rem); line-height:1.04; margin:.4rem 0 1rem; } h2 { margin-top:0; } .lead,.muted { color:var(--muted); } .story-card { background:linear-gradient(135deg,var(--surface),var(--surface-2)); border:1px solid #544a8e; border-radius:20px; padding:clamp(1.25rem,5vw,2.5rem); box-shadow:0 24px 60px #07051166; }
label { display:block; margin:1rem 0 .35rem; font-weight:700; } input,textarea { width:100%; padding:.8rem .9rem; color:var(--text); background:#151132; border:1px solid #6c609d; border-radius:9px; font:inherit; } textarea { resize:vertical; } button { margin-top:1.3rem; background:var(--gold); color:#241a00; border:0; border-radius:9px; padding:.85rem 1.1rem; font:700 1rem inherit; cursor:pointer; } button:disabled { opacity:.65; cursor:wait; } :focus-visible { outline:3px solid var(--focus); outline-offset:3px; } .status { padding:.75rem; background:#171337; border-left:4px solid var(--gold); } .result { margin-top:1rem; padding:1rem; background:#161230; border-radius:10px; white-space:pre-wrap; } @media(max-width:600px){ .site-header span{display:none;} main{padding-top:1.6rem;} }