/* ===== Tokens ===== */

/* Boska (Indian Type Foundry, ITF Free Font License: fonts/boska-FFL.txt, self-hosting allowed, files used as
   they come, never subset or converted): a narrow, high-contrast display serif, variable in weight. */
@font-face { font-family: "Boska"; src: url(fonts/boska.woff2) format("woff2"); font-style: normal; font-weight: 200 900; font-display: swap; }
@font-face { font-family: "Boska"; src: url(fonts/boska-italic.woff2) format("woff2"); font-style: italic; font-weight: 200 900; font-display: swap; }
@font-face { font-family: "Geist"; src: url(fonts/geist.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url(fonts/geist-mono.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
/* A stand-in while Geist loads, so the swap doesn't move the page: Arial scaled to Geist's average width and line
   box (read from the font's own tables). It covers only the characters Geist has, so anything else falls back as
   it did before. */
@font-face { font-family: "Geist Fallback"; src: local("Arial"), local("ArialMT"); font-weight: 100 500;
  size-adjust: 105.85%; ascent-override: 94.94%; descent-override: 27.87%; line-gap-override: 0%;
  unicode-range: U+20-7E, U+A0-AC, U+AE-FF, U+102, U+131, U+152-153, U+2BC, U+2C6, U+2DA, U+2DC, U+300-301, U+303-304, U+308-309, U+323, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2032-2033, U+2039-203A, U+2044, U+20AC, U+2122, U+2191, U+2193, U+2212; }
@font-face { font-family: "Geist Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 600 900;
  size-adjust: 102.26%; ascent-override: 98.28%; descent-override: 28.85%; line-gap-override: 0%;
  unicode-range: U+20-7E, U+A0-AC, U+AE-FF, U+102, U+131, U+152-153, U+2BC, U+2C6, U+2DA, U+2DC, U+300-301, U+303-304, U+308-309, U+323, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2032-2033, U+2039-203A, U+2044, U+20AC, U+2122, U+2191, U+2193, U+2212; }

/* The system: an 8px baseline, and a type scale in steps of the golden ratio (20 × 1.618ⁿ),
   each size on a line height that is a multiple of 8. Spacing follows the same steps, rounded
   to the baseline. Rules are drawn as inset shadows, so they never push text off the grid.
   Type is fluid: each size grows with the window from its phone value (a 390px window) to its
   desktop value (1280px), in rem so it also follows the reader's own text size. At both ends
   sizes and line heights are exactly on the grid; in between, within a pixel or two of it. */
:root {
  --b: 8px;
  --t1: 0.75rem; --l1: 1rem;
  --t2: clamp(1.125rem, 1.0702rem + 0.2247vw, 1.25rem); --l2: 2rem;
  --t3: clamp(1.5rem, 1.2809rem + 0.8989vw, 2rem); --l3: clamp(2rem, 1.7809rem + 0.8989vw, 2.5rem);
  --t4: clamp(2rem, 1.4522rem + 2.2472vw, 3.25rem); --l4: clamp(2.5rem, 2.0618rem + 1.7978vw, 3.5rem);
  --t5: clamp(2.5rem, 1.2949rem + 4.9438vw, 5.25rem); --l5: clamp(3rem, 1.9045rem + 4.4944vw, 5.5rem);
  --t6: clamp(3.25rem, 1.2781rem + 8.0899vw, 7.75rem); --l6: clamp(3.5rem, 1.7472rem + 7.1910vw, 7.5rem);
  --t7: clamp(5.25rem, 2.0730rem + 13.0337vw, 12.5rem); --l7: clamp(5.5rem, 2.4326rem + 12.5843vw, 12.5rem);
  --t8: clamp(8.5rem, 3.3511rem + 21.1236vw, 20.25rem); --l8: clamp(8.5rem, 3.6798rem + 19.7753vw, 19.5rem);
  /* Boska is a display face with fine hairlines: small sizes take a little more weight to read as firmly as the big
     ones, which keep its regular 400. Chinese, Japanese and Korean keep their own weights (see Languages). */
  --w3: 500; --w4: 450; --w5: 420;
  --g1: 8px; --g2: 16px; --g3: 24px; --g4: 40px; --g5: 64px; --g6: 104px; --g7: 168px; --g8: 272px;
  --phi: 1.618fr 1fr;      /* the golden split, wide first */
  --ihp: 1fr 1.618fr;      /* and narrow first */
  --pad: 40px;

  --bg: #F2EEE6; --fg: #0E0E0C; --dim: #625E57;
  --hair: color-mix(in srgb, var(--fg) 16%, transparent);
  --working: #FEBC2E; --waiting: #FF5F57; --done: #28C840;
  --serif: "Boska", "Times New Roman", serif;
  --sans: "Geist", "Geist Fallback", -apple-system, system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, Menlo, monospace;
}
@media (max-width: 1180px) {
  :root { --pad: 24px; }
}
@media (max-width: 720px) {
  :root { --g7: 104px; --g8: 168px; --pad: 16px; }
}

/* ===== Base ===== */

* { box-sizing: border-box; }
html { background: var(--bg); color: var(--fg); -webkit-font-smoothing: antialiased; transition: background-color 1.2s ease, color 1.2s ease; }
body { margin: 0; font: 400 var(--t2)/var(--l2) var(--sans); }
p, h1, h2, h3, ul, ol, dl, dd, pre { margin: 0; }
a { color: inherit; }
em { font-family: var(--serif); font-style: italic; font-weight: 400; }
code, kbd { font-family: var(--mono); font-size: .86em; }
.dim { color: var(--dim); }
.rule { box-shadow: inset 0 1px 0 var(--hair); }
/* Long paths in running text (~/.config/opencode/plugins/) may break anywhere rather than spill. */
main p code, main li code, main dd code { overflow-wrap: anywhere; }

/* Type styles, one per step. */
.x1 { font: 500 var(--t1)/var(--l1) var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.x3 { font: var(--w3) var(--t3)/var(--l3) var(--serif); letter-spacing: -0.01em; }
.x4 { font: var(--w4) var(--t4)/var(--l4) var(--serif); letter-spacing: -0.02em; }
.x5 { font: var(--w5) var(--t5)/var(--l5) var(--serif); letter-spacing: -0.03em; }
.x6 { font: 400 var(--t6)/var(--l6) var(--serif); letter-spacing: -0.035em; }
.x7 { font: 400 var(--t7)/var(--l7) var(--serif); letter-spacing: -0.04em; }
.x8 { font: 400 var(--t8)/var(--l8) var(--serif); letter-spacing: -0.05em; }
.x3 em, .x4 em, .x5 em, .x6 em, .x7 em { color: var(--dim); }
.c { font: 400 0.9375rem/1.5rem var(--mono); color: var(--dim); }
.c::before { content: "// "; }

/* Layout */
section { padding: var(--g7) var(--pad) 0; }
.kick { margin-bottom: var(--g4); display: flex; gap: var(--g2); }
.kick b { font-weight: 500; color: var(--fg); }
.golden { display: grid; grid-template-columns: var(--phi); column-gap: var(--g5); }
.golden.flip { grid-template-columns: var(--ihp); }
.measure { max-width: 38ch; }

/* The grid itself, for anyone who wants to check: press G. */
html.grid body::after { content: ""; position: fixed; inset: 0; z-index: 20; pointer-events: none;
  background:
    linear-gradient(to right, transparent calc(var(--pad) - 1px), rgba(255, 95, 87, .5) calc(var(--pad) - 1px), rgba(255, 95, 87, .5) var(--pad), transparent var(--pad)),
    linear-gradient(to left, transparent calc(var(--pad) - 1px), rgba(255, 95, 87, .5) calc(var(--pad) - 1px), rgba(255, 95, 87, .5) var(--pad), transparent var(--pad)),
    linear-gradient(to right, transparent calc(var(--pad) + (100% - 2 * var(--pad) - var(--g5)) * .618 - 1px), rgba(40, 200, 64, .6) calc(var(--pad) + (100% - 2 * var(--pad) - var(--g5)) * .618 - 1px), rgba(40, 200, 64, .6) calc(var(--pad) + (100% - 2 * var(--pad) - var(--g5)) * .618), transparent calc(var(--pad) + (100% - 2 * var(--pad) - var(--g5)) * .618)),
    repeating-linear-gradient(to bottom, rgba(80, 140, 255, .22) 0 1px, transparent 1px 8px);
  background-attachment: fixed; }

/* ===== Components ===== */

.button { display: inline-flex; align-items: center; height: 56px; padding: 0 var(--g3); font: 600 1.125rem/1 var(--sans); text-decoration: none; border-radius: 28px; background: var(--fg); color: var(--bg); transition: background-color 1.2s, color 1.2s; }
.button.outline { background: none; color: var(--fg); box-shadow: inset 0 0 0 1.5px var(--fg); }

/* The status drop, as in the app. */
.drop { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--working)); flex: none;
  animation: breathe var(--period, 4s) infinite cubic-bezier(.3, 0, .4, 1); }
.drop.still { animation: none; }
.drop.red { --c: var(--waiting); --period: 2.35s; }
.drop.green { --c: var(--done); animation: none; }
@keyframes breathe {
  0%, 100% { transform: scale(.88); box-shadow: 0 0 2px 0 color-mix(in srgb, var(--c) 40%, transparent); }
  35% { transform: scale(1); box-shadow: 0 0 6px 1px color-mix(in srgb, var(--c) 55%, transparent); }
}

/* The app's panel, as an image of it: its own sizes, not the page's grid. */
.panel { --fg: #F2EEE6; --dim: #8F8A80; color: var(--fg); background: #000; border-radius: 24px; padding: 16px; font: 0.875rem/1.45 var(--sans); }
.row { border-radius: 12px; padding: 11px 13px; display: grid; grid-template-columns: 22px 1fr auto; gap: 2px 11px; align-items: start; }
.row.waiting { background: #2A1514; }
.row img { width: 20px; height: 20px; margin-top: 2px; }
.row b { font-weight: 600; }
.row .head b, .row .meta { display: block; }
.row .meta { color: var(--dim); font-size: 0.78125rem; }
.row .machine { white-space: nowrap; }
.row .machine .icon { width: 0.875em; height: 0.875em; margin-right: 3px; vertical-align: -0.1em; }
.row .msg { grid-column: 2 / 4; }
.row .drop { margin-top: 7px; width: 7px; height: 7px; }
/* The list's header: how many need you in red, else Most recent. */
.panel .group { margin: 0 4px 6px; font-size: 0.75rem; font-weight: 600; color: var(--dim); }
.panel .group.hot { color: var(--waiting); }
/* The step bar under a row's message: done steps full, the current one part way. */
.stepbar { grid-column: 2 / 4; display: flex; gap: 3px; margin-top: 6px; }
.stepbar i { flex: 1; height: 3px; border-radius: 2px; background: rgba(242, 238, 230, .15); }
.stepbar i.done { background: rgba(242, 238, 230, .6); }
.stepbar i.on { background: linear-gradient(90deg, rgba(242, 238, 230, .6) 40%, rgba(242, 238, 230, .15) 40%); }
/* A request's last line: the hand-back and the time left, then the buttons. */
.actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.back-to { display: flex; align-items: center; gap: 7px; color: var(--dim); font-size: 0.75rem; font-variant-numeric: tabular-nums; }
.back-to .icon { width: 14px; height: 14px; }
.back-to .timer { opacity: .7; }
.actions:has(.buttons[hidden]) .back-to { visibility: hidden; }
.ask:has(.q) .actions { flex-direction: column-reverse; align-items: flex-start; }
.ask { margin: 8px 0 0 26px; padding: 10px; border-radius: 12px; background: #141414; }
.ask pre { margin: 0 0 8px; padding: 8px 10px; border-radius: 8px; background: #1F1F1F; font: 0.8125rem/1.5 var(--mono); white-space: pre-wrap; }
.buttons { display: flex; justify-content: flex-end; gap: 7px; flex-wrap: wrap; }
.pill { font: 600 0.84375rem var(--sans); border-radius: 99px; padding: 6px 15px; border: 1.5px solid transparent; background: #2C2C2C; color: #F2EEE6; cursor: pointer; }
.pill.primary { background: #E8E6E1; color: #111; }
.pill.outline { background: transparent; border-color: #555; }
.pill:disabled { opacity: .35; cursor: default; }
.panel .caption { font: 0.75rem/1rem var(--mono); color: #8F8A80; margin: 12px 4px 0; min-height: 16px; }
/* The key each button answers to on the page: as in the app, shown once the keyboard is in use (site.js). */
.pill kbd { display: none; margin-left: 5px; font-size: 0.6875rem; opacity: .5; }
#demo.keys .pill kbd { display: inline; }
.row { transition: background-color .3s; }
.ask .q { margin: 0 0 8px; padding: 2px 4px; }
.ask:has(.q) .buttons { justify-content: flex-start; }
.buttons[hidden] { display: none; }
.ask .said { text-align: right; color: var(--dim); font-size: 0.8125rem; padding: 4px 4px 0; }
.reason input { width: 100%; padding: 6px 12px; border: 1.5px solid #555; border-radius: 99px; background: transparent; color: var(--fg); font-size: 0.84375rem; }
.reason input::placeholder { color: var(--dim); }
/* The edit's diff: lines out in red, lines in in green, each on a faint band of its colour. */
.diff > span { display: block; padding: 0 6px; border-radius: 4px; }
.diff > .file { color: var(--dim); padding-bottom: 4px; }
.diff > .add { background: rgba(40, 200, 64, .08); }
.diff > .del { background: rgba(255, 95, 87, .08); }
/* With the script, the three requests share one place, so the panel keeps the tallest one's height. */
#demo.live { display: grid; }
#demo.live .req { grid-area: 1 / 1; }
#demo.live .req[hidden] { display: block; visibility: hidden; }
#demo.live .caption { grid-area: 2 / 1; }

/* The floating menu. Full at the top and when scrolling up; folded to the current menu item
   when scrolling down; a list on phones. Sizes on the baseline: 56 open, 40 folded. */
.menu {
  --spring: cubic-bezier(.34, 1.32, .5, 1);
  --fg: #F2EEE6; --dim: #8F8A80; color: var(--fg);
  position: fixed; z-index: 10; top: var(--g2); left: 50%; transform: translateX(-50%);
  width: 160px; height: 40px; background: #000; border-radius: 28px; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 8px 32px rgba(0,0,0,.18);
  transition: width .55s var(--spring), height .55s var(--spring), border-radius .55s var(--spring);
}
.menu[data-mode="menu"] { border-radius: 24px; }
.menu .view { position: absolute; top: 0; left: 0; width: max-content; opacity: 0; pointer-events: none;
  filter: blur(6px); transform: scale(.94); transform-origin: 50% 0; transition: opacity .25s, filter .3s, transform .45s var(--spring); }
.menu .view.on { opacity: 1; pointer-events: auto; filter: none; transform: none; transition-delay: .08s; }
.menu canvas.mark { width: 32px; height: 32px; display: block; }
.menu a { text-decoration: none; color: inherit; }
.v-full { display: flex; align-items: center; height: 56px; padding: 0 var(--g1); font: 500 0.9375rem/1 var(--sans); }
.v-full .logo { display: flex; align-items: center; gap: var(--g1); padding: 0 var(--g2) 0 0; font: var(--w3) 1.5rem/1 var(--serif); }
.v-full .link { position: relative; z-index: 1; padding: 0 var(--g2); line-height: 40px; color: var(--dim); transition: color .2s; }
.v-full .link.active, .v-full .link:hover { color: var(--fg); }
.v-full .hl { position: absolute; top: 8px; height: 40px; left: 0; width: 0; border-radius: 20px; background: #1E1E1C; opacity: 0;
  transition: left .5s var(--spring), width .5s var(--spring), opacity .2s; }
.v-full .dl { margin-left: var(--g1); background: #F2EEE6; color: #0E0E0C; font-weight: 600; line-height: 40px; padding: 0 var(--g2); border-radius: 20px; }
.v-compact { display: flex; align-items: center; height: 40px; padding: 0 var(--g3) 0 var(--g1); gap: var(--g1); }
.v-compact canvas.mark { width: 24px; height: 24px; }
.v-compact .now { font: 500 0.75rem/1rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.v-compact .burger { display: none; width: 18px; height: 18px; color: var(--dim); margin-left: auto; }
@media (max-width: 860px) { .v-compact .burger { display: block; } .v-compact { gap: var(--g2); } }
.menu .v-menu { width: min(344px, 92vw); padding: var(--g2) var(--g2) var(--g3); display: flex; flex-direction: column; }
.v-menu a.link { font: var(--w4) 2.5rem/3rem var(--serif); padding: 0 var(--g1); color: var(--dim); }
.v-menu a.link.active { color: var(--fg); font-style: italic; }
.v-menu .dl { margin-top: var(--g2); text-align: center; background: #F2EEE6; color: #0E0E0C; font: 600 1rem/3.5rem var(--sans); border-radius: 28px; }
.menu .tap { display: none; position: absolute; inset: 0; background: none; border: 0; cursor: pointer; }
.menu[data-mode="compact"] .tap { display: block; }

/* The language switcher: a button in the open pill, and the pill reshaped into the list. */
.v-full .lang-button { margin-left: var(--g1); height: 40px; padding: 0 var(--g2); font: 500 0.9375rem/1 var(--sans); color: var(--dim); background: none; border: 0; border-radius: 20px; box-shadow: inset 0 0 0 1px #2E2E2B; cursor: pointer; }
.v-full .lang-button:hover, .v-full .lang-button[aria-expanded="true"] { color: var(--fg); }
.lang-button { display: inline-flex; align-items: center; gap: 6px; }
.lang-button .icon { width: 16px; height: 16px; }
.menu .v-lang { width: 240px; padding: var(--g2) var(--g2) var(--g3); display: flex; flex-direction: column; }
.v-lang .top { font: 500 0.75rem/1rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); padding: 0 var(--g1) var(--g2); }
.v-lang .lang-link { font: var(--w3) 1.5rem/2.5rem var(--serif); padding: 0 var(--g1); border-radius: 12px; color: var(--dim); }
.v-lang .lang-link:hover { color: var(--fg); background: #1E1E1C; }
.v-lang .lang-link[aria-current] { color: var(--fg); }
.v-lang .lang-link[aria-current]::after { content: " ●"; font-size: 0.75rem; line-height: 0; vertical-align: middle; color: var(--fg); }
/* The phone menu's top row: the mark, the wordmark and the close button. */
.v-menu .top { display: flex; align-items: center; gap: var(--g1); font: var(--w3) 1.5rem/2rem var(--serif); padding: 0 var(--g1) var(--g1); }
.v-menu .top canvas.mark { width: 24px; height: 24px; }
.v-menu .top > a { font: var(--w3) 1.5rem/2rem var(--serif); color: var(--fg); }
.v-menu .close { margin-left: auto; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--dim); cursor: pointer; }
.v-menu .close:hover, .v-menu .close:focus-visible { color: var(--fg); }
.v-menu .close .icon { width: 1.25rem; height: 1.25rem; transition: transform .24s ease-in-out; }
.v-menu .close.turning .icon { transform: rotate(90deg); }
/* The languages sit on their own line just above the download button, spread across the menu, each label whole.
   Each is 32px tall to look light; an invisible edge makes it a 44px target (and at least 44px wide). */
.v-menu .langs { display: flex; justify-content: space-between; margin-top: var(--g2); padding: 0 var(--g1); }
.v-menu .langs a { position: relative; font: 500 0.8125rem/2rem var(--sans); padding: 0 var(--g1); border-radius: 16px; color: var(--dim); white-space: nowrap; }
.v-menu .langs a::before { content: ""; position: absolute; inset: -6px min(0px, calc(50% - 22px)); }
.v-menu .langs a[aria-current] { color: var(--fg); box-shadow: inset 0 0 0 1px #3A3A36; }

/* Icons (Rune Icons, inlined by build.py): the text's colour, a stroke as light as the site's hairlines. */
.icon { width: 1em; height: 1em; flex: none; stroke-width: 1.5; vertical-align: -.125em; }
.button .icon, .entry .get .icon { width: 18px; height: 18px; margin-right: 8px; stroke-width: 1.75; }
.entry .get .icon { width: 16px; height: 16px; }
/* The EU's twelve stars before "Made in the EU", the height of a capital, in the text colour. */
.icon.eu { width: 1.15em; height: 1.15em; vertical-align: -0.2em; margin-right: 0.3em; }

/* Copy buttons: a 32px square to look at, a 44px target (the invisible edge); the copy icon turns to a tick. */
button.copy { position: relative; flex: none; width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 8px; background: none; color: var(--dim); cursor: pointer; }
button.copy::before { content: ""; position: absolute; inset: -6px; }
button.copy:hover { color: var(--fg); background: rgba(255, 255, 255, .08); }
button.copy .icon { grid-area: 1 / 1; width: 16px; height: 16px; transition: opacity .2s, transform .25s; }
button.copy .tick { opacity: 0; transform: scale(.6); color: var(--done); stroke-width: 2; }
button.copy.done .icon:first-child { opacity: 0; transform: scale(.6); }
button.copy.done .tick { opacity: 1; transform: none; }

/* Under each poetic heading, a plain line saying what the section is about, in the words people search with. In a
   section it's part of the h2; a page's h1 keeps only its headline, and the line follows it as a paragraph. Set as
   quiet body text, in every language. */
:is(h1, h2) .sub, .hero p.sub { display: block; max-width: 44ch; margin-top: var(--g3); font: 400 var(--t2)/var(--l2) var(--sans); letter-spacing: 0;
  color: var(--dim); font-feature-settings: normal; hyphens: manual; -webkit-hyphens: manual; }
h2 .sub.first { margin: 0 auto var(--g3); }
.hero p.sub { margin-left: calc(var(--t7) * .04); max-width: 56ch; }
.hero.agent p.sub { margin-bottom: var(--g5); }
.hero.agent p.sub { margin-bottom: var(--g5); }

/* Accessibility. The focus ring follows the element's own corners: the 4px fallback is in :where(), which counts for
   nothing, so round buttons, pills and the skip link keep theirs. */
/* Words only screen readers get, such as a drop's state, or "(opens in a new tab)" after links that leave the site. */
.sr, .vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip { position: fixed; z-index: 30; top: var(--g2); left: var(--g2); padding: 0 var(--g2); line-height: 40px; background: var(--fg); color: var(--bg); border-radius: 20px; transform: translateY(-200%); }
.skip:focus { transform: none; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
:where(:focus-visible) { border-radius: 4px; }
.menu :focus-visible { outline-color: #F2EEE6; }

/* ===== Pages ===== */

/* Hero: the headline ends at the golden section of the screen. */
.hero { min-height: 100svh; padding: var(--g7) var(--pad) 0; display: grid; grid-template-rows: 1.618fr 1fr; }
.hero h1 { align-self: end; margin-left: -.04em; }
/* Under the headline's line, in its column: the call to action, then the agents it works with, quietly, at the bottom. */
.hero .lead { display: flex; flex-direction: column; justify-content: space-between; gap: var(--g5); padding: var(--g4) 0; }
/* Its button big enough to hold its own between the lines, the line under it left-aligned with the text. */
.hero .cta { display: grid; gap: var(--g2); justify-items: start; justify-self: start; }
/* The home page's opening is centred: one headline, one paragraph, the button and the agents under it, balanced on
   the page's axis. Agent pages keep their left-aligned hero. */
.hero:not(.agent) { text-align: center; }
.hero:not(.agent) h1 { margin-left: 0; }
.hero:not(.agent) p.sub { margin-left: auto; margin-right: auto; }
.hero:not(.agent) .lead { align-items: center; }
.hero:not(.agent) .cta { justify-items: center; justify-self: center; }
.hero:not(.agent) .works, .hero:not(.agent) .works ul { justify-content: center; }
.hero .cta .button, .price .ctas .button, .teams .plan .button { height: 64px; padding: 0 var(--g5); font-size: 1.25rem; border-radius: 32px; }
.works { display: flex; flex-wrap: wrap; align-items: center; gap: var(--g2) var(--g3); }
.works ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--g2) var(--g3); }
.works img { display: block; width: 24px; height: 24px; filter: brightness(0); opacity: .55; transition: opacity .2s; }
.works a:hover img { opacity: 1; }
.works > a { text-decoration: none; }
.works > a:hover { color: var(--fg); }
/* On a phone every button is the big one and spans its column, one under the other, any line with it centred. */
@media (max-width: 720px) {
  .hero .cta { justify-items: stretch; justify-self: stretch; text-align: center; }
  .hero:not(.agent) .lead { align-items: stretch; }
  .hero:not(.agent) .cta { justify-self: stretch; }
  .button, .hero .cta .button, .price .ctas .button, .teams .plan .button {
    width: 100%; height: 64px; justify-content: center; padding: 0 var(--g3); font-size: 1.25rem; border-radius: 32px; white-space: nowrap; }
  .price .ctas, .doc-head .cta:has(.button + .button), .dl-price .ctas { flex-direction: column; align-items: stretch; }
}

/* The problem: lines light up as they reach you. */
.problem .line { color: color-mix(in srgb, var(--fg) 50%, var(--bg)); transition: color .6s; }
.problem .line.lit { color: var(--fg); }
.problem .line:last-of-type { font-style: italic; }
.problem .golden { margin-top: var(--g6); align-items: end; }
.sessions { list-style: none; padding: 0; }
.sessions li { display: grid; grid-template-columns: 1fr auto 8px; gap: var(--g2); align-items: center; height: 56px; box-shadow: inset 0 -1px 0 var(--hair); }
.sessions li:first-child { box-shadow: inset 0 1px 0 var(--hair), inset 0 -1px 0 var(--hair); }
.sessions b { font: var(--w3) var(--t3)/var(--l3) var(--serif); }
.sessions span:not(.drop) { font: 0.875rem/var(--l1) var(--mono); color: var(--dim); }
.sessions + .c { margin-top: var(--g2); }

/* Answer */
.answer .golden { align-items: start; margin-top: var(--g5); }
.answer .panel { position: sticky; top: var(--g6); }
.quad { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--g5); margin-top: var(--g6); }
.quad div { padding: var(--g2) 0 var(--g4); }
.quad h3 { margin-bottom: var(--g1); }
.quad p { color: var(--dim); }

/* Jump */
.jump .golden { align-items: end; margin-bottom: var(--g6); }
.wall { text-align: justify; text-align-last: justify; }
.wall span:nth-child(even) { font-style: italic; color: var(--dim); }
.jump .c { margin-top: var(--g4); }
/* The jump, shown: a small desktop, the notch at its top, three app windows under it. Everything in the windows is
   sized by the desktop's width (cqw), so on a phone the whole desktop shrinks as one picture. */
.desk { max-width: 880px; margin: 0 auto var(--g6); padding-bottom: var(--g2); border-radius: 20px; overflow: hidden;
  display: flex; flex-direction: column; align-items: center;
  background: linear-gradient(color-mix(in srgb, var(--fg) 4%, var(--bg)), color-mix(in srgb, var(--fg) 9%, var(--bg)));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg) 8%, transparent); }
.desk .notch { position: relative; z-index: 5; width: min(320px, 100%); padding: 4px 8px 10px; border-radius: 0 0 24px 24px; display: grid; gap: 2px; }
.notch button.row { width: 100%; padding: 9px 12px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; align-items: center; }
.notch button.row:hover { background: #141414; }
.notch button.row[aria-pressed="true"] { background: #1F1F1F; }
.notch button.row .drop { margin-top: 0; }
.notch button.row img { margin-top: 0; }
.apps { position: relative; width: 100%; aspect-ratio: 880 / 400; margin-top: -56px; container-type: inline-size; }
.app { position: absolute; display: flex; flex-direction: column; overflow: hidden; border-radius: 1.1cqw; transform-origin: 50% 30%;
  font: 1.36cqw/1.5 -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .1), 0 4px 16px rgba(0, 0, 0, .1);
  transition: transform .45s cubic-bezier(.34, 1.32, .5, 1), box-shadow .45s; }
.app.front { transform: scale(1.025); box-shadow: 0 0 0 1px rgba(0, 0, 0, .12), 0 20px 48px rgba(0, 0, 0, .26); }
.app pre { margin: 0; font: .92em/1.55 ui-monospace, "SF Mono", Menlo, monospace; white-space: pre; overflow: hidden; }
.app pre span { display: block; }
.app .bar { flex: none; display: flex; align-items: center; gap: .5em; padding: .6em .8em; }
.app .bar i { width: .8em; height: .8em; border-radius: 50%; background: color-mix(in srgb, currentColor 22%, transparent); }
/* As on a Mac, only the window in front has coloured traffic lights. */
.app.front .bar i:nth-child(1) { background: var(--waiting); }
.app.front .bar i:nth-child(2) { background: var(--working); }
.app.front .bar i:nth-child(3) { background: var(--done); }
.app .title { flex: 1; margin-right: 3.6em; text-align: center; opacity: .6; font-size: .92em; }
/* The spot Gnista lands on: chosen once it has been there, ringed and ticked for a moment when it lands. */
.app .spot { position: relative; transition: background-color .3s, box-shadow .3s; }
.app.lit .spot { box-shadow: inset 0 0 0 .14em var(--done); }
.app .tick { position: absolute; right: .4em; top: 50%; width: 1.3em; height: 1.3em; margin-top: -.65em; color: var(--done); opacity: 0;
  transform: scale(.6); transition: opacity .2s, transform .25s cubic-bezier(.34, 1.32, .5, 1); }
.app .tick .icon { display: block; width: 100%; height: 100%; stroke-width: 2.5; }
.app.lit .tick { opacity: 1; transform: none; }
/* Ghostty: three tabs, Gemini's in the middle. */
.ghostty { left: 2.5%; top: 20%; width: 43%; height: 60%; background: #1C1C1F; color: #E8E6E3; }
.ghostty .tabs { flex: none; display: flex; gap: 2px; padding: 0 .5em .45em; }
.ghostty .tabs > span { flex: 1; padding: .3em .5em; border-radius: .5em; text-align: center; color: #8C8A86; }
.ghostty .tabs .on, .ghostty.been .tabs .spot { background: #2E2E33; color: #E8E6E3; }
.ghostty.been .tabs .on { background: none; color: #8C8A86; }
.ghostty pre { flex: 1; padding: .6em 1em; background: #232327; }
.ghostty .now, .ghostty.been .was { display: none; }
.ghostty.been .now { display: block; }
/* VS Code: the editor, and the terminal panel under it. */
.vscode { left: 28%; top: 32%; width: 46%; height: 62%; background: #1F1F1F; color: #CCCCCC; }
.vscode .bar { background: #181818; }
.vscode .body { flex: 1; display: flex; min-height: 0; }
.vscode .side { flex: none; width: 2.8em; padding: .7em 0; display: grid; align-content: start; justify-items: center; gap: .8em; background: #181818; }
.vscode .side i { width: 1.1em; height: 1.1em; border-radius: .25em; background: #3C3C3C; }
.vscode .editor { flex: 1; padding: .6em 1em; }
.vscode .k { font-style: normal; color: #569CD6; }
.vscode .term { flex: none; border-top: 1px solid #2B2B2B; }
.vscode .term .head { padding: .4em 1em .2em; font-size: .78em; letter-spacing: .06em; color: #9D9D9D; }
.vscode .term pre { padding: .2em 1em .7em; }
.vscode.been .term { background: #262626; }
/* The Claude app: its chats at the left, the open one at the right. */
.claude { left: 55%; top: 16%; width: 42.5%; height: 62%; background: #FAF9F5; color: #2B2A27; }
.claude .bar { background: #F0EEE6; }
.claude .body { flex: 1; display: flex; min-height: 0; }
.claude .chats { flex: none; width: 40%; padding: .5em; display: grid; align-content: start; gap: .2em; background: #F0EEE6; }
.claude .chats > span { padding: .35em 2em .35em .6em; border-radius: .5em; font-size: .9em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #6B6862; }
.claude.been .chats .spot { background: #E3E0D5; color: #2B2A27; }
.claude .chat { flex: 1; padding: .8em 1em; display: grid; align-content: start; gap: .7em; font-size: .92em; }
.claude .chat p { margin: 0; }
.claude .chat .you { justify-self: end; max-width: 85%; padding: .4em .7em; border-radius: .8em; background: #EDEAE0; }
.desk .caption { margin: var(--g2) var(--g2) 0; min-height: 1.5em; font: 0.875rem/1.5 var(--sans); color: var(--dim); text-align: center; }
/* On a phone the windows overlap more, so each stays wide enough to read. */
@media (max-width: 720px) {
  .desk .notch { width: min(360px, calc(100% - 32px)); }
  .apps { max-width: 440px; aspect-ratio: 1 / 1.2; margin-top: -40px; }
  .app { font-size: 3.1cqw; border-radius: 2.4cqw; }
  .ghostty { left: 3%; top: 11%; width: 72%; height: 34%; }
  .claude { left: 25%; top: 26%; width: 72%; height: 35%; }
  .vscode { left: 6%; top: 46%; width: 86%; height: 52%; }
}

/* Agents */
.roster { list-style: none; padding: 0; margin-top: var(--g5); }
.roster li { display: grid; grid-template-columns: var(--phi); column-gap: var(--g5); align-items: center; min-height: 88px; padding: var(--g2) 0; box-shadow: inset 0 1px 0 var(--hair); }
.roster li:last-child { box-shadow: inset 0 1px 0 var(--hair), inset 0 -1px 0 var(--hair); }
.roster .who { display: flex; align-items: center; gap: var(--g3); }
.roster .who img, .roster .who i { width: 40px; height: 40px; flex: none; filter: brightness(0); }
.roster .who small { font: 400 0.9375rem/var(--l2) var(--mono); color: var(--dim); align-self: end; margin-bottom: 4px; }
.roster .who a { text-decoration: none; }
.roster .who a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .12em; }
.roster .what { font: 400 0.875rem/var(--l3) var(--mono); color: var(--dim); text-transform: uppercase; letter-spacing: .05em; }
.roster .what b { font-weight: 500; color: var(--fg); }
.models { margin-top: var(--g7); align-items: end; }
.models .num { font: 200 var(--t7)/var(--l7) var(--mono); letter-spacing: -0.08em; margin-left: -.05em; }
.limits { list-style: none; padding: 0; margin-top: var(--g4); font: 400 var(--t2)/var(--l3) var(--mono); }
.limits li { display: flex; justify-content: space-between; box-shadow: inset 0 -1px 0 var(--hair); }
.limits li > span:first-child { color: var(--dim); white-space: nowrap; margin-right: var(--g3); }
.limits li > span:last-child { text-align: right; }
.limits .w { white-space: nowrap; }
.limits .ring { display: inline-block; width: .75em; height: .75em; margin: 0 .35em 0 .6em; border-radius: 50%; vertical-align: -.05em;
  background: conic-gradient(var(--fg) var(--p), var(--hair) 0); -webkit-mask: radial-gradient(circle, transparent 52%, #000 56%); mask: radial-gradient(circle, transparent 52%, #000 56%); }
.limits .ring.hot { background: conic-gradient(var(--working) var(--p), var(--hair) 0); }
.limits b { font-weight: inherit; }
.limits .hot { color: #8A5A00; }
.limits small { font-size: inherit; color: var(--dim); }
.custom { margin-top: var(--g7); align-items: start; }
.custom pre { background: #000; color: #8F8A80; border-radius: 16px; padding: var(--g3); font: 0.875rem/1.5rem var(--mono); overflow-x: auto; }
.custom pre b { color: #F2EEE6; font-weight: 400; }
pre .add { color: #5FD47A; }
pre .del { color: #FF8A84; }

/* Calm */
.calm .list { list-style: none; padding: 0; margin-top: var(--g5); counter-reset: n; }
.calm .list li { counter-increment: n; display: grid; grid-template-columns: var(--ihp); column-gap: var(--g5); padding: var(--g2) 0 var(--g4); box-shadow: inset 0 1px 0 var(--hair); }
.calm .list h3 { display: flex; gap: var(--g2); }
.calm .list h3::before { content: counter(n, decimal-leading-zero); font: 500 var(--t1)/var(--l3) var(--mono); color: var(--dim); }
.calm .list p { color: var(--dim); }
.run { margin-top: var(--g6); font: 400 0.9375rem/var(--l3) var(--mono); }
.run div { display: grid; grid-template-columns: 24px 1fr auto; column-gap: var(--g2); box-shadow: inset 0 -1px 0 var(--hair); }
.run .ok { color: var(--done); }
.run .ok .icon { width: 16px; height: 16px; stroke-width: 2; vertical-align: -.2em; }
.run .ms { color: var(--dim); }
.run .sum { margin-top: var(--g2); font-weight: 600; }

/* Price */
.price { text-align: center; }
.price .kick { justify-content: center; }
/* Title, price and "Once." read as one block; the buttons stand apart from it by the same step as the terms below. */
.price .amount { margin-top: var(--g3); }
/* Prices in Boska: lining figures (its default old-style ones dip below the line), and the € smaller and raised before
   the number, centred on the height of the digits. */
.price .amount, .teams .cost { font-feature-settings: "lnum"; }
.price .amount .cur, .teams .cost .cur { font-size: .6em; vertical-align: .24em; margin-right: .05em; }
.price .amount .cur.after, .teams .cost .cur.after { margin-right: 0; margin-left: .02em; }
.price .ctas { margin-top: var(--g4); display: flex; gap: var(--g2); justify-content: center; flex-wrap: wrap; }
/* What the price includes, in one line right under the buttons. */
.price .terms { margin: var(--g3) auto var(--g6); color: var(--dim); }
/* Teams: what the plans include at the left; at the right, the size picker and the picked size's price and Buy.
   Without :has() (or CSS) every size shows, each with its own Buy. On /teams/ the block stands alone. */
.teams { max-width: 1056px; margin: 0 auto; padding: var(--g3) 0 var(--g5); display: grid; grid-template-columns: var(--phi); column-gap: var(--g5); align-items: start; text-align: left; box-shadow: inset 0 1px 0 var(--hair); }
.teams.alone { margin: 0; padding-bottom: 0; grid-template-columns: minmax(0, 1fr); }
.teams .lead > p { color: var(--dim); max-width: 36ch; margin-top: var(--g2); }
.teams .points { list-style: none; padding: 0; margin: var(--g3) 0 0; }
.teams .points li { display: grid; grid-template-columns: var(--g4) minmax(0, 1fr); padding: var(--g1) 0; }
.teams .points .icon { width: 20px; height: 20px; margin-top: 6px; color: var(--dim); }
.teams .lead .more { margin-top: var(--g2); }
.teams .lead .more a, .teams .bigger a { text-decoration-thickness: 1px; text-underline-offset: .15em; }
/* The plan picker is one centred column: three equal size buttons across it, then the price and Buy.
   An unpicked size's ring is the dimmed text colour, so it stands out from any section's light (3:1 at least). */
.teams .side { display: grid; justify-items: stretch; text-align: center; }
.sizes { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--g1); }
.sizes legend { padding: 0; margin-bottom: var(--g2); }
.sizes label { display: block; cursor: pointer; }
.sizes input { position: absolute; opacity: 0; pointer-events: none; }
.sizes span { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 48px; padding: 0 var(--g2); border-radius: 24px;
  font: 500 var(--t2)/1 var(--sans); box-shadow: inset 0 0 0 1.5px var(--dim); transition: background-color .3s, color .3s, box-shadow .3s; }
.sizes label:hover span { box-shadow: inset 0 0 0 1.5px var(--fg); }
.sizes input:checked + span { background: var(--fg); color: var(--bg); box-shadow: none; }
.sizes input:focus-visible + span { outline: 2px solid var(--fg); outline-offset: 3px; }
/* With motion, one highlight slides under the sizes instead of each one lighting up (site.js adds it). */
.sizes.slides label { position: relative; grid-row: 1; }
.sizes.slides label:nth-of-type(1) { grid-column: 1; }
.sizes.slides label:nth-of-type(2) { grid-column: 2; }
.sizes.slides label:nth-of-type(3) { grid-column: 3; }
.sizes .thumb { grid-row: 1; grid-column: 1; height: 48px; border-radius: 24px; background: var(--fg);
  transform: translateX(calc(var(--i, 0) * (100% + var(--g1)))); transition: transform .32s cubic-bezier(.3, .7, .2, 1), background-color 1.2s; }
.sizes.slides input:checked + span { background: none; }
.teams .plans { margin-top: var(--g4); }
.teams .plan { display: grid; justify-items: center; }
.teams .plan + .plan { margin-top: var(--g4); }
/* With a size picked, the three plans share one place; the other two are hidden but still size it, so the price and
   the Buy button keep one size and only their words change. Without :has, all three show, one under the other. */
.teams:has(.sizes input:checked) .plans { display: grid; justify-self: center; }
.teams:has(.sizes input:checked) .plan { grid-area: 1 / 1; margin-top: 0; }
.teams:has(.sizes input:checked) .plan .button { width: 100%; }
.teams:has([value="5"]:checked) .plan:not([data-size="5"]),
.teams:has([value="10"]:checked) .plan:not([data-size="10"]),
.teams:has([value="25"]:checked) .plan:not([data-size="25"]) { visibility: hidden; }
@media (max-width: 720px) { .teams:has(.sizes input:checked) .plans { justify-self: stretch; } }
.teams .plan .each { color: var(--dim); margin-bottom: var(--g3); }
.teams .bigger { margin-top: var(--g4); color: var(--dim); font-size: 0.9375rem; line-height: 24px; }
.price .note { margin: var(--g4) auto 0; max-width: 56ch; font-size: 0.9375rem; line-height: 24px; color: var(--dim); }
.price .note + .note { margin-top: var(--g1); }
.price .note b { color: var(--fg); font-weight: 600; }

/* FAQ: the heading stays put while the questions open and close. */
.faq .head { position: sticky; top: var(--g6); align-self: start; }
.qa .cat { padding: var(--g5) 0 var(--g2); }
.qa .cat:first-child { padding-top: 0; }
.qa details { box-shadow: inset 0 1px 0 var(--hair); }
.qa details:last-child { box-shadow: inset 0 1px 0 var(--hair), inset 0 -1px 0 var(--hair); }
.qa summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr 40px; align-items: center; padding: var(--g2) 0; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary h3 { font: inherit; letter-spacing: inherit; margin: 0; }
.qa details { scroll-margin-top: 112px; }
.qa summary .plus { width: 24px; height: 24px; justify-self: end; color: var(--dim); transition: transform .3s cubic-bezier(.3, 0, .2, 1); }
.qa details[open] summary .plus { transform: rotate(45deg); }
.qa details p { color: var(--dim); max-width: 46ch; padding-bottom: var(--g3); }
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  .qa details::details-content { height: 0; overflow: clip; transition: height .4s cubic-bezier(.3, 0, .2, 1), content-visibility .4s allow-discrete; }
  .qa details[open]::details-content { height: auto; }
}

footer { padding: var(--g7) var(--pad) var(--g4); }
footer .golden { align-items: end; }
footer canvas { width: 168px; height: 168px; justify-self: end; }
footer .fine { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--g2); margin-top: var(--g5); padding-top: var(--g2); font: 0.8125rem/var(--l3) var(--mono); color: var(--dim); box-shadow: inset 0 1px 0 var(--hair); }
footer .fine nav { display: flex; gap: var(--g3); flex-wrap: wrap; }
footer button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; }

@media (max-width: 860px) {
  .golden, .golden.flip, .quad, .roster li, .calm .list li, .teams { grid-template-columns: minmax(0, 1fr); }
  .teams .side { margin-top: var(--g4); }
  .golden > * + *, .golden.flip > * + * { margin-top: var(--g4); }
  .answer .panel, .faq .head { position: static; }
  .hero { grid-template-rows: auto auto; align-content: end; padding-top: var(--g6); }
  .wall { text-align: left; text-align-last: left; }
  .roster .what { margin-top: var(--g1); }
  footer canvas { justify-self: start; width: 104px; height: 104px; }
}

/* The download page: a quiet tool page, not a second home page. Night throughout (dark even before the
   script runs), one centred column, three install cards, the releases as a changelog with a timeline. */
html:has(body[data-page="download"]) { --bg: #0E0E0C; --fg: #F2EEE6; --dim: #9C978D; }

.dl-hero { display: flex; flex-direction: column; align-items: center; text-align: center; padding: var(--g7) var(--pad) var(--g6); }
/* The app icon, alive: the mark breathing on the icon's own dusk square (as design/icon's master). */
.dl-icon { width: 128px; height: 128px; margin-bottom: var(--g4); border-radius: 22.5%; overflow: hidden; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 42%, #1A1220, #0B0A0D 75%); box-shadow: 0 16px 48px rgba(254, 188, 46, .16), inset 0 0 0 1px rgba(255, 255, 255, .06); }
.dl-icon canvas { width: 116px; height: 116px; }
.dl-kick { margin-bottom: var(--g2); }
.dl-title { font: var(--w5) var(--t5)/var(--l5) var(--serif); letter-spacing: -0.03em; margin: 0 0 var(--g5); max-width: 16ch; }
.dl-title em { color: var(--dim); }
.dl-meta { margin-top: var(--g3); font: 500 0.8125rem/1.5rem var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.dl-signed { margin-top: var(--g1); color: var(--dim); }
.dl-install { max-width: 1056px; margin: 0 auto; padding: 0 var(--pad) var(--g7); }
.dl-install h2 { text-align: center; margin-bottom: var(--g4); }
.dl-install ol { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--g3); }
.dl-install li { padding: var(--g3); border-radius: 16px; box-shadow: inset 0 0 0 1px var(--hair); display: grid; gap: var(--g2); align-content: start; }
.dl-install .n { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font: 500 0.875rem/1 var(--mono); box-shadow: inset 0 0 0 1px var(--dim); color: var(--dim); }
.dl-log { max-width: 760px; margin: 0 auto; padding: 0 var(--pad) var(--g7); }
.dl-h2 { font: var(--w4) var(--t4)/var(--l4) var(--serif); letter-spacing: -0.02em; margin: 0 0 var(--g2); }
.dl-h2 em { color: var(--dim); }
.dl-intro, .lang-note { color: var(--dim); margin-bottom: var(--g2); }
.lang-note { font: 0.8125rem/1.5rem var(--mono); }
.timeline { list-style: none; padding: 0 0 0 var(--g4); margin-top: var(--g5); position: relative; }
.timeline::before { content: ""; position: absolute; left: 7px; top: 12px; bottom: 12px; width: 1px; background: var(--hair); }
.entry { position: relative; padding-bottom: var(--g5); }
.entry::before { content: ""; position: absolute; left: calc(-1 * var(--g4) + 3px); top: 12px; width: 9px; height: 9px; border-radius: 50%; background: var(--bg); box-shadow: 0 0 0 1px var(--dim); }
.entry.latest::before { background: var(--working); box-shadow: 0 0 10px 2px rgba(254, 188, 46, .45); }
.entry .head { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--g1) var(--g2); margin-bottom: var(--g2); }
.entry h3 { font: 500 var(--t3)/var(--l3) var(--mono); letter-spacing: -0.03em; margin: 0; }
.entry .tag { font: 500 0.75rem/1.5rem var(--sans); padding: 0 var(--g1); border-radius: 12px; background: var(--fg); color: var(--bg); align-self: center; }
.entry .date { margin-left: auto; font: 0.8125rem/1.5rem var(--mono); color: var(--dim); }
.entry .notes { color: var(--dim); }
.entry.latest .notes { color: var(--fg); }
.notes ul { list-style: none; padding: 0; margin: 0; }
.notes li { padding: 0 0 var(--g1) var(--g3); position: relative; }
.notes li::before { content: "–"; position: absolute; left: 0; color: var(--dim); }
.notes strong { font-weight: 600; }
.notes p { margin: 0 0 var(--g2); }
/* Verify sits on the download button's row, at the right; its panel opens full width below the row. */
.entry .foot { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: var(--g1) var(--g2); margin-top: var(--g2); }
.entry .get { display: inline-flex; align-items: center; height: 40px; padding: 0 var(--g2); border-radius: 20px; box-shadow: inset 0 0 0 1.5px var(--fg); text-decoration: none; font: 500 0.9375rem/1 var(--sans); }
.entry .get:hover { background: var(--fg); color: var(--bg); }
.entry.latest .get { background: var(--fg); color: var(--bg); }
.entry .size { font: 0.8125rem/1.5rem var(--mono); color: var(--dim); }
.entry .foot > .size { margin-right: 104px; } /* room for Verify on the right; the size wraps under the button before they touch */
.entry .verify { flex-basis: 100%; margin: 0; }
.entry .verify > summary { position: absolute; top: 0; right: 0; height: 40px; }
.entry .verify[open] { padding-top: var(--g1); }
.verify summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: var(--g1); font: 500 0.8125rem/1.5rem var(--mono); letter-spacing: .04em; color: var(--dim); }
.verify summary::-webkit-details-marker { display: none; }
.verify summary:hover { color: var(--fg); }
.verify summary .chev { width: 14px; height: 14px; transition: transform .2s; }
.verify[open] summary .chev { transform: rotate(90deg); }
.verify p { margin: var(--g1) 0; color: var(--dim); font-size: 0.9375rem; line-height: 24px; }
.verify pre { margin: 0 0 var(--g1); padding: var(--g2); border-radius: 12px; background: #000; color: var(--fg); font: 0.8125rem/1.5rem var(--mono); overflow-x: auto; }
.verify code { user-select: all; }
/* Each copyable line is one box, its copy button inside at the right. */
.copyable { display: flex; align-items: center; gap: var(--g1); margin: 0 0 var(--g1); padding: var(--g1) var(--g1) var(--g1) var(--g2); border-radius: 12px; background: #000; }
.copyable pre, .verify .copyable pre { flex: 1; min-width: 0; margin: 0; padding: 0; background: none; border-radius: 0; }
.copyable pre, .copyable pre code { white-space: pre-wrap; overflow-wrap: anywhere; }
.copyable.sha p { flex: 1; min-width: 0; margin: 0; font: 0.75rem/1.5rem var(--mono); color: var(--fg); overflow-wrap: anywhere; }
.copyable.sha .sha-label { color: var(--dim); }
.entry .sha { margin: 0; flex-basis: 100%; font: 0.75rem/1rem var(--mono); color: var(--dim); overflow-wrap: anywhere; }
.entry .sha-label { text-transform: uppercase; letter-spacing: .08em; margin-right: var(--g1); }
.entry .sha code { font-size: 0.75rem; user-select: all; cursor: text; }
.dl-price { max-width: 640px; margin: 0 auto; padding: 0 var(--pad) var(--g7); text-align: center; }
.dl-price p { color: var(--dim); margin: 0 auto var(--g4); max-width: 46ch; }
.dl-price .ctas, .dl-hero .ctas { display: flex; gap: var(--g2); justify-content: center; flex-wrap: wrap; }
.dl-beta { margin-top: var(--g4) !important; font: 0.8125rem/1.5rem var(--mono); }
@media (max-width: 860px) {
  .dl-install ol { grid-template-columns: minmax(0, 1fr); }
  .entry .date { margin-left: 0; flex-basis: 100%; }
}

/* Agent pages */
.crumbs ol { list-style: none; padding: 0; display: flex; gap: var(--g1); flex-wrap: wrap; }
.crumbs li + li::before { content: "/"; margin-right: var(--g1); color: var(--dim); }
.crumbs a { text-decoration: none; }
.hero.agent { grid-template-rows: auto 1fr auto; }
.hero.agent .crumbs { padding-top: var(--g2); }
/* The 404 (after .hero.agent, whose rows it replaces): blush all the way down; the big words left, the notch beside them with where to go under it. */
html:has(body[data-page="notfound"]) { --bg: #F6DCDD; --fg: #1A0E10; --dim: #6E4F55; }
.hero.nf { min-height: 100svh; grid-template-rows: none; grid-template-columns: minmax(0, 1.618fr) minmax(0, 1fr);
  grid-template-areas: "kick ." "title notch" "sub cta"; column-gap: var(--g5); align-content: center; }
.nf .kick { grid-area: kick; margin-bottom: var(--g3); }
.nf h1 { grid-area: title; align-self: center; }
.nf p.sub { grid-area: sub; margin-left: 0; }
.nf .notch { grid-area: notch; align-self: center; width: min(100%, 420px); }
.nf .notch .row { color: inherit; text-decoration: none; }
.nf .notch .row[hidden] { display: none; }
.nf .notch a.row:hover { background: #1A1A1A; }
.nf .row canvas { width: 20px; height: 20px; margin-top: 2px; }
.nf .row code { font-size: .8125rem; }
.nf .drop.ended { --c: #8F8A80; animation: none; }
.nf .cta { grid-area: cta; align-self: start; display: flex; gap: var(--g2); flex-wrap: wrap; margin-top: var(--g3); }
@media (max-width: 900px) { .nf { grid-template-columns: minmax(0, 1fr); grid-template-areas: "kick" "title" "notch" "cta" "sub"; } }
.agent-head { align-self: end; display: grid; gap: var(--g3); justify-items: start; }
.agent-icon { width: 56px; height: 56px; filter: brightness(0); }
.agent-mark { width: 56px; height: 56px; background: #000; border-radius: 22%; }
.others canvas { width: 24px; height: 24px; flex: none; background: #000; border-radius: 22%; }
.facts div { display: grid; grid-template-columns: var(--ihp); column-gap: var(--g4); padding: var(--g2) 0 var(--g3); box-shadow: inset 0 1px 0 var(--hair); }
.facts div:last-child { box-shadow: inset 0 1px 0 var(--hair), inset 0 -1px 0 var(--hair); }
.facts dt { padding-top: var(--g1); }
.feature { align-items: center; }
.feature.text { display: block; }
.feature.text h2 { max-width: 16ch; margin-bottom: var(--g3); }
.feature h2 { margin-bottom: var(--g3); }
.honest { list-style: none; padding: 0; }
.honest li { padding: var(--g2) 0 var(--g3); box-shadow: inset 0 1px 0 var(--hair); color: var(--dim); }
.steps { list-style: none; padding: 0; margin-top: var(--g5); counter-reset: s; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--g4); }
.steps li { counter-increment: s; padding: var(--g2) 0 var(--g4); box-shadow: inset 0 1px 0 var(--hair); }
.steps li::before { content: counter(s); display: block; font: var(--w5) var(--t5)/var(--l5) var(--serif); color: var(--dim); margin-bottom: var(--g2); }
.others ul { list-style: none; padding: 0; margin: var(--g5) 0 var(--g4); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--g4); }
.others li { box-shadow: inset 0 1px 0 var(--hair); }
.others a { display: flex; align-items: center; gap: var(--g2); padding: var(--g2) 0; font: var(--w3) var(--t3)/var(--l3) var(--serif); text-decoration: none; }
.others a:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.others img, .others i { width: 24px; height: 24px; flex: none; filter: brightness(0) invert(1); }
.others i { border-radius: 50%; background: #000; }
.agents-nav { display: flex; flex-wrap: wrap; gap: var(--g1) var(--g3); margin-top: var(--g5); }
.agents-nav a { text-decoration: none; color: var(--dim); }
.agents-nav a:hover { color: var(--fg); }
@media (max-width: 860px) {
  .facts div, .steps, .others ul { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 861px) { .feature.text.flip { padding-left: calc(var(--pad) + (100% - 2 * var(--pad) - var(--g5)) * .382 + var(--g5)); } }

/* Guides and the privacy page: reading pages, on paper. The heading at the left, the text in a comfortable
   measure at the right, steps numbered as on the agent pages. */
.doc-head { padding: var(--g7) var(--pad) var(--g5); }
.doc-head h1 { margin: var(--g6) 0 var(--g4); max-width: 14em; }
.doc-head .golden { align-items: start; }
.doc-head .cta { display: grid; gap: var(--g2); justify-items: start; }
.doc-head .updated { margin-top: var(--g4); }
.doc-sec { padding-top: var(--g6); }
.doc-sec h2 { margin-bottom: var(--g3); }
.doc-body { max-width: 64ch; }
.doc-body > * + * { margin-top: var(--g2); }
.doc-body a, .guide-list p a { text-decoration-thickness: 1px; text-underline-offset: .15em; }
.doc-body .honest li { color: var(--fg); }
.doc-steps { list-style: none; padding: 0; counter-reset: s; }
.doc-steps li { counter-increment: s; display: grid; grid-template-columns: var(--g5) minmax(0, 1fr); padding: var(--g2) 0 var(--g3); box-shadow: inset 0 1px 0 var(--hair); }
.doc-steps li::before { content: counter(s); font: var(--w3) var(--t3)/var(--l2) var(--serif); color: var(--dim); }
.doc-list, .doc-more { padding-bottom: var(--g6); }
/* The docs' code samples: on the panel's black, as on the home page, in the site's mono, wrapping rather than
   scrolling; a copy button at the top right. Tables: names in code at the left, hairlines between rows, all on
   the baseline. */
.doc-body > :is(.code, .doc-table) { margin-block: var(--g3); }
.code { --fg: #F2EEE6; --dim: #8F8A80; position: relative; padding: var(--g2) var(--g6) var(--g2) var(--g3); border-radius: 16px; background: #000; color: var(--fg); }
.code pre { font: 400 0.875rem/1.5rem var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.code pre code { font-size: inherit; }
.code .copy { position: absolute; top: var(--g1); right: var(--g1); }
.doc-table { width: 100%; border-collapse: collapse; }
.doc-table th, .doc-table td { padding: var(--g1) var(--g3) var(--g2) 0; text-align: left; vertical-align: top; }
.doc-table thead th { padding: 0 var(--g3) var(--g1) 0; font: 500 var(--t1)/var(--l1) var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.doc-table tbody > tr > * { box-shadow: inset 0 1px 0 var(--hair); }
.doc-table tbody > tr:last-child > * { box-shadow: inset 0 1px 0 var(--hair), inset 0 -1px 0 var(--hair); }
.doc-table tbody th { font-weight: 400; white-space: nowrap; }
.doc-table tbody td { padding-right: 0; }
@media (max-width: 560px) {
  .doc-table th { padding-right: var(--g2); }
  /* Three columns don't fit a phone: each row becomes a block, the name over its type (dimmed) and what it does. */
  .doc-table.wide thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .doc-table.wide tr { display: block; padding: var(--g1) 0 var(--g2); box-shadow: inset 0 1px 0 var(--hair); }
  .doc-table.wide tbody tr:last-child { box-shadow: inset 0 1px 0 var(--hair), inset 0 -1px 0 var(--hair); }
  .doc-table.wide tbody tr > * { display: block; padding: 0; box-shadow: none; }
  .doc-table.wide td:nth-of-type(1) { color: var(--dim); }
}
/* The docs (/docs/custom-agents/, /docs/models/): a reference to read and look things up in. A sidebar with every
   docs page and this one's sections stays in view (below the floating menu); the sections run in one column, each
   heading an anchor to link to. On a phone the sidebar comes first, without the sections. */
.docs { display: grid; grid-template-columns: minmax(11rem, 15rem) minmax(0, 1fr); column-gap: var(--g5); align-items: start; padding: var(--g4) var(--pad) var(--g7); box-shadow: inset 0 1px 0 var(--hair); }
.docs-nav { position: sticky; top: var(--g6); max-height: calc(100svh - var(--g6) - var(--g3)); overflow-y: auto; padding-top: var(--g3); font-size: 1rem; line-height: 1.5rem; }
.docs-nav a { text-decoration: none; }
.docs-nav ul, .docs-nav ol { list-style: none; padding: 0; }
.docs-nav ul { margin-top: var(--g2); display: grid; gap: var(--g1); }
.docs-nav li > a { display: block; padding-block: 4px; }
.docs-nav li > a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .15em; }
.docs-nav a[aria-current="page"] { font-weight: 600; }
.docs-nav .toc { margin: var(--g1) 0 var(--g1); box-shadow: inset 1px 0 0 var(--hair); }
.docs-nav .toc a { padding: 4px 0 4px var(--g2); color: var(--dim); font-size: .9375rem; box-shadow: inset 1px 0 0 transparent; }
.docs-nav .toc a:hover, .docs-nav .toc a[aria-current="location"] { color: var(--fg); text-decoration: none; box-shadow: inset 2px 0 0 var(--fg); }
.docs-main { padding-top: var(--g3); min-width: 0; }
.docs-main .doc-body { max-width: 72ch; }
.docs-sec { padding: 0; scroll-margin-top: var(--g6); }
/* A section a link glides to takes the focus (so the next Tab and a screen reader start there), but it isn't a
   control: no ring around it. */
.docs-sec[tabindex="-1"]:focus { outline: none; }
.docs-sec + .docs-sec { margin-top: var(--g6); }
.docs-sec h2 { margin-bottom: var(--g3); }
.docs-sec h2 .anchor { text-decoration: none; }
.docs-sec h2 .anchor::after { content: "#"; margin-left: .25em; color: var(--dim); opacity: 0; transition: opacity .2s; }
.docs-sec h2 .anchor:hover::after, .docs-sec h2 .anchor:focus-visible::after { opacity: 1; }
/* Docs pages open with a compact header: the reference is what they're for. */
.doc-head[data-group="docs"] { padding-bottom: var(--g4); }
.doc-head[data-group="docs"] h1 { margin: var(--g5) 0 var(--g3); font-size: var(--t4); line-height: var(--l4); }
.doc-head[data-group="docs"] .x3 { font: 400 var(--t2)/var(--l2) var(--sans); letter-spacing: 0; color: var(--dim); max-width: 64ch; }
@media (max-width: 860px) {
  .docs { grid-template-columns: minmax(0, 1fr); }
  .docs-nav { position: static; max-height: none; overflow: visible; padding-bottom: var(--g3); box-shadow: inset 0 -1px 0 var(--hair); }
  .docs-nav .toc { display: none; }
}
/* /teams/: the plans stand alone under their heading, the note under them. */
.doc-head .cta:has(.button + .button) { display: flex; flex-wrap: wrap; gap: var(--g2); }
.team-plans .measure { margin-top: var(--g3); color: var(--dim); }
.team-plans .note { margin-top: var(--g3); max-width: 56ch; font-size: 0.9375rem; line-height: 24px; color: var(--dim); }
.team-plans .note b { color: var(--fg); font-weight: 600; }
.guide-list { list-style: none; padding: 0; margin: var(--g4) 0; }
.guide-list li { display: grid; grid-template-columns: var(--phi); column-gap: var(--g5); align-items: baseline; padding: var(--g3) 0 var(--g4); box-shadow: inset 0 1px 0 var(--hair); }
.guide-list li:last-child { box-shadow: inset 0 1px 0 var(--hair), inset 0 -1px 0 var(--hair); }
.guide-list a { text-decoration: none; }
.guide-list a:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.guide-list p { color: var(--dim); }
@media (max-width: 860px) { .guide-list li { grid-template-columns: minmax(0, 1fr); row-gap: var(--g1); } }

/* ===== Languages ===== */

/* German and French: hyphenate running text (long German compounds); headlines break only where
   the copy says (&shy; or <br>), and never spill out of their column. */
:lang(de) p, :lang(de) dd, :lang(de) li, :lang(fr) p, :lang(fr) dd, :lang(fr) li { hyphens: auto; -webkit-hyphens: auto; }
:lang(de) h1, :lang(de) h2, :lang(de) h3, :lang(fr) h1, :lang(fr) h2, :lang(fr) h3 { hyphens: manual; -webkit-hyphens: manual; overflow-wrap: break-word; }

/* Chinese, Japanese, Korean. No italics exist, so the punchline keeps only its dimmed colour and a lighter
   weight. The characters are wide, so display sizes step down one; line heights open up, still on the 8px grid.
   Lines break between phrases. */
html:is(:lang(ja), :lang(ko), :lang(zh-Hans)) {
  --t7: clamp(3.25rem, 0.9494rem + 9.4382vw, 8.5rem); --l7: clamp(4rem, 1.3708rem + 10.7865vw, 10rem); --t6: clamp(2.5rem, 1.2949rem + 4.9438vw, 5.25rem); --l6: clamp(3.5rem, 2.1854rem + 5.3933vw, 6.5rem); --t5: clamp(2rem, 1.4522rem + 2.2472vw, 3.25rem); --l5: clamp(3rem, 2.5618rem + 1.7978vw, 4rem); --t4: clamp(1.75rem, 1.4213rem + 1.3483vw, 2.5rem); --l4: clamp(2.5rem, 2.0618rem + 1.7978vw, 3.5rem); --t3: clamp(1.375rem, 1.2107rem + 0.6742vw, 1.75rem); --l3: clamp(2rem, 1.7809rem + 0.8989vw, 2.5rem);
}
html:is(:lang(ja), :lang(ko), :lang(zh-Hans)) body { font-size: 1.125rem; }
:is(:lang(ja), :lang(ko), :lang(zh-Hans)) :is(h1, h2, h3, .x3, .x4, .x5, .x6, .x7, .line, .wall) { letter-spacing: 0; }
:is(:lang(ja), :lang(ko), :lang(zh-Hans)) em { font-style: normal; font-family: var(--sans); font-weight: 300; }
:lang(ja) { line-break: strict; word-break: auto-phrase; }
:lang(zh-Hans) { line-break: strict; }
:lang(ko) { word-break: keep-all; }
/* The morning's last line is set italic; in CJK it takes the punchline's light sans instead. Display
   type uses the fonts' proportional spacing (palt), so kana and punctuation don't sit in wide boxes. */
:is(:lang(ja), :lang(ko), :lang(zh-Hans)) .problem .line:last-of-type { font-style: normal; font-family: var(--sans); font-weight: 300; }
:is(:lang(ja), :lang(zh-Hans)) :is(h1, h2, h3, .x3, .x4, .x5, .x6, .x7, .line) { font-feature-settings: "palt"; }

/* One family per language for all text, as English uses Boska and Geist (fonts/<lang>/<lang>.css,
   each loaded only on its own pages): Shippori Mincho (ja), Hahmlet (ko), Chiron Sung HK (zh). Weights stand in
   for the English roles: light display type (Boska), a lighter, dimmed punchline (its italic), regular
   text (Geist 400), medium labels and menu (Geist 500 and Geist Mono), semibold buttons and bold.
   Shippori Mincho starts at 400, so Japanese display type is 400 and its punchline lives on colour alone.
   Real code (commands, paths, keys) keeps a monospace, the Mac's own; the wordmark stays Boska. */
/* Chiron Sung HK centres ，。、：；！？ in the box (Hong Kong and Taiwan style); mainland Simplified Chinese
   sets them low and left. So the punctuation alone comes from the Mac's Songti SC, which does. */
@font-face { font-family: "Gnista ZH Punctuation"; font-weight: 100 900; src: local("STSongti-SC-Regular"), local("Songti SC"), local("Noto Serif SC");
  unicode-range: U+3001-3002, U+FF01, U+FF0C, U+FF1A-FF1B, U+FF1F; }
html:lang(ja) { --serif: "Shippori Mincho", "Hiragino Mincho ProN", serif; --w-display: 400; --w-punch: 400; }
html:lang(ko) { --serif: "Hahmlet", "AppleMyungjo", serif; --w-display: 300; --w-punch: 200; }
html:lang(zh-Hans) { --serif: "Gnista ZH Punctuation", "Chiron Sung HK", "Songti SC", serif; --w-display: 300; --w-punch: 200; }
html:is(:lang(ja), :lang(ko), :lang(zh-Hans)) { --sans: var(--serif); --mono: var(--serif); --w3: 400; --w4: 400; --w5: 400; }
html:is(:lang(ja), :lang(ko), :lang(zh-Hans)) body { font-family: var(--serif); }
html:is(:lang(ja), :lang(ko), :lang(zh-Hans)) :is(code, kbd, pre) { font-family: ui-monospace, "SF Mono", Menlo, monospace; }
:is(:lang(ja), :lang(ko), :lang(zh-Hans)) :is(h1, h2, .x3, .x4, .x5, .x6, .x7, .x8, .line, .wall, .num) { font-weight: var(--w-display); }
:is(:lang(ja), :lang(ko), :lang(zh-Hans)) :is(h1, h2, h3, .x3, .x4, .x5, .x6, .x7, .x8) em,
:is(:lang(ja), :lang(ko), :lang(zh-Hans)) .problem .line:last-of-type { font-family: var(--serif); font-weight: var(--w-punch); font-style: normal; }
:is(:lang(ja), :lang(ko), :lang(zh-Hans)) :is(.x1, .menu .link, .lang-button, .v-compact .now, .kick) { font-weight: 500; }
:is(:lang(ja), :lang(ko), :lang(zh-Hans)) :is(b, strong, .button, .pill, .menu .dl, .run .sum) { font-weight: 600; }
:is(:lang(ja), :lang(ko), :lang(zh-Hans)) :is(h1 .sub, h2 .sub, .hero p.sub) { font-weight: 400; }
/* The wordmark is always the Latin serif (Boska), whatever the language's faces. */
.v-full .logo, .v-menu .top > a, .v-lang .top + .lang-link[lang="en"] { font-family: "Boska", "Times New Roman", serif; font-weight: 500; }
/* Shippori Mincho as Google serves it has no proportional kana (palt), so Japanese display type is tightened
   by hand; running text stays set solid, as Japanese text is. */
:lang(ja) :is(h1, h2, .x4, .x5, .x6, .x7, .line) { letter-spacing: -0.06em; }
:lang(ja) :is(h1, h2, .x4, .x5, .x6, .x7) em { letter-spacing: -0.02em; }
:lang(ja) :is(h1, .x7) { letter-spacing: -0.1em; }
/* Shippori Mincho's kana sit loose at mid sizes too (questions, small headings): tighten a little. */
:lang(ja) :is(.x3, h3, summary) { letter-spacing: -0.03em; }
:lang(ja) .dl-title, :lang(ja) .dl-h2 { letter-spacing: -0.02em; }

/* App interface on the page (the panels) is drawn in the app's own fonts, whatever the page's language:
   SwiftUI's system font (SF Pro), its buttons medium (.callout.weight(.medium)), requests in SF Mono
   (.caption.monospaced()). .panel * is no more specific than the language rules above, so it wins only by
   coming after them: keep this below them. */
.panel, .panel * { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif; letter-spacing: normal; }
.panel :is(pre, code, kbd), .panel pre * { font-family: ui-monospace, "SF Mono", Menlo, monospace; }
.panel .pill { font-weight: 500; }
.panel .caption { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif; }
.panel .buttons .pill { font-weight: 500; }

/* ===== Motion ===== */

/* Page transitions between pages (cross-document View Transitions; browsers without them just load the page).
   Into a page: the old one slides left as the new one comes from the right; back out: the reverse; another
   language: a soft cross-fade. The menu pill isn't part of the page: it stays and morphs into the next one. */
/* The opt-in, @view-transition { navigation: auto; }, is in each page's head (VT_OPT_IN in build.py). */
.menu { view-transition-name: menu; }
::view-transition-group(menu) { animation-duration: .5s; animation-timing-function: cubic-bezier(.34, 1.32, .5, 1); }
::view-transition-old(root) { animation: vt-out .36s cubic-bezier(.4, 0, .2, 1) both; }
::view-transition-new(root) { animation: vt-in .56s cubic-bezier(.2, .7, .2, 1) both; }
html:active-view-transition-type(forward)::view-transition-old(root) { animation-name: vt-out-left; }
html:active-view-transition-type(forward)::view-transition-new(root) { animation-name: vt-in-right; }
html:active-view-transition-type(back)::view-transition-old(root) { animation-name: vt-out-right; }
html:active-view-transition-type(back)::view-transition-new(root) { animation-name: vt-in-left; }
html:active-view-transition-type(lang)::view-transition-old(root) { animation-name: vt-fade-out; animation-duration: .3s; }
html:active-view-transition-type(lang)::view-transition-new(root) { animation-name: vt-fade-in; animation-duration: .45s; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-16px) scale(.985); filter: blur(6px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(24px); filter: blur(6px); } }
@keyframes vt-out-left { to { opacity: 0; transform: translateX(-6%); filter: blur(4px); } }
@keyframes vt-in-right { from { opacity: 0; transform: translateX(8%); filter: blur(4px); } }
@keyframes vt-out-right { to { opacity: 0; transform: translateX(6%); filter: blur(4px); } }
@keyframes vt-in-left { from { opacity: 0; transform: translateX(-8%); filter: blur(4px); } }
@keyframes vt-fade-out { to { opacity: 0; filter: blur(8px); } }
@keyframes vt-fade-in { from { opacity: 0; filter: blur(8px); } }

/* Reduced motion: everything that moves, in one place, last so it wins. Things still change, at once.
   The menu's own motion (the × turn included) goes with .menu *. */
@media (prefers-reduced-motion: reduce) {
  .drop { animation: none; }
  .row, .works img, .app, .app .spot, .app .tick { transition: none; }
  html, .button, .problem .line, .sizes span, .qa summary .plus, .verify summary .chev, button.copy .icon { transition: none; }
  .qa details::details-content { transition: none; }
  .menu, .menu * { transition: none !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}