/* PocketXRP: landing page and changelog.
   One sheet, system fonts, no images. Light and dark follow the Mac. */

:root {
  color-scheme: light dark;

  --bg: #f5f2ec;
  --bg-deep: #ece6db;
  --surface: #fffdf9;
  --ink: #1c1d21;
  --ink-2: #4f5260;
  --ink-3: #686b77;
  --line: rgba(28, 29, 33, 0.12);
  --line-soft: rgba(28, 29, 33, 0.07);
  --accent: #2553c7;
  --accent-hover: #1d46ad;
  --accent-ink: #ffffff;
  --link: #2553c7;
  --link-hover: #1a3f9e;
  --accent-soft: rgba(37, 83, 199, 0.09);
  --thread: #c9822a;
  --thread-soft: rgba(201, 130, 42, 0.16);
  --shadow: 0 1px 2px rgba(40, 30, 10, 0.06), 0 8px 28px rgba(40, 30, 10, 0.08);

  /* the pocket mark */
  --denim-a: #3363d8;
  --denim-b: #1f43a3;
  --stitch: #f2c46d;
  --coin: #e8b65a;
  --coin-ring: #c99536;

  /* the wallpaper: a sunny day in the dunes */
  --sky-a: #bcd5ee;
  --sky-b: #f7e7cf;
  --orb: #fff6dc;
  --stars: transparent;
  --dune-1: #ebcd9f;
  --dune-2: #dcb27c;
  --dune-3: #c99862;
  --box-top: #b98549;
  --box-left: #93643a;
  --box-right: #7b5230;

  /* the macOS menu */
  --mb-bg: rgba(255, 255, 255, 0.5);
  --mb-ink: rgba(0, 0, 0, 0.85);
  --mb-ghost: rgba(0, 0, 0, 0.2);
  --mb-open: rgba(0, 0, 0, 0.13);
  --menu-bg: rgba(242, 242, 244, 0.8);
  --menu-ink: #1d1d1f;
  --menu-ink-2: rgba(0, 0, 0, 0.6);
  --menu-sep: rgba(0, 0, 0, 0.1);
  --menu-edge: rgba(0, 0, 0, 0.16);
  --menu-hi: #0a64d8;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", ui-serif, Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --gutter: 24px;
  --wide: 1120px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1218;
    --bg-deep: #0b0d12;
    --surface: #171b23;
    --ink: #ece8e1;
    --ink-2: #b4b7c0;
    --ink-3: #8f93a1;
    --line: rgba(255, 255, 255, 0.11);
    --line-soft: rgba(255, 255, 255, 0.06);
    --accent: #2f62e0;
    --accent-hover: #3a6df0;
    --accent-ink: #ffffff;
    --link: #8fadff;
    --link-hover: #b5c9ff;
    --accent-soft: rgba(110, 150, 255, 0.12);
    --thread: #e0a24a;
    --thread-soft: rgba(224, 162, 74, 0.16);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 30px rgba(0, 0, 0, 0.35);

    --denim-a: #3a6ae6;
    --denim-b: #23479f;

    /* the same dunes, after dark */
    --sky-a: #0a1230;
    --sky-b: #2b2747;
    --orb: #ebe4cf;
    --stars: #ffffff;
    --dune-1: #3a3356;
    --dune-2: #2c2745;
    --dune-3: #1f1c33;
    --box-top: #6f5a45;
    --box-left: #54432f;
    --box-right: #463726;

    --mb-bg: rgba(10, 10, 16, 0.42);
    --mb-ink: rgba(255, 255, 255, 0.92);
    --mb-ghost: rgba(255, 255, 255, 0.24);
    --mb-open: rgba(255, 255, 255, 0.2);
    --menu-bg: rgba(38, 38, 44, 0.78);
    --menu-ink: #f2f2f4;
    --menu-ink-2: rgba(255, 255, 255, 0.62);
    --menu-sep: rgba(255, 255, 255, 0.12);
    --menu-edge: rgba(0, 0, 0, 0.6);
    --menu-hi: #0a64d8;
  }
}

/* ---------- base ---------- */

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 17px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  overflow-x: hidden;
}

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

a { color: var(--link); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--link-hover); }
a:focus-visible,
.download:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

