@layer theme,base;@layer components{.ui-tip-anchor{display:contents}.ui-tip__text{border-bottom:2px dotted color-mix(in srgb, var(--gold) 55%, transparent)}.ui-tip{--tc:var(--gold);z-index:85;width:max-content;max-width:min(var(--tip-w,280px), calc(100vw - 16px));background:var(--crypt);color:var(--bone);font-family:var(--font-body);text-align:left;text-transform:none;letter-spacing:0;white-space:normal;pointer-events:none;visibility:hidden;opacity:0;box-shadow:0 -2px 0 0 var(--tc), 0 2px 0 0 var(--tc), -2px 0 0 0 var(--tc), 2px 0 0 0 var(--tc), 4px 2px 0 0 #000, 4px 6px 0 0 #000, 2px 4px 0 0 #000, 6px 4px 0 0 #000;padding:10px 12px 11px;font-size:14px;line-height:1.45;position:fixed;top:0;left:0}.ui-tip[data-tone=blood]{--tc:var(--blood)}.ui-tip[data-tone=bone]{--tc:var(--bone)}.ui-tip[data-tone=poison]{--tc:var(--poison)}.ui-tip[data-tone=ash]{--tc:var(--ash)}.ui-tip[data-open]{visibility:visible;opacity:1;pointer-events:auto;animation:.12s steps(2,end) ui-tip-in}.ui-tip:before{content:"";position:absolute}.ui-tip[data-side=top]:before{height:16px;top:100%;left:0;right:0}.ui-tip[data-side=bottom]:before{height:16px;bottom:100%;left:0;right:0}.ui-tip[data-side=left]:before{width:16px;top:0;bottom:0;left:100%}.ui-tip[data-side=right]:before{width:16px;top:0;bottom:0;right:100%}.ui-tip__tail{pointer-events:none;width:14px;height:8px;position:absolute}.ui-tip__tail:before,.ui-tip__tail:after{content:"";position:absolute;inset:0}.ui-tip__tail:before{background:var(--tc);clip-path:polygon(0 0,14px 0,14px 2px,12px 2px,12px 4px,10px 4px,10px 6px,8px 6px,8px 8px,6px 8px,6px 6px,4px 6px,4px 4px,2px 4px,2px 2px,0 2px)}.ui-tip__tail:after{background:var(--crypt);clip-path:polygon(2px 0,12px 0,12px 2px,10px 2px,10px 4px,8px 4px,8px 6px,6px 6px,6px 4px,4px 4px,4px 2px,2px 2px)}.ui-tip[data-side=top] .ui-tip__tail{top:100%;left:var(--tail,50%);translate:-50%}.ui-tip[data-side=bottom] .ui-tip__tail{bottom:100%;left:var(--tail,50%);translate:-50%;rotate:180deg}.ui-tip[data-side=left] .ui-tip__tail{left:100%;top:var(--tail,50%);translate:-3px -50%;rotate:-90deg}.ui-tip[data-side=right] .ui-tip__tail{right:100%;top:var(--tail,50%);translate:3px -50%;rotate:90deg}.ui-tip :where(strong,b){color:var(--tc);font-weight:600}}@layer utilities;@keyframes ui-tip-in{0%{opacity:0;scale:.92}}