/* Slideturbo homepage, in the "Speed" look: a poster, not a brochure. Giant
   expanded type, whole yellow fields, hairlines and one accent. Tokens and
   rules: ../../DESIGN.md. Every picture is in its finished state without
   the script; js/site.js only adds the motion. */

@font-face { font-family: "Archivo"; src: url(/assets/fonts/archivo.1a642f540d.woff2) format("woff2");
  font-weight: 650 800; font-stretch: 112% 125%; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url(/assets/fonts/instrument-sans.2dccb2f3fd.woff2) format("woff2");
  font-weight: 400 600; font-display: swap; }
/* The Mac's key symbols on keycaps: Martian Mono has none, and the fallbacks
   draw ⌃ ⌘ ⌥ ⇧ tiny. Lucida Grande, on every Mac, draws them the way macOS's
   own menus do; loaded from the Mac itself (local), nothing is fetched. */
@font-face { font-family: "Key symbols"; src: local("Lucida Grande"), local("LucidaGrande");
  unicode-range: U+2190-2193, U+21A9, U+21B5, U+21E5, U+21E7, U+2303, U+2318, U+2325, U+232B, U+238B; }
@font-face { font-family: "Martian Mono"; src: url(/assets/fonts/martian-mono.61f196640b.woff2) format("woff2");
  font-weight: 400 500; font-display: swap; }

:root {
  color-scheme: dark;
  --ground: #12110F; --surface: #1A1916; --surface-2: #23211D; --line: #2E2B26;
  --text: #F3F0E8; --text-2: #A8A196; --text-3: #8A8378;
  --accent: #F5B800; --accent-hover: #FFC933; --accent-ink: #1A1400;
  --accent-tint: rgb(245 184 0 / 0.10);
  --slide: #1A1916; --slide-edge: #34312B; --guide: rgb(243 240 232 / 0.45);
  /* an element's line, and its mark on the filled disc; a yellow field swaps them */
  --el: var(--accent); --el-on: var(--accent-ink);

  --f-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-body: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --f-mono: "Martian Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --f-key: "Key symbols", var(--f-mono);

  /* the poster's sizes, fluid from 390 to 1440 px */
  --hero: min(5.625rem, max(6.6vw, min(2.625rem, (100vw - 40px) / 8.2)));           /* the home page's one sentence */
  --poster: clamp(2.5rem, 1rem + 5vw, 4.5rem);         /* every other page's title, at the top of its column */
  --huge: clamp(2.25rem, 0.9rem + 5.6vw, 5.75rem);     /* a yellow field's heading */
  --big: clamp(1.625rem, 1.05rem + 2.4vw, 3.25rem);
  --t-h2: clamp(1.375rem, 1.1rem + 0.9vw, 2rem);       /* a section's heading on an inner page */
  --t-h3: 1.25rem;
  --t-lead: clamp(1.125rem, 1rem + 0.5vw, 1.3125rem);
  --t-body: 1.0625rem; --t-small: 0.875rem; --t-key: 0.8125rem;

  --g: clamp(20px, 4.4vw, 64px);   /* the side gutter */
  --col-gap: clamp(24px, 5.6vw, 80px);   /* between the home page's two columns, every section the same, so they line up */
  --max: 1360px;
  --band: clamp(64px, 9vw, 128px);
  --section: clamp(64px, 7vw, 96px);   /* between an inner page's sections */
  --group: 48px;                       /* between groups of one kind: tables, galleries, questions */
  --radius: 12px;                      /* a panel: the surface that groups things instead of a hairline */
  --ease: cubic-bezier(.2, .8, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ground); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ground); color: var(--text); font: 400 var(--t-body)/1.6 var(--f-body);
  -webkit-font-smoothing: antialiased; }
img, svg { max-width: 100%; }
img { height: auto; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
p, li { text-wrap: pretty; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; }
code { font: 400 0.875em/1.4 var(--f-mono); color: var(--text); background: var(--surface-2);
  padding: 0.1em 0.35em; border-radius: 4px; overflow-wrap: anywhere; }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--g); }
.skip { position: absolute; left: -999px; top: 8px; background: var(--accent); color: var(--accent-ink); padding: 8px 12px; border-radius: 6px; }
.skip:focus { left: 8px; z-index: 10; }

