/* The command post's five live screens on the Zedstar hero (built by assets/zedstar/screens.js inside the hero's picture,
   .t-img, so the camera and the scroll's drift carry them with the painting). They show the hero's company's system,
   Acme Corp.'s Site operations, in DX Sidekick's Mission look, lit: the painted screen's own glow is the ground, with
   Mission's red, white and blue slabs over it and navy glass panes on top, so each screen still reads as the light the
   painter put there. Every size is in the painting's own pixels (each screen is laid out at its painted size and fitted
   to its four painted corners by a matrix3d), and the system is drawn at about 0.45 of Sidekick's own sizes: a 264 px
   sidebar is 118 px here, a 40 px nav row 18 px. Faces from assets/zedstar/fonts.css: Geist for the interface, Geist
   Mono for keys, codes and times, Newsreader for titles, figures and the company's name. */
.zsc-screens { position: absolute; inset: 0; pointer-events: none; }
.zsc-scr {
  /* Mission, as the Site operations system draws it (ground #030509, panes #0a0f1a, menus #0c101a, text #eef2f8,
     #b3bdcf and #8795ae, crimson #e04a5c, buttons #c9384c, ice #9fb8d8), each kept to its own hue and lifted toward the
     painted screen's glow, so the screen stays the light the painter gave it; rims, lines and controls keep Mission's
     proportions to each other at a strength that shows on the brighter ground */
  --fg: #eef2f8; --fg-2: #cdd4df; --fg-3: #b0b9ca; --fg-4: #97a4b9;
  --line: rgba(255, 255, 255, .1); --line-2: rgba(255, 255, 255, .17);
  --glass: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02) 40%), rgba(10, 15, 26, .2); --rim: rgba(255, 255, 255, .12); --spec: rgba(255, 255, 255, .15);
  --control: rgba(255, 255, 255, .075); --control-hover: rgba(255, 255, 255, .14); --control-line: rgba(255, 255, 255, .15);
  --field: rgba(10, 15, 26, .24); --field-line: rgba(255, 255, 255, .17);
  --accent: #e04a5c; --accent-text: #ff8b98; --accent-soft: rgba(224, 74, 92, .2); --button: #c9384c; --button-hover: #d04157; --button-press: #b32a44;
  --ice: #9fb8d8; --ice-2: #b8cfe5; --ok-soft: rgba(159, 184, 216, .2); --menu: rgba(31, 41, 66, .9);
  --serif: Newsreader, Georgia, serif; --mono: "Geist Mono", ui-monospace, Menlo, monospace;
  --feather: 7px;
  position: absolute; left: 0; top: 0; display: none; overflow: hidden; opacity: 0; transform-origin: 0 0;
  background-size: 100% 100%; color: var(--fg);
  font: 400 6.4px/1.3 Geist, "Helvetica Neue", Arial, sans-serif; letter-spacing: -.005em; font-kerning: normal; -webkit-font-smoothing: antialiased;
  /* (the painted screen's own rim shows at the edge, and the screen fades in from it over a few pixels) */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--feather), #000 calc(100% - var(--feather)), transparent), linear-gradient(transparent, #000 var(--feather), #000 calc(100% - var(--feather)), transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 var(--feather), #000 calc(100% - var(--feather)), transparent), linear-gradient(transparent, #000 var(--feather), #000 calc(100% - var(--feather)), transparent);
  mask-composite: intersect;
}
.zsc-scr.is-on { display: block; }
/* the fifth screen sits behind the client's helmet: it is drawn through the helmet's outline (--helmet, set by the script) */
.zsc-scr.zsc-s5 {
  -webkit-mask-image: var(--helmet), linear-gradient(90deg, transparent, #000 var(--feather), #000 calc(100% - var(--feather)), transparent), linear-gradient(transparent, #000 var(--feather), #000 calc(100% - var(--feather)), transparent);
  -webkit-mask-size: 100% 100%;
  -webkit-mask-composite: source-in, source-in;
  mask-image: var(--helmet), linear-gradient(90deg, transparent, #000 var(--feather), #000 calc(100% - var(--feather)), transparent), linear-gradient(transparent, #000 var(--feather), #000 calc(100% - var(--feather)), transparent);
  mask-size: 100% 100%;
  mask-composite: intersect;
}
/* what the screen shows, a little soft, as the painting's screens are */
.zsc-ui { position: absolute; inset: 0; filter: blur(var(--soft, .4px)); }
.zsc-a { position: absolute; white-space: nowrap; }
.zsc-scr i, .zsc-scr b, .zsc-scr em { font-style: normal; }
.zsc-scr svg { stroke: none; stroke-width: 1; fill: none; overflow: visible; }   /* (the site draws its icons' svg with currentColor strokes: none here unless a shape asks) */
.zsc-i { stroke: currentColor !important; stroke-width: 2.3 !important; stroke-linecap: round; stroke-linejoin: round; color: var(--fg-3); }

/* the ground: Mission's slabs, lit, over the painted screen's glow; deeper at the left, where the sidebar stands */
.zsc-ground { position: absolute; inset: 0; background: radial-gradient(80% 70% at 56% 44%, rgba(178, 206, 255, .32), rgba(178, 206, 255, .12) 55%, transparent 82%), linear-gradient(90deg, rgba(3, 5, 9, .1), rgba(3, 5, 9, 0) 40%); }
.zsc-slabs { position: absolute; inset: -10% -10% 0 30%;
  background: linear-gradient(116deg, transparent 0 40%, rgba(184, 50, 75, .55) 40% 44%, rgba(206, 75, 98, .75) 44% 49%, transparent 49% 53%, rgba(169, 177, 188, .5) 53% 56.5%, rgba(204, 208, 215, .62) 56.5% 59.5%, transparent 59.5% 63%, rgba(69, 118, 217, .5) 63% 70%, transparent 70% 72.5%, rgba(103, 143, 224, .45) 72.5% 80%, transparent 80% 83%, rgba(69, 118, 217, .38) 83% 92%, transparent 92%);
  -webkit-mask-image: linear-gradient(200deg, #000 25%, rgba(0, 0, 0, .35) 55%, transparent 80%); mask-image: linear-gradient(200deg, #000 25%, rgba(0, 0, 0, .35) 55%, transparent 80%); }

/* panes of glass: tint, a 1px rim, a light along the inside of the top edge, a deep soft shadow, and Mission's ribbon
   along the top: red, white and blue */
.zsc-glass { border-radius: 10px; background: var(--glass); box-shadow: inset 0 0 0 1px var(--rim), inset 0 1.5px 0 var(--spec), 0 12px 24px -14px rgba(0, 4, 18, .5), 0 1px 3px rgba(0, 4, 18, .18); }
.zsc-glass::after { content: ""; position: absolute; top: 0; left: 12px; right: 12px; height: 1px; background: linear-gradient(90deg, transparent 4%, rgba(224, 74, 92, .9) 26%, rgba(255, 255, 255, .95) 50%, rgba(111, 140, 181, .95) 74%, transparent 96%); }

/* the sidebar: the product beside the Zedstar wordmark, the organisation, search, the nav with its one lit tab, the account */
.zsc-wm { height: auto; }
.zsc-vr { width: 1px; background: var(--line-2); }
.zsc-sys { font-size: 6.2px; font-weight: 500; color: var(--fg-2); }
.zsc-lab { font-size: 5.2px; font-weight: 500; color: var(--fg-3); }
.zsc-org { font: 400 9.6px/1.1 var(--serif); letter-spacing: -.005em; color: var(--fg); }
.zsc-search { height: 16px; border-radius: 6px; background: var(--control); box-shadow: inset 0 0 0 1px var(--control-line); }
.zsc-search svg { position: absolute; left: 5px; top: 4.5px; width: 7px; height: 7px; }
.zsc-search span { position: absolute; left: 15px; top: 4.2px; font-size: 6px; color: var(--fg-3); }
.zsc-key { position: absolute; top: 3.5px; height: 8px; min-width: 7px; padding: 0 1.5px; border-radius: 2px; box-shadow: inset 0 0 0 .6px var(--line-2), 0 .6px 0 var(--line-2); font: 500 4.6px/8px var(--mono); text-align: center; color: var(--fg-3); }
.zsc-nav .zsc-row { position: absolute; left: 0; right: 0; height: 18px; border-radius: 5.4px; font-size: 6.4px; line-height: 18px; color: var(--fg-2); }
.zsc-nav .zsc-row svg { position: absolute; left: 5.5px; top: 5px; width: 8px; height: 8px; }
.zsc-nav .zsc-row span { position: absolute; left: 19px; top: 0; }
.zsc-nav .zsc-row.is-on { color: var(--fg); font-weight: 500; }
.zsc-nav .zsc-row.is-on svg { color: var(--accent); }
.zsc-lit { position: absolute; left: 0; right: 0; top: 0; height: 18px; border-radius: 5.4px; background: var(--control); box-shadow: inset 0 0 0 .7px var(--control-line); will-change: transform; }
.zsc-count { position: absolute; right: 5px; top: 4.6px; min-width: 9px; height: 9px; padding: 0 2.5px; border-radius: 5px; font: 600 5.2px/9px Geist, sans-serif; text-align: center; color: var(--fg-2); background: var(--control); }
.zsc-count.is-hot { color: #fff; background: var(--button); }
.zsc-hr { height: 1px; background: var(--line); }
.zsc-av { width: 13px; height: 13px; border-radius: 50%; background: rgba(159, 184, 216, .22); box-shadow: inset 0 0 0 .7px rgba(255, 255, 255, .12); font: 600 5px/13px Geist, sans-serif; letter-spacing: .02em; text-align: center; color: var(--fg); }
.zsc-av.is-c { background: rgba(224, 74, 92, .3); }
.zsc-av.is-w { background: rgba(236, 240, 248, .22); }
.zsc-name { font-size: 6.2px; font-weight: 500; color: var(--fg); }
.zsc-role { font-size: 5.2px; color: var(--fg-3); }

/* the page head: the crimson marker beside the company, the title, a line, tabs with their lit tab, and the actions */
.zsc-mark { width: 1.4px; height: 7px; border-radius: 1px; background: var(--accent); }
.zsc-ctx { font: 400 7px/1 var(--serif); color: var(--fg-2); }
.zsc-title { font: 400 21px/1 var(--serif); letter-spacing: -.012em; color: var(--fg); text-shadow: 0 1px 6px rgba(2, 6, 18, .45); }
.zsc-desc { font-size: 6.2px; color: var(--fg-2); }
.zsc-tabs { height: 15px; }
.zsc-tabs span { position: absolute; top: 0; height: 15px; padding: 0 6px; font-size: 6px; font-weight: 500; line-height: 15px; color: var(--fg-2); }
.zsc-tabs span.is-on { color: var(--fg); }
.zsc-tabs i { position: absolute; top: 0; height: 15px; border-radius: 8px; background: rgba(8, 14, 32, .5); box-shadow: inset 0 0 0 .7px var(--control-line); will-change: transform; }
.zsc-btn { display: inline-block; height: 15px; padding: 0 7px; border-radius: 8px; font-size: 6px; font-weight: 500; line-height: 15px; letter-spacing: -.005em; color: var(--fg); will-change: transform; }
.zsc-btn svg { display: inline-block; width: 6.5px; height: 6.5px; margin: 0 2px 0 -1px; vertical-align: -1px; }
.zsc-btn.is-pri { color: #fff; background: var(--button); box-shadow: 0 2px 6px -2px rgba(201, 56, 76, .7), inset 0 .7px 0 rgba(255, 255, 255, .2); }
.zsc-btn.is-pri svg { color: #fff; }
.zsc-btn.is-sec { background: rgba(8, 14, 32, .55); box-shadow: inset 0 0 0 .7px var(--control-line); }
.zsc-btn.is-quiet { color: var(--fg-2); }
.zsc-btn-hover { position: absolute; inset: 0; border-radius: inherit; background: rgba(255, 255, 255, .14); opacity: 0; will-change: opacity; }
.zsc-btn.is-pri .zsc-btn-hover { background: var(--button-hover); z-index: -1; }
.zsc-btn.is-pri { isolation: isolate; }
.zsc-btn-press { position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--button-press); opacity: 0; will-change: opacity; }

/* panes' insides */
.zsc-ph { font-size: 6.8px; font-weight: 600; letter-spacing: -.01em; color: var(--fg); }
.zsc-note { font-size: 5.6px; color: var(--fg-3); }
.zsc-mono { font: 500 5.2px/1 var(--mono); color: var(--fg-3); letter-spacing: 0; }
.zsc-sline { position: absolute; height: 1px; background: var(--line); }
.zsc-pill { display: inline-block; height: 10px; padding: 0 4px 0 9px; border-radius: 5px; font-size: 5.2px; font-weight: 500; line-height: 10px; color: var(--fg-2); background: var(--control); box-shadow: inset 0 0 0 .6px var(--control-line); }
.zsc-pill::before { content: ""; position: absolute; left: 4px; top: 3.5px; width: 3px; height: 3px; border-radius: 50%; background: var(--fg-3); }
.zsc-pill.is-work { color: var(--ice-2); background: var(--ok-soft); }
.zsc-pill.is-work::before { background: var(--ice-2); box-shadow: 0 0 3px var(--ice-2); }
.zsc-pill.is-wait { color: var(--accent-text); background: var(--accent-soft); }
.zsc-pill.is-wait::before { background: var(--accent); }
.zsc-pill.is-done::before { background: var(--ice); }
.zsc-ring { width: 13px; height: 13px; border-radius: 50%; box-shadow: 0 0 0 1px var(--ice-2); opacity: 0; will-change: transform, opacity; }
.zsc-chip { display: inline-block; height: 10px; padding: 0 4px; border-radius: 3px; font: 500 5px/10px var(--mono); color: var(--ice-2); background: rgba(159, 184, 216, .12); box-shadow: inset 0 0 0 .6px rgba(159, 184, 216, .3); }
.zsc-fig { font: 400 16px/1 var(--serif); letter-spacing: -.01em; color: var(--fg); }
.zsc-fig small { font: 500 5.4px Geist, sans-serif; color: var(--fg-3); margin-left: 1.5px; letter-spacing: 0; }
.zsc-delta { font-size: 5.2px; font-weight: 500; color: var(--ice-2); }
.zsc-prog { height: 2px; border-radius: 1px; background: var(--line-2); overflow: hidden; }
.zsc-prog i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 1px; background: var(--ice-2); }
.zsc-odo { display: inline-block; height: 1em; overflow: hidden; vertical-align: top; }
.zsc-odo > span { display: block; will-change: transform; }
.zsc-odo > span > span { display: block; height: 1em; }

/* 1: the agents, what each is doing, and the steps they take, in order */
.zsc-agent { left: 0; right: 0; height: 21px; }
.zsc-agent b { position: absolute; left: 19px; top: 3.5px; font-size: 6.2px; font-weight: 500; color: var(--fg); }
.zsc-agent em { position: absolute; left: 19px; top: 11.5px; font-size: 5.4px; color: var(--fg-3); }
.zsc-agent .zsc-av { position: absolute; left: 0; top: 4px; }
.zsc-agent .zsc-pill { position: absolute; right: 16px; top: 5.5px; }
.zsc-agent .zsc-more { position: absolute; right: 2px; top: 5.5px; width: 10px; height: 10px; border-radius: 5px; color: var(--fg-3); }
.zsc-agent .zsc-more svg { position: absolute; left: 1.5px; top: 1.5px; width: 7px; height: 7px; }
.zsc-more.is-open { background: var(--control-hover); }
.zsc-agent .zsc-swap { position: absolute; right: 16px; top: 5.5px; opacity: 0; }
.zsc-ev { left: 0; right: 0; height: 17px; will-change: transform, opacity; }
.zsc-ev i { position: absolute; left: 1px; top: 3.5px; width: 3.4px; height: 3.4px; border-radius: 50%; background: var(--ice); }
.zsc-ev.is-ask i { background: var(--accent); }
.zsc-ev b { position: absolute; left: 9px; top: 1px; font-size: 5.8px; font-weight: 500; color: var(--fg); }
.zsc-ev span { position: absolute; left: 9px; top: 8.5px; font-size: 5.2px; color: var(--fg-3); }
.zsc-ev em { position: absolute; right: 0; top: 1.5px; font: 500 5px/1 var(--mono); color: var(--fg-3); }
.zsc-menu { width: 86px; padding: 3px; border-radius: 7px; background: var(--menu); box-shadow: inset 0 0 0 .7px var(--line-2), 0 10px 22px -8px rgba(0, 2, 10, .85); opacity: 0; transform-origin: 100% 0; will-change: transform, opacity; }
.zsc-mi { position: relative; height: 16px; border-radius: 4.5px; font-size: 6px; line-height: 16px; padding-left: 15px; color: var(--fg); }
.zsc-mi svg { position: absolute; left: 4.5px; top: 4.5px; width: 7px; height: 7px; color: var(--fg-3); }
.zsc-mi kbd { position: absolute; right: 4.5px; top: 0; font: 500 4.8px/16px var(--mono); color: var(--fg-3); }
.zsc-mi.is-hi { background: var(--control-hover); }
.zsc-mi.is-red { color: var(--accent-text); }
.zsc-mi.is-red svg { color: var(--accent-text); }
.zsc-msep { height: 1px; margin: 2.5px 3px; background: var(--line); }

/* 2: the line's output: figures, and the hour drawn as it comes in with the planner's forecast */
.zsc-seg { height: 15px; border-radius: 8px; background: rgba(8, 14, 32, .55); box-shadow: inset 0 0 0 .7px var(--control-line); }
.zsc-seg span { position: absolute; top: 0; width: 26px; font-size: 5.8px; font-weight: 500; line-height: 15px; text-align: center; color: var(--fg-3); }
.zsc-seg span.is-on { color: var(--fg); }
.zsc-seg i { position: absolute; left: 2px; top: 2px; width: 26px; height: 11px; border-radius: 6px; background: var(--control-hover); box-shadow: inset 0 0 0 .6px var(--line-2); will-change: transform; }
.zsc-grid line { stroke: rgba(255, 255, 255, .08); stroke-width: .7; }
.zsc-area { fill: rgba(184, 207, 229, .16); }
.zsc-line { stroke: var(--ice-2); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.zsc-fore { stroke: rgba(224, 74, 92, .9); stroke-width: 1.2; stroke-dasharray: 2.5 2.5; }
.zsc-now { stroke: rgba(255, 255, 255, .3); stroke-width: .7; stroke-dasharray: 1 1.5; }
.zsc-dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px rgba(224, 74, 92, .35), 0 0 6px rgba(255, 255, 255, .8); opacity: 0; will-change: transform, opacity; }
.zsc-tip { padding: 3px 5px; border-radius: 5px; background: var(--menu); box-shadow: inset 0 0 0 .6px var(--line-2), 0 6px 14px -6px rgba(0, 2, 10, .8); font-size: 5.4px; color: var(--fg); opacity: 0; will-change: transform, opacity; }
.zsc-tip b { font-weight: 600; }
.zsc-ticks span { position: absolute; top: 0; font: 500 4.8px/1 var(--mono); color: var(--fg-4); transform: translateX(-50%); }

/* 3: the boot, the overview, and the command menu taking a request */
.zsc-dim { inset: 0; background: #070b18; opacity: 0; will-change: opacity; }
.zsc-dim::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 50% at 50% 48%, rgba(80, 112, 190, .35), transparent 70%); }
.zsc-boot { left: 113px; top: 127px; width: 180px; height: auto; opacity: 0; transform-origin: 0 0; will-change: transform, opacity; }
.zsc-load { left: 153px; top: 172px; width: 100px; height: 1.4px; border-radius: 1px; background: linear-gradient(90deg, var(--accent), #fff 50%, var(--ice)); transform: scaleX(0); transform-origin: 0 50%; opacity: 0; will-change: transform, opacity; }
.zsc-app { inset: 0; opacity: 0; will-change: opacity; }
.zsc-next { font: 400 9.4px/1.28 var(--serif); color: var(--fg); white-space: normal; }
.zsc-step { width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; }
.zsc-step.is-done { background: var(--ice); box-shadow: 0 0 0 1.4px rgba(159, 184, 216, .25); }
.zsc-step.is-now { background: var(--accent); box-shadow: 0 0 0 1.6px rgba(224, 74, 92, .3), 0 0 6px rgba(224, 74, 92, .8); }
.zsc-step.is-next { box-shadow: inset 0 0 0 .8px var(--fg-3); }
.zsc-track { height: 1px; background: var(--line-2); }
.zsc-track.is-done { background: var(--ice); opacity: .8; }
.zsc-scrim { inset: 0; background: rgba(2, 5, 14, .16); opacity: 0; will-change: opacity; }
.zsc-cmd { width: 252px; border-radius: 9px; background: var(--menu); box-shadow: inset 0 0 0 .8px var(--line-2), inset 0 1.5px 0 var(--spec), 0 22px 40px -16px rgba(0, 2, 10, .9); opacity: 0; transform-origin: 50% 0; will-change: transform, opacity; }
.zsc-cmd-in { position: relative; height: 26px; border-bottom: 1px solid var(--line); }
.zsc-cmd-in svg { position: absolute; left: 9px; top: 9px; width: 8px; height: 8px; color: var(--fg-3); }
.zsc-cmd-in .zsc-ph-text, .zsc-cmd-in .zsc-typed { position: absolute; left: 22px; top: 0; font-size: 7.2px; line-height: 26px; white-space: nowrap; }
.zsc-cmd-in .zsc-ph-text { color: var(--fg-3); }
.zsc-cmd-in .zsc-typed { color: var(--fg); clip-path: inset(0% 100% 0% 0%); }
.zsc-caret { left: 22px; top: 8.5px; width: .8px; height: 9px; background: var(--fg); opacity: 0; will-change: transform, opacity; }
.zsc-cmd-body { position: relative; height: 84px; }
.zsc-cmd-k { position: absolute; left: 9px; font-size: 5.2px; font-weight: 500; color: var(--fg-3); }
.zsc-ans { position: absolute; left: 9px; font-size: 6.2px; line-height: 9px; color: var(--fg); white-space: nowrap; clip-path: inset(0% 100% 0% 0%); }
.zsc-later { will-change: opacity; }
.zsc-src { position: absolute; opacity: 0; will-change: transform, opacity; }
.zsc-cmd-item { position: absolute; left: 3px; right: 3px; height: 18px; border-radius: 5.4px; }
.zsc-cmd-item svg { position: absolute; left: 6px; top: 5px; width: 8px; height: 8px; color: var(--fg-3); }
.zsc-cmd-item span { position: absolute; left: 19px; top: 0; font-size: 6.2px; line-height: 18px; color: var(--fg); }
.zsc-cmd-item.is-hi { background: var(--control-hover); }
.zsc-cmd-item.is-hi svg { color: var(--accent); }
.zsc-cmd-foot { position: relative; height: 15px; border-top: 1px solid var(--line); }
.zsc-cmd-foot span { position: absolute; top: 0; font-size: 5.2px; line-height: 15px; color: var(--fg-3); }
.zsc-cmd-foot .zsc-key { position: relative; display: inline-block; top: 0; margin-right: 2px; vertical-align: 0; line-height: 7px; height: 7px; }

/* 4: the approval a person gives: a cursor goes to the button, it gives under the press, a toast says so */
.zsc-ask .zsc-next { font-size: 10.4px; }
.zsc-why { font-size: 6px; color: var(--fg-2); }
.zsc-why::before { content: ""; position: absolute; left: -6px; top: 2.6px; width: 2.4px; height: 2.4px; border-radius: 50%; background: var(--fg-3); }
.zsc-stack .zsc-av { position: absolute; top: 0; width: 11px; height: 11px; font-size: 4.4px; line-height: 11px; background: #3b5590; box-shadow: 0 0 0 1px rgba(40, 66, 128, .9); }
.zsc-stack .zsc-av.is-c { background: #8a3a5c; }
.zsc-stack .zsc-av.is-w { background: #5d6f97; }
.zsc-done { opacity: 0; will-change: opacity; }
.zsc-cursor { left: 0; top: 0; width: 11px; height: 16px; opacity: 0; will-change: transform, opacity; }
.zsc-cursor path { fill: #fff; stroke: #0b0f19 !important; stroke-width: 1.3 !important; stroke-linejoin: round; }
.zsc-toast { height: 18px; padding: 0 8px 0 18px; border-radius: 9px; background: var(--menu); box-shadow: inset 0 0 0 .7px var(--line-2), 0 10px 22px -8px rgba(0, 2, 10, .85); font-size: 6.2px; line-height: 18px; color: var(--fg); opacity: 0; will-change: transform, opacity; }
.zsc-toast svg { position: absolute; left: 4px; top: 4px; width: 10px; height: 10px; padding: 1.5px; border-radius: 50%; background: rgba(159, 184, 216, .14); color: #9fb8d8; box-sizing: border-box; }

/* 5: the plant, live, behind the client's helmet */
.zsc-map-unit { fill: rgba(196, 216, 246, .2); stroke: rgba(214, 228, 248, .5); stroke-width: .8; }
.zsc-map-belt { stroke: rgba(184, 207, 229, .75); stroke-width: 1.3; stroke-dasharray: 2.5 4; }
.zsc-map-hot { stroke: var(--accent); }
.zsc-map-path { stroke: rgba(255, 255, 255, .1); stroke-width: .8; }
.zsc-map-label { font-size: 5.2px; font-weight: 500; color: var(--fg-2); }
.zsc-walker { left: 0; top: 0; will-change: transform; }
.zsc-walker i { position: absolute; left: -3px; top: -3px; width: 6px; height: 6px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1.6px rgba(159, 184, 216, .45), 0 0 6px rgba(184, 207, 229, .9); }
.zsc-walker span { position: absolute; left: 6px; top: -10px; font-size: 5.2px; font-weight: 500; color: var(--fg); }
.zsc-alert { width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; box-shadow: 0 0 0 1px var(--accent); opacity: 0; will-change: transform, opacity; }
.zsc-trace { overflow: hidden; }
.zsc-trace svg { position: absolute; left: 0; top: 0; will-change: transform; }
.zsc-wave { stroke: var(--ice-2); stroke-width: 1.2; }
.zsc-wave-fill { fill: rgba(184, 207, 229, .14); }