@font-face {
  font-family: "Familjen Grotesk";
  src: url(/assets/fonts/familjen-grotesk.woff2) format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
/* While Familjen Grotesk loads, its own letters draw in Arial (Macs, iPhones, Windows) or Roboto (Android), scaled to its
   widths and heights so no line moves when it arrives. The range is the font's own; other characters keep the system font. */
@font-face { font-family: "Familjen Grotesk Arial"; src: local("Arial"), local("ArialMT"); font-weight: 400 500; size-adjust: 93.6%; ascent-override: 109.5%; descent-override: 24%; line-gap-override: 0%; unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02BC, U+02C6, U+02DA, U+02DC, U+2002-200B, U+2010, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2032-2033, U+2039-203A, U+2044, U+2052, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215; }
@font-face { font-family: "Familjen Grotesk Arial"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 600 700; size-adjust: 91.6%; ascent-override: 111.9%; descent-override: 24.6%; line-gap-override: 0%; unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02BC, U+02C6, U+02DA, U+02DC, U+2002-200B, U+2010, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2032-2033, U+2039-203A, U+2044, U+2052, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215; }
@font-face { font-family: "Familjen Grotesk Roboto"; src: local("Roboto"), local("Roboto-Regular"); font-weight: 400 500; size-adjust: 94.4%; ascent-override: 108.6%; descent-override: 23.8%; line-gap-override: 0%; unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02BC, U+02C6, U+02DA, U+02DC, U+2002-200B, U+2010, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2032-2033, U+2039-203A, U+2044, U+2052, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215; }
@font-face { font-family: "Familjen Grotesk Roboto"; src: local("Roboto Bold"), local("Roboto-Bold"); font-weight: 600 700; size-adjust: 97.7%; ascent-override: 104.9%; descent-override: 23%; line-gap-override: 0%; unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02BC, U+02C6, U+02DA, U+02DC, U+2002-200B, U+2010, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2032-2033, U+2039-203A, U+2044, U+2052, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215; }
:root {
  --field: #c8321e;
  --on: #fff5e9;
  --on-2: #fff5e9;
  --on-hair: rgba(255, 245, 233, .28);
  --on-line: rgba(255, 245, 233, .5);
  --sheet: #fffaf3;
  --well: #f6ebdf;
  --ink: #24110c;
  --ink-2: #5a3f37;
  --muted: #7a6159;
  --hair: rgba(36, 17, 12, .11);
  --act: #c8321e;
  --act-on: #fff5e9;
  --act-text: #c8321e;
  --ok: #2f6b45;
  --bad: #a12a16;
  /* Night: the near-black the posts sit on in the launch video. */
  --night: #0d0807;
  --on-night: #f6ece4;
  --on-night-2: rgba(246, 236, 228, .62);
  --night-hair: rgba(246, 236, 228, .14);
  --scrim: rgba(60, 10, 4, .42);
  --shadow: 0 0 0 .5px rgba(60, 10, 4, .22), 0 1px 2px rgba(60, 10, 4, .10), 0 10px 24px rgba(70, 8, 0, .14), 0 32px 72px rgba(70, 8, 0, .20);
  --font: "Familjen Grotesk", "Familjen Grotesk Arial", "Familjen Grotesk Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --ios: -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  color-scheme: only light;
}
/* The scale. Type: one family, set tight; each step has its own size, leading and tracking (the classes below). */
:root {
  --fs-display: clamp(46px, 6.6vw, 96px);
  --fs-hold: clamp(52px, 10vw, 144px);
  --fs-title: clamp(38px, 4.8vw, 72px);
  --fs-heading: clamp(34px, 3.4vw, 48px);
  --fs-head: 24px;
  --fs-lede: 19px;
  --fs-read: 17px;
  --fs-body: 16px;
  --fs-small: 14.5px;
  --fs-meta: 13px;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Roboto Mono", monospace;
  /* Space, on 4 px: 4 8 12 16 20 24 32 44 56 84 120. A section is --sec tall at each end. */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px;
  --s-7: 32px; --s-8: 44px; --s-9: 56px; --s-10: 84px; --s-11: 120px;
  --sec: 120px;
  /* The grid: a 1440 px page with 56 px margins, 12 columns on a 24 px gutter; text runs 680 px at most, a sheet 880. */
  --page: 1440px; --margin: 56px; --gutter: 24px; --measure: 680px; --sheet-w: 880px;
  /* Shape: controls 12, cards and posts 14, sheets 22; inline code and focus rings 4. One shadow: --shadow. */
  --r-inline: 4px; --r-control: 12px; --r-card: 14px; --r-sheet: 22px;
  /* Motion: fast and quiet, never on scroll. */
  --ease: cubic-bezier(.2, 0, 0, 1); --fast: 150ms; --base: 220ms; --slow: 400ms;
}
@media (max-width: 959px) { :root { --sec: 84px; --gutter: 16px; } }
@media (max-width: 759px) { :root { --sec: 64px; --margin: 20px; --fs-display: min(46px, 11.6vw); --fs-hold: min(52px, 13.3vw); --fs-lede: 17px; --fs-head: 22px; } }
@media (max-width: 359px) { :root { --margin: 16px; } }

/* Loading: the flag is up before the post is. Chrome and known words are real; a value not known yet is a flat, hard
   bar on the surface, on the type it stands for. Nothing shows for the first 150 ms, so a fast load never flashes. The
   bars hold still. One thing moves, the hollow pennant, filling hoist to fly. */
.skel-line { position: relative; display: block; width: var(--w, 100%); max-width: 100%; height: 1.35em; height: 1lh; animation: skel-arrive 180ms ease-out 150ms both; }
.skel-line::before { content: "\200b"; }
.skel-line::after { content: ""; position: absolute; inset: .2lh 0; border-radius: 3px; background: var(--skel, var(--well)); }
.skel-tile { display: block; background: var(--skel, var(--well)); animation: skel-arrive 180ms ease-out 150ms both; }
.skel-pen { position: relative; display: block; height: 52px; overflow: hidden; border-radius: 12px 0 0 12px; clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 50%, 100% 100%, 0 100%); background: var(--skel, var(--well)); animation: skel-arrive 180ms ease-out 150ms both; }
.skel-pen::before { content: ""; position: absolute; inset: 0; background: rgba(200, 50, 30, .16); transform: scaleX(0); transform-origin: 0 50%; animation: skel-hoist 1.6s cubic-bezier(.2, 0, 0, 1) 330ms infinite; }
@keyframes skel-arrive { from { opacity: 0; } }
@keyframes skel-hoist { 0% { transform: scaleX(0); opacity: 1; } 70% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .skel-line, .skel-tile, .skel-pen, .skel-pen::before { animation: none; } .skel-pen::before { transform: none; opacity: 0; } }

