/* Zedstar montage: a defense program office's records system (assets/zedstar/dash-defense.js builds it). DX Sidekick's
   Mission look: deep space with the red, white and blue slabs, frosted panes with a lit top edge, Geist for the interface,
   Geist Mono for codes, keys and times, Newsreader for titles and the company's name. The shell is a 64px icon rail and a
   row along the top (the Zedstar wordmark, the organization, breadcrumbs, search, the account).
   Scoped under .zs-d, every class prefixed zs-d-, drawn in a 1600x1000 design space the script scales to its host. The
   ground and the frost inside the panes are SVG images (data URIs) drawn once; nothing here uses backdrop-filter, SVG
   references or a CSS filter on anything that moves. Motion is transform, opacity and stroke-dashoffset only: arrivals
   280ms, exits 180ms, Sidekick's easing. */

.zs-d {
  --d-ground: #030509;
  --d-tint: rgba(12, 17, 29, .58);
  --d-rim: rgba(255, 255, 255, .08);
  --d-light: rgba(255, 255, 255, .1);
  --d-shadow: 0 30px 70px -30px rgba(0, 0, 0, .85), 0 2px 8px rgba(0, 0, 0, .3);
  --d-float: 0 24px 60px -24px rgba(0, 0, 0, .9), 0 2px 8px rgba(0, 0, 0, .35);
  --d-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%);
  --d-control: rgba(255, 255, 255, .05);
  --d-control-hover: rgba(255, 255, 255, .1);
  --d-control-line: rgba(255, 255, 255, .1);
  --d-solid: rgba(12, 17, 29, .66);
  --d-menu: rgba(11, 15, 24, .97);
  --d-fg: #eef2f8;
  --d-fg-2: #b3bdcf;
  --d-fg-3: #8795ae;
  --d-line: rgba(255, 255, 255, .07);
  --d-line-strong: rgba(255, 255, 255, .14);
  --d-accent: #e04a5c;
  --d-accent-text: #ff8b98;
  --d-accent-soft: rgba(224, 74, 92, .16);
  --d-ok: #9fb8d8;
  --d-ok-soft: rgba(159, 184, 216, .14);
  --d-ring: #9fb8d8;
  --d-btn: #c9384c;
  --d-ease: cubic-bezier(.2, .8, .2, 1);
  --d-out: cubic-bezier(.16, 1, .3, 1);
  --d-in: cubic-bezier(.55, 0, 1, .45);
  --d-sans: Geist, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --d-mono: "Geist Mono", ui-monospace, Menlo, monospace;
  --d-serif: Newsreader, Georgia, "Times New Roman", serif;
  position: absolute;
  left: 0;
  top: 0;
  width: 1600px;
  height: 1000px;
  overflow: hidden;
  transform-origin: 0 0;
  contain: layout paint;
  background: var(--d-ground);
  color: var(--d-fg);
  font: 400 14px/1.45 var(--d-sans);
  font-feature-settings: "ss01", "cv11";
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
  white-space: nowrap;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  user-select: none;
  pointer-events: none;
}
.zs-d *, .zs-d *::before, .zs-d *::after { box-sizing: border-box; margin: 0; padding: 0; }
.zs-d svg { display: block; flex: none; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.zs-d b, .zs-d i, .zs-d em { font-style: normal; font-weight: inherit; }
.zs-d img { display: block; max-width: none; }
.zs-d.is-instant, .zs-d.is-instant *, .zs-d.is-instant *::before, .zs-d.is-instant *::after { transition: none !important; }

/* ---- the ground and the glass ---- */
.zs-d-ground { position: absolute; inset: 0; background: var(--d-ground-img) 0 0 / 1600px 1000px no-repeat, var(--d-ground); }
/* a pane is the look's tint over the ground as the pane would see it through frost: the same slabs, blurred and
   saturated, drawn once into an image and laid exactly where the ground is */
.zs-d-pane {
  position: absolute;
  border: 1px solid var(--d-rim);
  border-radius: 22px;
  background:
    linear-gradient(var(--d-tint), var(--d-tint)),
    var(--d-frost-img) calc(-1px - var(--x)) calc(-1px - var(--y)) / 1600px 1000px no-repeat,
    var(--d-ground);
  box-shadow: inset 0 1px 0 var(--d-light), var(--d-shadow);
}
.zs-d-pane::after { content: ""; position: absolute; top: -1px; left: 28px; right: 28px; height: 1px; background: var(--d-edge); pointer-events: none; }

/* ---- the rail ---- */
.zs-d-rail { --x: 12px; --y: 12px; left: 12px; top: 12px; width: 64px; height: 976px; }
.zs-d-rail::after { left: 14px; right: 14px; }
.zs-d-tog { position: absolute; left: 13px; top: 11px; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 999px; color: var(--d-fg-2); }
.zs-d-tog svg { width: 18px; height: 18px; }
.zs-d-rule { position: absolute; left: 16px; right: 16px; top: 61px; height: 1px; background: var(--d-line); }
.zs-d-nav { position: absolute; left: 11px; top: 75px; width: 40px; }
.zs-d-rfoot { position: absolute; left: 11px; bottom: 7px; width: 40px; }
.zs-d-navlit { position: absolute; left: 0; top: 0; width: 40px; height: 40px; border-radius: 12px; background: var(--d-control); box-shadow: inset 0 0 0 1px var(--d-control-line); transition: transform 280ms var(--d-out); }
.zs-d-ni { position: relative; display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 4px; border-radius: 12px; color: var(--d-fg-3); }
.zs-d-ni::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--d-control); opacity: 0; transition: opacity 120ms var(--d-ease); }
.zs-d-ni.is-hover::before { opacity: .6; }
.zs-d-ni svg { position: relative; width: 19px; height: 19px; }
.zs-d-ni.is-on { color: var(--d-accent); }
.zs-d-ni.is-hover { color: var(--d-fg); }
.zs-d-ncount { position: absolute; right: -1px; top: 1px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--d-btn); color: #fff; font: 600 10px/16px var(--d-mono); text-align: center; box-shadow: 0 0 0 2px #0a0f1a; }

