/* Win98-style page, matching the app. Teal desktop, grey windows, navy title bars. */
:root {
  --desktop: #008080;
  --face: #c0c0c0;
  --light: #ffffff;
  --shadow: #808080;
  --dark: #000000;
  --title: #000080;
  --title-end: #1084d0;
  --text: #000000;
  --link: #0000ee;
  --well: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --desktop: #10202a;
    --face: #2b2b2b;
    --light: #4a4a4a;
    --shadow: #151515;
    --dark: #000000;
    --title: #1c2c6c;
    --title-end: #3a5ca8;
    --text: #e6e6e6;
    --link: #8cb4ff;
    --well: #1c1c1c;
  }
}
* { box-sizing: border-box; }
html { background: var(--desktop); }
body {
  margin: 0;
  padding: 24px 16px 48px;
  font: 14px/1.5 Tahoma, "MS Sans Serif", Verdana, sans-serif;
  color: var(--text);
  background: var(--desktop);
}
a { color: var(--link); }
.window {
  max-width: 760px;
  margin: 0 auto 20px;
  background: var(--face);
  border: 2px solid;
  border-color: var(--light) var(--dark) var(--dark) var(--light);
  box-shadow: inset -1px -1px var(--shadow), inset 1px 1px var(--face);
  padding: 3px;
}
.title {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 4px;
  color: #fff;
  font-weight: bold;
  background: linear-gradient(90deg, var(--title), var(--title-end));
}
.title img { width: 16px; height: 16px; }
.title .buttons { margin-left: auto; display: flex; gap: 2px; }
.title .buttons span {
  width: 16px; height: 14px;
  background: var(--face);
  border: 1px solid;
  border-color: var(--light) var(--dark) var(--dark) var(--light);
}
.body { padding: 16px 18px; }
.hero { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.hero img { width: 112px; height: 112px; image-rendering: pixelated; }
.hero h1 { margin: 0 0 4px; font-size: 28px; }
.hero p { margin: 0; }
h2 { font-size: 16px; margin: 20px 0 8px; }
.well {
  background: var(--well);
  border: 2px solid;
  border-color: var(--shadow) var(--light) var(--light) var(--shadow);
  padding: 10px 14px;
}
.well ul { margin: 0; padding-left: 20px; }
.well li { margin: 4px 0; }
.button {
  display: inline-block;
  margin-top: 14px;
  padding: 6px 18px;
  color: var(--text);
  text-decoration: none;
  font-weight: bold;
  background: var(--face);
  border: 2px solid;
  border-color: var(--light) var(--dark) var(--dark) var(--light);
  box-shadow: inset -1px -1px var(--shadow);
}
.button:active { border-color: var(--dark) var(--light) var(--light) var(--dark); box-shadow: inset 1px 1px var(--shadow); }
.note { font-size: 12px; }
img { max-width: 100%; height: auto; }
figure { margin: 0; }
figcaption { font-size: 12px; margin-top: 6px; }
/* Three theme screenshots stacked like overlapping windows; the last image is in front. */
.stack { display: grid; margin: 22px 0 6px; cursor: pointer; }
.stack img { grid-area: 1 / 1; width: 74%; box-shadow: 3px 3px 0 rgba(0,0,0,.35); }
.stack img:nth-of-type(1) { transform: translate(0, 0); }
.stack img:nth-of-type(2) { transform: translate(17.5%, 9%); }
.stack img:nth-of-type(3) { transform: translate(35%, 18%); }
.stack figcaption { grid-area: 2 / 1; margin-top: calc(12% + 6px); }
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.gallery img { display: block; border: 1px solid var(--shadow); }
.gallery img[src$="settings.png"] { max-width: 240px; }
footer { max-width: 760px; margin: 0 auto; color: #fff; font-size: 12px; text-align: center; }
footer a { color: #fff; }