/* Colors from docs/brand/MARKETING.md, section 5 (vscode-defaults and the
   brand accents of themes.py); fonts from section 6. Dark is the default,
   as in the app; the hero is docs/brand/hero-{dark,light}.svg. */

/* Geist and Geist Mono (OFL-1.1, fonts/OFL.txt), variable 100-900, from
   @fontsource-variable/geist{,-mono} 5.3.0: latin and latin-ext, plus the
   box-drawing block for the folder trees. Self-hosted, no font CDN. */
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("fonts/geist-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("fonts/geist-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("fonts/geist-mono-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("fonts/geist-mono-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("fonts/geist-mono-symbols2-wght-normal.woff2") format("woff2");
  unicode-range: U+2000-2001, U+2004-2008, U+200A, U+23B8-23BD, U+2500-259F;
}

/* The theme: the system's (color-scheme: dark light), or the one picked in
   the header (html[data-theme], site.js). Each color is light-dark(light,
   dark); what is not a color (the hero, the logos) is set just below. */
:root {
  --bg: light-dark(#ffffff, #1f1f1f);
  /* The hero SVG's own top-left color: hero and page meet without a seam. */
  --bg-deep: light-dark(#ffffff, #1f1f1f);
  --panel: light-dark(#f8f8f8, #181818);
  --widget: light-dark(#ffffff, #202020);
  --border: light-dark(#e5e5e5, #2b2b2b);
  --fg: light-dark(#3b3b3b, #cccccc);
  --title: light-dark(#0f3d2e, #f2f2f2);
  --desc: light-dark(#717171, #9d9d9d);
  --accent: light-dark(#047857, #10b981);
  --accent-hover: light-dark(#065f46, #0ea572);
  --on-accent: light-dark(#ffffff, #04140d);
  --link: light-dark(#047857, #34d399);
  --mint: light-dark(#047857, #6ee7b7);
  --warm: light-dark(#c2410c, #f97316);
  --amber: light-dark(#b45309, #fbbf24);
  --code-bg: light-dark(#f8f8f8, #0a0a0a);
  --button2: light-dark(#e5e5e5, #313131);
  --button2-hover: light-dark(#cccccc, #3c3c3c);
  --hover: light-dark(#f2f2f2, #2a2d2e);
  --ok: light-dark(#007100, #73c991);
  --emu: light-dark(#855f00, #cca700);
  --no: light-dark(#a0a0a0, #6b6b6b);
  --glass: light-dark(rgb(255 255 255 / 0.78), rgb(24 24 24 / 0.72));
  --shadow: 0 30px 76px light-dark(rgb(15 61 46 / 0.16), rgb(0 0 0 / 0.55));
  --hero: url("hero-dark.svg");
  --ui: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Consolas, monospace;
  color-scheme: dark light;
}
:root[data-theme="dark"] { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }
/* Light, by the system or by choice: the two selectors hold the same rules. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) { --hero: url("hero-light.svg"); }
  :root:not([data-theme="dark"]) .logo-dark { display: none; }
  :root:not([data-theme="dark"]) .logo-light { display: block; }
}
:root[data-theme="light"] { --hero: url("hero-light.svg"); }
:root[data-theme="light"] .logo-dark { display: none; }
:root[data-theme="light"] .logo-light { display: block; }

* { box-sizing: border-box; }
/* overflow-x on html too: on body it does not reach the viewport, and a phone
   widened its layout to the tools matrix (min-width 760px) and zoomed the page out. */
html { scroll-behavior: smooth; scroll-padding-top: 64px; overflow-x: clip; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 16px/1.6 var(--ui);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
code {
  font: 0.86em var(--mono);
  background: var(--code-bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.05em 0.35em;
  white-space: nowrap;
}
h1, h2, h3 { color: var(--title); line-height: 1.12; margin: 0 0 0.6em; }
h2 { font-size: clamp(1.75rem, 4vw, 2.75rem); letter-spacing: -0.035em; font-weight: 700; }
h3 { font-size: 1.1rem; letter-spacing: -0.015em; font-weight: 600; }
p { margin: 0 0 1em; }
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 16px; }
.muted { color: var(--desc); }
.small { font-size: 0.875rem; }
section { padding: 96px 0; position: relative; }
.band { background: var(--panel); border-block: 1px solid var(--border); }
.eyebrow { font: 500 0.78rem var(--mono); color: var(--accent); letter-spacing: 0.06em; margin-bottom: 8px; }
.eyebrow::after { content: ""; display: inline-block; width: 40px; height: 1px; background: currentColor; vertical-align: middle; margin-left: 12px; opacity: 0.6; }

/* Header */
.top {
  position: fixed; inset: 0 0 auto; z-index: 20;
  transition: background 0.3s, border-color 0.3s;
  border-bottom: 1px solid transparent;
}
.top.scrolled { background: var(--glass); backdrop-filter: blur(12px); border-color: var(--border); }
.top-row { display: flex; align-items: center; gap: 24px; height: 60px; }
.brand { display: flex; }
.logo { height: 25px; width: auto; }
.logo-light { display: none; }
.nav { display: flex; gap: 22px; margin-left: auto; font-size: 0.9rem; }
.nav a { color: var(--fg); }
.nav a:hover { color: var(--title); text-decoration: none; }
/* The language menu: a <details>, so it opens without JavaScript too
   (site.js closes it on a click outside or Escape). */
.langs { position: relative; }
.lang-menu summary, .theme-cycle {
  display: flex; align-items: center; gap: 7px; height: 28px; padding: 0 9px;
  border: 1px solid var(--border); border-radius: 7px; background: none;
  font: 500 0.8rem var(--mono); color: var(--fg); cursor: pointer; list-style: none;
}
.lang-menu summary::-webkit-details-marker { display: none; }
.lang-menu summary:hover, .lang-menu[open] summary, .theme-cycle:hover { color: var(--title); border-color: color-mix(in srgb, var(--title) 30%, var(--border)); }
.lang-menu summary:focus-visible, .theme-cycle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lang-menu .chev { width: 14px; height: 14px; color: var(--desc); transition: transform 0.2s; }
.lang-menu[open] .chev { transform: rotate(180deg); }
.lang-menu b { font-weight: 500; }
.flag { display: flex; width: 18px; height: 12px; border-radius: 2px; overflow: hidden; box-shadow: 0 0 0 1px color-mix(in srgb, var(--fg) 18%, transparent); }
.flag svg { width: 100%; height: 100%; }
.lang-menu ul {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 170px;
  margin: 0; padding: 4px; list-style: none;
  background: var(--panel); border: 1px solid var(--border); border-radius: 9px; box-shadow: var(--shadow);
}
.lang-menu li a, .lang-menu li span[aria-current] {
  display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 6px;
  font-size: 0.875rem; color: var(--fg);
}
.lang-menu li b { font: 500 0.75rem var(--mono); color: var(--desc); width: 1.6em; }
.lang-menu li a:hover { background: var(--hover); color: var(--title); text-decoration: none; }
.lang-menu li [aria-current] { background: var(--button2); color: var(--title); }
/* The theme: one button through system, light and dark (site.js), with the
   current one's icon. It needs site.js, so only with .js. */
.theme-cycle { display: none; padding: 0; width: 30px; justify-content: center; }
.js .theme-cycle { display: flex; }
.theme-cycle svg { display: none; width: 16px; height: 16px; }
:root:not([data-theme]) .theme-cycle [data-icon="system"],
:root[data-theme="light"] .theme-cycle [data-icon="light"],
:root[data-theme="dark"] .theme-cycle [data-icon="dark"] { display: block; }
@media (max-width: 820px) { .nav { display: none; } .langs { margin-left: auto; } .top-row { gap: 10px; } }

/* Hero */
.hero { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: min(104px, 10vh) 0 min(40px, 2vh); overflow: hidden; background: var(--bg-deep); }
.hero-bg {
  position: absolute; inset: -4%;
  background: var(--hero) center right / cover no-repeat;
  animation: drift 24s ease-in-out infinite alternate;
}
.hero::after {
  /* Fades the hero into the page, and keeps the text side readable. */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, var(--bg-deep) 0%, color-mix(in srgb, var(--bg-deep) 70%, transparent) 38%, transparent 62%),
    linear-gradient(0deg, var(--bg) 0%, transparent 18%);
}
@keyframes drift { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.06) translate(-1.5%, 1%); } }
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.25fr 1fr; gap: 56px; align-items: center; width: 100%; }
.kicker { font: 500 0.78rem var(--mono); text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent); }
/* Geist runs wider and darker than Segoe UI: 700 and a tighter track keep
   the display lines on the same measure. */
.hero h1 { font-size: clamp(2.2rem, min(4.5vw, 5.6vh), 3.75rem); letter-spacing: -0.045em; font-weight: 700; line-height: 1.04; margin-bottom: 0.4em; }
.hero h1 em {
  font-style: normal;
  background: linear-gradient(100deg, var(--accent) 0%, var(--amber) 60%, var(--warm) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lead { font-size: clamp(1.1rem, 2vw, 1.35rem); color: var(--title); max-width: 34ch; }
.zero { color: var(--desc); max-width: 46ch; }
.cta { display: flex; flex-wrap: wrap; gap: 12px; margin: min(32px, 3.5vh) 0 14px; }
.btn {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 24px;
  border-radius: 8px; font-weight: 600; font-size: 0.98rem; text-decoration: none;
  transition: transform 0.2s, background 0.2s, box-shadow 0.2s;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn-primary { background: var(--accent); color: var(--on-accent); box-shadow: 0 10px 30px color-mix(in srgb, var(--accent) 35%, transparent); }
.btn-primary:hover { background: var(--accent-hover); box-shadow: 0 14px 36px color-mix(in srgb, var(--accent) 45%, transparent); }
.btn-ghost { color: var(--title); border: 1px solid color-mix(in srgb, var(--title) 25%, transparent); background: color-mix(in srgb, var(--bg) 40%, transparent); backdrop-filter: blur(6px); }
.btn-ghost:hover { border-color: var(--accent); }
.btn:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.release-note { font-size: 0.875rem; color: var(--desc); }

/* The app icon above the kit folder card: only on narrow screens, where the
   hero's atoll fades behind the text; on wide ones the atoll is the picture. */
.hero-side { position: relative; justify-self: end; width: 100%; max-width: 480px; }
.app-icon { display: none; }

/* The kit folder card */
.kit {
  margin: 0; width: 100%;
  background: var(--glass); backdrop-filter: blur(14px);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
  border-radius: 14px; box-shadow: var(--shadow); overflow: hidden;
}
.kit-tree { margin: 0; padding: 20px 20px 8px; font: 0.85rem/1.75 var(--mono); color: var(--fg); overflow-x: auto; }

/* A window's bar (.win: the hero's kit, the gallery's screenshots), as the
   visitor's system draws it (download.js sets html[data-os]); the brand's
   dots until then, or without JavaScript. */
.win-bar { position: relative; display: flex; align-items: center; gap: 6px; min-height: 40px; padding: 10px 14px; border-bottom: 1px solid var(--border); font: 0.75rem var(--mono); color: var(--desc); }
.win-dots { display: flex; gap: 6px; }
.win-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--button2); }
.win-dots i:first-child { background: var(--warm); }
.win-dots i:nth-child(2) { background: var(--amber); }
.win-dots i:nth-child(3) { background: var(--accent); }
.win-title { margin-left: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.win-ctl { display: none; margin-left: auto; color: var(--fg); }
.win-ctl i { position: relative; display: block; }
.win-ctl i::before, .win-ctl i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 1px; background: currentColor; transform: translate(-50%, -50%); }
.win-ctl .max::before { width: 9px; height: 9px; background: none; border: 1px solid currentColor; box-sizing: border-box; }
.win-ctl .min::after, .win-ctl .max::after { content: none; }
.win-ctl .close::before { transform: translate(-50%, -50%) rotate(45deg); }
.win-ctl .close::after { transform: translate(-50%, -50%) rotate(-45deg); }
/* macOS: the three lights on the left, the title in the middle. */
:root[data-os="darwin"] .win-dots i { width: 12px; height: 12px; }
:root[data-os="darwin"] .win-dots i:first-child { background: #ff5f57; }
:root[data-os="darwin"] .win-dots i:nth-child(2) { background: #febc2e; }
:root[data-os="darwin"] .win-dots i:nth-child(3) { background: #28c840; }
:root[data-os="darwin"] .win-title,
:root[data-os="linux"] .win-title { position: absolute; left: 50%; transform: translateX(-50%); max-width: 55%; margin: 0; font-family: var(--ui); font-weight: 600; color: var(--title); }
/* Windows 11: the title on the left, minimise, maximise and close on the right. */
:root[data-os="win32"] .win { border-radius: 8px; }
:root[data-os="win32"] .win-bar { padding: 0 0 0 14px; font-family: var(--ui); }
:root[data-os="win32"] .win-dots { display: none; }
:root[data-os="win32"] .win-title { margin-left: 0; color: var(--title); }
:root[data-os="win32"] .win-ctl { display: flex; align-self: stretch; }
:root[data-os="win32"] .win-ctl i { width: 46px; }
:root[data-os="win32"] .win-ctl .close::before, :root[data-os="win32"] .win-ctl .close::after { width: 13px; }
:root[data-os="win32"] .win:hover .win-ctl .close { background: #c42b1c; color: #fff; }
/* Linux (GNOME): the title in the middle, one round close button on the right. */
:root[data-os="linux"] .win-bar { min-height: 46px; padding: 8px 11px; }
:root[data-os="linux"] .win-dots { display: none; }
:root[data-os="linux"] .win-title { font-weight: 700; }
:root[data-os="linux"] .win-ctl { display: flex; }
:root[data-os="linux"] .win-ctl .min, :root[data-os="linux"] .win-ctl .max { display: none; }
:root[data-os="linux"] .win-ctl .close { width: 24px; height: 24px; border-radius: 50%; background: color-mix(in srgb, var(--fg) 14%, transparent); }
:root[data-os="linux"] .win-ctl .close::before, :root[data-os="linux"] .win-ctl .close::after { width: 9px; height: 1.5px; }
.t-dir { color: var(--link); font-weight: 600; }
.t-exe { color: var(--warm); font-weight: 600; }
.t-l { color: var(--desc); }
.t-c { color: var(--desc); }
.kit-targets { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 20px 20px; margin: 0; }
.kit-targets li { font: 0.72rem var(--mono); padding: 3px 8px; border: 1px solid var(--border); border-radius: 999px; color: var(--desc); }
.kit-targets li.here { border-color: var(--accent); color: var(--title); background: color-mix(in srgb, var(--accent) 18%, transparent); }
.kit-targets li.here::before { content: "● "; color: var(--accent); }

/* Narrow desktops: the text column keeps both buttons on one line (the
   kit's tree sets the side column's width, so the buttons get narrower),
   and the stats stay on the first screen with the title in every language. */
@media (min-width: 861px) and (max-width: 1100px) {
  .hero-grid { grid-template-columns: 1.6fr 1fr; gap: 32px; }
  .btn { padding: 0 18px; }
  .kit-tree { font-size: 0.78rem; }
  .stat { padding-left: 16px; padding-right: 16px; }
  .stat span { font-size: 0.8rem; }
}
@media (max-width: 860px) {
  .hero { min-height: auto; padding-top: 110px; }
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero::after { background: linear-gradient(180deg, color-mix(in srgb, var(--bg-deep) 55%, transparent), var(--bg-deep) 70%), linear-gradient(0deg, var(--bg) 0%, transparent 18%); }
  .hero-side { justify-self: stretch; max-width: none; padding-top: 88px; }
  .app-icon {
    display: block; position: absolute; top: 0; right: 16px; width: 72px; height: 72px;
    filter: drop-shadow(0 10px 22px rgb(0 0 0 / 0.4)) drop-shadow(0 0 28px color-mix(in srgb, var(--accent) 25%, transparent));
  }
}

/* Entrance and reveals: only with JavaScript, never with reduced motion */
.js .rise { opacity: 0; transform: translateY(18px); animation: rise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) forwards; animation-delay: calc(var(--d) * 110ms + 120ms); }
@keyframes rise { to { opacity: 1; transform: none; } }
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1); transition-delay: var(--rd, 0ms); }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .hero-bg { animation: none; }
  .js .rise, .js .reveal { opacity: 1; transform: none; animation: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* Stats */
/* The first label (the six systems) is three times the others: its column
   is wider, so the four labels take about as many lines and the row stays low. */
.stats-row { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; width: 100%; margin-top: min(48px, 3vh); border: 1px solid var(--border); border-radius: 14px; background: var(--panel); position: relative; z-index: 2; box-shadow: var(--shadow); }
.stat { padding: min(26px, 2.4vh) 24px; border-left: 1px solid var(--border); }
.stat:first-child { border-left: 0; }
.stat b { display: block; font: 700 clamp(2rem, 4vw, 2.75rem)/1 var(--ui); color: var(--title); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.stat:nth-child(1) b { color: var(--accent); }
.stat:nth-child(4) b { color: var(--warm); }
.stat span { display: block; margin-top: 8px; color: var(--desc); font-size: 0.875rem; line-height: 1.35; }
@media (max-width: 760px) {
  .stats-row { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(3) { border-left: 0; }
  .stat:nth-child(n + 3) { border-top: 1px solid var(--border); }
}

/* Features bento */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; margin-top: 40px; }
.tile {
  grid-column: span 3; position: relative; overflow: hidden;
  background: var(--widget); border: 1px solid var(--border); border-radius: 14px; padding: 28px;
  transition: border-color 0.3s, transform 0.3s;
}
.tile:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); transform: translateY(-2px); }
.tile p { margin: 0; }
.tile-a { grid-column: span 4; }
.tile-b { grid-column: span 2; }
.tile-c { grid-column: span 2; }
.tile-d { grid-column: span 4; }
.tile-e {
  grid-column: 1 / -1; padding: 36px;
  background:
    linear-gradient(110deg, var(--widget) 45%, transparent),
    var(--hero) right center / cover no-repeat;
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
}
.tile-e p { max-width: 62ch; }
.tile-n { display: inline-block; font: 700 0.85rem var(--mono); color: var(--accent); margin-bottom: 14px; }
.tile-n.warm { color: var(--warm); font-size: 1.6rem; letter-spacing: -0.02em; }
.tile::before {
  /* A soft glow that follows the pointer (site.js sets --mx and --my). */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.3s;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%);
}
.tile:hover::before { opacity: 1; }
.tile > * { position: relative; }
@media (max-width: 860px) { .tile, .tile-a, .tile-b, .tile-c, .tile-d { grid-column: 1 / -1; } }

/* Gallery */
.gallery { padding-top: 40px; }
.shots { display: grid; grid-template-columns: 1.6fr 1fr; grid-template-rows: auto auto; gap: 20px; margin-top: 40px; }
.shot { margin: 0; min-width: 0; }
.shot-main { grid-row: span 2; }
.frame { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--widget); box-shadow: var(--shadow); }
.frame .win-bar { background: var(--panel); }
/* 2560×1640 screenshots: 60px of title bar and 56px of status bar cut away
   (30 and 28 at 1×, as VSCodium 1.135's modern UI, D-142); the frame's
   .win-bar stands in for the title bar. */
.crop { aspect-ratio: 2560 / 1524; overflow: hidden; }
.crop picture { display: block; }
.crop img { display: block; width: 100%; height: auto; margin-top: -2.34375%; }
.shot figcaption { font-size: 0.875rem; color: var(--desc); margin-top: 10px; }
.shot-main .frame { transform: perspective(1600px) rotateY(4deg); transform-origin: left center; transition: transform 0.6s; }
.shot-main:hover .frame { transform: none; }
@media (max-width: 860px) {
  .shots { grid-template-columns: 1fr; }
  .shot-main { grid-row: auto; }
  .shot-main .frame { transform: none; }
}

/* Steps */
.steps { list-style: none; padding: 0; margin: 40px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; counter-reset: s; }
.steps li { counter-increment: s; padding: 28px; border: 1px solid var(--border); border-radius: 14px; background: var(--widget); position: relative; }
.steps li::before {
  content: "0" counter(s); display: block; font: 700 3rem/1 var(--ui); letter-spacing: -0.05em; margin-bottom: 14px;
  background: linear-gradient(120deg, var(--accent), var(--amber)); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.steps p { margin: 0; }
@media (max-width: 760px) { .steps { grid-template-columns: 1fr; } }

/* How it works: the program's own traits, never a comparison (MARKETING.md, section 4) */
.aspects { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px 56px; margin-top: 40px; }
.aspects article { border-left: 2px solid var(--accent); padding-left: 20px; }
.aspects article:nth-child(even) { border-color: var(--warm); }
.aspects p { margin: 0; }
@media (max-width: 760px) { .aspects { grid-template-columns: 1fr; } }

/* Still to do: the same grid as How it works, then a line on how to help */
.todo-help { margin-top: 40px; }

/* Tool matrix (site/matrix.mjs): one row per component, a column per target */
.mx-scroll { overflow-x: auto; margin-top: 32px; border: 1px solid var(--border); border-radius: 12px; }
.mx { width: 100%; border-collapse: collapse; font-size: 0.9rem; min-width: 760px; }
.mx th, .mx td { padding: 8px 10px; border-bottom: 1px solid var(--border); }
.mx thead th { background: var(--panel); color: var(--title); font-weight: 600; text-align: center; }
.mx .os-head { border-left: 1px solid var(--border); }
.mx .arch { font: 0.75rem var(--mono); color: var(--desc); font-weight: 400; }
.mx .mx-corner { text-align: left; vertical-align: bottom; }
.mx tbody th[scope="row"] { text-align: left; font-weight: 400; position: sticky; left: 0; background: var(--bg); min-width: 240px; max-width: 360px; }
.mx-name { display: block; font-weight: 600; color: var(--title); }
.mx-name a { color: inherit; }
.mx-desc { display: block; color: var(--desc); font-size: 0.8rem; line-height: 1.4; }
.mx-kind th { text-align: left; background: var(--panel); color: var(--accent); font: 600 0.8rem var(--mono); text-transform: uppercase; letter-spacing: 0.06em; position: sticky; left: 0; }
.mx-kind span { color: var(--desc); margin-left: 6px; }
.mx td { text-align: center; font-weight: 700; width: 9%; cursor: default; }
.mx-ok { color: var(--ok); }
.mx-emu { color: var(--emu); }
.mx-no, .mx-dep { color: var(--no); }
.mx tbody tr:hover > * { background: var(--hover); }
/* The visitor's system (assets/download.js adds .here) */
.mx .here { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.mx tbody tr:hover > td.here { background: color-mix(in srgb, var(--accent) 20%, var(--hover)); }
.mx thead th.here { color: var(--accent); box-shadow: inset 0 -2px 0 var(--accent); }
.mx-here { display: none; font: 600 0.65rem var(--ui); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 2px; }
.mx th.here .mx-here { display: block; }
.mx-legend { font-size: 0.875rem; color: var(--desc); margin-top: 12px; }
.mx-legend span { font-weight: 700; margin-left: 12px; }
.mx-legend span:first-child { margin-left: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Targets */
.targets { list-style: none; padding: 0; margin: 32px 0 24px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.targets li {
  display: grid; grid-template-columns: auto 1fr; grid-template-areas: "os code" "note note" "files files";
  gap: 4px 12px; align-items: baseline;
  background: var(--widget); border: 1px solid var(--border); border-radius: 12px; padding: 18px;
  transition: border-color 0.3s;
}
.targets li:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.targets li.here { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent); }
.targets .os { grid-area: os; font-weight: 600; color: var(--title); }
.targets code { grid-area: code; justify-self: start; }
.targets .note { grid-area: note; color: var(--desc); font-size: 0.875rem; }
.targets .files { grid-area: files; display: flex; flex-wrap: wrap; gap: 4px 16px; font: 0.85rem var(--mono); margin-top: 4px; }
.targets .missing { color: var(--desc); text-decoration: line-through; pointer-events: none; }
@media (max-width: 760px) { .targets { grid-template-columns: 1fr; } }
.link { font-weight: 600; }

/* Finale: the hero again, mirrored */
.finale { overflow: hidden; padding: 140px 0; background: var(--bg-deep); text-align: center; }
.finale-bg { position: absolute; inset: 0; background: var(--hero) center / cover no-repeat; transform: scaleX(-1); opacity: 0.9; }
.finale::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 70% at 50% 50%, color-mix(in srgb, var(--bg-deep) 80%, transparent), transparent); pointer-events: none; }
.finale-inner { position: relative; z-index: 1; max-width: 760px; }
.finale-icon { display: block; width: 96px; height: 96px; margin: 0 auto 28px; filter: drop-shadow(0 16px 32px rgb(0 0 0 / 0.4)); }
.finale h2 { font-size: clamp(2.2rem, 5.3vw, 3.85rem); letter-spacing: -0.045em; font-weight: 700; }
.finale p { color: var(--title); font-size: 1.15rem; }
.finale .cta { justify-content: center; }
.finale-privacy { font-size: 0.9rem !important; color: var(--desc) !important; max-width: 60ch; margin: 32px auto 0; }
.finale-privacy b { color: var(--title); }

/* Footer */
.foot { border-top: 1px solid var(--border); background: var(--panel); padding: 24px 0; color: var(--desc); font-size: 0.9rem; }
.foot-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; }