.composite-rectilinear-figure {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  color: var(--color-text-primary);
}

.worked-example-representation,
.check-representation,
.result-representation {
  min-width: 0;
  margin-top: 12px;
  padding: 10px 8px 4px;
  border: 1px solid rgba(95, 116, 64, 0.18);
  border-radius: 8px;
  background: var(--color-surface-warm);
  overflow: hidden;
}

.check-representation,
.result-representation {
  margin-block: 4px 2px;
}

.representation-figure,
.representation-seam,
.representation-removed-region,
.representation-dimension-line,
.representation-extension-line,
.representation-hatch-line,
.representation-removed-hatch-line {
  vector-effect: non-scaling-stroke;
}

.representation-figure {
  fill: var(--color-primary-soft);
  stroke: var(--color-primary-dark);
  stroke-width: 3;
  stroke-linejoin: round;
}

.emphasis-outer_boundary .representation-figure {
  stroke-width: 6;
  stroke-dasharray: 14 4;
}

.representation-hatch-line {
  stroke: var(--color-primary-dark);
  stroke-width: 2;
}

.representation-seam {
  stroke: var(--color-accent-dark);
  stroke-width: 3;
  stroke-dasharray: 8 5;
}

.representation-seam.is-emphasized {
  stroke-width: 6;
  stroke-dasharray: 3 4;
}

.representation-removed-region {
  stroke: var(--color-accent-dark);
  stroke-width: 2.5;
  stroke-dasharray: 6 4;
}

.representation-removed-hatch-line {
  stroke: var(--color-accent-dark);
  stroke-width: 1.5;
}

.representation-dimension-line,
.representation-extension-line {
  stroke: var(--color-text-primary);
  stroke-width: 1.35;
}

.representation-extension-line {
  stroke-dasharray: 2 3;
  opacity: 0.75;
}

.representation-arrow {
  fill: var(--color-text-primary);
}

.representation-dimension-label {
  fill: var(--color-text-primary);
  stroke: var(--color-surface-warm);
  stroke-width: 4px;
  paint-order: stroke fill;
  font-family: inherit;
  font-size: 15px;
  font-weight: 850;
}

.representation-scale-note {
  fill: var(--color-text-secondary);
  font-family: inherit;
  font-size: 12px;
  font-weight: 750;
}

.representation-fallback {
  display: grid;
  gap: 8px;
  min-height: 180px;
  place-content: center;
  padding: 20px;
  border: 2px dashed var(--color-error);
  border-radius: 12px;
  background: var(--color-error-soft);
  color: var(--color-text-primary);
  text-align: left;
}

.representation-fallback strong,
.representation-fallback p {
  margin: 0;
}

.representation-fallback p {
  color: var(--color-text-secondary);
  line-height: 1.55;
}