@layer reset, trellisbyte;
@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; }
/* Flaghand's brand, B · Pennant, on the token contract (trellisbyte/next docs/design-foundation.md, 37fa768).
   Covers flaghand.com and app.flaghand.com. Every value comes from site/src/foundation.js; MAP.md lists each one. */

/* 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. brand.ts loads the face itself through next/font/local. */
@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; }

/* The field: the red page, one text colour. One scheme, light, with no dark variant (Michael, Oct 28). */
:root {
  --scheme: only light;
  color-scheme: only light;

  --background: #c8321e;
  --foreground: #fff5e9;
  --muted-foreground: #fff5e9;
  --muted: #c8321e;
  --border: rgba(255, 245, 233, .28);
  --border-strong: #fff5e9;
  --input: rgba(255, 245, 233, .5);
  --ring: #fff5e9;
  --primary: #fff5e9;
  --primary-foreground: #c8321e;
  --secondary: #fff5e9;
  --secondary-foreground: #c8321e;
  --accent: #f6ebdf;
  --accent-foreground: #24110c;
  --link: #fff5e9;
  --card: #fffaf3;
  --card-foreground: #24110c;
  --popover: #fffaf3;
  --popover-foreground: #24110c;
  --overlay: rgba(60, 10, 4, .42);
  --success: #fff5e9;
  --success-foreground: #c8321e;
  --warning: #fff5e9;
  --warning-foreground: #c8321e;
  --destructive: #fff5e9;
  --destructive-foreground: #c8321e;
  --selection: #fff5e9;
  --selection-foreground: #c8321e;
  --foreground-soft: #fff5e9;
}

/* The scale, the same on every surface. */
:root {
  /* Familjen Grotesk only. --font-familjen is next/font/local's family (brand.ts); the name stands until a page sets it. */
  --font-sans: var(--font-familjen, "Familjen Grotesk"), "Familjen Grotesk Arial", "Familjen Grotesk Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-display: var(--font-sans);
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Roboto Mono", monospace;

  --text-display: clamp(46px, 6.6vw, 96px);
  --text-display--line-height: .95;
  --text-display--letter-spacing: -0.045em;
  --text-display--font-weight: 700;
  --text-title: clamp(38px, 4.8vw, 72px);
  --text-title--line-height: .98;
  --text-title--letter-spacing: -0.04em;
  --text-title--font-weight: 700;
  --text-heading: clamp(34px, 3.4vw, 48px);
  --text-heading--line-height: 1;
  --text-heading--letter-spacing: -0.035em;
  --text-heading--font-weight: 700;
  --text-head: 24px;
  --text-head--line-height: 1.15;
  --text-head--letter-spacing: -0.025em;
  --text-head--font-weight: 700;
  --text-lede: 19px;
  --text-lede--line-height: 1.45;
  --text-lede--letter-spacing: -0.01em;
  --text-lede--font-weight: 400;
  /* read, small and meta set no tracking of their own: they inherit body's -0.005em as the 16 px it computes on. */
  --text-read: 17px;
  --text-read--line-height: 1.6;
  --text-read--letter-spacing: -0.08px;
  --text-read--font-weight: 400;
  --text-body: 16px;
  --text-body--line-height: 1.5;
  --text-body--letter-spacing: -0.005em;
  --text-body--font-weight: 400;
  --text-small: 14.5px;
  --text-small--line-height: 1.45;
  --text-small--letter-spacing: -0.08px;
  --text-small--font-weight: 400;
  --text-meta: 13px;
  --text-meta--line-height: 1.35;
  --text-meta--letter-spacing: -0.08px;
  --text-meta--font-weight: 400;
  --measure: 680px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 44px;
  --space-9: 56px;
  --space-10: 84px;
  --space-11: 120px;
  --section: 120px;
  --page-max: 1440px;
  --page-margin: 56px;
  --gutter: 24px;

  --radius-inline: 4px;
  --radius-control: 12px;
  --radius-card: 14px;
  --radius-sheet: 22px;
  --radius: var(--radius-control);
  --control-height: 52px;
  --hairline: 1px;
  --focus-width: 2px;
  --focus-offset: 3px;
  --shadow-1: 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);

  --ease: cubic-bezier(.2, 0, 0, 1);
  --duration-fast: 150ms;
  --duration-base: 220ms;
  --duration-slow: 400ms;
}
@media (max-width: 959px) { :root { --section: 84px; --gutter: 16px; } }
@media (max-width: 759px) { :root { --section: 64px; --page-margin: 20px; --text-display: min(46px, 11.6vw); --text-lede: 17px; --text-head: 22px; } }
@media (max-width: 359px) { :root { --page-margin: 16px; } }

/* The sheet: the cream working ground of the app, and every .sheet or .paper on the site. Floating parts are sheets too:
   they portal to the body, onto the field, and would otherwise draw the field's cream text on their cream ground. */