/* Surfaces. The field is the page; a .sheet is where work happens. A .paper band is the sheet's cream edge to edge, a
   .night band the posts' near-black; components on either read the same roles. */
:root {
  --fg: var(--on); --fg-2: var(--on-2); --line: var(--on-hair); --edge: var(--on-line);
  --btn-bg: var(--on); --btn-fg: var(--field);
}
.sheet, .paper {
  --fg: var(--ink); --fg-2: var(--muted); --line: var(--hair); --edge: color-mix(in srgb, var(--ink) 30%, transparent);
  --btn-bg: var(--ink); --btn-fg: var(--sheet);
  background: var(--sheet); color: var(--ink);
}
.sheet { border-radius: var(--r-sheet); box-shadow: var(--shadow); }
.night {
  --fg: var(--on-night); --fg-2: var(--on-night-2); --line: var(--night-hair); --edge: color-mix(in srgb, var(--on-night) 40%, transparent);
  --btn-bg: var(--on-night); --btn-fg: var(--night);
  --shadow: none; /* on the near-black a shadow only reads as a glow */
  background: var(--night); color: var(--on-night);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--field); }
body {
  margin: 0; background: var(--field); color: var(--on);
  font: 400 var(--fs-body)/1.5 var(--font); letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
a { color: inherit; text-decoration: none; }
img, svg, video { display: block; }
img { max-width: 100%; height: auto; }
:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }
::selection { background: var(--on); color: var(--field); }
.sheet ::selection { background: var(--act); color: var(--act-on); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* Type. A line set with .l holds; .stem and .round pull a line's first letter onto the edge its neighbours' stems keep.
   .hold is a step's one held line, the launch video's size on a page. .fills sets a line to fill its band's width: --em is
   the longest line's ink width in ems (measured in the display face at its tracking, after .stem or .round), so its ink
   runs from margin to margin. */
.display { font-weight: 700; font-size: var(--fs-display); line-height: .95; letter-spacing: -0.045em; }
.hold { font-weight: 700; font-size: var(--fs-hold); line-height: .92; letter-spacing: -0.045em; text-wrap: balance; }
.fills { font-size: calc(100cqw / var(--em)); }
.title { font-weight: 700; font-size: var(--fs-title); line-height: .98; letter-spacing: -0.04em; text-wrap: balance; }
.heading { font-weight: 700; font-size: var(--fs-heading); line-height: 1; letter-spacing: -0.035em; text-wrap: balance; }
.head { font-weight: 700; font-size: var(--fs-head); line-height: 1.15; letter-spacing: -0.025em; }
.lede { font-size: var(--fs-lede); line-height: 1.45; letter-spacing: -0.01em; color: var(--fg-2); text-wrap: pretty; }
.small { font-size: var(--fs-small); line-height: 1.45; }
.meta { font-size: var(--fs-meta); line-height: 1.35; color: var(--fg-2); font-variant-numeric: tabular-nums; }
.l { display: block; white-space: nowrap; }
.stem { margin-left: -0.058em; }
.round { margin-left: -0.03em; }

/* The grid. */
.wrap { width: 100%; max-width: var(--page); margin-inline: auto; padding-inline: var(--margin); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
.span-3 { grid-column: span 3; } .span-4 { grid-column: span 4; } .span-5 { grid-column: span 5; } .span-6 { grid-column: span 6; }
.span-7 { grid-column: span 7; } .span-8 { grid-column: span 8; } .span-9 { grid-column: span 9; } .span-12 { grid-column: 1 / -1; }
@media (max-width: 959px) {
  .span-3, .span-4 { grid-column: span 6; }
  .span-5, .span-6, .span-7, .span-8, .span-9 { grid-column: 1 / -1; }
}
@media (max-width: 759px) { .grid > * { grid-column: 1 / -1; } }

/* Bands: full-bleed surfaces with hard edges, cut one after another the way the launch video cuts (the field, .paper,
   .night). No hairline between them: the colour change is the edge. A band's .wrap is what its .fills lines fill. */
.band { overflow-x: clip; }
.band > .wrap { padding-block: var(--sec); container-type: inline-size; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* Header: the mark and the wordmark, then a few words. */
.nav { height: 80px; display: flex; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; min-height: 44px; gap: 10px; border-radius: var(--r-inline); }
.brand svg { width: 19px; height: 25px; fill: currentColor; }
.brand span { font-weight: 700; font-size: 21px; line-height: 1; letter-spacing: -0.02em; }
.nav nav { display: flex; gap: 8px; margin-right: -12px; font-size: 15px; }
.nav nav a { padding: 12px; border-radius: var(--r-control); }
.nav nav a:hover, .nav nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }

/* The small line over a headline. */
.eyebrow { margin-bottom: var(--s-5); color: var(--fg-2); }

/* Links in running text: underlined in the text's own colour. */
.link, .article a, .faq a { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.link:hover, .article a:hover, .faq a:hover { text-decoration-thickness: 2.5px; }

/* Buttons. The button is cream on the field and ink on a sheet; there is no outlined second button, a link does that job. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 52px; padding: 0 24px;
  border: 0; border-radius: var(--r-control); background: var(--btn-bg); color: var(--btn-fg); cursor: pointer;
  font: 600 16px/1 var(--font); letter-spacing: -0.005em; white-space: nowrap; transition: opacity var(--fast) var(--ease);
}
.btn:hover { opacity: .92; }
.btn:disabled { opacity: .7; cursor: default; }

/* Copy: a small button on a sheet's well, beside what it copies. copy.js shows it and says Copied. */
.copy { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 84px; height: 44px; padding: 0 var(--s-4); border: 0; border-radius: var(--r-control); background: var(--well); color: var(--ink); cursor: pointer; font: 600 var(--fs-small)/1 var(--font); letter-spacing: -0.005em; transition: background-color var(--fast) var(--ease); }
.copy:hover { background: color-mix(in srgb, var(--well) 88%, var(--ink)); }
.copy svg { display: none; width: 14px; height: 14px; color: var(--ok); }
.copy.done svg { display: block; }
.copy[hidden] { display: none; }

/* The pennant: the one button that sends something out, a swallowtail cut into its fly. It fills hoist to fly as the
   passkey completes (add .is-sent). */
.pen {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; height: 52px;
  padding: 0 40px 0 24px; border: 0; border-radius: var(--r-control) 0 0 var(--r-control);
  clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 50%, 100% 100%, 0 100%);
  background: var(--act); color: var(--act-on); font: 600 16px/1 var(--font); white-space: nowrap; cursor: pointer;
  transition: transform var(--base) var(--ease), opacity var(--base) var(--ease);
}
.pen::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: rgba(36, 17, 12, .22); transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--base) var(--ease); }
.pen.is-sent::before { transform: scaleX(1); }
.pen > * { position: relative; }
.pen svg { width: 20px; height: 20px; flex: none; }
a.pen:hover { opacity: .92; }
/* Its focus ring sits inside, since the clip would cut an outside ring away: a red gap, then a cream line. */
.pen:focus-visible { outline: none; box-shadow: inset 0 0 0 4px var(--act), inset 0 0 0 6px var(--act-on); }