/* ---------- type ---------- */
h1, h2 { font-family: var(--f-display); font-stretch: 125%; font-weight: 800; letter-spacing: -0.03em; }
h1 { font-size: var(--poster); line-height: .96; }
h2 { font-size: var(--t-h2); line-height: 1.12; font-stretch: 118%; font-weight: 750; letter-spacing: -0.02em; }
h3 { font-size: var(--t-h3); font-weight: 600; line-height: 1.3; }
.lead { font-size: var(--t-lead); line-height: 1.5; color: var(--text-2); max-width: 36ch; }
.lead b { color: var(--text); font-weight: 600; }
.muted { color: var(--text-2); }
.small { font-size: var(--t-small); }
.meta { font: 400 0.75rem/1.6 var(--f-mono); color: var(--text-3); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.meta > span { white-space: nowrap; }   /* the meta line breaks between its parts */
/* under a download button on a phone: what it needs on one line, the version under it */
@media (max-width: 600px) {
  .meta-line { display: flex; flex-direction: column; align-items: flex-start; }
  .meta .updated { display: none; }   /* a guide's date and reading time are enough on a phone */
  .meta-line > :first-child { order: 1; flex-basis: 100%; }
  .meta-line > :nth-child(even) { display: none; }   /* one fact a line, no bars */
  .final .meta-line, .end .meta-line { align-items: center; }
}
.or { color: var(--text-3); font-size: var(--t-small); margin-inline: 2px; }

/* ---------- the header ---------- */
/* Slim and sticky on every page, so the links are always one tap away: the
   same height all the way down (nothing shrinks, nothing shifts), on the
   ground so the giant type and the yellow fields pass under it and the logo
   never sits on yellow. A hairline once the page has moved (js/site.js
   watches .top-edge). Anchors and focus stop below it (scroll-padding). On
   a short screen it stays at the top of the page. */
html { scroll-padding-top: 80px; }
.top-edge { height: 1px; margin-bottom: -1px; }
.site-head { position: sticky; top: 0; z-index: 20; background: var(--ground); border-bottom: 1px solid transparent;
  transition: border-color .12s; }
.site-head.moved { border-bottom-color: var(--line); }
@media (max-height: 500px) { .site-head { position: static; } html { scroll-padding-top: 0; } }
.nav { display: flex; align-items: center; gap: 28px; height: 64px; }
/* the lockup, logo and wordmark, as on the business card (DESIGN.md §2): the
   wordmark half the mark, 0.29 of the mark from it, the square's outer edge
   (not the SVG's margin, --mark-pad) on the edge. Wherever it is used, --mark sets
   its size; the launch media use this rule too. */
.brand { --mark-pad: calc(var(--mark) * 2.25 / 32); display: flex; align-items: center; gap: calc(var(--mark) * 0.29); }
.brand svg { width: var(--mark); height: var(--mark); margin: calc(-1 * var(--mark-pad)); display: block; flex: none; }
.brand span { font: 700 calc(var(--mark) / 2)/1 var(--f-display); font-stretch: 125%; letter-spacing: -0.01em; white-space: nowrap; }
.nav .brand, .footer .brand { --mark: 40px; color: var(--text); margin-right: auto; }
.nav .brand { flex: none; }   /* never squeezed by the links */
:is(.nav, .footer) .brand:hover { text-decoration: none; }
.nav ul { display: flex; gap: 28px; list-style: none; padding: 0; font-weight: 500; font-size: 0.9375rem; }
.nav ul a { color: var(--text-2); padding-block: 6px; }
.nav ul a:hover { color: var(--text); text-decoration: none; }
.nav ul a[aria-current] { color: var(--text); box-shadow: inset 0 -2px var(--accent); }
/* phones: one 56 px row, so the logo stands alone (its name is the link's
   label) and the links and the button close up */
@media (max-width: 759px) {
  html { scroll-padding-top: 72px; }
  .nav { height: 56px; gap: 14px; }
  .nav .brand { --mark: 32px; }
  .nav .brand span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .nav ul { gap: 14px; font-size: 0.875rem; }
  .nav .btn.small { height: 36px; padding: 0 12px; font-size: 0.875rem; }
}
/* a phone can't install a Mac app: there the header keeps every link and drops its button (Leo, 2026-10-31) */
@media (max-width: 759px) { .nav .btn { display: none; } .nav ul { margin-left: auto; } }
@media (max-width: 380px) { .nav, .nav ul { gap: 11px; } .nav ul { font-size: 0.8125rem; } }

/* ---------- buttons and keys ---------- */
.btn { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 22px; border-radius: 6px;
  font: 600 1.0625rem/1 var(--f-body); background: var(--accent); color: var(--accent-ink); border: 0; cursor: pointer;
  white-space: nowrap; transition: background-color .12s, transform .12s var(--ease); }
.btn:hover { background: var(--accent-hover); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn svg { flex: none; }
/* secondary (DESIGN.md §5): a hairline, no fill */
.btn.secondary { background: transparent; color: var(--text); border: 1px solid var(--line); height: 48px; padding: 0 18px; font-size: 1rem; }
.btn.secondary:hover { background: var(--surface-2); }
.btn.small { height: 40px; padding: 0 14px; font-size: 0.9375rem; gap: 8px; }
/* The download button charges while the pointer rests on it (Leo, 2026-10-31):
   a brighter fill sweeps across with a band of light running through it,
   and live current crackles around its edge, behind it: an SVG frame the
   button's size (js/site.js) whose lines the noise in layout.html tears
   into arcs, flickering from the first moment and brighter as it charges.
   Full, it flashes once and the arrow taps down. It discharges fast. Only
   for a pointer that hovers; with reduced motion, a plain color change.
   The button's color is a layer of its own (::before), so the current can
   sit behind it. */
@property --charge { syntax: "<number>"; inherits: true; initial-value: 0; }
.btn.charge, .btn.charge:hover, .y .btn.charge, .y .btn.charge:hover { background: none; }
.btn.charge { --base: var(--accent); --fill: linear-gradient(90deg, #FFD23F, #FFEDA3); --spark: #FFFFFF; --glow: 245 184 0;
  --arc: #FFC81F; --arc-glow: #F5B800;
  position: relative; isolation: isolate;
  box-shadow: 0 0 calc(var(--charge) * 36px) calc(var(--charge) * 3px) rgb(var(--glow) / calc(var(--charge) * .4));
  transition: --charge .35s var(--ease), transform .12s var(--ease); }
/* on a yellow field the button is ink, its fill a warmer ink, its current a pale yellow */
.y .btn.charge { --base: var(--accent-ink); --fill: linear-gradient(90deg, #2E2500, #4D3E00); --spark: #F5B800; --glow: 255 246 205;
  --arc: #FFE680; --arc-glow: #FFF1B0; }
.btn.charge::before, .btn.charge::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; }
.btn.charge::before { background: var(--base); }
.btn.charge::after {
  background: linear-gradient(105deg, transparent 0 40%, color-mix(in srgb, var(--spark) 70%, transparent) 50%, transparent 60% 100%) 100% 0 / 300% 100%,
              var(--fill);
  clip-path: inset(0 calc((1 - var(--charge)) * 100%) 0 0 round 6px); }
.btn.charge .arc { position: absolute; left: -18px; top: -18px; z-index: -2; max-width: none; overflow: visible; pointer-events: none;
  opacity: min(1, calc(var(--charge) * 4)); }
.btn.charge .arc rect { fill: none; }
.btn.charge .arc .glow { stroke: var(--arc-glow); stroke-width: 8; opacity: calc(.4 + var(--charge) * .5); filter: url(#st-edge-glow); }
.btn.charge .arc .edge { stroke: var(--arc); stroke-width: 3; }
.btn.charge .arc .soft { stroke: var(--arc-glow); stroke-width: 3.5; opacity: .75; filter: url(#st-arc-soft); }
.btn.charge .arc .core { stroke: var(--arc); stroke-width: 2; filter: url(#st-arc); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .btn.charge:hover { --charge: 1;
    transition: --charge 1.4s cubic-bezier(.3, 0, .5, 1), transform .12s var(--ease);
    animation: btn-zap 1.6s 1.4s infinite; }   /* charged, it pops, and again every 1.6 s */
  .btn.charge:hover::after { animation: btn-current .9s linear infinite; }
  .btn.charge:hover svg:not(.arc) { animation: btn-drop .9s 1.5s var(--ease) infinite; }
}
@media (hover: hover) and (prefers-reduced-motion: reduce) { .btn.charge:hover { --charge: 1; } .btn.charge .arc { display: none; } }
@media (hover: none) { .btn.charge .arc { display: none; } }
@keyframes btn-current { from { background-position: 100% 0, 0 0; } to { background-position: 0% 0, 0 0; } }   /* the band runs left to right, the way it charges */
@keyframes btn-zap {
  0% { filter: none; scale: 1; }
  8% { filter: brightness(1.25) drop-shadow(0 0 14px rgb(var(--glow) / .9)); scale: 1.035; }
  30%, 100% { filter: none; scale: 1; } }
@keyframes btn-drop { 0%, 55%, 100% { translate: 0 0; } 25% { translate: 0 2px; } }
.cta { display: grid; gap: 12px; justify-items: start; }

.keys { display: inline-flex; gap: 4px; vertical-align: middle; white-space: nowrap; }
/* a keycap as the launch media draw it: an outline in --text-3, heavier at
   the bottom, on --surface-2. The yellow ones (Slideturbo's in the guide, a
   key being pressed) are the same cap in the logo's colors. */
kbd { display: inline-grid; place-items: center; min-width: 1.9em; height: 1.9em; padding: 0 .45em;
  font: 500 var(--t-key)/1 var(--f-key); color: var(--text); background: var(--surface-2);
  border: 1px solid var(--text-3); border-bottom-width: 2px; border-radius: 6px;
  transition: background-color .12s, border-color .12s, color .12s; }
p .keys, li .keys { font-size: 0.95em; }
/* in a sentence a group of keycaps keeps a little room from the words around
   it (not between its own keys), and sits on the line's middle: lifted a
   little, since the heavier bottom edge reads as weight */
p .keys, li .keys, p > kbd { margin-inline: .25em; translate: 0 -.12em; }
:is(.move, .acts, .sheet) .keys { margin-inline: 0; translate: none; }
.on kbd, kbd.down, .ours kbd { background: var(--accent-tint); border-color: var(--accent); color: var(--accent); }
/* as the last key of a shortcut lands, a yellow glow flashes behind the
   whole group, the gaps between its keys too (js/site.js) */
.presses .keys, .move .keys { position: relative; isolation: isolate; }
.presses .keys::before, .move .keys::before { content: ""; position: absolute; inset: -6px; z-index: -1; border-radius: 11px;
  background: rgb(245 184 0 / .2); box-shadow: 0 0 22px 4px rgb(245 184 0 / .3); opacity: 0; pointer-events: none; }
.keys.flash::before { animation: key-flash .55s ease-out; }
@keyframes key-flash { 0% { opacity: 0; } 12% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .keys.flash::before { animation: none; } }

/* ---------- yellow fields ---------- */
.y { --el: var(--accent-ink); --el-on: var(--accent); background: var(--accent); color: var(--accent-ink); }
.y a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.y :focus-visible { outline-color: var(--accent-ink); }
.y kbd { background: transparent; color: var(--accent-ink); border: 1.5px solid var(--accent-ink); border-bottom-width: 3px; }
.y .btn { background: var(--accent-ink); color: var(--accent); text-decoration: none; }
.y .btn:hover { background: #000; }
.y .meta { color: var(--accent-ink); }
.band { padding-block: var(--band); }
.band:not(.y) + .band:not(.y) { padding-top: 0; }   /* two dark bands share their space */

/* ==================== the home page ==================== */

/* hero: one sentence, one color, one size, scaled with the page so it breaks
   the same way from 768 px up ("Lightning-fast editing / for PowerPoint on
   Mac": 13.6em is what the second line needs); four lines on a phone */
.hero { padding-block: clamp(28px, 5vw, 64px) clamp(56px, 7vw, 104px); }
.hero-title { font-size: var(--hero); line-height: .96; letter-spacing: -0.035em; margin-left: -0.03em; max-width: 13.6em; text-wrap: wrap; }
.nw { white-space: nowrap; }
.line { display: inline-block; }   /* a heading's second half: on a line of its own once it can't share one */
/* Under the sentence, three bands on one grid: the race; then its result,
   4× faster, over the lead in the mouse's column, with the button in
   Slideturbo's, its meta line on the lead's last line. On a phone there is
   no race: the result follows the sentence, then the lead and the button,
   all the column's width. */
.hero { --lane-gap: var(--col-gap); --x4: clamp(3.5rem, 2rem + 4.4vw, 5.5rem); }
.hero-grid { display: grid; gap: 28px; margin-top: clamp(28px, 3.4vw, 48px); }
@media (max-width: 759px) {
  .race { display: none; }
  .hero > .hero-grid > .x4 { order: -1; }
  .hero .lead { max-width: none; }
}
.hero .cta { margin-top: 28px; }
.hero > .hero-grid > .x4 { margin-top: 0; }
@media (min-width: 760px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--lane-gap); row-gap: 0; }
  .race { grid-row: 1; grid-column: 1 / -1; }
  .hero-copy { display: contents; }
  .hero > .hero-grid > .x4 { grid-row: 2; grid-column: 1; margin-top: clamp(48px, 5vw, 72px); }
  .hero-copy .lead { grid-row: 3; grid-column: 1; max-width: 34em; margin-top: 20px; }
  /* the column ends where the lead does: the meta line on its last line */
  .hero .cta { grid-row: 2 / span 2; grid-column: 2; align-self: end; margin: 0 0 3px; }   /* 3 px: the two baselines meet, measured at 1024 to 1920 px */
}
/* the button's column is too narrow for the meta line on one row: one fact a line, as on a phone */
@media (min-width: 760px) and (max-width: 1099px) {
  .hero .meta-line { display: flex; flex-direction: column; align-items: flex-start; }
  .hero .meta-line > :first-child { order: 1; }
  .hero .meta-line > :nth-child(even) { display: none; }
}

/* the race: the mouse against three shortcuts. Every line in it has a fixed
   height and never wraps, so nothing moves while it plays. */
.lanes { display: grid; gap: 40px; }
@media (min-width: 760px) { .lanes { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--lane-gap); } }
.lane { container-type: inline-size; }
.lane-cap { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 32px; margin-bottom: 12px; }
.lane-name { display: flex; align-items: center; gap: 10px; white-space: nowrap; font: 750 1.0625rem/1.2 var(--f-display); font-stretch: 118%; letter-spacing: -0.01em; }
.lane-mouse .lane-name { color: var(--text-2); }
.lane-mark { width: 28px; height: 28px; margin: -2px; flex: none; }
/* the clocks run at the demo's pace, in tenths, like a stopwatch */
.clock { font: 500 1.375rem/1 var(--f-mono); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; color: var(--text-2); white-space: nowrap; }
.lane-st .clock { color: var(--accent); }
.clock small { font-size: .55em; letter-spacing: 0; margin-left: .15em; }
/* Slideturbo's slide is the product: an accent edge and a close, quiet glow; the mouse's stays plain */
.lane-st .slide { border-color: var(--accent); box-shadow: 0 24px 48px -24px rgb(245 184 0 / .2); }
.lane-st .box { color: var(--text); background: rgb(245 184 0 / .05); }

/* what each side does, in order, in one voice: the mouse's five moves,
   Slideturbo's three shortcuts, apart by space alone. One lights while it
   happens; the ones done stay lit. */
.acts { display: flex; gap: 20px; height: 28px; margin-top: 16px; padding: 0; list-style: none; }
.acts li { display: flex; align-items: center; gap: 10px; white-space: nowrap; font: 500 .8125rem/1 var(--f-mono); color: var(--text-3);
  transition: color .12s; }
.acts li.done { color: var(--text-2); }
.acts li.now { color: var(--text); }
.presses { gap: 28px; }
.presses .keys { gap: 3px; font-size: 1em; }
.presses kbd { font-size: .75rem; transition: none; }   /* a key goes yellow the moment it's down, as in the launch media */
/* a narrow lane has room for the keys only */
@container (max-width: 499px) { .presses { gap: 16px; } .presses li > span:last-child { display: none; } }
@container (max-width: 339px) { .acts { gap: 12px; } .acts li { font-size: .75rem; } }   /* five moves in a narrow lane */

/* the race's result, the claim the page makes: Slideturbo takes a quarter
   of the mouse's time. Counted as the race runs (js/site.js), it lights
   when the mouse is done. The number stands on its own line, so counting
   moves nothing. */
.x4 { display: grid; gap: 6px; color: var(--text-3); transition: color .3s; }
.x4.lit { color: var(--accent); }
.x4-n { font: 800 var(--x4)/.86 var(--f-display); font-stretch: 125%; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.x4-t { font: 750 clamp(1.25rem, 1rem + .9vw, 1.875rem)/1.1 var(--f-display); font-stretch: 118%; letter-spacing: -0.02em; color: var(--text-2); }
.x4.lit .x4-t { color: var(--text); }

/* the slide canvas (DESIGN.md §5): 16:9, one step lighter than the page */
.slide { position: relative; aspect-ratio: 16 / 9; width: 100%; background: var(--slide); border: 1px solid var(--slide-edge);
  border-radius: 10px; box-shadow: 0 30px 80px -24px rgb(0 0 0 / .7); overflow: hidden; container-type: inline-size; }
.s-title { position: absolute; left: 6%; top: 7%; right: 6%; font: 700 clamp(9px, 3.6cqw, 17px)/1.15 var(--f-display); font-stretch: 112%;
  letter-spacing: -0.01em; color: var(--text); white-space: nowrap; overflow: hidden; }
.s-rule { position: absolute; left: 6%; right: 6%; top: 18%; height: 1px; background: var(--line); }
.s-foot { position: absolute; bottom: 5%; font: 400 clamp(6px, 1.9cqw, 10px)/1 var(--f-mono); color: var(--text-3); }
.box { position: absolute; display: flex; align-items: center; justify-content: center; text-align: center;
  border: 1.5px solid var(--accent); background: var(--accent-tint); border-radius: 3px;
  color: var(--accent); font: 600 clamp(8px, 3cqw, 15px)/1.1 var(--f-body);
  transition-property: left, top, width, height; transition-timing-function: var(--ease); transition-duration: 0s; }
.lane-mouse .box { border-color: var(--text-3); background: none; color: var(--text-2); }
.lane-mouse .box.held { border-color: var(--text); color: var(--text); }
.guide { position: absolute; left: 0; right: 0; top: 26%; border-top: 1.5px dashed var(--guide); opacity: 0; transition: opacity .2s; }
.guide.show { opacity: 1; }
.cursor { position: absolute; width: clamp(14px, 4.4cqw, 22px); height: auto; margin: -2px 0 0 -2px;
  transition-property: left, top; transition-timing-function: var(--ease); }

/* 30 ms, laid against one second */
.ms h2 { font-size: inherit; line-height: 1; font-weight: 800; font-stretch: 125%; letter-spacing: 0; }
.ms-pre, .ms-post { display: block; font-size: var(--big); line-height: 1; letter-spacing: -0.02em; font-weight: 750; font-stretch: 118%; }
.ms-num { display: block; font-size: clamp(8rem, 0.5rem + 44vw, 22rem); line-height: .78; letter-spacing: -0.07em; margin: .06em 0 .1em -0.06em; }
.ms-num small { font-size: .3em; letter-spacing: -0.03em; margin-left: .12em; }
.ms-text { font-size: var(--t-lead); line-height: 1.5; max-width: 34ch; margin-top: 20px; }
.second { margin-top: 40px; }
.sec-bar { position: relative; height: 56px; border: 1.5px solid var(--accent-ink); border-radius: 4px; }
.sec-slice { position: absolute; left: 0; top: 0; bottom: 0; width: 3%; background: var(--accent-ink); }
.sec-head { position: absolute; top: -8px; bottom: -8px; left: 0; width: 2px; background: var(--accent-ink); opacity: 0; }
.sec-scale { position: relative; height: 1rem; margin-top: 10px; font: 400 .75rem/1 var(--f-mono); }
.sec-scale span { position: absolute; top: 0; white-space: nowrap; }
.sec-scale span + span { transform: translateX(-50%); }
.sec-scale span:last-child { transform: translateX(-100%); }   /* each label at its place on the bar; the last ends at the bar's end */
.sec-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 24px; }
.sec-go { display: inline-flex; align-items: center; height: 48px; padding: 0 20px; border: 0; border-radius: 6px; cursor: pointer;
  background: var(--accent-ink); color: var(--accent); font-weight: 600; transition: transform .12s var(--ease); }
.sec-go:active { transform: translateY(1px); }
.sec-out { font: 500 .875rem/1.4 var(--f-mono); }
/* on a phone the result has two lines of its own under the button, so the
   second sentence arriving moves nothing */
@media (max-width: 759px) { .sec-out { flex-basis: 100%; min-height: 2.8em; } }
@media (min-width: 1200px) { .ms-num { font-size: min(24vw, 22rem); } }
@media (min-width: 760px) {
  .ms-num { font-size: 20vw; }
  .ms-wrap { display: grid; grid-template-columns: 7fr 5fr; column-gap: var(--col-gap); align-items: end; }
  .ms-text { margin-top: 0; }
  .second { grid-column: 1 / -1; margin-top: 56px; }
  .sec-bar { height: 88px; }
}

/* the shortcuts: a row each, its picture does the shortcut when tapped */
.sc-head { display: grid; gap: 20px; margin-bottom: clamp(32px, 4vw, 56px); align-content: start; }
.sc-head h2 { font-size: inherit; line-height: 1; letter-spacing: 0; }
.sc-num { display: block; font-size: clamp(8rem, 1rem + 36vw, 15rem); line-height: .8; letter-spacing: -0.06em; margin-left: -0.05em;
  color: var(--accent); font-weight: 800; font-stretch: 125%; }
.sc-rest { display: block; margin-top: .3em; font-size: var(--big); line-height: 1; letter-spacing: -0.02em; font-weight: 750; font-stretch: 118%; }
.sc-head p { color: var(--text-2); max-width: 44ch; }
.moves { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 760px) { .moves { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
.move { display: grid; grid-template-rows: auto 1fr auto; gap: 14px; padding: 12px 12px 16px; background: var(--surface);
  border-radius: var(--radius); transition: background-color .12s; }
.js .move { cursor: pointer; }
.move:hover { background: var(--surface-2); }
.move h3 { font: 750 clamp(1rem, .9rem + .45vw, 1.3125rem)/1.15 var(--f-display); font-stretch: 118%; letter-spacing: -0.01em; }
.pair { white-space: nowrap; }
.glyph { position: relative; width: 100%; aspect-ratio: 2 / 1; padding: 0; cursor: pointer;
  background: var(--ground); border: 1px solid var(--slide-edge); border-radius: 8px; }
.glyph i { position: absolute; border: 1.5px solid var(--accent); background: var(--accent-tint); border-radius: 2px;
  transition: left .16s var(--ease), top .16s var(--ease), width .16s var(--ease), height .16s var(--ease); }
.glyph i.t { border: 0; background: var(--accent); height: 7%; border-radius: 1px; }
.glyph i.f { background: var(--accent); }
.move .keys { justify-self: start; }   /* the group its own width, so its flash is too */
@media (min-width: 760px) { .move kbd { font-size: .875rem; } }
/* two columns, as the 30 ms field: the count on the left, the words at the foot of the right */
@media (min-width: 760px) and (max-width: 1199px) {
  .sc-head { grid-template-columns: 7fr 5fr; column-gap: var(--col-gap); align-items: end; }
  .sc-head p { max-width: none; }
  .sc-num { font-size: min(29vw, 15rem); }   /* the count fits its column */
}
@media (min-width: 1200px) { .sc { display: grid; grid-template-columns: 4fr 8fr; gap: 64px; align-items: start; } }
.more { margin-top: 24px; font-weight: 600; }
.more-2 { margin-top: 6px; color: var(--text-2); }

/* the elements, on a yellow field */
.el-wrap { display: grid; gap: 28px 40px; }
.el-wrap h2 { font-size: var(--huge); line-height: .92; letter-spacing: -0.035em; font-weight: 800; font-stretch: 125%; }
.el-text { font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem); max-width: 40ch; }
.el-text p + p { margin-top: 12px; }
.elements.sample { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(8px, 2vw, 24px); margin: 0; }
.elements.sample .el { padding: 6px 0 10px; }
.elements.sample .el svg { width: 100%; max-width: 128px; height: auto; aspect-ratio: 1; }
@media (min-width: 760px) and (max-width: 1199px) {
  /* the two paragraphs side by side, the link under the first */
  .el-text { max-width: none; display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--col-gap); row-gap: 12px; }
  .el-text p + p { margin-top: 0; }
}
@media (min-width: 1200px) { .el-wrap { grid-template-columns: 4fr 8fr; gap: 48px 64px; align-items: start; } .el-wrap h2 { grid-column: 1 / -1; } }

/* who it's for */
.who h2 { font-size: var(--huge); line-height: .95; letter-spacing: -0.035em; font-weight: 800; font-stretch: 125%; }
.who-grid { display: grid; gap: 28px; margin-top: clamp(24px, 3vw, 48px); }
.who-list { font: 750 var(--big)/1.02 var(--f-display); font-stretch: 118%; letter-spacing: -0.02em; color: var(--text-3); }
.who-list span { display: block; }   /* one of them to a line */
.who-text { display: grid; gap: 16px; max-width: 46ch; color: var(--text-2); font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem); }
.who-text b { color: var(--text); font-weight: 600; }
@media (min-width: 760px) { .who-grid { grid-template-columns: 1fr 1fr; gap: var(--col-gap); } }

/* the last field: the slogan, the download button and the three steps,
   centered as every page's download block is. The slogan is one line on a
   wide screen; on a narrow one "Work dangerously" stays together and is
   sized to fit the width. */
.end { text-align: center; }
.end h2 { font-size: calc((100vw - 2 * var(--g)) / 11.6); line-height: .95; letter-spacing: -0.04em; font-weight: 800; font-stretch: 125%; }
@media (min-width: 600px) { .end h2 { font-size: min(5rem, (100vw - 2 * var(--g)) / 14.6); } }
.end .cta { justify-items: center; margin-top: clamp(28px, 3vw, 40px); }
.steps { list-style: none; padding: 0; counter-reset: s; display: grid; gap: 20px; text-align: left;
  margin-top: clamp(48px, 6vw, 80px); padding-top: 28px; border-top: 1.5px solid var(--accent-ink); }
.steps li { counter-increment: s; display: grid; grid-template-columns: 2.2rem 1fr; align-content: start; gap: 12px; line-height: 1.5; }
.steps li::before { content: counter(s); font: 800 1.75rem/1 var(--f-display); font-stretch: 125%; }
.steps b { display: block; font-weight: 600; }
@media (min-width: 760px) {
  .steps { grid-template-columns: repeat(3, 1fr); gap: var(--col-gap); }
  .steps li { grid-template-columns: 1fr; gap: 8px; }
}

/* one column: every text on the home page runs the column's full width */
@media (max-width: 759px) { .home :is(.ms-text, .sc-head p, .el-text, .who-text) { max-width: none; } }

/* ==================== every other page ==================== */
/* The Doc template (DESIGN.md §8): one centered column, 46rem wide (inside
   the 64ch rule for running text), with nothing beside it. Structure comes
   from space and from panels, not from hairlines: --section between the
   page's sections, --group between groups of one kind, 20 px between a
   heading and its text, 16 px between paragraphs. */
.doc { max-width: 46rem; margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start;
  padding-block: clamp(32px, 6vw, 88px) var(--band); font-size: 1.125rem; line-height: 1.65; }
.doc > *, .doc section > * { min-width: 0; }
.doc > * + * { margin-top: 32px; }
.doc > * + :is(section, .duo) { margin-top: var(--section); }
.doc > .find + .chips { margin-top: 16px; }
.doc > .doc-head + :is(.guide-list, .signup, .panel, .find, .elgroup) { margin-top: var(--group); }
.doc-head { display: grid; gap: 20px; justify-items: start; }
.doc-head h1 { letter-spacing: -0.035em; margin-left: -0.03em; }
.doc-head .lead { max-width: none; color: var(--text); }
.doc-head :is(.cta, .actions) { margin-top: 8px; }
.doc-head .chips { margin-top: 12px; }
.doc section { display: grid; gap: 16px; align-content: start; }
.doc section > h2 + * { margin-top: 4px; }
.doc section > * + h2 { margin-top: 32px; }
.doc section > * + h3 { margin-top: 12px; }
.doc ul:not([class]) { padding-left: 1.2em; display: grid; gap: 6px; }
.doc ol:not([class]) { padding-left: 1.4em; display: grid; gap: 8px; }
.doc ol:not([class]) li::marker { font: 800 1em var(--f-display); font-stretch: 125%; color: var(--accent); }
.doc > .wide { width: 100%; }
/* groups of one kind sit closer than sections */
.doc > :is(.keygroup, .elgroup, .faq-group) + :is(.keygroup, .elgroup, .faq-group) { margin-top: var(--group); }

/* a panel: the surface that holds a group, in place of rules around it */
.panel { background: var(--surface); border-radius: var(--radius); padding: clamp(20px, 3vw, 28px); }
.panel > h2 { font-size: 1.375rem; }
.tldr { display: grid; gap: 8px; color: var(--text); }
.tldr .meta { color: var(--accent); }

/* jump links to the page's sections, under its title */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips a { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 14px; border-radius: 6px; background: var(--surface);
  color: var(--text-2); font-size: .9375rem; font-weight: 500; line-height: 1.3; transition: background-color .12s, color .12s; }
.chips a:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 520px) { .actions { display: grid; width: 100%; } .actions .btn { justify-content: center; } }


/* the find box over a list of shortcuts: sticks under the header on a big screen */
.find-field { position: relative; }
.find svg { position: absolute; left: 16px; top: 16px; color: var(--text-3); pointer-events: none; }
.find input { width: 100%; height: 52px; padding: 0 56px 0 48px; font: 400 1.0625rem/1 var(--f-body); color: var(--text);
  background: var(--surface); border: 1px solid var(--slide-edge); border-radius: 10px; -webkit-appearance: none; appearance: none; }
.find input::placeholder { color: var(--text-3); }
.find input:focus-visible { outline: 2px solid var(--accent); outline-offset: -1px; }
.find-key { position: absolute; right: 12px; top: 50%; translate: 0 -50%; display: flex; }   /* centered in the field */
@media (hover: none) { .find-key { display: none; } .find input { padding-right: 16px; } }
.find input:is(:focus, :not(:placeholder-shown)) ~ .find-key { display: none; }
.find-count { margin-top: 10px; font-size: var(--t-small); color: var(--text-2); }
.find-count:empty { display: none; }
@media (min-width: 760px) and (min-height: 700px) {
  .find { position: sticky; top: 64px; z-index: 5; padding-block: 12px; background: var(--ground); }
  /* a jump stops below the header and the find box (its count line too) */
  html:has(.find) { scroll-padding-top: 172px; }
  .doc > .find { margin-top: 20px; }
  .doc > .find + .chips { margin-top: 4px; }
}

/* the guides' index: each guide a card, the whole card the link */
.guide-list { list-style: none; padding: 0; display: grid; gap: 16px; }
.guide-list li { position: relative; display: grid; gap: 12px; padding: clamp(24px, 4vw, 36px); background: var(--surface);
  border-radius: var(--radius); transition: background-color .12s; }
.guide-list li:hover { background: var(--surface-2); }
.guide-list .meta { order: -1; }
.guide-list h2 { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem); line-height: 1.05; letter-spacing: -0.03em; font-weight: 800; font-stretch: 125%; }
.guide-list h2 a { color: var(--text); }
.guide-list h2 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.guide-list h2 a:hover { text-decoration: none; }
.guide-list p:not(.meta) { color: var(--text-2); }
.guide-list p.go { color: var(--accent); font-weight: 600; }
.guide-list .go span { display: inline-block; transition: transform .16s var(--ease); }
.guide-list li:hover .go span { transform: translateX(4px); }

/* the questions: in groups, each a card that opens to its answer (a
   <details>, so it works with no script and the browser's find opens it) */
.faq-group { gap: 8px !important; }
.faq-group > h2 { margin-bottom: 12px; }
.qa { background: var(--surface); border-radius: var(--radius); transition: background-color .12s; }
.qa:not([open]):hover { background: var(--surface-2); }
.qa summary { display: grid; grid-template-columns: minmax(0, 1fr) 16px; gap: 24px; align-items: center; padding: 18px 24px;
  cursor: pointer; list-style: none; font-weight: 600; font-size: 1.0625rem; line-height: 1.4; color: var(--text); border-radius: var(--radius); }
.qa summary::-webkit-details-marker { display: none; }
/* a plus that turns into a × */
.qa summary::after { content: ""; width: 14px; height: 14px; justify-self: end; transition: transform .16s var(--ease);
  background: linear-gradient(var(--accent), var(--accent)) center / 14px 2px no-repeat,
              linear-gradient(var(--accent), var(--accent)) center / 2px 14px no-repeat; }
.qa[open] summary::after { transform: rotate(45deg); }
.qa-a { display: grid; gap: 12px; padding: 0 64px 24px 24px; color: var(--text-2); font-size: 1.0625rem; }
.qa-a b, .qa-a strong { color: var(--text); font-weight: 600; }
@media (max-width: 520px) { .qa summary { padding: 16px 18px; gap: 16px; } .qa-a { padding: 0 18px 20px; } }
.faq-more { color: var(--text-2); }

/* the install page: what you need, the steps, and update and remove side by side */
.specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 12px; margin: 0; }
.specs > div { display: grid; gap: 2px; align-content: start; padding: 20px 22px; background: var(--surface); border-radius: var(--radius); }
.specs dt { margin-bottom: 8px; font: 500 .75rem/1.4 var(--f-mono); color: var(--accent); }
.specs dd { margin: 0; font-size: 1rem; line-height: 1.45; font-weight: 600; }
.specs dd.muted { font-weight: 400; font-size: .9375rem; }
.pkg code { font-size: .8125rem; }
.path { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 16px; background: var(--surface);
  border-radius: 10px; }
.path code { flex: 1; min-width: 0; padding: 0; background: none; overflow-x: auto; white-space: nowrap; overflow-wrap: normal;
  font-size: .875rem; scrollbar-width: none; }
.path button { flex: none; height: 32px; padding: 0 12px; border: 1px solid var(--slide-edge); border-radius: 6px; background: var(--surface-2);
  font-size: .8125rem; font-weight: 600; cursor: pointer; }
.path button:hover { border-color: var(--text-3); }
/* a long page's sections, numbered as they are */
.jump-list ol { columns: 2; column-gap: 32px; padding-left: 1.8em; margin: 4px 0 0; font-size: .9375rem; line-height: 1.5; }
.jump-list li { break-inside: avoid; padding-block: 3px; }
.jump-list li::marker { color: var(--text-3); font: 400 .75rem var(--f-mono); }
.jump-list a { color: var(--text-2); }
.jump-list a:hover { color: var(--text); }
@media (max-width: 520px) { .jump-list ol { columns: 1; } }
/* numbered steps, each number a small square in the logo's treatment */
.stepper { list-style: none; padding: 0; counter-reset: step; display: grid; gap: 28px; }
.stepper li { counter-increment: step; display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 20px; row-gap: 4px; }
.stepper li::before { content: counter(step); grid-row: span 2; display: grid; place-items: center; width: 40px; height: 40px;
  border: 1px solid var(--accent); border-radius: 10px; background: var(--accent-tint); color: var(--accent);
  font: 800 1.125rem/1 var(--f-display); font-stretch: 125%; }
.stepper h3 { align-self: center; min-height: 40px; display: flex; align-items: center; font-size: 1.125rem; }
.stepper p { color: var(--text-2); }
.stepper + .callout { margin-top: 16px; }
.duo { display: grid; gap: 16px; align-items: start; }
.duo .panel { display: grid; gap: 14px; }
.duo .panel > * { margin: 0; }
@media (min-width: 760px) { .duo { grid-template-columns: 1fr 1fr; align-items: stretch; } .duo .panel { align-content: start; } }

/* shortcut tables (generated from config/keymap.json and builtin.json): a
   panel each, the rows apart by space, like a Mac menu; a row lights up
   under the pointer */
.keygroup { display: grid; gap: 16px; }
.keytable { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; padding: 8px; background: var(--surface);
  border-radius: var(--radius); font-size: 1.0625rem; }
.keytable td { padding: 12px 16px; vertical-align: top; transition: background-color .12s; }
.keytable td:first-child { width: 9.5em; border-radius: 8px 0 0 8px; }   /* one width for every table on the page */
.longform .keytable td:first-child { width: 13.5em; }   /* the guide's keys run longer: ⌘ B or ⌘ I or ⌘ U */
.keytable td:last-child { border-radius: 0 8px 8px 0; }
.keytable tr:hover td { background: var(--surface-2); }
.keytable td:last-child:has(small) { font-weight: 600; }   /* a title over its note */
/* Slideturbo's keys among PowerPoint's own, in the guide: the keycaps drawn
   in the accent, as the logo is; the legend above the tables says so */
.legend { display: flex; flex-wrap: wrap; gap: 8px 28px; font-size: var(--t-small); color: var(--text-2); }
.legend > span { display: inline-flex; align-items: center; gap: 10px; }
.keytable small { display: block; color: var(--text-2); font-size: 0.9375rem; font-weight: 400; margin-top: 2px; }
.keytable small a { font-weight: 500; }
@media (min-width: 760px) { .keytable kbd { font-size: .875rem; } }
/* a guide's before/after pairs in the same panel: the "before" column muted */
.keytable.pairs th { padding: 8px 16px 4px; text-align: left; font-size: var(--t-small); font-weight: 500; color: var(--text-2); }
.keytable.pairs td:first-child, .longform .keytable.pairs td:first-child { width: 36%; color: var(--text-2); }
@media (max-width: 520px) {
  .keytable.pairs thead { display: none; }
  .longform .keytable.pairs td:first-child { width: auto; }
  .keytable { padding: 6px; }
  .keytable td { display: block; padding: 0; border-radius: 0 !important; background: none !important; }
  .keytable { table-layout: auto; }
  .keytable td:first-child, .longform .keytable td:first-child { width: auto; }
  .keytable tr { display: grid; gap: 6px; padding: 12px; border-radius: 8px; }
}

/* element tiles: drawn as the add-in draws them; a tap is ⌃T */
/* in the gallery each tile is 112 px, room for "Exclamation" in the mono face, with its artwork flush with the text's edge */
.elements { display: grid; grid-template-columns: repeat(auto-fill, 112px); gap: 4px; margin-left: -28px; }
.elements .el span { text-wrap: balance; }
/* on a phone a gallery group is a list in two columns, each element beside its name */
@media (max-width: 520px) {
  .elements:not(.sample) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; margin-inline: -8px; }
  .elements:not(.sample) .el { grid-template-columns: 40px minmax(0, 1fr); justify-items: start; align-items: center; gap: 12px;
    padding: 8px; text-align: left; }
  .elements:not(.sample) .el svg { width: 40px; height: 40px; }
}
.el { display: grid; justify-items: center; gap: 10px; padding: 20px 8px 14px; background: none; border: 1px solid transparent;
  border-radius: 10px; cursor: pointer; color: var(--text-3); font: 500 0.75rem/1.2 var(--f-mono);
  transition: background-color .12s, border-color .12s, transform .12s var(--ease); }
.el:hover { background: var(--surface); border-color: var(--line); }
.el:active { transform: scale(.94); }
.el svg { width: 56px; height: 56px; overflow: visible; }
.y .el { color: var(--accent-ink); }
.y .el:hover { background: rgb(26 20 0 / .07); border-color: transparent; }
/* the gallery: a panel per group, close together, its heading above its tiles */
.elgroup { display: grid; gap: 16px; padding: 24px 32px 16px; background: var(--surface); border-radius: var(--radius); }
.elgroup > h2 { font-size: 1.25rem; }
.elgroup .el { padding-block: 12px; }
.doc > .elgroup + .elgroup { margin-top: 12px; }
.elgroup .el:hover { background: var(--surface-2); border-color: transparent; }
@media (max-width: 520px) { .elgroup { padding: 18px 16px 8px; } }

/* the one thing a reader must not miss (DESIGN.md §5), drawn as the logo is */
.callout { background: var(--accent-tint); border: 1px solid var(--accent); border-radius: 10px; padding: 16px 20px; }

/* the changelog: the version as a poster number */
.doc > section[id^="v"] > h2 { font-size: var(--big); line-height: 1; font-weight: 800; font-stretch: 125%; letter-spacing: -0.03em; }

/* the download block that ends guides and some pages: a yellow field across
   the whole page (its background reaches past the column, and only paints),
   everything in it centered */
.final { display: grid; justify-items: center; gap: 20px; text-align: center; padding-block: var(--band);
  box-shadow: 0 0 0 100vmax var(--accent); clip-path: inset(0 -100vmax); }
.final h2 { font-size: clamp(2rem, 1.2rem + 3vw, 3.75rem); line-height: .98; letter-spacing: -0.035em; font-weight: 800; font-stretch: 125%; max-width: 16em; }
.final p { font-size: var(--t-lead); line-height: 1.5; max-width: 36ch; }
.final .cta { justify-items: center; margin-top: 12px; }
/* the same block as a card inside a guide's column, where the guide places it */
.final.card { box-shadow: none; clip-path: none; gap: 16px; margin-block: 40px 8px; border-radius: var(--radius);
  padding: clamp(32px, 5vw, 48px) clamp(20px, 4vw, 40px); }
.final.card h2 { font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.5rem); }
.final.card .cta { margin-top: 4px; }

