/* Paper Time — the landing page.

   Set the way Apple sets a product page: full-bleed bands stacked down the
   screen, one idea to a band, a headline big enough to read across a room and
   a sentence under it in grey. The tones alternate — white, the pale grey,
   black — so scrolling feels like turning to a new page rather than falling
   down a list.

   Inside each band the furniture is still the app's own: rounded panels
   floating clear of the ground, the three radii (row 8, popover 14, panel 22),
   the accent on the one thing that goes somewhere, and the highlighter, which
   is the app's gesture and so the one flourish this page allows itself. The
   demonstrations read their colours from tokens, so a band only has to
   redefine the tokens and every demo in it follows. */

:root {
  color-scheme: light;

  /* The page's own scale. */
  --page: #ffffff;
  --page-2: #f5f5f7;
  --ink: #1d1d1f;
  --ink-2: #6e6e73;
  --ink-3: #86868b;
  --rule: rgba(0, 0, 0, .10);

  /* What a demonstration is made of, inside a light band. */
  --panel: #ffffff;
  --panel-2: #f2f2f4;
  --card: #ffffff;
  /* The page of a PDF, and the pane behind one. The demonstrations have
     always asked for these; until now nobody declared them and they fell
     back to transparent. */
  --paper: #ffffff;
  --paper-2: #f7f7f9;
  --display: var(--sans);

  --accent: #0a6cff;
  --accent-soft: rgba(10, 108, 255, .10);
  --accent-line: rgba(10, 108, 255, .45);
  --mark: #ffe14d;
  --mark-soft: rgba(255, 225, 77, .55);
  --green: #1f9254;

  --row: 8px;
  --popover: 14px;
  --panel-r: 22px;
  --shadow-1: 0 1px 2px rgba(16, 24, 40, .05), 0 6px 18px rgba(16, 24, 40, .06);
  --shadow-2: 0 2px 6px rgba(16, 24, 40, .06), 0 28px 70px rgba(16, 24, 40, .13);

  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
          "Pretendard", "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif;
  --serif: "Times New Roman", "Nanum Myeongjo", serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  --nav-h: 48px;
  --gutter: clamp(20px, 5vw, 48px);
  --measure: 720px;
}

/* ─────────────────────────  where a line may end  ────────────────────── */

/* Korean has no rule against ending a line inside a word, so a browser ends
   one wherever it runs out of room: «라이브러리» comes apart as «라이브 /
   러리» and the reader has to put the word back together before they can
   read the sentence. It cannot be fixed a sentence at a time, because it is
   not a property of any sentence — so it is set once, here, for everything
   on the page including the demonstrations.

   `keep-all` moves the break to the space, which is where Korean is read as
   breaking. `break-word` is the release valve under it: a token wider than
   its own column — a path, an address, a long compound — has to break
   somewhere, and without this it would simply run out of the box. English is
   untouched; it already breaks only at spaces. */
