/* FluxDM — production site.
 * 1 fonts · 2 tokens · 3 base, type, buttons · 4 header · 5 hero · 6 figures (the box of every moving picture) · 7 sections ·
 * 8 the machine's tabs · 9 lab · 10 measured band · 11 download · 12 install · 13 FAQ · 14 footer · 15 legal + 404 ·
 * 16 motion
 *
 * Built to hold by construction. Nothing here depends on JavaScript, on the scroll position or on a viewport height:
 * no fixed or sticky stage, no 100vh, no negative-margin overlay, no overflow clipping on html or body. Every 3D or
 * animated piece is a figure, an ordinary block whose height comes from its width and a CSS aspect-ratio; its still is
 * its content and the live canvas or the video takes the same box. Layouts are grids and flex rows that wrap; every grid track is
 * minmax(0, …) so that a long word can never widen a column; text wraps (overflow-wrap) instead of sticking out.
 * Two layouts only: stacked (under 960 px) and two columns (960 px and up), plus one row of three for the figures.
 * Light by default; dark only under :root[data-theme="dark"] (theme.js), never from the system setting. */

/* 1 ------------------------------------------------------------------------------------------------ fonts */
@font-face {
  font-family: "Flux Display";
  src: url("/assets/fonts/montserrat-latin-800-normal.woff2?v=48041005d0") format("woff2");
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("/assets/fonts/geist-latin-wght-normal.woff2?v=87597c1109") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("/assets/fonts/geist-mono-latin-wght-normal.woff2?v=73285cf213") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

/* 2 ------------------------------------------------------------------------------------------------ tokens */
:root {
  --paper: #eef1f8;          /* the page */
  --surface: #ffffff;        /* cards, figures, controls */
  --ink: #011850;            /* brand navy: 15.0:1 on --paper */
  --ink-2: #3c4770;          /* 8.1:1 on --paper */
  --ink-3: #535d82;          /* 5.9:1 on --paper, 6.6:1 on white */
  --line: #d3dbec;
  --line-2: #aab7d6;
  --blue: #004ce8;           /* 5.8:1 on --paper; white on it 6.6:1 */
  --blue-hi: #003cc0;
  --link: #004ce8;           /* text links: 5.8:1 on --paper, 6.6:1 on white */
  --flow-a: #0346e0;         /* the two blues of the light, shared by both scenes */
  --flow-b: #0a8ff2;
  --live: #0d7a52;           /* the live dot: 5.2:1 on white */
  --amber: #a14d00;          /* network cut: 5.6:1 on white */
  --focus: #0047d6;
  --map-track: #e3e9f5;
  --band: #011850;
  --band-ink: #ffffff;
  --band-ink-2: #c3cdf0;
  --tint: rgba(0, 76, 232, .07);
  --stage: #f2f5fb;          /* the fixed light backdrop of the machine's clips (the same in both themes: one set of clips) */
  --shadow: 0 1px 2px rgba(1, 24, 80, .07);   /* the only shadow level */
  --r-s: 8px;
  --r-m: 12px;
  --r-l: 18px;
  --wrap: 1320px;
  --gutter: clamp(16px, 4vw, 56px);
  --tap: 44px;
  --display: "Flux Display", "Montserrat", "Arial Black", system-ui, sans-serif;
  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --paper: #05080f;
  --surface: #0b1020;
  --ink: #eef3ff;            /* 18:1 on --paper */
  --ink-2: #b4bfdf;          /* 10.6:1 */
  --ink-3: #8f9bc0;          /* 7.1:1 */
  --line: #1c2745;
  --line-2: #33426c;
  --blue: #2c66f6;           /* buttons: white on it 4.84:1 */
  --blue-hi: #4a7dff;
  --link: #7aa2ff;           /* text links: 8.0:1 on --paper, 7.1:1 on --band */
  --flow-a: #3a7bff;
  --flow-b: #3ee6ff;
  --live: #3ddc97;
  --amber: #ffb547;
  --focus: #22d3ff;
  --map-track: #16203f;
  --band: #0c1630;
  --band-ink: #eef3ff;
  --band-ink-2: #b4bfdf;
  --tint: rgba(77, 134, 255, .12);
  --shadow: none;
  color-scheme: dark;
}

/* 3 ------------------------------------------------------------------------------------------------ base, type, buttons */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font: 400 1rem/1.6 var(--sans);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
p, h1, h2, h3, h4, dl, dd, ul, ol, fieldset, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
fieldset { border: 0; min-width: 0; }
code { font: 500 .92em/1.4 var(--mono); overflow-wrap: anywhere; }
h1, h2, h3, h4, p, li, dt, dd, summary, label, legend { overflow-wrap: break-word; }
:focus { outline: none; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: var(--r-s); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 16px; top: -100px; z-index: 50; padding: 10px 16px; border-radius: var(--r-s); background: var(--ink); color: var(--paper); font-weight: 600; text-decoration: none; }
.skip:focus-visible { top: 12px; }
.wrap { width: min(100%, var(--wrap)); margin-inline: auto; padding-inline: var(--gutter); }
.ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ic--16 { width: 16px; height: 16px; }
.ic--14 { width: 14px; height: 14px; }
/* platform pictograms (drawn for this site): outlines in ink, accent parts and glass faces in the blue of the light */
.pic { width: 48px; height: 48px; flex: none; color: var(--ink); fill: var(--flow-a); stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pic--sm { width: 22px; height: 22px; stroke-width: 2.6; }
[data-theme="dark"] .pic { fill: var(--flow-b); }

.h2 { font: 800 clamp(1.85rem, 1.1rem + 2.6vw, 3.1rem)/1.06 var(--display); letter-spacing: -.03em; text-wrap: balance; }
.lead { font-size: clamp(1.02rem, .96rem + .3vw, 1.16rem); line-height: 1.6; color: var(--ink-2); max-width: 36em; }
.link { color: var(--link); text-underline-offset: 3px; }
.nowrap { white-space: nowrap; }
sup { font-size: .7em; line-height: 0; }
/* a section is introduced by its number and its name, in the text font: "01 — La machine" */
.sec__no, .kicker { font: 500 .95rem/1.3 var(--sans); color: var(--ink-3); }

/* buttons: rectangles with a small radius; hover changes the colour, a press sinks the button by a pixel */
.btn {
  --h: 48px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: max(var(--h), var(--tap)); padding: 0 20px; border-radius: var(--r-m); border: 1px solid transparent;
  font: 600 .95rem/1.2 var(--sans); text-decoration: none; text-align: center; cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { cursor: not-allowed; opacity: .45; }
.btn--lg { --h: 54px; padding: 0 26px; font-size: 1rem; }
.btn--xl { --h: 60px; padding: 0 30px; font-size: 1.05rem; }
.btn--sm { --h: 44px; padding: 0 16px; font-size: .9rem; }
.btn--primary { background: var(--blue); color: #fff; }
.btn--primary:hover { background: var(--blue-hi); }
.btn--ink { background: var(--ink); color: var(--paper); }
.btn--ink:hover { background: var(--blue); color: #fff; }
.btn--line, .btn--ghost { background: var(--surface); border-color: var(--line-2); color: var(--ink); }
.btn--line:hover:not(:disabled), .btn--ghost:hover { border-color: var(--ink); }
.btn--line[aria-pressed="true"] { border-color: var(--amber); color: var(--amber); }
.btn--quiet { background: transparent; color: var(--ink-2); padding-inline: 12px; }
.btn--quiet:hover { color: var(--ink); }
.ic-pause { display: none; }
[data-running="true"] .ic-play { display: none; }
[data-running="true"] .ic-pause { display: block; }

/* 4 ------------------------------------------------------------------------------------------------ header */
.hdr { position: relative; }
.hdr__in { display: flex; align-items: center; gap: 12px 24px; min-height: 72px; padding-block: 8px; }
.hdr__logo { display: inline-flex; flex: 0 1 126px; min-width: 96px; padding-block: 8px; border-radius: var(--r-s); }
.hdr__logo img { width: 100%; max-width: 126px; height: auto; aspect-ratio: 126 / 32; }
.hdr__nav { display: none; gap: 4px 28px; margin-left: auto; font-weight: 500; font-size: .95rem; }
.hdr__nav a { text-decoration: none; color: var(--ink-2); padding: 10px 2px; }
.hdr__nav a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 6px; }
.hdr__tools { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.hdr__cta { display: none; }
.lang { display: inline-flex; align-items: stretch; border: 1px solid var(--line-2); border-radius: var(--r-m); background: var(--surface); font: 600 .8125rem/1 var(--sans); overflow: hidden; }
.lang > * { display: grid; place-items: center; min-width: var(--tap); min-height: calc(var(--tap) - 2px); padding: 0 6px; text-decoration: none; }
.lang abbr { text-decoration: none; }
.lang__on { background: var(--ink); color: var(--paper); }
.lang a { color: var(--ink-2); }
.lang a:hover { color: var(--ink); }
.iconbtn { display: inline-grid; place-items: center; width: var(--tap); height: var(--tap); border-radius: var(--r-m); border: 1px solid var(--line-2); background: var(--surface); cursor: pointer; color: var(--ink); }
.iconbtn:hover { border-color: var(--ink); }
.iconbtn--motion[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.ic-mplay { display: none; }
[aria-pressed="true"] > .ic-mplay { display: block; }
[aria-pressed="true"] > .ic-mpause { display: none; }
.ic-sun { display: none; }
[data-theme="dark"] .ic-sun { display: block; }
[data-theme="dark"] .ic-moon { display: none; }
@media (max-width: 380px) { .hdr__in { gap: 8px; } .hdr__logo { flex-basis: 110px; } .lang > * { min-width: 40px; } .hdr__tools { gap: 6px; } .iconbtn { width: 40px; height: 40px; } }
@media (min-width: 640px) { .hdr__cta { display: inline-flex; } }
@media (min-width: 1100px) { .hdr__nav { display: flex; } .hdr__tools { margin-left: 0; } }

/* 5 ------------------------------------------------------------------------------------------------ hero */
.hero { padding: clamp(8px, 3vw, 40px) 0 clamp(36px, 6vw, 88px); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(24px, 5vw, 40px); align-items: center; }
.hero__copy { display: grid; gap: 0; align-content: center; min-width: 0; }
.hero__kicker { font: 500 .95rem/1.3 var(--sans); color: var(--ink-3); margin-bottom: clamp(12px, 2vw, 20px); }
.hero__title { font: 800 clamp(2.35rem, 1.3rem + 5.2vw, 3.4rem)/1.02 var(--display); letter-spacing: -.04em; }
.hero__line { display: block; }
.hero__title em { font-style: normal; color: var(--blue); }
.hero__lead { max-width: 31em; margin-top: clamp(16px, 2.4vw, 24px); font-size: clamp(1.04rem, .98rem + .3vw, 1.2rem); line-height: 1.55; color: var(--ink-2); }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(20px, 3vw, 32px); }
.hero__meta { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-top: 22px; font: 500 .84rem/1.45 var(--sans); color: var(--ink-3); }
@media (max-width: 559px) { .hero__cta .btn { width: 100%; } }
@media (min-width: 960px) {
  .hero__grid { grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr); column-gap: clamp(32px, 4vw, 64px); }
  .hero__title { font-size: clamp(2.6rem, 3.5vw, 3.6rem); }
}

/* 6 ------------------------------------------------------------------------------------------------ figures
 * .stagefig holds one moving picture: .fig is the box (aspect-ratio, so its height follows its width). Its content, back to
 * front: the still (.fig__poster), the clips (.fig__clip, each a still and a <video>; one is shown, the others are out, a
 * change cross-fades), the page's one WebGL canvas (the hero only, while it is in view), the play button. The video is shown
 * over its still only once it plays (the still is its first frame); the hero's live canvas takes the box from its still and
 * gives it to its video, once, in place. The ratios are the ones the clips were rendered at (tools/capture.mjs). */
.stagefig { min-width: 0; }
.fig { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r-l); background: var(--surface); }
.fig--flow { aspect-ratio: 6 / 5; }
.fig--stage { background: var(--stage); }
.fig::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--line); pointer-events: none; z-index: 4; }
.fig__media { position: absolute; inset: 0; }
.fig__poster, .fig__poster img { position: absolute; inset: 0; width: 100%; height: 100%; }
.fig__poster img { object-fit: cover; }
.fig__clip { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility 0s linear .4s; }
.fig__clip.is-on { opacity: 1; visibility: visible; transition: opacity .4s ease, visibility 0s; }
.fig__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; pointer-events: none; }
.fig__video.is-playing { opacity: 1; }
.fig__canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; touch-action: pan-y pinch-zoom; transition: opacity .35s ease; z-index: 1; }
.stagefig[data-live] .fig__canvas { opacity: 1; }
.stagefig[data-live] .fig__poster { visibility: hidden; }
.fig__map { position: absolute; inset: 0; width: 100%; height: 100%; }
/* "Play the animation": shown while the page is paused (the toggle of the header, or reduced motion) and this figure has not
   been asked for, or when the browser refused to start a video by itself */
