/* Woodentable site. Values mirror the design tokens in the woodentable.ai Penpot file. */

/* Latin subsets, served from this site. Licences are beside them in /fonts. */
@font-face { font-family: "Libre Baskerville"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/libre-baskerville-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Libre Baskerville"; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/libre-baskerville-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/source-serif-4-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-style: italic; font-weight: 400; font-display: swap; src: url(/fonts/source-serif-4-latin-400-italic.woff2) format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/source-serif-4-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Cascadia Code"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/cascadia-code-latin-400-normal.woff2) format("woff2"); }

:root {
  color-scheme: dark;
  --surface-page: #28231D;
  --surface-panel: #3B352C;
  --surface-masthead: #1E1A15;
  --surface-code: #17120B;
  --text-primary: #EFEAE3;
  --text-secondary: #D2CCC1;
  --text-muted: #A99F91;
  --rule-hairline: #4F483D;
  --rule-default: #645B4E;
  --rule-strong: #8E8372;
  --link-base: #AABBCD;
  --link-hover: #BFCCD9;
  --mark: #B68607;
  --gilt-text: #B68607;
  --fill-primary: #B68607;
  --on-primary: #17120B;
  --hover-primary: #DCB87A;
  --pressed-primary: #664B10;
  --focus: #BFCCD9;
  --tint-brand: #6B274A;
  --label-brand: #CAADB9;
  --tint-note: #133449;
  --label-note: #95ABC1;
  --status-note: #809BB4;
  --tint-good: #294E31;
  --label-good: #ACBEAE;
  --status-good: #849F88;
  --ornament: #B68607;
  --cover-ground: #6B274A;
  --cover-gilt: #D1A75A;
  --cover-paper: #FDFAF4;

  /* The wallpaper: one pattern through masthead, tinted bands and footer */
  --paper-masthead: url(/images/texture/wallpaper-light-15.webp);
  --paper-tint: url(/images/texture/wallpaper-dark-26.webp);
  --paper-cover: url(/images/texture/wallpaper-dark-30.webp);

  --font-display: "Libre Baskerville", Baskerville, Georgia, serif;
  --font-body: "Source Serif 4", "Source Serif Pro", Georgia, serif;
  --font-mono: "Cascadia Code", "Cascadia Mono", ui-monospace, Consolas, monospace;

  --size-display: 44px;
  --size-h1: 34px;
  --size-h2: 26px;
  --size-h3: 20px;
  --size-lead: 19px;
  --size-body: 17px;
  --size-small: 15px;
  --size-caption: 13px;
  --size-caps: 12px;
  --size-wordmark: 22px;

  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-7: 48px;
  --space-9: 96px;
  --radius-sm: 3px;

  --page: 1200px;
  --margin: 56px;
  --readable: 720px;
}

/* Light scheme. The head script sets data-theme from the saved choice or the system setting. */
[data-theme="light"] {
  color-scheme: light;
  --surface-page: #FDFAF4;
  --surface-panel: #EFEAE3;
  --surface-masthead: #EFEAE3;
  --surface-code: #E0DBD2;
  --text-primary: #28231D;
  --text-secondary: #3B352C;
  --text-muted: #645B4E;
  --rule-hairline: #D2CCC1;
  --rule-default: #A99F91;
  --rule-strong: #7A7061;
  --link-base: #0A4C6E;
  --link-hover: #133449;
  --mark: #6B274A;
  --ornament: #B68607;
  --gilt-text: #805F0E;
  --fill-primary: #6B274A;
  --on-primary: #FDFAF4;
  --hover-primary: #946078;
  --pressed-primary: #29131E;
  --focus: #133449;
  --tint-brand: #E4D5DB;
  --label-brand: #793A59;
  --tint-note: #D4DDE6;
  --label-note: #205F85;
  --status-note: #3D6D91;
  --tint-good: #D5DED6;
  --label-good: #376341;
  --status-good: #4A7252;
  --cover-ground: #6B274A;
  --cover-gilt: #D1A75A;
  --cover-paper: #FDFAF4;
  --paper-masthead: url(/images/texture/wallpaper-dark-10.webp);
  --paper-tint: url(/images/texture/wallpaper-dark-10.webp);
}

@media (max-width: 1023px) {
  :root {
    --size-display: 38px; --size-h1: 30px; --size-h2: 24px; --size-h3: 19px;
    --margin: 40px;
  }
}

@media (max-width: 639px) {
  :root {
    --size-display: 32px; --size-h1: 26px; --size-h2: 22px; --size-h3: 18px;
    --size-lead: 18px; --size-wordmark: 20px;
    --margin: 20px;
    --space-9: 64px;
  }
}

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

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

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-primary);
  font: var(--size-body)/1.65 var(--font-body);
}
/* a short page keeps its footer at the bottom of the window */
body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; }
body > main { flex: 1 0 auto; width: 100%; }