html {
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* And how many lines, and how full. A heading is balanced so its last line is
   never one word alone, and prose is set `pretty` so a paragraph does not end
   on a stray syllable. Both are ignored by browsers that do not have them,
   which costs nothing — the text is already readable without. */
h1, h2, h3, h4 { text-wrap: balance; }
p, li, dd, figcaption, blockquote { text-wrap: pretty; }

/* Not inside a demonstration. A demo is a picture of the app, and the app
   does not balance its own labels — balanced text in a mock-up of a window
   is a mock-up of a window that does not exist. */
.demo-slot :is(h1, h2, h3, h4, p, li, dd, figcaption, blockquote),
.doc-demo :is(h1, h2, h3, h4, p, li, dd, figcaption, blockquote) {
  text-wrap: wrap;
}

/* A band that is grey, and a band that is black. Tokens only: the demos
   inside them do not know which band they are in. */
.tone-grey { --page: #f5f5f7; --panel: #ffffff; --panel-2: #eaeaec; --card: #ffffff;
              --paper: #ffffff; --paper-2: #f7f7f9; }
.tone-dark {
  color-scheme: dark;
  --page: #000000;
  --ink: #f5f5f7;
  --ink-2: #a1a1a6;
  --ink-3: #86868b;
  --rule: rgba(255, 255, 255, .14);
  --panel: #1c1c1e;
  --panel-2: #2c2c2e;
  --card: #1c1c1e;
  --paper: #242426;
  --paper-2: #2c2c2e;
  --accent: #2997ff;
  --accent-soft: rgba(41, 151, 255, .18);
  --accent-line: rgba(41, 151, 255, .55);
  --mark: #e3c02e;
  --mark-soft: rgba(227, 192, 46, .34);
  --green: #56c98a;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .55), 0 6px 18px rgba(0, 0, 0, .4);
  --shadow-2: 0 2px 6px rgba(0, 0, 0, .6), 0 28px 70px rgba(0, 0, 0, .55);
}

/* On a dark desktop the whole page goes dark, and the three tones step down
   rather than flipping: the rhythm is what the tones are for. */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --page: #000000;
    --page-2: #0a0a0b;
    --ink: #f5f5f7;
    --ink-2: #a1a1a6;
    --ink-3: #86868b;
    --rule: rgba(255, 255, 255, .13);
    --panel: #1c1c1e;
    --panel-2: #2c2c2e;
    --card: #1c1c1e;
    --accent: #2997ff;
    --accent-soft: rgba(41, 151, 255, .18);
    --accent-line: rgba(41, 151, 255, .55);
    --mark: #e3c02e;
    --mark-soft: rgba(227, 192, 46, .34);
    --green: #56c98a;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .55), 0 6px 18px rgba(0, 0, 0, .4);
    --shadow-2: 0 2px 6px rgba(0, 0, 0, .6), 0 28px 70px rgba(0, 0, 0, .55);
  }
  .tone-grey { --page: #111113; --panel: #1c1c1e; --panel-2: #2c2c2e; --card: #1c1c1e;
               --paper: #242426; --paper-2: #2c2c2e; }
  .tone-dark { --page: #000000; }
}

/* ═════════════════════════════ two languages ══════════════════════════════
   Both are in the markup, side by side, so they have to be edited together;
   the page shows one. Decided in the head before anything paints, so there is
   no flash of the language you do not read. */
html[lang="ko"] [data-l="en"] { display: none !important; }
html[lang="en"] [data-l="ko"] { display: none !important; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--ink);
  background: var(--page);
  font: 17px/1.5 var(--sans);
  letter-spacing: -.01em;
  overflow-x: hidden;
}

a { color: var(--accent); text-decoration: none; text-underline-offset: 3px; }
a:hover { text-decoration: underline; }
button { font: inherit; color: inherit; }

/* The highlighter, fitted to the words — which is what the app does. */
.mark {
  background: linear-gradient(transparent 56%, var(--mark-soft) 56%, var(--mark-soft) 94%, transparent 94%);
  padding: 0 .1em;
  border-radius: 2px;
}

/* ───────────────────────────── the top bar ───────────────────────────── */

/* Apple's: a thin strip that stays, with the product's name at one end and
   the one thing you came for at the other. */
.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 var(--gutter);
  font-size: 12.5px;
  color: var(--ink-2);
  background: color-mix(in srgb, var(--page) 78%, transparent);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--rule);
}
.topbar .name { font-weight: 600; color: var(--ink); letter-spacing: -.02em; font-size: 14px; white-space: nowrap; }
.topbar nav { display: flex; gap: 18px; margin-left: 6px; overflow: hidden; }
.topbar nav a { color: var(--ink-2); white-space: nowrap; }
.topbar nav a:hover { color: var(--ink); text-decoration: none; }
.topbar .spacer { margin-left: auto; }
.topbar .pill {
  background: var(--accent);
  color: #fff;
  border-radius: 980px;
  padding: 5px 13px;
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
}
.topbar .pill:hover { text-decoration: none; filter: brightness(1.06); }

@media (max-width: 860px) { .topbar nav { display: none; } }
/* On a narrow phone the bar has to hold the name, the language and the way to
   the download. It used to run past the edge and take the whole page sideways
   with it, so below this the spacing gives way rather than the content. */
@media (max-width: 430px) {
  .topbar { gap: 10px; padding: 0 14px; }
  .topbar .name { font-size: 13.5px; }
}

/* ────────────────────────────── the bands ────────────────────────────── */

.band {
  background: var(--page);
  color: var(--ink);
  padding: clamp(72px, 12vh, 140px) var(--gutter);
}
.band-inner { max-width: 1120px; margin: 0 auto; }

.band-head { max-width: var(--measure); margin: 0 auto clamp(34px, 5vh, 60px); text-align: center; }
.eyebrow {
  margin: 0 0 12px;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--accent);
}
.display {
  margin: 0;
  font-size: clamp(32px, 5.2vw, 56px);
  line-height: 1.07;
  font-weight: 600;
  letter-spacing: -.022em;
  text-wrap: balance;
}
.say {
  margin: 20px auto 0;
  max-width: 640px;
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.5;
  color: var(--ink-2);
  text-wrap: pretty;
}
.say b { color: var(--ink); font-weight: 600; }

