/*
  Markdown Master — shared style for the website.

  The colours are the app's own (ThemeColors in the app's source, shared
  with JSON Master): the Daylight theme by day, the default Graphite theme at
  night, following the visitor's system setting. The hero is always Graphite,
  like the app icon and the App Store screenshots. Shapes on the page borrow
  the app's Markdown look: a document tab with a line-number gutter, "#"
  markers in the punctuation colour, task-list checkboxes, a Note callout and
  faint lines of text in the background.
*/

:root {
  color-scheme: light dark;

  /* Daylight theme */
  --page: #f3f4f7;
  --card: #ffffff;
  --field: #f3f4f7;
  --gutter: #f3f4f7;
  --edge: #e0e3ea;
  --text: #1d2130;
  --dim: #6a7083;
  --accent: #4058d6;
  --accent-dim: #8193ea;
  --on-accent: #ffffff;
  --selection: #dde5ff;
  --punct: #a3a8b6;
  --key: #2a44b8;
  --string: #18793a;
  --number: #c24a0e;
  --boolean: #8a2fd6;
  --success: #15964b;
  --warning: #c77700;
  --danger: #d7263d;
  --panel-shadow: 0 1px 2px rgba(29, 33, 48, 0.05), 0 4px 14px rgba(29, 33, 48, 0.06);
  --lines: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='88'%3E%3Cg fill='%231D2130' fill-opacity='0.026'%3E%3Crect x='18' y='20' width='64' height='5' rx='2.5'/%3E%3Crect x='94' y='20' width='118' height='5' rx='2.5'/%3E%3Crect x='224' y='20' width='40' height='5' rx='2.5'/%3E%3Crect x='276' y='20' width='70' height='5' rx='2.5'/%3E%3Crect x='38' y='64' width='96' height='5' rx='2.5'/%3E%3Crect x='146' y='64' width='52' height='5' rx='2.5'/%3E%3Crect x='210' y='64' width='128' height='5' rx='2.5'/%3E%3C/g%3E%3C/svg%3E");

  /* The hero is Graphite in both modes. */
  --hero-text: #ececef;
  --hero-dim: #b4b4bc;
  --hero-accent: #3d9bff;
  --hero-sky: #6cc4fa;
  --hero-lines: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='88'%3E%3Cg fill='%23FFFFFF' fill-opacity='0.032'%3E%3Crect x='18' y='20' width='64' height='5' rx='2.5'/%3E%3Crect x='94' y='20' width='118' height='5' rx='2.5'/%3E%3Crect x='224' y='20' width='40' height='5' rx='2.5'/%3E%3Crect x='276' y='20' width='70' height='5' rx='2.5'/%3E%3Crect x='38' y='64' width='96' height='5' rx='2.5'/%3E%3Crect x='146' y='64' width='52' height='5' rx='2.5'/%3E%3Crect x='210' y='64' width='128' height='5' rx='2.5'/%3E%3C/g%3E%3C/svg%3E");

  --sans: -apple-system, BlinkMacSystemFont, system-ui, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial,
    sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Graphite theme */
    --page: #1b1b1d;
    --card: #232326;
    --field: #2d2d31;
    --gutter: #1f1f22;
    --edge: #37373c;
    --text: #ececef;
    --dim: #96969e;
    --accent: #3d9bff;
    --accent-dim: #2d6bb0;
    --on-accent: #ffffff;
    --selection: #203a61;
    --punct: #6a6a73;
    --key: #6fc3f7;
    --string: #ff7a6b;
    --number: #d9c46e;
    --boolean: #ff69b0;
    --success: #3ed65a;
    --warning: #ffa425;
    --danger: #ff5147;
    --panel-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 14px rgba(0, 0, 0, 0.25);
    --lines: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='88'%3E%3Cg fill='%23FFFFFF' fill-opacity='0.022'%3E%3Crect x='18' y='20' width='64' height='5' rx='2.5'/%3E%3Crect x='94' y='20' width='118' height='5' rx='2.5'/%3E%3Crect x='224' y='20' width='40' height='5' rx='2.5'/%3E%3Crect x='276' y='20' width='70' height='5' rx='2.5'/%3E%3Crect x='38' y='64' width='96' height='5' rx='2.5'/%3E%3Crect x='146' y='64' width='52' height='5' rx='2.5'/%3E%3Crect x='210' y='64' width='128' height='5' rx='2.5'/%3E%3C/g%3E%3C/svg%3E");
  }
}

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

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

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background-color: var(--page);
  background-image: var(--lines);
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--selection);
}

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

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}