[data-surface="alt"],
[data-slot="dialog-popup"],
[data-slot="sheet-popup"],
[data-slot="menu-content"],
[data-slot="popover-content"],
[data-slot="select-content"],
[data-slot="combobox-content"],
[data-slot="tooltip-content"],
[data-slot="toast"] {
  --background: #fffaf3;
  --foreground: #24110c;
  --muted-foreground: #7a6159;
  --muted: #f6ebdf;
  --border: rgba(36, 17, 12, .11);
  --border-strong: #24110c;
  --input: rgba(36, 17, 12, .3);
  --ring: #24110c;
  --primary: #c8321e;
  --primary-foreground: #fff5e9;
  --secondary: #24110c;
  --secondary-foreground: #fffaf3;
  --accent: #ddd1c6;
  --accent-foreground: #24110c;
  --link: #24110c;
  --card: #fffaf3;
  --card-foreground: #24110c;
  --popover: #fffaf3;
  --popover-foreground: #24110c;
  --overlay: rgba(60, 10, 4, .42);
  --success: #2f6b45;
  --success-foreground: #fff5e9;
  --warning: #c8321e;
  --warning-foreground: #fff5e9;
  --destructive: #a12a16;
  --destructive-foreground: #fff5e9;
  --selection: #c8321e;
  --selection-foreground: #fff5e9;
  --foreground-soft: #5a3f37;
}

/* The night band: the near-black the posts sit on in the launch video. A band, not a dark scheme. */
[data-surface="night"] {
  --background: #0d0807;
  --foreground: #f6ece4;
  --muted-foreground: rgba(246, 236, 228, .62);
  --muted: #0d0807;
  --border: rgba(246, 236, 228, .14);
  --border-strong: #f6ece4;
  --input: rgba(246, 236, 228, .4);
  --ring: #f6ece4;
  --primary: #c8321e;
  --primary-foreground: #fff5e9;
  --secondary: #f6ece4;
  --secondary-foreground: #0d0807;
  --accent: #2e2826;
  --accent-foreground: #f6ece4;
  --link: #f6ece4;
  --card: #fffaf3;
  --card-foreground: #24110c;
  --popover: #fffaf3;
  --popover-foreground: #24110c;
  --overlay: rgba(60, 10, 4, .42);
  --success: #f6ece4;
  --success-foreground: #0d0807;
  --warning: #f6ece4;
  --warning-foreground: #0d0807;
  --destructive: #f6ece4;
  --destructive-foreground: #0d0807;
  --selection: #fff5e9;
  --selection-foreground: #0d0807;
  --foreground-soft: rgba(246, 236, 228, .62);
  --shadow-1: none; /* on the near-black a shadow only reads as a glow */
}

/* Loading: a bar inset in its line. On the field and the night band it is a quiet tint of that ground's own text, so a
   loading state never outshouts the page; the sheet keeps its well. --muted stays as it is for inputs and tiles. */