/* Two things side by side, each with its own small heading — Apple's duo. */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 2.4vw, 30px); }
.duo.one-up { grid-template-columns: 1fr; max-width: 900px; margin: 0 auto; }
/* When one cell has a demonstration and the other is only words, stretching
   both to the taller leaves a hole under the words. */
.duo.tops { align-items: start; }
@media (max-width: 900px) { .duo { grid-template-columns: 1fr; } }

.cell {
  background: var(--panel);
  border-radius: 22px;
  padding: clamp(22px, 2.6vw, 32px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: var(--shadow-1);
  overflow: hidden;
}
.tone-dark .cell, .tone-grey .cell { box-shadow: none; }
.cell h3 {
  margin: 0;
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 600;
  letter-spacing: -.018em;
  line-height: 1.2;
}
.cell > p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }
.cell > p b { color: var(--ink); font-weight: 600; }

/* Where a demonstration goes. It grows to what it needs and no further. */
.demo-slot {
  /* Grows into whatever the cell beside it left over, rather than sitting at
     the bottom of it: two cells of equal height with one demonstration
     hanging off the floor is a hole, not a layout. */
  flex: 1 1 auto;
  display: flex;
  align-items: stretch;
  min-height: 210px;
  border-radius: 16px;
  background: var(--panel-2);
  padding: 16px;
}
.duo.one-up .demo-slot { min-height: 280px; }
.cell .demo-shell { flex: 1; }

/* A band whose demonstration is the whole point gets the panel to itself,
   the same panel a cell is, so the rhythm down the page does not break. */
.band-demo {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  align-items: stretch;
  min-height: 320px;
  background: var(--panel);
  border-radius: 22px;
  padding: clamp(20px, 2.4vw, 32px);
  box-shadow: var(--shadow-1);
}
.tone-dark .band-demo, .tone-grey .band-demo { box-shadow: none; }

/* Something arrives as you reach it, the way Apple's pages do. */
.rise { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1); }
.rise.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rise { opacity: 1; transform: none; transition: none; } }

/* ───────────────────────────────  hero  ──────────────────────────────── */

.hero {
  min-height: calc(100svh - var(--nav-h));
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(22px, 3vh, 38px);
  padding: clamp(40px, 7vh, 88px) var(--gutter) clamp(48px, 8vh, 96px);
  text-align: center;
}
.hero-top { max-width: 900px; margin: 0 auto; }
.wordmark {
  margin: 0;
  font-size: clamp(44px, 8.4vw, 96px);
  line-height: 1;
  font-weight: 600;
  letter-spacing: -.035em;
}
.wordmark .t { color: var(--accent); }
/* The stage the app is at, worn by the name rather than announced under it.
   Raised to the top of the line box so it sits against the cap height like a
   superscript, and small enough that it reads as a label on the name and not
   as a third word in it. */
.wordmark .beta {
  display: inline-block;
  vertical-align: top;
  margin: .12em 0 0 .18em;
  padding: .34em .66em;
  border-radius: 999px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  color: var(--accent);
  font-size: max(12px, .19em);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
}
.hero .lede {
  margin: 18px auto 0;
  max-width: 680px;
  font-size: clamp(19px, 2.2vw, 28px);
  line-height: 1.32;
  font-weight: 500;
  letter-spacing: -.018em;
  color: var(--ink-2);
}
.hero .lede b { color: var(--ink); font-weight: 600; }

.hero-demo {
  width: min(980px, 100%);
  margin: 0 auto;
  display: flex;
  min-height: 300px;
  background: var(--panel-2);
  border-radius: var(--panel-r);
  padding: clamp(16px, 2vw, 26px);
}

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

/* Apple's buttons: a filled capsule for the one thing, plain blue text for
   everything else. */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; text-align: center;
  border: none; cursor: pointer; text-decoration: none;
  border-radius: 980px;
  padding: 11px 22px;
  font-size: 15px; font-weight: 500;
  color: var(--ink);
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  transition: filter .15s, background .15s;
  line-height: 1.25;
}
.btn:hover { text-decoration: none; background: color-mix(in srgb, var(--ink) 13%, transparent); }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent); filter: brightness(1.08); }
.btn-primary .sub { display: block; font-size: 11.5px; opacity: .78; font-weight: 400; margin-top: 1px; }
.btn-primary .stable {
  display: inline-block; vertical-align: 2px; margin-left: 8px;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.02em; line-height: 1;
  padding: 3px 7px; border-radius: 999px;
  color: #fff; background: rgba(255, 255, 255, 0.22);
}
.btn-ghost { background: none; color: var(--accent); padding: 11px 10px; }
.btn-ghost:hover { background: none; text-decoration: underline; }