img, video { display: block; max-width: 100%; height: auto; }

a { color: var(--link-base); }
a:hover { color: var(--link-hover); }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.skip {
  position: absolute; left: -9999px;
}
.skip:focus { left: var(--margin); top: 8px; z-index: 10; background: var(--surface-page); padding: 8px 12px; }

.wrap {
  max-width: var(--page);
  margin: 0 auto;
  padding: 0 var(--margin);
}

/* Type */

h1, h2, h3 { font-family: var(--font-display); font-weight: 700; margin: 0; color: var(--text-primary); }
.display { font-size: var(--size-display); line-height: 1.15; }
h2 { font-size: var(--size-h2); line-height: 1.3; }
h3 { font-size: var(--size-h3); line-height: 1.3; }
p { margin: 0; }
.lead { font-size: var(--size-lead); line-height: 1.65; color: var(--text-secondary); }
.small { font-size: var(--size-small); line-height: 1.5; color: var(--text-muted); }
.caps {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--size-caps); line-height: 1.5;
  letter-spacing: 1.5px; text-transform: uppercase;
}

/* Buttons */

.button {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 22px;
  border: 1px solid transparent; border-radius: var(--radius-sm);
  font: 700 15px/1.5 var(--font-display);
  text-decoration: none;
}
.button.primary { background: var(--fill-primary); color: var(--on-primary); }
.button.primary:hover { background: var(--hover-primary); color: var(--on-primary); }
.button.primary:active { background: var(--pressed-primary); }
.button.secondary { border-color: var(--rule-strong); color: var(--text-primary); }
.button.secondary:hover { background: var(--tint-brand); color: var(--text-primary); }

/* Masthead and footer: the cover ground, edged by a double rule */

.masthead { background: var(--cover-ground); color: var(--cover-paper); }
.masthead.cover, .site-footer { --focus: var(--cover-paper); }
.masthead .bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-3) var(--space-5);
  padding-top: 14px; padding-bottom: 14px;
}
.lockup { display: flex; align-items: center; gap: var(--space-4); text-decoration: none; }
.lockup img { width: 96px; height: 96px; }
.wordmark {
  display: block;
  font: 700 var(--size-wordmark)/1.2 var(--font-display);
  letter-spacing: 5px; text-transform: uppercase;
  color: var(--cover-gilt);
}
.tagline { display: block; margin-top: 6px; color: var(--cover-gilt); }
.masthead nav ul { display: flex; align-items: center; gap: 30px; margin: 0; padding: 0; list-style: none; }
.masthead nav a { color: var(--cover-paper); text-decoration: none; font-size: 17px; line-height: 1.5; white-space: nowrap; }
.masthead nav a:hover { color: var(--cover-gilt); }
.masthead nav a[aria-current="page"]:not(.install) { color: var(--cover-gilt); }
.masthead nav .install {
  display: inline-block; padding: 11px 20px; border-radius: var(--radius-sm);
  background: var(--cover-gilt); color: var(--cover-ground);
  font: 700 15px/1.5 var(--font-display);
}
.masthead nav .install:hover { background: var(--cover-paper); color: var(--cover-ground); }
.masthead .menu { display: none; }
.masthead .actions { display: flex; align-items: center; gap: 30px; }
.theme-toggle {
  display: none; align-items: center; justify-content: center;
  padding: 8px; border: 0; border-radius: var(--radius-sm); background: none;
  color: var(--cover-paper); cursor: pointer;
}
[data-theme] .theme-toggle { display: inline-flex; }
.theme-toggle:hover { color: var(--cover-gilt); }
.theme-toggle .moon, [data-theme="light"] .theme-toggle .sun { display: none; }
[data-theme="light"] .theme-toggle .moon { display: block; }

.masthead.docs { background: var(--surface-masthead) var(--paper-masthead) 0 0 / 264px auto; color: var(--text-secondary); }
.masthead.docs .wordmark { color: var(--mark); }
.masthead.docs .tagline { color: var(--text-muted); }
.masthead.docs nav a { color: var(--text-secondary); }
.masthead.docs nav a:hover, .masthead.docs nav a[aria-current="page"]:not(.install) { color: var(--mark); }
.masthead.docs nav .install { background: var(--fill-primary); color: var(--on-primary); }
.masthead.docs nav .install:hover { background: var(--hover-primary); color: var(--on-primary); }
.masthead.docs .theme-toggle { color: var(--text-secondary); }
.masthead.docs .theme-toggle:hover { color: var(--mark); }

.double-rule {
  height: 7px;
  border-top: 3px solid var(--ornament);
  border-bottom: 1px solid var(--ornament);
}

