@eveshipfit/ui-ingame 1.0.0 → 1.2.0

package/dist/style.css

@@ -67,6 +67,10 @@
 .a4KCwW_icon > .a4KCwW_marker {
   width: 25%;
 }
+.ZoSRha_tree {
+  --tree-unit: calc(1px * var(--esf-scale, 1));
+}
+
 .ZoSRha_tree, .ZoSRha_group {
   margin: 0;
   padding: 0;
@@ -74,32 +78,50 @@
 }
 
 .ZoSRha_group {
-  padding-left: 16px;
+  padding-left: calc(16 * var(--tree-unit));
+}
+
+.ZoSRha_head {
+  align-items: center;
+  gap: calc(5 * var(--tree-unit));
+  padding-right: calc(6 * var(--tree-unit));
+  display: flex;
 }
 
 .ZoSRha_row {
   color: inherit;
-  cursor: pointer;
+  cursor: default;
   font: inherit;
+  align-items: center;
+  gap: calc(5 * var(--tree-unit));
+  min-height: calc(24 * var(--tree-unit));
+  min-width: 0;
+  padding: 0 0 0 calc(8 * var(--tree-unit));
   text-align: left;
   user-select: none;
   background: none;
   border: none;
-  align-items: center;
-  gap: 6px;
-  width: 100%;
-  min-height: 24px;
-  padding: 2px 6px;
+  outline: none;
+  flex: 1;
   display: flex;
 }
 
-.ZoSRha_row:hover, .ZoSRha_row:focus-visible {
-  background: var(--esf-hover);
-  outline: none;
+.ZoSRha_leaf > .ZoSRha_row {
+  padding-left: calc(21 * var(--tree-unit));
+}
+
+.ZoSRha_tree > li > .ZoSRha_head, .ZoSRha_tree > .ZoSRha_head {
+  background: var(--esf-tree-header);
+}
+
+.ZoSRha_tree .ZoSRha_head:hover, .ZoSRha_tree .ZoSRha_head:has(:focus-visible) {
+  background: var(--esf-tree-hover);
 }
 
 .ZoSRha_chevron {
   color: var(--esf-text-muted);
+  height: calc(8 * var(--tree-unit));
+  width: calc(8 * var(--tree-unit));
   flex: none;
 }
 
@@ -107,6 +129,30 @@
   transform: rotate(90deg);
 }
 
