@charset "UTF-8";@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");.tiptap-tooltip {
  --tt-tooltip-bg: var(--tt-gray-light-900);
  --tt-tooltip-text: var(--white);
  --tt-kbd: var(--tt-gray-dark-a-400);
}
.dark .tiptap-tooltip {
  --tt-tooltip-bg: var(--white);
  --tt-tooltip-text: var(--tt-gray-light-600);
  --tt-kbd: var(--tt-gray-light-a-400);
}

.tiptap-tooltip {
  z-index: 200;
  overflow: hidden;
  border-radius: var(--tt-radius-md, 0.375rem);
  background-color: var(--tt-tooltip-bg);
  padding: 0.375rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--tt-tooltip-text);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  text-align: center;
}
.tiptap-tooltip kbd {
  display: inline-block;
  text-align: center;
  vertical-align: baseline;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  text-transform: capitalize;
  color: var(--tt-kbd);
}.tiptap-button {
  /************************************************** 
      Default button background color 
  **************************************************/
  /* Light mode */
  --tt-button-default-bg-color: var(--tt-gray-light-a-100);
  --tt-button-hover-bg-color: var(--tt-gray-light-200);
  --tt-button-active-bg-color: var(--tt-gray-light-a-200);
  --tt-button-active-bg-color-emphasized: var(
    --tt-brand-color-100
  );
  --tt-button-active-bg-color-subdued: var(
    --tt-gray-light-a-200
  );
  --tt-button-active-hover-bg-color: var(--tt-gray-light-300);
  --tt-button-active-hover-bg-color-emphasized: var(
    --tt-brand-color-200
  );
  --tt-button-active-hover-bg-color-subdued: var(
    --tt-gray-light-a-300
  );
  --tt-button-disabled-bg-color: var(--tt-gray-light-a-50);
  /* Dark mode */
}
.dark .tiptap-button {
  --tt-button-default-bg-color: var(--tt-gray-dark-a-100);
  --tt-button-hover-bg-color: var(--tt-gray-dark-200);
  --tt-button-active-bg-color: var(--tt-gray-dark-a-200);
  --tt-button-active-bg-color-emphasized: var(
    --tt-brand-color-900
  );
  --tt-button-active-bg-color-subdued: var(
    --tt-gray-dark-a-200
  );
  --tt-button-active-hover-bg-color: var(--tt-gray-dark-300);
  --tt-button-active-hover-bg-color-emphasized: var(
    --tt-brand-color-800
  );
  --tt-button-active-hover-bg-color-subdued: var(
    --tt-gray-dark-a-300
  );
  --tt-button-disabled-bg-color: var(--tt-gray-dark-a-50);
}
.tiptap-button {
  /************************************************** 
      Default button text color 
  **************************************************/
  /* Light mode */
  --tt-button-default-text-color: var(--tt-gray-light-a-600);
  --tt-button-hover-text-color: var(--tt-gray-light-a-900);
  --tt-button-active-text-color: var(--tt-gray-light-a-900);
  --tt-button-active-text-color-emphasized: var(--tt-gray-light-a-900);
  --tt-button-active-text-color-subdued: var(--tt-gray-light-a-900);
  --tt-button-disabled-text-color: var(--tt-gray-light-a-400);
  /* Dark mode */
}
.dark .tiptap-button {
  --tt-button-default-text-color: var(--tt-gray-dark-a-600);
  --tt-button-hover-text-color: var(--tt-gray-dark-a-900);
  --tt-button-active-text-color: var(--tt-gray-dark-a-900);
  --tt-button-active-text-color-emphasized: var(--tt-gray-dark-a-900);
  --tt-button-active-text-color-subdued: var(--tt-gray-dark-a-900);
  --tt-button-disabled-text-color: var(--tt-gray-dark-a-300);
}
.tiptap-button {
  /************************************************** 
      Default button icon color 
  **************************************************/
  /* Light mode */
  --tt-button-default-icon-color: var(--tt-gray-light-a-600);
  --tt-button-hover-icon-color: var(--tt-gray-light-a-900);
  --tt-button-active-icon-color: var(--tt-brand-color-500);
  --tt-button-active-icon-color-emphasized: var(--tt-brand-color-600);
  --tt-button-active-icon-color-subdued: var(--tt-gray-light-a-900);
  --tt-button-disabled-icon-color: var(--tt-gray-light-a-400);
  /* Dark mode */
}
.dark .tiptap-button {
  --tt-button-default-icon-color: var(--tt-gray-dark-a-600);
  --tt-button-hover-icon-color: var(--tt-gray-dark-a-900);
  --tt-button-active-icon-color: var(--tt-brand-color-400);
  --tt-button-active-icon-color-emphasized: var(--tt-brand-color-400);
  --tt-button-active-icon-color-subdued: var(--tt-gray-dark-a-900);
  --tt-button-disabled-icon-color: var(--tt-gray-dark-a-400);
}
.tiptap-button {
  /************************************************** 
      Default button subicon color 
  **************************************************/
  /* Light mode */
  --tt-button-default-icon-sub-color: var(--tt-gray-light-a-400);
  --tt-button-hover-icon-sub-color: var(--tt-gray-light-a-500);
  --tt-button-active-icon-sub-color: var(--tt-gray-light-a-400);
  --tt-button-active-icon-sub-color-emphasized: var(--tt-gray-light-a-500);
  --tt-button-active-icon-sub-color-subdued: var(--tt-gray-light-a-400);
  --tt-button-disabled-icon-sub-color: var(--tt-gray-light-a-100);
  /* Dark mode */
}
.dark .tiptap-button {
  --tt-button-default-icon-sub-color: var(--tt-gray-dark-a-300);
  --tt-button-hover-icon-sub-color: var(--tt-gray-dark-a-400);
  --tt-button-active-icon-sub-color: var(--tt-gray-dark-a-300);
  --tt-button-active-icon-sub-color-emphasized: var(--tt-gray-dark-a-400);
  --tt-button-active-icon-sub-color-subdued: var(--tt-gray-dark-a-300);
  --tt-button-disabled-icon-sub-color: var(--tt-gray-dark-a-100);
}
.tiptap-button {
  /************************************************** 
      Default button dropdown / arrows color 
  **************************************************/
  /* Light mode */
  --tt-button-default-dropdown-arrows-color: var(--tt-gray-light-a-600);
  --tt-button-hover-dropdown-arrows-color: var(--tt-gray-light-a-700);
  --tt-button-active-dropdown-arrows-color: var(--tt-gray-light-a-600);
  --tt-button-active-dropdown-arrows-color-emphasized: var(
    --tt-gray-light-a-700
  );
  --tt-button-active-dropdown-arrows-color-subdued: var(--tt-gray-light-a-600);
  --tt-button-disabled-dropdown-arrows-color: var(--tt-gray-light-a-400);
  /* Dark mode */
}
.dark .tiptap-button {
  --tt-button-default-dropdown-arrows-color: var(--tt-gray-dark-a-600);
  --tt-button-hover-dropdown-arrows-color: var(--tt-gray-dark-a-700);
  --tt-button-active-dropdown-arrows-color: var(--tt-gray-dark-a-600);
  --tt-button-active-dropdown-arrows-color-emphasized: var(
    --tt-gray-dark-a-700
  );
  --tt-button-active-dropdown-arrows-color-subdued: var(--tt-gray-dark-a-600);
  --tt-button-disabled-dropdown-arrows-color: var(--tt-gray-dark-a-400);
}
.tiptap-button {
  /* ----------------------------------------------------------------
      --------------------------- GHOST BUTTON --------------------------
      ---------------------------------------------------------------- */
}
.tiptap-button[data-style=ghost] {
  /************************************************** 
      Ghost button background color 
  **************************************************/
  /* Light mode */
  --tt-button-default-bg-color: var(--transparent);
  --tt-button-hover-bg-color: var(--tt-gray-light-200);
  --tt-button-active-bg-color: var(--tt-gray-light-a-100);
  --tt-button-active-bg-color-emphasized: var(
    --tt-brand-color-100
  );
  --tt-button-active-bg-color-subdued: var(
    --tt-gray-light-a-100
  );
  --tt-button-active-hover-bg-color: var(--tt-gray-light-200);
  --tt-button-active-hover-bg-color-emphasized: var(
    --tt-brand-color-200
  );
  --tt-button-active-hover-bg-color-subdued: var(
    --tt-gray-light-a-200
  );
  --tt-button-disabled-bg-color: var(--transparent);
  /* Dark mode */
}
.dark .tiptap-button[data-style=ghost] {
  --tt-button-default-bg-color: var(--transparent);
  --tt-button-hover-bg-color: var(--tt-gray-dark-200);
  --tt-button-active-bg-color: var(--tt-gray-dark-a-100);
  --tt-button-active-bg-color-emphasized: var(
    --tt-brand-color-900
  );
  --tt-button-active-bg-color-subdued: var(
    --tt-gray-dark-a-100
  );
  --tt-button-active-hover-bg-color: var(--tt-gray-dark-200);
  --tt-button-active-hover-bg-color-emphasized: var(
    --tt-brand-color-800
  );
  --tt-button-active-hover-bg-color-subdued: var(
    --tt-gray-dark-a-200
  );
  --tt-button-disabled-bg-color: var(--transparent);
}
.tiptap-button[data-style=ghost] {
  /************************************************** 
      Ghost button text color 
  **************************************************/
  /* Light mode */
  --tt-button-default-text-color: var(--tt-gray-light-a-600);
  --tt-button-hover-text-color: var(--tt-gray-light-a-900);
  --tt-button-active-text-color: var(--tt-gray-light-a-900);
  --tt-button-active-text-color-emphasized: var(--tt-gray-light-a-900);
  --tt-button-active-text-color-subdued: var(--tt-gray-light-a-900);
  --tt-button-disabled-text-color: var(--tt-gray-light-a-400);
  /* Dark mode */
}
.dark .tiptap-button[data-style=ghost] {
  --tt-button-default-text-color: var(--tt-gray-dark-a-600);
  --tt-button-hover-text-color: var(--tt-gray-dark-a-900);
  --tt-button-active-text-color: var(--tt-gray-dark-a-900);
  --tt-button-active-text-color-emphasized: var(--tt-gray-dark-a-900);
  --tt-button-active-text-color-subdued: var(--tt-gray-dark-a-900);
  --tt-button-disabled-text-color: var(--tt-gray-dark-a-300);
}
.tiptap-button[data-style=ghost] {
  /************************************************** 
      Ghost button icon color 
  **************************************************/
  /* Light mode */
  --tt-button-default-icon-color: var(--tt-gray-light-a-600);
  --tt-button-hover-icon-color: var(--tt-gray-light-a-900);
  --tt-button-active-icon-color: var(--tt-brand-color-500);
  --tt-button-active-icon-color-emphasized: var(--tt-brand-color-600);
  --tt-button-active-icon-color-subdued: var(--tt-gray-light-a-900);
  --tt-button-disabled-icon-color: var(--tt-gray-light-a-400);
  /* Dark mode */
}
.dark .tiptap-button[data-style=ghost] {
  --tt-button-default-icon-color: var(--tt-gray-dark-a-600);
  --tt-button-hover-icon-color: var(--tt-gray-dark-a-900);
  --tt-button-active-icon-color: var(--tt-brand-color-400);
  --tt-button-active-icon-color-emphasized: var(--tt-brand-color-300);
  --tt-button-active-icon-color-subdued: var(--tt-gray-dark-a-900);
  --tt-button-disabled-icon-color: var(--tt-gray-dark-a-400);
}
.tiptap-button[data-style=ghost] {
  /************************************************** 
      Ghost button subicon color 
  **************************************************/
  /* Light mode */
  --tt-button-default-icon-sub-color: var(--tt-gray-light-a-400);
  --tt-button-hover-icon-sub-color: var(--tt-gray-light-a-500);
  --tt-button-active-icon-sub-color: var(--tt-gray-light-a-400);
  --tt-button-active-icon-sub-color-emphasized: var(--tt-gray-light-a-500);
  --tt-button-active-icon-sub-color-subdued: var(--tt-gray-light-a-400);
  --tt-button-disabled-icon-sub-color: var(--tt-gray-light-a-100);
  /* Dark mode */
}
.dark .tiptap-button[data-style=ghost] {
  --tt-button-default-icon-sub-color: var(--tt-gray-dark-a-300);
  --tt-button-hover-icon-sub-color: var(--tt-gray-dark-a-400);
  --tt-button-active-icon-sub-color: var(--tt-gray-dark-a-300);
  --tt-button-active-icon-sub-color-emphasized: var(--tt-gray-dark-a-400);
  --tt-button-active-icon-sub-color-subdued: var(--tt-gray-dark-a-300);
  --tt-button-disabled-icon-sub-color: var(--tt-gray-dark-a-100);
}
.tiptap-button[data-style=ghost] {
  /************************************************** 
      Ghost button dropdown / arrows color 
  **************************************************/
  /* Light mode */
  --tt-button-default-dropdown-arrows-color: var(--tt-gray-light-a-600);
  --tt-button-hover-dropdown-arrows-color: var(--tt-gray-light-a-700);
  --tt-button-active-dropdown-arrows-color: var(--tt-gray-light-a-600);
  --tt-button-active-dropdown-arrows-color-emphasized: var(
    --tt-gray-light-a-700
  );
  --tt-button-active-dropdown-arrows-color-subdued: var(
    --tt-gray-light-a-600
  );
  --tt-button-disabled-dropdown-arrows-color: var(--tt-gray-light-a-400);
  /* Dark mode */
}
.dark .tiptap-button[data-style=ghost] {
  --tt-button-default-dropdown-arrows-color: var(--tt-gray-dark-a-600);
  --tt-button-hover-dropdown-arrows-color: var(--tt-gray-dark-a-700);
  --tt-button-active-dropdown-arrows-color: var(--tt-gray-dark-a-600);
  --tt-button-active-dropdown-arrows-color-emphasized: var(
    --tt-gray-dark-a-700
  );
  --tt-button-active-dropdown-arrows-color-subdued: var(
    --tt-gray-dark-a-600
  );
  --tt-button-disabled-dropdown-arrows-color: var(--tt-gray-dark-a-400);
}
.tiptap-button {
  /* ----------------------------------------------------------------
      -------------------------- PRIMARY BUTTON -------------------------
      ---------------------------------------------------------------- */
}
.tiptap-button[data-style=primary] {
  /************************************************** 
      Primary button background color 
  **************************************************/
  /* Light mode */
  --tt-button-default-bg-color: var(--tt-brand-color-500);
  --tt-button-hover-bg-color: var(--tt-brand-color-600);
  --tt-button-active-bg-color: var(--tt-brand-color-100);
  --tt-button-active-bg-color-emphasized: var(
    --tt-brand-color-100
  );
  --tt-button-active-bg-color-subdued: var(
    --tt-brand-color-100
  );
  --tt-button-active-hover-bg-color: var(--tt-brand-color-200);
  --tt-button-active-hover-bg-color-emphasized: var(
    --tt-brand-color-200
  );
  --tt-button-active-hover-bg-color-subdued: var(
    --tt-brand-color-200
  );
  --tt-button-disabled-bg-color: var(--tt-gray-light-a-100);
  /* Dark mode */
}
.dark .tiptap-button[data-style=primary] {
  --tt-button-default-bg-color: var(--tt-brand-color-500);
  --tt-button-hover-bg-color: var(--tt-brand-color-600);
  --tt-button-active-bg-color: var(--tt-brand-color-900);
  --tt-button-active-bg-color-emphasized: var(
    --tt-brand-color-900
  );
  --tt-button-active-bg-color-subdued: var(
    --tt-brand-color-900
  );
  --tt-button-active-hover-bg-color: var(--tt-brand-color-800);
  --tt-button-active-hover-bg-color-emphasized: var(
    --tt-brand-color-800
  );
  --tt-button-active-hover-bg-color-subdued: var(
    --tt-brand-color-800
  );
  --tt-button-disabled-bg-color: var(--tt-gray-dark-a-100);
}
.tiptap-button[data-style=primary] {
  /************************************************** 
      Primary button text color 
  **************************************************/
  /* Light mode */
  --tt-button-default-text-color: var(--white);
  --tt-button-hover-text-color: var(--white);
  --tt-button-active-text-color: var(--tt-gray-light-a-900);
  --tt-button-active-text-color-emphasized: var(--tt-gray-light-a-900);
  --tt-button-active-text-color-subdued: var(--tt-gray-light-a-900);
  --tt-button-disabled-text-color: var(--tt-gray-light-a-400);
  /* Dark mode */
}
.dark .tiptap-button[data-style=primary] {
  --tt-button-default-text-color: var(--white);
  --tt-button-hover-text-color: var(--white);
  --tt-button-active-text-color: var(--tt-gray-dark-a-900);
  --tt-button-active-text-color-emphasized: var(--tt-gray-dark-a-900);
  --tt-button-active-text-color-subdued: var(--tt-gray-dark-a-900);
  --tt-button-disabled-text-color: var(--tt-gray-dark-a-300);
}
.tiptap-button[data-style=primary] {
  /************************************************** 
      Primary button icon color 
  **************************************************/
  /* Light mode */
  --tt-button-default-icon-color: var(--white);
  --tt-button-hover-icon-color: var(--white);
  --tt-button-active-icon-color: var(--tt-brand-color-600);
  --tt-button-active-icon-color-emphasized: var(--tt-brand-color-600);
  --tt-button-active-icon-color-subdued: var(--tt-brand-color-600);
  --tt-button-disabled-icon-color: var(--tt-gray-light-a-400);
  /* Dark mode */
}
.dark .tiptap-button[data-style=primary] {
  --tt-button-default-icon-color: var(--white);
  --tt-button-hover-icon-color: var(--white);
  --tt-button-active-icon-color: var(--tt-brand-color-400);
  --tt-button-active-icon-color-emphasized: var(--tt-brand-color-400);
  --tt-button-active-icon-color-subdued: var(--tt-brand-color-400);
  --tt-button-disabled-icon-color: var(--tt-gray-dark-a-300);
}
.tiptap-button[data-style=primary] {
  /************************************************** 
      Primary button subicon color 
  **************************************************/
  /* Light mode */
  --tt-button-default-icon-sub-color: var(--tt-gray-dark-a-500);
  --tt-button-hover-icon-sub-color: var(--tt-gray-dark-a-500);
  --tt-button-active-icon-sub-color: var(--tt-gray-light-a-500);
  --tt-button-active-icon-sub-color-emphasized: var(--tt-gray-light-a-500);
  --tt-button-active-icon-sub-color-subdued: var(--tt-gray-light-a-500);
  --tt-button-disabled-icon-sub-color: var(--tt-gray-light-a-100);
  /* Dark mode */
}
.dark .tiptap-button[data-style=primary] {
  --tt-button-default-icon-sub-color: var(--tt-gray-dark-a-400);
  --tt-button-hover-icon-sub-color: var(--tt-gray-dark-a-500);
  --tt-button-active-icon-sub-color: var(--tt-gray-dark-a-300);
  --tt-button-active-icon-sub-color-emphasized: var(--tt-gray-dark-a-400);
  --tt-button-active-icon-sub-color-subdued: var(--tt-gray-dark-a-300);
  --tt-button-disabled-icon-sub-color: var(--tt-gray-dark-a-100);
}
.tiptap-button[data-style=primary] {
  /************************************************** 
      Primary button dropdown / arrows color 
  **************************************************/
  /* Light mode */
  --tt-button-default-dropdown-arrows-color: var(--white);
  --tt-button-hover-dropdown-arrows-color: var(--white);
  --tt-button-active-dropdown-arrows-color: var(--tt-gray-light-a-700);
  --tt-button-active-dropdown-arrows-color-emphasized: var(
    --tt-gray-light-a-700
  );
  --tt-button-active-dropdown-arrows-color-subdued: var(
    --tt-gray-light-a-700
  );
  --tt-button-disabled-dropdown-arrows-color: var(--tt-gray-light-a-400);
  /* Dark mode */
}
.dark .tiptap-button[data-style=primary] {
  --tt-button-default-dropdown-arrows-color: var(--white);
  --tt-button-hover-dropdown-arrows-color: var(--white);
  --tt-button-active-dropdown-arrows-color: var(--tt-gray-dark-a-600);
  --tt-button-active-dropdown-arrows-color-emphasized: var(
    --tt-gray-dark-a-600
  );
  --tt-button-active-dropdown-arrows-color-subdued: var(
    --tt-gray-dark-a-600
  );
  --tt-button-disabled-dropdown-arrows-color: var(--tt-gray-dark-a-400);
}.tiptap-button-group {
  position: relative;
  display: flex;
  vertical-align: middle;
}
.tiptap-button-group[data-orientation=vertical] {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-width: max-content;
}
.tiptap-button-group[data-orientation=vertical] > .tiptap-button {
  width: 100%;
}
.tiptap-button-group[data-orientation=horizontal] {
  gap: 0.125rem;
  flex-direction: row;
  align-items: center;
}.tiptap-button {
  font-size: 0.875rem;
  font-weight: 500;
  font-feature-settings: "salt" on, "cv01" on;
  line-height: 1.15;
  height: 2rem;
  min-width: 2rem;
  border: none;
  padding: 0.5rem;
  gap: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--tt-radius-lg, 0.75rem);
  transition-property: background, color, opacity;
  transition-duration: var(--tt-transition-duration-default);
  transition-timing-function: var(--tt-transition-easing-default);
}
.tiptap-button:focus-visible {
  outline: none;
}
.tiptap-button[data-highlighted=true], .tiptap-button[data-focus-visible=true] {
  background-color: var(--tt-button-hover-bg-color);
  color: var(--tt-button-hover-text-color);
}
.tiptap-button[data-weight=small] {
  width: 1.5rem;
  min-width: 1.5rem;
  padding-right: 0;
  padding-left: 0;
}
.tiptap-button {
  /* button size large */
}
.tiptap-button[data-size=large] {
  font-size: 0.9375rem;
  height: 2.375rem;
  min-width: 2.375rem;
  padding: 0.625rem;
}
.tiptap-button {
  /* button size small */
}
.tiptap-button[data-size=small] {
  font-size: 0.75rem;
  line-height: 1.2;
  height: 1.5rem;
  min-width: 1.5rem;
  padding: 0.3125rem;
  border-radius: var(--tt-radius-md, 0.5rem);
}
.tiptap-button {
  /* trim / expand text of the button */
}
.tiptap-button .tiptap-button-text {
  padding: 0 0.125rem;
  flex-grow: 1;
  text-align: left;
  line-height: 1.5rem;
}
.tiptap-button[data-text-trim=on] .tiptap-button-text {
  text-overflow: ellipsis;
  overflow: hidden;
}
.tiptap-button {
  /* global icon settings */
}
.tiptap-button .tiptap-button-icon,
.tiptap-button .tiptap-button-icon-sub,
.tiptap-button .tiptap-button-dropdown-arrows,
.tiptap-button .tiptap-button-dropdown-small {
  flex-shrink: 0;
}
.tiptap-button {
  /* standard icon, what is used */
}
.tiptap-button .tiptap-button-icon {
  width: 1rem;
  height: 1rem;
}
.tiptap-button[data-size=large] .tiptap-button-icon {
  width: 1.125rem;
  height: 1.125rem;
}
.tiptap-button[data-size=small] .tiptap-button-icon {
  width: 0.875rem;
  height: 0.875rem;
}
.tiptap-button {
  /* if 2 icons are used and this icon should be more subtle */
}
.tiptap-button .tiptap-button-icon-sub {
  width: 1rem;
  height: 1rem;
}
.tiptap-button[data-size=large] .tiptap-button-icon-sub {
  width: 1.125rem;
  height: 1.125rem;
}
.tiptap-button[data-size=small] .tiptap-button-icon-sub {
  width: 0.875rem;
  height: 0.875rem;
}
.tiptap-button {
  /* dropdown menus or arrows that are slightly smaller */
}
.tiptap-button .tiptap-button-dropdown-arrows {
  width: 0.75rem;
  height: 0.75rem;
}
.tiptap-button[data-size=large] .tiptap-button-dropdown-arrows {
  width: 0.875rem;
  height: 0.875rem;
}
.tiptap-button[data-size=small] .tiptap-button-dropdown-arrows {
  width: 0.625rem;
  height: 0.625rem;
}
.tiptap-button {
  /* dropdown menu for icon buttons only */
}
.tiptap-button .tiptap-button-dropdown-small {
  width: 0.625rem;
  height: 0.625rem;
}
.tiptap-button[data-size=large] .tiptap-button-dropdown-small {
  width: 0.75rem;
  height: 0.75rem;
}
.tiptap-button[data-size=small] .tiptap-button-dropdown-small {
  width: 0.5rem;
  height: 0.5rem;
}
.tiptap-button {
  /* button only has icons */
}
.tiptap-button:has(> svg):not(:has(> :not(svg))) {
  gap: 0.125rem;
}
.tiptap-button:has(> svg):not(:has(> :not(svg)))[data-size=large], .tiptap-button:has(> svg):not(:has(> :not(svg)))[data-size=small] {
  gap: 0.125rem;
}
.tiptap-button {
  /* button only has 2 icons and one of them is dropdown small */
}
.tiptap-button:has(> svg:nth-of-type(2)):has(> .tiptap-button-dropdown-small):not(:has(> svg:nth-of-type(3))):not(:has(> .tiptap-button-text)) {
  gap: 0;
  padding-right: 0.25rem;
}
.tiptap-button:has(> svg:nth-of-type(2)):has(> .tiptap-button-dropdown-small):not(:has(> svg:nth-of-type(3))):not(:has(> .tiptap-button-text))[data-size=large] {
  padding-right: 0.375rem;
}
.tiptap-button:has(> svg:nth-of-type(2)):has(> .tiptap-button-dropdown-small):not(:has(> svg:nth-of-type(3))):not(:has(> .tiptap-button-text))[data-size=small] {
  padding-right: 0.25rem;
}
.tiptap-button {
  /* Emoji is used in a button */
}
.tiptap-button .tiptap-button-emoji {
  width: 1rem;
  display: flex;
  justify-content: center;
}
.tiptap-button[data-size=large] .tiptap-button-emoji {
  width: 1.125rem;
}
.tiptap-button[data-size=small] .tiptap-button-emoji {
  width: 0.875rem;
}