/* Below full width, a smaller logo and tighter nav keep one row down to
   about 985px; narrower still, the bar wraps the nav onto a second row. */
@media (max-width: 1099px) {
  .lockup img { width: 80px; height: 80px; }
  .masthead nav ul, .masthead .actions { gap: 20px; }
}

@media (max-width: 639px) {
  .masthead nav { display: none; }
  .masthead .menu { display: block; position: relative; }
  .masthead .menu summary {
    list-style: none; cursor: pointer;
    padding: 8px 12px; border: 1px solid var(--cover-gilt); border-radius: var(--radius-sm);
    color: var(--cover-gilt); font: 700 15px/1.5 var(--font-display);
  }
  .masthead .menu summary::-webkit-details-marker { display: none; }
  .masthead .menu ul {
    position: absolute; right: 0; top: calc(100% + 8px); z-index: 5;
    min-width: 200px; margin: 0; padding: 8px 0; list-style: none;
    background: var(--cover-ground); border: 1px solid var(--cover-gilt);
  }
  .masthead .menu a { display: block; padding: 8px 16px; color: var(--cover-paper); text-decoration: none; }
  .masthead.docs .menu summary { border-color: var(--mark); color: var(--mark); }
  .masthead.docs .menu ul { background: var(--surface-masthead) var(--paper-masthead) 0 0 / 264px auto; border-color: var(--mark); }
  .masthead.docs .menu a { color: var(--text-secondary); }
  .masthead .menu .theme-switch {
    display: block; width: 100%; padding: 8px 16px; border: 0; background: none;
    color: var(--cover-paper); font: inherit; text-align: left; cursor: pointer;
  }
  .masthead.docs .menu .theme-switch { color: var(--text-secondary); }
}

.masthead .menu .theme-item { display: none; }

.masthead .menu .burger { display: none; }

@media (max-width: 639px) {
  .lockup { gap: var(--space-3); }
  .lockup img { width: 48px; height: 48px; }
  .wordmark { letter-spacing: 2px; }
  .masthead .bar { gap: var(--space-3); }
  .tagline { font-size: 10px; letter-spacing: 1px; margin-top: 2px; }
  .masthead .menu summary { border: 0; padding: 8px; }
  .masthead .menu .label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .masthead .menu .burger { display: block; }
  .masthead .actions > .theme-toggle { display: none; }
  [data-theme] .masthead .menu .theme-item { display: block; }
}

.site-footer { background: var(--cover-ground) var(--paper-cover) 0 0 / 264px auto; color: var(--cover-paper); }
.site-footer .columns {
  display: grid; grid-template-columns: repeat(4, max-content); justify-content: center;
  column-gap: 100px; row-gap: var(--space-5);
  padding: 40px 0 32px;
}
.site-footer h2 { font-size: var(--size-caps); color: var(--cover-gilt); margin-bottom: 14px; }
.site-footer ul { margin: 0; padding: 0; list-style: none; }
.site-footer li a { color: var(--cover-paper); text-decoration: none; line-height: 26px; }
.site-footer li a:hover { color: var(--cover-gilt); }
.site-footer .notice { text-align: center; padding: 20px 0 24px; font-size: var(--size-small); }
.site-footer .diamond-rule { --rule-colour: var(--cover-gilt); }

@media (max-width: 767px) {
  .site-footer .columns { grid-template-columns: repeat(2, 1fr); column-gap: var(--space-5); }
}

/* Ornament: a rule broken by a diamond */

.diamond-rule {
  --rule-colour: var(--ornament);
  display: flex; align-items: center; justify-content: center; gap: 16px;
}
.diamond-rule::before, .diamond-rule::after {
  content: ""; width: 120px; height: 1px; background: var(--rule-colour);
}
.diamond-rule span {
  width: 9px; height: 9px; background: var(--rule-colour); transform: rotate(45deg);
}

/* Home */

main.home {
  display: flex; flex-direction: column; gap: var(--space-9);
  padding-top: var(--space-9); padding-bottom: var(--space-9);
}

.hero { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-5); }
.hero .lead { max-width: var(--readable); }
.hero .button { margin-top: 8px; }

