:root {
  color-scheme: dark;
  font: 17px/1.65 "Courier New", "Liberation Mono", "Nimbus Mono PS", monospace;
  color: #b7e4aa;
  background: #0b100d;
}
* { box-sizing: border-box; }
body { margin: 0; }
main {
  max-width: 800px;
  margin: 6vh auto;
  padding: clamp(20px, 5vw, 48px);
  border: 1px solid #3d5941;
  background: #101812;
  box-shadow: 0 0 50px #28462c20;
}
.eyebrow { margin-top: 0; font-size: .7rem; letter-spacing: .12em; color: #90aa91; }
h1 { font: bold clamp(2.8rem, 11vw, 4.5rem)/1.1 "Courier New", "Liberation Mono", monospace; margin: 32px 0; letter-spacing: -.04em; }
h1::before { content: "> "; color: #e6cb84; }
nav { display: flex; gap: 16px; margin: 36px 0; }
a { color: #e6cb84; text-underline-offset: .2em; }
a.play {
  flex: 1;
  padding: 18px;
  border: 1px solid #708e6c;
  background: #152219;
  text-decoration: none;
  font-weight: bold;
}
a.play span { display: block; margin-top: 8px; font-size: .8rem; font-weight: normal; color: #b7e4aa; }
a.play:hover, a.play:focus-visible { background: #253829; outline: 2px solid #e6cb84; outline-offset: 3px; }
p { margin: 1.4em 0; }
p[lang="it"], p span[lang="it"] { color: #9eb89e; }
footer { margin-top: 40px; padding-top: 20px; border-top: 1px dashed #3d5941; font-size: .7rem; overflow-wrap: anywhere; color: #90aa91; }
.license-links { display: grid; gap: .5em; }
.build-info { margin: 1.5em 0 0; }
code { font: inherit; color: #e6cb84; }
@media (max-width: 540px) {
  main { margin: 16px; padding: 20px; }
  nav { flex-direction: column; }
  .eyebrow { font-size: .6rem; letter-spacing: .06em; }
}