.hint { font-size: 13px; line-height: 1.5; color: var(--ink-3); margin: 8px 0 0; }
.hint b { color: var(--ink-2); font-weight: 600; }
.variants { flex-basis: 100%; margin: 2px 0 0; text-align: center; }
.tally { flex-basis: 100%; margin: 0; text-align: center; }

/* Which desktop the download button points at. */
.picker { display: inline-flex; gap: 2px; padding: 3px; border-radius: 980px;
          background: color-mix(in srgb, var(--ink) 7%, transparent); }
.picker button {
  border: none; background: none; cursor: pointer;
  padding: 6px 13px; border-radius: 980px; font-size: 13px; font-weight: 500;
  color: var(--ink-2);
}
.picker button.on, .picker .pick[aria-pressed="true"] {
  background: var(--panel); color: var(--ink); box-shadow: var(--shadow-1);
}

/* Written out rather than an icon: a globe means "settings I have to go
   find", and this is one tap. */
.lang { display: inline-flex; gap: 2px; padding: 2px; border-radius: 980px;
        background: color-mix(in srgb, var(--ink) 7%, transparent); }
.lang button {
  border: none; background: none; cursor: pointer; white-space: nowrap;
  padding: 3px 10px; border-radius: 980px; font-size: 11.5px; font-weight: 500; color: var(--ink-3);
}
.lang button.on { background: var(--panel); color: var(--ink); }

/* ───────────────────────────── demo furniture ─────────────────────────── */

.demo-shell { flex: 1; display: flex; min-height: 0; min-width: 0; gap: 14px; width: 100%; }
.pane {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: var(--popover);
  box-shadow: var(--shadow-1);
  padding: 13px 15px;
  overflow: auto;
  min-height: 0;
}
.paper-face {
  font-family: var(--serif);
  font-size: clamp(10.5px, .95vw, 13px);
  line-height: 1.62;
  color: var(--ink);
  text-align: justify;
  hyphens: auto;
}
.paper-face h4 { font-size: 1.12em; margin: 0 0 .5em; font-weight: 700; }
.paper-face p { margin: 0 0 .75em; }

/* A key, the way the app draws one in a menu. */
.key {
  font: 600 11.5px/1 var(--mono);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 4px 7px;
  background: var(--panel-2);
  color: var(--ink-2);
  white-space: nowrap;
}

.seg {
  display: inline-flex;
  background: color-mix(in srgb, var(--ink) 9%, transparent);
  border-radius: 9px;
  padding: 2px;
  gap: 2px;
}
.seg button {
  border: none; background: none; cursor: pointer;
  padding: 5px 12px; border-radius: 7px; font-size: 13px; font-weight: 500;
  color: var(--ink-2); transition: background .15s, color .15s;
}
.seg button.on { background: var(--panel); color: var(--ink); box-shadow: var(--shadow-1); }

/* A chip: a heading in a table of contents, a pane's switch. */
.chip {
  flex: 0 0 auto;
  border: 1px solid transparent;
  background: none;
  border-radius: var(--row);
  padding: 6px 11px;
  font-size: 13px;
  color: var(--ink-2);
  cursor: pointer;
  white-space: nowrap;
  transition: color .15s, background .15s;
}
.chip:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); }
.chip.is-current { color: var(--accent); background: var(--accent-soft); font-weight: 600; }

/* One square in a rack of tools. */
.pick {
  border: 0; background: none; cursor: pointer;
  padding: 6px 12px; border-radius: 7px;
  font: inherit; font-size: 13px; font-weight: 550; color: var(--ink-2);
  transition: background .12s ease, color .12s ease;
}
.pick:hover { color: var(--ink); }
.pick.on, .pick[aria-pressed="true"] {
  background: var(--panel); color: var(--ink); box-shadow: var(--shadow-1);
}
.picker:empty { display: none; }

.code {
  font: 12.5px/1.7 var(--mono);
  background: var(--panel-2);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 11px 13px;
  overflow-x: auto;
  white-space: pre;
}
code { font: .92em var(--mono); background: var(--panel-2); padding: .1em .35em; border-radius: 5px; }

/* ──────────────────────────── the tile grid ──────────────────────────── */

/* Apple's "Get to know" block: small squares of one fact each. */
.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(14px, 1.6vw, 20px);
  max-width: 1120px;
  margin: 0 auto;
}
.tile {
  background: var(--panel);
  border-radius: 18px;
  padding: 26px 24px;
  box-shadow: var(--shadow-1);
}
.tone-grey .tile, .tone-dark .tile { box-shadow: none; }
.tile h3 { margin: 0 0 8px; font-size: 18px; font-weight: 600; letter-spacing: -.015em; }
.tile p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }

/* ───────────────────── what readers asked for ─────────────────────────── */