/* A full-width loop behind the hero; the band is sized so the next section still peeks in */
.hero.has-media {
  position: relative; isolation: isolate;
  /* the band runs a --space-9 above and below the hero */
  min-height: calc(clamp(560px, 72vh, 820px) - 2 * var(--space-9));
}
.hero-media {
  position: absolute; z-index: -1; left: 50%; width: 100vw; transform: translateX(-50%);
  top: calc(-1 * var(--space-9)); bottom: calc(-1 * var(--space-9));
  background: url(/media/hero-study-night.jpg) center 30% / cover no-repeat;
}
[data-theme="light"] .hero-media { background-image: url(/media/hero-study-day.jpg); }
.hero-media video { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; display: block; }
/* one clip per theme: the day study in light, the night study in dark */
[data-theme="light"] .hero-media .hero-night, :root:not([data-theme="light"]) .hero-media .hero-day { display: none; }
html:has(.hero.has-media), body:has(.hero.has-media) { overflow-x: clip; }
/* the picture runs a --space-9 below the hero, so the next section needs room of its own past it */
.hero.has-media + * { margin-top: var(--space-7); }
/* keep the text block on the open left of the picture, clear of the robot */
.hero.has-media h1 { max-width: 13em; text-wrap: balance; }
.hero-text { display: flex; flex-direction: column; gap: var(--space-5); }
.hero.has-media .lead { max-width: min(var(--readable), 56vw); text-wrap: balance; line-height: 1.4; }
/* the call to action sits on the floor, leaving the wall open between it and the lead */
.hero.has-media .button { margin-top: auto; }
.hero.has-media .small { color: var(--text-primary); }
/* the heading and lead sit on one panel, like a framed notice on the wall, its edge in line with the button;
   the version line on its own band */
.hero.has-media .hero-text {
  align-self: flex-start; padding: var(--space-5);
  background: color-mix(in srgb, var(--surface-page) 70%, transparent);
  border: 1px solid var(--ornament); border-radius: 6px;
  box-shadow: 0 3px 12px rgb(40 35 29 / 0.4);
}
.hero.has-media .small {
  padding: 0 8px; border-radius: 4px;
  background: color-mix(in srgb, var(--surface-page) 70%, transparent);
}
/* when the heading wraps, "for AI agents." goes to the next line whole */
.hero h1 .keep { white-space: nowrap; }
@media (min-width: 640px) {
  .hero.has-media h1 { max-width: none; }
  /* a compact notice set high on the wall, so it ends above the robot's antenna */
  .hero.has-media .hero-text { padding: var(--space-4) var(--space-5); gap: var(--space-3); margin-top: calc(-1 * var(--space-7)); }
  .hero.has-media .lead { max-width: none; }
  /* the call to action and version line sit as low in the picture as on phones */
  .hero.has-media .button, .hero.has-media .small { position: relative; top: var(--space-7); }
}
/* desktop: the robot sits lower in the picture, so the notice can come down a little */
@media (min-width: 1200px) {
  .hero.has-media .hero-text { margin-top: calc(-1 * var(--space-5)); }
}
/* taller desktop windows put the robot lower still */
@media (min-width: 1200px) and (min-height: 860px) {
  .hero.has-media .hero-text { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) { .hero-media video { display: none; } }
/* Wide screens: at most 1.2x the width that shows the whole frame (1344x768) at the band's height, so it is barely cropped */
@media (min-width: 1601px) {
  .hero-media {
    width: min(100vw, calc(clamp(560px, 72vh, 820px) * 1344 / 768 * 1.2));
  }
}

/* Phones: the study behind the whole hero, cropped to the robot at its table; the call to action on the floor */
@media (max-width: 639px) {
  /* tall enough that the robot sits below the text even with the browser bars showing */
  .hero.has-media { min-height: max(500px, calc(85svh - 84px - 2 * var(--space-9))); justify-content: flex-start; }
  .hero.has-media .lead { max-width: none; font-size: 17px; }
  /* lift the text clear of the robot's antenna */
  .hero.has-media .hero-text {
    margin-top: calc(-1 * var(--space-5)); padding: var(--space-3);
    align-self: stretch;
  }
  .hero-media { background-position: 55% bottom; }
  .hero-media video { object-position: 55% bottom; }
}
/* the narrowest phones: a size smaller still, so the lead stays on two lines above the robot */
@media (max-width: 379px) {
  .hero.has-media .lead { font-size: 16px; }
}

.feature { display: flex; flex-direction: column; gap: var(--space-4); }
.feature > .caps { color: var(--gilt-text); }
.feature > hr { width: 100%; margin: 0 0 var(--space-4); border: 0; border-top: 1px solid var(--rule-default); }
.feature .row {
  display: grid; grid-template-columns: 620fr 420fr; gap: var(--space-7); align-items: center;
}
.feature.reverse .row { grid-template-columns: 420fr 620fr; }
.feature.reverse .media { order: 2; }
.feature .copy { display: flex; flex-direction: column; gap: var(--space-3); }
.feature .copy p { color: var(--text-secondary); }
.feature .media video, .feature .media img {
  width: 100%; height: auto;
  outline: 1px solid var(--rule-default);
  background: #17120B;
}
.feature figure.media { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; }
.feature .media figcaption { font-size: var(--size-caption); line-height: 1.5; color: var(--text-muted); }

.feature.tinted { background: var(--tint-brand) var(--paper-tint) 0 0 / 264px auto; padding: var(--space-7); }
.feature.tinted .row { grid-template-columns: 560fr 384fr; }
.feature.tinted > .caps { color: var(--text-primary); }
.feature.tinted .media figcaption { color: var(--text-secondary); }

.callout { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); padding: 0 120px; }
.callout p { text-align: center; }