strong {
  font-weight: 650;
}

/* Inline code and keys, as the app's preview draws them. */
code {
  font-family: var(--mono);
  font-size: 0.86em;
  padding: 0.12em 0.38em;
  background: var(--field);
  border: 1px solid var(--edge);
  border-radius: 5px;
  color: var(--string);
  white-space: nowrap;
}

kbd {
  display: inline-block;
  padding: 0.05em 0.45em;
  font: 500 0.8em var(--mono);
  color: var(--text);
  background: var(--field);
  border: 1px solid var(--edge);
  border-bottom-width: 2px;
  border-radius: 5px;
  white-space: nowrap;
}

/* A Markdown marker ("#", "##") in the source editor's punctuation colour. */
.md {
  font-family: var(--mono);
  font-weight: 500;
  color: var(--punct);
}

/* ---------------------------------------------------------------- Window bar */

.bar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--card) 88%, transparent);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid var(--edge);
  padding-top: env(safe-area-inset-top);
}

.bar-inner {
  max-width: 1080px;
  margin: 0 auto;
  height: 56px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: inherit;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.01em;
  flex-shrink: 0;
}

.brand:hover {
  text-decoration: none;
}

.brand img {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.nav {
  margin-left: auto;
  display: flex;
  gap: 4px;
}

.nav a {
  color: var(--dim);
  font-size: 14.5px;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 8px;
}

.nav a:hover {
  color: var(--text);
  background: var(--field);
  text-decoration: none;
}

/* The current page, like a selected segment in the app's toolbar. */
.nav a[aria-current="page"] {
  color: var(--text);
  background: var(--selection);
  font-weight: 600;
}

@media (max-width: 520px) {
  .brand span {
    display: none;
  }

  .nav a {
    padding: 6px 10px;
  }
}

/* ---------------------------------------------------------------- Documents */

.page {
  max-width: 760px;
  margin: 0 auto;
  padding: 32px 16px 24px;
}

/* A page title drawn as a Markdown file open in the app: the file name in a
   tab, line numbers in the gutter, "#" before the heading. */
.doc {
  margin-bottom: 28px;
}

.doc-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  position: relative;
  top: 1px;
  padding: 6px 12px 5px;
  font: 500 12.5px var(--mono);
  color: var(--dim);
  background: var(--card);
  border: 1px solid var(--edge);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
}

.doc-tab svg {
  color: var(--accent);
}

.doc-body {
  display: flex;
  background: var(--card);
  border: 1px solid var(--edge);
  border-radius: 0 12px 12px 12px;
  box-shadow: var(--panel-shadow);
  overflow: hidden;
}

.doc-gutter {
  flex: 0 0 40px;
  padding: 22px 10px 0 0;
  background: var(--gutter);
  border-right: 1px solid var(--edge);
  font: 12px/26px var(--mono);
  color: var(--punct);
  text-align: right;
  white-space: pre;
  user-select: none;
}

.doc-main {
  padding: 22px 24px 24px;
  display: flex;
  gap: 18px;
  align-items: center;
  min-width: 0;
}

