body.arch-body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
  background: #050d18;
}
body.arch-body .site-header { flex: 0 0 auto; }
body.arch-body main {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
}
body.arch-body .site-footer { display: none; }
.arch-frame {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  width: 100%;
}
.arch-svg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.hot { cursor: pointer; outline: none; }
.hit {
  fill: transparent;
  stroke: transparent;
  stroke-width: 2.5;
}
.hot:hover .hit,
.hot.is-on .hit,
.hot:focus-visible .hit {
  fill: rgba(53, 208, 189, 0.18);
  stroke: #8dffe8;
}
.line.dash,
.lineTeal.dash {
  animation: arch-flow 2.4s linear infinite;
}
@keyframes arch-flow { to { stroke-dashoffset: -39; } }
@media (max-width: 860px) {
  body.arch-body { height: auto; min-height: 100dvh; overflow: auto; }
  .arch-frame { height: calc(100dvh - var(--header)); }
}
@media (prefers-reduced-motion: reduce) {
  .line.dash,
  .lineTeal.dash { animation: none; }
}