[data-slot="skeleton"] { --skeleton-fill: color-mix(in srgb, var(--foreground) 14%, transparent); background: var(--skeleton-fill); }
:is([data-surface="alt"], [data-slot="dialog-popup"], [data-slot="sheet-popup"], [data-slot="menu-content"], [data-slot="popover-content"], [data-slot="select-content"], [data-slot="combobox-content"], [data-slot="tooltip-content"], [data-slot="toast"]) [data-slot="skeleton"] { --skeleton-fill: #f6ebdf; }
[data-slot="skeleton"][data-shape="block"] { border-radius: 0; }
[data-slot="skeleton"][data-shape="line"] { position: relative; background: none; }
[data-slot="skeleton"][data-shape="line"]::after { content: ""; position: absolute; inset: .2lh 0; border-radius: 3px; background: var(--skeleton-fill); }

/* Menu rows sit at 44 px: the 52 px control height reads loose in a list. */
[data-slot="menu-item"] { min-height: 44px; }

/* Parts the contract has no token for (MAP.md, "No token"). Buttons: primary is the one button of a screen, link a text
   link. A screen's own class still sets its colour, size and place. */
[data-slot="button"] {
  gap: 10px; height: var(--control-height); min-height: 0; padding: 0 var(--space-6); border: 0;
  font: 600 16px/1 var(--font-sans); letter-spacing: -0.005em; white-space: nowrap; transition: opacity var(--duration-fast) var(--ease);
}
[data-slot="button"]:hover { opacity: .92; }
[data-slot="button"][data-variant="quiet"]:hover { background: var(--secondary); color: var(--secondary-foreground); }
[data-slot="button"][data-variant="link"] { display: inline-block; height: auto; padding: 0; border-radius: 0; font: inherit; font-size: 15.5px; font-weight: 500; letter-spacing: inherit; white-space: normal; text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
[data-slot="button"][data-variant="link"]:hover { opacity: 1; }
[data-slot="button"]:is(:disabled, [data-disabled], [data-pending]) { cursor: default; opacity: .7; }

/* Switch and checkbox: ink when on, drawn with an inset edge when off. */
[data-slot="switch"], [data-slot="checkbox"] { border: 0; box-shadow: inset 0 0 0 1.5px var(--muted-foreground); transition: background var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease); }
[data-slot="switch"][data-checked], [data-slot="checkbox"][data-checked] { background: var(--foreground); box-shadow: none; }
[data-slot="switch"]:focus-visible, [data-slot="checkbox"]:focus-visible { outline: 2px solid var(--foreground); outline-offset: 2px; }
[data-slot="switch"] { width: 40px; height: 24px; background: var(--muted); }
[data-slot="switch-thumb"] { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; margin: 0; background: var(--muted-foreground); }
[data-slot="switch-thumb"][data-checked] { background: var(--background); transform: translateX(16px); }
[data-slot="checkbox"] { width: 22px; height: 22px; margin-top: 1px; border-radius: 6px; color: var(--background); background: transparent; }
/* Flaghand's own check, the one the doors draw, in place of the package's icon. */
[data-slot="checkbox-mark"] { width: 14px; height: 14px; background: currentColor; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.8 7.4l2.6 2.6 5.8-6'/%3E%3C/svg%3E") center / contain no-repeat; }
[data-slot="checkbox-mark"] svg { display: none; }

[data-slot="link"] { color: inherit; text-decoration-thickness: 1.5px; text-underline-offset: 3px; transition: none; }
[data-slot="link"]:hover { color: inherit; text-decoration-thickness: 2.5px; }

[data-slot="input"] {
  height: var(--control-height); min-width: 0; margin: 0; padding: 0 var(--space-4); border: 1.5px solid var(--input); background: transparent; outline: none;
  font: 400 16px/1 var(--font-sans); letter-spacing: -0.005em; transition: border-color var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease);
}
[data-slot="input"]::placeholder { color: var(--muted-foreground); opacity: 1; }
[data-slot="input"]:focus { border-color: var(--foreground); box-shadow: 0 0 0 1px var(--foreground); }

/* Copy: a small button on a sheet's well, beside what it copies. */
[data-slot="copy-button"] {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 84px; min-height: 0; height: 44px; padding: 0 var(--space-4);
  border: 0; background: var(--muted); color: var(--foreground); font: 600 var(--text-small)/1 var(--font-sans); letter-spacing: -0.005em;
}
[data-slot="copy-button"]:hover { background: color-mix(in srgb, var(--muted) 88%, var(--foreground)); color: var(--foreground); }
[data-slot="copy-button"] svg { display: none; width: 14px; height: 14px; color: var(--success); }
[data-slot="copy-button"][data-copied] svg { display: block; }
[data-slot="copy-button"][hidden] { display: none; }

/* The header: the mark and the wordmark, then a few words, on the ground with no rule. Its links stay on the bar on a phone. */
[data-slot="site-header"] { border-block-end: 0; font-size: 15px; line-height: 1.5; letter-spacing: inherit; }
[data-slot="site-header"] > [data-slot="container"] { justify-content: space-between; gap: 0; height: 80px; min-height: 0; padding-block: 0; }
[data-slot="site-header-mark"] { min-height: 44px; gap: 10px; border-radius: var(--radius-inline); font-size: 16px; }
[data-slot="site-header-mark"] svg { width: 19px; height: 25px; fill: currentColor; }
[data-slot="site-header-mark"] span { font-weight: 700; font-size: 21px; line-height: 1; letter-spacing: -0.02em; }
[data-slot="site-header-nav"] { display: flex; gap: var(--space-2); margin-inline-start: 0; margin-right: -12px; }
[data-slot="site-header-link"] { display: block; min-height: 0; padding: var(--space-3); border-radius: var(--radius-control); }
[data-slot="site-header-link"]:hover, [data-slot="site-header-link"][aria-current="page"] { color: inherit; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
[data-slot="site-header-menu-button"] { display: none; }
@media (max-width: 759px) {
  [data-slot="site-header"] { font-size: 14.5px; }
  [data-slot="site-header"] > [data-slot="container"] { height: 64px; }
  [data-slot="site-header-nav"] { gap: 0; }
}

/* The footer: the company on the left, the site's pages on the right, on a hairline as wide as the page. */
[data-slot="site-footer"] { padding-block: 0; border-block-start: 0; font-size: 14px; line-height: 1.5; letter-spacing: inherit; }
[data-slot="site-footer"] > [data-slot="container"] { gap: var(--space-2) var(--space-6); padding-block: 28px 34px; border-top: var(--hairline) solid var(--border); }
[data-slot="site-footer-links"], [data-slot="site-footer-links"] span { display: flex; flex-wrap: wrap; gap: var(--space-2) 26px; }
[data-slot="site-footer"] a:hover, [data-slot="site-footer"] a:focus-visible { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
@media (max-width: 759px) {
  [data-slot="site-footer"] > [data-slot="container"] { flex-direction: column; gap: 14px; padding-block: 28px 40px; }
}

/* Tables: hairlines only, a firmer rule under the head. */
[data-slot="table"] { color: inherit; letter-spacing: inherit; }
[data-slot="table"] th, [data-slot="table"] td { padding: var(--space-3) var(--space-6) var(--space-3) 0; border-bottom: var(--hairline) solid var(--border); text-align: left; vertical-align: top; }
[data-slot="table"] th { font-weight: 700; }
[data-slot="table"] th:last-child, [data-slot="table"] td:last-child { padding-right: 0; }
[data-slot="table"] thead th { font-weight: 600; }
[data-slot="table"] thead > tr > * { border-bottom-color: var(--foreground); }

/* Shared by every component. Values come only from a site's theme.css (docs/design-foundation.md);
   unlayered site CSS always beats this layer. */
@layer trellisbyte {
  :root {
    color-scheme: var(--scheme);
  }

  ::selection {
    background: var(--selection);
    color: var(--selection-foreground, var(--foreground));
  }

  :where([data-slot]):focus-visible {
    outline: var(--focus-width) solid var(--ring);
    outline-offset: var(--focus-offset);
  }

  [data-slot='icon'] {
    width: 1em;
    height: 1em;
    flex: none;
  }

  /* Type steps */
  [data-slot$='-label'],
  [data-slot$='-group-label'],
  [data-slot$='-item'],
  [data-slot='tooltip-content'],
  [data-slot='popover-description'],
  [data-slot='dialog-description'],
  [data-slot='field-label'],
  [data-slot='field-description'],
  [data-slot='field-error'],
  [data-slot='fieldset-legend'],
  [data-slot='toast'],
  [data-slot='tabs-trigger'],
  [data-slot='button'],
  [data-slot='copy-button'],
  [data-slot='combobox-chip'] {
    font-family: var(--font-sans);
    font-size: var(--text-small);
    line-height: var(--text-small--line-height);
    letter-spacing: var(--text-small--letter-spacing);
    font-weight: var(--text-small--font-weight);
  }

  [data-slot='input'],
  [data-slot='textarea'],
  [data-slot='select-trigger'],
  [data-slot='combobox-input'],
  [data-slot='tabs-content'],
  [data-slot='accordion-content'],
  [data-slot='popover-content'][data-side] {
    font-family: var(--font-sans);
    font-size: var(--text-body);
    line-height: var(--text-body--line-height);
    letter-spacing: var(--text-body--letter-spacing);
    font-weight: var(--text-body--font-weight);
  }

  [data-slot='dialog-title'],
  [data-slot='popover-title'],
  [data-slot='accordion-trigger'] {
    font-family: var(--font-sans);
    font-size: var(--text-head);
    line-height: var(--text-head--line-height);
    letter-spacing: var(--text-head--letter-spacing);
    font-weight: var(--text-head--font-weight);
  }

  /* Every floating surface */
  [data-slot$='-content'][data-side],
  [data-slot='dialog-popup'],
  [data-slot='toast'] {
    box-sizing: border-box;
    border: var(--hairline) solid var(--border);
    border-radius: var(--radius-card);
    background: var(--popover);
    box-shadow: var(--shadow-1);
    color: var(--popover-foreground);
  }

  [data-slot$='-content'][data-side] {
    max-height: var(--available-height);
    overflow-y: auto;
    outline: none;
    transform-origin: var(--transform-origin);
    transition: opacity var(--duration-fast) var(--ease), transform var(--duration-fast) var(--ease);

    &[data-starting-style],
    &[data-ending-style] {
      opacity: 0;
      transform: scale(0.97);
    }
  }

  /* Menu, select and combobox rows */
  [data-slot$='-item'] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--control-height);
    padding-inline: var(--space-4);
    border-radius: var(--radius-control);
    cursor: default;
    outline: none;
    user-select: none;

    &[data-highlighted] {
      background: var(--accent);
      color: var(--accent-foreground);
    }

    &[data-disabled] {
      color: var(--muted-foreground);
    }
  }

  [data-slot$='-item-mark'] {
    display: inline-flex;
    margin-inline-start: auto;
  }

  [data-slot$='-group-label'] {
    padding: var(--space-1) var(--space-4);
    color: var(--muted-foreground);
  }

  [data-slot$='-separator'] {
    margin: var(--space-1) 0;
    border-block-start: var(--hairline) solid var(--border);
  }

  /* Text-like controls */
  [data-slot='input'],
  [data-slot='textarea'],
  [data-slot='select-trigger'],
  [data-slot='combobox-group'] {
    box-sizing: border-box;
    width: 100%;
    min-height: var(--control-height);
    border: var(--hairline) solid var(--input);
    border-radius: var(--radius-control);
    background: var(--background);
    color: var(--foreground);

    &[data-invalid] {
      border-color: var(--destructive);
    }

    &[data-disabled] {
      background: var(--muted);
      color: var(--muted-foreground);
    }
  }

  /* An icon-only button still has a full tap target */
  [data-slot='dialog-x'],
  [data-slot='toast-close'],
  [data-slot='combobox-button'] {
    display: grid;
    place-items: center;
    min-width: var(--control-height);
    min-height: var(--control-height);
    padding: 0;
    border: 0;
    border-radius: var(--radius-control);
    background: none;
    color: var(--muted-foreground);
    cursor: pointer;

    &:hover {
      color: var(--foreground);
    }
  }

  /* !important beats a theme's unlayered tokens, so signature pieces reading them stop too */
  @media (prefers-reduced-motion: reduce) {
    :root {
      --duration-fast: 0s !important;
      --duration-base: 0s !important;
      --duration-slow: 0s !important;
    }
  }
}

@layer trellisbyte {
  [data-slot='container'] {
    box-sizing: border-box;
    width: 100%;
    max-width: var(--page-max);
    margin-inline: auto;
    padding-inline: var(--page-margin);
  }

  [data-slot='section'] {
    padding-block: var(--section);
  }

  [data-slot='site-footer'] {
    padding-block: var(--space-6);
    border-block-start: var(--hairline) solid var(--border);
    color: var(--muted-foreground);
    font-family: var(--font-sans);
    font-size: var(--text-small);
    line-height: var(--text-small--line-height);
    letter-spacing: var(--text-small--letter-spacing);

    & > [data-slot='container'] {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: var(--space-4);
    }
  }

  [data-slot='site-footer-links'] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
  }
}

