.nc-density-icon {
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
}

.nc-density-bubble {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--density-diameter, 42px);
  height: var(--density-diameter, 42px);
  border: 3px solid #fff;
  border-radius: 50%;
  outline: 2px solid var(--density-border, #16877e);
  background: var(--density-fill, #a9d8d0);
  box-shadow: 0 3px 12px rgba(12, 37, 48, .32);
  color: var(--density-text, #18343a);
  font-size: .88rem;
  font-weight: 950;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .12);
  transition: transform .16s ease;
}
.nc-density-bubble::before {
  position: absolute;
  inset: -7px;
  z-index: -1;
  border: 3px solid var(--density-border, #16877e);
  border-radius: 50%;
  content: "";
  opacity: .28;
  animation: nc-density-glow 2.4s ease-out infinite;
}
.nc-density-bubble.is-density-medium {
  box-shadow: 0 4px 16px rgba(12, 37, 48, .38), 0 0 20px var(--density-border, #16877e);
}
.nc-density-bubble.is-density-medium::before { border-width: 4px; opacity: .48; animation-duration: 2s; }
.nc-density-bubble.is-density-hot {
  box-shadow: 0 5px 20px rgba(12, 37, 48, .42), 0 0 30px var(--density-border, #16877e);
}
.nc-density-bubble.is-density-hot::before { inset: -10px; border-width: 5px; opacity: .68; animation-duration: 1.55s; }

@keyframes nc-density-glow {
  0% { opacity: .7; transform: scale(.75); }
  80%, 100% { opacity: 0; transform: scale(1.45); }
}

.nc-density-icon:hover .nc-density-bubble,
.nc-density-icon:focus-visible .nc-density-bubble { transform: scale(1.12); }
.nc-density-icon:focus-visible { outline: 3px solid #163c57; outline-offset: 4px; }
.nc-density-bubble.is-mixed small {
  position: absolute;
  right: -5px;
  bottom: -5px;
  display: grid;
  place-items: center;
  width: 17px;
  height: 17px;
  border: 1px solid #fff;
  border-radius: 50%;
  background: #253f53;
  color: #fff;
  font-size: .72rem;
}

.nc-density-control {
  width: min(310px, calc(100vw - 32px));
  padding: 7px;
  border: 1px solid #a4c5c9;
  border-radius: 12px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 5px 20px rgba(20, 54, 66, .2);
}
.nc-density-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.nc-density-modes button {
  flex: 1;
  min-height: 32px;
  border: 1px solid #bdd5d5;
  border-radius: 7px;
  background: #f6faf9;
  color: #254d52;
  font-size: .73rem;
  font-weight: 850;
  cursor: pointer;
}
.nc-density-modes button[aria-pressed="true"] {
  border-color: #147f7a;
  background: #d6f5ec;
  color: #104d53;
}
.nc-density-modes button:disabled { cursor: not-allowed; opacity: .48; }
.nc-density-modes button:focus-visible { outline: 3px solid #e2a62e; outline-offset: 1px; }
.nc-density-status {
  margin: 6px 3px 0;
  color: #164f56;
  font-size: .67rem;
  font-weight: 900;
  line-height: 1.25;
}
.nc-density-legend {
  margin: 6px 3px 1px;
  color: #375257;
  font-size: .65rem;
  font-weight: 700;
  line-height: 1.3;
}
.nc-density-popup { display: grid; gap: 5px; min-width: 210px; max-width: 265px; }
.nc-density-popup strong { color: #24454a; font-size: .84rem; }
.nc-density-popup p { margin: 0; color: #577075; font-size: .7rem; }
.nc-density-popup-category {
  display: block;
  padding-left: 7px;
  border-left: 4px solid var(--density-category, #16877e);
  color: #28464c;
  font-size: .72rem;
}
.nc-density-popup button {
  min-height: 32px;
  margin-top: 4px;
  border: 1px solid #a6cbc8;
  border-radius: 7px;
  background: #e6f7f2;
  color: #145950;
  font-size: .73rem;
  font-weight: 850;
}
@media (max-width: 700px) {
  .nc-density-control { width: min(285px, calc(100vw - 24px)); }
  .nc-density-modes button { padding-inline: 3px; font-size: .67rem; }
  .nc-density-legend { font-size: .6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .nc-density-bubble { transition: none; }
  .nc-density-bubble::before { animation: none; opacity: .3; transform: none; }
}