.nav-disclosure{font:inherit;border:0;padding:0;background:none;color:inherit;cursor:pointer;transition:opacity .2s}
.nav-disclosure:hover,.nav-disclosure[aria-expanded=true]{opacity:.5}
.product-navigation{position:absolute;left:0;right:0;top:64px;height:0;overflow:hidden;opacity:0;visibility:hidden;background:var(--vyne-paper,#f5f4ef);transition:height .5s ease-out,opacity .5s ease-out,visibility .5s;pointer-events:none}
.product-navigation-inner{max-width:1200px;margin:auto;display:flex;align-items:flex-start;gap:28px;padding-top:32px;transform:translateY(-12px);transition:transform .5s ease-out}
.header.navigation-open{background:var(--vyne-paper,#f5f4ef);box-shadow:0 8px 16px #101d1c15}
.header.navigation-open .product-navigation{height:300px;opacity:1;visibility:visible;pointer-events:auto;box-shadow:0 8px 12px #101d1c18}
.header.navigation-open .product-navigation-inner{transform:translateY(0)}
.navigation-primary{display:flex;flex-direction:column;gap:6px;width:248px;padding:8px 0;flex-shrink:0;border-right:1px solid #101d1c0d}
.navigation-primary>a{display:flex;align-items:center;gap:12px;padding:10px 14px;min-height:54px;border-radius:8px;font-size:15px;line-height:1.3;margin-right:14px;transition:background .2s}
.navigation-primary>a:hover,.navigation-primary>a:focus-visible{background:#101d1c08}
.navigation-primary svg{width:16px;height:16px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.3;align-self:flex-start;margin-top:2px}
.navigation-primary small{display:block;font-size:13px;color:#101d1c66;margin-top:3px}
.navigation-secondary{display:flex;flex-direction:column;gap:20px;padding-top:18px;font-size:15px}
.navigation-secondary>a{transition:opacity .2s}.navigation-secondary>a:hover{opacity:.55}
.navigation-preview{position:relative;display:flex;align-items:flex-end;overflow:hidden;margin-left:auto;width:250px;height:160px;border-radius:12px;padding:24px;background:#e9ece5;color:var(--vyne-ink);font-size:16px;line-height:1.1;flex-shrink:0}
.navigation-preview>span{position:relative;z-index:1}.navigation-preview>span>span{opacity:.4}
.navigation-chart{position:absolute;left:116px;top:24px;width:180px;height:148px;background:var(--vyne-paper);padding:12px;border-radius:10px;border:1px solid #101d1c16;box-shadow:0 4px 16px #101d1c10;transform:rotate(-4deg);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.navigation-chart-top{display:flex;justify-content:space-between;font-size:10px}.navigation-chart-top b{font-family:Signifier;font-size:20px;font-weight:400}.navigation-chart svg{width:100%;height:95px;overflow:visible}.navigation-chart-area{fill:#c2cfc655}.navigation-chart-line{stroke:#2e4540;stroke-width:2;stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset .8s ease-out}.navigation-chart-labels{display:flex;justify-content:space-between;font-size:8px;color:#2e454080}
.navigation-preview:hover .navigation-chart,.navigation-preview:focus-visible .navigation-chart{transform:translate(-8px,-5px) rotate(0)}
.header:not(.navigation-open) .navigation-chart-line{stroke-dashoffset:1}
@media(min-width:701px){.motion-ready .header{padding-left:max(20px,calc((100vw - 1200px)/2));padding-right:max(20px,calc((100vw - 1200px)/2))}.product-navigation{padding:0 max(20px,calc((100vw - 1200px)/2))}}
@media(max-width:850px){.product-navigation-inner{gap:20px}.navigation-primary{width:230px}.navigation-preview{width:220px}}
@media(max-width:700px){.product-navigation{display:none}}
@media(prefers-reduced-motion:reduce){.product-navigation,.product-navigation-inner,.navigation-chart,.navigation-chart-line{transition:none}}