/* --------------------------------------------
----------- BUTTON COLOR SETTINGS -------------
-------------------------------------------- */
.tiptap-button {
  background-color: var(--tt-button-default-bg-color);
  color: var(--tt-button-default-text-color);
}
.tiptap-button .tiptap-button-icon {
  color: var(--tt-button-default-icon-color);
}
.tiptap-button .tiptap-button-icon-sub {
  color: var(--tt-button-default-icon-sub-color);
}
.tiptap-button .tiptap-button-dropdown-arrows {
  color: var(--tt-button-default-dropdown-arrows-color);
}
.tiptap-button .tiptap-button-dropdown-small {
  color: var(--tt-button-default-dropdown-arrows-color);
}
.tiptap-button {
  /* hover state of a button */
}
.tiptap-button:hover:not([data-active-item=true]):not([disabled]), .tiptap-button[data-active-item=true]:not([disabled]), .tiptap-button[data-highlighted]:not([disabled]):not([data-highlighted=false]) {
  background-color: var(--tt-button-hover-bg-color);
  color: var(--tt-button-hover-text-color);
}
.tiptap-button:hover:not([data-active-item=true]):not([disabled]) .tiptap-button-icon, .tiptap-button[data-active-item=true]:not([disabled]) .tiptap-button-icon, .tiptap-button[data-highlighted]:not([disabled]):not([data-highlighted=false]) .tiptap-button-icon {
  color: var(--tt-button-hover-icon-color);
}
.tiptap-button:hover:not([data-active-item=true]):not([disabled]) .tiptap-button-icon-sub, .tiptap-button[data-active-item=true]:not([disabled]) .tiptap-button-icon-sub, .tiptap-button[data-highlighted]:not([disabled]):not([data-highlighted=false]) .tiptap-button-icon-sub {
  color: var(--tt-button-hover-icon-sub-color);
}
.tiptap-button:hover:not([data-active-item=true]):not([disabled]) .tiptap-button-dropdown-arrows,
.tiptap-button:hover:not([data-active-item=true]):not([disabled]) .tiptap-button-dropdown-small, .tiptap-button[data-active-item=true]:not([disabled]) .tiptap-button-dropdown-arrows,
.tiptap-button[data-active-item=true]:not([disabled]) .tiptap-button-dropdown-small, .tiptap-button[data-highlighted]:not([disabled]):not([data-highlighted=false]) .tiptap-button-dropdown-arrows,
.tiptap-button[data-highlighted]:not([disabled]):not([data-highlighted=false]) .tiptap-button-dropdown-small {
  color: var(--tt-button-hover-dropdown-arrows-color);
}
.tiptap-button {
  /* Active state of a button */
}
.tiptap-button[data-active-state=on]:not([disabled]), .tiptap-button[data-state=open]:not([disabled]) {
  background-color: var(--tt-button-active-bg-color);
  color: var(--tt-button-active-text-color);
}
.tiptap-button[data-active-state=on]:not([disabled]) .tiptap-button-icon, .tiptap-button[data-state=open]:not([disabled]) .tiptap-button-icon {
  color: var(--tt-button-active-icon-color);
}
.tiptap-button[data-active-state=on]:not([disabled]) .tiptap-button-icon-sub, .tiptap-button[data-state=open]:not([disabled]) .tiptap-button-icon-sub {
  color: var(--tt-button-active-icon-sub-color);
}
.tiptap-button[data-active-state=on]:not([disabled]) .tiptap-button-dropdown-arrows,
.tiptap-button[data-active-state=on]:not([disabled]) .tiptap-button-dropdown-small, .tiptap-button[data-state=open]:not([disabled]) .tiptap-button-dropdown-arrows,
.tiptap-button[data-state=open]:not([disabled]) .tiptap-button-dropdown-small {
  color: var(--tt-button-active-dropdown-arrows-color);
}
.tiptap-button[data-active-state=on]:not([disabled]):hover, .tiptap-button[data-state=open]:not([disabled]):hover {
  background-color: var(--tt-button-active-hover-bg-color);
}
.tiptap-button[data-active-state=on]:not([disabled]), .tiptap-button[data-state=open]:not([disabled]) {
  /* Emphasized */
}
.tiptap-button[data-active-state=on]:not([disabled])[data-appearance=emphasized], .tiptap-button[data-state=open]:not([disabled])[data-appearance=emphasized] {
  background-color: var(--tt-button-active-bg-color-emphasized);
  color: var(--tt-button-active-text-color-emphasized);
}
.tiptap-button[data-active-state=on]:not([disabled])[data-appearance=emphasized] .tiptap-button-icon, .tiptap-button[data-state=open]:not([disabled])[data-appearance=emphasized] .tiptap-button-icon {
  color: var(--tt-button-active-icon-color-emphasized);
}
.tiptap-button[data-active-state=on]:not([disabled])[data-appearance=emphasized] .tiptap-button-icon-sub, .tiptap-button[data-state=open]:not([disabled])[data-appearance=emphasized] .tiptap-button-icon-sub {
  color: var(--tt-button-active-icon-sub-color-emphasized);
}
.tiptap-button[data-active-state=on]:not([disabled])[data-appearance=emphasized] .tiptap-button-dropdown-arrows,
.tiptap-button[data-active-state=on]:not([disabled])[data-appearance=emphasized] .tiptap-button-dropdown-small, .tiptap-button[data-state=open]:not([disabled])[data-appearance=emphasized] .tiptap-button-dropdown-arrows,
.tiptap-button[data-state=open]:not([disabled])[data-appearance=emphasized] .tiptap-button-dropdown-small {
  color: var(--tt-button-active-dropdown-arrows-color-emphasized);
}
.tiptap-button[data-active-state=on]:not([disabled])[data-appearance=emphasized]:hover, .tiptap-button[data-state=open]:not([disabled])[data-appearance=emphasized]:hover {
  background-color: var(--tt-button-active-hover-bg-color-emphasized);
}
.tiptap-button[data-active-state=on]:not([disabled]), .tiptap-button[data-state=open]:not([disabled]) {
  /* Subdued */
}
.tiptap-button[data-active-state=on]:not([disabled])[data-appearance=subdued], .tiptap-button[data-state=open]:not([disabled])[data-appearance=subdued] {
  background-color: var(--tt-button-active-bg-color-subdued);
  color: var(--tt-button-active-text-color-subdued);
}
.tiptap-button[data-active-state=on]:not([disabled])[data-appearance=subdued] .tiptap-button-icon, .tiptap-button[data-state=open]:not([disabled])[data-appearance=subdued] .tiptap-button-icon {
  color: var(--tt-button-active-icon-color-subdued);
}
.tiptap-button[data-active-state=on]:not([disabled])[data-appearance=subdued] .tiptap-button-icon-sub, .tiptap-button[data-state=open]:not([disabled])[data-appearance=subdued] .tiptap-button-icon-sub {
  color: var(--tt-button-active-icon-sub-color-subdued);
}
.tiptap-button[data-active-state=on]:not([disabled])[data-appearance=subdued] .tiptap-button-dropdown-arrows,
.tiptap-button[data-active-state=on]:not([disabled])[data-appearance=subdued] .tiptap-button-dropdown-small, .tiptap-button[data-state=open]:not([disabled])[data-appearance=subdued] .tiptap-button-dropdown-arrows,
.tiptap-button[data-state=open]:not([disabled])[data-appearance=subdued] .tiptap-button-dropdown-small {
  color: var(--tt-button-active-dropdown-arrows-color-subdued);
}
.tiptap-button[data-active-state=on]:not([disabled])[data-appearance=subdued]:hover, .tiptap-button[data-state=open]:not([disabled])[data-appearance=subdued]:hover {
  background-color: var(--tt-button-active-hover-bg-color-subdued);
}
.tiptap-button[data-active-state=on]:not([disabled])[data-appearance=subdued]:hover .tiptap-button-icon, .tiptap-button[data-state=open]:not([disabled])[data-appearance=subdued]:hover .tiptap-button-icon {
  color: var(--tt-button-active-icon-color-subdued);
}
.tiptap-button:disabled {
  background-color: var(--tt-button-disabled-bg-color);
  color: var(--tt-button-disabled-text-color);
}
.tiptap-button:disabled .tiptap-button-icon {
  color: var(--tt-button-disabled-icon-color);
}.tiptap-separator {
  --tt-link-border-color: var(--tt-gray-light-a-200);
}
.dark .tiptap-separator {
  --tt-link-border-color: var(--tt-gray-dark-a-200);
}

