/* The hero's company on the Zedstar page (assets/zedstar/dash-site.js): Acme Corp.'s processing site and its operations
   system, "Site operations", as three people see it when they sign in. Drawn to DX Sidekick's finish in its Mission look:
   deep space and the red, white and blue slabs as the ground, painted glass panes over it, a floating sidebar, pill
   controls, Geist for the interface, Geist Mono for codes and times, Newsreader for titles and figures.
   One root, .zx, 1600 by 1000 design pixels scaled to its host. The panes are placed by transform and shown through a
   clip, so a change of person moves and resizes them without laying anything out again. No backdrop-filter: the glass
   is painted (the frost each pane would show is computed from where it stands). Everything is scoped under .zx. */
.zx {
  --zx-ground: #030509;
  --zx-glass: #0a0f1a;
  --zx-menu: #0c101a;
  --zx-rim: rgba(255, 255, 255, .08);
  --zx-light: rgba(255, 255, 255, .1);
  --zx-shadow: 0 30px 70px -30px rgba(0, 0, 0, .85), 0 2px 8px rgba(0, 0, 0, .3);
  --zx-control: rgba(255, 255, 255, .05);
  --zx-control-hover: rgba(255, 255, 255, .1);
  --zx-control-line: rgba(255, 255, 255, .1);
  --zx-control-solid: rgba(12, 17, 29, .66);
  --zx-field: rgba(255, 255, 255, .04);
  --zx-field-line: rgba(255, 255, 255, .14);
  --zx-fg: #eef2f8;
  --zx-fg2: #b3bdcf;
  --zx-fg3: #8795ae;
  --zx-line: rgba(255, 255, 255, .07);
  --zx-line-strong: rgba(255, 255, 255, .14);
  --zx-accent: #e04a5c;
  --zx-accent-text: #ff8b98;
  --zx-accent-soft: rgba(224, 74, 92, .16);
  --zx-ok: #9fb8d8;
  --zx-ok-soft: rgba(159, 184, 216, .14);
  --zx-ring: #9fb8d8;
  --zx-btn: #c9384c;
  --zx-btn-hover: #d04157;
  --zx-btn-press: #b32a44;
  --zx-edge: linear-gradient(90deg, transparent 4%, rgba(224, 74, 92, .85) 26%, rgba(255, 255, 255, .92) 50%, rgba(111, 140, 181, .9) 74%, transparent 96%);
  --zx-sans: Geist, ui-sans-serif, system-ui, -apple-system, sans-serif;
  --zx-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --zx-serif: Newsreader, ui-serif, Georgia, serif;
  position: absolute; left: 0; top: 0; width: 1600px; height: 1000px; overflow: hidden; transform-origin: 0 0;
  background: var(--zx-ground); color: var(--zx-fg);
  font: 400 14px/1.5 var(--zx-sans); letter-spacing: normal; text-align: left; text-transform: none;
  font-feature-settings: "ss01", "cv11"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  contain: strict; user-select: none; pointer-events: none;
}
.zx * { box-sizing: border-box; }
.zx :where(div, span, p, b, i, em, small, code, kbd, time, h3, ul, li, img) { margin: 0; padding: 0; border: 0; font: inherit; font-style: normal; color: inherit; background: none; list-style: none; text-decoration: none; }
/* (the site's own svg rule strokes every shape) */
.zx svg { display: block; overflow: visible; fill: none; stroke: none; flex: none; }
.zx .zx-i { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.zx .zx-i.is-2 { stroke-width: 2; }

/* the ground: Mission's red, white and blue slabs, drawn once */
.zx-gd { position: absolute; inset: 0; background: var(--zx-ground) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1920' height='1080' viewBox='0 0 1920 1080' preserveAspectRatio='xMaxYMin slice'%3E%3Cdefs%3E%3Cfilter id='glow' filterUnits='userSpaceOnUse' x='-400' y='-400' width='2720' height='1880'%3E%3CfeGaussianBlur stdDeviation='34'/%3E%3C/filter%3E%3Cfilter id='spill' filterUnits='userSpaceOnUse' x='-400' y='-400' width='2720' height='1880'%3E%3CfeGaussianBlur stdDeviation='90'/%3E%3C/filter%3E%3CradialGradient id='wash' gradientUnits='userSpaceOnUse' cx='1760' cy='360' r='980'%3E%3Cstop offset='0' stop-color='%231b3f96' stop-opacity='0.42'/%3E%3Cstop offset='0.55' stop-color='%2310275e' stop-opacity='0.28'/%3E%3Cstop offset='1' stop-color='%23030509' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='ember' gradientUnits='userSpaceOnUse' cx='1150' cy='640' r='520'%3E%3Cstop offset='0' stop-color='%23e0364f' stop-opacity='0.16'/%3E%3Cstop offset='1' stop-color='%23e0364f' stop-opacity='0'/%3E%3C/radialGradient%3E%3ClinearGradient id='face0' gradientUnits='userSpaceOnUse' x1='0' y1='1080' x2='0' y2='0'%3E%3Cstop offset='0' stop-color='%23170409'/%3E%3Cstop offset='0.38' stop-color='%235a1422'/%3E%3Cstop offset='0.7' stop-color='%238a2336'/%3E%3Cstop offset='1' stop-color='%23a82e44'/%3E%3C/linearGradient%3E%3ClinearGradient id='face1' gradientUnits='userSpaceOnUse' x1='0' y1='1080' x2='0' y2='0'%3E%3Cstop offset='0' stop-color='%23101319'/%3E%3Cstop offset='0.38' stop-color='%233c4453'/%3E%3Cstop offset='0.7' stop-color='%235e6879'/%3E%3Cstop offset='1' stop-color='%237c8798'/%3E%3C/linearGradient%3E%3ClinearGradient id='face2' gradientUnits='userSpaceOnUse' x1='0' y1='1080' x2='0' y2='0'%3E%3Cstop offset='0' stop-color='%23030b1f'/%3E%3Cstop offset='0.38' stop-color='%230d2c70'/%3E%3Cstop offset='0.7' stop-color='%2317469e'/%3E%3Cstop offset='1' stop-color='%232759bd'/%3E%3C/linearGradient%3E%3ClinearGradient id='face3' gradientUnits='userSpaceOnUse' x1='0' y1='1080' x2='0' y2='0'%3E%3Cstop offset='0' stop-color='%23020816'/%3E%3Cstop offset='0.38' stop-color='%23092154'/%3E%3Cstop offset='0.7' stop-color='%23123781'/%3E%3Cstop offset='1' stop-color='%231d4a9e'/%3E%3C/linearGradient%3E%3ClinearGradient id='face4' gradientUnits='userSpaceOnUse' x1='0' y1='1080' x2='0' y2='0'%3E%3Cstop offset='0' stop-color='%23010612'/%3E%3Cstop offset='0.38' stop-color='%2306183c'/%3E%3Cstop offset='0.7' stop-color='%230b275c'/%3E%3Cstop offset='1' stop-color='%23153b7c'/%3E%3C/linearGradient%3E%3ClinearGradient id='faceDim' gradientUnits='userSpaceOnUse' x1='0' y1='1080' x2='0' y2='0'%3E%3Cstop offset='0' stop-color='%2307090e'/%3E%3Cstop offset='0.6' stop-color='%23121822'/%3E%3Cstop offset='1' stop-color='%231b2330'/%3E%3C/linearGradient%3E%3ClinearGradient id='floor' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0.5' stop-color='%23030509' stop-opacity='0'/%3E%3Cstop offset='0.78' stop-color='%23030509' stop-opacity='0.78'/%3E%3Cstop offset='0.94' stop-color='%23030509'/%3E%3C/linearGradient%3E%3ClinearGradient id='port' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%23030509' stop-opacity='0.9'/%3E%3Cstop offset='0.42' stop-color='%23030509' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='1920' height='1080' fill='%23030509'/%3E%3Crect width='1920' height='1080' fill='url(%23wash)'/%3E%3Crect width='1920' height='1080' fill='url(%23ember)'/%3E%3Cg opacity='0.2' stroke-linejoin='bevel' fill='none'%3E%3Cpath d='M-371 1269 L-87.8 797 L-68.8 607 L386 -151' stroke='%2305070b' stroke-width='62'/%3E%3Cpath d='M-386 1260 L-102.8 788 L-83.8 598 L371 -160' stroke='%232a3446' stroke-opacity='0.55' stroke-width='62'/%3E%3Cpath d='M-383.8 1260 L-100.6 788 L-81.6 598 L373.2 -160' stroke='url(%23faceDim)' stroke-width='59'/%3E%3C/g%3E%3Cg opacity='0.3' stroke-linejoin='bevel' fill='none'%3E%3Cpath d='M-175 1269 L131 759 L150 569 L582 -151' stroke='%2305070b' stroke-width='62'/%3E%3Cpath d='M-190 1260 L116 750 L135 560 L567 -160' stroke='%232a3446' stroke-opacity='0.55' stroke-width='62'/%3E%3Cpath d='M-187.8 1260 L118.2 750 L137.2 560 L569.2 -160' stroke='url(%23faceDim)' stroke-width='59'/%3E%3C/g%3E%3Cg opacity='0.4' stroke-linejoin='bevel' fill='none'%3E%3Cpath d='M21 1269 L349.8 721 L368.8 531 L778 -151' stroke='%2305070b' stroke-width='62'/%3E%3Cpath d='M6 1260 L334.8 712 L353.8 522 L763 -160' stroke='%232a3446' stroke-opacity='0.55' stroke-width='62'/%3E%3Cpath d='M8.2 1260 L337 712 L356 522 L765.2 -160' stroke='url(%23faceDim)' stroke-width='59'/%3E%3C/g%3E%3Cg opacity='0.6' stroke-linejoin='bevel' fill='none'%3E%3Cpath d='M217 1269 L568.6 683 L587.6 493 L974 -151' stroke='%2305070b' stroke-width='62'/%3E%3Cpath d='M202 1260 L553.6 674 L572.6 484 L959 -160' stroke='%232a3446' stroke-opacity='0.55' stroke-width='62'/%3E%3Cpath d='M204.2 1260 L555.8 674 L574.8 484 L961.2 -160' stroke='url(%23faceDim)' stroke-width='59'/%3E%3C/g%3E%3Cg opacity='0.7' stroke-linejoin='bevel' fill='none'%3E%3Cpath d='M413 1269 L787.4 645 L806.4 455 L1170 -151' stroke='%2305070b' stroke-width='62'/%3E%3Cpath d='M398 1260 L772.4 636 L791.4 446 L1155 -160' stroke='%232a3446' stroke-opacity='0.55' stroke-width='62'/%3E%3Cpath d='M400.2 1260 L774.6 636 L793.6 446 L1157.2 -160' stroke='url(%23faceDim)' stroke-width='59'/%3E%3C/g%3E%3Cg opacity='0.9' stroke-linejoin='bevel' fill='none'%3E%3Cpath d='M609 1269 L1006.2 607 L1025.2 417 L1366 -151' stroke='%2305070b' stroke-width='62'/%3E%3Cpath d='M594 1260 L991.2 598 L1010.2 408 L1351 -160' stroke='%232a3446' stroke-opacity='0.55' stroke-width='62'/%3E%3Cpath d='M596.2 1260 L993.4 598 L1012.4 408 L1353.2 -160' stroke='url(%23faceDim)' stroke-width='59'/%3E%3C/g%3E%3Cg filter='url(%23spill)' fill='none' stroke-linejoin='round'%3E%3Cpath d='M790 1260 L1210 560 L1229 370 L1547 -160' stroke='%23d8354d' stroke-opacity='0.3' stroke-width='198.4'/%3E%3Cpath d='M986 1260 L1428.8 522 L1447.8 332 L1743 -160' stroke='%23c9d4e6' stroke-opacity='0' stroke-width='198.4'/%3E%3Cpath d='M1182 1260 L1647.6 484 L1666.6 294 L1939 -160' stroke='%232a66e8' stroke-opacity='0.3' stroke-width='198.4'/%3E%3Cpath d='M1378 1260 L1866.4 446 L1885.4 256 L2135 -160' stroke='%232a66e8' stroke-opacity='0.2' stroke-width='198.4'/%3E%3Cpath d='M1574 1260 L2085.2 408 L2104.2 218 L2331 -160' stroke='%232a66e8' stroke-opacity='0.1' stroke-width='198.4'/%3E%3C/g%3E%3Cg filter='url(%23glow)' fill='none' stroke-linejoin='round'%3E%3Cpath d='M790 1260 L1210 560 L1229 370 L1547 -160' stroke='%23d8354d' stroke-opacity='0.3' stroke-width='93.0'/%3E%3Cpath d='M986 1260 L1428.8 522 L1447.8 332 L1743 -160' stroke='%23c9d4e6' stroke-opacity='0.1' stroke-width='93.0'/%3E%3Cpath d='M1182 1260 L1647.6 484 L1666.6 294 L1939 -160' stroke='%232a66e8' stroke-opacity='0.3' stroke-width='93.0'/%3E%3Cpath d='M1378 1260 L1866.4 446 L1885.4 256 L2135 -160' stroke='%232a66e8' stroke-opacity='0.2' stroke-width='93.0'/%3E%3Cpath d='M1574 1260 L2085.2 408 L2104.2 218 L2331 -160' stroke='%232a66e8' stroke-opacity='0.1' stroke-width='93.0'/%3E%3C/g%3E%3Cg stroke-linejoin='bevel' fill='none'%3E%3Cpath d='M806 1270 L1226 570 L1245 380 L1563 -150' stroke='%230e0205' stroke-width='62'/%3E%3Cpath d='M790 1260 L1210 560 L1229 370 L1547 -160' stroke='%23c9596b' stroke-width='62'/%3E%3Cpath d='M792.6 1260 L1212.6 560 L1231.6 370 L1549.6 -160' stroke='url(%23face0)' stroke-width='59'/%3E%3C/g%3E%3Cg stroke-linejoin='bevel' fill='none'%3E%3Cpath d='M1002 1270 L1444.8 532 L1463.8 342 L1759 -150' stroke='%230b0d12' stroke-width='62'/%3E%3Cpath d='M986 1260 L1428.8 522 L1447.8 332 L1743 -160' stroke='%23aab4c4' stroke-width='62'/%3E%3Cpath d='M988.6 1260 L1431.4 522 L1450.4 332 L1745.6 -160' stroke='url(%23face1)' stroke-width='59'/%3E%3C/g%3E%3Cg stroke-linejoin='bevel' fill='none'%3E%3Cpath d='M1198 1270 L1663.6 494 L1682.6 304 L1955 -150' stroke='%23020715' stroke-width='62'/%3E%3Cpath d='M1182 1260 L1647.6 484 L1666.6 294 L1939 -160' stroke='%235f8ad8' stroke-width='62'/%3E%3Cpath d='M1184.6 1260 L1650.2 484 L1669.2 294 L1941.6 -160' stroke='url(%23face2)' stroke-width='59'/%3E%3C/g%3E%3Cg stroke-linejoin='bevel' fill='none'%3E%3Cpath d='M1394 1270 L1882.4 456 L1901.4 266 L2151 -150' stroke='%23010511' stroke-width='62'/%3E%3Cpath d='M1378 1260 L1866.4 446 L1885.4 256 L2135 -160' stroke='%234a70b8' stroke-width='62'/%3E%3Cpath d='M1380.6 1260 L1869 446 L1888 256 L2137.6 -160' stroke='url(%23face3)' stroke-width='59'/%3E%3C/g%3E%3Cg stroke-linejoin='bevel' fill='none'%3E%3Cpath d='M1590 1270 L2101.2 418 L2120.2 228 L2347 -150' stroke='%2301040c' stroke-width='62'/%3E%3Cpath d='M1574 1260 L2085.2 408 L2104.2 218 L2331 -160' stroke='%233a5a96' stroke-width='62'/%3E%3Cpath d='M1576.6 1260 L2087.8 408 L2106.8 218 L2333.6 -160' stroke='url(%23face4)' stroke-width='59'/%3E%3C/g%3E%3Crect width='1920' height='1080' fill='url(%23port)'/%3E%3Crect width='1920' height='1080' fill='url(%23floor)'/%3E%3C/svg%3E") right top / cover no-repeat; }

/* ---- glass ---------------------------------------------------------------------------------------------------- */
/* the shared finish of the sidebar, menus, the command menu and toasts: a painted tint, a 1px rim, a highlight inside
   the top edge, the ribbon of light along the top, and a deep soft shadow */
.zx-sb, .zx-menu, .zx-pal, .zx-toast { position: absolute; background: var(--zx-glass); border: 1px solid var(--zx-rim); box-shadow: inset 0 1px 0 var(--zx-light), var(--zx-shadow); }
.zx-sb::after, .zx-menu::after, .zx-pal::after { content: ""; position: absolute; top: -1px; left: 28px; right: 28px; height: 1px; background: var(--zx-edge); pointer-events: none; }
.zx-menu, .zx-pal, .zx-toast { background: var(--zx-menu); }

/* a pane: a box as large as the pane ever gets, placed by its transform and shown through its clip at this person's
   size; the rim and the glass are two clipped layers, the shadow a box of its own */
.zx-p { position: absolute; left: 0; top: 0; will-change: transform; }
.zx-p.is-moving { z-index: 3; }
.zx-sh { position: absolute; left: 0; top: 0; border-radius: 22px; box-shadow: var(--zx-shadow); transform-origin: 0 0; }
.zx-rim, .zx-fill, .zx-gl { position: absolute; left: 0; top: 0; }
.zx-rim { background: var(--zx-rim); }
.zx-fill { background: var(--zx-glass); }
/* the pane's content has a layer of its own: a move, a resize or a change of frost never repaints it */
.zx-gl { overflow: hidden; will-change: transform; }
.zx-v { will-change: transform, opacity; }
.zx-fr { position: absolute; left: 0; top: 0; }
.zx-hl { position: absolute; left: 0; right: 0; top: 1px; height: 1px; background: var(--zx-light); }
.zx-eg { position: absolute; left: 28px; top: 0; height: 1px; background: var(--zx-edge); transform-origin: 0 0; }
.zx-v { position: absolute; left: 0; top: 0; padding: 28px; }

/* ---- type ------------------------------------------------------------------------------------------------------ */
.zx-mk { display: flex; align-items: center; gap: 10px; font: 400 15px/1 var(--zx-serif); color: var(--zx-fg2); white-space: nowrap; }
.zx-mk::before { content: ""; width: 3px; height: 15px; border-radius: 2px; background: var(--zx-accent); flex: none; }
.zx-mono { font-family: var(--zx-mono); }

/* ---- the sidebar ----------------------------------------------------------------------------------------------- */
.zx-sb { left: 12px; top: 12px; width: 264px; height: 976px; padding: 12px; border-radius: 22px; }
.zx-sb-hd { display: flex; align-items: center; gap: 12px; height: 36px; }
.zx-tg { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 999px; color: var(--zx-fg2); flex: none; }
.zx-wm { display: block; width: 78px; height: auto; flex: none; }
.zx-vr { width: 1px; height: 16px; margin-right: -2px; background: var(--zx-line-strong); flex: none; }
.zx-sys { font-size: 13px; font-weight: 500; letter-spacing: -.01em; color: var(--zx-fg2); white-space: nowrap; }
.zx-org { position: relative; margin: 22px 10px 18px; }
.zx-org-l { display: block; font-size: 12px; line-height: 16.5px; letter-spacing: .01em; color: var(--zx-fg3); }
.zx-org-n { display: block; margin-top: 8px; font: 400 21px/24.15px var(--zx-serif); color: var(--zx-fg); }
.zx-org .zx-i { position: absolute; right: -2px; bottom: 4px; width: 16px; height: 16px; color: var(--zx-fg3); }
.zx-sch { position: relative; display: flex; align-items: center; gap: 10px; height: 38px; margin-top: 2px; padding: 0 8px 0 12px; border: 1px solid var(--zx-control-line); border-radius: 12px; background: var(--zx-control); font-size: 13.5px; color: var(--zx-fg3); }
.zx-sch > .zx-i { width: 16px; height: 16px; }
.zx-sch .zx-keys { margin-left: auto; }
.zx-focus { position: absolute; inset: -4px; border-radius: 15px; box-shadow: 0 0 0 2px var(--zx-ring); opacity: 0; }
.zx-keys { display: flex; gap: 4px; }
.zx-key { display: inline-grid; min-width: 22px; height: 22px; place-items: center; padding: 0 6px; border-radius: 6px; background: var(--zx-control); box-shadow: inset 0 0 0 1px var(--zx-control-line); font: 400 11px/1 var(--zx-mono); color: var(--zx-fg2); }
.zx-key .zx-i { width: 11px; height: 11px; stroke-width: 2; }

.zx-nav { position: relative; margin-top: 10px; height: 348px; }
.zx-nav-lit { position: absolute; left: 0; top: 0; width: 238px; height: 40px; border-radius: 12px; background: var(--zx-control); box-shadow: inset 0 0 0 1px var(--zx-control-line); }
.zx-nr { position: absolute; left: 0; width: 238px; height: 40px; }
.zx-nf { position: absolute; inset: 0; display: flex; align-items: center; gap: 12px; padding: 0 12px; font-size: 14px; line-height: 21px; color: var(--zx-fg2); white-space: nowrap; }
.zx-nf .zx-i { color: var(--zx-fg3); }
.zx-nr.is-on .zx-nf { color: var(--zx-fg); font-weight: 500; }
.zx-nr.is-on .zx-nf .zx-i { color: var(--zx-accent); }
.zx-cnt { position: absolute; right: 12px; top: 10px; display: grid; min-width: 20px; height: 20px; place-items: center; padding: 0 6px; border-radius: 999px; background: var(--zx-btn); font: 600 11px/1 var(--zx-mono); color: #fff; }

.zx-ags { position: relative; margin: 26px 0 0; height: 152px; }
.zx-ags-l { display: flex; justify-content: space-between; padding: 0 10px; font-size: 12px; line-height: 16.5px; letter-spacing: .01em; color: var(--zx-fg3); }
.zx-agg { position: absolute; left: 0; right: 0; top: 26px; }
.zx-ag { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 10px; font-size: 13.5px; color: var(--zx-fg2); white-space: nowrap; }
.zx-ag-st { position: relative; margin-left: auto; font-size: 12px; color: var(--zx-fg3); }
.zx-ag-st > span { display: block; text-align: right; }
.zx-ag-st > span + span { position: absolute; right: 0; top: 0; }
.zx-ag-st .is-wait { color: var(--zx-accent-text); }

/* an agent: a glyph in a disc; working, a soft ring that breathes out from it; waiting on a person, a crimson dot;
   done, a small check */
.zx-av { position: relative; display: grid; width: 24px; height: 24px; flex: none; place-items: center; border-radius: 999px; background: color-mix(in srgb, var(--zx-ok) 16%, transparent); box-shadow: inset 0 0 0 1px var(--zx-control-line); color: var(--zx-ok); }
.zx-av > .zx-i { width: 13px; height: 13px; stroke-width: 1.8; }
.zx-av.is-lg { width: 30px; height: 30px; }
.zx-av.is-lg > .zx-i { width: 15px; height: 15px; }
.zx-av.is-person { background: color-mix(in srgb, var(--zx-tint, #6f8cb5) 24%, var(--zx-control)); color: var(--zx-fg); font-size: 11px; font-weight: 600; letter-spacing: .01em; }
.zx-ring { position: absolute; inset: -3px; border-radius: 999px; box-shadow: 0 0 0 1.5px var(--zx-ok); opacity: 0; }
.zx-dot { position: absolute; right: -2px; bottom: -2px; width: 9px; height: 9px; border-radius: 999px; background: var(--zx-accent); box-shadow: 0 0 0 2px var(--zx-glass); opacity: 0; }
.zx-tick { position: absolute; right: -3px; bottom: -3px; display: grid; width: 12px; height: 12px; place-items: center; border-radius: 999px; background: var(--zx-ok); box-shadow: 0 0 0 2px var(--zx-glass); color: var(--zx-glass); opacity: 0; }
.zx-tick .zx-i { width: 8px; height: 8px; stroke-width: 3; }

.zx-ft { position: absolute; left: 12px; right: 12px; top: 866px; padding: 14px 10px 4px; border-top: 1px solid var(--zx-line); }
.zx-acct { position: relative; display: flex; align-items: center; gap: 12px; height: 53.5px; padding: 8px; border-radius: 14px; }
.zx-acct.is-open { background: var(--zx-control); }
.zx-acct > .zx-i { margin-left: auto; width: 16px; height: 16px; color: var(--zx-fg3); }
.zx-acf { position: absolute; left: 8px; top: 8px; display: flex; align-items: center; gap: 12px; }
.zx-acf .zx-av { width: 32px; height: 32px; font-size: 12px; }
.zx-acf b { display: block; font-size: 13px; line-height: 19.5px; font-weight: 500; white-space: nowrap; }
.zx-acf small { display: block; font-size: 12px; line-height: 18px; color: var(--zx-fg3); white-space: nowrap; }

/* ---- the page head --------------------------------------------------------------------------------------------- */
.zx-hd { position: absolute; left: 340px; top: 34px; width: 1188px; height: 126px; }
.zx-hf { position: absolute; inset: 0; }
.zx-tt { position: absolute; left: 0; top: 31px; font: 400 54px/57.24px var(--zx-serif); letter-spacing: -.014em; white-space: nowrap; }
.zx-ld { position: absolute; left: 0; top: 100.2px; font-size: 16px; line-height: 25.6px; color: var(--zx-fg2); white-space: nowrap; }
.zx-hf .zx-mk { position: absolute; left: 0; top: 0; }
.zx-acts { position: absolute; right: 0; bottom: 0; display: flex; align-items: center; gap: 12px; }
/* who else is on this page: initials in discs, stacked */
.zx-stack { display: flex; align-items: center; margin-right: 6px; padding-left: 8px; }
.zx-stack .zx-av { width: 34px; height: 34px; margin-left: -8px; background: color-mix(in srgb, var(--zx-tint, #56688a) 30%, #0b1019); box-shadow: 0 0 0 2px #06080d, inset 0 0 0 1px var(--zx-control-line); font-size: 11.5px; }
.zx-stack .zx-av.is-more { background: #10151f; color: var(--zx-fg2); font: 500 11.5px/1 var(--zx-sans); }
.zx-now { position: absolute; right: 0; top: 156px; display: flex; height: 32px; align-items: center; gap: 9px; padding: 0 14px 0 13px; border-radius: 999px; background: var(--zx-control-solid); box-shadow: inset 0 0 0 1px var(--zx-control-line); font-size: 13px; color: var(--zx-fg2); white-space: nowrap; }
.zx-now .zx-live { width: 7px; height: 7px; border-radius: 999px; background: var(--zx-ok); box-shadow: 0 0 0 3px var(--zx-ok-soft); }
.zx-now time { position: relative; display: inline-grid; min-width: 38px; font: 500 13px/1 var(--zx-mono); color: var(--zx-fg); }
.zx-now time > span { grid-area: 1 / 1; }
.zx-swap { position: relative; display: inline-grid; }
.zx-swap > span { grid-area: 1 / 1; white-space: nowrap; }

.zx-tabs { position: absolute; left: 340px; top: 187.8px; width: 760px; height: 36px; }
.zx-tab-lit { position: absolute; left: 0; top: 0; width: 120px; height: 36px; border-radius: 999px; background: var(--zx-control); box-shadow: inset 0 0 0 1px var(--zx-control-line); transform-origin: 0 0; }
.zx-tbf { position: absolute; left: 0; top: 0; display: flex; gap: 4px; }
.zx-tab { display: inline-flex; height: 36px; align-items: center; gap: 8px; padding: 0 16px; border-radius: 999px; font-size: 14px; color: var(--zx-fg2); white-space: nowrap; }
.zx-tab.is-on { color: var(--zx-fg); font-weight: 500; }
.zx-tab-n { font: 400 11px/1 var(--zx-mono); color: var(--zx-fg3); }

/* ---- controls -------------------------------------------------------------------------------------------------- */
.zx-btn { position: relative; display: inline-flex; height: 40px; align-items: center; justify-content: center; gap: 8px; padding: 0 18px; border: 1px solid transparent; border-radius: 999px; font-size: 14px; font-weight: 500; letter-spacing: -.005em; white-space: nowrap; }
.zx-btn .zx-i { width: 16px; height: 16px; }
.zx-btn.is-sm { height: 32px; padding: 0 14px; font-size: 13px; }
.zx-btn.is-p { background: var(--zx-btn); color: #fff; }
.zx-btn.is-p.is-hover { background: var(--zx-btn-hover); }
.zx-btn.is-p.is-press { background: var(--zx-btn-press); }
.zx-btn.is-s { background: var(--zx-control); border-color: var(--zx-control-line); color: var(--zx-fg); }
.zx-btn.is-s.is-hover { background: var(--zx-control-hover); }
.zx-hd .zx-btn.is-s { background: var(--zx-control-solid); }
.zx-btn.is-q { color: var(--zx-fg2); }
.zx-btn.is-q.is-hover { background: var(--zx-control); color: var(--zx-fg); }
.zx-btn .zx-chev { width: 14px; height: 14px; margin-right: -4px; color: var(--zx-fg3); }
.zx-ibtn { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 999px; color: var(--zx-fg3); }
.zx-ibtn .zx-i { width: 16px; height: 16px; }
.zx-ibtn.is-hover { background: var(--zx-control-hover); color: var(--zx-fg); }

.zx-bd { display: inline-flex; height: 24px; align-items: center; gap: 6px; padding: 0 10px; border-radius: 999px; background: var(--zx-control); box-shadow: inset 0 0 0 1px var(--zx-control-line); font-size: 12px; font-weight: 500; color: var(--zx-fg2); white-space: nowrap; }
.zx-bd::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: currentColor; flex: none; }
.zx-bd.is-ok { background: var(--zx-ok-soft); box-shadow: none; color: var(--zx-ok); }
.zx-bd.is-ac { background: var(--zx-accent-soft); box-shadow: none; color: var(--zx-accent-text); }
.zx-bd.is-plain::before { display: none; }

.zx-seg { position: relative; display: inline-flex; padding: 3px; border-radius: 999px; background: var(--zx-control); box-shadow: inset 0 0 0 1px var(--zx-control-line); }
.zx-seg-lit { position: absolute; left: 3px; top: 3px; width: 72px; height: 30px; border-radius: 999px; background: var(--zx-control-hover); box-shadow: 0 1px 2px rgba(10, 17, 32, .12), inset 0 0 0 1px var(--zx-control-line); }
.zx-sgb { position: relative; display: inline-flex; width: 72px; height: 30px; align-items: center; justify-content: center; border-radius: 999px; font-size: 13px; color: var(--zx-fg2); white-space: nowrap; }
.zx-sgb.is-on { color: var(--zx-fg); font-weight: 500; }

.zx-chip { display: inline-flex; height: 22px; align-items: center; gap: 5px; padding: 0 8px; border-radius: 999px; background: var(--zx-control); box-shadow: inset 0 0 0 1px var(--zx-control-line); font: 400 11.5px/1 var(--zx-mono); color: var(--zx-fg2); white-space: nowrap; vertical-align: 1px; }
.zx-chip .zx-i { width: 12px; height: 12px; color: var(--zx-fg3); }

.zx-prog { position: relative; height: 4px; overflow: hidden; border-radius: 999px; background: var(--zx-control-line); }
.zx-prog > i { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; border-radius: inherit; background: var(--zx-ok); transform-origin: 0 0; }
.zx-prog.is-ac > i { background: var(--zx-accent); }

.zx-check { position: relative; display: inline-grid; width: 18px; height: 18px; flex: none; place-items: center; border: 1px solid rgba(255, 255, 255, .26); border-radius: 6px; background: var(--zx-field); }
.zx-check > i { position: absolute; inset: -1px; display: grid; place-items: center; border-radius: 6px; background: var(--zx-btn); }
.zx-check > i .zx-i { width: 12px; height: 12px; stroke: #fff; stroke-width: 2.4; }
.zx-swl { display: inline-flex; align-items: center; gap: 8px; color: var(--zx-fg2); }
.zx-switch { position: relative; display: inline-block; width: 38px; height: 22px; flex: none; border-radius: 999px; background: rgba(255, 255, 255, .14); }
.zx-switch > b { position: absolute; inset: 0; border-radius: 999px; background: var(--zx-btn); }
.zx-switch > i { position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 999px; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); }

/* ---- a pane's head --------------------------------------------------------------------------------------------- */
.zx-ph { display: flex; min-height: 32px; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.zx-pt { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }
.zx-pt .zx-n { font: 400 15px/1 var(--zx-sans); color: var(--zx-fg3); letter-spacing: 0; }
.zx-meta { font-size: 13px; color: var(--zx-fg3); white-space: nowrap; }
.zx-ph-r { display: flex; align-items: center; gap: 10px; }

/* ---- the plant ------------------------------------------------------------------------------------------------- */
.zx-win { position: absolute; left: 28px; top: 74px; width: 670px; height: 298px; overflow: hidden; }
.zx-art { position: absolute; left: 0; top: 0; width: 1000px; height: 440px; transform-origin: 0 0; }
.zx-art .zx-u { fill: rgba(255, 255, 255, .035); stroke: rgba(238, 242, 248, .5); stroke-width: 1.5; stroke-linejoin: round; }
.zx-art .zx-ln { fill: none; stroke: rgba(238, 242, 248, .42); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.zx-art .zx-fa { fill: none; stroke: rgba(238, 242, 248, .14); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.zx-art .zx-bench { fill: rgba(255, 255, 255, .025); stroke: rgba(238, 242, 248, .28); stroke-width: 1.3; stroke-linejoin: round; }
.zx-art .zx-belt { fill: none; stroke: rgba(238, 242, 248, .14); stroke-width: 7; stroke-linecap: round; }
.zx-art .zx-flow { fill: none; stroke: var(--zx-ok); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 3 13; }
.zx-art .zx-liner { fill: none; stroke: rgba(159, 184, 216, .62); stroke-width: 9; stroke-dasharray: 1.6 6.4; }
.zx-art .zx-road { fill: none; stroke: rgba(238, 242, 248, .2); stroke-width: 1.2; stroke-dasharray: 4 5; }
.zx-art .zx-truck { fill: var(--zx-fg2); }
.zx-art .zx-lead { fill: none; stroke: rgba(238, 242, 248, .26); stroke-width: 1.2; stroke-dasharray: 1.5 4.5; stroke-linecap: round; }
.zx-art .zx-beacon { fill: var(--zx-accent); }
.zx-art .zx-hot { fill: var(--zx-accent); }
.zx-art .zx-hring { fill: none; stroke: var(--zx-accent); stroke-width: 2; }
/* the pulses grow by transform from their own center, their line keeping its width */
.zx .zx-hring, .zx .zx-halo { transform-box: fill-box; transform-origin: center; vector-effect: non-scaling-stroke; }
.zx-art .zx-mark { fill: none; stroke: var(--zx-ok); stroke-width: 1.8; stroke-dasharray: 4 4; }
.zx-art .zx-mark.is-ac { stroke: var(--zx-accent); }
.zx-art .zx-mfill { fill: var(--zx-accent); }

.zx-band { position: absolute; inset: 0; pointer-events: none; }
.zx-rd { position: absolute; top: 0; white-space: nowrap; }
.zx-rd small { display: block; font-size: 12px; line-height: 16px; color: var(--zx-fg3); }
.zx-rd b { display: block; margin-top: 2px; font: 400 21px/24px var(--zx-serif); letter-spacing: -.005em; color: var(--zx-fg); }
.zx-rd b .zx-swap > span { white-space: nowrap; }
.zx-bl { position: absolute; display: flex; align-items: baseline; gap: 6px; padding: 3px 8px; border-radius: 8px; background: rgba(10, 15, 26, .78); box-shadow: inset 0 0 0 1px var(--zx-line); font-size: 12px; color: var(--zx-fg3); white-space: nowrap; }
.zx-bl b { font: 500 12px/16px var(--zx-mono); color: var(--zx-fg); }
.zx-hottag { position: absolute; display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px 0 8px; border-radius: 999px; background: var(--zx-accent-soft); box-shadow: inset 0 0 0 1px rgba(224, 74, 92, .4); font: 500 12px/1 var(--zx-mono); color: var(--zx-accent-text); white-space: nowrap; }
.zx-hottag .zx-i { width: 13px; height: 13px; stroke-width: 2; }
.zx-wo { position: absolute; display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 999px; background: rgba(10, 15, 26, .86); box-shadow: inset 0 0 0 1px var(--zx-control-line); font: 400 11.5px/1 var(--zx-mono); color: var(--zx-fg2); white-space: nowrap; }
.zx-wo::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--zx-ok); }
.zx-wo.is-ac { background: rgba(40, 14, 24, .9); box-shadow: inset 0 0 0 1px rgba(224, 74, 92, .45); color: var(--zx-accent-text); }
.zx-wo.is-ac::before { background: var(--zx-accent); }

/* ---- charts ---------------------------------------------------------------------------------------------------- */
.zx-ch { position: absolute; }
.zx-ch svg { position: absolute; left: 0; top: 0; }
.zx-ch .zx-grid { stroke: var(--zx-line); stroke-width: 1; }
.zx-ch .zx-base { stroke: var(--zx-line-strong); stroke-width: 1; }
.zx-ch .zx-limit { stroke: var(--zx-accent); stroke-width: 1.3; stroke-dasharray: 5 5; opacity: .85; }
.zx-ch .zx-line { fill: none; stroke: var(--zx-fg); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.zx-ch .zx-area { fill: rgba(159, 184, 216, .08); }
.zx-ch .zx-cool { fill: none; stroke: var(--zx-ok); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.zx-ch .zx-nowpt { fill: var(--zx-accent); }
.zx-ch .zx-halo { fill: none; stroke: var(--zx-accent); stroke-width: 1.5; }
.zx-ch .zx-plan { fill: none; stroke: var(--zx-fg3); stroke-width: 1.3; stroke-dasharray: 6 5; }
.zx-ch .zx-last { fill: none; stroke: var(--zx-accent-text); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.zx-ch .zx-lastpt { fill: var(--zx-glass); stroke: var(--zx-accent-text); stroke-width: 1.8; }
.zx-ch .zx-bar { fill: rgba(159, 184, 216, .62); }
.zx-ch .zx-bar.is-today { fill: rgba(159, 184, 216, .22); stroke: rgba(159, 184, 216, .6); stroke-width: 1; stroke-dasharray: 3 3; }
.zx-ax { position: absolute; font: 400 11px/1 var(--zx-mono); color: var(--zx-fg3); white-space: nowrap; }
.zx-note { font-size: 13px; line-height: 1.5; color: var(--zx-fg3); white-space: nowrap; }
.zx-ax.is-day { font: 400 11.5px/1 var(--zx-sans); }
.zx-lim { position: absolute; font-size: 12px; line-height: 1; color: var(--zx-accent-text); white-space: nowrap; }
.zx-leg { display: flex; align-items: center; gap: 16px; font-size: 12.5px; color: var(--zx-fg3); white-space: nowrap; }
.zx-leg > span { display: inline-flex; align-items: center; gap: 7px; }
.zx-leg > span > i { display: inline-block; width: 14px; height: 2px; border-radius: 2px; }

/* ---- agents at work -------------------------------------------------------------------------------------------- */
.zx-feed { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 46px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 46px), transparent); }
.zx-it { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 12px; padding: 12px 0 13px; border-top: 1px solid var(--zx-line); }
.zx-it:first-child { border-top-color: transparent; }
.zx-it-h { display: flex; align-items: center; gap: 8px; min-width: 0; height: 22px; }
.zx-it-h b { font-size: 13.5px; font-weight: 500; white-space: nowrap; }
.zx-it-h time { margin-left: auto; font: 400 12px/1 var(--zx-mono); color: var(--zx-fg3); }
.zx-it-x { margin-top: 3px; font-size: 13.5px; line-height: 20px; color: var(--zx-fg2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zx-it.is-alert .zx-it-x { color: var(--zx-fg); }
.zx-it .zx-av { margin-top: -1px; }
.zx-it > div { position: relative; min-width: 0; }
.zx-it .zx-acked { height: 22px; margin-left: 2px; }
.zx-it-hl { position: absolute; left: -12px; right: -12px; top: 1px; bottom: 0; border-radius: 12px; background: var(--zx-control); opacity: 0; }
.zx-it-m { position: absolute; right: -6px; top: 8px; opacity: 0; }

/* ---- the approval ---------------------------------------------------------------------------------------------- */
.zx-ask { position: absolute; left: 28px; top: 28px; right: 28px; bottom: 28px; }
.zx-ask-hd { display: flex; align-items: center; justify-content: space-between; height: 20px; }
.zx-ask-by { display: flex; align-items: center; gap: 10px; margin-top: 18px; font-size: 13.5px; color: var(--zx-fg2); white-space: nowrap; }
.zx-ask-by b { color: var(--zx-fg); font-weight: 500; }
.zx-ask-by time { margin-left: auto; font: 400 12px/1 var(--zx-mono); color: var(--zx-fg3); }
.zx-ask-q { margin-top: 12px; font: 400 23px/30px var(--zx-serif); letter-spacing: -.005em; color: var(--zx-fg); }
.zx-ask-w { margin-top: 8px; font-size: 13.5px; line-height: 21px; color: var(--zx-fg2); }
.zx-ask-fx { display: flex; gap: 10px; margin-top: 14px; }
.zx-fx { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-radius: 10px; background: var(--zx-control); box-shadow: inset 0 0 0 1px var(--zx-line); font: 400 12px/1 var(--zx-mono); color: var(--zx-fg2); white-space: nowrap; }
.zx-fx b { font-weight: 500; color: var(--zx-fg); }
.zx-fx .zx-i { width: 12px; height: 12px; color: var(--zx-fg3); stroke-width: 2; }
.zx-ask-act { position: absolute; left: 0; right: 0; bottom: 0; height: 40px; }
.zx-ask-btns { position: absolute; inset: 0; display: flex; justify-content: flex-end; gap: 10px; }
.zx-ask-done { position: absolute; inset: 0; display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--zx-fg2); white-space: nowrap; opacity: 0; }
.zx-ask-done .zx-bd { flex: none; }
.zx-ask-done.is-prog { align-items: flex-start; padding-top: 2px; }
.zx-ask-done.is-prog > span:not(.zx-bd):not(.zx-prog) { line-height: 24px; }
.zx-ask-done .zx-prog { position: absolute; left: 0; right: 0; bottom: 2px; }
/* the callout form (one clear next step across the page): words on the left, the decision on the right */
.zx-ask.is-wide .zx-ask-by { position: absolute; left: 0; top: 0; margin: 0; }
.zx-ask.is-wide .zx-ask-q { position: absolute; left: 0; top: 30px; margin: 0; white-space: nowrap; }
.zx-ask.is-wide .zx-ask-w { position: absolute; left: 0; top: 66px; margin: 0; white-space: nowrap; }
.zx-ask.is-wide .zx-ask-act { left: auto; right: 0; top: 22px; bottom: auto; width: 480px; }
.zx-ask.is-wide .zx-ask-done { justify-content: flex-end; }
/* a day of the week as a strip of 24 hours, the proposed stop on it */
.zx-day { position: relative; margin-top: 16px; height: 44px; }
.zx-day-l { display: flex; justify-content: space-between; font: 400 11px/1 var(--zx-mono); color: var(--zx-fg3); }
.zx-day-t { position: absolute; left: 0; right: 0; top: 18px; height: 20px; border-radius: 6px; background: var(--zx-control); box-shadow: inset 0 0 0 1px var(--zx-line); }
.zx-day-b { position: absolute; top: 0; bottom: 0; border-radius: 6px; box-shadow: inset 0 0 0 1.5px var(--zx-accent); background: var(--zx-accent-soft); }
.zx-day-b > i { position: absolute; inset: 0; border-radius: 6px; background: var(--zx-btn); opacity: 0; }
.zx-day-b > span { position: absolute; left: 8px; top: 3px; font: 500 11px/14px var(--zx-mono); color: var(--zx-accent-text); white-space: nowrap; }

/* ---- work orders ----------------------------------------------------------------------------------------------- */
.zx-tbl { position: relative; margin: 0 -12px; }
.zx-tr { position: relative; display: grid; grid-template-columns: 82px minmax(0, 1fr) 112px 84px 128px; column-gap: 14px; align-items: center; height: 46px; padding: 0 12px; border-top: 1px solid var(--zx-line); font-size: 14px; white-space: nowrap; }
.zx-tr.is-th { height: 28px; border-top: 0; font-size: 12px; font-weight: 500; color: var(--zx-fg3); }
.zx-tr > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.zx-tr code { font: 400 12px/1 var(--zx-mono); color: var(--zx-fg2); }
.zx-tr time { font: 400 12px/1 var(--zx-mono); color: var(--zx-fg2); }
.zx-task { display: flex; align-items: baseline; gap: 8px; }
.zx-task small { font-size: 12.5px; color: var(--zx-fg3); }
.zx-task .zx-i { width: 13px; height: 13px; color: var(--zx-ok); align-self: center; }
.zx-tr.is-new::before { content: ""; position: absolute; inset: 1px 0 0; border-radius: 12px; background: var(--zx-control); box-shadow: inset 0 0 0 1px var(--zx-line); }
.zx-tr.is-new + .zx-tr { border-top-color: transparent; }
.zx-tr > .zx-cell { position: relative; display: grid; overflow: visible; }
.zx-cell > * { grid-area: 1 / 1; justify-self: start; }
.zx-filter { display: inline-flex; height: 26px; align-items: center; gap: 6px; padding: 0 6px 0 10px; border-radius: 999px; background: var(--zx-accent-soft); font-size: 12.5px; font-weight: 500; color: var(--zx-accent-text); white-space: nowrap; }
.zx-filter .zx-i { width: 13px; height: 13px; stroke-width: 2; }

/* ---- figures ----------------------------------------------------------------------------------------------------- */
.zx-figs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.zx-fig { min-width: 0; padding: 2px 20px 2px 0; }
.zx-fig + .zx-fig { padding-left: 20px; border-left: 1px solid var(--zx-line); }
.zx-fig-l { font-size: 13px; color: var(--zx-fg3); white-space: nowrap; }
.zx-fig-v { margin-top: 6px; font: 400 34px/1.05 var(--zx-serif); letter-spacing: -.01em; white-space: nowrap; }
.zx-fig-v small { margin-left: 4px; font: 400 15px/1 var(--zx-sans); color: var(--zx-fg3); letter-spacing: 0; }
.zx-fig-c { display: flex; align-items: center; gap: 5px; margin-top: 8px; font-size: 12.5px; color: var(--zx-fg3); white-space: nowrap; }
.zx-fig-c .zx-i { width: 14px; height: 14px; }
.zx-fig-c.is-good { color: var(--zx-ok); }

/* ---- menus ------------------------------------------------------------------------------------------------------- */
.zx-menu { left: 0; top: 0; min-width: 220px; padding: 6px; border-radius: 16px; z-index: 20; opacity: 0; visibility: hidden; will-change: transform, opacity; }
.zx-mi { position: relative; display: flex; width: 100%; height: 36px; align-items: center; gap: 10px; padding: 0 10px; border-radius: 10px; font-size: 13.5px; color: var(--zx-fg); white-space: nowrap; }
.zx-mi.is-tall { height: 46px; }
.zx-mi > .zx-i { width: 16px; height: 16px; color: var(--zx-fg3); }
.zx-mi .zx-mi-t { min-width: 0; }
.zx-mi .zx-mi-t small { display: block; font-size: 12px; line-height: 16px; color: var(--zx-fg3); }
.zx-mi kbd, .zx-mi .zx-mck { margin-left: auto; }
.zx-mi kbd { font: 400 11px/1 var(--zx-mono); color: var(--zx-fg3); }
.zx-mi .zx-mck { width: 16px; height: 16px; color: var(--zx-accent); }
.zx-mhl { position: absolute; left: 6px; right: 6px; top: 0; height: 36px; border-radius: 10px; background: var(--zx-control-hover); opacity: 0; }
.zx-msep { height: 1px; margin: 6px; background: var(--zx-line); }
.zx-mlab { padding: 8px 10px 6px; font-size: 12px; line-height: 16px; color: var(--zx-fg3); white-space: nowrap; }
.zx-mi .zx-av { width: 26px; height: 26px; font-size: 10.5px; }

/* ---- the command menu, where the person asks the site assistant -------------------------------------------------- */
.zx-scrim { position: absolute; inset: 0; z-index: 30; background: rgba(0, 0, 0, .4); opacity: 0; visibility: hidden; will-change: opacity; }
.zx-pal { left: 520px; top: 120px; width: 560px; border-radius: 22px; overflow: hidden; z-index: 31; opacity: 0; visibility: hidden; will-change: transform, opacity; }
.zx-pal-in { position: relative; display: flex; align-items: center; height: 58px; padding: 0 18px 0 50px; font-size: 16px; color: var(--zx-fg); white-space: nowrap; }
.zx-pal-in > .zx-i { position: absolute; left: 18px; top: 20px; width: 18px; height: 18px; color: var(--zx-fg3); }
.zx-pal-in .zx-ph0 { position: absolute; left: 50px; top: 19px; line-height: 20px; color: var(--zx-fg3); }
.zx-caret { display: inline-block; width: 1.5px; height: 20px; margin-left: 1px; background: var(--zx-fg); vertical-align: -4px; }
.zx-pal-list { padding: 6px; border-top: 1px solid var(--zx-line); }
.zx-pal-g { padding: 8px 10px 6px; font-size: 12px; line-height: 16px; color: var(--zx-fg3); }
.zx-pal-ans { display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 12px; padding: 8px 12px 12px; }
.zx-pal-ans .zx-av { background: var(--zx-accent-soft); color: var(--zx-accent-text); box-shadow: inset 0 0 0 1px rgba(224, 74, 92, .3); }
.zx-pal-tx { font-size: 14px; line-height: 22px; color: var(--zx-fg); }
.zx-pal-tx > span { opacity: 0; }
.zx-pal-src { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; font-size: 12px; color: var(--zx-fg3); }
.zx-pal-src > * { opacity: 0; }
.zx-pal-it { position: relative; display: flex; min-height: 44px; align-items: center; gap: 12px; padding: 6px 12px; border-radius: 12px; font-size: 14px; color: var(--zx-fg); }
.zx-pal-it > .zx-i { color: var(--zx-fg3); }
.zx-pal-it.is-on { background: var(--zx-control-hover); }
.zx-pal-it.is-on > .zx-i { color: var(--zx-accent); }
.zx-pal-it .zx-key { margin-left: auto; }
.zx-pal-ft { display: flex; gap: 16px; padding: 10px 16px; border-top: 1px solid var(--zx-line); font-size: 12px; color: var(--zx-fg3); white-space: nowrap; }
.zx-pal-ft > span { display: inline-flex; align-items: center; gap: 6px; }
.zx-pal-ft .zx-keys { gap: 4px; }
.zx-pal-ft .zx-key { min-width: 20px; height: 20px; padding: 0 5px; }

/* ---- toast and the pointer --------------------------------------------------------------------------------------- */
.zx-toast { left: 0; top: 0; display: flex; min-height: 44px; align-items: center; gap: 10px; padding: 10px 18px 10px 14px; border-radius: 999px; font-size: 14px; color: var(--zx-fg); white-space: nowrap; z-index: 25; opacity: 0; visibility: hidden; will-change: transform, opacity; }
.zx-toast > span:first-child { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 999px; background: var(--zx-ok-soft); color: var(--zx-ok); }
.zx-toast .zx-i { width: 14px; height: 14px; stroke-width: 2.2; }
.zx-cur { position: absolute; left: 0; top: 0; width: 24px; height: 30px; z-index: 40; opacity: 0; visibility: hidden; transform-origin: 2px 2px; will-change: transform; }
.zx-cur .zx-cur-s { fill: rgba(0, 0, 0, .35); }
.zx-cur .zx-cur-a { fill: #0b0d12; stroke: #fff; stroke-width: 1.5; stroke-linejoin: round; }