/* Fields: 52 px, the edge in the surface's line colour, the type the page's. */
.field {
  height: 52px; min-width: 0; margin: 0; padding: 0 16px; border: 1.5px solid var(--edge); border-radius: var(--r-control);
  background: transparent; outline: none; color: var(--fg); font: 400 16px/1 var(--font); letter-spacing: -0.005em;
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.field::placeholder { color: var(--fg-2); opacity: 1; }
.field:focus { border-color: var(--fg); box-shadow: 0 0 0 1px var(--fg); }

/* Sections: a hairline across the grid, --sec of space at each end, the title on the left and a small label on the
   right that names what the frame below shows. Everything stays on the grid: no frame runs past the margins. */
.sec { position: relative; overflow-x: clip; }
.sec > .wrap { position: relative; padding-block: var(--sec); }
.sec > .wrap::before { content: ""; position: absolute; top: 0; left: var(--margin); right: var(--margin); border-top: 1px solid var(--line); }
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-6); margin-bottom: var(--s-9); }
.sec-head > :last-child:not(:first-child) { flex: none; }

/* Product frames: the real screens only, flat. A phone is its screen at the iPhone's own corner radius, no drawn bezel;
   a desk sheet is a desktop screen on cream. Both cast the one shadow. */
.phone {
  --w: 340px; position: relative; width: var(--w); aspect-ratio: 390 / 844; border-radius: calc(var(--w) * .121);
  overflow: hidden; background: var(--sheet); box-shadow: var(--shadow); isolation: isolate;
}
.phone img { position: absolute; inset: 0; width: 100%; height: 100%; }
.desk { overflow: hidden; border-radius: var(--r-sheet); background: var(--sheet); box-shadow: var(--shadow); }
.desk img { width: 100%; }
/* A sheet cut from the app at its own size and corners (the approval sheet: 702 × 700, 22 px). A loop, where one plays,
   lies over its poster and fades in once it runs. */