.tiptap-separator {
  flex-shrink: 0;
  background-color: var(--tt-link-border-color);
}
.tiptap-separator[data-orientation=horizontal] {
  height: 1px;
  width: 100%;
  margin: 0.5rem 0;
}
.tiptap-separator[data-orientation=vertical] {
  height: 1.5rem;
  width: 1px;
}:root {
  --tt-toolbar-height: 2.75rem;
  --tt-safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --tt-toolbar-bg-color: var(--white);
  --tt-toolbar-border-color: var(--tt-gray-light-a-100);
}

.dark {
  --tt-toolbar-bg-color: var(--black);
  --tt-toolbar-border-color: var(--tt-gray-dark-a-50);
}

.tiptap-toolbar {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.tiptap-toolbar-group {
  display: flex;
  align-items: center;
  gap: 0.125rem;
}
.tiptap-toolbar-group:empty {
  display: none;
}
.tiptap-toolbar-group:empty + .tiptap-separator, .tiptap-separator + .tiptap-toolbar-group:empty {
  display: none;
}
.tiptap-toolbar[data-variant=fixed] {
  position: sticky;
  top: 0;
  z-index: 10;
  width: 100%;
  min-height: var(--tt-toolbar-height);
  border-bottom: 1px solid var(--tt-toolbar-border-color);
  padding: 0 0.5rem;
  flex-wrap: wrap;
  align-content: flex-start;
}
.tiptap-toolbar[data-variant=floating] {
  --tt-toolbar-padding: 0.125rem;
  --tt-toolbar-border-width: 1px;
  padding: 0.188rem;
  border-radius: calc(var(--tt-toolbar-padding) + var(--tt-radius-lg) + var(--tt-toolbar-border-width));
  border: var(--tt-toolbar-border-width) solid var(--tt-toolbar-border-color);
  background-color: var(--tt-toolbar-bg-color);
  box-shadow: var(--tt-shadow-elevated-md);
  outline: none;
  overflow: hidden;
}
.tiptap-toolbar[data-variant=floating][data-plain=true] {
  padding: 0;
  border-radius: 0;
  border: none;
  box-shadow: none;
  background-color: transparent;
}
@media screen and (max-width: 480px) {
  .tiptap-toolbar[data-variant=floating] {
    width: 100%;
    border-radius: 0;
    border: none;
    box-shadow: none;
  }
}:root {
  --tiptap-image-upload-active: var(--tt-brand-color-500);
  --tiptap-image-upload-progress-bg: var(--tt-brand-color-50);
  --tiptap-image-upload-icon-bg: var(--tt-brand-color-500);
  --tiptap-image-upload-text-color: var(--tt-gray-light-a-700);
  --tiptap-image-upload-subtext-color: var(--tt-gray-light-a-400);
  --tiptap-image-upload-border: var(--tt-gray-light-a-300);
  --tiptap-image-upload-border-hover: var(--tt-gray-light-a-400);
  --tiptap-image-upload-border-active: var(--tt-brand-color-500);
  --tiptap-image-upload-icon-doc-bg: var(--tt-gray-light-a-200);
  --tiptap-image-upload-icon-doc-border: var(--tt-gray-light-300);
  --tiptap-image-upload-icon-color: var(--white);
}

.dark {
  --tiptap-image-upload-active: var(--tt-brand-color-400);
  --tiptap-image-upload-progress-bg: var(--tt-brand-color-900);
  --tiptap-image-upload-icon-bg: var(--tt-brand-color-400);
  --tiptap-image-upload-text-color: var(--tt-gray-dark-a-700);
  --tiptap-image-upload-subtext-color: var(--tt-gray-dark-a-400);
  --tiptap-image-upload-border: var(--tt-gray-dark-a-300);
  --tiptap-image-upload-border-hover: var(--tt-gray-dark-a-400);
  --tiptap-image-upload-border-active: var(--tt-brand-color-400);
  --tiptap-image-upload-icon-doc-bg: var(--tt-gray-dark-a-200);
  --tiptap-image-upload-icon-doc-border: var(--tt-gray-dark-300);
  --tiptap-image-upload-icon-color: var(--black);
}

.tiptap-image-upload {
  margin: 2rem 0;
}
.tiptap-image-upload input[type=file] {
  display: none;
}
.tiptap-image-upload .tiptap-image-upload-dropzone {
  position: relative;
  width: 3.125rem;
  height: 3.75rem;
  display: inline-flex;
  align-items: flex-start;
  justify-content: center;
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none;
}
.tiptap-image-upload .tiptap-image-upload-icon-container {
  position: absolute;
  width: 1.75rem;
  height: 1.75rem;
  bottom: 0;
  right: 0;
  background-color: var(--tiptap-image-upload-icon-bg);
  border-radius: var(--tt-radius-lg, 0.75rem);
  display: flex;
  align-items: center;
  justify-content: center;
}
.tiptap-image-upload .tiptap-image-upload-icon {
  width: 0.875rem;
  height: 0.875rem;
  color: var(--tiptap-image-upload-icon-color);
}
.tiptap-image-upload .tiptap-image-upload-dropzone-rect-primary {
  color: var(--tiptap-image-upload-icon-doc-bg);
  position: absolute;
}
.tiptap-image-upload .tiptap-image-upload-dropzone-rect-secondary {
  position: absolute;
  top: 0;
  right: 0.25rem;
  bottom: 0;
  color: var(--tiptap-image-upload-icon-doc-border);
}
.tiptap-image-upload .tiptap-image-upload-text {
  color: var(--tiptap-image-upload-text-color);
  font-weight: 500;
  font-size: 0.875rem;
  line-height: normal;
}
.tiptap-image-upload .tiptap-image-upload-text em {
  font-style: normal;
  text-decoration: underline;
}
.tiptap-image-upload .tiptap-image-upload-subtext {
  color: var(--tiptap-image-upload-subtext-color);
  font-weight: 600;
  line-height: normal;
  font-size: 0.75rem;
}
.tiptap-image-upload .tiptap-image-upload-drag-area {
  padding: 2rem 1.5rem;
  border: 1.5px dashed var(--tiptap-image-upload-border);
  border-radius: var(--tt-radius-md, 0.5rem);
  text-align: center;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.2s ease;
}
.tiptap-image-upload .tiptap-image-upload-drag-area:hover {
  border-color: var(--tiptap-image-upload-border-hover);
}
.tiptap-image-upload .tiptap-image-upload-drag-area.drag-active {
  border-color: var(--tiptap-image-upload-border-active);
  background-color: rgba(var(--tiptap-image-upload-active-rgb, 0, 123, 255), 0.05);
}
.tiptap-image-upload .tiptap-image-upload-drag-area.drag-over {
  border-color: var(--tiptap-image-upload-border-active);
  background-color: rgba(var(--tiptap-image-upload-active-rgb, 0, 123, 255), 0.1);
}
.tiptap-image-upload .tiptap-image-upload-content {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.25rem;
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none;
}
.tiptap-image-upload .tiptap-image-upload-previews {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.tiptap-image-upload .tiptap-image-upload-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--tiptap-image-upload-border);
  margin-bottom: 0.5rem;
}
.tiptap-image-upload .tiptap-image-upload-header span {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--tiptap-image-upload-text-color);
}
.tiptap-image-upload .tiptap-image-upload-preview {
  position: relative;
  border-radius: var(--tt-radius-md, 0.5rem);
  overflow: hidden;
}
.tiptap-image-upload .tiptap-image-upload-preview .tiptap-image-upload-progress {
  position: absolute;
  inset: 0;
  background-color: var(--tiptap-image-upload-progress-bg);
  transition: all 300ms ease-out;
}
.tiptap-image-upload .tiptap-image-upload-preview .tiptap-image-upload-preview-content {
  position: relative;
  border: 1px solid var(--tiptap-image-upload-border);
  border-radius: var(--tt-radius-md, 0.5rem);
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tiptap-image-upload .tiptap-image-upload-preview .tiptap-image-upload-file-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  height: 2rem;
}
.tiptap-image-upload .tiptap-image-upload-preview .tiptap-image-upload-file-info .tiptap-image-upload-file-icon {
  padding: 0.5rem;
  background-color: var(--tiptap-image-upload-icon-bg);
  border-radius: var(--tt-radius-lg, 0.75rem);
}
.tiptap-image-upload .tiptap-image-upload-preview .tiptap-image-upload-file-info .tiptap-image-upload-file-icon svg {
  width: 0.875rem;
  height: 0.875rem;
  color: var(--tiptap-image-upload-icon-color);
}
.tiptap-image-upload .tiptap-image-upload-preview .tiptap-image-upload-details {
  display: flex;
  flex-direction: column;
}
.tiptap-image-upload .tiptap-image-upload-preview .tiptap-image-upload-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.tiptap-image-upload .tiptap-image-upload-preview .tiptap-image-upload-actions .tiptap-image-upload-progress-text {
  font-size: 0.75rem;
  color: var(--tiptap-image-upload-border-active);
  font-weight: 600;
}

