/*
 * ZExplorer — the product site of a dual-pane file manager for macOS.
 *
 * The site looks like the thing it is about: a Finder-grey Mac window with two
 * panes. One blue — the app icon's — for every button and link; inside the drawn
 * windows the colours are the app's own (macOS accent, selection, folder blue).
 *
 * The animated scenes (copy, move, drag to Favorites) are pure CSS: every element
 * of a scene shares one cycle, and its keyframes say where it is at each moment.
 * The resting style of each element is the scene's END state, so reduced motion,
 * a screenshot or a print shows a finished, readable picture.
 *
 * No web font is loaded: the stack is the visitor's own system face.
 */

/* -------------------------------------------------------------------------
 * Colour modes — three blocks, and the order is the mechanism.
 *
 *   1. `:root`                      — LIGHT, the base.
 *   2. `prefers-color-scheme: dark` — the OS, while the visitor has not
 *                                     explicitly chosen light.
 *   3. `[data-theme="dark"]`        — an explicit choice, which beats the OS.
 *
 * The dark tokens are written twice, in 2 and 3. Keep the two lists identical —
 * build.mjs refuses to build when they drift.
 * ---------------------------------------------------------------------- */

:root {
  --zx-accent: #0a64e0;
  --zx-on-accent: #ffffff;

  --zx-radius: 14px;
  --zx-radius-sm: 9px;
  --zx-radius-lg: 22px;
  --zx-pill: 999px;

  --zx-header-h: 62px;
  --zx-band: clamp(56px, 6vw, 100px);
  --zx-head-gap: clamp(26px, 3vw, 44px);

  --zx-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Apple SD Gothic Neo", "Segoe UI", "Yu Gothic UI", Meiryo, "Malgun Gothic", Roboto, "Helvetica Neue", Arial, sans-serif;
  --zx-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  --zx-bg: #f4f5f7;
  --zx-surface: #ffffff;
  --zx-panel: #ffffff;
  --zx-panel-2: #eef1f5;
  --zx-tint: #eceff4;
  --zx-line: #dde1e8;
  --zx-ink: #16181d;
  --zx-muted: #5b616e;
  --zx-accent-text: #0852c0;
  --zx-accent-soft: #e5eefc;
  --zx-green: #15803d;
  --zx-green-soft: #e3f7ea;
  --zx-amber: #a16207;
  --zx-amber-soft: #fdf3dc;
  --zx-danger: #c62828;
  --zx-danger-soft: #fdecec;
  --zx-key: #ffffff;
  --zx-key-edge: #cfd4dc;
  --zx-key-ink: #1d2129;
  --zx-window: #ffffff;
  --zx-window-line: #d5d9e0;
  --zx-titlebar: #ececec;
  --zx-win-side: #ececec;
  --zx-win-alt: #f4f5f5;
  --zx-win-ink: #1d1d1f;
  --zx-win-muted: #6e6e73;
  --zx-win-hair: #e3e3e8;
  --zx-win-field: #ffffff;
  --zx-win-field-line: #c9c9cf;
  --zx-win-panel: #f5f5f7;
  --zx-sel: #0064e1;
  --zx-sel-inactive: #dcdcdc;
  --zx-sel-inactive-ink: #1d1d1f;
  --zx-wash: rgba(0, 122, 255, 0.12);
  --zx-wash-strong: rgba(0, 122, 255, 0.2);
  --zx-sys-accent: #007aff;
  --zx-copy: #34c759;
  --zx-folder: #3d97f5;
  --zx-folder-tab: #2a80e4;
  --zx-term-bg: #0e1217;
  --zx-term-ink: #d9e6e6;
  --zx-term-caret: #00c7be;
  --zx-desk-1: #dfe7f4;
  --zx-desk-2: #c9d6ea;
  --zx-glow: rgba(10, 100, 224, 0.13);
  --zx-shadow: 0 30px 60px -24px rgba(20, 30, 50, 0.32);
  --zx-shadow-sm: 0 8px 22px -10px rgba(20, 30, 50, 0.28);
  --zx-card-shadow: 0 1px 0 rgba(20, 30, 50, 0.03), 0 12px 28px -20px rgba(20, 30, 50, 0.35);
  --zx-band-1: #0a64e0;
  --zx-band-2: #083c8f;
}

/* ---- DARK, from the OS, while no explicit light choice is in force ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --zx-bg: #111214;
    --zx-surface: #16171a;
    --zx-panel: #1c1d21;
    --zx-panel-2: #232429;
    --zx-tint: #141518;
    --zx-line: #2c2e34;
    --zx-ink: #ececef;
    --zx-muted: #a0a4ad;
    --zx-accent-text: #7cb6ff;
    --zx-accent-soft: rgba(60, 140, 255, 0.16);
    --zx-green: #4ade80;
    --zx-green-soft: rgba(74, 222, 128, 0.14);
    --zx-amber: #fbbf24;
    --zx-amber-soft: rgba(251, 191, 36, 0.13);
    --zx-danger: #ff8a80;
    --zx-danger-soft: rgba(255, 107, 97, 0.12);
    --zx-key: #2a2b30;
    --zx-key-edge: #0b0c0e;
    --zx-key-ink: #f0f1f4;
    --zx-window: #1e1e20;
    --zx-window-line: #38383d;
    --zx-titlebar: #2a2a2c;
    --zx-win-side: #2a2a2c;
    --zx-win-alt: #252527;
    --zx-win-ink: #ececef;
    --zx-win-muted: #9a9aa2;
    --zx-win-hair: #38383d;
    --zx-win-field: #1e1e20;
    --zx-win-field-line: #4a4a50;
    --zx-win-panel: #27272a;
    --zx-sel: #0059d1;
    --zx-sel-inactive: #464649;
    --zx-sel-inactive-ink: #ececef;
    --zx-wash: rgba(10, 132, 255, 0.16);
    --zx-wash-strong: rgba(10, 132, 255, 0.28);
    --zx-sys-accent: #0a84ff;
    --zx-copy: #30d158;
    --zx-folder: #4aa0f7;
    --zx-folder-tab: #3a8ff0;
    --zx-term-bg: #0e1217;
    --zx-term-ink: #d9e6e6;
    --zx-term-caret: #63e6e2;
    --zx-desk-1: #1a2233;
    --zx-desk-2: #10151f;
    --zx-glow: rgba(60, 140, 255, 0.18);
    --zx-shadow: 0 30px 64px -20px rgba(0, 0, 0, 0.75);
    --zx-shadow-sm: 0 8px 22px -8px rgba(0, 0, 0, 0.6);
    --zx-card-shadow: 0 1px 0 rgba(255, 255, 255, 0.03), 0 12px 28px -18px rgba(0, 0, 0, 0.8);
    --zx-band-1: #0b4fb4;
    --zx-band-2: #062657;
  }
}

/* ---- DARK, chosen by the visitor. Same list as above. ---- */
:root[data-theme="dark"] {
  --zx-bg: #111214;
  --zx-surface: #16171a;
  --zx-panel: #1c1d21;
  --zx-panel-2: #232429;
  --zx-tint: #141518;
  --zx-line: #2c2e34;
  --zx-ink: #ececef;
  --zx-muted: #a0a4ad;
  --zx-accent-text: #7cb6ff;
  --zx-accent-soft: rgba(60, 140, 255, 0.16);
  --zx-green: #4ade80;
  --zx-green-soft: rgba(74, 222, 128, 0.14);
  --zx-amber: #fbbf24;
  --zx-amber-soft: rgba(251, 191, 36, 0.13);
  --zx-danger: #ff8a80;
  --zx-danger-soft: rgba(255, 107, 97, 0.12);
  --zx-key: #2a2b30;
  --zx-key-edge: #0b0c0e;
  --zx-key-ink: #f0f1f4;
  --zx-window: #1e1e20;
  --zx-window-line: #38383d;
  --zx-titlebar: #2a2a2c;
  --zx-win-side: #2a2a2c;
  --zx-win-alt: #252527;
  --zx-win-ink: #ececef;
  --zx-win-muted: #9a9aa2;
  --zx-win-hair: #38383d;
  --zx-win-field: #1e1e20;
  --zx-win-field-line: #4a4a50;
  --zx-win-panel: #27272a;
  --zx-sel: #0059d1;
  --zx-sel-inactive: #464649;
  --zx-sel-inactive-ink: #ececef;
  --zx-wash: rgba(10, 132, 255, 0.16);
  --zx-wash-strong: rgba(10, 132, 255, 0.28);
  --zx-sys-accent: #0a84ff;
  --zx-copy: #30d158;
  --zx-folder: #4aa0f7;
  --zx-folder-tab: #3a8ff0;
  --zx-term-bg: #0e1217;
  --zx-term-ink: #d9e6e6;
  --zx-term-caret: #63e6e2;
  --zx-desk-1: #1a2233;
  --zx-desk-2: #10151f;
  --zx-glow: rgba(60, 140, 255, 0.18);
  --zx-shadow: 0 30px 64px -20px rgba(0, 0, 0, 0.75);
  --zx-shadow-sm: 0 8px 22px -8px rgba(0, 0, 0, 0.6);
  --zx-card-shadow: 0 1px 0 rgba(255, 255, 255, 0.03), 0 12px 28px -18px rgba(0, 0, 0, 0.8);
  --zx-band-1: #0b4fb4;
  --zx-band-2: #062657;
}

/* -------------------------------------------------------------------------
 * Base
 * ---------------------------------------------------------------------- */

body {
  background: var(--zx-bg);
}

.zx {
  background: var(--zx-bg);
  color: var(--zx-ink);
  font-family: var(--zx-font);
  font-size: 16.5px;
  line-height: 1.65;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

.zx *,
.zx *::before,
.zx *::after {
  box-sizing: border-box;
}

/* Zero-weight resets, so one-class component rules win. */
:where(.zx) h1,
:where(.zx) h2,
:where(.zx) h3 {
  margin: 0;
  line-height: 1.22;
  letter-spacing: -0.015em;
  font-weight: 800;
  text-wrap: balance;
}

:where(.zx) p,
:where(.zx) figure,
:where(.zx) dl,
:where(.zx) dd {
  margin: 0;
}

.zx h1 {
  font-size: clamp(30px, 3.6vw + 18px, 58px);
}

.zx h2 {
  font-size: clamp(24px, 1.8vw + 17px, 38px);
}

.zx h3 {
  font-size: 18.5px;
  font-weight: 700;
}

.zx a {
  color: inherit;
}

.zx img {
  max-width: 100%;
  height: auto;
}

.zx code {
  font-family: var(--zx-mono);
  font-size: 0.9em;
  padding: 0.1em 0.38em;
  border-radius: 6px;
  background: var(--zx-panel-2);
}

.zx :focus-visible {
  outline: 3px solid var(--zx-accent);
  outline-offset: 2px;
  border-radius: 6px;
}

.zx__container {
  width: min(1180px, 100% - 32px);
  margin-inline: auto;
}

.zx__measure {
  max-width: 820px;
}

.zx__section {
  padding-block: var(--zx-band);
}

.zx__section--tint {
  background: var(--zx-tint);
}

/*
 * Two bands on the same background read as one stretch of page, so the gap
 * between them is ONE band, not two stacked paddings. Blocks arrive wrapped in
 * the runner's <div data-zcms-block>, hence the :has() forms beside the bare ones.
 */
:is(.zx__hero, .zx__section:not(.zx__section--tint), [data-zcms-block]:has(> .zx__hero, > .zx__section:not(.zx__section--tint)))
  + :is(.zx__section:not(.zx__section--tint), [data-zcms-block] > .zx__section:not(.zx__section--tint)),
:is(.zx__section--tint, [data-zcms-block]:has(> .zx__section--tint))
  + :is(.zx__section--tint, [data-zcms-block] > .zx__section--tint) {
  padding-top: 0;
}

.zx [id] {
  scroll-margin-top: calc(var(--zx-header-h) + 16px);
}

.zx__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.zx__skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 50;
  padding: 12px 18px;
  background: var(--zx-accent);
  color: var(--zx-on-accent);
  border-radius: 0 0 var(--zx-radius-sm) 0;
  text-decoration: none;
  font-weight: 700;
}

.zx__skip:focus {
  left: 0;
}

.zx__muted {
  color: var(--zx-muted);
}

.zx__icon {
  width: 22px;
  height: 22px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* -------------------------------------------------------------------------
 * Type and controls
 * ---------------------------------------------------------------------- */

.zx__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 14px;
  color: var(--zx-accent-text);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.zx__eyebrow--badge {
  padding: 5px 14px 5px 6px;
  border-radius: var(--zx-pill);
  background: var(--zx-accent-soft);
  letter-spacing: 0.02em;
  text-transform: none;
  font-size: 14px;
}

.zx__lead {
  margin-top: 16px;
  color: var(--zx-muted);
  font-size: clamp(17px, 1.6vw, 19.5px);
  line-height: 1.6;
}

.zx__accent {
  color: var(--zx-accent);
}

.zx__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 24px;
  border-radius: var(--zx-radius-sm);
  background: var(--zx-accent);
  color: var(--zx-on-accent);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.3;
  text-decoration: none;
  border: 0;
  box-shadow: var(--zx-shadow-sm);
}

.zx a.zx__button {
  color: var(--zx-on-accent);
}

.zx__button:hover {
  filter: brightness(1.07);
}

.zx__button .zx__icon {
  width: 18px;
  height: 18px;
  stroke-width: 2.2;
}

.zx__button--small {
  min-height: 40px;
  padding: 8px 16px;
  font-size: 15px;
}

/* `a.` too: `.zx a.zx__button` would otherwise paint a ghost link white-on-light. */
.zx .zx__button--ghost,
.zx a.zx__button--ghost {
  background: transparent;
  color: var(--zx-accent-text);
  border: 1.5px solid currentColor;
  box-shadow: none;
}

.zx__text-link {
  color: var(--zx-accent-text);
  font-weight: 700;
  text-decoration: none;
}

.zx__text-link:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.zx__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 24px;
  margin-top: 30px;
}

.zx__actions--center {
  justify-content: center;
}

.zx__more {
  margin-top: 28px;
}

.zx__more--center {
  text-align: center;
}

.zx__note {
  margin-top: 22px;
  color: var(--zx-muted);
  font-size: 15px;
}

.zx__note--center {
  text-align: center;
}

.zx__section-head {
  max-width: 760px;
  margin-bottom: var(--zx-head-gap);
}

.zx__section-head--center {
  margin-inline: auto;
  text-align: center;
}

/* The download button: a Mac-store-shaped pill with the Apple glyph. */
.zx__download {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 10px 22px 10px 16px;
  border-radius: 14px;
  background: var(--zx-accent);
  color: var(--zx-on-accent);
  text-decoration: none;
  box-shadow: 0 14px 30px -14px var(--zx-accent);
}

.zx a.zx__download {
  color: var(--zx-on-accent);
}

.zx__download:hover {
  filter: brightness(1.07);
}