.shot { position: relative; aspect-ratio: 702 / 700; border-radius: 3.134% / 3.143%; overflow: hidden; background: var(--sheet); box-shadow: var(--shadow); isolation: isolate; }
.shot img, .shot video, .phone video { position: absolute; inset: 0; width: 100%; height: 100%; }
.shot video, .phone video { opacity: 0; transition: opacity var(--base) var(--ease); }
.is-on video { opacity: 1; }

/* Claude Code as itself, on a sheet, in its own colours: its mark and name, the person's prompt on its grey band after
   ❯, ● before each step (green when a tool worked), ⎿ before its result, ✻ and the time it took, then the empty prompt
   box between its rules. Only the session's own lines that tell the story, verbatim. */
.term {
  --cc-text: var(--ink); --cc-dim: #666; --cc-rule: #8a8a8a; --cc-band: #f0f0f0; --cc-ok: #2c7a39; --cc-mark: #d77757;
  padding: var(--s-8) var(--s-9) var(--s-8); color: var(--cc-text); font: 400 15px/1.6 var(--mono); letter-spacing: 0;
  font-variant-ligatures: none; overflow-wrap: anywhere;
}
.term p { display: grid; grid-template-columns: 2ch minmax(0, 1fr); white-space: pre-wrap; }
.term p + p { margin-top: var(--s-5); }
.term p + .re { margin-top: 0; padding-left: 2ch; }
.term i { font-style: normal; color: var(--cc-dim); }
.term b { font-weight: 700; }
.term .ok { color: var(--cc-ok); }
.term .cc { display: flex; align-items: center; gap: 2ch; margin-bottom: var(--s-7); }
.term .cc svg { width: 5.4ch; height: auto; fill: var(--cc-mark); flex: none; }
.term .you { margin-inline: calc(-1 * var(--s-9)); padding: var(--s-3) var(--s-9); background: var(--cc-band); }
.term .you > :first-child { color: var(--cc-dim); }
.term .box { display: block; margin-top: var(--s-6); padding-block: var(--s-2); border-block: 1px solid var(--cc-rule); }
.term .box::after { content: ""; display: inline-block; width: 1ch; height: 1.25em; margin-left: 1ch; vertical-align: -.25em; background: var(--cc-text); }
/* On a night band the band is the terminal: no box, Claude Code's dark colours, its prompt band across the column. */
.night .term { --cc-text: var(--on-night); --cc-dim: #999; --cc-rule: #888; --cc-band: #373737; --cc-ok: #4eba65; padding: 0; }
.night .term .you { margin-inline: 0; padding-inline: var(--s-4); }

/* A real post on its own network: the network's own mark and the account above it, the post as that network draws it
   (our renderers, public/x.js and li.js, at the network's own width). */
.post { display: grid; align-content: start; gap: var(--s-4); }
.post figcaption { display: flex; align-items: center; gap: var(--s-3); font-size: var(--fs-small); line-height: 1.2; color: var(--fg-2); }
.post figcaption svg { width: 24px; height: 24px; flex: none; }
.post figcaption b { font-weight: 600; color: var(--fg); }
.post img { width: 100%; border-radius: var(--r-card); box-shadow: var(--shadow); }

/* An index: big names on hairlines, one short line each, the whole row the link. */
.index { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.index a, .index .item { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: baseline; padding-block: var(--s-7) var(--s-8); border-bottom: 1px solid var(--line); }
.index b { grid-column: 1 / 7; font-weight: 700; font-size: var(--fs-title); line-height: .98; letter-spacing: -0.04em; }
.index span { grid-column: 7 / -1; font-size: var(--fs-lede); line-height: 1.45; color: var(--fg-2); }
.index a:hover b, .index a:focus-visible b { text-decoration: underline; text-decoration-thickness: .05em; text-underline-offset: .09em; }
/* The same index at reading size, for lists of many (the free tools, a tool's neighbours). */
.index.compact a { padding-block: var(--s-5); }
.index.compact b { font-size: var(--fs-head); line-height: 1.15; letter-spacing: -0.025em; }
.index.compact span { font-size: var(--fs-body); line-height: 1.5; letter-spacing: -0.005em; }
@media (max-width: 759px) {
  .index a, .index .item { display: block; padding-block: var(--s-6); }
  .index span { display: block; margin-top: var(--s-2); }
}

/* A list on hairlines: one short thing a row. */
.lines { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.lines > li { padding-block: var(--s-5); border-bottom: 1px solid var(--line); font-size: var(--fs-lede); line-height: 1.3; letter-spacing: -0.015em; text-wrap: pretty; }
.lines a { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }

/* A section's two sides: its title on the left, what it holds on the right (5 and 7 columns); stacked under 960. */
.split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--s-7); align-items: start; }
.split > :first-child { grid-column: 1 / 6; }
.split > :last-child { grid-column: 6 / -1; }
@media (max-width: 959px) { .split > :first-child, .split > :last-child { grid-column: 1 / -1; } }

/* Tables: hairlines only, a firmer rule under the head, figures tabular. Wide ones scroll inside .table-wrap. */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); line-height: 1.45; font-variant-numeric: tabular-nums; }
.table th, .table td { padding: var(--s-3) var(--s-6) var(--s-3) 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.table th:last-child, .table td:last-child { padding-right: 0; }
.table thead th { font-weight: 600; }
.table thead > tr > * { border-bottom-color: var(--fg); }

/* Code: the system mono. A block sits on the sheet's well; inline code gets a faint tint of its own text colour. */
code, kbd, pre { font-family: var(--mono); font-size: .9em; letter-spacing: 0; }
:not(pre) > code { padding: .12em .32em; border-radius: var(--r-inline); background: color-mix(in srgb, currentColor 9%, transparent); }
pre { margin: 0; padding: var(--s-5) var(--s-6); border-radius: var(--r-card); background: var(--well); color: var(--ink); font-size: 14px; line-height: 1.6; overflow-x: auto; tab-size: 2; }
pre code { font-size: inherit; }

/* Questions: each a details element on a hairline, closed until asked, a plus that turns into a cross. */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-6); padding-block: var(--s-5);
  list-style: none; cursor: pointer; font-weight: 600; font-size: var(--fs-lede); line-height: 1.3; letter-spacing: -0.015em; text-wrap: pretty;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font-weight: 400; font-size: 26px; line-height: .7; transition: transform var(--fast) var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > :not(summary) { max-width: var(--measure); padding-bottom: var(--s-5); color: var(--fg-2); }