.tiptap.ProseMirror.ProseMirror-focused .ProseMirror-selectednode .tiptap-image-upload-drag-area {
  border-color: var(--tiptap-image-upload-active);
}

@media (max-width: 480px) {
  .tiptap-image-upload .tiptap-image-upload-drag-area {
    padding: 1.5rem 1rem;
  }
  .tiptap-image-upload .tiptap-image-upload-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  .tiptap-image-upload .tiptap-image-upload-preview-content {
    padding: 0.75rem;
  }
}.tiptap.ProseMirror {
  --blockquote-bg-color: var(--tt-gray-light-900);
}
.dark .tiptap.ProseMirror {
  --blockquote-bg-color: var(--tt-gray-dark-900);
}

/* =====================
     BLOCKQUOTE
     ===================== */
.tiptap.ProseMirror blockquote {
  position: relative;
  padding-left: 1em;
  padding-top: 0.375em;
  padding-bottom: 0.375em;
  margin: 1.5rem 0;
}
.tiptap.ProseMirror blockquote p {
  margin-top: 0;
}
.tiptap.ProseMirror blockquote::before, .tiptap.ProseMirror blockquote.is-empty::before {
  position: absolute;
  bottom: 0;
  left: 0;
  top: 0;
  height: 100%;
  width: 0.25em;
  background-color: var(--blockquote-bg-color);
  content: "";
  border-radius: 0;
}.tiptap.ProseMirror {
  --tt-inline-code-bg-color: var(--tt-gray-light-a-100);
  --tt-inline-code-text-color: var(--tt-gray-light-a-700);
  --tt-inline-code-border-color: var(--tt-gray-light-a-200);
  --tt-codeblock-bg: var(--tt-gray-light-a-50);
  --tt-codeblock-text: var(--tt-gray-light-a-800);
  --tt-codeblock-border: var(--tt-gray-light-a-200);
}
.dark .tiptap.ProseMirror {
  --tt-inline-code-bg-color: var(--tt-gray-dark-a-100);
  --tt-inline-code-text-color: var(--tt-gray-dark-a-700);
  --tt-inline-code-border-color: var(--tt-gray-dark-a-200);
  --tt-codeblock-bg: var(--tt-gray-dark-a-50);
  --tt-codeblock-text: var(--tt-gray-dark-a-800);
  --tt-codeblock-border: var(--tt-gray-dark-a-200);
}

