/* Shared InteraEnge symbol. No panel, shadow or movement of the wordmark. */
interaenge-mark {
  display: inline-block;
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  color: var(--ink-2, #484c52);
  vertical-align: middle;
}
interaenge-mark > svg, interaenge-mark > img { display: block; width: 100%; height: 100%; }
interaenge-mark > svg { transition: transform .4s cubic-bezier(.2,.7,.2,1), filter .4s ease; transform-origin: center; }
interaenge-mark[data-active="true"] > svg { transform: scale(1.12) rotate(-4deg); filter: drop-shadow(0 0 7px #d55c3760); }
.brand { gap: .65rem; white-space: nowrap; flex-shrink: 0; }
.foot-brand interaenge-mark { width: 48px; height: 48px; }
.auth-brand { display: flex; align-items: center; gap: .6rem; margin-bottom: .8rem; font: 500 1rem/1 var(--mono); }
.auth-brand interaenge-mark { width: 48px; height: 48px; }
interaenge-mark .gear { transform-box: fill-box; transform-origin: center; animation: interaenge-spin 8s linear infinite; }
interaenge-mark .wave { transform-box: fill-box; transform-origin: center; animation: interaenge-wave 1.8s ease-in-out infinite alternate; }
@keyframes interaenge-spin { to { transform: rotate(360deg); } }
@keyframes interaenge-wave { to { transform: scaleY(.62); } }
@media (max-width: 1100px) {
  .top { gap: .75rem; }
  .top-nav { gap: .8rem; }
  .brand interaenge-mark { width: 56px; height: 56px; }
}
@media (max-width: 760px) {
  .top-nav { display: none; }
  .auth-wrap { margin-left: auto; }
  .top > .theme { margin-left: auto; }
  .auth-wrap + .theme { margin-left: 0; }
}
@media (max-width: 520px) {
  .brand interaenge-mark { width: 46px; height: 46px; }
  .brand { gap: .4rem; font-size: .9rem; }
  .top { gap: .5rem; }
  .top > .theme .theme-label { display: none; }
  .top > .theme { padding: .5rem; }
  .top .btn-auth { padding: .5rem; }
  .top .btn-auth svg { display: none; }
}