/* the newsletter signup (build.py signup_form): a plain form, posted to our own server */
.signup { display: grid; gap: 12px; padding: clamp(24px, 4vw, 36px); background: var(--surface); border-radius: var(--radius); }
.doc .signup > h2 { font-size: var(--t-h2); }
.signup-form { display: grid; gap: 8px; }
.signup-form label { font-size: var(--t-small); color: var(--text-2); }
.signup-row { display: flex; flex-wrap: wrap; gap: 8px; }
.signup-row input { flex: 1 1 16em; min-width: 0; height: 52px; padding: 0 14px; font: 400 1rem/1 var(--f-body);
  color: var(--text); background: var(--ground); border: 1px solid var(--line); border-radius: 6px; }
.signup-row .btn { height: 52px; }
.signup-row input::placeholder { color: var(--text-3); }
.signup-row input:focus-visible { border-color: var(--accent); }
.signup-form .small { margin-top: 4px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.confirm-form { margin-top: 8px; }

/* the guides (DESIGN.md §8, Article): the text in a centered column of
   64ch with its title, date and reading time at the top. From 1360 px the
   contents sit in the left margin and the notes in the right; below that
   neither does, and the notes are a list at the end. build.py article()
   writes them. */
.longform { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--g); }
.longform .doc { max-width: 64ch; }
.longform .doc-head h1 { font-size: clamp(2.25rem, 1.4rem + 3.2vw, 3.75rem); line-height: 1; }
.longform-body { display: grid; gap: 20px; position: relative; align-content: start; }
.longform-body > .wide { width: 100%; }
.longform-body > section { margin-top: 40px; }
.longform-body > section section { margin-top: 32px; }
/* a task with several tables: its heading close to the first, the tasks apart */
.longform-body > .keysection, .longform-body > .keysection + section { margin-top: 56px; }
.keysection > h2 + section { margin-top: 16px; }
/* the header's scroll-padding already keeps a heading clear of it */
.longform-body :is(h2, h3, li)[id] { scroll-margin-top: 16px; }