/* =====================
   CODE FORMATTING
   ===================== */
.tiptap.ProseMirror code {
  background-color: var(--tt-inline-code-bg-color);
  color: var(--tt-inline-code-text-color);
  border: 1px solid var(--tt-inline-code-border-color);
  font-family: "JetBrains Mono NL", monospace;
  font-size: 0.875em;
  line-height: 1.4;
  border-radius: 6px/0.375rem;
  padding: 0.1em 0.2em;
}
.tiptap.ProseMirror pre {
  background-color: var(--tt-codeblock-bg);
  color: var(--tt-codeblock-text);
  border: 1px solid var(--tt-codeblock-border);
  margin-top: 1.5em;
  margin-bottom: 1.5em;
  padding: 1em;
  font-size: 1rem;
  border-radius: 6px/0.375rem;
}
.tiptap.ProseMirror pre code {
  background-color: transparent;
  border: none;
  border-radius: 0;
  -webkit-text-fill-color: inherit;
  color: inherit;
}.tiptap.ProseMirror {
  --horizontal-rule-color: var(--tt-gray-light-a-200);
}
.dark .tiptap.ProseMirror {
  --horizontal-rule-color: var(--tt-gray-dark-a-200);
}

/* =====================
     HORIZONTAL RULE
     ===================== */
.tiptap.ProseMirror hr {
  border: none;
  height: 1px;
  background-color: var(--horizontal-rule-color);
}
.tiptap.ProseMirror [data-type=horizontalRule] {
  margin-top: 2.25em;
  margin-bottom: 2.25em;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}.tiptap.ProseMirror {
  --tt-checklist-bg-color: var(--tt-gray-light-a-100);
  --tt-checklist-bg-active-color: var(--tt-gray-light-a-900);
  --tt-checklist-border-color: var(--tt-gray-light-a-200);
  --tt-checklist-border-active-color: var(--tt-gray-light-a-900);
  --tt-checklist-check-icon-color: var(--white);
  --tt-checklist-text-active: var(--tt-gray-light-a-500);
}
.dark .tiptap.ProseMirror {
  --tt-checklist-bg-color: var(--tt-gray-dark-a-100);
  --tt-checklist-bg-active-color: var(--tt-gray-dark-a-900);
  --tt-checklist-border-color: var(--tt-gray-dark-a-200);
  --tt-checklist-border-active-color: var(--tt-gray-dark-a-900);
  --tt-checklist-check-icon-color: var(--black);
  --tt-checklist-text-active: var(--tt-gray-dark-a-500);
}

/* =====================
     LISTS
     ===================== */
.tiptap.ProseMirror ol,
.tiptap.ProseMirror ul {
  margin-top: 1.5em;
  margin-bottom: 1.5em;
  padding-left: 1.5em;
}
.tiptap.ProseMirror ol:first-child,
.tiptap.ProseMirror ul:first-child {
  margin-top: 0;
}
.tiptap.ProseMirror ol:last-child,
.tiptap.ProseMirror ul:last-child {
  margin-bottom: 0;
}
.tiptap.ProseMirror ol ol,
.tiptap.ProseMirror ol ul,
.tiptap.ProseMirror ul ol,
.tiptap.ProseMirror ul ul {
  margin-top: 0;
  margin-bottom: 0;
}
.tiptap.ProseMirror li p {
  margin-top: 0;
  line-height: 1.6;
}
.tiptap.ProseMirror ol {
  list-style: decimal;
}
.tiptap.ProseMirror ol ol {
  list-style: lower-alpha;
}
.tiptap.ProseMirror ol ol ol {
  list-style: lower-roman;
}
.tiptap.ProseMirror ul:not([data-type=taskList]) {
  list-style: disc;
}
.tiptap.ProseMirror ul:not([data-type=taskList]) ul {
  list-style: circle;
}
.tiptap.ProseMirror ul:not([data-type=taskList]) ul ul {
  list-style: square;
}
.tiptap.ProseMirror ul[data-type=taskList] {
  padding-left: 0.25em;
}
.tiptap.ProseMirror ul[data-type=taskList] li {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}
.tiptap.ProseMirror ul[data-type=taskList] li:not(:has(> p:first-child)) {
  list-style-type: none;
}
.tiptap.ProseMirror ul[data-type=taskList] li[data-checked=true] > div > p {
  opacity: 0.5;
  text-decoration: line-through;
}
.tiptap.ProseMirror ul[data-type=taskList] li[data-checked=true] > div > p span {
  text-decoration: line-through;
}
.tiptap.ProseMirror ul[data-type=taskList] li label {
  position: relative;
  padding-top: 0.375rem;
  padding-right: 0.5rem;
}
.tiptap.ProseMirror ul[data-type=taskList] li label input[type=checkbox] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.tiptap.ProseMirror ul[data-type=taskList] li label span {
  display: block;
  width: 1em;
  height: 1em;
  border: 1px solid var(--tt-checklist-border-color);
  border-radius: var(--tt-radius-xs, 0.25rem);
  position: relative;
  cursor: pointer;
  background-color: var(--tt-checklist-bg-color);
  transition: background-color 80ms ease-out, border-color 80ms ease-out;
}
.tiptap.ProseMirror ul[data-type=taskList] li label span::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 0.75em;
  height: 0.75em;
  background-color: var(--tt-checklist-check-icon-color);
  opacity: 0;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22currentColor%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M21.4142%204.58579C22.1953%205.36683%2022.1953%206.63317%2021.4142%207.41421L10.4142%2018.4142C9.63317%2019.1953%208.36684%2019.1953%207.58579%2018.4142L2.58579%2013.4142C1.80474%2012.6332%201.80474%2011.3668%202.58579%2010.5858C3.36683%209.80474%204.63317%209.80474%205.41421%2010.5858L9%2014.1716L18.5858%204.58579C19.3668%203.80474%2020.6332%203.80474%2021.4142%204.58579Z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22currentColor%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M21.4142%204.58579C22.1953%205.36683%2022.1953%206.63317%2021.4142%207.41421L10.4142%2018.4142C9.63317%2019.1953%208.36684%2019.1953%207.58579%2018.4142L2.58579%2013.4142C1.80474%2012.6332%201.80474%2011.3668%202.58579%2010.5858C3.36683%209.80474%204.63317%209.80474%205.41421%2010.5858L9%2014.1716L18.5858%204.58579C19.3668%203.80474%2020.6332%203.80474%2021.4142%204.58579Z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
}
.tiptap.ProseMirror ul[data-type=taskList] li label input[type=checkbox]:checked + span {
  background: var(--tt-checklist-bg-active-color);
  border-color: var(--tt-checklist-border-active-color);
}
.tiptap.ProseMirror ul[data-type=taskList] li label input[type=checkbox]:checked + span::before {
  opacity: 1;
}
.tiptap.ProseMirror ul[data-type=taskList] li div {
  flex: 1 1 0%;
  min-width: 0;
}.tiptap.ProseMirror img {
  max-width: 100%;
  height: auto;
  display: block;
}
.tiptap.ProseMirror > img:not([data-type=emoji] img) {
  margin: 2rem 0;
  outline: 0.125rem solid transparent;
  border-radius: var(--tt-radius-xs, 0.25rem);
}
.tiptap.ProseMirror img:not([data-type=emoji] img).ProseMirror-selectednode {
  outline-color: var(--tt-brand-color-500);
}
.tiptap.ProseMirror .tiptap-thread:has(> img) {
  margin: 2rem 0;
}
.tiptap.ProseMirror .tiptap-thread:has(> img) img {
  outline: 0.125rem solid transparent;
  border-radius: var(--tt-radius-xs, 0.25rem);
}
.tiptap.ProseMirror .tiptap-thread img {
  margin: 0;
}.tiptap.ProseMirror h1,
.tiptap.ProseMirror h2,
.tiptap.ProseMirror h3,
.tiptap.ProseMirror h4 {
  position: relative;
  color: inherit;
  font-style: inherit;
}
.tiptap.ProseMirror h1:first-child, .tiptap.ProseMirror h1:first-of-type,
.tiptap.ProseMirror h2:first-child,
.tiptap.ProseMirror h2:first-of-type,
.tiptap.ProseMirror h3:first-child,
.tiptap.ProseMirror h3:first-of-type,
.tiptap.ProseMirror h4:first-child,
.tiptap.ProseMirror h4:first-of-type {
  margin-top: 0;
}
.tiptap.ProseMirror h1 {
  font-size: 1.5em;
  font-weight: 700;
  margin-top: 3em;
}
.tiptap.ProseMirror h2 {
  font-size: 1.25em;
  font-weight: 700;
  margin-top: 2.5em;
}
.tiptap.ProseMirror h3 {
  font-size: 1.125em;
  font-weight: 600;
  margin-top: 2em;
}
.tiptap.ProseMirror h4 {
  font-size: 1em;
  font-weight: 600;
  margin-top: 2em;
}
.tiptap.ProseMirror {
  --tt-collaboration-carets-label: var(--tt-gray-light-900);
  --link-text-color: var(--tt-brand-color-500);
  --thread-text: var(--tt-gray-light-900);
  --placeholder-color: var(--tt-gray-light-a-400);
  --thread-bg-color: var(--tt-color-yellow-inc-2);
  --tiptap-ai-insertion-color: var(--tt-brand-color-600);
}
.dark .tiptap.ProseMirror {
  --tt-collaboration-carets-label: var(--tt-gray-dark-100);
  --link-text-color: var(--tt-brand-color-400);
  --thread-text: var(--tt-gray-dark-900);
  --placeholder-color: var(--tt-gray-dark-a-400);
  --thread-bg-color: var(--tt-color-yellow-dec-2);
  --tiptap-ai-insertion-color: var(--tt-brand-color-400);
}

/* Ensure each top-level node has relative positioning 
   so absolutely positioned placeholders work correctly */
.tiptap.ProseMirror > * {
  position: relative;
}

/* =====================
     CORE EDITOR STYLES
     ===================== */