/* the rail's tooltip: a small floating label with the key that jumps there */
.zs-d-tip { position: absolute; left: 86px; top: 0; z-index: 6; display: flex; align-items: center; gap: 10px; height: 32px; padding: 0 5px 0 12px; border: 1px solid var(--d-rim); border-radius: 10px; background: var(--d-menu); box-shadow: inset 0 1px 0 var(--d-light), var(--d-float); font-size: 13px; font-weight: 500; opacity: 0; transform: translateX(-4px) scale(.98); transform-origin: 0 50%; transition: opacity 120ms var(--d-in), transform 120ms var(--d-in); }
.zs-d-tip.is-on { opacity: 1; transform: none; transition: opacity 160ms var(--d-out), transform 220ms var(--d-out); }
.zs-d-tip .zs-d-key { height: 20px; min-width: 20px; padding: 0 5px; }

/* keys */
.zs-d-keys { display: flex; gap: 4px; }
.zs-d-key { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 6px; background: var(--d-control); box-shadow: inset 0 0 0 1px var(--d-control-line); font: 400 11px/1 var(--d-mono); color: var(--d-fg-2); }
.zs-d-key svg { width: 11px; height: 11px; stroke-width: 2; }

/* ---- the row along the top ---- */
.zs-d-bar { position: absolute; left: 100px; top: 22px; height: 40px; display: flex; align-items: center; gap: 18px; }
.zs-d-brand { display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 500; letter-spacing: -.005em; }
.zs-d-wm { width: 84px; height: 14.9px; }
.zs-d-vr { display: block; width: 1px; height: 16px; background: var(--d-line-strong); }
.zs-d-bar > .zs-d-vr { height: 28px; background: var(--d-line); }
.zs-d-org { display: flex; align-items: center; gap: 12px; }
.zs-d-orgt { display: grid; }
.zs-d-orgl { font-size: 11.5px; line-height: 14px; color: var(--d-fg-3); }
.zs-d-orgn { font: 400 19px/23px var(--d-serif); color: var(--d-fg); }
.zs-d-org svg { width: 15px; height: 15px; margin-top: 12px; color: var(--d-fg-3); }
.zs-d-crumbs { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--d-fg-2); }
.zs-d-crumbs svg { width: 16px; height: 16px; color: var(--d-fg-3); }
.zs-d-crumbs .zs-d-sep { width: 14px; height: 14px; opacity: .7; }
.zs-d-crumbs .is-here { font-weight: 500; color: var(--d-fg); }
.zs-d-cui { display: inline-grid; place-items: center; height: 20px; margin-left: 4px; padding: 0 7px; border-radius: 6px; background: rgba(150, 112, 232, .16); box-shadow: inset 0 0 0 1px rgba(170, 140, 240, .3); font: 600 11px/1 var(--d-sans); letter-spacing: .04em; color: #d6c8ff; }

.zs-d-tools { position: absolute; right: 24px; top: 21px; height: 42px; display: flex; align-items: center; gap: 10px; }
.zs-d-search { position: relative; display: flex; align-items: center; gap: 10px; width: 330px; height: 38px; padding: 0 8px 0 14px; border: 1px solid var(--d-control-line); border-radius: 999px; background: var(--d-solid); font-size: 13.5px; color: var(--d-fg-3); transition: transform 90ms var(--d-ease); }
.zs-d-search > svg { position: relative; width: 16px; height: 16px; stroke-width: 1.7; }
.zs-d-search > span { position: relative; }
.zs-d-search .zs-d-keys { margin-left: auto; }
.zs-d-search.is-focus { border-color: var(--d-ring); box-shadow: 0 0 0 4px rgba(159, 184, 216, .22); }
.zs-d-search.zs-d .is-press { transform: scale(.97); }
.zs-d-hov { position: absolute; inset: -1px; border-radius: inherit; background: var(--d-control-hover); opacity: 0; transition: opacity 120ms var(--d-ease); }
.zs-d .is-hover > .zs-d-hov { opacity: 1; }
.zs-d-bell { position: relative; display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--d-control-line); border-radius: 999px; background: var(--d-solid); color: var(--d-fg-2); }
.zs-d-bell svg { width: 17px; height: 17px; }
.zs-d-bell i { position: absolute; right: 9px; top: 8px; width: 7px; height: 7px; border-radius: 999px; background: var(--d-accent); box-shadow: 0 0 0 2px #0d121e; }
.zs-d-acct { display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 12px 0 4px; border: 1px solid var(--d-control-line); border-radius: 999px; background: var(--d-solid); }
.zs-d-acct > svg { width: 16px; height: 16px; margin-left: 4px; color: var(--d-fg-3); }
.zs-d-acctt { display: grid; }
.zs-d-acctt > span:first-child { font-size: 13px; line-height: 16px; font-weight: 500; }
.zs-d-acctt > span:last-child { font-size: 12px; line-height: 15px; color: var(--d-fg-3); }

/* avatars: initials on a brand tint */
.zs-d-av { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 999px; background: color-mix(in srgb, #4f6a93 30%, rgba(255, 255, 255, .05)); box-shadow: inset 0 0 0 1px var(--d-control-line); font: 600 12px/1 var(--d-sans); letter-spacing: .01em; color: var(--d-fg); }
.zs-d-av.zs-d-t1 { background: color-mix(in srgb, #c9384c 30%, rgba(255, 255, 255, .05)); }
.zs-d-av.zs-d-t2 { background: color-mix(in srgb, #6f8cb5 30%, rgba(255, 255, 255, .05)); }
.zs-d-av.zs-d-t3 { background: color-mix(in srgb, #56688a 34%, rgba(255, 255, 255, .05)); }

/* ---- the page header ---- */
.zs-d-marker { position: absolute; left: 100px; top: 88px; display: flex; align-items: center; gap: 10px; font: 400 15px/15px var(--d-serif); color: var(--d-fg-2); }
.zs-d-marker::before { content: ""; width: 3px; height: 15px; border-radius: 2px; background: var(--d-accent); }
.zs-d-trow { position: absolute; left: 100px; top: 106px; height: 50px; display: flex; align-items: center; gap: 18px; }
.zs-d-title { font: 400 46px/50px var(--d-serif); letter-spacing: -.014em; }
.zs-d-lede { position: absolute; left: 100px; top: 164px; font-size: 15px; line-height: 24px; color: var(--d-fg-2); }
.zs-d-tabs { position: absolute; left: 100px; top: 206px; height: 36px; display: flex; gap: 4px; }
.zs-d-tablit { position: absolute; left: 0; top: 0; width: 100px; height: 36px; border-radius: 999px; background: var(--d-control); box-shadow: inset 0 0 0 1px var(--d-control-line); }
.zs-d-tab { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 16px; border-radius: 999px; font-size: 14px; color: var(--d-fg-2); }
.zs-d-tab:first-of-type { width: 100px; justify-content: center; }
.zs-d-tab.is-on { font-weight: 500; color: var(--d-fg); }
.zs-d-tcount { font: 400 11px/1 var(--d-mono); color: var(--d-fg-3); }
.zs-d-acts { position: absolute; right: 24px; top: 111px; display: flex; gap: 10px; }

/* buttons: pills that press to 97% */
.zs-d-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 18px; border: 1px solid transparent; border-radius: 999px; font-size: 14px; font-weight: 500; letter-spacing: -.005em; transition: transform 90ms var(--d-ease); }
.zs-d-btn > svg { position: relative; width: 16px; height: 16px; }
.zs-d-btn > span { position: relative; }
.zs-d-sec { border-color: var(--d-control-line); background: var(--d-solid); color: var(--d-fg); }
.zs-d-sec > svg { color: var(--d-fg-2); }
.zs-d-quiet { background: transparent; color: var(--d-fg-2); }
.zs-d-quiet > svg { color: var(--d-fg-3); }
.zs-d-quiet > .zs-d-hov { inset: 0; background: var(--d-control); }
.zs-d-quiet.is-hover { color: var(--d-fg); }
.zs-d .is-press { transform: scale(.97); }
/* the primary: crimson while it can be pressed, a quiet "Approved" pill once it has been */
.zs-d-go { position: relative; width: 174px; height: 40px; transition: transform 90ms var(--d-ease); }
.zs-d-go > span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 999px; font-size: 14px; font-weight: 500; letter-spacing: -.005em; }
.zs-d-go > span > svg { position: relative; width: 16px; height: 16px; }
.zs-d-go > span > span { position: relative; }
.zs-d-goa { background: var(--d-btn); color: #fff; box-shadow: 0 8px 24px -10px rgba(201, 56, 76, .7); opacity: .5; transition: opacity 180ms var(--d-in); }
.zs-d-goa > .zs-d-hov { inset: 0; background: rgba(255, 255, 255, .08); }
.zs-d-god { border: 1px solid var(--d-control-line); background: var(--d-solid); color: var(--d-fg); opacity: 0; transition: opacity 180ms var(--d-in); }
.zs-d-god > svg { color: var(--d-ok); }
.zs-d-go.is-ready .zs-d-goa { opacity: 1; transition: opacity 280ms var(--d-out); }
.zs-d-go.is-done .zs-d-goa { opacity: 0; }
.zs-d-go.is-done .zs-d-god { opacity: 1; transition: opacity 280ms var(--d-out) 150ms; }

/* status pills with a dot */
.zs-d-badge { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 999px; background: var(--d-control); box-shadow: inset 0 0 0 1px var(--d-control-line); font-size: 12px; font-weight: 500; color: var(--d-fg-2); }
.zs-d-badge::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
.zs-d-badge.is-ok { background: var(--d-ok-soft); box-shadow: none; color: var(--d-ok); }
.zs-d-badge.is-accent { background: var(--d-accent-soft); box-shadow: none; color: var(--d-accent-text); }
.zs-d-badge.is-plain::before { display: none; }
.zs-d-badge.is-plain-dot::before { background: var(--d-ok); }
.zs-d-state { display: grid; }
.zs-d-state > span { grid-area: 1 / 1; justify-self: start; }

/* text and pills that change in place: the old one leaves upward while the new one rises in */
.zs-d-swap { display: inline-grid; }
.zs-d-swap > span { grid-area: 1 / 1; transition: opacity 280ms var(--d-out) 100ms, transform 280ms var(--d-out) 100ms; }
.zs-d-swap > span.is-out { opacity: 0; transform: translateY(-5px); transition: opacity 180ms var(--d-in), transform 180ms var(--d-in); }
.zs-d-swap > span.is-pre { opacity: 0; transform: translateY(5px); transition: none; }

/* pages arrive in reading order (Sidekick's rise), and leave faster than they came */
.zs-d-rise { transition: opacity 280ms var(--d-out) calc(var(--i, 0) * 45ms), transform 280ms var(--d-out) calc(var(--i, 0) * 45ms); }
.zs-d.is-away .zs-d-rise { opacity: 0; transition: opacity 180ms var(--d-in), transform 180ms var(--d-in); }
.zs-d.is-from .zs-d-rise { opacity: 0; transform: translateY(12px); }

/* ---- panes: shared head ---- */
.zs-d-ph { display: flex; align-items: center; justify-content: space-between; height: 36px; }
.zs-d-pt { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.zs-d-pc { font-size: 14px; font-weight: 400; letter-spacing: 0; color: var(--d-fg-3); }
.zs-d-pr { display: flex; align-items: center; gap: 14px; }
.zs-d-chip { display: inline-flex; align-items: center; height: 22px; padding: 0 7px; border-radius: 6px; background: var(--d-control); box-shadow: inset 0 0 0 1px var(--d-control-line); font: 400 11.5px/1 var(--d-mono); letter-spacing: 0; color: var(--d-fg-2); }

/* ---- the evidence matrix ---- */
.zs-d-mx { --x: 100px; --y: 268px; left: 100px; top: 268px; width: 856px; height: 708px; padding: 27px; }
.zs-d-prog { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--d-fg-2); }
.zs-d-prog b { font-weight: 500; color: var(--d-fg); }
.zs-d-progbar { position: relative; width: 96px; height: 4px; overflow: hidden; border-radius: 999px; background: var(--d-control-line); }
.zs-d-progbar > i { position: absolute; inset: 0; border-radius: inherit; background: var(--d-ok); transform-origin: 0 50%; transition: transform 420ms var(--d-out); }
.zs-d-seg { position: relative; display: flex; padding: 3px; border-radius: 999px; background: var(--d-control); box-shadow: inset 0 0 0 1px var(--d-control-line); }
.zs-d-seglit { position: absolute; left: 3px; top: 3px; width: 82px; height: 30px; border-radius: 999px; background: var(--d-control-hover); box-shadow: 0 1px 2px rgba(10, 17, 32, .3), inset 0 0 0 1px var(--d-control-line); transition: transform 280ms var(--d-out); }
.zs-d-seg > span { position: relative; display: flex; align-items: center; justify-content: center; gap: 7px; width: 82px; height: 30px; font-size: 13px; color: var(--d-fg-2); }
.zs-d-seg > span.is-on { font-weight: 500; color: var(--d-fg); }
.zs-d-segc { font: 400 11px/1 var(--d-mono); color: var(--d-fg-3); }
.zs-d-th, .zs-d-row { display: grid; grid-template-columns: 74px 276px 116px 164px 1fr 28px; align-items: center; padding: 0 12px; }
.zs-d-th { height: 30px; margin: 18px -12px 0; font-size: 12px; font-weight: 500; color: var(--d-fg-3); }
.zs-d-rows { margin: 0 -12px; }
.zs-d-row { position: relative; height: 46px; transition: opacity 280ms var(--d-out); }
.zs-d-row::before { content: ""; position: absolute; inset: 0; border-radius: 12px; background: var(--d-control); opacity: 0; transition: opacity 120ms var(--d-ease); }
.zs-d-row::after { content: ""; position: absolute; left: 12px; right: 12px; top: 0; height: 1px; background: var(--d-line); transition: opacity 120ms var(--d-ease); }
.zs-d-row:first-child::after, .zs-d-row.is-lit::after, .zs-d-row.is-lit + .zs-d-row::after { opacity: 0; }
.zs-d-row.is-lit::before { opacity: 1; }
.zs-d-row.is-hit::before { background: var(--d-control-hover); }
.zs-d-mx.is-focus .zs-d-row:not(.is-hit) { opacity: .34; transition-duration: 180ms; }
.zs-d-row > span { position: relative; overflow: hidden; text-overflow: ellipsis; }
.zs-d-rid { font: 400 12.5px/1 var(--d-mono); color: var(--d-fg-3); }
.zs-d-rm { font-size: 13px; color: var(--d-fg-2); }
.zs-d-ev { display: flex; align-items: center; gap: 7px; font: 400 12.5px/1 var(--d-mono); color: var(--d-fg-2); }
.zs-d-ev > svg { width: 14px; height: 14px; color: var(--d-fg-3); transition: opacity 280ms var(--d-out); }
.zs-d-ev.is-none > svg { opacity: 0; }
.zs-d-ev .zs-d-none { font: 400 13px/1 var(--d-sans); color: var(--d-fg-3); }
.zs-d-st { display: grid; overflow: visible !important; }
.zs-d-st > span { grid-area: 1 / 1; justify-self: start; transition: opacity 280ms var(--d-out) 100ms, transform 280ms var(--d-out) 100ms; }
.zs-d-st > span.is-out { opacity: 0; transform: translateY(-5px); transition: opacity 180ms var(--d-in), transform 180ms var(--d-in); }
.zs-d-st > span.is-pre { opacity: 0; transform: translateY(5px); transition: none; }
.zs-d-ver { display: inline-flex; align-items: center; gap: 7px; height: 24px; font-size: 13px; color: var(--d-fg-3); }
.zs-d-ver > svg { width: 14px; height: 14px; stroke-width: 2; color: var(--d-ok); }
.zs-d-more { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 999px; color: var(--d-fg-2); opacity: 0; transition: opacity 120ms var(--d-ease), transform 90ms var(--d-ease); }
.zs-d-more::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--d-control-hover); opacity: 0; transition: opacity 120ms var(--d-ease); }
.zs-d-more > svg { position: relative; width: 16px; height: 16px; stroke-width: 2.2; }
.zs-d-row.is-lit .zs-d-more { opacity: 1; }
.zs-d-more.is-open::before, .zs-d-more.is-hover::before { opacity: 1; }

/* ---- release checks ---- */
.zs-d-rel { --x: 980px; --y: 268px; left: 980px; top: 268px; width: 596px; height: 288px; padding: 27px; }
.zs-d-stack { display: flex; }
.zs-d-stack > .zs-d-av { width: 28px; height: 28px; margin-left: -4px; background: #2a3a54; font-size: 10.5px; box-shadow: inset 0 0 0 1px var(--d-control-line), 0 0 0 2px #101726; }
.zs-d-stack > .zs-d-av.zs-d-t2 { background: #34496a; }
.zs-d-stack > .zs-d-av.zs-d-t3 { background: #2c3850; }
.zs-d-stack > .zs-d-av:first-child { margin-left: 0; }
.zs-d-checks { margin-top: 12px; }
.zs-d-ck { position: relative; display: flex; align-items: center; gap: 12px; height: 36px; }
.zs-d-ck + .zs-d-ck::after { content: ""; position: absolute; left: 32px; right: 0; top: 0; height: 1px; background: var(--d-line); }
.zs-d-ckt { font-size: 14px; color: var(--d-fg); }
.zs-d-ck.is-ok .zs-d-ckt { color: var(--d-fg-2); }
.zs-d-ckw { margin-left: auto; font-size: 12.5px; color: var(--d-fg-3); }
.zs-d-ckw > span { justify-self: end; }
/* a check's mark: an empty ring, the ring with a dot while it is the one in hand, a soft disc with a tick once done */
.zs-d-mark { position: relative; width: 20px; height: 20px; flex: none; }
.zs-d-mark > i { position: absolute; inset: 0; border-radius: 999px; transition: opacity 280ms var(--d-out), transform 280ms var(--d-out); }
.zs-d-mk0 { box-shadow: inset 0 0 0 1.5px var(--d-line-strong); }
.zs-d-mk0::after { content: ""; position: absolute; left: 6px; top: 6px; width: 8px; height: 8px; border-radius: 999px; background: var(--d-ok); opacity: 0; transform: scale(.4); transition: opacity 280ms var(--d-out), transform 280ms var(--d-out); }
.zs-d-ck.is-now .zs-d-mk0 { box-shadow: inset 0 0 0 1.5px var(--d-ok); }
.zs-d-ck.is-now .zs-d-mk0::after { opacity: 1; transform: none; }
.zs-d-mk1 { display: grid; place-items: center; background: var(--d-ok-soft); color: var(--d-ok); opacity: 0; transform: scale(.7); }
.zs-d-mk1 svg { width: 12px; height: 12px; stroke-width: 2.2; }
.zs-d-mk1 path { stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset 360ms var(--d-out) 120ms; }
.zs-d-ck.is-ok .zs-d-mk0 { opacity: 0; }
.zs-d-ck.is-ok .zs-d-mk1 { opacity: 1; transform: none; }
.zs-d-ck.is-ok .zs-d-mk1 path { stroke-dashoffset: 0; }

/* ---- agents and their activity ---- */
.zs-d-ag { --x: 980px; --y: 580px; left: 980px; top: 580px; width: 596px; height: 396px; padding: 27px; }
.zs-d-swl { font-size: 13px; color: var(--d-fg-2); }
.zs-d-switch { position: relative; width: 38px; height: 22px; border-radius: 999px; background: var(--d-control-line); }
.zs-d-switch.is-on { background: var(--d-btn); }
.zs-d-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); }
.zs-d-switch.is-on > i { transform: translateX(16px); }
.zs-d-agents { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; margin-top: 12px; }
.zs-d-agent { display: flex; align-items: center; gap: 12px; height: 44px; }
.zs-d-ad { position: relative; display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 999px; background: color-mix(in srgb, #4f6a93 26%, rgba(255, 255, 255, .05)); box-shadow: inset 0 0 0 1px var(--d-control-line); color: var(--d-fg); }
.zs-d-ad > svg { width: 17px; height: 17px; }
.zs-d-ring { position: absolute; inset: -4px; border-radius: 999px; box-shadow: 0 0 0 1.5px currentColor; color: var(--d-ok); opacity: 0; transition: opacity 280ms var(--d-out); }
.zs-d-agent.is-work .zs-d-ring { opacity: .3; }
.zs-d-agent.is-wait .zs-d-ring { color: var(--d-line-strong); opacity: 1; }
.zs-d-agent.is-person .zs-d-ring { color: var(--d-accent); opacity: .9; }
/* a working agent's ring breathes outward on the dashboard's clock (no CSS transition on it) */
.zs-d-pulse { position: absolute; inset: -4px; border-radius: 999px; box-shadow: 0 0 0 1.5px var(--d-ok); opacity: 0; }
.zs-d-adone { position: absolute; right: -3px; bottom: -3px; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 999px; background: #1d2a3e; box-shadow: 0 0 0 2px #0f1522; color: var(--d-ok); opacity: 0; transform: scale(.6); transition: opacity 280ms var(--d-out), transform 280ms var(--d-out); }
.zs-d-adone svg { width: 10px; height: 10px; stroke-width: 2.6; }
.zs-d-agent.is-done .zs-d-adone { opacity: 1; transform: none; }
.zs-d-at { display: grid; min-width: 0; }
.zs-d-an { font-size: 13.5px; font-weight: 500; line-height: 18px; }
.zs-d-as { font-size: 12.5px; line-height: 17px; color: var(--d-fg-3); }
.zs-d-as > span.is-person { color: var(--d-accent-text); }
.zs-d-feedh { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; padding-top: 8px; border-top: 1px solid var(--d-line); font-size: 13px; font-weight: 500; color: var(--d-fg-2); }
.zs-d-feedh > .zs-d-btn { height: 28px; margin-right: -10px; padding: 0 10px; gap: 6px; font-size: 13px; }
.zs-d-feedh > .zs-d-btn > svg { width: 14px; height: 14px; }
.zs-d-feed { position: relative; height: 144px; margin-top: 4px; overflow: hidden; }
.zs-d-fi { position: absolute; left: 0; top: 0; right: 0; display: flex; align-items: center; gap: 10px; height: 36px; transition: transform 280ms var(--d-out), opacity 280ms var(--d-out); }
.zs-d-fi.is-pre { opacity: 0; transition: none; }
.zs-d-fi.is-gone { opacity: 0; transition: transform 280ms var(--d-out), opacity 180ms var(--d-in); }
.zs-d-fa { display: grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 999px; background: color-mix(in srgb, #4f6a93 26%, rgba(255, 255, 255, .05)); box-shadow: inset 0 0 0 1px var(--d-control-line); color: var(--d-fg-2); font: 600 9.5px/1 var(--d-sans); }
.zs-d-fa > svg { width: 13px; height: 13px; }
.zs-d-fa.zs-d-t1 { background: color-mix(in srgb, #c9384c 30%, rgba(255, 255, 255, .05)); color: var(--d-fg); }
.zs-d-fa.zs-d-t2 { background: color-mix(in srgb, #6f8cb5 30%, rgba(255, 255, 255, .05)); color: var(--d-fg); }
.zs-d-ft { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 13.5px; line-height: 22px; color: var(--d-fg-2); }
.zs-d-ft b { font-weight: 500; color: var(--d-fg); }
.zs-d-ft i { display: inline-flex; align-items: center; height: 20px; margin: 0 1px; padding: 0 6px; vertical-align: 1px; border-radius: 6px; background: var(--d-control); box-shadow: inset 0 0 0 1px var(--d-control-line); font: 400 11.5px/1 var(--d-mono); color: var(--d-fg-2); }
.zs-d-fm { margin-left: auto; font: 400 12px/1 var(--d-mono); color: var(--d-fg-3); }

/* ---- the command menu ---- */
.zs-d-scrim { position: absolute; inset: 0; z-index: 10; background: rgba(0, 0, 0, .4); opacity: 0; transition: opacity 180ms var(--d-in); }
.zs-d-scrim.is-on { opacity: 1; transition: opacity 220ms var(--d-out); }
.zs-d-pal { position: absolute; left: 558px; top: 112px; z-index: 11; width: 560px; height: 388px; border: 1px solid var(--d-rim); border-radius: 22px; background: linear-gradient(rgba(10, 14, 22, .93), rgba(10, 14, 22, .93)), var(--d-frost-img) -559px -113px / 1600px 1000px no-repeat, var(--d-ground); box-shadow: inset 0 1px 0 var(--d-light), var(--d-shadow); opacity: 0; transform: translateY(12px) scale(.98); transition: opacity 180ms var(--d-in), transform 180ms var(--d-in); }
.zs-d-pal::after { content: ""; position: absolute; top: -1px; left: 28px; right: 28px; height: 1px; background: var(--d-edge); }
.zs-d-pal.is-on { opacity: 1; transform: none; transition: opacity 260ms var(--d-out), transform 320ms var(--d-out); }
.zs-d-pf { position: relative; height: 58px; border-bottom: 1px solid var(--d-line); }
.zs-d-pf > svg { position: absolute; left: 18px; top: 20px; width: 18px; height: 18px; stroke-width: 1.7; color: var(--d-fg-3); }
.zs-d-pq { position: absolute; left: 50px; top: 0; height: 58px; display: flex; align-items: center; font-size: 16px; }
.zs-d-pph { position: absolute; left: 0; top: 18px; line-height: 22px; color: var(--d-fg-3); }
.zs-d-pq.is-typed .zs-d-pph { visibility: hidden; }
.zs-d-caret { display: inline-block; width: 1.5px; height: 20px; margin-left: 1px; background: var(--d-fg); }
.zs-d-sweep { position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; overflow: hidden; opacity: 0; transition: opacity 180ms var(--d-in); }
.zs-d-sweep.is-on { opacity: 1; transition: opacity 280ms var(--d-out); }
.zs-d-sweep > i { position: absolute; left: 0; top: 0; width: 180px; height: 1px; background: linear-gradient(90deg, transparent, var(--d-ok), transparent); }
.zs-d-pl { position: relative; height: 284px; }
.zs-d-ps { position: absolute; inset: 0; padding: 6px; transition: opacity 280ms var(--d-out) 140ms, transform 280ms var(--d-out) 140ms; }
.zs-d-ps.is-out { opacity: 0; transform: translateY(-4px); transition: opacity 180ms var(--d-in), transform 180ms var(--d-in); }
.zs-d-ps.is-pre { opacity: 0; transform: translateY(6px); }
.zs-d-ml { padding: 9px 12px 7px; font-size: 12px; font-weight: 500; line-height: 14px; color: var(--d-fg-3); }
.zs-d-ci { position: relative; display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 6px 12px; border-radius: 12px; font-size: 14px; transition: transform 90ms var(--d-ease); }
.zs-d-ci::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--d-control-hover); opacity: 0; transition: opacity 120ms var(--d-ease); }
.zs-d-ci.is-on::before { opacity: 1; }
.zs-d-ci > svg { position: relative; width: 18px; height: 18px; color: var(--d-fg-3); }
.zs-d-ci.is-on > svg { color: var(--d-accent); }
.zs-d-ci > span { position: relative; }
.zs-d-cit { display: grid; min-width: 0; flex: 1; }
.zs-d-cit > span:last-child:not(:first-child) { font-size: 12px; line-height: 16px; color: var(--d-fg-3); }
.zs-d-cir { margin-left: auto; font: 400 11px/1 var(--d-mono); color: var(--d-fg-3); }
.zs-d-ci .zs-d-key { position: relative; }
.zs-d .zs-d-ci.is-press { transform: scale(.985); }
.zs-d-ans { display: flex; gap: 12px; padding: 2px 12px 0; }
.zs-d-ansi { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 999px; background: var(--d-accent-soft); color: var(--d-accent-text); }
.zs-d-ansi svg { width: 15px; height: 15px; }
.zs-d-anst { position: relative; flex: 1; height: 54px; white-space: normal; font-size: 14px; line-height: 22px; }
.zs-d-anst > span { position: absolute; left: 0; top: 3px; right: 0; transition: opacity 180ms var(--d-in); }
.zs-d-think { display: flex; align-items: center; gap: 8px; color: var(--d-fg-3); }
.zs-d-think i { width: 4px; height: 4px; border-radius: 999px; background: var(--d-fg-3); }
.zs-d-anst.is-said .zs-d-think { opacity: 0; }
.zs-d-word { opacity: 0; transition: opacity 280ms var(--d-out); }
.zs-d-word.is-on { opacity: 1; }
.zs-d-up { opacity: 0; transform: translateY(6px); transition: opacity 280ms var(--d-out), transform 280ms var(--d-out); }
.zs-d-up.is-on { opacity: 1; transform: none; }
.zs-d-stage { position: relative; height: 192px; }
.zs-d-read, .zs-d-res { position: absolute; left: 0; right: 0; top: 0; }
.zs-d-read { padding: 6px 12px 0 52px; transition: opacity 180ms var(--d-in), transform 180ms var(--d-in); }
.zs-d-read.is-out { opacity: 0; transform: translateY(-4px); }
.zs-d-rd { display: flex; align-items: center; gap: 10px; height: 32px; font-size: 13px; color: var(--d-fg-3); opacity: 0; transform: translateY(6px); transition: opacity 280ms var(--d-out), transform 280ms var(--d-out); }
.zs-d-rd.is-on { opacity: 1; transform: none; }
.zs-d-rd > svg { width: 14px; height: 14px; }
.zs-d-rdc { font: 400 12px/1 var(--d-mono); color: var(--d-fg-2); }
.zs-d-rdt { display: grid; place-items: center; width: 16px; height: 16px; margin-left: auto; border-radius: 999px; background: var(--d-ok-soft); color: var(--d-ok); opacity: 0; transform: scale(.6); transition: opacity 280ms var(--d-out), transform 280ms var(--d-out); }
.zs-d-rdt svg { width: 10px; height: 10px; stroke-width: 2.6; }
.zs-d-rd.is-read .zs-d-rdt { opacity: 1; transform: none; }
.zs-d-src { display: flex; align-items: center; gap: 8px; margin: 8px 0 0 52px; font-size: 12px; color: var(--d-fg-3); }
.zs-d-src > .zs-d-chip { gap: 6px; height: 24px; padding: 0 8px; font-size: 12px; color: var(--d-fg); }
.zs-d-src > .zs-d-chip svg { width: 13px; height: 13px; color: var(--d-fg-3); }
.zs-d-prop { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 12px; font-size: 13.5px; color: var(--d-fg-2); }
.zs-d-prop > .zs-d-chip { color: var(--d-fg); }
.zs-d-cbox { display: grid; place-items: center; width: 18px; height: 18px; flex: none; border-radius: 6px; background: var(--d-btn); color: #fff; }
.zs-d-cbox svg { width: 12px; height: 12px; stroke-width: 2.6; }
.zs-d-pfoot { display: flex; align-items: center; gap: 16px; height: 44px; padding: 0 16px; border-top: 1px solid var(--d-line); font-size: 12px; color: var(--d-fg-3); }
.zs-d-pfoot > span { display: flex; align-items: center; gap: 6px; }
.zs-d-pfoot > span:last-child { margin-left: auto; }
.zs-d-pfoot > span:last-child svg { width: 13px; height: 13px; }

/* ---- a row's menu ---- */
.zs-d-menu { position: absolute; left: 692px; top: 561px; z-index: 12; width: 236px; padding: 6px; border: 1px solid var(--d-rim); border-radius: 16px; background: var(--d-menu); box-shadow: inset 0 1px 0 var(--d-light), var(--d-float); opacity: 0; transform: translateY(-4px) scale(.98); transform-origin: 100% 0; transition: opacity 140ms var(--d-in), transform 140ms var(--d-in); }
.zs-d-menu.is-on { opacity: 1; transform: none; transition: opacity 200ms var(--d-out), transform 260ms var(--d-out); }
.zs-d-mlit { position: absolute; left: 6px; top: 6px; right: 6px; height: 36px; border-radius: 10px; background: var(--d-control-hover); opacity: 0; transition: transform 160ms var(--d-out), opacity 120ms var(--d-ease); }
.zs-d-mlit.is-on { opacity: 1; }
.zs-d-mi { position: relative; display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 10px; font-size: 13.5px; }
.zs-d-mi > svg { width: 16px; height: 16px; color: var(--d-fg-3); }
.zs-d-mh { display: flex; align-items: center; gap: 3px; margin-left: auto; font: 400 11px/1 var(--d-mono); color: var(--d-fg-3); }
.zs-d-mh svg { width: 11px; height: 11px; }
.zs-d-mi .zs-d-cbox { width: 16px; height: 16px; margin-left: auto; border-radius: 5px; }
.zs-d-mi .zs-d-cbox svg { width: 10px; height: 10px; }
.zs-d-msep { height: 1px; margin: 6px; background: var(--d-line); }

/* ---- the toast: Sidekick's, a pill at the bottom center that rises in and leaves faster than it came ---- */
.zs-d-toaster { position: absolute; left: 0; right: 0; bottom: 22px; z-index: 13; display: flex; justify-content: center; }
.zs-d-toast { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 10px 18px 10px 14px; border: 1px solid var(--d-rim); border-radius: 999px; background: var(--d-menu); box-shadow: inset 0 1px 0 var(--d-light), var(--d-float); font-size: 14px; opacity: 0; transform: translateY(14px) scale(.96); transition: opacity 180ms var(--d-in), transform 180ms var(--d-in); }
.zs-d-toast.is-on { opacity: 1; transform: none; transition: opacity 280ms var(--d-out), transform 280ms var(--d-out); }
.zs-d-toast > i { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 999px; background: var(--d-ok-soft); color: var(--d-ok); }
.zs-d-toast > i svg { width: 12px; height: 12px; stroke-width: 2.2; }

/* ---- the pointer ---- */
.zs-d-cur { position: absolute; left: 0; top: 0; z-index: 20; width: 24px; height: 35px; margin: -2px 0 0 -2px; transition: opacity 180ms var(--d-in); }
.zs-d-cur.is-hid { opacity: 0; }
.zs-d-cur svg { width: 24px; height: 35px; stroke: none; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .5)); }
.zs-d-rip { position: absolute; left: -16px; top: -16px; width: 36px; height: 36px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px rgba(238, 242, 248, .8); opacity: 0; transform: scale(1.3); transition: opacity 420ms var(--d-out), transform 420ms var(--d-out); }
.zs-d-rip.is-pre { opacity: .9; transform: scale(.35); transition: none; }

@media (prefers-reduced-motion: reduce) {
  .zs-d *, .zs-d *::before, .zs-d *::after { transition: none !important; }
}