.menu-panel{--menu-shade:color-mix(in srgb, var(--color-wine) 45%, black);--menu-light:color-mix(in srgb, var(--color-wine) 55%, var(--color-brand));--menu-sunk:inset 3px 3px 7px var(--menu-shade), inset -3px -3px 7px var(--menu-light);background:var(--color-wine);width:min(19rem,100% - 3.5rem);box-shadow:10px 10px 22px var(--menu-shade), -10px -10px 22px var(--menu-light);color:var(--color-white);animation:menu-in .45s var(--ease-out);border-radius:1.625rem;flex-direction:column;padding:1.375rem 1.125rem .25rem;display:flex;position:absolute;inset-block:.75rem;inset-inline-start:.75rem}.menu-backdrop{background:color-mix(in srgb, var(--color-scrim) 55%, transparent);animation:.2s ease-out fade-in;position:absolute;inset:0}.menu-panel[data-closing]{animation:.26s cubic-bezier(.4,0,1,1) forwards menu-out}.menu-backdrop[data-closing]{animation:.26s ease-in forwards menu-fade-out}@keyframes menu-in{0%{transform:translate(calc(100% + 1rem))}}@keyframes menu-out{to{transform:translate(calc(100% + 1rem))}}@keyframes menu-fade-out{to{opacity:0}}.menu-brand{align-items:center;gap:.75rem;padding-inline-start:.25rem;display:flex}.menu-logo{background:var(--color-wine);width:2.75rem;height:2.75rem;box-shadow:5px 5px 10px var(--menu-shade), -5px -5px 10px var(--menu-light);border-radius:.875rem;flex-shrink:0;place-items:center;font-size:1.25rem;font-weight:700;display:grid}.menu-name{font-size:1.0625rem;font-weight:700;line-height:1.3}.menu-tagline{color:var(--color-on-wine-muted);font-size:.75rem;font-weight:500;line-height:1.5}.menu-collapse{width:2.75rem;height:2.75rem;transition:box-shadow .25s var(--ease-out);border-radius:9999px;flex-shrink:0;place-items:center;margin-inline:auto -.375rem;display:inline-grid}.menu-collapse svg{stroke-width:2.5px;width:1.25rem;height:1.25rem}.menu-scroll{overscroll-behavior:contain;scrollbar-width:none;flex:1;min-height:0;margin:.75rem -.5rem 0;padding:.25rem .5rem .75rem;overflow-y:auto}.menu-label{color:var(--color-on-wine-muted);margin:1.125rem 0 .5rem;padding-inline:.625rem;font-size:.75rem;font-weight:700;line-height:1.5}.menu-label:first-child{margin-top:.25rem}.menu-item{min-height:2.875rem;transition:box-shadow .25s var(--ease-out);border-radius:.9375rem;align-items:center;gap:.875rem;margin-bottom:.375rem;padding:.625rem .875rem;font-size:1rem;font-weight:700;line-height:1.4;display:flex}.menu-icon{stroke-width:2.25px;flex-shrink:0;width:1.25rem;height:1.25rem}@media (hover:hover){.menu-item:not([aria-current]):hover,.menu-collapse:hover{box-shadow:var(--menu-sunk)}}.menu-item:not([aria-current]):active,.menu-collapse:active{box-shadow:var(--menu-sunk)}.menu-item[aria-current]{background:linear-gradient(180deg, var(--color-count), color-mix(in srgb, var(--color-count) 80%, black));box-shadow:inset 2px 2px 5px #0006,inset -2px -2px 5px #ffffff26}.menu-count{background:var(--color-count);font-variant-numeric:tabular-nums;border-radius:9999px;place-items:center;min-width:1.375rem;height:1.375rem;margin-inline-start:auto;padding-inline:.375rem;font-size:.75rem;line-height:1;display:inline-grid;box-shadow:0 2px 6px #0000004d}.menu-item[aria-current] .menu-count{background:var(--color-white);color:var(--color-count)}.menu-divider{border:0;border-top:1px solid var(--menu-shade);border-bottom:1px solid var(--menu-light);height:0;margin:.875rem .375rem}@media (forced-colors:active){.menu-panel{border:1px solid canvastext}.menu-item[aria-current]{outline:2px solid highlight}}