@layer trellisbyte {
  [data-slot='site-header'] {
    border-block-end: var(--hairline) solid var(--border);
    color: var(--foreground);
    font-family: var(--font-sans);
    font-size: var(--text-small);
    line-height: var(--text-small--line-height);
    letter-spacing: var(--text-small--letter-spacing);

    & > [data-slot='container'] {
      display: flex;
      align-items: center;
      gap: var(--space-4);
      min-height: var(--control-height);
      padding-block: var(--space-2);
    }
  }

  [data-slot='site-header-mark'] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--control-height);
    color: inherit;
    text-decoration: none;
  }

  [data-slot='site-header-nav'] {
    display: flex;
    gap: var(--space-4);
    margin-inline-start: auto;
  }

  [data-slot='site-header-end'] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }

  [data-slot='site-header-link'] {
    display: inline-flex;
    align-items: center;
    min-height: var(--control-height);
    color: inherit;
    text-decoration: none;

    &:hover {
      color: var(--link);
    }
  }

  [data-slot='site-header-menu-button'] {
    display: none;
    place-items: center;
    min-width: var(--control-height);
    min-height: var(--control-height);
    padding: 0;
    border: 0;
    border-radius: var(--radius-control);
    background: none;
    color: inherit;
    font-size: var(--text-head);
    cursor: pointer;
  }

  [data-slot='site-header-menu'] {
    box-sizing: border-box;
    position: fixed;
    inset: 0 0 auto;
    width: 100%;
    margin: 0;
    padding: var(--space-4) var(--page-margin);
    border: 0;
    border-block-end: var(--hairline) solid var(--border);
    background: var(--popover);
    box-shadow: var(--shadow-1);
    color: var(--popover-foreground);
    font-family: var(--font-sans);
    font-size: var(--text-body);
    line-height: var(--text-body--line-height);

    &:popover-open {
      display: flex;
      flex-direction: column;
    }

    &::backdrop {
      background: var(--overlay);
    }
  }

  @media (max-width: 759.98px) {
    [data-slot='site-header-nav'] {
      display: none;
    }

    [data-slot='site-header-end'] {
      margin-inline-start: auto;
    }

    [data-slot='site-header-menu-button'] {
      display: grid;
    }

    [data-slot='site-header-mark'] + [data-slot='site-header-nav'] + [data-slot='site-header-menu-button'] {
      margin-inline-start: auto;
    }
  }
}

