/* Logo de a063: el nudo de synthos animado (_knot.html + brand.js). La bola con anillos queda para Cloud y Halo. */
/* .knot: el <video> o, en Safari/iPhone, el <img> con knot.avif que pone brand.js */
.knot { display: block; flex: none; object-fit: contain; pointer-events: none; background: transparent; }
.knot-top { width: 50px; height: 50px; margin: -6px; }
.knot-xl { width: 210px; height: 210px; margin: -10px auto 8px; }
.knot-login { width: 150px; height: 150px; margin: 0 auto 6px; }
@media (max-width: 520px) { .knot-xl { width: 170px; height: 170px; } }
/* Tema claro: el nudo es de cristal blanco; sobre fondo claro se ve en oscuro (como en synthos.es) */
[data-theme="light"] .knot { filter: invert(1) contrast(1.05); }
/* al cambiar de tema en Ajustes, los colores se funden (theme.js pone la clase un momento) */
.theme-anim, .theme-anim *, .theme-anim *::before, .theme-anim *::after {
  transition: background-color .5s ease, color .5s ease, border-color .5s ease, box-shadow .5s ease, fill .5s ease, stroke .5s ease !important; }