.fig__play { position: absolute; left: 50%; bottom: 14px; z-index: 3; display: none; transform: translateX(-50%); box-shadow: 0 2px 10px rgba(1, 24, 80, .25); }
.fig[data-gate] .fig__play, .stagefig[data-blocked] .fig__play, .fig[data-blocked] .fig__play { display: inline-flex; }
.fig[data-active] .fig__play { display: none; }
.fig__play:active { transform: translateX(-50%) translateY(1px); }
@media (min-width: 960px) {
  .fig { aspect-ratio: 3 / 2; }
  .fig--flow { aspect-ratio: 5 / 4; }
}
/* the live readout under the flow: its text wraps (never an ellipsis); the box keeps room for two lines and the hint */
.hud { margin-top: 12px; min-height: 4.9em; font: 400 .8125rem/1.45 var(--sans); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.hud__line { color: var(--ink-2); }
.hud__tag { display: none; margin-right: 10px; font-weight: 650; color: var(--ink); }
.hud__tag::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--live); }
.hud[data-cut] .hud__tag::before { background: var(--amber); }
.stagefig[data-live] .hud__tag { display: inline; }
.hud__hint { margin-top: 4px; visibility: hidden; }
.stagefig[data-live] .hud__hint { visibility: visible; }
.hud__hint-touch { display: none; }
@media (pointer: coarse) { .hud__hint-fine { display: none; } .hud__hint-touch { display: inline; } }