@layer trellisbyte {
  [data-slot='prose'] {
    max-width: var(--measure);
    color: var(--foreground-soft, var(--foreground));
    font-family: var(--font-sans);
    font-size: var(--text-read);
    line-height: var(--text-read--line-height);
    letter-spacing: var(--text-read--letter-spacing);
    font-weight: var(--text-read--font-weight);

    & > * {
      margin-block: 0;
    }

    & > * + * {
      margin-block-start: var(--space-4);
    }

    & :is(h1, h2, h3, strong) {
      color: var(--foreground);
    }

    & h1 {
      font-family: var(--font-display);
      font-size: var(--text-title);
      line-height: var(--text-title--line-height);
      letter-spacing: var(--text-title--letter-spacing);
      font-weight: var(--text-title--font-weight);
    }

    & h2 {
      margin-block-start: var(--space-7);
      font-family: var(--font-display);
      font-size: var(--text-heading);
      line-height: var(--text-heading--line-height);
      letter-spacing: var(--text-heading--letter-spacing);
      font-weight: var(--text-heading--font-weight);
    }

    & h3 {
      margin-block-start: var(--space-6);
      font-size: var(--text-head);
      line-height: var(--text-head--line-height);
      letter-spacing: var(--text-head--letter-spacing);
      font-weight: var(--text-head--font-weight);
    }

    & a {
      color: var(--link);
      text-decoration-thickness: var(--hairline);
      text-underline-offset: var(--space-1);
    }

    & ul,
    & ol {
      padding-inline-start: var(--space-5);
    }

    & ul {
      list-style: disc;
    }

    & ol {
      list-style: decimal;
    }
  }

  [data-slot='code'],
  [data-slot='prose'] :not(pre) > code {
    padding-inline: var(--space-1);
    border-radius: var(--radius-inline);
    background: var(--muted);
    font-family: var(--font-mono);
    font-size: 0.9em;
  }

  [data-slot='table-scroll'] {
    overflow-x: auto;
  }

  [data-slot='table'] {
    width: 100%;
    border-collapse: collapse;
    color: var(--foreground);
    font-family: var(--font-sans);
    font-size: var(--text-small);
    line-height: var(--text-small--line-height);
    letter-spacing: var(--text-small--letter-spacing);
    font-variant-numeric: tabular-nums;

    & th {
      border-block-end: var(--hairline) solid var(--border-strong);
      font-weight: var(--text-head--font-weight);
      text-align: start;
    }

    & td {
      border-block-end: var(--hairline) solid var(--border);
    }

    & th,
    & td {
      padding: var(--space-2) var(--space-3);
    }
  }
}

@layer trellisbyte {
  [data-slot='link'] {
    color: var(--link);
    text-decoration-line: underline;
    text-decoration-thickness: var(--hairline);
    text-underline-offset: var(--space-1);
    transition: color var(--duration-fast) var(--ease);

    &:hover {
      color: var(--foreground);
      text-decoration-thickness: var(--focus-width);
    }
  }
}

@layer trellisbyte {
  [data-slot='button'] {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: var(--control-height);
    padding: var(--space-1) var(--space-4);
    border: var(--hairline) solid transparent;
    border-radius: var(--radius-control);
    background: var(--primary);
    color: var(--primary-foreground);
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease);

    &:hover {
      background: var(--primary-hover, var(--primary));
    }

    &[data-variant='quiet'] {
      border-color: var(--border);
      background: var(--secondary);
      color: var(--secondary-foreground);

      &:hover {
        background: var(--accent);
        color: var(--accent-foreground);
      }
    }

    &[data-variant='link'] {
      padding-inline: 0;
      background: none;
      color: var(--link);
      text-decoration: underline;

      &:hover {
        background: none;
      }
    }

    &[data-disabled],
    &[data-pending] {
      cursor: default;
      opacity: 0.5;
    }
  }
}