.tiptap.ProseMirror {
  white-space: pre-wrap;
  outline: none;
  caret-color: var(--tt-cursor-color);
}
.tiptap.ProseMirror p:not(:first-child):not(td p):not(th p) {
  font-size: 1rem;
  line-height: 1.6;
  font-weight: normal;
  margin-top: 20px;
}
.tiptap.ProseMirror:not(.readonly):not(.ProseMirror-hideselection) ::selection {
  background-color: var(--tt-selection-color);
}
.tiptap.ProseMirror:not(.readonly):not(.ProseMirror-hideselection) .selection::selection {
  background: transparent;
}
.tiptap.ProseMirror .selection {
  display: inline;
  background-color: var(--tt-selection-color);
}
.tiptap.ProseMirror .ProseMirror-selectednode:not(img):not(pre):not(.react-renderer) {
  border-radius: var(--tt-radius-md);
  background-color: var(--tt-selection-color);
}
.tiptap.ProseMirror .ProseMirror-hideselection {
  caret-color: transparent;
}
.tiptap.ProseMirror.resize-cursor {
  cursor: ew-resize;
  cursor: col-resize;
}

/* =====================
     TEXT DECORATION
     ===================== */
.tiptap.ProseMirror a span {
  text-decoration: underline;
}
.tiptap.ProseMirror s span {
  text-decoration: line-through;
}
.tiptap.ProseMirror u span {
  text-decoration: underline;
}
.tiptap.ProseMirror .tiptap-ai-insertion {
  color: var(--tiptap-ai-insertion-color);
}

/* =====================
     COLLABORATION
     ===================== */
.tiptap.ProseMirror .collaboration-carets__caret {
  border-right: 1px solid transparent;
  border-left: 1px solid transparent;
  pointer-events: none;
  margin-left: -1px;
  margin-right: -1px;
  position: relative;
  word-break: normal;
}
.tiptap.ProseMirror .collaboration-carets__label {
  color: var(--tt-collaboration-carets-label);
  border-radius: 0.25rem;
  border-bottom-left-radius: 0;
  font-size: 0.75rem;
  font-weight: 600;
  left: -1px;
  line-height: 1;
  padding: 0.125rem 0.375rem;
  position: absolute;
  top: -1.3em;
  user-select: none;
  white-space: nowrap;
}

/* =====================
     EMOJI
     ===================== */
.tiptap.ProseMirror [data-type=emoji] img {
  display: inline-block;
  width: 1.25em;
  height: 1.25em;
  cursor: text;
}

/* =====================
     LINKS
     ===================== */
.tiptap.ProseMirror a {
  color: var(--link-text-color);
  text-decoration: underline;
}

/* =====================
     MENTION
     ===================== */
.tiptap.ProseMirror [data-type=mention] {
  display: inline-block;
  color: var(--tt-brand-color-500);
}

/* =====================
     THREADS
     ===================== */
.tiptap.ProseMirror .tiptap-thread.tiptap-thread--unresolved.tiptap-thread--inline {
  transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
  color: var(--thread-text);
  border-bottom: 2px dashed var(--tt-color-yellow-base);
  font-weight: 600;
}
.tiptap.ProseMirror .tiptap-thread.tiptap-thread--unresolved.tiptap-thread--inline.tiptap-thread--selected, .tiptap.ProseMirror .tiptap-thread.tiptap-thread--unresolved.tiptap-thread--inline.tiptap-thread--hovered {
  background-color: var(--thread-bg-color);
  border-bottom-color: transparent;
}
.tiptap.ProseMirror .tiptap-thread.tiptap-thread--unresolved.tiptap-thread--block:has(img) {
  outline: 0.125rem solid var(--tt-color-yellow-base);
  border-radius: var(--tt-radius-xs, 0.25rem);
  overflow: hidden;
  width: fit-content;
}
.tiptap.ProseMirror .tiptap-thread.tiptap-thread--unresolved.tiptap-thread--block:has(img).tiptap-thread--selected {
  outline-width: 0.25rem;
  outline-color: var(--tt-color-yellow-base);
}
.tiptap.ProseMirror .tiptap-thread.tiptap-thread--unresolved.tiptap-thread--block:has(img).tiptap-thread--hovered {
  outline-width: 0.25rem;
}
.tiptap.ProseMirror .tiptap-thread.tiptap-thread--unresolved.tiptap-thread--block:not(:has(img)) {
  border-radius: 0.25rem;
  border-bottom: 0.125rem dashed var(--tt-color-yellow-base);
  border-top: 0.125rem dashed var(--tt-color-yellow-base);
  outline: 0.25rem solid transparent;
}
.tiptap.ProseMirror .tiptap-thread.tiptap-thread--unresolved.tiptap-thread--block:not(:has(img)).tiptap-thread--hovered, .tiptap.ProseMirror .tiptap-thread.tiptap-thread--unresolved.tiptap-thread--block:not(:has(img)).tiptap-thread--selected {
  background-color: var(--tt-color-yellow-base);
  outline-color: var(--tt-color-yellow-base);
}
.tiptap.ProseMirror .tiptap-thread.tiptap-thread--resolved.tiptap-thread--inline.tiptap-thread--selected {
  background-color: var(--tt-color-yellow-base);
  border-color: transparent;
  opacity: 0.5;
}
.tiptap.ProseMirror .tiptap-thread.tiptap-thread--block:has(.react-renderer) {
  margin-top: 3rem;
  margin-bottom: 3rem;
}

/* =====================
     PLACEHOLDER
     ===================== */
.is-empty:not(.with-slash)[data-placeholder]:has(> .ProseMirror-trailingBreak:only-child)::before {
  content: attr(data-placeholder);
}

.is-empty.with-slash[data-placeholder]:has(> .ProseMirror-trailingBreak:only-child)::before {
  content: "Write, type '/' for commands…";
  font-style: italic;
}

.is-empty[data-placeholder]:has(> .ProseMirror-trailingBreak:only-child):before {
  pointer-events: none;
  height: 0;
  position: absolute;
  width: 100%;
  text-align: inherit;
  left: 0;
  right: 0;
}

.is-empty[data-placeholder]:has(> .ProseMirror-trailingBreak):before {
  color: var(--placeholder-color);
}

/* =====================
     DROPCURSOR
     ===================== */
