@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-display:swap;font-weight:200 800;src:url(/assets/fonts/plus-jakarta-sans-latin-ext-wght-normal.38e3b8fd80.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-display:swap;font-weight:200 800;src:url(/assets/fonts/plus-jakarta-sans-latin-wght-normal.153fc85b70.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-display:swap;font-weight:100 800;src:url(/assets/fonts/jetbrains-mono-latin-ext-wght-normal.79bfdab9ba.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-display:swap;font-weight:100 800;src:url(/assets/fonts/jetbrains-mono-latin-wght-normal.18be452724.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* 10k design system tokens, as named in the app (tenk-fe). Colours are light-dark() pairs: set color-scheme on a page root to pick the theme. */
:root {
  --font-family: "Plus Jakarta Sans", sans-serif;
  --app-live-timer-font-family: "JetBrains Mono", "SF Mono", "Fira Code", monospace;

  --app-primary-color: light-dark(#4767f5, #95a3ff);
  --app-secondary-color: light-dark(#7258ff, #c79cff);
  --app-nav-active-gradient: linear-gradient(135deg, var(--app-primary-color), var(--app-secondary-color));
  --app-background-color: light-dark(#f8fbff, #111018);
  --app-header-background-color: light-dark(#eef2ff, #171420);
  --app-card-background-color: light-dark(#ffffff, #221f2d);
  --app-white-background-color: light-dark(#fbfcff, #252238);
  --app-card-hover-color: light-dark(#eef2ff, #252238);
  --app-list-hover-color: light-dark(#eef1ff, #2b2740);
  --app-regular-text-color: light-dark(#141a2d, #f5f0ff);
  --app-muted-text-color: light-dark(#66708a, #b4b0c9);
  --app-placeholder-color: light-dark(#96a0b8, #827d9b);
  --app-neutral-icon-color: light-dark(#424a61, #c4bfd6);
  --app-focus-color: light-dark(#2445ea, #c4caff);
  --app-border-color: light-dark(rgba(20, 26, 45, 0.12), rgba(245, 240, 255, 0.15));
  --app-border-color-subtle: light-dark(rgba(20, 26, 45, 0.08), rgba(245, 240, 255, 0.1));
  --app-border-color-strong: light-dark(rgba(20, 26, 45, 0.2), rgba(245, 240, 255, 0.22));
  --app-static-dark-color: light-dark(#141a2d, #111018);
  --app-static-white-color: light-dark(#ffffff, #f5f0ff);
  --app-contrast-dark-color: light-dark(#141a2d, #f5f0ff);
  --app-contrast-white-color: light-dark(#f8fbff, #252238);
  --app-ink-black: #111018;
  --app-white: #ffffff;
  --app-premium-brand: #002fa7;
  --app-brand-logo-color: light-dark(#002fa7, #f5f0ff);
  --app-success-color: light-dark(#16aa62, #43e96f);
  --app-status-green-color: light-dark(#16aa62, #43e96f);
  --app-warning-color: light-dark(#f39a17, #ffca73);
  --app-danger-color: light-dark(#dc2626, #ff6b6b);

  --app-activity-color-red: light-dark(#ee4344, #ff6b6b);
  --app-activity-color-pink: light-dark(#ed72a3, #ff92bd);
  --app-activity-color-orange: light-dark(#f5732f, #ff8e52);
  --app-activity-color-yellow: light-dark(#dabe26, #ffde91);
  --app-activity-color-green: light-dark(#46c866, #43e96f);
  --app-activity-color-ocean: light-dark(#21c8c9, #66d9f0);
  --app-activity-color-blue: light-dark(#6386f8, #95a3ff);
  --app-activity-color-purple: light-dark(#a471fa, #c79cff);
  --app-activity-color-brown: light-dark(#ad9179, #c8a184);
  --app-activity-color-grey: light-dark(#9fa4b0, #827d9b);
  --app-activity-text-red: var(--app-static-dark-color);
  --app-activity-text-pink: var(--app-static-dark-color);
  --app-activity-text-orange: var(--app-static-dark-color);
  --app-activity-text-yellow: var(--app-static-dark-color);
  --app-activity-text-green: var(--app-static-dark-color);
  --app-activity-text-ocean: var(--app-static-dark-color);
  --app-activity-text-blue: var(--app-static-dark-color);
  --app-activity-text-purple: var(--app-static-dark-color);
  --app-activity-text-brown: var(--app-static-dark-color);
  --app-activity-text-grey: var(--app-static-dark-color);

  --app-heatmap-level-1-color: light-dark(#ffe4a3, #67421d);
  --app-heatmap-level-2-color: light-dark(#fdbb64, #97612b);
  --app-heatmap-level-3-color: light-dark(#f47742, #ce8f50);
  --app-heatmap-level-4-color: light-dark(#cf2d3e, #e2bd98);

  --app-shadow-color-light: rgba(17, 16, 24, 0.06);
  --app-shadow-color: rgba(17, 16, 24, 0.1);
  --app-shadow-color-medium: rgba(17, 16, 24, 0.15);
  --app-shadow-color-strong: rgba(17, 16, 24, 0.2);
  --app-shadow-color-heavy: rgba(17, 16, 24, 0.25);
  --app-shadow-color-intense: rgba(17, 16, 24, 0.3);
  --app-dropdown-list-shadow: 0 0.25rem 0.75rem rgba(17, 16, 24, 0.15);
  --app-dialog-shadow: 0 4px 24px rgba(17, 16, 24, 0.15);

  --app-spacing-xs: 4px;
  --app-spacing-sm: 8px;
  --app-spacing-md: 16px;
  --app-spacing-lg: 24px;
  --app-spacing-xl: 32px;
  --app-spacing-2xl: 48px;
  --app-card-padding-size: 16px;
  --app-public-page-inline-gutter: 24px;
  --app-public-page-content-max-width: 1220px;
  --app-input-height: 40px;

  --app-border-radius-size: 8px;
  --app-border-radius-smaller-size: 4px;
  --app-button-border-radius-size: 9999px;
  --app-bottom-sheet-border-radius: 16px;
}
/* H · Ember grid: a living practice heatmap, warm on dark. Colours, type and spacing come from 10k-tokens.css.
   The page is dark; heat cells scope color-scheme to light so they use the vivid heatmap levels. */
@property --hx-n { syntax: "<integer>"; inherits: false; initial-value: 0; }
@property --hx-s { syntax: "<integer>"; inherits: false; initial-value: 0; }
@property --hx-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@property --hx-line { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --hx-line-soft { syntax: "<color>"; inherits: true; initial-value: transparent; }

.hx {
  --hx-gutter: var(--app-public-page-inline-gutter);
  --hx-line: var(--app-border-color);
  --hx-line-soft: var(--app-border-color-subtle);
  --hx-mono: var(--app-live-timer-font-family);
  --hx-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  /* The height of the screen the hero fills on desktops. A canvas board sets the screen it stands for. */
  --hx-screen: 100svh;
  /* The heatmap shades, shared by the hero heatmap and its legend: empty, two faint days, and the orange of the MLabs days. */
  --hx-0: color-mix(in srgb, var(--app-white) 6%, transparent);
  --hx-1: color-mix(in srgb, var(--app-heatmap-level-1-color) 24%, transparent);
  --hx-2: color-mix(in srgb, var(--app-heatmap-level-2-color) 32%, transparent);
  --hx-3: var(--app-heatmap-level-3-color);
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
.hx::before { content: ""; position: absolute; left: 50%; top: -380px; width: 1500px; height: 1000px; margin-left: -750px; color-scheme: light; background: radial-gradient(closest-side, color-mix(in srgb, var(--app-heatmap-level-3-color) 15%, transparent), transparent); pointer-events: none; animation: hx-breathe 8s ease-in-out infinite; }
@keyframes hx-breathe { 50% { opacity: 0.55; transform: scale(1.06); } }
.hx *, .hx *::before, .hx *::after { box-sizing: border-box; }
:where(.hx) a { color: inherit; text-decoration: none; }
:where(.hx) :is(h1, h2, h3, p, ul, ol) { margin: 0; }
:where(.hx) :is(ul, ol) { padding: 0; list-style: none; }
.hx svg { display: block; flex: none; fill: currentColor; overflow: visible; }
.hx svg.is-stroke { fill: none; }
.hx img { display: block; width: 100%; height: auto; }
.hx-wrap { position: relative; width: min(var(--app-public-page-content-max-width), 100% - 2 * var(--hx-gutter)); margin-inline: auto; }
.hx-hot { color-scheme: light; background: linear-gradient(90deg, var(--app-heatmap-level-1-color), var(--app-heatmap-level-2-color) 25%, var(--app-heatmap-level-3-color) 50%, var(--app-heatmap-level-2-color) 75%, var(--app-heatmap-level-1-color)); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: hx-flow 6s linear infinite; }
@keyframes hx-flow { to { background-position: 200% 0; } }
.hx-caret { display: inline-block; width: 0.55em; height: 0.95em; margin-left: 0.1em; vertical-align: -0.12em; color-scheme: light; background: var(--app-heatmap-level-3-color); animation: hx-blink 1.1s steps(2, jump-none) infinite; }
@keyframes hx-blink { 50% { opacity: 0; } }
.hx-heat { color-scheme: light; color: var(--app-heatmap-level-3-color); }

/* Header */
.hx-head { position: relative; z-index: 2; padding-top: 24px; }
.hx-head__in { display: flex; align-items: center; gap: 32px; padding-bottom: 20px; border-bottom: 1px solid var(--hx-line-soft); }
.hx-brand { font-size: 22px; font-weight: 700; letter-spacing: -0.03em; }
.hx-nav { display: flex; gap: 28px; margin-left: auto; font-family: var(--hx-mono); font-size: 14px; }
.hx-nav a { color: var(--app-muted-text-color); transition: color 0.2s; }
.hx-nav a:hover { color: var(--app-regular-text-color); }
.hx-nav b { margin-right: 6px; font-weight: 600; }
.hx-nav a { white-space: nowrap; }

/* Tactile buttons */
.hx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 52px; margin-bottom: 4px; padding: 0 26px; border-radius: var(--app-button-border-radius-size); background: var(--b); color: var(--t); font-size: 16px; font-weight: 600; white-space: nowrap; box-shadow: var(--ring, 0 0 0 0 transparent), 0 4px 0 color-mix(in srgb, var(--b) 76%, var(--app-ink-black)); transition: transform 0.2s var(--hx-ease), box-shadow 0.2s var(--hx-ease); }
.hx-btn:hover { transform: translateY(-2px); box-shadow: var(--ring, 0 0 0 0 transparent), 0 6px 0 color-mix(in srgb, var(--b) 76%, var(--app-ink-black)), 0 0 44px -8px color-mix(in srgb, var(--b) 70%, transparent); }
.hx-btn svg { width: 16px; height: 16px; }
.hx-btn--heat { color-scheme: light; --b: var(--app-heatmap-level-3-color); --t: var(--app-static-dark-color); }
.hx-btn--ghost { --b: var(--app-card-background-color); --t: var(--app-regular-text-color); --ring: inset 0 0 0 1px var(--hx-line); }
.hx-btn--sm { height: 42px; padding: 0 18px; font-size: 15px; }
/* 10k on the App Store is not out yet: a quiet button that is not a link and does not lift, with a blinking "Soon" tag. */
.hx-btn--soon { --t: var(--app-muted-text-color); cursor: default; }
.hx-btn--soon:hover { transform: none; box-shadow: var(--ring, 0 0 0 0 transparent), 0 4px 0 color-mix(in srgb, var(--b) 76%, var(--app-ink-black)); }
.hx-btn--soon small { display: inline-flex; align-items: center; gap: 6px; height: 24px; margin-right: -10px; padding: 0 10px; border-radius: 999px; background: color-mix(in srgb, var(--app-regular-text-color) 7%, transparent); color: var(--app-regular-text-color); font-family: var(--hx-mono); font-size: 12px; font-weight: 500; }
.hx-btn--soon small i { width: 6px; height: 6px; flex: none; border-radius: 50%; color-scheme: light; background: var(--app-heatmap-level-3-color); animation: hx-blink 1.4s steps(2, jump-none) infinite; }
.hx-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }

/* Hero */
.hx-hero { position: relative; z-index: 1; padding-top: 72px; }
.hx-kicker { color: var(--app-muted-text-color); font-family: var(--hx-mono); font-size: 14px; }
.hx-h1 { margin-top: 22px; font-size: clamp(48px, 7.2vw, 104px); font-weight: 700; line-height: 1; letter-spacing: -0.05em; }
.hx-hero__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 48px; margin-top: 34px; }
.hx-lede { max-width: 580px; color: var(--app-muted-text-color); font-size: 19px; line-height: 1.6; }
.hx-lede b { color: var(--app-regular-text-color); font-weight: 600; }

/* The field: 64 weeks of practice, 19 days each. Heat rolls across it, the hot cells spell our name in the middle,
   and the mouse leaves a trail of heat. It shows the middle 11 days in 30 px cells (on desktops it fills the screen,
   below); the screen's edges cut it and it fades out there. */
.hx-field {
  position: relative;
  margin-top: 64px;
  color-scheme: light;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.hx-field__in { --p: 30px; --g: calc(var(--p) * 2 / 15); display: flex; justify-content: center; align-items: center; gap: var(--g); height: calc(11 * var(--p) - var(--g)); overflow: hidden; }
.hx-field span { display: grid; gap: var(--g); }
.hx-field i { position: relative; width: calc(var(--p) - var(--g)); height: calc(var(--p) - var(--g)); border-radius: calc(var(--p) / 6); background: var(--b, var(--hx-0)); animation: hx-wave 7s ease-in-out infinite; animation-delay: calc(var(--c) * 90ms + var(--r) * 60ms); animation-delay: calc(var(--c) * 90ms + var(--r) * 60ms + mod(var(--c) * 7 + var(--r) * 13, 11) * 45ms); }
.hx-field i:nth-child(1) { --r: 0; }
.hx-field i:nth-child(2) { --r: 1; }
.hx-field i:nth-child(3) { --r: 2; }
.hx-field i:nth-child(4) { --r: 3; }
.hx-field i:nth-child(5) { --r: 4; }
.hx-field i:nth-child(6) { --r: 5; }
.hx-field i:nth-child(7) { --r: 6; }
.hx-field i:nth-child(8) { --r: 7; }
.hx-field i:nth-child(9) { --r: 8; }
.hx-field i:nth-child(10) { --r: 9; }
.hx-field i:nth-child(11) { --r: 10; }
.hx-field i:nth-child(12) { --r: 11; }
.hx-field i:nth-child(13) { --r: 12; }
.hx-field i:nth-child(14) { --r: 13; }
.hx-field i:nth-child(15) { --r: 14; }
.hx-field i:nth-child(16) { --r: 15; }
.hx-field i:nth-child(17) { --r: 16; }
.hx-field i:nth-child(18) { --r: 17; }
.hx-field i:nth-child(19) { --r: 18; }
.hx-field span:nth-child(3n+2) i:nth-child(3n+1):not(.h),
.hx-field span:nth-child(5n+1) i:nth-child(4n+3):not(.h),
.hx-field span:nth-child(7n+4) i:nth-child(2n):not(.h) { --b: var(--hx-1); }
.hx-field span:nth-child(4n+3) i:nth-child(5n+2):not(.h),
.hx-field span:nth-child(6n+1) i:nth-child(3n):not(.h) { --b: var(--hx-2); }
.hx-field i.h { --b: var(--hx-3); box-shadow: 0 0 calc(var(--p) * 8 / 15) color-mix(in srgb, var(--app-heatmap-level-3-color) 50%, transparent); animation-name: hx-flare; }
@keyframes hx-wave { 0%, 32%, 100% { background: var(--b, var(--hx-0)); } 12% { background: color-mix(in srgb, var(--app-heatmap-level-2-color) 40%, transparent); } }
@keyframes hx-flare { 0%, 32%, 100% { background: var(--app-heatmap-level-3-color); } 12% { background: var(--app-heatmap-level-1-color); } }
/* The mouse's heat trail: t1 to t3 are three steps of heat, set by the script, that warm up fast and cool off slowly.
   On the MLabs days, heat flares them bright. */
.hx-field i::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background-color: transparent; transition: background-color 0.7s ease-out, box-shadow 0.7s ease-out; pointer-events: none; }
.hx-field i.t1::after, .hx-field i.t2::after, .hx-field i.t3::after { transition-duration: 0.12s; }
.hx-field i.t1::after { background-color: color-mix(in srgb, var(--app-heatmap-level-2-color) 45%, transparent); }
.hx-field i.t2::after { background-color: var(--app-heatmap-level-2-color); }
.hx-field i.t3::after { background-color: var(--app-heatmap-level-3-color); box-shadow: 0 0 calc(var(--p) / 2) color-mix(in srgb, var(--app-heatmap-level-3-color) 55%, transparent); }
.hx-field i.h.t2::after, .hx-field i.h.t3::after { background-color: var(--app-heatmap-level-1-color); }
.hx-legend { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 18px; color: var(--app-muted-text-color); font-family: var(--hx-mono); font-size: 13px; }
.hx-scale { display: flex; align-items: center; gap: 6px; color-scheme: light; }
.hx-scale i { width: 14px; height: 14px; border-radius: 3px; background: var(--l); }
/* On desktops the hero fills the first screen: the field takes the room left under the headline (at least 11 days of
   30 px), and the legend sits at the bottom of the screen. Its cells are as big as lets 48 weeks span the screen and
   11 days fit the field's height, and never under 30 px (10.8667 is 11 cells less one gap of 2/15 of a cell). It shows
   whole rows, an odd number so the name stays centred, up to all 19 (1 px of slack against rounding). */
@media (min-width: 1024px) {
  .hx-hero { display: flex; flex-direction: column; min-height: calc(var(--hx-screen) - 91px); padding-bottom: 28px; }
  .hx-hero + .hx-sec { padding-top: 108px; }
  .hx-field { display: flex; align-items: center; flex: 1 1 0; min-height: 326px; max-height: calc(19 * max(30px, 100vw / 48)); container-type: size; }
  .hx-field__in { --p: max(30px, min(100cqw / 48, 100cqh / 10.8667)); flex: 1; height: calc(2 * round(down, (100cqh + var(--g) + var(--p)) / 2 + 1px, var(--p)) - var(--p) - var(--g)); }
}
.hx-scale i.is-top { box-shadow: 0 0 10px color-mix(in srgb, var(--app-heatmap-level-3-color) 55%, transparent); }

/* Sections */
.hx-sec { position: relative; z-index: 1; padding-top: 136px; }
.hx-label { color: var(--app-muted-text-color); font-family: var(--hx-mono); font-size: 14px; }
.hx-h2 { max-width: 15em; margin-top: 16px; font-size: clamp(34px, 4.4vw, 62px); font-weight: 700; line-height: 1.04; letter-spacing: -0.04em; }
.hx-copy { color: var(--app-muted-text-color); font-size: 17px; line-height: 1.65; }
.hx-copy b { color: var(--app-regular-text-color); font-weight: 600; }
.hx-copy a { color: var(--app-regular-text-color); font-weight: 600; text-decoration: underline; text-decoration-color: var(--hx-line); text-underline-offset: 4px; }

/* Flagship */
.hx-flag { display: grid; grid-template-columns: 420px minmax(0, 1fr); align-items: center; gap: 56px; margin-top: 44px; }
.hx-mark { display: flex; align-items: center; gap: 14px; }
.hx-mark > span { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 16px; background: var(--app-premium-brand); color: var(--app-white); }
.hx-mark svg { width: 32px; }
.hx-mark b { display: block; font-size: 24px; font-weight: 700; line-height: 1.1; }
.hx-mark small { color: var(--app-muted-text-color); font-family: var(--hx-mono); font-size: 13px; }
.hx-flag .hx-copy { margin-top: 22px; }
.hx-flag .hx-actions { margin-top: 30px; }
/* Flagship opening, as in G: a centred headline with its buttons, leading straight into the belt of screens. */
.hx-center { display: flex; flex-direction: column; align-items: center; text-align: center; }
.hx-center .hx-mark { margin-top: 30px; text-align: left; }
.hx-center .hx-h2 { max-width: 13em; margin-top: 24px; font-size: clamp(40px, 5.6vw, 80px); }
.hx-center .hx-copy { max-width: 620px; margin-top: 20px; font-size: 18px; }
.hx-center .hx-actions { justify-content: center; margin-top: 30px; }
.hx-center .hx-facts { justify-content: center; }
.hx-film { display: inline-flex; align-items: center; gap: 10px; color: var(--app-muted-text-color); font-size: 15px; font-weight: 500; transition: color 0.2s; }
.hx-film:hover { color: var(--app-regular-text-color); }
.hx-film__play { width: 34px; height: 34px; display: grid; place-items: center; flex: none; border-radius: 50%; background: color-mix(in srgb, var(--app-white) 8%, transparent); }
.hx-film__play::before { content: ""; margin-left: 3px; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent var(--app-regular-text-color); }
.hx-film b { color: var(--app-placeholder-color); font-family: var(--hx-mono); font-size: 13px; font-weight: 500; }
.hx-facts { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 22px; color: var(--app-muted-text-color); font-size: 14px; }
.hx-facts li { display: flex; align-items: center; gap: 8px; }
.hx-facts li::before { content: ""; width: 6px; height: 6px; flex: none; border-radius: 50%; color-scheme: light; background: var(--app-heatmap-level-3-color); }
.hx-glow { padding: 1.5px; border-radius: 20px; color-scheme: light; background: conic-gradient(from var(--hx-angle), transparent 0 35%, var(--app-heatmap-level-2-color), var(--app-heatmap-level-3-color), var(--app-heatmap-level-4-color), transparent 85%); box-shadow: 0 40px 90px -36px color-mix(in srgb, var(--app-heatmap-level-3-color) 55%, transparent); animation: hx-angle 6s linear infinite; }
@keyframes hx-angle { to { --hx-angle: 360deg; } }
.hx-term { border-radius: 18.5px; background: var(--app-card-background-color); overflow: hidden; color-scheme: dark; }
.hx-term__bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; border-bottom: 1px solid var(--hx-line-soft); color: var(--app-placeholder-color); font-family: var(--hx-mono); font-size: 12px; }
.hx-term__bar i { width: 10px; height: 10px; border-radius: 50%; background: color-mix(in srgb, var(--app-white) 16%, transparent); }
.hx-term__bar span { margin-left: 10px; }
.hx-term__screen { position: relative; overflow: hidden; }
.hx-term__screen::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, color-mix(in srgb, var(--app-ink-black) 30%, transparent) 0 1px, transparent 1px 3px); opacity: 0.35; pointer-events: none; }
.hx-term__scan { position: absolute; left: 0; right: 0; top: -90px; height: 90px; background: linear-gradient(transparent, color-mix(in srgb, var(--app-white) 9%, transparent), transparent); animation: hx-scan 5s linear infinite; }
@keyframes hx-scan { to { top: 100%; } }
.hx-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 56px; border: 1px solid var(--hx-line); border-radius: 20px; background: var(--app-card-background-color); overflow: hidden; }
.hx-stat { display: flex; flex-direction: column; padding: 28px; }
.hx-stat + .hx-stat { border-left: 1px solid var(--hx-line); }
.hx-stat__k { color: var(--app-muted-text-color); font-family: var(--hx-mono); font-size: 13px; }
.hx-count { margin-top: 12px; font-family: var(--hx-mono); font-size: 64px; font-weight: 600; line-height: 1; letter-spacing: -0.04em; counter-reset: n var(--hx-n); animation: hx-count 3s cubic-bezier(0.2, 0.7, 0.2, 1) 0.4s both, hx-flow 6s linear infinite; }
.hx-count::before { content: counter(n); }
.hx-count::after { content: ",000"; }
@keyframes hx-count { from { --hx-n: 0; } to { --hx-n: var(--to); } }
.hx-stat__u { margin-top: auto; padding-top: 14px; color: var(--app-muted-text-color); font-size: 14px; }
.hx-stat__u b { color: var(--app-regular-text-color); font-weight: 600; }
.hx-strip { display: grid; grid-template-columns: repeat(21, minmax(0, 1fr)); gap: 4px; margin-top: 22px; color-scheme: light; }
.hx-strip i { aspect-ratio: 1; border-radius: 3px; background: color-mix(in srgb, var(--app-white) 8%, transparent); }
.hx-strip .on { animation: hx-streak 6s ease-out infinite; animation-delay: calc(var(--i) * 110ms); }
.hx-strip .on:nth-child(17) { --lit: var(--app-heatmap-level-1-color); }
@keyframes hx-streak { 0% { background: color-mix(in srgb, var(--app-white) 8%, transparent); } 5%, 84% { background: var(--lit, var(--app-heatmap-level-3-color)); } 94%, 100% { background: color-mix(in srgb, var(--app-white) 8%, transparent); } }
.hx-eta { margin-top: 12px; font-family: var(--hx-mono); font-size: 46px; font-weight: 600; line-height: 1.1; letter-spacing: -0.03em; }
.hx-down { counter-reset: d var(--hx-s); animation: hx-sec-down 60s steps(60) -9s infinite; }
.hx-down::after { content: counter(d, decimal-leading-zero); }
@keyframes hx-sec-down { from { --hx-s: 59; } to { --hx-s: -1; } }

/* The lab */
/* Label, then the headline; the intro's first line starts level with the headline's capitals (CEO, 11-05). */
.hx-labhead { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 48px; align-items: start; }
.hx-labhead > div { display: contents; }
.hx-labhead .hx-label { grid-column: 1; grid-row: 1; }
.hx-labhead .hx-h2 { grid-column: 1; grid-row: 2; }
.hx-labhead .hx-copy { grid-column: 2; grid-row: 2; max-width: 440px; margin-top: calc(8px + 0.15 * clamp(34px, 4.4vw, 62px)); }
.hx-apps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 48px; }
.hx-app { position: relative; display: flex; flex-direction: column; min-height: 300px; padding: 22px; border: 1px solid var(--hx-line); border-radius: 18px; background: var(--app-card-background-color); transition: transform 0.35s var(--hx-ease), border-color 0.35s; }
.hx-app:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--c) 60%, transparent); }
.hx-app__top { display: flex; align-items: flex-start; justify-content: space-between; }
.hx-app__icon { width: 52px; height: 52px; flex: none; border-radius: 14px; overflow: hidden; box-shadow: 0 0 0 1px color-mix(in srgb, var(--app-white) 8%, transparent), 0 10px 22px -12px color-mix(in srgb, var(--c) 70%, transparent); }
.hx-app__icon img { width: 100%; height: 100%; object-fit: cover; }
/* "Coming soon" starts level with the top of the icon: line-height 1, then up by the rest of the space above its capital, measured in screenshots. */
.hx-app__soon { display: flex; align-items: center; gap: 8px; margin-top: -0.09em; color: var(--app-muted-text-color); font-family: var(--hx-mono); font-size: 12px; line-height: 1; white-space: nowrap; }
.hx-app__soon i { width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--c); animation: hx-blink 1.4s steps(2, jump-none) infinite; }
.hx-app h3 { margin-top: 22px; font-size: 19px; font-weight: 700; letter-spacing: -0.02em; }
.hx-app p { margin-top: 6px; color: var(--app-muted-text-color); font-size: 14px; line-height: 1.55; }
.hx-app__status { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 22px; color: var(--app-muted-text-color); font-family: var(--hx-mono); font-size: 12px; }
.hx-app__status b { margin-left: auto; color: var(--app-regular-text-color); font-weight: 500; opacity: 0; transform: translateX(-4px); transition: opacity 0.25s, transform 0.25s var(--hx-ease); }
.hx-app:hover .hx-app__status b, .hx-app:focus-visible .hx-app__status b { opacity: 1; transform: none; }
@media (hover: none) { .hx-app__status b { opacity: 1; transform: none; } }
/* The app list as a ledger, like H2: one row per app, sliding right on hover (CEO, 11-05). */
.hx-ledger { margin-top: 48px; border-top: 1px solid var(--hx-line); }
.hx-tr { display: grid; grid-template-columns: 56px 260px minmax(0, 1fr) 96px 150px; align-items: center; gap: 20px; padding: 18px 8px; border-bottom: 1px solid var(--hx-line-soft); transition: background-color 0.25s, padding 0.35s var(--hx-ease); }
.hx-tr--head { padding-block: 12px; color: var(--app-placeholder-color); font-family: var(--hx-mono); font-size: 12px; }
.hx-tr--head span:last-child { justify-self: end; }
a.hx-tr:hover, a.hx-tr:focus-visible { padding-left: 18px; background: color-mix(in srgb, var(--app-white) 3%, transparent); }
.hx-tr__no { color: var(--app-placeholder-color); font-family: var(--hx-mono); font-size: 13px; }
.hx-tr__app { display: flex; align-items: center; gap: 14px; font-size: 18px; font-weight: 700; letter-spacing: -0.02em; }
.hx-tr__icon { width: 40px; height: 40px; flex: none; border-radius: 11px; overflow: hidden; box-shadow: 0 0 0 1px color-mix(in srgb, var(--app-white) 8%, transparent), 0 8px 18px -10px color-mix(in srgb, var(--c) 70%, transparent); }
.hx-tr__icon img { width: 100%; height: 100%; object-fit: cover; }
.hx-tr__desc { color: var(--app-muted-text-color); font-size: 15px; line-height: 1.5; }
.hx-tr__status { justify-self: end; display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border: 1px solid var(--hx-line); border-radius: var(--app-button-border-radius-size); color: var(--app-muted-text-color); font-family: var(--hx-mono); font-size: 12px; white-space: nowrap; }
.hx-tr__status i { width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--c); animation: hx-blink 1.4s steps(2, jump-none) infinite; }
/* Store names as text, and Google's official badge where a store link exists (CEO, 11-05): Apple and Google allow their logos only inside their official badges. */
.hx-tr__stores { display: grid; gap: 3px; color: var(--app-muted-text-color); font-family: var(--hx-mono); font-size: 12px; line-height: 1.35; white-space: nowrap; }
/* Google's PNG, unaltered. Its transparent margin (41 of its 250 px on each side) is the clear space Google asks for: the image is pulled back by it to line up with the buttons, and the 14 px gap keeps a quarter of the badge's height clear. */
.hx-badge { --badge-h: 52px; display: block; flex: none; margin-bottom: 4px; border-radius: 9px; }
.hx-badge img { width: auto; height: calc(var(--badge-h) * 250 / 168); margin: calc(var(--badge-h) * -41 / 168); }
/* The apps page shows each app in full, with no screenshots: category, six points, the stores and its privacy policy. The card is not a link, so it does not lift. */
.hx-apps--full { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hx-app--full { min-height: 0; padding: 28px; }
.hx-app--full:hover { transform: none; border-color: var(--hx-line); }
.hx-app .hx-app__tag { margin-top: 22px; color: var(--app-muted-text-color); font-family: var(--hx-mono); font-size: 12px; line-height: 1.4; }
.hx-app--full h3 { margin-top: 6px; font-size: 22px; }
.hx-app__feats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; margin: 22px 0 0; padding-top: 20px; border-top: 1px solid var(--hx-line-soft); font-size: 14px; line-height: 1.45; }
.hx-app__feats li { display: flex; align-items: baseline; gap: 10px; }
.hx-app__feats li::before { content: ""; width: 6px; height: 6px; flex: none; border-radius: 2px; background: var(--c); transform: translateY(-2px); }
.hx-app__policy { margin-left: auto; color: var(--app-regular-text-color); font-weight: 500; white-space: nowrap; transition: color 0.2s; }
.hx-app__policy:hover, .hx-app__policy:focus-visible { color: var(--c); }

/* About and the principles console */
.hx-about { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: start; gap: 16px 56px; }
.hx-about > .hx-label { grid-column: 1 / -1; }
.hx-about .hx-h2 { margin-top: 0; }
.hx-about .hx-copy { margin-top: 22px; }
.hx-console { border: 1px solid var(--hx-line); border-radius: 16px; background: color-mix(in srgb, var(--app-ink-black) 60%, var(--app-card-background-color)); font-family: var(--hx-mono); overflow: hidden; }
.hx-console__bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; border-bottom: 1px solid var(--hx-line-soft); }
.hx-console__bar i { width: 10px; height: 10px; border-radius: 50%; background: color-mix(in srgb, var(--app-white) 16%, transparent); }
.hx-console__bar span { margin-left: 10px; color: var(--app-placeholder-color); font-size: 12px; }
.hx-console__body { display: grid; gap: 14px; padding: 26px 26px 30px; font-size: 15px; line-height: 1.6; }
.hx-cmd { display: flex; align-items: center; color: var(--app-regular-text-color); }
.hx-cmd > span:first-child { margin-right: 10px; }
.hx-type { display: inline-block; width: 16ch; overflow: hidden; white-space: nowrap; animation: hx-typing 12s -4s infinite; }
@keyframes hx-typing {
  0% { width: 0; animation-timing-function: steps(16, end); }
  10% { width: 16ch; }
  82% { width: 16ch; animation-timing-function: steps(16, end); }
  86%, 100% { width: 0; }
}
.hx-out { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; color: var(--app-muted-text-color); animation: hx-print 12s infinite; animation-delay: var(--d); }
.hx-out b { color: var(--app-regular-text-color); font-weight: 600; }
@keyframes hx-print { 0% { opacity: 0; transform: translateY(6px); } 3%, 78% { opacity: 1; transform: none; } 82%, 100% { opacity: 0; transform: none; } }

/* Work with us */
.hx-hire { position: relative; padding: 72px 64px; border: 1px solid var(--hx-line); border-radius: 32px; background: var(--app-card-background-color); overflow: hidden; }
.hx-hire__glow { position: absolute; left: -10%; right: -10%; bottom: -70%; height: 120%; color-scheme: light; background: radial-gradient(closest-side, color-mix(in srgb, var(--app-heatmap-level-3-color) 30%, transparent), transparent); pointer-events: none; animation: hx-breathe 7s ease-in-out infinite; }
.hx-hire > :not(.hx-hire__glow) { position: relative; }
.hx-h2--xl { max-width: none; font-size: clamp(40px, 5.6vw, 80px); }
.hx-hire__row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: end; gap: 48px; margin-top: 32px; }
.hx-hire__row .hx-actions { justify-content: flex-end; }
.hx-caps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 48px; }
.hx-cap { position: relative; display: flex; align-items: center; gap: 14px; padding: 18px; border: 1px solid var(--hx-line); border-radius: 16px; background: color-mix(in srgb, var(--app-ink-black) 40%, var(--app-card-background-color)); font-weight: 600; overflow: hidden; }
.hx-cap::before { content: ""; position: absolute; inset: 0; border-radius: inherit; color-scheme: light; background: linear-gradient(120deg, color-mix(in srgb, var(--app-heatmap-level-3-color) 26%, transparent), transparent 62%); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--app-heatmap-level-3-color) 70%, transparent); opacity: 0; animation: hx-capheat 9s ease-in-out infinite; animation-delay: var(--d); }
.hx-cap:hover::before { opacity: 1; animation: none; }
@keyframes hx-capheat { 0%, 20%, 100% { opacity: 0; } 7%, 13% { opacity: 1; } }
.hx-cap > * { position: relative; }
.hx-cap__icon { width: 40px; height: 40px; display: grid; place-items: center; flex: none; border-radius: 12px; color-scheme: light; background: var(--app-heatmap-level-3-color); color: var(--app-static-dark-color); }
.hx-cap__icon svg { width: 18px; height: 18px; }
.hx-cap small { margin-left: auto; color: var(--app-placeholder-color); font-family: var(--hx-mono); font-size: 12px; font-weight: 500; }

/* Footer: the name on an LED board */
.hx-foot { position: relative; z-index: 1; margin-top: 140px; padding-bottom: calc(clamp(120px, 29.6vw, 426px) * 0.7887 + 33px); }
/* A moving line of what we build, between About and Work with us (from H3). */
.hx-ticker { position: relative; z-index: 1; margin-top: 72px; padding: 16px 0; border-block: 1px solid var(--hx-line-soft); overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
/* Each group of the moving line is wider than any screen up to about 2360 px, so the line never runs out; 79 s keeps the old speed (30 px/s). */
.hx-ticker__track { display: flex; width: max-content; animation: hx-marquee 79s linear infinite; }
.hx-ticker__group { display: flex; align-items: center; gap: 28px; padding-right: 28px; color: var(--app-muted-text-color); font-family: var(--hx-mono); font-size: 13px; white-space: nowrap; }
.hx-ticker__group i { width: 6px; height: 6px; flex: none; border-radius: 2px; color-scheme: light; background: var(--app-heatmap-level-3-color); }
/* The line sits closer to its neighbours than sections do to each other: 72 px above and below. */
.hx-ticker + .hx-sec { padding-top: 72px; }
/* The name in LED dots at the foot of the page. It sits one dot row below the page edge, so the edge falls in the gap between rows: the bottom row is hidden and every dot shown is whole; a dot is lit when at least half of it lies inside a letter. Moving the mouse across the word pushes the dots and they spring back: the board script draws them on the canvas while they move. */
.hx-led { --led-dots: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1312 336' preserveAspectRatio='none'%3E%3Cpath d='M860 12h48.5M44 20h48.5M300 20h56.5M412 20h48.5M860 20h48.5M44 28h56.5M292 28h64.5M412 28h48.5M860 28h48.5M44 36h56.5M292 36h64.5M412 36h48.5M860 36h48.5M44 44h64.5M284 44h72.5M412 44h48.5M860 44h48.5M44 52h72.5M276 52h80.5M412 52h48.5M860 52h48.5M44 60h80.5M276 60h80.5M412 60h48.5M860 60h48.5M44 68h80.5M268 68h88.5M412 68h48.5M860 68h48.5M44 76h88.5M260 76h96.5M412 76h48.5M860 76h48.5M44 84h96.5M252 84h104.5M412 84h48.5M860 84h48.5M44 92h104.5M252 92h104.5M412 92h48.5M860 92h48.5M44 100h104.5M244 100h112.5M412 100h48.5M684 100h64.5M860 100h48.5M948 100h64.5M1180 100h56.5M44 108h112.5M236 108h120.5M412 108h48.5M668 108h104.5M860 108h48.5M932 108h96.5M1164 108h96.5M44 116h120.5M228 116h128.5M412 116h48.5M652 116h128.5M860 116h48.5M924 116h120.5M1148 116h120.5M44 124h48.5M108 124h64.5M228 124h56.5M300 124h56.5M412 124h48.5M644 124h144.5M860 124h192.5M1140 124h136.5M44 132h48.5M116 132h56.5M220 132h64.5M300 132h56.5M412 132h48.5M636 132h160.5M860 132h200.5M1132 132h152.5M44 140h48.5M116 140h64.5M212 140h64.5M300 140h56.5M412 140h48.5M628 140h176.5M860 140h208.5M1132 140h160.5M44 148h48.5M124 148h64.5M212 148h56.5M300 148h56.5M412 148h48.5M628 148h56.5M740 148h64.5M860 148h96.5M996 148h80.5M1132 148h48.5M1244 148h48.5M44 156h48.5M132 156h128.5M300 156h56.5M412 156h48.5M620 156h56.5M756 156h48.5M860 156h72.5M1012 156h64.5M1124 156h48.5M1252 156h48.5M44 164h48.5M140 164h120.5M300 164h56.5M412 164h48.5M636 164h32.5M756 164h56.5M860 164h64.5M1020 164h64.5M1124 164h48.5M1260 164h16.5M44 172h48.5M140 172h112.5M300 172h56.5M412 172h48.5M652 172h8.5M764 172h48.5M860 172h56.5M1028 172h56.5M1124 172h48.5M1260 172h0.5M44 180h48.5M148 180h96.5M300 180h56.5M412 180h48.5M764 180h48.5M860 180h56.5M1036 180h48.5M1132 180h48.5M44 188h48.5M156 188h80.5M300 188h56.5M412 188h48.5M748 188h64.5M860 188h48.5M1036 188h56.5M1132 188h72.5M44 196h48.5M156 196h80.5M300 196h56.5M412 196h48.5M692 196h120.5M860 196h48.5M1036 196h56.5M1132 196h96.5M44 204h48.5M164 204h64.5M300 204h56.5M412 204h48.5M660 204h152.5M860 204h48.5M1044 204h48.5M1140 204h112.5M44 212h48.5M172 212h48.5M300 212h56.5M412 212h48.5M644 212h168.5M860 212h48.5M1044 212h48.5M1148 212h120.5M44 220h48.5M180 220h32.5M300 220h56.5M412 220h48.5M636 220h176.5M860 220h48.5M1044 220h48.5M1156 220h120.5M44 228h48.5M180 228h32.5M300 228h56.5M412 228h48.5M628 228h184.5M860 228h48.5M1044 228h48.5M1172 228h112.5M44 236h48.5M188 236h16.5M300 236h56.5M412 236h48.5M620 236h88.5M764 236h48.5M860 236h48.5M1036 236h56.5M1196 236h96.5M44 244h48.5M196 244h0.5M300 244h56.5M412 244h48.5M620 244h56.5M764 244h48.5M860 244h48.5M1036 244h56.5M1220 244h72.5M44 252h48.5M300 252h56.5M412 252h48.5M612 252h56.5M764 252h48.5M860 252h56.5M1036 252h48.5M1244 252h56.5M44 260h48.5M300 260h56.5M412 260h48.5M612 260h48.5M756 260h56.5M860 260h56.5M1028 260h56.5M1140 260h16.5M1252 260h48.5M44 268h48.5M300 268h56.5M412 268h48.5M612 268h48.5M756 268h56.5M860 268h64.5M1020 268h64.5M1124 268h32.5M1252 268h48.5M44 276h48.5M300 276h56.5M412 276h48.5M612 276h48.5M748 276h64.5M860 276h72.5M1012 276h64.5M1116 276h48.5M1252 276h48.5M44 284h48.5M300 284h56.5M412 284h184.5M612 284h56.5M740 284h72.5M860 284h96.5M996 284h80.5M1124 284h56.5M1244 284h48.5M44 292h48.5M300 292h56.5M412 292h184.5M612 292h72.5M724 292h88.5M860 292h208.5M1124 292h72.5M1228 292h64.5M44 300h48.5M300 300h56.5M412 300h184.5M620 300h192.5M860 300h200.5M1132 300h160.5M44 308h48.5M300 308h56.5M412 308h184.5M628 308h184.5M860 308h192.5M1140 308h144.5M44 316h48.5M300 316h56.5M412 316h184.5M628 316h120.5M764 316h48.5M860 316h40.5M916 316h128.5M1148 316h128.5M44 324h48.5M300 324h56.5M412 324h184.5M644 324h96.5M764 324h48.5M860 324h40.5M932 324h96.5M1164 324h96.5M44 332h40.5M308 332h40.5M412 332h176.5M660 332h56.5M764 332h40.5M860 332h40.5M948 332h64.5M1180 332h64.5' fill='none' stroke='black' stroke-width='6.22' stroke-linecap='round' stroke-dasharray='0 8'/%3E%3C/svg%3E"); position: absolute; left: 0; right: 0; bottom: -0.0188em; z-index: 1; height: 0.7887em; font-size: clamp(120px, 29.6vw, 426px); color-scheme: light; }
.hx-led__dots { position: absolute; inset: 0; background: linear-gradient(90deg, var(--app-heatmap-level-1-color), var(--app-heatmap-level-2-color) 20%, var(--app-heatmap-level-3-color) 40%, var(--app-heatmap-level-4-color) 60%, var(--app-heatmap-level-2-color) 80%, var(--app-heatmap-level-1-color)) 0 0 / 200% 100%; -webkit-mask: var(--led-dots) 50% 0 / 3.0798em 0.7887em no-repeat; mask: var(--led-dots) 50% 0 / 3.0798em 0.7887em no-repeat; animation: hx-flow 8s linear infinite; }
.hx-led canvas { position: absolute; inset: 0; width: 100%; height: 100%; visibility: hidden; }
.hx-led[data-live] canvas { visibility: visible; }
.hx-led[data-live] .hx-led__dots { visibility: hidden; }
.hx-foot__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 32px; padding-top: 22px; border-top: 1px solid var(--hx-line-soft); color: var(--app-muted-text-color); font-family: var(--hx-mono); font-size: 13px; }
.hx-foot__links { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.hx-foot__links a:hover { color: var(--app-regular-text-color); }
/* 10k on social media, under the footer links. */
.hx-foot__social { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px; margin-top: 12px; color: var(--app-muted-text-color); font-family: var(--hx-mono); font-size: 13px; }
.hx-foot__social > span { margin-right: 10px; }
.hx-foot__social a { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; transition: color 0.2s, background-color 0.2s; }
.hx-foot__social a:hover, .hx-foot__social a:focus-visible { color: var(--app-regular-text-color); background: color-mix(in srgb, var(--app-regular-text-color) 7%, transparent); }
.hx-foot__social svg { width: 17px; height: 17px; }
/* The footer in columns (CEO, 11-05): brand and social links, then Company, Apps and Legal, over the company line. */
.hx-foot__grid { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: 32px 40px; padding-top: 44px; border-top: 1px solid var(--hx-line-soft); }
.hx-foot__brand .hx-brand { font-size: 26px; }
.hx-foot__brand .hx-foot__social { justify-content: flex-start; margin-top: 18px; }
.hx-foot__col { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.hx-foot__h { margin-bottom: 2px; color: var(--app-placeholder-color); font-family: var(--hx-mono); font-size: 12px; }
.hx-foot__col a { color: var(--app-muted-text-color); font-size: 15px; transition: color 0.2s; }
.hx-foot__col a:hover, .hx-foot__col a:focus-visible { color: var(--app-regular-text-color); }
.hx-foot__grid + .hx-foot__row { margin-top: 44px; padding-top: 20px; font-size: 12px; }

/* Phone */
/* 10k on a moving belt: two rows of real screens on a tilted plane, scrolling opposite ways. */
#work > .hx-center { z-index: 1; }
.hx-belt { position: relative; z-index: 0; height: 760px; margin-top: -40px; overflow: hidden; perspective: 1500px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent), linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.6) 18%, #000 38%, #000 88%, transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent), linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.6) 18%, #000 38%, #000 88%, transparent); mask-composite: intersect; }
.hx-belt::before { content: ""; position: absolute; left: 50%; top: calc(50% + 20px); width: 1200px; height: 460px; translate: -50% -50%; color-scheme: light; background: radial-gradient(closest-side, color-mix(in srgb, var(--app-heatmap-level-3-color) 20%, transparent), transparent); }
.hx-belt__plane { position: absolute; left: 50%; top: calc(50% + 20px); display: grid; gap: 24px; translate: -50% -50%; transform: rotateX(22deg) rotateZ(-8deg); }
.hx-belt__row { display: flex; }
.hx-belt__track { display: flex; width: max-content; animation: hx-belt-run 64s linear infinite; }
.hx-belt__row--rev .hx-belt__track { animation-direction: reverse; animation-duration: 72s; }
.hx-belt__group { display: flex; gap: 24px; padding-right: 24px; }
.hx-shot { flex: none; width: 230px; border: 1px solid var(--hx-line-soft); border-radius: 22px; background: var(--app-card-background-color); box-shadow: 0 24px 40px -26px color-mix(in srgb, var(--app-ink-black) 60%, transparent); overflow: hidden; }
@keyframes hx-marquee { to { transform: translateX(-50%); } }
/* The belt is centred and tilted, so each track holds four copies of its screens and moves by one copy per loop: every row reaches past both edges of the belt at every point of its loop. */
@keyframes hx-belt-run { to { transform: translateX(-25%); } }

/* The four things 10k does, each with a small live screen. */
.hx-fcards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 16px; }
.hx-fcard { padding: 14px 14px 22px; border: 1px solid var(--hx-line-soft); border-radius: 26px; background: var(--app-card-background-color); }
.hx-fcard > h3 { margin: 18px 8px 0; font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.hx-fcard > p { margin: 6px 8px 0; color: var(--app-muted-text-color); font-size: 14.5px; line-height: 1.5; }
.hx-mini { position: relative; height: 172px; padding: 16px; border: 1px solid var(--hx-line-soft); border-radius: 18px; background: var(--app-background-color); overflow: hidden; }
.hx-mini__k { display: flex; align-items: center; gap: 8px; color: var(--app-muted-text-color); font-family: var(--hx-mono); font-size: 12px; }
.hx-mini__k i { width: 7px; height: 7px; border-radius: 50%; background: var(--app-status-green-color); }
.hx-mini__eta { margin-top: 16px; font-family: var(--hx-mono); font-size: 30px; font-weight: 600; line-height: 1.1; letter-spacing: -0.03em; }
.hx-mini__eta small { display: block; margin-top: 4px; color: var(--app-muted-text-color); font-size: 17px; font-weight: 500; letter-spacing: 0; }
.hx-mini__bar { position: absolute; left: 16px; right: 16px; bottom: 18px; height: 8px; border-radius: var(--app-button-border-radius-size); color-scheme: light; background: color-mix(in srgb, var(--app-heatmap-level-3-color) 18%, transparent); overflow: hidden; }
.hx-mini__bar i { position: absolute; inset: 0 auto 0 0; width: 21%; border-radius: inherit; background: linear-gradient(90deg, var(--app-heatmap-level-1-color), var(--app-heatmap-level-3-color)); overflow: hidden; }
.hx-mini__bar i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--app-white) 75%, transparent), transparent); transform: translateX(-100%); animation: hx-shimmer 2.2s ease-in-out infinite; }
@keyframes hx-shimmer { to { transform: translateX(100%); } }
.hx-mini__top { display: flex; align-items: center; justify-content: space-between; }
.hx-mini__name { font-size: 15px; font-weight: 700; }
.hx-stop { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 10px; background: var(--app-danger-color); color: var(--app-white); font-size: 12px; font-weight: 700; letter-spacing: 0.04em; }
.hx-stop::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: currentColor; }
.hx-stop::after { content: ""; position: absolute; inset: 0; border-radius: inherit; animation: hx-stop-ping 1.8s ease-out infinite; }
@keyframes hx-stop-ping { from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--app-danger-color) 55%, transparent); } to { box-shadow: 0 0 0 10px transparent; } }
.hx-mini__time { margin-top: 30px; font-family: var(--hx-mono); font-size: 38px; font-weight: 600; letter-spacing: -0.03em; }
.hx-mini__meta { margin-top: 2px; color: var(--app-muted-text-color); font-size: 13px; }
.hx-tick { counter-reset: s var(--hx-s); animation: hx-sec-up 60s steps(60) -17s infinite; }
.hx-tick::after { content: counter(s, decimal-leading-zero); }
@keyframes hx-sec-up { from { --hx-s: 0; } to { --hx-s: 60; } }
.hx-mini__chart { position: absolute; left: 16px; right: 16px; top: 46px; bottom: 16px; display: flex; align-items: flex-end; gap: 8px; color-scheme: light; }
.hx-mini__chart i { flex: 1; height: var(--h); border-radius: 6px 6px 3px 3px; background: var(--app-heatmap-level-3-color); transform-origin: 50% 100%; animation: hx-bars 3.2s ease-in-out infinite; animation-delay: var(--d); }
.hx-mini__chart i:nth-child(even) { background: var(--app-heatmap-level-2-color); }
@keyframes hx-bars { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(0.55); } }
.hx-lb { position: absolute; left: 16px; right: 16px; top: 44px; height: 116px; }
.hx-lb__rank { position: absolute; left: 0; color: var(--app-muted-text-color); font-family: var(--hx-mono); font-size: 12px; line-height: 34px; }
.hx-lb__row { position: absolute; left: 22px; right: 0; display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px 0 5px; border: 1px solid var(--hx-line-soft); border-radius: 10px; background: var(--app-card-background-color); font-size: 13px; font-weight: 600; }
.hx-lb__row b { flex: 1; font-weight: 600; }
.hx-lb__row--1 { top: 0; animation: hx-lb-fall 5s var(--hx-ease) infinite alternate; }
.hx-lb__row--2 { top: 40px; z-index: 0; animation: hx-lb-rise 5s var(--hx-ease) infinite alternate; }
.hx-lb__row--2::before { content: ""; position: absolute; inset: -1px; z-index: -1; border: 1px solid color-mix(in srgb, var(--app-heatmap-level-3-color) 45%, transparent); border-radius: inherit; color-scheme: light; background: color-mix(in srgb, var(--app-heatmap-level-3-color) 12%, transparent); }
.hx-lb__row--3 { top: 80px; }
@keyframes hx-lb-rise { 0%, 45% { top: 40px; } 62%, 100% { top: 0; } }
@keyframes hx-lb-fall { 0%, 45% { top: 0; } 62%, 100% { top: 40px; } }
.hx-lb__av { width: 24px; height: 24px; display: grid; place-items: center; flex: none; border-radius: 50%; background: var(--c); color: var(--app-static-dark-color); font-size: 11px; font-weight: 700; }
.hx-lb__meter { width: 54px; height: 6px; border-radius: var(--app-button-border-radius-size); background: color-mix(in srgb, var(--app-regular-text-color) 10%, transparent); overflow: hidden; }
.hx-lb__meter i { display: block; width: var(--w); height: 100%; border-radius: inherit; background: var(--c); }
.hx-lb__row--2 .hx-lb__meter i { color-scheme: light; animation: hx-lb-grow 5s var(--hx-ease) infinite alternate; }
@keyframes hx-lb-grow { 0% { width: 86%; } 45%, 100% { width: 100%; } }

/* Work with us, as in H4: mlabs hire --help in a terminal window, the services as its options. */
.hx-cli { position: relative; margin-top: 28px; border: 1px solid var(--hx-line); border-radius: 16px; background: color-mix(in srgb, color-mix(in srgb, var(--app-ink-black) 55%, var(--app-card-background-color)) 94%, transparent); box-shadow: 0 40px 100px -44px var(--app-ink-black), inset 0 1px 0 color-mix(in srgb, var(--app-white) 5%, transparent); overflow: hidden; }
.hx-cli__bar { display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px; border-bottom: 1px solid var(--hx-line-soft); background: color-mix(in srgb, var(--app-card-background-color) 55%, transparent); color: var(--app-placeholder-color); font-family: var(--hx-mono); font-size: 12px; }
.hx-cli__bar > i { width: 11px; height: 11px; border-radius: 50%; background: var(--app-danger-color); }
.hx-cli__bar > i:nth-child(2) { background: var(--app-warning-color); }
.hx-cli__bar > i:nth-child(3) { background: var(--app-success-color); }
.hx-cli__title { margin: 0 auto; padding-right: 50px; }
.hx-cli__help { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.hx-cli__pane { min-width: 0; padding: 30px 34px; font-family: var(--hx-mono); }
.hx-cli__pane + .hx-cli__pane { border-left: 1px solid var(--hx-line-soft); background: color-mix(in srgb, var(--app-card-background-color) 25%, transparent); }
.hx-cli__usage { color: var(--app-regular-text-color); font-size: 14px; }
.hx-cli__dim { color: var(--app-placeholder-color); }
.hx-cli h2 { margin-top: 18px; font-family: var(--hx-mono); font-size: clamp(28px, 3vw, 42px); font-weight: 600; line-height: 1.15; letter-spacing: -0.03em; }
.hx-cli__comment { max-width: 640px; margin-top: 16px; color: var(--app-muted-text-color); font-size: 15px; line-height: 1.75; }
.hx-cli__ex { margin-top: 22px; color: var(--app-placeholder-color); font-size: 13px; }
.hx-cli__line { color: var(--app-muted-text-color); font-size: 14px; line-height: 1.7; }
.hx-cli__sign { color-scheme: light; color: var(--app-heatmap-level-3-color); }
.hx-cli__cmd { color: var(--app-regular-text-color); }
.hx-cli .hx-actions { margin-top: 12px; }
.hx-cli .hx-btn { font-family: var(--hx-mono); font-size: 14px; }
.hx-cli__opts { display: grid; gap: 10px; margin-top: 12px; font-size: 14px; }
.hx-cli__opt { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 12px; margin: 0 -10px; padding: 6px 10px; border-radius: 7px; transition: background-color 0.2s; }
.hx-cli__opt:hover { background: color-mix(in srgb, var(--app-white) 5%, transparent); }
.hx-cli__opt b { color-scheme: light; color: var(--app-heatmap-level-2-color); font-weight: 500; }
.hx-cli__opt span { color: var(--app-muted-text-color); }
/* What happens after you write: numbered like the options above. */
.hx-cli__next { margin-top: 28px; }
.hx-cli__steps .hx-cli__opt { grid-template-columns: 22px minmax(0, 1fr); }
.hx-cli__path { color: var(--app-activity-color-ocean); }
.hx-cli__branch { color: var(--app-activity-color-purple); }
.hx-cli__gap { margin-top: 26px; }
.hx-cli__out { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; margin-top: 10px; color: var(--app-muted-text-color); font-size: 14px; line-height: 1.65; }
.hx-cli__out b { color: var(--app-regular-text-color); font-weight: 600; }
/* About, terminal on the right: H4's left half, a typing prompt, the pixel MLabs word, principles and the apps. */
.hx-about .hx-cli { margin-top: 0; }
.hx-about .hx-copy + .hx-copy { margin-top: 14px; }
.hx-cli__type { display: inline-block; width: 13ch; overflow: hidden; vertical-align: bottom; white-space: nowrap; animation: hx-cli-typing 12s -4s infinite; }
@keyframes hx-cli-typing { 0% { width: 0; animation-timing-function: steps(13, end); } 10% { width: 13ch; } 84% { width: 13ch; animation-timing-function: steps(13, end); } 88%, 100% { width: 0; } }
.hx-cli__word { display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, 14px); grid-auto-columns: 14px; gap: 3px; margin: 24px 0 22px; color-scheme: light; }
.hx-cli__word i { border-radius: 2px; background: color-mix(in srgb, var(--app-white) 5%, transparent); }
.hx-cli__word i:nth-child(-n+35) { --lv: var(--app-heatmap-level-1-color); }
.hx-cli__word i:nth-child(n+43):nth-child(-n+70) { --lv: var(--app-heatmap-level-2-color); }
.hx-cli__word i:nth-child(n+78):nth-child(-n+140) { --lv: var(--app-heatmap-level-3-color); }
.hx-cli__word i:nth-child(n+148) { --lv: var(--app-heatmap-level-4-color); }
.hx-cli__word i.o { background: var(--lv); box-shadow: 0 0 12px -2px var(--lv); animation: hx-cli-flicker 7s steps(1) infinite; }
.hx-cli__word i.o:nth-child(5n+2) { animation-delay: -2.2s; }
.hx-cli__word i.o:nth-child(7n+3) { animation-delay: -4.6s; }
@keyframes hx-cli-flicker { 0%, 95%, 100% { opacity: 1; } 96% { opacity: 0.35; } 97% { opacity: 1; } 98% { opacity: 0.6; } }
.hx-cli__ls { display: flex; flex-wrap: wrap; gap: 4px 22px; margin-top: 8px; font-size: 14px; line-height: 1.7; }
.hx-cli__ls a { color: var(--c); transition: opacity 0.2s; }
.hx-cli__ls a:hover { opacity: 0.75; }
.hx-cli__ls .is-main { color-scheme: light; color: var(--app-heatmap-level-2-color); font-weight: 600; }
/* Contact, as in H2 Ledger: three inboxes side by side. They share their rows, so the addresses sit on one line. */
.hx-reach__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); align-items: end; column-gap: 40px; }
.hx-reach__kicker { grid-column: 1 / -1; }
.hx-reach__head .hx-h2 { align-self: start; }
/* The intro's first line starts level with the headline's capitals: the headline's 16 px margin plus the room above its capitals, less the room above the intro's (CEO, 11-05: "Align it to the header, not the group header"). */
.hx-reach__head .hx-copy { align-self: start; margin-top: calc(8px + 0.15 * clamp(34px, 4.4vw, 62px)); }
.hx-reach { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto auto; column-gap: 20px; margin-top: 44px; }
.hx-reach__item { position: relative; display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 6px; padding-top: 20px; border-top: 1px solid var(--app-border-color-strong); }
.hx-reach__item::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; color-scheme: light; background: var(--app-heatmap-level-3-color); transform: scaleX(0); transform-origin: left; transition: transform 0.45s var(--hx-ease); }
.hx-reach__item:hover::before { transform: scaleX(1); }
.hx-reach__k { color-scheme: light; color: var(--app-heatmap-level-3-color); font-family: var(--hx-mono); font-size: 13px; }
.hx-reach__d { color: var(--app-muted-text-color); font-size: 15px; line-height: 1.5; }
.hx-reach__a { display: flex; align-items: center; gap: 10px; margin-top: 20px; font-size: clamp(21px, 2.35vw, 24px); font-weight: 700; letter-spacing: -0.025em; }
.hx-reach__a svg { width: 15px; height: 15px; transition: transform 0.35s var(--hx-ease); }
.hx-reach__item:hover .hx-reach__a svg { transform: translateX(6px); }
/* Tablets: the five menu items fit beside the button, and the lab cards sit two to a row. */
@media (min-width: 768px) and (max-width: 1023px) {
  .hx-nav { gap: 18px; font-size: 13px; }
  .hx-apps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hx-app__feats { grid-template-columns: minmax(0, 1fr); }
  .hx-tr { grid-template-columns: 36px 200px minmax(0, 1fr) 84px 132px; gap: 16px; }
  .hx-foot__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hx-foot__brand { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .hx-cli { border-radius: 14px; }
  .hx-cli__bar { height: 36px; padding: 0 12px; font-size: 11px; }
  .hx-cli__bar > i { width: 9px; height: 9px; }
  .hx-cli__title { padding-right: 34px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hx-cli__help { grid-template-columns: minmax(0, 1fr); }
  .hx-cli__pane + .hx-cli__pane { border-left: 0; border-top: 1px solid var(--hx-line-soft); }
  .hx-cli__pane { padding: 20px 18px; }
  .hx-cli__line { font-size: 12.5px; }
  .hx-cli__comment { font-size: 13.5px; }
  .hx-cli__opt { grid-template-columns: 100px minmax(0, 1fr); font-size: 13px; }
  .hx-belt { height: 440px; margin-top: -10px; }
  .hx-belt::before, .hx-belt__plane { top: calc(50% + 10px); }
  .hx-belt::before { width: 520px; height: 260px; }
  .hx-belt__plane { gap: 14px; }
  .hx-belt__group { gap: 14px; padding-right: 14px; }
  .hx-shot { width: 140px; border-radius: 14px; }
  .hx-fcards { display: flex; gap: 14px; margin-inline: calc(-1 * var(--hx-gutter)); padding-inline: var(--hx-gutter); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .hx-fcard { flex: 0 0 84%; scroll-snap-align: start; }
  .hx { --hx-gutter: 14px; font-size: 15px; }
  .hx-head { padding-top: 14px; }
  .hx-head__in { gap: 12px; padding-bottom: 14px; }
  .hx-nav { display: none; }
  .hx-head__in .hx-btn { margin-left: auto; }
  .hx-hero { padding-top: 40px; }
  .hx-kicker { font-size: 12px; }
  .hx-h1 { margin-top: 18px; font-size: 46px; }
  .hx-hero__row { grid-template-columns: minmax(0, 1fr); gap: 24px; margin-top: 22px; }
  .hx-lede { font-size: 16.5px; }
  .hx-btn { height: 48px; padding: 0 20px; font-size: 15px; }
  .hx-badge { --badge-h: 48px; }
  .hx-btn--sm { height: 40px; padding: 0 14px; font-size: 14px; }
  .hx-field { margin-top: 44px; -webkit-mask-image: none; mask-image: none; }
  .hx-field__in { --p: 13px; --g: 2px; }
  .hx-field i { border-radius: 2px; }
  .hx-field i.h { box-shadow: 0 0 8px color-mix(in srgb, var(--app-heatmap-level-3-color) 50%, transparent); }
  .hx-field__in > span:nth-child(-n+18), .hx-field__in > span:nth-child(n+48) { display: none; }
  .hx-legend { flex-direction: column; align-items: flex-start; gap: 10px; font-size: 12px; }
  .hx-sec { padding-top: 88px; }
  .hx-label { font-size: 13px; }
  .hx-h2 { font-size: 32px; }
  .hx-copy { font-size: 16px; }
  .hx-flag { grid-template-columns: minmax(0, 1fr); gap: 32px; margin-top: 26px; }
  .hx-stats { grid-template-columns: minmax(0, 1fr); margin-top: 32px; }
  .hx-stat { padding: 22px; }
  .hx-stat + .hx-stat { border-left: 0; border-top: 1px solid var(--hx-line); }
  .hx-count { font-size: 52px; }
  .hx-eta { font-size: 38px; }
  .hx-labhead { grid-template-columns: minmax(0, 1fr); }
  .hx-labhead .hx-copy { grid-column: 1; grid-row: 3; margin-top: 14px; }
  .hx-apps { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 28px; }
  .hx-app { min-height: 0; padding: 18px; }
  .hx-app h3 { margin-top: 14px; }
  .hx-about { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .hx-about .hx-cli { margin-top: 12px; }
  .hx-console__body { padding: 18px; font-size: 13px; }
  .hx-hire { padding: 32px 20px; border-radius: 24px; }
  .hx-h2--xl { font-size: 36px; }
  .hx-hire__row { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .hx-hire__row .hx-actions { justify-content: flex-start; }
  .hx-caps { grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 32px; }
  .hx-cap { padding: 14px; }
  .hx-led { --led-dots: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 350 90' preserveAspectRatio='none'%3E%3Cpath d='M12.5 7.5h10.5M82.5 7.5h10.5M112.5 7.5h10.5M227.5 7.5h10.5M12.5 12.5h15.5M77.5 12.5h15.5M112.5 12.5h10.5M227.5 12.5h10.5M12.5 17.5h20.5M72.5 17.5h20.5M112.5 17.5h10.5M227.5 17.5h10.5M12.5 22.5h25.5M72.5 22.5h20.5M112.5 22.5h10.5M227.5 22.5h10.5M12.5 27.5h25.5M67.5 27.5h25.5M112.5 27.5h10.5M182.5 27.5h15.5M227.5 27.5h10.5M252.5 27.5h15.5M317.5 27.5h10.5M12.5 32.5h30.5M62.5 32.5h30.5M112.5 32.5h10.5M172.5 32.5h35.5M227.5 32.5h50.5M307.5 32.5h30.5M12.5 37.5h10.5M32.5 37.5h15.5M57.5 37.5h15.5M82.5 37.5h10.5M112.5 37.5h10.5M167.5 37.5h45.5M227.5 37.5h55.5M302.5 37.5h40.5M12.5 42.5h10.5M37.5 42.5h30.5M82.5 42.5h10.5M112.5 42.5h10.5M167.5 42.5h10.5M202.5 42.5h10.5M227.5 42.5h20.5M272.5 42.5h15.5M302.5 42.5h10.5M332.5 42.5h10.5M12.5 47.5h10.5M42.5 47.5h25.5M82.5 47.5h10.5M112.5 47.5h10.5M202.5 47.5h10.5M227.5 47.5h15.5M277.5 47.5h10.5M302.5 47.5h10.5M12.5 52.5h10.5M42.5 52.5h20.5M82.5 52.5h10.5M112.5 52.5h10.5M187.5 52.5h25.5M227.5 52.5h15.5M277.5 52.5h10.5M302.5 52.5h20.5M12.5 57.5h10.5M47.5 57.5h10.5M82.5 57.5h10.5M112.5 57.5h10.5M172.5 57.5h40.5M227.5 57.5h10.5M277.5 57.5h10.5M307.5 57.5h30.5M12.5 62.5h10.5M52.5 62.5h0.5M82.5 62.5h10.5M112.5 62.5h10.5M167.5 62.5h25.5M202.5 62.5h10.5M227.5 62.5h10.5M277.5 62.5h10.5M317.5 62.5h25.5M12.5 67.5h10.5M82.5 67.5h10.5M112.5 67.5h10.5M167.5 67.5h10.5M202.5 67.5h10.5M227.5 67.5h15.5M277.5 67.5h10.5M332.5 67.5h10.5M12.5 72.5h10.5M82.5 72.5h10.5M112.5 72.5h10.5M162.5 72.5h15.5M202.5 72.5h10.5M227.5 72.5h20.5M272.5 72.5h15.5M297.5 72.5h10.5M332.5 72.5h10.5M12.5 77.5h10.5M82.5 77.5h10.5M112.5 77.5h45.5M167.5 77.5h10.5M197.5 77.5h15.5M227.5 77.5h55.5M302.5 77.5h10.5M332.5 77.5h10.5M12.5 82.5h10.5M82.5 82.5h10.5M112.5 82.5h45.5M167.5 82.5h45.5M227.5 82.5h50.5M302.5 82.5h40.5M12.5 87.5h10.5M82.5 87.5h10.5M112.5 87.5h45.5M172.5 87.5h20.5M207.5 87.5h5.5M227.5 87.5h10.5M252.5 87.5h20.5M312.5 87.5h20.5' fill='none' stroke='black' stroke-width='3.89' stroke-linecap='round' stroke-dasharray='0 5'/%3E%3C/svg%3E"); height: 0.7958em; font-size: 29vw; bottom: -0.0442em; }
  .hx-led__dots { -webkit-mask-size: 3.0946em 0.7958em; mask-size: 3.0946em 0.7958em; }
  .hx-foot { margin-top: 96px; padding-bottom: calc(29vw * 0.7958 + 22px); }
  .hx-foot__row { flex-direction: column; align-items: flex-start; font-size: 12px; }
  .hx-foot__social { justify-content: flex-start; margin-top: 14px; font-size: 12px; }
  .hx-foot__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 16px; padding-top: 32px; }
  .hx-foot__brand { grid-column: 1 / -1; }
  .hx-foot__col a { font-size: 14px; }
  .hx-foot__grid + .hx-foot__row { margin-top: 32px; gap: 6px; }
  .hx-cli__out { font-size: 13px; }
  .hx-apps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .hx-app { padding: 14px; }
  .hx-app__icon { width: 44px; height: 44px; border-radius: 12px; }
  .hx-app h3 { margin-top: 12px; font-size: 16px; }
  .hx-app p { font-size: 13px; }
  .hx-app__status b { display: none; }
  .hx-cli__word { grid-template-rows: repeat(7, 9px); grid-auto-columns: 9px; gap: 2.5px; margin: 20px 0 18px; }
  .hx-cli__ls { gap: 2px 14px; font-size: 13px; }
  .hx-reach__head { grid-template-columns: minmax(0, 1fr); }
  .hx-reach__head .hx-copy { margin-top: 14px; padding-bottom: 0; }
  .hx-reach { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: 28px; margin-top: 32px; }
  .hx-reach__item { display: flex; flex-direction: column; gap: 6px; grid-row: auto; }
  .hx-reach__a { margin-top: 14px; font-size: 21px; }
  .hx-ticker { margin-top: 48px; }
  .hx-ticker + .hx-sec { padding-top: 48px; }
  .hx-app__soon { gap: 5px; font-size: 10.5px; }
  .hx-ledger { margin-top: 28px; }
  .hx-tr { grid-template-columns: 30px minmax(0, 1fr) auto; gap: 8px 10px; padding: 16px 2px; }
  .hx-tr--head { display: none; }
  .hx-tr__no { grid-column: 1; grid-row: 1; }
  .hx-tr__app { grid-column: 2; grid-row: 1; gap: 10px; font-size: 16px; }
  .hx-tr__icon { width: 34px; height: 34px; border-radius: 10px; }
  .hx-tr__desc { grid-column: 2 / span 2; grid-row: 2; font-size: 14px; }
  .hx-tr__plat { grid-column: 2 / span 2; grid-row: 3; margin-top: 4px; }
  .hx-tr__stores { display: flex; gap: 0 8px; font-size: 11px; }
  .hx-tr__stores span + span::before { content: "·"; margin-right: 8px; }
  .hx-tr__status { grid-column: 3; grid-row: 1; padding: 4px 10px; font-size: 11px; }
  .hx-apps--full { grid-template-columns: minmax(0, 1fr); }
  .hx-app--full { padding: 18px; }
  .hx-app .hx-app__tag { margin-top: 14px; font-size: 11px; }
  .hx-app--full h3 { margin-top: 4px; font-size: 18px; }
  .hx-app__feats { grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 16px; padding-top: 16px; font-size: 13.5px; }
}
/* Inner pages of H · Final design: the apps list, an app page, the privacy hub, an app privacy policy,
   the legal notice and the 404 page. They reuse H's header, footer, sign, type and buttons from h-ember.css. */
.hx-nav a[aria-current] { color: var(--app-regular-text-color); }

/* Page head: breadcrumb, title and lead */
.hp-head { position: relative; z-index: 1; padding-top: 64px; }
.hp-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; color: var(--app-placeholder-color); font-family: var(--hx-mono); font-size: 13px; }
.hp-crumbs a { color: var(--app-muted-text-color); transition: color 0.2s; }
.hp-crumbs a:hover, .hp-crumbs [aria-current] { color: var(--app-regular-text-color); }
.hp-title { max-width: 14em; margin-top: 24px; font-size: clamp(46px, 5.8vw, 84px); font-weight: 700; line-height: 1; letter-spacing: -0.045em; }
.hp-title--doc { font-size: clamp(36px, 4.2vw, 60px); line-height: 1.05; }
.hp-lead { max-width: 640px; margin-top: 22px; color: var(--app-muted-text-color); font-size: 19px; line-height: 1.6; }
.hp-lead a, .hp-text a, .hp-rows dd a { color: var(--app-regular-text-color); font-weight: 600; text-decoration: underline; text-decoration-color: var(--hx-line); text-underline-offset: 4px; }
.hp-meta { margin-top: 14px; color: var(--app-muted-text-color); font-family: var(--hx-mono); font-size: 13px; }
.hp-sec { position: relative; z-index: 1; padding-top: 96px; }
/* Label, then the headline; an intro beside it starts level with the headline's capitals (CEO, 11-05). */
.hp-sec__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 48px; align-items: start; }
.hp-sec__head > div { display: contents; }
.hp-sec__head .hx-label { grid-column: 1; grid-row: 1; }
.hp-sec__head .hp-h2 { grid-column: 1; grid-row: 2; }
.hp-sec__head .hx-copy { grid-column: 2; grid-row: 2; max-width: 470px; margin-top: calc(6px + 0.17 * clamp(30px, 3.4vw, 46px)); }
@media (max-width: 1023px) { .hp-sec__head { grid-template-columns: minmax(0, 1fr); } .hp-sec__head .hx-copy { grid-column: 1; grid-row: 3; max-width: 560px; margin-top: 14px; } }
.hp-h2 { margin-top: 14px; font-size: clamp(30px, 3.4vw, 46px); font-weight: 700; line-height: 1.08; letter-spacing: -0.035em; }
.hp-more { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; color: var(--app-regular-text-color); font-weight: 600; }
.hp-more::after { content: "›"; color-scheme: light; color: var(--app-heatmap-level-3-color); font-size: 20px; line-height: 1; transition: transform 0.25s var(--hx-ease); }
.hp-more:hover::after { transform: translateX(4px); }

/* Panels and key–value rows */
.hp-panel { position: relative; padding: 30px; border: 1px solid var(--hx-line); border-radius: 22px; background: var(--app-card-background-color); }
.hp-panel > h2 { display: flex; align-items: center; gap: 12px; font-size: 21px; font-weight: 700; letter-spacing: -0.02em; }
.hp-ico { width: 22px; height: 22px; color-scheme: light; color: var(--app-heatmap-level-3-color); }
.hp-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 20px; }
.hp-rows { margin: 18px 0 0; border-top: 1px solid var(--hx-line-soft); }
.hp-rows > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--hx-line-soft); }
.hp-rows dt { color: var(--app-muted-text-color); font-family: var(--hx-mono); font-size: 13px; line-height: 1.6; }
.hp-rows dd { margin: 0; font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; }

/* Apps list: 10k first, in its flagship block */
.hp-tenk { margin-top: 56px; padding: 44px; }
.hp-tenk .hx-flag { margin-top: 0; }
.hp-sec .hx-apps { margin-top: 40px; }

/* App page */
.hp-app { display: grid; grid-template-columns: minmax(0, 1fr) 340px; align-items: center; gap: 72px; margin-top: 36px; }
.hp-app__icon { width: 104px; height: 104px; display: block; border-radius: 26px; overflow: hidden; box-shadow: 0 0 0 1px color-mix(in srgb, var(--app-white) 10%, transparent), 0 26px 50px -24px color-mix(in srgb, var(--c) 85%, transparent); }
.hp-app__icon img { width: 100%; height: 100%; object-fit: cover; }
.hp-app__icon--sm { width: 72px; height: 72px; flex: none; border-radius: 19px; }
.hp-app__dev { margin-top: 26px; color: var(--app-muted-text-color); font-family: var(--hx-mono); font-size: 13px; }
.hp-app .hp-title { margin-top: 10px; }
.hp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.hp-chips li { padding: 7px 13px; border: 1px solid var(--hx-line); border-radius: 999px; color: var(--app-muted-text-color); font-family: var(--hx-mono); font-size: 12px; }
.hp-soon { display: inline-flex; align-items: center; gap: 12px; height: 52px; margin-top: 30px; padding: 0 24px; border: 1px dashed var(--hx-line); border-radius: var(--app-button-border-radius-size); color: var(--app-muted-text-color); font-weight: 600; }
.hp-soon i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); animation: hx-blink 1.4s steps(2, jump-none) infinite; }
.hp-note { margin-top: 10px; color: var(--app-placeholder-color); font-size: 13px; }
.hp-phone.hx-glow { border-radius: 46px; }
.hp-phone__in { padding: 10px; border-radius: 44.5px; background: var(--app-card-background-color); color-scheme: dark; }
.hp-phone__in img { border-radius: 35px; }
.hp-shots { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; margin-top: 40px; }
.hp-shot img { border: 1px solid var(--hx-line); border-radius: 22px; }
.hp-shot b { display: block; margin-top: 16px; font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.hp-shot span { display: block; margin-top: 4px; color: var(--app-muted-text-color); font-size: 13px; line-height: 1.5; }

/* Privacy hub: one row per policy */
.hp-policies { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 32px; }
.hp-policy { display: flex; align-items: center; gap: 14px; padding: 14px 18px 14px 14px; border: 1px solid var(--hx-line); border-radius: 16px; background: var(--app-card-background-color); transition: transform 0.25s var(--hx-ease), border-color 0.25s; }
.hp-policy:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--app-heatmap-level-3-color) 50%, transparent); }
.hp-policy img, .hp-policy__mark { width: 40px; height: 40px; flex: none; border-radius: 11px; }
.hp-policy__mark { display: grid; place-items: center; background: var(--app-premium-brand); color: var(--app-white); }
.hp-policy__mark svg { width: 24px; }
.hp-policy > span:not(.hp-policy__mark) { flex: 1; font-weight: 600; }
.hp-policy small { display: block; color: var(--app-placeholder-color); font-family: var(--hx-mono); font-size: 12px; font-weight: 500; }
.hp-policy::after { content: "›"; color: var(--app-muted-text-color); font-size: 20px; }

/* Policy text: a console of contents beside numbered sections */
.hp-polhead { display: flex; align-items: center; gap: 22px; margin-top: 28px; }
.hp-polhead .hp-title { margin-top: 0; }
.hp-doc { display: grid; grid-template-columns: 300px minmax(0, 1fr); align-items: start; gap: 48px; margin-top: 48px; }
.hp-toc { position: sticky; top: 24px; }
.hp-toc ol { display: grid; gap: 2px; padding: 14px; }
.hp-toc a { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 8px; padding: 8px 10px; border-radius: 9px; color: var(--app-muted-text-color); font-size: 13px; line-height: 1.45; transition: background-color 0.2s, color 0.2s; }
.hp-toc a:hover { background: color-mix(in srgb, var(--app-white) 5%, transparent); color: var(--app-regular-text-color); }
.hp-toc b, .hp-doc__sec h2 b { color-scheme: light; color: var(--app-heatmap-level-3-color); font-family: var(--hx-mono); font-weight: 600; }
.hp-doc__body { display: grid; gap: 16px; }
.hp-doc__sec { padding: 30px 34px; border: 1px solid var(--hx-line); border-radius: 22px; background: var(--app-card-background-color); scroll-margin-top: 24px; }
.hp-doc__sec h2 { display: flex; align-items: baseline; gap: 14px; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.hp-doc__sec h2 b { font-size: 14px; }
.hp-text { max-width: 68ch; margin-top: 14px; color: var(--app-muted-text-color); font-size: 16px; line-height: 1.7; }
.hp-text > * + * { margin-top: 12px; }
.hp-text :is(ul, ol) { display: grid; gap: 8px; padding-left: 22px; list-style: disc; }
.hp-text ol { list-style: decimal; }
.hp-text li::marker { color: var(--app-placeholder-color); }
.hp-text :is(strong, b) { color: var(--app-regular-text-color); font-weight: 600; }
.hp-text h3 { margin-top: 20px; color: var(--app-regular-text-color); font-size: 17px; font-weight: 700; }

/* Legal notice */
.hp-legal { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; gap: 20px; margin-top: 56px; }
.hp-legal .hx-console__body { gap: 0; padding: 22px 26px 26px; }
.hp-legal .hp-rows { margin-top: 14px; }
.hp-legal .hp-rows dd { font-family: var(--font-family); }

/* 404: a heatmap whose brightest days spell 404 */
.hp-404 { position: relative; z-index: 1; padding-top: 104px; text-align: center; }
.hp-404 .hx-wrap { display: grid; justify-items: center; }
.hp-404__grid { display: grid; grid-template-columns: repeat(17, 22px); grid-auto-rows: 22px; gap: 5px; color-scheme: light; }
.hp-404__grid i { border-radius: 5px; background: var(--hx-0); }
.hp-404__grid i.f1 { background: var(--hx-1); }
.hp-404__grid i.f2 { background: var(--hx-2); }
.hp-404__grid i.h { background: var(--hx-3); box-shadow: 0 0 14px color-mix(in srgb, var(--app-heatmap-level-3-color) 50%, transparent); animation: hx-flare 7s ease-in-out infinite; animation-delay: var(--d); }
.hp-404 .hx-label { margin-top: 48px; }
.hp-404 .hp-title { margin-top: 14px; }
.hp-404 .hp-lead { margin-inline: auto; }

@media (max-width: 767px) {
  .hp-head { padding-top: 40px; }
  .hp-title { font-size: 44px; }
  .hp-title--doc { font-size: 32px; }
  .hp-lead { font-size: 17px; }
  .hp-sec { padding-top: 64px; }
  .hp-panel { padding: 22px; }
  .hp-tenk { margin-top: 36px; padding: 22px; }
  .hp-two, .hp-legal, .hp-doc { grid-template-columns: minmax(0, 1fr); }
  .hp-app { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .hp-app__icon { width: 84px; height: 84px; border-radius: 21px; }
  .hp-app__icon--sm { width: 56px; height: 56px; border-radius: 15px; }
  .hp-phone.hx-glow { width: min(280px, 100%); justify-self: center; border-radius: 40px; }
  .hp-phone__in { padding: 8px; border-radius: 38.5px; }
  .hp-phone__in img { border-radius: 31px; }
  .hp-shots { display: flex; gap: 14px; margin-inline: calc(-1 * var(--hx-gutter)); padding-inline: var(--hx-gutter); overflow-x: auto; scroll-snap-type: x mandatory; }
  .hp-shot { flex: 0 0 58%; scroll-snap-align: start; }
  .hp-policies { grid-template-columns: minmax(0, 1fr); }
  .hp-polhead { gap: 16px; }
  .hp-doc { gap: 16px; margin-top: 32px; }
  .hp-toc { position: static; }
  .hp-doc__sec { padding: 22px; }
  .hp-text { font-size: 15.5px; }
  .hp-rows > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .hp-legal { margin-top: 36px; }
  .hp-404 { padding-top: 64px; }
  .hp-404__grid { grid-template-columns: repeat(17, 14px); grid-auto-rows: 14px; gap: 3px; }
  .hp-404__grid i { border-radius: 3px; }
}
/* App pages, 11-05: no screenshots. The right column lists what the app does; the other apps close the page. */
.hp-app--feats { grid-template-columns: minmax(0, 1fr) minmax(0, 520px); align-items: start; }
.hp-get { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 30px; }
.hp-get .hp-soon { height: auto; min-height: 52px; margin-top: 0; padding-block: 10px; line-height: 1.4; }
.hp-feats { margin: 18px 0 0; border-top: 1px solid var(--hx-line-soft); }
.hp-feats li { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: baseline; gap: 10px; padding: 15px 0; border-bottom: 1px solid var(--hx-line-soft); font-size: 18px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.35; }
.hp-feats b { color: var(--c); font-family: var(--hx-mono); font-size: 13px; font-weight: 500; letter-spacing: 0; }
.hp-others { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; margin-top: 32px; }
.hp-others a { display: flex; flex-direction: column; align-items: center; gap: 12px; height: 100%; padding: 20px 10px 18px; border: 1px solid var(--hx-line); border-radius: 18px; background: var(--app-card-background-color); font-size: 14px; font-weight: 600; line-height: 1.3; text-align: center; transition: transform 0.35s var(--hx-ease), border-color 0.35s; }
.hp-others a:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--c) 60%, transparent); }
.hp-app__icon--xs { width: 52px; height: 52px; flex: none; border-radius: 14px; }
@media (min-width: 768px) and (max-width: 1023px) {
  .hp-app--feats { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; }
  .hp-others { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hp-get .hp-soon { border-radius: 16px; }
}
@media (max-width: 767px) {
  .hp-app--feats { grid-template-columns: minmax(0, 1fr); }
  .hp-feats li { padding: 13px 0; font-size: 16px; }
  .hp-others { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 24px; }
  .hp-others a { gap: 8px; padding: 12px 4px 10px; border-radius: 14px; font-size: 11.5px; }
  .hp-others .hp-app__icon--xs { width: 44px; height: 44px; border-radius: 12px; }
  .hp-get .hp-soon { height: auto; min-height: 48px; padding: 10px 18px; border-radius: 16px; font-size: 14px; line-height: 1.4; }
}
/* The site's own additions to the H design (tokens.css, ember.css and pages.css come from the design canvas):
   the page root, the skip link, focus rings, the contact page and reduced motion. */
html { color-scheme: dark; background: #111018; }
body { margin: 0; }
/* What the canvas boards set on their root element. The design's own resets (ember.css) do the rest. */
.hx { color-scheme: dark; font-family: var(--font-family); color: var(--app-regular-text-color); background: var(--app-background-color); }

.skip-link { position: absolute; left: 16px; top: -120px; z-index: 20; padding: 10px 16px; border-radius: 10px; background: var(--app-card-background-color); color: var(--app-regular-text-color); font: 600 15px/1.2 var(--font-family); }
.skip-link:focus { top: 16px; }
/* A focus ring in the 10k focus colour. It follows each element's own corners. */
.hx :where(a, button, summary):focus-visible { outline: 2px solid var(--app-focus-color); outline-offset: 3px; }

/* A small app that is live on Google Play (content/play-links.json): its status dot stops blinking. */
.hx-tr__status.is-live i { animation: none; }

.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Home page, Contact: the contact form's button under the intro. */
.hx-reach__head .hp-reach__form { grid-column: 2; justify-self: start; margin-top: 24px; }

/* Contact page (CEO, 2026-11-05: a form instead of the visitor's mail app). The canvas has no contact board, so
   the page reuses its parts: the form sits in a console, as the legal notice's company details do, and the
   inboxes sit in a panel beside it. Labels are mono like the console's rows; what people type is in the text face. */
.hp-contact { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); align-items: start; gap: 20px; margin-top: 56px; }
.hp-contact .hx-console__body { gap: 0; padding: 22px 26px 28px; }
.hp-form, .hp-sent { margin-top: 20px; padding-top: 24px; border-top: 1px solid var(--hx-line-soft); }
.hp-form { display: grid; gap: 22px; }
:is(.hp-form, .hp-sent, .hp-alert, .hp-field__error)[hidden] { display: none; }
.hp-topics { min-width: 0; margin: 0; padding: 0; border: 0; }
.hp-topics legend, .hp-field label { padding: 0; color: var(--app-muted-text-color); font-size: 13px; line-height: 1.6; }
.hp-topics__list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.hp-topic { position: relative; display: inline-flex; border-radius: var(--app-button-border-radius-size); }
.hp-topic input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.hp-topic span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--hx-line); border-radius: inherit; color: var(--app-muted-text-color); font-size: 13px; transition: border-color 0.2s, color 0.2s, background-color 0.2s; }
.hp-topic:hover input:not(:checked) + span { border-color: var(--app-border-color-strong); color: var(--app-regular-text-color); }
/* The chosen topic in the heat orange of the buttons. */
.hp-topic input:checked + span { color-scheme: light; border-color: transparent; background: var(--app-heatmap-level-3-color); color: var(--app-static-dark-color); font-weight: 600; }
.hp-topic:has(input:focus-visible) { outline: 2px solid var(--app-focus-color); outline-offset: 3px; }
.hp-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 16px; }
.hp-field { display: grid; gap: 8px; min-width: 0; }
.hp-field :is(input, textarea) { width: 100%; min-height: 52px; margin: 0; padding: 13px 16px; border: 1px solid var(--hx-line); border-radius: 14px; background: var(--app-card-background-color); color: var(--app-regular-text-color); font: 400 16px/1.5 var(--font-family); transition: border-color 0.2s, box-shadow 0.2s; }
.hp-field textarea { display: block; min-height: 188px; resize: vertical; }
.hp-field :is(input, textarea):hover { border-color: var(--app-border-color-strong); }
.hp-field :is(input, textarea):focus { outline: none; border-color: var(--app-focus-color); box-shadow: 0 0 0 1px var(--app-focus-color); }
.hp-field [aria-invalid="true"], .hp-field [aria-invalid="true"]:is(:hover, :focus) { border-color: var(--app-danger-color); box-shadow: 0 0 0 1px var(--app-danger-color); }
.hp-field__error { color: var(--app-danger-color); font-family: var(--font-family); font-size: 14px; font-weight: 500; line-height: 1.45; }
.hp-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.hp-alert { padding: 14px 16px; border: 1px solid color-mix(in srgb, var(--app-danger-color) 45%, transparent); border-radius: 14px; background: color-mix(in srgb, var(--app-danger-color) 10%, transparent); color: var(--app-regular-text-color); font: 400 15px/1.55 var(--font-family); }
.hp-alert a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.hp-send { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.hp-send .hx-btn { border: 0; font-family: var(--hx-mono); font-size: 14px; cursor: pointer; }
.hp-send .hx-btn[disabled] { opacity: 0.65; cursor: progress; transform: none; }
.hp-send__note { flex: 1 1 260px; color: var(--app-muted-text-color); font-size: 12.5px; line-height: 1.6; }
.hp-send__note a { color: var(--app-regular-text-color); text-decoration: underline; text-decoration-color: var(--hx-line); text-underline-offset: 3px; }
.hp-sent__status { color: var(--app-muted-text-color); font-size: 13px; }
.hp-sent h2 { margin-top: 10px; font-family: var(--font-family); font-size: clamp(26px, 2.6vw, 32px); font-weight: 700; line-height: 1.15; letter-spacing: -0.03em; }
.hp-sent h2:focus { outline: none; }
.hp-sent p:not(.hp-sent__status) { margin-top: 12px; color: var(--app-muted-text-color); font-family: var(--font-family); font-size: 16px; line-height: 1.6; overflow-wrap: anywhere; }
.hp-sent strong { color: var(--app-regular-text-color); font-weight: 600; }
.hp-sent .hp-more { padding: 0; border: 0; background: none; font: 600 16px/1.5 var(--font-family); cursor: pointer; }
.hp-inboxes .hp-rows dd span { display: block; margin-top: 4px; color: var(--app-muted-text-color); font-size: 14px; font-weight: 400; line-height: 1.5; }
@media (max-width: 1023px) {
  .hp-contact { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .hx-reach__head .hp-reach__form { grid-column: 1; margin-top: 20px; }
  .hp-contact { margin-top: 36px; }
  .hp-contact .hx-console__body { padding: 18px 18px 22px; }
  .hp-fields { grid-template-columns: minmax(0, 1fr); }
  .hp-send .hx-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .hx, .hx::before, .hx::after, .hx *, .hx *::before, .hx *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
/* Style attributes of the pages, as classes (scripts/build.mjs). */
.s-56c6e8c9 { --c: 0; }
.s-7aeb90f5 { --c: 1; }
.s-6ee469cc { --c: 2; }
.s-bf789a27 { --c: 3; }
.s-aab4510c { --c: 4; }
.s-9fd0db7d { --c: 5; }
.s-7642b8de { --c: 6; }
.s-6775a259 { --c: 7; }
.s-78f31d2b { --c: 8; }
.s-29e5224a { --c: 9; }
.s-12bd161e { --c: 10; }
.s-ea088c72 { --c: 11; }
.s-127425da { --c: 12; }
.s-0aa49365 { --c: 13; }
.s-e701cbaa { --c: 14; }
.s-14159fdd { --c: 15; }
.s-06bf3e3b { --c: 16; }
.s-b9bafade { --c: 17; }
.s-df9ad1c0 { --c: 18; }
.s-f0672547 { --c: 19; }
.s-152fe443 { --c: 20; }
.s-9b9eceb6 { --c: 21; }
.s-58cb0ee8 { --c: 22; }
.s-aacc7656 { --c: 23; }
.s-9bb1d195 { --c: 24; }
.s-401996a5 { --c: 25; }
.s-26888007 { --c: 26; }
.s-8000c199 { --c: 27; }
.s-7993a1cf { --c: 28; }
.s-2dafae6b { --c: 29; }
.s-4d741519 { --c: 30; }
.s-5d20cb81 { --c: 31; }
.s-b063c692 { --c: 32; }
.s-433bc682 { --c: 33; }
.s-883c646d { --c: 34; }
.s-f2de7265 { --c: 35; }
.s-ef489e78 { --c: 36; }
.s-dd64b0a6 { --c: 37; }
.s-13e879c3 { --c: 38; }
.s-51383705 { --c: 39; }
.s-b9ef9cf0 { --c: 40; }
.s-bc42e61a { --c: 41; }
.s-60937bd3 { --c: 42; }
.s-b5f1619e { --c: 43; }
.s-fa974193 { --c: 44; }
.s-7e0f2319 { --c: 45; }
.s-165ceb15 { --c: 46; }
.s-1e4cdb31 { --c: 47; }
.s-1f5610b2 { --c: 48; }
.s-3d35c961 { --c: 49; }
.s-aae2fec6 { --c: 50; }
.s-391bfc50 { --c: 51; }
.s-fad79a33 { --c: 52; }
.s-bda7598e { --c: 53; }
.s-31abec91 { --c: 54; }
.s-46d86584 { --c: 55; }
.s-71f83bd2 { --c: 56; }
.s-a792396e { --c: 57; }
.s-dde60366 { --c: 58; }
.s-234d1677 { --c: 59; }
.s-6f14d69f { --c: 60; }
.s-6545cc00 { --c: 61; }
.s-b504e54f { --c: 62; }
.s-b2737925 { --c: 63; }
.s-0606d1f9 { --l: var(--hx-0); }
.s-7c960cad { --l: var(--hx-1); }
.s-a45b5e39 { --l: var(--hx-2); }
.s-4e6ae8a5 { --l: var(--hx-3); }
.s-953f1eb1 { --h: 46%; --d: 0s; }
.s-338fa863 { --h: 72%; --d: -0.4s; }
.s-561891d8 { --h: 58%; --d: -0.8s; }
.s-4f70ce7a { --h: 90%; --d: -1.2s; }
.s-f1d7ecf8 { --h: 64%; --d: -1.6s; }
.s-d00b1938 { --h: 80%; --d: -2s; }
.s-68e51e65 { --h: 52%; --d: -2.4s; }
.s-32911f45 { top: 0; }
.s-f44b72b2 { top: 40px; }
.s-0ab9abf5 { top: 80px; }
.s-e7ac1d74 { --c: var(--app-activity-color-orange); }
.s-216cb798 { --w: 94%; --c: var(--app-activity-color-orange); }
.s-626a8ba7 { --c: var(--app-activity-color-blue); }
.s-fe0a6f10 { --w: 86%; --c: var(--app-heatmap-level-3-color); }
.s-42bea2e2 { --c: var(--app-activity-color-pink); }
.s-7236173c { --w: 70%; --c: var(--app-activity-color-pink); }
.s-e0a2c9eb { --c: var(--app-activity-color-yellow); }
.s-2d2d191b { --c: var(--app-activity-color-ocean); }
.s-83cfc103 { --c: var(--app-activity-color-green); }
.s-cfb25f24 { --d: -0.63s; }
.s-b242d90a { --d: -1.47s; }
.s-f9efe2f9 { --d: -1.68s; }
.s-ba36666e { --d: -1.89s; }
.s-126a13a3 { --d: -3.15s; }
.s-73a29a48 { --d: -0.55s; }
.s-c2fbc9df { --d: -0.76s; }
.s-419cce35 { --d: -1.39s; }
.s-bf382658 { --d: -2.23s; }
.s-5c507c10 { --d: -3.07s; }
.s-5a5536a1 { --d: -3.28s; }
.s-6674bec1 { --d: -0.47s; }
.s-821f4f08 { --d: -0.89s; }
.s-7a790a79 { --d: -1.52s; }
.s-e595806a { --d: -2.15s; }
.s-7eedaca0 { --d: -2.36s; }
.s-3454ee7f { --d: -2.99s; }
.s-1c778ec9 { --d: -3.41s; }
.s-96e285fb { --d: -0.39s; }
.s-6cd40677 { --d: -1.02s; }
.s-708c856a { --d: -1.65s; }
.s-c0e10b63 { --d: -2.07s; }
.s-a715f9a9 { --d: -2.49s; }
.s-20b478c4 { --d: -2.91s; }
.s-a517295f { --d: -3.54s; }
.s-d5f80927 { --d: -0.52s; }
.s-99c272d4 { --d: -0.73s; }
.s-542ea53a { --d: -0.94s; }
.s-027df107 { --d: -1.15s; }
.s-540d9bf1 { --d: -1.36s; }
.s-e9a7a33b { --d: -1.78s; }
.s-d6d907ae { --d: -1.99s; }
.s-67bab6dc { --d: -2.62s; }
.s-91161a69 { --d: -3.04s; }
.s-f2ca7b9b { --d: -3.25s; }
.s-999d39c6 { --d: -3.46s; }
.s-391405c0 { --d: -3.67s; }
.s-36ad2bae { --d: -3.88s; }
.s-9a90f1c4 { --d: -1.28s; }
.s-545a0276 { --d: -1.91s; }
.s-a5694506 { --d: -2.75s; }
.s-ad252f71 { --d: -3.80s; }
.s-12738188 { --d: -1.41s; }
.s-460e25cd { --d: -2.25s; }
.s-3f8c3ce4 { --d: -2.46s; }
.s-9559f54f { --d: -2.67s; }
.s-1ebd771f { --d: -3.93s; }