.tip-top-arrow {
  --c: var(--tip-color, #3b82f6);
  font-size: var(--tip-size, 16px);
  position: relative;
  display: inline-flex;
}
.tip-top-arrow button {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.6em 1.2em;
  border: 0;
  border-radius: 0.5em;
  background: var(--c);
  color: #fff;
  font: 600 1em system-ui, sans-serif;
  cursor: pointer;
}
.tip-top-arrow button:focus-visible {
  outline: 2px solid var(--c);
  outline-offset: 2px;
}
.tip-top-arrow-tip {
  position: absolute;
  bottom: calc(100% + 0.7em);
  left: 50%;
  z-index: 10;
  padding: 0.45em 0.75em;
  border-radius: 0.4em;
  background: #1e293b;
  box-shadow: 0 0.4em 1em -0.3em rgb(0 0 0 / 0.45);
  color: #fff;
  font: 500 0.85em/1.3 system-ui, sans-serif;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, 0.4em);
  transition: opacity 0.18s ease, transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0.25s;
}
/* the arrow: a rotated square, half hidden under the bubble */
.tip-top-arrow-tip::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  width: 0.6em;
  height: 0.6em;
  background: inherit;
  transform: translate(-50%, -50%) rotate(45deg);
}
.tip-top-arrow:is(:hover, .is-hover) .tip-top-arrow-tip,
.tip-top-arrow:focus-within .tip-top-arrow-tip {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.tip-bottom-arrow {
  --c: var(--tip-color, #3b82f6);
  font-size: var(--tip-size, 16px);
  position: relative;
  display: inline-flex;
}
.tip-bottom-arrow button {
  display: grid;
  place-items: center;
  width: 2.6em;
  height: 2.6em;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--c) 40%, transparent);
  border-radius: 0.6em;
  background: color-mix(in srgb, var(--c) 10%, transparent);
  color: var(--c);
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.tip-bottom-arrow svg {
  width: 1.25em;
  height: 1.25em;
}
.tip-bottom-arrow:is(:hover, .is-hover) button { background: color-mix(in srgb, var(--c) 20%, transparent); }
.tip-bottom-arrow button:focus-visible {
  outline: 2px solid var(--c);
  outline-offset: 2px;
}
.tip-bottom-arrow-tip {
  position: absolute;
  top: calc(100% + 0.75em);
  left: 50%;
  z-index: 10;
  padding: 0.45em 0.75em;
  border: 1px solid rgb(15 23 42 / 0.14);
  border-radius: 0.45em;
  background: #fff;
  box-shadow: 0 0.6em 1.2em -0.5em rgb(15 23 42 / 0.35);
  color: #1e293b;
  font: 500 0.85em/1.3 system-ui, sans-serif;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, -0.4em);
  transition: opacity 0.18s ease, transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0.25s;
}
/* a square with only its top and left borders, turned 45deg, continues the outline */
.tip-bottom-arrow-tip::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  box-sizing: border-box;
  width: 0.7em;
  height: 0.7em;
  border: inherit;
  border-right: 0;
  border-bottom: 0;
  border-radius: 0.12em 0 0;
  background: inherit;
  transform: translate(-50%, 55%) rotate(45deg);
}
.tip-bottom-arrow:is(:hover, .is-hover) .tip-bottom-arrow-tip,
.tip-bottom-arrow:focus-within .tip-bottom-arrow-tip {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.tip-left-arrow {
  --c: var(--tip-color, #3b82f6);
  font-size: var(--tip-size, 16px);
  position: relative;
  display: inline-flex;
  margin-left: 10em; /* room for the tooltip in this preview */
}
.tip-left-arrow button {
  display: grid;
  place-items: center;
  width: 3em;
  height: 3em;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0.4em 1em -0.3em color-mix(in srgb, var(--c) 70%, transparent);
  color: #fff;
  cursor: pointer;
}
.tip-left-arrow svg {
  width: 1.35em;
  height: 1.35em;
  transition: transform 0.4s cubic-bezier(0.3, 1.5, 0.5, 1);
}
.tip-left-arrow:is(:hover, .is-hover) svg,
.tip-left-arrow:focus-within svg { transform: rotate(90deg); }
.tip-left-arrow button:focus-visible {
  outline: 2px solid var(--c);
  outline-offset: 2px;
}
.tip-left-arrow-tip {
  --bg: color-mix(in srgb, var(--c) 22%, #fff);
  position: absolute;
  top: 50%;
  right: calc(100% + 1em);
  z-index: 10;
  padding: 0.5em 0.8em;
  border-radius: 0.45em;
  background: var(--bg);
  box-shadow: 0 0.4em 1em -0.4em rgb(15 23 42 / 0.35);
  color: color-mix(in srgb, var(--c) 55%, #000);
  font: 600 0.85em/1.3 system-ui, sans-serif;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(0.8em, -50%);
  transition: opacity 0.2s ease, transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0.35s;
}
/* a border triangle: three transparent sides and one colored */
.tip-left-arrow-tip::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  border: 0.45em solid transparent;
  border-right: 0;
  border-left-color: var(--bg);
  transform: translateY(-50%);
}
.tip-left-arrow:is(:hover, .is-hover) .tip-left-arrow-tip,
.tip-left-arrow:focus-within .tip-left-arrow-tip {
  opacity: 1;
  visibility: visible;
  transform: translate(0, -50%);
}

.tip-right-arrow {
  --c: var(--tip-color, #3b82f6);
  font-size: var(--tip-size, 16px);
  position: relative;
  display: inline-flex;
  margin-right: 10em; /* room for the tooltip in this preview */
}
.tip-right-arrow button {
  display: grid;
  place-items: center;
  width: 2.6em;
  height: 2.6em;
  padding: 0;
  border: 0;
  border-radius: 0.6em;
  background: color-mix(in srgb, var(--c) 14%, transparent);
  color: var(--c);
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.tip-right-arrow svg {
  width: 1.25em;
  height: 1.25em;
}
.tip-right-arrow:is(:hover, .is-hover) button { background: color-mix(in srgb, var(--c) 24%, transparent); }
.tip-right-arrow button:focus-visible {
  outline: 2px solid var(--c);
  outline-offset: 2px;
}
.tip-right-arrow-tip {
  position: absolute;
  top: 50%;
  left: calc(100% + 0.9em);
  z-index: 10;
  padding: 0.45em 0.75em;
  border-radius: 0.45em;
  background: var(--c);
  box-shadow: 0 0.4em 1em -0.4em color-mix(in srgb, var(--c) 90%, transparent);
  color: #fff;
  font: 600 0.85em/1.3 system-ui, sans-serif;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* scale from the arrow's point, which sits 0.5em left of the bubble */
  transform-origin: -0.5em 50%;
  transform: translateY(-50%) scale(0.3);
  transition: opacity 0.15s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), visibility 0.4s;
}
.tip-right-arrow-tip::before {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(100% - 1px);
  width: 0.5em;
  height: 0.9em;
  background: inherit;
  clip-path: polygon(100% 0, 0 50%, 100% 100%);
  transform: translateY(-50%);
}
.tip-right-arrow:is(:hover, .is-hover) .tip-right-arrow-tip,
.tip-right-arrow:focus-within .tip-right-arrow-tip {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) scale(1);
}

.tip-bounce-in {
  --c: var(--tip-color, #3b82f6);
  font-size: var(--tip-size, 16px);
  position: relative;
  display: inline-flex;
}
.tip-bounce-in button {
  display: grid;
  place-items: center;
  width: 2.7em;
  height: 2.7em;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--c) 35%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, var(--c) 8%, transparent);
  color: var(--c);
  cursor: pointer;
}
.tip-bounce-in svg {
  width: 1.3em;
  height: 1.3em;
  transform-origin: 50% 0.2em;
}
.tip-bounce-in:is(:hover, .is-hover) svg { animation: tip-bounce-in-ring 0.7s ease-in-out; }
.tip-bounce-in button:focus-visible {
  outline: 2px solid var(--c);
  outline-offset: 2px;
}
.tip-bounce-in-tip {
  position: absolute;
  bottom: calc(100% + 0.75em);
  left: 50%;
  z-index: 10;
  padding: 0.45em 0.85em;
  border-radius: 0.5em;
  background: color-mix(in srgb, var(--c) 14%, #0f172a);
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.07), 0 0.5em 1em -0.4em rgb(0 0 0 / 0.5);
  color: #fff;
  font: 500 0.85em/1.3 system-ui, sans-serif;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-50%);
  transform-origin: 50% 100%;
}
.tip-bounce-in-tip::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  width: 0.6em;
  height: 0.6em;
  background: inherit;
  transform: translate(-50%, -50%) rotate(45deg);
}
.tip-bounce-in:is(:hover, .is-hover) .tip-bounce-in-tip,
.tip-bounce-in:focus-within .tip-bounce-in-tip {
  opacity: 1;
  visibility: visible;
  animation: tip-bounce-in-pop 0.7s cubic-bezier(0.25, 0.7, 0.35, 1) both;
}
@keyframes tip-bounce-in-pop {
  0% { opacity: 0; transform: translate(-50%, 1em) scale(0.4); }
  40% { opacity: 1; transform: translate(-50%, -0.5em) scale(0.95, 1.08); }
  62% { transform: translate(-50%, 0) scale(1.1, 0.88); }
  80% { transform: translate(-50%, -0.12em) scale(0.98, 1.03); }
  100% { opacity: 1; transform: translate(-50%, 0) scale(1); }
}
@keyframes tip-bounce-in-ring {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(16deg); }
  40% { transform: rotate(-12deg); }
  60% { transform: rotate(7deg); }
  80% { transform: rotate(-3deg); }
}

