/* Original glyph proportions/tracking; a restrained shared scale, with space reserved. */
.topbar .brand.brand-interactive{width:176px;min-width:176px;height:32px;overflow:visible;isolation:isolate;flex:0 0 176px;color:var(--text);border-radius:6px}
.brand.brand-interactive::before,.brand.brand-interactive::after{content:none;background:none}
.brand-interactive:focus-visible{outline:2px solid var(--focus);outline-offset:6px}
.brand-stage{position:absolute;left:0;top:1px;width:198px;height:30px;display:flex;align-items:center;gap:2px;transform:scale(.88);transform-origin:left center;pointer-events:none}
.brand-symbol{width:30px;height:30px;flex:0 0 30px}
.brand-stage svg{display:block;width:100%;height:100%;overflow:visible}
.brand-letter{fill:currentColor}
.brand-word-viewport{position:relative;width:166px;height:30px;perspective:150px;overflow:hidden;isolation:isolate}
.brand-cylinder{position:absolute;inset:0;transform-style:preserve-3d;transform:translateZ(-15px) rotateX(0deg)}
.brand-face{position:absolute;inset:0;backface-visibility:hidden;transform:rotateX(calc(var(--face)*90deg)) translateZ(15px)}
.brand-prefix-static{position:absolute;left:0;top:0;width:34.619291594334px;height:30px}
/* Orthographic suffix projection preserves every horizontal glyph position while
   the cylinder rotates vertically; perspective must not pull LYTIX away from AG. */
.brand-suffix-viewport{position:absolute;left:34.619291594334px;top:0;width:131.380708405666px;height:30px;perspective:none;overflow:hidden}
.brand-playing .brand-suffix-cylinder{animation:brand-suffix-roll 5.6s both}
.brand-playing .brand-word-cylinder{animation:brand-word-roll 5.6s both}
@keyframes brand-suffix-roll{
  0%,7%{transform:translateZ(-15px) rotateX(0deg);animation-timing-function:cubic-bezier(.3,.02,.18,1)}
  22%,100%{transform:translateZ(-15px) rotateX(-90deg)}
}
@keyframes brand-word-roll{
  0%,43%{transform:translateZ(-15px) rotateX(0deg);animation-timing-function:cubic-bezier(.3,.02,.18,1)}
  56%,75%{transform:translateZ(-15px) rotateX(-90deg);animation-timing-function:cubic-bezier(.3,.02,.18,1)}
  90%,100%{transform:translateZ(-15px) rotateX(-180deg)}
}
@media(min-width:1101px){.standard-mode .period-tabs{position:static;left:auto;transform:none;flex-shrink:0;margin-left:auto;margin-right:auto}}
@media(max-width:760px){
 .auth-mode .topbar .brand.brand-interactive{width:176px;min-width:176px;flex:0 0 176px}
 .standard-mode .topbar .brand.brand-interactive{width:144px;min-width:144px;height:29px;flex:0 0 144px}
 .standard-mode .brand-stage{transform:scale(.72)}
}
@media(max-width:380px){
 .auth-mode .topbar .brand.brand-interactive{width:166px;min-width:166px;height:29px;flex:0 0 166px}
 .auth-mode .brand-stage{transform:scale(.83)}
}
@media(prefers-reduced-motion:reduce){.brand-interactive *{animation:none!important;transition:none!important}}