/* 7 ------------------------------------------------------------------------------------------------ sections */
.sec { padding: clamp(40px, 8vw, 112px) 0; border-top: 1px solid var(--line); }
.sec__head { display: grid; gap: 10px; margin-bottom: clamp(20px, 4vw, 44px); max-width: 44rem; }
.sec__head--wide { max-width: none; }
.sec__head .lead { margin-top: 4px; }
.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(24px, 4vw, 40px); align-items: center; }
.split .sec__head { margin-bottom: 0; }
@media (min-width: 960px) {
  .split { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(24px, 3vw, 40px); }
  .split > :first-child { grid-column: 1 / 6; }
  .split > :last-child { grid-column: 6 / -1; }
  .split--rev > :first-child { grid-column: 1 / 8; }
  .split--rev > :last-child { grid-column: 8 / -1; }
  .split--lab { align-items: start; }
  .split--lab > .stagefig { grid-column: 6 / -1; grid-row: 1; }
  .split--lab > .sim__panel { grid-column: 1 / 6; grid-row: 1; }
}

/* 8 ------------------------------------------------------------------------------------------------ the machine's tabs
 * One figure, three clips, three tabs. Static HTML shows the three explanations one under the other; explore.js turns the
 * buttons on and stacks the explanations in one grid cell, so the block has the height of the longest and never moves. */
