/* The project's website: one page, the app's palette (src/renderer/styles.css) in both schemes, the system fonts.
   The theme follows the system unless the top bar's control sets data-theme on the root. */

:root {
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", ui-sans-serif, system-ui, sans-serif;
  --font-display: var(--font);
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  --bg-000: #ffffff;
  --bg-100: #ffffff;
  --bg-200: #f6f6f6;
  --bg-300: #efefef;
  --bg-400: #e5e5e5;
  --text-100: #191919;
  --text-200: #3b3b3b;
  --text-400: #666666;
  --border: rgba(0, 0, 0, 0.14);
  --border-subtle: rgba(0, 0, 0, 0.07);
  --accent: #277de2;
  --accent-line: rgba(39, 125, 226, 0.5);
  /* a darker step of the blue, so a focus ring keeps 3:1 against the page */
  --focus-ring: #1f6fd0;
  --code-bg: var(--bg-200);
  --button-bg: var(--text-100);
  --button-text: var(--bg-100);
  --button-hover: #333333;
  --shot-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 12px 32px -12px rgba(0, 0, 0, 0.12);
  /* The glass (see The glass below): the canvas behind the page, the tints of the layers, their hairline and the
     highlight along a top edge */
  --glass-canvas: radial-gradient(1200px 700px at 50% -200px, #ffffff 0%, rgba(255, 255, 255, 0) 70%), radial-gradient(1000px 900px at 100% 40%, #f6f6f6 0%, rgba(246, 246, 246, 0) 60%), radial-gradient(900px 900px at 0% 90%, #f3f3f3 0%, rgba(243, 243, 243, 0) 60%), #e9e9e9;
  --glass-top: rgba(255, 255, 255, 0.72);
  --glass-card: rgba(255, 255, 255, 0.58);
  --glass-code: rgba(255, 255, 255, 0.55);
  --glass-chip: rgba(255, 255, 255, 0.5);
  --glass-line: rgba(0, 0, 0, 0.1);
  --glass-edge: rgba(255, 255, 255, 0.8);

  --read: 640px;
  --code: 760px;
  --wide: 1080px;
  --gutter: 24px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-000: #242424;
    --bg-100: #181818;
    --bg-200: #1d1d1d;
    --bg-300: #292929;
    --bg-400: #000000;
    --text-100: #f0f0f0;
    --text-200: #c9c9c9;
    --text-400: #a1a1a1;
    --border: rgba(255, 255, 255, 0.14);
    --border-subtle: rgba(255, 255, 255, 0.08);
    --accent: #5a8cf0;
    --accent-line: rgba(90, 140, 240, 0.55);
    --code-bg: var(--bg-200);
    --button-hover: #dcdcdc;
    --focus-ring: #6b9bf5;
    --shot-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 16px 40px -16px rgba(0, 0, 0, 0.6);
    --glass-canvas: radial-gradient(1200px 700px at 50% -200px, #262626 0%, rgba(38, 38, 38, 0) 70%), radial-gradient(1000px 900px at 100% 40%, #1e1e1e 0%, rgba(30, 30, 30, 0) 60%), radial-gradient(900px 900px at 0% 90%, #1a1a1a 0%, rgba(26, 26, 26, 0) 60%), #111111;
    --glass-top: rgba(24, 24, 24, 0.72);
    --glass-card: rgba(255, 255, 255, 0.05);
    --glass-code: rgba(255, 255, 255, 0.05);
    --glass-chip: rgba(255, 255, 255, 0.06);
    --glass-line: rgba(255, 255, 255, 0.1);
    --glass-edge: rgba(255, 255, 255, 0.08);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg-000: #242424;
  --bg-100: #181818;
  --bg-200: #1d1d1d;
  --bg-300: #292929;
  --bg-400: #000000;
  --text-100: #f0f0f0;
  --text-200: #c9c9c9;
  --text-400: #a1a1a1;
  --border: rgba(255, 255, 255, 0.14);
  --border-subtle: rgba(255, 255, 255, 0.08);
  --accent: #5a8cf0;
  --accent-line: rgba(90, 140, 240, 0.55);
  --code-bg: var(--bg-200);
  --button-hover: #dcdcdc;
  --focus-ring: #6b9bf5;
  --shot-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 16px 40px -16px rgba(0, 0, 0, 0.6);
  --glass-canvas: radial-gradient(1200px 700px at 50% -200px, #262626 0%, rgba(38, 38, 38, 0) 70%), radial-gradient(1000px 900px at 100% 40%, #1e1e1e 0%, rgba(30, 30, 30, 0) 60%), radial-gradient(900px 900px at 0% 90%, #1a1a1a 0%, rgba(26, 26, 26, 0) 60%), #111111;
  --glass-top: rgba(24, 24, 24, 0.72);
  --glass-card: rgba(255, 255, 255, 0.05);
  --glass-code: rgba(255, 255, 255, 0.05);
  --glass-chip: rgba(255, 255, 255, 0.06);
  --glass-line: rgba(255, 255, 255, 0.1);
  --glass-edge: rgba(255, 255, 255, 0.08);
  color-scheme: dark;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg-100);
  position: relative;
  color: var(--text-200);
  font: 17px/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
::selection { background: color-mix(in srgb, var(--accent) 28%, transparent); }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { color: var(--text-100); margin: 0; }
p { margin: 0; text-wrap: pretty; }
.hero p, .card-text p, .mod > p:first-of-type, h1, h2, h3 { text-wrap: balance; }
a { color: var(--text-100); text-decoration: underline; text-decoration-color: var(--accent-line); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--accent); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; border-radius: 4px; }
code, kbd, pre { font-family: var(--mono); }
code { font-size: 0.86em; background: var(--bg-300); border-radius: 4px; padding: 0.1em 0.35em; color: var(--text-100); }
kbd { font-size: 0.8em; border: 1px solid var(--border); border-radius: 4px; padding: 0.05em 0.4em; color: var(--text-100); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -48px; background: var(--bg-000); padding: 8px 12px; border-radius: 6px; z-index: 11; }
.skip:focus { top: 12px; }

/* ---------- The glass ----------
   Translucent, layered materials, as in the app's Glass theme: a soft neutral canvas behind the page, and over it
   the top bar, the feature cards, the code blocks and the chips as frosted layers (a backdrop blur, a tint of the
   surface's own colour, a hairline and a thin highlight along the top edge). The top bar sticks to the top, so the
   page scrolls under it. Without backdrop filters, or with Reduce transparency on, the same layers are opaque. */
body::before { content: ''; position: fixed; inset: 0; z-index: -1; background: var(--glass-canvas); pointer-events: none; }
.top {
  position: sticky; top: 0; z-index: 10;
  background: var(--glass-top); border-bottom: 1px solid var(--glass-line);
  -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root, :root:not([data-theme="light"]), :root[data-theme="dark"] { --glass-top: var(--bg-100); --glass-card: var(--bg-200); --glass-code: var(--code-bg); --glass-chip: var(--bg-000); }
}
@media (prefers-reduced-transparency: reduce) {
  :root, :root:not([data-theme="light"]), :root[data-theme="dark"] { --glass-canvas: var(--bg-100); --glass-top: var(--bg-100); --glass-card: var(--bg-200); --glass-code: var(--code-bg); --glass-chip: var(--bg-000); }
}

/* ---------- Top bar ---------- */
.top-inner {
  max-width: var(--wide);
  margin: 0 auto;
  padding: 0 var(--gutter);
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.brand { display: flex; align-items: center; gap: 10px; color: var(--text-100); text-decoration: none; font-weight: 600; font-size: 16px; white-space: nowrap; }
.brand img { width: 24px; height: 24px; }
.top-nav { display: flex; align-items: center; gap: 24px; font-size: 15px; }
.top-nav > a { color: var(--text-200); text-decoration: none; }
.top-nav > a:hover { color: var(--text-100); }

.theme { display: flex; gap: 2px; padding: 2px; border: 1px solid var(--glass-line); border-radius: 999px; background: var(--glass-chip); }
.theme button {
  width: 30px; height: 26px; display: grid; place-items: center;
  border: 0; border-radius: 999px; background: none; color: var(--text-400); cursor: pointer; padding: 0;
}
.theme button:hover { color: var(--text-100); }
.theme button[aria-pressed="true"] { background: var(--bg-300); color: var(--text-100); }
.theme svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Hero ---------- */
.hero { max-width: var(--read); margin: 0 auto; padding: 112px var(--gutter) 72px; text-align: center; }
.badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; line-height: 20px; color: var(--text-200);
  border: 1px solid var(--glass-line); border-radius: 999px; padding: 3px 12px; background: var(--glass-chip);
}
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
h1 { font: 600 60px/1.05 var(--font-display); letter-spacing: -0.025em; margin-top: 28px; }
.lede { margin-top: 20px; font-size: 25px; line-height: 1.35; font-weight: 500; letter-spacing: -0.01em; color: var(--text-100); }
.kin { margin-top: 6px; font-size: 16px; color: var(--text-400); }
.intro { margin-top: 24px; color: var(--text-200); }
.actions { margin-top: 36px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.button {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 22px;
  border-radius: 10px; font-size: 16px; font-weight: 500; text-decoration: none; white-space: nowrap;
}
.button.primary { background: var(--button-bg); color: var(--button-text); }
.button.primary:hover { background: var(--button-hover); }
.button.quiet { color: var(--text-100); border: 1px solid var(--border); background: var(--glass-chip); }
.button.quiet:hover { background: var(--bg-000); }
.fine { margin-top: 18px; font-size: 14px; color: var(--text-400); }

/* ---------- The window ---------- */
.window {
  position: relative;
  max-width: calc(var(--wide) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.window img { width: 100%; }
/* A themed picture before the script has given it its file: its room is kept, its alt text not shown. Without
   scripts it is not there at all, and its <noscript> copy takes its place. */
.js img[data-src]:not([src]) { visibility: hidden; }
html:not(.js) img[data-src] { display: none; }
.window img {
  border-radius: 12px;
  border: 1px solid var(--border);
  box-shadow: var(--shot-shadow);
  background: var(--bg-200);
}
.frame { position: relative; }
/* The window's buttons, in the empty corner the app leaves for them: 12 px dots 8 px apart, centred in the 44 px top
   bar of the 1280 x 800 picture (the sizes are fractions of the picture's width) */
.lights { position: absolute; left: 1.55%; top: 2.75%; transform: translateY(-50%); display: flex; gap: 3.125%; width: 20%; }
.lights i { flex: none; width: 4.7%; aspect-ratio: 1; border-radius: 50%; background: var(--text-400); opacity: 0.4; }

/* ---------- It gets better: the loop, then Dreaming and Mods ---------- */
.better { max-width: var(--wide); margin: 0 auto; padding: 152px var(--gutter) 0; }
.better > .sub { max-width: var(--read); margin: 16px auto 0; text-align: center; color: var(--text-400); }
/* The loop: four steps in a row, a chevron in each gap, and under the row a line from the last step back up into
   the first. Below 900 px the steps go round a 2 x 2 square instead: 1 and 2 across the top, 3 under 2, 4 under 1. */
.loop {
  --gap: 40px;
  list-style: none; margin: 56px 0 0; padding: 0 0 52px; position: relative; counter-reset: loop;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap);
}
.loop > li {
  counter-increment: loop; position: relative; padding: 22px 22px 24px;
  background: var(--glass-card); border: 1px solid var(--glass-line); border-radius: 16px;
  box-shadow: inset 0 1px 0 var(--glass-edge);
  -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
}
.loop > li::before {
  content: counter(loop); display: block; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--border);
  font-size: 13px; line-height: 24px; text-align: center; color: var(--text-200);
}
.loop h3 { margin-top: 16px; font-size: 17px; line-height: 1.35; font-weight: 600; }
.loop p { margin-top: 6px; font-size: 15px; line-height: 1.5; color: var(--text-400); }
.loop > li::after, .loop::before, .loop::after { content: ''; position: absolute; border: 0 solid var(--text-400); opacity: 0.55; }
.loop > li::after, .loop::before { width: 9px; height: 9px; border-width: 1.5px 1.5px 0 0; }
.loop > li:first-child::after { display: none; }
.loop > li::after { left: calc(var(--gap) / -2 - 2px); top: 50%; transform: translate(-50%, -50%) rotate(45deg); }
.loop::after {
  left: calc((100% - 3 * var(--gap)) / 8); right: calc((100% - 3 * var(--gap)) / 8); bottom: 14px; height: 35px;
  border-width: 0 1.5px 1.5px; border-radius: 0 0 16px 16px;
}
.loop::before { left: calc((100% - 3 * var(--gap)) / 8 - 3.75px); bottom: 38px; transform: rotate(-45deg); }

/* Dreaming and Mods: wide cards, the words on the left and the picture running out of the right and bottom edges */
.spot { margin-top: 64px; display: grid; gap: 24px; }
.card.wide { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.card.wide .card-text { padding: 56px 8px 56px 56px; min-height: 0; }
.card.wide h3 { font-size: 30px; line-height: 1.2; letter-spacing: -0.015em; }
.card.wide .card-text p { margin-top: 14px; font-size: 17px; line-height: 1.6; color: var(--text-200); }
.card.wide .card-pic { height: auto; min-height: 420px; margin: 0; padding: 0; }
.card.wide .card-frame { left: 48px; top: 56px; }
.points { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 10px; font-size: 15px; line-height: 1.5; color: var(--text-400); }
.points li { position: relative; padding-left: 20px; }
.points li::before { content: ''; position: absolute; left: 3px; top: 0.6em; width: 5px; height: 5px; border-radius: 50%; background: var(--text-400); }

/* ---------- Features ---------- */
.features { max-width: var(--wide); margin: 0 auto; padding: 152px var(--gutter) 0; }
.better > h2, .features > h2, .start > h2, .mod > h2, .more > h2 {
  font: 600 34px/1.15 var(--font-display);
  letter-spacing: -0.02em;
  max-width: var(--read); margin: 0 auto; text-align: center;
}
/* The features as cards, two to a row: the words at the top, and at the bottom a framed crop of a screenshot that
   sits on the card's bottom edge and runs out of the card (on the right too, for a .bleed frame), cut by its edge.
   Each frame names its crop: the picture's width (--w) and how far it is moved left (--x) and up (--y) inside the
   frame; --w-sm, --x-sm and --y-sm do the same on a phone. */
.cards { margin-top: 72px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.card {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--glass-card); border: 1px solid var(--glass-line); border-radius: 20px;
  box-shadow: inset 0 1px 0 var(--glass-edge);
  -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
  transition: border-color 0.2s;
}
.card:hover { border-color: var(--border); }
.card-text { padding: 40px 40px 0; min-height: 154px; }
.card h3 { font-size: 22px; line-height: 1.3; font-weight: 600; }
.card-text p { margin-top: 10px; font-size: 16px; line-height: 1.55; color: var(--text-400); }
.card-pic { position: relative; flex: none; height: 320px; margin-top: auto; padding-top: 32px; overflow: hidden; box-sizing: content-box; }
.card-frame {
  position: absolute; left: 40px; right: 40px; top: 32px; bottom: 0; overflow: hidden;
  border: 1px solid var(--border); border-bottom: 0; border-radius: 12px 12px 0 0;
  background: var(--bg-100); box-shadow: var(--shot-shadow);
}
.card-frame.bleed { right: -1px; border-right: 0; border-top-right-radius: 0; }
.card-frame picture { display: contents; }
.card-frame img {
  position: absolute; left: 0; top: 0; max-width: none; height: auto;
  width: var(--w); transform: translate(calc(-1 * var(--x)), calc(-1 * var(--y)));
}

.features > .also-title { margin-top: 152px; }
.also {
  list-style: none; padding: 0; margin: 48px 0 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 48px;
}
.also h3 { font-size: 17px; line-height: 1.4; font-weight: 600; }
.also p { margin-top: 6px; font-size: 16px; color: var(--text-400); }

/* ---------- Get started, Make it yours ---------- */
.start, .mod { max-width: calc(var(--code) + 2 * var(--gutter)); margin: 0 auto; padding: 152px var(--gutter) 0; }
.steps { list-style: none; padding: 0; margin: 48px 0 0; counter-reset: step; }
.steps > li { counter-increment: step; position: relative; padding-left: 44px; }
.steps > li + li { margin-top: 40px; }
.steps > li::before {
  content: counter(step);
  position: absolute; left: 0; top: 1px;
  width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--border);
  font-size: 13px; line-height: 24px; text-align: center; color: var(--text-200);
}
.steps h3 { font-size: 17px; line-height: 1.6; font-weight: 600; }
.steps p { margin-top: 8px; color: var(--text-400); }
.steps .code { margin-top: 12px; }
.mod > p { margin-top: 20px; }
.mod > p:first-of-type { text-align: center; color: var(--text-400); max-width: var(--read); margin-left: auto; margin-right: auto; }
.mod .code { margin-top: 24px; }
.mod .code + .code { margin-top: 16px; }

.code {
  background: var(--glass-code); border: 1px solid var(--glass-line); border-radius: 10px; overflow: hidden;
  box-shadow: inset 0 1px 0 var(--glass-edge);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.code-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 8px 0 16px; font-size: 13px; color: var(--text-200);
}
.copy {
  font: inherit; font-size: 13px; color: var(--text-200); background: var(--glass-chip); cursor: pointer;
  border: 1px solid var(--border); border-radius: 6px; padding: 2px 10px; min-width: 64px; min-height: 28px;
}
.copy:hover { color: var(--text-100); background: var(--bg-000); }
.copy.done { color: var(--text-100); border-color: var(--accent-line); }
.code pre { margin: 0; padding: 12px 16px 16px; overflow-x: auto; scrollbar-width: thin; font-size: 13.5px; line-height: 1.65; color: var(--text-100); }
.code code { background: none; padding: 0; font-size: inherit; border-radius: 0; }

/* ---------- Read more, footer ---------- */
.more { max-width: var(--wide); margin: 0 auto; padding: 152px var(--gutter) 0; }
.links { list-style: none; padding: 0; margin: 32px 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 32px; }
.foot { max-width: var(--wide); margin: 120px auto 0; padding: 32px var(--gutter) 48px; border-top: 1px solid var(--border-subtle); text-align: center; font-size: 14px; color: var(--text-400); }
.foot a { color: var(--text-200); }

/* ---------- Narrow screens ---------- */
@media (max-width: 900px) {
  .loop { --gap: 32px; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 640px; margin-left: auto; margin-right: auto; padding-bottom: 0; }
  .loop::before, .loop::after { display: none; }
  .loop > li:nth-child(3) { grid-area: 2 / 2; }
  .loop > li:nth-child(4) { grid-area: 2 / 1; }
  /* 1 to 2 across the top, 2 down to 3, 3 back across to 4, 4 up to 1 */
  .loop > li:first-child::after { display: block; left: 50%; top: auto; bottom: calc(var(--gap) / -2 - 2px); transform: translate(-50%, 50%) rotate(-45deg); }
  .loop > li:nth-child(3)::after { left: 50%; top: calc(var(--gap) / -2 - 2px); transform: translate(-50%, -50%) rotate(135deg); }
  .loop > li:nth-child(4)::after { left: auto; right: calc(var(--gap) / -2 - 2px); transform: translate(50%, -50%) rotate(-135deg); }
  .card.wide { display: flex; }
  .card.wide .card-text { padding: 40px 40px 0; }
  .card.wide .card-pic { height: 320px; min-height: 0; padding-top: 32px; }
  .card.wide .card-frame { left: 40px; top: 32px; }
}
@media (max-width: 820px) {
  .also { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .cards { grid-template-columns: minmax(0, 1fr); }
  .card-text { min-height: 0; }
}
@media (max-width: 600px) {
  :root { --gutter: 16px; }
  body { font-size: 16px; }
  .top-inner { height: 56px; }
  .top-nav { gap: 16px; }
  .hero { padding: 64px var(--gutter) 48px; }
  h1 { font-size: 44px; margin-top: 22px; }
  .lede { font-size: 21px; }
  .kin { font-size: 15px; }
  .intro { margin-top: 20px; }
  .actions { flex-direction: column; align-items: stretch; }
  .window img { border-radius: 8px; }
  .lights { display: none; }
  .better, .features, .start, .mod, .more { padding-top: 104px; }
  .better > h2, .features > h2, .start > h2, .mod > h2, .more > h2 { font-size: 30px; }
  .loop { --gap: 24px; margin-top: 40px; }
  .loop > li { padding: 16px 14px 18px; border-radius: 14px; }
  .loop h3 { margin-top: 12px; font-size: 16px; }
  .loop p { font-size: 14px; }
  .spot { margin-top: 40px; gap: 16px; }
  .card.wide .card-text { padding: 28px 24px 0; }
  .card.wide h3 { font-size: 24px; }
  .card.wide .card-text p { margin-top: 10px; font-size: 16px; }
  .points { margin-top: 18px; gap: 8px; font-size: 14px; }
  .points li { padding-left: 16px; }
  .points li::before { left: 1px; }
  .card.wide .card-pic { height: 240px; padding-top: 24px; }
  .card.wide .card-frame { left: 24px; top: 24px; }
  .cards { margin-top: 48px; gap: 16px; }
  .card { border-radius: 16px; }
  .card-text { padding: 28px 24px 0; }
  .card h3 { font-size: 20px; }
  .card-pic { height: 220px; padding-top: 24px; }
  .card-frame { left: 24px; right: 24px; top: 24px; border-radius: 10px 10px 0 0; }
  .card-frame img { width: var(--w-sm, var(--w)); transform: translate(calc(-1 * var(--x-sm, var(--x))), calc(-1 * var(--y-sm, var(--y)))); }
  .features > .also-title { margin-top: 104px; }
  .also { grid-template-columns: 1fr; gap: 28px; margin-top: 32px; }
  .steps > li { padding-left: 40px; }
  .code pre { font-size: 12.5px; }
  .foot { margin-top: 88px; }
}
@media (max-width: 400px) {
  .brand { font-size: 15px; }
  .top-nav { gap: 12px; font-size: 14px; }
}