/* Zedstar montage: Acme Corp.'s grid operations system (dash-grid.js), in DX Sidekick's Dusk look: violet night over
   the last light. The network map is the ground; the sidebar and panes float over it as painted glass (tints and
   gradients, no live blur). Geist for the interface, Newsreader for titles, figures and the company's name, Geist Mono
   for codes, keys and times. Everything is scoped under .zd-gr and drawn in a 1600 x 1000 space. */

.zd-gr {
  --fg: #f6f3ef;
  --fg-2: #d0d3dc;
  --fg-3: #b8bdca;
  --fg-4: #8e93a8;
  --line: rgba(255, 255, 255, 0.1);
  --line-strong: rgba(255, 255, 255, 0.18);
  --accent: #e04a5c;
  --accent-text: #ff9aa6;
  --accent-soft: rgba(224, 74, 92, 0.2);
  --ok: #b8cfe5;
  --ok-soft: rgba(184, 207, 229, 0.1);
  --ring: #b8cfe5;
  --control: rgba(255, 255, 255, 0.08);
  --control-hover: rgba(255, 255, 255, 0.15);
  --control-line: rgba(255, 255, 255, 0.14);
  --control-solid: rgba(27, 25, 46, 0.86);
  --field: rgba(255, 255, 255, 0.06);
  --field-line: rgba(255, 255, 255, 0.17);
  --menu: rgba(36, 32, 58, 0.97);
  --btn: #c9384c;
  --btn-hover: #d04157;
  --btn-press: #b32a44;
  --glass-rim: rgba(255, 255, 255, 0.21);
  --glass-light: rgba(255, 255, 255, 0.26);
  --glass-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.62), 0 2px 8px rgba(0, 0, 0, 0.2);
  --sans: Geist, "Helvetica Neue", Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, Menlo, monospace;
  --serif: Newsreader, Georgia, serif;
  position: absolute;
  left: 0;
  top: 0;
  width: 1600px;
  height: 1000px;
  overflow: hidden;
  transform-origin: 0 0;
  background: #12122a;
  color: var(--fg);
  font: 400 14px/1.45 var(--sans);
  font-feature-settings: "ss01", "cv11";
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  pointer-events: none;
  user-select: none;
  contain: layout paint;
}
.zd-gr *, .zd-gr *::before, .zd-gr *::after { box-sizing: border-box; }
.zd-gr :where(p, ol) { margin: 0; padding: 0; }
.zd-gr :where(em, i) { font-style: normal; }
.zd-gr :where(b) { font-weight: 500; }
.zd-gr :where(kbd, code) { font: inherit; }
.zd-gr svg { fill: none; stroke: none; stroke-width: 1; }
.zd-gr .zd-gr-ic { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ---- the ground: Dusk's sky and its last light, then the map ---- */
.zd-gr .zd-gr-sky {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(190px 160px at 540px 470px, rgba(255, 176, 140, 0.11), rgba(255, 176, 140, 0) 100%),
    radial-gradient(170px 150px at 948px 404px, rgba(255, 176, 140, 0.1), rgba(255, 176, 140, 0) 100%),
    radial-gradient(110px 90px at 1066px 552px, rgba(255, 176, 140, 0.06), rgba(255, 176, 140, 0) 100%),
    radial-gradient(100px 90px at 884px 630px, rgba(255, 176, 140, 0.06), rgba(255, 176, 140, 0) 100%),
    radial-gradient(61% 47% at 50% 87%, rgba(244, 122, 116, 0.36), rgba(201, 70, 110, 0.2) 30%, rgba(110, 42, 92, 0.08) 65%, rgba(58, 29, 74, 0) 100%),
    linear-gradient(180deg, #090a19 0%, #10112a 30%, #1b1636 55%, #2a193d 70%, #41203f 79%, #5d2442 86%, #6b2945 100%);
}
.zd-gr .zd-gr-svg { position: absolute; left: 0; top: 0; width: 1600px; height: 1000px; overflow: visible; }
.zd-gr .zd-gr-vign {
  position: absolute;
  left: 0;
  top: 0;
  width: 1600px;
  height: 300px;
  background: linear-gradient(180deg, rgba(9, 10, 25, 0.9) 0%, rgba(9, 10, 25, 0.78) 34%, rgba(10, 11, 28, 0.35) 72%, rgba(10, 11, 28, 0) 100%);
}
.zd-gr .zd-gr-bank { fill: none; stroke: rgba(184, 207, 229, 0.13); stroke-width: 19; stroke-linecap: round; }
.zd-gr .zd-gr-water { fill: none; stroke: rgba(9, 8, 24, 0.88); stroke-width: 16.5; stroke-linecap: round; }
.zd-gr .zd-gr-bank.zd-gr-canal { stroke-width: 8; stroke-linecap: butt; stroke: rgba(184, 207, 229, 0.1); }
.zd-gr .zd-gr-water.zd-gr-canal { stroke-width: 5.5; stroke-linecap: butt; stroke: rgba(9, 8, 24, 0.75); }
.zd-gr .zd-gr-contour { fill: none; stroke: rgba(184, 207, 229, 0.075); stroke-width: 1; }
.zd-gr .zd-gr-street { fill: none; stroke: rgba(222, 214, 255, 0.055); stroke-width: 1; stroke-linecap: round; }
.zd-gr .zd-gr-light { fill: none; stroke-linecap: round; }
.zd-gr .zd-gr-l0 { stroke: rgba(255, 208, 172, 0.3); stroke-width: 1.5; }
.zd-gr .zd-gr-l1 { stroke: rgba(255, 220, 194, 0.48); stroke-width: 1.9; }
.zd-gr .zd-gr-l2 { stroke: rgba(255, 236, 220, 0.74); stroke-width: 2.3; }
.zd-gr .zd-gr-place { font: italic 400 16px var(--serif); font-variation-settings: "opsz" 48; fill: rgba(214, 216, 226, 0.44); letter-spacing: 0.015em; }
.zd-gr .zd-gr-place.zd-gr-river { font-size: 14px; fill: rgba(184, 207, 229, 0.42); }

/* the lines: a soft glow, a dark casing that lifts them off the lights, the line itself */
.zd-gr .zd-gr-glow { fill: none; stroke-width: 11; stroke-opacity: 0.17; stroke-linejoin: round; stroke-linecap: round; }
.zd-gr .zd-gr-case { fill: none; stroke: rgba(13, 12, 30, 0.82); stroke-width: 6; stroke-linejoin: round; stroke-linecap: round; }
.zd-gr .zd-gr-line { fill: none; stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; }
.zd-gr .zd-gr-glow.zd-gr-v33 { stroke: #e5eaf2; stroke-width: 13; stroke-opacity: 0.09; }
.zd-gr .zd-gr-case.zd-gr-v33 { stroke-width: 8; }
.zd-gr .zd-gr-line.zd-gr-v33 { stroke: #e5eaf2; stroke-width: 3.6; }
.zd-gr .zd-gr-pill { fill: #15132a; stroke-width: 1.5; }
.zd-gr .zd-gr-pillt { font: 600 11px var(--mono); text-anchor: middle; letter-spacing: 0.01em; }
.zd-gr .zd-gr-peakwrap { position: absolute; inset: 0; }

/* the marks: switches, open points, the primaries */
.zd-gr .zd-gr-sw { fill: #e6e8ee; stroke: rgba(13, 12, 30, 0.9); stroke-width: 1.6; }
.zd-gr .zd-gr-nop, .zd-gr .zd-gr-open { fill: #17152f; stroke: #d0d3dc; stroke-width: 1.6; }
.zd-gr .zd-gr-shut { fill: #f6f3ef; stroke: rgba(13, 12, 30, 0.9); stroke-width: 1.6; }
.zd-gr .zd-gr-poleM { fill: #f6f3ef; stroke: rgba(13, 12, 30, 0.9); stroke-width: 1.6; }
.zd-gr .zd-gr-lbl { font: 400 10.5px var(--mono); fill: var(--fg-3); paint-order: stroke; stroke: rgba(15, 14, 34, 0.92); stroke-width: 3.5px; stroke-linejoin: round; }
.zd-gr .zd-gr-subH { fill: none; stroke: rgba(246, 243, 239, 0.16); stroke-width: 1; }
.zd-gr .zd-gr-subR { fill: #17152f; stroke: #f6f3ef; stroke-width: 2; }
.zd-gr .zd-gr-subC { fill: #f6f3ef; }
.zd-gr .zd-gr-subN { font: 600 12.5px var(--sans); fill: var(--fg); letter-spacing: -0.005em; paint-order: stroke; stroke: rgba(15, 14, 34, 0.92); stroke-width: 4px; stroke-linejoin: round; }
.zd-gr .zd-gr-subV { font: 400 10.5px var(--mono); fill: var(--fg-3); paint-order: stroke; stroke: rgba(15, 14, 34, 0.92); stroke-width: 3.5px; stroke-linejoin: round; }

/* the story on the map */
.zd-gr .zd-gr-zoneP { fill: rgba(224, 74, 92, 0.13); stroke: #ee6878; stroke-width: 1.5; stroke-dasharray: 3.5 3; }
.zd-gr .zd-gr-zoneA { fill: rgba(184, 207, 229, 0.14); stroke: var(--ok); stroke-width: 1.5; }
.zd-gr .zd-gr-feedcase { fill: none; stroke: rgba(13, 12, 30, 0.8); stroke-width: 5.5; stroke-linecap: round; }
.zd-gr .zd-gr-backfeed { fill: none; stroke-width: 2.3; stroke-linecap: round; stroke-dasharray: 1 1; }
.zd-gr .zd-gr-dead { fill: none; stroke: #ee6878; stroke-width: 1.8; stroke-dasharray: 5 4; stroke-linejoin: round; }
.zd-gr .zd-gr-rest { fill: none; stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.zd-gr .zd-gr-hot { fill: none; stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.zd-gr .zd-gr-badge circle { fill: #f6f3ef; stroke: rgba(13, 12, 30, 0.9); stroke-width: 2; }
.zd-gr .zd-gr-badge text { font: 600 10.5px var(--mono); fill: #15132b; text-anchor: middle; }

/* map tags, in HTML so they share the badges' finish */
.zd-gr .zd-gr-tag { position: absolute; }
.zd-gr .zd-gr-tagin {
  position: absolute;
  left: 0;
  top: 0;
  display: inline-flex;
  height: 26px;
  align-items: center;
  gap: 7px;
  padding: 0 11px 0 9px;
  border-radius: 999px;
  background: var(--control-solid);
  box-shadow: inset 0 0 0 1px var(--control-line), 0 6px 18px -8px rgba(0, 0, 0, 0.6);
  font-size: 12px;
  font-weight: 500;
  color: var(--fg-2);
  white-space: nowrap;
}
.zd-gr .zd-gr-tagin .zd-gr-ic { width: 14px; height: 14px; color: var(--ok); }
.zd-gr .zd-gr-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--fg-3); flex: none; }
.zd-gr .zd-gr-dot.zd-gr-accent { background: var(--accent); }
.zd-gr .zd-gr-zt1 { left: 596px; top: 632px; }
.zd-gr .zd-gr-zt2 { left: 432px; top: 262px; }
.zd-gr .zd-gr-wi { left: 300px; top: 252px; }
.zd-gr .zd-gr-wind { position: absolute; left: 0; top: 0; }
.zd-gr .zd-gr-windband {
  position: absolute;
  left: 976px;
  top: 272px;
  width: 150px;
  height: 64px;
  border-radius: 32px;
  background: repeating-linear-gradient(135deg, rgba(184, 207, 229, 0.16) 0 1px, rgba(184, 207, 229, 0) 1px 7px), rgba(184, 207, 229, 0.06);
  box-shadow: inset 0 0 0 1px rgba(184, 207, 229, 0.34);
}
.zd-gr .zd-gr-tag.zd-gr-wt {
  position: absolute;
  left: 722px;
  top: 291px;
  display: inline-flex;
  height: 26px;
  align-items: center;
  gap: 7px;
  padding: 0 11px 0 9px;
  border-radius: 999px;
  background: var(--control-solid);
  box-shadow: inset 0 0 0 1px var(--control-line), 0 6px 18px -8px rgba(0, 0, 0, 0.6);
  font-size: 12px;
  font-weight: 500;
  color: var(--fg-2);
  white-space: nowrap;
}
.zd-gr .zd-gr-wt .zd-gr-ic { width: 14px; height: 14px; color: var(--ok); }

/* ---- glass: tint, a 1px rim, a highlight inside the top edge, a deep soft shadow ---- */
.zd-gr .zd-gr-glass {
  border: 1px solid var(--glass-rim);
  box-shadow: inset 0 1px 0 var(--glass-light), var(--glass-shadow);
}

/* ---- the sidebar ---- */
.zd-gr .zd-gr-side {
  position: absolute;
  left: 12px;
  top: 12px;
  width: 264px;
  height: 976px;
  display: flex;
  flex-direction: column;
  padding: 12px;
  border-radius: 22px;
  background:
    radial-gradient(130% 50% at 0% 0%, rgba(111, 140, 181, 0.1), rgba(111, 140, 181, 0) 70%),
    radial-gradient(140% 40% at 100% 100%, rgba(224, 96, 110, 0.12), rgba(224, 96, 110, 0) 70%),
    linear-gradient(180deg, rgba(39, 38, 56, 0.95) 0%, rgba(43, 40, 63, 0.95) 46%, rgba(52, 41, 69, 0.95) 76%, rgba(68, 44, 76, 0.96) 100%);
}
.zd-gr .zd-gr-sh { display: flex; height: 36px; align-items: center; gap: 10px; }
.zd-gr .zd-gr-tog { display: grid; width: 32px; height: 36px; place-items: center; color: var(--fg-2); flex: none; }
.zd-gr .zd-gr-tog .zd-gr-ic { width: 18px; height: 18px; }
.zd-gr .zd-gr-wm { display: block; width: 84px; height: auto; flex: none; }
.zd-gr .zd-gr-div { width: 1px; height: 16px; background: var(--line-strong); flex: none; }
.zd-gr .zd-gr-sys { font-size: 13px; font-weight: 500; letter-spacing: -0.01em; color: var(--fg-2); white-space: nowrap; }
.zd-gr .zd-gr-org { position: relative; margin: 22px 10px 18px; }
.zd-gr .zd-gr-org span { display: block; font-size: 12px; font-weight: 500; color: var(--fg-3); }
.zd-gr .zd-gr-org b { display: block; margin-top: 6px; font: 400 21px/1.15 var(--serif); color: var(--fg); }
.zd-gr .zd-gr-org .zd-gr-ic { position: absolute; right: -2px; bottom: 3px; width: 16px; height: 16px; color: var(--fg-3); }
.zd-gr .zd-gr-search {
  display: flex;
  height: 38px;
  align-items: center;
  gap: 10px;
  padding: 0 8px 0 12px;
  border: 1px solid var(--control-line);
  border-radius: 12px;
  background: var(--control);
  font-size: 13.5px;
  color: var(--fg-3);
}
.zd-gr .zd-gr-search > .zd-gr-ic { width: 16px; height: 16px; }
.zd-gr .zd-gr-search > span { flex: 1; }
.zd-gr .zd-gr-key {
  display: inline-grid;
  min-width: 22px;
  height: 22px;
  place-items: center;
  padding: 0 6px;
  border-radius: 6px;
  background: var(--control);
  box-shadow: inset 0 0 0 1px var(--control-line);
  font: 400 11px/1 var(--mono);
  color: var(--fg-2);
}
.zd-gr .zd-gr-key .zd-gr-ic { width: 11px; height: 11px; stroke-width: 2; }
.zd-gr .zd-gr-key.zd-gr-wide { min-width: 30px; }
.zd-gr .zd-gr-search .zd-gr-key + .zd-gr-key { margin-left: -6px; }
.zd-gr .zd-gr-key.zd-gr--press { background: var(--control-hover); box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--fg); transform: translateY(1px); }

.zd-gr .zd-gr-nav { position: relative; display: grid; gap: 4px; margin-top: 10px; }
.zd-gr .zd-gr-navlit {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 40px;
  border-radius: 12px;
  background: var(--control);
  box-shadow: inset 0 0 0 1px var(--control-line);
}
.zd-gr .zd-gr-navi {
  position: relative;
  display: flex;
  height: 40px;
  align-items: center;
  gap: 12px;
  padding: 0 12px;
  border-radius: 12px;
  font-size: 14px;
  color: var(--fg-2);
}
.zd-gr .zd-gr-navi .zd-gr-ic { width: 18px; height: 18px; color: var(--fg-3); }
.zd-gr .zd-gr-navi.zd-gr--on { font-weight: 500; color: var(--fg); }
.zd-gr .zd-gr-navi.zd-gr--on .zd-gr-ic { color: var(--accent); }
.zd-gr .zd-gr-count {
  display: inline-grid;
  min-width: 20px;
  height: 20px;
  margin-left: auto;
  place-items: center;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--btn);
  font: 600 11px/1 var(--mono);
  color: #fff;
}

.zd-gr .zd-gr-agents { margin: 22px 0 0; padding: 18px 2px 0; border-top: 1px solid var(--line); }
.zd-gr .zd-gr-agh { display: flex; align-items: baseline; justify-content: space-between; padding: 0 10px 8px; font-size: 12px; font-weight: 500; color: var(--fg-3); }
.zd-gr .zd-gr-agh em { font: 400 11px var(--mono); color: var(--fg-3); }
.zd-gr .zd-gr-agent { display: flex; height: 46px; align-items: center; gap: 12px; padding: 0 10px; }
.zd-gr .zd-gr-agi {
  position: relative;
  display: grid;
  width: 30px;
  height: 30px;
  flex: none;
  place-items: center;
  border-radius: 999px;
  background: var(--control);
  box-shadow: inset 0 0 0 1px var(--control-line);
  color: var(--fg-2);
}
.zd-gr .zd-gr-agi > .zd-gr-ic { width: 16px; height: 16px; }
.zd-gr .zd-gr-agent.zd-gr--busy .zd-gr-agi { color: var(--ok); }
.zd-gr .zd-gr-agring, .zd-gr .zd-gr-busyring { position: absolute; inset: -3px; border-radius: 999px; }
.zd-gr .zd-gr-agring > i, .zd-gr .zd-gr-busyring > i { position: absolute; inset: 0; border-radius: 999px; box-shadow: 0 0 0 1px var(--ok); }
.zd-gr .zd-gr-agwait { position: absolute; right: -2px; top: -2px; width: 10px; height: 10px; border-radius: 999px; background: var(--accent); box-shadow: 0 0 0 2px #2c2943; }
.zd-gr .zd-gr-agdone {
  position: absolute;
  right: -4px;
  bottom: -4px;
  display: grid;
  width: 15px;
  height: 15px;
  place-items: center;
  border-radius: 999px;
  background: #c8d8ea;
  box-shadow: 0 0 0 2px #2f2a45;
  color: #1b1830;
}
.zd-gr .zd-gr-agdone .zd-gr-ic { width: 10px; height: 10px; stroke-width: 2.6; }
.zd-gr .zd-gr-agt { display: grid; min-width: 0; flex: 1; }
.zd-gr .zd-gr-agt b { font-size: 13px; font-weight: 500; color: var(--fg); white-space: nowrap; }
.zd-gr .zd-gr-agst { position: relative; height: 17px; }
.zd-gr .zd-gr-agst em { position: absolute; left: 0; top: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--fg-3); }

.zd-gr .zd-gr-foot { margin-top: auto; padding: 14px 0 0; border-top: 1px solid var(--line); }
.zd-gr .zd-gr-user { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 14px; }
.zd-gr .zd-gr-user > .zd-gr-ic { width: 16px; height: 16px; margin-left: auto; color: var(--fg-3); }
.zd-gr .zd-gr-ut { display: grid; min-width: 0; }
.zd-gr .zd-gr-ut b { font-size: 13px; font-weight: 500; }
.zd-gr .zd-gr-ut em { font-size: 12px; color: var(--fg-3); }
.zd-gr .zd-gr-av {
  display: grid;
  width: 32px;
  height: 32px;
  flex: none;
  place-items: center;
  border-radius: 999px;
  background: rgba(79, 106, 147, 0.38);
  box-shadow: inset 0 0 0 1px var(--control-line);
  font-size: 12px;
  font-weight: 600;
  color: var(--fg);
}
.zd-gr .zd-gr-av.zd-gr-so { background: rgba(201, 56, 76, 0.3); }
.zd-gr .zd-gr-stack { display: flex; margin-left: 4px; }
.zd-gr .zd-gr-stack .zd-gr-av { width: 28px; height: 28px; font-size: 10.5px; box-shadow: 0 0 0 2px #322b48; }
.zd-gr .zd-gr-stack .zd-gr-av + .zd-gr-av { margin-left: -5px; }
.zd-gr .zd-gr-stack .zd-gr-ag { background: #3a3352; color: var(--ok); }
.zd-gr .zd-gr-stack .zd-gr-ag .zd-gr-ic { width: 14px; height: 14px; }
.zd-gr .zd-gr-stack .zd-gr-more { background: #3a3352; font: 500 10.5px var(--mono); color: var(--fg-2); }

/* ---- the page header, on the ground ---- */
.zd-gr .zd-gr-head { position: absolute; left: 340px; top: 34px; width: 796px; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.zd-gr .zd-gr-mark { display: flex; align-items: center; gap: 10px; font: 400 15px/1 var(--serif); color: var(--fg-2); }
.zd-gr .zd-gr-mark::before { content: ""; width: 3px; height: 15px; border-radius: 2px; background: var(--accent); }
.zd-gr .zd-gr-title { margin-top: 16px; font: 400 54px/1.06 var(--serif); letter-spacing: -0.014em; color: var(--fg); }
.zd-gr .zd-gr-lede { margin-top: 12px; font-size: 16px; line-height: 1.6; color: var(--fg-2); white-space: nowrap; }
.zd-gr .zd-gr-acts { display: flex; gap: 10px; flex: none; }
.zd-gr .zd-gr-btn {
  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: -0.005em;
  white-space: nowrap;
}
.zd-gr .zd-gr-btn .zd-gr-ic { width: 16px; height: 16px; }
.zd-gr .zd-gr-btn1 { color: #fff; background: var(--btn); }
.zd-gr .zd-gr-btn1.zd-gr--hover { background: var(--btn-hover); }
.zd-gr .zd-gr-btn1.zd-gr--press { background: var(--btn-press); }
.zd-gr .zd-gr-btn2 { color: var(--fg); background: var(--control); border-color: var(--control-line); }
.zd-gr .zd-gr-head .zd-gr-btn2 { background: var(--control-solid); }
.zd-gr .zd-gr-btn2.zd-gr--hover, .zd-gr .zd-gr-btn2.zd-gr--press { background: rgba(58, 54, 84, 0.96); }
.zd-gr .zd-gr-btn3 { color: var(--fg-2); background: transparent; }
.zd-gr .zd-gr-btn.zd-gr-sm { height: 32px; padding: 0 14px; font-size: 13px; gap: 7px; }
.zd-gr .zd-gr-btn.zd-gr-sm .zd-gr-ic { width: 15px; height: 15px; }
.zd-gr .zd-gr-btn.zd-gr-focus { box-shadow: 0 0 0 2px #1d1a33, 0 0 0 4px var(--ring); }

.zd-gr .zd-gr-tabs { position: absolute; left: 340px; top: 188px; display: flex; gap: 4px; }
.zd-gr .zd-gr-tablit { position: absolute; left: 0; top: 0; width: 61px; height: 36px; border-radius: 999px; background: var(--control-solid); box-shadow: inset 0 0 0 1px var(--control-line); }
.zd-gr .zd-gr-tab { position: relative; display: inline-flex; height: 36px; align-items: center; gap: 8px; padding: 0 16px; border-radius: 999px; font-size: 14px; color: var(--fg-2); white-space: nowrap; }
.zd-gr .zd-gr-tab.zd-gr--on { font-weight: 500; color: var(--fg); }
.zd-gr .zd-gr-tab em { font: 400 11px var(--mono); color: var(--fg-3); }

.zd-gr .zd-gr-legend {
  position: absolute;
  right: 464px;
  top: 193px;
  display: flex;
  height: 26px;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--control-solid);
  box-shadow: inset 0 0 0 1px var(--control-line);
  font-size: 12px;
  color: var(--fg-3);
  white-space: nowrap;
}
.zd-gr .zd-gr-legend span { order: -2; font-weight: 500; color: var(--fg-2); }
.zd-gr .zd-gr-legend em { order: 0; }
.zd-gr .zd-gr-legend em:first-of-type { order: -1; margin-left: 4px; }
.zd-gr .zd-gr-ramp {
  order: 0;
  width: 84px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, #7f9cc4 0%, #b8cfe5 30%, #f2f0ee 55%, #ffbab0 78%, #ee6878 100%);
}
.zd-gr .zd-gr-legend em:last-of-type { order: 1; }
.zd-gr .zd-gr-zoom {
  position: absolute;
  left: 296px;
  top: 604px;
  display: grid;
  width: 36px;
  border-radius: 999px;
  background: var(--control-solid);
  box-shadow: inset 0 0 0 1px var(--control-line);
  color: var(--fg-2);
}
.zd-gr .zd-gr-zoom span { display: grid; height: 36px; place-items: center; }
.zd-gr .zd-gr-zoom span + span { box-shadow: inset 0 1px 0 var(--line); }
.zd-gr .zd-gr-zoom .zd-gr-ic { width: 16px; height: 16px; }

/* ---- panes ---- */
.zd-gr .zd-gr-pane { position: absolute; overflow: hidden; border-radius: 22px; padding: 22px 24px; }
.zd-gr .zd-gr-ph { display: flex; height: 32px; align-items: center; gap: 10px; }
.zd-gr .zd-gr-ph > b { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--fg); white-space: nowrap; }
.zd-gr .zd-gr-phn { font-size: 13px; color: var(--fg-3); white-space: nowrap; }
.zd-gr .zd-gr-badges { position: relative; margin-left: auto; height: 24px; width: 132px; }
.zd-gr .zd-gr-badges .zd-gr-badge { position: absolute; right: 0; top: 0; }
.zd-gr .zd-gr-badge {
  display: inline-flex;
  height: 24px;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--control);
  box-shadow: inset 0 0 0 1px var(--control-line);
  font-size: 12px;
  font-weight: 500;
  color: var(--fg-2);
  white-space: nowrap;
}
.zd-gr .zd-gr-badge > i { width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
.zd-gr .zd-gr-badge.zd-gr-ok { background: var(--ok-soft); box-shadow: none; color: var(--ok); }
.zd-gr .zd-gr-badge.zd-gr-accent { background: var(--accent-soft); box-shadow: none; color: var(--accent-text); }
.zd-gr .zd-gr-badge.zd-gr-live { margin-left: auto; }

/* the switching window */
.zd-gr .zd-gr-swp {
  left: 1148px;
  top: 12px;
  width: 440px;
  height: 616px;
  padding: 0;
  background:
    radial-gradient(90% 40% at 100% 0%, rgba(111, 140, 181, 0.12), rgba(111, 140, 181, 0) 72%),
    linear-gradient(180deg, rgba(39, 38, 56, 0.95) 0%, rgba(45, 41, 65, 0.95) 100%);
}
.zd-gr .zd-gr-card { position: absolute; inset: 0; padding: 22px 24px 20px; }
.zd-gr .zd-gr-codehd { font: 400 12px var(--mono); color: var(--fg-3); }
.zd-gr .zd-gr-jt { margin-top: 14px; font: 400 21px/1.2 var(--serif); letter-spacing: -0.005em; color: var(--fg); }
.zd-gr .zd-gr-meta { display: flex; gap: 16px; margin-top: 8px; font-size: 13px; color: var(--fg-2); white-space: nowrap; }
.zd-gr .zd-gr-meta span { display: inline-flex; align-items: center; gap: 6px; }
.zd-gr .zd-gr-meta .zd-gr-ic { width: 14px; height: 14px; color: var(--fg-3); }
.zd-gr .zd-gr-figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 16px; padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.zd-gr .zd-gr-fig { min-width: 0; padding: 0 16px; }
.zd-gr .zd-gr-fig:first-child { padding-left: 0; }
.zd-gr .zd-gr-fig + .zd-gr-fig { border-left: 1px solid var(--line); }
.zd-gr .zd-gr-fig span { display: block; font-size: 12px; color: var(--fg-3); white-space: nowrap; }
.zd-gr .zd-gr-fig b { display: block; margin-top: 3px; font: 400 29px/1.04 var(--serif); letter-spacing: -0.01em; color: var(--fg); }
.zd-gr .zd-gr-fig em { display: block; margin-top: 2px; font-size: 12px; color: var(--fg-3); white-space: nowrap; }
.zd-gr .zd-gr-sth { display: flex; align-items: baseline; justify-content: space-between; margin-top: 14px; font-size: 13px; font-weight: 500; color: var(--fg); }
.zd-gr .zd-gr-sth em { font: 400 11.5px var(--mono); color: var(--fg-3); }
.zd-gr .zd-gr-prog { position: relative; height: 4px; margin-top: 8px; overflow: hidden; border-radius: 999px; background: var(--control-line); }
.zd-gr .zd-gr-prog > i { position: absolute; inset: 0; border-radius: inherit; background: var(--ok); transform-origin: 0 50%; transform: scaleX(0); }
.zd-gr .zd-gr-steps { list-style: none; margin-top: 8px; }
.zd-gr .zd-gr-steps li { display: grid; grid-template-columns: 18px 16px minmax(0, 1fr); align-items: center; gap: 8px; height: 24px; font-size: 13px; color: var(--fg-3); }
.zd-gr .zd-gr-steps li.zd-gr--done { color: var(--fg-2); }
.zd-gr .zd-gr-smark { position: relative; width: 18px; height: 18px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.zd-gr .zd-gr-sring { position: absolute; inset: 0; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--ok); opacity: 0; }
.zd-gr .zd-gr-sok { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 999px; background: #c8d8ea; color: #1b1830; opacity: 0; }
.zd-gr .zd-gr-sok .zd-gr-ic { width: 11px; height: 11px; stroke-width: 2.6; }
.zd-gr .zd-gr-sn { font: 400 11.5px/1 var(--mono); color: var(--fg-3); text-align: right; transform: translateY(-0.5px); }
.zd-gr .zd-gr-st { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zd-gr .zd-gr-prov { display: flex; align-items: center; gap: 7px; margin-top: 12px; font-size: 12px; color: var(--fg-3); }
.zd-gr .zd-gr-prov .zd-gr-ic { width: 14px; height: 14px; color: var(--ok); }
.zd-gr .zd-gr-cbrow { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: 13px; color: var(--fg); }
.zd-gr .zd-gr-cb { display: grid; width: 18px; height: 18px; flex: none; place-items: center; border: 1px solid var(--field-line); border-radius: 6px; background: var(--field); color: #fff; }
.zd-gr .zd-gr-cb .zd-gr-ic { width: 12px; height: 12px; stroke-width: 2.6; opacity: 0; }
.zd-gr .zd-gr-cb.zd-gr--on { border-color: var(--btn); background: var(--btn); }
.zd-gr .zd-gr-cb.zd-gr--on .zd-gr-ic { opacity: 1; }
.zd-gr .zd-gr-appr { position: absolute; left: 24px; right: 24px; bottom: 12px; border-top: 1px solid var(--line); }
.zd-gr .zd-gr-ap { position: relative; display: flex; height: 52px; align-items: center; gap: 12px; }
.zd-gr .zd-gr-ap + .zd-gr-ap { border-top: 1px solid var(--line); }
.zd-gr .zd-gr-apt { display: grid; }
.zd-gr .zd-gr-apt b { font-size: 13.5px; font-weight: 500; color: var(--fg); }
.zd-gr .zd-gr-apt em { font-size: 12px; color: var(--fg-3); }
.zd-gr .zd-gr-apr { position: absolute; right: 0; top: 50%; display: flex; align-items: center; gap: 6px; margin-top: -12px; height: 24px; font-size: 12.5px; color: var(--fg-3); white-space: nowrap; }
.zd-gr .zd-gr-apr .zd-gr-ic { width: 15px; height: 15px; }
.zd-gr .zd-gr-apr.zd-gr-btns { margin-top: -16px; height: 32px; gap: 8px; }
.zd-gr .zd-gr-apr.zd-gr-done { color: var(--ok); font-weight: 500; }
.zd-gr .zd-gr-apr.zd-gr-busy { color: var(--fg-2); gap: 9px; }
.zd-gr .zd-gr-busyring { position: relative; inset: auto; width: 8px; height: 8px; border-radius: 999px; background: var(--ok); flex: none; }
.zd-gr .zd-gr-busyring > i { inset: -4px; }

/* the activity feed */
.zd-gr .zd-gr-actp {
  left: 1148px;
  top: 640px;
  width: 440px;
  height: 348px;
  background:
    radial-gradient(120% 60% at 0% 120%, rgba(224, 96, 110, 0.14), rgba(224, 96, 110, 0) 70%),
    linear-gradient(180deg, rgba(50, 41, 69, 0.95) 0%, rgba(64, 44, 77, 0.95) 100%);
}
.zd-gr .zd-gr-evs { position: relative; height: 266px; margin-top: 12px; overflow: hidden; }
.zd-gr .zd-gr-ev { position: absolute; left: 0; right: 0; top: 0; height: 62px; display: flex; gap: 12px; padding-top: 4px; }
.zd-gr .zd-gr-evwho {
  display: grid;
  width: 28px;
  height: 28px;
  flex: none;
  place-items: center;
  border-radius: 999px;
  background: var(--control);
  box-shadow: inset 0 0 0 1px var(--control-line);
  color: var(--fg-2);
  font-size: 11px;
  font-weight: 600;
}
.zd-gr .zd-gr-evwho .zd-gr-ic { width: 15px; height: 15px; }
.zd-gr .zd-gr-evwho.zd-gr--person { background: rgba(79, 106, 147, 0.38); color: var(--fg); }
.zd-gr .zd-gr-evb { position: relative; flex: 1; min-width: 0; padding-right: 62px; }
.zd-gr .zd-gr-evb p { font-size: 13px; line-height: 1.45; color: var(--fg-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.zd-gr .zd-gr-evb p b { font-weight: 500; color: var(--fg); }
.zd-gr .zd-gr-evb time { position: absolute; right: 0; top: 1px; font: 400 11.5px var(--mono); color: var(--fg-3); }
.zd-gr .zd-gr-code { padding: 1px 5px; border-radius: 6px; background: var(--control); box-shadow: inset 0 0 0 1px var(--control-line); font: 400 11.5px var(--mono); color: var(--fg); white-space: nowrap; }

/* feeders and load */
.zd-gr .zd-gr-fdp {
  left: 340px;
  top: 700px;
  width: 372px;
  height: 288px;
  background:
    radial-gradient(100% 80% at 100% 120%, rgba(244, 122, 116, 0.16), rgba(244, 122, 116, 0) 70%),
    linear-gradient(180deg, rgba(54, 41, 70, 0.95) 0%, rgba(82, 50, 82, 0.95) 100%);
}
.zd-gr .zd-gr-seg {
  position: relative;
  display: inline-flex;
  margin-left: auto;
  padding: 3px;
  border-radius: 999px;
  background: var(--control);
  box-shadow: inset 0 0 0 1px var(--control-line);
}
.zd-gr .zd-gr-seg > span { position: relative; display: inline-flex; width: 74px; height: 26px; align-items: center; justify-content: center; border-radius: 999px; font-size: 12.5px; color: var(--fg-2); white-space: nowrap; }
.zd-gr .zd-gr-seg > span.zd-gr--on { font-weight: 500; color: var(--fg); }
.zd-gr .zd-gr-seglit { position: absolute; left: 3px; top: 3px; width: 74px; height: 26px; border-radius: 999px; background: var(--control-hover); box-shadow: 0 1px 2px rgba(10, 17, 32, 0.12), inset 0 0 0 1px var(--control-line); }
.zd-gr .zd-gr-sysrow { position: relative; display: flex; align-items: center; height: 66px; margin-top: 10px; border-bottom: 1px solid var(--line); }
.zd-gr .zd-gr-sysfig { width: 196px; overflow: hidden; }
.zd-gr .zd-gr-sysfig > span { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--fg-3); white-space: nowrap; }
.zd-gr .zd-gr-sysfig b { display: flex; align-items: baseline; gap: 5px; margin-top: 2px; font: 400 28px/1.05 var(--serif); letter-spacing: -0.01em; color: var(--fg); white-space: nowrap; }
.zd-gr .zd-gr-sysfig b small { font: 400 13px var(--sans); color: var(--fg-3); letter-spacing: 0; }
.zd-gr .zd-gr-sysfig i { display: inline-flex; align-items: center; gap: 4px; font: 400 12px var(--sans); color: var(--ok); white-space: nowrap; }
.zd-gr .zd-gr-sysfig i .zd-gr-ic { width: 13px; height: 13px; }
.zd-gr .zd-gr-sysfig i > span { display: inline-flex; }
.zd-gr .zd-gr-spark { position: absolute; right: 0; top: 9px; display: block; width: 124px; height: 46px; overflow: visible; }
.zd-gr .zd-gr-sgrid { stroke: var(--line); stroke-width: 1; }
.zd-gr .zd-gr-sfc { fill: none; stroke: rgba(208, 211, 220, 0.42); stroke-width: 1.3; stroke-dasharray: 3 3; }
.zd-gr .zd-gr-sac { fill: none; stroke: var(--ok); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.zd-gr .zd-gr-snow { fill: var(--ok); stroke: #3a2a4c; stroke-width: 2; }
.zd-gr .zd-gr-speak { fill: #3a2a4c; stroke: var(--accent-text); stroke-width: 1.4; }
.zd-gr .zd-gr-fgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 22px; row-gap: 8px; margin-top: 12px; }
.zd-gr .zd-gr-fcell { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; row-gap: 5px; }
.zd-gr .zd-gr-fn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: var(--fg-2); }
.zd-gr .zd-gr-fn b { margin-right: 6px; font: 500 11.5px var(--mono); color: var(--fg); }
.zd-gr .zd-gr-fcell > em { font: 400 11.5px var(--mono); color: var(--fg-3); }
.zd-gr .zd-gr-fprog { position: relative; grid-column: 1 / -1; height: 4px; overflow: hidden; border-radius: 999px; background: var(--control-line); }
.zd-gr .zd-gr-fprog > i { position: absolute; inset: 0; border-radius: inherit; transform-origin: 0 50%; }

/* work orders */
.zd-gr .zd-gr-wop {
  left: 724px;
  top: 700px;
  width: 412px;
  height: 288px;
  background:
    radial-gradient(90% 90% at 20% 130%, rgba(244, 122, 116, 0.2), rgba(244, 122, 116, 0) 70%),
    linear-gradient(180deg, rgba(56, 42, 71, 0.95) 0%, rgba(90, 53, 86, 0.95) 100%);
}
.zd-gr .zd-gr-select { display: inline-flex; height: 30px; align-items: center; gap: 6px; margin-left: auto; padding: 0 10px 0 12px; border-radius: 999px; background: var(--control); box-shadow: inset 0 0 0 1px var(--control-line); font-size: 12.5px; color: var(--fg-2); white-space: nowrap; }
.zd-gr .zd-gr-select .zd-gr-ic { width: 14px; height: 14px; color: var(--fg-3); }
.zd-gr .zd-gr-wohd { display: flex; align-items: center; margin-top: 14px; padding-bottom: 7px; border-bottom: 1px solid var(--line); font-size: 12px; color: var(--fg-3); }
.zd-gr .zd-gr-wohd > span:first-child { width: 146px; flex: none; }
.zd-gr .zd-gr-days { display: flex; width: 216px; }
.zd-gr .zd-gr-days em { flex: 1; padding-left: 7px; border-left: 1px solid var(--line); }
.zd-gr .zd-gr-wo { position: relative; display: flex; height: 36px; align-items: center; border-bottom: 1px solid var(--line); }
.zd-gr .zd-gr-wo:last-child { border-bottom: 0; }
.zd-gr .zd-gr-woid { display: grid; width: 146px; flex: none; min-width: 0; }
.zd-gr .zd-gr-woid b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; font-weight: 500; color: var(--fg); }
.zd-gr .zd-gr-woid em { font: 400 10.5px var(--mono); color: var(--fg-3); white-space: nowrap; }
.zd-gr .zd-gr-track { position: relative; width: 216px; height: 36px; flex: none; }
.zd-gr .zd-gr-daysep { position: absolute; left: 108px; top: 0; bottom: 0; width: 1px; background: var(--line); }
.zd-gr .zd-gr-noon { position: absolute; top: 9px; bottom: 9px; width: 1px; background: rgba(255, 255, 255, 0.05); }
.zd-gr .zd-gr-bar { position: absolute; left: 0; top: 11px; height: 14px; }
.zd-gr .zd-gr-b { position: absolute; inset: 0; border-radius: 999px; }
.zd-gr .zd-gr-b.zd-gr-ok { background: rgba(184, 207, 229, 0.3); box-shadow: inset 0 0 0 1px rgba(184, 207, 229, 0.55); }
.zd-gr .zd-gr-b.zd-gr-prop { border: 1px dashed rgba(246, 243, 239, 0.45); }
.zd-gr .zd-gr-b.zd-gr-wait { background: var(--accent-soft); border: 1px dashed rgba(255, 154, 166, 0.75); }
.zd-gr .zd-gr-wonote { position: absolute; left: 6px; top: 12px; display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--ok); white-space: nowrap; }
.zd-gr .zd-gr-wonote .zd-gr-ic { width: 12px; height: 12px; }
.zd-gr .zd-gr-wo.zd-gr--moving .zd-gr-woid b { color: var(--ok); }

/* ---- the menu ---- */
.zd-gr .zd-gr-menu {
  position: absolute;
  left: 701px;
  top: 172px;
  width: 236px;
  padding: 6px;
  border-radius: 16px;
  background: var(--menu);
  transform-origin: 100% 0;
}
.zd-gr .zd-gr-mlabel { padding: 7px 10px 5px; font-size: 12px; font-weight: 500; color: var(--fg-3); }
.zd-gr .zd-gr-mi { display: flex; height: 36px; align-items: center; gap: 10px; padding: 0 10px; border-radius: 10px; font-size: 13.5px; color: var(--fg); }
.zd-gr .zd-gr-mi > .zd-gr-ic { width: 16px; height: 16px; color: var(--fg-3); }
.zd-gr .zd-gr-mi.zd-gr--hover { background: var(--control-hover); }
.zd-gr .zd-gr-mi kbd { margin-left: auto; font: 400 11px var(--mono); color: var(--fg-3); }
/* Sidekick's switch: a 38 x 22 track, crimson when on, a white knob that slides */
.zd-gr .zd-gr-switch { position: relative; width: 38px; height: 22px; margin-left: auto; flex: none; border-radius: 999px; background: var(--control-line); }
.zd-gr .zd-gr-swon { position: absolute; inset: 0; border-radius: inherit; background: var(--btn); opacity: 0; }
.zd-gr .zd-gr-knob { position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 999px; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); }
.zd-gr .zd-gr-switch.zd-gr--on .zd-gr-swon { opacity: 1; }
.zd-gr .zd-gr-switch.zd-gr--on .zd-gr-knob { transform: translateX(16px); }
.zd-gr .zd-gr-msep { display: block; height: 1px; margin: 6px; background: var(--line); }

/* ---- the command menu ---- */
.zd-gr .zd-gr-scrim { position: absolute; inset: 0; background: rgba(5, 4, 14, 0.42); }
.zd-gr .zd-gr-cmd {
  position: absolute;
  left: 458px;
  top: 104px;
  width: 560px;
  overflow: hidden;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(38, 34, 60, 0.985), rgba(34, 30, 54, 0.985));
}
.zd-gr .zd-gr-cin { position: relative; display: flex; height: 58px; align-items: center; padding: 0 18px 0 50px; box-shadow: inset 0 -1px 0 var(--line); }
.zd-gr .zd-gr-cin > .zd-gr-ic { position: absolute; left: 18px; top: 20px; width: 18px; height: 18px; color: var(--fg-3); }
.zd-gr .zd-gr-cph { position: absolute; left: 50px; top: 19px; font-size: 16px; color: var(--fg-3); white-space: nowrap; }
.zd-gr .zd-gr-cq { display: flex; align-items: center; font-size: 16px; color: var(--fg); white-space: pre; }
.zd-gr .zd-gr-caret { display: inline-block; width: 1.5px; height: 20px; margin-left: 1px; background: var(--fg); }
.zd-gr .zd-gr-cbody { position: relative; height: 268px; }
.zd-gr .zd-gr-clist { position: absolute; inset: 0; padding: 6px; }
.zd-gr .zd-gr-cgl { padding: 10px 10px 6px; font-size: 12px; font-weight: 500; color: var(--fg-3); }
.zd-gr .zd-gr-ci { display: flex; min-height: 50px; align-items: center; gap: 12px; padding: 6px 12px; border-radius: 12px; font-size: 14px; }
.zd-gr .zd-gr-ci > .zd-gr-ic { width: 18px; height: 18px; color: var(--fg-3); }
.zd-gr .zd-gr-ci.zd-gr-act { background: var(--control-hover); }
.zd-gr .zd-gr-ci.zd-gr-act > .zd-gr-ic { color: var(--accent); }
.zd-gr .zd-gr-cit { display: grid; min-width: 0; flex: 1; }
.zd-gr .zd-gr-cit b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 400; color: var(--fg); }
.zd-gr .zd-gr-cit em { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--fg-3); }
.zd-gr .zd-gr-cans { position: absolute; inset: 0; padding: 18px 22px; }
.zd-gr .zd-gr-cah { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.zd-gr .zd-gr-cah b { font-weight: 500; color: var(--fg); }
.zd-gr .zd-gr-cah em { color: var(--fg-3); }
.zd-gr .zd-gr-cav { display: grid; width: 26px; height: 26px; place-items: center; border-radius: 999px; background: var(--control); box-shadow: inset 0 0 0 1px var(--control-line); color: var(--ok); }
.zd-gr .zd-gr-cav .zd-gr-ic { width: 14px; height: 14px; }
.zd-gr .zd-gr-ctext { margin-top: 14px; font: 400 18px/1.45 var(--serif); color: var(--fg); }
.zd-gr .zd-gr-word { opacity: 0; }
.zd-gr .zd-gr-word.zd-gr--on { opacity: 1; }
.zd-gr .zd-gr-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.zd-gr .zd-gr-chip { display: inline-flex; height: 28px; align-items: center; gap: 6px; padding: 0 11px 0 9px; border-radius: 999px; background: var(--control); box-shadow: inset 0 0 0 1px var(--control-line); font-size: 12.5px; color: var(--fg-2); white-space: nowrap; }
.zd-gr .zd-gr-chip .zd-gr-ic { width: 14px; height: 14px; color: var(--fg-3); }
.zd-gr .zd-gr-cacts { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.zd-gr .zd-gr-cfoot { display: flex; gap: 16px; padding: 10px 16px; box-shadow: inset 0 1px 0 var(--line); font-size: 12px; color: var(--fg-3); }
.zd-gr .zd-gr-cfoot span { display: flex; align-items: center; gap: 6px; }

/* ---- the toast: bottom centre, like DX Sidekick's toaster ---- */
.zd-gr .zd-gr-toaster { position: absolute; left: 0; right: 0; bottom: 22px; display: flex; justify-content: center; }
.zd-gr .zd-gr-toast {
  position: relative;
  display: flex;
  min-height: 44px;
  align-items: center;
  gap: 10px;
  padding: 10px 18px 10px 14px;
  border-radius: 999px;
  background: var(--menu);
  font-size: 14px;
  color: var(--fg);
  white-space: nowrap;
  transform-origin: 50% 100%;
}
.zd-gr .zd-gr-tok { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 999px; background: var(--ok-soft); color: var(--ok); }
.zd-gr .zd-gr-tok .zd-gr-ic { width: 14px; height: 14px; stroke-width: 2.2; }

/* ---- pulses: light moving out along the feeders ---- */
.zd-gr .zd-gr-pulses { position: absolute; inset: 0; }
.zd-gr .zd-gr-pulse { position: absolute; left: -2.5px; top: -2.5px; width: 5px; height: 5px; border-radius: 999px; background: #fffaf4; box-shadow: 0 0 7px 2px var(--glow); will-change: transform, opacity; }

/* ---- the pointer ---- */
.zd-gr .zd-gr-cursor { position: absolute; left: -5px; top: -3.2px; width: 24px; height: 24px; transform-origin: 5px 3.2px; will-change: transform; }
.zd-gr .zd-gr-cursor svg { display: block; width: 24px; height: 24px; overflow: visible; }
.zd-gr .zd-gr-cs1 { fill: rgba(0, 0, 0, 0.16); stroke: rgba(0, 0, 0, 0.16); stroke-width: 3.6; stroke-linejoin: round; transform: translate(0.4px, 1.6px); }
.zd-gr .zd-gr-cs2 { fill: rgba(0, 0, 0, 0.2); stroke: rgba(0, 0, 0, 0.2); stroke-width: 1.6; stroke-linejoin: round; transform: translate(0.2px, 0.9px); }
.zd-gr .zd-gr-cfill { fill: #0d0d12; stroke: #fff; stroke-width: 1.35; stroke-linejoin: round; }