/* Shared header geometry, measured against the home page. */
:root{--brand-shell:min(1320px,calc(100% - 96px));--brand-top:12px;--brand-height:72px;--brand-padding:12px;--brand-font:22px;--brand-gap:15px;--brand-cell:25px;--brand-symbol:23px}
:is(.header,.auth-header,.menu-header) .brand{display:flex;align-items:center;flex-shrink:0;gap:var(--brand-gap);font:800 var(--brand-font)/1.06 Arial,Helvetica,sans-serif;letter-spacing:-.5px;white-space:nowrap}
:is(.header,.auth-header,.menu-header) .brand-mark{display:grid;grid-template-columns:repeat(2,var(--brand-cell));gap:4px;flex-shrink:0}
:is(.header,.auth-header,.menu-header) .brand-mark i{display:grid;place-items:center;height:var(--brand-cell);font:900 var(--brand-symbol)/1 Arial,Helvetica,sans-serif;border:0;border-radius:5px;background:#ff8a00;color:#35067d}
:is(.header,.auth-header,.menu-header) .brand-mark i:nth-child(2),:is(.header,.auth-header,.menu-header) .brand-mark i:nth-child(3){background:white}
.menu-header .brand-mark i:nth-child(2),.menu-header .brand-mark i:nth-child(3){box-shadow:inset 0 0 0 1px #dfd3f4}
.auth-header,.menu-header{width:var(--brand-shell);margin:var(--brand-top) auto 0;padding:0 var(--brand-padding);height:var(--brand-height);min-height:var(--brand-height);border:1px solid transparent;box-sizing:border-box}
.auth-page{grid-template-rows:96px minmax(0,1fr) 30px}
.menu-header{grid-template-columns:1fr auto 1fr;gap:24px;margin-bottom:12px}
@media(max-width:1150px){:root{--brand-shell:calc(100% - 64px);--brand-font:18px}}
@media(max-width:1023px){:root{--brand-font:17px;--brand-padding:9px}.menu-header{gap:16px}.programs{min-width:330px}.programs button{font-size:13px;padding-inline:9px}.account-nav{gap:10px}.account-nav>button:first-child{font-size:13px}}
@media(max-width:850px){:root{--brand-top:8px;--brand-height:68px}.auth-page{grid-template-rows:90px minmax(0,1fr) 30px}.menu-header:not(.lesson-header){height:145px;grid-template-columns:1fr auto;grid-template-rows:66px 58px;row-gap:14px;align-items:center}.menu-header .programs{grid-column:1/-1;grid-row:2;min-width:0;width:min(520px,100%)}.menu-header .account-nav{grid-column:2;grid-row:1}.lesson-header{grid-template-columns:1fr auto}}
@media(max-width:560px){:root{--brand-shell:calc(100% - 20px);--brand-top:7px;--brand-height:64px;--brand-font:14px;--brand-gap:9px;--brand-cell:20px;--brand-symbol:19px}:is(.header,.auth-header,.menu-header) .brand{letter-spacing:-.2px}:is(.header,.auth-header,.menu-header) .brand-mark{gap:3px}:is(.header,.auth-header,.menu-header) .brand-mark i{border-radius:4px}.auth-page{grid-template-rows:84px minmax(0,1fr) 26px}.menu-header:not(.lesson-header){grid-template-rows:62px 56px;height:140px;gap:14px 8px}.programs button{font-size:13px}.account-nav>button:first-child{font-size:12px}.menu-header .account-nav{gap:8px}}
@media(max-width:370px){:root{--brand-font:12px}.lesson-header>.back-menu{font-size:12px}}
/* Short page entrances keep navigation visually continuous. */
@media(prefers-reduced-motion:no-preference){.lesson-layout{animation:page-arrive .35s both}.auth-card{animation:page-arrive .3s both}@keyframes page-arrive{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}}
.menu-header .brand{justify-self:start}

.menu-mascot img,.mascot-stage>.mascot,.auth-mascot{transition:rotate .22s ease-out,translate .22s ease-out;transform-origin:50% 95%}