.pod {
  display: flex; flex-direction: column; gap: var(--space-4);
  padding: var(--space-5); border: 1px dashed var(--rule-strong);
}
.pod > .caps { color: var(--text-muted); }
.pod .containers { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.pod .container {
  display: flex; flex-direction: column; gap: 8px; padding: 20px;
  background: var(--surface-panel); border: 1px solid var(--rule-default);
}
.pod .container.side-table { background: var(--tint-brand); border-color: var(--mark); }
.pod .container p { font-size: var(--size-small); line-height: 1.5; color: var(--text-secondary); }
.pod code { font-family: var(--font-mono); font-size: 14px; }
.pod .caption { font-size: var(--size-caption); line-height: 1.5; color: var(--text-muted); }

.final-cta { display: flex; flex-direction: column; align-items: center; gap: var(--space-5); padding: 0 128px; text-align: center; }
.final-cta h2 { font-size: var(--size-h1); line-height: 1.2; }
.final-cta .actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-4); }

@media (max-width: 1023px) {
  .feature .row, .feature.reverse .row, .feature.tinted .row { grid-template-columns: 1fr; gap: var(--space-5); }
  .feature .media, .feature.reverse .media { order: 2; }
  .feature.tinted { padding: var(--space-5); }
  .callout, .final-cta { padding: 0; }
}

@media (max-width: 639px) {
  .pod .containers { grid-template-columns: 1fr; }
}

/* Home chapters: Setup, Help, Peace of mind (a tinted band) and Freedom */

.chapter { display: flex; flex-direction: column; gap: var(--space-7); }
.chapter p { color: var(--text-secondary); }
.chapter-head { display: flex; flex-direction: column; gap: var(--space-3); }
.chapter-head .lead { text-wrap: pretty; }
.chapter h2, .page-section > h2 { color: var(--gilt-text); font-variant-caps: small-caps; letter-spacing: 0.02em; }
/* the fleuron the terminal guides set before a section heading, hung in the margin */
.chapter h2::before, .page-section > h2::before {
  content: "❧" / ""; display: inline-block; width: 1.6em; margin-left: -1.6em; padding-right: 0.4em; text-align: right;
  font-variant-caps: normal; color: var(--text-muted); font-size: 0.75em;
}
/* a phone's gutter is too narrow to hang it in, so there it leads the heading */
@media (max-width: 639px) { .chapter h2::before, .page-section > h2::before { width: auto; margin-left: 0; font-size: 1em; } }
/* a numbered heading's numeral is its mark, so it takes no fleuron */
.page-section > h2:has(.numeral)::before { content: none; }
.chapter pre.code { margin: 0; }
.chapter pre.code .comment { color: var(--text-muted); }
.chapter aside.notice { margin-top: 0; }

/* the band runs the full width of the window, its content on the page grid */
.chapter.tinted, .page-section.tinted { position: relative; isolation: isolate; padding-block: var(--space-9); }
.chapter.tinted::before, .page-section.tinted::before {
  content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%);
  background: var(--tint-brand) var(--paper-tint) 0 0 / 264px auto;
}
html:has(.chapter.tinted, .page-section.tinted), body:has(.chapter.tinted, .page-section.tinted) { overflow-x: clip; }
/* cards on the band sit on paper of their own, as the diagram's boxes do */
.page-section.tinted .platform { background: var(--surface-panel); }

/* the steps as a ledger: a numeral in the margin, what to do, and the command
   beside it, with hairline rules between the rows */
