@layer components{.site-header{position:sticky;inset-block-start:0;z-index:40;border-block-end:1px solid var(--color-border);background:color-mix(in srgb,var(--color-surface) 90%,transparent);backdrop-filter:blur(12px);& .site-header__inner{display:flex;gap:var(--space-s);align-items:center;justify-content:space-between;block-size:4rem;@media(min-width:768px){block-size: 5rem;}}& .site-header__brand{flex-shrink:0;display:flex;align-items:center;color:var(--color-accent-strong);text-decoration:none}& .site-header__logo{block-size:1.75rem;inline-size:auto;aspect-ratio:114/82;@media(min-width:768px){block-size: 2.25rem;}}& .site-header__nav{display:none;gap:var(--space-l);align-items:center;font-size:var(--size-step--1);font-weight:500;@media(min-width:1024px){display: flex;}& a{color:var(--color-text);text-decoration:none;&:hover{color:var(--color-accent-strong)}}}& .site-header__actions{display:flex;gap:var(--space-2xs);align-items:center}& .site-header__account{display:none;gap:var(--space-3xs);align-items:center;color:var(--color-text);font-size:var(--size-step--1);font-weight:500;text-decoration:none;@media(min-width:1024px){display: inline-flex;}&:hover{color:var(--color-accent-strong)}}& .site-header__cta{display:none;@media(min-width:640px){display: inline-flex;}}& .site-header__menu{position:relative;@media(min-width:1024px){display: none;}& summary{display:grid;place-items:center;inline-size:2.75rem;block-size:2.75rem;border:1px solid var(--color-border-strong);border-radius:var(--radius-pill);font-size:1.25rem}& .site-header__menu-close{display:none}&[open] .site-header__menu-open{display:none}&[open] .site-header__menu-close{display:block}}& .site-header__panel{position:absolute;inset-block-start:calc(100% + var(--space-2xs));inset-inline-end:0;z-index:50;display:flex;flex-direction:column;gap:var(--space-3xs);inline-size:16rem;padding:var(--space-2xs);box-shadow:var(--shadow-m);& a{padding:var(--space-xs)var(--space-s);border-radius:var(--radius-m);color:var(--color-text);text-decoration:none;&:hover{background:var(--color-accent-surface)}}& .site-header__panel-cta{margin-block-start:var(--space-2xs);color:var(--color-on-accent);&:hover{background:color-mix(in srgb,var(--color-accent) 82%,var(--color-text))}}}}}