:root{--sticky-header-height:90px}html{scroll-padding-top:calc(var(--sticky-header-height) + 16px)}
.topbar{position:sticky;top:0;z-index:30;transition:height .28s ease,padding .28s ease,box-shadow .28s ease}
.topbar .brand{min-width:0;gap:0}
.topbar .brand-motion{width:240px;height:58.56px;overflow:hidden;transition:width .32s cubic-bezier(.2,.8,.2,1),height .32s ease}
.topbar .brand-logo{width:240px;max-width:none;height:auto;transition:width .32s ease}
.topbar.is-compact{height:64px;box-shadow:0 3px 14px #0003}
.topbar.is-compact .brand-motion{width:42px;height:44px}
.topbar.is-compact .brand-logo{width:180px}
.topbar.is-compact .brand-motion::after{display:none}
.preview-panel{top:var(--sticky-header-height)}
@media(max-width:740px){:root{--sticky-header-height:116px}.topbar{height:116px;min-height:0;padding:10px 16px 0;gap:6px 12px;align-content:start}.topbar .brand-motion{width:180px;height:44px}.topbar .brand-logo{width:180px}.topbar .header-end{height:44px;margin-left:auto}.topbar .products{height:46px;min-width:0;gap:12px;margin:0;width:100%;overflow-x:auto;scrollbar-width:none}.topbar .products button{flex-shrink:0}.topbar.is-compact{height:88px;padding-top:5px;gap:2px 12px}.topbar.is-compact .products{height:32px}.topbar.is-compact .products button{padding-top:0}}
@media(max-width:360px){.topbar:not(.is-compact) .brand-motion{width:148px;height:37px}.topbar:not(.is-compact) .brand-logo{width:148px}}
@media(prefers-reduced-motion:reduce){.topbar,.topbar .brand-motion,.topbar .brand-logo{transition:none}}