@layer trellisbyte {
  [data-slot='form'],
  [data-slot='field'],
  [data-slot='fieldset'] {
    display: flex;
    flex-direction: column;
    color: var(--foreground);
  }

  [data-slot='form'],
  [data-slot='fieldset'] {
    gap: var(--space-4);
  }

  [data-slot='field'] {
    gap: var(--space-1);
  }

  [data-slot='fieldset'] {
    margin: 0;
    padding: 0;
    border: 0;
  }

  [data-slot='field-row'] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }

  [data-slot='fieldset-legend'] {
    padding: 0;
  }

  [data-slot='field-description'] {
    margin: 0;
    color: var(--muted-foreground);
  }

  [data-slot='field-error'] {
    color: var(--destructive);
  }

  [data-slot='input'],
  [data-slot='textarea'] {
    padding: var(--space-2) var(--space-4);
  }
}

@layer trellisbyte {
  [data-slot='code-block'] {
    position: relative;
  }

  [data-slot='code-block-pre'] {
    margin: 0;
    padding: var(--space-4);
    overflow-x: auto;
    border-radius: var(--radius-card);
    background: var(--muted);
    color: var(--foreground);
    font-family: var(--font-mono);
    font-size: var(--text-small);
    line-height: var(--text-small--line-height);
  }

  [data-slot='copy-button'] {
    min-height: var(--control-height);
    padding-inline: var(--space-3);
    border: var(--hairline) solid var(--border);
    border-radius: var(--radius-control);
    background: var(--background);
    color: var(--foreground);
    cursor: pointer;

    &:hover {
      background: var(--accent);
      color: var(--accent-foreground);
    }
  }

  [data-slot='code-block'] > [data-slot='copy-button'] {
    position: absolute;
    inset-block-start: var(--space-2);
    inset-inline-end: var(--space-2);
  }
}

/* The cream sheet floating on the field, and bands: full-bleed surfaces with hard edges, cut one after another the way the
   launch video cuts. No hairline between them: the colour change is the edge. A band's container is what its .fills
   lines fill. --sheet-w is the width of a sheet of text or of a tool. */
:root { --sheet-w: 880px; }
[data-surface] { background: var(--background); color: var(--foreground); }
.sheet { border-radius: var(--radius-sheet); box-shadow: var(--shadow-1); }
.band { overflow-x: clip; }
.band > [data-slot="container"] { padding-block: var(--section); container-type: inline-size; }

/* The page itself and the layouts its parts stand in: layout only. Colour, type and shape come from the theme
   (web/src/brand/theme.css), the behavior parts from @trellisbyte/next and the signature pieces from web/src/signature.
   tools: site/tools/build-styles.mjs puts them together, in that order, as the one sheet every page wears. */

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; background: var(--background); }
  body {
    margin: 0; background: var(--background); color: var(--foreground);
    font: var(--text-body--font-weight) var(--text-body)/var(--text-body--line-height) var(--font-sans); letter-spacing: var(--text-body--letter-spacing);
    -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: var(--focus-width) solid var(--ring); outline-offset: var(--focus-offset); }
}
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* The type steps, as classes for what the theme's parts don't draw. */
.display { font-weight: var(--text-display--font-weight); font-size: var(--text-display); line-height: var(--text-display--line-height); letter-spacing: var(--text-display--letter-spacing); }
.title { font-weight: var(--text-title--font-weight); font-size: var(--text-title); line-height: var(--text-title--line-height); letter-spacing: var(--text-title--letter-spacing); text-wrap: balance; }
.heading { font-weight: var(--text-heading--font-weight); font-size: var(--text-heading); line-height: var(--text-heading--line-height); letter-spacing: var(--text-heading--letter-spacing); text-wrap: balance; }
.head { font-weight: var(--text-head--font-weight); font-size: var(--text-head); line-height: var(--text-head--line-height); letter-spacing: var(--text-head--letter-spacing); }
.lede { font-size: var(--text-lede); line-height: var(--text-lede--line-height); letter-spacing: var(--text-lede--letter-spacing); color: var(--muted-foreground); text-wrap: pretty; }
.small { font-size: var(--text-small); line-height: var(--text-small--line-height); }
.meta { font-size: var(--text-meta); line-height: var(--text-meta--line-height); color: var(--muted-foreground); font-variant-numeric: tabular-nums; }

/* The grid. */
.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; } }

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

/* The small line over a headline. */
.eyebrow { margin-bottom: var(--space-5); color: var(--muted-foreground); }

/* A form's field keeps its own width beside its button. */
input[data-slot="input"] { width: auto; }

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