.board { display: flex; flex-direction: column; gap: 8px; max-width: 840px; margin: 0 auto; }
.row {
  display: flex; align-items: baseline; gap: 12px;
  background: var(--panel); border-radius: 12px; padding: 12px 16px;
  font-size: 14.5px;
}
.row .st { flex: 0 0 auto; font-size: 13px; }
.row .ttl { flex: 1; min-width: 0; }
.row .who { color: var(--ink-3); font-size: 13px; white-space: nowrap; }
/* Each row is the issue itself, and a link to it. They were bare links in
   the accent until 0.9.14 — nobody had written in yet, so nobody saw. */
.board .row { color: var(--ink); background: var(--page-2); flex-wrap: wrap; row-gap: 2px; }
.board a.row:hover { text-decoration: none; background: color-mix(in srgb, var(--ink) 6%, var(--page-2)); }
.row .st.done { color: var(--green); }
.row .st.open { color: var(--ink-3); }
.row .meta { color: var(--ink-3); font-size: 13px; white-space: nowrap; }
@media (max-width: 520px) {
  .row .ttl { flex-basis: calc(100% - 26px); }
  .row .meta { margin-left: 25px; }
}
.tally-row { display: flex; gap: 30px; justify-content: center; margin-bottom: 26px; flex-wrap: wrap; }
.tally-row > div { text-align: center; }
.tally-row .k { font-size: 13px; color: var(--ink-3); }
.tally-row .n { font-size: 30px; font-weight: 600; letter-spacing: -.02em; display: block; line-height: 1.15; }

/* The people, set as a paper's acknowledgments — the one page of a thesis
   everybody reads. Each name somebody left in the app wears the app's
   highlighter, and the highlighter is drawn across it as the page comes into
   view, one name after another, first sender first; the last place is an
   empty highlight with a caret in it, waiting for whoever is next. The only
   motion on it is the gesture the app is about. */
.thanks {
  max-width: 780px;
  margin: 0 auto clamp(40px, 6vh, 64px);
  padding: clamp(30px, 4.6vw, 54px) clamp(22px, 5.4vw, 64px) clamp(32px, 4.6vw, 52px);
  background: var(--panel);
  border-radius: var(--panel-r);
  box-shadow: var(--shadow-1);
  text-align: center;
}
.thanks-head {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
html[lang="ko"] .thanks-head { letter-spacing: .2em; font-size: 12.5px; }
.thanks-lead {
  margin: 14px auto 0;
  max-width: 520px;
  font-size: clamp(16px, 1.45vw, 19px);
  line-height: 1.5;
  color: var(--ink-2);
}
.thanks-names {
  margin: clamp(22px, 3.2vw, 34px) 0 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: .3em .75em;
  font-size: clamp(24px, 3.3vw, 36px);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.4;
}
/* Fitted to the words, low on them, the way the app lays a highlight: the
   same band the page's `.mark` is, drawn by growing its width. */
.thanks-name {
  padding: 0 .12em;
  border-radius: 3px;
  background-image: linear-gradient(var(--mark-soft), var(--mark-soft));
  background-repeat: no-repeat;
  background-position: 0 88%;
  background-size: 0% 42%;
  transition: background-size .6s cubic-bezier(.2, .7, .3, 1);
  overflow-wrap: anywhere;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  cursor: default;
}
.thanks.lit .thanks-name { background-size: 100% 42%; }
/* The name that was sent a moment ago — reached from the sheet in the app —
   is drawn last and in the full colour of the pen. */
.thanks-name.just { background-image: linear-gradient(var(--mark), var(--mark)); }

/* The next one: a blank to fill in, the way a form leaves one — a line in
   the pen's colour, a caret at its start, and the word for what goes there.
   Not an outlined highlight: a dashed box low on the words ran through them
   like a strikethrough. */
.thanks-blank {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: .08em;
  min-width: 4.2em;
  padding: 0 .16em;
  background: none;
  color: var(--ink-3);
  font-weight: 500;
}
.thanks-blank::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: .06em;
  border-bottom: 2px dashed color-mix(in srgb, var(--mark) 55%, var(--ink-3));
}
.thanks-blank .caret {
  flex: 0 0 auto;
  align-self: center;
  width: 2px;
  height: .92em;
  border-radius: 1px;
  background: var(--accent);
  animation: thanks-caret 1.1s steps(1, end) infinite;
}
.thanks-blank .ph { opacity: .45; }
@keyframes thanks-caret { 50% { opacity: 0; } }