.tip-flip-3d {
  --c: var(--tip-color, #3b82f6);
  font-size: var(--tip-size, 16px);
  position: relative;
  display: inline-flex;
}
.tip-flip-3d button {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.6em 1.2em;
  border: 0;
  border-radius: 0.5em;
  background: var(--c);
  color: #fff;
  font: 600 1em system-ui, sans-serif;
  cursor: pointer;
}
.tip-flip-3d button:focus-visible {
  outline: 2px solid var(--c);
  outline-offset: 2px;
}
.tip-flip-3d-tip {
  position: absolute;
  top: calc(100% + 0.75em);
  left: 50%;
  z-index: 10;
  padding: 0.5em 0.85em;
  border-radius: 0.5em;
  background: linear-gradient(180deg, var(--c), color-mix(in srgb, var(--c) 60%, #7c3aed));
  box-shadow: 0 0.5em 1em -0.4em color-mix(in srgb, var(--c) 80%, transparent);
  color: #fff;
  font: 600 0.85em/1.3 system-ui, sans-serif;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* hinged on its top edge, folded back into the page */
  transform-origin: 50% 0;
  transform: translateX(-50%) perspective(18em) rotateX(-85deg);
  transition: opacity 0.2s ease, transform 0.55s cubic-bezier(0.3, 1.45, 0.5, 1), visibility 0.55s;
}
/* the arrow sits where the gradient starts, so a flat accent matches it */
.tip-flip-3d-tip::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  width: 0.6em;
  height: 0.6em;
  background: var(--c);
  transform: translate(-50%, 50%) rotate(45deg);
}
.tip-flip-3d:is(:hover, .is-hover) .tip-flip-3d-tip,
.tip-flip-3d:focus-within .tip-flip-3d-tip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) perspective(18em) rotateX(0deg);
}

.tip-blur-in {
  --c: var(--tip-color, #3b82f6);
  font-size: var(--tip-size, 16px);
  position: relative;
  display: inline-flex;
}
.tip-blur-in button {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.6em 1.2em;
  border: 0;
  border-radius: 0.5em;
  background: var(--c);
  color: #fff;
  font: 600 1em system-ui, sans-serif;
  cursor: pointer;
}
.tip-blur-in svg {
  width: 1.2em;
  height: 1.2em;
}
.tip-blur-in button:focus-visible {
  outline: 2px solid var(--c);
  outline-offset: 2px;
}
.tip-blur-in-tip {
  position: absolute;
  bottom: calc(100% + 0.75em);
  left: 50%;
  z-index: 10;
  padding: 0.45em 0.8em;
  border-radius: 0.45em;
  background: color-mix(in srgb, var(--c) 14%, #0f172a);
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.07), 0 0.5em 1em -0.4em rgb(0 0 0 / 0.5);
  color: #fff;
  font: 500 0.85em/1.3 system-ui, sans-serif;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  filter: blur(0.35em);
  transform-origin: 50% 100%;
  transform: translateX(-50%) scale(1.25);
  transition: opacity 0.25s ease, filter 0.35s ease, transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0.4s;
}
.tip-blur-in-tip::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  width: 0.6em;
  height: 0.6em;
  background: inherit;
  transform: translate(-50%, -50%) rotate(45deg);
}
.tip-blur-in:is(:hover, .is-hover) .tip-blur-in-tip,
.tip-blur-in:focus-within .tip-blur-in-tip {
  opacity: 1;
  visibility: visible;
  filter: blur(0);
  transform: translateX(-50%) scale(1);
}

.tip-morph-pill {
  --c: var(--tip-color, #3b82f6);
  font-size: var(--tip-size, 16px);
  position: relative;
  display: inline-flex;
}
.tip-morph-pill button {
  display: grid;
  place-items: center;
  width: 2.7em;
  height: 2.7em;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--c) 14%, transparent);
  color: var(--c);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.tip-morph-pill svg {
  width: 1.3em;
  height: 1.3em;
}
.tip-morph-pill:is(:hover, .is-hover) button {
  background: var(--c);
  color: #fff;
}
.tip-morph-pill button:focus-visible {
  outline: 2px solid var(--c);
  outline-offset: 2px;
}
.tip-morph-pill-tip {
  position: absolute;
  bottom: calc(100% + 0.6em);
  left: 50%;
  z-index: 10;
  padding: 0.5em 1em;
  border-radius: 1.15em;
  background: var(--c);
  color: #fff;
  font: 600 0.85em/1.3 system-ui, sans-serif;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* a circle as tall as the pill, cut from its middle */
  clip-path: inset(0 calc(50% - 1.15em) round 1.15em);
  transform: translate(-50%, 0.9em) scale(0.5);
  transition: opacity 0.12s ease, transform 0.25s cubic-bezier(0.3, 1.4, 0.5, 1), clip-path 0.2s ease, visibility 0.3s;
}
.tip-morph-pill-tip span {
  display: block;
  opacity: 0;
  transition: opacity 0.1s ease;
}
.tip-morph-pill:is(:hover, .is-hover) .tip-morph-pill-tip,
.tip-morph-pill:focus-within .tip-morph-pill-tip {
  opacity: 1;
  visibility: visible;
  clip-path: inset(0 0 round 1.15em);
  transform: translate(-50%, 0) scale(1);
  transition: opacity 0.12s ease, transform 0.25s cubic-bezier(0.3, 1.4, 0.5, 1), clip-path 0.35s cubic-bezier(0.65, 0, 0.35, 1) 0.15s, visibility 0s;
}
.tip-morph-pill:is(:hover, .is-hover) .tip-morph-pill-tip span,
.tip-morph-pill:focus-within .tip-morph-pill-tip span {
  opacity: 1;
  transition: opacity 0.2s ease 0.35s;
}

.tip-word-by-word {
  --c: var(--tip-color, #3b82f6);
  font-size: var(--tip-size, 16px);
  position: relative;
  display: inline-flex;
}
.tip-word-by-word button {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.6em 1.2em;
  border: 0;
  border-radius: 0.5em;
  background: var(--c);
  color: #fff;
  font: 600 1em system-ui, sans-serif;
  cursor: pointer;
}
.tip-word-by-word svg {
  width: 1.25em;
  height: 1.25em;
}
.tip-word-by-word button:focus-visible {
  outline: 2px solid var(--c);
  outline-offset: 2px;
}
.tip-word-by-word-tip {
  position: absolute;
  bottom: calc(100% + 0.7em);
  left: 50%;
  z-index: 10;
  padding: 0.5em 0.85em;
  border: 1px solid color-mix(in srgb, var(--c) 35%, transparent);
  border-radius: 0.55em;
  background: #fff;
  box-shadow: 0 0.6em 1.2em -0.5em color-mix(in srgb, var(--c) 60%, transparent);
  color: #0f172a;
  font: 500 0.85em/1.3 system-ui, sans-serif;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform-origin: 50% 100%;
  transform: translateX(-50%) scale(0.9);
  transition: opacity 0.15s ease, transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0.3s;
}
.tip-word-by-word-tip span {
  display: inline-block;
  opacity: 0;
  filter: blur(0.15em);
  transform: translateY(0.5em);
  transition: opacity 0.15s ease, transform 0.15s ease, filter 0.15s ease;
}
.tip-word-by-word:is(:hover, .is-hover) .tip-word-by-word-tip,
.tip-word-by-word:focus-within .tip-word-by-word-tip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) scale(1);
}
.tip-word-by-word:is(:hover, .is-hover) .tip-word-by-word-tip span,
.tip-word-by-word:focus-within .tip-word-by-word-tip span {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
  transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.3s ease;
  transition-delay: calc(0.1s + var(--i) * 0.07s);
}

.tip-hover-delay {
  --c: var(--tip-color, #3b82f6);
  font-size: var(--tip-size, 16px);
  position: relative;
  display: inline-flex;
}
.tip-hover-delay button {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.6em 1.2em;
  border: 0;
  border-radius: 0.5em;
  background: var(--c);
  color: #fff;
  font: 600 1em system-ui, sans-serif;
  cursor: pointer;
}
.tip-hover-delay svg {
  width: 1.2em;
  height: 1.2em;
}
.tip-hover-delay button:focus-visible {
  outline: 2px solid var(--c);
  outline-offset: 2px;
}
/* the wait bar: fills over the same 0.5s the tooltip waits */
.tip-hover-delay::after {
  content: "";
  position: absolute;
  top: calc(100% + 0.4em);
  left: 0.5em;
  right: 0.5em;
  height: 0.18em;
  border-radius: 1em;
  background: var(--c);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.15s ease;
}
.tip-hover-delay-tip {
  position: absolute;
  bottom: calc(100% + 0.7em);
  left: 50%;
  z-index: 10;
  padding: 0.45em 0.8em;
  border-radius: 0.45em;
  background: color-mix(in srgb, var(--c) 14%, #0f172a);
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.07), 0 0.5em 1em -0.4em rgb(0 0 0 / 0.5);
  color: #fff;
  font: 500 0.85em/1.3 system-ui, sans-serif;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, 0.3em);
  /* hiding: immediate */
  transition: opacity 0.1s ease, transform 0.1s ease, visibility 0s 0.1s;
}
.tip-hover-delay-tip::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  width: 0.6em;
  height: 0.6em;
  background: inherit;
  transform: translate(-50%, -50%) rotate(45deg);
}
.tip-hover-delay:is(:hover, .is-hover)::after,
.tip-hover-delay:focus-within::after {
  transform: scaleX(1);
  transition: transform 0.5s linear;
}
/* showing: after a 0.5s delay */
.tip-hover-delay:is(:hover, .is-hover) .tip-hover-delay-tip,
.tip-hover-delay:focus-within .tip-hover-delay-tip {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition: opacity 0.2s ease 0.5s, transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) 0.5s, visibility 0s 0.5s;
}