.zx__download span {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.zx__download strong {
  font-size: 16.5px;
}

.zx__download small {
  font-size: 12.5px;
  opacity: 0.85;
}

.zx__download-glyph {
  width: 26px;
  height: 26px;
  fill: currentColor;
  stroke: none;
}

.zx__download--large {
  min-height: 62px;
}

.zx__download--large strong {
  font-size: 17.5px;
}

.zx__download--soon {
  background: var(--zx-panel-2);
  color: var(--zx-muted);
  border: 1.5px dashed var(--zx-line);
  box-shadow: none;
}

/* The menu-bar input badge. */

/* -------------------------------------------------------------------------
 * Keycaps
 * ---------------------------------------------------------------------- */

.zx__keys,
.zx__tokens {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 5px;
}

.zx__key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 36px;
  padding: 0 9px;
  border-radius: 8px;
  background: var(--zx-key);
  color: var(--zx-key-ink);
  font-family: var(--zx-font);
  font-size: 16px;
  font-weight: 600;
  border: 1px solid var(--zx-line);
  box-shadow:
    0 2px 0 var(--zx-key-edge),
    0 3px 8px -4px rgba(15, 35, 80, 0.3);
}

.zx__key--static {
  min-width: 30px;
  height: 30px;
  padding: 0 8px;
  font-size: 14.5px;
  border-radius: 7px;
}

.zx__key--big {
  min-width: clamp(64px, 12vw, 92px);
  height: clamp(70px, 13vw, 100px);
  border-radius: 16px;
  font-size: clamp(32px, 6vw, 46px);
  font-weight: 800;
  box-shadow:
    0 5px 0 var(--zx-key-edge),
    0 14px 30px -12px rgba(15, 35, 80, 0.35);
}

/* -------------------------------------------------------------------------
 * Header
 *
 * No backdrop-filter on mobile: it would make the header the containing block
 * of the fixed drawer, and the menu would open as a sliver.
 * ---------------------------------------------------------------------- */

.zx__header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--zx-surface);
  border-bottom: 1px solid var(--zx-line);
}

.zx__header-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: var(--zx-header-h);
  flex-wrap: nowrap;
}

.zx__menu-button {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-left: auto;
  border-radius: var(--zx-radius-sm);
  border: 1px solid var(--zx-line);
  color: inherit;
  text-decoration: none;
}

.zx__menu-bars {
  position: relative;
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}

.zx__menu-bars::before,
.zx__menu-bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}

.zx__menu-bars::before {
  top: -6px;
}

.zx__menu-bars::after {
  top: 6px;
}

.zx__menu-bars--x {
  background: transparent;
}

.zx__menu-bars--x::before {
  top: 0;
  transform: rotate(45deg);
}

.zx__menu-bars--x::after {
  top: 0;
  transform: rotate(-45deg);
}

.zx__menu-button--close {
  display: none;
}

.zx__header-inner:has(#zx-menu:target) .zx__menu-button--open {
  display: none;
}

.zx__header-inner:has(#zx-menu:target) .zx__menu-button--close {
  display: inline-flex;
  border-color: var(--zx-accent);
  background: var(--zx-accent-soft);
  color: var(--zx-accent-text);
}

.zx__header-panel {
  display: none;
  position: fixed;
  top: var(--zx-header-h);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  flex-direction: column;
  gap: 8px;
  padding: 20px;
  background: var(--zx-surface);
  border-top: 1px solid var(--zx-line);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.zx__header-panel:target {
  display: flex;
}

.zx__nav ul {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.zx__nav a {
  display: block;
  padding: 14px 4px;
  border-bottom: 1px solid var(--zx-line);
  font-size: 18px;
  font-weight: 700;
  text-decoration: none;
}

.zx__nav a:hover {
  color: var(--zx-accent-text);
}

.zx__brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  text-decoration: none;
}

.zx__brand img,
.zx__brand-mark {
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 10px;
}

.zx__brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--zx-accent);
  color: #fff;
}

.zx__brand-text {
  display: flex;
  min-width: 0;
  flex-direction: column;
  line-height: 1.25;
}

.zx__brand-text strong {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.zx__brand-text small {
  color: var(--zx-muted);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.zx__header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.zx__icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: var(--zx-radius-sm);
  border: 1px solid var(--zx-line);
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.zx__icon-btn svg {
  width: 20px;
  height: 20px;
}

.zx__lang {
  position: relative;
}

.zx__lang summary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 42px;
  padding: 0 12px;
  border-radius: var(--zx-radius-sm);
  border: 1px solid var(--zx-line);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.zx__lang summary::-webkit-details-marker {
  display: none;
}

.zx__lang summary i {
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}

.zx__flag {
  width: 21px;
  height: 14px;
  flex: none;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(128, 128, 128, 0.45);
}

.zx__lang ul {
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  z-index: 5;
  min-width: 178px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--zx-panel);
  border: 1px solid var(--zx-line);
  border-radius: var(--zx-radius-sm);
  box-shadow: var(--zx-shadow);
}

.zx__lang a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  border-radius: 8px;
  font-size: 15px;
  text-decoration: none;
}

.zx__lang a:hover,
.zx__lang a[aria-current="page"] {
  background: var(--zx-panel-2);
}

/* -------------------------------------------------------------------------
 * Hero and the drawn Mac
 * ---------------------------------------------------------------------- */

.zx__hero {
  position: relative;
  padding-block: clamp(40px, 6vw, 92px) var(--zx-band);
  background:
    radial-gradient(60% 60% at 85% 20%, var(--zx-glow), transparent 70%),
    radial-gradient(50% 50% at 0% 100%, var(--zx-glow), transparent 70%);
}

.zx__hero-grid {
  display: grid;
  gap: clamp(36px, 5vw, 64px);
  align-items: center;
}

.zx__hero-copy h1 {
  margin-top: 4px;
}

.zx__hero-notes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  color: var(--zx-muted);
  font-size: 14.5px;
}

.zx__hero-notes li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.zx__hero-notes .zx__icon {
  width: 17px;
  height: 17px;
  color: var(--zx-green);
  stroke-width: 2.6;
}

.zx__window {
  border-radius: 12px;
  background: var(--zx-window);
  border: 1px solid var(--zx-window-line);
  box-shadow: var(--zx-shadow);
  overflow: hidden;
  color: var(--zx-ink);
}

.zx__titlebar {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 13px;
  background: var(--zx-titlebar);
  border-bottom: 1px solid var(--zx-window-line);
  font-size: 13px;
  font-weight: 600;
}

.zx__titlebar i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ff5f57;
}

.zx__titlebar i:nth-child(2) {
  background: #febc2e;
}

.zx__titlebar i:nth-child(3) {
  background: #28c840;
}

.zx__titlebar span {
  flex: 1;
  margin-right: 52px;
  text-align: center;
  color: var(--zx-muted);
}

/* macOS marked text: the word being composed, underlined. */

/* -------------------------------------------------------------------------
 * Three promises / features
 * ---------------------------------------------------------------------- */

.zx__usps {
  display: grid;
  gap: 18px;
}

.zx__usp,
.zx__feature {
  padding: 28px;
  border-radius: var(--zx-radius);
  background: var(--zx-panel);
  border: 1px solid var(--zx-line);
  box-shadow: var(--zx-card-shadow);
}

.zx__usp h3,
.zx__feature h3 {
  margin-top: 18px;
}

.zx__usp p,
.zx__feature p {
  margin-top: 8px;
  color: var(--zx-muted);
  font-size: 15.5px;
}

.zx__usp-mark,
.zx__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: 13px;
  background: var(--zx-accent-soft);
  color: var(--zx-accent-text);
}

.zx__mark {
  width: 40px;
  height: 40px;
  border-radius: 11px;
}

.zx__features {
  display: grid;
  gap: 16px;
}

.zx__feature {
  padding: 24px;
}

/* -------------------------------------------------------------------------
 * Typing examples
 * ---------------------------------------------------------------------- */

/* -------------------------------------------------------------------------
 * Key table
 * ---------------------------------------------------------------------- */

.zx__table-wrap {
  overflow-x: auto;
  border-radius: var(--zx-radius);
  border: 1px solid var(--zx-line);
  background: var(--zx-panel);
  box-shadow: var(--zx-card-shadow);
}

.zx__keys-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 15.5px;
}

.zx__keys-table th,
.zx__keys-table td {
  padding: 13px 18px;
  text-align: left;
  border-top: 1px solid var(--zx-line);
  vertical-align: middle;
}

