:root {
  --teal: #008080;
  --silver: #c0c0c0;
  --navy: #000080;
  --sky: #1084d0;
  --paper: #ffffff;
  --ink: #000000;
  --tip: #ffffe1;
  --bevel-light: #ffffff;
  --bevel-shadow: #808080;
  --bevel-dark: #000000;
  --vga-yellow: #ffff55;
  --vga-cyan: #55ffff;
  --vga-gray: #aaaaaa;
  --text-soft: #303030;
  --font-pixel: "Pixelify Sans", "Courier New", monospace;
  --font-display: Verdana, Tahoma, "Segoe UI", sans-serif;
  --font-body: Tahoma, Verdana, "Segoe UI", sans-serif;
  --font-post: "Courier New", Courier, monospace;
  --gutter: clamp(16px, 4vw, 56px);
  --measure: 62ch;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  -webkit-tap-highlight-color: transparent;
  background: var(--paper);
  color: var(--ink);
  font: 17px/1.6 var(--font-body);
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

h2 {
  font-size: clamp(1.9rem, 4.2vw, 3.1rem);
}

h3 {
  font-size: 1.6rem;
}

p {
  margin: 0;
  max-width: var(--measure);
  text-wrap: pretty;
}

p + p {
  margin-top: 0.9em;
}

a {
  color: var(--navy);
}

:focus-visible {
  outline: 2px dotted currentColor;
  outline-offset: 3px;
}

.skip {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 10;
  padding: 8px 12px;
  background: var(--paper);
  color: var(--ink);
}

.skip:focus {
  top: 16px;
}

.screen {
  margin: 0;
}

.screen img {
  width: 100%;
  border: 2px solid var(--ink);
  box-shadow: 6px 6px 0 rgb(0 0 0 / 0.35);
}

.screen figcaption {
  margin-top: 10px;
  font-size: 0.88rem;
  color: var(--text-soft);
}

.key {
  display: inline-block;
  padding: 10px 18px;
  border: 2px solid var(--vga-gray);
  background: transparent;
  color: var(--vga-yellow);
  font: 700 1rem/1.3 var(--font-post);
  text-decoration: none;
}

.key:hover {
  background: var(--vga-yellow);
  border-color: var(--vga-yellow);
  color: var(--ink);
}

.key:focus-visible {
  outline-color: var(--vga-yellow);
}

.key-quiet {
  color: var(--paper);
}

.post {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 48px;
  padding: 24px var(--gutter) 20px;
  background: #000000;
  color: var(--paper);
  font-family: var(--font-post);
}

.post-lines {
  list-style: none;
  margin: 0 0 clamp(40px, 9vh, 96px);
  padding: 0;
  font-size: clamp(0.8rem, 1.6vw, 1rem);
  line-height: 1.55;
}

.post-lines li {
  white-space: pre-wrap;
}

.post-lines li {
  animation: post-line 1ms step-end both;
  animation-delay: calc(var(--i) * 170ms + 150ms);
}

.post-lines .gap {
  margin-top: 1.4em;
}

.dim {
  color: var(--vga-gray);
}

.yellow {
  color: var(--vga-yellow);
}

.cyan {
  color: var(--vga-cyan);
}

@keyframes post-line {
  from {
    visibility: hidden;
  }
  to {
    visibility: visible;
  }
}

.title {
  font-family: var(--font-pixel);
  font-size: clamp(3.2rem, 11vw, 9rem);
  line-height: 0.92;
  letter-spacing: 0;
}

.title span {
  display: block;
  color: var(--vga-yellow);
}

.lede {
  margin-top: 28px;
  max-width: 44ch;
  font: 1.15rem/1.6 var(--font-body);
  color: #e4e4e4;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

.post-note {
  margin-top: 14px;
  font-size: 0.9rem;
  color: var(--vga-gray);
}

.post-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  padding-top: 14px;
  border-top: 1px solid #555555;
  font-size: 0.85rem;
  color: var(--vga-gray);
}

.desk {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
  padding: clamp(56px, 9vw, 120px) var(--gutter);
  background: var(--teal);
  color: var(--paper);
}

.desk .screen img {
  border-color: var(--ink);
}

.desk-text h2 {
  margin-bottom: 24px;
}

@media (min-width: 960px) {
  .desk {
    grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1.6fr);
    align-items: start;
  }
}

.route {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
  padding: clamp(56px, 9vw, 120px) var(--gutter);
}