h1, h2, h3 { margin: 0; font-weight: 600; }
p { margin: 0; }

svg.defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* the pocket mark, used in the header, the footer and the steps */
.denim-a { stop-color: var(--denim-a); }
.denim-b { stop-color: var(--denim-b); }
.coin { fill: var(--coin); }
.coin-ring { fill: none; stroke: var(--coin-ring); stroke-width: 1; }
.pocket-body { fill: url(#denim); }
.pocket-stitch {
  fill: none;
  stroke: var(--stitch);
  stroke-width: 1.15;
  stroke-dasharray: 1.6 1.3;
  stroke-linecap: round;
}

/* ---------- header ---------- */

.top {
  max-width: var(--wide);
  margin: 0 auto;
  padding: 18px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 650;
  font-size: 18px;
  letter-spacing: -0.01em;
}
.brand:hover { color: var(--ink); }
.brand .mark { width: 30px; height: 30px; }

.top-nav { display: flex; align-items: center; gap: 22px; font-size: 15px; }
.top-nav a { color: var(--ink-2); text-decoration: none; }
.top-nav a:hover { color: var(--ink); }
.top-nav .top-dl {
  color: var(--link);
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--accent-soft);
}
.top-nav .top-dl:hover { color: var(--link-hover); }

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

main {
  max-width: var(--wide);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: 56px;
  align-items: center;
  padding: 28px 0 44px;
}

.eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  color: var(--ink-3);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  margin-bottom: 18px;
}
.tag {
  color: var(--thread);
  border: 1px dashed currentColor;
  border-radius: 999px;
  padding: 1px 10px 2px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
@media (prefers-color-scheme: light) {
  .tag { color: #9a5a12; }
}

h1 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(46px, 6.2vw, 76px);
  line-height: 1.0;
  letter-spacing: -0.025em;
  margin-bottom: 22px;
}
h1 em {
  font-style: italic;
  font-weight: 500;
  color: var(--accent);
  white-space: nowrap;
}
@media (prefers-color-scheme: dark) {
  h1 em { color: #86a6ff; }
}

.lede {
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 31em;
  margin-bottom: 16px;
}

/* the one line technical visitors look for, sewn on with a running stitch */
.claim {
  position: relative;
  max-width: 34em;
  padding: 2px 0 2px 18px;
  margin-bottom: 30px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-2);
}
.claim::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  border-left: 2px dashed var(--thread);
}
.claim strong { color: var(--ink); font-weight: 650; }

.get { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }

/* the download button: a denim tab with a stitched edge */
.download {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 58px;
  padding: 0 30px 0 26px;
  border-radius: 15px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 88%, #fff) 0%, var(--accent) 55%);
  color: var(--accent-ink);
  font-size: 18px;
  font-weight: 650;
  letter-spacing: -0.005em;
  text-decoration: none;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.22) inset,
    0 -1px 0 rgba(0, 0, 0, 0.15) inset,
    0 1px 2px rgba(20, 40, 100, 0.25),
    0 8px 22px rgba(37, 83, 199, 0.28);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.download::after {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1.4px dashed rgba(255, 255, 255, 0.42);
  border-radius: 11px;
  pointer-events: none;
}
.download:hover {
  color: var(--accent-ink);
  transform: translateY(-1px);
  background-color: var(--accent-hover);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.22) inset,
    0 -1px 0 rgba(0, 0, 0, 0.15) inset,
    0 2px 4px rgba(20, 40, 100, 0.25),
    0 12px 28px rgba(37, 83, 199, 0.34);
}
.download:active { transform: translateY(0); }
.download svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.req {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 0;
  color: var(--ink-3);
  font-size: 14.5px;
  font-variant-numeric: tabular-nums;
}
.req span + span::before {
  content: "·";
  margin: 0 9px;
  color: var(--ink-3);
  opacity: 0.7;
}

/* ---------- the scene: a desktop with the menu open ---------- */

.scene {
  position: relative;
  margin: 0;
  height: 440px;
  border-radius: 18px;
  overflow: hidden;
  isolation: isolate;
  box-shadow:
    0 0 0 1px var(--line),
    0 2px 6px rgba(40, 30, 10, 0.06),
    0 24px 60px -12px rgba(40, 30, 10, 0.22);
}
@media (prefers-color-scheme: dark) {
  .scene {
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.08),
      0 24px 60px -12px rgba(0, 0, 0, 0.7);
  }
}