.zx__keys-table thead th {
  border-top: 0;
  background: var(--zx-panel-2);
  color: var(--zx-muted);
  font-size: 13px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.zx__keys-table tbody th {
  font-weight: 700;
  white-space: nowrap;
}

/* -------------------------------------------------------------------------
 * Showcase
 * ---------------------------------------------------------------------- */

.zx__showcase {
  display: grid;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}

.zx__showcase-copy .zx__section-head {
  margin-bottom: 26px;
}

.zx__showcase-visual {
  display: flex;
  justify-content: center;
}

.zx__points {
  display: grid;
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.zx__points li {
  display: flex;
  gap: 14px;
}

.zx__points li > span:last-child {
  display: flex;
  flex-direction: column;
}

.zx__points b {
  font-size: 16.5px;
}

.zx__points li > span:last-child > span {
  color: var(--zx-muted);
  font-size: 15px;
}


/* -------------------------------------------------------------------------
 * Screenshots and the install guide
 * ---------------------------------------------------------------------- */

.zx__install {
  display: grid;
  gap: clamp(40px, 6vw, 72px);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.zx__install-step {
  display: grid;
  gap: 22px;
  align-items: center;
}

.zx__install-step--text {
  max-width: 760px;
  padding: 26px 28px;
  border-radius: var(--zx-radius);
  background: var(--zx-panel);
  border: 1px solid var(--zx-line);
  box-shadow: var(--zx-card-shadow);
}

.zx__install-n {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 13px;
  border-radius: var(--zx-pill);
  background: var(--zx-accent);
  color: #fff;
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.zx__install-text h3 {
  margin-top: 12px;
  font-size: clamp(21px, 2.2vw, 26px);
  font-weight: 800;
}

.zx__install-text > p {
  margin-top: 10px;
  color: var(--zx-muted);
}

.zx__path {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  font-size: 14px;
}

.zx__path b {
  padding: 3px 10px;
  border-radius: 7px;
  background: var(--zx-panel-2);
  border: 1px solid var(--zx-line);
  font-weight: 600;
}

.zx__path span {
  color: var(--zx-muted);
}

.zx .zx__install-tip {
  display: flex;
  gap: 10px;
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--zx-accent-soft);
  color: var(--zx-ink);
  font-size: 14.5px;
}

.zx__install-tip .zx__icon {
  width: 19px;
  height: 19px;
  margin-top: 2px;
  color: var(--zx-accent-text);
}

/* -------------------------------------------------------------------------
 * The drawn ZExplorer window
 *
 * One unit (--u) is 1/800 of the stage width, so the window is drawn at 800 × 470
 * units and scales as one picture. window.tsx and scenes.css share these numbers:
 * title bar 38, sidebar 150, panes 325, path bar 34, column header 22, rows 22,
 * favorites 26. Change one here and the scene cursor misses its target.
 * ---------------------------------------------------------------------- */

.zx__stage {
  container-type: inline-size;
  width: 100%;
  overflow: hidden;
  border-radius: 12px;
}

.zx__win {
  --u: 1px;
  position: relative;
  display: flex;
  flex-direction: column;
  width: calc(800 * var(--u));
  height: calc(470 * var(--u));
  overflow: hidden;
  border: 1px solid var(--zx-win-hair);
  border-radius: calc(10 * var(--u));
  background: var(--zx-win-side);
  color: var(--zx-win-ink);
  font-family: var(--zx-font);
  font-size: calc(11 * var(--u));
  line-height: 1.25;
  -webkit-user-select: none;
  user-select: none;
}

@supports (width: 1cqw) {
  .zx__win {
    --u: calc(100cqw / 800);
  }
}

.zx__stage--terminal .zx__win {
  height: calc(590 * var(--u));
}

.zx__win svg {
  display: block;
  flex: none;
}

.zx__sym {
  width: calc(13 * var(--u));
  height: calc(13 * var(--u));
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.zx__fi {
  width: calc(14 * var(--u));
  height: calc(14 * var(--u));
}

.zx__fi text {
  font-family: var(--zx-font);
}

.zx__fi-tab {
  fill: var(--zx-folder-tab);
}

.zx__fi-folder {
  fill: var(--zx-folder);
}

.zx__fi-sheet {
  fill: var(--zx-win-field);
  stroke: var(--zx-win-field-line);
  stroke-width: 0.8;
}

.zx__fi-fold {
  fill: var(--zx-win-hair);
  stroke: var(--zx-win-field-line);
  stroke-width: 0.8;
}

/* Title bar */

.zx__wbar {
  display: flex;
  flex: none;
  align-items: center;
  gap: calc(8 * var(--u));
  height: calc(38 * var(--u));
  padding: 0 calc(12 * var(--u));
  border-bottom: 1px solid var(--zx-win-hair);
}

.zx__lights {
  display: flex;
  gap: calc(6 * var(--u));
  margin-right: calc(6 * var(--u));
}

.zx__lights i {
  width: calc(10 * var(--u));
  height: calc(10 * var(--u));
  border-radius: 50%;
  background: #ff5f57;
}

.zx__lights i:nth-child(2) {
  background: #febc2e;
}

.zx__lights i:nth-child(3) {
  background: #28c840;
}

.zx__wbar b {
  font-size: calc(12 * var(--u));
  font-weight: 600;
}

.zx__wbar small {
  color: var(--zx-win-muted);
  font-size: calc(9 * var(--u));
}

.zx__wbar-fill {
  flex: 1;
}

.zx__wtools {
  display: flex;
  gap: 1px;
  padding: calc(2 * var(--u));
  border: 1px solid var(--zx-win-hair);
  border-radius: calc(7 * var(--u));
  background: var(--zx-window);
}

.zx__wtools i {
  display: grid;
  place-items: center;
  width: calc(22 * var(--u));
  height: calc(19 * var(--u));
  border-radius: calc(5 * var(--u));
  color: var(--zx-win-muted);
}

.zx__wtools i.is-on {
  background: var(--zx-wash);
  color: var(--zx-sys-accent);
}

/* Body */

.zx__wbody {
  display: grid;
  flex: none;
  grid-template-columns: calc(150 * var(--u)) calc(325 * var(--u)) calc(325 * var(--u));
  height: calc(432 * var(--u));
}

.zx__wbody--inspector {
  grid-template-columns: calc(150 * var(--u)) calc(450 * var(--u)) calc(200 * var(--u));
}

.zx__wbody--wide {
  grid-template-columns: calc(150 * var(--u)) calc(650 * var(--u));
}

.zx__stage--terminal .zx__wbody {
  height: calc(300 * var(--u));
}

/* Sidebar */

.zx__wside {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0 calc(10 * var(--u));
  overflow: hidden;
}

.zx__wfavs {
  display: flex;
  flex-direction: column;
  border-radius: calc(8 * var(--u));
}

.zx__wh {
  height: calc(18 * var(--u));
  margin-top: calc(10 * var(--u));
  padding-left: calc(8 * var(--u));
  color: var(--zx-win-muted);
  font-size: calc(8.5 * var(--u));
  font-weight: 600;
  line-height: calc(18 * var(--u));
}

.zx__wdest {
  display: flex;
  flex: none;
  align-items: center;
  gap: calc(7 * var(--u));
  height: calc(26 * var(--u));
  padding: 0 calc(8 * var(--u));
  overflow: hidden;
  border-radius: calc(6 * var(--u));
  white-space: nowrap;
}

.zx__wdest .zx__sym {
  color: var(--zx-sys-accent);
}

.zx__wdest > span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.zx__wdest.is-current {
  background: var(--zx-wash);
}

.zx__weject.zx__sym {
  margin-left: auto;
  color: var(--zx-win-muted);
}

/* Panes */

.zx__wpane {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-left: 1px solid var(--zx-win-hair);
  background: var(--zx-window);
}

.zx__wpath {
  display: flex;
  flex: none;
  align-items: center;
  gap: calc(6 * var(--u));
  height: calc(34 * var(--u));
  padding: 0 calc(10 * var(--u));
  color: var(--zx-win-muted);
}

.zx__wfield {
  position: relative;
  display: flex;
  flex: 1;
  align-items: center;
  gap: calc(5 * var(--u));
  min-width: 0;
  height: calc(22 * var(--u));
  padding: 0 calc(8 * var(--u));
  overflow: hidden;
  border: 1px solid var(--zx-win-field-line);
  border-radius: calc(6 * var(--u));
  background: var(--zx-win-field);
  color: var(--zx-win-ink);
  font-size: calc(10.5 * var(--u));
  white-space: nowrap;
}

.zx__wpane.is-active .zx__wfield {
  box-shadow: 0 0 0 calc(2 * var(--u)) var(--zx-wash-strong);
}

.zx__wfield > span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.zx__wfield .pb {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding: 0 calc(8 * var(--u));
  background: var(--zx-win-field);
}

.zx__wsearch {
  display: flex;
  flex: none;
  align-items: center;
  gap: calc(8 * var(--u));
  height: calc(30 * var(--u));
  padding: 0 calc(10 * var(--u)) calc(6 * var(--u));
}

.zx__wsearch .zx__wfield .zx__sym {
  color: var(--zx-win-muted);
}

.zx__wseg {
  display: flex;
  overflow: hidden;
  border: 1px solid var(--zx-win-field-line);
  border-radius: calc(5 * var(--u));
  font-size: calc(9 * var(--u));
}

.zx__wseg i {
  padding: 0 calc(7 * var(--u));
  font-style: normal;
  line-height: calc(20 * var(--u));
}

.zx__wseg i.is-on {
  background: var(--zx-sys-accent);
  color: #fff;
}

.zx__wcols,
.zx__wr {
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(50 * var(--u)) calc(70 * var(--u)) calc(44 * var(--u));
  align-items: center;
  column-gap: calc(6 * var(--u));
}

.zx__wcols {
  flex: none;
  height: calc(22 * var(--u));
  padding: 0 calc(10 * var(--u)) 0 calc(12 * var(--u));
  border-bottom: 1px solid var(--zx-win-hair);
  font-size: calc(9.5 * var(--u));
  font-weight: 600;
}

.zx__wcols span + span {
  padding-left: calc(5 * var(--u));
  border-left: 1px solid var(--zx-win-hair);
}

.zx__wlists {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.zx__wlist {
  display: flex;
  flex-direction: column;
  padding: 0 calc(6 * var(--u));
  background: var(--zx-window);
}

.zx__wlist.lb {
  position: absolute;
  inset: 0;
}

.zx__wr {
  --b: transparent;
  flex: none;
  height: calc(22 * var(--u));
  padding: 0 calc(4 * var(--u)) 0 calc(6 * var(--u));
  overflow: hidden;
  border-radius: calc(4 * var(--u));
  background: var(--b);
  white-space: nowrap;
}

.zx__wr:nth-child(even) {
  --b: var(--zx-win-alt);
}

.zx__wr > span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.zx__wr > span:not(.zx__wname) {
  font-size: calc(9.5 * var(--u));
  opacity: 0.66;
}

.zx__wname {
  display: flex;
  align-items: center;
  gap: calc(6 * var(--u));
  min-width: 0;
}

.zx__wname span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.zx__wr.is-sel {
  --b: var(--zx-sel-inactive);
}

.zx__wpane.is-active .zx__wr.is-sel {
  --b: var(--zx-sel);
  color: #fff;
}

.zx__wbanner {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  height: calc(34 * var(--u));
  padding: 0 calc(10 * var(--u));
  background: linear-gradient(var(--zx-wash), var(--zx-wash)), var(--zx-window);
  font-size: calc(9.5 * var(--u));
  visibility: hidden;
}

.zx__wprogress {
  flex: none;
  width: calc(80 * var(--u));
  height: calc(4 * var(--u));
  overflow: hidden;
  border-radius: calc(2 * var(--u));
  background: var(--zx-win-hair);
}

.zx__wprogress i {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: var(--zx-sys-accent);
}

.zx__wbanner-text {
  position: relative;
  flex: 1;
  align-self: stretch;
  min-width: 0;
}

.zx__wbanner-text > span {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: calc(2 * var(--u));
  min-width: 0;
}

.zx__wbanner-text b {
  overflow: hidden;
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.zx__wbanner-text small {
  color: var(--zx-win-muted);
  font-size: calc(9 * var(--u));
}

.zx__wbtn {
  flex: none;
  padding: 0 calc(7 * var(--u));
  border: 1px solid var(--zx-win-field-line);
  border-radius: calc(5 * var(--u));
  background: var(--zx-win-field);
  color: var(--zx-win-ink);
  font-size: calc(9 * var(--u));
  line-height: calc(17 * var(--u));
  white-space: nowrap;
}

.zx__wfoot {
  position: relative;
  display: flex;
  flex: none;
  align-items: center;
  height: calc(26 * var(--u));
  padding: 0 calc(10 * var(--u));
  border-top: 1px solid var(--zx-win-hair);
  background: var(--zx-window);
  color: var(--zx-win-muted);
  font-size: calc(9.5 * var(--u));
  white-space: nowrap;
}

.zx__wfoot .cb {
  position: absolute;
  top: 0;
  right: calc(22 * var(--u));
  bottom: 0;
  left: calc(10 * var(--u));
  display: flex;
  align-items: center;
  padding-right: calc(8 * var(--u));
  background: var(--zx-window);
}

.zx__wdot {
  width: calc(6 * var(--u));
  height: calc(6 * var(--u));
  margin-left: auto;
  border-radius: 50%;
  background: var(--zx-win-hair);
}

.zx__wpane.is-active .zx__wdot {
  background: var(--zx-sys-accent);
}

/* Inspector and terminal (the still pictures) */

.zx__winsp {
  display: flex;
  flex-direction: column;
  gap: calc(6 * var(--u));
  min-width: 0;
  padding: calc(14 * var(--u));
  border-left: 1px solid var(--zx-win-hair);
  background: var(--zx-win-panel);
  font-size: calc(9.5 * var(--u));
}

.zx__winsp-thumb {
  display: grid;
  place-items: center;
  height: calc(76 * var(--u));
}

.zx__winsp-thumb .zx__fi {
  width: calc(60 * var(--u));
  height: calc(60 * var(--u));
}

.zx__winsp b {
  font-size: calc(11.5 * var(--u));
}

.zx__winsp small {
  margin-top: calc(-4 * var(--u));
  color: var(--zx-win-muted);
}

.zx__winsp em {
  margin-top: calc(4 * var(--u));
  padding-top: calc(8 * var(--u));
  border-top: 1px solid var(--zx-win-hair);
  font-style: normal;
  font-weight: 600;
}

.zx__winfo {
  display: flex;
  justify-content: space-between;
  gap: calc(6 * var(--u));
}

.zx__winfo span:first-child {
  color: var(--zx-win-muted);
}

.zx__wlink {
  color: var(--zx-sys-accent);
}

.zx__waction {
  display: flex;
  align-items: center;
  gap: calc(6 * var(--u));
  font-size: calc(10.5 * var(--u));
}

/* A pane showing an iPhone (the "device" still): header, photo grid, import bar.
 * Four 70-unit tiles with 8-unit gaps fill the 325-unit pane; the fourth row is
 * cut by the import bar, as a scrolled grid would be. */

.zx__wdev {
  overflow: hidden;
}

.zx__wdev-head {
  display: flex;
  flex: none;
  align-items: center;
  gap: calc(7 * var(--u));
  height: calc(40 * var(--u));
  padding: 0 calc(10 * var(--u));
  border-bottom: 1px solid var(--zx-win-hair);
}

.zx__wdev-icon.zx__sym {
  width: calc(15 * var(--u));
  height: calc(15 * var(--u));
}

.zx__wdev-title {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: calc(1 * var(--u));
  min-width: 0;
  white-space: nowrap;
}

.zx__wdev-title b {
  overflow: hidden;
  font-size: calc(11 * var(--u));
  text-overflow: ellipsis;
}

.zx__wdev-title small {
  overflow: hidden;
  color: var(--zx-win-muted);
  font-size: calc(8.5 * var(--u));
  text-overflow: ellipsis;
}

.zx__wdev-grid {
  display: grid;
  flex: 1;
  grid-template-columns: repeat(4, calc(70 * var(--u)));
  align-content: start;
  gap: calc(8 * var(--u));
  min-height: 0;
  padding: calc(10 * var(--u)) calc(10 * var(--u)) 0;
  overflow: hidden;
}

.zx__wphoto {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(2 * var(--u));
  min-width: 0;
}

/* A landscape: the sky gradient, a sun, and a rolling ground line. */
.zx__wphoto-img {
  position: relative;
  width: calc(70 * var(--u));
  height: calc(70 * var(--u));
  overflow: hidden;
  border-radius: calc(5 * var(--u));
  background:
    radial-gradient(circle at 72% 30%, var(--sun) 0 calc(7 * var(--u)), transparent calc(7.5 * var(--u))),
    radial-gradient(120% 60% at 25% 105%, var(--ground) 0 60%, transparent 61%),
    radial-gradient(110% 55% at 85% 112%, color-mix(in srgb, var(--ground) 75%, #000) 0 60%, transparent 61%),
    var(--sky);
}

.zx__wphoto.is-sel .zx__wphoto-img {
  box-shadow: 0 0 0 calc(2.5 * var(--u)) var(--zx-sys-accent);
}

.zx__wphoto-check {
  position: absolute;
  top: calc(4 * var(--u));
  right: calc(4 * var(--u));
  display: grid;
  place-items: center;
  width: calc(13 * var(--u));
  height: calc(13 * var(--u));
  border: calc(1.2 * var(--u)) solid #fff;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.22);
  box-shadow: 0 0 calc(2 * var(--u)) rgba(0, 0, 0, 0.35);
}

.zx__wphoto.is-sel .zx__wphoto-check {
  border-color: #fff;
  background: var(--zx-sys-accent);
}

.zx__wphoto-check .zx__sym {
  width: calc(10 * var(--u));
  height: calc(10 * var(--u));
  color: #fff;
  stroke-width: 2;
}

.zx__wphoto-video {
  position: absolute;
  right: calc(4 * var(--u));
  bottom: calc(3 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(2 * var(--u));
  color: #fff;
  font-size: calc(7.5 * var(--u));
  font-weight: 600;
  text-shadow: 0 0 calc(2 * var(--u)) rgba(0, 0, 0, 0.6);
}

.zx__wphoto-video .zx__sym {
  width: calc(9 * var(--u));
  height: calc(9 * var(--u));
}

.zx__wphoto-name,
.zx__wphoto-date {
  max-width: 100%;
  overflow: hidden;
  font-size: calc(7.5 * var(--u));
  text-overflow: ellipsis;
  white-space: nowrap;
}

.zx__wphoto-date {
  margin-top: calc(-1 * var(--u));
  color: var(--zx-win-muted);
  font-size: calc(7 * var(--u));
}

.zx__wdev-foot {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: calc(5 * var(--u));
  padding: calc(7 * var(--u)) calc(10 * var(--u));
  border-top: 1px solid var(--zx-win-hair);
  background: var(--zx-window);
  font-size: calc(9 * var(--u));
}

.zx__wdev-row {
  display: flex;
  align-items: center;
  gap: calc(6 * var(--u));
  min-height: calc(17 * var(--u));
  white-space: nowrap;
}

.zx__wdev-row .zx__sym {
  color: var(--zx-sys-accent);
}

.zx__wdev-row--end {
  justify-content: flex-end;
}

.zx__wdev-muted {
  color: var(--zx-win-muted);
}

.zx__wcheckbox {
  flex: none;
  width: calc(11 * var(--u));
  height: calc(11 * var(--u));
  border: 1px solid var(--zx-win-field-line);
  border-radius: calc(3 * var(--u));
  background: var(--zx-win-field);
}

.zx__wbtn--primary {
  border-color: var(--zx-sys-accent);
  background: var(--zx-sys-accent);
  color: #fff;
}

.zx__wterm {
  display: flex;
  flex: 1;
  flex-direction: column;
  margin-left: calc(150 * var(--u));
  border-top: 1px solid var(--zx-win-hair);
  border-left: 1px solid var(--zx-win-hair);
}

.zx__wterm-tabs {
  display: flex;
  align-items: center;
  gap: calc(6 * var(--u));
  height: calc(28 * var(--u));
  padding: 0 calc(8 * var(--u));
  color: var(--zx-win-muted);
  font-size: calc(9.5 * var(--u));
}

.zx__wterm-tab {
  display: flex;
  align-items: center;
  gap: calc(4 * var(--u));
  padding: calc(3 * var(--u)) calc(8 * var(--u));
  border-radius: calc(5 * var(--u));
  background: var(--zx-wash-strong);
  color: var(--zx-win-ink);
}

.zx__wterm-tab .zx__sym {
  width: calc(10 * var(--u));
  height: calc(10 * var(--u));
}

.zx__wterm-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: calc(3 * var(--u));
  padding: calc(9 * var(--u)) calc(14 * var(--u));
  background: var(--zx-term-bg);
  color: var(--zx-term-ink);
  font-family: var(--zx-mono);
  font-size: calc(10.5 * var(--u));
  white-space: pre;
}

.zx__wterm-out {
  opacity: 0.75;
}

.zx__wcaret {
  display: inline-block;
  width: calc(6 * var(--u));
  height: calc(12 * var(--u));
  vertical-align: middle;
  border: 1.5px solid var(--zx-term-caret);
}

/* Scene overlays: the conflict sheet, key chips, the cursor and its drag image. */

.zx__sheet {
  position: absolute;
  top: calc(104 * var(--u));
  left: calc(250 * var(--u));
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: calc(7 * var(--u));
  width: calc(300 * var(--u));
  padding: calc(14 * var(--u));
  border: 1px solid var(--zx-win-hair);
  border-radius: calc(10 * var(--u));
  background: var(--zx-win-panel);
  box-shadow: 0 calc(16 * var(--u)) calc(40 * var(--u)) rgba(0, 0, 0, 0.28);
  font-size: calc(9.5 * var(--u));
  visibility: hidden;
  opacity: 0;
}

.zx__sheet > b {
  font-size: calc(10.5 * var(--u));
  line-height: 1.3;
}

.zx__sheet-check {
  display: flex;
  align-items: center;
  gap: calc(5 * var(--u));
}

.zx__sheet-check i {
  width: calc(11 * var(--u));
  height: calc(11 * var(--u));
  border: 1px solid var(--zx-win-field-line);
  border-radius: calc(3 * var(--u));
  background: var(--zx-win-field);
}

.zx__sheet-btns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(6 * var(--u));
  margin-top: calc(2 * var(--u));
}

.zx__sheet-btns i {
  height: calc(22 * var(--u));
  border: 1px solid var(--zx-win-field-line);
  border-radius: calc(5 * var(--u));
  background: var(--zx-win-field);
  font-size: calc(10 * var(--u));
  font-style: normal;
  line-height: calc(20 * var(--u));
  text-align: center;
}

.zx__sheet-btns i.is-default {
  border-color: var(--zx-sys-accent);
  background: var(--zx-sys-accent);
  color: #fff;
}

.zx__chip {
  position: absolute;
  bottom: calc(40 * var(--u));
  left: 50%;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: calc(2 * var(--u));
  padding: calc(4 * var(--u)) calc(10 * var(--u));
  border-radius: calc(13 * var(--u));
  background: var(--zx-win-ink);
  color: var(--zx-window);
  font-size: calc(10 * var(--u));
  white-space: nowrap;
  transform: translateX(-50%);
  opacity: 0;
}

.zx__chip kbd {
  padding: 0 calc(5 * var(--u));
  border-radius: calc(4 * var(--u));
  background: var(--zx-window);
  color: var(--zx-win-ink);
  font: 600 calc(10 * var(--u)) / 1.6 var(--zx-font);
}

.zx__cursor {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  opacity: 0;
  pointer-events: none;
}

.zx__cursor-arrow svg {
  width: calc(14 * var(--u));
  height: calc(17 * var(--u));
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35));
}

.zx__cursor-arrow path {
  fill: #000;
  stroke: #fff;
  stroke-width: 1.3;
  stroke-linejoin: round;
}

.zx__badge {
  position: absolute;
  top: calc(9 * var(--u));
  left: calc(10 * var(--u));
  z-index: 2;
  display: grid;
  place-items: center;
  width: calc(13 * var(--u));
  height: calc(13 * var(--u));
  border-radius: 50%;
  background: var(--zx-copy);
  color: #fff;
  font-size: calc(11 * var(--u));
  font-weight: 700;
  line-height: 1;
  opacity: 0;
}

.zx__ghost {
  position: absolute;
  top: calc(14 * var(--u));
  left: calc(10 * var(--u));
  display: flex;
  flex-direction: column;
  opacity: 0;
}

.zx__ghost-row {
  display: flex;
  align-items: center;
  gap: calc(6 * var(--u));
  height: calc(20 * var(--u));
  padding: 0 calc(8 * var(--u));
  border-radius: calc(4 * var(--u));
  background: var(--zx-window);
  box-shadow: 0 calc(6 * var(--u)) calc(16 * var(--u)) rgba(0, 0, 0, 0.22);
  color: var(--zx-win-ink);
  font-size: calc(10.5 * var(--u));
  white-space: nowrap;
  opacity: 0.94;
}

.zx__ghost-row + .zx__ghost-row {
  margin-top: calc(-16 * var(--u));
  margin-left: calc(4 * var(--u));
}

.zx__ghost-count {
  position: absolute;
  top: calc(-7 * var(--u));
  right: calc(-9 * var(--u));
  min-width: calc(15 * var(--u));
  padding: 0 calc(4 * var(--u));
  border-radius: calc(8 * var(--u));
  background: #ff3b30;
  color: #fff;
  font-size: calc(9.5 * var(--u));
  font-weight: 700;
  line-height: calc(15 * var(--u));
  text-align: center;
}

.zx__fade {
  position: absolute;
  inset: 0;
  z-index: 6;
  background: var(--zx-win-side);
  opacity: 0;
  pointer-events: none;
}

/* -------------------------------------------------------------------------
 * Flow band: a scene with its numbered steps
 * ---------------------------------------------------------------------- */

.zx__flow {
  display: grid;
  gap: clamp(20px, 3vw, 32px);
}

.zx__desk {
  padding: clamp(10px, 2.4vw, 28px);
  border-radius: var(--zx-radius-lg);
  background: linear-gradient(160deg, var(--zx-desk-1), var(--zx-desk-2));
  box-shadow: var(--zx-shadow);
}

.zx__desk .zx__stage {
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.45);
}

.zx__steps {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: zx-step;
}

.zx__steps li {
  position: relative;
  padding: 12px 14px 12px 50px;
  border: 1px solid var(--zx-line);
  border-radius: var(--zx-radius-sm);
  background: var(--zx-panel);
  color: var(--zx-ink);
  font-size: 15px;
  line-height: 1.45;
  counter-increment: zx-step;
}

.zx__steps li::before {
  content: counter(zx-step);
  position: absolute;
  top: 11px;
  left: 14px;
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: var(--zx-accent-soft);
  color: var(--zx-accent-text);
  font-size: 13px;
  font-weight: 800;
}

.zx__flow-note {
  margin-top: 4px;
  color: var(--zx-muted);
  font-size: 14.5px;
  text-align: center;
}

.zx__showcase-visual .zx__desk {
  width: 100%;
}

/* Hero: the copy centred over a full-width scene, so the drawn window is big enough to read. */

.zx__hero-copy {
  max-width: 820px;
  margin-inline: auto;
  text-align: center;
}

.zx__hero-copy .zx__actions,
.zx__hero-notes {
  justify-content: center;
}

.zx__hero-visual {
  width: 100%;
  max-width: 1080px;
  margin-inline: auto;
}

/* Shortcut table: keys, action, note. */

.zx__keys-or {
  align-self: center;
  padding: 0 3px;
  color: var(--zx-muted);
}

.zx__keys-table .zx__tokens {
  flex-wrap: nowrap;
}

.zx__keys-action {
  font-weight: 600;
}

.zx__keys-note {
  color: var(--zx-muted);
  font-size: 14.5px;
}

/* An uploaded screenshot in the install guide. */

.zx__shot {
  margin: 0;
}

.zx__shot img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--zx-line);
  border-radius: var(--zx-radius);
  box-shadow: var(--zx-shadow-sm);
}

.zx__shot figcaption {
  margin-top: 8px;
  color: var(--zx-muted);
  font-size: 13.5px;
  text-align: center;
}

/* Japanese and Korean: break lines the way each language does, and drop the
 * tight Latin tracking on headings, which crowds CJK glyphs. */

:lang(ja) {
  line-break: strict;
  overflow-wrap: anywhere;
}

:lang(ko) {
  word-break: keep-all;
}

:lang(ja) :is(h1, h2, h3),
:lang(ko) :is(h1, h2, h3) {
  letter-spacing: 0;
}

/* -------------------------------------------------------------------------
 * Download card
 * ---------------------------------------------------------------------- */

.zx__download-card {
  max-width: 980px;
  margin-inline: auto;
  padding: clamp(24px, 4vw, 44px);
  border-radius: var(--zx-radius-lg);
  background: var(--zx-panel);
  border: 1px solid var(--zx-line);
  box-shadow: var(--zx-shadow);
}

.zx__download-main {
  display: grid;
  gap: 22px;
}

.zx__download-icon {
  width: 96px;
  height: 96px;
  border-radius: 22px;
}

.zx__download-main .zx__lead {
  margin-bottom: 24px;
}

.zx__signed {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  color: var(--zx-green);
  font-size: 14.5px;
  font-weight: 600;
}

.zx__signed .zx__icon {
  width: 19px;
  height: 19px;
}

.zx__facts {
  display: grid;
  gap: 1px;
  margin-top: 30px;
  border-radius: 14px;
  overflow: hidden;
  background: var(--zx-line);
  border: 1px solid var(--zx-line);
}

.zx__facts > div {
  padding: 12px 16px;
  background: var(--zx-surface);
}

.zx__facts dt {
  color: var(--zx-muted);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.zx__facts dd {
  margin-top: 2px;
  font-weight: 600;
}

.zx__facts code {
  display: block;
  padding: 0;
  background: none;
  font-size: 12.5px;
  word-break: break-all;
}

.zx__download-notes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  color: var(--zx-muted);
  font-size: 14.5px;
}

.zx__download-notes li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.zx__download-notes .zx__icon {
  width: 17px;
  height: 17px;
  color: var(--zx-green);
  stroke-width: 2.6;
}

/* -------------------------------------------------------------------------
 * Privacy band, specs, notice
 * ---------------------------------------------------------------------- */

.zx__privacy-band {
  padding-block: var(--zx-band);
  background: linear-gradient(150deg, var(--zx-band-1), var(--zx-band-2));
  color: #fff;
}

.zx__privacy-band .zx__eyebrow {
  color: #bcd3ff;
}

.zx__privacy-band .zx__lead {
  color: #d6e2ff;
}

.zx__privacy-band .zx__text-link {
  color: #fff;
}

.zx__privacy {
  display: grid;
  gap: 16px;
}

.zx__privacy article {
  padding: 26px;
  border-radius: var(--zx-radius);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.zx__privacy h3 {
  margin-top: 16px;
}

.zx__privacy p {
  margin-top: 8px;
  color: #d6e2ff;
  font-size: 15.5px;
}

.zx__privacy-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.14);
}

.zx__specs {
  border-top: 1px solid var(--zx-line);
}

.zx__specs > div {
  display: grid;
  gap: 4px;
  padding: 14px 0;
  border-bottom: 1px solid var(--zx-line);
}

.zx__specs dt {
  font-weight: 700;
}

.zx__specs dd {
  color: var(--zx-muted);
}

.zx__notice {
  padding-block: clamp(20px, 3vw, 36px);
}

.zx__notice-inner {
  display: flex;
  gap: 16px;
  max-width: 900px;
  margin-inline: auto;
  padding: 24px 26px;
  border-radius: var(--zx-radius);
  background: var(--zx-accent-soft);
  border: 1px solid var(--zx-line);
}

.zx__notice--warn .zx__notice-inner {
  background: var(--zx-amber-soft);
}

.zx__notice--critical .zx__notice-inner {
  background: var(--zx-danger-soft);
}

.zx__notice-mark {
  display: inline-flex;
  flex: none;
  color: var(--zx-accent-text);
}

.zx__notice--warn .zx__notice-mark {
  color: var(--zx-amber);
}

.zx__notice--critical .zx__notice-mark {
  color: var(--zx-danger);
}

.zx__notice h2 {
  font-size: 20px;
}

.zx__notice p {
  margin-top: 6px;
  color: var(--zx-muted);
}

.zx__notice-list {
  display: grid;
  gap: 12px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.zx__notice-list li {
  display: flex;
  flex-direction: column;
}

.zx__notice-list span {
  color: var(--zx-muted);
  font-size: 15px;
}

/* -------------------------------------------------------------------------
 * Release timeline — a vertical line, one dot per version, newest first.
 * ---------------------------------------------------------------------- */

.zx__timeline {
  position: relative;
  display: grid;
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The line runs through the centres of the dots (36px wide → 17px). */
.zx__timeline::before {
  content: "";
  position: absolute;
  top: 18px;
  bottom: 18px;
  left: 17px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(var(--zx-accent), var(--zx-line) 40%);
}

.zx__tl {
  position: relative;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.zx__tl-dot {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-top: 14px;
  border-radius: 50%;
  background: var(--zx-panel);
  border: 2px solid var(--zx-line);
  color: var(--zx-muted);
}

.zx__tl-dot .zx__icon {
  width: 17px;
  height: 17px;
  stroke-width: 2.2;
}

.zx__tl-dot--release,
.zx__tl--latest .zx__tl-dot {
  background: var(--zx-accent);
  border-color: var(--zx-accent);
  color: #fff;
  box-shadow: 0 0 0 6px var(--zx-accent-soft);
}

.zx__tl-dot--feature {
  border-color: var(--zx-accent);
  color: var(--zx-accent-text);
}

.zx__tl-dot--fix {
  border-color: var(--zx-green);
  color: var(--zx-green);
}

.zx__tl-card {
  padding: 18px 22px 20px;
  border-radius: var(--zx-radius);
  background: var(--zx-panel);
  border: 1px solid var(--zx-line);
  box-shadow: var(--zx-card-shadow);
}

.zx__tl--latest .zx__tl-card {
  border-color: color-mix(in srgb, var(--zx-accent) 45%, var(--zx-line));
}

.zx__tl-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
}

.zx .zx__tl-version {
  font-size: 22px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.zx__tl-build {
  color: var(--zx-muted);
  font-family: var(--zx-mono);
  font-size: 13px;
}

.zx__tl-kind {
  padding: 2px 10px;
  border-radius: var(--zx-pill);
  background: var(--zx-panel-2);
  color: var(--zx-muted);
  font-size: 12.5px;
  font-weight: 700;
}

.zx__tl-kind--release,
.zx__tl-kind--feature {
  background: var(--zx-accent-soft);
  color: var(--zx-accent-text);
}

.zx__tl-kind--fix {
  background: var(--zx-green-soft);
  color: var(--zx-green);
}

.zx__tl-kind--latest {
  background: var(--zx-accent);
  color: #fff;
}

.zx__tl-date {
  margin-left: auto;
  color: var(--zx-muted);
  font-size: 14px;
}

.zx__tl-title {
  margin-top: 8px;
  font-size: 17px;
  font-weight: 700;
}

.zx__tl-changes {
  display: grid;
  gap: 6px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  color: var(--zx-muted);
  font-size: 15.5px;
}

.zx__tl-changes li {
  position: relative;
  padding-left: 18px;
}

.zx__tl-changes li::before {
  content: "";
  position: absolute;
  top: 0.68em;
  left: 2px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--zx-accent);
  opacity: 0.6;
}

@media (min-width: 640px) {
  .zx__timeline {
    gap: 26px;
  }

  .zx__tl {
    gap: 22px;
  }
}

/* -------------------------------------------------------------------------
 * FAQ, CTA, prose
 * ---------------------------------------------------------------------- */

.zx__faq {
  border-top: 1px solid var(--zx-line);
}

.zx__faq-item {
  border-bottom: 1px solid var(--zx-line);
}

.zx__faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 0;
  font-size: 17.5px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.zx__faq-item summary::-webkit-details-marker {
  display: none;
}

.zx__faq-item summary i {
  position: relative;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--zx-accent-soft);
}

.zx__faq-item summary i::before,
.zx__faq-item summary i::after {
  content: "";
  position: absolute;
  top: 13px;
  left: 8px;
  width: 12px;
  height: 2px;
  border-radius: 2px;
  background: var(--zx-accent-text);
}

.zx__faq-item summary i::after {
  transform: rotate(90deg);
}

.zx__faq-item[open] summary i::after {
  transform: none;
}

.zx__faq-item p {
  padding: 0 44px 22px 0;
  color: var(--zx-muted);
}

.zx__cta {
  padding-block: var(--zx-band);
  background:
    radial-gradient(50% 70% at 50% 0%, var(--zx-glow), transparent 70%),
    var(--zx-tint);
  text-align: center;
}

.zx__cta-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.zx__cta-icon {
  width: 88px;
  height: 88px;
  margin-bottom: 20px;
  border-radius: 20px;
  box-shadow: var(--zx-shadow-sm);
}

.zx__cta .zx__lead {
  max-width: 640px;
}

.zx__prose-band {
  padding-block: clamp(28px, 4vw, 56px);
}

.zx__prose {
  font-size: 17px;
  line-height: 1.75;
}

.zx__prose h2 {
  margin: 1.8em 0 0.6em;
  font-size: clamp(22px, 2.4vw, 28px);
}

.zx__prose h2:first-child {
  margin-top: 0;
}

.zx__prose h3 {
  margin: 1.5em 0 0.5em;
}

.zx__prose p,
.zx__prose ul,
.zx__prose ol {
  margin: 0 0 1em;
}

.zx__prose li {
  margin-bottom: 0.4em;
}

.zx__prose a {
  color: var(--zx-accent-text);
  font-weight: 600;
}

.zx__prose table {
  width: 100%;
  border-collapse: collapse;
}

.zx__prose th,
.zx__prose td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--zx-line);
  text-align: left;
  vertical-align: top;
}

