/* Attune: three ideas coming together. Only brand surfaces use these colors. */
:root { --aevro-brand-ink:#fff9ee; }
:root[data-theme="light"] { --aevro-brand-ink:#2448ed; }
.aevro-mark { display:block; flex:none; color:var(--aevro-brand-ink); fill:currentColor; stroke:none; }
.aevro-wordmark { display:block; flex:none; color:var(--text); fill:currentColor; stroke:none; }
.auth-wordmark { gap:10px; }
.auth-wordmark .aevro-mark { width:34px; height:34px; fill:currentColor; }
.auth-wordmark .aevro-wordmark { width:112px; height:24px; fill:currentColor; }
body .brand { gap:11px; align-items:flex-start; }
body .brand-mark { width:36px; height:36px; margin-top:-4px; }
body .brand .aevro-mark { width:36px; height:36px; }
body .brand .aevro-wordmark { width:112px; height:24px; }
body .brand small { display:block; }
.vault-screen.vault-screen .vault-mark { width:56px; height:56px; background:none; border:0; box-shadow:none; }
.vault-screen.vault-screen .vault-mark .aevro-mark { width:52px; height:52px; }
@media (forced-colors:active) {
  .aevro-mark,.aevro-wordmark { color:CanvasText; }
}