/* A single axonometric projection, with quiet drafting aids. */
.transition-grid {
  background-image: linear-gradient(#405c330b 1px, transparent 1px), linear-gradient(90deg, #405c330b 1px, transparent 1px);
  background-size: 64px 64px;
  transform: none;
  mask-image: linear-gradient(110deg, transparent 8%, #000 65%);
}
.transition-intro { z-index: 2; }
.concept-drawing {
  left: 32%; right: 4%; top: 21%; bottom: 12%;
  transform: translateY(var(--study-y, 12px)) scale(var(--study-scale, .98));
  transform-origin: 60% 60%;
  color: #3b5532;
}
.concept-drawing svg { height: 100%; overflow: hidden; }
.concept-drawing path {
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.study-site { stroke-width: 1; opacity: .44; }
.study-deck { stroke-width: .7; opacity: calc(var(--study-detail, 0) * .25); }
.study-faces { stroke: none; opacity: var(--study-mass, 0); }
.study-structure { stroke-width: 1.7; }
.study-roof { stroke-width: 1.35; }
.study-windows { stroke-width: .95; }
.study-guides { stroke-width: .7; opacity: calc(var(--study-detail, 0) * .36); }
.study-site path, .study-structure path, .study-roof path, .study-windows path { stroke-dasharray: 1; }
.study-site path { stroke-dashoffset: calc(1 - var(--study-site, 0)); }
.study-structure path { stroke-dashoffset: calc(1 - var(--study-mass, 0)); }
.study-roof path { stroke-dashoffset: calc(1 - var(--study-roof, 0)); }
.study-windows path { stroke-dashoffset: calc(1 - var(--study-detail, 0)); }
.concept-drawing > span {
  right: 0; bottom: -5%; font-size: 14px; line-height: 1.7;
  word-break: keep-all; overflow-wrap: anywhere;
}
.paused .concept-drawing {
  --study-site: 1; --study-mass: 1; --study-roof: 1; --study-detail: 1;
  height: 480px;
}
.paused .concept-drawing > span { bottom: 0; }
@media (max-width: 760px) {
  .concept-drawing { inset: 32% 2% 20%; }
  .concept-drawing > span { left: 5%; right: 5%; bottom: -9%; font-size: 14px; }
  .transition-grid { background-size: 48px 48px; mask-image: linear-gradient(180deg, transparent 18%, #000 75%); }
  .paused .concept-drawing { height: 340px; margin-inline: -5%; }
}
@media (max-width: 760px) and (max-height: 740px) {
  .concept-drawing { top: 36%; bottom: 19%; }
}