.zx__figure img {
  border-radius: var(--zx-radius);
}

.zx__figure figcaption {
  margin-top: 10px;
  color: var(--zx-muted);
  font-size: 14px;
  text-align: center;
}

/* -------------------------------------------------------------------------
 * Pages, documents, posts, states
 * ---------------------------------------------------------------------- */

.zx__page-head {
  padding-block: clamp(40px, 5vw, 76px) clamp(20px, 3vw, 36px);
  background:
    radial-gradient(60% 90% at 90% 0%, var(--zx-glow), transparent 70%),
    var(--zx-tint);
  border-bottom: 1px solid var(--zx-line);
}

.zx__page-head .zx__lead {
  max-width: 760px;
}

.zx__doc-updated {
  margin-top: 10px;
  color: var(--zx-muted);
  font-size: 14px;
}

.zx__toc {
  max-width: 760px;
  margin-top: 26px;
  padding: 18px 22px;
  border-radius: var(--zx-radius);
  background: var(--zx-panel);
  border: 1px solid var(--zx-line);
}

.zx__toc ul {
  display: grid;
  gap: 4px 24px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.zx__toc a {
  color: var(--zx-accent-text);
  text-decoration: none;
  font-size: 15px;
}

.zx__toc a:hover {
  text-decoration: underline;
}

.zx__doc .zx__prose-band:first-of-type {
  padding-top: clamp(36px, 4vw, 60px);
}

.zx__post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-top: 18px;
  color: var(--zx-muted);
  font-size: 14.5px;
}

