.vis {
  --font-family-heading: "Poppins", sans-serif;
  --font-family-body: "Inter", sans-serif;

  --font-size-xxl: 34px;
  --font-size-xl: 20px;
  --font-size-lg: 18px;
  --font-size-md: 16px;
  --font-size-sm: 14px;

  --font-weight-bold: 700;
  --font-weight-semibold: 600;
  --font-weight-medium: 500;
  --font-weight-regular: 400;

  --line-height-md: 1.5;
  --line-height-sm: 1.2;

  --color-primary: #151a2d;
  --color-accent: #8a38f5;

  --color-dark-blue-9: #151a2d; /* oklch(0.22 0.038 271.81) */
  --color-dark-blue-8: #2b2f41; /* oklch(0.31 0.033 274.62) */
  --color-dark-blue-7: #434556; /* oklch(0.40 0.029 279.73) */
  --color-dark-blue-6: #5b5d6c; /* oklch(0.48 0.024 279.44) */
  --color-dark-blue-5: #747683; /* oklch(0.57 0.020 278.79) */
  --color-dark-blue-4: #8e909b; /* oklch(0.66 0.016 277.71) */
  --color-dark-blue-3: #a9aab3; /* oklch(0.74 0.013 281.00) */
  --color-dark-blue-2: #c5c6cc; /* oklch(0.83 0.008 278.61) */
  --color-dark-blue-1: #e2e2e5; /* oklch(0.91 0.004 286.32) */

  --color-purple-9: #8a38f5; /* oklch(0.56 0.257 296.70) */
  --color-purple-8: #9b51f7; /* oklch(0.61 0.235 299.79) */
  --color-purple-7: #ab68f9; /* oklch(0.66 0.210 302.26) */
  --color-purple-6: #b97efa; /* oklch(0.70 0.182 304.09) */
  --color-purple-5: #c794fc; /* oklch(0.75 0.153 305.63) */
  --color-purple-4: #d3a9fd; /* oklch(0.80 0.124 306.71) */
  --color-purple-3: #dfbffe; /* oklch(0.85 0.092 307.60) */
  --color-purple-2: #ead4fe; /* oklch(0.90 0.061 308.71) */
  --color-purple-1: #f5e9ff; /* oklch(0.95 0.032 309.94) */

  --color-white: #ffffff;

  --space-8: 8px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;
  --space-96: 96px;

  font-family: var(--font-family-body);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-md);
}

.vis svg {
  display: block;
  max-width: 100%;
  height: auto;
}

.vis .comparison__title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-sm);
}

.vis .label {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-md);
}

.vis .comparison__footer {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-md);
}

.vis .scene-switch {
  display: grid;
  overflow: hidden;
}

.vis .scene {
  grid-area: 1 / -1;
  padding: var(--space-24);
  background-color: var(--color-white);
}

.vis .comparison {
  --min-side-width: 240px;
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(100%, var(--min-side-width)), 1fr)
  );
  gap: var(--space-24) var(--space-48);
  justify-content: center;
}

.vis .comparison__side {
  display: grid;
  grid-template-rows: auto 320px auto;
  gap: var(--space-16);
}

.vis .comparison__title,
.vis .comparison__footer {
  text-align: center;
}

.vis .comparison__side[data-side="rslt"] .comparison__title,
.vis .comparison__side[data-side="rslt"] .comparison__footer {
  color: var(--color-accent);
}

.vis .comparison__body {
  position: relative;
  visibility: hidden;
}

.vis .comparison__body * {
  position: absolute;
}

/* S2S1 */
.vis [data-scene="s2s1"] .bar.legacy.linear,
.vis [data-scene="s2s1"] .bar.legacy.streaming {
  background-color: var(--color-dark-blue-3);
}

.vis [data-scene="s2s1"] .bar.legacy.linear-competing,
.vis [data-scene="s2s1"] .bar.legacy.streaming-competing {
  background-color: var(--color-dark-blue-5);
}

.vis [data-scene="s2s1"] .bar.rslt.linear,
.vis [data-scene="s2s1"] .bar.rslt.streaming {
  background-color: var(--color-purple-5);
}

.vis [data-scene="s2s1"] .bar.rslt.linear-competing,
.vis [data-scene="s2s1"] .bar.rslt.streaming-competing {
  background-color: var(--color-purple-9);
}

.vis [data-scene="s2s1"] .clip {
  background-color: var(--color-white);
}

.vis [data-scene="s2s1"] .labels {
  text-wrap: nowrap;
  pointer-events: none;
}

/* S2S2 */
.vis [data-scene="s2s2"] .traffic-fill.legacy {
  fill: var(--color-dark-blue-5);
}

.vis [data-scene="s2s2"] .traffic-fill.rslt {
  fill: var(--color-purple-9);
}

.vis [data-scene="s2s2"] .traffic {
  fill: none;
  stroke: var(--color-dark-blue-5);
  stroke-width: 2px;
}

.vis [data-scene="s2s2"] .baseline-fill {
  fill: var(--color-dark-blue-1);
}

.vis [data-scene="s2s2"] .baseline {
  fill: none;
  stroke-width: 2px;
}

.vis [data-scene="s2s2"] .baseline.legacy {
  stroke: var(--color-dark-blue-5);
}

.vis [data-scene="s2s2"] .baseline.rslt {
  stroke: var(--color-purple-9);
}

.vis [data-scene="s2s2"] .windows {
  fill-opacity: 0.2;
  stroke-width: 1.5px;
  stroke-dasharray: 4;
}

.vis [data-scene="s2s2"] .windows.legacy {
  stroke: var(--color-dark-blue-3);
  fill: var(--color-dark-blue-3);
}

.vis [data-scene="s2s2"] .windows.rslt {
  stroke: var(--color-purple-5);
  fill: var(--color-purple-5);
}

.vis [data-scene="s2s3"] .links {
  stroke: var(--color-purple-5);
  stroke-width: 1.5px;
}

.vis [data-scene="s2s3"] .nodes.legacy {
  fill: var(--color-dark-blue-5);
}

.vis [data-scene="s2s3"] .nodes.rslt {
  fill: var(--color-purple-9);
}

.vis [data-scene="s2s3"] .labels {
  pointer-events: none;
  stroke: var(--color-white);
  stroke-width: 4px;
  stroke-linejoin: round;
  stroke-linecap: round;
  paint-order: stroke;
}