:root { --bg:#060812; --panel:#0c1224; --text:#e6edf3; --accent:#56b6c2; --line:#23304a; --muted:#9aa4b2; }
* { box-sizing: border-box; }
body {
  margin:0;
  background: radial-gradient(900px 600px at 20% 10%, #0f1a33 0%, transparent 55%),
              radial-gradient(800px 520px at 80% 20%, #10243b 0%, transparent 60%),
              var(--bg);
  color:var(--text);
  font:16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu;
}
.container { max-width: 980px; margin: 0 auto; padding: 16px; }
header { display:flex; align-items:center; justify-content:space-between; gap: 10px; }
h1 { margin: 10px 0 14px; letter-spacing: .02em; }
.hdrBtns{display:flex; gap:10px; align-items:center;}
button, input {
  color:var(--text);
  background:rgba(12,18,36,.85);
  border:1px solid rgba(35,48,74,.85);
  padding:10px 12px;
  border-radius:12px;
}
button:hover { border-color: var(--accent); cursor:pointer; }
.linkBtn{
  display:inline-block;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(35,48,74,.85);
  background:rgba(12,18,36,.55);
  color:var(--text);
  text-decoration:none;
}
.linkBtn:hover{border-color: var(--accent);}
.story {
  background: rgba(12,18,36,.75);
  border:1px solid rgba(35,48,74,.85);
  border-radius:16px;
  padding:16px;
  min-height: 45vh;
  box-shadow: 0 0 26px rgba(0,0,0,.25);
}
.story article {
  white-space: pre-wrap;
  margin: 0 0 16px;
  padding: 14px;
  border-left: 3px solid var(--accent);
  background: rgba(255,255,255,.03);
  border-radius: 10px;
}
.choices { display:grid; grid-template-columns: 1fr auto auto auto; gap: 10px; margin-top: 12px; }
.choices label { grid-column: 1 / -1; color: var(--muted); font-size: 14px; }
.choices input { width: 100%; }
.tiny { margin-top: 12px; color: var(--muted); font-size: 14px; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
@media (max-width: 720px) { .choices { grid-template-columns: 1fr 1fr; } }