.xp__side { display: grid; gap: 20px; min-width: 0; }
.xp__tabs { display: flex; gap: 2px; padding: 3px; border: 1px solid var(--line-2); border-radius: var(--r-m); background: var(--surface); }
.xp__tabs button { flex: 1 1 0; min-width: 0; min-height: 44px; padding: 6px 8px; border: 0; border-radius: var(--r-s); background: transparent; font: 600 .9rem/1.2 var(--sans); color: var(--ink-2); cursor: pointer; }
.xp__tabs button:hover { color: var(--ink); }
.xp__tabs button[aria-selected="true"] { background: var(--ink); color: var(--paper); }
.xp__panels { display: grid; gap: 22px; }
.xp__panel { display: grid; gap: 8px; align-content: start; }
.xp__panel h3 { font: 800 clamp(1.2rem, 1.05rem + .6vw, 1.45rem)/1.15 var(--display); letter-spacing: -.02em; }
.xp__panel p { color: var(--ink-2); max-width: 36em; }
.js .xp__panels { gap: 0; }
.js .xp__panel { grid-area: 1 / 1; visibility: hidden; }
.js .xp__panel.is-on { visibility: visible; }
.xp__also { font-size: .9rem; line-height: 1.6; color: var(--ink-3); max-width: 40em; padding-top: 18px; border-top: 1px solid var(--line); }