.doc-main img {
  flex-shrink: 0;
  width: 76px;
  height: 76px;
  border-radius: 17px;
  display: block;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

.doc h1 {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0 0 6px;
}

.doc h1 .md {
  margin-right: 0.35em;
}

.doc p {
  margin: 0;
  color: var(--dim);
}

@media (max-width: 520px) {
  .doc-gutter {
    flex-basis: 30px;
    padding-right: 7px;
  }

  .doc-main {
    flex-direction: column;
    align-items: flex-start;
    padding: 18px 18px 20px;
  }

  .doc h1 {
    font-size: 26px;
  }
}

/* Section headers: small spaced capitals, as in the app's settings, after a "##". */
.label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--dim);
  margin: 32px 4px 10px;
}

.label::before {
  content: "## ";
  font-family: var(--mono);
  font-weight: 500;
  letter-spacing: 0;
  color: var(--punct);
}

.card {
  background: var(--card);
  border: 1px solid var(--edge);
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 12px;
}

.card h2,
.card h3 {
  font-size: 16.5px;
  line-height: 1.35;
  margin: 0 0 6px;
  letter-spacing: -0.005em;
}

.card p,
.card li {
  font-size: 15px;
}

.card p {
  margin: 0.5em 0;
}

.card p:last-child {
  margin-bottom: 0;
}

.card ul {
  margin: 0.5em 0 0;
  padding-left: 1.2em;
}

.card li + li {
  margin-top: 0.25em;
}

.card li::marker {
  color: var(--dim);
}

/* A callout, as the app renders "> [!NOTE]". */
.callout {
  border-left: 3px solid var(--accent);
  border-radius: 0 12px 12px 0;
  background: color-mix(in srgb, var(--accent) 9%, var(--card));
}

.callout h2 {
  display: flex;
  align-items: center;
  gap: 0.45em;
  color: var(--accent);
}

.callout h2 svg {
  flex: none;
}

.card .toc {
  columns: 2 220px;
  column-gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.toc li {
  break-inside: avoid;
  font-size: 15px;
  padding: 3px 0;
}

.toc li + li {
  margin-top: 0;
}

/* Shortcut tables. */
.keys {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
  margin-top: 6px;
}

.keys td {
  padding: 6px 0;
  border-top: 1px solid var(--edge);
  vertical-align: top;
}

.keys td:first-child {
  width: 46%;
  padding-right: 12px;
  white-space: nowrap;
}

.keys tr:first-child td {
  border-top: 0;
}

@media (max-width: 520px) {
  .keys td:first-child {
    width: auto;
    white-space: normal;
  }
}

/* ---------------------------------------------------------------- Footer */

.foot {
  max-width: 760px;
  margin: 24px auto 0;
  padding: 24px 16px calc(40px + env(safe-area-inset-bottom));
  text-align: center;
  color: var(--dim);
  font-size: 13.5px;
  border-top: 1px solid var(--edge);
}

.foot p {
  margin: 4px 0;
}

.foot nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-bottom: 10px;
}

.foot nav a {
  font-weight: 500;
}

.motto {
  font-weight: 600;
}

/* ---------------------------------------------------------------- Landing page */

.hero {
  color: var(--hero-text);
  background-color: #18191d;
  background-image: var(--hero-lines),
    radial-gradient(circle at 20% 0%, rgba(61, 155, 255, 0.36), transparent 58%),
    radial-gradient(circle at 92% 92%, rgba(108, 196, 250, 0.2), transparent 52%),
    linear-gradient(135deg, #2b2e36, #18191d 50%, #0d0d10);
  overflow: hidden;
}

.hero ::selection {
  background: #203a61;
}

.hero-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 52px 16px 0;
  text-align: center;
}

.hero-icon {
  width: 104px;
  height: 104px;
  border-radius: 23px;
  margin-bottom: 22px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.kicker {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hero-sky);
  margin: 0 0 12px;
}

.hero h1 {
  font-size: clamp(34px, 6vw, 60px);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.025em;
  margin: 0 auto 18px;
  max-width: 820px;
}