.wallpaper {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.sky-a { stop-color: var(--sky-a); }
.sky-b { stop-color: var(--sky-b); }
.stars { fill: var(--stars); opacity: 0.75; }
.orb { fill: var(--orb); opacity: 0.85; }
.d1 { fill: var(--dune-1); }
.d2 { fill: var(--dune-2); }
.d3 { fill: var(--dune-3); }
.box-top { fill: var(--box-top); }
.box-left { fill: var(--box-left); }
.box-right { fill: var(--box-right); }
.box-sand { fill: var(--dune-1); }
.sandbox-toy .box-sand { fill: var(--dune-1); }

.menubar {
  position: absolute;
  inset: 0 0 auto 0;
  height: 28px;
  padding: 0 10px 0 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--mb-bg);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  backdrop-filter: blur(20px) saturate(1.5);
  color: var(--mb-ink);
}
.mb-left,
.mb-right { display: flex; align-items: center; gap: 14px; }
.mb-right { gap: 12px; }
.ghost {
  display: block;
  height: 7px;
  border-radius: 4px;
  background: var(--mb-ghost);
}
.g1 { width: 14px; height: 12px; border-radius: 4px; }
.g2 { width: 58px; background: var(--mb-ink); opacity: 0.7; }
.g3 { width: 30px; }
.g4 { width: 34px; }
.g5 { width: 16px; height: 12px; }
.g6 { width: 78px; background: var(--mb-ink); opacity: 0.55; }
.mb-item {
  display: grid;
  place-items: center;
  width: 30px;
  height: 22px;
  border-radius: 6px;
}
.mb-item.is-open { background: var(--mb-open); }
.mb-item svg { width: 15px; height: 15px; }
.mb-glyph { height: 14px; width: auto; fill: currentColor; }

.menu {
  position: absolute;
  top: 33px;
  right: 10px;
  width: max-content;
  min-width: 292px;
  padding: 5px;
  border-radius: 11px;
  background: var(--menu-bg);
  -webkit-backdrop-filter: blur(28px) saturate(1.8);
  backdrop-filter: blur(28px) saturate(1.8);
  color: var(--menu-ink);
  box-shadow:
    0 0 0 0.5px var(--menu-edge),
    0 0 0 1px rgba(255, 255, 255, 0.08) inset,
    0 10px 36px rgba(0, 0, 0, 0.24),
    0 2px 8px rgba(0, 0, 0, 0.1);
  font: 400 13.5px/1 var(--sans);
  letter-spacing: -0.003em;
  font-variant-numeric: tabular-nums;
}
.menu ul { list-style: none; margin: 0; padding: 0; }
.menu li {
  padding: 4.5px 10px;
  line-height: 15px;
  border-radius: 6px;
  white-space: nowrap;
  cursor: default;
}
.menu .m-head { font-weight: 650; }
.menu .m-info { color: var(--menu-ink-2); }
.menu .m-sep {
  height: 1px;
  margin: 5px 10px;
  padding: 0;
  background: var(--menu-sep);
}
.menu .m-act:hover {
  background: var(--menu-hi);
  color: #fff;
}

.scene figcaption {
  position: absolute;
  left: 18px;
  bottom: 14px;
  font-size: 13px;
  color: rgba(40, 24, 8, 0.72);
  font-style: italic;
  font-family: var(--serif);
}
@media (prefers-color-scheme: dark) {
  .scene figcaption { color: rgba(236, 232, 225, 0.7); }
}

/* ---------- at a glance ---------- */