/* 9 ------------------------------------------------------------------------------------------------ lab */
.sim__panel { display: grid; gap: 16px; min-width: 0; padding: clamp(16px, 2.4vw, 24px); border-radius: var(--r-l); background: var(--surface); border: 1px solid var(--line); }
.ctl { min-width: 0; }
.ctl__label { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 8px; font: 600 .9rem/1.3 var(--sans); color: var(--ink-2); }
.ctl__out { font: 700 1.2rem/1 var(--mono); color: var(--ink); }
.range { width: 100%; height: var(--tap); margin: 0; background: transparent; accent-color: var(--blue); cursor: pointer; }
.range__ticks { display: flex; justify-content: space-between; margin-top: -6px; padding-inline: 2px; font: 500 .78rem/1 var(--mono); color: var(--ink-3); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips label { position: relative; display: block; cursor: pointer; }
.chips input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.chips span { display: grid; place-items: center; min-height: var(--tap); min-width: var(--tap); padding: 0 14px; border-radius: var(--r-s); border: 1px solid var(--line-2); font: 600 .86rem/1 var(--mono); color: var(--ink-2); background: var(--surface); transition: background-color .18s ease, color .18s ease; }
.chips input:checked + span { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chips input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.sim__controls { display: flex; flex-wrap: wrap; gap: 8px; }
.sim__controls .btn { flex: 1 1 auto; min-width: 0; padding-inline: 10px; gap: 8px; font-size: .9rem; }
.sim__controls .btn--primary { flex-basis: 100%; }
@media (min-width: 560px) { .sim__controls .btn { flex: 0 0 auto; padding-inline: 18px; font-size: .95rem; } }
.filecard { display: grid; gap: 12px; min-width: 0; padding: 16px; border-radius: var(--r-m); background: var(--paper); border: 1px solid var(--line); }
.filecard__name { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; font: 600 .92rem/1.35 var(--mono); }
.filecard__size { color: var(--ink-3); font-weight: 500; white-space: nowrap; }
.readout { display: grid; grid-template-columns: repeat(auto-fit, minmax(7.25rem, 1fr)); gap: 12px 14px; }
.readout div { display: grid; gap: 3px; align-content: start; min-width: 0; }
.readout dt { font: 500 .78rem/1.25 var(--sans); color: var(--ink-3); }
.readout dd { font: 700 1.02rem/1.2 var(--mono); font-variant-numeric: tabular-nums; }
[data-state="cut"] .readout dd { color: var(--amber); }
.vidpick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.vidpick__q { font-size: .92rem; color: var(--ink-2); }
.vidpick__menu { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
.chip { min-height: var(--tap); min-width: var(--tap); padding: 0 14px; border-radius: var(--r-s); border: 1px solid var(--line-2); background: var(--surface); font: 600 .86rem/1 var(--mono); cursor: pointer; }
.chip:hover { border-color: var(--ink); }
.sim__status { min-height: 3em; font-size: .92rem; color: var(--ink-2); }
.sim__note { margin-top: clamp(20px, 3vw, 32px); font-size: .9rem; color: var(--ink-3); max-width: 46em; }
.sim__nojs { display: none; margin-top: 20px; font-size: .95rem; color: var(--ink-2); }
html:not(.js) .sim__panel { display: none; }
html:not(.js) .sim__nojs { display: block; }

/* 10 ----------------------------------------------------------------------------------------------- measured band */
.band { width: min(100%, var(--wrap)); margin-inline: auto; padding: 0 var(--gutter) clamp(40px, 6vw, 80px); }
.band__slab { background: var(--band); color: var(--band-ink); border-radius: var(--r-l); padding: clamp(28px, 5vw, 60px) 0 clamp(24px, 4vw, 44px); }
.band__slab > .wrap { width: 100%; padding-inline: clamp(20px, 4vw, 56px); }
.band__title { font: 600 .95rem/1.3 var(--sans); color: var(--band-ink-2); }
.nums { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; margin: 24px 0 28px; }
.num { display: grid; gap: 8px; align-content: start; padding-top: 18px; border-top: 1px solid rgba(195, 205, 240, .25); }
.num__fig { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font: 800 clamp(2.6rem, 1.4rem + 4.4vw, 4.6rem)/.95 var(--display); letter-spacing: -.04em; }
.num__val { display: inline-block; font-variant-numeric: tabular-nums; }
.num__unit { font: 600 clamp(1rem, .9rem + .6vw, 1.3rem)/1.1 var(--sans); letter-spacing: 0; color: var(--band-ink-2); }
.num__cap { color: var(--band-ink-2); max-width: 22em; }
.band__note { font-size: .84rem; line-height: 1.55; color: var(--band-ink-2); max-width: 60em; }
@media (min-width: 760px) { .nums { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; } }

/* 11 ----------------------------------------------------------------------------------------------- download */
.dl-sec { padding-top: clamp(40px, 7vw, 96px); }
.sec__head--split { max-width: none; grid-template-columns: minmax(0, 1fr); }
.sec__aside { color: var(--ink-2); font-size: .95rem; }
@media (min-width: 760px) {
  .sec__head--split { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .sec__head--split .sec__no { grid-column: 1; }
  .sec__head--split .h2 { grid-column: 1; grid-row: 2; }
  .sec__aside { grid-column: 2; grid-row: 2; }
}

/* the main choice: one large card */
.dlx { scroll-margin-top: 16px; display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(20px, 3.5vw, 48px); align-items: start; padding: clamp(18px, 3vw, 40px); border-radius: var(--r-l); background: var(--surface); border: 1px solid var(--line); }
.dlx__main { display: grid; gap: 18px; align-content: start; justify-items: start; min-width: 0; }
.dlx__id { display: flex; align-items: center; gap: 16px; }
.dlx__mark { flex: none; display: grid; place-items: center; width: 72px; height: 72px; border-radius: var(--r-m); background: var(--paper); border: 1px solid var(--line); }
.dlx__mark img { width: 52px; height: 52px; }
.dlx__name { display: grid; gap: 8px; justify-items: start; min-width: 0; }
.tag { font: 600 .8rem/1 var(--sans); padding: 6px 9px; border-radius: 6px; background: var(--blue); color: #fff; }
.dlx__title { font: 800 clamp(1.8rem, 1.2rem + 2.4vw, 2.8rem)/1.02 var(--display); letter-spacing: -.035em; }
.dlx__text { color: var(--ink-2); max-width: 34em; }
.dlx__facts { display: flex; flex-wrap: wrap; gap: 6px; }
.dlx__facts li { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px; border-radius: 6px; border: 1px solid var(--line-2); font: 600 .82rem/1.2 var(--sans); color: var(--ink-2); }
.dlx__facts li:first-child { padding-left: 8px; color: var(--ink); }
.dlx__cta { display: grid; gap: 10px; justify-items: start; min-width: 0; max-width: 100%; }
.dlx__file { font: 500 .8rem/1.4 var(--mono); color: var(--ink-3); overflow-wrap: anywhere; }
.dlx__file code { color: var(--ink-2); font-size: 1em; }
.dlx__side { display: grid; gap: 12px; align-content: end; align-self: stretch; min-width: 0; }
.dlx__art { display: none; width: 100%; height: auto; aspect-ratio: 400 / 260; max-height: 220px; color: var(--flow-a); fill: var(--flow-b); stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; }
[data-theme="dark"] .dlx__art { color: var(--flow-b); fill: var(--flow-a); }
.hashbox { width: 100%; display: grid; gap: 10px; padding: 14px 16px; border-radius: var(--r-m); background: var(--paper); border: 1px solid var(--line); min-width: 0; }
.hashbox__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; }
.hashbox__label { font: 600 .84rem/1.2 var(--sans); color: var(--ink-3); }
.hashbox__hash, .hash__body code { font: 500 .82rem/1.55 var(--mono); color: var(--ink-2); overflow-wrap: anywhere; }
.copy { display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap); padding: 0 12px; border-radius: var(--r-s); border: 1px solid var(--line-2); background: var(--surface); font: 600 .8rem/1 var(--sans); color: var(--ink); cursor: pointer; transition: border-color .18s ease, background-color .18s ease, color .18s ease; }
.copy[hidden] { display: none; }
.copy:hover { border-color: var(--ink); }
.copy.is-done { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.note { border-radius: var(--r-m); border: 1px solid var(--line); background: var(--surface); }
.note summary { display: flex; align-items: center; gap: 10px; min-height: var(--tap); padding: 8px 14px; cursor: pointer; list-style: none; border-radius: var(--r-m); font-size: .9rem; font-weight: 600; color: var(--ink); }
.note summary::-webkit-details-marker { display: none; }
.note summary > .ic:first-child { color: var(--blue); }
.note summary span { flex: 1; min-width: 0; }
.note__chev { transition: transform .2s ease; color: var(--ink-3); }
.note[open] .note__chev { transform: rotate(180deg); }
.note p { padding: 0 14px 14px 40px; font-size: .88rem; line-height: 1.55; color: var(--ink-2); }
@media (min-width: 960px) { .dlx { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } }
@media (min-width: 1180px) { .dlx__art { display: block; } }

/* the emblems: one per download, one family. The app itself is the FluxDM mark on a plain tile; every other download is a
   flat tile in the blue of the light holding a pictogram drawn for this site. Same size and radius everywhere. */
.emb { display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: var(--r-s); background: var(--flow-a); color: #fff; }
.emb .pic { width: 28px; height: 28px; color: #fff; fill: #fff; stroke-width: 2.4; }
.emb--mark { background: var(--paper); border: 1px solid var(--line); }
.emb--mark img { width: 30px; height: 30px; }
.emb--sm { width: 34px; height: 34px; }
.emb--sm .pic { width: 22px; height: 22px; stroke-width: 2.8; }
.emb--sm.emb--mark img { width: 22px; height: 22px; }
[data-theme="dark"] .emb:not(.emb--mark) { background: #1b49c9; }

/* below the main card: the guide and the other downloads in two labelled groups */
.dl-more { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 4vw, 40px); align-items: start; margin-top: clamp(28px, 4vw, 48px); }
.dl-label { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; font: 600 .95rem/1.2 var(--sans); color: var(--ink-2); }
.dl-label::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* "which one do I need?": one list, one row per answer, each a link to its card */
.dl-guide__list { display: grid; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface); overflow: hidden; }
.dl-guide__list li + li { border-top: 1px solid var(--line); }
.dl-guide__a { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; row-gap: 1px; align-items: center; min-height: 58px; padding: 8px 14px; text-decoration: none; color: var(--ink); }
.dl-guide__a .emb { grid-row: 1 / 3; }
.dl-guide__who { align-self: end; font-size: .88rem; line-height: 1.35; color: var(--ink-2); }
.dl-guide__what { align-self: start; display: inline-flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 650; font-size: .96rem; line-height: 1.25; }
.dl-guide__what .ic { flex: none; color: var(--ink-3); transition: transform .2s ease, color .2s ease; }
.dl-guide__a:hover { background: var(--tint); }
.dl-guide__a:hover .dl-guide__what .ic { transform: translateX(3px); color: var(--link); }
.dl-guide__a:focus-visible { outline-offset: -3px; border-radius: 0; }

.dl-groups { display: grid; gap: clamp(28px, 4vw, 36px); min-width: 0; }
.dl-group__note { margin: -6px 0 14px; font-size: .9rem; color: var(--ink-2); }
/* two cards per group; each card is a subgrid, so the two titles, files, buttons and checksums of a group line up */
.dl-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: stretch; }
.dlc { scroll-margin-top: 16px; grid-row: span 6; display: grid; grid-template-rows: subgrid; row-gap: 10px; align-content: start; min-width: 0; padding: 16px 16px 8px; border-radius: var(--r-m); background: var(--surface); border: 1px solid var(--line); }
.dlc:hover { border-color: var(--line-2); }
.dlc:target, .dlx:target { border-color: var(--blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 22%, transparent); }
@supports not (grid-template-rows: subgrid) {
  .dlc { display: flex; flex-direction: column; gap: 12px; }
  .dlc__btn { margin-top: auto; }
}
.dlc__top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; }
.dlc__size { font: 600 .84rem/1 var(--mono); color: var(--ink-3); white-space: nowrap; }
.dlc__title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; font: 800 1.25rem/1.15 var(--display); letter-spacing: -.02em; }
.dlc__tag { font: 650 .8rem/1.2 var(--sans); letter-spacing: 0; color: var(--ink-3); }
.dlc__for { font-size: .95rem; line-height: 1.45; color: var(--ink); font-weight: 550; }
.dlc__detailrow { display: grid; gap: 8px; align-content: start; }
.dlc__chips { display: flex; flex-wrap: wrap; gap: 4px; }
.dlc__chips li { font: 600 .78rem/1 var(--sans); padding: 5px 8px; border-radius: 6px; border: 1px solid var(--line-2); color: var(--ink-2); }
.dlc__detail { font-size: .88rem; line-height: 1.5; color: var(--ink-3); }
.dlc__file { align-self: end; font: 500 .78rem/1.4 var(--mono); color: var(--ink-3); overflow-wrap: anywhere; }
.dlc__file code { font-size: 1em; }
.dlc__btn { width: 100%; }
.dlc__btn:hover:not(:disabled) { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.hash { align-self: start; }
.hash summary { display: flex; align-items: center; gap: 6px; min-height: var(--tap); cursor: pointer; font: 600 .82rem/1 var(--sans); color: var(--ink-3); list-style: none; }
.hash summary::-webkit-details-marker { display: none; }
.hash summary:hover { color: var(--ink); }
.hash summary .ic { transition: transform .2s ease; }
.hash[open] summary .ic { transform: rotate(180deg); }
.hash__body { display: grid; gap: 8px; justify-items: start; padding-bottom: 6px; min-width: 0; }
.hash__body code { font-size: .78rem; }
.dl-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 24px; padding-top: 18px; border-top: 1px solid var(--line); font-size: .92rem; }
.dl-foot .link { display: inline-block; padding-block: 10px; }
.dl-foot__build { font: 500 .82rem/1.4 var(--mono); color: var(--ink-3); }
.dl-foot__build code, .ftr__bottom code { font-size: 1em; }
@media (min-width: 560px) {
  .dl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dlc__top { grid-template-columns: minmax(0, 1fr) auto; row-gap: 12px; }
  .dlc__top .emb { grid-row: 1; grid-column: 1; justify-self: start; }
  .dlc__size { grid-row: 1; grid-column: 2; }
  .dlc__title { grid-row: 2; grid-column: 1 / -1; }
}
@media (min-width: 1180px) {
  .dl-more { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 28px 40px; }
  .dl-foot { grid-column: 1 / -1; }
}

/* 12 ----------------------------------------------------------------------------------------------- install */
.steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.step { display: grid; gap: 8px; align-content: start; min-width: 0; padding: clamp(16px, 2.4vw, 26px); border-radius: var(--r-m); background: var(--surface); border: 1px solid var(--line); }
.step__n { font: 800 1.6rem/1 var(--display); letter-spacing: -.02em; color: var(--ink-3); }
.step__title { font: 800 1.25rem/1.15 var(--display); letter-spacing: -.02em; }
.step p { color: var(--ink-2); font-size: .95rem; }
.step__fine { font-size: .86rem !important; color: var(--ink-3) !important; }
.tabs__list { display: flex; gap: 2px; margin-bottom: 12px; padding: 3px; border: 1px solid var(--line-2); border-radius: var(--r-m); }
.tabs__list[hidden] { display: none; }
.tabs__list button { flex: 1 1 0; min-width: 0; min-height: 40px; padding: 0 12px; border-radius: var(--r-s); border: 0; background: transparent; font: 600 .86rem/1.2 var(--sans); cursor: pointer; color: var(--ink-2); }
.tabs__list button[aria-selected="true"] { background: var(--ink); color: var(--paper); }
.tabs__panel + .tabs__panel { margin-top: 14px; }
.tabs.is-on .tabs__panel + .tabs__panel { margin-top: 0; }
.tabs__title { font: 600 .9rem/1.3 var(--sans); margin-bottom: 6px; }
.tabs.is-on .tabs__title { font: 500 .84rem/1.4 var(--sans); color: var(--ink-3); margin-bottom: 10px; }
.mini { display: grid; gap: 6px; counter-reset: m; }
.mini li { position: relative; padding-left: 28px; font-size: .9rem; color: var(--ink-2); line-height: 1.5; }
.mini li::before { counter-increment: m; content: counter(m); position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--line-2); font: 600 .72rem/18px var(--mono); text-align: center; color: var(--ink-2); }
@media (min-width: 960px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }

/* 13 ----------------------------------------------------------------------------------------------- FAQ */
.faq { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(20px, 4vw, 40px); align-items: start; }
.faq__head { display: grid; gap: 12px; }
.faq__contact { color: var(--ink-2); }
.faq__list { display: grid; gap: 8px; min-width: 0; }
.qa { border-radius: var(--r-m); border: 1px solid var(--line); background: var(--surface); }
.qa:hover { border-color: var(--line-2); }
.qa summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 56px; padding: 12px 18px; cursor: pointer; list-style: none; border-radius: var(--r-m); }
.qa summary::-webkit-details-marker { display: none; }
.qa summary h3 { font: 600 1rem/1.4 var(--sans); }
.qa summary .ic { flex: none; transition: transform .2s ease; color: var(--blue); }
.qa[open] summary .ic { transform: rotate(45deg); }
.qa__a { display: grid; gap: 10px; padding: 0 18px 18px; color: var(--ink-2); }
@media (min-width: 960px) { .faq { grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); } }