.steps { margin: 0; padding: 0; list-style: none; }
/* the first step sits closer to the heading than a chapter's usual gap */
.chapter-head + .steps { margin-top: calc(32px - var(--space-7)); }
.step {
  position: relative; display: grid; grid-template-columns: 324fr 676fr; grid-auto-rows: min-content;
  gap: var(--space-3) 32px; min-width: 0;
  padding: 28px 0 28px 64px;
}
.step + .step { border-top: 1px solid var(--rule-default); }
.step:first-child { padding-top: 0; }
.step:last-child { padding-bottom: 0; }
.step > * { grid-column: 1; margin: 0; }
.step > h3 { grid-column: 1 / -1; }
.step > p { text-wrap: pretty; }
.step > pre.code, .step > .platform-links { grid-column: 2; grid-row: 2 / span 2; align-self: center; }
.steps pre.code { font-size: 14px; }
/* beside the text, the longest command fits at 13px */
@media (min-width: 1280px) { .steps pre.code { font-size: 13px; } }
.step .numeral, .page-section > h2 .numeral { color: var(--text-muted); font-variant-caps: all-small-caps; letter-spacing: 0.06em; }
/* the numeral shares the heading's baseline */
.step .numeral { position: absolute; left: 0; width: 48px; margin-top: -3px; text-align: right; font-size: 28px; line-height: 1; letter-spacing: 0; color: var(--mark); }
/* below the width where the longest command fits beside its text, the command goes under it */
@media (max-width: 1279px) {
  .step { grid-template-columns: 1fr; }
  .step > pre.code, .step > .platform-links { grid-column: 1; grid-row: auto; }
}
@media (max-width: 639px) {
  .step { padding-left: 44px; }
  .step .numeral { width: 32px; margin-top: -5px; font-size: 26px; }
  .steps pre.code { font-size: 12.5px; }
}
.platform-links { display: flex; flex-wrap: wrap; gap: 8px; }
.platform-links span { color: var(--text-muted); }

.chapter-row { display: grid; grid-template-columns: 440fr 600fr; gap: var(--space-7); align-items: center; }
.chapter-row .media { margin: 0; }
.chapter-row.flip { grid-template-columns: 600fr 440fr; }
.chapter-row.flip .media { order: -1; }
.chapter-row .media img { width: 100%; height: auto; outline: 1px solid var(--rule-default); }
.chapter-row .copy, .card, .split .copy { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }

/* a stand-in for a picture still to be made */
.placeholder {
  display: flex; flex-direction: column; justify-content: center; gap: 6px;
  min-height: 180px; padding: var(--space-5);
  background: var(--surface-panel); border: 1px dashed var(--rule-default);
}
.placeholder.tall { min-height: 400px; }
.chapter .placeholder .label { font: 700 var(--size-h3)/1.3 var(--font-display); color: var(--text-muted); }
.chapter .placeholder .note { font-size: var(--size-caption); line-height: 1.5; color: var(--text-muted); }

/* Diagrams: inline SVG drawn at the page's width, coloured by the theme */
.diagram { margin: 0; }
.diagram svg { display: block; width: 100%; height: auto; }
.diagram .dg-box { fill: var(--surface-panel); stroke: var(--rule-default); }
.diagram .dg-bench { fill: none; stroke: var(--rule-strong); stroke-dasharray: 6 5; }
.diagram .dg-sandbox { fill: var(--surface-panel); stroke: var(--gilt-text); stroke-width: 2; }
.diagram .dg-script { fill: var(--surface-page); stroke: var(--rule-default); }
.diagram .dg-chip { fill: var(--surface-code); }
.diagram .dg-line { fill: none; stroke: var(--text-muted); stroke-width: 1.5; }
.diagram .dg-readonly { stroke-dasharray: 6 5; }
.diagram .dg-agent { stroke: var(--gilt-text); }
.diagram .dg-head-muted { fill: none; stroke: var(--text-muted); stroke-width: 1.5; }
.diagram .dg-head-gilt { fill: none; stroke: var(--gilt-text); stroke-width: 1.5; }
.diagram text { font-family: var(--font-body); font-size: 14px; fill: var(--text-secondary); }
.diagram .dg-head { font-family: var(--font-display); font-weight: 700; font-size: 16px; fill: var(--text-primary); }
.diagram .dg-caps { font-family: var(--font-display); font-weight: 700; font-size: var(--size-caps); letter-spacing: 1.5px; fill: var(--gilt-text); }
.diagram .dg-mono { font-family: var(--font-mono); font-size: 13px; fill: var(--text-primary); }
.diagram .dg-note { font-size: 13px; font-style: italic; fill: var(--text-muted); }
.diagram .dg-gilt { fill: var(--gilt-text); }

.split { display: grid; grid-template-columns: 632fr 400fr; gap: 56px; align-items: center; }
.split .copy .bullets li { color: var(--text-secondary); }

/* Tabs. Without scripts every panel shows under its own heading. The rule under
   the tabs is a shadow, so a row that scrolls does not clip the chosen tab's mark. */
.tab-list { display: none; gap: var(--space-5); box-shadow: inset 0 -1px var(--rule-hairline); }
[data-theme] .tab-list { display: flex; }
.tab-list button {
  flex: none; padding: 4px 0 8px; border: 0; border-bottom: 2px solid transparent; background: none;
  font: var(--size-small)/1.5 var(--font-body); color: var(--text-muted); cursor: pointer;
}
.tab-list button:hover { color: var(--text-primary); }
.tab-list button[aria-selected="true"] { color: var(--text-primary); border-bottom-color: var(--mark); }
.tabs { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.tab-panel { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.tab-panel h3 { font-size: var(--size-small); font-family: var(--font-body); font-weight: 600; color: var(--text-muted); }
[data-theme] .tab-panel h3 { display: none; }
.tab-panel[hidden] { display: none; }

.close { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); text-align: center; }
/* the page ends as the hero begins: the button and release line under the lead */
.closing { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-5); }

