:root { --bg:#0b0f17; --panel:#131b2b; --text:#e6edf3; --accent:#56b6c2; }
* { box-sizing: border-box; }
body { margin:0; background: radial-gradient(1000px 500px at 20% 10%, #101826, #0b0f17); color:var(--text); font:16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu; }
.container { max-width:900px; margin:0 auto; padding:16px; }
header { display:flex; align-items:center; justify-content:space-between; }
h1 { margin:8px 0 16px; font-size:28px; letter-spacing:.02em; }
button, input { color:var(--text); background:var(--panel); border:1px solid #263349; padding:8px 12px; border-radius:10px; }
button:hover { border-color:var(--accent); cursor:pointer; }
.story { background: rgba(19,27,43,.7); border:1px solid #263349; border-radius:14px; padding:16px; min-height:40vh; }
.story article { white-space:pre-wrap; margin:0 0 18px; padding:14px; border-left:3px solid var(--accent); background: rgba(255,255,255,.02); border-radius:8px; }
.choices { display:grid; grid-template-columns: 1fr auto auto auto; gap:8px; margin-top:12px; }
.choices label { grid-column: 1 / -1; opacity:.8; font-size:14px; }
.choices input { width:100%; }
.choices button { white-space:nowrap; }
@media (max-width: 640px){ .choices { grid-template-columns:1fr 1fr; } }