/* The unchanged circular ribbon M sits beside the complete MIZOOR wordmark,
   with the original SVG's font, size, spacing and baseline. */
.header .brand {
  position: relative;
}
.header .brand-wordmark {
  display: block;
  width: 100%;
  height: auto;
}
.ribbon-emblem {
  position: absolute;
  inset: 0 auto 0 0;
  width: 17.777778%;
  aspect-ratio: 1;
  pointer-events: none;
  overflow: visible;
  transform: scale(1.15);
  transform-origin: center;
}
.ribbon-emblem > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.ribbon-rim {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  pointer-events: none;
}
.ribbon-orbit {
  transform-box: view-box;
  transform-origin: 50% 50%;
}
.ribbon-point {
  opacity: 1;
}
.ribbon-trail {
  stroke: #70eaff;
  stroke-width: 1.65;
  stroke-linecap: round;
  filter: drop-shadow(0 0 1px #00c9ff);
}
.ribbon-trail-far { opacity: .15; }
.ribbon-trail-mid { opacity: .38; }
.ribbon-trail-near { opacity: .72; }
.ribbon-halo {
  fill: #13d9ff;
  filter: blur(1.65px) drop-shadow(0 0 2.1px #00c9ff);
  opacity: .9;
}
.ribbon-dot {
  fill: #f1ffff;
  filter: drop-shadow(0 0 1px #9dffff);
}
.js .ribbon-orbit {
  animation: ribbon-dot-orbit 4s linear infinite;
}
.js .ribbon-point {
  animation: ribbon-dot-pulse 1.8s ease-in-out infinite;
}
@keyframes ribbon-dot-orbit {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes ribbon-dot-pulse {
  0%, 100% { opacity: .72; }
  50% { opacity: 1; }
}
.motion-paused .ribbon-orbit,
.motion-paused .ribbon-point,
.tab-hidden .ribbon-orbit,
.tab-hidden .ribbon-point {
  animation-play-state: paused !important;
}
@media (prefers-reduced-motion: reduce) {
  .js .ribbon-orbit,
  .js .ribbon-point {
    animation: none !important;
  }
  .ribbon-point { opacity: 1; }
}

/* Center against the entire header/page, independently of either side slot. */
@media (min-width: 961px) {
  .header .navigation {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    height: 100%;
  }
}
.header .header-actions { gap: 8px; }
.header .header-account {
  width: 80px;
  min-width: 80px;
  height: 40px;
  padding-inline: 12px;
  font-size: 12px;
  font-weight: 500;
  color: #deefff;
  border-radius: 999px;
}
.header .header-login {
  border-color: #589ee5;
  background: #08192b99;
  box-shadow: 0 0 calc(10 * var(--u)) #218eff30, inset 0 0 calc(4 * var(--u)) #3c90e815;
}
.header .header-signup {
  color: #f4faff;
  border-color: #63b2f1;
  background: linear-gradient(180deg, #278de3, #176dc4);
  box-shadow: inset 0 1px 1px #b6e1ff30, 0 0 9px #218eff25;
}
.header .header-account:focus-visible {
  border-color: #b7eaff;
  box-shadow: 0 0 14px #229eff60;
}
@media (hover: hover) and (pointer: fine) {
  .header .header-login:hover {
    border-color: #8bd9ff;
    box-shadow: 0 0 14px #218eff4a;
  }
  .header .header-signup:hover {
    border-color: #92d4ff;
    filter: brightness(1.08);
    box-shadow: inset 0 1px 1px #b6e1ff40, 0 0 12px #218eff40;
  }
}
@media (max-width: 960px) {
  .header .header-account { height: 44px; }
}
@media (max-width: 600px) {
  .header .header-actions { justify-content: flex-end; }
}