* { box-sizing: border-box; }

body {
  margin: 0;
  background: #fff;
  color: #000;
  font: 16px/1.25 "Times New Roman", Times, serif;
  overflow-x: hidden;
}

main {
  max-width: 860px;
  margin: 0 auto;
  padding: 48px 20px 16px;
}

a { color: #00e; }
a:visited { color: #551a8b; }

.hero { text-align: center; }
.hero img { display: block; margin: 0 auto 4px; }
.hero h1 { margin: 0 0 20px; font-size: 40px; }

.shots {
  max-width: 720px;
  margin: 32px auto;
}
.shots figcaption { margin-top: 10px; }
.shots .row { display: flex; gap: 16px; align-items: flex-start; }
.shots a { display: block; flex: 1; min-width: 0; }
/* The windows have rounded, transparent corners, so the outline follows the alpha. */
.shots img {
  display: block;
  width: 100%;
  min-width: 0;
  height: auto;
  filter: drop-shadow(1px 0 0 #bbb) drop-shadow(-1px 0 0 #bbb) drop-shadow(0 1px 0 #bbb) drop-shadow(0 -1px 0 #bbb);
}

h2 { margin: 32px 0 8px; font-size: 21px; }
h3 { margin: 20px 0 6px; font-size: 17px; }

ul, ol { padding-left: 24px; }
li { margin: 2px 0; }
.downloads a { word-break: break-all; }

code, pre { font: 13px/1.35 "Courier New", Courier, monospace; }
pre { margin: 8px 0; overflow-x: auto; }

.prompt pre {
  white-space: pre-wrap;
  padding: 8px 10px;
  border: 1px solid #bbb;
}
.prompt button { font: inherit; font-size: 13px; }

footer {
  max-width: 860px;
  margin: 0 auto;
  padding: 16px 20px 48px;
  font-size: 13px;
}