.facts {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  background: var(--surface);
  border-radius: 18px;
  box-shadow: 0 0 0 1px var(--line-soft), var(--shadow);
  position: relative;
}
.facts::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1.2px dashed var(--thread);
  opacity: 0.38;
  border-radius: 12px;
  pointer-events: none;
}
.fact {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
  padding: 24px 22px;
}
.fact + .fact::before {
  content: "";
  position: absolute;
  left: 0;
  top: 24px;
  bottom: 24px;
  border-left: 1px solid var(--line);
}
.fi {
  flex: none;
  width: 32px;
  height: 32px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  margin-top: 2px;
}
@media (prefers-color-scheme: dark) {
  .fi { stroke: #86a6ff; }
}
.fi .sand { stroke: var(--thread); }
.fact p { display: flex; flex-direction: column; gap: 4px; }
.fact strong {
  font-family: var(--serif);
  font-size: 25px;
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.01em;
  font-variant-numeric: lining-nums;
}
.fact span { color: var(--ink-2); font-size: 15px; line-height: 1.45; }

/* ---------- section headings ---------- */

.start h2,
.how h2 {
  font-family: var(--serif);
  font-size: 30px;
  letter-spacing: -0.015em;
  line-height: 1.15;
}
.start h2 {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 26px;
}
.start h2::after {
  content: "";
  flex: 1;
  border-top: 1.4px dashed var(--thread);
  opacity: 0.5;
}

/* ---------- getting started ---------- */

.start { padding: 76px 0 0; }
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  counter-reset: step;
}
.steps li {
  counter-increment: step;
  position: relative;
  padding: 24px 24px 22px;
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--line-soft), var(--shadow);
}
.steps li::before {
  content: counter(step);
  position: absolute;
  top: 16px;
  left: 18px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1.3px dashed var(--thread);
  color: var(--thread);
  font: 600 14px/1 var(--serif);
}
@media (prefers-color-scheme: light) {
  .steps li::before { color: #9a5a12; }
}
.art {
  height: 72px;
  display: grid;
  place-items: center;
  margin-bottom: 10px;
}
.art svg { width: 150px; height: 70px; overflow: visible; }
.art-line,
.art-folder,
.art-glyph,
.art-sync,
.art-drag {
  fill: none;
  stroke: var(--ink-2);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.art-dot { fill: var(--ink-2); }
.art-drag { stroke-dasharray: 2.5 3.5; }
.art-folder { fill: var(--accent-soft); stroke: var(--accent); }
.art-glyph { stroke: var(--accent); stroke-width: 1.5; }
.art-bar { fill: var(--bg-deep); }
.art-pill { fill: var(--line); }
.art-tmpl { color: var(--ink); }
.art-menu { fill: var(--surface); stroke: var(--line); stroke-width: 1; }
.art-row { fill: none; stroke: var(--ink-2); stroke-width: 2.2; stroke-linecap: round; }
.art-row.soft { opacity: 0.45; }
.art-sync { stroke: var(--thread); }
@media (prefers-color-scheme: dark) {
  .art-folder,
  .art-glyph { stroke: #86a6ff; }
}
.steps h3 { font-size: 17px; font-weight: 650; letter-spacing: -0.01em; text-align: center; }
.sync {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
  color: var(--ink-2);
  font-size: 15.5px;
  text-align: left;
}
.sync svg {
  flex: none;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--thread);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- under the hood ---------- */

.how {
  margin-top: 76px;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}
.how-text h2 { margin-bottom: 14px; }
.how-text p { color: var(--ink-2); max-width: 36em; }
.how-text p + p { margin-top: 12px; color: var(--ink); }
.how-text b { color: var(--ink); font-weight: 650; }

/* KeyDom's trade-off: the RUM triangle, Read and Update lit as the cheap pair */
.rum { margin: 0; justify-self: center; width: 100%; max-width: 300px; text-align: center; }
.rum svg { display: block; width: 100%; height: auto; overflow: visible; }
.rum-edge { fill: none; stroke: var(--ink-3); stroke-width: 1.2; stroke-dasharray: 3 6; stroke-linecap: round; opacity: 0.8; }
.rum-kept { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; }
.rum-dot { fill: var(--bg); stroke: var(--ink-3); stroke-width: 1.5; }
.rum-dot.on { fill: var(--accent); stroke: var(--accent); }
.rum-label { font: 500 15px var(--sans); fill: var(--ink); }
.rum-label.dim { fill: var(--ink-3); }
.how-text .how-note { margin-top: 14px; font-size: 14px; color: var(--ink-3); }
.rum figcaption { margin-top: 18px; font-size: 14px; color: var(--ink-3); }

/* ---------- close ---------- */

.close {
  margin: 84px 0 0;
  padding: 44px 24px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
}
.close-art { width: 96px; height: 48px; }
.close-art .box-sand { fill: var(--dune-2); }
.motto {
  font-family: var(--serif);
  font-style: italic;
  font-size: 24px;
  line-height: 1.3;
  color: var(--ink);
  max-width: 22em;
  margin-bottom: 10px;
  text-wrap: balance;
}
.download.small {
  min-height: 48px;
  padding: 0 22px 0 18px;
  font-size: 16px;
  border-radius: 13px;
}
.download.small::after { border-radius: 9px; inset: 4px; }
.download.small svg { width: 19px; height: 19px; }

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

.foot {
  width: min(calc(100% - 2 * var(--gutter)), calc(var(--wide) - 2 * var(--gutter)));
  margin: 0 auto;
  padding: 26px 0 40px;
  border-top: 1px solid var(--line);
  color: var(--ink-3);
  font-size: 13.5px;
  text-align: center;
}
.foot-note { display: flex; justify-content: center; align-items: center; gap: 9px; margin: 10px 0 0; color: var(--ink-3); }
.foot-note .mark { width: 20px; height: 20px; flex: none; }
.authors { margin: 0; color: var(--ink-2); }
.authors span { color: var(--ink-3); margin-right: 6px; }
.close-link { display: inline-block; margin-top: -2px; font-size: 13.5px; color: var(--ink-3); text-decoration: none; }
.close-link:hover { color: var(--ink-2); text-decoration: underline; }
.build-toggle summary {
  display: inline-flex; align-items: center; gap: 7px;
  cursor: pointer; list-style: none; color: var(--ink-3);
}
.build-toggle summary::-webkit-details-marker { display: none; }
.build-toggle summary::before {
  content: ""; width: 6px; height: 6px; margin-left: 1px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg); transition: transform 0.15s ease;
}
.build-toggle[open] summary::before { transform: rotate(45deg); }
.build-toggle summary:hover { color: var(--ink-2); }
.build-toggle[open] .build { margin-top: 12px; }
.close .build-toggle { margin-top: 16px; font-size: 13.5px; color: var(--ink-3); }
.close .build { justify-content: center; }
.close .build .sha { justify-content: center; }
.verify-list {
  margin: 22px auto 0; max-width: 560px; text-align: left;
  display: grid; gap: 12px;
}
.verify-list div { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 4px 12px; align-items: baseline; }
.verify-list dt { color: var(--ink-3); }
.verify-list dd { margin: 0; min-width: 0; display: grid; gap: 4px; }
.verify-list code {
  display: block; font-family: var(--mono); font-size: 12.5px; color: var(--ink);
  background: var(--surface); box-shadow: 0 0 0 1px var(--line-soft);
  border-radius: 8px; padding: 7px 10px; overflow-wrap: anywhere;
  -webkit-user-select: all; user-select: all;
}
.verify-list small { font-size: 12.5px; color: var(--ink-3); }
@media (max-width: 600px) {
  .verify-list div { grid-template-columns: minmax(0, 1fr); }
}
.build {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 26px;
}
.build div { display: flex; gap: 7px; min-width: 0; }
.build dt { flex: none; color: var(--ink-3); white-space: nowrap; }
.build dd { margin: 0; min-width: 0; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.build .sha { flex: 1 1 100%; }
.build code {
  font-family: var(--mono);
  font-size: 12.5px;
  overflow-wrap: anywhere;
  word-break: break-all;
  -webkit-user-select: all;
  user-select: all;
}

/* ---------- tablet ---------- */

@media (max-width: 980px) {
  .hero { grid-template-columns: minmax(0, 1fr); gap: 40px; padding-top: 16px; }
  .pitch { max-width: 640px; }
  .scene { max-width: 640px; width: 100%; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fact { flex-direction: row; gap: 14px; padding: 24px; }
  .fact-node { grid-column: 1 / -1; }
  .fact:nth-child(2)::before,
  .fact:nth-child(4)::before { display: none; }
  .fact:nth-child(n + 2)::after {
    content: "";
    position: absolute;
    top: 0;
    left: 24px;
    right: 24px;
    border-top: 1px solid var(--line);
  }
  .how { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}

/* ---------- phone ---------- */

@media (max-width: 600px) {
  :root { --gutter: 16px; }
  body { font-size: 16px; }

  .top { padding-top: 14px; padding-bottom: 14px; }
  .brand { font-size: 17px; }
  .brand .mark { width: 28px; height: 28px; }
  .top-nav { gap: 14px; font-size: 14.5px; }
  .top-nav .top-dl { padding: 6px 12px; }

  .hero { padding: 6px 0 32px; gap: 32px; }
  .eyebrow { margin-bottom: 14px; font-size: 13px; }
  h1 { font-size: 46px; margin-bottom: 16px; }
  .lede { font-size: 17px; margin-bottom: 14px; }
  .claim { font-size: 15.5px; margin-bottom: 24px; padding-left: 15px; }
  .get { align-items: stretch; }
  .download { width: 100%; }
  .download.small { width: auto; }
  .req { justify-content: center; font-size: 13.5px; }

  .scene { height: 410px; border-radius: 16px; }
  .menubar { padding: 0 8px 0 10px; }
  .g3, .g4 { display: none; }
  .g6 { width: 44px; }
  .menu {
    right: 8px;
    width: auto;
    min-width: 0;
    left: 8px;
    max-width: 340px;
    margin-left: auto;
    font-size: 12.5px;
  }
  .scene figcaption { left: 14px; bottom: 12px; }
  .sandbox-toy { transform: translate(-98px, 22px); }

  .facts { grid-template-columns: minmax(0, 1fr); }
  .facts::before { inset: 6px; }
  .fact { padding: 18px 22px; }
  .fact + .fact::before { display: none; }
  .fact + .fact::after {
    content: "";
    position: absolute;
    top: 0;
    left: 22px;
    right: 22px;
    border-top: 1px solid var(--line);
  }
  .fact strong { font-size: 22px; }

  .start { padding-top: 56px; }
  .start h2,
  .how h2 { font-size: 26px; }
  .steps { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .steps li {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    padding: 10px 18px 10px 46px;
  }
  .steps li::before {
    top: 50%;
    left: 14px;
    width: 24px;
    height: 24px;
    margin-top: -12px;
    font-size: 12.5px;
  }
  .steps h3 { text-align: left; font-size: 16px; }
  .sync { justify-content: flex-start; align-items: flex-start; font-size: 15px; }
  .sync svg { margin-top: 1px; }
  .art { height: 64px; margin: 0; }
  .art svg { width: 104px; height: 52px; }

  .how { margin-top: 56px; }
  .close { margin-top: 56px; padding: 36px 0; }
  .motto { font-size: 21px; }

  .build { gap: 6px 20px; }
}

/* ---------- motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .download { transition: none; }
  .download:hover { transform: none; }
}

/* ---------- changelog page ---------- */

main.changelog {
  max-width: 700px;
  margin: 0 auto;
  padding: 36px var(--gutter) 80px;
}
.changelog .back {
  margin-bottom: 40px;
  font-size: 15px;
}
.changelog .back a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-2);
  text-decoration: none;
  font-weight: 600;
  padding: 6px 14px 6px 12px;
  border-radius: 999px;
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--line-soft), var(--shadow);
}
.changelog .back a:hover { color: var(--link); }
.changelog h1 {
  font-size: clamp(40px, 7vw, 54px);
  margin-bottom: 30px;
}
.changelog h2 {
  font-family: var(--serif);
  font-size: 24px;
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin: 40px 0 14px;
  padding-bottom: 12px;
  border-bottom: 1.4px dashed color-mix(in srgb, var(--thread) 55%, transparent);
  font-variant-numeric: lining-nums;
}
.changelog h1 + h2 { margin-top: 0; }
.changelog h3 { font-size: 18px; margin: 26px 0 10px; }
.changelog p { color: var(--ink-2); margin: 0 0 14px; }
.changelog ul { margin: 0 0 18px; padding: 0; list-style: none; }
.changelog li {
  position: relative;
  padding-left: 26px;
  margin: 0 0 11px;
  color: var(--ink);
}
.changelog li::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 0.6em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--thread);
  box-shadow: 0 0 0 3px var(--thread-soft);
}