:root {
  --black: #000000;
  --layer-secondary: #1b1b1d;
  --border-subtle: #38383e;
  --button-outline: #0071d0;
  --text-link: #3eafff;
  --text-primary: #ffffff;
  --text-secondary: #cccccc;
  --text-subtle: #a5a5ae;
  --icon-disabled: #70707a;
  --status-warning: #f56a00;
  --focus: #f0c84b;
  --screen-url: url("assets/nextguard/home-idle.png");
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #101012;
  color: var(--text-primary);
}

button { font: inherit; }

.presentation {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #101012;
}

.device {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1024px;
  height: 768px;
  flex: none;
  overflow: hidden;
  background: var(--black);
  transform: translate(-50%, -50%) scale(var(--device-scale, 1));
  transform-origin: center;
  box-shadow: 0 18px 64px rgba(0, 0, 0, .45);
  contain: layout paint style;
  isolation: isolate;
}

.screen-image,
.patch-layer,
.control-layer {
  position: absolute;
  inset: 0;
  width: 1024px;
  height: 768px;
}

.screen-image {
  z-index: 10;
  display: block;
  pointer-events: none;
  user-select: none;
}

.patch-layer { z-index: 20; pointer-events: none; }
.control-layer { z-index: 30; pointer-events: none; }

.patch,
.hotspot,
.aurora-button {
  position: absolute;
}

.patch--black { background: var(--black); }
.patch--layer { background: var(--layer-secondary); }
.patch--subtle { background: var(--border-subtle); }

.patch--slice {
  background-image: var(--screen-url);
  background-repeat: no-repeat;
  background-size: 1024px 768px;
}

.patch--sliders-button {
  overflow: hidden;
  border-radius: 4px;
  background: var(--layer-secondary);
}