+.ZoSRha_icon {
+  height: calc(32 * var(--tree-unit));
+  width: calc(32 * var(--tree-unit));
+  flex: none;
+}
+
+.ZoSRha_icon > span {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.ZoSRha_smallIcon {
+  height: calc(16 * var(--tree-unit));
+  width: calc(16 * var(--tree-unit));
+  flex: none;
+}
+
+.ZoSRha_text {
+  flex: 1;
+  min-width: 0;
+  display: grid;
+}
+
 .ZoSRha_label {
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -116,12 +162,230 @@
 .CUz0fa_icon {
   flex: none;
 }
+.cmKEiW_anchor {
+  display: contents;
+}
+
+.cmKEiW_anchor > :first-child {
+  anchor-name: var(--tooltip-anchor);
+}
+
+.cmKEiW_tooltip {
+  --notch-size: 10px;
+  --notch-reach: calc(var(--notch-size) * .71 + 1px);
+  anchor-name: var(--tooltip-box);
+  color: var(--esf-text);
+  font-family: var(--esf-font);
+  font-size: var(--esf-font-size);
+  margin: var(--notch-reach) 0;
+  opacity: .9;
+  pointer-events: none;
+  position-anchor: var(--tooltip-anchor);
+  position-area: top;
+  position-try-fallbacks: flip-block;
+  background: none;
+  border: none;
+  max-width: 320px;
+  padding: 0;
+  inset: auto;
+  overflow: visible;
+}
+
+.cmKEiW_notch, .cmKEiW_label {
+  background: var(--esf-bg);
+  border: 1px solid var(--esf-border);
+}
+
+.cmKEiW_notch, .cmKEiW_label:after {
+  --edge: clamp(anchor(var(--tooltip-box) top),
+    anchor(var(--tooltip-anchor) center),
+    anchor(var(--tooltip-box) bottom));
+  left: clamp(anchor(var(--tooltip-box) left) + var(--notch-size),
+    anchor(var(--tooltip-anchor) center),
+    anchor(var(--tooltip-box) right) - var(--notch-size));
+  position: fixed;
+}
+
+.cmKEiW_notch {
+  height: var(--notch-size);
+  top: var(--edge);
+  width: var(--notch-size);
+  translate: -50% -50%;
+  rotate: 45deg;
+}
+
+.cmKEiW_label {
+  padding: 8px 14px;
+  display: block;
+  position: relative;
+}
+
+.cmKEiW_label:after {
+  background: var(--esf-bg);
+  content: "";
+  height: 1px;
+  top: clamp(anchor(var(--tooltip-box) top), var(--edge), anchor(var(--tooltip-box) bottom) - 1px);
+  width: calc(var(--notch-size) * 1.41 - 2px);
+  translate: -50%;
+}
+
+.cmKEiW_text {
+  gap: 8px;
+  display: grid;
+}
+
+.cmKEiW_text + .cmKEiW_text {
+  margin-top: 12px;
+}
+
+.cmKEiW_title {
+  font-weight: 600;
+}
+.hmBNwq_toggle {
+  --toggle-unit: calc(1px * var(--esf-scale, 1));
+  border: var(--toggle-unit) solid transparent;
+  box-sizing: border-box;
+  cursor: pointer;
+  height: calc(32 * var(--toggle-unit));
+  isolation: isolate;
+  width: calc(32 * var(--toggle-unit));
+  background: none;
+  flex: none;
+  justify-content: center;
+  align-items: center;
+  padding: 0;
+  display: flex;
+  position: relative;
+}
+
+.hmBNwq_toggle > img, .hmBNwq_toggle > span:first-child {
+  height: calc(32 * var(--toggle-unit));
+  width: calc(32 * var(--toggle-unit));
+  flex: none;
+}
+
+.hmBNwq_toggle[aria-pressed="true"] {
+  border-color: var(--esf-button-active-edge);
+}
+
+.hmBNwq_toggle[aria-pressed="true"]:after {
+  background: var(--esf-button-active-edge);
+  content: "";
+  inset: calc(-1 * var(--toggle-unit));
+  mask: var(--texture) center / 100% 100%;
+  mix-blend-mode: multiply;
+  position: absolute;
+}
+
+.hmBNwq_check {
+  background: var(--esf-button-active);
+  height: calc(12 * var(--toggle-unit));
+  width: calc(12 * var(--toggle-unit));
+  z-index: 1;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+}
+
+.hmBNwq_check > img {
+  height: calc(10 * var(--toggle-unit));
+  width: calc(10 * var(--toggle-unit));
+}
+
+.hmBNwq_toggle[aria-disabled="true"] {
+  cursor: default;
+  opacity: .4;
+}
+
+.hmBNwq_toggle:focus-visible {
+  outline: var(--toggle-unit) solid var(--esf-text);
+}
+.UlfhFa_history {
+  --history-unit: calc(1px * var(--esf-scale, 1));
+  color: var(--esf-text);
+  font-family: var(--esf-font);
+  font-size: calc(var(--esf-font-size) * var(--esf-scale, 1));
+  gap: calc(4 * var(--history-unit));
+  user-select: none;
+  border: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+}
+
+.UlfhFa_title {
+  margin-left: calc(14 * var(--history-unit));
+}
+
+.UlfhFa_row {
+  align-items: center;
+  gap: calc(4 * var(--history-unit));
+  display: flex;
+}
+
+.UlfhFa_arrow {
+  cursor: pointer;
+  opacity: .6;
+  background: none;
+  border: none;
+  padding: 0;
+}
+
+.UlfhFa_arrow:disabled {
+  cursor: default;
+  opacity: .25;
+}
+
+.UlfhFa_arrow > img {
+  height: calc(10 * var(--history-unit));
+  width: calc(10 * var(--history-unit));
+  display: block;
+}
+
+.UlfhFa_entries {
+  background: var(--esf-history-bg);
+  border: var(--history-unit) solid var(--esf-history-border);
+  box-sizing: border-box;
+  align-items: center;
+  gap: calc(3 * var(--history-unit));
+  height: calc(17 * var(--history-unit));
+  padding: 0 calc(2 * var(--history-unit));
+  width: calc(282 * var(--history-unit));
+  display: flex;
+  overflow: hidden;
+}
+
+.UlfhFa_entry {
+  background: var(--esf-history-entry);
+  cursor: pointer;
+  height: calc(11 * var(--history-unit));
+  width: calc(7 * var(--history-unit));
+  border: none;
+  flex: none;
+  padding: 0;
+}
+
+.UlfhFa_entry:nth-child(2n) {
+  background: var(--esf-history-entry-alt);
+}
+
+.UlfhFa_entry[aria-current="true"] {
+  background: var(--esf-history-current);
+  height: 100%;
+}
+
+.UlfhFa_arrow:focus-visible, .UlfhFa_entry:focus-visible {
+  outline: var(--history-unit) solid var(--esf-text);
+}
 .LIeaFq_wheel {
-  --wheel-unit: calc(100cqw / 464);
-  --wheel-texture-size: calc(519 * var(--wheel-unit));
+  --wheel-unit: calc(100cqw / 572);
+  --wheel-texture-size: calc(640 * var(--wheel-unit));
   aspect-ratio: 1;
   isolation: isolate;
-  width: var(--esf-wheel-size);
+  width: var(--esf-wheel-size, calc(572px * var(--esf-scale, 1)));
   position: relative;
   container-type: inline-size;
 }
@@ -148,16 +412,25 @@
   opacity: .6;
 }
 .oAgQCG_marker {
-  height: calc(16 * var(--wheel-unit));
+  height: calc(20 * var(--wheel-unit));
   pointer-events: none;
-  width: calc(16 * var(--wheel-unit));
+  width: calc(20 * var(--wheel-unit));
   position: absolute;
   transform: translate(-50%, -50%);
 }
 .T6VD6G_slot {
   --colour: var(--esf-state-online);
   --reach: calc((var(--slot-centre) + var(--slot-size) / 2) * var(--wheel-unit));
-  clip-path: polygon(14.9% 1%, 85.1% 1%, 79.7% 85.9%, 20.3% 85.9%);
+  pointer-events: none;
+  position: absolute;
+  inset: 0;
+}
+
+.T6VD6G_slot:hover, .T6VD6G_slot:has(:focus-visible) {
+  z-index: 1;
+}
+
+.T6VD6G_body {
   height: calc(var(--slot-size) * var(--wheel-unit));
   left: calc(50% - var(--slot-size) / 2 * var(--wheel-unit));
   top: calc(50% - var(--reach));
@@ -179,11 +452,19 @@
   opacity: .15;
 }
 
+.T6VD6G_fill, .T6VD6G_frame, .T6VD6G_press {
+  clip-path: polygon(14.9% 1%, 85.1% 1%, 79.7% 85.9%, 20.3% 85.9%);
+}
+
+.T6VD6G_frame, .T6VD6G_press {
+  pointer-events: auto;
+}
+
 .T6VD6G_ammo {
-  --length: calc(8.6 * var(--wheel-unit));
-  --thickness: calc(3.6 * var(--wheel-unit));
-  --out: calc(214.5 * var(--wheel-unit) + var(--thickness) / 2);
-  border: calc(.7 * var(--wheel-unit)) solid var(--esf-text-muted);
+  --length: calc(10.5 * var(--wheel-unit));
+  --thickness: calc(4.5 * var(--wheel-unit));
+  --out: calc(264.5 * var(--wheel-unit) + var(--thickness) / 2);
+  border: var(--wheel-unit) solid var(--esf-text-muted);
   border-radius: calc(var(--thickness) / 2);
   box-sizing: border-box;
   height: var(--thickness);
@@ -210,9 +491,9 @@
 }
 
 .T6VD6G_icon {
-  height: calc(32 * var(--wheel-unit));
+  height: calc(48 * var(--wheel-unit));
   transform: rotate(calc(-1 * var(--angle)));
-  width: calc(32 * var(--wheel-unit));
+  width: calc(48 * var(--wheel-unit));
 }
 
 .T6VD6G_icon > span {
@@ -222,8 +503,8 @@
 }
 
 .T6VD6G_empty {
-  height: calc(16 * var(--wheel-unit));
-  width: calc(16 * var(--wheel-unit));
+  height: calc(20 * var(--wheel-unit));
+  width: calc(20 * var(--wheel-unit));
 }
 
 .T6VD6G_empty > img {
@@ -232,7 +513,21 @@
   display: block;
 }
 
-.T6VD6G_slot[data-state="empty"] > .T6VD6G_frame {
+.T6VD6G_press {
+  cursor: pointer;
+  position: absolute;
+  inset: 0;
+}
+
+.T6VD6G_press:focus-visible {
+  outline: none;
+}
+
+.T6VD6G_body:has( > .T6VD6G_press:hover) > .T6VD6G_fill, .T6VD6G_body:has( > .T6VD6G_press:focus-visible) > .T6VD6G_fill {
+  opacity: .3;
+}
+
+.T6VD6G_slot[data-state="empty"] .T6VD6G_frame {
   opacity: .75;
 }
 
@@ -244,17 +539,77 @@
   --colour: var(--esf-state-overload);
 }
 
-.T6VD6G_slot[data-state="offline"] {
+.T6VD6G_slot[data-state="offline"] > .T6VD6G_body {
   opacity: .3;
 }
 
-.T6VD6G_slot[data-state="unavailable"] {
+.T6VD6G_slot[data-state="unavailable"] > .T6VD6G_body {
   opacity: .1;
 }
 
-.T6VD6G_slot[data-preview] > .T6VD6G_icon {
+.T6VD6G_slot[data-preview] .T6VD6G_icon {
   filter: sepia() hue-rotate(190deg) saturate(200%);
 }
+
+.T6VD6G_actions {
+  opacity: 0;
+  border: none;
+  margin: 0;
+  padding: 0;
+}
+
+.T6VD6G_slot:hover > .T6VD6G_actions, .T6VD6G_slot:has(:focus-visible) > .T6VD6G_actions {
+  opacity: 1;
+}
+
+.T6VD6G_slot:hover > .T6VD6G_actions > *, .T6VD6G_slot:has(:focus-visible) > .T6VD6G_actions > * {
+  pointer-events: auto;
+}
+
+.T6VD6G_bridge {
+  height: calc((var(--slot-centre) - var(--innermost)) * var(--wheel-unit));
+  left: calc(50% - var(--action-size) / 2 * var(--wheel-unit));
+  top: calc(50% - var(--slot-centre) * var(--wheel-unit));
+  transform: rotate(var(--angle));
+  transform-origin: 50% calc(var(--slot-centre) * var(--wheel-unit));
+  width: calc(var(--action-size) * var(--wheel-unit));
+  z-index: -1;
+  position: absolute;
+}
+
+.T6VD6G_action {
+  height: calc(var(--action-size) * var(--wheel-unit));
+  margin: calc(var(--action-size) / -2 * var(--wheel-unit));
+  width: calc(var(--action-size) * var(--wheel-unit));
+  position: absolute;
+}
+
+.T6VD6G_button, .T6VD6G_module {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.T6VD6G_button {
+  cursor: pointer;
+  background: none;
+  border: none;
+  padding: 0;
+}
+
+.T6VD6G_button[aria-disabled="true"] {
+  cursor: default;
+}
+
+.T6VD6G_button:focus-visible {
+  outline: 1px solid var(--esf-text);
+}
+
+.T6VD6G_button > img, .T6VD6G_module > span {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
 ._-v7zG_dots {
   pointer-events: none;
   position: absolute;
@@ -262,9 +617,9 @@
 }
 
 ._-v7zG_icon, ._-v7zG_dot {
-  height: calc(13 * var(--wheel-unit));
+  height: calc(16 * var(--wheel-unit));
   pointer-events: none;
-  width: calc(13 * var(--wheel-unit));
+  width: calc(16 * var(--wheel-unit));
   position: absolute;
   transform: translate(-50%, -50%);
 }
@@ -311,3 +666,1112 @@
   top: 3%;
   left: 3%;
 }
+.dnJ0cW_stat {
+  --stat-unit: calc(1px * var(--esf-scale, 1));
+  align-items: center;
+  gap: calc(3 * var(--stat-unit));
+  max-width: 100%;
+  min-height: calc(25 * var(--stat-unit));
+  white-space: nowrap;
+  width: fit-content;
+  display: flex;
+}
+
+.dnJ0cW_stat > img, .dnJ0cW_noIcon {
+  height: calc(20 * var(--stat-unit));
+  width: calc(20 * var(--stat-unit));
+  flex: none;
+}
+
+.dnJ0cW_value {
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+.m18XbW_section {
+  --section-unit: calc(1px * var(--esf-scale, 1));
+}
+
+.m18XbW_section + .m18XbW_section {
+  margin-top: calc(4 * var(--section-unit));
+}
+
+.m18XbW_header {
+  background: var(--esf-stats-header);
+  color: inherit;
+  cursor: default;
+  font: inherit;
+  height: calc(20 * var(--section-unit));
+  padding: 0 calc(14 * var(--section-unit)) 0 calc(4 * var(--section-unit));
+  text-align: left;
+  border: none;
+  align-items: center;
+  width: 100%;
+  display: flex;
+}
+
+.m18XbW_header:focus-visible {
+  outline: var(--section-unit) solid var(--esf-text);
+}
+
+.m18XbW_header > img {
+  height: calc(10 * var(--section-unit));
+  margin-right: calc(4 * var(--section-unit));
+  width: calc(10 * var(--section-unit));
+  transition: transform .15s;
+}
+
+.m18XbW_section[data-closed] .m18XbW_header > img {
+  transform: rotate(-90deg);
+}
+
+.m18XbW_title {
+  flex: 1;
+}
+
+.m18XbW_body {
+  grid-template-rows: 1fr;
+  transition: grid-template-rows .15s;
+  display: grid;
+}
+
+.m18XbW_section[data-closed] .m18XbW_body {
+  grid-template-rows: 0fr;
+}
+
+.m18XbW_clip {
+  min-height: 0;
+  transition: visibility .15s;
+  overflow: hidden;
+}
+
+.m18XbW_section[data-closed] .m18XbW_clip {
+  visibility: hidden;
+}
+
+.m18XbW_content {
+  grid-template-columns: repeat(var(--columns), 1fr);
+  padding: calc(5 * var(--section-unit)) 0 calc(6 * var(--section-unit));
+  display: grid;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .m18XbW_header > img, .m18XbW_body, .m18XbW_clip {
+    transition: none;
+  }
+}
+.QyA-_q_bar {
+  --bar-unit: calc(1px * var(--esf-scale, 1));
+  --colour: var(--esf-damage-em);
+  background: linear-gradient(to right, var(--colour) calc(var(--resistance) * 100%), var(--esf-resistance-bg) 0);
+  box-shadow: 0 0 calc(5 * var(--bar-unit)) color-mix(in srgb, var(--colour) 50%, transparent);
+  height: calc(16 * var(--bar-unit));
+  white-space: nowrap;
+  width: calc(40 * var(--bar-unit));
+  place-items: center;
+  display: grid;
+}
+
+.QyA-_q_text {
+  text-box: trim-both cap alphabetic;
+}
+
+.QyA-_q_bar[data-damage="thermal"] {
+  --colour: var(--esf-damage-thermal);
+}
+
+.QyA-_q_bar[data-damage="kinetic"] {
+  --colour: var(--esf-damage-kinetic);
+}
+
+.QyA-_q_bar[data-damage="explosive"] {
+  --colour: var(--esf-damage-explosive);
+}
+._6LFjiq_ring {
+  --ring-unit: calc(1px * var(--esf-scale, 1));
+  --lit: color-mix(in srgb, var(--esf-capacitor-cell-high) calc(var(--level) * 100%), var(--esf-capacitor-cell-low));
+  height: calc(30 * var(--ring-unit));
+  width: calc(30 * var(--ring-unit));
+  flex: none;
+  position: relative;
+}
+
+._6LFjiq_column {
+  transform: rotate(var(--angle));
+  flex-direction: column;
+  align-items: center;
+  display: flex;
+  position: absolute;
+  inset: 0;
+}
+
+._6LFjiq_cell {
+  background: var(--esf-capacitor-cell-empty);
+  height: calc(4 * var(--ring-unit));
+  mask: var(--texture) center / 100% 100%;
+  width: calc(8 * var(--ring-unit));
+  flex: none;
+}
+
+._6LFjiq_cell:nth-child(2) {
+  width: calc(6 * var(--ring-unit));
+}
+
+._6LFjiq_cell:nth-child(3) {
+  width: calc(4 * var(--ring-unit));
+}
+
+._6LFjiq_cell[data-lit] {
+  background: var(--lit);
+}
+.GK_wGG_centre {
+  inset: calc(86 * var(--wheel-unit));
+  border-radius: 50%;
+  position: absolute;
+}
+.gVdevq_panel {
+  background: var(--esf-menu-bg);
+  border: var(--window-unit) solid var(--esf-input-border);
+  box-sizing: border-box;
+  color: var(--esf-text);
+  gap: calc(10 * var(--window-unit));
+  margin: calc(4 * var(--window-unit)) 0;
+  padding: calc(12 * var(--window-unit)) calc(2 * var(--window-unit));
+  position-anchor: var(--bay-anchor);
+  position-area: bottom span-right;
+  position-try-fallbacks: flip-block;
+  width: calc(370 * var(--window-unit));
+  justify-items: center;
+  inset: auto;
+}
+
+.gVdevq_panel:popover-open {
+  display: grid;
+}
+
+.gVdevq_panel[data-empty] {
+  padding: calc(17 * var(--window-unit)) calc(20 * var(--window-unit));
+  width: auto;
+}
+
+.gVdevq_list {
+  column-gap: calc(8 * var(--window-unit));
+  grid-template-columns: minmax(calc(62 * var(--window-unit)), max-content) auto 1fr auto;
+  max-height: calc(8 * 32 * var(--window-unit));
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: grid;
+  overflow-y: auto;
+}
+
+.gVdevq_row {
+  grid-column: 1 / -1;
+  grid-template-columns: subgrid;
+  height: calc(32 * var(--window-unit));
+  padding: 0 calc(8 * var(--window-unit));
+  align-items: center;
+  display: grid;
+}
+
+.gVdevq_row:hover {
+  background: var(--esf-bay-row-hover);
+}
+
+.gVdevq_quantity {
+  border: var(--window-unit) solid transparent;
+  align-items: center;
+  column-gap: calc(8 * var(--window-unit));
+  padding: calc(5 * var(--window-unit)) calc(6 * var(--window-unit));
+  grid-template-columns: auto auto;
+  justify-self: end;
+  justify-items: center;
+  display: grid;
+}
+
+.gVdevq_count {
+  appearance: textfield;
+  color: inherit;
+  font: inherit;
+  font-variant-numeric: tabular-nums;
+  text-align: right;
+  background: none;
+  border: none;
+  padding: 0;
+}
+
+.gVdevq_count::-webkit-inner-spin-button {
+  appearance: none;
+}
+
+.gVdevq_count:focus {
+  outline: none;
+}
+
+.gVdevq_times, .gVdevq_steps {
+  grid-area: 1 / 2;
+}
+
+.gVdevq_steps {
+  visibility: hidden;
+}
+
+.gVdevq_steps > button {
+  cursor: default;
+  opacity: .6;
+  background: none;
+  border: none;
+  padding: 0;
+  display: block;
+}
+
+.gVdevq_steps > button:hover {
+  opacity: 1;
+}
+
+.gVdevq_steps img {
+  height: calc(8 * var(--window-unit));
+  width: calc(8 * var(--window-unit));
+  display: block;
+}
+
+.gVdevq_quantity:hover, .gVdevq_quantity:focus-within {
+  border-color: var(--esf-spinner-edge);
+}
+
+.gVdevq_quantity:hover .gVdevq_times, .gVdevq_quantity:focus-within .gVdevq_times {
+  visibility: hidden;
+}
+
+.gVdevq_quantity:hover .gVdevq_steps, .gVdevq_quantity:focus-within .gVdevq_steps {
+  visibility: visible;
+}
+
+.gVdevq_quantity:focus-within {
+  background: var(--esf-spinner-focus);
+  border-color: var(--esf-spinner-focus-edge);
+}
+
+.gVdevq_icon {
+  height: calc(24 * var(--window-unit));
+  width: calc(24 * var(--window-unit));
+}
+
+.gVdevq_icon > span {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.gVdevq_middle {
+  gap: calc(6 * var(--window-unit));
+  min-width: 0;
+  display: grid;
+}
+
+.gVdevq_name {
+  text-align: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.gVdevq_activeDrones {
+  padding-left: calc(8 * var(--window-unit));
+  justify-self: start;
+  font-weight: 600;
+}
+
+.gVdevq_panel[data-drones] .gVdevq_list {
+  grid-template-columns: minmax(calc(52 * var(--window-unit)), max-content) auto 1fr auto;
+  max-height: calc(5 * 64 * var(--window-unit));
+}
+
+.gVdevq_panel[data-drones] .gVdevq_row {
+  height: calc(64 * var(--window-unit));
+}
+
+.gVdevq_panel[data-drones] .gVdevq_icon {
+  height: calc(60 * var(--window-unit));
+  width: calc(60 * var(--window-unit));
+}
+
+.gVdevq_panel[data-drones] .gVdevq_name {
+  text-align: left;
+}
+
+.gVdevq_selection {
+  color: var(--esf-text-muted);
+  align-items: center;
+  gap: calc(3 * var(--window-unit));
+  display: flex;
+}
+
+.gVdevq_box {
+  background: var(--esf-drone-box);
+  border: var(--window-unit) solid var(--esf-button-edge);
+  color: var(--esf-text);
+  cursor: default;
+  font-size: calc(10 * var(--window-unit));
+  height: calc(13 * var(--window-unit));
+  width: calc(13 * var(--window-unit));
+  padding: 0;
+  line-height: 1;
+}
+
+.gVdevq_box:first-child {
+  margin-left: calc(2 * var(--window-unit));
+}
+
+.gVdevq_box[data-state="active"] {
+  background: var(--esf-button-active);
+}
+
+.gVdevq_box[data-state="open"] {
+  background: var(--esf-drone-box-open);
+}
+
+.gVdevq_box:enabled:hover {
+  border-color: var(--esf-button-active-edge);
+}
+
+.gVdevq_box[data-state="none"] {
+  background: var(--esf-drone-box-empty);
+  border-color: var(--esf-drone-box-empty);
+}
+
+.gVdevq_remove {
+  cursor: default;
+  opacity: .6;
+  background: none;
+  border: none;
+  padding: 0;
+}
+
+.gVdevq_remove:hover, .gVdevq_remove:focus-visible {
+  opacity: 1;
+}
+
+.gVdevq_remove > img {
+  height: calc(16 * var(--window-unit));
+  width: calc(16 * var(--window-unit));
+  display: block;
+}
+
+.gVdevq_removeAll {
+  background: var(--esf-button);
+  border: var(--window-unit) solid var(--esf-button-edge);
+  color: inherit;
+  cursor: default;
+  font: inherit;
+  height: calc(31 * var(--window-unit));
+  padding: 0 calc(14 * var(--window-unit));
+}
+
+.gVdevq_removeAll:hover, .gVdevq_removeAll:focus-visible {
+  background: var(--esf-button-active);
+  border-color: var(--esf-button-active-edge);
+}
+
+.gVdevq_remove:focus-visible, .gVdevq_removeAll:focus-visible, .gVdevq_box:focus-visible {
+  outline: var(--window-unit) solid var(--esf-text);
+}
+.L9t91q_window {
+  --window-unit: calc(1px * var(--esf-scale, 1));
+  --browser-width: 0px;
+  --statistics-width: 0px;
+  color: var(--esf-text);
+  font-family: var(--esf-font);
+  font-size: calc(var(--esf-font-size) * var(--esf-scale, 1));
+  height: calc(672 * var(--window-unit));
+  user-select: none;
+  width: calc(708 * var(--window-unit) + var(--browser-width) + var(--statistics-width));
+  transition: width .2s;
+  position: relative;
+}
+
+.L9t91q_window[data-browser] {
+  --browser-width: calc(400 * var(--window-unit));
+}
+
+.L9t91q_window[data-statistics] {
+  --statistics-width: calc(264 * var(--window-unit));
+}
+
+.L9t91q_frame {
+  inset: calc(29 * var(--window-unit)) auto 0 var(--browser-width);
+  width: calc(700 * var(--window-unit));
+  transition: left .2s;
+  position: absolute;
+}
+
+.L9t91q_icon > img, .L9t91q_tool > img, .L9t91q_bay > img {
+  display: block;
+}
+
+.L9t91q_wheel {
+  --esf-wheel-size: calc(572 * var(--window-unit));
+  left: calc(68 * var(--window-unit));
+  position: absolute;
+  top: 0;
+}
+
+.L9t91q_name, .L9t91q_violations, .L9t91q_tools, .L9t91q_panels, .L9t91q_bays, .L9t91q_history, .L9t91q_resources {
+  position: absolute;
+}
+
+.L9t91q_name {
+  align-items: center;
+  gap: calc(2 * var(--window-unit));
+  left: calc(20 * var(--window-unit));
+  max-width: calc(200 * var(--window-unit));
+  top: calc(40 * var(--window-unit));
+  white-space: nowrap;
+  display: flex;
+}
+
+.L9t91q_fitName {
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.L9t91q_icon {
+  cursor: default;
+  background: none;
+  border: none;
+  padding: 0;
+}
+
+.L9t91q_icon > img {
+  height: calc(16 * var(--window-unit));
+  width: calc(16 * var(--window-unit));
+}
+
+.L9t91q_icon > img[data-icon="link"] {
+  height: calc(12 * var(--window-unit));
+  margin: 0 calc(2 * var(--window-unit));
+  opacity: .6;
+  width: calc(12 * var(--window-unit));
+}
+
+.L9t91q_icon:focus-visible, .L9t91q_tool:focus-visible {
+  outline: var(--window-unit) solid var(--esf-text);
+}
+
+.L9t91q_violations {
+  gap: calc(14 * var(--window-unit));
+  left: calc(20 * var(--window-unit));
+  top: calc(62 * var(--window-unit));
+  display: flex;
+}
+
+.L9t91q_violation {
+  --colour: var(--esf-violation-notice);
+  height: calc(28 * var(--window-unit));
+  width: calc(28 * var(--window-unit));
+  position: relative;
+}
+
+.L9t91q_violation:before {
+  background: var(--colour);
+  content: "";
+  mask: var(--texture) center / 100% 100%;
+  position: absolute;
+  inset: 0;
+}
+
+.L9t91q_violation[data-kind="error"] {
+  --colour: var(--esf-violation-error);
+}
+
+.L9t91q_violation[data-kind="skill"] {
+  --colour: var(--esf-violation-skill);
+}
+
+.L9t91q_count {
+  left: calc(100% - 2 * var(--window-unit));
+  top: calc(-2 * var(--window-unit));
+  font-size: .85em;
+  line-height: 1;
+  position: absolute;
+}
+
+.L9t91q_tools {
+  left: calc(16 * var(--window-unit));
+  top: calc(125 * var(--window-unit));
+}
+
+.L9t91q_panels {
+  right: calc(11 * var(--window-unit));
+  top: calc(167 * var(--window-unit));
+}
+
+.L9t91q_tool {
+  background: var(--esf-button);
+  border-radius: 0 calc(5 * var(--window-unit)) calc(5 * var(--window-unit)) 0;
+  box-shadow: inset calc(-1 * var(--window-unit)) 0 var(--esf-button-edge);
+  cursor: default;
+  height: calc(39 * var(--window-unit));
+  width: calc(45 * var(--window-unit));
+  border: none;
+  justify-content: center;
+  align-items: center;
+  padding: 0;
+  display: flex;
+}
+
+.L9t91q_panels .L9t91q_tool {
+  border-radius: calc(5 * var(--window-unit)) 0 0 calc(5 * var(--window-unit));
+  box-shadow: inset var(--window-unit) 0 var(--esf-button-edge);
+  width: calc(42 * var(--window-unit));
+}
+
+.L9t91q_tools .L9t91q_tool[aria-expanded="true"] {
+  background: var(--esf-button-active);
+  box-shadow: inset calc(-1 * var(--window-unit)) 0 var(--esf-button-active-edge);
+}
+
+.L9t91q_panels .L9t91q_tool[aria-expanded="true"] {
+  background: var(--esf-button-active);
+  box-shadow: inset var(--window-unit) 0 var(--esf-button-active-edge);
+}
+
+.L9t91q_tools .L9t91q_tool > img {
+  height: calc(40 * var(--window-unit));
+  width: calc(40 * var(--window-unit));
+}
+
+.L9t91q_panels .L9t91q_tool > img {
+  height: calc(20 * var(--window-unit));
+  width: calc(20 * var(--window-unit));
+}
+
+.L9t91q_bays {
+  gap: calc(4 * var(--window-unit));
+  left: calc(19 * var(--window-unit));
+  top: calc(560 * var(--window-unit));
+  display: grid;
+}
+
+.L9t91q_bay {
+  color: inherit;
+  align-items: center;
+  column-gap: calc(5 * var(--window-unit));
+  cursor: default;
+  font: inherit;
+  line-height: calc(13 * var(--window-unit));
+  background: none;
+  border: none;
+  grid-template-columns: repeat(4, auto);
+  justify-content: start;
+  padding: 0;
+  display: grid;
+}
+
+.L9t91q_bayAnchor {
+  anchor-name: var(--bay-anchor);
+}
+
+.L9t91q_bay > * {
+  pointer-events: none;
+}
+
+.L9t91q_bay:focus-visible {
+  outline: var(--window-unit) solid var(--esf-text);
+}
+
+.L9t91q_bay > img {
+  height: calc(32 * var(--window-unit));
+  width: calc(32 * var(--window-unit));
+  grid-area: 1 / 1 / 3;
+}
+
+.L9t91q_used, .L9t91q_total {
+  grid-column: 3;
+  justify-self: end;
+}
+
+.L9t91q_used {
+  grid-row: 1;
+}
+
+.L9t91q_slash, .L9t91q_total, .L9t91q_unit {
+  grid-row: 2;
+}
+
+.L9t91q_slash {
+  grid-column: 2;
+}
+
+.L9t91q_history {
+  left: calc(199 * var(--window-unit));
+  top: calc(590 * var(--window-unit));
+}
+
+.L9t91q_resources {
+  gap: calc(10 * var(--window-unit));
+  line-height: calc(16 * var(--window-unit));
+  right: calc(13 * var(--window-unit));
+  text-align: right;
+  top: calc(546 * var(--window-unit));
+  display: grid;
+}
+
+.L9t91q_resource {
+  gap: calc(2 * var(--window-unit));
+  display: grid;
+}
+
+.L9t91q_title {
+  font-weight: 600;
+}
+
+.L9t91q_resource[data-change="better"] .L9t91q_free {
+  color: var(--esf-good);
+}
+
+.L9t91q_resource[data-change="worse"] .L9t91q_free {
+  color: var(--esf-bad);
+}
+
+.L9t91q_bay[data-over], .L9t91q_resource[data-over] > :last-child, .L9t91q_resource[data-over] .L9t91q_free {
+  color: var(--esf-violation-error);
+}
+
+.L9t91q_browser, .L9t91q_statistics {
+  bottom: calc(16 * var(--window-unit));
+  top: calc(64 * var(--window-unit));
+  position: absolute;
+  overflow: hidden;
+}
+
+.L9t91q_browser {
+  left: calc(15 * var(--window-unit));
+  width: calc(393 * var(--window-unit));
+}
+
+.L9t91q_statistics {
+  left: calc(692 * var(--window-unit) + var(--browser-width));
+  width: calc(280 * var(--window-unit));
+  transition: left .2s;
+}
+
+.L9t91q_slide {
+  visibility: hidden;
+  height: 100%;
+  transition: transform .2s, visibility .2s;
+}
+
+.L9t91q_browser > .L9t91q_slide, .L9t91q_statistics > .L9t91q_slide {
+  transform: translateX(-100%);
+}
+
+.L9t91q_window[data-browser] > .L9t91q_browser > .L9t91q_slide, .L9t91q_window[data-statistics] > .L9t91q_statistics > .L9t91q_slide {
+  visibility: visible;
+  transform: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .L9t91q_window, .L9t91q_frame, .L9t91q_statistics, .L9t91q_slide {
+    transition: none;
+  }
+}
+.xFSZwa_browser {
+  --browser-unit: calc(1px * var(--esf-scale, 1));
+  color: var(--esf-text);
+  font-family: var(--esf-font);
+  font-size: calc(var(--esf-font-size) * var(--esf-scale, 1));
+  user-select: none;
+  height: 100%;
+  width: calc(393 * var(--browser-unit));
+  flex-direction: column;
+  display: flex;
+}
+
+.xFSZwa_tabs {
+  --corner: calc(6 * var(--browser-unit));
+  clip-path: polygon(0 0,
+    100% 0,
+    100% calc(100% - var(--corner)),
+    calc(100% - var(--corner)) 100%,
+    var(--corner) 100%,
+    0 calc(100% - var(--corner)));
+  gap: calc(4 * var(--browser-unit));
+  display: flex;
+}
+
+.xFSZwa_tab {
+  background: var(--esf-tab);
+  color: inherit;
+  cursor: default;
+  font: inherit;
+  height: calc(24 * var(--browser-unit));
+  border: none;
+  flex: 1;
+  padding: 0;
+}
+
+.xFSZwa_tab[aria-selected="true"] {
+  background: var(--esf-tab-active);
+}
+
+.xFSZwa_tab:focus-visible, .xFSZwa_collapse:focus-visible {
+  outline: var(--browser-unit) solid var(--esf-text);
+}
+
+.xFSZwa_tab:focus-visible {
+  outline-offset: calc(-1 * var(--browser-unit));
+}
+
+.xFSZwa_panel {
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  display: flex;
+}
+
+.xFSZwa_panel[hidden] {
+  display: none;
+}
+
+.xFSZwa_search {
+  height: calc(32 * var(--browser-unit));
+  margin-top: calc(8 * var(--browser-unit));
+  align-items: center;
+  display: flex;
+}
+
+.xFSZwa_collapse {
+  cursor: pointer;
+  opacity: .6;
+  width: calc(28 * var(--browser-unit));
+  background: none;
+  border: none;
+  justify-content: center;
+  padding: 0;
+  display: flex;
+}
+
+.xFSZwa_collapse:hover, .xFSZwa_collapse:focus-visible {
+  opacity: 1;
+}
+
+.xFSZwa_collapse > img {
+  height: calc(14 * var(--browser-unit));
+  width: calc(14 * var(--browser-unit));
+}
+
+.xFSZwa_field > img {
+  height: calc(16 * var(--browser-unit));
+  opacity: .5;
+  width: calc(16 * var(--browser-unit));
+}
+
+.xFSZwa_field {
+  background: var(--esf-input-bg);
+  border: var(--browser-unit) solid var(--esf-input-border);
+  align-self: stretch;
+  align-items: center;
+  gap: calc(5 * var(--browser-unit));
+  padding-left: calc(12 * var(--browser-unit));
+  flex: 1;
+  display: flex;
+}
+
+.xFSZwa_field > input {
+  color: inherit;
+  font: inherit;
+  background: none;
+  border: none;
+  outline: none;
+  flex: 1;
+  min-width: 0;
+  padding: 0;
+}
+
+.xFSZwa_field > input::placeholder {
+  color: var(--esf-text-muted);
+}
+
+.xFSZwa_field:focus-within {
+  border-color: var(--esf-text-muted);
+}
+
+.xFSZwa_filters {
+  gap: calc(4 * var(--browser-unit));
+  margin: calc(4 * var(--browser-unit)) 0 0;
+  border: none;
+  min-width: 0;
+  padding: 0;
+  display: flex;
+}
+
+.xFSZwa_tree {
+  margin-top: calc(8 * var(--browser-unit));
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+}
+
+.xFSZwa_empty {
+  color: var(--esf-text-muted);
+  font-size: calc(20 * var(--browser-unit));
+  margin: calc(24 * var(--browser-unit)) 0 0;
+  text-align: center;
+}
+
+.xFSZwa_hull {
+  font-weight: 600;
+}
+
+.xFSZwa_counts {
+  display: flex;
+}
+
+.xFSZwa_count {
+  align-items: center;
+  gap: calc(3 * var(--browser-unit));
+  min-width: calc(39 * var(--browser-unit));
+  display: flex;
+}
+
+.xFSZwa_count > img, .xFSZwa_kind > img {
+  height: calc(12 * var(--browser-unit));
+  width: calc(12 * var(--browser-unit));
+  display: block;
+}
+
+.xFSZwa_unseen {
+  clip-path: inset(50%);
+  white-space: nowrap;
+  width: 1px;
+  height: 1px;
+  position: absolute;
+  overflow: hidden;
+}
+
+.xFSZwa_kind {
+  margin-right: calc(5 * var(--browser-unit));
+  vertical-align: middle;
+  display: inline-block;
+}
+
+.xFSZwa_flyable {
+  background: var(--esf-flyable);
+  height: calc(12 * var(--browser-unit));
+  mask: var(--texture) center / 100% 100%;
+  width: calc(12 * var(--browser-unit));
+  flex: none;
+}
+
+.xFSZwa_flyable[data-missing] {
+  background: var(--esf-not-flyable);
+}
+
+.xFSZwa_simulate {
+  cursor: pointer;
+  opacity: .9;
+  background: none;
+  border: none;
+  flex: none;
+  padding: 0;
+  display: flex;
+}
+
+.xFSZwa_simulate:hover, .xFSZwa_simulate:focus-visible {
+  opacity: 1;
+}
+
+.xFSZwa_simulate:focus-visible {
+  outline: var(--browser-unit) solid var(--esf-text);
+}
+
+.xFSZwa_simulate > img {
+  height: calc(22 * var(--browser-unit));
+  width: calc(22 * var(--browser-unit));
+}
+
+.xFSZwa_info {
+  opacity: .6;
+  background: none;
+  border: none;
+  flex: none;
+  padding: 0;
+  display: flex;
+}
+
+.xFSZwa_info:hover, .xFSZwa_info:focus-visible {
+  opacity: 1;
+}
+
+.xFSZwa_info:focus-visible {
+  outline: var(--browser-unit) solid var(--esf-text);
+}
+
+.xFSZwa_info > img {
+  height: calc(16 * var(--browser-unit));
+  width: calc(16 * var(--browser-unit));
+}
+
+.xFSZwa_dragImage {
+  pointer-events: none;
+  position: fixed;
+  top: 0;
+  left: -1000px;
+}
+.lebA7G_statistics {
+  --statistics-unit: calc(1px * var(--esf-scale, 1));
+  color: var(--esf-text);
+  font-family: var(--esf-font);
+  font-size: calc(var(--esf-font-size) * var(--esf-scale, 1));
+  user-select: none;
+  height: 100%;
+  width: calc(280 * var(--statistics-unit));
+  flex-direction: column;
+  display: flex;
+}
+
+.lebA7G_sections {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+}
+
+.lebA7G_good {
+  color: var(--esf-good);
+}
+
+.lebA7G_bad {
+  color: var(--esf-bad);
+}
+
+.lebA7G_attribute[data-change="better"] {
+  color: var(--esf-good);
+}
+
+.lebA7G_attribute[data-change="worse"] {
+  color: var(--esf-bad);
+}
+
+.lebA7G_lines {
+  display: grid;
+}
+
+.lebA7G_capacitor {
+  --capacitor-unit: calc(1px * var(--esf-scale, 1));
+  align-items: center;
+  gap: calc(10 * var(--capacitor-unit));
+  padding-left: calc(5 * var(--capacitor-unit));
+  display: flex;
+}
+
+.lebA7G_price {
+  align-self: end;
+  align-items: center;
+  gap: calc(6 * var(--statistics-unit));
+  height: calc(20 * var(--statistics-unit));
+  margin: calc(4 * var(--statistics-unit)) calc(13 * var(--statistics-unit)) calc(9 * var(--statistics-unit)) 0;
+  display: flex;
+}
+
+.lebA7G_price > img {
+  height: calc(16 * var(--statistics-unit));
+  width: calc(16 * var(--statistics-unit));
+}
+
+.lebA7G_defense {
+  --defense-unit: calc(1px * var(--esf-scale, 1));
+  align-items: center;
+  column-gap: calc(6 * var(--defense-unit));
+  grid-auto-rows: calc(32 * var(--defense-unit));
+  grid-template-columns: 1fr repeat(4, calc(40 * var(--defense-unit)));
+  grid-template-rows: calc(26 * var(--defense-unit));
+  padding-right: calc(10 * var(--defense-unit));
+  display: grid;
+}
+
+.lebA7G_defense > img {
+  height: calc(22 * var(--defense-unit));
+  margin-left: calc(4 * var(--defense-unit));
+  width: calc(22 * var(--defense-unit));
+}
+
+.lebA7G_repairRate {
+  --repair-rate-unit: calc(1px * var(--esf-scale, 1));
+}
+
+.lebA7G_picker {
+  anchor-name: var(--repair-rate-anchor);
+  color: inherit;
+  cursor: default;
+  font: inherit;
+  align-items: center;
+  gap: calc(3 * var(--repair-rate-unit));
+  white-space: nowrap;
+  background: none;
+  border: none;
+  padding: 0;
+  display: flex;
+  position: relative;
+}
+
+.lebA7G_picker:focus-visible {
+  outline: var(--repair-rate-unit) solid var(--esf-text);
+}
+
+.lebA7G_picker > img {
+  height: calc(20 * var(--repair-rate-unit));
+  width: calc(20 * var(--repair-rate-unit));
+}
+
+.lebA7G_picker > img:first-child {
+  height: calc(8 * var(--repair-rate-unit));
+  left: 0;
+  top: calc(-6 * var(--repair-rate-unit));
+  width: calc(8 * var(--repair-rate-unit));
+  position: absolute;
+}
+
+.lebA7G_repairRate:has(:popover-open) .lebA7G_picker > img:first-child {
+  transform: rotate(180deg);
+}
+
+.lebA7G_menu {
+  background: var(--esf-menu-bg);
+  color: var(--esf-text);
+  font-family: var(--esf-font);
+  font-size: calc(var(--esf-font-size) * var(--esf-scale, 1));
+  inset: auto;
+  left: calc(anchor(left) + 2 * var(--repair-rate-unit));
+  position-anchor: var(--repair-rate-anchor);
+  min-width: calc(172 * var(--repair-rate-unit));
+  top: calc(anchor(bottom) + 3 * var(--repair-rate-unit));
+  border: none;
+  margin: 0;
+  padding: 0;
+}
+
+.lebA7G_menu > button {
+  color: inherit;
+  cursor: default;
+  font: inherit;
+  align-items: center;
+  gap: calc(3 * var(--repair-rate-unit));
+  height: calc(32 * var(--repair-rate-unit));
+  padding: 0 calc(8 * var(--repair-rate-unit)) 0 calc(2 * var(--repair-rate-unit));
+  white-space: nowrap;
+  background: none;
+  border: none;
+  width: 100%;
+  display: flex;
+}
+
+.lebA7G_menu > button:hover, .lebA7G_menu > button:focus-visible {
+  background: var(--esf-menu-hover);
+  outline: none;
+}
+
+.lebA7G_menu > button > img {
+  height: calc(24 * var(--repair-rate-unit));
+  width: calc(24 * var(--repair-rate-unit));
+}