/* Sections: a hairline across the grid, --section 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 > [data-slot="container"] { position: relative; padding-block: var(--section); }
.sec > [data-slot="container"]::before { content: ""; position: absolute; top: 0; left: var(--page-margin); right: var(--page-margin); border-top: 1px solid var(--border); }
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-6); margin-bottom: var(--space-9); }
.sec-head > :last-child:not(:first-child) { flex: none; }

/* 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(--border); }
.index a, .index .item { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: baseline; padding-block: var(--space-7) var(--space-8); border-bottom: 1px solid var(--border); }
.index b { grid-column: 1 / 7; font-weight: 700; font-size: var(--text-title); line-height: .98; letter-spacing: -0.04em; }
.index span { grid-column: 7 / -1; font-size: var(--text-lede); line-height: 1.45; color: var(--muted-foreground); }
.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(--space-5); }
.index.compact b { font-size: var(--text-head); line-height: 1.15; letter-spacing: -0.025em; }
.index.compact span { font-size: var(--text-body); line-height: 1.5; letter-spacing: -0.005em; }
@media (max-width: 759px) {
  .index a, .index .item { display: block; padding-block: var(--space-6); }
  .index span { display: block; margin-top: var(--space-2); }
}

/* A list on hairlines: one short thing a row. */
.lines { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--border); }
.lines > li { padding-block: var(--space-5); border-bottom: 1px solid var(--border); font-size: var(--text-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(--space-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; } }

/* Code: 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(--font-mono); font-size: .9em; letter-spacing: 0; }
:not(pre) > code { padding: .12em .32em; border-radius: var(--radius-inline); background: color-mix(in srgb, currentColor 9%, transparent); }
pre { margin: 0; padding: var(--space-5) var(--space-6); border-radius: var(--radius-card); background: var(--muted); color: var(--foreground); 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(--border); }
.faq details { border-bottom: 1px solid var(--border); }
.faq summary {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-6); padding-block: var(--space-5);
  list-style: none; cursor: pointer; font-weight: 600; font-size: var(--text-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(--duration-fast) var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > :not(summary) { max-width: var(--measure); padding-bottom: var(--space-5); color: var(--muted-foreground); }
.faq details > :not(summary) + :not(summary) { margin-top: calc(-1 * var(--space-2)); }

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

/* 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(--space-8); }
.tool-head .eyebrow { display: block; margin-bottom: var(--space-4); color: var(--muted-foreground); }
.tool-head h1 { font-weight: 700; font-size: var(--text-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(--text-body); line-height: 1.5; letter-spacing: -0.005em; }
.tool-head .l { white-space: normal; }
.tool-head .lede { margin-top: var(--space-4); }
.tool-sec { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--space-6); align-items: start; padding-top: var(--section); }
.tool-sec > * { grid-column: 6 / -1; }
.tool-sec > h2 { grid-column: 1 / 6; grid-row: 1 / span 3; font-weight: 700; font-size: var(--text-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(--border); }
.tool-sec > [data-variant="quiet"] { 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(--space-9); font-size: var(--text-body); line-height: var(--text-body--line-height); letter-spacing: var(--text-body--letter-spacing); color: var(--foreground-soft); container-type: inline-size; }
.article > * { max-width: var(--measure); }
.article > * + *, .sources > * + * { margin-top: var(--space-4); }
.article h1 { color: var(--foreground); font-weight: 700; font-size: var(--text-heading); line-height: 1; letter-spacing: -0.035em; text-wrap: balance; }
.article h2 { margin-top: var(--space-9); color: var(--foreground); font-weight: 700; font-size: var(--text-head); line-height: 1.15; letter-spacing: -0.025em; text-wrap: balance; scroll-margin-top: var(--space-6); }
.article h3 { margin-top: var(--space-7); color: var(--foreground); font-weight: 600; font-size: var(--text-lede); line-height: 1.3; letter-spacing: -0.015em; scroll-margin-top: var(--space-6); }
.article h2 + *, .article h3 + * { margin-top: var(--space-3); }
.article p, .article li { font-size: var(--text-read); line-height: 1.6; text-wrap: pretty; }
.article a, .article strong { color: var(--foreground); }
.article strong { font-weight: 600; }
.article ul, .article ol { padding-left: 1.2em; }
.article li + li { margin-top: var(--space-2); }
.article hr { margin-block: var(--space-8); border: 0; border-top: 1px solid var(--border); }
.article > :is(pre, [data-slot="table-scroll"], figure, .faq) { max-width: none; margin-block: var(--space-6); }
.article p.lede { color: var(--foreground); font-size: var(--text-lede); line-height: 1.45; }
.article p.checked { margin-block: var(--space-6) var(--space-7); padding-bottom: var(--space-6); border-bottom: 1px solid var(--border); color: var(--muted-foreground); font-size: var(--text-small); line-height: 1.45; }
.article .checked + h2 { margin-top: var(--space-7); }
.article .sources { margin-top: var(--space-9); padding-top: var(--space-7); border-top: 1px solid var(--border); }
.article .sources h2 { margin-top: 0; font-size: var(--text-lede); line-height: 1.3; letter-spacing: -0.015em; }
.article .sources p, .article .sources li { font-size: var(--text-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 [data-slot="table"] code { overflow-wrap: normal; }
.article [data-slot="table"] th { color: var(--foreground); }
.article [data-slot="table"] th[scope="col"] { vertical-align: bottom; font-size: var(--text-meta); font-weight: 400; color: var(--muted-foreground); }
.article [data-slot="table"] th[scope="row"] { min-width: 7em; }
@container (max-width: 599px) {
  .stack[data-slot="table-scroll"] { 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(--space-4); border-bottom: 1px solid var(--border); }
  .stack tbody tr:first-child { border-top: 1px solid var(--border); }
  .stack [data-slot="table"] th, .stack [data-slot="table"] td, .stack th, .stack td { padding: 0; border: 0; }
  .article .stack th[scope="row"] { min-width: 0; margin-bottom: var(--space-2); font-size: var(--text-read); line-height: 1.35; }
  .stack td + td { margin-top: var(--space-1); }
  .stack td[data-label] { display: grid; grid-template-columns: clamp(7.5em, 32%, 13em) minmax(0, 1fr); gap: var(--space-4); }
  .stack td[data-label]::before { content: attr(data-label); content: attr(data-label) / ""; font-size: var(--text-meta); line-height: 1.6; color: var(--muted-foreground); }
  .stack.long td[data-label] { display: block; }
  .stack.long td + td { margin-top: var(--space-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(--border); }
.rows li { border-bottom: 1px solid var(--border); }
.rows h3 { font: inherit; letter-spacing: inherit; }
.rows a { display: block; padding-block: var(--space-4); font-weight: 600; font-size: var(--text-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; }

/* The footer sits a section below the page. */
main + [data-slot="site-footer"] { margin-top: var(--section); }
[data-slot="site-footer"] .tm { flex-basis: 100%; margin: 0; }

@media (max-width: 959px) {
  .tool-sec > *, .tool-sec > h2 { grid-column: 1 / -1; grid-row: auto; }
}
@media (max-width: 759px) {
  .tool-head { padding-block: var(--space-6) var(--space-7); }
  main > .tool { margin-inline: calc(-1 * var(--page-margin)); padding: var(--space-6) var(--page-margin) var(--space-7); border-radius: 0; box-shadow: none; }
  .sec-head { flex-wrap: wrap; margin-bottom: var(--space-7); }
  .article { margin-inline: calc(-1 * var(--page-margin)); padding: var(--space-7) var(--page-margin) var(--space-8); border-radius: 0; box-shadow: none; }
}

/* Big type: the launch video's held line on a page. .hold is a step's one held line. A line set with .l holds; .stem and
   .round pull its first letter onto the edge its neighbours' stems keep (ink.js picks which). .fills sets a line to fill
   its band's width: --em is the longest line's ink width in ems, so its ink runs from margin to margin. */
:root { --text-hold: clamp(52px, 10vw, 144px); }
@media (max-width: 759px) { :root { --text-hold: min(52px, 13.3vw); } }
.hold { font-weight: 700; font-size: var(--text-hold); line-height: .92; letter-spacing: -0.045em; text-wrap: balance; }
.fills { font-size: calc(100cqw / var(--em)); }
.l { display: block; white-space: nowrap; }
.stem { margin-left: -0.058em; }
.round { margin-left: -0.03em; }

/* The pennant: Flaghand's one button that sends something out, a swallowtail cut into its fly. It is Button's primary
   variant, so a primary button on any surface is a pennant. It fills hoist to fly as the passkey completes (.is-sent). */
[data-variant="primary"] {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; height: var(--control-height);
  padding: 0 40px 0 var(--space-6); border: 0; border-radius: var(--radius-control) 0 0 var(--radius-control);
  clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 50%, 100% 100%, 0 100%);
  background: var(--primary); color: var(--primary-foreground); font: 600 16px/1 var(--font-sans); letter-spacing: normal; white-space: nowrap; cursor: pointer;
  transition: transform var(--duration-base) var(--ease), opacity var(--duration-base) var(--ease);
}
a[data-variant="primary"] { letter-spacing: inherit; }
[data-variant="primary"]:hover { background: var(--primary); opacity: 1; }
[data-variant="primary"]::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(--duration-base) var(--ease); }
[data-variant="primary"].is-sent::before { transform: scaleX(1); }
[data-variant="primary"] > * { position: relative; }
[data-variant="primary"] svg { width: 20px; height: 20px; flex: none; }
a[data-variant="primary"]:hover { opacity: .92; }
/* Its focus ring sits inside, since the clip would cut an outside ring away: a red gap, then a cream line. */
[data-variant="primary"]:focus-visible { outline: none; box-shadow: inset 0 0 0 4px var(--primary), inset 0 0 0 6px var(--primary-foreground); }

