.campus-model {
  --campus-yaw: -24deg;
  --campus-pitch: 58deg;
  position: absolute;
  inset: 0;
  perspective: 1100px;
  pointer-events: none;
  isolation: isolate;
}

.campus-model__scale,
.campus-model__world {
  position: absolute;
  left: 50%;
  top: 53%;
  width: 456px;
  height: 310px;
  transform-style: preserve-3d;
}

.campus-model__scale {
  transform: translate(-50%, -50%) scale(var(--campus-scale, .7));
}

.campus-model__world {
  top: 50%;
  transform: translate(-50%, -50%) rotateX(var(--campus-pitch)) rotateZ(var(--campus-yaw));
}

.campus-model__plane {
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  transform-origin: top left;
  backface-visibility: hidden;
}

.campus-model__board {
  background: #133b30;
  box-shadow: inset 0 -2px #63d99c80;
}

.campus-model__board--front,
.campus-model__board--right {
  background: #326150;
}

.campus-model__grounds {
  overflow: hidden;
  background:
    radial-gradient(ellipse at 44% 26%, #456e52, transparent 60%),
    radial-gradient(ellipse at 22% 65%, #305941, transparent 54%),
    #183e31;
  box-shadow: inset 0 0 0 1px #84d8a58c, inset 0 0 38px #091f1960;
}

.campus-model__border {
  position: absolute;
  inset: 9px;
  border: 1px dashed #a8e3ae52;
  background:
    repeating-linear-gradient(90deg, transparent 0 19px, #b5e2b017 19px 20px),
    repeating-linear-gradient(0deg, transparent 0 19px, #b5e2b014 19px 20px);
}

.campus-model__path {
  position: absolute;
  top: -23px;
  left: 203px;
  width: 60px;
  height: 362px;
  background: linear-gradient(90deg, #778a75 0 3%, #9ea698 3% 97%, #778a75 97%);
  transform: rotate(-3deg);
  opacity: .72;
}

.campus-model__plaza {
  position: absolute;
  left: 135px;
  top: 191px;
  width: 186px;
  height: 103px;
  border-radius: 50%;
  border: 4px solid #9aa595;
  box-shadow: inset 0 0 0 2px #647d70;
  background:
    radial-gradient(ellipse at center, #7e9389 0 20%, #80978b 21% 25%, transparent 26%),
    repeating-linear-gradient(0deg, #acb7a6 0 6px, #9eac9c 6px 7px);
}

.campus-model__bearing {
  position: absolute;
  right: 16px;
  bottom: 13px;
  width: 23px;
  height: 23px;
  border: 1px solid #c4e8bc7a;
  border-radius: 50%;
  color: #dbf5cf;
  font: 10px/21px monospace;
  text-align: center;
}

.campus-model__plinth {
  border: 1px solid #849b87;
  background: #607d6a;
}

.campus-model__plinth--roof {
  background: repeating-linear-gradient(90deg, #8aa08c 0 8px, #809682 8px 9px);
}

.campus-model__building,
.campus-model__entry {
  border: 1px solid #c4d0b9;
  background:
    repeating-linear-gradient(90deg, transparent 0 15px, #354f42aa 15px 17px),
    repeating-linear-gradient(0deg, #93a28d 0 13px, #bec8b2 13px 14px);
}

.campus-model__building--left,
.campus-model__building--back {
  background:
    repeating-linear-gradient(90deg, transparent 0 13px, #416055aa 13px 15px),
    repeating-linear-gradient(0deg, #708b7d 0 12px, #a1b3a1 12px 13px);
}

.campus-model__building--right {
  background:
    repeating-linear-gradient(90deg, transparent 0 14px, #3a5549aa 14px 16px),
    repeating-linear-gradient(0deg, #7f9889 0 13px, #a9bda9 13px 14px);
}

.campus-model__building--front::before,
.campus-model__building--back::before,
.campus-model__building--left::before,
.campus-model__building--right::before {
  content: "";
  position: absolute;
  inset: auto 6px 17px;
  height: 30px;
  background:
    repeating-linear-gradient(90deg, #355f5f 0 5px, #609297 5px 10px, #8faba1 10px 13px),
    #467075;
  border-block: 1px solid #b2c5b0;
  box-shadow: inset 0 0 0 1px #283f3f78;
  clip-path: polygon(0 0, 100% 0, 100% 28%, 0 28%, 0 43%, 100% 43%, 100% 67%, 0 67%, 0 79%, 100% 79%, 100% 100%, 0 100%);
}

.campus-model__building--roof,
.campus-model__entry--roof {
  border-color: #98b69a;
  background:
    linear-gradient(145deg, #799485, transparent 58%),
    repeating-linear-gradient(0deg, #344f45 0 7px, #3b5a4d 7px 8px);
  box-shadow: inset 0 0 0 2px #587766;
}

.campus-model__entry--front {
  background:
    linear-gradient(90deg, #93a48e 0 9%, transparent 9% 91%, #93a48e 91%),
    linear-gradient(0deg, #132925 0 29%, #799482 29% 43%, transparent 43% 75%, #8b9f8f 75%),
    repeating-linear-gradient(90deg, #30676c 0 4px, #609597 4px 6px, #315a55 6px 7px);
}

.campus-model__sign {
  position: absolute;
  top: 11px;
  width: 100%;
  text-align: center;
  color: #fff9df;
  font: 700 3.3px/1 sans-serif;
  letter-spacing: .11px;
  white-space: nowrap;
}

.campus-model__tree {
  backface-visibility: visible;
  background:
    linear-gradient(90deg, transparent 45%, #6b6850 46% 54%, transparent 55%) 50% 100% / 32% 26% no-repeat,
    radial-gradient(ellipse at 34% 30%, #94c28c 0, #628d66 22%, #2b5842 63%, #214334 77%) 50% 0 / 100% 88% no-repeat;
  clip-path: polygon(50% 0, 81% 12%, 100% 45%, 89% 74%, 57% 87%, 57% 100%, 43% 100%, 43% 87%, 12% 74%, 0 45%, 20% 12%);
}

.campus-model__tree--top {
  border-radius: 50%;
  background: radial-gradient(ellipse at 34% 30%, #94c28c 0, #628d66 24%, #2b5842 74%);
  clip-path: none;
}

.campus-model__flag {
  backface-visibility: visible;
  border-left: 1px solid #d9e4ca;
}

.campus-model__flag-cloth {
  width: 15px;
  height: 10px;
  background: linear-gradient(#cb6558 0 50%, #f4ecdb 50%);
  clip-path: polygon(0 0, 100% 11%, 90% 100%, 0 90%);
}