.rejected-inspection-panel {
  position: absolute;
  z-index: 0;
  isolation: isolate;
  overflow: hidden;
  border: 2px solid var(--border-subtle);
  border-radius: 4px;
  background: var(--layer-secondary);
  color: var(--text-secondary);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.rejected-inspection-header {
  position: absolute;
  z-index: 2;
  inset: 0 0 auto;
  display: grid;
  grid-template-columns: 1fr 88px;
  align-items: center;
  height: 58px;
  padding: 0 22px;
  border-bottom: 2px solid var(--text-subtle);
  background: var(--layer-secondary);
  color: var(--text-secondary);
  font-size: 20px;
  font-weight: 600;
  line-height: 24px;
}

.rejected-inspection-header span:last-child {
  text-align: center;
}

.rejected-inspection-scroll {
  position: absolute;
  inset: 58px 8px 8px 14px;
  overflow-x: hidden;
  overflow-y: auto;
  padding-right: 22px;
  outline: none;
  overscroll-behavior: contain;
  pointer-events: auto;
  scrollbar-width: none;
  touch-action: pan-y;
}

.rejected-inspection-scroll:focus-visible {
  box-shadow: inset 0 0 0 3px var(--focus);
}

.rejected-inspection-scroll::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.rejected-inspection-scrollbar {
  position: absolute;
  z-index: 3;
  right: 6px;
  top: 64px;
  width: 12px;
  height: 458px;
  pointer-events: none;
}

.rejected-inspection-scrollbar span {
  position: absolute;
  left: 2px;
  top: 0;
  width: 8px;
  height: 112px;
  border-radius: 4px;
  background: var(--text-subtle);
  transition: transform 80ms linear;
}

.rejected-inspection-row {
  display: grid;
  grid-template-columns: 1fr 80px;
  align-items: center;
  height: 48px;
  padding-left: 8px;
  border-bottom: 2px solid var(--border-subtle);
  font-size: 18px;
  font-weight: 400;
  line-height: 24px;
}

.rejected-inspection-status {
  width: 36px;
  height: 36px;
  justify-self: center;
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: square;
  stroke-linejoin: round;
}

.rejected-inspection-status--warning {
  stroke: var(--status-warning);
}

.rejected-inspection-status--accepted {
  stroke: var(--text-secondary);
  stroke-width: 3;
}

.camera-window {
  position: absolute;
  overflow: hidden;
  border-radius: 4px;
  background: #eeeeee;
}

.camera-window__image {
  position: absolute;
  inset: 0;
  width: 728px;
  height: 464px;
  background-position: -24px -72px;
  background-repeat: no-repeat;
  background-size: 1024px 768px;
  transform-origin: center;
  transition: transform 180ms ease, filter 180ms ease;
}

.camera-window.is-fullscreen-camera .camera-window__image {
  width: 1024px;
  height: 656px;
}

.counter-card {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  overflow: hidden;
  border-radius: 4px;
  background: var(--layer-secondary);
  color: var(--text-secondary);
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
}

.counter-card__value {
  font-variant-numeric: tabular-nums;
}

.counter-card__dot {
  width: 24px;
  height: 24px;
  flex: none;
  border-radius: 50%;
  background: var(--icon-disabled, #70707a);
  transition: background-color 180ms ease, box-shadow 180ms ease;
}

.counter-card--accepted.is-active .counter-card__dot {
  background: var(--button-outline);
  box-shadow: 0 0 0 2px rgba(62, 175, 255, .18);
  animation: aurora-status-in 180ms ease-out;
}

.counter-card--rejected.is-active .counter-card__dot {
  background: var(--status-warning);
  box-shadow: 0 0 0 2px rgba(245, 106, 0, .18);
  animation: aurora-status-in 180ms ease-out;
}

.patch--status-warning {
  opacity: 1;
}

.patch--menu-scrim {
  z-index: 50;
  background: rgba(0, 0, 0, .72);
  animation: aurora-menu-scrim-in 180ms ease-out;
  pointer-events: auto;
  will-change: opacity;
}

.patch--menu-panel {
  z-index: 50;
  box-shadow: -2px 0 0 rgba(56, 56, 62, .72);
  animation: aurora-menu-panel-in 180ms ease-out;
  backface-visibility: hidden;
  will-change: transform;
}

@keyframes aurora-menu-scrim-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes aurora-menu-panel-in {
  from { transform: translateX(336px); }
  to { transform: translateX(0); }
}

@keyframes aurora-status-in {
  from { opacity: .36; }
  to { opacity: 1; }
}

.hotspot {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: transparent;
  pointer-events: auto;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.hotspot:active,
.hotspot.is-activated {
  background: rgba(0, 113, 208, .16);
  box-shadow: inset 0 0 0 2px var(--button-outline);
}

.hotspot:disabled {
  cursor: default;
}

.hotspot:disabled:active {
  background: transparent;
  box-shadow: none;
}

.hotspot--state-direct:active,
.hotspot--state-direct.is-activated {
  background: transparent;
  box-shadow: none;
}

.detection-checkbox {
  position: absolute;
  border: 2px solid var(--button-outline);
  border-radius: 4px;
  background: var(--layer-secondary);
}

.detection-checkbox.is-checked {
  background: #013560;
}

.detection-checkbox.is-checked::after {
  position: absolute;
  left: 8px;
  top: 4px;
  width: 9px;
  height: 16px;
  border-right: 3px solid var(--text-primary);
  border-bottom: 3px solid var(--text-primary);
  content: "";
  transform: rotate(40deg);
}

.patch--detection-selection {
  border: 2px solid var(--button-outline);
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px rgba(62, 175, 255, .08);
}

.detection-value {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--button-outline);
  border-radius: 4px;
  background: var(--layer-secondary);
  color: var(--text-primary);
  font-size: 18px;
  font-variant-numeric: tabular-nums;
  line-height: 24px;
}

.detection-slider-chrome {
  position: absolute;
  background: var(--black);
}

.detection-slider-chrome__minus {
  position: absolute;
  left: 11px;
  top: 27px;
  width: 26px;
  height: 3px;
  border-radius: 2px;
  background: var(--text-link);
}

.detection-slider-chrome__plus {
  position: absolute;
  left: 338px;
  top: 12px;
  width: 28px;
  height: 32px;
}

.detection-slider-chrome__plus::before,
.detection-slider-chrome__plus::after {
  position: absolute;
  left: 0;
  top: 14px;
  width: 28px;
  height: 3px;
  border-radius: 2px;
  background: var(--text-link);
  content: "";
}

.detection-slider-chrome__plus::after {
  transform: rotate(90deg);
}

.detection-range {
  position: absolute;
  z-index: 2;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  touch-action: none;
  -webkit-appearance: none;
  appearance: none;
}

.detection-range::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(to right, #1488e3 0 var(--range-progress), var(--border-subtle) var(--range-progress) 100%);
}

.detection-range::-webkit-slider-thumb {
  width: 24px;
  height: 24px;
  margin-top: -8px;
  border: 0;
  border-radius: 50%;
  background: var(--text-link);
  cursor: grab;
  -webkit-appearance: none;
}

.detection-range::-moz-range-track {
  height: 8px;
  border-radius: 4px;
  background: var(--border-subtle);
}

.detection-range::-moz-range-progress {
  height: 8px;
  border-radius: 4px;
  background: #1488e3;
}

.detection-range::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 50%;
  background: var(--text-link);
  cursor: grab;
}

.hotspot:focus-visible,
.aurora-button:focus-visible,
.detection-range:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.product-page {
  position: absolute;
  z-index: 0;
  isolation: isolate;
  inset: 0;
  overflow: hidden;
  background: var(--black);
  color: var(--text-secondary);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.product-header {
  position: absolute;
  inset: 0 0 auto;
  height: 56px;
  border-bottom: 2px solid var(--border-subtle);
  background: var(--black);
}

.product-header h1 {
  position: absolute;
  inset: 8px 0 auto;
  height: 40px;
  margin: 0;
  color: var(--text-primary);
  font-size: 28px;
  font-weight: 400;
  line-height: 40px;
  text-align: center;
}

.product-back-icon {
  position: absolute;
  left: 24px;
  top: 12px;
  width: 32px;
  height: 32px;
}

.product-back-icon::before {
  position: absolute;
  left: 8px;
  top: 6px;
  width: 16px;
  height: 16px;
  border-left: 3px solid var(--text-secondary);
  border-bottom: 3px solid var(--text-secondary);
  content: "";
  transform: rotate(45deg);
}

.product-menu-icon {
  position: absolute;
  right: 16px;
  top: 8px;
  width: 40px;
  height: 40px;
}

.product-menu-icon i {
  position: absolute;
  left: 8px;
  width: 26px;
  height: 3px;
  background: var(--text-secondary);
}

.product-menu-icon i:nth-child(1) { top: 9px; }
.product-menu-icon i:nth-child(2) { top: 18px; }
.product-menu-icon i:nth-child(3) { top: 27px; }

.product-table-header {
  position: absolute;
  left: 72px;
  top: 80px;
  width: 880px;
  height: 48px;
  border-bottom: 1px solid var(--text-secondary);
}

.product-heading {
  position: absolute;
  top: 0;
  height: 48px;
  padding: 0 10px;
  color: var(--text-secondary);
  font-size: 18px;
  font-weight: 500;
  line-height: 48px;
}

.product-heading--number { left: 0; width: 120px; }
.product-heading--name { left: 120px; width: 300px; }
.product-heading--code { left: 420px; width: 300px; }
.product-heading--ready { left: 720px; width: 80px; }

.product-sort {
  position: absolute;
  right: 9px;
  top: 18px;
  width: 12px;
  height: 12px;
  border-left: 3px solid var(--text-link);
  border-top: 3px solid var(--text-link);
  transform: rotate(45deg);
}

.product-row {
  position: absolute;
  left: 72px;
  width: 880px;
  height: 48px;
  background: var(--black);
}

.product-row:nth-child(odd) { background: var(--layer-secondary); }

.product-row.is-selected {
  z-index: 1;
  border: 2px solid var(--button-outline);
  background: #013560;
}

.product-cell {
  position: absolute;
  top: 0;
  height: 48px;
  padding: 0 10px;
  border-right: 2px solid var(--black);
  color: var(--text-secondary);
  font-size: 18px;
  line-height: 48px;
}

.product-row.is-selected .product-cell { top: -2px; }
.product-cell--number { left: 0; width: 120px; }
.product-cell--name { left: 120px; width: 300px; }
.product-cell--code { left: 420px; width: 300px; }
.product-cell--ready { left: 720px; width: 80px; padding: 0; }
.product-cell--more { left: 800px; width: 80px; padding: 0; border-right: 0; }

.product-ready {
  position: absolute;
  left: 28px;
  top: 14px;
  width: 20px;
  height: 20px;
  border: 2px solid;
  border-radius: 50%;
}

.product-ready--yes { border-color: var(--text-link); }

.product-ready--yes::after {
  position: absolute;
  left: 5px;
  top: 2px;
  width: 5px;
  height: 9px;
  border-right: 2px solid var(--text-link);
  border-bottom: 2px solid var(--text-link);
  content: "";
  transform: rotate(42deg);
}

.product-ready--no { border-color: var(--status-warning); }

.product-ready--no::after {
  position: absolute;
  left: 2px;
  top: 7px;
  width: 12px;
  height: 2px;
  background: var(--status-warning);
  content: "";
  transform: rotate(-45deg);
}

.product-more {
  position: absolute;
  left: 24px;
  top: 8px;
  width: 32px;
  height: 32px;
}

.product-more i {
  position: absolute;
  left: 14px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--text-link);
}

.product-more i:nth-child(1) { top: 4px; }
.product-more i:nth-child(2) { top: 14px; }
.product-more i:nth-child(3) { top: 24px; }

.product-plus {
  position: absolute;
  left: 72px;
  top: 584px;
  width: 48px;
  height: 48px;
  border-radius: 4px;
  background: var(--layer-secondary);
}

.product-plus::before,
.product-plus::after {
  position: absolute;
  left: 12px;
  top: 22px;
  width: 24px;
  height: 3px;
  background: var(--text-link);
  content: "";
}

.product-plus::after { transform: rotate(90deg); }

.product-page-button,
.product-bottom-button {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  border: 2px solid var(--button-outline);
  border-radius: 4px;
  color: var(--text-link);
  font-size: 20px;
  line-height: 24px;
}

.product-page-button { top: 584px; width: 168px; }
.product-page-button--export { left: 408px; }
.product-page-button--import { left: 596px; }
.product-page-button--activate { left: 784px; background: var(--button-outline); color: var(--text-primary); }

.product-page-button.is-disabled {
  border-color: var(--icon-disabled);
  color: var(--icon-disabled);
}

.product-footer-field {
  position: absolute;
  left: 24px;
  top: 696px;
  width: 312px;
  height: 48px;
  padding: 0 48px 0 14px;
  overflow: hidden;
  border: 2px solid var(--button-outline);
  border-radius: 4px;
  color: var(--text-subtle);
  font-size: 18px;
  line-height: 44px;
  white-space: nowrap;
  opacity: .72;
}

.product-footer-check {
  position: absolute;
  right: 16px;
  top: 12px;
  width: 20px;
  height: 20px;
  border: 2px solid var(--text-link);
  border-radius: 50%;
}

.product-footer-check::after {
  position: absolute;
  left: 5px;
  top: 2px;
  width: 5px;
  height: 9px;
  border-right: 2px solid var(--text-link);
  border-bottom: 2px solid var(--text-link);
  content: "";
  transform: rotate(42deg);
}

.product-bottom-button {
  top: 696px;
  width: 228px;
  gap: 14px;
}

.product-bottom-button--motors { left: 524px; }
.product-bottom-button--inspection { left: 772px; background: var(--button-outline); color: var(--text-primary); }

.product-play {
  width: 0;
  height: 0;
  border-top: 13px solid transparent;
  border-bottom: 13px solid transparent;
  border-left: 21px solid currentColor;
}

.product-action-menu {
  position: absolute;
  left: 863px;
  z-index: 4;
  width: 89px;
  height: 108px;
  overflow: hidden;
  border: 2px solid var(--button-outline);
  border-radius: 6px;
  background: #1d1d22;
}

.product-action-menu div {
  height: 36px;
  padding: 0 10px;
  color: var(--text-link);
  font-family: "Noto Sans", "Arial Narrow", sans-serif;
  font-size: 16px;
  line-height: 34px;
}

.aurora-button {
  height: 48px;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  overflow: hidden;
  padding: 8px 18px;
  border: 2px solid var(--button-outline);
  border-radius: 4px;
  background: var(--black);
  color: var(--text-link);
  font-size: 20px;
  line-height: 24px;
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
  transition: background-color 160ms ease, color 160ms ease;
}

.aurora-button--primary {
  background: var(--button-outline);
  color: var(--text-primary);
}

.aurora-button:active {
  background: #005ca8;
  color: var(--text-primary);
}

.aurora-button__play {
  width: 0;
  height: 0;
  border-top: 13px solid transparent;
  border-bottom: 13px solid transparent;
  border-left: 21px solid currentColor;
}

.aurora-button__pause {
  position: relative;
  width: 21px;
  height: 26px;
}

.aurora-button__pause::before,
.aurora-button__pause::after {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 7px;
  content: "";
  background: currentColor;
}

.aurora-button__pause::before { left: 0; }
.aurora-button__pause::after { right: 0; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .aurora-button,
  .camera-window__image,
  .counter-card__dot { transition: none; }

  .counter-card__dot { animation: none; }

  .patch--menu-scrim,
  .patch--menu-panel { animation: none; }

  .rejected-inspection-scrollbar span { transition: none; }
}

@media (max-width: 1023px), (max-height: 767px) {
  .device { box-shadow: none; }
}