:root {
  --bg: #111111; --bg-soft: #1a1a1a; --rule: #292621;
  --fg: #e8e4dc; --fg-dim: #8a857c; --accent: #d4a85a;
  color-scheme: dark;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("/fonts/SourceSerif4Variable-Roman.ttf.woff2") format("woff2-variations");
  font-weight: 200 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("/fonts/SourceSerif4Variable-Italic.ttf.woff2") format("woff2-variations");
  font-weight: 200 900; font-style: italic; font-display: swap;
}
* { box-sizing: border-box; }
html, body { margin: 0; overflow-x: clip; }
body {
  background: var(--bg); color: var(--fg);
  font-family: "Source Serif 4", "Iowan Old Style", "Charter", "Georgia", serif;
  font-size: 18px; line-height: 1.55; padding: 2.5rem 1.25rem;
}
/* Front page ends in the full-bleed band; no bottom padding, so it reaches
   the bottom of the page instead of leaving a strip of page background. */
body.home { padding-bottom: 0; }
/* Front page centers a small amount of content; the docs page is a normal
   top-aligned article. */
body.splash { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; }
main { width: 100%; max-width: 34rem; margin: 0 auto; }
/* Front-page hero: a single column (headline, paragraph, screenshots, then
   the install command) with room to breathe at the top. */
.hero { max-width: 34rem; padding-top: clamp(3.5rem, 11vh, 7rem); text-align: center; }

.lockup { display: flex; align-items: center; justify-content: center; gap: 0.7rem; margin-bottom: 1.5rem; text-decoration: none; }
.lockup img { width: 2.5rem; height: 2.5rem; border-radius: 4px; }
.lockup .word { font-size: 1rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--accent); }

h1 { font-size: 2rem; font-weight: 600; line-height: 1.18; margin: 0 0 1.25rem; }
.lede { color: var(--fg-dim); margin: 0 auto; max-width: 30rem; font-size: 1.1rem; }
h2 { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--fg-dim); margin: 2.2rem 0 0.6rem; }
/* Docs section headers are stark white (the front-page eyebrow stays dim). */
main:not(.hero) h2 { color: #fff; }

.cmd { display: flex; gap: 0.5rem; align-items: stretch; }
pre {
  flex: 1 1 auto; min-width: 0; margin: 0;
  background: var(--bg-soft); border: 1px solid var(--rule); border-radius: 8px;
  padding: 0.8rem 1rem; overflow-x: auto;
  font: 0.9rem/1.5 ui-monospace, "SF Mono", Menlo, monospace; color: var(--fg);
}
.copy {
  flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem;
  background: var(--accent); border: 1px solid var(--accent); color: #1a1408;
  border-radius: 8px; padding: 0 0.95rem; cursor: pointer;
  font: 600 0.85rem/1 ui-sans-serif, system-ui, sans-serif;
}
.copy:active { transform: translateY(1px); }
.copy-check { display: none; width: 0.9rem; height: 0.9rem; }
/* Copied: transparent with the gold border (already on .copy) and a check
   to the left of the text. */
.copy.is-copied { background: transparent; color: var(--accent); }
.copy.is-copied .copy-check { display: inline-block; }

.platforms { display: flex; align-items: center; justify-content: center; gap: 1.15rem; margin-top: 1.25rem; color: var(--fg-dim); }
/* The command stays left-to-right even though the card centers everything. */
.cmd pre { text-align: left; }
.platforms svg { width: 1.55rem; height: 1.55rem; fill: currentColor; display: block; }

/* Install card: the command, platform marks, and docs link share one panel
   (the app's card convention), below the screenshots. */
/* Full-bleed "get it" band: the install card and byline sit on the card
   color, edge to edge. -1.25rem cancels the body's side padding. */
.get {
  margin: 4rem -1.25rem 0; padding: 4rem 1.25rem;
  background: var(--bg-soft); text-align: center;
}
/* Inside the band the card flips to the page background, a darker well. */
.install-card {
  max-width: 34rem; margin: 0 auto;
  border: 1px solid var(--rule); border-radius: 0.6rem; background: var(--bg);
  padding: 1.25rem 1.5rem 1.5rem;
}
.install-card h2 { margin-top: 0; }
.doclink { display: inline-block; margin-top: 1.75rem; color: var(--accent); text-decoration: none; }
.doclink:hover { text-decoration: underline; }
.alt { margin-top: 1.25rem; font-size: 0.9rem; color: var(--fg-dim); }
.dockerlink { color: var(--accent); text-decoration: none; }
.dockerlink:hover { text-decoration: underline; }
.back { display: inline-block; margin-bottom: 1.5rem; color: var(--fg-dim); text-decoration: none; font-size: 0.9rem; }
.back:hover { color: var(--accent); }

/* One paragraph style (used by the docs page). Margin on both sides so a
   paragraph clears the command block whether it sits above or below it.
   The front page hero paragraph keeps .lede for its centered treatment. */
p { color: var(--fg-dim); margin: 1rem 0; }
code {
  font: 0.85em/1 ui-monospace, "SF Mono", Menlo, monospace;
  background: var(--bg-soft); border: 1px solid var(--rule);
  padding: 0.1em 0.35em; border-radius: 4px;
}
ol.steps { color: var(--fg-dim); font-size: 0.95rem; margin: 0.4rem 0 0; padding-left: 1.25rem; }
ol.steps li { margin: 0.4rem 0; }
.plat { color: var(--fg); font-weight: 600; }
a { color: var(--accent); }
footer { margin-top: 3rem; color: #6a655c; font-size: 0.85rem; }
.site-footer { margin-top: 3rem; text-align: center; }

/* Product showcase on the front page: the desktop library shot framed like
   a panel, with the phone shot overlapping its lower-right corner. */
/* Break the measure: the screenshots run wider than the text column,
   centered on it. min(...,92vw) keeps them on-screen at narrow widths. */
.shots {
  position: relative; width: min(56rem, 92vw);
  margin: 5rem 0 0; margin-left: 50%; transform: translateX(-50%);
}
.shot-desk {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--rule); border-radius: 0.6rem;
  box-shadow: 0 18px 55px rgba(0, 0, 0, 0.5);
}
.shot-phone {
  position: absolute; right: 11%; bottom: -1rem; width: 21%; min-width: 120px; height: auto;
  border: 1px solid var(--rule); border-radius: 0.9rem;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.6);
}
@media (max-width: 600px) {
  /* The desktop shot is blown up and anchored left so its nav and first
     covers are legible, then bled clean off the right edge of the screen
     (cut, no frame). The phone shot stays, overlapping the corner. */
  .shots { width: auto; margin: 3.5rem -1.25rem 0 0; transform: none; }
  .shot-desk {
    display: block; width: 165%; max-width: none; height: auto;
    /* Same frame as the phone. The right edge is off-screen, so only the
       top, left, and bottom (with rounded left corners) show. */
    border: 1px solid var(--rule); border-radius: 0.9rem; box-shadow: none;
  }
  .shot-phone {
    display: block; right: 0.9rem; bottom: -1rem; width: 34%; max-width: 138px;
  }
}

@media (max-width: 480px) {
  body { font-size: 16px; padding: 2rem 1.25rem; }
  h1 { font-size: 1.55rem; }
  .lede { font-size: 1rem; }
}