style.css

/* Daylight on a beach: sky above, wet sand below, sea blue for anything
   you can press. Every colour on the page is one of these, so the night
   set below is the whole of dark mode. */
:root {
  color-scheme: light dark;
  --sand: #fbf3e2;
  --sand-deep: #f2e4c9;
  --sky: #d8eef7;
  --ink: #2a2118;
  --ink-soft: #6b5c48;
  --sea: #0d7ea6;
  --sea-dark: #0a6183;
  --link: #0a6183;
  --line: rgba(42, 33, 24, 0.12);
  /* Raised surfaces: the GitHub pill, the troubleshooting card. */
  --card: rgba(255, 255, 255, 0.75);
  --card-hover: #fff;
  /* The install line is a terminal in both themes. */
  --term: #2a2118;
  --term-ink: #fbf3e2;
  --frame: #fff;
  --shadow: rgba(42, 33, 24, 0.18);
  --wrap: 1060px;
  --sans: ui-rounded, "SF Pro Rounded", ui-sans-serif, system-ui,
          -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* The same beach after dark: a night sky over cool sand. The sea stays
   the colour of anything you can press, a shade lighter for links so they
   read on the dark ground. */
@media (prefers-color-scheme: dark) {
  :root {
    --sand: #16140f;
    --sand-deep: #25211a;
    --sky: #0e1b26;
    --ink: #f2e9d8;
    --ink-soft: #b3a58e;
    --sea: #1283ad;
    --sea-dark: #0e6a8d;
    --link: #74c6e6;
    --line: rgba(242, 233, 216, 0.14);
    --card: rgba(255, 255, 255, 0.07);
    --card-hover: rgba(255, 255, 255, 0.13);
    --term: #070605;
    --term-ink: #f2e9d8;
    --frame: #3b342a;
    --shadow: rgba(0, 0, 0, 0.55);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--sand);
}

h1, h2 { line-height: 1.12; letter-spacing: -0.02em; }

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

img, video { display: block; width: 100%; height: auto; }

/* ---- hero ---- */

.hero {
  position: relative;
  padding: 56px 24px 0;
  text-align: center;
  /* Sky at the top, sand underneath it. */
  background: linear-gradient(180deg, var(--sky) 0%, var(--sand) 62%);
}

/* The GitHub link, pinned to the corner of the sky. */
.gh {
  position: absolute;
  top: 16px;
  right: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 2px solid var(--line);
  background: var(--card);
  color: var(--ink);
  font-size: 0.92rem;
  font-weight: 700;
  text-decoration: none;
}

.gh:hover { background: var(--card-hover); }
.gh .stars { padding-left: 8px; border-left: 1px solid var(--line); color: var(--ink-soft); }
.gh .stars[hidden] { display: none; }

.hero-inner { max-width: var(--wrap); margin: 0 auto; }

/* The name and what it is are the headline: a reader who takes in one line
   of this page should come away knowing both. Three steps down from here,
   each a clear size apart. */
.hero h1 {
  margin: 0 0 16px;
  font-size: clamp(2.5rem, 6.6vw, 4.2rem);
  font-weight: 800;
}

.hero h1 .genre {
  display: block;
  margin-top: 10px;
  font-size: clamp(1.2rem, 3.2vw, 1.8rem);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0;
}

.lede {
  margin: 0 auto 30px;
  max-width: 52ch;
  font-size: 1rem;
  color: var(--ink-soft);
}

.shot, .gallery img, .together img {
  border-radius: 14px;
  border: 3px solid var(--frame);
  box-shadow: 0 14px 34px var(--shadow);
}

/* The video's own ground while its first frame loads, rather than a
   white box: the board's driftwood brown. */
video.shot { background: #5d5140; }

/* ---- sections ---- */

/* Top padding only, so the gap between two sections is one padding, not
   two; the last one closes the page. */
main > section {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 72px 24px 0;
}

main > section:last-child { padding-bottom: 72px; }

main h2 {
  font-size: clamp(1.4rem, 3vw, 1.85rem);
  margin: 0 0 12px;
}

/* ---- bring your friends ---- */

/* The lobby beside what it does: side by side on a wide screen, the
   picture on top on a narrow one. */
.together {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 40px;
  align-items: center;
}

.together p { margin: 0 0 12px; color: var(--ink-soft); }
.together p:last-child { margin-bottom: 0; }

@media (max-width: 820px) {
  .together { grid-template-columns: 1fr; gap: 24px; }
}

/* ---- gallery ---- */

.gallery {
  display: grid;
  gap: 44px 32px;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
}

.gallery figure { margin: 0; }

.gallery figcaption {
  margin: 14px auto 0;
  max-width: 44ch;
  font-size: 1rem;
  text-align: center;
  color: var(--ink-soft);
}

/* ---- modes ---- */

.modes { text-align: center; }

.modes ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.modes li {
  padding: 9px 18px;
  border-radius: 999px;
  background: var(--sand-deep);
  font-size: 0.97rem;
  color: var(--ink-soft);
}

.modes b { color: var(--ink); }

/* ---- install, in the hero ---- */

.install {
  max-width: 920px;
  margin: 0 auto 18px;
  text-align: left;
}

.install-tabs { display: flex; justify-content: center; gap: 6px; margin-bottom: 10px; }
.install-tabs[hidden] { display: none; }

.install-tabs button {
  font: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  padding: 7px 18px;
  border: 2px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
}

.install-tabs button[aria-selected="true"] {
  color: #fff;
  background: var(--sea);
  border-color: var(--sea);
}

.install-cmd + .install-cmd { margin-top: 22px; }
.install-cmd[hidden] { display: none; }
.install.tabbed .install-cmd + .install-cmd { margin-top: 0; }
/* The tab already names the system. */
.install.tabbed .install-label { display: none; }

.install-label { margin: 0 0 6px; font-weight: 700; font-size: 0.95rem; }

/* A terminal line: dark, one row, scrolling sideways on a narrow screen
   rather than wrapping a command someone is about to paste. */
.install-line {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10px 10px 18px;
  border-radius: 12px;
  background: var(--term);
}

.install-line code {
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  white-space: nowrap;
  padding: 4px 0;
  background: none;
  color: var(--term-ink);
  font-size: 0.92rem;
}

.install-line .copy {
  flex: none;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 6px 14px;
  border: 0;
  border-radius: 999px;
  background: var(--sea);
  color: #fff;
  cursor: pointer;
}

.install-line .copy:hover { background: var(--sea-dark); }
.install-line .copy[hidden] { display: none; }

.install-note {
  margin: 8px 0 0;
  text-align: center;
  font-size: 0.88rem;
  color: var(--ink-soft);
}

.install-note code { font-size: 0.85em; }

.release {
  margin: 0 0 4px;
  font-size: 0.88rem;
  color: var(--ink-soft);
}

.release[hidden] { display: none; }

.alt {
  margin: 0 0 10px;
  font-size: 0.92rem;
  color: var(--ink-soft);
}

.alt code { font-size: 0.85em; white-space: nowrap; }

/* Closed by default: most visitors never need it, and the screenshot
   below should stay near the top. */
.trouble {
  max-width: 640px;
  margin: 0 auto 44px;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

.trouble summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--link);
}

.trouble dl {
  margin: 14px 0 0;
  padding: 16px 20px;
  text-align: left;
  border-radius: 12px;
  background: var(--card);
  border: 1px solid var(--line);
}

.trouble dt { font-weight: 700; color: var(--ink); }
.trouble dd { margin: 2px 0 12px; }
.trouble dd:last-child { margin-bottom: 0; }
.trouble code { font-size: 0.85em; }

code {
  font-family: var(--mono);
  font-size: 0.9em;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--sand-deep);
  color: var(--ink);
}

/* ---- footer ---- */

footer {
  padding: 34px 24px 52px;
  text-align: center;
  background: var(--sand-deep);
}

footer p { margin: 0 auto 8px; max-width: 58ch; }

.fineprint { font-size: 0.85rem; color: var(--ink-soft); }

@media (max-width: 720px) {
  /* Room above the title for the GitHub link, which would sit on it. */
  .hero { padding-top: 72px; }
  .gh { top: 14px; right: 14px; }
  main > section { padding: 52px 20px 0; }
  main > section:last-child { padding-bottom: 52px; }
}