.zx__post-grid {
  display: grid;
  gap: 18px;
}

.zx__post-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
  padding: 24px;
  border-radius: var(--zx-radius);
  background: var(--zx-panel);
  border: 1px solid var(--zx-line);
  box-shadow: var(--zx-card-shadow);
}

.zx__post-card h3 a {
  text-decoration: none;
}

.zx__post-card p {
  margin-top: 8px;
  color: var(--zx-muted);
  font-size: 15px;
}

.zx__post-card-date {
  color: var(--zx-muted);
  font-size: 13px;
}

.zx__empty {
  color: var(--zx-muted);
  text-align: center;
}

.zx__pager {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 36px;
}

.zx__pager a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid var(--zx-line);
  text-decoration: none;
  font-weight: 700;
}

.zx__pager a[aria-current="page"] {
  background: var(--zx-accent);
  border-color: var(--zx-accent);
  color: #fff;
}

.zx__state {
  padding-block: clamp(60px, 9vw, 130px);
  text-align: center;
}

.zx__state-keys {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 34px;
}

.zx__state p {
  margin-top: 14px;
  color: var(--zx-muted);
}

/* -------------------------------------------------------------------------
 * Footer
 * ---------------------------------------------------------------------- */

.zx__footer {
  padding-block: 56px 28px;
  background: var(--zx-surface);
  border-top: 1px solid var(--zx-line);
  font-size: 15px;
}

.zx__footer-grid {
  display: grid;
  gap: 34px;
}

.zx__footer-about p {
  max-width: 420px;
  margin-top: 14px;
  color: var(--zx-muted);
}

.zx__footer-promise {
  display: grid;
  gap: 6px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.zx__footer-promise li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.zx__footer-promise .zx__icon {
  width: 16px;
  height: 16px;
  color: var(--zx-green);
  stroke-width: 2.6;
}

.zx .zx__footer-build {
  margin-top: 14px;
  font-size: 13px;
}

.zx__footer-col h2 {
  margin-bottom: 12px;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--zx-muted);
}

.zx__footer-col ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.zx__footer-col a {
  text-decoration: none;
}

.zx__footer-col a:hover {
  color: var(--zx-accent-text);
}

.zx__footer-contact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

.zx__footer-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  margin-top: 44px;
  padding-top: 22px;
  border-top: 1px solid var(--zx-line);
  color: var(--zx-muted);
  font-size: 13.5px;
}

.zx__footer-bottom div {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 18px;
}

.zx__footer-bottom a {
  text-decoration: none;
}

.zx__builtwith {
  margin-left: 12px;
}

/* -------------------------------------------------------------------------
 * Responsive
 * ---------------------------------------------------------------------- */

/* Phones: tighter cards, nothing wider than the screen, thumb-sized buttons. */
@media (max-width: 639px) {
  .zx {
    font-size: 16px;
  }

  .zx__usp,
  .zx__feature,
  .zx__privacy article,
  .zx__post-card {
    padding: 22px 20px;
  }

  .zx__install-step--text {
    padding: 22px 20px;
  }

  .zx__notice-inner {
    gap: 12px;
    padding: 18px;
  }

  

  

  

  .zx__keys-table th,
  .zx__keys-table td {
    padding: 11px 14px;
  }

  .zx__tl-card {
    padding: 16px 18px 18px;
  }

  .zx__faq-item summary {
    padding: 18px 0;
    font-size: 16.5px;
  }

  .zx__faq-item p {
    padding: 0 0 20px;
  }

  /* The drawn Mac: smaller keys so the strip never outgrows a 320px screen. */
  

  

  

  

  

  

  

  

  

  

  .zx__download-icon {
    width: 72px;
    height: 72px;
    border-radius: 17px;
  }

  .zx__cta-icon {
    width: 72px;
    height: 72px;
    border-radius: 17px;
  }

  .zx__footer {
    padding-block: 44px 24px;
  }

  .zx__footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px 20px;
  }

  .zx__footer-about,
  .zx__footer-contact {
    grid-column: 1 / -1;
  }

  .zx__footer-bottom {
    margin-top: 34px;
  }
}

/* Narrow phones: the main actions stack and fill the width. */
@media (max-width: 479px) {
  .zx__actions {
    gap: 12px;
  }

  .zx__actions > .zx__button,
  .zx__actions > .zx__download {
    flex: 1 1 100%;
    justify-content: center;
  }
}

@media (min-width: 640px) {
  .zx__usps,
  .zx__privacy {
    grid-template-columns: repeat(3, 1fr);
  }

  .zx__features,
  .zx__post-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  

  

  

  

  .zx__facts {
    grid-template-columns: repeat(2, 1fr);
  }

  .zx__facts-wide {
    grid-column: 1 / -1;
  }

  .zx__download-main {
    grid-template-columns: auto 1fr;
    align-items: start;
  }

  .zx__toc ul {
    grid-template-columns: repeat(2, 1fr);
  }

  .zx__specs > div {
    grid-template-columns: 220px 1fr;
  }

  .zx__footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 960px) {
  :root {
    --zx-header-h: 72px;
  }

  .zx__header {
    background: color-mix(in srgb, var(--zx-surface) 88%, transparent);
    backdrop-filter: blur(14px);
  }

  .zx__menu-button,
  .zx__header-inner:has(#zx-menu:target) .zx__menu-button--close {
    display: none;
  }

  .zx__header-panel,
  .zx__header-panel:target {
    display: flex;
    position: static;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 22px;
    width: auto;
    margin-left: auto;
    padding: 0;
    background: transparent;
    border-top: 0;
    overflow: visible;
  }

  .zx__nav ul {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 4px 20px;
  }

  .zx__nav a {
    padding: 8px 0;
    border-bottom: 0;
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
  }

  .zx__header-actions {
    margin-top: 0;
    flex-wrap: nowrap;
  }

  .zx__header-actions .zx__button {
    white-space: nowrap;
  }

  .zx__lang ul {
    top: calc(100% + 8px);
    bottom: auto;
    left: auto;
    right: 0;
  }

  .zx__steps {
    grid-template-columns: repeat(5, 1fr);
  }

  .zx__showcase {
    grid-template-columns: 0.8fr 1.2fr;
  }

  .zx__showcase--flip {
    grid-template-columns: 1.2fr 0.8fr;
  }

  .zx__showcase--flip .zx__showcase-copy {
    order: 2;
  }

  .zx__features {
    grid-template-columns: repeat(3, 1fr);
  }

  .zx__post-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .zx__install-step {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 48px;
  }

  .zx__install-step:nth-child(even):not(.zx__install-step--text) .zx__install-text {
    order: 2;
  }

  .zx__install-step--text {
    grid-template-columns: 1fr;
    margin-inline: auto;
    width: 100%;
  }

  .zx__footer-grid {
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
  }
}

@media (min-width: 960px) and (max-width: 1119px) {
  .zx__brand-text small {
    display: none;
  }

  .zx__nav ul {
    gap: 4px 14px;
  }
}

@media (hover: hover) {
  .zx__feature,
  .zx__usp,
  .zx__post-card {
    transition:
      transform 0.2s ease,
      box-shadow 0.2s ease;
  }

  .zx__feature:hover,
  .zx__usp:hover,
  .zx__post-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--zx-shadow-sm);
  }

  

  
}

/* Reduced motion: every element rests in its finished state. */
@media (prefers-reduced-motion: reduce) {
  .zx * {
    animation: none !important;
    transition: none !important;
  }
}

/* Generated by src/gen-scenes.mjs — do not edit by hand. */

/* Step captions follow --on (registered so it can be animated as a number). */
@property --on { syntax: "<number>"; inherits: true; initial-value: 1; }
.zx__steps li { opacity: calc(0.42 + 0.58 * var(--on)); transition: none; }
.zx__steps li::before { background: color-mix(in srgb, var(--zx-accent) calc(var(--on) * 100%), var(--zx-accent-soft)); color: color-mix(in srgb, var(--zx-on-accent) calc(var(--on) * 100%), var(--zx-accent-text)); }

