@layer components{.nav{& .nav__list{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-s);margin:0;padding:0;list-style:none}& .nav__item{position:relative}& .nav__link{display:inline-flex;align-items:center;gap:var(--space-3xs);padding-block:var(--space-3xs);color:var(--color-text);text-decoration:none;border-bottom:2px solid transparent;&:hover{color:var(--color-accent-strong);border-bottom-color:var(--color-accent)}&[aria-current=page]{color:var(--color-accent-strong);border-bottom-color:var(--color-accent-strong);font-weight:600}}& .nav__group-toggle{background:0 0;border-inline:0;border-block-start:0;padding-inline:0;font:inherit;cursor:pointer;&[data-ancestor=true]{color:var(--color-accent-strong);border-bottom-color:var(--color-accent)}}& .nav__chevron{width:.45em;height:.45em;margin-block-start:-.2em;border-right:2px solid;border-bottom:2px solid;rotate:45deg;transition:rotate 150ms ease}& .nav__group{display:none;margin:0;padding:var(--space-2xs);list-style:none}& .nav__group-link{display:block;padding:var(--space-3xs)var(--space-2xs);border-radius:var(--radius-s);color:var(--color-text);text-decoration:none;&:hover{background:var(--color-accent-surface);color:var(--color-accent-strong)}&[aria-current=page]{color:var(--color-accent-strong);font-weight:600}}& .nav__item--group[data-open=true]{& .nav__group{display:block}& .nav__chevron{rotate:225deg;margin-block-start:.2em}}& .nav__toggle{display:none;padding:var(--space-2xs);background:0 0;border:1px solid var(--color-border-strong);border-radius:var(--radius-s);color:var(--color-text);cursor:pointer}& .nav__toggle-bars{display:block;width:1.25rem;height:2px;background:currentColor;box-shadow:0 -6px currentColor,0 6px currentColor}@media(width >= 48rem){& .nav__group{position:absolute;z-index:60;inset-block-start:calc(100% + var(--space-2xs));inset-inline-start:0;min-width:max(100%,16rem);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-m);box-shadow:var(--shadow-m)}}@media(width < 48rem){& .nav__toggle{display:block}& .nav__list{display:none;position:absolute;inset-block-start:100%;inset-inline:0;flex-direction:column;align-items:stretch;gap:var(--space-2xs);padding:var(--space-s);background:var(--color-surface);border-block-end:1px solid var(--color-border);box-shadow:var(--shadow-m)}& .nav__item{width:100%}& .nav__group{padding-inline-start:var(--space-s);border-inline-start:2px solid var(--color-border)}&[data-open=true] .nav__list{display:flex}}}}