:root {
  color-scheme: light;
}

.grayhat-tech-radar--package {
  --radar-black: #09090b;
  --radar-white: #ffffff;
  --radar-muted: #71717a;
  --radar-border: #e4e4e7;
  --radar-soft: #f4f4f5;
  box-sizing: border-box;
  align-items: stretch !important;
  min-width: 0;
  min-height: 100vh;
  margin: 0;
  overflow: hidden;
  background: var(--radar-white);
  color: var(--radar-black);
  font-family: Normative Pro, Arial, Helvetica, sans-serif;
}

.grayhat-tech-radar--package *,
.grayhat-tech-radar--package *::before,
.grayhat-tech-radar--package *::after {
  box-sizing: border-box;
}

.grayhat-tech-radar--package #radar {
  display: flex;
  width: min(100vw, 1450px);
  height: 100vh;
  min-height: 0;
  margin: 0 auto;
  overflow: hidden;
  align-items: center;
  justify-content: center;
}

.grayhat-tech-radar--package #radar svg {
  display: block;
  width: min(100vw, 1450px);
  height: min(100vh, 100vw);
  max-height: 100vh;
}

.grayhat-tech-radar--package svg text {
  fill: var(--radar-black);
  font-family: Normative Pro, Arial, Helvetica, sans-serif;
  letter-spacing: 0;
}

.grayhat-tech-radar--package svg line,
.grayhat-tech-radar--package svg circle {
  stroke: var(--radar-border);
}

.grayhat-tech-radar--package .blip circle,
.grayhat-tech-radar--package .blip path {
  stroke: var(--radar-black);
  stroke-width: 1.5px;
}

.grayhat-tech-radar--package .blip:focus,
.grayhat-tech-radar--package a:focus-visible {
  outline: 2px solid var(--radar-black);
  outline-offset: 4px;
}

.grayhat-tech-radar--package #bubble rect,
.grayhat-tech-radar--package #bubble path {
  fill: var(--radar-black) !important;
}

.grayhat-tech-radar--package #bubble text {
  fill: var(--radar-white);
  font-weight: 600;
}

.grayhat-tech-radar--package .legend {
  display: none !important;
}

.grayhat-tech-radar--package .legend table {
  width: 100% !important;
  border-collapse: collapse;
  font-size: 0.95rem !important;
}

.grayhat-tech-radar--package .legend td {
  width: 50%;
  padding: 0 2rem 1.5rem 0 !important;
  vertical-align: top;
}

.grayhat-tech-radar--package .legend h2,
.grayhat-tech-radar--package .legend h3,
.grayhat-tech-radar--package .grayhat-tech-radar__package-notes h2,
.grayhat-tech-radar--package .grayhat-tech-radar__package-notes h3 {
  margin: 0 0 0.75rem;
  color: var(--radar-black);
  font-weight: 650;
  letter-spacing: 0;
}

.grayhat-tech-radar--package .legend p,
.grayhat-tech-radar--package .legend span,
.grayhat-tech-radar--package .legend li,
.grayhat-tech-radar--package .grayhat-tech-radar__package-notes p,
.grayhat-tech-radar--package .grayhat-tech-radar__package-notes li {
  color: var(--radar-muted);
  line-height: 1.7;
}

.grayhat-tech-radar--package .grayhat-tech-radar__package-notes {
  width: min(100%, 1120px);
  margin: 0 auto 3rem;
  border-top: 1px solid var(--radar-border);
  padding: 2rem clamp(1rem, 4vw, 2.5rem) 0;
}

.grayhat-tech-radar--package .grayhat-tech-radar__package-notes ul {
  margin: 0 0 1.25rem;
  padding-left: 1.1rem;
}

@media (max-width: 760px) {
  .grayhat-tech-radar--package {
    overflow-x: auto;
  }

  .grayhat-tech-radar--package #radar {
    width: 100vw;
    min-width: 0;
    height: 100vh;
    min-height: 0;
  }

  .grayhat-tech-radar--package #radar svg {
    width: 100vw;
    height: min(100vh, 100vw);
  }

  .grayhat-tech-radar--package .legend table,
  .grayhat-tech-radar--package .legend tbody,
  .grayhat-tech-radar--package .legend tr,
  .grayhat-tech-radar--package .legend td {
    display: block;
    width: 100% !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .grayhat-tech-radar--package *,
  .grayhat-tech-radar--package *::before,
  .grayhat-tech-radar--package *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}
