.menu-trigger{position:fixed;top:22px;left:22px;z-index:5;width:46px;height:46px;border:1px solid rgba(6,44,79,.1);border-radius:12px;background:#fff;box-shadow:0 8px 24px rgba(4,30,53,.14);display:grid;place-content:center;gap:5px;cursor:pointer;transition:left .28s ease,background .2s}
.menu-trigger span{display:block;width:20px;height:2px;border-radius:9px;background:var(--navy);transition:transform .2s,opacity .2s}
.menu-trigger:hover,.menu-trigger:focus-visible{background:#eaf9f7;outline:3px solid rgba(0,168,163,.16)}
.sidebar{z-index:4;transform:translateX(calc(-100% - 18px));transition:transform .28s cubic-bezier(.2,.8,.2,1);box-shadow:18px 0 45px rgba(3,24,43,.2)}
.menu-trigger:hover+.sidebar,.menu-trigger:focus-visible+.sidebar,.sidebar:hover,.sidebar:focus-within,body.sidebar-pinned .sidebar{transform:translateX(0)}
body.sidebar-pinned .menu-trigger{left:266px;background:var(--navy)}
body.sidebar-pinned .menu-trigger span{background:#fff}
body.sidebar-pinned .menu-trigger span:first-child{transform:translateY(7px) rotate(45deg)}
body.sidebar-pinned .menu-trigger span:nth-child(2){opacity:0}
body.sidebar-pinned .menu-trigger span:last-child{transform:translateY(-7px) rotate(-45deg)}
.app-main{margin-left:0;padding-left:92px}
@media(max-width:900px){.menu-trigger{top:15px;left:15px}.sidebar{position:fixed;width:min(290px,86vw);height:100vh}.sidebar nav{grid-template-columns:1fr}body.sidebar-pinned .menu-trigger{left:calc(min(290px,86vw) + 10px)}.app-main{padding:78px 20px 20px}}
@media(max-width:560px){.app-main{padding:76px 16px 16px}}