/* a diamond rule between the home chapters, halving the gap on each side */
.section-rule { margin-block: calc(var(--space-7) - var(--space-9)); }

@media (max-width: 1023px) {
  .cards, .chapter-row, .chapter-row.flip, .split { grid-template-columns: 1fr; gap: var(--space-7); }
  .chapter-row.flip .media { order: 0; }
  .card { max-width: var(--readable); }
  .split .copy { order: -1; }
}

@media (max-width: 639px) {
  [data-theme] .tab-list { overflow-x: auto; scrollbar-width: none; }
}

/* Inner pages */

main.page { padding-top: 64px; padding-bottom: var(--space-9); }
main.page p { max-width: var(--readable); }
main.page .eyebrow { color: var(--gilt-text); margin-bottom: var(--space-4); }
main.page h2 { margin-bottom: var(--space-3); }
main.page .small { margin-top: var(--space-4); }
main.page code { font-family: var(--font-mono); font-size: 0.9em; }

.page-head { padding-bottom: var(--space-7); }
.page-head h1 { margin-bottom: var(--space-5); }
.page-head .actions { display: flex; flex-wrap: wrap; gap: var(--space-5); margin-top: var(--space-7); }

.page-section, .release { padding: var(--space-7) 0; }
/* where two plain blocks meet, one gap between them rather than both paddings */
.page-head + .page-section:not(.tinted),
.page-section:not(.tinted) + .page-section:not(.tinted) { padding-top: 0; }
.page-section .actions { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-5); }
.page-section h3, .release h3 { margin: var(--space-5) 0 var(--space-3); }
.page-section figure.media { display: flex; flex-direction: column; gap: var(--space-3); max-width: 520px; margin: var(--space-5) 0 0; }
.page-section .media video { width: 100%; height: auto; outline: 1px solid var(--rule-default); }
.page-section .media figcaption { font-size: var(--size-caption); line-height: 1.5; color: var(--text-muted); }

table.files { width: 100%; margin-top: var(--space-5); border-collapse: collapse; table-layout: fixed; }
table.files th {
  text-align: left; padding: 12px 0;
  font: 700 var(--size-caps)/1.5 var(--font-display); letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--gilt-text);
  border-top: 1px solid var(--rule-default); border-bottom: 1px solid var(--rule-default);
}
table.files td { padding: 10px 16px 10px 0; border-bottom: 1px solid var(--rule-hairline); vertical-align: baseline; }
table.files td:first-child { width: 20%; }
table.files td:nth-child(2) { width: 30%; }
table.files code { color: var(--text-muted); }
/* A hash keeps one line and is cut short where it does not fit; one click
   selects all of it, and Copy (shown when scripts run) copies all of it. */
.hash-copy { display: flex; align-items: baseline; gap: 10px; min-width: 0; max-width: 100%; }
main.page code.hash {
  min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font-size: 12px; user-select: all;
}
button.copy {
  display: none; flex: none; padding: 1px 8px; border: 1px solid var(--rule-default); border-radius: var(--radius-sm);
  background: none; color: var(--text-secondary); font: 12px/1.6 var(--font-body); cursor: pointer;
}
[data-theme] button.copy { display: inline-block; }
button.copy:hover { border-color: var(--rule-strong); color: var(--text-primary); }
a.code-link { font-family: var(--font-mono); font-size: 14px; }

pre.code {
  margin: var(--space-5) 0 0; padding: 20px 24px; overflow-x: auto;
  font: 15px/1.7 var(--font-mono);
  background: var(--surface-code); border: 1px solid var(--rule-hairline); border-radius: var(--radius-sm); color: var(--text-primary);
}
pre code { font-size: inherit !important; }
main.page pre.code + p, main.page pre.code + pre.code { margin-top: var(--space-4); }

ul.bullets { margin: var(--space-5) 0 0; padding: 0; list-style: none; max-width: var(--readable); }
ul.bullets li { position: relative; padding-left: 28px; margin-bottom: var(--space-3); }
ul.bullets li::before {
  content: ""; position: absolute; left: 4px; top: 0.7em; width: 6px; height: 6px; background: var(--ornament);
}

/* Docs pages: a sidebar of the docs beside the page, stacked on narrow screens. */

