/* ContextSnap website. Plain CSS, system fonts (the Content-Security-Policy and the privacy page
   promise no external fonts), and a strictly neutral palette. Values follow one spacing scale
   (2 4 8 12 16 24 32 40 48 64 80 96), the Tailwind type scale, and one easing curve. */

:root {
  --bg: #ffffff;
  --bg-warm: #f6f5f2;
  --bg-band: #faf9f7;
  --surface-2: #f1efeb;
  --text: #1d1d1f;
  --text-2: #48464a;
  --text-3: #6b6966;
  --line: rgba(29, 29, 31, 0.09);
  --line-strong: rgba(29, 29, 31, 0.16);
  --shadow-sm: 0 1px 2px rgba(29, 29, 31, 0.06), 0 2px 8px rgba(29, 29, 31, 0.04);
  --shadow-md: 0 1px 2px rgba(29, 29, 31, 0.05), 0 12px 32px -12px rgba(29, 29, 31, 0.16);
  --shadow-lg: 0 2px 4px rgba(29, 29, 31, 0.04), 0 32px 64px -24px rgba(29, 29, 31, 0.24);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  /* Damped spring (zeta 0.72, about 4% overshoot), sampled into linear(). Used for keys returning. */
  --spring: linear(0, 0.0628, 0.2064, 0.3794, 0.5494, 0.6982, 0.8177, 0.9068, 0.9683, 1.007, 1.0283, 1.0372, 1.038, 1.0341, 1.0279, 1.0212, 1.0149, 1.0097, 1.0055, 1.0025, 1.0005, 0.9993, 0.9987, 0.9985, 0.9986, 0.9988, 0.999, 0.9993, 1);
  --font: "Segoe UI Variable Text", "Segoe UI Variable", -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", "Noto Sans", Ubuntu, Cantarell, sans-serif;
  --font-display: "Segoe UI Variable Display", "Segoe UI Variable", -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", "Noto Sans", Ubuntu, Cantarell, sans-serif;
  --mono: ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --header-h: 72px;
  --content: 960px; /* the homepage's content width: header bar, stage, downloads, privacy */
  --z-header: 30;
  --z-consent: 40;
  --z-capture: 50;
  color-scheme: light;
  interpolate-size: allow-keywords;
}

* { box-sizing: border-box; }
/* The header is fixed, so anchors land below it. */
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); scrollbar-gutter: stable; -webkit-text-size-adjust: 100%; }

/* Scrollbars: a thin charcoal pill on the warm page, no arrows, the same everywhere on the page.
   Chromium and Safari use the ::-webkit-scrollbar rules; Firefox uses the standard properties. */