.route-head p {
  margin-top: 16px;
  font-size: 1.15rem;
}

.route-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.route-steps li {
  counter-increment: step;
  position: relative;
  max-width: 46ch;
  padding: 0 0 22px 64px;
}

.route-steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: -2px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: var(--navy);
  color: var(--paper);
  font: 700 1.3rem/1 var(--font-pixel);
}

.route-shots {
  display: grid;
  gap: 32px;
}

@media (min-width: 960px) {
  .route {
    grid-template-columns: minmax(300px, 0.9fr) minmax(0, 1.4fr);
    column-gap: 56px;
  }
  .route-head {
    grid-column: 1 / -1;
  }
  .route-steps {
    position: sticky;
    top: 32px;
    align-self: start;
  }
}

.games {
  padding: clamp(56px, 9vw, 120px) var(--gutter);
  background: var(--silver);
  border-top: 2px solid var(--bevel-light);
}

.games-head {
  margin-bottom: 40px;
}

.games-head p {
  margin-top: 18px;
}

.shelf {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr));
  gap: 28px 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.game {
  display: block;
  touch-action: manipulation;
  color: var(--ink);
  text-decoration: none;
}

.game img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 2px solid;
  border-color: var(--bevel-shadow) var(--bevel-light) var(--bevel-light) var(--bevel-shadow);
  background: var(--ink);
}

.game:hover img {
  border-color: var(--navy);
}

.game:focus-visible {
  outline: 2px dotted var(--ink);
  outline-offset: 4px;
}

.game-title {
  display: block;
  margin-top: 8px;
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.3;
}

.game:hover .game-title {
  color: var(--navy);
  text-decoration: underline;
}

.game-genre {
  display: block;
  font-size: 0.85rem;
  color: var(--text-soft);
}

.is-red {
  --level: #d40000;
}

.is-orange {
  --level: #ff7a00;
}

.is-yellow {
  --level: #ffd800;
}

.is-lime {
  --level: #8fe03c;
}

.is-green {
  --level: #007a29;
}

.is-blue {
  --level: #0047c8;
}

.game-level {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.3;
}

.game-level::before {
  content: '';
  flex: none;
  width: 14px;
  height: 14px;
  border: 1px solid var(--ink);
  background: var(--level);
}

.game-level[hidden] {
  display: none;
}

.game[class*='is-'] img {
  border-bottom: 6px solid var(--level);
}

.legend {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 10px 32px;
  max-width: 1100px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.legend li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.legend .game-level {
  margin-top: 0;
  align-items: flex-start;
  font-size: 0.95rem;
  font-weight: 400;
}

.legend .game-level::before {
  margin-top: 3px;
}

.legend-count {
  flex: none;
  color: var(--text-soft);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.games-foot {
  margin-top: 40px;
  font-size: 0.95rem;
}

.web {
  padding: clamp(56px, 9vw, 120px) var(--gutter);
}

.web-head {
  margin-bottom: 40px;
}

.web-head p {
  margin-top: 18px;
}

.web-shots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 32px 24px;
}

.netscape {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  margin-top: clamp(56px, 8vw, 96px);
  padding-top: clamp(40px, 6vw, 64px);
  border-top: 2px solid var(--ink);
}

.netscape-text h3 {
  margin-bottom: 18px;
}

@media (min-width: 960px) {
  .netscape {
    grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.8fr);
    align-items: start;
  }
  .netscape .screen {
    order: -1;
  }
}

.clippy {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: start;
  gap: 32px;
  padding: clamp(56px, 9vw, 120px) var(--gutter);
  background: var(--tip);
  border-block: 2px solid var(--ink);
}

.clippy-pic {
  width: min(100%, 402px);
  image-rendering: pixelated;
  border: 2px solid var(--ink);
}

.clippy-text h2 {
  margin-bottom: 24px;
}

@media (min-width: 820px) {
  .clippy {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 56px;
  }
}

.more {
  padding: clamp(56px, 9vw, 120px) var(--gutter);
}

.more h2 {
  margin-bottom: 40px;
}

.more-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
}

.programs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: 24px 32px;
  margin: 0;
  align-content: start;
}

.programs dt {
  font-weight: 700;
}

.programs dd {
  margin: 4px 0 0;
  font-size: 0.95rem;
  color: var(--text-soft);
}

.more-shots {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 24px;
}

.more-shots img {
  border: 2px solid var(--ink);
  box-shadow: 6px 6px 0 rgb(0 0 0 / 0.35);
}

