body{flex-direction:column;min-block-size:100vh;display:flex;&>div{flex:1 0 auto}&>footer{padding:.5em max(calc((100vw - 30ch - 60ch - 30ch - 3em * 2) / 2), 1rem);border-block-start:1px solid #555;gap:1em;display:flex;&.grid{--grid-gap:1.5em;--grid-min-width:20ch}}}html{scroll-padding-block-start:calc(calc((1.5 + 1) * 1rem + 1px) + calc(3.58rem + 2 * var(--border-width) + 1px));container-type:scroll-state}body>header{position:sticky;inset-block-start:calc(-1 * calc(calc((1.5 + 1) * 1rem + 1px) + calc(3.58rem + 2 * var(--border-width) + 1px)));@container scroll-state(scrolled:top){inset-block-start:0}}@property --header-fade{syntax:"<percentage>";inherits:false;initial-value:50%}body>header{backdrop-filter:blur(16px);--header-fade:50%;background:linear-gradient(to bottom, var(--color-l0) calc(var(--header-fade) - 50%), transparent var(--header-fade));transition:inset-block-start .3s,--header-fade .3s;&:has(:popover-open){--header-fade:150%}}body>header{z-index:2;anchor-name:--header;inline-size:100%;container-type:inline-size;& aside nav{block-size:calc((1.5 + 1) * 1rem + 1px)}&>nav{block-size:calc(3.58rem + 2 * var(--border-width) + 1px)}& nav{padding:.5em max(calc((100vw - 30ch - 60ch - 30ch - 3em * 2) / 2), 1rem);border-block-end:1px solid #555;align-items:center;gap:1em;display:flex;& div{align-items:center;gap:1em;min-inline-size:0;display:flex}& search,& search form,& search .group{flex-direction:row;align-items:center;gap:1em;min-inline-size:0;display:flex}& search input{inline-size:100%;min-inline-size:0}& ul{gap:1em;display:flex}&:has(.skip)>ul{margin-inline-start:auto}& li{align-self:anchor-center}& :is(a,button):focus-visible{outline-offset:2px;outline:2px solid}& .hamburger{margin-inline-start:auto;display:none}& .hamburger:before{content:"";clip-path:polygon(0 0,100% 0,100% 20%,0 20%,0 40%,100% 40%,100% 60%,0 60%,0 80%,100% 80%,100% 100%,0 100%);background-color:currentColor;block-size:1em;inline-size:1.25em;@media (forced-colors:active){background-color:buttontext}}& [popover]{block-size:auto;inline-size:auto;min-inline-size:0;color:inherit;background:0 0;border:none;flex:1;gap:1em;margin:0;padding:0;display:flex;position:static;overflow:visible;&>div:last-child{margin-inline-start:auto}}}@container (inline-size<60ch){& nav{& .hamburger{justify-content:center;align-items:center;display:flex}& [popover]{position-anchor:--header;block-size:0;max-block-size:80dvh;padding-block:0;padding-inline:max(calc((100vw - 30ch - 60ch - 30ch - 3em * 2) / 2), 1rem);backdrop-filter:blur(16px);background:linear-gradient(to bottom, var(--color-l0), transparent);interpolate-size:allow-keywords;transition:block-size .3s, padding-block .3s, display .3s allow-discrete, overlay .3s allow-discrete;border-block-end:1px solid #555;display:none;position:fixed;inset:auto;inset-block-start:anchor(end);inset-inline:0;overflow:auto;&>div{display:block}& ul{flex-direction:column;gap:0}& li{align-self:stretch}& a{align-items:center;min-block-size:44px}}& [popover]:popover-open{block-size:auto;padding-block:.5em;display:block;@starting-style{block-size:0;padding-block:0}}}}}