.tutorial-figure {
  margin: 2rem auto;
  color: #1f2528;
}

.tutorial-figure__frame {
  position: relative;
  display: block;
  padding: 1.4rem 1rem 1rem;
  background: #fbfcff;
}

.tutorial-figure__svg {
  display: block;
  margin: 0 auto;
  width: min(100%, 640px);
  height: auto;
  overflow: visible;
}

.tutorial-figure__math-labels {
  --figure-aspect: 600 / 320;
  position: absolute;
  top: 1.4rem;
  left: 50%;
  z-index: 1;
  width: min(100%, 640px);
  aspect-ratio: var(--figure-aspect);
  transform: translateX(-50%);
  pointer-events: none;
}

.tutorial-figure--gaussian-1d .tutorial-figure__math-labels {
  --figure-aspect: 600 / 260;
}

.tutorial-figure--gaussian-2d .tutorial-figure__math-labels {
  --figure-aspect: 520 / 360;
}

.tutorial-figure--gaussian-3d .tutorial-figure__math-labels {
  --figure-aspect: 600 / 320;
}

.tutorial-figure--eigen-density .tutorial-figure__math-labels {
  --figure-aspect: 520 / 320;
}

.tutorial-figure--quad-construction .tutorial-figure__math-labels,
.tutorial-figure--screen-space-quad .tutorial-figure__math-labels {
  --figure-aspect: 600 / 320;
}

.tutorial-figure--screen-space-quad .tutorial-figure__math-labels {
  --figure-aspect: 600 / 310;
}

.tutorial-figure__math-label {
  position: absolute;
  top: var(--label-y);
  left: var(--label-x);
  color: #1f2528;
  font-size: 14px;
  line-height: 1;
  transform: translate(-50%, -50%);
  white-space: nowrap;
}

.tutorial-figure__math-label--left {
  transform: translate(0, -50%);
}

.tutorial-figure__math-label--right {
  transform: translate(-100%, -50%);
}

.tutorial-figure__math-label--small {
  font-size: 12px;
}

.tutorial-figure__math-label--tiny {
  font-size: 10.5px;
}

.tutorial-figure__math-label--large {
  font-size: 18px;
}

.tutorial-figure__math-label--muted {
  color: #8a9398;
}

.tutorial-figure__math-label--accent {
  color: #6e85e8;
}

.tutorial-figure__math-label mjx-container {
  color: inherit !important;
  font-size: 100% !important;
}

.tutorial-figure figcaption {
  width: min(100%, 640px);
  margin: 0.55rem auto 0.1rem;
  color: var(--secondary);
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.45;
  text-align: center;
}

.tutorial-figure text {
  fill: #1f2528;
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
}

.tutorial-figure .math {
  font-family: KaTeX_Math, "Times New Roman", serif;
  font-style: italic;
}

.tutorial-figure .label { font-size: 14px; }
.tutorial-figure .small { font-size: 12px; }
.tutorial-figure .tiny { font-size: 10.5px; }

.tutorial-figure .muted {
  fill: #8a9398;
}

.tutorial-figure .axis {
  stroke: #1f2528;
  stroke-width: 1.1;
  fill: none;
  stroke-linecap: round;
}

.tutorial-figure .thin {
  stroke: #1f2528;
  stroke-width: 0.9;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tutorial-figure .grid {
  stroke: #d8dedb;
  stroke-width: 0.9;
  fill: none;
}

.tutorial-figure .accent {
  stroke: #8da2f9;
  stroke-width: 1.6;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tutorial-figure .accent-thin {
  stroke: #8da2f9;
  stroke-width: 1.1;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tutorial-figure .accent-faint {
  stroke: #c0cdfb;
  stroke-width: 1;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tutorial-figure .accent-fill {
  fill: rgb(141 162 249 / 18%);
}

.tutorial-figure .accent-fill-strong {
  fill: rgb(141 162 249 / 32%);
}

.tutorial-figure .accent-text {
  fill: #6e85e8;
}

.tutorial-figure .ink-dot {
  fill: #1f2528;
}

.tutorial-figure .accent-dot {
  fill: #8da2f9;
}

.tutorial-figure .dash {
  stroke-dasharray: 5 5;
}

.splat-pipeline__math-labels {
  position: absolute;
  top: 1.4rem;
  left: 50%;
  width: min(100%, 640px);
  aspect-ratio: 700 / 240;
  transform: translateX(-50%);
  pointer-events: none;
}

.splat-pipeline__math-label {
  position: absolute;
  top: 23%;
  color: #8a9398;
  font-size: 12px;
  line-height: 1;
  transform: translate(-50%, -50%);
  white-space: nowrap;
}

.splat-pipeline__math-label--3d {
  left: 12.85%;
}

.splat-pipeline__math-label--2d {
  left: 42.15%;
}

.splat-pipeline__math-label mjx-container {
  color: inherit !important;
  font-size: 100% !important;
}

@media (max-width: 720px) {
  .tutorial-figure {
    margin: 1.6rem 0;
  }

  .tutorial-figure__frame {
    padding: 1rem 0.6rem 0.7rem;
  }

  .tutorial-figure__math-labels {
    top: 1rem;
  }

  .splat-pipeline__math-labels {
    top: 1rem;
  }
}