/* a note's number in the text, and the list at the end */
.fn-ref { font-size: 0.7em; line-height: 0; }
.fn-ref a { padding-inline: 0.15em; font-weight: 600; font-variant-numeric: tabular-nums; scroll-margin-top: 16px; }
.sidenote { display: none; }
.doc .endnotes { gap: 12px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line);
  font-size: var(--t-small); line-height: 1.5; color: var(--text-2); }
.doc .endnotes > h2 { margin: 0; font: 600 var(--t-small)/1.5 var(--f-body); letter-spacing: 0; color: var(--text); }
.endnotes ol { padding-left: 1.4em; display: grid; gap: 8px; }
.endnotes a:not(.fn-back), .sidenote a { text-decoration: underline; text-underline-offset: 3px; }
.fn-back { font-family: var(--f-key); }
.fn-back:hover { text-decoration: none; color: var(--accent-hover); }

.toc { display: none; }
@media (min-width: 1360px) {
  .longform .doc { max-width: none; grid-template-columns: minmax(0, 1fr) minmax(0, 64ch) minmax(0, 1fr); column-gap: 40px;
    container-type: inline-size; }
  .longform .doc > * { grid-column: 2; }
  /* the contents: a tick per heading, flush against the text's side, the
     current one longer and in the accent; each tick's name beside it, shown
     near the top of the article (js/site.js sets .intro), on pointing at the
     column or tabbing into it. Every row is 24 px, so showing the names
     moves nothing, and the column never scrolls: on a short window the
     subsections' rows go. It sticks below the header. */
  .longform .toc { display: block; grid-column: 1; grid-row: 2 / span 2; justify-self: end; align-self: start;
    position: sticky; top: 96px; margin-top: 29px; max-width: 16rem; }
  .doc .toc ol { display: grid; gap: 0; max-width: none; margin: 0; padding: 0; list-style: none; }
  .doc .toc li { margin: 0; }
  .toc a { display: flex; align-items: center; justify-content: flex-end; gap: 14px; height: 24px; color: var(--text-3);
    font-size: .8125rem; line-height: 1; white-space: nowrap; }
  .toc a:hover { text-decoration: none; }
  .toc .sub a { font-size: .75rem; }
  .toc-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; opacity: 0; transform: translateX(6px);
    transition: opacity .2s, transform .2s var(--ease), color .12s; }
  :is(.toc:hover, .toc:focus-within, .toc.intro) .toc-name { opacity: 1; transform: none; }
  .toc .sub .toc-name { color: var(--text-3); }
  .toc li:not(.sub) .toc-name { color: var(--text-2); }
  .toc a:hover .toc-name, .toc a[aria-current] .toc-name { color: var(--text); }
  .toc a[aria-current] .toc-name { font-weight: 600; }
  .tick { flex: none; width: 24px; height: 2px; border-radius: 1px; background: var(--text-3); transition: background-color .12s, width .12s; }
  .sub .tick { width: 12px; margin-left: 12px; }
  .toc a:hover .tick { background: var(--text-2); }
  .toc a[aria-current] .tick { background: var(--accent); width: 32px; }
  .toc .sub a[aria-current] .tick { width: 20px; margin-left: 4px; }
  /* An open note sits in the right margin at the top of the line that cites it:
     display inline keeps that line as its place (its static position), and
     absolute keeps it out of the text's flow, so opening it moves nothing. */
  .sidenote.open { display: inline; position: absolute; left: calc(100% + 40px); width: min(15rem, (100cqw - 100% - 80px) / 2);
    margin-top: 4px; padding-left: 12px; border-left: 2px solid var(--accent);
    font: 400 var(--t-small)/1.5 var(--f-body); letter-spacing: 0; color: var(--text-2); text-align: left; }
  .sidenote-n { color: var(--accent); font: 500 0.75rem/1.5 var(--f-mono); font-variant-numeric: tabular-nums; padding-right: 0.5em; }
  /* the notes are beside the text, so the list at the end is for screen
     readers only, and shows when someone follows a link to it */
  .endnotes:not(:has(li:target)) { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (min-width: 1360px) { .toc.compact .sub { display: none; } }   /* set by js/site.js only when the full list does not fit the window */
@media (min-width: 1360px) and (max-height: 500px) { .longform .toc { position: static; } }
@media (prefers-reduced-motion: reduce) { .tick, .toc-name { transition: none; } }

/* the printable shortcut sheet: made for paper, so black on white, the accent
   only in the logo. On screen it lies on the page like a sheet on a desk. */
.sheet-note { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center; justify-content: space-between;
  max-width: 210mm; margin-inline: auto; padding-block: 40px 32px; }
.sheet-note p { max-width: 64ch; }
.sheet { --ink: #000; --ink-2: #4a4a4a; --rule: #d4d4d4;
  display: grid; gap: 6mm; max-width: 210mm; margin: 0 auto 128px; padding: 12mm; background: #fff; color: var(--ink);
  border-radius: 4px; box-shadow: 0 30px 80px -24px rgb(0 0 0 / .7); font: 400 9.5pt/1.35 var(--f-body); }
.sheet-head { display: grid; gap: 3mm; }
.sheet h1 { font-size: 19pt; line-height: 1.1; font-stretch: 120%; font-weight: 720; letter-spacing: -0.01em; }
.sheet-head p { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5mm 5mm; color: var(--ink-2); }
.sheet-head span { display: inline-flex; align-items: center; gap: 1.5mm; white-space: nowrap; }
.sheet h2 { font: 700 11pt/1.2 var(--f-display); font-stretch: 115%; letter-spacing: 0;
  padding-bottom: 1.5mm; border-bottom: 1.5pt solid var(--ink); }
.sheet h3 { font: 600 8.5pt/1.2 var(--f-body); color: var(--ink-2); margin-bottom: 0.5mm; }
.sheet-cols section section { padding-top: 3.5mm; }   /* padding, not margin: a column break keeps it */
.sheet-cols { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 8mm; align-items: start; }
.sheet-flow { columns: 2; column-gap: 8mm; }
.sheet-flow section { break-inside: avoid; }
.sheet-flow li { grid-template-columns: 16mm minmax(0, 1fr); }   /* at most three keys */
.sheet ul { list-style: none; padding: 0; margin: 0; }
.sheet li { display: grid; grid-template-columns: 20mm minmax(0, 1fr); gap: 2mm; align-items: center;
  padding-block: 1.1mm; border-bottom: 0.5pt solid var(--rule); break-inside: avoid; }
.sheet .keys { gap: 0.8mm; font-size: 1em; }
.sheet kbd { min-width: 1.75em; height: 1.75em; padding: 0 .35em; font-size: 7.5pt; color: var(--ink); background: #fff;
  border: 0.75pt solid #8c8c8c; border-bottom-width: 1.5pt; border-radius: 3px; }
.sheet-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 2mm 3mm; padding-top: 3mm; border-top: 0.5pt solid var(--rule); }
.sheet-foot .brand { --mark: 22pt; }
.sheet-foot .url { color: var(--ink-2); }
.sheet-small { flex: 1 1 60mm; font-size: 7pt; color: var(--ink-2); text-align: right; }
@media screen and (max-width: 760px) { .sheet { padding: 20px; margin-bottom: 80px; } .sheet-cols { grid-template-columns: 1fr; } }
@media screen and (max-width: 520px) { .sheet-flow { columns: 1; } .sheet-small { text-align: left; } }

@page { margin: 12mm; }
@media print {
  .site-head { display: none; }
  html:has(.sheet-page), .sheet-page { background: #fff; }
  .sheet-page .nav, .sheet-page .footer, .sheet-page .skip, .sheet-page .sheet-note { display: none; }
  .sheet-page .wrap { max-width: none; padding: 0; }
  .sheet { max-width: none; margin: 0; padding: 0; border-radius: 0; box-shadow: none; }
}

/* ---------- footer ---------- */
/* across the page under a hairline, at the bottom of the window on a short page */
body { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
@media print { body { display: block; min-height: 0; } }   /* printed, it would add a blank second page */
main { flex: 1 0 auto; }
.footer { border-top: 1px solid var(--line); padding-block: 48px; font-size: var(--t-small); color: var(--text-3); }
.footer .wrap { display: grid; gap: 28px 40px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 12px 40px; }
.footer nav { display: flex; flex-wrap: wrap; gap: 10px 24px; font-size: 0.9375rem; }
.footer nav a { color: var(--text-2); }
.footer p { max-width: none; }
@media (min-width: 1100px) {
  .footer .wrap { grid-template-columns: auto 1fr; align-items: center; }
  .footer-links { justify-content: flex-end; }
  .footer p { grid-column: 1 / -1; }
}
@media (max-width: 600px) { .footer nav { display: grid; grid-template-columns: repeat(3, max-content); gap: 12px 32px; } }

/* reduced motion: every picture in its finished state, nothing moves */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; }
}