/* ---- copy ---- */
.zx__stage--copy .zx__fade { opacity: 0; }
.zx__stage--copy .zx__cursor { transform: translate(calc(700 * var(--u)), calc(380 * var(--u))); opacity: 1; }
.zx__stage--copy .zx__cursor-arrow { transform: none; }
.zx__stage--copy .zx__wpane--l .la .r2 { background: var(--zx-sel-inactive); color: var(--zx-win-ink); }
.zx__stage--copy .zx__wpane--l .la .r3 { background: var(--zx-sel-inactive); color: var(--zx-win-ink); }
.zx__stage--copy .zx__wpane--l .la .r5 { background: var(--zx-sel-inactive); color: var(--zx-win-ink); }
.zx__stage--copy .zx__wpane--l .la :is(.r2, .r3, .r5) .zx__wname { opacity: 1; }
.zx__stage--copy .zx__chip.k0 { opacity: 0; visibility: hidden; }
.zx__stage--copy .zx__ghost.g1 { opacity: 0; visibility: hidden; }
.zx__stage--copy .zx__badge { opacity: 0; visibility: hidden; }
.zx__stage--copy .zx__wpane--r .zx__wlists { box-shadow: none; }
.zx__stage--copy .zx__wpane--r .zx__wbanner { opacity: 0; visibility: hidden; }
.zx__stage--copy .zx__wpane--r .zx__wbanner .b0 { opacity: 0; visibility: hidden; }
.zx__stage--copy .zx__wpane--r .zx__wbanner .b1 { opacity: 0; visibility: hidden; }
.zx__stage--copy .zx__wpane--r .zx__wbanner .b2 { opacity: 0; visibility: hidden; }
.zx__stage--copy .zx__wpane--r .zx__wbanner .b3 { opacity: 0; visibility: hidden; }
.zx__stage--copy .zx__wpane--r .zx__wprogress i { width: 100%; }
.zx__stage--copy .zx__sheet { opacity: 0; visibility: hidden; }
.zx__stage--copy .zx__sheet-btns .is-default { filter: none; }
.zx__stage--copy .zx__wpane--r .la .r1 { height: calc(22 * var(--u)); background: var(--zx-sel); color: #fff; }
.zx__stage--copy .zx__wpane--r .la .r2 { height: calc(22 * var(--u)); background: var(--zx-sel); color: #fff; }
.zx__stage--copy .zx__wpane--r .la .r4 { height: calc(22 * var(--u)); background: var(--zx-sel); color: #fff; }
.zx__stage--copy .zx__wpane--r .cb { opacity: 1; visibility: visible; }
.zx__stage--copy .zx__chip.k1 { opacity: 0; visibility: hidden; }
.zx__stage--copy .zx__wpane--l .zx__wdot { background: var(--zx-win-hair); }
.zx__stage--copy .zx__wpane--l .zx__wfield { box-shadow: none; }
.zx__stage--copy .zx__wpane--r .zx__wdot { background: var(--zx-sys-accent); }
.zx__stage--copy .zx__wpane--r .zx__wfield { box-shadow: 0 0 0 calc(2 * var(--u)) var(--zx-wash-strong); }
@media (prefers-reduced-motion: no-preference) {
  .zx__stage--copy .zx__fade { animation: zx-copy-0 18s linear infinite; }
  .zx__stage--copy .zx__cursor { animation: zx-copy-1 18s ease-in-out infinite, zx-copy-2 18s step-end infinite; }
  .zx__stage--copy .zx__cursor-arrow { animation: zx-copy-3 18s step-end infinite; }
  .zx__stage--copy .zx__wpane--l .la .r2 { animation: zx-copy-4 18s step-end infinite, zx-copy-5 18s step-end infinite; }
  .zx__stage--copy .zx__wpane--l .la .r3 { animation: zx-copy-6 18s step-end infinite, zx-copy-7 18s step-end infinite; }
  .zx__stage--copy .zx__wpane--l .la .r5 { animation: zx-copy-8 18s step-end infinite, zx-copy-9 18s step-end infinite; }
  .zx__stage--copy .zx__wpane--l .la :is(.r2, .r3, .r5) .zx__wname { animation: zx-copy-10 18s step-end infinite; }
  .zx__stage--copy .zx__chip.k0 { animation: zx-copy-11 18s step-end infinite, zx-copy-12 18s step-end infinite; }
  .zx__stage--copy .zx__ghost.g1 { animation: zx-copy-13 18s step-end infinite, zx-copy-14 18s step-end infinite; }
  .zx__stage--copy .zx__badge { animation: zx-copy-15 18s step-end infinite, zx-copy-16 18s step-end infinite; }
  .zx__stage--copy .zx__wpane--r .zx__wlists { animation: zx-copy-17 18s step-end infinite; }
  .zx__stage--copy .zx__wpane--r .zx__wbanner { animation: zx-copy-18 18s step-end infinite, zx-copy-19 18s step-end infinite; }
  .zx__stage--copy .zx__wpane--r .zx__wbanner .b0 { animation: zx-copy-20 18s step-end infinite, zx-copy-21 18s step-end infinite; }
  .zx__stage--copy .zx__wpane--r .zx__wbanner .b1 { animation: zx-copy-22 18s step-end infinite, zx-copy-23 18s step-end infinite; }
  .zx__stage--copy .zx__wpane--r .zx__wbanner .b2 { animation: zx-copy-24 18s step-end infinite, zx-copy-25 18s step-end infinite; }
  .zx__stage--copy .zx__wpane--r .zx__wbanner .b3 { animation: zx-copy-26 18s step-end infinite, zx-copy-27 18s step-end infinite; }
  .zx__stage--copy .zx__wpane--r .zx__wprogress i { animation: zx-copy-28 18s linear infinite; }
  .zx__stage--copy .zx__sheet { animation: zx-copy-29 18s step-end infinite, zx-copy-30 18s step-end infinite; }
  .zx__stage--copy .zx__sheet-btns .is-default { animation: zx-copy-31 18s step-end infinite; }
  .zx__stage--copy .zx__wpane--r .la .r1 { animation: zx-copy-32 18s linear infinite, zx-copy-33 18s step-end infinite, zx-copy-34 18s step-end infinite; }
  .zx__stage--copy .zx__wpane--r .la .r2 { animation: zx-copy-35 18s linear infinite, zx-copy-36 18s step-end infinite, zx-copy-37 18s step-end infinite; }
  .zx__stage--copy .zx__wpane--r .la .r4 { animation: zx-copy-38 18s linear infinite, zx-copy-39 18s step-end infinite, zx-copy-40 18s step-end infinite; }
  .zx__stage--copy .zx__wpane--r .cb { animation: zx-copy-41 18s step-end infinite, zx-copy-42 18s step-end infinite; }
  .zx__stage--copy .zx__chip.k1 { animation: zx-copy-43 18s step-end infinite, zx-copy-44 18s step-end infinite; }
  .zx__stage--copy .zx__wpane--l .zx__wdot { animation: zx-copy-45 18s step-end infinite; }
  .zx__stage--copy .zx__wpane--l .zx__wfield { animation: zx-copy-46 18s step-end infinite; }
  .zx__stage--copy .zx__wpane--r .zx__wdot { animation: zx-copy-47 18s step-end infinite; }
  .zx__stage--copy .zx__wpane--r .zx__wfield { animation: zx-copy-48 18s step-end infinite; }
  .zx__flow--copy .zx__steps .s0 { animation: zx-copy-49 18s step-end infinite; }
  .zx__flow--copy .zx__steps .s1 { animation: zx-copy-50 18s step-end infinite; }
  .zx__flow--copy .zx__steps .s2 { animation: zx-copy-51 18s step-end infinite; }
  .zx__flow--copy .zx__steps .s3 { animation: zx-copy-52 18s step-end infinite; }
  .zx__flow--copy .zx__steps .s4 { animation: zx-copy-53 18s step-end infinite; }
}
@keyframes zx-copy-0 {
  0% { opacity: 1; }
  3% { opacity: 0; }
  94% { opacity: 0; }
  98.5% { opacity: 1; }
  100% { opacity: 1; }
}
@keyframes zx-copy-1 {
  0% { transform: translate(calc(610 * var(--u)), calc(400 * var(--u))); }
  4% { transform: translate(calc(610 * var(--u)), calc(400 * var(--u))); }
  10% { transform: translate(calc(240 * var(--u)), calc(149 * var(--u))); }
  13% { transform: translate(calc(240 * var(--u)), calc(171 * var(--u))); }
  16% { transform: translate(calc(240 * var(--u)), calc(215 * var(--u))); }
  19% { transform: translate(calc(240 * var(--u)), calc(149 * var(--u))); }
  22% { transform: translate(calc(240 * var(--u)), calc(149 * var(--u))); }
  32% { transform: translate(calc(590 * var(--u)), calc(190 * var(--u))); }
  36% { transform: translate(calc(600 * var(--u)), calc(196 * var(--u))); }
  40% { transform: translate(calc(600 * var(--u)), calc(196 * var(--u))); }
  47% { transform: translate(calc(331 * var(--u)), calc(214 * var(--u))); }
  52% { transform: translate(calc(331 * var(--u)), calc(214 * var(--u))); }
  58% { transform: translate(calc(700 * var(--u)), calc(380 * var(--u))); }
  100% { transform: translate(calc(700 * var(--u)), calc(380 * var(--u))); }
}
@keyframes zx-copy-2 {
  0% { opacity: 0; }
  3% { opacity: 1; }
  94% { opacity: 1; }
  97% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes zx-copy-3 {
  0% { transform: none; }
  10.5% { transform: scale(0.8); }
  11.4% { transform: none; }
  13.5% { transform: scale(0.8); }
  14.4% { transform: none; }
  16.5% { transform: scale(0.8); }
  17.4% { transform: none; }
  22% { transform: scale(0.8); }
  22.9% { transform: none; }
  49.5% { transform: scale(0.8); }
  50.4% { transform: none; }
  100% { transform: none; }
}
@keyframes zx-copy-4 {
  0% { background: var(--b); }
  10.5% { background: var(--zx-sel); }
  80% { background: var(--zx-sel-inactive); }
  100% { background: var(--zx-sel-inactive); }
}
@keyframes zx-copy-5 {
  0% { color: var(--zx-win-ink); }
  10.5% { color: #fff; }
  80% { color: var(--zx-win-ink); }
  100% { color: var(--zx-win-ink); }
}
@keyframes zx-copy-6 {
  0% { background: var(--b); }
  13.5% { background: var(--zx-sel); }
  80% { background: var(--zx-sel-inactive); }
  100% { background: var(--zx-sel-inactive); }
}
@keyframes zx-copy-7 {
  0% { color: var(--zx-win-ink); }
  13.5% { color: #fff; }
  80% { color: var(--zx-win-ink); }
  100% { color: var(--zx-win-ink); }
}
@keyframes zx-copy-8 {
  0% { background: var(--b); }
  16.5% { background: var(--zx-sel); }
  80% { background: var(--zx-sel-inactive); }
  100% { background: var(--zx-sel-inactive); }
}
@keyframes zx-copy-9 {
  0% { color: var(--zx-win-ink); }
  16.5% { color: #fff; }
  80% { color: var(--zx-win-ink); }
  100% { color: var(--zx-win-ink); }
}
@keyframes zx-copy-10 {
  0% { opacity: 1; }
  22% { opacity: 0.45; }
  36% { opacity: 1; }
  100% { opacity: 1; }
}
@keyframes zx-copy-11 {
  0% { opacity: 0; }
  12% { opacity: 1; }
  18% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes zx-copy-12 {
  0% { visibility: hidden; }
  12% { visibility: visible; }
  18% { visibility: hidden; }
  100% { visibility: hidden; }
}
@keyframes zx-copy-13 {
  0% { opacity: 0; }
  22% { opacity: 1; }
  36% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes zx-copy-14 {
  0% { visibility: hidden; }
  22% { visibility: visible; }
  36% { visibility: hidden; }
  100% { visibility: hidden; }
}
@keyframes zx-copy-15 {
  0% { opacity: 0; }
  30% { opacity: 1; }
  36% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes zx-copy-16 {
  0% { visibility: hidden; }
  30% { visibility: visible; }
  36% { visibility: hidden; }
  100% { visibility: hidden; }
}
@keyframes zx-copy-17 {
  0% { box-shadow: none; }
  30% { box-shadow: inset 0 0 0 calc(2 * var(--u)) var(--zx-sys-accent); }
  36% { box-shadow: none; }
  100% { box-shadow: none; }
}
@keyframes zx-copy-18 {
  0% { opacity: 0; }
  36% { opacity: 1; }
  72% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes zx-copy-19 {
  0% { visibility: hidden; }
  36% { visibility: visible; }
  72% { visibility: hidden; }
  100% { visibility: hidden; }
}
@keyframes zx-copy-20 {
  0% { opacity: 0; }
  36% { opacity: 1; }
  53% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes zx-copy-21 {
  0% { visibility: hidden; }
  36% { visibility: visible; }
  53% { visibility: hidden; }
  100% { visibility: hidden; }
}
@keyframes zx-copy-22 {
  0% { opacity: 0; }
  53% { opacity: 1; }
  60% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes zx-copy-23 {
  0% { visibility: hidden; }
  53% { visibility: visible; }
  60% { visibility: hidden; }
  100% { visibility: hidden; }
}
@keyframes zx-copy-24 {
  0% { opacity: 0; }
  60% { opacity: 1; }
  66% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes zx-copy-25 {
  0% { visibility: hidden; }
  60% { visibility: visible; }
  66% { visibility: hidden; }
  100% { visibility: hidden; }
}
@keyframes zx-copy-26 {
  0% { opacity: 0; }
  66% { opacity: 1; }
  72% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes zx-copy-27 {
  0% { visibility: hidden; }
  66% { visibility: visible; }
  72% { visibility: hidden; }
  100% { visibility: hidden; }
}
@keyframes zx-copy-28 {
  0% { width: 30%; }
  52.9% { width: 30%; }
  53% { width: 0%; }
  60% { width: 72%; }
  66% { width: 97%; }
  70% { width: 100%; }
  100% { width: 100%; }
}
@keyframes zx-copy-29 {
  0% { opacity: 0; }
  40% { opacity: 1; }
  52% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes zx-copy-30 {
  0% { visibility: hidden; }
  40% { visibility: visible; }
  52% { visibility: hidden; }
  100% { visibility: hidden; }
}
@keyframes zx-copy-31 {
  0% { filter: none; }
  49.5% { filter: brightness(0.82); }
  52% { filter: none; }
  100% { filter: none; }
}
@keyframes zx-copy-32 {
  0% { height: calc(0 * var(--u)); }
  72% { height: calc(0 * var(--u)); }
  74% { height: calc(22 * var(--u)); }
  100% { height: calc(22 * var(--u)); }
}
@keyframes zx-copy-33 {
  0% { background: var(--b); }
  72% { background: var(--zx-sel-inactive); }
  80% { background: var(--zx-sel); }
  100% { background: var(--zx-sel); }
}
@keyframes zx-copy-34 {
  0% { color: var(--zx-win-ink); }
  72% { color: var(--zx-win-ink); }
  80% { color: #fff; }
  100% { color: #fff; }
}
@keyframes zx-copy-35 {
  0% { height: calc(0 * var(--u)); }
  72% { height: calc(0 * var(--u)); }
  74% { height: calc(22 * var(--u)); }
  100% { height: calc(22 * var(--u)); }
}
@keyframes zx-copy-36 {
  0% { background: var(--b); }
  72% { background: var(--zx-sel-inactive); }
  80% { background: var(--zx-sel); }
  100% { background: var(--zx-sel); }
}
@keyframes zx-copy-37 {
  0% { color: var(--zx-win-ink); }
  72% { color: var(--zx-win-ink); }
  80% { color: #fff; }
  100% { color: #fff; }
}
@keyframes zx-copy-38 {
  0% { height: calc(0 * var(--u)); }
  72% { height: calc(0 * var(--u)); }
  74% { height: calc(22 * var(--u)); }
  100% { height: calc(22 * var(--u)); }
}
@keyframes zx-copy-39 {
  0% { background: var(--b); }
  72% { background: var(--zx-sel-inactive); }
  80% { background: var(--zx-sel); }
  100% { background: var(--zx-sel); }
}
@keyframes zx-copy-40 {
  0% { color: var(--zx-win-ink); }
  72% { color: var(--zx-win-ink); }
  80% { color: #fff; }
  100% { color: #fff; }
}
@keyframes zx-copy-41 {
  0% { opacity: 0; }
  72% { opacity: 1; }
  100% { opacity: 1; }
}
@keyframes zx-copy-42 {
  0% { visibility: hidden; }
  72% { visibility: visible; }
  100% { visibility: visible; }
}
@keyframes zx-copy-43 {
  0% { opacity: 0; }
  79% { opacity: 1; }
  87% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes zx-copy-44 {
  0% { visibility: hidden; }
  79% { visibility: visible; }
  87% { visibility: hidden; }
  100% { visibility: hidden; }
}
@keyframes zx-copy-45 {
  0% { background: var(--zx-sys-accent); }
  80% { background: var(--zx-win-hair); }
  100% { background: var(--zx-win-hair); }
}
@keyframes zx-copy-46 {
  0% { box-shadow: 0 0 0 calc(2 * var(--u)) var(--zx-wash-strong); }
  80% { box-shadow: none; }
  100% { box-shadow: none; }
}
@keyframes zx-copy-47 {
  0% { background: var(--zx-win-hair); }
  80% { background: var(--zx-sys-accent); }
  100% { background: var(--zx-sys-accent); }
}
@keyframes zx-copy-48 {
  0% { box-shadow: none; }
  80% { box-shadow: 0 0 0 calc(2 * var(--u)) var(--zx-wash-strong); }
  100% { box-shadow: 0 0 0 calc(2 * var(--u)) var(--zx-wash-strong); }
}
@keyframes zx-copy-49 {
  0% { --on: 1; }
  20% { --on: 0; }
  100% { --on: 0; }
}
@keyframes zx-copy-50 {
  0% { --on: 0; }
  20% { --on: 1; }
  36% { --on: 0; }
  100% { --on: 0; }
}
@keyframes zx-copy-51 {
  0% { --on: 0; }
  36% { --on: 1; }
  53% { --on: 0; }
  100% { --on: 0; }
}
@keyframes zx-copy-52 {
  0% { --on: 0; }
  53% { --on: 1; }
  72% { --on: 0; }
  100% { --on: 0; }
}
@keyframes zx-copy-53 {
  0% { --on: 0; }
  72% { --on: 1; }
  100% { --on: 1; }
}

/* ---- move ---- */
.zx__stage--move .zx__fade { opacity: 0; }
.zx__stage--move .zx__cursor { transform: translate(calc(565 * var(--u)), calc(105 * var(--u))); opacity: 1; }
.zx__stage--move .zx__cursor-arrow { transform: none; }
.zx__stage--move .zx__wpane--l .la .r1 { background: var(--zx-sel); color: #fff; height: calc(0 * var(--u)); opacity: 0; }
.zx__stage--move .zx__wpane--l .la .r2 { background: var(--zx-sel); color: #fff; height: calc(0 * var(--u)); opacity: 0; }
.zx__stage--move .zx__wpane--l .la :is(.r1, .r2) .zx__wname { opacity: 1; }
.zx__stage--move .zx__chip.k0 { opacity: 0; visibility: hidden; }
.zx__stage--move .zx__ghost.g1 { opacity: 0; visibility: hidden; }
.zx__stage--move .zx__wpane--r .la .r0 { background: var(--b); color: var(--zx-win-ink); box-shadow: none; }
.zx__stage--move .zx__chip.k1 { opacity: 0; visibility: hidden; }
.zx__stage--move .zx__chip.k2 { opacity: 0; visibility: hidden; }
.zx__stage--move .zx__badge { opacity: 0; visibility: hidden; }
.zx__stage--move .zx__wpane--r .zx__wbanner { opacity: 0; visibility: hidden; }
.zx__stage--move .zx__wpane--r .zx__wbanner .b0 { opacity: 0; visibility: hidden; }
.zx__stage--move .zx__wpane--r .zx__wbanner .b1 { opacity: 0; visibility: hidden; }
.zx__stage--move .zx__wpane--r .zx__wprogress i { width: 100%; }
.zx__stage--move .zx__wpane--l .cb { opacity: 1; visibility: visible; }
.zx__stage--move .zx__wpane--r .lb { opacity: 1; visibility: visible; }
.zx__stage--move .zx__wpane--r .pb { opacity: 1; visibility: visible; }
.zx__stage--move .zx__wpane--r .cb { opacity: 1; visibility: visible; }
.zx__stage--move .zx__wdest.f3 { background: transparent; }
.zx__stage--move .zx__wpane--l .zx__wdot { background: var(--zx-win-hair); }
.zx__stage--move .zx__wpane--l .zx__wfield { box-shadow: none; }
.zx__stage--move .zx__wpane--r .zx__wdot { background: var(--zx-sys-accent); }
.zx__stage--move .zx__wpane--r .zx__wfield { box-shadow: 0 0 0 calc(2 * var(--u)) var(--zx-wash-strong); }
@media (prefers-reduced-motion: no-preference) {
  .zx__stage--move .zx__fade { animation: zx-move-0 18s linear infinite; }
  .zx__stage--move .zx__cursor { animation: zx-move-1 18s ease-in-out infinite, zx-move-2 18s step-end infinite; }
  .zx__stage--move .zx__cursor-arrow { animation: zx-move-3 18s step-end infinite; }
  .zx__stage--move .zx__wpane--l .la .r1 { animation: zx-move-4 18s step-end infinite, zx-move-5 18s step-end infinite, zx-move-9 18s linear infinite, zx-move-10 18s linear infinite; }
  .zx__stage--move .zx__wpane--l .la .r2 { animation: zx-move-6 18s step-end infinite, zx-move-7 18s step-end infinite, zx-move-11 18s linear infinite, zx-move-12 18s linear infinite; }
  .zx__stage--move .zx__wpane--l .la :is(.r1, .r2) .zx__wname { animation: zx-move-8 18s step-end infinite; }
  .zx__stage--move .zx__chip.k0 { animation: zx-move-13 18s step-end infinite, zx-move-14 18s step-end infinite; }
  .zx__stage--move .zx__ghost.g1 { animation: zx-move-15 18s step-end infinite, zx-move-16 18s step-end infinite; }
  .zx__stage--move .zx__wpane--r .la .r0 { animation: zx-move-17 18s step-end infinite, zx-move-18 18s step-end infinite, zx-move-19 18s step-end infinite; }
  .zx__stage--move .zx__chip.k1 { animation: zx-move-20 18s step-end infinite, zx-move-21 18s step-end infinite; }
  .zx__stage--move .zx__chip.k2 { animation: zx-move-22 18s step-end infinite, zx-move-23 18s step-end infinite; }
  .zx__stage--move .zx__badge { animation: zx-move-24 18s step-end infinite, zx-move-25 18s step-end infinite; }
  .zx__stage--move .zx__wpane--r .zx__wbanner { animation: zx-move-26 18s step-end infinite, zx-move-27 18s step-end infinite; }
  .zx__stage--move .zx__wpane--r .zx__wbanner .b0 { animation: zx-move-28 18s step-end infinite, zx-move-29 18s step-end infinite; }
  .zx__stage--move .zx__wpane--r .zx__wbanner .b1 { animation: zx-move-30 18s step-end infinite, zx-move-31 18s step-end infinite; }
  .zx__stage--move .zx__wpane--r .zx__wprogress i { animation: zx-move-32 18s linear infinite; }
  .zx__stage--move .zx__wpane--l .cb { animation: zx-move-33 18s step-end infinite, zx-move-34 18s step-end infinite; }
  .zx__stage--move .zx__wpane--r .lb { animation: zx-move-35 18s step-end infinite, zx-move-36 18s step-end infinite; }
  .zx__stage--move .zx__wpane--r .pb { animation: zx-move-37 18s step-end infinite, zx-move-38 18s step-end infinite; }
  .zx__stage--move .zx__wpane--r .cb { animation: zx-move-39 18s step-end infinite, zx-move-40 18s step-end infinite; }
  .zx__stage--move .zx__wdest.f3 { animation: zx-move-41 18s step-end infinite; }
  .zx__stage--move .zx__wpane--l .zx__wdot { animation: zx-move-42 18s step-end infinite; }
  .zx__stage--move .zx__wpane--l .zx__wfield { animation: zx-move-43 18s step-end infinite; }
  .zx__stage--move .zx__wpane--r .zx__wdot { animation: zx-move-44 18s step-end infinite; }
  .zx__stage--move .zx__wpane--r .zx__wfield { animation: zx-move-45 18s step-end infinite; }
  .zx__flow--move .zx__steps .s0 { animation: zx-move-46 18s step-end infinite; }
  .zx__flow--move .zx__steps .s1 { animation: zx-move-47 18s step-end infinite; }
  .zx__flow--move .zx__steps .s2 { animation: zx-move-48 18s step-end infinite; }
  .zx__flow--move .zx__steps .s3 { animation: zx-move-49 18s step-end infinite; }
  .zx__flow--move .zx__steps .s4 { animation: zx-move-50 18s step-end infinite; }
}
@keyframes zx-move-0 {
  0% { opacity: 1; }
  3% { opacity: 0; }
  94% { opacity: 0; }
  98.5% { opacity: 1; }
  100% { opacity: 1; }
}
@keyframes zx-move-1 {
  0% { transform: translate(calc(610 * var(--u)), calc(400 * var(--u))); }
  4% { transform: translate(calc(610 * var(--u)), calc(400 * var(--u))); }
  10% { transform: translate(calc(240 * var(--u)), calc(127 * var(--u))); }
  14% { transform: translate(calc(240 * var(--u)), calc(149 * var(--u))); }
  19% { transform: translate(calc(240 * var(--u)), calc(127 * var(--u))); }
  22% { transform: translate(calc(240 * var(--u)), calc(127 * var(--u))); }
  31% { transform: translate(calc(565 * var(--u)), calc(105 * var(--u))); }
  50% { transform: translate(calc(565 * var(--u)), calc(105 * var(--u))); }
  57% { transform: translate(calc(640 * var(--u)), calc(300 * var(--u))); }
  62% { transform: translate(calc(640 * var(--u)), calc(300 * var(--u))); }
  66% { transform: translate(calc(565 * var(--u)), calc(105 * var(--u))); }
  100% { transform: translate(calc(565 * var(--u)), calc(105 * var(--u))); }
}
@keyframes zx-move-2 {
  0% { opacity: 0; }
  3% { opacity: 1; }
  94% { opacity: 1; }
  97% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes zx-move-3 {
  0% { transform: none; }
  10.5% { transform: scale(0.8); }
  11.4% { transform: none; }
  14.5% { transform: scale(0.8); }
  15.4% { transform: none; }
  22% { transform: scale(0.8); }
  22.9% { transform: none; }
  66.5% { transform: scale(0.8); }
  67.4% { transform: none; }
  68% { transform: scale(0.8); }
  68.9% { transform: none; }
  100% { transform: none; }
}
@keyframes zx-move-4 {
  0% { background: var(--b); }
  10.5% { background: var(--zx-sel); }
  100% { background: var(--zx-sel); }
}
@keyframes zx-move-5 {
  0% { color: var(--zx-win-ink); }
  10.5% { color: #fff; }
  100% { color: #fff; }
}
@keyframes zx-move-9 {
  0% { height: calc(22 * var(--u)); }
  57% { height: calc(22 * var(--u)); }
  59% { height: calc(0 * var(--u)); }
  100% { height: calc(0 * var(--u)); }
}
@keyframes zx-move-10 {
  0% { opacity: 1; }
  57% { opacity: 1; }
  58% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes zx-move-6 {
  0% { background: var(--b); }
  14.5% { background: var(--zx-sel); }
  100% { background: var(--zx-sel); }
}
@keyframes zx-move-7 {
  0% { color: var(--zx-win-ink); }
  14.5% { color: #fff; }
  100% { color: #fff; }
}
@keyframes zx-move-11 {
  0% { height: calc(22 * var(--u)); }
  57% { height: calc(22 * var(--u)); }
  59% { height: calc(0 * var(--u)); }
  100% { height: calc(0 * var(--u)); }
}
@keyframes zx-move-12 {
  0% { opacity: 1; }
  57% { opacity: 1; }
  58% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes zx-move-8 {
  0% { opacity: 1; }
  22% { opacity: 0.45; }
  50% { opacity: 1; }
  100% { opacity: 1; }
}
@keyframes zx-move-13 {
  0% { opacity: 0; }
  12% { opacity: 1; }
  17% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes zx-move-14 {
  0% { visibility: hidden; }
  12% { visibility: visible; }
  17% { visibility: hidden; }
  100% { visibility: hidden; }
}
@keyframes zx-move-15 {
  0% { opacity: 0; }
  22% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes zx-move-16 {
  0% { visibility: hidden; }
  22% { visibility: visible; }
  50% { visibility: hidden; }
  100% { visibility: hidden; }
}
@keyframes zx-move-17 {
  0% { background: var(--b); }
  30% { background: var(--zx-sel); }
  50% { background: var(--b); }
  100% { background: var(--b); }
}
@keyframes zx-move-18 {
  0% { color: var(--zx-win-ink); }
  30% { color: #fff; }
  50% { color: var(--zx-win-ink); }
  100% { color: var(--zx-win-ink); }
}
@keyframes zx-move-19 {
  0% { box-shadow: none; }
  30% { box-shadow: 0 0 0 calc(2 * var(--u)) var(--zx-sys-accent); }
  50% { box-shadow: none; }
  100% { box-shadow: none; }
}
@keyframes zx-move-20 {
  0% { opacity: 0; }
  35% { opacity: 1; }
  43% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes zx-move-21 {
  0% { visibility: hidden; }
  35% { visibility: visible; }
  43% { visibility: hidden; }
  100% { visibility: hidden; }
}
@keyframes zx-move-22 {
  0% { opacity: 0; }
  43% { opacity: 1; }
  49% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes zx-move-23 {
  0% { visibility: hidden; }
  43% { visibility: visible; }
  49% { visibility: hidden; }
  100% { visibility: hidden; }
}
@keyframes zx-move-24 {
  0% { opacity: 0; }
  35% { opacity: 1; }
  43% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes zx-move-25 {
  0% { visibility: hidden; }
  35% { visibility: visible; }
  43% { visibility: hidden; }
  100% { visibility: hidden; }
}
@keyframes zx-move-26 {
  0% { opacity: 0; }
  50% { opacity: 1; }
  57% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes zx-move-27 {
  0% { visibility: hidden; }
  50% { visibility: visible; }
  57% { visibility: hidden; }
  100% { visibility: hidden; }
}
@keyframes zx-move-28 {
  0% { opacity: 0; }
  50% { opacity: 1; }
  53.5% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes zx-move-29 {
  0% { visibility: hidden; }
  50% { visibility: visible; }
  53.5% { visibility: hidden; }
  100% { visibility: hidden; }
}
@keyframes zx-move-30 {
  0% { opacity: 0; }
  53.5% { opacity: 1; }
  57% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes zx-move-31 {
  0% { visibility: hidden; }
  53.5% { visibility: visible; }
  57% { visibility: hidden; }
  100% { visibility: hidden; }
}
@keyframes zx-move-32 {
  0% { width: 0%; }
  50% { width: 0%; }
  53.5% { width: 50%; }
  56.5% { width: 100%; }
  100% { width: 100%; }
}
@keyframes zx-move-33 {
  0% { opacity: 0; }
  59% { opacity: 1; }
  100% { opacity: 1; }
}
@keyframes zx-move-34 {
  0% { visibility: hidden; }
  59% { visibility: visible; }
  100% { visibility: visible; }
}
@keyframes zx-move-35 {
  0% { opacity: 0; }
  68.5% { opacity: 1; }
  100% { opacity: 1; }
}
@keyframes zx-move-36 {
  0% { visibility: hidden; }
  68.5% { visibility: visible; }
  100% { visibility: visible; }
}
@keyframes zx-move-37 {
  0% { opacity: 0; }
  68.5% { opacity: 1; }
  100% { opacity: 1; }
}
@keyframes zx-move-38 {
  0% { visibility: hidden; }
  68.5% { visibility: visible; }
  100% { visibility: visible; }
}
@keyframes zx-move-39 {
  0% { opacity: 0; }
  68.5% { opacity: 1; }
  100% { opacity: 1; }
}
@keyframes zx-move-40 {
  0% { visibility: hidden; }
  68.5% { visibility: visible; }
  100% { visibility: visible; }
}
@keyframes zx-move-41 {
  0% { background: var(--zx-wash); }
  68.5% { background: transparent; }
  100% { background: transparent; }
}
@keyframes zx-move-42 {
  0% { background: var(--zx-sys-accent); }
  68.5% { background: var(--zx-win-hair); }
  100% { background: var(--zx-win-hair); }
}
@keyframes zx-move-43 {
  0% { box-shadow: 0 0 0 calc(2 * var(--u)) var(--zx-wash-strong); }
  68.5% { box-shadow: none; }
  100% { box-shadow: none; }
}
@keyframes zx-move-44 {
  0% { background: var(--zx-win-hair); }
  68.5% { background: var(--zx-sys-accent); }
  100% { background: var(--zx-sys-accent); }
}
@keyframes zx-move-45 {
  0% { box-shadow: none; }
  68.5% { box-shadow: 0 0 0 calc(2 * var(--u)) var(--zx-wash-strong); }
  100% { box-shadow: 0 0 0 calc(2 * var(--u)) var(--zx-wash-strong); }
}
@keyframes zx-move-46 {
  0% { --on: 1; }
  21% { --on: 0; }
  100% { --on: 0; }
}
@keyframes zx-move-47 {
  0% { --on: 0; }
  21% { --on: 1; }
  35% { --on: 0; }
  100% { --on: 0; }
}
@keyframes zx-move-48 {
  0% { --on: 0; }
  35% { --on: 1; }
  50% { --on: 0; }
  100% { --on: 0; }
}
@keyframes zx-move-49 {
  0% { --on: 0; }
  50% { --on: 1; }
  61% { --on: 0; }
  100% { --on: 0; }
}
@keyframes zx-move-50 {
  0% { --on: 0; }
  61% { --on: 1; }
  100% { --on: 1; }
}

/* ---- favorites ---- */
.zx__stage--favorites .zx__fade { opacity: 0; }
.zx__stage--favorites .zx__cursor { transform: translate(calc(72 * var(--u)), calc(157 * var(--u))); opacity: 1; }
.zx__stage--favorites .zx__cursor-arrow { transform: none; }
.zx__stage--favorites .zx__wpane--l .la .r1 { background: var(--b); color: var(--zx-win-ink); }
.zx__stage--favorites .zx__wpane--l .la .r4 { background: var(--b); color: var(--zx-win-ink); }
.zx__stage--favorites .zx__wpane--l .la .r1 .zx__wname { opacity: 1; }
.zx__stage--favorites .zx__wpane--l .la .r4 .zx__wname { opacity: 1; }
.zx__stage--favorites .zx__ghost.g1 { opacity: 0; visibility: hidden; }
.zx__stage--favorites .zx__ghost.g2 { opacity: 0; visibility: hidden; }
.zx__stage--favorites .zx__ghost.g3 { opacity: 0; visibility: hidden; }
.zx__stage--favorites .zx__badge { opacity: 0; visibility: hidden; }
.zx__stage--favorites .zx__wfavs { box-shadow: none; background: transparent; }
.zx__stage--favorites .zx__wdest.f3 { height: calc(26 * var(--u)); background: var(--zx-wash); }
.zx__stage--favorites .zx__wdest.f5 { opacity: 1; transform: translateY(calc(-26 * var(--u))); }
.zx__stage--favorites .zx__wdest.f4 { transform: translateY(calc(26 * var(--u))); }
.zx__stage--favorites .zx__wdest.f2 { background: transparent; }
.zx__stage--favorites .zx__wpane--l .lb { opacity: 1; visibility: visible; }
.zx__stage--favorites .zx__wpane--l .pb { opacity: 1; visibility: visible; }
.zx__stage--favorites .zx__wpane--l .cb { opacity: 1; visibility: visible; }
.zx__stage--favorites .zx__wpane--l .zx__wdot { background: var(--zx-sys-accent); }
.zx__stage--favorites .zx__wpane--l .zx__wfield { box-shadow: 0 0 0 calc(2 * var(--u)) var(--zx-wash-strong); }
@media (prefers-reduced-motion: no-preference) {
  .zx__stage--favorites .zx__fade { animation: zx-favorites-0 18s linear infinite; }
  .zx__stage--favorites .zx__cursor { animation: zx-favorites-1 18s ease-in-out infinite, zx-favorites-2 18s step-end infinite; }
  .zx__stage--favorites .zx__cursor-arrow { animation: zx-favorites-3 18s step-end infinite; }
  .zx__stage--favorites .zx__wpane--l .la .r1 { animation: zx-favorites-4 18s step-end infinite, zx-favorites-5 18s step-end infinite; }
  .zx__stage--favorites .zx__wpane--l .la .r4 { animation: zx-favorites-6 18s step-end infinite, zx-favorites-7 18s step-end infinite; }
  .zx__stage--favorites .zx__wpane--l .la .r1 .zx__wname { animation: zx-favorites-8 18s step-end infinite; }
  .zx__stage--favorites .zx__wpane--l .la .r4 .zx__wname { animation: zx-favorites-9 18s step-end infinite; }
  .zx__stage--favorites .zx__ghost.g1 { animation: zx-favorites-10 18s step-end infinite, zx-favorites-11 18s step-end infinite; }
  .zx__stage--favorites .zx__ghost.g2 { animation: zx-favorites-12 18s step-end infinite, zx-favorites-13 18s step-end infinite; }
  .zx__stage--favorites .zx__ghost.g3 { animation: zx-favorites-14 18s step-end infinite, zx-favorites-15 18s step-end infinite; }
  .zx__stage--favorites .zx__badge { animation: zx-favorites-16 18s step-end infinite, zx-favorites-17 18s step-end infinite; }
  .zx__stage--favorites .zx__wfavs { animation: zx-favorites-18 18s step-end infinite, zx-favorites-19 18s step-end infinite; }
  .zx__stage--favorites .zx__wdest.f3 { animation: zx-favorites-20 18s linear infinite, zx-favorites-25 18s step-end infinite; }
  .zx__stage--favorites .zx__wdest.f5 { animation: zx-favorites-21 18s step-end infinite, zx-favorites-22 18s linear infinite; }
  .zx__stage--favorites .zx__wdest.f4 { animation: zx-favorites-23 18s linear infinite; }
  .zx__stage--favorites .zx__wdest.f2 { animation: zx-favorites-24 18s step-end infinite; }
  .zx__stage--favorites .zx__wpane--l .lb { animation: zx-favorites-26 18s step-end infinite, zx-favorites-27 18s step-end infinite; }
  .zx__stage--favorites .zx__wpane--l .pb { animation: zx-favorites-28 18s step-end infinite, zx-favorites-29 18s step-end infinite; }
  .zx__stage--favorites .zx__wpane--l .cb { animation: zx-favorites-30 18s step-end infinite, zx-favorites-31 18s step-end infinite; }
  .zx__stage--favorites .zx__wpane--l .zx__wdot { animation: zx-favorites-32 18s step-end infinite; }
  .zx__stage--favorites .zx__wpane--l .zx__wfield { animation: zx-favorites-33 18s step-end infinite; }
  .zx__flow--favorites .zx__steps .s0 { animation: zx-favorites-34 18s step-end infinite; }
  .zx__flow--favorites .zx__steps .s1 { animation: zx-favorites-35 18s step-end infinite; }
  .zx__flow--favorites .zx__steps .s2 { animation: zx-favorites-36 18s step-end infinite; }
  .zx__flow--favorites .zx__steps .s3 { animation: zx-favorites-37 18s step-end infinite; }
  .zx__flow--favorites .zx__steps .s4 { animation: zx-favorites-38 18s step-end infinite; }
}
@keyframes zx-favorites-0 {
  0% { opacity: 1; }
  3% { opacity: 0; }
  94% { opacity: 0; }
  98.5% { opacity: 1; }
  100% { opacity: 1; }
}
@keyframes zx-favorites-1 {
  0% { transform: translate(calc(610 * var(--u)), calc(400 * var(--u))); }
  4% { transform: translate(calc(610 * var(--u)), calc(400 * var(--u))); }
  9% { transform: translate(calc(240 * var(--u)), calc(127 * var(--u))); }
  12% { transform: translate(calc(240 * var(--u)), calc(127 * var(--u))); }
  22% { transform: translate(calc(72 * var(--u)), calc(153 * var(--u))); }
  27% { transform: translate(calc(72 * var(--u)), calc(153 * var(--u))); }
  35% { transform: translate(calc(240 * var(--u)), calc(193 * var(--u))); }
  38% { transform: translate(calc(240 * var(--u)), calc(193 * var(--u))); }
  45% { transform: translate(calc(72 * var(--u)), calc(209 * var(--u))); }
  49% { transform: translate(calc(72 * var(--u)), calc(209 * var(--u))); }
  54% { transform: translate(calc(72 * var(--u)), calc(209 * var(--u))); }
  59% { transform: translate(calc(72 * var(--u)), calc(183 * var(--u))); }
  62% { transform: translate(calc(72 * var(--u)), calc(183 * var(--u))); }
  68% { transform: translate(calc(72 * var(--u)), calc(157 * var(--u))); }
  100% { transform: translate(calc(72 * var(--u)), calc(157 * var(--u))); }
}
@keyframes zx-favorites-2 {
  0% { opacity: 0; }
  3% { opacity: 1; }
  94% { opacity: 1; }
  97% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes zx-favorites-3 {
  0% { transform: none; }
  9.5% { transform: scale(0.8); }
  10.4% { transform: none; }
  12% { transform: scale(0.8); }
  12.9% { transform: none; }
  35.5% { transform: scale(0.8); }
  36.4% { transform: none; }
  38% { transform: scale(0.8); }
  38.9% { transform: none; }
  54% { transform: scale(0.8); }
  54.9% { transform: none; }
  68.5% { transform: scale(0.8); }
  69.4% { transform: none; }
  100% { transform: none; }
}
@keyframes zx-favorites-4 {
  0% { background: var(--b); }
  9.5% { background: var(--zx-sel); }
  35.5% { background: var(--b); }
  100% { background: var(--b); }
}
@keyframes zx-favorites-5 {
  0% { color: var(--zx-win-ink); }
  9.5% { color: #fff; }
  35.5% { color: var(--zx-win-ink); }
  100% { color: var(--zx-win-ink); }
}
@keyframes zx-favorites-6 {
  0% { background: var(--b); }
  35.5% { background: var(--zx-sel); }
  68.5% { background: var(--b); }
  100% { background: var(--b); }
}
@keyframes zx-favorites-7 {
  0% { color: var(--zx-win-ink); }
  35.5% { color: #fff; }
  68.5% { color: var(--zx-win-ink); }
  100% { color: var(--zx-win-ink); }
}
@keyframes zx-favorites-8 {
  0% { opacity: 1; }
  12% { opacity: 0.45; }
  27% { opacity: 1; }
  100% { opacity: 1; }
}
@keyframes zx-favorites-9 {
  0% { opacity: 1; }
  38% { opacity: 0.45; }
  49% { opacity: 1; }
  100% { opacity: 1; }
}
@keyframes zx-favorites-10 {
  0% { opacity: 0; }
  12% { opacity: 1; }
  27% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes zx-favorites-11 {
  0% { visibility: hidden; }
  12% { visibility: visible; }
  27% { visibility: hidden; }
  100% { visibility: hidden; }
}
@keyframes zx-favorites-12 {
  0% { opacity: 0; }
  38% { opacity: 1; }
  49% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes zx-favorites-13 {
  0% { visibility: hidden; }
  38% { visibility: visible; }
  49% { visibility: hidden; }
  100% { visibility: hidden; }
}
@keyframes zx-favorites-14 {
  0% { opacity: 0; }
  54% { opacity: 1; }
  62% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes zx-favorites-15 {
  0% { visibility: hidden; }
  54% { visibility: visible; }
  62% { visibility: hidden; }
  100% { visibility: hidden; }
}
@keyframes zx-favorites-16 {
  0% { opacity: 0; }
  20% { opacity: 1; }
  27% { opacity: 0; }
  43% { opacity: 1; }
  49% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes zx-favorites-17 {
  0% { visibility: hidden; }
  20% { visibility: visible; }
  27% { visibility: hidden; }
  43% { visibility: visible; }
  49% { visibility: hidden; }
  100% { visibility: hidden; }
}
@keyframes zx-favorites-18 {
  0% { box-shadow: none; }
  20% { box-shadow: inset 0 0 0 calc(2 * var(--u)) var(--zx-sys-accent); }
  27% { box-shadow: none; }
  43% { box-shadow: inset 0 0 0 calc(2 * var(--u)) var(--zx-sys-accent); }
  49% { box-shadow: none; }
  100% { box-shadow: none; }
}
@keyframes zx-favorites-19 {
  0% { background: transparent; }
  20% { background: var(--zx-wash); }
  27% { background: transparent; }
  43% { background: var(--zx-wash); }
  49% { background: transparent; }
  100% { background: transparent; }
}
@keyframes zx-favorites-20 {
  0% { height: calc(0 * var(--u)); }
  27% { height: calc(0 * var(--u)); }
  29% { height: calc(26 * var(--u)); }
  100% { height: calc(26 * var(--u)); }
}
@keyframes zx-favorites-25 {
  0% { background: transparent; }
  68.5% { background: var(--zx-wash); }
  100% { background: var(--zx-wash); }
}
@keyframes zx-favorites-21 {
  0% { opacity: 1; }
  54% { opacity: 0.4; }
  62% { opacity: 1; }
  100% { opacity: 1; }
}
@keyframes zx-favorites-22 {
  0% { transform: none; }
  58% { transform: none; }
  59% { transform: translateY(calc(-26 * var(--u))); }
  100% { transform: translateY(calc(-26 * var(--u))); }
}
@keyframes zx-favorites-23 {
  0% { transform: none; }
  58% { transform: none; }
  59% { transform: translateY(calc(26 * var(--u))); }
  100% { transform: translateY(calc(26 * var(--u))); }
}
@keyframes zx-favorites-24 {
  0% { background: var(--zx-wash); }
  68.5% { background: transparent; }
  100% { background: transparent; }
}
@keyframes zx-favorites-26 {
  0% { opacity: 0; }
  68.5% { opacity: 1; }
  100% { opacity: 1; }
}
@keyframes zx-favorites-27 {
  0% { visibility: hidden; }
  68.5% { visibility: visible; }
  100% { visibility: visible; }
}
@keyframes zx-favorites-28 {
  0% { opacity: 0; }
  68.5% { opacity: 1; }
  100% { opacity: 1; }
}
@keyframes zx-favorites-29 {
  0% { visibility: hidden; }
  68.5% { visibility: visible; }
  100% { visibility: visible; }
}
@keyframes zx-favorites-30 {
  0% { opacity: 0; }
  68.5% { opacity: 1; }
  100% { opacity: 1; }
}
@keyframes zx-favorites-31 {
  0% { visibility: hidden; }
  68.5% { visibility: visible; }
  100% { visibility: visible; }
}
@keyframes zx-favorites-32 {
  0% { background: var(--zx-sys-accent); }
  100% { background: var(--zx-sys-accent); }
}
@keyframes zx-favorites-33 {
  0% { box-shadow: 0 0 0 calc(2 * var(--u)) var(--zx-wash-strong); }
  100% { box-shadow: 0 0 0 calc(2 * var(--u)) var(--zx-wash-strong); }
}
@keyframes zx-favorites-34 {
  0% { --on: 1; }
  12% { --on: 0; }
  100% { --on: 0; }
}
@keyframes zx-favorites-35 {
  0% { --on: 0; }
  12% { --on: 1; }
  30% { --on: 0; }
  100% { --on: 0; }
}
@keyframes zx-favorites-36 {
  0% { --on: 0; }
  30% { --on: 1; }
  50% { --on: 0; }
  100% { --on: 0; }
}
@keyframes zx-favorites-37 {
  0% { --on: 0; }
  50% { --on: 1; }
  63% { --on: 0; }
  100% { --on: 0; }
}
@keyframes zx-favorites-38 {
  0% { --on: 0; }
  63% { --on: 1; }
  100% { --on: 1; }
}