@540deg/ds 0.0.0-stage → 0.1.0

package/dist/styles.css

@@ -0,0 +1,3441 @@
+@font-face {
+  font-family: 'DM Sans';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 100 1000;
+  src: url('./fonts/dm-sans-latin-opsz-normal.woff2') format('woff2-variations');
+  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;
+}
+
+:root {
+  --540-accent-yellow: #fef401;
+  --540-accent-yellow-subtle: #fef4011a;
+  --540-accent-gold: #876e00;
+  --540-neutral-white: #fff;
+  --540-neutral-50: #f5f5f3;
+  --540-neutral-100: #e8e8e6;
+  --540-neutral-200: #dcdcd9;
+  --540-neutral-300: #aaa;
+  --540-neutral-450: #70706e;
+  --540-neutral-600: #555553;
+  --540-neutral-800: #3a3a38;
+  --540-neutral-875: #1c1c1c;
+  --540-neutral-900: #2a2a28;
+  --540-neutral-925: #0e0e0e;
+  --540-neutral-950: #1a1a18;
+  --540-neutral-black: #000;
+  --540-neutral-50-veil: #f5f5f3b3;
+  --540-neutral-950-veil: #1a1a18b3;
+  --540-neutral-black-veil: #000000b3;
+  --540-status-red: #c83f43;
+  --540-status-red-soft: #d9686c;
+  --540-status-red-subtle: #c83f431a;
+  --540-status-green: #257f54;
+  --540-status-green-soft: #3aa06e;
+  --540-status-green-subtle: #257f541a;
+  --540-gradient-gray: radial-gradient(circle at 50% 50%, #ffffff14 0%, #ffffff08 45%, transparent 70%);
+  --540-gradient-gray-paper: radial-gradient(circle at 50% 50%, #0000000d 0%, #00000005 45%, transparent 70%);
+  --540-gradient-image-veil: linear-gradient(180deg, #0000 0%, #00000026 45%, #000000c7 100%);
+  --540-filter-logo-paper: grayscale(1) opacity(.55);
+  --540-filter-logo-black: brightness(0) invert(1) opacity(.72);
+  --540-filter-logo-paper-center: grayscale(1) opacity(1);
+  --540-filter-logo-black-center: brightness(0) invert(1) opacity(1);
+  --540-filter-nav-blur: blur(16px);
+  --540-font-family-sans: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
+  --540-font-family-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
+  --540-font-size-12: 12px;
+  --540-font-size-14: 14px;
+  --540-font-size-16: 16px;
+  --540-font-size-18: 18px;
+  --540-font-size-20: 20px;
+  --540-font-size-22: 22px;
+  --540-font-size-26: 26px;
+  --540-font-size-28: 28px;
+  --540-font-size-32: 32px;
+  --540-font-size-36: 36px;
+  --540-font-size-42: 42px;
+  --540-font-size-48: 48px;
+  --540-font-size-64: 64px;
+  --540-font-size-statement: clamp(20px, 5.1vw, 76px);
+  --540-font-weight-light: 350;
+  --540-font-weight-regular: 400;
+  --540-font-weight-bold: 700;
+  --540-font-weight-extrabold: 800;
+  --540-line-height-tight: .9;
+  --540-line-height-solid: 1;
+  --540-line-height-normal: normal;
+  --540-line-height-reading: 1.35;
+  --540-line-height-reading-l: 1.3;
+  --540-letter-spacing-tight: -.03em;
+  --540-letter-spacing-normal: 0;
+  --540-size-0: 0px;
+  --540-size-4: 4px;
+  --540-size-8: 8px;
+  --540-size-10: 10px;
+  --540-size-12: 12px;
+  --540-size-16: 16px;
+  --540-size-18: 18px;
+  --540-size-20: 20px;
+  --540-size-24: 24px;
+  --540-size-28: 28px;
+  --540-size-32: 32px;
+  --540-size-36: 36px;
+  --540-size-45: 45px;
+  --540-size-48: 48px;
+  --540-size-64: 64px;
+  --540-size-94: 94px;
+  --540-size-120: 120px;
+  --540-size-1200: 1200px;
+  --540-size-pill: 9999px;
+}
+
+:root, [data-theme="light"] {
+  color-scheme: light;
+  --color-bg-default: var(--540-neutral-50);
+  --color-bg-inverse: var(--540-neutral-950);
+  --color-bg-surface: var(--540-neutral-50);
+  --color-bg-subtle: var(--540-neutral-100);
+  --color-bg-accent: var(--540-accent-yellow);
+  --color-bg-accent-subtle: var(--540-accent-yellow-subtle);
+  --color-bg-inverse-active: var(--540-neutral-800);
+  --color-bg-neutral-hover: var(--540-neutral-100);
+  --color-bg-row-active: var(--540-neutral-100);
+  --color-bg-neutral-active: var(--540-neutral-200);
+  --color-bg-disabled: var(--540-neutral-100);
+  --color-bg-error: var(--540-status-red-subtle);
+  --color-bg-overlay: var(--540-neutral-950-veil);
+  --color-bg-success: var(--540-status-green-subtle);
+  --color-bg-nav: var(--540-neutral-50-veil);
+  --color-text-primary: var(--540-neutral-950);
+  --color-text-secondary: var(--540-neutral-600);
+  --color-text-tertiary: var(--540-neutral-450);
+  --color-text-disabled: var(--540-neutral-300);
+  --color-text-inverse: var(--540-neutral-white);
+  --color-text-inverse-secondary: var(--540-neutral-200);
+  --color-text-accent: var(--540-accent-yellow);
+  --color-text-accent-inverse: var(--540-accent-gold);
+  --color-text-on-media: var(--540-neutral-white);
+  --color-text-error: var(--540-status-red);
+  --color-text-success: var(--540-status-green);
+  --color-border-default: var(--540-neutral-100);
+  --color-border-strong: var(--540-neutral-900);
+  --color-border-default-inverse: var(--540-neutral-900);
+  --color-border-strong-inverse: var(--540-neutral-white);
+  --color-border-focus: var(--540-neutral-950);
+  --gradient-halo: var(--540-gradient-gray-paper);
+  --gradient-image-veil: var(--540-gradient-image-veil);
+  --filter-logo-client: var(--540-filter-logo-paper);
+  --filter-logo-client-center: var(--540-filter-logo-paper-center);
+  --filter-nav: var(--540-filter-nav-blur);
+}
+
+[data-theme="dark"] {
+  color-scheme: dark;
+  --color-bg-default: var(--540-neutral-black);
+  --color-bg-inverse: var(--540-neutral-50);
+  --color-bg-surface: var(--540-neutral-925);
+  --color-bg-subtle: var(--540-neutral-925);
+  --color-bg-accent: var(--540-accent-yellow);
+  --color-bg-accent-subtle: var(--540-accent-yellow-subtle);
+  --color-bg-inverse-active: var(--540-neutral-200);
+  --color-bg-neutral-hover: var(--540-neutral-925);
+  --color-bg-row-active: var(--540-neutral-875);
+  --color-bg-neutral-active: var(--540-neutral-875);
+  --color-bg-disabled: var(--540-neutral-875);
+  --color-bg-error: var(--540-status-red-subtle);
+  --color-bg-overlay: var(--540-neutral-950-veil);
+  --color-bg-success: var(--540-status-green-subtle);
+  --color-bg-nav: var(--540-neutral-black-veil);
+  --color-text-primary: var(--540-neutral-white);
+  --color-text-secondary: var(--540-neutral-200);
+  --color-text-tertiary: var(--540-neutral-300);
+  --color-text-disabled: var(--540-neutral-600);
+  --color-text-inverse: var(--540-neutral-950);
+  --color-text-inverse-secondary: var(--540-neutral-600);
+  --color-text-accent: var(--540-accent-yellow);
+  --color-text-accent-inverse: var(--540-accent-gold);
+  --color-text-on-media: var(--540-neutral-white);
+  --color-text-error: var(--540-status-red-soft);
+  --color-text-success: var(--540-status-green-soft);
+  --color-border-default: var(--540-neutral-875);
+  --color-border-strong: var(--540-neutral-white);
+  --color-border-default-inverse: var(--540-neutral-100);
+  --color-border-strong-inverse: var(--540-neutral-950);
+  --color-border-focus: var(--540-neutral-white);
+  --gradient-halo: var(--540-gradient-gray);
+  --gradient-image-veil: var(--540-gradient-image-veil);
+  --filter-logo-client: var(--540-filter-logo-black);
+  --filter-logo-client-center: var(--540-filter-logo-black-center);
+  --filter-nav: var(--540-filter-nav-blur);
+}
+
+:root {
+  --font-family-base: var(--540-font-family-sans);
+  --font-family-mono: var(--540-font-family-mono);
+  --text-statement-size: var(--540-font-size-statement);
+  --text-statement-weight: var(--540-font-weight-extrabold);
+  --text-statement-line-height: var(--540-line-height-tight);
+  --text-statement-letter-spacing: var(--540-letter-spacing-tight);
+  --text-title-l-size: var(--540-font-size-28);
+  --text-title-l-weight: var(--540-font-weight-regular);
+  --text-title-l-line-height: var(--540-line-height-normal);
+  --text-title-l-letter-spacing: var(--540-letter-spacing-normal);
+  --text-title-m-size: var(--540-font-size-26);
+  --text-title-m-weight: var(--540-font-weight-regular);
+  --text-title-m-line-height: var(--540-line-height-normal);
+  --text-title-m-letter-spacing: var(--540-letter-spacing-normal);
+  --text-title-s-size: var(--540-font-size-22);
+  --text-title-s-weight: var(--540-font-weight-regular);
+  --text-title-s-line-height: var(--540-line-height-normal);
+  --text-title-s-letter-spacing: var(--540-letter-spacing-normal);
+  --text-title-xs-size: var(--540-font-size-20);
+  --text-title-xs-weight: var(--540-font-weight-regular);
+  --text-title-xs-line-height: var(--540-line-height-normal);
+  --text-title-xs-letter-spacing: var(--540-letter-spacing-normal);
+  --text-body-l-size: var(--540-font-size-18);
+  --text-body-l-weight: var(--540-font-weight-regular);
+  --text-body-l-line-height: var(--540-line-height-normal);
+  --text-body-l-letter-spacing: var(--540-letter-spacing-normal);
+  --text-body-m-size: var(--540-font-size-16);
+  --text-body-m-weight: var(--540-font-weight-regular);
+  --text-body-m-line-height: var(--540-line-height-normal);
+  --text-body-m-letter-spacing: var(--540-letter-spacing-normal);
+  --text-body-s-size: var(--540-font-size-14);
+  --text-body-s-weight: var(--540-font-weight-regular);
+  --text-body-s-line-height: var(--540-line-height-normal);
+  --text-body-s-letter-spacing: var(--540-letter-spacing-normal);
+  --text-body-s-light-size: var(--540-font-size-14);
+  --text-body-s-light-weight: var(--540-font-weight-light);
+  --text-body-s-light-line-height: var(--540-line-height-normal);
+  --text-body-s-light-letter-spacing: var(--540-letter-spacing-normal);
+  --text-body-s-bold-size: var(--540-font-size-14);
+  --text-body-s-bold-weight: var(--540-font-weight-bold);
+  --text-body-s-bold-line-height: var(--540-line-height-normal);
+  --text-body-s-bold-letter-spacing: var(--540-letter-spacing-normal);
+  --text-micro-size: var(--540-font-size-12);
+  --text-micro-weight: var(--540-font-weight-regular);
+  --text-micro-line-height: var(--540-line-height-normal);
+  --text-micro-letter-spacing: var(--540-letter-spacing-normal);
+  --text-micro-light-size: var(--540-font-size-12);
+  --text-micro-light-weight: var(--540-font-weight-light);
+  --text-micro-light-line-height: var(--540-line-height-normal);
+  --text-micro-light-letter-spacing: var(--540-letter-spacing-normal);
+  --text-micro-bold-size: var(--540-font-size-12);
+  --text-micro-bold-weight: var(--540-font-weight-bold);
+  --text-micro-bold-line-height: var(--540-line-height-normal);
+  --text-micro-bold-letter-spacing: var(--540-letter-spacing-normal);
+}
+
+@media (width >= 1024px) {
+  :root {
+    --text-title-l-size: var(--540-font-size-36);
+    --text-title-m-size: var(--540-font-size-32);
+    --text-title-s-size: var(--540-font-size-26);
+    --text-title-xs-size: var(--540-font-size-22);
+  }
+}
+
+[data-scale="projection"] {
+  --text-title-l-size: var(--540-font-size-42);
+  --text-title-m-size: var(--540-font-size-36);
+  --text-title-s-size: var(--540-font-size-28);
+  --text-body-l-size: var(--540-font-size-22);
+  --text-body-m-size: var(--540-font-size-20);
+  --text-body-s-size: var(--540-font-size-18);
+  --text-body-s-light-size: var(--540-font-size-18);
+  --text-body-l-line-height: var(--540-line-height-reading-l);
+  --text-body-m-line-height: var(--540-line-height-reading);
+  --text-body-s-line-height: var(--540-line-height-reading);
+  --text-body-s-light-line-height: var(--540-line-height-reading);
+}
+
+:root {
+  --space-xs: var(--540-size-4);
+  --space-s: var(--540-size-8);
+  --space-m: var(--540-size-12);
+  --space-l: var(--540-size-16);
+  --space-xl: var(--540-size-24);
+  --space-2xl: var(--540-size-32);
+  --space-3xl: var(--540-size-48);
+  --padding-page: var(--540-size-16);
+  --padding-section: var(--540-size-36);
+  --padding-section-block: var(--540-size-48);
+  --padding-card: var(--540-size-24);
+  --size-control-xs: var(--540-size-24);
+  --size-control-sm: var(--540-size-36);
+  --size-control-md: var(--540-size-45);
+  --size-icon-sm: var(--540-size-16);
+  --size-icon-md: var(--540-size-18);
+  --size-logo-xs: var(--540-size-24);
+  --size-logo-sm: var(--540-size-32);
+  --size-logo-md: var(--540-size-48);
+  --size-logo-client: var(--540-size-94);
+  --size-container: var(--540-size-1200);
+  --grid-columns: 12;
+  --grid-gutter: var(--540-size-16);
+  --grid-gutter-wide: var(--540-size-48);
+  --radius-default: var(--540-size-10);
+  --radius-pill: var(--540-size-pill);
+  --focus-ring-width: 2px;
+  --focus-ring-offset: 2px;
+  --focus-ring-color: var(--color-border-focus);
+}
+
+@media (width >= 1024px) {
+  :root {
+    --padding-page: var(--540-size-28);
+    --padding-section-block: var(--540-size-120);
+    --grid-gutter: var(--540-size-24);
+    --grid-gutter-wide: var(--540-size-120);
+  }
+}
+
+*, :before, :after {
+  box-sizing: border-box;
+}
+
+html {
+  font-family: var(--font-family-base);
+  font-optical-sizing: auto;
+  background-color: var(--color-bg-default);
+  color: var(--color-text-primary);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  font-size: var(--text-body-m-size);
+  font-weight: var(--text-body-m-weight);
+  line-height: var(--text-body-m-line-height);
+  margin: 0;
+}
+
+:focus-visible {
+  outline: var(--focus-ring-width) solid var(--focus-ring-color);
+  outline-offset: var(--focus-ring-offset);
+}
+
+/* Bullets — the dots that say which page a strip is on. The active one gets longer
+   instead of changing color: length reads in grayscale; color alone does not. */
+
+._bullets_49fy9_4 {
+  display: flex;
+  gap: var(--space-m);
+  align-items: center;
+}
+
+._bullet_49fy9_4 {
+  inline-size: var(--space-m);
+  block-size: var(--space-m);
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius-pill);
+  background: var(--color-border-default);
+  cursor: pointer;
+  transition:
+    inline-size 0.32s ease,
+    background-color 0.24s ease;
+}
+
+._bullet_49fy9_4:hover {
+  background: var(--color-text-secondary);
+}
+
+._bullet_49fy9_4:focus-visible {
+  outline: var(--focus-ring-width) solid var(--focus-ring-color);
+  outline-offset: var(--focus-ring-offset);
+}
+
+._active_49fy9_32 {
+  inline-size: var(--space-3xl);
+  background: var(--color-text-primary);
+}
+
+._active_49fy9_32:hover {
+  background: var(--color-text-primary);
+}
+
+/* Vertical: at the edge of the window, right-aligned, small gap, bars instead of dots.
+   Stacked, what is compared is the length, and a circle has no length. */
+._vertical_49fy9_43 {
+  flex-direction: column;
+  align-items: flex-end;
+  gap: var(--space-s);
+}
+
+._vertical_49fy9_43 ._bullet_49fy9_4 {
+  inline-size: var(--space-l);
+  block-size: var(--space-xs);
+  background: var(--color-text-tertiary);
+}
+
+._vertical_49fy9_43 ._bullet_49fy9_4:hover {
+  background: var(--color-text-primary);
+}
+
+._vertical_49fy9_43 ._active_49fy9_32 {
+  inline-size: var(--space-2xl);
+  background: var(--color-text-primary);
+}
+
+/* A bigger hit area than the 4 px bar, without changing what is drawn */
+._vertical_49fy9_43 ._bullet_49fy9_4 {
+  position: relative;
+}
+
+._vertical_49fy9_43 ._bullet_49fy9_4::after {
+  content: '';
+  position: absolute;
+  inset: -10px -8px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  ._bullet_49fy9_4 {
+    transition: none;
+  }
+}
+/* Button — the action that triggers something. Semantic tokens only.
+   Hover inverts the fill; active fills one step more: three surfaces, never two. */
+
+._button_fhfjw_4 {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  gap: var(--space-s);
+  border: 1px solid transparent;
+  border-radius: var(--radius-pill);
+  font-family: var(--font-family-base);
+  font-optical-sizing: none;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-size: var(--text-body-s-size);
+  font-weight: var(--text-body-s-weight);
+  line-height: var(--text-body-s-line-height);
+  letter-spacing: var(--text-body-s-letter-spacing);
+  white-space: nowrap;
+  text-decoration: none;
+  cursor: pointer;
+  transition:
+    background-color 0.12s ease,
+    border-color 0.12s ease,
+    color 0.12s ease;
+}
+
+._button_fhfjw_4:focus-visible {
+  outline: var(--focus-ring-width) solid var(--focus-ring-color);
+  outline-offset: var(--focus-ring-offset);
+}
+
+._button_fhfjw_4:disabled {
+  cursor: not-allowed;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  ._button_fhfjw_4 {
+    transition: none;
+  }
+}
+
+/* ---- Sizes ---- */
+._size-md_fhfjw_45 {
+  min-height: var(--size-control-md);
+  padding-inline: var(--space-xl);
+}
+
+._size-sm_fhfjw_50 {
+  min-height: var(--size-control-sm);
+  padding-inline: var(--space-l);
+}
+
+/* ---- Icon ---- */
+._icon_fhfjw_56 {
+  display: inline-flex;
+  flex: none;
+}
+
+._icon_fhfjw_56 > svg {
+  display: block;
+  width: var(--size-icon-md);
+  height: var(--size-icon-md);
+}
+
+._size-sm_fhfjw_50 ._icon_fhfjw_56 > svg {
+  width: var(--size-icon-sm);
+  height: var(--size-icon-sm);
+}
+
+/* ---- Icon only: a square as tall as the control; the label stays for screen readers ---- */
+._iconOnly_fhfjw_73 {
+  padding-inline: 0;
+}
+
+._iconOnly_fhfjw_73._size-md_fhfjw_45 {
+  width: var(--size-control-md);
+}
+
+._iconOnly_fhfjw_73._size-sm_fhfjw_50 {
+  width: var(--size-control-sm);
+}
+
+._srOnly_fhfjw_85 {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* ---- Variants ---- */
+._variant-primary_fhfjw_98 {
+  background: var(--color-bg-inverse);
+  color: var(--color-text-inverse);
+}
+
+._variant-primary_fhfjw_98:hover:not(:disabled),
+._variant-primary_fhfjw_98._forceHover_fhfjw_104 {
+  background: transparent;
+  border-color: var(--color-border-strong);
+  color: var(--color-text-primary);
+}
+
+._variant-primary_fhfjw_98:active:not(:disabled),
+._variant-primary_fhfjw_98._forceActive_fhfjw_111 {
+  background: var(--color-bg-inverse-active);
+  border-color: transparent;
+  color: var(--color-text-inverse);
+}
+
+._variant-primary_fhfjw_98:disabled {
+  background: var(--color-bg-disabled);
+  color: var(--color-text-disabled);
+}
+
+._variant-outline_fhfjw_122 {
+  background: transparent;
+  border-color: var(--color-border-strong);
+  color: var(--color-text-primary);
+}
+
+._variant-outline_fhfjw_122:hover:not(:disabled),
+._variant-outline_fhfjw_122._forceHover_fhfjw_104 {
+  background: var(--color-bg-inverse);
+  border-color: transparent;
+  color: var(--color-text-inverse);
+}
+
+._variant-outline_fhfjw_122:active:not(:disabled),
+._variant-outline_fhfjw_122._forceActive_fhfjw_111 {
+  background: var(--color-bg-inverse-active);
+  border-color: transparent;
+  color: var(--color-text-inverse);
+}
+
+._variant-outline_fhfjw_122:disabled {
+  border-color: var(--color-border-default);
+  color: var(--color-text-disabled);
+}
+
+._variant-ghost_fhfjw_147 {
+  background: transparent;
+  color: var(--color-text-primary);
+}
+
+._variant-ghost_fhfjw_147:hover:not(:disabled),
+._variant-ghost_fhfjw_147._forceHover_fhfjw_104 {
+  background: var(--color-bg-neutral-hover);
+}
+
+._variant-ghost_fhfjw_147:active:not(:disabled),
+._variant-ghost_fhfjw_147._forceActive_fhfjw_111 {
+  background: var(--color-bg-neutral-active);
+}
+
+._variant-ghost_fhfjw_147:disabled {
+  color: var(--color-text-disabled);
+}
+
+/* Forced focus ring for documentation only (the browser draws the real one) */
+._forceFocus_fhfjw_167 {
+  outline: var(--focus-ring-width) solid var(--focus-ring-color);
+  outline-offset: var(--focus-ring-offset);
+}
+/* Count — a figure that counts up from zero. It inherits the text style it sits in;
+   tabular numerals keep the width still while the digits change. */
+
+._count_z2ehz_4 {
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+._voice_z2ehz_9 {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+/* Image — content image. Crops to fill its box and never deforms (cover, centered).
+   The only piece of the system without a token: just proportion and crop. */
+
+._image_1q33o_4 {
+  display: block;
+  width: 100%;
+  object-fit: cover;
+  object-position: center;
+}
+
+._ratio-2-1_1q33o_11 {
+  aspect-ratio: 2 / 1;
+}
+
+._ratio-1-1_1q33o_15 {
+  aspect-ratio: 1 / 1;
+}
+
+/* The container owns the height: what a section background needs */
+._ratio-fill_1q33o_20 {
+  height: 100%;
+}
+
+/* The file owns the height: the only one that does not crop. Reserve its room. */
+._ratio-auto_1q33o_25 {
+  height: auto;
+  object-fit: fill;
+}
+/* Logo — the 540 logotype. The height rules, the width follows; it inherits the ink from its context. */
+
+._logo_6429y_3 {
+  display: block;
+  width: auto;
+  color: var(--color-text-primary);
+  flex: none;
+}
+
+._size-md_6429y_10 {
+  height: var(--size-logo-md);
+}
+
+._size-sm_6429y_14 {
+  height: var(--size-logo-sm);
+}
+
+._size-xs_6429y_18 {
+  height: var(--size-logo-xs);
+}
+/* MenuItem — a destination of the nav bar. Hover and press scale the label; focus is a 2 px line
+   under the word, not a ring: on a lone word the ring weighs more than the word. */
+
+._item_vvlcs_4 {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  box-sizing: border-box;
+  font-family: var(--font-family-base);
+  font-optical-sizing: none;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-decoration-line: none;
+  white-space: nowrap;
+  cursor: pointer;
+  color: var(--color-text-primary);
+}
+
+._label_vvlcs_19 {
+  display: inline-block;
+  transform-origin: center;
+  transition: transform 0.16s ease;
+}
+
+._item_vvlcs_4:hover ._label_vvlcs_19,
+._forceHover_vvlcs_26 ._label_vvlcs_19 {
+  transform: scale(1.09);
+}
+
+._item_vvlcs_4:active ._label_vvlcs_19,
+._forceActive_vvlcs_31 ._label_vvlcs_19 {
+  transform: scale(0.97);
+}
+
+._item_vvlcs_4:focus-visible {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+
+._item_vvlcs_4:focus-visible ._label_vvlcs_19,
+._forceFocus_vvlcs_41 ._label_vvlcs_19 {
+  box-shadow: 0 2px 0 var(--color-border-focus);
+}
+
+/* ---- Sizes ---- */
+._size-sm_vvlcs_46 {
+  min-height: var(--size-control-xs);
+  font-size: var(--text-micro-size);
+  font-weight: var(--text-micro-weight);
+  line-height: var(--text-micro-line-height);
+  text-transform: uppercase;
+}
+
+._size-lg_vvlcs_54 {
+  min-height: var(--size-control-md);
+  padding-block: var(--space-m);
+  font-size: var(--text-title-m-size);
+  font-weight: var(--text-title-m-weight);
+  line-height: var(--text-title-m-line-height);
+}
+
+/* ---- Current: bold and nothing else ---- */
+._current_vvlcs_63 {
+  font-weight: var(--text-micro-bold-weight);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  ._label_vvlcs_19 {
+    transition: none;
+  }
+
+  ._item_vvlcs_4:hover ._label_vvlcs_19,
+  ._item_vvlcs_4:active ._label_vvlcs_19 {
+    transform: none;
+  }
+}
+/* SocialIcon — a brand mark as an icon: filled, original path, inherits the ink. Always aria-hidden. */
+
+._icon_4tj8z_3 {
+  display: block;
+  flex: none;
+  fill: currentColor;
+}
+
+._size-md_4tj8z_9 {
+  inline-size: var(--size-icon-md);
+  block-size: var(--size-icon-md);
+}
+
+._size-sm_4tj8z_14 {
+  inline-size: var(--size-icon-sm);
+  block-size: var(--size-icon-sm);
+}
+/* Text — the type scale as a component. Uses semantic tokens only. */
+
+._text_xsdsu_3 {
+  margin: 0;
+  font-family: var(--font-family-base);
+  font-optical-sizing: none;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* ---- Inline: bold and code inside any text ---- */
+._text_xsdsu_3 strong,
+._text_xsdsu_3 b {
+  font-weight: var(--540-font-weight-bold);
+}
+
+._text_xsdsu_3 code,
+._mono_xsdsu_18 {
+  font-family: var(--font-family-mono);
+  font-size: 0.92em;
+}
+
+/* ---- Variants (one per text style) ---- */
+._variant-statement_xsdsu_24 {
+  font-size: var(--text-statement-size);
+  font-weight: var(--text-statement-weight);
+  line-height: var(--text-statement-line-height);
+  letter-spacing: var(--text-statement-letter-spacing);
+}
+
+._variant-title-l_xsdsu_31 {
+  font-size: var(--text-title-l-size);
+  font-weight: var(--text-title-l-weight);
+  line-height: var(--text-title-l-line-height);
+  letter-spacing: var(--text-title-l-letter-spacing);
+}
+
+._variant-title-m_xsdsu_38 {
+  font-size: var(--text-title-m-size);
+  font-weight: var(--text-title-m-weight);
+  line-height: var(--text-title-m-line-height);
+  letter-spacing: var(--text-title-m-letter-spacing);
+}
+
+._variant-title-s_xsdsu_45 {
+  font-size: var(--text-title-s-size);
+  font-weight: var(--text-title-s-weight);
+  line-height: var(--text-title-s-line-height);
+  letter-spacing: var(--text-title-s-letter-spacing);
+}
+
+._variant-title-xs_xsdsu_52 {
+  font-size: var(--text-title-xs-size);
+  font-weight: var(--text-title-xs-weight);
+  line-height: var(--text-title-xs-line-height);
+  letter-spacing: var(--text-title-xs-letter-spacing);
+}
+
+._variant-body-l_xsdsu_59 {
+  font-size: var(--text-body-l-size);
+  font-weight: var(--text-body-l-weight);
+  line-height: var(--text-body-l-line-height);
+  letter-spacing: var(--text-body-l-letter-spacing);
+}
+
+._variant-body-m_xsdsu_66 {
+  font-size: var(--text-body-m-size);
+  font-weight: var(--text-body-m-weight);
+  line-height: var(--text-body-m-line-height);
+  letter-spacing: var(--text-body-m-letter-spacing);
+}
+
+._variant-body-s_xsdsu_73 {
+  font-size: var(--text-body-s-size);
+  font-weight: var(--text-body-s-weight);
+  line-height: var(--text-body-s-line-height);
+  letter-spacing: var(--text-body-s-letter-spacing);
+}
+
+._variant-body-s-light_xsdsu_80 {
+  font-size: var(--text-body-s-light-size);
+  font-weight: var(--text-body-s-light-weight);
+  line-height: var(--text-body-s-light-line-height);
+  letter-spacing: var(--text-body-s-light-letter-spacing);
+}
+
+._variant-body-s-bold_xsdsu_87 {
+  font-size: var(--text-body-s-bold-size);
+  font-weight: var(--text-body-s-bold-weight);
+  line-height: var(--text-body-s-bold-line-height);
+  letter-spacing: var(--text-body-s-bold-letter-spacing);
+}
+
+._variant-micro_xsdsu_94 {
+  font-size: var(--text-micro-size);
+  font-weight: var(--text-micro-weight);
+  line-height: var(--text-micro-line-height);
+  letter-spacing: var(--text-micro-letter-spacing);
+}
+
+._variant-micro-light_xsdsu_101 {
+  font-size: var(--text-micro-light-size);
+  font-weight: var(--text-micro-light-weight);
+  line-height: var(--text-micro-light-line-height);
+  letter-spacing: var(--text-micro-light-letter-spacing);
+}
+
+._variant-micro-bold_xsdsu_108 {
+  font-size: var(--text-micro-bold-size);
+  font-weight: var(--text-micro-bold-weight);
+  line-height: var(--text-micro-bold-line-height);
+  letter-spacing: var(--text-micro-bold-letter-spacing);
+  text-transform: uppercase;
+}
+
+/* ---- Tones ---- */
+._tone-primary_xsdsu_117 {
+  color: var(--color-text-primary);
+}
+
+._tone-secondary_xsdsu_121 {
+  color: var(--color-text-secondary);
+}
+
+/* ---- Alignment ---- */
+._align-start_xsdsu_126 {
+  text-align: start;
+}
+
+._align-center_xsdsu_130 {
+  text-align: center;
+}
+
+/* ---- Line wrapping ---- */
+._wrap-balance_xsdsu_135 {
+  text-wrap: balance;
+}
+
+._wrap-pretty_xsdsu_139 {
+  text-wrap: pretty;
+}
+
+/* ---- Measure (max width). Centered text also centers the box. ---- */
+._measure-half_xsdsu_144 {
+  max-width: calc((var(--size-container) - var(--grid-gutter)) / 2);
+}
+
+._measure-wide_xsdsu_148 {
+  max-width: calc(var(--size-container) * 0.75);
+}
+
+._measure-prose_xsdsu_152 {
+  max-width: 62ch;
+}
+
+._measure-narrow_xsdsu_156 {
+  max-width: 38ch;
+}
+
+._align-center_xsdsu_130._measure-half_xsdsu_144,
+._align-center_xsdsu_130._measure-wide_xsdsu_148,
+._align-center_xsdsu_130._measure-prose_xsdsu_152,
+._align-center_xsdsu_130._measure-narrow_xsdsu_156 {
+  margin-inline: auto;
+}
+/* ThemeToggle — the 24 px round control of the nav bar. Ghost gesture: nothing at rest,
+   a surface on hover, one step more when pressed. */
+
+._toggle_c8kwp_4 {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: var(--size-control-xs);
+  block-size: var(--size-control-xs);
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius-pill);
+  background: transparent;
+  color: var(--color-text-primary);
+  cursor: pointer;
+  transition:
+    background 0.2s ease,
+    color 0.2s ease;
+}
+
+._toggle_c8kwp_4:hover,
+._toggle_c8kwp_4._forceHover_c8kwp_22 {
+  background: var(--color-bg-neutral-hover);
+}
+
+._toggle_c8kwp_4:active,
+._toggle_c8kwp_4._forceActive_c8kwp_27 {
+  background: var(--color-bg-neutral-active);
+}
+
+._toggle_c8kwp_4:focus-visible,
+._toggle_c8kwp_4._forceFocus_c8kwp_32 {
+  outline: var(--focus-ring-width) solid var(--focus-ring-color);
+  outline-offset: var(--focus-ring-offset);
+}
+
+._icon_c8kwp_37 {
+  display: inline-flex;
+  flex: none;
+}
+
+._icon_c8kwp_37 > svg {
+  display: block;
+  width: var(--size-icon-sm);
+  height: var(--size-icon-sm);
+}
+
+._srOnly_c8kwp_48 {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  ._toggle_c8kwp_4 {
+    transition: none;
+  }
+}
+/* Card — number, title and explanation. A bordered box, or a band edge to edge.
+   Square corners: the radius is reserved for what gets pressed. No shadow: the border separates. */
+
+._card_ii9ny_4 {
+  display: flex;
+  flex-direction: column;
+  gap: var(--padding-section);
+  height: 100%;
+  box-sizing: border-box;
+  padding: var(--padding-card);
+  border: 1px solid var(--color-border-default);
+  background: var(--color-bg-default);
+}
+
+._header_ii9ny_15 {
+  display: grid;
+  justify-items: start;
+  gap: var(--space-s);
+}
+
+._window_ii9ny_21 {
+  display: grid;
+  grid-template-rows: 1fr;
+}
+
+._body_ii9ny_26 {
+  display: grid;
+  justify-items: start;
+  gap: var(--space-l);
+  min-height: 0;
+}
+
+/* ---- Portrait, footer and after ---- */
+._portrait_ii9ny_34 {
+  inline-size: 160px;
+  block-size: 160px;
+  border-radius: var(--radius-pill);
+  margin-inline: auto;
+  margin-block-end: calc(var(--space-s) - var(--padding-section));
+}
+
+._footer_ii9ny_42 {
+  inline-size: 100%;
+  padding-block-start: var(--space-l);
+  border-block-start: 1px solid var(--color-border-default);
+}
+
+._after_ii9ny_48 {
+  display: grid;
+  gap: var(--space-s);
+  inline-size: 100%;
+  padding-block-start: var(--space-l);
+  border-block-start: 1px solid var(--color-border-strong);
+}
+
+/* ---- Emphasis among several cards ---- */
+._card_ii9ny_4 {
+  transition:
+    opacity 0.4s,
+    transform 0.4s,
+    border-color 0.4s;
+}
+
+._highlighted_ii9ny_64 {
+  transform: scale(1.04);
+  border-color: var(--color-border-strong);
+}
+
+._dimmed_ii9ny_69 {
+  opacity: 0.25;
+}
+
+/* ---- Centered ---- */
+._center_ii9ny_74 {
+  align-items: center;
+  text-align: center;
+}
+
+._center_ii9ny_74 ._header_ii9ny_15,
+._center_ii9ny_74 ._body_ii9ny_26 {
+  justify-items: center;
+}
+
+._center_ii9ny_74 ._window_ii9ny_21 {
+  max-width: 62ch;
+  margin-inline: auto;
+}
+
+/* ---- Row: a band edge to edge, inside a CardList ---- */
+._row_ii9ny_90 {
+  display: block;
+  height: auto;
+  gap: 0;
+  padding: var(--space-2xl) max(var(--padding-page), (100% - var(--size-container)) / 2);
+  border: 0;
+  border-top: 1px solid var(--color-border-default);
+  background: transparent;
+  transition: background-color 0.42s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+._row_ii9ny_90 ._ordinal_ii9ny_101 {
+  padding-top: var(--space-xs);
+}
+
+._row_ii9ny_90 ._body_ii9ny_26 {
+  max-width: 62ch;
+  padding-top: var(--space-l);
+  gap: var(--space-l);
+}
+
+@media (min-width: 600px) {
+  ._row_ii9ny_90 ._header_ii9ny_15 {
+    grid-template-columns: 1fr 2fr;
+    align-items: start;
+    gap: var(--grid-gutter);
+  }
+
+  ._row_ii9ny_90 ._window_ii9ny_21 {
+    margin-inline-start: calc((100% - var(--grid-gutter)) / 3 + var(--grid-gutter));
+  }
+
+  ._row_ii9ny_90._center_ii9ny_74 ._header_ii9ny_15 {
+    grid-template-columns: 1fr;
+    justify-items: center;
+  }
+
+  ._row_ii9ny_90._center_ii9ny_74 ._window_ii9ny_21 {
+    margin-inline: auto;
+  }
+}
+
+/* Folded: the window closes to zero and is clipped; the text stays in the document */
+._row_ii9ny_90._folded_ii9ny_133 ._window_ii9ny_21 {
+  grid-template-rows: 0fr;
+  opacity: 0;
+  transition:
+    grid-template-rows 0.42s cubic-bezier(0.4, 0, 0.2, 1),
+    opacity 0.32s ease;
+}
+
+._row_ii9ny_90._folded_ii9ny_133 ._window_ii9ny_21 > ._body_ii9ny_26 {
+  overflow: hidden;
+  min-height: 0;
+}
+
+/* Active: open, on the active-row background */
+._row_ii9ny_90._active_ii9ny_147 {
+  background: var(--color-bg-row-active);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  ._card_ii9ny_4,
+  ._row_ii9ny_90,
+  ._row_ii9ny_90._folded_ii9ny_133 ._window_ii9ny_21 {
+    transition: none;
+  }
+}
+/* Carousel — a strip that is paged with the dots below. One piece per slot. */
+
+._carousel_zjv2t_3 {
+  position: relative;
+  display: grid;
+  gap: var(--space-3xl);
+}
+
+._headerRow_zjv2t_9 {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: var(--space-xl);
+}
+
+._window_zjv2t_16 {
+  overflow: hidden;
+}
+
+._track_zjv2t_20 {
+  display: flex;
+  gap: var(--grid-gutter);
+  overflow-x: auto;
+  scroll-snap-type: x mandatory;
+  scroll-behavior: smooth;
+  scrollbar-width: none;
+  -webkit-overflow-scrolling: touch;
+}
+
+._track_zjv2t_20::-webkit-scrollbar {
+  display: none;
+}
+
+._slot_zjv2t_34 {
+  flex: 0 0 var(--carousel-item, 100%);
+  min-width: 0;
+  scroll-snap-align: start;
+}
+
+@media (min-width: 600px) {
+  ._slot_zjv2t_34 {
+    flex-basis: var(--carousel-item, calc((100% - var(--grid-gutter)) / 2));
+  }
+}
+
+/* ---- Controls ---- */
+._dots_zjv2t_47 {
+  display: flex;
+  justify-content: center;
+}
+
+._row_zjv2t_52 {
+  display: flex;
+  align-items: center;
+  gap: var(--space-l);
+}
+
+._row_zjv2t_52 ._dots_zjv2t_47 {
+  flex: 1;
+}
+
+._arrows_zjv2t_62 {
+  display: inline-flex;
+  gap: var(--space-s);
+}
+
+/* Sides: the arrows beside the strip, one on each side, no dots. The window keeps the wide
+   gutter free on both sides so the arrows never cover the end pieces. */
+._sides_zjv2t_69 ._window_zjv2t_16 {
+  padding-inline: var(--grid-gutter-wide);
+}
+
+._side_zjv2t_69 {
+  position: absolute;
+  inset-block-start: 50%;
+  transform: translateY(-50%);
+  z-index: 1;
+}
+
+._sidePrev_zjv2t_80 {
+  inset-inline-start: calc((var(--grid-gutter-wide) - var(--size-control-md)) / 2);
+}
+
+._sideNext_zjv2t_84 {
+  inset-inline-end: calc((var(--grid-gutter-wide) - var(--size-control-md)) / 2);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  ._track_zjv2t_20 {
+    scroll-behavior: auto;
+  }
+}
+/* CaseItem — a portfolio case: the photo, and over it the name and the sentence anchored at the
+   bottom on a veil. The zoom of the image is the only thing that says it is pressed. */
+
+._item_1gpwq_4 {
+  position: relative;
+  display: block;
+  aspect-ratio: 2 / 1;
+  overflow: hidden;
+  color: var(--color-text-on-media);
+  text-decoration: none;
+}
+
+._frame_1gpwq_13 {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+}
+
+._frame_1gpwq_13 > img {
+  height: 100%;
+  transition: transform 0.32s ease;
+}
+
+/* Only linked cases zoom: without a destination it would promise something that does not happen */
+._linked_1gpwq_25:hover ._frame_1gpwq_13 > img,
+._linked_1gpwq_25._forceHover_1gpwq_26 ._frame_1gpwq_13 > img {
+  transform: scale(1.05);
+}
+
+._linked_1gpwq_25:active ._frame_1gpwq_13 > img,
+._linked_1gpwq_25._forceActive_1gpwq_31 ._frame_1gpwq_13 > img {
+  transform: scale(1.04);
+}
+
+._linked_1gpwq_25:focus-visible {
+  outline: var(--focus-ring-width) solid var(--color-border-strong-inverse);
+  outline-offset: calc(-1 * var(--focus-ring-width) - var(--focus-ring-offset));
+}
+
+/* The veil is not decoration: without it a light name on a light photo disappears */
+._veil_1gpwq_41 {
+  position: absolute;
+  inset: 0;
+  background: var(--gradient-image-veil);
+  pointer-events: none;
+}
+
+._data_1gpwq_48 {
+  position: absolute;
+  inset-inline: 0;
+  inset-block-end: 0;
+  display: grid;
+  gap: var(--space-s);
+  padding: var(--padding-card);
+}
+
+/* Text over media does not follow the theme: white in both */
+._data_1gpwq_48 > * {
+  color: var(--color-text-on-media);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  ._frame_1gpwq_13 > img {
+    transition: none;
+  }
+
+  ._linked_1gpwq_25:hover ._frame_1gpwq_13 > img,
+  ._linked_1gpwq_25:active ._frame_1gpwq_13 > img {
+    transform: none;
+  }
+}
+/* Dialog — a window that covers the page to tell one thing. A real <dialog>: closed, it paints
+   nothing; the veil is the browser's ::backdrop. Half the grid wide. No shadow: the veil separates. */
+
+._dialog_y1k69_4 {
+  box-sizing: border-box;
+  width: calc((var(--size-container) - var(--grid-gutter)) / 2);
+  max-width: calc(100% - var(--padding-page) * 2);
+  max-height: calc(100svh - var(--padding-page) * 2);
+  margin: auto;
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius-default);
+  background: var(--color-bg-surface);
+  color: var(--color-text-primary);
+  overflow: hidden;
+}
+
+._dialog_y1k69_4::backdrop {
+  background: var(--color-bg-overlay);
+}
+
+/* The inner wrapper: what tells the veil from the panel is the click target */
+._inner_y1k69_23 {
+  display: flex;
+  flex-direction: column;
+  max-height: calc(100svh - var(--padding-page) * 2);
+}
+
+/* On short screens the portrait crops instead of eating the dialog */
+._media_y1k69_30 {
+  flex: none;
+  max-height: 50svh;
+  overflow: hidden;
+}
+
+._body_y1k69_36 {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-xl);
+  padding: var(--padding-card);
+  min-height: 0;
+}
+
+._header_y1k69_44 {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--space-l);
+}
+
+/* Only the text scrolls: title and cross stay in view */
+._content_y1k69_52 {
+  min-height: 0;
+  overflow-y: auto;
+}
+
+._footer_y1k69_57 {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--space-l);
+}
+
+._dialog_y1k69_4:focus {
+  outline: none;
+}
+/* Field — label and control tied by the id. The outline is only the bottom line: no box, no radius.
+   Focus goes to that line, 2 px in the focus color: the system's only exception to the ring. */
+
+._field_1i00h_4 {
+  display: grid;
+  gap: var(--space-s);
+  width: 100%;
+}
+
+._label_1i00h_10 {
+  display: block;
+  width: fit-content;
+  text-transform: uppercase;
+  cursor: default;
+}
+
+._control_1i00h_17 {
+  box-sizing: border-box;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  border-bottom: 1px solid var(--color-border-default);
+  border-radius: 0;
+  background: transparent;
+  font-family: var(--font-family-base);
+  font-optical-sizing: none;
+  font-size: var(--540-font-size-16); /* 16 px: below it, Safari on iPhone zooms on focus */
+  font-weight: var(--text-body-m-weight);
+  line-height: normal;
+  color: var(--color-text-primary);
+}
+
+._control_1i00h_17::placeholder {
+  color: var(--color-text-secondary);
+  opacity: 1;
+}
+
+._control_1i00h_17:focus {
+  outline: none;
+  border-bottom-width: 2px;
+  border-bottom-color: var(--color-border-focus);
+  margin-bottom: -1px;
+}
+
+._control_1i00h_17:disabled {
+  color: var(--color-text-disabled);
+  cursor: not-allowed;
+}
+
+._control_1i00h_17:disabled::placeholder {
+  color: var(--color-text-disabled);
+}
+
+._size-md_1i00h_55 {
+  height: var(--size-control-md);
+}
+
+._size-sm_1i00h_59 {
+  height: var(--size-control-sm);
+}
+
+/* The textarea keeps the same line; its height is the message's */
+._multiline_1i00h_64 {
+  height: auto;
+  min-height: calc(var(--size-control-md) * 2);
+  padding-block: var(--space-m);
+  resize: vertical;
+}
+/* Footer — the brand with its tagline, the columns of links, the networks and the signature.
+   The top only exists if there is something to put in it. The closing is separated by air, not a line. */
+
+._footer_64xzx_4 {
+  display: grid;
+  gap: var(--space-3xl);
+}
+
+._top_64xzx_9 {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  gap: var(--space-3xl) var(--grid-gutter-wide);
+}
+
+._brand_64xzx_16 {
+  display: grid;
+  gap: var(--space-l);
+  align-content: start;
+}
+
+._home_64xzx_22 {
+  display: inline-flex;
+  width: fit-content;
+  color: inherit;
+}
+
+._home_64xzx_22:focus-visible {
+  outline: var(--focus-ring-width) solid var(--focus-ring-color);
+  outline-offset: var(--focus-ring-offset);
+}
+
+._tagline_64xzx_33 {
+  max-width: 38ch;
+}
+
+._groups_64xzx_37 {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-3xl) var(--grid-gutter-wide);
+}
+
+._group_64xzx_37 {
+  display: grid;
+  gap: var(--space-l);
+  align-content: start;
+}
+
+._groupTitle_64xzx_49 {
+  text-transform: uppercase;
+}
+
+._list_64xzx_53 {
+  display: grid;
+  gap: var(--space-m);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+._link_64xzx_61 {
+  color: inherit;
+  text-decoration-line: none;
+  text-decoration-thickness: 1px;
+  text-underline-offset: var(--space-xs);
+}
+
+._link_64xzx_61:hover {
+  text-decoration-line: underline;
+}
+
+._link_64xzx_61:focus-visible {
+  outline: var(--focus-ring-width) solid var(--focus-ring-color);
+  outline-offset: var(--focus-ring-offset);
+}
+
+._networks_64xzx_77 {
+  grid-auto-flow: column;
+  justify-content: start;
+  gap: var(--space-m);
+}
+
+._network_64xzx_77 {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: var(--size-control-xs);
+  block-size: var(--size-control-xs);
+  color: var(--color-text-primary);
+}
+
+._network_64xzx_77:hover {
+  color: var(--color-text-accent-inverse);
+}
+
+._network_64xzx_77:focus-visible {
+  outline: var(--focus-ring-width) solid var(--focus-ring-color);
+  outline-offset: var(--focus-ring-offset);
+}
+
+._closing_64xzx_101 {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: var(--space-s) var(--space-xl);
+  padding-top: var(--space-xl);
+}
+
+._legal_64xzx_110 {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-s);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+._legal_64xzx_110 li + li::before {
+  content: '·';
+  margin-inline-end: var(--space-s);
+}
+/* Grid — twelve columns in the three ranges, with the two gutters. Every item takes the row;
+   from 600 px spans 1–6 take half; from 1024 px each takes its span. */
+
+._grid_fmszx_4 {
+  display: grid;
+  grid-template-columns: repeat(var(--grid-columns), 1fr);
+  column-gap: var(--grid-gutter);
+  row-gap: var(--grid-gutter);
+}
+
+._item_fmszx_11 {
+  min-width: 0;
+  grid-column: span 12;
+}
+
+@media (min-width: 600px) {
+  ._span-1_fmszx_17,
+  ._span-2_fmszx_18,
+  ._span-3_fmszx_19,
+  ._span-4_fmszx_20,
+  ._span-5_fmszx_21,
+  ._span-6_fmszx_22 {
+    grid-column: span 6;
+  }
+}
+
+@media (min-width: 1024px) {
+  ._span-1_fmszx_17 { grid-column: span 1; }
+  ._span-2_fmszx_18 { grid-column: span 2; }
+  ._span-3_fmszx_19 { grid-column: span 3; }
+  ._span-4_fmszx_20 { grid-column: span 4; }
+  ._span-5_fmszx_21 { grid-column: span 5; }
+  ._span-6_fmszx_22 { grid-column: span 6; }
+  ._span-7_fmszx_34 { grid-column: span 7; }
+  ._span-8_fmszx_35 { grid-column: span 8; }
+  ._span-9_fmszx_36 { grid-column: span 9; }
+  ._span-10_fmszx_37 { grid-column: span 10; }
+  ._span-11_fmszx_38 { grid-column: span 11; }
+  ._span-12_fmszx_39 { grid-column: span 12; }
+}
+
+/* Five equal columns */
+._five_fmszx_43 {
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+}
+
+._five_fmszx_43 > ._item_fmszx_11 {
+  grid-column: auto;
+}
+
+/* Five: three on top, two centered below (from 1024 px) */
+@media (min-width: 1024px) {
+  ._fiveCentered_fmszx_53 > ._item_fmszx_11:nth-child(4) {
+    grid-column: 3 / span 4;
+  }
+
+  ._fiveCentered_fmszx_53 > ._item_fmszx_11:nth-child(5) {
+    grid-column: 7 / span 4;
+  }
+}
+
+/* Compact density: text one step down and tighter cards */
+._compact_fmszx_63 {
+  --text-title-s-size: var(--540-font-size-22);
+  --text-body-m-size: var(--540-font-size-16);
+  --text-body-s-size: var(--540-font-size-14);
+  --text-body-m-line-height: 1.4;
+  --padding-card: var(--space-l);
+  --padding-section: var(--space-l);
+}
+
+._item_fmszx_11 > * {
+  block-size: 100%;
+}
+
+/* Centered in height: each cell keeps its own height (a ring and the panel beside it) */
+._center_fmszx_77 {
+  align-items: center;
+}
+
+._center_fmszx_77 > ._item_fmszx_11 > * {
+  block-size: auto;
+}
+/* Lists — the three lists of the talks: plain centered items, items with an arrow, and
+   label + text pairs. None has bullets: the air separates. */
+
+._simple_1y536_4 {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  gap: var(--space-m);
+  justify-items: center;
+  text-align: center;
+}
+
+._arrows_1y536_14 {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  gap: var(--space-m);
+  justify-items: center;
+  text-align: center;
+}
+
+._arrows_1y536_14 li {
+  display: flex;
+  gap: var(--space-s);
+  align-items: baseline;
+}
+
+._arrow_1y536_14 {
+  color: var(--color-text-secondary);
+}
+
+._problems_1y536_34 {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  gap: var(--space-xl);
+}
+
+._problem_1y536_34 {
+  display: grid;
+  gap: var(--space-s);
+}
+/* Menu — the desktop nav bar: three columns, the middle one as wide as it needs.
+   Logo left, destinations centered on the bar, theme toggle right. */
+
+._menu_14qp6_4 {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  width: 100%;
+  align-items: center;
+  gap: var(--space-xl);
+  padding-block: var(--space-xl);
+}
+
+._home_14qp6_13 {
+  display: inline-flex;
+  color: inherit;
+}
+
+._home_14qp6_13:focus-visible {
+  outline: var(--focus-ring-width) solid var(--focus-ring-color);
+  outline-offset: var(--focus-ring-offset);
+}
+
+._list_14qp6_23 {
+  display: flex;
+  align-items: center;
+  gap: var(--space-xl);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+._end_14qp6_32 {
+  display: inline-flex;
+  justify-self: end;
+}
+/* Metric — a figure, what it measures and its change, inside a bordered box. */
+
+._metric_p5wtq_3 {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--padding-section);
+  block-size: 100%;
+  box-sizing: border-box;
+  padding: var(--padding-card);
+  border: 1px solid var(--color-border-default);
+  background: var(--color-bg-default);
+  text-align: center;
+}
+
+._body_p5wtq_16 {
+  display: grid;
+  gap: var(--space-l);
+  justify-items: center;
+  max-inline-size: 62ch;
+}
+
+/* The notes under a row of metrics stay at the web body-s (14 px) in projection too */
+._note_p5wtq_24 {
+  --text-body-s-size: var(--540-font-size-14);
+  margin-block-start: var(--space-l);
+}
+/* NavMobile — logo and a button that opens the menu full screen. The bar is transparent over
+   whatever is behind; only the panel paints. Horizontal padding belongs to the bar row, not here. */
+
+._nav_1ghkl_4 {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-xl);
+  padding-block: var(--space-xl);
+}
+
+._home_1ghkl_13 {
+  display: inline-flex;
+  color: inherit;
+}
+
+._home_1ghkl_13:focus-visible {
+  outline: var(--focus-ring-width) solid var(--focus-ring-color);
+  outline-offset: var(--focus-ring-offset);
+}
+
+._end_1ghkl_23 {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-s);
+}
+
+/* The panel: a real <dialog>, full screen */
+._panel_1ghkl_30 {
+  position: fixed;
+  inset: 0;
+  z-index: 100;
+  width: 100%;
+  max-width: none;
+  height: 100%;
+  max-height: none;
+  margin: 0;
+  padding: var(--padding-page);
+  border: 0;
+  display: none;
+  flex-direction: column;
+  overflow-y: auto;
+  background: var(--color-bg-default);
+  color: var(--color-text-primary);
+}
+
+._panel_1ghkl_30[open] {
+  display: flex;
+}
+
+._panel_1ghkl_30::backdrop {
+  background: transparent;
+}
+
+._panelBar_1ghkl_56 {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-xl);
+  padding-block: var(--space-xl);
+  margin-bottom: var(--space-3xl);
+}
+
+._list_1ghkl_65 {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--space-m);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+/* Question — a question and its answer, under a hairline, centered. */
+
+._question_mtllx_3 {
+  display: grid;
+  gap: var(--space-s);
+  justify-items: center;
+  padding-block-start: var(--space-l);
+  border-block-start: 1px solid var(--color-border-default);
+  inline-size: 100%;
+  text-align: center;
+}
+/* Screenshot — a capture at a fixed height (so the layout does not jump) with rounded corners. */
+
+._screenshot_hioia_3 {
+  display: block;
+  block-size: min(calc(100svh - 470px), 560px);
+  inline-size: auto;
+  max-inline-size: 100%;
+  margin-inline: auto;
+  margin-block-start: var(--space-2xl);
+  border-radius: var(--radius-default);
+  object-fit: contain;
+}
+/* Section — a band of the page: full-bleed background, content in the column, the system's vertical air.
+   Two pieces on purpose: if the background lived in the column it would stop at 1200 px. */
+
+._section_1nzhz_4 {
+  position: relative;
+  padding-block: var(--padding-section-block);
+}
+
+._tone-default_1nzhz_9 {
+  background: transparent;
+}
+
+._tone-raised_1nzhz_13 {
+  background: var(--color-bg-row-active);
+}
+
+/* The column fills the band and stops at --size-container, centered */
+._column_1nzhz_18 {
+  position: relative;
+  max-width: var(--size-container);
+  margin-inline: auto;
+  padding-inline: var(--padding-page);
+  box-sizing: content-box;
+}
+/* SectionHeader — title and lead. Start fills the column; center caps at half the grid. */
+
+._header_q562s_3 {
+  display: grid;
+  justify-items: start;
+  gap: var(--space-3xl);
+}
+
+._center_q562s_9 {
+  justify-items: center;
+  max-width: calc((var(--size-container) - var(--grid-gutter)) / 2);
+  margin-inline: auto;
+  text-align: center;
+}
+/* Stack — pieces one under the other, with one of three steps of air between them.
+   It is what keeps a header, a grid and a note apart inside a stop. */
+
+._stack_169h2_4 {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  justify-items: stretch;
+}
+
+._gap-s_169h2_10 {
+  gap: var(--space-l);
+}
+
+._gap-m_169h2_14 {
+  gap: var(--space-2xl);
+}
+
+._gap-l_169h2_18 {
+  gap: var(--space-3xl);
+}
+
+/* Full width up to the cap: inside another grid, auto margins alone would shrink it to its content */
+._measure-half_169h2_23 {
+  inline-size: 100%;
+  max-inline-size: calc((var(--size-container) - var(--grid-gutter)) / 2);
+  margin-inline: auto;
+}
+
+._measure-wide_169h2_29 {
+  inline-size: 100%;
+  max-inline-size: calc(var(--size-container) * 0.75);
+  margin-inline: auto;
+}
+/* TeamMember — a person: portrait, role, name and two lines. The three at the same level,
+   separated by --space-l: no box in between. */
+
+._member_1mo29_4 {
+  display: grid;
+  gap: var(--space-l);
+  justify-items: start;
+}
+
+._center_1mo29_10 {
+  justify-items: center;
+  text-align: center;
+}
+
+._portrait_1mo29_15 {
+  width: 100%;
+}
+
+._link_1mo29_19 {
+  color: inherit;
+  text-decoration-line: none;
+  text-decoration-thickness: 1px;
+  text-underline-offset: var(--space-xs);
+}
+
+._link_1mo29_19:hover {
+  text-decoration-line: underline;
+}
+
+._link_1mo29_19:focus-visible {
+  outline: var(--focus-ring-width) solid var(--focus-ring-color);
+  outline-offset: var(--focus-ring-offset);
+}
+/* Bars — horizontal bars: the label, a bar that grows from the left with its figure at the tip,
+   and an optional detail. Ink for the story, gray for the context, yellow for the one row. */
+
+._bars_11g54_4 {
+  display: grid;
+  gap: var(--space-m);
+  text-align: start;
+}
+
+._list_11g54_10 {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  gap: var(--space-m);
+}
+
+._row_11g54_18 {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  grid-template-areas:
+    'label detail'
+    'track track';
+  column-gap: var(--space-l);
+  row-gap: var(--space-xs);
+  align-items: center;
+  transition: opacity 0.35s;
+}
+
+@media (min-width: 600px) {
+  ._row_11g54_18 {
+    grid-template-columns: minmax(8rem, 2fr) minmax(0, 5fr) auto;
+    grid-template-areas: 'label track detail';
+  }
+}
+
+._row_11g54_18[data-dimmed] {
+  opacity: 0.3;
+}
+
+._label_11g54_41 {
+  grid-area: label;
+}
+
+._track_11g54_45 {
+  grid-area: track;
+  display: flex;
+  align-items: center;
+  gap: var(--space-s);
+  min-inline-size: 0;
+}
+
+._fill_11g54_53 {
+  flex: none;
+  block-size: var(--space-xl);
+  max-inline-size: calc(100% - 5ch);
+  transition: inline-size 0.9s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+._tone-ink_11g54_60 {
+  background: var(--color-bg-inverse);
+}
+
+._tone-context_11g54_64 {
+  background: var(--color-text-tertiary);
+}
+
+._tone-accent_11g54_68 {
+  background: var(--color-bg-accent);
+}
+
+._value_11g54_72 {
+  flex: none;
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
+}
+
+._detail_11g54_78 {
+  grid-area: detail;
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
+}
+
+._head_11g54_84 {
+}
+
+@media (prefers-reduced-motion: reduce) {
+  ._fill_11g54_53,
+  ._row_11g54_18 {
+    transition: none;
+  }
+}
+/* Blobs — two soft yellow stains that drift behind the page. Decoration: aria-hidden, no pointer. */
+
+._blobs_2bbak_3 {
+  position: fixed;
+  inset: 0;
+  z-index: 0;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+._a_2bbak_11,
+._b_2bbak_3 {
+  position: absolute;
+  width: 42vw;
+  aspect-ratio: 1;
+  will-change: transform;
+}
+
+._a_2bbak_11 {
+  inset-block-start: -12%;
+  inset-inline-end: -8%;
+  background: radial-gradient(
+    circle at center,
+    color-mix(in srgb, var(--color-bg-accent) 11%, transparent) 0%,
+    color-mix(in srgb, var(--color-bg-accent) 4%, transparent) 42%,
+    transparent 68%
+  );
+  animation: _driftA_2bbak_1 34s ease-in-out infinite alternate;
+}
+
+._b_2bbak_3 {
+  inset-block-end: -16%;
+  inset-inline-start: -12%;
+  background: radial-gradient(
+    circle at center,
+    color-mix(in srgb, var(--color-bg-accent) 7%, transparent) 0%,
+    color-mix(in srgb, var(--color-bg-accent) 3%, transparent) 40%,
+    transparent 66%
+  );
+  animation: _driftB_2bbak_1 47s ease-in-out infinite alternate;
+}
+
+@keyframes _driftA_2bbak_1 {
+  from {
+    transform: translateZ(0) scale(1);
+  }
+  to {
+    transform: translate3d(-7%, 9%, 0) scale(1.14);
+  }
+}
+
+@keyframes _driftB_2bbak_1 {
+  from {
+    transform: translateZ(0) scale(1.1);
+  }
+  to {
+    transform: translate3d(8%, -7%, 0) scale(0.92);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  ._a_2bbak_11,
+  ._b_2bbak_3 {
+    animation: none;
+  }
+}
+/* Slide — a stop of the talk: a Section that fills the screen and centers its content
+   on a 16:9 stage. Every stop weighs the same: same scale, same air, same treatment. */
+
+._slide_yly5c_4 {
+  position: relative;
+  padding-block: var(--padding-section-block);
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  align-content: center;
+}
+
+._full_yly5c_12 {
+  min-block-size: 100svh;
+}
+
+._tone-default_yly5c_16 {
+  background: transparent;
+}
+
+._tone-raised_yly5c_20 {
+  background: var(--color-bg-row-active);
+}
+
+/* The keyboard navigation does not draw a focus box on the stop */
+._slide_yly5c_4:focus,
+._slide_yly5c_4:focus-visible {
+  outline: none;
+}
+
+/* The column: the content stage, 16:9 at most */
+._stage_yly5c_31 {
+  position: relative;
+  width: 100%;
+  max-inline-size: min(calc(var(--size-container) + var(--padding-page) * 2), calc(100svh * 16 / 9));
+  margin-inline: auto;
+  padding-inline: var(--padding-page);
+  box-sizing: border-box;
+  text-align: center;
+}
+/* BlockTitle — a numbered block title and, right behind it, its photo. The section has no
+   minimum height so the photo peeks under it; the photo reveals and zooms as you scroll. */
+
+._title_40wtv_4 {
+  display: grid;
+  justify-items: center;
+  gap: var(--space-l);
+}
+
+._photo_40wtv_10 {
+  position: relative;
+  overflow: hidden;
+}
+
+._layer_40wtv_15 {
+  scale: 1.18;
+  transform-origin: center;
+}
+
+/* Reveal from the bottom and settle the zoom while the photo crosses the screen.
+   Scroll-driven where supported; a static photo elsewhere. */
+@supports (animation-timeline: view()) {
+  @media (prefers-reduced-motion: no-preference) {
+    ._photo_40wtv_10 {
+      clip-path: inset(100% 0 0 0);
+      animation: _reveal_40wtv_1 linear both;
+      animation-timeline: view();
+      animation-range: entry 0% entry 60%;
+    }
+
+    ._layer_40wtv_15 {
+      animation: _settle_40wtv_1 linear both;
+      animation-timeline: view();
+      animation-range: entry 0% exit 100%;
+    }
+  }
+}
+
+@keyframes _reveal_40wtv_1 {
+  from {
+    clip-path: inset(100% 0 0 0);
+  }
+  to {
+    clip-path: inset(0 0 0 0);
+  }
+}
+
+@keyframes _settle_40wtv_1 {
+  from {
+    scale: 1.18;
+    translate: 0 -4%;
+  }
+  to {
+    scale: 1;
+    translate: 0 4%;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  ._layer_40wtv_15 {
+    scale: 1;
+  }
+}
+/* CardList — the stack of full-width bands. Leaves the column to the window edge so each band's
+   line crosses the whole screen, and closes the stack with the last line. No gap: the line separates. */
+
+._list_jhida_4 {
+  width: 100vw;
+  margin-inline: calc(50% - 50vw);
+  border-block-end: 1px solid var(--color-border-default);
+}
+/* Closing — the last slide before the footer: a statement sentence, and optionally a body
+   at half the grid and a final line. */
+
+._closing_ursam_4 {
+  text-align: center;
+}
+
+._body_ursam_8 {
+  display: grid;
+  gap: var(--space-l);
+  margin: var(--space-2xl) auto 0;
+  justify-items: center;
+}
+/* Cover — the first stop: the title in statement, the question, the lead, the event, the client
+   logo and the full-bleed photo. Everything centered; the photo is glued to the bottom. */
+
+._cover_weyps_4 {
+  padding-block-start: calc(var(--padding-section-block) + var(--space-xl) * 2 + var(--size-control-xs));
+  padding-block-end: 0;
+}
+
+._block_weyps_9 {
+  display: grid;
+  justify-items: center;
+  gap: var(--space-3xl);
+}
+
+._text_weyps_15 {
+  display: grid;
+  justify-items: center;
+  gap: var(--space-2xl);
+}
+
+._line_weyps_21 {
+  display: block;
+}
+
+._client_weyps_25 {
+  display: flex;
+  justify-content: center;
+}
+
+._client_weyps_25 img {
+  block-size: var(--size-logo-client);
+  inline-size: auto;
+}
+
+._clientDark_weyps_35 {
+  display: none;
+}
+
+[data-theme='dark'] ._clientLight_weyps_39 {
+  display: none;
+}
+
+[data-theme='dark'] ._clientDark_weyps_35 {
+  display: block;
+}
+
+/* The photo bleeds: full viewport width, no radius */
+._photo_weyps_48 {
+  width: 100vw;
+  margin-inline: calc(50% - 50vw);
+  overflow: hidden;
+}
+/* Cycle — a ring of phases. Idle: thin border, tertiary number. Done: filled in primary.
+   Active: filled in the inverse, 18 % bigger. A mark paints the node red, green or yellow. */
+
+._cycle_1bjzo_4 {
+  display: block;
+  inline-size: 100%;
+  max-block-size: calc(100svh - 360px);
+  font-family: var(--font-family-base);
+}
+
+._ring_1bjzo_11 {
+  fill: none;
+  stroke: var(--color-border-default);
+  stroke-width: 3;
+}
+
+._arc_1bjzo_17 {
+  fill: none;
+  stroke: var(--color-text-primary);
+  stroke-width: 3;
+  stroke-linecap: round;
+  transition: stroke-dashoffset 0.8s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+._node_1bjzo_25 circle {
+  stroke-width: 3;
+  transition:
+    fill 0.3s,
+    stroke 0.3s,
+    transform 0.3s;
+  transform-box: fill-box;
+  transform-origin: center;
+}
+
+._node_1bjzo_25[data-state='idle'] circle {
+  fill: var(--color-bg-default);
+  stroke: var(--color-border-default);
+}
+
+._node_1bjzo_25[data-state='done'] circle {
+  fill: var(--color-text-primary);
+  stroke: var(--color-text-primary);
+}
+
+._node_1bjzo_25[data-state='active'] circle {
+  fill: var(--color-bg-inverse);
+  stroke: var(--color-bg-inverse);
+  transform: scale(1.18);
+}
+
+._node_1bjzo_25[data-mark] circle {
+  transform: scale(1.18);
+}
+
+._node_1bjzo_25[data-mark='red'] circle {
+  fill: var(--540-status-red);
+  stroke: var(--540-status-red);
+}
+
+._node_1bjzo_25[data-mark='green'] circle {
+  fill: var(--540-status-green);
+  stroke: var(--540-status-green);
+}
+
+._node_1bjzo_25[data-mark='yellow'] circle {
+  fill: var(--color-bg-accent);
+  stroke: var(--color-bg-accent);
+}
+
+._number_1bjzo_70 {
+  font-size: 26px;
+  font-weight: var(--540-font-weight-bold);
+  fill: var(--color-text-tertiary);
+}
+
+._node_1bjzo_25[data-state='done'] ._number_1bjzo_70,
+._node_1bjzo_25[data-state='active'] ._number_1bjzo_70,
+._node_1bjzo_25[data-mark='red'] ._number_1bjzo_70,
+._node_1bjzo_25[data-mark='green'] ._number_1bjzo_70 {
+  fill: var(--color-text-inverse);
+}
+
+._node_1bjzo_25[data-mark='yellow'] ._number_1bjzo_70 {
+  fill: var(--540-neutral-950);
+}
+
+._label_1bjzo_87 {
+  font-size: 28px;
+  font-weight: var(--540-font-weight-regular);
+  fill: var(--color-text-tertiary);
+}
+
+._node_1bjzo_25:not([data-state='idle']) ._label_1bjzo_87,
+._node_1bjzo_25[data-mark] ._label_1bjzo_87 {
+  fill: var(--color-text-primary);
+  font-weight: var(--540-font-weight-bold);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  ._arc_1bjzo_17,
+  ._node_1bjzo_25 circle {
+    transition: none;
+  }
+}
+/* DeckFooter — the last stop of a talk: a full screen with the halo rising from the bottom,
+   the logo, the tagline, the networks, the thanks and the signature, all centered. */
+
+._pie_m97tq_4 {
+  position: relative;
+  min-block-size: 100svh;
+  display: grid;
+  align-content: center;
+  overflow: hidden;
+  background: var(--color-bg-default);
+}
+
+._halo_m97tq_13 {
+  position: absolute;
+  inset-block-end: 0;
+  inset-inline-start: 50%;
+  width: 120vw;
+  aspect-ratio: 1;
+  transform: translate(-50%, 50%);
+  pointer-events: none;
+  background: var(--gradient-halo);
+}
+
+._column_m97tq_24 {
+  position: relative;
+  max-width: var(--size-container);
+  margin-inline: auto;
+  padding-inline: var(--padding-page);
+  box-sizing: content-box;
+}
+
+._footer_m97tq_32 {
+  display: grid;
+  gap: var(--space-3xl);
+  justify-items: center;
+  text-align: center;
+}
+
+._brand_m97tq_39 {
+  display: grid;
+  gap: var(--space-l);
+  justify-items: center;
+}
+
+._home_m97tq_45 {
+  display: inline-flex;
+  color: inherit;
+}
+
+._home_m97tq_45:focus-visible {
+  outline: var(--focus-ring-width) solid var(--focus-ring-color);
+  outline-offset: var(--focus-ring-offset);
+}
+
+._tagline_m97tq_55 {
+  max-width: 38ch;
+}
+
+._networks_m97tq_59 {
+  display: flex;
+  justify-content: center;
+  gap: var(--space-m);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+._network_m97tq_59 {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: var(--size-control-xs);
+  block-size: var(--size-control-xs);
+  color: var(--color-text-primary);
+}
+
+._network_m97tq_59:hover {
+  color: var(--color-text-accent-inverse);
+}
+
+._network_m97tq_59:focus-visible {
+  outline: var(--focus-ring-width) solid var(--focus-ring-color);
+  outline-offset: var(--focus-ring-offset);
+}
+
+._closing_m97tq_86 {
+  padding-top: var(--space-xl);
+}
+/* Deck — the frame of a talk: blobs behind, the fixed top bar that hides while navigating,
+   the stops, the side index and the footer as the last stop. */
+
+._deck_1rkwo_4 {
+  position: relative;
+  min-height: 100svh;
+  background: var(--color-bg-default);
+  color: var(--color-text-primary);
+  font-family: var(--font-family-base);
+}
+
+/* ---- Top bar: fixed, over everything; hides when navigating, comes back near the top edge ---- */
+._bar_1rkwo_13 {
+  position: fixed;
+  inset-block-start: 0;
+  inset-inline: 0;
+  z-index: 2;
+  width: 100%;
+  background: var(--color-bg-default);
+  transition:
+    transform 0.45s ease,
+    opacity 0.45s ease;
+}
+
+@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
+  ._bar_1rkwo_13 {
+    background: var(--color-bg-nav);
+    -webkit-backdrop-filter: var(--filter-nav);
+    backdrop-filter: var(--filter-nav);
+  }
+}
+
+._bar_1rkwo_13[data-hidden] {
+  transform: translateY(-100%);
+  opacity: 0;
+  pointer-events: none;
+}
+
+._row_1rkwo_39 {
+  display: flex;
+  align-items: center;
+  gap: var(--space-l);
+  max-width: var(--size-container);
+  margin-inline: auto;
+  padding-inline: var(--padding-page);
+  box-sizing: content-box;
+}
+
+._narrow_1rkwo_49 {
+  display: block;
+  flex: 1;
+}
+
+._wide_1rkwo_54 {
+  display: none;
+}
+
+@media (min-width: 1024px) {
+  ._narrow_1rkwo_49 {
+    display: none;
+  }
+
+  ._wide_1rkwo_54 {
+    display: block;
+    flex: 1;
+  }
+}
+
+/* ---- Stops ---- */
+._main_1rkwo_70 {
+  position: relative;
+  z-index: 1;
+}
+
+/* ---- Side index: stuck to the right edge, visible once past the cover ---- */
+._index_1rkwo_76 {
+  position: fixed;
+  inset-inline-end: 0;
+  inset-block-start: 50%;
+  z-index: 5;
+  transform: translateY(-50%);
+  padding-inline-end: var(--padding-page);
+  opacity: 0;
+  visibility: hidden;
+  transition:
+    opacity 0.32s ease,
+    visibility 0.32s;
+}
+
+._index_1rkwo_76[data-visible] {
+  opacity: 1;
+  visibility: visible;
+}
+
+@media (max-width: 900px) {
+  ._index_1rkwo_76 {
+    display: none;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  ._bar_1rkwo_13,
+  ._index_1rkwo_76 {
+    transition: none;
+  }
+}
+/* Flow — chained steps: pills separated by 48 px with an arrow centered in the gap,
+   never touching a pill. A column on narrow screens, a row from 600 px. */
+
+._flow_1fjzk_4 {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--space-3xl);
+  margin: var(--space-3xl) 0 0;
+  padding: 0;
+  list-style: none;
+}
+
+._step_1fjzk_14 {
+  position: relative;
+  padding: var(--space-m) var(--space-xl);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-pill);
+  text-align: center;
+}
+
+._highlighted_1fjzk_22 {
+  border-color: transparent;
+  background: var(--color-bg-inverse);
+}
+
+._highlighted_1fjzk_22 ._label_1fjzk_27 {
+  color: var(--color-text-inverse);
+}
+
+/* The arrow: "↓" in the column, centered in the 48 px gap above the pill */
+._step_1fjzk_14 + ._step_1fjzk_14::before {
+  content: '↓';
+  position: absolute;
+  inset-block-end: 100%;
+  inset-inline-start: 50%;
+  transform: translate(-50%, calc(-1 * var(--space-3xl) / 2 + 50%));
+  color: var(--color-text-secondary);
+  font-family: var(--font-family-base);
+  font-size: var(--text-body-m-size);
+  line-height: 1;
+}
+
+@media (min-width: 600px) {
+  ._flow_1fjzk_4 {
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+
+  /* "→" in the row, centered in the gap to the left of the pill */
+  ._step_1fjzk_14 + ._step_1fjzk_14::before {
+    content: '→';
+    inset-block-end: auto;
+    inset-block-start: 50%;
+    inset-inline-start: auto;
+    inset-inline-end: 100%;
+    transform: translate(calc(-1 * var(--space-3xl) / 2 + 50%), -50%);
+  }
+}
+/* Form — places the fields with 24 px between them and puts the submit at the end of the row
+   (or centered, in a talk). */
+
+._form_du2ma_4 {
+  display: grid;
+  gap: var(--space-xl);
+}
+
+._fields_du2ma_9 {
+  display: grid;
+  gap: var(--space-xl);
+}
+
+._submit_du2ma_14 {
+  display: flex;
+  justify-content: flex-end;
+}
+
+._center_du2ma_19 {
+  justify-content: center;
+}
+/* Heartbeat — a red heart that beats, with a wave expanding around it. Pure decoration. */
+
+._heartbeat_13f55_3 {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: 200px;
+  block-size: 200px;
+  margin: var(--space-2xl) auto 0;
+}
+
+._wave_13f55_13 {
+  position: absolute;
+  inline-size: 144px;
+  block-size: 144px;
+  border-radius: var(--radius-pill);
+  border: 1px solid var(--540-status-red);
+  animation: _wave_13f55_13 1.6s ease-out infinite;
+}
+
+._heart_13f55_3 {
+  position: relative;
+  inline-size: 116px;
+  block-size: 116px;
+  fill: none;
+  stroke: var(--540-status-red);
+  stroke-width: 2.4;
+  stroke-linejoin: round;
+  stroke-linecap: round;
+  animation: _beat_13f55_1 1.6s ease-out infinite;
+}
+
+@keyframes _wave_13f55_13 {
+  0% {
+    transform: scale(0.86);
+    opacity: 0.35;
+  }
+  45%,
+  100% {
+    transform: scale(1.18);
+    opacity: 0;
+  }
+}
+
+@keyframes _beat_13f55_1 {
+  0% {
+    transform: scale(1);
+  }
+  9% {
+    transform: scale(1.14);
+  }
+  20% {
+    transform: scale(1.03);
+  }
+  29% {
+    transform: scale(1.09);
+  }
+  42%,
+  100% {
+    transform: scale(1);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  ._wave_13f55_13,
+  ._heart_13f55_3 {
+    animation: none;
+  }
+}
+/* LogoCarousel — the strip of client logos. Equal slots, an odd number of them (3 / 5 / 7) so
+   there is always a center: the middle one at full ink and 8 % bigger, the rest even and dimmed. */
+
+._carousel_w1h3y_4 {
+  --slots: 3;
+  overflow: hidden;
+}
+
+@media (min-width: 600px) {
+  ._carousel_w1h3y_4 {
+    --slots: 5;
+  }
+}
+
+@media (min-width: 1024px) {
+  ._carousel_w1h3y_4 {
+    --slots: 7;
+  }
+}
+
+._track_w1h3y_21 {
+  display: flex;
+  align-items: center;
+  transform: translateX(calc(-100% / var(--slots) * var(--offset, 0)));
+  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+._track_w1h3y_21[data-jump] {
+  transition: none;
+}
+
+._slot_w1h3y_32 {
+  flex: 0 0 calc(100% / var(--slots));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  block-size: calc(var(--size-logo-client) * 1.08);
+  padding-inline: var(--space-s);
+}
+
+/* The logo fits inside the same box for all, never cropped, evened by the theme's filter */
+._logo_w1h3y_42 {
+  display: block;
+  max-inline-size: 100%;
+  block-size: var(--size-logo-client);
+  object-fit: contain;
+  filter: var(--filter-logo-client);
+  scale: 1;
+  transition:
+    scale 0.6s cubic-bezier(0.4, 0, 0.2, 1),
+    filter 0.6s ease;
+}
+
+._slot_w1h3y_32[data-pos='1'] ._logo_w1h3y_42 {
+  filter: var(--filter-logo-client-center);
+  scale: 1.08;
+}
+
+@media (min-width: 600px) {
+  ._slot_w1h3y_32[data-pos='1'] ._logo_w1h3y_42 {
+    filter: var(--filter-logo-client);
+    scale: 1;
+  }
+
+  ._slot_w1h3y_32[data-pos='2'] ._logo_w1h3y_42 {
+    filter: var(--filter-logo-client-center);
+    scale: 1.08;
+  }
+}
+
+@media (min-width: 1024px) {
+  ._slot_w1h3y_32[data-pos='2'] ._logo_w1h3y_42 {
+    filter: var(--filter-logo-client);
+    scale: 1;
+  }
+
+  ._slot_w1h3y_32[data-pos='3'] ._logo_w1h3y_42 {
+    filter: var(--filter-logo-client-center);
+    scale: 1.08;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  ._track_w1h3y_21,
+  ._logo_w1h3y_42 {
+    transition: none;
+  }
+}
+/* Marquee — a strip of short pieces that scrolls endlessly between two hairlines, edge to edge. */
+
+._marquee_19w0s_3 {
+  position: relative;
+  inline-size: 100vw;
+  margin-inline: calc(50% - 50vw);
+  overflow: hidden;
+  padding-block: var(--space-xl);
+  border-block: 1px solid var(--color-border-default);
+}
+
+._strip_19w0s_12 {
+  display: flex;
+  width: max-content;
+  animation: _scroll_19w0s_1 var(--marquee-duration, 40s) linear infinite;
+}
+
+._round_19w0s_18 {
+  display: flex;
+  flex: none;
+}
+
+._piece_19w0s_23 {
+  white-space: nowrap;
+  padding-inline-end: var(--space-xl);
+}
+
+._marquee_19w0s_3:hover ._strip_19w0s_12 {
+  animation-play-state: paused;
+}
+
+@keyframes _scroll_19w0s_1 {
+  from {
+    transform: translateZ(0);
+  }
+  to {
+    transform: translate3d(-50%, 0, 0);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  ._strip_19w0s_12 {
+    animation: none;
+  }
+}
+/* ProgressBar — a 2 px track with a fill that grows from the left, a dot at each end and,
+   optionally, milestone dots that light up as they are reached. */
+
+._bar_uakc4_4 {
+  display: grid;
+  gap: var(--space-l);
+  margin-block-start: var(--space-2xl);
+}
+
+._track_uakc4_10 {
+  position: relative;
+  block-size: 2px;
+  background: var(--color-border-default);
+  margin-block: var(--space-s);
+}
+
+._fill_uakc4_17 {
+  position: absolute;
+  inset: 0;
+  background: var(--color-border-strong);
+  transform-origin: left center;
+  transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+._dot_uakc4_25 {
+  position: absolute;
+  top: 50%;
+  inline-size: 16px;
+  block-size: 16px;
+  border-radius: var(--radius-pill);
+  background: var(--color-text-primary);
+  transform: translate(-50%, -50%);
+}
+
+._milestone_uakc4_35 {
+  background: var(--color-border-default);
+  transition: background 0.3s;
+}
+
+._milestone_uakc4_35[data-on] {
+  background: var(--color-text-primary);
+}
+
+._ends_uakc4_44 {
+  display: flex;
+  justify-content: space-between;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  ._fill_uakc4_17,
+  ._milestone_uakc4_35 {
+    transition: none;
+  }
+}
+/* Punchline — the sentence that closes a block: statement at three quarters, under a hairline,
+   with an optional transition to what comes next. */
+
+._punchline_anwe8_4 {
+  padding-block: var(--space-3xl);
+  border-block-start: 1px solid var(--color-border-default);
+  text-align: center;
+}
+
+._inside_anwe8_10 {
+  margin-block-start: var(--space-3xl);
+}
+
+._transition_anwe8_14 {
+  margin: var(--space-xl) auto 0;
+}
+/* Quote — a sentence someone said, in statement, with its attribution under it. */
+
+._figure_1kqx2_3 {
+  display: grid;
+  justify-items: center;
+  gap: var(--space-xl);
+  margin: 0;
+  text-align: center;
+}
+/* Schema — the drawing vocabulary of the talks: boxes, lines, arrowheads and six text sizes,
+   all in the neutral inks. The accent only fills pills. */
+
+._frame_qkt9g_4 {
+  margin-block-start: var(--space-3xl);
+  inline-size: 100vw;
+  margin-inline: calc(50% - 50vw);
+  padding-inline: var(--padding-page);
+  box-sizing: border-box;
+  overflow-x: auto;
+  overscroll-behavior-x: contain;
+}
+
+._caption_qkt9g_14 {
+  margin-block-start: var(--space-3xl);
+  margin-inline: auto;
+  max-inline-size: calc((var(--size-container) - var(--grid-gutter)) / 2);
+}
+
+._schema_qkt9g_20 {
+  display: block;
+  inline-size: min(100%, 1800px, calc((100svh - 430px) * 3.122));
+  min-inline-size: 1200px;
+  block-size: auto;
+  margin-inline: auto;
+  font-family: var(--font-family-base);
+}
+
+._layer_qkt9g_29 {
+  opacity: 1;
+}
+
+._guided_qkt9g_33 ._layer_qkt9g_29 {
+  opacity: 0.18;
+  transition: opacity 0.55s ease;
+}
+
+._guided_qkt9g_33 ._layer_qkt9g_29[data-on] {
+  opacity: 1;
+}
+
+._voice_qkt9g_42 {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+/* ---- Shapes ---- */
+._node_qkt9g_52 { fill: none; stroke: var(--color-border-strong); stroke-width: 1.15; }
+._highlighted_qkt9g_53 { fill: none; stroke: var(--color-text-primary); stroke-width: 1.6; }
+._note_qkt9g_54 { fill: none; stroke: var(--color-border-default); stroke-width: 1.2; stroke-dasharray: 11 7; }
+._pill_qkt9g_55 { fill: var(--color-bg-accent); }
+._inverse_qkt9g_56 { fill: var(--color-bg-inverse); }
+._dot_qkt9g_57 { fill: var(--color-text-primary); }
+._arc_qkt9g_58 { fill: none; stroke: var(--color-border-strong); stroke-width: 1.6; }
+._icon_qkt9g_59 { fill: none; stroke: var(--color-text-primary); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
+._iconBox_qkt9g_60 { fill: none; stroke: var(--color-border-strong); stroke-width: 1.15; }
+._iconFill_qkt9g_61 { fill: var(--color-text-primary); }
+
+/* ---- Lines ---- */
+._line_qkt9g_64 { fill: none; stroke: var(--color-text-secondary); stroke-width: 1.15; }
+._lineStrong_qkt9g_65 { fill: none; stroke: var(--color-text-primary); stroke-width: 1.4; }
+._lineDashed_qkt9g_66 { fill: none; stroke: var(--color-text-tertiary); stroke-width: 1.2; stroke-dasharray: 11 7; }
+._arrowhead_qkt9g_67 { fill: none; stroke: var(--color-text-secondary); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
+._arrowheadFill_qkt9g_68 { fill: var(--color-text-primary); }
+
+/* ---- Series (charts) ---- */
+._series_qkt9g_71 { fill: none; stroke: var(--color-text-secondary); stroke-width: 3.5; stroke-linejoin: round; stroke-linecap: round; }
+._seriesDashed_qkt9g_72 { fill: none; stroke: var(--color-text-tertiary); stroke-width: 2.5; stroke-dasharray: 12 9; stroke-linejoin: round; }
+._accent_qkt9g_73 { fill: none; stroke: var(--color-bg-accent); stroke-width: 4; stroke-linejoin: round; stroke-linecap: round; }
+._accentThin_qkt9g_74 { fill: none; stroke: var(--color-bg-accent); stroke-width: 2.5; }
+._accentDashed_qkt9g_75 { fill: none; stroke: var(--color-bg-accent); stroke-width: 2.5; stroke-dasharray: 14 10; }
+._accentDotted_qkt9g_76 { fill: none; stroke: var(--color-bg-accent); stroke-width: 2.5; stroke-dasharray: 3 9; }
+._accentDot_qkt9g_76 { fill: var(--color-bg-accent); stroke: var(--color-bg-default); stroke-width: 3; }
+
+/* ---- Text ---- */
+._title_qkt9g_80 { fill: var(--color-text-primary); font-size: 32px; font-weight: var(--540-font-weight-bold); }
+._nodeText_qkt9g_81 { fill: var(--color-text-primary); font-size: 26px; font-weight: var(--540-font-weight-bold); }
+._nodeSub_qkt9g_82 { fill: var(--color-text-secondary); font-size: 21px; }
+._circleText_qkt9g_83 { fill: var(--color-text-primary); font-size: 26px; font-weight: var(--540-font-weight-bold); }
+._pillText_qkt9g_84 { fill: var(--540-neutral-950); font-size: 23px; font-weight: var(--540-font-weight-bold); }
+._inverseText_qkt9g_85 { fill: var(--color-text-inverse); font-size: 26px; font-weight: var(--540-font-weight-bold); }
+._noteText_qkt9g_86 { fill: var(--color-text-secondary); font-size: 24px; }
+._label_qkt9g_87 { fill: var(--color-text-tertiary); font-size: 22px; }
+._coreTitle_qkt9g_88 { fill: var(--color-text-primary); font-size: 44px; font-weight: var(--540-font-weight-bold); }
+._coreSub_qkt9g_89 { fill: var(--color-text-secondary); font-size: 26px; }
+._micro_qkt9g_90 { fill: var(--color-text-tertiary); font-size: 19px; font-weight: var(--540-font-weight-bold); letter-spacing: 0.16em; }
+._sideText_qkt9g_91 { fill: var(--color-text-tertiary); font-size: 24px; font-weight: var(--540-font-weight-bold); }
+
+/* Data schemas: text one step bigger */
+._data_qkt9g_94 ._label_qkt9g_87 { font-size: 30px; }
+._data_qkt9g_94 ._noteText_qkt9g_86 { font-size: 32px; }
+._data_qkt9g_94 ._micro_qkt9g_90 { font-size: 26px; }
+._data_qkt9g_94 ._sideText_qkt9g_91 { font-size: 32px; }
+._data_qkt9g_94 ._pillText_qkt9g_84 { font-size: 32px; }
+._data_qkt9g_94 ._nodeText_qkt9g_81,
+._data_qkt9g_94 ._inverseText_qkt9g_85 { font-size: 34px; }
+._data_qkt9g_94 ._title_qkt9g_80 { font-size: 44px; }
+
+@media (prefers-reduced-motion: reduce) {
+  ._guided_qkt9g_33 ._layer_qkt9g_29 {
+    transition: none;
+  }
+}
+/* Share — a whole as one bar split into its parts, and a legend with each part's percentage. */
+
+._share_nsb7q_3 {
+  display: grid;
+  gap: var(--space-m);
+  text-align: start;
+}
+
+._bar_nsb7q_9 {
+  display: flex;
+  gap: 2px;
+  block-size: var(--space-xl);
+}
+
+._segment_nsb7q_15 {
+  flex: none;
+  transition: inline-size 0.9s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+._tone-ink_nsb7q_20 {
+  background: var(--color-bg-inverse);
+}
+
+._tone-context_nsb7q_24 {
+  background: var(--color-text-tertiary);
+}
+
+._tone-accent_nsb7q_28 {
+  background: var(--color-bg-accent);
+}
+
+._legend_nsb7q_32 {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-s) var(--space-xl);
+}
+
+._item_nsb7q_41 {
+  display: flex;
+  align-items: center;
+  gap: var(--space-s);
+}
+
+._swatch_nsb7q_47 {
+  flex: none;
+  inline-size: var(--space-m);
+  block-size: var(--space-m);
+}
+
+._percent_nsb7q_53 {
+  font-variant-numeric: tabular-nums;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  ._segment_nsb7q_15 {
+    transition: none;
+  }
+}
+/* Sheet — a panel that rises from the bottom edge over the stop, 84 % of the window high,
+   with a veil dimming the stop behind. Inside, type drops to the web scale so it all fits. */
+
+._veil_kx9ft_4 {
+  position: fixed;
+  inset: 0;
+  z-index: 2;
+  background: var(--color-bg-overlay);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.45s ease;
+}
+
+._veil_kx9ft_4[data-open] {
+  opacity: 1;
+}
+
+._sheet_kx9ft_18 {
+  position: fixed;
+  inset-inline-start: 50%;
+  inset-block-end: 0;
+  z-index: 3;
+  inline-size: min(calc(100vw - 96px), 1080px);
+  block-size: 84svh;
+  translate: -50% 100%;
+  visibility: hidden;
+  transition:
+    translate 0.55s cubic-bezier(0.22, 1, 0.36, 1),
+    visibility 0s 0.55s;
+}
+
+._sheet_kx9ft_18[data-open] {
+  translate: -50% 0;
+  visibility: visible;
+  transition:
+    translate 0.55s cubic-bezier(0.22, 1, 0.36, 1),
+    visibility 0s;
+}
+
+._panel_kx9ft_40 {
+  box-sizing: border-box;
+  block-size: 100%;
+  display: grid;
+  grid-template-rows: auto auto minmax(0, 1fr);
+  gap: var(--space-l);
+  padding: var(--space-m) var(--space-2xl) var(--space-xl);
+  background: var(--color-bg-surface);
+  border: 1px solid var(--color-border-default);
+  border-block-end: 0;
+  border-radius: var(--radius-default) var(--radius-default) 0 0;
+  overflow: auto;
+  text-align: center;
+}
+
+/* The handle */
+._panel_kx9ft_40::before {
+  content: '';
+  display: block;
+  inline-size: 40px;
+  block-size: 4px;
+  border-radius: var(--radius-pill);
+  background: var(--color-border-strong);
+  margin-inline: auto;
+}
+
+._header_kx9ft_66 {
+  display: grid;
+  gap: var(--space-s);
+  justify-items: center;
+}
+
+._body_kx9ft_72 {
+  min-block-size: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  ._veil_kx9ft_4,
+  ._sheet_kx9ft_18 {
+    transition: none;
+  }
+}
+/* Spotlight — the piece holding the center of the window is lit; the rest stays at 14 %. */
+
+._spotlight_1p8cr_3 {
+  opacity: 0.14;
+  transition: opacity 0.35s ease;
+}
+
+._spotlight_1p8cr_3[data-on] {
+  opacity: 1;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  ._spotlight_1p8cr_3 {
+    opacity: 1;
+  }
+}
+/* Statements — the sentences of the journey, stacked, one stop each. The stack keeps its own
+   rhythm: 1.5 statement sizes between sentences, half a screen above the first one. */
+
+._section_pa9rm_4 {
+  min-block-size: 0;
+  display: block;
+  padding-block-start: calc(50svh - 68px);
+}
+
+._section_pa9rm_4 > [data-slide-stage] {
+  max-inline-size: none;
+}
+
+._stack_pa9rm_14 {
+  position: relative;
+  margin-inline: calc(50% - 50vw);
+  display: grid;
+  gap: calc(var(--text-statement-size) * 1.5);
+}
+
+._stop_pa9rm_21 {
+  display: grid;
+  justify-items: center;
+  padding-inline: var(--padding-page);
+}
+
+/* Lit at the center, told ones at 14 %, the ones to come hidden (as in the talks) */
+._stop_pa9rm_21 {
+  transition: opacity 0.35s ease;
+}
+
+._stop_pa9rm_21[data-state='before'] {
+  opacity: 0.14;
+}
+
+._stop_pa9rm_21[data-state='after'] {
+  opacity: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  ._stop_pa9rm_21 {
+    transition: none;
+  }
+}
+/* Steps — a block the arrow walks through: what is not due yet is not seen, and enters like the
+   original Reveal (opacity and 12 px). */
+
+._step_16316_4 {
+  transition:
+    opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1),
+    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+._steps_16316_10[data-guided] ._step_16316_4:not([data-on]) {
+  opacity: 0;
+  transform: translateY(12px);
+  pointer-events: none;
+}
+
+._steps_16316_10[data-guided] ._step_16316_4._collapse_16316_16:not([data-on]) {
+  display: none;
+}
+
+/* A Sheet brings its own entrance and exit. Its Step must not move or fade: a transform on an
+   ancestor makes position: fixed follow the Step instead of the window, and the sheet and its
+   veil would show stuck to the Step while it animates. Any depth: a Stack, a slot or an island
+   between them still leaves the Sheet inside the Step's transform. */
+._steps_16316_10[data-guided] ._step_16316_4:has([data-sheet]) {
+  opacity: 1;
+  transform: none;
+  transition: none;
+}
+
+/* Several versions of a block in the same cell: only the one of the step shows */
+._stack_16316_31 {
+  display: grid;
+  justify-items: center;
+}
+
+._stack_16316_31 > ._step_16316_4 {
+  grid-area: 1 / 1;
+  inline-size: 100%;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  ._step_16316_4 {
+    transition: none;
+  }
+}
+/* Story — a story or an objection: title and paragraphs at half the grid, centered, on a raised band. */
+
+._story_1wbhn_3 {
+  display: grid;
+  gap: var(--space-xl);
+  justify-items: center;
+  max-width: calc((var(--size-container) - var(--grid-gutter)) / 2);
+  margin-inline: auto;
+}
+/* Timeline — a vertical axis at half the grid: a dot and a title per step, joined by a 2 px line.
+   Each step is a stop. The line draws and the dot pops as the step enters the screen. */
+
+._list_9azf2_4 {
+  list-style: none;
+  margin: var(--space-3xl) auto 0;
+  padding: 0;
+  max-width: calc((var(--size-container) - var(--grid-gutter)) / 2);
+}
+
+._step_9azf2_11 {
+  position: relative;
+  display: grid;
+  justify-items: center;
+  gap: var(--space-2xl);
+  padding-block-start: calc(var(--space-xl) * 3 + var(--space-l) * 2);
+}
+
+._step_9azf2_11:first-child {
+  padding-block-start: 0;
+}
+
+/* The axis between steps: a 2 px line with 16 px of air at each end, so it never touches the text */
+._step_9azf2_11::before {
+  content: '';
+  position: absolute;
+  inset-block-start: var(--space-l);
+  inset-inline-start: 50%;
+  inline-size: 2px;
+  block-size: calc(var(--space-xl) * 3);
+  transform: translateX(-50%);
+  transform-origin: 50% 0;
+  background: var(--color-border-strong);
+}
+
+._step_9azf2_11:first-child::before {
+  content: none;
+}
+
+._dot_9azf2_40 {
+  inline-size: 16px;
+  block-size: 16px;
+  border-radius: var(--radius-pill);
+  background: var(--color-text-primary);
+}
+
+/* A warning step: the dot goes red; the text stays neutral */
+._alert_9azf2_48 ._dot_9azf2_40 {
+  background: var(--540-status-red);
+}
+
+._text_9azf2_52 {
+  display: grid;
+  gap: var(--space-s);
+  justify-items: center;
+}
+
+/* Lit at the center, told ones at 14 %, the ones to come hidden (as in the talks) */
+._step_9azf2_11 {
+  transition: opacity 0.35s ease;
+}
+
+._step_9azf2_11[data-state='before'] {
+  opacity: 0.14;
+}
+
+._step_9azf2_11[data-state='after'] {
+  opacity: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  ._step_9azf2_11 {
+    transition: none;
+  }
+}
+
+@supports (animation-timeline: view()) {
+  @media (prefers-reduced-motion: no-preference) {
+    ._step_9azf2_11::before {
+      scale: 1 0;
+      animation: _draw_9azf2_1 linear both;
+      animation-timeline: view();
+      animation-range: contain 0% contain 40%;
+    }
+
+    ._dot_9azf2_40 {
+      scale: 0;
+      animation: _pop_9azf2_1 linear both;
+      animation-timeline: view();
+      animation-range: contain 8% contain 24%;
+    }
+  }
+}
+
+@keyframes _draw_9azf2_1 {
+  from {
+    scale: 1 0;
+  }
+  to {
+    scale: 1 1;
+  }
+}
+
+@keyframes _pop_9azf2_1 {
+  from {
+    scale: 0;
+  }
+  to {
+    scale: 1;
+  }
+}
+/* Tools — a grid of tools: logo normalised by ink area, name and an optional verdict, centered. */
+
+._grid_e43sg_3 {
+  display: grid;
+  grid-template-columns: repeat(var(--grid-columns), 1fr);
+  column-gap: var(--grid-gutter);
+  row-gap: var(--space-3xl);
+  margin-block-start: var(--space-2xl);
+  list-style: none;
+  padding: 0;
+}
+
+._item_e43sg_13 {
+  grid-column: span 12;
+}
+
+@media (min-width: 600px) {
+  ._item_e43sg_13 {
+    grid-column: span 6;
+  }
+}
+
+@media (min-width: 1024px) {
+  ._cols-4_e43sg_24 ._item_e43sg_13 {
+    grid-column: span 3;
+  }
+
+  ._cols-3_e43sg_28 ._item_e43sg_13 {
+    grid-column: span 4;
+  }
+}
+
+._tool_e43sg_33 {
+  display: grid;
+  justify-items: center;
+  gap: var(--space-s);
+  text-align: center;
+  max-inline-size: 38ch;
+  margin-inline: auto;
+}
+
+/* A common optical box; the per-brand correction comes from measuring each file's ink */
+._logo_e43sg_43 {
+  block-size: 52px;
+  inline-size: 52px;
+  object-fit: contain;
+  margin-block-end: var(--space-s);
+  scale: var(--tool-scale, 1);
+}
+
+[data-theme='dark'] ._invert_e43sg_51 {
+  filter: invert(1);
+}
+/*$vite$:1*/