/* 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. Each sits on cream whatever surface it is on. */
:root { --frame: #fffaf3; }
.phone {
  --w: 340px; position: relative; width: var(--w); aspect-ratio: 390 / 844; border-radius: calc(var(--w) * .121);
  overflow: hidden; background: var(--frame); box-shadow: var(--shadow-1); isolation: isolate;
}
.phone img { position: absolute; inset: 0; width: 100%; height: 100%; }
.desk { overflow: hidden; border-radius: var(--radius-sheet); background: var(--frame); box-shadow: var(--shadow-1); }
.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(--frame); box-shadow: var(--shadow-1); 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(--duration-base) var(--ease); }
.is-on video { opacity: 1; }

/* 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(--space-4); }
.post figcaption { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-small); line-height: 1.2; color: var(--muted-foreground); }
.post figcaption svg { width: 24px; height: 24px; flex: none; }
.post figcaption b { font-weight: 600; color: var(--foreground); }
.post img { width: 100%; border-radius: var(--radius-card); box-shadow: var(--shadow-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(--foreground); --cc-dim: #666; --cc-rule: #8a8a8a; --cc-band: #f0f0f0; --cc-ok: #2c7a39; --cc-mark: #d77757;
  padding: var(--space-8) var(--space-9) var(--space-8); color: var(--cc-text); font: 400 15px/1.6 var(--font-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(--space-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(--space-7); }
.term .cc svg { width: 5.4ch; height: auto; fill: var(--cc-mark); flex: none; }
.term .you { margin-inline: calc(-1 * var(--space-9)); padding: var(--space-3) var(--space-9); background: var(--cc-band); }
.term .you > :first-child { color: var(--cc-dim); }
.term .box { display: block; margin-top: var(--space-6); padding-block: var(--space-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. */
[data-surface="night"] .term { --cc-dim: #999; --cc-rule: #888; --cc-band: #373737; --cc-ok: #4eba65; padding: 0; }
[data-surface="night"] .term .you { margin-inline: 0; padding-inline: var(--space-4); }
@media (max-width: 759px) {
  .term { padding: var(--space-6) var(--space-5) var(--space-7); font-size: 13px; }
  .term .you { margin-inline: calc(-1 * var(--space-5)); padding-inline: var(--space-5); }
  [data-surface="night"] .term { padding: 0; }
  [data-surface="night"] .term .you { margin-inline: 0; padding-inline: var(--space-3); }
}