.hh-art {
  width: 100%;
  position: relative;
  isolation: isolate;
  color: #cbb0ff;
  pointer-events: none;
}
.hh-art .hh-svg { display: block; width: 100%; height: auto; overflow: visible; }
.hh-art .hh-orbit-outer { stroke: #9f7aea; stroke-opacity: .16; stroke-width: .8; }
.hh-art .hh-orbit-inner { stroke: #cbb0ff; stroke-opacity: .24; stroke-width: .7; }
.hh-art .hh-orbit-dash { stroke: #b18ce6; stroke-opacity: .25; stroke-width: .7; stroke-dasharray: 2 7; }
.hh-art .hh-orbit-mark { stroke: #cbb0ff; stroke-opacity: .4; stroke-width: 1; }
.hh-art .hh-plane-grid { stroke: #cbb0ff; stroke-width: .55; stroke-opacity: .08; }
.hh-art .hh-plane-inlay { stroke: #b28bdc; stroke-opacity: .12; stroke-width: .7; }
.hh-art .hh-note-shadows { opacity: .38; }
.hh-art .hh-routes { stroke: #ac82da; stroke-opacity: .31; stroke-width: .75; }
.hh-art .hh-routes circle { fill: #cbb0ff; stroke: none; fill-opacity: .42; }
.hh-art .hh-packet { fill: #dcc8ff; }
.hh-art .hh-envelope-fold { stroke: #ceb3f2; stroke-opacity: .42; stroke-width: .7; }
.hh-art .hh-seal-face { fill: #b996ef; fill-opacity: .8; stroke: #e5d6ff; stroke-opacity: .58; stroke-width: .55; }
.hh-art .hh-seal-ink { stroke: #342047; stroke-width: 1.15; }
.hh-art .hh-note-foot { stroke: #ba96ed; stroke-opacity: .32; stroke-width: .7; }
.hh-art .hh-note-corner { stroke: #e5d6ff; stroke-opacity: .55; stroke-width: .8; }
.hh-art .hh-art-detail { stroke: #cbb0ff; stroke-opacity: .32; stroke-width: .8; }
.hh-art .hh-art-detail circle { fill: #cbb0ff; fill-opacity: .55; stroke: none; }
@media (max-width: 600px) {
  .hh-art .hh-svg { overflow: hidden; }
}