.prosemirror-dropcursor-block,
.prosemirror-dropcursor-inline {
  background: var(--tt-brand-color-400) !important;
  border-radius: 0.25rem;
  margin-left: -1px;
  margin-right: -1px;
  width: 100%;
  height: 0.188rem;
  cursor: grabbing;
}.tiptap-badge {
  /************************************************** 
    Default 
  **************************************************/
  /* Light mode */
  --tt-badge-border-color: var(--tt-gray-light-a-200);
  --tt-badge-border-color-subdued: var(--tt-gray-light-a-200);
  --tt-badge-border-color-emphasized: var(--tt-gray-light-a-600);
  --tt-badge-text-color: var(--tt-gray-light-a-500);
  --tt-badge-text-color-subdued: var(
    --tt-gray-light-a-400
  );
  --tt-badge-text-color-emphasized: var(
    --tt-gray-light-a-600
  );
  --tt-badge-bg-color: var(--white);
  --tt-badge-bg-color-subdued: var(--white);
  --tt-badge-bg-color-emphasized: var(--white);
  --tt-badge-icon-color: var(--tt-gray-light-a-500);
  --tt-badge-icon-color-subdued: var(
    --tt-gray-light-a-400
  );
  --tt-badge-icon-color-emphasized: var(
    --tt-brand-color-600
  );
  /* Dark mode */
}
.dark .tiptap-badge {
  --tt-badge-border-color: var(--tt-gray-dark-a-200);
  --tt-badge-border-color-subdued: var(--tt-gray-dark-a-200);
  --tt-badge-border-color-emphasized: var(--tt-gray-dark-a-500);
  --tt-badge-text-color: var(--tt-gray-dark-a-500);
  --tt-badge-text-color-subdued: var(
    --tt-gray-dark-a-400
  );
  --tt-badge-text-color-emphasized: var(
    --tt-gray-dark-a-600
  );
  --tt-badge-bg-color: var(--black);
  --tt-badge-bg-color-subdued: var(--black);
  --tt-badge-bg-color-emphasized: var(--black);
  --tt-badge-icon-color: var(--tt-gray-dark-a-500);
  --tt-badge-icon-color-subdued: var(
    --tt-gray-dark-a-400
  );
  --tt-badge-icon-color-emphasized: var(
    --tt-brand-color-400
  );
}
.tiptap-badge {
  /************************************************** 
    Ghost 
  **************************************************/
}
.tiptap-badge[data-style=ghost] {
  /* Light mode */
  --tt-badge-border-color: var(--tt-gray-light-a-200);
  --tt-badge-border-color-subdued: var(--tt-gray-light-a-200);
  --tt-badge-border-color-emphasized: var(--tt-gray-light-a-600);
  --tt-badge-text-color: var(--tt-gray-light-a-500);
  --tt-badge-text-color-subdued: var(
    --tt-gray-light-a-400
  );
  --tt-badge-text-color-emphasized: var(
    --tt-gray-light-a-600
  );
  --tt-badge-bg-color: var(--transparent);
  --tt-badge-bg-color-subdued: var(--transparent);
  --tt-badge-bg-color-emphasized: var(--transparent);
  --tt-badge-icon-color: var(--tt-gray-light-a-500);
  --tt-badge-icon-color-subdued: var(
    --tt-gray-light-a-400
  );
  --tt-badge-icon-color-emphasized: var(
    --tt-brand-color-600
  );
  /* Dark mode */
}
.dark .tiptap-badge[data-style=ghost] {
  --tt-badge-border-color: var(--tt-gray-dark-a-200);
  --tt-badge-border-color-subdued: var(--tt-gray-dark-a-200);
  --tt-badge-border-color-emphasized: var(--tt-gray-dark-a-500);
  --tt-badge-text-color: var(--tt-gray-dark-a-500);
  --tt-badge-text-color-subdued: var(
    --tt-gray-dark-a-400
  );
  --tt-badge-text-color-emphasized: var(
    --tt-gray-dark-a-600
  );
  --tt-badge-bg-color: var(--transparent);
  --tt-badge-bg-color-subdued: var(--transparent);
  --tt-badge-bg-color-emphasized: var(--transparent);
  --tt-badge-icon-color: var(--tt-gray-dark-a-500);
  --tt-badge-icon-color-subdued: var(
    --tt-gray-dark-a-400
  );
  --tt-badge-icon-color-emphasized: var(
    --tt-brand-color-400
  );
}
.tiptap-badge {
  /************************************************** 
    Gray 
  **************************************************/
}
.tiptap-badge[data-style=gray] {
  /* Light mode */
  --tt-badge-border-color: var(--tt-gray-light-a-200);
  --tt-badge-border-color-subdued: var(--tt-gray-light-a-200);
  --tt-badge-border-color-emphasized: var(--tt-gray-light-a-500);
  --tt-badge-text-color: var(--tt-gray-light-a-500);
  --tt-badge-text-color-subdued: var(
    --tt-gray-light-a-400
  );
  --tt-badge-text-color-emphasized: var(--white);
  --tt-badge-bg-color: var(--tt-gray-light-a-100);
  --tt-badge-bg-color-subdued: var(
    --tt-gray-light-a-50
  );
  --tt-badge-bg-color-emphasized: var(
    --tt-gray-light-a-700
  );
  --tt-badge-icon-color: var(--tt-gray-light-a-500);
  --tt-badge-icon-color-subdued: var(
    --tt-gray-light-a-400
  );
  --tt-badge-icon-color-emphasized: var(--white);
  /* Dark mode */
}
.dark .tiptap-badge[data-style=gray] {
  --tt-badge-border-color: var(--tt-gray-dark-a-200);
  --tt-badge-border-color-subdued: var(--tt-gray-dark-a-200);
  --tt-badge-border-color-emphasized: var(--tt-gray-dark-a-500);
  --tt-badge-text-color: var(--tt-gray-dark-a-500);
  --tt-badge-text-color-subdued: var(
    --tt-gray-dark-a-400
  );
  --tt-badge-text-color-emphasized: var(--black);
  --tt-badge-bg-color: var(--tt-gray-dark-a-100);
  --tt-badge-bg-color-subdued: var(
    --tt-gray-dark-a-50
  );
  --tt-badge-bg-color-emphasized: var(
    --tt-gray-dark-a-800
  );
  --tt-badge-icon-color: var(--tt-gray-dark-a-500);
  --tt-badge-icon-color-subdued: var(
    --tt-gray-dark-a-400
  );
  --tt-badge-icon-color-emphasized: var(--black);
}
.tiptap-badge {
  /************************************************** 
    Green 
  **************************************************/
}
.tiptap-badge[data-style=green] {
  /* Light mode */
  --tt-badge-border-color: var(--tt-color-green-inc-2);
  --tt-badge-border-color-subdued: var(--tt-color-green-inc-3);
  --tt-badge-border-color-emphasized: var(--tt-color-green-dec-2);
  --tt-badge-text-color: var(--tt-color-green-dec-3);
  --tt-badge-text-color-subdued: var(
    --tt-color-green-dec-2
  );
  --tt-badge-text-color-emphasized: var(
    --tt-color-green-inc-5
  );
  --tt-badge-bg-color: var(--tt-color-green-inc-4);
  --tt-badge-bg-color-subdued: var(
    --tt-color-green-inc-5
  );
  --tt-badge-bg-color-emphasized: var(
    --tt-color-green-dec-1
  );
  --tt-badge-icon-color: var(--tt-color-green-dec-3);
  --tt-badge-icon-color-subdued: var(
    --tt-color-green-dec-2
  );
  --tt-badge-icon-color-emphasized: var(
    --tt-color-green-inc-5
  );
  /* Dark mode */
}
.dark .tiptap-badge[data-style=green] {
  --tt-badge-border-color: var(--tt-color-green-dec-2);
  --tt-badge-border-color-subdued: var(--tt-color-green-dec-3);
  --tt-badge-border-color-emphasized: var(--tt-color-green-base);
  --tt-badge-text-color: var(--tt-color-green-inc-3);
  --tt-badge-text-color-subdued: var(
    --tt-color-green-inc-2
  );
  --tt-badge-text-color-emphasized: var(
    --tt-color-green-dec-5
  );
  --tt-badge-bg-color: var(--tt-color-green-dec-4);
  --tt-badge-bg-color-subdued: var(
    --tt-color-green-dec-5
  );
  --tt-badge-bg-color-emphasized: var(
    --tt-color-green-inc-1
  );
  --tt-badge-icon-color: var(--tt-color-green-inc-3);
  --tt-badge-icon-color-subdued: var(
    --tt-color-green-inc-2
  );
  --tt-badge-icon-color-emphasized: var(
    --tt-color-green-dec-5
  );
}
.tiptap-badge {
  /************************************************** 
    Yellow 
  **************************************************/
}
.tiptap-badge[data-style=yellow] {
  /* Light mode */
  --tt-badge-border-color: var(--tt-color-yellow-inc-2);
  --tt-badge-border-color-subdued: var(--tt-color-yellow-inc-3);
  --tt-badge-border-color-emphasized: var(--tt-color-yellow-dec-1);
  --tt-badge-text-color: var(--tt-color-yellow-dec-3);
  --tt-badge-text-color-subdued: var(
    --tt-color-yellow-dec-2
  );
  --tt-badge-text-color-emphasized: var(
    --tt-color-yellow-dec-3
  );
  --tt-badge-bg-color: var(--tt-color-yellow-inc-4);
  --tt-badge-bg-color-subdued: var(
    --tt-color-yellow-inc-5
  );
  --tt-badge-bg-color-emphasized: var(
    --tt-color-yellow-base
  );
  --tt-badge-icon-color: var(--tt-color-yellow-dec-3);
  --tt-badge-icon-color-subdued: var(
    --tt-color-yellow-dec-2
  );
  --tt-badge-icon-color-emphasized: var(
    --tt-color-yellow-dec-3
  );
  /* Dark mode */
}
.dark .tiptap-badge[data-style=yellow] {
  --tt-badge-border-color: var(--tt-color-yellow-dec-2);
  --tt-badge-border-color-subdued: var(--tt-color-yellow-dec-3);
  --tt-badge-border-color-emphasized: var(--tt-color-yellow-inc-1);
  --tt-badge-text-color: var(--tt-color-yellow-inc-3);
  --tt-badge-text-color-subdued: var(
    --tt-color-yellow-inc-2
  );
  --tt-badge-text-color-emphasized: var(
    --tt-color-yellow-dec-3
  );
  --tt-badge-bg-color: var(--tt-color-yellow-dec-4);
  --tt-badge-bg-color-subdued: var(
    --tt-color-yellow-dec-5
  );
  --tt-badge-bg-color-emphasized: var(
    --tt-color-yellow-base
  );
  --tt-badge-icon-color: var(--tt-color-yellow-inc-3);
  --tt-badge-icon-color-subdued: var(
    --tt-color-yellow-inc-2
  );
  --tt-badge-icon-color-emphasized: var(
    --tt-color-yellow-dec-3
  );
}
.tiptap-badge {
  /************************************************** 
    Red 
  **************************************************/
}
.tiptap-badge[data-style=red] {
  /* Light mode */
  --tt-badge-border-color: var(--tt-color-red-inc-2);
  --tt-badge-border-color-subdued: var(--tt-color-red-inc-3);
  --tt-badge-border-color-emphasized: var(--tt-color-red-dec-2);
  --tt-badge-text-color: var(--tt-color-red-dec-3);
  --tt-badge-text-color-subdued: var(
    --tt-color-red-dec-2
  );
  --tt-badge-text-color-emphasized: var(
    --tt-color-red-inc-5
  );
  --tt-badge-bg-color: var(--tt-color-red-inc-4);
  --tt-badge-bg-color-subdued: var(
    --tt-color-red-inc-5
  );
  --tt-badge-bg-color-emphasized: var(
    --tt-color-red-dec-1
  );
  --tt-badge-icon-color: var(--tt-color-red-dec-3);
  --tt-badge-icon-color-subdued: var(
    --tt-color-red-dec-2
  );
  --tt-badge-icon-color-emphasized: var(
    --tt-color-red-inc-5
  );
  /* Dark mode */
}
.dark .tiptap-badge[data-style=red] {
  --tt-badge-border-color: var(--tt-color-red-dec-2);
  --tt-badge-border-color-subdued: var(--tt-color-red-dec-3);
  --tt-badge-border-color-emphasized: var(--tt-color-red-base);
  --tt-badge-text-color: var(--tt-color-red-inc-3);
  --tt-badge-text-color-subdued: var(
    --tt-color-red-inc-2
  );
  --tt-badge-text-color-emphasized: var(
    --tt-color-red-dec-5
  );
  --tt-badge-bg-color: var(--tt-color-red-dec-4);
  --tt-badge-bg-color-subdued: var(
    --tt-color-red-dec-5
  );
  --tt-badge-bg-color-emphasized: var(
    --tt-color-red-inc-1
  );
  --tt-badge-icon-color: var(--tt-color-red-inc-3);
  --tt-badge-icon-color-subdued: var(
    --tt-color-red-inc-2
  );
  --tt-badge-icon-color-emphasized: var(
    --tt-color-red-dec-5
  );
}
.tiptap-badge {
  /************************************************** 
    Brand 
  **************************************************/
}
.tiptap-badge[data-style=brand] {
  /* Light mode */
  --tt-badge-border-color: var(--tt-brand-color-300);
  --tt-badge-border-color-subdued: var(--tt-brand-color-200);
  --tt-badge-border-color-emphasized: var(--tt-brand-color-600);
  --tt-badge-text-color: var(--tt-brand-color-800);
  --tt-badge-text-color-subdued: var(
    --tt-brand-color-700
  );
  --tt-badge-text-color-emphasized: var(
    --tt-brand-color-50
  );
  --tt-badge-bg-color: var(--tt-brand-color-100);
  --tt-badge-bg-color-subdued: var(
    --tt-brand-color-50
  );
  --tt-badge-bg-color-emphasized: var(
    --tt-brand-color-600
  );
  --tt-badge-icon-color: var(--tt-brand-color-800);
  --tt-badge-icon-color-subdued: var(
    --tt-brand-color-700
  );
  --tt-badge-icon-color-emphasized: var(
    --tt-brand-color-100
  );
  /* Dark mode */
}
.dark .tiptap-badge[data-style=brand] {
  --tt-badge-border-color: var(--tt-brand-color-700);
  --tt-badge-border-color-subdued: var(--tt-brand-color-800);
  --tt-badge-border-color-emphasized: var(--tt-brand-color-400);
  --tt-badge-text-color: var(--tt-brand-color-200);
  --tt-badge-text-color-subdued: var(
    --tt-brand-color-300
  );
  --tt-badge-text-color-emphasized: var(
    --tt-brand-color-950
  );
  --tt-badge-bg-color: var(--tt-brand-color-900);
  --tt-badge-bg-color-subdued: var(
    --tt-brand-color-950
  );
  --tt-badge-bg-color-emphasized: var(
    --tt-brand-color-400
  );
  --tt-badge-icon-color: var(--tt-brand-color-200);
  --tt-badge-icon-color-subdued: var(
    --tt-brand-color-300
  );
  --tt-badge-icon-color-emphasized: var(
    --tt-brand-color-900
  );
}.tiptap-badge-group {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.tiptap-badge-group [data-orientation=vertical] {
  flex-direction: column;
}
.tiptap-badge-group [data-orientation=horizontal] {
  flex-direction: row;
}.tiptap-badge {
  font-size: 0.625rem;
  font-weight: 700;
  font-feature-settings: "salt" on, "cv01" on;
  line-height: 1.15;
  height: 1.25rem;
  min-width: 1.25rem;
  padding: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: solid 1px;
  border-radius: var(--tt-radius-sm, 0.375rem);
  transition-property: background, color, opacity;
  transition-duration: var(--tt-transition-duration-default);
  transition-timing-function: var(--tt-transition-easing-default);
  /* button size large */
}
.tiptap-badge[data-size=large] {
  font-size: 0.75rem;
  height: 1.5rem;
  min-width: 1.5rem;
  padding: 0.375rem;
  border-radius: var(--tt-radius-md, 0.375rem);
}
.tiptap-badge {
  /* button size small */
}
.tiptap-badge[data-size=small] {
  height: 1rem;
  min-width: 1rem;
  padding: 0.125rem;
  border-radius: var(--tt-radius-xs, 0.25rem);
}
.tiptap-badge {
  /* trim / expand text of the button */
}
.tiptap-badge .tiptap-badge-text {
  padding: 0 0.125rem;
  flex-grow: 1;
  text-align: left;
}
.tiptap-badge[data-text-trim=on] .tiptap-badge-text {
  text-overflow: ellipsis;
  overflow: hidden;
}
.tiptap-badge {
  /* standard icon, what is used */
}
.tiptap-badge .tiptap-badge-icon {
  pointer-events: none;
  flex-shrink: 0;
  width: 0.625rem;
  height: 0.625rem;
}
.tiptap-badge[data-size=large] .tiptap-badge-icon {
  width: 0.75rem;
  height: 0.75rem;
}

/* --------------------------------------------
----------- BADGE COLOR SETTINGS -------------
-------------------------------------------- */
.tiptap-badge {
  background-color: var(--tt-badge-bg-color);
  border-color: var(--tt-badge-border-color);
  color: var(--tt-badge-text-color);
}
.tiptap-badge .tiptap-badge-icon {
  color: var(--tt-badge-icon-color);
}
.tiptap-badge {
  /* Emphasized */
}
.tiptap-badge[data-appearance=emphasized] {
  background-color: var(--tt-badge-bg-color-emphasized);
  border-color: var(--tt-badge-border-color-emphasized);
  color: var(--tt-badge-text-color-emphasized);
}
.tiptap-badge[data-appearance=emphasized] .tiptap-badge-icon {
  color: var(--tt-badge-icon-color-emphasized);
}
.tiptap-badge {
  /* Subdued */
}
.tiptap-badge[data-appearance=subdued] {
  background-color: var(--tt-badge-bg-color-subdued);
  border-color: var(--tt-badge-border-color-subdued);
  color: var(--tt-badge-text-color-subdued);
}
.tiptap-badge[data-appearance=subdued] .tiptap-badge-icon {
  color: var(--tt-badge-icon-color-subdued);
}.tiptap-dropdown-menu {
  --tt-dropdown-menu-bg-color: var(--white);
  --tt-dropdown-menu-border-color: var(--tt-gray-light-a-100);
  --tt-dropdown-menu-text-color: var(--tt-gray-light-a-600);
}
.dark .tiptap-dropdown-menu {
  --tt-dropdown-menu-border-color: var(--tt-gray-dark-a-50);
  --tt-dropdown-menu-bg-color: var(--tt-gray-dark-50);
  --tt-dropdown-menu-text-color: var(--tt-gray-dark-a-600);
}

/* --------------------------------------------
    --------- DROPDOWN MENU STYLING SETTINGS -----------
    -------------------------------------------- */
.tiptap-dropdown-menu {
  z-index: 50;
  outline: none;
  transform-origin: var(--radix-dropdown-menu-content-transform-origin);
  max-height: var(--radix-dropdown-menu-content-available-height);
}
.tiptap-dropdown-menu > * {
  max-height: var(--radix-dropdown-menu-content-available-height);
}
.tiptap-dropdown-menu {
  /* Animation states */
}
.tiptap-dropdown-menu[data-state=open] {
  animation: fadeIn 150ms cubic-bezier(0.16, 1, 0.3, 1), zoomIn 150ms cubic-bezier(0.16, 1, 0.3, 1);
}
.tiptap-dropdown-menu[data-state=closed] {
  animation: fadeOut 150ms cubic-bezier(0.16, 1, 0.3, 1), zoomOut 150ms cubic-bezier(0.16, 1, 0.3, 1);
}
.tiptap-dropdown-menu {
  /* Position-based animations */
}
.tiptap-dropdown-menu[data-side=top], .tiptap-dropdown-menu[data-side=top-start], .tiptap-dropdown-menu[data-side=top-end] {
  animation: slideFromBottom 150ms cubic-bezier(0.16, 1, 0.3, 1);
}
.tiptap-dropdown-menu[data-side=right], .tiptap-dropdown-menu[data-side=right-start], .tiptap-dropdown-menu[data-side=right-end] {
  animation: slideFromLeft 150ms cubic-bezier(0.16, 1, 0.3, 1);
}
.tiptap-dropdown-menu[data-side=bottom], .tiptap-dropdown-menu[data-side=bottom-start], .tiptap-dropdown-menu[data-side=bottom-end] {
  animation: slideFromTop 150ms cubic-bezier(0.16, 1, 0.3, 1);
}
.tiptap-dropdown-menu[data-side=left], .tiptap-dropdown-menu[data-side=left-start], .tiptap-dropdown-menu[data-side=left-end] {
  animation: slideFromRight 150ms cubic-bezier(0.16, 1, 0.3, 1);
}:root {
  --tiptap-card-bg-color: var(--white);
  --tiptap-card-border-color: var(--tt-gray-light-a-100);
  --tiptap-card-group-label-color: var(--tt-gray-light-a-800);
}

.dark {
  --tiptap-card-bg-color: var(--tt-gray-dark-50);
  --tiptap-card-border-color: var(--tt-gray-dark-a-100);
  --tiptap-card-group-label-color: var(--tt-gray-dark-a-800);
}

.tiptap-card {
  --padding: 0.375rem;
  --border-width: 1px;
  border-radius: calc(var(--padding) + var(--tt-radius-lg));
  box-shadow: var(--tt-shadow-elevated-md);
  background-color: var(--tiptap-card-bg-color);
  border: 1px solid var(--tiptap-card-border-color);
  display: flex;
  flex-direction: column;
  outline: none;
  align-items: center;
  position: relative;
  min-width: 0;
  word-wrap: break-word;
  background-clip: border-box;
}

.tiptap-card-header {
  padding: 0.375rem;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  border-bottom: var(--border-width) solid var(--tiptap-card-border-color);
}

.tiptap-card-body {
  padding: 0.375rem;
  flex: 1 1 auto;
  overflow-y: auto;
}

.tiptap-card-item-group {
  position: relative;
  display: flex;
  vertical-align: middle;
  min-width: max-content;
}
.tiptap-card-item-group[data-orientation=vertical] {
  flex-direction: column;
  justify-content: center;
}
.tiptap-card-item-group[data-orientation=horizontal] {
  gap: 0.25rem;
  flex-direction: row;
  align-items: center;
}

.tiptap-card-group-label {
  padding-top: 0.75rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-bottom: 0.25rem;
  line-height: normal;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: normal;
  text-transform: capitalize;
  color: var(--tiptap-card-group-label-color);
}.tiptap-popover {
  --tt-popover-bg-color: var(--white);
  --tt-popover-border-color: var(--tt-gray-light-a-100);
  --tt-popover-text-color: var(--tt-gray-light-a-600);
}
.dark .tiptap-popover {
  --tt-popover-border-color: var(--tt-gray-dark-a-50);
  --tt-popover-bg-color: var(--tt-gray-dark-50);
  --tt-popover-text-color: var(--tt-gray-dark-a-600);
}

/* --------------------------------------------
    --------- POPOVER STYLING SETTINGS -----------
    -------------------------------------------- */
.tiptap-popover {
  z-index: 50;
  outline: none;
  transform-origin: var(--radix-popover-content-transform-origin);
  max-height: var(--radix-popover-content-available-height);
}
.tiptap-popover > * {
  max-height: var(--radix-popover-content-available-height);
}
.tiptap-popover {
  /* Animation states */
}
.tiptap-popover[data-state=open] {
  animation: fadeIn 150ms cubic-bezier(0.16, 1, 0.3, 1), zoomIn 150ms cubic-bezier(0.16, 1, 0.3, 1);
}
.tiptap-popover[data-state=closed] {
  animation: fadeOut 150ms cubic-bezier(0.16, 1, 0.3, 1), zoomOut 150ms cubic-bezier(0.16, 1, 0.3, 1);
}
.tiptap-popover {
  /* Position-based animations */
}
.tiptap-popover[data-side=top], .tiptap-popover[data-side=top-start], .tiptap-popover[data-side=top-end] {
  animation: slideFromBottom 150ms cubic-bezier(0.16, 1, 0.3, 1);
}
.tiptap-popover[data-side=right], .tiptap-popover[data-side=right-start], .tiptap-popover[data-side=right-end] {
  animation: slideFromLeft 150ms cubic-bezier(0.16, 1, 0.3, 1);
}
.tiptap-popover[data-side=bottom], .tiptap-popover[data-side=bottom-start], .tiptap-popover[data-side=bottom-end] {
  animation: slideFromTop 150ms cubic-bezier(0.16, 1, 0.3, 1);
}
.tiptap-popover[data-side=left], .tiptap-popover[data-side=left-start], .tiptap-popover[data-side=left-end] {
  animation: slideFromRight 150ms cubic-bezier(0.16, 1, 0.3, 1);
}.tiptap-button-highlight {
  position: relative;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0 -0.175rem;
  border-radius: var(--tt-radius-xl);
  background-color: var(--highlight-color);
  transition: transform 0.2s ease;
}
.tiptap-button-highlight::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  border-radius: inherit;
  box-sizing: border-box;
  border: 1px solid var(--highlight-color);
  filter: brightness(95%);
  mix-blend-mode: multiply;
}
.dark .tiptap-button-highlight::after {
  filter: brightness(140%);
  mix-blend-mode: lighten;
}