.tip-swinging-tag {
  --c: var(--tip-color, #3b82f6);
  font-size: var(--tip-size, 16px);
  position: relative;
  display: inline-flex;
  margin-bottom: 2.5em; /* room for the tag in this preview */
}
.tip-swinging-tag button {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.45em 0.95em;
  border: 1px solid color-mix(in srgb, var(--c) 45%, transparent);
  border-radius: 2em;
  background: color-mix(in srgb, var(--c) 10%, transparent);
  color: var(--c);
  font: 600 0.9em/1.2 system-ui, sans-serif;
  cursor: pointer;
}
.tip-swinging-tag svg {
  width: 1.15em;
  height: 1.15em;
}
.tip-swinging-tag button:focus-visible {
  outline: 2px solid var(--c);
  outline-offset: 2px;
}
.tip-swinging-tag-tip {
  position: absolute;
  top: calc(100% + 1.2em);
  left: 50%;
  z-index: 10;
  box-sizing: border-box;
  width: 10.5em;
  padding: 1.5em 0.9em 0.75em;
  border: 1px solid color-mix(in srgb, var(--c) 55%, transparent);
  border-radius: 0.35em 0.35em 0.5em 0.5em;
  background: color-mix(in srgb, var(--c) 10%, #fff);
  color: color-mix(in srgb, var(--c) 45%, #0f172a);
  font: 500 0.75em/1.35 system-ui, sans-serif;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  translate: -50% 0;
  /* the pivot: the top of the string */
  transform-origin: 50% -1.2em;
}
.tip-swinging-tag-tip b {
  display: block;
  margin-bottom: 0.15em;
  color: var(--c);
  font-size: 1.45em;
  font-weight: 800;
  line-height: 1.1;
}
/* the eyelet */
.tip-swinging-tag-tip::before {
  content: "";
  position: absolute;
  top: 0.55em;
  left: 50%;
  width: 0.55em;
  height: 0.55em;
  margin-left: -0.275em;
  border: 0.14em solid var(--c);
  border-radius: 50%;
  background: color-mix(in srgb, var(--c) 15%, transparent);
}
/* the string, from the eyelet up to the badge */
.tip-swinging-tag-tip::after {
  content: "";
  position: absolute;
  bottom: calc(100% - 0.8em);
  left: 50%;
  width: 1px;
  height: 2em;
  background: var(--c);
}
.tip-swinging-tag:is(:hover, .is-hover) .tip-swinging-tag-tip,
.tip-swinging-tag:focus-within .tip-swinging-tag-tip {
  opacity: 1;
  visibility: visible;
  animation: tip-swinging-tag-swing 1.3s ease-in-out both;
}
@keyframes tip-swinging-tag-swing {
  0% { opacity: 0; rotate: 22deg; }
  15% { opacity: 1; }
  34% { rotate: -13deg; }
  55% { rotate: 7deg; }
  74% { rotate: -3deg; }
  89% { rotate: 1deg; }
  100% { opacity: 1; rotate: 0deg; }
}

.tip-rich-title {
  --c: var(--tip-color, #3b82f6);
  font-size: var(--tip-size, 16px);
  position: relative;
  display: inline-flex;
  margin-bottom: 6em; /* room for the card in this preview */
}
.tip-rich-title button {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  padding: 0.35em 0.75em;
  border: 0;
  border-radius: 2em;
  background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 55%, #db2777));
  color: #fff;
  font: 700 0.8em/1.2 system-ui, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.tip-rich-title svg {
  width: 1.2em;
  height: 1.2em;
}
.tip-rich-title button:focus-visible {
  outline: 2px solid var(--c);
  outline-offset: 2px;
}
.tip-rich-title-tip {
  position: absolute;
  top: calc(100% + 0.8em);
  left: 50%;
  z-index: 10;
  box-sizing: border-box;
  width: 17em;
  padding: 0.85em 1em;
  border-radius: 0.7em;
  background: color-mix(in srgb, var(--c) 14%, #0f172a);
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.07), 0 0.8em 1.6em -0.6em rgb(0 0 0 / 0.55);
  color: rgb(255 255 255 / 0.8);
  font: 400 0.82em/1.45 system-ui, sans-serif;
  text-align: left;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform-origin: 50% 0;
  transform: translate(-50%, -0.4em) scale(0.96);
  transition: opacity 0.2s ease, transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0.3s;
}
.tip-rich-title-tip::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  width: 0.7em;
  height: 0.7em;
  background: inherit;
  transform: translate(-50%, 50%) rotate(45deg);
}
.tip-rich-title-tip strong {
  display: block;
  margin-bottom: 0.2em;
  color: color-mix(in srgb, var(--c) 40%, #fff);
  font-size: 1.1em;
  font-weight: 700;
}
.tip-rich-title-tip span { display: block; }
.tip-rich-title-tip em {
  display: block;
  margin-top: 0.65em;
  padding-top: 0.6em;
  border-top: 1px solid rgb(255 255 255 / 0.12);
  color: rgb(255 255 255 / 0.55);
  font-size: 0.9em;
  font-style: normal;
}
.tip-rich-title:is(:hover, .is-hover) .tip-rich-title-tip,
.tip-rich-title:focus-within .tip-rich-title-tip {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0) scale(1);
}

.tip-keyboard-shortcut {
  --c: var(--tip-color, #3b82f6);
  font-size: var(--tip-size, 16px);
  position: relative;
  display: inline-flex;
}
.tip-keyboard-shortcut button {
  display: grid;
  place-items: center;
  width: 2.6em;
  height: 2.6em;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--c) 35%, transparent);
  border-radius: 0.6em;
  background: color-mix(in srgb, var(--c) 8%, transparent);
  color: var(--c);
  cursor: pointer;
}
.tip-keyboard-shortcut svg {
  width: 1.25em;
  height: 1.25em;
}
.tip-keyboard-shortcut button:focus-visible {
  outline: 2px solid var(--c);
  outline-offset: 2px;
}
.tip-keyboard-shortcut-tip {
  position: absolute;
  bottom: calc(100% + 0.75em);
  left: 50%;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 0.25em;
  padding: 0.35em 0.4em 0.35em 0.75em;
  border-radius: 0.5em;
  background: color-mix(in srgb, var(--c) 14%, #0f172a);
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.07), 0 0.5em 1em -0.4em rgb(0 0 0 / 0.5);
  color: #fff;
  font: 500 0.85em/1.3 system-ui, sans-serif;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, 0.35em);
  transition: opacity 0.18s ease, transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0.25s;
}
.tip-keyboard-shortcut-tip::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  width: 0.6em;
  height: 0.6em;
  background: inherit;
  transform: translate(-50%, -50%) rotate(45deg);
}
.tip-keyboard-shortcut-tip kbd {
  display: inline-grid;
  place-items: center;
  box-sizing: border-box;
  min-width: 1.7em;
  height: 1.7em;
  padding: 0 0.35em;
  border-radius: 0.35em;
  background: rgb(255 255 255 / 0.12);
  box-shadow: inset 0 -0.15em 0 rgb(255 255 255 / 0.14), inset 0 0 0 1px rgb(255 255 255 / 0.1);
  font: 600 0.85em/1 system-ui, sans-serif;
}
.tip-keyboard-shortcut-tip kbd:first-of-type { margin-left: 0.35em; }
.tip-keyboard-shortcut:is(:hover, .is-hover) .tip-keyboard-shortcut-tip,
.tip-keyboard-shortcut:focus-within .tip-keyboard-shortcut-tip {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
.tip-keyboard-shortcut:is(:hover, .is-hover) .tip-keyboard-shortcut-tip kbd,
.tip-keyboard-shortcut:focus-within .tip-keyboard-shortcut-tip kbd {
  animation: tip-keyboard-shortcut-press 0.3s ease calc(0.3s + var(--i) * 0.15s) both;
}
@keyframes tip-keyboard-shortcut-press {
  0%, 100% { transform: translateY(0); }
  45% {
    transform: translateY(0.12em);
    background: var(--c);
    box-shadow: inset 0 -0.03em 0 rgb(255 255 255 / 0.14), inset 0 0 0 1px rgb(255 255 255 / 0.2);
  }
}

.tip-info-icon {
  --c: var(--tip-color, #3b82f6);
  font-size: var(--tip-size, 16px);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  margin-right: 8em; /* room for the tooltip in this preview */
  font-family: system-ui, sans-serif;
  font-weight: 600;
  pointer-events: none; /* only the icon opens the tooltip */
}
.tip-info-icon button {
  display: grid;
  place-items: center;
  width: 1.6em;
  height: 1.6em;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: color-mix(in srgb, currentColor 50%, transparent);
  cursor: help;
  pointer-events: auto;
  transition: color 0.2s ease;
}
.tip-info-icon svg {
  width: 1.2em;
  height: 1.2em;
}
.tip-info-icon:is(:hover, .is-hover) button { color: var(--c); }
.tip-info-icon button:focus-visible {
  outline: 2px solid var(--c);
  outline-offset: 2px;
}
.tip-info-icon-tip {
  position: absolute;
  top: 50%;
  left: calc(100% + 0.7em);
  z-index: 10;
  width: max-content;
  max-width: 13em;
  padding: 0.6em 0.8em;
  border: 1px solid rgb(15 23 42 / 0.12);
  border-radius: 0.55em;
  background: #fff;
  box-shadow: 0 0.6em 1.2em -0.5em rgb(15 23 42 / 0.35);
  color: #334155;
  font: 400 0.8em/1.45 system-ui, sans-serif;
  text-wrap: balance;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-0.5em, -50%);
  transition: opacity 0.18s ease, transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0.25s;
}
.tip-info-icon-tip::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 100%;
  box-sizing: border-box;
  width: 0.75em;
  height: 0.75em;
  border: inherit;
  border-top: 0;
  border-right: 0;
  border-radius: 0 0 0 0.12em;
  background: inherit;
  transform: translate(55%, -50%) rotate(45deg);
}
.tip-info-icon:is(:hover, .is-hover) .tip-info-icon-tip,
.tip-info-icon:focus-within .tip-info-icon-tip {
  opacity: 1;
  visibility: visible;
  transform: translate(0, -50%);
}

.tip-truncated-text {
  --c: var(--tip-color, #3b82f6);
  font-size: var(--tip-size, 16px);
  position: relative;
  display: inline-flex;
  --arrow: 1.5em;
  box-sizing: border-box;
  align-items: center;
  gap: 0.5em;
  width: 12em;
  padding: 0.55em 0.8em;
  border: 1px solid color-mix(in srgb, var(--c) 30%, transparent);
  border-radius: 0.6em;
  background: color-mix(in srgb, var(--c) 7%, transparent);
  cursor: default;
}
.tip-truncated-text:focus-visible {
  outline: 2px solid var(--c);
  outline-offset: 2px;
}
.tip-truncated-text svg {
  flex: none;
  width: 1.2em;
  height: 1.2em;
  color: var(--c);
}
.tip-truncated-text-name {
  min-width: 0;
  overflow: hidden;
  font: 500 0.9em/1.3 system-ui, sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* the screen reader already reads the full name, so the bubble is aria-hidden */
.tip-truncated-text-tip {
  position: absolute;
  bottom: calc(100% + 0.6em);
  left: 0;
  z-index: 10;
  padding: 0.45em 0.75em;
  border-radius: 0.45em;
  background: color-mix(in srgb, var(--c) 14%, #0f172a);
  color: #fff;
  font: 500 0.85em/1.3 system-ui, sans-serif;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  clip-path: inset(-0.5em 100% -0.8em -0.5em);
  transition: opacity 0.15s ease, clip-path 0.2s ease, visibility 0.2s;
}
.tip-truncated-text-tip::before {
  content: "";
  position: absolute;
  top: 100%;
  left: var(--arrow);
  width: 0.6em;
  height: 0.6em;
  background: inherit;
  transform: translate(-50%, -50%) rotate(45deg);
}
.tip-truncated-text:is(:hover, .is-hover) .tip-truncated-text-tip,
.tip-truncated-text:focus-within .tip-truncated-text-tip {
  opacity: 1;
  visibility: visible;
  clip-path: inset(-0.5em -0.5em -0.8em -0.5em);
  transition: opacity 0.15s ease, clip-path 0.45s cubic-bezier(0.65, 0, 0.35, 1), visibility 0s;
}

.tip-definition-term {
  --c: var(--tip-color, #3b82f6);
  font-size: var(--tip-size, 16px);
  display: inline-block;
  margin-top: 5em; /* room for the card in this preview */
  font-family: system-ui, sans-serif;
  line-height: 1.6;
  pointer-events: none; /* only the term opens the card */
}
.tip-definition-term-anchor {
  position: relative;
  display: inline-block;
}
.tip-definition-term dfn {
  position: relative;
  border-bottom: 0.12em dotted color-mix(in srgb, var(--c) 60%, transparent);
  border-radius: 0.15em;
  color: var(--c);
  font-style: normal;
  font-weight: 650;
  cursor: help;
  pointer-events: auto;
  transition: background-color 0.25s ease;
}
/* the solid line that draws over the dotted one */
.tip-definition-term dfn::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -0.12em;
  left: 0;
  height: 0.12em;
  background: var(--c);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}
.tip-definition-term dfn:focus-visible {
  outline: 2px solid var(--c);
  outline-offset: 2px;
}
.tip-definition-term:is(:hover, .is-hover) dfn,
.tip-definition-term:focus-within dfn { background: color-mix(in srgb, var(--c) 12%, transparent); }
.tip-definition-term:is(:hover, .is-hover) dfn::after,
.tip-definition-term:focus-within dfn::after { transform: scaleX(1); }
.tip-definition-term-tip {
  position: absolute;
  bottom: calc(100% + 0.7em);
  left: 50%;
  z-index: 10;
  box-sizing: border-box;
  width: 16em;
  padding: 0.7em 0.85em 0.75em;
  border: 1px solid color-mix(in srgb, var(--c) 30%, transparent);
  border-radius: 0.6em;
  background: #fff;
  box-shadow: 0 0.8em 1.6em -0.6em rgb(15 23 42 / 0.35);
  color: #475569;
  font: 400 0.8em/1.45 system-ui, sans-serif;
  text-align: left;
  text-wrap: pretty;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform-origin: 50% 100%;
  transform: translate(-50%, 0.5em) scale(0.97);
  transition: opacity 0.2s ease 0.05s, transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) 0.05s, visibility 0.4s;
}
.tip-definition-term-tip::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  box-sizing: border-box;
  width: 0.75em;
  height: 0.75em;
  border: inherit;
  border-top: 0;
  border-left: 0;
  border-radius: 0 0 0.12em;
  background: inherit;
  transform: translate(-50%, -55%) rotate(45deg);
}
.tip-definition-term-tip b {
  display: block;
  margin-bottom: 0.15em;
  color: #0f172a;
  font-size: 1.1em;
  font-weight: 700;
}
.tip-definition-term-tip i {
  margin-left: 0.2em;
  color: var(--c);
  font-size: 0.85em;
  font-weight: 500;
}
.tip-definition-term:is(:hover, .is-hover) .tip-definition-term-tip,
.tip-definition-term:focus-within .tip-definition-term-tip {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0) scale(1);
}

.tip-user-card {
  --c: var(--tip-color, #3b82f6);
  font-size: var(--tip-size, 16px);
  position: relative;
  display: inline-flex;
  --face: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 45%, #ec4899));
  margin-right: 12.5em; /* room for the card in this preview */
}
.tip-user-card-avatar {
  display: grid;
  place-items: center;
  width: 3em;
  height: 3em;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--face);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--c) 30%, transparent);
  color: #fff;
  font: 700 0.9em system-ui, sans-serif;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: box-shadow 0.25s ease;
}
.tip-user-card:is(:hover, .is-hover) .tip-user-card-avatar { box-shadow: 0 0 0 0.25em color-mix(in srgb, var(--c) 25%, transparent); }
.tip-user-card-avatar:focus-visible {
  outline: 2px solid var(--c);
  outline-offset: 2px;
}
.tip-user-card-tip {
  position: absolute;
  top: 50%;
  left: calc(100% + 0.9em);
  z-index: 10;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 0.7em;
  align-items: center;
  width: max-content;
  padding: 0.8em 0.95em 0.7em 0.8em;
  border: 1px solid rgb(15 23 42 / 0.12);
  border-radius: 0.8em;
  background: #fff;
  box-shadow: 0 0.8em 1.6em -0.6em rgb(15 23 42 / 0.35);
  color: #0f172a;
  font: 400 0.85em/1.35 system-ui, sans-serif;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform-origin: 0 50%;
  transform: translate(-0.5em, -50%) scale(0.96);
  transition: opacity 0.2s ease, transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0.35s;
}
.tip-user-card-tip::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 100%;
  box-sizing: border-box;
  width: 0.75em;
  height: 0.75em;
  border: inherit;
  border-top: 0;
  border-right: 0;
  border-radius: 0 0 0 0.12em;
  background: inherit;
  transform: translate(55%, -50%) rotate(45deg);
}
.tip-user-card-tip > span {
  opacity: 0;
  transform: translateY(0.4em);
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.tip-user-card-face {
  display: grid;
  grid-row: span 2;
  place-items: center;
  width: 2.9em;
  height: 2.9em;
  border-radius: 50%;
  background: var(--face);
  color: #fff;
  font-size: 0.95em;
  font-weight: 700;
}
.tip-user-card-name {
  align-self: end;
  font-size: 1.05em;
  font-weight: 700;
}
.tip-user-card-role {
  align-self: start;
  color: #64748b;
  font-size: 0.9em;
}
.tip-user-card-status {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  gap: 0.5em;
  margin-top: 0.7em;
  padding-top: 0.6em;
  border-top: 1px solid rgb(15 23 42 / 0.08);
  color: #334155;
  font-size: 0.85em;
  font-weight: 500;
}
.tip-user-card-status::before {
  content: "";
  width: 0.55em;
  height: 0.55em;
  border-radius: 50%;
  background: #22c55e;
  animation: tip-user-card-ping 1.8s ease-out infinite;
}
.tip-user-card:is(:hover, .is-hover) .tip-user-card-tip,
.tip-user-card:focus-within .tip-user-card-tip {
  opacity: 1;
  visibility: visible;
  transform: translate(0, -50%) scale(1);
}
.tip-user-card:is(:hover, .is-hover) .tip-user-card-tip > span,
.tip-user-card:focus-within .tip-user-card-tip > span {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
  transition-delay: calc(0.08s + var(--i) * 0.06s);
}
@keyframes tip-user-card-ping {
  0% { box-shadow: 0 0 0 0 rgb(34 197 94 / 0.55); }
  70%, 100% { box-shadow: 0 0 0 0.45em rgb(34 197 94 / 0); }
}

.tip-link-preview {
  --c: var(--tip-color, #3b82f6);
  font-size: var(--tip-size, 16px);
  position: relative;
  display: inline-flex;
  margin-bottom: 5em; /* room for the card in this preview */
}
.tip-link-preview a {
  display: inline-flex;
  align-items: center;
  gap: 0.15em;
  border-radius: 0.2em;
  color: var(--c);
  font: 600 1em/1.4 system-ui, sans-serif;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--c) 40%, transparent);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.25em;
  transition: text-decoration-color 0.2s ease;
}
.tip-link-preview svg {
  width: 1em;
  height: 1em;
  transition: transform 0.3s cubic-bezier(0.3, 1.5, 0.5, 1);
}
.tip-link-preview:is(:hover, .is-hover) a { text-decoration-color: var(--c); }
.tip-link-preview:is(:hover, .is-hover) svg { transform: translate(0.12em, -0.12em); }
.tip-link-preview a:focus-visible {
  outline: 2px solid var(--c);
  outline-offset: 2px;
}
.tip-link-preview-tip {
  position: absolute;
  top: calc(100% + 0.7em);
  left: 50%;
  z-index: 10;
  display: flex;
  gap: 0.8em;
  box-sizing: border-box;
  width: 21em;
  padding: 0.6em 0.8em 0.6em 0.6em;
  border: 1px solid rgb(15 23 42 / 0.12);
  border-radius: 0.8em;
  background: #fff;
  box-shadow: 0 1em 2em -0.8em rgb(15 23 42 / 0.4);
  color: #475569;
  font: 400 0.8em/1.4 system-ui, sans-serif;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, -0.5em);
  transition: opacity 0.2s ease, transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0.35s;
}
.tip-link-preview-img {
  flex: none;
  width: 6.5em;
  overflow: hidden;
  border-radius: 0.5em;
}
/* sky, sun, two mountain ridges and a lake: stand-ins for a real image */
.tip-link-preview-scene {
  position: relative;
  display: block;
  height: 100%;
  background:
    radial-gradient(circle at 70% 30%, #fde68a 0 0.6em, transparent 0.65em),
    linear-gradient(color-mix(in srgb, var(--c) 35%, #fff), #fff7ed);
  transform: scale(1.35);
  transition: transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.tip-link-preview-scene::before,
.tip-link-preview-scene::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
}
.tip-link-preview-scene::before {
  top: 38%;
  background: color-mix(in srgb, var(--c) 45%, #fff);
  clip-path: polygon(0 55%, 22% 12%, 42% 45%, 64% 0, 100% 48%, 100% 100%, 0 100%);
}
.tip-link-preview-scene::after {
  top: 55%;
  background: linear-gradient(color-mix(in srgb, var(--c) 70%, #0f172a) 62%, color-mix(in srgb, var(--c) 30%, #fff) 62%);
  clip-path: polygon(0 35%, 30% 0, 55% 40%, 78% 12%, 100% 38%, 100% 100%, 0 100%);
}
.tip-link-preview-text { padding: 0.15em 0; }
.tip-link-preview-text b {
  display: block;
  margin-bottom: 0.15em;
  color: #0f172a;
  font-size: 1.1em;
  font-weight: 700;
}
.tip-link-preview-text small {
  display: block;
  margin-top: 0.35em;
  color: var(--c);
  font-size: 0.85em;
  font-weight: 600;
}
.tip-link-preview:is(:hover, .is-hover) .tip-link-preview-tip,
.tip-link-preview:focus-within .tip-link-preview-tip {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
.tip-link-preview:is(:hover, .is-hover) .tip-link-preview-scene,
.tip-link-preview:focus-within .tip-link-preview-scene { transform: scale(1); }

.tip-copy-button {
  --c: var(--tip-color, #3b82f6);
  font-size: var(--tip-size, 16px);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  padding: 0.3em 0.3em 0.3em 0.9em;
  border: 1px solid color-mix(in srgb, var(--c) 30%, transparent);
  border-radius: 0.6em;
  background: color-mix(in srgb, var(--c) 7%, transparent);
}
.tip-copy-button code {
  font: 500 0.9em/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.tip-copy-button code::before {
  content: "$ ";
  color: var(--c);
}
.tip-copy-button button {
  display: grid;
  place-items: center;
  width: 2.1em;
  height: 2.1em;
  padding: 0;
  border: 0;
  border-radius: 0.4em;
  background: transparent;
  color: var(--c);
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.15s ease;
}
.tip-copy-button button svg {
  width: 1.15em;
  height: 1.15em;
}
.tip-copy-button:is(:hover, .is-hover) button { background: color-mix(in srgb, var(--c) 16%, transparent); }
.tip-copy-button button:active { transform: scale(0.9); }
.tip-copy-button button:focus-visible {
  outline: 2px solid var(--c);
  outline-offset: 2px;
}
.tip-copy-button-tip {
  position: absolute;
  bottom: calc(100% + 0.65em);
  /* centered over the button: 0.3em of padding plus half its 2.1em */
  left: calc(100% - 1.35em);
  z-index: 10;
  display: grid;
  padding: 0.4em 0.7em;
  border-radius: 0.45em;
  background: color-mix(in srgb, var(--c) 14%, #0f172a);
  box-shadow: 0 0.5em 1em -0.4em rgb(0 0 0 / 0.5);
  color: #fff;
  font: 600 0.8em/1.3 system-ui, sans-serif;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, 0.35em);
  /* the way back from Copied waits 1.2s */
  transition: opacity 0.18s ease, transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0.25s, background-color 0.2s ease 1.2s;
}
.tip-copy-button-tip::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  width: 0.6em;
  height: 0.6em;
  background: inherit;
  transform: translate(-50%, -50%) rotate(45deg);
}
/* both labels share one grid cell, so the bubble fits the wider one */
.tip-copy-button-tip > span {
  display: inline-flex;
  grid-area: 1 / 1;
  align-items: center;
  justify-content: center;
  gap: 0.3em;
  transition: opacity 0.2s ease 1.2s, transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1) 1.2s;
}
.tip-copy-button-done {
  opacity: 0;
  transform: translateY(0.5em);
}
.tip-copy-button-done svg {
  width: 1.1em;
  height: 1.1em;
  stroke-width: 3;
}
.tip-copy-button:is(:hover, .is-hover) .tip-copy-button-tip,
.tip-copy-button:focus-within .tip-copy-button-tip {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
/* pressed: switch at once */
.tip-copy-button button:active + .tip-copy-button-tip {
  background: var(--c);
  transition: opacity 0.18s ease, transform 0.25s ease, visibility 0s, background-color 0s;
}
.tip-copy-button button:active + .tip-copy-button-tip .tip-copy-button-idle {
  opacity: 0;
  transform: translateY(-0.5em);
  transition: none;
}
.tip-copy-button button:active + .tip-copy-button-tip .tip-copy-button-done {
  opacity: 1;
  transform: translateY(0);
  transition: none;
}

.tip-input-error {
  --c: var(--tip-color, #3b82f6);
  font-size: var(--tip-size, 16px);
  position: relative;
  display: inline-flex;
  --bad: #e11d48; /* errors stay red whatever the accent */
  margin-bottom: 3.75em; /* room for the tooltip in this preview */
}
.tip-input-error input {
  box-sizing: border-box;
  width: 15em;
  padding: 0.65em 2.6em 0.65em 0.85em;
  border: 1px solid var(--c);
  border-radius: 0.55em;
  background: #fff;
  color: #0f172a;
  font: 500 1em/1.2 system-ui, sans-serif;
  caret-color: var(--c);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.tip-input-error input:invalid {
  border-color: var(--bad);
  box-shadow: 0 0 0 0.2em color-mix(in srgb, var(--bad) 14%, transparent);
}
.tip-input-error input:focus-visible {
  outline: 2px solid var(--c);
  outline-offset: 2px;
}
.tip-input-error input:invalid:focus-visible { outline-color: var(--bad); }
.tip-input-error-icon {
  position: absolute;
  top: 50%;
  right: 0.75em;
  display: grid;
  color: var(--c);
  pointer-events: none;
  transform: translateY(-50%);
}
.tip-input-error-icon svg {
  grid-area: 1 / 1;
  width: 1.25em;
  height: 1.25em;
}
.tip-input-error input:invalid ~ .tip-input-error-icon { color: var(--bad); }
/* one of each pair shows, depending on the field's validity */
.tip-input-error input:valid ~ * .tip-input-error-bad,
.tip-input-error input:invalid ~ * .tip-input-error-good { display: none; }
.tip-input-error-tip {
  position: absolute;
  top: calc(100% + 0.75em);
  right: 0;
  left: 0;
  z-index: 10;
  padding: 0.5em 0.8em;
  border-radius: 0.5em;
  background: var(--c);
  box-shadow: 0 0.5em 1em -0.4em rgb(15 23 42 / 0.45);
  color: #fff;
  font: 500 0.8em/1.4 system-ui, sans-serif;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-0.4em);
  transition: opacity 0.18s ease, transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0.3s;
}
.tip-input-error input:invalid ~ .tip-input-error-tip { background: var(--bad); }
/* the arrow sits under the status icon: 0.75em in plus half of 1.25em, in this box's 0.8em font */
.tip-input-error-tip::before {
  content: "";
  position: absolute;
  right: 1.72em;
  bottom: 100%;
  width: 0.6em;
  height: 0.6em;
  background: inherit;
  transform: translate(50%, 50%) rotate(45deg);
}
.tip-input-error:is(:hover, .is-hover) .tip-input-error-tip,
.tip-input-error:focus-within .tip-input-error-tip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.tip-input-error:is(:hover, .is-hover) input:invalid ~ .tip-input-error-tip,
.tip-input-error:focus-within input:invalid ~ .tip-input-error-tip {
  animation: tip-input-error-shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) 0.15s both;
}
@keyframes tip-input-error-shake {
  0%, 100% { translate: 0; }
  20% { translate: -0.35em; }
  40% { translate: 0.3em; }
  60% { translate: -0.2em; }
  80% { translate: 0.1em; }
}

.tip-hotspot-tour {
  --c: var(--tip-color, #3b82f6);
  font-size: var(--tip-size, 16px);
  position: relative;
  display: inline-flex;
  margin-left: 12em; /* room for the card in this preview */
}
.tip-hotspot-tour-beacon {
  position: relative;
  width: 2.2em;
  height: 2.2em;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: radial-gradient(circle, var(--c) 0 0.42em, color-mix(in srgb, var(--c) 22%, transparent) 0.46em 0.72em, transparent 0.76em);
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.3, 1.6, 0.5, 1);
}
/* two rings, half a cycle apart */
.tip-hotspot-tour-beacon::before,
.tip-hotspot-tour-beacon::after {
  content: "";
  position: absolute;
  inset: 0.4em;
  border: 0.12em solid var(--c);
  border-radius: 50%;
  opacity: 0;
  animation: tip-hotspot-tour-ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}
.tip-hotspot-tour-beacon::after { animation-delay: 1s; }
.tip-hotspot-tour:is(:hover, .is-hover) .tip-hotspot-tour-beacon { transform: scale(1.15); }
.tip-hotspot-tour-beacon:focus-visible {
  outline: 2px solid var(--c);
  outline-offset: 2px;
}
.tip-hotspot-tour-tip {
  position: absolute;
  top: 50%;
  right: calc(100% + 0.8em);
  z-index: 10;
  box-sizing: border-box;
  width: 14em;
  padding: 0.85em 1em 0.9em;
  border-radius: 0.75em;
  background: color-mix(in srgb, var(--c) 14%, #0f172a);
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.08), 0 0.8em 1.6em -0.6em rgb(0 0 0 / 0.55);
  color: rgb(255 255 255 / 0.72);
  font: 400 0.8em/1.45 system-ui, sans-serif;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform-origin: 100% 50%;
  transform: translate(0.6em, -50%) scale(0.94);
  transition: opacity 0.2s ease, transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0.4s;
}
.tip-hotspot-tour-tip::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  width: 0.65em;
  height: 0.65em;
  background: inherit;
  transform: translate(-50%, -50%) rotate(45deg);
}
.tip-hotspot-tour-tip small {
  display: block;
  color: color-mix(in srgb, var(--c) 45%, #fff);
  font-size: 0.8em;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.tip-hotspot-tour-tip b {
  display: block;
  margin: 0.15em 0 0.2em;
  color: #fff;
  font-size: 1.1em;
}
.tip-hotspot-tour-dots {
  display: flex;
  gap: 0.35em;
  margin-top: 0.7em;
}
.tip-hotspot-tour-dots i {
  width: 0.45em;
  height: 0.45em;
  border-radius: 1em;
  background: rgb(255 255 255 / 0.25);
  transition: width 0.4s cubic-bezier(0.65, 0, 0.35, 1), background-color 0.3s ease;
}
.tip-hotspot-tour-dots i:nth-child(1) { background: color-mix(in srgb, var(--c) 70%, transparent); }
.tip-hotspot-tour:is(:hover, .is-hover) .tip-hotspot-tour-tip,
.tip-hotspot-tour:focus-within .tip-hotspot-tour-tip {
  opacity: 1;
  visibility: visible;
  transform: translate(0, -50%) scale(1);
}
/* the current step's dot stretches into a bar once the card is up */
.tip-hotspot-tour:is(:hover, .is-hover) .tip-hotspot-tour-dots i:nth-child(2),
.tip-hotspot-tour:focus-within .tip-hotspot-tour-dots i:nth-child(2) {
  width: 1.4em;
  background: var(--c);
  transition-delay: 0.25s;
}
@keyframes tip-hotspot-tour-ping {
  0% { opacity: 0.8; transform: scale(0.6); }
  100% { opacity: 0; transform: scale(1.9); }
}

.tip-emoji-reaction {
  --c: var(--tip-color, #3b82f6);
  font-size: var(--tip-size, 16px);
  position: relative;
  display: inline-flex;
  margin-top: 6.5em; /* room for the tooltip in this preview */
}
.tip-emoji-reaction button {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.3em 0.7em 0.3em 0.55em;
  border: 1px solid color-mix(in srgb, var(--c) 45%, transparent);
  border-radius: 2em;
  background: color-mix(in srgb, var(--c) 12%, transparent);
  color: var(--c);
  font: 700 0.9em/1.4 system-ui, sans-serif;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.tip-emoji-reaction:is(:hover, .is-hover) button { background: color-mix(in srgb, var(--c) 22%, transparent); }
.tip-emoji-reaction button:focus-visible {
  outline: 2px solid var(--c);
  outline-offset: 2px;
}
.tip-emoji-reaction-small {
  display: inline-block;
  font-size: 1.15em;
}
.tip-emoji-reaction:is(:hover, .is-hover) .tip-emoji-reaction-small,
.tip-emoji-reaction:focus-within .tip-emoji-reaction-small {
  animation: tip-emoji-reaction-hop 0.5s cubic-bezier(0.3, 0.7, 0.4, 1);
}
.tip-emoji-reaction-tip {
  position: absolute;
  bottom: calc(100% + 0.7em);
  left: 50%;
  z-index: 10;
  box-sizing: border-box;
  width: 14.5em;
  padding: 0.7em 1em 0.8em;
  border-radius: 0.7em;
  background: color-mix(in srgb, var(--c) 14%, #0f172a);
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.07), 0 0.6em 1.2em -0.5em rgb(0 0 0 / 0.5);
  color: rgb(255 255 255 / 0.85);
  font: 500 0.8em/1.4 system-ui, sans-serif;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform-origin: 50% 100%;
  transform: translate(-50%, 0.4em) scale(0.92);
  transition: opacity 0.18s ease, transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0.3s;
}
.tip-emoji-reaction-tip::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  width: 0.65em;
  height: 0.65em;
  background: inherit;
  transform: translate(-50%, -50%) rotate(45deg);
}
.tip-emoji-reaction-big {
  display: block;
  width: 1.5em;
  margin: 0 auto 0.2em;
  font-size: 1.9em;
  line-height: 1.3;
}
.tip-emoji-reaction:is(:hover, .is-hover) .tip-emoji-reaction-tip,
.tip-emoji-reaction:focus-within .tip-emoji-reaction-tip {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0) scale(1);
}
.tip-emoji-reaction:is(:hover, .is-hover) .tip-emoji-reaction-big,
.tip-emoji-reaction:focus-within .tip-emoji-reaction-big {
  animation: tip-emoji-reaction-pop 0.7s cubic-bezier(0.3, 0.7, 0.4, 1) 0.08s both;
}
@keyframes tip-emoji-reaction-pop {
  0% { opacity: 0; transform: scale(0.3) rotate(-25deg); }
  45% { opacity: 1; transform: scale(1.2) rotate(12deg); }
  65% { transform: scale(0.95) rotate(-6deg); }
  82% { transform: scale(1.03) rotate(2deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes tip-emoji-reaction-hop {
  0%, 100% { transform: translateY(0) scale(1); }
  35% { transform: translateY(-0.35em) scale(1.15) rotate(-10deg); }
  65% { transform: translateY(0.05em) scale(0.95, 1.05); }
}

.tip-typing-bubble {
  --c: var(--tip-color, #3b82f6);
  font-size: var(--tip-size, 16px);
  position: relative;
  display: inline-flex;
  margin: 2em 13em 0 0; /* room for the bubble in this preview */
}
.tip-typing-bubble button {
  display: grid;
  place-items: center;
  width: 2.9em;
  height: 2.9em;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 50%, #a855f7));
  box-shadow: 0 0.4em 1em -0.3em color-mix(in srgb, var(--c) 70%, transparent);
  color: #fff;
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.tip-typing-bubble svg {
  width: 1.35em;
  height: 1.35em;
}
.tip-typing-bubble:is(:hover, .is-hover) button { transform: rotate(-8deg) scale(1.06); }
.tip-typing-bubble button:focus-visible {
  outline: 2px solid var(--c);
  outline-offset: 2px;
}
/* the corner nearest the button stays sharp, so the bubble points at it */
.tip-typing-bubble-tip {
  --r: 1.1em 1.1em 1.1em 0.25em;
  position: absolute;
  bottom: calc(100% + 0.3em);
  left: 78%;
  z-index: 10;
  padding: 0.65em 1em;
  border-radius: var(--r);
  /* a tinted fill instead of a border or shadow, which the clip-path would cut */
  background: color-mix(in srgb, var(--c) 14%, #fff);
  color: #0f172a;
  font: 500 0.85em/1.3 system-ui, sans-serif;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform-origin: 0 100%;
}
.tip-typing-bubble-dots {
  position: absolute;
  top: 50%;
  left: 1em;
  display: flex;
  gap: 0.3em;
  transform: translateY(-50%);
}
.tip-typing-bubble-dots i {
  width: 0.45em;
  height: 0.45em;
  border-radius: 50%;
  background: var(--c);
}
.tip-typing-bubble-msg {
  display: block;
  opacity: 0;
}
.tip-typing-bubble:is(:hover, .is-hover) .tip-typing-bubble-tip,
.tip-typing-bubble:focus-within .tip-typing-bubble-tip {
  opacity: 1;
  visibility: visible;
  animation:
    tip-typing-bubble-in 0.35s cubic-bezier(0.3, 1.5, 0.5, 1) both,
    tip-typing-bubble-grow 1.5s cubic-bezier(0.65, 0, 0.35, 1) both;
}
.tip-typing-bubble:is(:hover, .is-hover) .tip-typing-bubble-dots,
.tip-typing-bubble:focus-within .tip-typing-bubble-dots {
  animation: tip-typing-bubble-fade 1.15s linear both;
}
.tip-typing-bubble:is(:hover, .is-hover) .tip-typing-bubble-dots i,
.tip-typing-bubble:focus-within .tip-typing-bubble-dots i {
  animation: tip-typing-bubble-dot 0.6s ease-in-out infinite;
}
.tip-typing-bubble-dots i:nth-child(2) { animation-delay: 0.12s; }
.tip-typing-bubble-dots i:nth-child(3) { animation-delay: 0.24s; }
.tip-typing-bubble:is(:hover, .is-hover) .tip-typing-bubble-msg,
.tip-typing-bubble:focus-within .tip-typing-bubble-msg {
  animation: tip-typing-bubble-msg 1.5s ease both;
}
@keyframes tip-typing-bubble-in {
  0% { opacity: 0; transform: translateY(0.4em) scale(0.5); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
/* first only a dot-sized pill on the left, then the whole bubble */
@keyframes tip-typing-bubble-grow {
  0%, 62% { clip-path: inset(0 calc(100% - 3.95em) 0 0 round var(--r)); }
  100% { clip-path: inset(0 0 0 0 round var(--r)); }
}
@keyframes tip-typing-bubble-fade {
  0%, 85% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes tip-typing-bubble-msg {
  0%, 76% { opacity: 0; transform: translateY(0.3em); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes tip-typing-bubble-dot {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30% { transform: translateY(-0.3em); opacity: 1; }
}

@property --tip-progress-meter-n {
  syntax: "<integer>";
  inherits: true;
  initial-value: 0;
}
.tip-progress-meter {
  --c: var(--tip-color, #3b82f6);
  font-size: var(--tip-size, 16px);
  position: relative;
  display: inline-flex;
  --v: 72;
  margin-bottom: 4.5em; /* room for the tooltip in this preview */
}
.tip-progress-meter button {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.5em 0.95em 0.5em 0.7em;
  border: 1px solid color-mix(in srgb, var(--c) 35%, transparent);
  border-radius: 2em;
  background: color-mix(in srgb, var(--c) 8%, transparent);
  color: inherit;
  font: 600 0.9em/1.2 system-ui, sans-serif;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.tip-progress-meter:is(:hover, .is-hover) button { background: color-mix(in srgb, var(--c) 16%, transparent); }
.tip-progress-meter button:focus-visible {
  outline: 2px solid var(--c);
  outline-offset: 2px;
}
/* a ring gauge: a conic fill with its middle masked out */
.tip-progress-meter-gauge {
  width: 1.2em;
  height: 1.2em;
  border-radius: 50%;
  background: conic-gradient(var(--c) calc(var(--v) * 1%), color-mix(in srgb, var(--c) 22%, transparent) 0);
  -webkit-mask: radial-gradient(circle, transparent 0.32em, #000 0.34em);
  mask: radial-gradient(circle, transparent 0.32em, #000 0.34em);
}
.tip-progress-meter-tip {
  position: absolute;
  top: calc(100% + 0.75em);
  left: 50%;
  z-index: 10;
  box-sizing: border-box;
  width: 14em;
  padding: 0.75em 0.9em 0.8em;
  border-radius: 0.7em;
  background: color-mix(in srgb, var(--c) 14%, #0f172a);
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.07), 0 0.8em 1.6em -0.6em rgb(0 0 0 / 0.55);
  color: rgb(255 255 255 / 0.6);
  font: 500 0.8em/1.4 system-ui, sans-serif;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, -0.4em);
  transition: opacity 0.2s ease, transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0.3s, --tip-progress-meter-n 0s;
}
.tip-progress-meter-tip::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  width: 0.65em;
  height: 0.65em;
  background: inherit;
  transform: translate(-50%, 50%) rotate(45deg);
}
.tip-progress-meter-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  color: #fff;
}
.tip-progress-meter-pct {
  color: color-mix(in srgb, var(--c) 45%, #fff);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  counter-reset: tip-progress-meter-n var(--tip-progress-meter-n);
}
.tip-progress-meter-pct::after { content: counter(tip-progress-meter-n) "%"; }
.tip-progress-meter-bar {
  display: block;
  height: 0.5em;
  margin: 0.5em 0 0.45em;
  overflow: hidden;
  border-radius: 1em;
  background: rgb(255 255 255 / 0.14);
}
.tip-progress-meter-bar::before {
  content: "";
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, color-mix(in srgb, var(--c) 55%, #22d3ee), var(--c));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0s;
}
.tip-progress-meter:is(:hover, .is-hover) .tip-progress-meter-tip,
.tip-progress-meter:focus-within .tip-progress-meter-tip {
  --tip-progress-meter-n: var(--v);
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition: opacity 0.2s ease, transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s, --tip-progress-meter-n 0.9s cubic-bezier(0.3, 0, 0.2, 1) 0.15s;
}
.tip-progress-meter:is(:hover, .is-hover) .tip-progress-meter-bar::before,
.tip-progress-meter:focus-within .tip-progress-meter-bar::before {
  transform: scaleX(calc(var(--v) / 100));
  transition: transform 0.9s cubic-bezier(0.3, 0, 0.2, 1) 0.15s;
}

@property --tip-gradient-border-a {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0deg;
}
.tip-gradient-border {
  --c: var(--tip-color, #3b82f6);
  font-size: var(--tip-size, 16px);
  position: relative;
  display: inline-flex;
}
.tip-gradient-border button {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.6em 1.2em;
  border: 0;
  border-radius: 0.5em;
  background: var(--c);
  color: #fff;
  font: 600 1em system-ui, sans-serif;
  cursor: pointer;
}
.tip-gradient-border svg {
  width: 1.2em;
  height: 1.2em;
}
.tip-gradient-border button:focus-visible {
  outline: 2px solid var(--c);
  outline-offset: 2px;
}
.tip-gradient-border-tip {
  /* declared here, where the angle animates, so the ring picks up every frame */
  --ring: conic-gradient(from var(--tip-gradient-border-a), var(--c), #ec4899, #f59e0b, color-mix(in srgb, var(--c) 40%, #22d3ee), var(--c));
  position: absolute;
  bottom: calc(100% + 0.8em);
  left: 50%;
  z-index: 10;
  padding: 0.65em 1.05em;
  color: #fff;
  font: 500 0.85em/1.3 system-ui, sans-serif;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform-origin: 50% 100%;
  transform: translate(-50%, 0.3em) scale(0.9);
  transition: opacity 0.2s ease, transform 0.35s cubic-bezier(0.3, 1.4, 0.5, 1), visibility 0.35s;
}
/* both layers sit behind the text: first the blurred glow, then the fill with its ring */
.tip-gradient-border-tip::before,
.tip-gradient-border-tip::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 0.6em;
}
.tip-gradient-border-tip::before {
  background: var(--ring);
  filter: blur(0.6em);
  opacity: 0.55;
}
.tip-gradient-border-tip::after {
  border: 0.15em solid transparent;
  background: linear-gradient(color-mix(in srgb, var(--c) 14%, #0f172a), color-mix(in srgb, var(--c) 14%, #0f172a)) padding-box, var(--ring) border-box;
}
.tip-gradient-border:is(:hover, .is-hover) .tip-gradient-border-tip,
.tip-gradient-border:focus-within .tip-gradient-border-tip {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0) scale(1);
  animation: tip-gradient-border-spin 3s linear infinite;
}
@keyframes tip-gradient-border-spin {
  to { --tip-gradient-border-a: 360deg; }
}

.tip-sliding-toolbar {
  --c: var(--tip-color, #3b82f6);
  font-size: var(--tip-size, 16px);
  position: relative;
  display: inline-flex;
  --x: 0;
  margin-bottom: 2.5em; /* room for the tooltip in this preview */
  padding: 0.3em;
  border: 1px solid color-mix(in srgb, var(--c) 25%, transparent);
  border-radius: 0.75em;
  background: color-mix(in srgb, var(--c) 7%, transparent);
}
/* which button is under the pointer or focused: 0, 1, 2 or 3 */
.tip-sliding-toolbar:has(button:nth-of-type(2):is(:hover, .is-hover), button:nth-of-type(2):focus-visible) { --x: 1; }
.tip-sliding-toolbar:has(button:nth-of-type(3):is(:hover, .is-hover), button:nth-of-type(3):focus-visible) { --x: 2; }
.tip-sliding-toolbar:has(button:nth-of-type(4):is(:hover, .is-hover), button:nth-of-type(4):focus-visible) { --x: 3; }
.tip-sliding-toolbar button {
  display: grid;
  place-items: center;
  width: 2.4em;
  height: 2.4em;
  padding: 0;
  border: 0;
  border-radius: 0.5em;
  background: transparent;
  color: color-mix(in srgb, currentColor 70%, transparent);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.tip-sliding-toolbar button:is(:hover, .is-hover) {
  background: color-mix(in srgb, var(--c) 16%, transparent);
  color: var(--c);
}
.tip-sliding-toolbar svg {
  width: 1.2em;
  height: 1.2em;
}
.tip-sliding-toolbar button:focus-visible {
  outline: 2px solid var(--c);
  outline-offset: 2px;
}
.tip-sliding-toolbar-tip {
  position: absolute;
  top: calc(100% + 0.6em);
  /* the first button's center: 0.3em of padding plus half of 2.4em */
  left: 1.5em;
  z-index: 10;
  width: 5.4em;
  padding: 0.15em 0;
  border-radius: 0.45em;
  background: color-mix(in srgb, var(--c) 14%, #0f172a);
  box-shadow: 0 0.5em 1em -0.4em rgb(0 0 0 / 0.5);
  color: #fff;
  font-family: system-ui, sans-serif;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* one button is 2.4em wide, so each step of --x moves 2.4em */
  transform: translate(calc(var(--x) * 2.4em - 50%), -0.3em);
  transition: opacity 0.18s ease, transform 0.35s cubic-bezier(0.3, 1.3, 0.5, 1), visibility 0.35s;
}
.tip-sliding-toolbar-tip::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  width: 0.55em;
  height: 0.55em;
  background: inherit;
  transform: translate(-50%, 50%) rotate(45deg);
}
.tip-sliding-toolbar-labels {
  display: block;
  height: 1.5em;
  overflow: hidden;
}
.tip-sliding-toolbar-labels span {
  display: block;
  font-size: 0.8em;
  font-weight: 600;
  line-height: 1.875; /* 1.5em of the toolbar's size */
  transform: translateY(calc(var(--x) * -100%));
  transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}
.tip-sliding-toolbar:is(:hover, .is-hover) .tip-sliding-toolbar-tip,
.tip-sliding-toolbar:focus-within .tip-sliding-toolbar-tip {
  opacity: 1;
  visibility: visible;
  transform: translate(calc(var(--x) * 2.4em - 50%), 0);
}

.tip-speech-bubble {
  --c: var(--tip-color, #3b82f6);
  font-size: var(--tip-size, 16px);
  position: relative;
  display: inline-flex;
  --ink: #0f172a;
  --shade: color-mix(in srgb, var(--c) 55%, #000);
  margin-right: 12.5em; /* room for the bubble in this preview */
}
.tip-speech-bubble button {
  display: grid;
  place-items: center;
  width: 2.6em;
  height: 2.6em;
  padding: 0;
  border: 0.14em solid var(--ink);
  border-radius: 0.6em;
  background: var(--c);
  box-shadow: 0.22em 0.22em 0 var(--shade);
  color: #fff;
  font: 900 1.1em/1 system-ui, sans-serif;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
/* pressed into its shadow */
.tip-speech-bubble:is(:hover, .is-hover) button {
  box-shadow: 0.08em 0.08em 0 var(--shade);
  transform: translate(0.14em, 0.14em);
}
.tip-speech-bubble button:focus-visible {
  outline: 2px solid var(--c);
  outline-offset: 2px;
}
.tip-speech-bubble-tip {
  position: absolute;
  top: 50%;
  left: calc(100% + 1.4em);
  z-index: 10;
  padding: 0.6em 0.95em;
  border: 0.14em solid var(--ink);
  border-radius: 1em;
  background: #fff;
  box-shadow: 0.25em 0.25em 0 var(--shade);
  color: var(--ink);
  font: 800 0.85em/1.2 system-ui, sans-serif;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* grows out of the tail's point */
  transform-origin: -1em 80%;
  translate: 0 -60%;
  transform: scale(0.2) rotate(-14deg);
  transition: opacity 0.15s ease, visibility 0.15s;
}
/* the tail overlaps the bubble by 0.4em, and its fill hides that bit of outline */
.tip-speech-bubble-tip svg {
  position: absolute;
  top: calc(50% - 0.35em);
  right: calc(100% - 0.4em);
  width: 1.4em;
  height: 1.2em;
  overflow: visible;
}
.tip-speech-bubble-fill { fill: #fff; }
.tip-speech-bubble-line {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.8;
  stroke-linejoin: round;
}
.tip-speech-bubble:is(:hover, .is-hover) .tip-speech-bubble-tip,
.tip-speech-bubble:focus-within .tip-speech-bubble-tip {
  opacity: 1;
  visibility: visible;
  animation: tip-speech-bubble-pop 0.6s cubic-bezier(0.3, 0.7, 0.4, 1) both;
}
@keyframes tip-speech-bubble-pop {
  0% { opacity: 0; transform: scale(0.2) rotate(-14deg); }
  45% { opacity: 1; transform: scale(1.1) rotate(4deg); }
  70% { transform: scale(0.96) rotate(-3deg); }
  100% { opacity: 1; transform: scale(1) rotate(-2deg); }
}

.tip-disabled-button {
  --c: var(--tip-color, #3b82f6);
  font-size: var(--tip-size, 16px);
  position: relative;
  display: inline-flex;
  margin-top: 5em; /* room for the tooltip in this preview */
  border-radius: 0.55em;
  cursor: not-allowed;
}
.tip-disabled-button:focus-visible {
  outline: 2px solid var(--c);
  outline-offset: 2px;
}
.tip-disabled-button button {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.6em 1.2em;
  border: 1px dashed color-mix(in srgb, currentColor 30%, transparent);
  border-radius: 0.5em;
  background: color-mix(in srgb, currentColor 7%, transparent);
  color: color-mix(in srgb, currentColor 50%, transparent);
  font: 600 1em system-ui, sans-serif;
  /* a disabled button never gets pointer events, so let the wrapper take them */
  pointer-events: none;
}
.tip-disabled-button svg {
  width: 1.15em;
  height: 1.15em;
}
.tip-disabled-button button svg { transform-origin: 50% 20%; }
.tip-disabled-button:is(:hover, .is-hover) button svg,
.tip-disabled-button:focus-visible button svg {
  animation: tip-disabled-button-shake 0.45s ease-in-out;
}
.tip-disabled-button-tip {
  position: absolute;
  bottom: calc(100% + 0.7em);
  left: 50%;
  z-index: 10;
  display: grid;
  gap: 0.3em;
  padding: 0.7em 0.9em 0.75em;
  border: 1px solid rgb(15 23 42 / 0.12);
  border-radius: 0.6em;
  background: #fff;
  box-shadow: 0 0.8em 1.6em -0.6em rgb(15 23 42 / 0.35);
  color: #334155;
  font: 500 0.8em/1.3 system-ui, sans-serif;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, 0.4em);
  transition: opacity 0.18s ease, transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0.3s;
}
.tip-disabled-button-tip::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  box-sizing: border-box;
  width: 0.75em;
  height: 0.75em;
  border: inherit;
  border-top: 0;
  border-left: 0;
  border-radius: 0 0 0.12em;
  background: inherit;
  transform: translate(-50%, -55%) rotate(45deg);
}
.tip-disabled-button-tip b {
  margin-bottom: 0.15em;
  color: #0f172a;
  font-weight: 700;
}
.tip-disabled-button-done,
.tip-disabled-button-todo {
  display: flex;
  align-items: center;
  gap: 0.45em;
}
.tip-disabled-button-done {
  color: #94a3b8;
  text-decoration: line-through;
}
.tip-disabled-button-done svg { color: var(--c); }
.tip-disabled-button-todo { font-weight: 600; }
.tip-disabled-button-todo svg { color: #94a3b8; }
.tip-disabled-button:is(:hover, .is-hover) .tip-disabled-button-tip,
.tip-disabled-button:focus-within .tip-disabled-button-tip {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
@keyframes tip-disabled-button-shake {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(-14deg); }
  40% { transform: rotate(11deg); }
  60% { transform: rotate(-7deg); }
  80% { transform: rotate(3deg); }
}

.tip-glass {
  --c: var(--tip-color, #3b82f6);
  font-size: var(--tip-size, 16px);
  position: relative;
  display: inline-flex;
  box-sizing: border-box;
  justify-content: center;
  align-items: center;
  width: 17em;
  height: 9.5em;
  padding-top: 2.2em;
  overflow: hidden;
  border-radius: 1em;
  isolation: isolate;
}
/* the thumbnail: soft color blobs standing in for a video frame */
.tip-glass::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 22% 30%, color-mix(in srgb, var(--c) 90%, #fff) 0 18%, transparent 42%),
    radial-gradient(circle at 78% 25%, #f472b6 0 14%, transparent 40%),
    radial-gradient(circle at 60% 85%, #fbbf24 0 12%, transparent 40%),
    linear-gradient(135deg, color-mix(in srgb, var(--c) 60%, #1e1b4b), #312e81);
  transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.tip-glass:is(:hover, .is-hover)::before,
.tip-glass:focus-within::before { transform: scale(1.08); }
.tip-glass button {
  display: grid;
  place-items: center;
  width: 3em;
  height: 3em;
  padding: 0 0 0 0.2em;
  border: 1px solid rgb(255 255 255 / 0.5);
  border-radius: 50%;
  background: rgb(255 255 255 / 0.9);
  box-shadow: 0 0.5em 1.2em -0.3em rgb(0 0 0 / 0.4);
  color: var(--c);
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.tip-glass:is(:hover, .is-hover) button { transform: scale(1.08); }
.tip-glass svg {
  width: 1.3em;
  height: 1.3em;
}
.tip-glass button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.tip-glass-tip {
  position: absolute;
  /* the button's top sits 0.4em above the middle; 0.6em of gap on top of that, in this box's 0.8em font */
  bottom: calc(50% + 1.25em);
  left: 50%;
  z-index: 10;
  padding: 0.5em 0.9em;
  border: 1px solid rgb(255 255 255 / 0.35);
  border-radius: 2em;
  background: rgb(255 255 255 / 0.16);
  -webkit-backdrop-filter: blur(0.7em) saturate(1.6);
  backdrop-filter: blur(0.7em) saturate(1.6);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.35), 0 0.5em 1.2em -0.4em rgb(0 0 0 / 0.35);
  color: #fff;
  font: 600 0.8em/1.3 system-ui, sans-serif;
  text-shadow: 0 1px 1px rgb(0 0 0 / 0.2);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, 0.5em) scale(0.94);
  transition: opacity 0.25s ease, transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0.4s;
}
.tip-glass:is(:hover, .is-hover) .tip-glass-tip,
.tip-glass:focus-within .tip-glass-tip {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0) scale(1);
}

.tip-bar-chart {
  --c: var(--tip-color, #3b82f6);
  font-size: var(--tip-size, 16px);
  position: relative;
  display: inline-flex;
  align-items: flex-end;
  gap: 0.35em;
  margin-top: 1em; /* room for the tooltip in this preview */
  padding: 0 0.4em 1.5em;
  /* the baseline under the bars */
  background: linear-gradient(color-mix(in srgb, var(--c) 35%, transparent), color-mix(in srgb, var(--c) 35%, transparent)) 0 calc(100% - 1.5em) / 100% 1px no-repeat;
  font-family: system-ui, sans-serif;
}
/* the whole column is the hover target; the visible bar is ::before */
.tip-bar-chart-bar {
  position: relative;
  width: 1.8em;
  height: 7em;
  border-radius: 0.4em 0.4em 0 0;
  outline: none;
  transition: background-color 0.2s ease;
}
.tip-bar-chart-bar::before {
  content: "";
  position: absolute;
  right: 0.25em;
  bottom: 0;
  left: 0.25em;
  height: var(--v);
  border-radius: 0.3em 0.3em 0 0;
  background: var(--c);
  transition: opacity 0.25s ease, filter 0.25s ease;
}
.tip-bar-chart-bar::after {
  content: attr(data-day);
  position: absolute;
  top: calc(100% + 0.4em);
  left: 50%;
  color: color-mix(in srgb, currentColor 50%, transparent);
  font-size: 0.7em;
  font-weight: 600;
  transform: translateX(-50%);
}
.tip-bar-chart-bar:focus-visible { background: color-mix(in srgb, var(--c) 10%, transparent); }
.tip-bar-chart-bar:focus-visible::before { outline: 2px solid var(--c); outline-offset: 2px; }
.tip-bar-chart-tip {
  position: absolute;
  bottom: calc(var(--v) + 0.6em);
  left: 50%;
  z-index: 10;
  padding: 0.35em 0.6em;
  border-radius: 0.4em;
  background: color-mix(in srgb, var(--c) 14%, #0f172a);
  box-shadow: 0 0.4em 0.8em -0.3em rgb(0 0 0 / 0.5);
  color: rgb(255 255 255 / 0.65);
  font-size: 0.75em;
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform-origin: 50% 100%;
  transform: translate(-50%, 0.3em) scale(0.9);
  transition: opacity 0.15s ease, transform 0.25s cubic-bezier(0.3, 1.4, 0.5, 1), visibility 0.25s;
}
.tip-bar-chart-tip b {
  margin-left: 0.2em;
  color: #fff;
  font-weight: 700;
}
.tip-bar-chart-tip::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  width: 0.6em;
  height: 0.6em;
  background: inherit;
  transform: translate(-50%, -50%) rotate(45deg);
}
/* once the chart is hovered or focused, every bar dims except the active one */
.tip-bar-chart:is(:hover, .is-hover) .tip-bar-chart-bar::before,
.tip-bar-chart:focus-within .tip-bar-chart-bar::before { opacity: 0.35; }
.tip-bar-chart .tip-bar-chart-bar:is(:hover, .is-hover)::before,
.tip-bar-chart .tip-bar-chart-bar:focus-visible::before,
.tip-bar-chart:is(:hover, .is-hover):not(:has(.tip-bar-chart-bar:is(:hover, .is-hover), .tip-bar-chart-bar:focus-visible)) .tip-bar-chart-bar:nth-child(4)::before {
  opacity: 1;
  filter: saturate(1.3) brightness(1.05);
}
.tip-bar-chart-bar:is(:hover, .is-hover) .tip-bar-chart-tip,
.tip-bar-chart-bar:focus-visible .tip-bar-chart-tip,
.tip-bar-chart:is(:hover, .is-hover):not(:has(.tip-bar-chart-bar:is(:hover, .is-hover), .tip-bar-chart-bar:focus-visible)) .tip-bar-chart-bar:nth-child(4) .tip-bar-chart-tip {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0) scale(1);
}