::-webkit-scrollbar { width: 12px; height: 12px; background: transparent; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { min-height: 48px; border: 3px solid transparent; border-radius: 999px; background: rgba(29, 29, 31, 0.22) padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: rgba(29, 29, 31, 0.4); }
::-webkit-scrollbar-thumb:active { background-color: rgba(29, 29, 31, 0.55); }
::-webkit-scrollbar-button, ::-webkit-scrollbar-corner { display: none; background: transparent; }
@supports not selector(::-webkit-scrollbar) {
  * { scrollbar-width: thin; scrollbar-color: rgba(29, 29, 31, 0.28) transparent; }
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 16px/24px var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; }
a { color: var(--text); text-decoration-color: var(--line-strong); text-underline-offset: 4px; transition: text-decoration-color 200ms var(--ease-out), color 200ms var(--ease-out); }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; border-radius: 6px; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: 600; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
code { font: 0.875em/1 var(--mono); }
kbd {
  display: inline-block; min-width: 24px; padding: 0 6px; border-radius: 6px;
  background: #fff; color: var(--text); font: 500 12px/20px var(--mono); text-align: center;
  box-shadow: 0 0 0 1px var(--line-strong), 0 1px 0 rgba(29, 29, 31, 0.14);
}
.icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.wrap { width: 100%; max-width: calc(var(--content) + 48px); margin: 0 auto; padding: 0 24px; }
.skip-link { position: absolute; left: 16px; top: -64px; z-index: 60; padding: 8px 12px; border-radius: 8px; background: var(--text); color: #fff; }
.skip-link:focus { top: 16px; color: #fff; }

/* Header -------------------------------------------------------------------------------------- */
/* Fixed, so it never takes space in the flow (no band above the content, no jump on anchors). The
   frosted surface is a pseudo-element so the bar never becomes a containing block for anything. */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-header); padding: 12px 24px 0; pointer-events: none; }
.nav-bar {
  position: relative; isolation: isolate; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  /* As wide as the hero demo and the sample desktop (90% of the page, at most 1180px). */
  width: min(calc((100% + 48px) * 0.9), 1180px); height: 52px; /* 100% + 48px: the header padding back in */ margin: 0 auto; padding: 0 8px 0 16px; border-radius: 14px; pointer-events: auto;
}
.nav-bar::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: rgba(255, 255, 255, 0.8); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: 0 0 0 1px var(--line), var(--shadow-sm);
}
.wordmark { display: inline-flex; align-items: center; gap: 8px; color: var(--text); font: 600 16px/24px var(--font-display); text-decoration: none; white-space: nowrap; }
.mark { width: 24px; height: 24px; flex: none; background: url("favicon.svg") center / 130% no-repeat; }
.nav-links ul { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
.nav-links a { display: flex; align-items: center; height: 36px; padding: 0 12px; border-radius: 8px; color: var(--text-2); font-size: 14px; line-height: 20px; font-weight: 500; text-decoration: none; white-space: nowrap; transition: background-color 200ms var(--ease-out), color 200ms var(--ease-out); }
.nav-links a:hover { background: rgba(29, 29, 31, 0.05); color: var(--text); }
.nav-links a[aria-current="page"] { background: rgba(29, 29, 31, 0.08); color: var(--text); }

/* Buttons --------------------------------------------------------------------------------------- */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 24px;
  border: 0; border-radius: 12px; font: 600 16px/24px var(--font); text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color 200ms var(--ease-out), box-shadow 200ms var(--ease-out), color 200ms var(--ease-out), transform 160ms var(--ease-out);
}
.button:active { transform: scale(0.98); }
.button.small { min-height: 36px; padding: 8px 12px; border-radius: 8px; font-size: 14px; line-height: 20px; }
.button.dark, .button.primary { background: var(--text); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 1px 2px rgba(0, 0, 0, 0.2), 0 8px 16px -8px rgba(0, 0, 0, 0.35); }
.button.dark:hover, .button.primary:hover { background: #3a393d; color: #fff; }
.button.glass, .button.ghost { background: #fff; color: var(--text); box-shadow: 0 0 0 1px var(--line-strong), var(--shadow-sm); }
.button.glass:hover, .button.ghost:hover { background: var(--bg-warm); }
.button[aria-disabled="true"] { background: #ecebe8; color: var(--text-3); box-shadow: none; pointer-events: none; }
/* GitHub star count, filled in by github-stars.js; hidden until the count arrives. */
.gh-stars { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 999px; background: rgba(29, 29, 31, 0.07); color: var(--text-2); font-size: 13px; line-height: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.gh-stars[hidden] { display: none; }
.gh-stars svg { flex: none; width: 13px; height: 13px; color: #e3a008; }
.closing-card .gh-stars { background: rgba(255, 255, 255, 0.14); color: rgba(255, 255, 255, 0.86); }
.text-link { display: inline-flex; align-items: center; gap: 4px; min-height: 48px; padding: 0 8px; color: var(--text); font-weight: 600; text-decoration: none; }
.text-link span { transition: transform 200ms var(--ease-out); }
.text-link:hover span { transform: translateX(4px); }
.tag { flex: none; padding: 0 8px; border-radius: 6px; background: rgba(29, 29, 31, 0.06); color: var(--text-3); font-size: 12px; line-height: 20px; font-weight: 500; white-space: nowrap; }

/* Hero -------------------------------------------------------------------------------------------- */
.hero { padding: calc(var(--header-h) + 16px) 0 48px; background: linear-gradient(180deg, #f3f2ef 0%, var(--bg-warm) 60%, #fbfaf8 100%); }
.hero-copy { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; animation: rise 600ms var(--ease-out) both; }
h1 { padding-bottom: 0.08em; font-size: 40px; line-height: 1; letter-spacing: -0.03em; color: var(--text); }
.lead { max-width: 640px; margin-top: 8px; color: var(--text-2); font-size: 16px; line-height: 24px; }
.lead kbd { font-size: 12px; vertical-align: 1px; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.fine { margin-top: 16px; color: var(--text-3); font-size: 14px; line-height: 20px; }

/* Home page: header, the keyboard-and-chat stage, and the download section. */
.stage { padding: calc(var(--header-h) + 16px) 0 calc(16px + var(--consent)); background: linear-gradient(180deg, #f3f2ef 0%, var(--bg-warm) 70%, #fbfaf8 100%); }
/* The first screen is one viewport tall: headline, the two buttons, and the demo, centered in it. While
   the cookie banner is up, the demo shrinks to stay clear of it (--consent) and the hero's bottom padding
   grows by the same amount, so the hero keeps its height and the sections below never move. */
:root { --reserve: 0px; --consent: 0px; }
html.consent-open { --consent: 112px; } /* set by gtag.js before the first paint */
.stage > .wrap { max-width: none; padding: 0; display: grid; align-content: center; min-height: calc(100svh - var(--header-h) - 32px - var(--reserve) - var(--consent)); }
.stage-head { margin-bottom: 16px; padding: 0 24px; text-align: center; }
.stage-head h1 { font-size: clamp(28px, 3vw, 40px); }
.stage-head .lead { margin: 8px auto 0; }
/* The AI named in the headline (hero-providers.js): its logo and name fade over to the next one. */
.h1-ai { position: relative; display: inline-block; white-space: nowrap; vertical-align: bottom; text-align: left; }
.h1-ai-item {
  display: inline-flex; align-items: center; gap: 0.2em; padding: 0.02em 0.3em 0.04em 0.24em; border-radius: 0.32em;
  background: rgba(29, 29, 31, 0.06); box-shadow: inset 0 0 0 1px rgba(29, 29, 31, 0.06);
}
/* Each AI's pill takes a soft tint of its own color. */
.h1-ai-item[data-provider="claude"] { background: rgba(217, 119, 87, 0.13); box-shadow: inset 0 0 0 1px rgba(217, 119, 87, 0.18); }
.h1-ai-item[data-provider="gemini"] { background: linear-gradient(100deg, rgba(75, 124, 243, 0.13), rgba(138, 115, 230, 0.13) 55%, rgba(211, 106, 169, 0.13)); box-shadow: inset 0 0 0 1px rgba(138, 115, 230, 0.18); }
.h1-ai-item.is-leaving { position: absolute; left: 0; top: 0; pointer-events: none; }
.h1-ai-logo { width: 0.8em; height: 0.8em; flex: none; color: var(--text); }
.stage-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 18px; }
/* One desk: the keyboard is the anchor on the left; the chat is a window standing on the right of the
   same desk, over the end of the keyboard, where the captured context lands. Size containment: the
   chat's messages never make the demo taller; they scroll inside it. */
.demo.is-home {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); justify-self: center; width: min(90%, 1180px);
  height: clamp(340px, calc(100svh - var(--header-h) - 250px - var(--reserve) - var(--consent)), 560px); margin-top: 0; contain: size;
  background: none; box-shadow: none;
}
.is-home .demo-desk {
  grid-column: 1 / -1; grid-row: 1; overflow: hidden; border-radius: var(--radius);
  box-shadow: 0 0 0 1px var(--line-strong), var(--shadow-lg);
  background:
    radial-gradient(90% 70% at 40% 70%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 70%),
    linear-gradient(180deg, #e2dfd9 0%, #eae7e2 45%, #efede9 100%);
}
.is-home .demo-desk::before { display: none; }
/* About half of the board shows; the chat window covers the rest, as if it stood over it on the desk. */
.is-home .demo-desk { container-type: size; }
.demo-desk.is-crop .kb { --u: clamp(40px, min(calc(100cqi / 14), calc(100cqh / 6.4)), 66px); left: calc(var(--u) * 0.6); top: 50%; transform: translateY(-52%); }
.is-home .chat {
  grid-column: 2; grid-row: 1; margin: 16px 16px 16px 0; border-radius: 18px;
  box-shadow: 0 0 0 1px rgba(29, 29, 31, 0.1), 0 2px 4px rgba(29, 29, 31, 0.05), 0 28px 50px -24px rgba(29, 29, 31, 0.45);
}

/* The demo: one workstation. Left: a monitor showing the sample desktop, and the keyboard on the desk
   below it. Right: the chat. One frame, one stacking context for the capture effect. */
.demo {
  --radius: 24px;
  position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  height: 584px; margin-top: 20px; border-radius: var(--radius);
  background: #ebe8e3; box-shadow: 0 0 0 1px var(--line-strong), var(--shadow-lg);
  animation: rise 700ms var(--ease-out) 100ms both;
  transition: box-shadow 250ms var(--ease-out);
}
.demo-desk {
  position: relative; min-height: 0; container-type: inline-size;
  /* The desk under soft top light; the monitor neck meets it at the top. */
  background: radial-gradient(80% 90% at 50% 60%, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 70%);
}
.demo-desk::before { content: ""; position: absolute; left: 50%; top: 0; width: 72px; height: 10px; margin-left: -36px; border-radius: 0 0 6px 6px; background: linear-gradient(180deg, #c9c5be, #d8d4ce); box-shadow: 0 3px 6px rgba(29, 29, 31, 0.2); }

/* Keyboard -------------------------------------------------------------------------------------- */
/* A stationary object seen from the front and slightly above. Depth comes from fixed geometry:
   a thin aluminium bezel with a chamfered top edge and a visible front face, a dark switch plate so
   the gaps between keys sit in shadow, sculpted keycaps (lit left wall, shaded right wall, tall front
   wall, dished top), and two shadows on the desk. Keys away from the shortcut fall slightly out of
   focus. Only the keycaps move. */
.kb {
  --u: clamp(30px, calc(100cqi / 17.6), 38px);
  --gap: calc(var(--u) * 0.06);
  position: absolute; left: 50%; top: 54%;
  padding: calc(var(--u) * 0.2);
  border-radius: calc(var(--u) * 0.26);
  background: linear-gradient(180deg, #f4f3f0 0%, #e9e7e3 55%, #dfdcd7 100%);
  box-shadow:
    inset 0 1px 0 #fff, inset 1px 0 0 rgba(255, 255, 255, 0.7), inset 0 0 0 1px rgba(29, 29, 31, 0.08),
    inset 0 calc(var(--u) * -0.06) calc(var(--u) * 0.1) rgba(29, 29, 31, 0.06),
    0 calc(var(--u) * 0.3) 0 0 #c4bfb8,
    0 calc(var(--u) * 0.3 + 1px) 0 0 #a8a29a,
    0 calc(var(--u) * 0.3 + 3px) 2px 0 rgba(29, 29, 31, 0.32),
    0 calc(var(--u) * 0.55) calc(var(--u) * 0.45) calc(var(--u) * -0.08) rgba(29, 29, 31, 0.24),
    calc(var(--u) * -0.25) calc(var(--u) * 0.9) calc(var(--u) * 1.2) calc(var(--u) * -0.2) rgba(29, 29, 31, 0.14);
  transform: translate(-50%, -50%);
  -webkit-user-select: none; user-select: none; touch-action: manipulation;
}
/* The chamfer where the top surface turns into the front face. */
.kb::after {
  content: ""; position: absolute; left: calc(var(--u) * 0.12); right: 0; bottom: 0; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.85) 15%);
}
.kb-plate {
  display: grid; gap: var(--gap); padding: calc(var(--u) * 0.06); border-radius: calc(var(--u) * 0.12);
  background: linear-gradient(180deg, #8f8a83, #9d978f);
  box-shadow: inset 0 calc(var(--u) * 0.05) calc(var(--u) * 0.1) rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(255, 255, 255, 0.9);
}
.kb-row { display: flex; gap: var(--gap); }

/* Each key is a well in the plate; it clips the cap as the cap sinks. */
.key {
  --w: 1;
  position: relative; flex: none; display: block; overflow: hidden;
  width: calc(var(--u) * var(--w) + var(--gap) * (var(--w) - 1)); height: var(--u);
  padding: 0; margin: 0; border: 0; border-radius: calc(var(--u) * 0.12);
  background: #6f6a64; box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.5);
  color: inherit; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.w125 { --w: 1.25; } .w150 { --w: 1.5; } .w175 { --w: 1.75; } .w200 { --w: 2; } .w225 { --w: 2.25; } .w275 { --w: 2.75; } .w625 { --w: 6.25; } .w700 { --w: 7; }
/* The cap's walls: light from the upper left, so the left wall is brighter and the right one darker. */
.kc {
  position: absolute; inset: 0 0 1px; border-radius: calc(var(--u) * 0.12);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 0) 88%, rgba(29, 29, 31, 0.12) 100%),
    linear-gradient(180deg, #d4cfc8 0%, #c9c3bb 55%, #b3ada4 100%);
  box-shadow: inset 0 -2px 0 rgba(29, 29, 31, 0.18);
  transition: transform 420ms var(--spring);
}
/* The top face: narrower than the base and set back, with a shallow dish. */
.top {
  position: absolute; left: calc(var(--u) * 0.04); right: calc(var(--u) * 0.04); top: 3%; bottom: 13%; display: flex; align-items: center; justify-content: center;
  border-radius: calc(var(--u) * 0.1);
  background:
    radial-gradient(80% 70% at 50% 55%, rgba(29, 29, 31, 0.035), rgba(29, 29, 31, 0) 70%),
    linear-gradient(180deg, #f3f1ed 0%, #ebe8e3 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -1px 0 rgba(29, 29, 31, 0.05), 0 1px 1px rgba(29, 29, 31, 0.14), 0 0 0 0.5px rgba(29, 29, 31, 0.08);
}
.lg { color: #6f6b65; font: 500 calc(var(--u) * 0.25) / 1 var(--font); white-space: nowrap; pointer-events: none; }
.mod .top { align-items: flex-end; justify-content: flex-start; padding: 0 0 calc(var(--u) * 0.1) calc(var(--u) * 0.12); }
.mod .lg { font-size: calc(var(--u) * 0.19); }

/* Depth of field: the shortcut cluster is in focus, the rest of the board falls off softly. */
.key:not(.hot) .kc { filter: blur(0.7px); }
.kb-row:nth-child(-n + 2) .key .kc, .kb-row .key:nth-child(n + 8) .kc { filter: blur(1.3px); }
.kb-row:first-child .key:nth-child(n + 7) .kc { filter: blur(1.8px); }
.key:not(.hot) .lg { color: #8a857e; }

/* Shortcut keys: whiter caps, charcoal legends, sharp. */
.hot .kc {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 0) 88%, rgba(29, 29, 31, 0.1) 100%),
    linear-gradient(180deg, #dcd8d1 0%, #d2ccc4 55%, #bdb7ae 100%);
}
.hot .top { background: radial-gradient(80% 70% at 50% 55%, rgba(29, 29, 31, 0.03), rgba(29, 29, 31, 0) 70%), linear-gradient(180deg, #ffffff 0%, #f8f7f4 100%); }
.hot .lg { color: var(--text); font-weight: 600; }
.top::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1.5px var(--text); opacity: 0; transition: opacity 300ms var(--ease-out); }
.hot.is-lit .top::after { opacity: 1; transition-duration: 120ms; }

/* Travel: fast on the way down, a spring on the way back. */
/* A press is felt rather than travelled: the cap squeezes a little and its face darkens, then
   springs back. It never sinks out of view. */
.top::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: rgba(29, 29, 31, 0.08); box-shadow: inset 0 2px 3px rgba(29, 29, 31, 0.12); opacity: 0; transition: opacity 260ms var(--ease-out); }
.key.is-down .kc { transform: scale(0.965); transition: transform 60ms var(--ease-out); }
.key.is-down .top::before { opacity: 1; transition-duration: 60ms; }
@media (hover: hover) and (pointer: fine) {
  .key:not(.is-down):hover .top { background: linear-gradient(180deg, #f8f7f4 0%, #f1efeb 100%); }
  .hot:not(.is-down):hover .top { background: #fff; }
}
.key:focus-visible { outline: none; }
.key:focus-visible .top { box-shadow: 0 0 0 2px var(--text), inset 0 1px 0 #fff; }

/* Chat window ----------------------------------------------------------------------------------- */
/* A modern AI chat: a quiet header, the conversation, suggested questions and the composer. The
   assistant writes as plain text beside its mark; the person's messages sit in soft bubbles. */
.chat {
  position: relative; z-index: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0;
  border-radius: 0 var(--radius) var(--radius) 0; background: #fff;
  box-shadow: -1px 0 0 var(--line-strong);
}
.chat-head { display: flex; align-items: center; gap: 8px; padding: 10px 16px; box-shadow: 0 1px 0 var(--line); }
.chat-avatar { position: relative; width: 22px; height: 22px; flex: none; border-radius: 7px; background: var(--text); }
.chat-avatar::after { content: ""; position: absolute; inset: 7px; border-radius: 2px; border: 1.5px solid #fff; transform: rotate(45deg); }
.chat-title { font: 600 14px/20px var(--font); }
.chat-sub { margin-left: auto; color: var(--text-3); font-size: 12px; line-height: 16px; }
.chat-log {
  flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 14px; padding: 16px 18px 12px;
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(29, 29, 31, 0.18) transparent;
}
.chat-log > :first-child { margin-top: auto; } /* short conversations sit at the bottom, by the composer */
.chat-day { align-self: center; color: var(--text-3); font-size: 12px; line-height: 16px; }
.msg { max-width: 100%; font-size: 14px; line-height: 21px; }
.msg[hidden], .chat-slot[hidden] { display: none; }
/* The assistant: its mark, then plain text. */
.msg-ai { position: relative; align-self: stretch; padding-left: 32px; color: var(--text); }
.msg-ai::before { content: ""; position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 7px; background: var(--text); }
.msg-ai::after { content: ""; position: absolute; left: 7px; top: 7px; width: 5px; height: 5px; border-radius: 2px; border: 1.5px solid #fff; transform: rotate(45deg); }
.msg-ai p { padding-top: 1px; }
.msg-ai code, .msg-user code { padding: 1px 5px; border-radius: 5px; background: rgba(29, 29, 31, 0.07); font: 500 12.5px/1 var(--mono); }
.msg-ai .tok { transition: opacity 220ms var(--ease-out); }
.msg-ai .tok.is-pending { opacity: 0; }
/* The person. */
.msg-me, .msg-user .question { align-self: flex-end; width: fit-content; max-width: 85%; padding: 8px 14px; border-radius: 18px 18px 6px 18px; background: #efede9; color: var(--text); }
.msg-user { align-self: flex-end; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; width: min(100%, 420px); }
.msg-user .question { max-width: 100%; }
.msg-typing { display: flex; align-items: center; gap: 4px; height: 22px; }
.msg-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--text-3); animation: typing 1s var(--ease-out) infinite; }
.msg-typing span:nth-child(2) { animation-delay: 150ms; }
.msg-typing span:nth-child(3) { animation-delay: 300ms; }
.followups { display: contents; }
.followups > .msg { animation: msg-in 360ms var(--ease-out) both; }
/* Before a capture: the shortcut, as a quiet tip in the conversation. */
.chat-slot { flex: none; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 10px; padding: 10px 12px; border-radius: 12px; background: var(--bg-warm); color: var(--text-3); font-size: 12px; line-height: 16px; text-align: center; }
.slot-keys { display: flex; gap: 4px; }

/* The snapshot attachment in a sent message. */
.ctx { width: 100%; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--line-strong); overflow: hidden; }
.ctx-head { display: flex; align-items: center; gap: 8px; padding: 8px 12px; font-size: 12px; line-height: 16px; box-shadow: 0 1px 0 var(--line); }
.ctx-meta { margin-left: auto; color: var(--text-3); white-space: nowrap; }
/* The attached ContextSnap.md: a document icon on a tile in the chat's own file color (--c-file). */
.ctx-icon { display: inline-grid; place-items: center; width: 20px; height: 20px; flex: none; border-radius: 6px; background: var(--c-file, #ff5588); color: #fff; }
.ctx-doc { width: 62%; height: 62%; }
.md { margin: 0; font: 400 12px/20px var(--mono); color: #3f3d40; white-space: pre-wrap; overflow-wrap: anywhere; tab-size: 2; }
.md b { color: var(--text); font-weight: 600; }
.md i { color: #87837e; font-style: normal; }
.md mark { padding: 0 4px; border-radius: 4px; background: rgba(29, 29, 31, 0.1); color: var(--text); }
.ctx-md { max-height: 190px; overflow: auto; padding: 8px 12px; white-space: normal; overscroll-behavior: contain; background: var(--bg-warm); }
.ctx-md:focus-visible { outline-offset: -2px; }
.ctx-md .ln { display: block; min-height: 15px; white-space: pre-wrap; font-size: 10.5px; line-height: 15px; }
.ctx-md .ln.is-heading, .ctx-md .ln.is-strong { color: var(--text); font-weight: 600; }
.ctx-md .ln.is-muted { color: #8a867f; }
.ctx-toggle { width: 100%; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.ctx-toggle:hover { background: rgba(29, 29, 31, 0.03); }
.ctx-chevron { width: 8px; height: 8px; margin: 0 4px 2px 0; border: solid var(--text-3); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); transition: transform 250ms var(--ease-out); }
.ctx-toggle[aria-expanded="true"] .ctx-chevron { transform: translateY(3px) rotate(225deg); }
.msg-user .ctx-md { max-height: 84px; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 50%, transparent); mask-image: linear-gradient(180deg, #000 50%, transparent); transition: max-height 300ms var(--ease-out); }
.msg-user .ctx-md.is-open { max-height: 260px; overflow: auto; -webkit-mask-image: none; mask-image: none; }

/* Suggested questions: one row that scrolls sideways, so the conversation keeps its height. */
.suggest { display: flex; gap: 6px; padding: 0 16px 8px; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
.suggest::-webkit-scrollbar { display: none; }
.chip { flex: none; }
.chip { padding: 6px 10px; border: 0; border-radius: 999px; background: #fff; color: var(--text); font: 500 12px/16px var(--font); cursor: pointer; box-shadow: inset 0 0 0 1px var(--line-strong); transition: background-color 200ms var(--ease-out), box-shadow 200ms var(--ease-out), opacity 200ms var(--ease-out); }
.chip:hover { background: var(--bg-warm); box-shadow: inset 0 0 0 1px var(--text-3); }
.chip:active { transform: scale(0.98); }
.chip:disabled { opacity: 0.45; cursor: default; }

/* The composer: the pasted snapshot as an attachment, the message being typed, and send. */
.chat-composer {
  display: flex; flex-direction: column; gap: 8px; margin: 0 12px 12px; padding: 8px; border-radius: 20px; background: #fff;
  box-shadow: 0 0 0 1px var(--line-strong), 0 2px 6px rgba(29, 29, 31, 0.05);
  transition: box-shadow 250ms var(--ease-out);
}
.chat-composer.is-focused { box-shadow: 0 0 0 1px rgba(29, 29, 31, 0.32), 0 4px 14px rgba(29, 29, 31, 0.08); }
.composer-attach { display: flex; align-items: center; gap: 8px; width: fit-content; max-width: 100%; padding: 6px 12px 6px 6px; border-radius: 12px; background: var(--bg-warm); box-shadow: inset 0 0 0 1px var(--line); animation: attach-in 360ms var(--spring) both; }
.composer-attach[hidden] { display: none; }
.composer-attach.is-handoff { animation: none; } /* the context stack has just landed on it */
.composer-attach .ctx-icon { width: 30px; height: 30px; border-radius: 8px; }
.attach-text { display: flex; flex-direction: column; min-width: 0; font-size: 12px; line-height: 16px; }
.attach-text b { font-weight: 600; }
.attach-text span { color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.composer-row { display: flex; align-items: center; gap: 8px; }
.composer-plus { position: relative; width: 28px; height: 28px; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line-strong); }
.composer-plus::before, .composer-plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.5px; margin: -0.75px 0 0 -5px; border-radius: 1px; background: var(--text-2); }
.composer-plus::after { transform: rotate(90deg); }
.composer-text { flex: 1; min-width: 0; overflow: hidden; color: var(--text-3); font-size: 14px; line-height: 20px; white-space: nowrap; text-overflow: ellipsis; }
.composer-text.is-typed { color: var(--text); }
.chat-composer.is-focused .composer-text.is-typed::after { content: ""; display: inline-block; width: 1.5px; height: 16px; margin-left: 1px; vertical-align: -3px; background: var(--text); animation: caret 1s steps(1) infinite; }
.send { position: relative; width: 32px; height: 32px; flex: none; border-radius: 50%; background: #dad7d2; transition: background-color 200ms var(--ease-out), transform 200ms var(--ease-out); }
.send::after { content: ""; position: absolute; left: 12px; top: 13px; width: 7px; height: 7px; border: solid #fff; border-width: 2px 2px 0 0; transform: rotate(-45deg); }
.chat-composer.is-ready .send { background: var(--text); }
@keyframes attach-in { from { opacity: 0; transform: translateY(6px) scale(0.96); } }
@keyframes caret { 50% { opacity: 0; } }

/* AI chat skins (hero-providers.js) ------------------------------------------------------------- */
/* One chat, dressed as ChatGPT, Claude, Gemini, or Cursor: each skin sets the colors, type, message
   shapes, and composer of that product. The provider marks in the header switch between them. */
.chat {
  --c-bg: #fff; --c-text: #0d0d0d; --c-muted: #8f8f8f; --c-line: rgba(0, 0, 0, 0.08);
  --c-user: #f4f4f4; --c-user-text: #0d0d0d; --c-user-radius: 18px;
  --c-box: #fff; --c-box-line: rgba(0, 0, 0, 0.1); --c-box-radius: 26px;
  --c-send: #0d0d0d; --c-send-fg: #fff; --c-send-radius: 50%; --c-code: rgba(0, 0, 0, 0.06);
  --c-font: ui-sans-serif, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --c-ai-font: var(--c-font);
  --c-size: 14px; --c-lh: 22px; --c-file: #ff5588;
  background: var(--c-bg); color: var(--c-text); font-family: var(--c-font);
  transition: background-color 280ms var(--ease-out), color 280ms var(--ease-out);
}
.chat-head { gap: 6px; color: var(--c-text); box-shadow: 0 1px 0 var(--c-line); }
.chat-mark { width: 18px; height: 18px; flex: none; color: var(--c-text); }
.chat-title { font: 600 15px/20px var(--c-font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-caret { width: 6px; height: 6px; flex: none; margin: 0 0 4px 3px; border: solid var(--c-muted); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.chat .chat-day, .chat .chat-sub { color: var(--c-muted); }
.chat .msg { font-size: var(--c-size); line-height: var(--c-lh); }
.chat .msg-ai { color: var(--c-text); font-family: var(--c-ai-font); }
.chat .msg-me, .chat .msg-user .question { background: var(--c-user); color: var(--c-user-text); border-radius: var(--c-user-radius); }
.chat .msg-ai code, .chat .msg-user code { background: var(--c-code); color: inherit; }
.chat .chat-slot { background: var(--c-user); color: var(--c-muted); }
.chat .chip { background: var(--c-box); color: var(--c-text); box-shadow: inset 0 0 0 1px var(--c-box-line); }
.chat .chip:hover { background: var(--c-user); }
.chat .chat-composer { border-radius: var(--c-box-radius); background: var(--c-box); box-shadow: 0 0 0 1px var(--c-box-line), 0 4px 14px -6px rgba(0, 0, 0, 0.12); }
.chat .chat-composer.is-focused { box-shadow: 0 0 0 1px var(--c-box-line), 0 6px 18px -6px rgba(0, 0, 0, 0.2); }
.chat .composer-text { color: var(--c-muted); font-family: var(--c-font); }
.chat .composer-text.is-typed { color: var(--c-text); }
.chat .chat-composer.is-focused .composer-text.is-typed::after { background: var(--c-text); }
.chat .composer-plus { box-shadow: inset 0 0 0 1px var(--c-box-line); }
.chat .composer-plus::before, .chat .composer-plus::after { background: var(--c-muted); }
.chat .send { border-radius: var(--c-send-radius); background: color-mix(in srgb, var(--c-send) 22%, transparent); }
.chat .send::after { border-color: var(--c-send-fg); }
.chat .chat-composer.is-ready .send { background: var(--c-send); }
.chat .composer-attach, .chat .ctx { background: var(--c-box); box-shadow: inset 0 0 0 1px var(--c-box-line); }
.chat .ctx-head { box-shadow: 0 1px 0 var(--c-line); color: var(--c-text); }
.chat .ctx-md { background: var(--c-user); }
.chat .md, .chat .ctx-md .ln.is-heading, .chat .ctx-md .ln.is-strong { color: var(--c-text); }
.chat .attach-text b { color: var(--c-text); }
.chat .chat-log { scrollbar-color: color-mix(in srgb, var(--c-text) 20%, transparent) transparent; }

/* ChatGPT: plain white, gray rounded user bubbles, no assistant avatar, a pill composer. */
.chat[data-provider="chatgpt"] .msg-ai { padding-left: 0; }
.chat[data-provider="chatgpt"] .msg-ai::before, .chat[data-provider="chatgpt"] .msg-ai::after { display: none; }

/* Claude: warm paper, serif answers, beige user bubbles, the orange send button. */
.chat[data-provider="claude"] {
  --c-bg: #faf9f5; --c-text: #3d3929; --c-muted: #8a8678; --c-line: rgba(61, 57, 41, 0.1);
  --c-user: #f0eee6; --c-user-text: #3d3929; --c-user-radius: 14px;
  --c-box: #fff; --c-box-line: rgba(61, 57, 41, 0.14); --c-box-radius: 18px;
  --c-send: #c96442; --c-send-radius: 9px; --c-code: rgba(61, 57, 41, 0.08);
  --c-ai-font: ui-serif, Georgia, Cambria, "Times New Roman", serif; --c-size: 15px; --c-lh: 24px; --c-file: #c96442;
}
.chat[data-provider="claude"] .msg-ai { padding-left: 0; }
.chat[data-provider="claude"] .msg-ai::before, .chat[data-provider="claude"] .msg-ai::after { display: none; }
/* Claude's spark under the latest answer, as in Claude's own chat. */
.chat[data-provider="claude"] .msg-reply:last-child::after {
  display: block; position: static; content: ""; width: 18px; height: 18px; margin-top: 8px; border: 0; border-radius: 0; transform: none;
  background: url("claude.svg") center / contain no-repeat;
}
.chat[data-provider="claude"] .chat-title { font-weight: 500; }

/* Gemini: the four-point sparkle beside each answer, soft blue-gray prompts, a filled pill composer. */
.chat[data-provider="gemini"] {
  --c-text: #1f1f1f; --c-muted: #747775; --c-user: #e9eef6; --c-user-text: #1f1f1f; --c-user-radius: 22px 6px 22px 22px;
  --c-box: #f0f4f9; --c-box-line: transparent; --c-box-radius: 28px; --c-send: #0b57d0; --c-code: #eef1f6;
  --c-size: 14.5px; --c-lh: 23px; --c-file: #1a73e8;
}
.chat[data-provider="gemini"] .chat-composer { box-shadow: none; }
.chat[data-provider="gemini"] .chat-composer.is-focused { box-shadow: 0 0 0 1px #c4d7f5; }
/* The official Gemini mark (gemini.svg, from Simple Icons) beside each answer. */
.chat[data-provider="gemini"] .msg-ai::before { width: 20px; height: 20px; border-radius: 0; background: url("gemini.svg") center / contain no-repeat; }
.chat[data-provider="gemini"] .msg-ai::after { display: none; }
.chat[data-provider="gemini"] .chat-title { font-weight: 500; font-size: 17px; }

/* Cursor: the dark editor pane, bordered prompt boxes, compact monospace-friendly type. */
.chat[data-provider="cursor"] {
  --c-bg: #181818; --c-text: #e4e4e4; --c-muted: #8b8b8b; --c-line: #2b2b2b;
  --c-user: #232323; --c-user-text: #e4e4e4; --c-user-radius: 8px;
  --c-box: #1f1f1f; --c-box-line: #353535; --c-box-radius: 10px; --c-send: #e4e4e4; --c-send-fg: #181818;
  --c-code: #2c2c2c; --c-size: 13px; --c-lh: 20px; --c-file: #3a3a3a;
}
.chat[data-provider="cursor"] .msg-ai { padding-left: 0; }
.chat[data-provider="cursor"] .msg-ai::before, .chat[data-provider="cursor"] .msg-ai::after { display: none; }
.chat[data-provider="cursor"] .msg-me, .chat[data-provider="cursor"] .msg-user .question { align-self: stretch; width: auto; max-width: none; box-shadow: inset 0 0 0 1px #353535; }
.chat[data-provider="cursor"] .msg-user { width: 100%; }
.chat[data-provider="cursor"] .chat-title { font-size: 13px; font-weight: 500; }
.chat[data-provider="cursor"] .composer-plus { width: auto; height: 22px; padding: 0 8px; border-radius: 6px; box-shadow: none; background: #2a2a2a; color: #cfcfcf; font: 500 11px/22px var(--c-font); }
.chat[data-provider="cursor"] .composer-plus::before { content: "\221E  Agent"; position: static; width: auto; height: auto; margin: 0; background: none; white-space: pre; }
.chat[data-provider="cursor"] .composer-plus::after { display: none; }
.chat[data-provider="cursor"] .send { width: 24px; height: 24px; }
.chat[data-provider="cursor"] .send::after { left: 8px; top: 9px; width: 6px; height: 6px; }

/* Provider marks in the header: the switcher, with the turn's progress under the active mark. */
.providers { display: flex; gap: 2px; margin-left: auto; padding: 3px; border-radius: 999px; background: color-mix(in srgb, var(--c-text) 6%, transparent); }
.provider {
  position: relative; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%;
  background: none; color: var(--c-text); cursor: pointer; opacity: 0.5; overflow: hidden;
  transition: opacity 200ms var(--ease-out), background-color 200ms var(--ease-out);
}
.provider svg { width: 16px; height: 16px; }
.provider:hover { opacity: 0.85; }
.provider[aria-selected="true"] { opacity: 1; background: var(--c-bg); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12); }
.provider:focus-visible { outline: 2px solid var(--c-text); outline-offset: 1px; }
.provider-progress { position: absolute; left: 7px; right: 7px; bottom: 3px; height: 2px; border-radius: 1px; background: currentColor; opacity: 0.55; transform: scaleX(0); transform-origin: left; }

/* The collection beside the keyboard (hero-providers.js): three compact mock source cards that rise
   from the keyboard, compress into a stack beside the chat, and hop into it. */
.hc { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.hc-card {
  position: absolute; display: flex; align-items: center; gap: 8px; width: 160px; height: 42px; padding: 0 12px; border-radius: 11px;
  background: #fff; color: var(--text); font: 600 12px/16px var(--font); white-space: nowrap; opacity: 0; will-change: transform, opacity;
  box-shadow: 0 0 0 1px var(--line-strong), 0 12px 24px -12px rgba(29, 29, 31, 0.45);
}
.hc-card b { overflow: hidden; text-overflow: ellipsis; }
.hc-card { overflow: hidden; }
/* The attachment's face, fading in over the top card as it arrives. */
.hc-face { position: absolute; inset: 0; margin: 0; width: auto; max-width: none; animation: none; }
.hc-ic { width: 16px; height: 16px; flex: none; }

/* The ContextSnap.md card that flies from the C key into the composer. */
.snap-fly {
  position: absolute; left: 0; top: 0; z-index: 6; display: grid; gap: 5px; width: 150px; padding: 10px 12px 12px; border-radius: 12px;
  background: #fff; box-shadow: 0 0 0 1px rgba(29, 29, 31, 0.12), 0 14px 30px -12px rgba(29, 29, 31, 0.45); pointer-events: none; will-change: transform, opacity;
}
.snap-fly[hidden] { display: none; }
.snap-fly b { display: flex; align-items: center; gap: 6px; font: 600 12px/16px var(--font); color: var(--text); }
.snap-fly .ctx-icon { width: 16px; height: 16px; border-radius: 4px; background: var(--text); }
.snap-fly i { display: block; height: 4px; border-radius: 2px; background: #e4e1dc; }
.snap-fly i:nth-of-type(2) { width: 80%; }
.snap-fly i:nth-of-type(3) { width: 55%; }
@media (prefers-reduced-motion: reduce) { .snap-fly { display: none; } }

/* Capture effect ------------------------------------------------------------------------------- */
/* Layers above everything in the frame, below nothing outside it: scrim (5), pixels (6), wash (7),
   status pill (8). keyboard-demo.js adds the pixels for one run and removes them afterwards. */
.demo[data-state="capturing"], .demo[data-state="copied"] { box-shadow: 0 0 0 2px var(--text), var(--shadow-lg); }
/* The capture effect (capture-fx.js). The page version covers the whole browser window; the sample
   desktop has its own copy clipped to its screen (.is-local). A light edge shade, not a veil, so the
   content stays readable; the pixel bars are drawn on a canvas in .capture-scan; a faint lift at the
   tallest moment. It never takes pointer input. */
.capture { position: fixed; inset: 0; z-index: var(--z-capture); overflow: hidden; pointer-events: none; }
.capture.is-local { position: absolute; z-index: 70; }
.capture-scrim {
  position: absolute; inset: 0; opacity: 0; background: rgba(28, 30, 36, 0.05);
  box-shadow: inset 0 0 64px rgba(28, 30, 36, 0.24);
  transition: opacity 380ms var(--ease-out);
}
.capture.is-on .capture-scrim { opacity: 1; transition-duration: 120ms; }
.capture-scan { position: absolute; inset: 0; }
.capture-flash { position: absolute; inset: 0; opacity: 0; background: rgba(255, 255, 255, 0.1); transition: opacity 360ms var(--ease-out); }
.capture.is-peak .capture-flash { opacity: 1; transition-duration: 140ms; }
.capture-scan canvas { position: absolute; left: 0; top: 0; display: block; }

@keyframes flash { 0% { opacity: 0; } 18% { opacity: 0.85; } 100% { opacity: 0; } }
@keyframes msg-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes typing { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }
@keyframes spin { to { transform: rotate(360deg); } }

/* The shortcut keys in the chat light up while they are held. */
.slot-keys kbd { transition: background-color 200ms var(--ease-out), color 200ms var(--ease-out); }
.slot-keys kbd.is-held { background: var(--text); color: #fff; }

/* Sections -------------------------------------------------------------------------------------- */
.section { padding: 96px 0; }
.band { background: var(--bg-band); }
.kicker { margin-bottom: 12px; color: var(--text-3); font-size: 14px; line-height: 20px; font-weight: 600; }
h2 { max-width: 680px; font-size: 36px; line-height: 40px; letter-spacing: -0.025em; }
.section-lead { max-width: 36em; margin-top: 16px; color: var(--text-2); font-size: 18px; line-height: 28px; }
h3 { font-size: 18px; line-height: 28px; letter-spacing: -0.01em; }

/* Downloads, privacy, and the closing call to action ------------------------------------------- */
.get, .privacy, .closing { background: #fbfaf8; }
/* The sections below the first screen skip style, layout, and paint until they come near the viewport,
   which keeps the first layout small and makes the sample desktop's replay free while it is off screen.
   The sizes are estimates used only until each section has been rendered once. */
.desk-section, .get, .privacy, .closing { content-visibility: auto; }
.desk-section { contain-intrinsic-size: auto 760px; }
.get { contain-intrinsic-size: auto 480px; }
.privacy { contain-intrinsic-size: auto 460px; }
.closing { contain-intrinsic-size: auto 260px; }
.privacy-note { max-width: 680px; margin-left: auto; margin-right: auto; text-align: center; }
.get, .privacy { padding: 88px 0 0; }
.get-head { max-width: 560px; margin: 0 auto 32px; text-align: center; }
.get-head h2 { font-size: clamp(28px, 3vw, 36px); line-height: 1.15; }
.get-head p { margin-top: 10px; color: var(--text-2); font-size: 16px; line-height: 24px; }
.get-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 16px 0 0; padding: 0; list-style: none; }
.get-tags li, .get-tags a { padding: 4px 10px; border-radius: 999px; background: #fff; color: var(--text-2); font-size: 12px; line-height: 16px; font-weight: 500; box-shadow: inset 0 0 0 1px var(--line-strong); text-decoration: none; }
.get-tags li:has(a) { padding: 0; box-shadow: none; background: none; }
.get-tags a { display: block; }
.get-tags a:hover { color: var(--text); box-shadow: inset 0 0 0 1px var(--text-3); }

/* Two columns: the cards in the first row (one height), each card's details under it in the second. */
.downloads { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.downloads > .download { grid-row: 1; min-width: 0; }
.downloads > [data-platform="linux"], #dl-linux-details { grid-column: 2; }
.downloads > .dl-body { grid-row: 2; align-self: start; }
.dl-body [data-variant][hidden] { display: none; } /* only the installer or the ZIP steps */
.download { display: flex; flex-direction: column; gap: 20px; padding: 24px; border-radius: 22px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 1px 2px rgba(29, 29, 31, 0.04), 0 18px 40px -28px rgba(29, 29, 31, 0.35); }
.dl-top { display: flex; align-items: center; gap: 16px; }
.os-logo { width: 48px; height: 48px; flex: none; object-fit: contain; }
.download h3 { font-size: 22px; line-height: 28px; }
.download .detail { margin-top: 2px; color: var(--text-3); font-size: 13px; line-height: 18px; }
.dl-specs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; border-radius: 14px; background: var(--bg-warm); }
.dl-specs div { padding: 10px 14px; }
.dl-specs div + div { box-shadow: inset 1px 0 0 var(--line); }
.dl-specs dt { color: var(--text-3); font-size: 11px; line-height: 14px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; }
.dl-specs dd { margin: 2px 0 0; font: 600 14px/20px var(--font); font-variant-numeric: tabular-nums; }
.dl-button { width: 100%; min-height: 48px; font-size: 15px; }
.dl-button[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }
.dl-more {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; margin-top: auto; padding: 14px 0 0;
  border: 0; border-top: 1px solid var(--line); background: none; color: var(--text-2); font: 500 13px/18px var(--font); text-align: left; cursor: pointer;
}
.dl-more::after { content: ""; flex: none; width: 7px; height: 7px; margin: 0 4px 3px 0; border: solid var(--text-3); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); transition: transform 250ms var(--ease-out); }
.dl-more[aria-expanded="true"] { color: var(--text); }
.dl-more[aria-expanded="true"]::after { margin-bottom: -3px; transform: rotate(225deg); }
.dl-more:hover { color: var(--text); }
.dl-more:focus-visible { outline: 2px solid var(--text); outline-offset: 4px; border-radius: 4px; }
/* Open details continue their card: the card's lower corners square off and the panel joins it, with no
   gap and one outline. app.js animates the height when it opens and closes. */
.download { transition: border-radius 200ms var(--ease-out); }
.download.is-expanded { border-bottom-left-radius: 0; border-bottom-right-radius: 0; box-shadow: 0 0 0 1px var(--line); }
.dl-body {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: -1px; padding: 8px 24px 24px; overflow: hidden;
  border-radius: 0 0 22px 22px; background: #fff;
  box-shadow: 0 0 0 1px var(--line), 0 18px 40px -28px rgba(29, 29, 31, 0.35);
  clip-path: inset(1px -60px -60px -60px); /* no outline line where it meets the card */
}
.dl-body[hidden] { display: none; }
.dl-body-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.dl-body .install-note { grid-column: 1 / -1; }
.dl-group { min-width: 0; }
.dl-group h4 { margin: 0 0 8px; color: var(--text-3); font: 600 11px/14px var(--font); text-transform: uppercase; letter-spacing: 0.04em; }
.dl-steps, .dl-reqs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin: 0; padding: 0 0 0 20px; color: var(--text-2); font-size: 13px; line-height: 20px; }
.dl-steps li, .dl-reqs li { min-width: 0; }
.dl-steps li::marker { color: var(--text-3); font-weight: 600; }
.dl-reqs li::marker { color: var(--text-3); }
.dl-group a { color: var(--text); }
.dl-group code { font: 500 12px/1 var(--mono); }
.dl-steps kbd { margin-right: 2px; }
.dl-code { margin: 8px 0 0; padding: 10px 12px; overflow-x: auto; border-radius: 10px; background: #1d1d1f; color: #f3f2ef; }
.dl-code code { font: 400 12px/19px var(--mono); white-space: pre; }
.dl-group .checksum { display: block; padding: 8px 10px; border-radius: 8px; background: var(--bg-warm); color: var(--text-2); font: 500 12px/18px var(--mono); overflow-wrap: anywhere; user-select: all; }
.dl-hint { margin-top: 8px; color: var(--text-3); font-size: 12px; line-height: 18px; }
.dl-hint + .dl-code { margin-top: 4px; }
.install-note:empty { display: none; }
.install-note { color: var(--text-3); font-size: 12px; line-height: 18px; }

.privacy-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.privacy-list li { padding: 22px 24px; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.privacy-list h3 { font-size: 16px; line-height: 22px; }
.privacy-list p { margin-top: 6px; color: var(--text-2); font-size: 14px; line-height: 21px; }
.get-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; margin-top: 20px; }

.closing { padding: 88px 0 96px; }
.closing-card { padding: 56px 24px; border-radius: 28px; background: #1d1d1f; color: #fff; text-align: center; }
.closing-card h2, .get-head h2 { margin: 0 auto; }
.closing-card h2 { font-size: clamp(26px, 3vw, 36px); line-height: 1.15; color: #fff; }
.closing-card p { margin: 10px auto 0; max-width: 440px; color: rgba(255, 255, 255, 0.68); font-size: 16px; line-height: 24px; }
.closing-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 24px; }
.closing-card .button.dark { background: #fff; color: var(--text); }
.closing-card .button.ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28); }
.closing-card .button.ghost:hover { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6); }

.link-button { padding: 0; border: 0; background: none; color: var(--text-2); font: inherit; cursor: pointer; }
.link-button:hover { color: var(--text); text-decoration: underline; text-underline-offset: 4px; }

/* Context collector (collector.js): an icon at the bottom right; its overlay shows the collected
   snapshot's parts as cards over a blurred page. */
.collector {
  position: fixed; right: max(20px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom)); z-index: 45;
  display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 14px;
  background: rgba(255, 255, 255, 0.88); color: var(--text); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 0 0 1px var(--line-strong), 0 8px 24px -10px rgba(29, 29, 31, 0.35); cursor: pointer;
  transition: background-color 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
.collector:hover { background: #fff; box-shadow: 0 0 0 1px var(--text-3), 0 10px 28px -10px rgba(29, 29, 31, 0.4); }
.collector:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
.collector-ic { width: 22px; height: 22px; overflow: visible; }
/* While cards fly in, the clip lifts open and the board leans toward them; it snaps shut at the end. */
.cb-clip, .cb-sheet { transform-box: fill-box; }
.cb-clip { transform-origin: 50% 100%; transition: transform 420ms var(--spring); }
.cb-sheet { transform-origin: 50% 0; opacity: 0; }
.collector-ic { transition: transform 420ms var(--spring); }
.collector.is-receiving { box-shadow: 0 0 0 1px #1d1d1f, 0 14px 32px -12px rgba(29, 29, 31, 0.5); }
.collector.is-receiving .collector-ic { transform: translateY(1px) rotate(-6deg); }
.collector.is-receiving .cb-clip { transform: translateY(-2.4px) rotate(-16deg); transition-duration: 260ms; }
/* While cards land, the icon turns into a tiny dark screen and the same white pixel bars as the window
   edges grow in from its edges (capture-fx.js). */
.collector .capture.is-icon { position: absolute; inset: 0; z-index: 0; border-radius: inherit; }
.collector-ic, .collector-badge { position: relative; z-index: 1; }
.collector-badge { position: absolute; }
.collector { transition: background-color 260ms var(--ease-out), color 260ms var(--ease-out), box-shadow 200ms var(--ease-out); }
.collector.is-receiving { background: #1d1d1f; color: #fff; }
.collector.is-receiving .cb-sheet { fill: #4a4a4e; }
.collector-ripple { position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 1.5px var(--text); opacity: 0; pointer-events: none; }
.collector-badge {
  position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--text); color: #fff; font: 600 11px/18px var(--font); text-align: center; box-shadow: 0 0 0 2px #fbfaf8;
}
.collector-badge[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .cb-clip, .collector-ic { transition: none; } }
.collect-fly { position: fixed; inset: 0; z-index: 47; overflow: hidden; pointer-events: none; }
/* A collected card in flight: a small document with a thin border, a label, and a few lines as captured. */
.fly-card {
  position: absolute; left: 0; top: 0; overflow: hidden; min-height: 200px; padding: 14px 16px 16px; border: 1px solid rgba(29, 29, 31, 0.2); border-radius: 14px;
  background: #fff; color: var(--text); opacity: 0; transform-origin: 50% 50%; will-change: transform, opacity;
  box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(29, 29, 31, 0.08), 0 12px 24px -12px rgba(29, 29, 31, 0.45);
}
.fly-label {
  display: flex; align-items: center; gap: 5px; margin: 0 0 5px; padding-bottom: 4px; overflow: hidden;
  border-bottom: 1px solid var(--line); font: 600 15px/20px var(--font); white-space: nowrap;
}
.fly-label span { overflow: hidden; text-overflow: ellipsis; }
.fly-label .src-ic { width: 18px; height: 18px; }
.fly-lines {
  margin: 0; overflow: hidden; color: #55534f; font: 12.5px/20px var(--mono); white-space: pre;
  -webkit-mask-image: linear-gradient(90deg, #000 78%, transparent); mask-image: linear-gradient(90deg, #000 78%, transparent);
}

/* No panel: the dialog fills the screen and is transparent; the cards sit in a row in the middle. */
.collect {
  width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: transparent; color: var(--text); box-shadow: none;
}
/* No transform on the dialog: the cards flying out of the icon are positioned against the screen. */
.collect[open] { display: block; overflow: visible; animation: fade 200ms var(--ease-out) both; }
.collect-out { position: fixed; inset: 0; z-index: 2; pointer-events: none; }
.collect-out .collect-card { position: absolute; margin: 0; }
.collect-cards.is-arriving .collect-card { visibility: hidden; }
.collect::backdrop { background: rgba(24, 23, 26, 0.26); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: opacity 360ms var(--ease-out); }
/* Closing: the cards fly back into the icon (collector.js) while the blur and the text fade. */
.collect.is-closing::backdrop { opacity: 0; transition-delay: 120ms; }
.collect .collect-body, .collect .collect-close { transition: opacity 200ms var(--ease-out); }
.collect.is-closing .collect-body, .collect.is-closing .collect-close { opacity: 0; }
.collect-close { position: fixed; top: 20px; right: 20px; z-index: 3; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, 0.92); box-shadow: 0 0 0 1px var(--line), var(--shadow-sm); }
.collect-close:hover { background: #fff; }
.collect-body {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px;
  height: 100%; padding: 72px 24px 32px; overflow: auto; overscroll-behavior: contain;
}
.collect-foot { display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 0; text-align: center; }
.collect-meta { color: var(--text-2); font-size: 13px; line-height: 18px; }
.collect-empty { max-width: 420px; padding: 24px 28px; border-radius: 16px; background: #fff; color: var(--text-2); font-size: 14px; line-height: 22px; text-align: center; box-shadow: 0 0 0 1px var(--line), var(--shadow-lg); }
.collect-empty[hidden], .collect-cards[hidden], .collect-detail[hidden] { display: none; }
.collect-cards {
  --card-w: clamp(240px, 34vw, 340px);
  --overlap: max(36px, calc((4 * var(--card-w) - (100vw - 48px)) / 3));
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; row-gap: 24px; max-width: 1480px; margin: 0; padding: 0 0 0 var(--overlap); list-style: none;
}
.collect-cards li { position: relative; margin-left: calc(-1 * var(--overlap)); }
.collect-cards li:hover, .collect-cards li:focus-within { z-index: 1; }
/* Cards land one after another with a small tilt, and straighten when pointed at. */
.collect-card {
  /* About 340px wide; four share one row, overlapping as much as the screen needs. */
  display: grid; align-content: start; gap: 4px; width: var(--card-w); min-width: 0; min-height: 220px; padding: 18px 20px 20px; border: 0; border-radius: 16px;
  background: #fff; color: var(--text); font: inherit; text-align: left; cursor: pointer;
  box-shadow: 0 0 0 1px rgba(29, 29, 31, 0.14), 0 2px 4px rgba(29, 29, 31, 0.06), 0 22px 40px -18px rgba(29, 29, 31, 0.5);
  transform: rotate(var(--r, 0deg));
  transition: transform 260ms cubic-bezier(0.34, 1.4, 0.64, 1), box-shadow 200ms var(--ease-out);
}
.collect-card:hover, .collect-card:focus-visible { transform: translateY(-12px) rotate(0deg); box-shadow: 0 0 0 1px var(--line-strong), 0 2px 4px rgba(29, 29, 31, 0.06), 0 30px 50px -20px rgba(29, 29, 31, 0.55); }
.collect-card:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.ccard-cat { display: flex; align-items: center; gap: 7px; min-width: 0; color: var(--text-2); font-size: 13px; font-weight: 600; line-height: 18px; white-space: nowrap; }
.ccard-app { overflow: hidden; color: var(--text-3); font-weight: 400; text-overflow: ellipsis; }
.src-ic { width: 16px; height: 16px; flex: none; }
.ccard-title { overflow: hidden; font-size: 17px; font-weight: 600; line-height: 24px; white-space: nowrap; text-overflow: ellipsis; }
.ccard-cat .src-ic { width: 18px; height: 18px; }
.ccard-preview {
  margin: 10px 0 0; overflow: hidden; color: #55534f; font: 13px/20px var(--mono); white-space: pre;
  -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent);
}
.collect-detail { display: flex; flex-direction: column; gap: 4px; width: min(680px, 100%); max-height: calc(100vh - 180px); padding: 20px 22px 22px; overflow: auto; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px var(--line), var(--shadow-lg); animation: fade 180ms ease both; }
.collect-detail h3 { font-size: 17px; line-height: 24px; overflow-wrap: anywhere; }
.collect-back {
  position: relative; align-self: flex-start; margin: 0 0 8px -8px; padding: 4px 10px 4px 22px; border: 0; border-radius: 8px;
  background: none; color: var(--text-2); font: 500 13px/20px var(--font); cursor: pointer;
}
.collect-back::before { content: ""; position: absolute; left: 10px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border: solid currentColor; border-width: 0 0 1.5px 1.5px; transform: rotate(45deg); }
.collect-back:hover { background: var(--surface-2); color: var(--text); }
.card-src { display: flex; align-items: center; gap: 8px; color: var(--text-2); font-size: 13px; font-weight: 600; line-height: 20px; }
.card-src .src-ic { width: 20px; height: 20px; }
.card-desc { color: var(--text-2); font-size: 13px; line-height: 20px; }
.card-sim { color: var(--text-2); font-size: 11px; line-height: 16px; opacity: 0.85; }
.card-close { position: relative; width: 32px; height: 32px; flex: none; border: 0; border-radius: 8px; background: none; color: var(--text-2); cursor: pointer; }
.card-close::before, .card-close::after { content: ""; position: absolute; left: 50%; top: 50%; width: 13px; height: 1.5px; margin-left: -6.5px; background: currentColor; transform: rotate(45deg); }
.card-close::after { transform: rotate(-45deg); }
.card-close:hover { background: var(--surface-2); color: var(--text); }
.card-full { margin: 10px 0 0; padding: 14px 16px; overflow: auto; border-radius: 10px; background: var(--bg-warm); color: #3f3d40; font: 12px/18px var(--mono); white-space: normal; }
.card-full .ln { display: block; min-height: 18px; white-space: pre-wrap; overflow-wrap: anywhere; }
.card-full .is-heading, .card-full .is-strong { color: var(--text); font-weight: 600; }
.card-full .is-muted { color: #8a867f; }
.card-full mark { padding: 0 3px; border-radius: 3px; background: rgba(29, 29, 31, 0.1); color: var(--text); }

/* Privacy: the last section of the page. */

/* Cookie consent banner (created by gtag.js) */
.consent {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: var(--z-consent); max-width: 560px; margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 16px; border-radius: 16px;
  background: rgba(255, 255, 255, 0.92); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: 0 0 0 1px var(--line), var(--shadow-lg); animation: rise 500ms var(--ease-out) both;
}
.consent p { flex: 1 1 260px; font-size: 14px; line-height: 20px; color: var(--text); }
.consent-actions { display: flex; gap: 8px; }
.consent .button { min-height: 40px; padding: 8px 16px; font-size: 14px; line-height: 20px; }

/* Scroll reveals: once, on the base curve. */
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 1023px) {
}

@media (max-width: 767px) {
  :root { --header-h: 60px; }
  .site-header { padding: 8px 8px 0; }
  .nav-bar { width: auto; height: 48px; padding: 0 4px 0 12px; }
  .nav-links a { padding: 0 8px; }
  .stage { padding-top: calc(var(--header-h) + 12px); padding-bottom: calc(16px + var(--consent)); }
  /* The hero fills the screen above the reserved bottom edge exactly: headline, then the demo takes the
     rest. The reserve keeps the collector (and the cookie banner, while it shows) clear of the chat. */
  :root { --reserve: 64px; }
  .stage > .wrap { height: calc(100svh - var(--header-h) - 28px - var(--reserve) - var(--consent)); min-height: calc(520px - var(--consent)); grid-template-rows: auto minmax(0, 1fr); align-content: stretch; }
  .stage-head { margin-bottom: 12px; padding: 0 16px; }
  .stage-head h1 { font-size: 26px; line-height: 30px; }
  .stage-head .lead { font-size: 14px; line-height: 20px; }
  /* Stacked on a phone: a strip of the keyboard above the chat. */
  html.consent-open { --consent: 86px; }
  /* A shorter cookie banner on phones, so the hero above it keeps enough room. */
  .consent { gap: 10px 12px; padding: 12px 14px; }
  .consent p { flex-basis: 100%; font-size: 13px; line-height: 18px; }
  .consent .button { min-height: 36px; padding: 6px 14px; }
  .stage-actions .button { flex: 1; }
  .demo.is-home { width: calc(100% - 16px); grid-template-columns: minmax(0, 1fr); grid-template-rows: 140px minmax(0, 1fr); height: auto; min-height: 290px; }
  .is-home .demo-desk { grid-row: 1 / -1; grid-column: 1; }
  .demo-desk.is-crop .kb { --u: 40px; left: 14px; top: calc(126px - 5.6 * var(--u)); transform: none; }
  .is-home .chat { grid-row: 2; grid-column: 1; margin: -16px 10px 10px; border-radius: 16px; }
  /* While the cookie banner is up, the collector waits (a capture then fills it without the flight). */
  html.consent-open .collector { display: none; }
  html.consent-open .suggest { display: none; }
  .downloads { grid-template-columns: minmax(0, 1fr); }
  .downloads > .download, .downloads > .dl-body, .downloads > [data-platform="linux"], #dl-linux-details { grid-column: 1; grid-row: auto; }
  .downloads > [data-platform="linux"] { order: 2; }
  #dl-linux-details { order: 3; }
  .downloads > [data-platform="linux"] { margin-top: 12px; }
  .dl-body { padding: 8px 20px 20px; }
  .privacy-list { grid-template-columns: minmax(0, 1fr); }
  .get, .privacy { padding-top: 64px; }
  .get { contain-intrinsic-size: auto 780px; }
  .privacy { contain-intrinsic-size: auto 830px; }
  .closing { contain-intrinsic-size: auto 330px; }
  .download { padding: 20px; }
  .dl-specs div { padding: 10px; }
  .privacy-list li { padding: 18px 20px; }
  .closing { padding: 64px 0 72px; }
  .closing-card { padding: 40px 20px; border-radius: 24px; }
  .closing-actions .button { flex: 1 1 100%; }
  .collect-cards { --card-w: min(320px, calc(100vw - 48px)); flex-direction: column; flex-wrap: nowrap; padding: 120px 0 0; }
  .collect-cards li { margin: -120px 0 0; }
  .wrap { padding: 0 16px; }
  .hero { padding-top: calc(var(--header-h) + 24px); padding-bottom: 48px; }
  .hero-copy { flex-direction: column; align-items: flex-start; }
  h1 { font-size: 32px; line-height: 36px; }
  .demo { --radius: 20px; margin-top: 16px; grid-template-rows: auto 600px; }
}

/* Reduced motion: no sweeps or movement; the frame outline, status pill, and messages still change
   state so it stays clear that the shortcut ran. */
@media (prefers-reduced-motion: reduce) {
  .collect-card, .collect-card:hover, .collect-card:focus-visible { transform: none; transition: none; animation: none; }
  .collect[open], .collect-detail { animation: none; }
  html { scroll-behavior: auto; }
  .hero-copy, .demo, .consent { animation: fade 200ms ease both; }
  .msg-typing span { animation: none; }
    .key .kc, .key.is-down .kc { transform: none !important; transition: none !important; }
  .demo.is-flash .demo-flash { animation: none; }
  .followups > .msg, .composer-attach { animation: fade 200ms ease both; }
  .chat-composer .composer-text.is-typed::after { animation: none; }
  .text-link:hover span, .button:active { transform: none; }
}