.tiptap-button[data-active-state=on] .tiptap-button-highlight::after {
  filter: brightness(80%);
}
.dark .tiptap-button[data-active-state=on] .tiptap-button-highlight::after {
  filter: brightness(180%);
}:root {
  --tiptap-input-placeholder: var(--tt-gray-light-a-400);
}

.dark {
  --tiptap-input-placeholder: var(--tt-gray-dark-a-400);
}

.tiptap-input {
  display: block;
  width: 100%;
  height: 2rem;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5;
  padding: 0.375rem 0.5rem;
  border-radius: 0.375rem;
  background: none;
  appearance: none;
  outline: none;
}
.tiptap-input::placeholder {
  color: var(--tiptap-input-placeholder);
}

.tiptap-input-clamp {
  min-width: 12rem;
  padding-right: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tiptap-input-clamp:focus {
  text-overflow: clip;
  overflow: visible;
}

.tiptap-input-group {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}
body {
  --tt-toolbar-height: 44px;
  --tt-theme-text: var(--tt-gray-light-900);
}
.dark body {
  --tt-theme-text: var(--tt-gray-dark-900);
}
body {
  font-family: "Inter", sans-serif;
  color: var(--tt-theme-text);
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  padding: 0;
  overscroll-behavior-y: none;
}
html,
body {
  overscroll-behavior-x: none;
}
html,
body,
#root,
#app {
  height: 100%;
  background-color: var(--tt-bg-color);
}
::-webkit-scrollbar {
  width: 0.25rem;
}
* {
  scrollbar-width: thin;
  scrollbar-color: var(--tt-scrollbar-color) transparent;
}
::-webkit-scrollbar-thumb {
  background-color: var(--tt-scrollbar-color);
  border-radius: 9999px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
.tiptap.ProseMirror {
  font-family: "DM Sans", sans-serif;
}
.simple-editor-wrapper {
  width: 100%;
  position: relative;
  overflow: auto;
}
.simple-editor-content {
  width: 100%;
  margin: 0 auto;
  height: 100%;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.simple-editor-content .tiptap.ProseMirror.simple-editor {
  flex: 1;
  padding: 1rem;
}