.faq details > :not(summary) + :not(summary) { margin-top: calc(-1 * var(--s-2)); }

/* A tool: one sheet, its controls along the top, the result on the well at its true size. */
.tool { display: grid; gap: var(--s-6); padding: var(--s-7); }
.tool .well { padding: var(--s-7); border-radius: var(--r-card); background: var(--well); }

/* A free tool's page (shell.js frames it): its name, a headline and one line on the field, the .tool sheet, then each
   section below on the grid, the title left and its rows right. On a phone the sheet is the screen's width. */
.tool-head { padding-block: var(--s-8); }
.tool-head .eyebrow { display: block; margin-bottom: var(--s-4); color: var(--fg-2); }
.tool-head h1 { font-weight: 700; font-size: var(--fs-title); line-height: .98; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; text-wrap: balance; }
.tool-head h1 .eyebrow { font-weight: 400; font-size: var(--fs-body); line-height: 1.5; letter-spacing: -0.005em; }
.tool-head .l { white-space: normal; }
.tool-head .lede { margin-top: var(--s-4); }
.tool-sec { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--s-6); align-items: start; padding-top: var(--sec); }
.tool-sec > * { grid-column: 6 / -1; }
.tool-sec > h2 { grid-column: 1 / 6; grid-row: 1 / span 3; font-weight: 700; font-size: var(--fs-title); line-height: .98; letter-spacing: -0.04em; text-wrap: balance; }
.tool-sec p a { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.tool-sec .faq { border-top: 1px solid var(--line); }
.tool-sec > .btn { justify-self: start; }

/* A guide: one sheet, text on a 680 px measure, headings on the scale, links underlined. A .lede opens it, a .checked line
   dates its sources over a hairline, .sources closes it small. On a phone the sheet is the screen's width. Under 600 px of
   sheet a .stack table becomes a block per row, each value beside its column's name (.long: under it). */
.article { max-width: var(--sheet-w); margin-inline: auto; padding: var(--s-9); color: var(--ink-2); container-type: inline-size; }
.article > * { max-width: var(--measure); }
.article > * + *, .sources > * + * { margin-top: var(--s-4); }
.article h1 { color: var(--ink); font-weight: 700; font-size: var(--fs-heading); line-height: 1; letter-spacing: -0.035em; text-wrap: balance; }
.article h2 { margin-top: var(--s-9); color: var(--ink); font-weight: 700; font-size: var(--fs-head); line-height: 1.15; letter-spacing: -0.025em; text-wrap: balance; scroll-margin-top: var(--s-6); }
.article h3 { margin-top: var(--s-7); color: var(--ink); font-weight: 600; font-size: var(--fs-lede); line-height: 1.3; letter-spacing: -0.015em; scroll-margin-top: var(--s-6); }
.article h2 + *, .article h3 + * { margin-top: var(--s-3); }
.article p, .article li { font-size: var(--fs-read); line-height: 1.6; text-wrap: pretty; }
.article a, .article strong { color: var(--ink); }
.article strong { font-weight: 600; }
.article ul, .article ol { padding-left: 1.2em; }
.article li + li { margin-top: var(--s-2); }
.article hr { margin-block: var(--s-8); border: 0; border-top: 1px solid var(--line); }
.article > :is(pre, .table-wrap, figure, .faq) { max-width: none; margin-block: var(--s-6); }
.article p.lede { color: var(--ink); font-size: var(--fs-lede); line-height: 1.45; }
.article p.checked { margin-block: var(--s-6) var(--s-7); padding-bottom: var(--s-6); border-bottom: 1px solid var(--line); color: var(--muted); font-size: var(--fs-small); line-height: 1.45; }
.article .checked + h2 { margin-top: var(--s-7); }
.article .sources { margin-top: var(--s-9); padding-top: var(--s-7); border-top: 1px solid var(--line); }
.article .sources h2 { margin-top: 0; font-size: var(--fs-lede); line-height: 1.3; letter-spacing: -0.015em; }
.article .sources p, .article .sources li { font-size: var(--fs-small); line-height: 1.45; }
.checked a, .sources a { text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); }
.checked a:hover, .sources a:hover { text-decoration-color: currentColor; }
.article code { overflow-wrap: anywhere; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.article pre code { overflow-wrap: normal; }
.article .table code { overflow-wrap: normal; }
.article .table th { color: var(--ink); }
.article .table th[scope="col"] { vertical-align: bottom; font-size: var(--fs-meta); font-weight: 400; color: var(--muted); }
.article .table th[scope="row"] { min-width: 7em; }
@container (max-width: 599px) {
  .stack.table-wrap { overflow: visible; }
  .stack table, .stack tbody, .stack tr, .stack th, .stack td { display: block; }
  .stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .stack tr { padding-block: var(--s-4); border-bottom: 1px solid var(--line); }
  .stack tbody tr:first-child { border-top: 1px solid var(--line); }
  .stack .table th, .stack .table td, .stack th, .stack td { padding: 0; border: 0; }
  .article .stack th[scope="row"] { min-width: 0; margin-bottom: var(--s-2); font-size: var(--fs-read); line-height: 1.35; }
  .stack td + td { margin-top: var(--s-1); }
  .stack td[data-label] { display: grid; grid-template-columns: clamp(7.5em, 32%, 13em) minmax(0, 1fr); gap: var(--s-4); }
  .stack td[data-label]::before { content: attr(data-label); content: attr(data-label) / ""; font-size: var(--fs-meta); line-height: 1.6; color: var(--muted); }
  .stack.long td[data-label] { display: block; }
  .stack.long td + td { margin-top: var(--s-3); }
  .stack.long td[data-label]::before { display: block; margin-bottom: 2px; line-height: 1.35; }
  .article .stack code { overflow-wrap: anywhere; }
}

/* A long list: a name per row on hairlines, the whole row the link. .index is for a few big names; this is for dozens. */
.rows { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.rows li { border-bottom: 1px solid var(--line); }
.rows h3 { font: inherit; letter-spacing: inherit; }
.rows a { display: block; padding-block: var(--s-4); font-weight: 600; font-size: var(--fs-lede); line-height: 1.3; letter-spacing: -0.015em; text-wrap: pretty; }
.rows a:hover, .rows a:focus-visible { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }

/* Footer: the company on the left, the site's pages on the right, on a hairline. */
main + .foot { margin-top: var(--sec); }
.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-top: 28px; padding-bottom: 34px; border-top: 1px solid var(--line); font-size: 14px; color: var(--fg-2); }
.foot nav, .foot nav span { display: flex; flex-wrap: wrap; gap: 8px 26px; }
.foot .tm { flex-basis: 100%; margin: 0; }
.foot a:hover, .foot a:focus-visible { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }

@media (max-width: 959px) {
  .tool-sec > *, .tool-sec > h2 { grid-column: 1 / -1; grid-row: auto; }
}
@media (max-width: 759px) {
  .nav { height: 64px; }
  .nav nav { gap: 0; font-size: 14.5px; }
  .tool-head { padding-block: var(--s-6) var(--s-7); }
  main > .tool { margin-inline: calc(-1 * var(--margin)); padding: var(--s-6) var(--margin) var(--s-7); border-radius: 0; box-shadow: none; }
  .sec-head { flex-wrap: wrap; margin-bottom: var(--s-7); }
  .term { padding: var(--s-6) var(--s-5) var(--s-7); font-size: 13px; }
  .term .you { margin-inline: calc(-1 * var(--s-5)); padding-inline: var(--s-5); }
  .night .term { padding: 0; }
  .night .term .you { margin-inline: 0; padding-inline: var(--s-3); }
  .article { margin-inline: calc(-1 * var(--margin)); padding: var(--s-7) var(--margin) var(--s-8); border-radius: 0; box-shadow: none; }
  .foot { flex-direction: column; gap: 14px; padding-top: 28px; padding-bottom: 40px; }
}

/* The answer stands on the field as a tool's head; a network's week is on its sheet: what it says in words, the heatmap,
   and its sources. */
main > .sheet { padding: var(--s-8) var(--s-9) var(--s-7); }
main > .sheet + .sheet { margin-top: var(--s-7); }
.top { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 44px; flex-wrap: wrap; margin-bottom: 32px; }
.sheet h2 { margin: 0 0 12px; font-size: 16px; line-height: 1.5; letter-spacing: -0.005em; color: var(--ink-2); }
.answer { margin: 0 0 0 -0.03em; font-weight: 700; font-size: 40px; line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; text-wrap: balance; }
.days { margin: 12px 0 0; font-size: 18px; line-height: 1.45; letter-spacing: -0.01em; color: var(--ink-2); }
/* A line of sentences breaks only between them. */
.days span { display: inline-block; }
.key { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; }
.key i { display: flex; gap: 3px; }
.key i b { width: 18px; height: 12px; border-radius: 3px; background: color-mix(in oklab, var(--act) calc(var(--v) * 1%), var(--well)); }
.key i b.no { margin-left: 12px; background: none; box-shadow: inset 0 0 0 1px var(--hair); }


/* The week: hours across and days down, each hour a tile from the well (quiet) to the red (the busiest hour). The
   numbers on the axis are the hours' starts; the three best hours of the day are named in ink. */
.week { display: grid; grid-template-columns: 44px repeat(24, minmax(0, 1fr)); grid-auto-rows: 30px; gap: 3px; font-size: 12.5px; line-height: 1; color: var(--muted); font-variant-numeric: tabular-nums; }
.week .h { display: flex; align-items: flex-end; justify-content: center; height: 20px; padding-bottom: 6px; white-space: nowrap; }
.week .h.top { color: var(--ink); font-weight: 600; }
.week .d { display: flex; align-items: center; }
.week .c { position: relative; border-radius: 4px; background: var(--well); background: color-mix(in oklab, var(--act) calc(var(--v) * 1%), var(--well)); }
/* An hour the source has no number for: an empty tile, its outline only. */
.week .c.no { background: none; box-shadow: inset 0 0 0 1px var(--hair); }
.week > :first-child { height: 20px; }
@media (hover: hover) {
  .week .c:hover { z-index: 1; box-shadow: 0 0 0 2px var(--sheet), 0 0 0 4px var(--ink); }
  .week .c:hover::after {
    content: attr(data-t); position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%); padding: 7px 10px; border-radius: 8px;
    background: var(--ink); color: var(--sheet); font-size: 13px; font-weight: 500; line-height: 1.2; white-space: nowrap; pointer-events: none;
  }
}

