:root {
  --spacing-unit: 1em;
  --cell-height: 8.33vh;
  --cell-width: 8.33vw;
  --font-size: 1rem;
  --line-height: 1.5;
  --font-family: system-ui, "Inter", Arial, sans-serif;

  --dominant-color: #ff0000;
  --surface-color: #f0f0f0;
  --accent-color: hsl(from var(--dominant-color) calc(h + 180) s calc(100 - l));
  --text-color: hsl(
    from var(--surface-color) calc(h + 240) calc(100 - s) calc(100 - l)
  );
  --shadow-color: #000000;
  --anchor-color: #17a2b8;
  --anchor-visited-color: #551a8b;

  counter-reset: counter;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.graph {
   background-color: var(--surface-color, #f0f0f0);
   height: clamp(calc(var(--font-size, 1rem) * 1.667), calc(var(--cell-height, 8.33vh) * 11.5), calc(var(--font-size, 1rem) * 240));
   width: clamp(calc(var(--font-size, 1rem) * 1.667), calc(var(--cell-width, 8.33vw) * 12),calc(var(--font-size, 1rem) * 240));
   z-index: var(--neutral-depth, 0);
   border: 1px solid black;
   border-radius: 0%;
   position: relative;
   user-select: none;
   overflow: hidden;
}

.graph .item {
   background-color: var(--surface-color, #f0f0f0);
   color: var(--text-color, #333);
   height: clamp(calc(var(--font-size, 1rem) * 1.5), calc(var(--cell-height, 8.33vh) / 12), calc(var(--font-size, 1rem) * 20));
   width: clamp(calc(var(--font-size, 1rem) * 1.5), calc(var(--cell-width, 8.33vw) / 12), calc(var(--font-size, 1rem) * 20));
   z-index: var(--overlay-depth, 1);
   font-family: var(--font-family, sans-serif);
   font-size: var(--font-size, 1rem);
   text-align: center;
   border: 0px solid black;
   border-radius: 100%;
   position: absolute;
   user-select: none;
   overflow: hidden;
   text-overflow: ellipsis;
   transition: transform 0.2s ease, font-size 0.2s ease;
}

.graph .item img.item-icon {
   width: 100%;
   height: 100%;
   object-fit: contain; 
   border-radius: 50%;  
   pointer-events: none; 
}

.graph .item:hover {
   background-color: var(--accent-color, #ffff00);
   border: 1px dotted black;
   z-index: var(--pop-up-depth, 10);
   font-size: var(--font-size, 1rem);
   transform: scale(1.125) translateY(-3.375px);
}

.graph-filter {
   height: clamp(calc(var(--font-size, 1rem) * 1.667), calc(var(--cell-height, 8.33vh) * 0.5), calc(var(--font-size, 1rem) * 240));
   width: clamp(calc(var(--font-size, 1rem) * 1.667), calc(var(--cell-width, 8.33vw) * 12),calc(var(--font-size, 1rem) * 240));
  display: flex;
  flex-wrap: wrap;
  background: var(--surface-color, #f0f0f0);
  position: relative;
  z-index: 1; 
}

.graph-filter label {
  display: flex;
  align-items: center;
  gap: 0.25em;
font-size: var(--font-size, 1rem);
  cursor: pointer;
}