.terrain-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform-origin: center center;
}
.projected-grid {
  fill: none;
  stroke: var(--sage);
  stroke-width: 0.8;
  opacity: 0.23;
}
.projected-terrace {
  outline: none;
}
.face-base {
  fill: none;
  stroke: var(--sage);
  stroke-width: 1;
  opacity: 0.6;
}
.face-side {
  fill: var(--line);
  stroke: var(--line);
  stroke-width: 0.8;
}
.face-front {
  fill: var(--sage);
  stroke: var(--line);
  stroke-width: 0.8;
}
.face-top {
  fill: var(--sage);
  stroke: var(--mineral);
  stroke-width: 1;
}
.projected-1 .face-top {
  fill: var(--mineral);
}
.projected-2 .face-top {
  fill: var(--stone);
}
.face-inset {
  fill: none;
  stroke: var(--navy);
  stroke-width: 7;
  opacity: 0.06;
  pointer-events: none;
}
.face-contours {
  fill: none;
  stroke: var(--navy);
  stroke-width: 0.8;
  opacity: 0.26;
  pointer-events: none;
}
.terrace-number {
  font:
    400 18px Kala,
    sans-serif;
  fill: var(--navy);
  text-anchor: middle;
  dominant-baseline: middle;
  pointer-events: none;
}
.terrace-hit {
  fill: transparent;
  stroke: none;
}
.interactive .projected-terrace {
  cursor: pointer;
}
.projected-terrace.is-unknown .face-top {
  fill: var(--navy);
  stroke: var(--mineral);
  stroke-dasharray: 4 3;
}
.projected-terrace.is-unknown .terrace-number {
  fill: var(--mineral);
}
.projected-terrace.is-unknown .face-inset {
  opacity: 0;
}
.projected-terrace.is-active .face-top,
.projected-terrace:focus-visible .face-top {
  stroke: var(--stone);
  stroke-width: 3;
}
.projected-terrace:focus-visible .terrace-hit {
  stroke: var(--mineral);
  stroke-width: 2;
  stroke-dasharray: 3 3;
}
.terrain-labels button.is-active {
  border-top-color: var(--mineral);
}
.report-terrain .projected-grid {
  opacity: 0.2;
}
.report-terrain .projected-terrace.is-unknown .face-top {
  fill: var(--stone);
  stroke: var(--navy);
}
.report-terrain .projected-terrace.is-unknown .terrace-number {
  fill: var(--navy);
}
@media (hover: hover) and (pointer: fine) {
  .interactive .projected-terrace:hover .face-top {
    stroke: var(--stone);
    stroke-width: 3;
  }
}
@media (max-width: 640px) {
  .check-terrain .terrain-svg {
    position: absolute;
    top: -30px;
    left: 0;
    height: 180px;
  }
  .hero-visual .scene-viewport {
    overflow: visible;
  }
  .offer-field .terrain-svg {
    height: 100%;
  }
  .report-terrain .terrain-svg {
    height: 100%;
  }
}