.more-shots img:first-child {
  width: min(100%, 242px);
}

.more-shots img:last-child {
  width: min(100%, 382px);
}

@media (min-width: 1100px) {
  .more-grid {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

.boot {
  padding: clamp(56px, 9vw, 120px) var(--gutter);
  background: #000000;
  color: var(--paper);
}

.boot h2 {
  margin-bottom: 40px;
  color: var(--vga-yellow);
}

.boot-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
  margin-bottom: 44px;
  font-family: var(--font-post);
}

.boot-steps {
  margin: 0;
  padding-left: 1.6em;
}

.boot-steps li {
  max-width: 44ch;
  padding-left: 6px;
}

.boot-steps li + li {
  margin-top: 12px;
}

.boot-steps li::marker {
  color: var(--vga-cyan);
  font-weight: 700;
}

.req {
  display: grid;
  gap: 8px;
  margin: 0;
}

.req div {
  display: grid;
  grid-template-columns: 12ch minmax(0, 1fr);
  gap: 16px;
}

.req dt {
  color: var(--vga-gray);
}

.req dd {
  margin: 0;
}

@media (min-width: 960px) {
  .boot-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.taskbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px 24px;
  padding: 12px var(--gutter);
  background: var(--silver);
  border-top: 2px solid var(--bevel-light);
  box-shadow: inset 0 1px 0 var(--silver), inset 0 -1px 0 var(--bevel-shadow);
  font-size: 0.85rem;
}

.taskbar a {
  padding: 4px 10px;
  border: 2px solid;
  border-color: var(--bevel-shadow) var(--bevel-light) var(--bevel-light) var(--bevel-shadow);
  color: var(--ink);
  text-decoration: none;
}

.taskbar a:hover {
  text-decoration: underline;
}

.window {
  width: min(900px, calc(100vw - 32px));
  max-height: calc(100svh - 32px);
  padding: 0;
  border: 2px solid;
  border-color: var(--bevel-light) var(--bevel-dark) var(--bevel-dark) var(--bevel-light);
  background: var(--silver);
  color: var(--ink);
  box-shadow: inset -1px -1px 0 var(--bevel-shadow), inset 1px 1px 0 #dfdfdf;
  overflow: hidden;
}

.window[open] {
  display: flex;
  flex-direction: column;
}

body:has(.window[open]) {
  overflow: hidden;
}

.window::backdrop {
  background: rgb(0 0 0 / 0.55);
}

.window-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 3px;
  padding: 3px 3px 3px 8px;
  background: linear-gradient(90deg, var(--navy), var(--sky));
  color: var(--paper);
}

.window-title {
  font: 700 0.95rem/1.3 var(--font-body);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.window-close {
  flex: none;
  width: 32px;
  height: 28px;
  padding: 0;
  border: 2px solid;
  border-color: var(--bevel-light) var(--bevel-dark) var(--bevel-dark) var(--bevel-light);
  background: var(--silver);
  color: var(--ink);
  font: 700 1.1rem/1 var(--font-body);
  cursor: pointer;
  touch-action: manipulation;
}

.window-close:active {
  border-color: var(--bevel-dark) var(--bevel-light) var(--bevel-light) var(--bevel-dark);
}

.window-close:focus-visible {
  outline: 1px dotted var(--ink);
  outline-offset: -5px;
}

.window-body {
  padding: 12px 16px 20px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.window-sub {
  font-size: 0.95rem;
}

.window-shots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 14px;
  margin-top: 14px;
}

.window-shots figure {
  margin: 0;
}

.window-shots img {
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 2px solid;
  border-color: var(--bevel-shadow) var(--bevel-light) var(--bevel-light) var(--bevel-shadow);
  background: var(--ink);
}

.window-shots figcaption {
  margin-top: 4px;
  font-size: 0.85rem;
  color: var(--text-soft);
}

.window-level {
  margin-top: 16px;
  font-size: 0.95rem;
}

.window-genre {
  margin-top: 12px;
  font-weight: 700;
}

.window-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.window-tags li {
  padding: 1px 8px;
  border: 1px solid var(--bevel-shadow);
  background: var(--paper);
  font-size: 0.85rem;
}

.window-desc {
  margin-top: 14px;
  font-size: 0.95rem;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .post-lines li {
    animation: none;
  }
}

@media (min-width: 700px) {
  .shelf {
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  }
}