/* The Mifumo mark: three bars (blue, orange, green), as in the favicon. One definition for every page.
   Markup: <span class="mf-mark" aria-hidden="true"><i></i><i></i><i></i></span>
   The selectors are deliberately specific so the old per-page "brand i" rules cannot restyle the bars. */
html .mf-mark.mf-mark{display:inline-flex;align-items:center;gap:3px;height:18px;flex:none}
html .mf-mark.mf-mark>i{display:block;width:4px;height:100%;border-radius:2px;transform-origin:50% 100%;
  animation:mf-rise .7s cubic-bezier(.2,.9,.25,1.2) both}
html .mf-mark.mf-mark>i:nth-child(1){background:#1f6fd1;animation-delay:0s}
html .mf-mark.mf-mark>i:nth-child(2){background:#f08a24;animation-delay:.1s}
html .mf-mark.mf-mark>i:nth-child(3){background:#2e9e4f;animation-delay:.2s}
/* a short wave when the logo is hovered or focused */
html a:hover>.mf-mark.mf-mark>i,html a:focus-visible>.mf-mark.mf-mark>i{animation:mf-wave .7s ease-in-out both}
html a:hover>.mf-mark.mf-mark>i:nth-child(2),html a:focus-visible>.mf-mark.mf-mark>i:nth-child(2){animation-delay:.1s}
html a:hover>.mf-mark.mf-mark>i:nth-child(3),html a:focus-visible>.mf-mark.mf-mark>i:nth-child(3){animation-delay:.2s}
@keyframes mf-rise{from{transform:scaleY(.15);opacity:0}to{transform:scaleY(1);opacity:1}}
@keyframes mf-wave{0%,100%{transform:scaleY(1)}40%{transform:scaleY(.55)}70%{transform:scaleY(1.08)}}
@media (prefers-reduced-motion:reduce){html .mf-mark.mf-mark>i,html a:hover>.mf-mark.mf-mark>i,html a:focus-visible>.mf-mark.mf-mark>i{animation:none}}