/* 14 ----------------------------------------------------------------------------------------------- footer */
.ftr { background: var(--paper); border-top: 1px solid var(--line); padding: clamp(36px, 5vw, 56px) 0 28px; font-size: .92rem; }
.ftr__top { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px 40px; }
.ftr__brand { display: grid; gap: 12px; color: var(--ink-2); align-content: start; }
.ftr__brand img { width: 126px; height: 32px; }
.ftr__nav { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 0 16px; }
.ftr__nav ul { display: grid; gap: 0; align-content: start; justify-items: start; }
.ftr__nav a { display: inline-flex; align-items: center; min-height: var(--tap); min-width: var(--tap); color: var(--ink); text-underline-offset: 3px; }
.ftr__nav a:hover { color: var(--link); }
.ftr__privacy { margin-top: 28px; color: var(--ink-3); font-size: .88rem; max-width: 52em; }
.ftr__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--ink-3); }
.ftr__tools { display: flex; gap: 8px; align-items: center; }
@media (min-width: 900px) { .ftr__top { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } .ftr__nav { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* 15 ----------------------------------------------------------------------------------------------- legal + 404 */
.legal { padding-block: clamp(32px, 7vw, 88px); }
.legal__in { max-width: 760px; display: grid; gap: 18px; }
.legal__title { font: 800 clamp(2.2rem, 1.3rem + 4vw, 3.8rem)/1 var(--display); letter-spacing: -.035em; }
.legal__block { display: grid; gap: 12px; padding-top: 26px; margin-top: 8px; border-top: 1px solid var(--line); }
.legal__block h2 { font: 800 1.45rem/1.1 var(--display); letter-spacing: -.02em; }
.legal__block p { color: var(--ink-2); }
.legal__list { display: grid; gap: 8px; }
.legal__list div { display: grid; grid-template-columns: minmax(0, 9em) minmax(0, 1fr); gap: 12px; }
.legal__list dd { overflow-wrap: anywhere; }
.legal__list dt { color: var(--ink-3); font: 500 .9rem/1.6 var(--sans); }
.nf { padding-block: clamp(40px, 9vw, 120px); }
.nf__in { max-width: 760px; display: grid; gap: 20px; }
.nf__title { font: 800 clamp(2.2rem, 1.2rem + 4.6vw, 4.2rem)/1 var(--display); letter-spacing: -.04em; }
.nf__bar { position: relative; height: 16px; border-radius: 4px; background: var(--map-track); overflow: hidden; }
.nf__bar b { position: absolute; inset: 0 59.6% 0 0; background: var(--amber); }
.nf__cap { display: flex; justify-content: space-between; font: 600 .84rem/1 var(--mono); color: var(--ink-3); }
.nf__text { color: var(--ink-2); max-width: 36em; }
.nf__links { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; }
.nf__en { font-size: .92rem; color: var(--ink-3); }
@media (max-width: 420px) { .legal__list div { grid-template-columns: minmax(0, 1fr); gap: 2px; } }

/* the tail of the page is not drawn until it comes near (content-visibility); only the last two blocks, so that nothing
   above them, no anchor and no heading, can move when one of them is first drawn. contain-intrinsic-size is the height of
   the content box (the padding comes on top) the block has before it is drawn: the measured heights of each layout, in both
   languages (the page keeps its height, within about 40 px, below the screen, when they are drawn) */
#faq { content-visibility: auto; contain-intrinsic-size: auto 740px; }
.ftr { content-visibility: auto; contain-intrinsic-size: auto 810px; }
@media (min-width: 360px) { #faq { contain-intrinsic-size: auto 700px; } .ftr { contain-intrinsic-size: auto 640px; } }
@media (min-width: 390px) { #faq { contain-intrinsic-size: auto 685px; } }
@media (min-width: 400px) { .ftr { contain-intrinsic-size: auto 624px; } }
@media (min-width: 420px) { #faq { contain-intrinsic-size: auto 665px; } }
@media (min-width: 480px) { #faq { contain-intrinsic-size: auto 622px; } }
@media (min-width: 520px) { .ftr { contain-intrinsic-size: auto 566px; } }
@media (min-width: 560px) { .ftr { contain-intrinsic-size: auto 425px; } }
@media (min-width: 700px) { .ftr { contain-intrinsic-size: auto 400px; } }
@media (min-width: 900px) { .ftr { contain-intrinsic-size: auto 288px; } }
@media (min-width: 960px) { #faq { contain-intrinsic-size: auto 470px; } }
@media (min-width: 1100px) { #faq { contain-intrinsic-size: auto 455px; } }

/* 16 ----------------------------------------------------------------------------------------------- motion */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
.theme-reveal::view-transition-new(root) { animation: vt-reveal .6s cubic-bezier(.4, 0, .2, 1); }
@keyframes vt-reveal { from { clip-path: circle(0 at var(--vt-x) var(--vt-y)); } to { clip-path: circle(var(--vt-r) at var(--vt-x) var(--vt-y)); } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .chips span, .dl-guide__what .ic, .note__chev, .hash summary .ic, .qa summary .ic, .copy, .fig__clip, .fig__canvas { transition: none !important; }
}