.src { margin: 28px 0 0; padding-top: 20px; border-top: 1px solid var(--hair); font-size: 14px; line-height: 1.5; color: var(--muted); text-wrap: pretty; }
.src a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; text-decoration-color: var(--hair); }
.src a:hover { text-decoration-color: currentColor; }
/* On the field the pennant is cream, as a button is there. */
.own .pen { --act: var(--on); --act-on: var(--field); justify-self: start; }
@media (max-width: 959px) {
  .week { grid-template-columns: 36px repeat(24, minmax(0, 1fr)); grid-auto-rows: 26px; gap: 2px; font-size: 12px; }
  .week .h.near { visibility: hidden; }
}
@media (max-width: 759px) {
  /* The sheet is the screen's width, and the week stands up: days across, hours down, from the same markup. */
  main > .sheet { margin-inline: calc(-1 * var(--margin)); padding: var(--s-7) var(--margin); border-radius: 0; box-shadow: none; }
  .top { margin-bottom: 24px; }
  .answer { font-size: 32px; }
  .days { font-size: 16.5px; margin-top: 10px; }
  .week { grid-auto-flow: column; grid-template-columns: 44px; grid-auto-columns: minmax(0, 1fr); grid-template-rows: 24px repeat(24, 17px); gap: 3px 4px; font-size: 12.5px; }
  .week .h { justify-content: flex-start; align-items: center; height: auto; padding: 0; }
  .week .h.near { visibility: visible; }
  .week .d { justify-content: center; align-items: flex-start; }
  .week > :first-child { height: auto; }
  .src { margin-top: 24px; }
  .own .pen { width: 100%; }
}
@media (max-width: 359px) {
  .week { grid-template-columns: 40px; gap: 3px; }
}