:root{--padding:16px 32px;--transition-duration:.3s;--branches-width:560px;--branches-height:280px;--developers-width:1100px;--developers-height:360px}.header{margin:0 auto;perspective:2000px}.header__nav{display:flex}.header__item{cursor:pointer;line-height:50px;transition:color .35s,opacity .2s}.header__item:not(:last-child){margin-right:var(--space-lg)}.light-mode .header__item{color:var(--color-dark)}.light-mode .header__item--active,.light-mode .header__item:hover{color:var(--color-primary)}.dark-mode .header__item{color:#fff}.dark-mode .header__item--active{color:var(--color-white)}.dark-mode .header__item:hover{color:var(--color-light-dark)}.app-header--inscroll .header__item{color:var(--color-dark)}.app-header--inscroll .header__item--active,.app-header--inscroll .header__item:hover{color:var(--color-primary)}.popover{background:red;display:inline-block;left:0;opacity:0;pointer-events:none;position:absolute;right:0;transform:rotateX(-15deg);transform-origin:center -20px;transition:transform var(--transition-duration),opacity var(--transition-duration)}.popover.popover.open{opacity:1;pointer-events:all;transform:rotateX(0)}.popover__content{left:0;overflow:hidden;position:absolute;top:0;transition:transform var(--transition-duration),opacity var(--transition-duration);z-index:1}.popover__section{margin-top:var(--space-sm);opacity:0;overflow:hidden;padding:var(--space-sm) var(--space-md);position:absolute;transition:opacity .2s;visibility:hidden;z-index:2}.popover__section.active{opacity:1;visibility:visible}.popover__arrow{border-radius:4px 0 0;box-shadow:-3px -3px 5px #505a780d;height:12px;margin-left:-6px;top:-6px;transform:rotate(45deg);width:12px;will-change:transform}.popover__arrow,.popover__background{background:#fff;left:0;position:absolute;transition:transform var(--transition-duration),opacity var(--transition-duration)}.popover__background{border-radius:6px;box-shadow:0 50px 100px -20px #32325d26,0 30px 60px -30px #0000001a;padding:var(--padding);top:0;transform-origin:0 0}.popover__background,.section-branches{height:var(--branches-height);width:var(--branches-width)}.section-developers{height:var(--developers-height);width:var(--developers-width)}
