/* Header motion is decorative: links, content and controls never wait for it. */
.header__logo .tk-brand{--tk-logo-ink:#353945;--tk-logo-petrol:#006887;display:block;position:relative;width:106px;aspect-ratio:994.64 / 227.96;isolation:isolate}
body.dark .header__logo .tk-brand{--tk-logo-ink:#f2f7fa;--tk-logo-petrol:#55b4ca}
.tk-brand .tk-brand-svg{display:block;width:100%;height:100%;overflow:visible}
.tk-brand .tk-brand-letter{fill:var(--tk-logo-ink);stroke:var(--tk-logo-ink)}
.tk-brand .tk-brand-mark{fill:var(--tk-logo-petrol);stroke:var(--tk-logo-petrol)}
.tk-brand .tk-brand-svg :is(path,polygon){stroke-width:0;stroke-linejoin:round}
.tk-brand-front{display:block;position:relative;z-index:1}
.tk-brand-ghost{position:absolute;inset:0;display:block;opacity:0;pointer-events:none}
.tk-brand-trail{display:flex;justify-content:space-around;position:absolute;left:0;right:0;top:100%;height:13px;color:var(--tk-logo-petrol);pointer-events:none}
.tk-brand-trail>span{display:block;width:11px;height:13px;opacity:0}
.tk-brand-trail svg{display:block;width:100%;height:100%}
.header__login_logged-out .tk-profile-nod{fill:none!important;color:#fff;stroke:#fff;overflow:visible}
.tk-profile-head{transform-box:fill-box;transform-origin:center bottom}
.header-notification-button .icon-notification{transform-origin:50% 15%}
/* Keep both existing sprite symbols rendered, so CSS can crossfade the mode change. */
body header .tk-theme-motion .icon-theme .moon,body header .tk-theme-motion .icon-theme .sun{display:inline!important;transform-origin:50% 50%}
body header .tk-theme-motion .icon-theme .moon{opacity:1;transform:rotate(0) scale(1)}
body header .tk-theme-motion .icon-theme .sun{opacity:0;transform:rotate(-70deg) scale(.55)}
body.dark header .tk-theme-motion .icon-theme .moon{opacity:0;transform:rotate(65deg) scale(.55)}
body.dark header .tk-theme-motion .icon-theme .sun{opacity:1;transform:rotate(0) scale(1)}
@media(prefers-reduced-motion:no-preference){
 .tk-brand.is-drawing .tk-brand-front :is(path,polygon){stroke-width:3;stroke-dasharray:1;animation:tk-logo-draw 1500ms ease both;animation-delay:var(--tk-stagger)}
 .tk-brand.is-trailing .tk-brand-ghost{animation:tk-logo-guide 1950ms linear both}
 .tk-brand.is-trailing .tk-brand-front{animation:tk-logo-reveal 1950ms linear both}
 .tk-brand.is-trailing .tk-brand-trail>span{animation:tk-bootstep 850ms ease both;animation-delay:calc(var(--tk-step) + 300ms)}
 .tk-brand-trail>span:nth-child(even){margin-top:3px}
 .header__login_logged-out.is-nodding .tk-profile-head{animation:tk-head-nod 440ms ease-in-out}
 .header-notification-button.is-ringing .icon-notification{animation:tk-bell-ring 560ms ease-in-out}
 body header .tk-theme-motion .icon-theme use{transition:opacity 420ms ease,transform 420ms ease}
 .tk-theme-motion.is-greeting .icon-theme{animation:tk-theme-greet 360ms ease-in-out}
}
@keyframes tk-logo-draw{0%{fill-opacity:.06;stroke-dashoffset:1}60%{fill-opacity:.06;stroke-dashoffset:0;stroke-width:3}90%,100%{fill-opacity:1;stroke-dashoffset:0;stroke-width:0}}
/* Exit while the entire logo is still visible; reset the reveal only at zero opacity. */
@keyframes tk-logo-reveal{
 0%{opacity:1;transform:none;clip-path:inset(-15% 0 -15% 0);animation-timing-function:ease-out}
 12%{opacity:0;transform:none;clip-path:inset(-15% 0 -15% 0)}
 13%{opacity:0;transform:none;clip-path:inset(-15% 100% -15% 0)}
 16%{opacity:1;transform:none;clip-path:inset(-15% 100% -15% 0)}
 94%,100%{opacity:1;transform:none;clip-path:inset(-15% 0 -15% 0)}
}
@keyframes tk-logo-guide{0%,12%{opacity:0}18%,85%{opacity:.1}100%{opacity:0}}
@keyframes tk-bootstep{0%{opacity:0;transform:translateY(-3px) rotate(80deg) scale(1.2)}18%,55%{opacity:.8;transform:translateY(0) rotate(80deg) scale(1)}100%{opacity:0;transform:translateY(0) rotate(80deg) scale(1)}}
@keyframes tk-head-nod{0%,100%{transform:none}45%{transform:translate(1px,1px) scaleY(.94)}70%{transform:translate(.35px,.25px)}}
@keyframes tk-bell-ring{0%,100%{transform:rotate(0)}16%{transform:rotate(15deg)}32%{transform:rotate(-12deg)}48%{transform:rotate(9deg)}64%{transform:rotate(-5deg)}80%{transform:rotate(2deg)}}
@keyframes tk-theme-greet{0%,100%{transform:rotate(0)}50%{transform:rotate(13deg)}}
@media(prefers-reduced-motion:reduce){.tk-brand *, .tk-profile-head,.header-notification-button .icon-notification,.tk-theme-motion .icon-theme,.tk-theme-motion .icon-theme use{animation:none!important;transition:none!important}.tk-brand-trail{display:none}}