.menu-tooltip {
    position: fixed;
    z-index: 70;
    width: max-content;
    max-width: min(260px, calc(100vw - 20px));
    padding: 11px 15px;
    border: 1px solid color-mix(in srgb, var(--surface) 14%, var(--green));
    border-radius: 9px;
    color: var(--surface);
    background: var(--green);
    box-shadow: 0 5px 16px var(--shadow-strong);
    font: 600 12px/1.45 'Avenir Next', 'Segoe UI', sans-serif;
    letter-spacing: .01em;
    overflow-wrap: anywhere;
    --tooltip-x: -5px;
    --tooltip-y: 0;
}
.menu-tooltip::before { content: ''; position: absolute; width: 8px; height: 8px; background: inherit; transform: rotate(45deg); }
.menu-tooltip[data-side=right]::before { left: -4px; top: calc(var(--tooltip-arrow) - 4px); }
.menu-tooltip[data-side=left] { --tooltip-x: 5px; }
.menu-tooltip[data-side=left]::before { right: -4px; top: calc(var(--tooltip-arrow) - 4px); }
.menu-tooltip[data-side=bottom] { --tooltip-x: 0; --tooltip-y: -5px; }
.menu-tooltip[data-side=bottom]::before { top: -4px; left: calc(var(--tooltip-arrow) - 4px); }
.menu-tooltip[data-side=top] { --tooltip-x: 0; --tooltip-y: 5px; }
.menu-tooltip[data-side=top]::before { bottom: -4px; left: calc(var(--tooltip-arrow) - 4px); }
.menu-tooltip.is-visible { animation: menu-tooltip-in .18s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes menu-tooltip-in { from { opacity: 0; transform: translate(var(--tooltip-x), var(--tooltip-y)); } to { opacity: 1; transform: translate(0, 0); } }
@media (prefers-reduced-motion: reduce) { .menu-tooltip.is-visible { animation: none; } }