@layer components {
    .site-navigation { align-items: center; gap: 24px; }
    .nav-disclosure { position: relative; }
    .nav-disclosure > summary { display: flex; align-items: center; gap: 9px; min-height: 44px; padding: 12px 4px; font-size: 13px; font-weight: 650; cursor: pointer; list-style: none; }
    .nav-disclosure > summary::-webkit-details-marker { display: none; }
    .nav-disclosure > summary > i { font-size: 9px; color: var(--muted); transition: transform .2s; }
    .nav-disclosure[open] > summary > i { transform: rotate(180deg); }
    .nav-disclosure--current > summary { color: var(--accent); }
    .nav-disclosure__panel { position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%); width: 365px; padding: 17px; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); box-shadow: var(--panel-shadow); z-index: 45; }
    .nav-disclosure__eyebrow { color: var(--muted); font-size: 8px; letter-spacing: .13em; font-weight: 750; padding: 4px 10px 12px; }
    .site-navigation .nav-disclosure__link { position: relative; display: grid; grid-template-columns: 26px 1fr 12px; align-items: center; gap: 12px; padding: 13px 11px; border-radius: 11px; white-space: normal; }
    .site-navigation .nav-disclosure__link::after { display: none; }
    .nav-disclosure__link > i:first-child { color: var(--accent); font-size: 16px; text-align: center; }
    .nav-disclosure__link strong { display: block; font-size: 12px; font-weight: 750; }
    .nav-disclosure__link small { display: block; margin-top: 3px; font-size: 10px; line-height: 1.5; color: var(--muted); font-weight: 450; }
    .nav-disclosure__link .nav-disclosure__arrow { font-size: 9px; color: var(--muted); }
    .nav-disclosure__link:hover, .nav-disclosure__link[aria-current] { background: var(--subtle); }
    .nav-disclosure__link--featured { border: 1px solid var(--line); background: var(--subtle); margin-bottom: 8px; }
}
@layer responsive {
    @media (min-width: 701px) and (max-width: 1000px) {
        .site-header { gap: 15px; padding-inline: 3%; }
        .site-navigation { gap: 15px; }
        .header-actions { gap: 8px; }
        .header-actions .theme-picker__trigger > span, .header-actions .theme-picker__chevron { display: none; }
        .header-actions .theme-picker__trigger { width: 43px; padding: 10px; justify-content: center; }
        .brand__symbol { width: 46px; height: 54px; }
        .brand__type { font-size: 20px; }
    }
    @media (max-width: 700px) {
        .site-navigation { position: relative; width: 100%; gap: 28px; padding: 0; }
        .nav-disclosure { position: static; }
        .nav-disclosure > summary { font-size: 12px; min-height: 40px; padding-block: 9px; }
        .nav-disclosure__panel { left: 0; right: 0; top: calc(100% + 5px); transform: none; width: auto; padding: 13px; max-height: calc(100dvh - 180px); overflow-y: auto; }
        .site-navigation .nav-disclosure__link { padding: 12px 9px; }
    }
}