.demo-header-bar{display:flex;align-items:center;gap:10px;padding:10px 14px;border:1px solid var(--demo-stroke);border-radius:var(--demo-radius-md);background:linear-gradient(180deg,#fff,#fbfcfd);position:relative;z-index:5}.demo-burger{width:36px;height:36px;border-radius:10px;border:1px solid var(--demo-stroke);background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;position:relative;overflow:hidden;transform:translateZ(0);flex-shrink:0}.demo-burger-line{width:18px;height:2px;border-radius:2px;background:rgba(0,0,0,.4)}.demo-logo-skel{height:10px;border-radius:999px;background:var(--demo-surface-2);flex:1;max-width:120px}.demo-nav-overlay{position:absolute;inset:0;background:rgba(0,0,0,.12);opacity:0;pointer-events:none;z-index:6}.demo-nav-menu{position:absolute;top:12px;right:12px;bottom:12px;width:min(220px,calc(100% - 24px));border:1px solid var(--demo-stroke);border-radius:var(--demo-radius);background:rgba(255,255,255,.96);box-shadow:var(--demo-shadow);transform:translateX(110%);opacity:0;pointer-events:none;z-index:7;overflow:hidden;display:flex;flex-direction:column}.demo-nav-menu-head{padding:12px 14px;border-bottom:1px solid var(--demo-stroke);background:linear-gradient(180deg,#fff,#fbfcfd);display:flex;justify-content:space-between;align-items:center}.demo-nav-menu-head strong{font-size:12px;letter-spacing:.2px}.demo-nav-items{padding:8px;display:flex;flex-direction:column;gap:2px;flex:1;overflow:hidden}.demo-nav-item{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;background:0 0}.demo-nav-item--expandable{justify-content:space-between}.demo-nav-chevron{width:0;height:0;border-top:4px solid transparent;border-bottom:4px solid transparent;border-left:5px solid var(--demo-muted);flex-shrink:0;transition:transform .2s}.demo-nav-chevron--open{transform:rotate(90deg)}.demo-nav-submenu{padding-left:12px;display:flex;flex-direction:column;gap:2px;opacity:0;max-height:0;overflow:hidden}.demo-nav-subitem{display:flex;align-items:center;gap:6px;padding:6px 10px;border-radius:6px;background:0 0}.demo-nav-subitem--active{background:rgba(122,61,240,.06)}.demo-landing{position:absolute;inset:0;background:#fff;border-radius:var(--demo-radius);border:1px solid var(--demo-stroke);z-index:2;padding:18px;opacity:0;transform:translateY(6px);pointer-events:none;display:flex;flex-direction:column;gap:14px}.demo-landing-head{display:flex;flex-direction:column;gap:6px}.demo-landing-cards{display:grid;grid-template-columns:1fr 1fr;gap:10px}.demo-landing-card{border:1px solid var(--demo-stroke);border-radius:10px;padding:12px;background:var(--demo-surface);display:flex;flex-direction:column;gap:6px}.demo-burger--topright{position:absolute;top:18px;right:18px;z-index:5;opacity:1}.nd-page-content{margin-top:56px;opacity:1}.nav-demo.step-2 .nd-burger{animation:nd-burger-press .5s ease-in-out forwards}@keyframes nd-burger-press{0%{transform:none}30%{transform:scale(.92)}60%{transform:scale(1.03)}100%{transform:none}}.nav-demo.step-2 .nd-burger-ripple::after{content:"";position:absolute;left:50%;top:50%;width:22px;height:22px;border-radius:999px;border:2px solid var(--demo-ring);transform:translate(-50%,-50%) scale(.55);opacity:0;animation:nd-burger-ripple .7s ease-out forwards}@keyframes nd-burger-ripple{0%{opacity:0;transform:translate(-50%,-50%) scale(.55)}30%{opacity:.95;transform:translate(-50%,-50%) scale(.7)}100%{opacity:0;transform:translate(-50%,-50%) scale(2.35)}}.nav-demo.step-2 .nd-overlay{animation:nd-overlay-in .5s ease-out .55s forwards}@keyframes nd-overlay-in{0%{opacity:0}100%{opacity:1}}.nav-demo.step-2 .nd-menu{animation:nd-menu-in .5s ease-out .55s forwards}@keyframes nd-menu-in{0%{opacity:0;transform:translateX(110%)}100%{opacity:1;transform:translateX(0)}}.nav-demo.step-3 .nd-overlay{opacity:1}.nav-demo.step-3 .nd-menu{opacity:1;transform:translateX(0)}.nav-demo.step-3 .nd-expand-item{animation:nd-expand-press .45s ease-in-out forwards}@keyframes nd-expand-press{0%{transform:none;background:0 0}35%{transform:scale(.97);background:rgba(0,0,0,.04)}70%{transform:none;background:rgba(0,0,0,.02)}100%{transform:none;background:0 0}}.nav-demo.step-3 .nd-chevron{animation:nd-chevron-rotate .35s ease-out forwards}@keyframes nd-chevron-rotate{0%{transform:rotate(0)}100%{transform:rotate(90deg)}}.nav-demo.step-3 .nd-submenu{animation:nd-submenu-open .4s ease-out forwards}@keyframes nd-submenu-open{0%{opacity:0;max-height:0}100%{opacity:1;max-height:200px}}.nav-demo.step-4 .nd-overlay{opacity:1}.nav-demo.step-4 .nd-menu{opacity:1;transform:translateX(0)}.nav-demo.step-4 .nd-chevron{transform:rotate(90deg)}.nav-demo.step-4 .nd-submenu{opacity:1;max-height:200px}.nav-demo.step-4 .nd-subitem-click{animation:nd-subitem-press .45s ease-in-out forwards}@keyframes nd-subitem-press{0%{transform:none;background:0 0}35%{transform:scale(.97);background:rgba(122,61,240,.08)}70%{transform:none;background:rgba(122,61,240,.06)}100%{transform:none;background:rgba(122,61,240,.06)}}.nav-demo.step-5 .nd-chevron{transform:rotate(90deg)}.nav-demo.step-5 .nd-submenu{opacity:1;max-height:200px}.nav-demo.step-5 .nd-overlay{animation:nd-overlay-out .5s ease-in forwards}@keyframes nd-overlay-out{0%{opacity:1}100%{opacity:0}}.nav-demo.step-5 .nd-menu{animation:nd-menu-out .5s ease-in forwards}@keyframes nd-menu-out{0%{opacity:1;transform:translateX(0)}100%{opacity:0;transform:translateX(110%)}}.nav-demo.step-5 .nd-landing{animation:nd-landing-in .4s ease-out forwards}@keyframes nd-landing-in{0%{opacity:0}100%{opacity:1}}.nav-demo.step-5 .nd-landing .demo-landing-head{animation:nd-landing-child-in .5s ease-out .1s both}.nav-demo.step-5 .nd-landing .demo-landing-cards{animation:nd-landing-child-in .5s ease-out .25s both}@keyframes nd-landing-child-in{0%{opacity:0;transform:translateY(12px)}100%{opacity:1;transform:translateY(0)}}@media (prefers-reduced-motion:reduce){.nav-demo .nd-burger,.nav-demo .nd-burger-ripple::after,.nav-demo .nd-chevron,.nav-demo .nd-expand-item,.nav-demo .nd-landing,.nav-demo .nd-landing .demo-landing-cards,.nav-demo .nd-landing .demo-landing-head,.nav-demo .nd-menu,.nav-demo .nd-overlay,.nav-demo .nd-subitem-click,.nav-demo .nd-submenu{animation:none!important}.nav-demo .nd-overlay{opacity:1}.nav-demo .nd-menu{opacity:1;transform:none}.nav-demo .nd-submenu{opacity:1;max-height:200px}.nav-demo .nd-chevron{transform:rotate(90deg)}.nav-demo .nd-landing{opacity:0}.demo-burger--topright{opacity:1}}.is-playing .nd-burger,.is-playing .nd-landing,.is-playing .nd-menu,.is-playing .nd-overlay{will-change:transform,opacity}