.thanks-quiet {
  margin: clamp(18px, 2.6vw, 26px) auto 0;
  font-size: 15px;
  color: var(--ink-3);
}
.thanks-just {
  margin: 18px auto 0;
  display: inline-block;
  padding: 7px 14px;
  border-radius: 980px;
  font-size: 14.5px;
  color: var(--ink);
  background: color-mix(in srgb, var(--mark) 26%, transparent);
}
.thanks-quiet[hidden], .thanks-just[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .thanks-name { transition: none; background-size: 100% 42%; }
  .thanks-blank .caret { animation: none; }
}
@media (max-width: 520px) {
  .thanks-names { gap: .25em .6em; }
  .thanks-quiet { font-size: 14px; }
}
.ask { max-width: 620px; margin: 30px auto 0; text-align: center; color: var(--ink-2); font-size: 15.5px; }

/* ───────────────────────────────  footer  ─────────────────────────────── */

footer {
  background: var(--page-2);
  color: var(--ink-3);
  font-size: 12.5px;
  line-height: 1.7;
  padding: 40px var(--gutter);
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  text-align: center;
  border-top: 1px solid var(--rule);
}
@media (prefers-color-scheme: dark) { footer { background: #0a0a0b; } }

/* ─────────────────────────────── dialogs ──────────────────────────────── */

dialog {
  border: none; padding: 0; color: var(--ink); background: var(--panel);
  border-radius: var(--panel-r);
  width: min(760px, calc(100vw - 32px));
  max-height: min(86vh, 900px);
  box-shadow: var(--shadow-2);
}
dialog::backdrop { background: rgba(0, 0, 0, .45); backdrop-filter: blur(4px); }
.sheet { padding: 26px clamp(20px, 4vw, 34px) 30px; }
.sheet h2 { margin: 0 0 6px; font-size: 26px; font-weight: 600; letter-spacing: -.02em; }
.sheet .sub { color: var(--ink-2); font-size: 15px; margin: 0 0 18px; }
.sheet-close {
  position: sticky; top: 0; float: right; margin: -6px -6px 0 0;
  border: none; background: none; cursor: pointer; font-size: 15px; color: var(--ink-3);
  width: 32px; height: 32px; border-radius: 50%;
}
.sheet-close:hover { background: var(--panel-2); }
.step { display: flex; gap: 15px; padding: 18px 0; border-top: 1px solid var(--rule); }
.step .no {
  flex: 0 0 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #fff;
  font-size: 13px; font-weight: 600; display: flex; align-items: center; justify-content: center;
}
.step .body { flex: 1; min-width: 0; }
.step h3 { margin: 2px 0 6px; font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.step p { margin: 0 0 10px; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
.step img { width: 100%; border-radius: 12px; border: 1px solid var(--rule); display: block; }
.step img.shot-sm { max-width: 420px; }

.vrow {
  display: grid;
  grid-template-columns: auto 88px 1fr auto auto;
  gap: 12px; align-items: baseline;
  padding: 11px 0; border-top: 1px solid var(--rule);
  font-size: 14px;
}
.vrow .v { font-weight: 600; display: inline-flex; align-items: baseline; gap: 6px; }
/* The badge a version gets once it has been used and found good. */
.vrow .stable {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.02em; line-height: 1;
  padding: 3px 6px; border-radius: 999px;
  color: var(--green); background: color-mix(in srgb, var(--green) 14%, transparent);
}
.vrow .when { color: var(--ink-3); font-size: 12.5px; }
.vrow .n { color: var(--ink-2); min-width: 0; }
.vrow .d { color: var(--ink-3); font-size: 12.5px; white-space: nowrap; }
.vlinks { display: inline-flex; gap: 10px; flex-wrap: wrap; }
.vget { white-space: nowrap; }
@media (max-width: 680px) {
  .vrow { grid-template-columns: 1fr auto; }
  .vrow .when, .vrow .n { grid-column: 1 / -1; }
}

/* ─────────────────────────────── narrow ───────────────────────────────── */

@media (max-width: 640px) {
  body { font-size: 16px; }
  .demo-slot { min-height: 190px; padding: 12px; }
  .hero-demo { min-height: 260px; }
  .band-demo { min-height: 260px; }
}

/* ═══════════════════════════ the manual ═══════════════════════════════════

   A second page, in the same voice as the first. The landing page argues; this
   one answers — so the type is smaller, the measure is narrower, and the
   demonstrations sit inside the prose rather than being the point of a band.
   Same tokens, same radii, same accent: it should read as another page of the
   same document, not as documentation bolted on. */

.docs-hero {
  padding: clamp(56px, 9vh, 104px) var(--gutter) clamp(28px, 4vh, 48px);
  background: var(--page);
  color: var(--ink);
}
.docs-hero .inner { max-width: 1120px; margin: 0 auto; }
.docs-hero .display { font-size: clamp(34px, 5vw, 62px); }
.docs-hero .say { margin-left: 0; margin-right: 0; max-width: 620px; }

/* The rail and the reading column. The rail is the table of contents and it
   stays put: a manual is read by somebody who came for one section. */
.docs {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(72px, 12vh, 140px);
}

.rail {
  position: sticky;
  top: calc(var(--nav-h) + 22px);
  align-self: start;
  max-height: calc(100svh - var(--nav-h) - 44px);
  overflow-y: auto;
  padding-right: 6px;
  font-size: 13.5px;
  line-height: 1.35;
}
.rail h2 {
  margin: 0 0 10px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.rail a {
  display: block;
  padding: 6px 10px;
  margin: 0 0 1px -10px;
  border-radius: var(--row);
  color: var(--ink-2);
  transition: background-color .14s cubic-bezier(.32,.72,0,1), color .14s cubic-bezier(.32,.72,0,1);
}
.rail a:hover { text-decoration: none; color: var(--ink); background: color-mix(in srgb, var(--ink) 5%, transparent); }
/* Where you are. The same pale accent the app's own source list uses for the
   shelf you are on — and for the same reason: which section you are reading is
   not a fact about where the keyboard is pointing. */
.rail a.on { color: var(--accent); background: var(--accent-soft); font-weight: 500; }

/* On a narrow screen the rail lies down across the top and scrolls sideways. */
@media (max-width: 900px) {
  .docs { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .rail {
    position: sticky;
    top: var(--nav-h);
    z-index: 30;
    display: flex;
    gap: 4px;
    /* A grid item is as wide as its content unless told otherwise, so without
       this the rail did not scroll — it pushed the whole page sideways. */
    min-width: 0;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
    margin: 0 calc(var(--gutter) * -1) 26px;
    padding: 10px var(--gutter);
    background: color-mix(in srgb, var(--page) 88%, transparent);
    backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid var(--rule);
    scrollbar-width: none;
  }
  .rail::-webkit-scrollbar { display: none; }
  .rail h2 { display: none; }
  .rail a { margin: 0; white-space: nowrap; }
}

/* ── one section ── */

.doc {
  padding: clamp(30px, 5vh, 56px) 0;
  border-top: 1px solid var(--rule);
  /* A jump from the rail must not park the heading under the bar. */
  scroll-margin-top: calc(var(--nav-h) + 20px);
}
.doc:first-of-type { border-top: 0; padding-top: 0; }
.doc > h2 {
  margin: 0 0 6px;
  font-size: clamp(27px, 3.2vw, 38px);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.12;
  /* So a link from the rail does not park the heading under the top bar. */
  scroll-margin-top: calc(var(--nav-h) + 20px);
}
.doc > .lede {
  margin: 0 0 30px;
  max-width: var(--measure);
  font-size: clamp(16.5px, 1.4vw, 19px);
  line-height: 1.55;
  color: var(--ink-2);
  text-wrap: pretty;
}
.doc > .lede b { color: var(--ink); font-weight: 600; }

/* A thing you can do, with the steps for doing it and, where it helps, the
   thing itself underneath. */
.task { margin: 0 0 clamp(26px, 3.4vh, 42px); max-width: 860px; }
.task h3 {
  margin: 0 0 8px;
  font-size: clamp(18px, 1.7vw, 22px);
  font-weight: 600;
  letter-spacing: -.015em;
  scroll-margin-top: calc(var(--nav-h) + 20px);
}
.task p { margin: 0 0 12px; font-size: 15.5px; line-height: 1.6; color: var(--ink-2); max-width: var(--measure); }
.task p b { color: var(--ink); font-weight: 600; }
.task p:last-child { margin-bottom: 0; }

/* The steps. Numbered, because an order that matters should look like one. */
ol.steps { margin: 0 0 14px; padding: 0; list-style: none; counter-reset: step; max-width: var(--measure); }
ol.steps li {
  counter-increment: step;
  position: relative;
  padding: 0 0 0 34px;
  margin: 0 0 9px;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ink-2);
}
ol.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: .05em;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font: 600 12px/1 var(--sans);
}
ol.steps li b { color: var(--ink); font-weight: 600; }
ol.steps li:last-child { margin-bottom: 0; }

/* A plain list, where order is not the point. */
ul.points { margin: 0 0 14px; padding: 0 0 0 18px; max-width: var(--measure); }
ul.points li { margin: 0 0 8px; font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }
ul.points li b { color: var(--ink); font-weight: 600; }

/* Where a working piece goes, inside the prose. */
.doc-demo {
  margin: 16px 0 0;
  display: flex;
  align-items: stretch;
  min-height: 300px;
  border-radius: var(--panel-r);
  background: var(--panel-2);
  padding: clamp(14px, 1.8vw, 22px);
}
.doc-demo .demo-shell { flex: 1; }
.doc-demo + .caption {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-3);
}

/* Something true that is not a step: what the app promises, what it will not
   do, where the file ends up. */
.note {
  margin: 14px 0 0;
  max-width: var(--measure);
  padding: 14px 16px;
  border-radius: var(--popover);
  background: var(--panel-2);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-2);
}
.note b { color: var(--ink); font-weight: 600; }
.note.warn { background: color-mix(in srgb, #ff9500 12%, var(--panel-2)); }

/* The keys, as a table. Two columns on a phone is one column too many. */
.keys { width: 100%; max-width: var(--measure); border-collapse: collapse; margin: 6px 0 0; }
.keys caption {
  text-align: left;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-3);
  padding: 18px 0 8px;
}
.keys td { padding: 8px 0; border-top: 1px solid var(--rule); font-size: 15px; color: var(--ink-2); vertical-align: baseline; }
.keys tr:first-child td { border-top: 0; }
.keys td.k { width: 150px; padding-right: 16px; white-space: nowrap; }
.keys td.k .key { display: inline-block; }
@media (max-width: 600px) {
  .keys td.k { width: 118px; }
  .keys td { font-size: 14px; }
}

/* The way on, at the foot of the manual. */
.docs-foot {
  border-top: 1px solid var(--rule);
  padding: clamp(40px, 6vh, 72px) var(--gutter);
  background: var(--page-2);
  color: var(--ink-2);
}
.docs-foot .inner { max-width: 1120px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; }
.docs-foot p { margin: 0; font-size: 14.5px; line-height: 1.55; max-width: 560px; }
.docs-foot .spacer { margin-left: auto; }

/* The rail lies down under the top bar on a narrow screen, so a jump has both
   of them to clear. After the rules above, because it overrides them. */
@media (max-width: 900px) {
  .doc,
  .doc > h2,
  .task h3 { scroll-margin-top: calc(var(--nav-h) + 74px); }
}

/* ── the manual, read like a help centre ──
   Four places to start at the top, the way a help centre opens: each one a
   task and a line on what it covers. Then every section ends on where to go
   next, and the questions people actually arrive with get a table. */

.starts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  max-width: 860px;
  margin: 28px 0 0;
}
.starts a {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px;
  border-radius: var(--popover);
  background: var(--panel-2);
  color: var(--ink-2);
  transition: background-color .14s cubic-bezier(.32,.72,0,1);
}
.starts a:hover { text-decoration: none; background: color-mix(in srgb, var(--accent) 8%, var(--panel-2)); }
.starts a b { color: var(--ink); font-weight: 600; font-size: 16px; }
.starts a span { font-size: 14.5px; line-height: 1.5; }
@media (max-width: 640px) { .starts { grid-template-columns: minmax(0, 1fr); } }

/* Where to go next, at the foot of a section. */
.related { margin: 4px 0 0; max-width: var(--measure); font-size: 14px; line-height: 1.5; color: var(--ink-3); }
.related a { color: var(--accent); }

/* A task a link can land on clears the bar the way a section does. */
.task[id] { scroll-margin-top: calc(var(--nav-h) + 20px); }
@media (max-width: 900px) { .task[id] { scroll-margin-top: calc(var(--nav-h) + 74px); } }

/* Two columns of words: a symptom and its fix, a model and what it needs. */
.fixes, .specs { width: 100%; max-width: var(--measure); border-collapse: collapse; margin: 6px 0 14px; }
.specs caption { text-align: left; font-size: 13px; font-weight: 600; color: var(--ink-3); padding: 6px 0 8px; }
.fixes td, .specs td {
  padding: 10px 0;
  border-top: 1px solid var(--rule);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-2);
  vertical-align: top;
}
.fixes tr:first-child td, .specs tr:first-child td { border-top: 0; }
.fixes td.k, .specs td.k { padding-right: 18px; color: var(--ink); font-weight: 500; }
.fixes td.k { width: 34%; }
.specs td.k { width: 22%; white-space: nowrap; }
.fixes td b { color: var(--ink); font-weight: 600; }
@media (max-width: 600px) {
  .fixes td, .specs td { font-size: 14px; }
  .fixes td.k { width: 40%; }
}

/* A list inside a band's cell, a size down from the manual's. */
.cell ul.points { margin: 0 0 12px; }
.cell ul.points li { font-size: 15px; }

/* A caption under a demonstration, then more of the task: room between them. */
.task .caption + ul.points,
.task .caption + p { margin-top: 16px; }