@layer components{.menu-panel{position:absolute;inset:0;display:flex;flex-direction:column;background-color:#fff;transform:translate(100%);transition:transform .2s ease-out,box-shadow .2s ease-out;z-index:0;box-shadow:none;&#menu-main{transform:translate(0);z-index:1}&[data-state=active]{transform:translate(0);z-index:10;box-shadow:-4px 0 12px #0000001a}&[data-state=behind]{transform:translate(-40px);z-index:5;box-shadow:-2px 0 8px #00000014}&[data-state=back]{transform:translate(-100%);z-index:0}&[data-state=closed]{transform:translate(100%);z-index:0;box-shadow:none}}.menu-panel-header{padding:calc(var(--spacing) * 6) calc(var(--spacing) * 4);border-bottom:1px solid var(--color-border);flex-shrink:0}.menu-panel-back{display:flex;align-items:center;gap:calc(var(--spacing) * 2);font-size:var(--text-base);font-weight:500;color:currentColor;background:none;border:none;padding:0;cursor:pointer;transition:opacity .2s ease;&:hover{opacity:.7}}.menu-panel-back-icon{display:flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;transform:rotate(180deg);svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:2}}.menu-panel-title{font-size:var(--text-base);font-weight:700;line-height:1.5;margin-bottom:calc(var(--spacing) * 4)}.menu-panel-list{display:flex;flex-direction:column;gap:calc(var(--spacing) * 2)}.menu-panel-item{display:flex;align-items:center;justify-content:space-between;width:100%;font-size:var(--text-base);font-weight:400;line-height:1.5;text-align:left;color:currentColor;background:none;border:none;cursor:pointer;transition:opacity .2s ease;&:hover{opacity:.7}}.menu-panel-link{display:block;font-size:var(--text-base);font-weight:400;line-height:1.5;color:currentColor;text-decoration:none;transition:opacity .2s ease;&:hover{opacity:.7}&[aria-current=page]{font-weight:600}}.menu-panel-chevron{display:flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;flex-shrink:0;transition:transform .2s ease;svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:2}.menu-panel-item:hover &{transform:translate(.25rem)}}.menu-panel__content{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;background-color:var(--color-background);padding:0 calc(var(--spacing) * 4)}@media(prefers-reduced-motion:reduce){.menu-panel{transition:none}}}