:root {
  color-scheme: dark;
  font: 100%/1.55 system-ui, sans-serif;
  color: #fff5df;
  background: #102735;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: radial-gradient(ellipse at top, #264758, #102735 65%); }
main { width: min(100% - 2rem, 56rem); margin: auto; padding: 1.5rem 0; }
h1, h2 { font-family: Georgia, serif; line-height: 1.15; margin: .35em 0; }
h1 { font-size: clamp(1.9rem, 6vw, 3.5rem); }
header { padding: .5rem 0 1rem; }
.eyebrow { color: #ffd08a; font-weight: 700; font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; }
nav, #choices { display: flex; gap: .6rem; flex-wrap: wrap; }
nav { margin-bottom: 1rem; }
article, #ending { border: 1px solid #517485; border-radius: 1rem; overflow: hidden; background: #173746; }
#scene { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; display: block; background: #102735; }
.copy, #ending { padding: clamp(1rem, 4vw, 2rem); }
button {
  min-height: 44px;
  padding: .55rem .85rem;
  border: 1px solid #ffd08a;
  border-radius: .6rem;
  background: #ffd08a;
  color: #142933;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  text-align: left;
}
button.secondary, nav button { background: #102735; color: #fff5df; border-color: #7b9ca8; }
nav button[aria-current] { border-color: #ffd08a; color: #ffd08a; }
button:disabled { opacity: .65; cursor: default; }
:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
#feedback { min-height: 1.55em; color: #ffdbab; }
footer { color: #d0e2e8; font-size: .9rem; margin-top: 1rem; }
@media (max-width: 34rem) {
  #choices { display: grid; }
  #scene { aspect-ratio: 3 / 2; }
}