:root { color-scheme: dark; font: 17px/1.55 system-ui, sans-serif; background: #151e28; color: #fff5df; }
body { margin: 0; }
main { max-width: 760px; margin: auto; padding: clamp(12px, 4vw, 32px); }
header p { letter-spacing: .16em; color: #ffd498; }
h1, h2, h3 { line-height: 1.25; }
nav { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1rem; }
article, #ending { background: #222e3b; border-radius: 20px; overflow: hidden; }
#scene { display: block; width: 100%; height: auto; }
.copy, #ending { padding: clamp(16px, 4vw, 32px); }
form { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
form label { flex-basis: 100%; }
input, button { font: inherit; border-radius: .6rem; padding: .55rem .75rem; }
input { width: min(100%, 15rem); box-sizing: border-box; }
button { border: 1px solid #bda487; background: #fff0ca; color: #18212d; cursor: pointer; }
button[aria-current] { background: #ffd18a; }
button:disabled { opacity: .55; cursor: default; }
:focus-visible { outline: 3px solid #ffa561; outline-offset: 3px; }
summary { cursor: pointer; }
details { margin-bottom: 1rem; }
#feedback { min-height: 1.55em; }
#tiles { display: flex; gap: .4rem; }