.clv-tooth {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  shape-rendering: geometricPrecision;
}
.clv-tooth .clv-root-line {
  fill: none;
  stroke: #b9c9b8;
  stroke-width: 0.8;
  opacity: 0.48;
}
.clv-tooth .clv-crown-line {
  fill: none;
  stroke: #a6b5a7;
  stroke-width: 0.85;
  opacity: 0.6;
}
.clv-tooth .clv-crown-shine {
  fill: none;
  stroke: #fff;
  stroke-width: 4;
  opacity: 0.85;
}
.clv-tooth.is-selected .clv-crown {
  stroke: #54876a;
  stroke-width: 1.8;
}
.clv-tooth.is-selected .clv-crown-line {
  stroke: #6c9679;
  opacity: 0.8;
}
.clv-tooth-marker {
  filter: drop-shadow(0 1px 1px #2f4d291a);
}
.clv-face {
  stroke-linecap: round;
  stroke-linejoin: round;
}
.clv-face-detail {
  fill: none;
  stroke: #aab6a7;
  stroke-width: 0.9;
  opacity: 0.84;
}
.clv-face-contour {
  fill: none;
  stroke: #b1bead;
  stroke-width: 0.9;
  opacity: 0.64;
}
.clv-face-brow {
  fill: none;
  stroke: #8da18f;
  stroke-width: 2.5;
  opacity: 0.65;
}
.clv-face-eye {
  fill: #f7f7ee;
  stroke: #9aab98;
  stroke-width: 1.1;
}
.clv-lip-line {
  fill: none;
  stroke: #b5a494;
  stroke-width: 0.9;
  opacity: 0.84;
}
.clv-hair-line {
  fill: none;
  stroke: #e1e8dc;
  stroke-width: 0.8;
  opacity: 0.55;
}
.clv-surfaces {
  display: block;
  max-width: 240px;
  width: 100%;
  height: auto;
  margin: auto;
}
.clv-surface path {
  stroke: #b9c8b9;
  stroke-width: 1.1;
  stroke-linejoin: round;
  transition:
    fill 0.15s,
    stroke 0.15s;
}
.clv-surface text {
  text-anchor: middle;
  font:
    600 12px system-ui,
    sans-serif;
  fill: #7d927f;
  pointer-events: none;
  dominant-baseline: middle;
}
.clv-surface.is-active path {
  stroke: #7da188;
  stroke-width: 1.5;
}
.clv-surface.is-active text {
  fill: #345f44;
}
.clv-surface[role='button'] {
  cursor: pointer;
  outline: none;
}
.clv-surface[role='button']:hover path {
  fill: #e3eee2;
  stroke: #7eaa88;
}
.clv-surface[role='button']:focus-visible path {
  stroke: #416957;
  stroke-width: 3;
}
.clv-surface-caption {
  text-anchor: middle;
  font:
    600 9px system-ui,
    sans-serif;
  letter-spacing: 1.2px;
  fill: #849780;
}
.clv-empty {
  display: block;
  width: 180px;
  max-width: 100%;
  height: auto;
  margin: 0 auto 14px;
}
.clv-empty path,
.clv-empty rect,
.clv-empty circle {
  vector-effect: non-scaling-stroke;
}
@media (prefers-reduced-motion: reduce) {
  .clv-surface path {
    transition: none;
  }
}