.context-tip[hidden] { display: none; }
.context-tip {
  position: fixed; z-index: 9000; width: 246px; padding: 13px; pointer-events: none;
  border: 1px solid var(--line); border-radius: 12px; background: var(--panel);
  color: var(--text); box-shadow: 0 14px 40px rgba(0,0,0,.25);
}
.context-tip-title { display: block; font-size: 13px; line-height: 1.25; }
.context-tip-description { margin: 5px 0 10px; color: var(--muted); font-size: 11px; line-height: 1.45; }
.context-tip-caption { display: block; margin-top: 7px; color: var(--muted-2); font-size: 10px; }
.context-tip-visual {
  min-height: 92px; padding: 12px; display: flex; align-items: center; justify-content: center;
  overflow: hidden; border: 1px solid var(--line); border-radius: 9px;
  background: linear-gradient(rgba(120,103,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(120,103,255,.055) 1px,transparent 1px),#fff;
  background-size: 18px 18px;
}
.context-tip-sample { color: #202b40; }
.context-tip-sample.shape { width: 58px; height: 58px; background: #7867ff; }
.context-tip-sample.shape-circle { border-radius: 50%; }
.context-tip-sample.shape-triangle { clip-path: polygon(50% 0,100% 100%,0 100%); }
.context-tip-sample.shape-star { background: transparent; color: #7867ff; font-size: 63px; line-height: 1; }
.context-tip-sample.shape-line { width: 105px; height: 4px; border-radius: 4px; }
.context-tip-sample.shape-pill { width: 94px; height: 40px; border-radius: 30px; }
.context-tip-sample.frame { display: grid; place-items: center; width: 65px; height: 65px; border: 2px dashed #7867ff; background: #e8e2ff; color: #654ac9; font-size: 28px; }
.context-tip-sample.frame-rounded { border-radius: 12px; }
.context-tip-sample.frame-circle { border-radius: 50%; }
.context-tip-sample.frame-portrait { width: 48px; height: 72px; border-radius: 5px; }
.context-tip-sample.heading { font-size: 22px; font-weight: 800; }
.context-tip-sample.text { font-size: 13px; }
.context-tip-sample.button { padding: 10px 15px; border-radius: 7px; background: #7867ff; color: white; font-size: 12px; font-weight: 700; }
.context-tip-sample.media { display: grid; place-items: center; width: 92px; height: 58px; border-radius: 7px; background: #e9edf5; color: #7867ff; font-size: 27px; }
.context-tip-sample.icon { color: #7867ff; font-size: 52px; }
.context-tip-sample.layout { display: flex; gap: 5px; width: 125px; height: 60px; padding: 8px; border: 2px solid #7867ff; border-radius: 5px; }
.context-tip-sample.layout i { flex: 1; background: #d9d1fc; border-radius: 3px; }
.context-tip-sample.animated { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 11px; background: #7867ff; color: white; font-size: 26px; font-weight: 800; }
@media (prefers-reduced-motion: reduce) { .context-tip-sample.animated { animation: none; } }