/* Approved compact dark-header logo. All current pages share these crop windows. */
.customech-brand {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  width: max-content;
  min-width: max-content;
  gap: 0;
  padding: 0;
  color: #fff;
  text-decoration: none;
  line-height: 1;
  mix-blend-mode: screen;
}
.customech-brand:hover { color: #fff; text-decoration: none; }
/* Mirror skins give this wrapper a stacking context; blend the entire group into the header. */
.navbar-brand:has(> .customech-brand) { mix-blend-mode: screen; }
.customech-brand:focus-visible { outline: 2px solid #83b9ff; outline-offset: 5px; border-radius: 3px; }
.customech-brand .cm-logo { display: flex; align-items: center; gap: 9px; flex: none; }
.customech-brand .cm-wordmark { display: grid; justify-items: start; gap: 2px; }
.customech-brand .cm-fragment {
  position: relative;
  display: block;
  flex: none;
  overflow: hidden;
  aspect-ratio: var(--crop-width) / var(--crop-height);
}
.customech-brand .cm-symbol { --crop-x: 182; --crop-y: 190; --crop-width: 441; --crop-height: 473; width: 36px; }
.customech-brand .cm-name { --crop-x: 679; --crop-y: 270; --crop-width: 922; --crop-height: 220; width: 100px; }
.customech-brand .cm-english { --crop-x: 679; --crop-y: 499; --crop-width: 922; --crop-height: 126; width: 84px; }
.customech-brand .cm-fragment img {
  position: absolute;
  display: block;
  width: calc(100% * 1774 / var(--crop-width));
  max-width: none;
  height: auto;
  left: calc(-100% * var(--crop-x) / var(--crop-width));
  top: calc(-100% * var(--crop-y) / var(--crop-height));
  filter: contrast(1.3);
}
/* The directly opened legacy calculators also need a dark surface for this artwork. */
body:not(.engineering-mirror) > .navbar:has(.customech-brand) { background: #0b1723; color: #dce8f3; }
body:not(.engineering-mirror) > .navbar:has(.customech-brand) .subtitle { color: #a8bdcf; }
body:not(.engineering-mirror) > .navbar:has(.customech-brand) .navbar-links a { color: #dce8f3; }
@media (max-width: 700px) {
  .customech-brand .cm-logo { gap: 8px; }
  .customech-brand .cm-symbol { width: 32px; }
  .customech-brand .cm-name { width: 92px; }
  .customech-brand .cm-english { width: 76px; }
}