@font-face { font-family: "DotGothic16"; src: url("DotGothic16-Regular.ttf") format("truetype"); font-display: swap; }
:root {
  --desk: #2f8f8a;
  --face: #c9c3b4;
  --card: #f4f1e8;
  --ink: #1a1a1a;
  --muted: #4a4a4a;
  --title: #1d3f8f;
  --title-ink: #ffffff;
  --hi: #ffffff;
  --lo: #6e6a60;
  --edge: #1a1a1a;
  --link: #1d3f8f;
}
@media (prefers-color-scheme: dark) {
  :root {
    --desk: #123b39;
    --face: #3a3832;
    --card: #24231f;
    --ink: #f1ede2;
    --muted: #cfc8b6;
    --title: #2a4fa8;
    --hi: #5a574f;
    --lo: #121210;
    --edge: #000;
    --link: #9fc4ff;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--desk);
  color: var(--ink);
  font: 17px/1.55 -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}
main { max-width: 700px; margin: 0 auto; padding: 28px 16px 64px; }
.window {
  background: var(--face);
  border: 2px solid;
  border-color: var(--hi) var(--edge) var(--edge) var(--hi);
  box-shadow: inset -2px -2px 0 var(--lo);
  padding: 3px;
}
.titlebar {
  display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(90deg, var(--title), #3a76c9);
  color: var(--title-ink);
  font-family: "DotGothic16", ui-monospace, monospace;
  font-size: 18px;
  padding: 3px 6px;
}
.titlebar a { color: var(--title-ink); text-decoration: none; }
.titlebar .x {
  width: 22px; height: 20px; line-height: 16px; text-align: center;
  background: var(--face); color: var(--ink);
  border: 2px solid; border-color: var(--hi) var(--edge) var(--edge) var(--hi);
  font-size: 14px;
}
.client { background: var(--card); margin-top: 3px; padding: 6px 20px 24px; border: 2px solid; border-color: var(--lo) var(--hi) var(--hi) var(--lo); }
h1, h2 { font-family: "DotGothic16", ui-monospace, monospace; font-weight: 400; color: var(--title); line-height: 1.25; }
@media (prefers-color-scheme: dark) { h1, h2 { color: #f6d97a; } }
h1 { font-size: 32px; margin: 18px 0 4px; }
h2 { font-size: 21px; margin: 28px 0 6px; }
.lede { color: var(--muted); margin-top: 0; }
.prompt {
  background: #000; color: #c8c8c8;
  font-family: "DotGothic16", ui-monospace, monospace;
  padding: 12px 16px; margin: 16px 0;
  border: 2px solid; border-color: var(--lo) var(--hi) var(--hi) var(--lo);
}
.prompt p { margin: 2px 0; }
a { color: var(--link); }
ol li, ul li { margin: 6px 0; }
footer { margin-top: 40px; color: var(--muted); font-size: 14px; }