:root{--tip-border-color: var(--c-cream-a22);--tip-z: 180}.tip{position:absolute;left:50%;z-index:var(--tip-z);display:flex;flex-direction:column;gap:var(--space-3xs);width:max-content;max-width:220px;padding:var(--space-sm) var(--space-10);border:1px solid var(--tip-border-color);border-radius:var(--radius-md);background:var(--c-ink-a95);box-shadow:0 12px 28px var(--color-scrim-heavy),0 0 0 1px var(--color-scrim-medium);color:var(--cream-10);text-align:left;text-transform:none;letter-spacing:0;white-space:normal;pointer-events:none;opacity:0;transform:translate(-50%) translateY(4px);transition:opacity var(--duration-fast) ease,transform var(--duration-fast) ease}.tip:after{content:"";position:absolute;left:50%;width:8px;height:8px;margin-left:-4px;background:var(--c-ink-a95);transform:translateY(-50%) rotate(45deg)}.tip--up{bottom:calc(100% + 8px);top:auto}.tip--up:after{top:100%;border-right:1px solid var(--tip-border-color);border-bottom:1px solid var(--tip-border-color)}.tip--down{top:calc(100% + 8px);bottom:auto;transform:translate(-50%) translateY(-4px)}.tip--down:after{top:0;border-left:1px solid var(--tip-border-color);border-top:1px solid var(--tip-border-color)}.has-tip:hover .tip,.has-tip:focus .tip,.has-tip:focus-within .tip{opacity:1;transform:translate(-50%) translateY(0);pointer-events:auto}[data-tip-portal-body]{display:none}