.docs-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 56px; }
.docs-layout article { min-width: 0; }
.docs-nav {
  position: sticky; top: var(--space-5); align-self: start;
  padding-right: var(--space-5); border-right: 1px solid var(--rule-default);
}
.docs-nav .caps { color: var(--gilt-text); margin-bottom: var(--space-4); }
.docs-nav ul { margin: 0; padding: 0; list-style: none; }
.docs-nav li { margin-bottom: 10px; }
.docs-nav a {
  display: block; padding-left: 12px; border-left: 3px solid transparent;
  color: var(--link-base); text-decoration: none;
}
.docs-nav a:hover { color: var(--link-hover); }
.docs-nav a[aria-current="page"] { border-left-color: var(--ornament); color: var(--text-primary); }

table.ref { width: 100%; margin-top: var(--space-5); border-collapse: collapse; }
table.ref th {
  text-align: left; padding: 12px 16px 12px 0;
  font: 700 var(--size-caps)/1.5 var(--font-display); letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--gilt-text);
  border-top: 1px solid var(--rule-default); border-bottom: 1px solid var(--rule-default);
}
table.ref td { padding: 10px 16px 10px 0; border-bottom: 1px solid var(--rule-hairline); vertical-align: baseline; }
table.ref td:first-child { width: 40%; }

@media (max-width: 767px) {
  .docs-layout { grid-template-columns: 1fr; gap: var(--space-5); }
  .docs-nav { position: static; padding: 0 0 var(--space-4); border-right: 0; border-bottom: 1px solid var(--rule-default); }
  .docs-nav ul { display: flex; flex-wrap: wrap; gap: 8px 20px; }
  .docs-nav li { margin: 0; }
  .docs-nav a { padding-left: 0; border-left: 0; }
  .docs-nav a[aria-current="page"] { text-decoration: underline; }
}

/* Download pages */

.os-switcher { display: flex; gap: 32px; margin-top: var(--space-4); border-bottom: 1px solid var(--rule-default); }
.os-switcher a {
  margin-bottom: -1px; padding: 4px 0 8px; border-bottom: 2px solid transparent;
  color: var(--text-secondary); font-size: var(--size-small); text-decoration: none;
}
.os-switcher a:hover { color: var(--text-primary); }
.os-switcher a[aria-current="page"] { color: var(--text-primary); border-bottom-color: var(--mark); }
.os-switcher + h1, aside.notice + h1 { margin-top: var(--space-7); }

aside.notice { margin-top: var(--space-5); padding: 18px 22px; border-left: 5px solid; }
aside.notice p { margin: 0; color: var(--text-secondary); }
aside.notice .caps { margin-bottom: 8px; }
aside.notice.note { background: var(--tint-note); border-color: var(--status-note); }
aside.notice.note .caps { color: var(--label-note); }
aside.notice.good { background: var(--tint-good); border-color: var(--status-good); }
aside.notice.good .caps { color: var(--label-good); }

.platforms { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); margin-top: var(--space-5); }
.platform {
  display: flex; flex-direction: column; gap: var(--space-3); padding: 24px;
  border: 1px solid var(--rule-default); border-radius: 6px; color: var(--text-secondary); text-decoration: none;
}
.platform h3, .platform p, main.page .platform .small { margin: 0; }
.platform .tag { display: none; color: var(--label-brand); }
.platform .more { margin-top: auto; color: var(--link-base); }
.platform:hover { border-color: var(--rule-strong); }
.platform:hover .more { color: var(--link-hover); }
.platform.yours { border-color: var(--mark); }
.platform.yours .tag { display: block; }
p.links { display: flex; flex-wrap: wrap; gap: var(--space-5) 32px; }
main.page p.hash-line { margin-top: var(--space-3); color: var(--text-muted); }
p.hash-line .caps { display: block; color: var(--text-muted); }

.release-head { display: flex; align-items: baseline; gap: var(--space-5); }
.release-head h2 { margin: 0; }
.release-head .badge { color: var(--gilt-text); }
.release-head .date { margin-left: auto; color: var(--text-muted); font-family: var(--font-mono); font-size: 14px; }
.release-head + p, .release p.links { margin-top: var(--space-5); }

@media (max-width: 767px) {
  .platforms { grid-template-columns: 1fr; }
}

@media (max-width: 639px) {
  table.files thead { display: none; }
  table.files tr { display: block; padding: 12px 0; border-bottom: 1px solid var(--rule-hairline); }
  table.files td { display: block; width: auto !important; padding: 2px 0; border: 0; }
  a.code-link { font-size: 14px; word-break: break-all; }
}
table.files .kind { color: var(--text-muted); font-size: var(--size-small); }
main.page p + p { margin-top: var(--space-3); }
@media (max-width: 639px) {
  pre.code { font-size: 12.5px; padding: 16px; }
}