/* ============================================================
   dream : blueprint — skin.
   Drafting-table graph paper, registration marks, dashed
   construction circles behind the logo.
   ============================================================ */

html[data-theme="blueprint"] body {
  background-color: #122550;
  background-image:
    linear-gradient(rgba(226,236,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(226,236,255,0.05) 1px, transparent 1px),
    linear-gradient(rgba(226,236,255,0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(226,236,255,0.10) 1px, transparent 1px);
  background-size: 22px 22px, 22px 22px, 110px 110px, 110px 110px;
}

html[data-theme="blueprint"] .df-logo img {
  filter: drop-shadow(0 0 34px rgba(157,180,228,0.35)) drop-shadow(0 0 70px rgba(201,162,75,0.18));
}
html[data-theme="blueprint"] .df-rule {
  height: 0;
  border-top: 1px dashed rgba(201,162,75,0.8);
  background: none;
}

html[data-theme="blueprint"] #df-dream-label { color: rgba(201,162,75,0.55); }
html[data-theme="blueprint"] #df-change-dream { border-style: dashed; }

.df-bp-circle {
  position: absolute;
  z-index: -1;
  top: 50%; left: 50%;
  width: 132%; height: 132%;
  margin: -66% 0 0 -66%;
  border: 1px dashed rgba(201,162,75,0.4);
  border-radius: 50%;
  pointer-events: none;
  animation: df-spin 70s linear infinite;
  /* promote to a compositor layer: Safari otherwise repaints the
     dashed round border on every animation frame, which is slow */
  will-change: transform;
  backface-visibility: hidden;
}
.df-bp-circle.inner {
  width: 108%; height: 108%;
  margin: -54% 0 0 -54%;
  border-color: rgba(169,182,205,0.3);
  animation: df-spin 100s linear infinite reverse;
}
@keyframes df-spin { to { transform: rotate(360deg); } }

.df-bp-mark { position: absolute; width: 26px; height: 26px; opacity: 0.55; }
.df-bp-mark::before, .df-bp-mark::after {
  content: "";
  position: absolute;
  background: rgba(201,162,75,0.7);
}
.df-bp-mark::before { top: 50%; left: 0; right: 0; height: 1px; }
.df-bp-mark::after { left: 50%; top: 0; bottom: 0; width: 1px; }
.df-bp-mark.tl { top: 18px; left: 18px; }
.df-bp-mark.tr { top: 18px; right: 18px; }
.df-bp-mark.bl { bottom: 18px; left: 18px; }
.df-bp-mark.br { bottom: 18px; right: 18px; }