/* The highlighted half of a title, as in the App Store captions. */
.hl {
  color: var(--hero-accent);
}

.hero .lede {
  font-size: clamp(16px, 2.2vw, 19px);
  max-width: 660px;
  margin: 0 auto 26px;
  color: var(--hero-dim);
}

.actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}

.button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 650;
  font-size: 16px;
  padding: 12px 22px;
  border-radius: 999px;
}

.button:hover {
  text-decoration: none;
  filter: brightness(1.08);
}

.button.primary {
  background: var(--hero-accent);
  color: #ffffff;
  box-shadow: 0 6px 18px rgba(61, 155, 255, 0.3);
}

.button.ghost {
  color: var(--hero-text);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.button.solid {
  background: var(--accent);
  color: var(--on-accent);
}

.requires {
  font-size: 13.5px;
  color: var(--hero-dim);
  margin: 14px 0 0;
}

.devices {
  display: block;
  width: min(1000px, 100%);
  margin: 30px auto -4px;
}

.wide {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 16px;
}

.feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 40px;
  padding: 64px 0 8px;
}

.feature.flip .feature-text {
  order: 2;
}

.feature-art {
  display: flex;
  justify-content: center;
  min-width: 0;
}

/* Widths include the transparent margin each image keeps for its shadow. */
.feature-art img.phone {
  width: 330px;
}

.feature-art img.duo {
  width: 400px;
}

.feature-art img.tablet {
  width: 520px;
}

.feature-art img.laptop {
  width: 640px;
}

.feature .label {
  margin: 0 0 8px;
  color: var(--accent);
}

.feature h2 {
  font-size: clamp(28px, 3.6vw, 38px);
  font-weight: 750;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
}

.feature p {
  margin: 0 0 14px;
  font-size: 17px;
}

/* List bullets drawn as ticked task-list checkboxes. */
.tasks {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tasks li {
  position: relative;
  padding-left: 30px;
  margin: 8px 0;
  font-size: 16px;
}

.tasks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.22em;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  background: var(--accent);
}

.tasks li::after {
  content: "";
  position: absolute;
  left: 6.5px;
  top: calc(0.22em + 3px);
  width: 5px;
  height: 10px;
  border: solid var(--on-accent);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

@media (max-width: 760px) {
  .feature {
    grid-template-columns: 1fr;
    gap: 22px;
    padding-top: 48px;
  }

  .feature.flip .feature-text {
    order: 0;
  }

  .feature-art img.phone {
    width: 270px;
  }

  .feature-art img.duo {
    width: 320px;
  }
}

.section-head {
  text-align: center;
  padding: 72px 0 24px;
}

.section-head h2 {
  font-size: clamp(28px, 3.6vw, 38px);
  font-weight: 750;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 6px 0 0;
}

.section-head .label {
  margin: 0;
  color: var(--accent);
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.grid .card {
  margin: 0;
  padding: 18px 20px 20px;
  box-shadow: var(--panel-shadow);
}

.grid .card h3 {
  font-size: 17px;
  margin: 12px 0 6px;
}

.grid .card p {
  margin: 0;
}

/* A line icon on an accent-tinted tile. */
.glyph {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--card));
}

/* The four themes, each as its canvas with its accent. */
.swatches {
  display: flex;
  gap: 6px;
  height: 38px;
  align-items: center;
}

.swatch {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid var(--edge);
  display: grid;
  place-items: center;
}

.swatch::after {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--dot);
}

@media (max-width: 900px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .grid {
    grid-template-columns: 1fr;
  }
}

.closing {
  text-align: center;
  padding: 72px 0 40px;
}

.closing img {
  width: 96px;
  height: 96px;
  border-radius: 22px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
}

.closing h2 {
  font-size: clamp(26px, 3.4vw, 34px);
  font-weight: 750;
  letter-spacing: -0.02em;
  margin: 16px 0 6px;
}

.closing p {
  color: var(--dim);
  margin: 0 0 22px;
}