@udus/notion-renderer/dist/styles/globals.css


:root {
  /* common */
  --notion-fill: currentcolor;
  --notion-line-height: 1.5;
  --notion-overflow-wrap: break-word;
  --notion-margin: clamp(1rem, 0.273rem + 3.64vw, 3rem);

  /* light */
  --notion-light-color-text-default: rgb(55 53 47);
  --notion-light-color-bg-default: rgb(255 255 255);
  --notion-light-color-pill-default: rgb(227 226 224 / 50%);
  --notion-light-color-text-gray: rgb(120 119 116);
  --notion-light-color-bg-gray: rgb(241 241 239);
  --notion-light-color-pill-gray: rgb(227 226 224);
  --notion-light-color-text-brown: rgb(159 107 83);
  --notion-light-color-bg-brown: rgb(244 238 238);
  --notion-light-color-pill-brown: rgb(238 224 218);
  --notion-light-color-text-orange: rgb(217 115 13);
  --notion-light-color-bg-orange: rgb(251 236 221);
  --notion-light-color-pill-orange: rgb(250 222 201);
  --notion-light-color-text-yellow: rgb(203 145 47);
  --notion-light-color-bg-yellow: rgb(251 243 219);
  --notion-light-color-pill-yellow: rgb(253 236 200);
  --notion-light-color-text-green: rgb(68 131 97);
  --notion-light-color-bg-green: rgb(237 243 236);
  --notion-light-color-pill-green: rgb(219 237 219);
  --notion-light-color-text-blue: rgb(51 126 169);
  --notion-light-color-bg-blue: rgb(231 243 248);
  --notion-light-color-pill-blue: rgb(211 229 239);
  --notion-light-color-text-purple: rgb(144 101 176);
  --notion-light-color-bg-purple: #eae4f2;
  --notion-light-color-pill-purple: rgb(244 240 247 / 80%);
  --notion-light-color-text-pink: rgb(193 76 138);
  --notion-light-color-bg-pink: rgb(249 238 243 / 80%);
  --notion-light-color-pill-pink: rgb(245 224 233);
  --notion-light-color-text-red: rgb(212 76 71);
  --notion-light-color-bg-red: rgb(253 235 236);
  --notion-light-color-pill-red: rgb(255 226 221);
  --notion-light-color-bg-callout: rgb(241 241 239);
  --notion-light-color-border: rgb(55 53 47 / 16%);
  --notion-light-color-code: rgb(247 246 243);
  --notion-light-color-bg-inline-code: rgb(135 131 120 / 15%);
  --notion-light-color-link-hover: rgb(55 53 47 / 8%);
  --notion-light-color-table-of-contents: rgb(120 119 116);
  --notion-light-color-th-background: rgb(247 246 243);
  --notion-light-color-table-border: rgb(233 233 231);
  --notion-light-color-caption: rgb(55 53 47 / 65%);
  --notion-light-color-property-icon: rgba(55 53 47 / 45%);
  --notion-light-color-bg-gallery-card: transparent;

  /* dark */
  --notion-dark-color-text-default: rgb(255 255 255 / 81%);
  --notion-dark-color-bg-default: rgb(25 25 25);
  --notion-dark-color-pill-default: rgb(55 55 55);
  --notion-dark-color-text-gray: rgb(155 155 155);
  --notion-dark-color-bg-gray: rgb(47 47 47);
  --notion-dark-color-pill-gray: rgb(90 90 90);
  --notion-dark-color-text-brown: rgb(186 133 111);
  --notion-dark-color-bg-brown: rgb(74 50 40);
  --notion-dark-color-pill-brown: rgb(96 59 44);
  --notion-dark-color-text-orange: rgb(199 125 72);
  --notion-dark-color-bg-orange: rgb(92 59 35);
  --notion-dark-color-pill-orange: rgb(133 76 29);
  --notion-dark-color-text-yellow: rgb(202 152 73);
  --notion-dark-color-bg-yellow: rgb(86 67 40);
  --notion-dark-color-pill-yellow: rgb(137 99 42);
  --notion-dark-color-text-green: rgb(82 158 114);
  --notion-dark-color-bg-green: rgb(36 61 48);
  --notion-dark-color-pill-green: rgb(43 89 63);
  --notion-dark-color-text-blue: rgb(94 135 201);
  --notion-dark-color-bg-blue: rgb(20 58 78);
  --notion-dark-color-pill-blue: rgb(40 69 108);
  --notion-dark-color-text-purple: rgb(157 104 211);
  --notion-dark-color-bg-purple: rgb(60 45 73);
  --notion-dark-color-pill-purple: rgb(73 47 100);
  --notion-dark-color-text-pink: rgb(209 87 150);
  --notion-dark-color-bg-pink: rgb(78 44 60);
  --notion-dark-color-pill-pink: rgb(105 49 76);
  --notion-dark-color-text-red: rgb(223 84 82);
  --notion-dark-color-bg-red: rgb(82 46 42);
  --notion-dark-color-pill-red: rgb(110 54 48);
  --notion-dark-color-bg-callout: rgb(37 37 37);
  --notion-dark-color-code: rgb(255 255 255 / 3%);
  --notion-dark-color-border: rgb(255 255 255 / 13%);
  --notion-dark-color-bg-inline-code: rgb(135 131 120 / 15%);
  --notion-dark-color-link-hover: rgb(255 255 255 / 5.5%);
  --notion-dark-color-table-of-contents: rgb(155 155 155);
  --notion-dark-color-th-background: rgb(255 255 255 / 3%);
  --notion-dark-color-table-border: rgb(47 47 47);
  --notion-dark-color-caption: rgb(255 255 255 / 44.3%);
  --notion-dark-color-property-icon: rgb(255 255 255 / 44.3%);
  --notion-dark-color-bg-gallery-card: rgb(255 255 255 / 5.5%);
}
@media (prefers-color-scheme: light) {
  :root {
    --color-text-default: var(--notion-light-color-text-default);
    --color-bg-default: var(--notion-light-color-bg-default);
    --color-pill-default: var(--notion-light-color-pill-default);
    --color-text-gray: var(--notion-light-color-text-gray);
    --color-bg-gray: var(--notion-light-color-bg-gray);
    --color-pill-gray: var(--notion-light-color-pill-gray);
    --color-text-brown: var(--notion-light-color-text-brown);
    --color-bg-brown: var(--notion-light-color-bg-brown);
    --color-pill-brown: var(--notion-light-color-pill-brown);
    --color-text-orange: var(--notion-light-color-text-orange);
    --color-bg-orange: var(--notion-light-color-bg-orange);
    --color-pill-orange: var(--notion-light-color-pill-orange);
    --color-text-yellow: var(--notion-light-color-text-yellow);
    --color-bg-yellow: var(--notion-light-color-bg-yellow);
    --color-pill-yellow: var(--notion-light-color-pill-yellow);
    --color-text-green: var(--notion-light-color-text-green);
    --color-bg-green: var(--notion-light-color-bg-green);
    --color-pill-green: var(--notion-light-color-pill-green);
    --color-text-blue: var(--notion-light-color-text-blue);
    --color-bg-blue: var(--notion-light-color-bg-blue);
    --color-pill-blue: var(--notion-light-color-pill-blue);
    --color-text-purple: var(--notion-light-color-text-purple);
    --color-bg-purple: var(--notion-light-color-bg-purple);
    --color-pill-purple: var(--notion-light-color-pill-purple);
    --color-text-pink: var(--notion-light-color-text-pink);
    --color-bg-pink: var(--notion-light-color-bg-pink);
    --color-pill-pink: var(--notion-light-color-pill-pink);
    --color-text-red: var(--notion-light-color-text-red);
    --color-bg-red: var(--notion-light-color-bg-red);
    --color-pill-red: var(--notion-light-color-pill-red);
    --color-bg-callout: var(--notion-light-color-bg-callout);
    --color-code: var(--notion-light-color-code);
    --color-border: var(--notion-light-color-border);
    --color-bg-inline-code: var(--notion-light-color-bg-inline-code);
    --color-link-hover: var(--notion-light-color-link-hover);
    --color-color-table-of-contents: var(
      --notion-light-color-table-of-contents
    );
    --color-th-background: var(--notion-light-color-th-background);
    --color-table-border: var(--notion-light-color-table-border);
    --color-caption: var(--notion-light-color-caption);
    --color-property-icon: var(--notion-light-color-property-icon);
    --color-bg-gallery-card: var(--notion-light-color-bg-gallery-card);
  }
}
@media (prefers-color-scheme: dark) {
  :root {
    --color-text-default: var(--notion-dark-color-text-default);
    --color-bg-default: var(--notion-dark-color-bg-default);
    --color-pill-default: var(--notion-dark-color-pill-default);
    --color-text-gray: var(--notion-dark-color-text-gray);
    --color-bg-gray: var(--notion-dark-color-bg-gray);
    --color-pill-gray: var(--notion-dark-color-pill-gray);
    --color-text-brown: var(--notion-dark-color-text-brown);
    --color-bg-brown: var(--notion-dark-color-bg-brown);
    --color-pill-brown: var(--notion-dark-color-pill-brown);
    --color-text-orange: var(--notion-dark-color-text-orange);
    --color-bg-orange: var(--notion-dark-color-bg-orange);
    --color-pill-orange: var(--notion-dark-color-pill-orange);
    --color-text-yellow: var(--notion-dark-color-text-yellow);
    --color-bg-yellow: var(--notion-dark-color-bg-yellow);
    --color-pill-yellow: var(--notion-dark-color-pill-yellow);
    --color-text-green: var(--notion-dark-color-text-green);
    --color-bg-green: var(--notion-dark-color-bg-green);
    --color-pill-green: var(--notion-dark-color-pill-green);
    --color-text-blue: var(--notion-dark-color-text-blue);
    --color-bg-blue: var(--notion-dark-color-bg-blue);
    --color-pill-blue: var(--notion-dark-color-pill-blue);
    --color-text-purple: var(--notion-dark-color-text-purple);
    --color-bg-purple: var(--notion-dark-color-bg-purple);
    --color-pill-purple: var(--notion-dark-color-pill-purple);
    --color-text-pink: var(--notion-dark-color-text-pink);
    --color-bg-pink: var(--notion-dark-color-bg-pink);
    --color-pill-pink: var(--notion-dark-color-pill-pink);
    --color-text-red: var(--notion-dark-color-text-red);
    --color-bg-red: var(--notion-dark-color-bg-red);
    --color-pill-red: var(--notion-dark-color-pill-red);
    --color-bg-callout: var(--notion-dark-color-bg-callout);
    --color-code: var(--notion-dark-color-code);
    --color-border: var(--notion-dark-color-border);
    --color-bg-inline-code: var(--notion-dark-color-bg-inline-code);
    --color-link-hover: var(--notion-dark-color-link-hover);
    --color-color-table-of-contents: var(--notion-dark-color-table-of-contents);
    --color-th-background: var(--notion-dark-color-th-background);
    --color-table-border: var(--notion-dark-color-table-border);
    --color-caption: var(--notion-dark-color-caption);
    --color-property-icon: var(--notion-dark-color-property-icon);
    --color-bg-gallery-card: var(--notion-dark-color-bg-gallery-card);
  }
}
.notion-light {
  --color-text-default: var(--notion-light-color-text-default);
  --color-bg-default: var(--notion-light-color-bg-default);
  --color-pill-default: var(--notion-light-color-pill-default);
  --color-text-gray: var(--notion-light-color-text-gray);
  --color-bg-gray: var(--notion-light-color-bg-gray);
  --color-pill-gray: var(--notion-light-color-pill-gray);
  --color-text-brown: var(--notion-light-color-text-brown);
  --color-bg-brown: var(--notion-light-color-bg-brown);
  --color-pill-brown: var(--notion-light-color-pill-brown);
  --color-text-orange: var(--notion-light-color-text-orange);
  --color-bg-orange: var(--notion-light-color-bg-orange);
  --color-pill-orange: var(--notion-light-color-pill-orange);
  --color-text-yellow: var(--notion-light-color-text-yellow);
  --color-bg-yellow: var(--notion-light-color-bg-yellow);
  --color-pill-yellow: var(--notion-light-color-pill-yellow);
  --color-text-green: var(--notion-light-color-text-green);
  --color-bg-green: var(--notion-light-color-bg-green);
  --color-pill-green: var(--notion-light-color-pill-green);
  --color-text-blue: var(--notion-light-color-text-blue);
  --color-bg-blue: var(--notion-light-color-bg-blue);
  --color-pill-blue: var(--notion-light-color-pill-blue);
  --color-text-purple: var(--notion-light-color-text-purple);
  --color-bg-purple: var(--notion-light-color-bg-purple);
  --color-pill-purple: var(--notion-light-color-pill-purple);
  --color-text-pink: var(--notion-light-color-text-pink);
  --color-bg-pink: var(--notion-light-color-bg-pink);
  --color-pill-pink: var(--notion-light-color-pill-pink);
  --color-text-red: var(--notion-light-color-text-red);
  --color-bg-red: var(--notion-light-color-bg-red);
  --color-pill-red: var(--notion-light-color-pill-red);
  --color-bg-callout: var(--notion-light-color-bg-callout);
  --color-code: var(--notion-light-color-code);
  --color-border: var(--notion-light-color-border);
  --color-bg-inline-code: var(--notion-light-color-bg-inline-code);
  --color-link-hover: var(--notion-light-color-link-hover);
  --color-color-table-of-contents: var(--notion-light-color-table-of-contents);
  --color-th-background: var(--notion-light-color-th-background);
  --color-table-border: var(--notion-light-color-table-border);
  --color-caption: var(--notion-light-color-caption);
  --color-property-icon: var(--notion-light-color-property-icon);
  --color-bg-gallery-card: var(--notion-light-color-bg-gallery-card);
}
.notion-dark {
  --color-text-default: var(--notion-dark-color-text-default);
  --color-bg-default: var(--notion-dark-color-bg-default);
  --color-pill-default: var(--notion-dark-color-pill-default);
  --color-text-gray: var(--notion-dark-color-text-gray);
  --color-bg-gray: var(--notion-dark-color-bg-gray);
  --color-pill-gray: var(--notion-dark-color-pill-gray);
  --color-text-brown: var(--notion-dark-color-text-brown);
  --color-bg-brown: var(--notion-dark-color-bg-brown);
  --color-pill-brown: var(--notion-dark-color-pill-brown);
  --color-text-orange: var(--notion-dark-color-text-orange);
  --color-bg-orange: var(--notion-dark-color-bg-orange);
  --color-pill-orange: var(--notion-dark-color-pill-orange);
  --color-text-yellow: var(--notion-dark-color-text-yellow);
  --color-bg-yellow: var(--notion-dark-color-bg-yellow);
  --color-pill-yellow: var(--notion-dark-color-pill-yellow);
  --color-text-green: var(--notion-dark-color-text-green);
  --color-bg-green: var(--notion-dark-color-bg-green);
  --color-pill-green: var(--notion-dark-color-pill-green);
  --color-text-blue: var(--notion-dark-color-text-blue);
  --color-bg-blue: var(--notion-dark-color-bg-blue);
  --color-pill-blue: var(--notion-dark-color-pill-blue);
  --color-text-purple: var(--notion-dark-color-text-purple);
  --color-bg-purple: var(--notion-dark-color-bg-purple);
  --color-pill-purple: var(--notion-dark-color-pill-purple);
  --color-text-pink: var(--notion-dark-color-text-pink);
  --color-bg-pink: var(--notion-dark-color-bg-pink);
  --color-pill-pink: var(--notion-dark-color-pill-pink);
  --color-text-red: var(--notion-dark-color-text-red);
  --color-bg-red: var(--notion-dark-color-bg-red);
  --color-pill-red: var(--notion-dark-color-pill-red);
  --color-bg-callout: var(--notion-dark-color-bg-callout);
  --color-code: var(--notion-dark-color-code);
  --color-border: var(--notion-dark-color-border);
  --color-bg-inline-code: var(--notion-dark-color-bg-inline-code);
  --color-link-hover: var(--notion-dark-color-link-hover);
  --color-color-table-of-contents: var(--notion-dark-color-table-of-contents);
  --color-th-background: var(--notion-dark-color-th-background);
  --color-table-border: var(--notion-dark-color-table-border);
  --color-caption: var(--notion-dark-color-caption);
  --color-property-icon: var(--notion-dark-color-property-icon);
  --color-bg-gallery-card: var(--notion-dark-color-bg-gallery-card);
}
.notion-caption {
  max-inline-size: 100%;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 14px;
  line-height: 1.4;
  padding-top: 6px;
  padding-bottom: 6px;
  padding-left: 2px;
  color: var(--color-caption);
}
/* stylelint-disable selector-class-pattern */
.notion-color-default {
  color: unset;
}
.notion-color-gray {
  color: var(--color-text-gray);
}
.notion-color-brown {
  color: var(--color-text-brown);
}
.notion-color-orange {
  color: var(--color-text-orange);
}
.notion-color-yellow {
  color: var(--color-text-yellow);
}
.notion-color-green {
  color: var(--color-text-green);
}
.notion-color-blue {
  color: var(--color-text-blue);
}
.notion-color-purple {
  color: var(--color-text-purple);
}
.notion-color-pink {
  color: var(--color-text-pink);
}
.notion-color-red {
  color: var(--color-text-red);
}
.notion-color-default_background {
  background-color: unset;
}
.notion-color-gray_background {
  background-color: var(--color-bg-gray);
}
.notion-color-brown_background {
  background-color: var(--color-bg-brown);
}
.notion-color-orange_background {
  background-color: var(--color-bg-orange);
}
.notion-color-yellow_background {
  background-color: var(--color-bg-yellow);
}
.notion-color-green_background {
  background-color: var(--color-bg-green);
}
.notion-color-blue_background {
  background-color: var(--color-bg-blue);
}
.notion-color-purple_background {
  background-color: var(--color-bg-purple);
}
.notion-color-pink_background {
  background-color: var(--color-bg-pink);
}
.notion-color-red_background {
  background-color: var(--color-bg-red);
}
.notion-pill-color-default {
  background-color: var(--color-pill-default);
}
.notion-pill-color-gray {
  background-color: var(--color-pill-gray);
}
.notion-pill-color-brown {
  background-color: var(--color-pill-brown);
}
.notion-pill-color-orange {
  background-color: var(--color-pill-orange);
}
.notion-pill-color-yellow {
  background-color: var(--color-pill-yellow);
}
.notion-pill-color-green {
  background-color: var(--color-pill-green);
}
.notion-pill-color-blue {
  background-color: var(--color-pill-blue);
}
.notion-pill-color-purple {
  background-color: var(--color-pill-purple);
}
.notion-pill-color-pink {
  background-color: var(--color-pill-pink);
}
.notion-pill-color-red {
  background-color: var(--color-pill-red);
}
.notion-cover {
  block-size: 100%;
  inline-size: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.notion-file-icon {
  display: inline-block;
  block-size: 1.25em;
  inline-size: 1.25em;
}
.notion-file-icon:has(img) {
    vertical-align: text-top;
  }
.notion-file-icon img {
    block-size: 100%;
    inline-size: 100%;
    max-inline-size: 100%;
    aspect-ratio: 1;
    border-radius: 0.25em;
  }
.notion-icon {
  display: inline-block;
  block-size: 1.25em;
  inline-size: 1.25em;
  font-size: 1.25em;
  color: white;
}
.notion-icon:has(img) {
    vertical-align: text-top;
  }
.notion-icon img {
    block-size: 100%;
    inline-size: 100%;
    max-inline-size: 100%;
    aspect-ratio: 1;
    border-radius: 0.25em;
  }
.notion-internal-link {
  color: inherit;
  fill: inherit;
}
.notion-internal-link:hover {
    background-color: var(--notion-dark-color-link-hover);
  }
.notion-title {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.2;
  margin-block: 1.5rem;
}
.notion-block-list {
  color: var(--color-text-default);
  background-color: var(--color-bg-default);
  line-height: var(--notion-line-height);
  fill: var(--notion-fill);
  overflow-wrap: var(--notion-overflow-wrap);
}
.notion-block-list .notion-block-list {
    background-color: transparent;
  }
.notion-block {
  padding: 3px 2px;
}
/* .notion-audio {} */
.notion-bookmark a {
    color: inherit;
    text-decoration: none;
  }
.notion-bookmark-container {
  container-type: inline-size;
  display: flex;
  border: 1px solid var(--color-border);
  border-radius: 3px;
  overflow: hidden;
  transition: background-color 20ms ease-in 0s;
  max-block-size: 10rem;
}
.notion-bookmark-container:hover {
    background-color: var(--color-link-hover);
  }
.notion-bookmark-content {
  flex: 4 1 180px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.notion-bookmark-title {
  margin: 0 0 2px;
  line-height: 1.25rem;
  font-size: 1rem;
}
.notion-bookmark-description {
  font-size: 0.75rem;
  line-height: 1rem;
  opacity: 0.7;
  height: 2rem;
  overflow: hidden;
  margin-block: auto;
}
.notion-bookmark-url {
  display: flex;
  align-items: center;
}
.notion-bookmark-favicon {
  display: inline-flex;
  width: 0.75em;
  height: 0.75em;
  align-items: center;
  justify-content: center;
}
.notion-bookmark-favicon img {
    block-size: 100%;
    max-inline-size: 100%;
  }
.notion-bookmark-link-url {
  font-size: 0.75rem;
  margin-inline-start: 0.5rem;
}
.notion-bookmark-cover {
  max-block-size: 100%;
  max-inline-size: 100%;
  flex: 1 1 180px;
}
.notion-bookmark-cover img {
    block-size: 100%;
    inline-size: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }
@container (width <= 480px) {
  .notion-bookmark-cover {
    display: none;
  }
}
.notion-breadcrumb {
  display: flex;
  align-items: center;
}
.notion-breadcrumb .notion-internal-link {
    color: inherit;
    fill: inherit;
    text-decoration: none;
  }
.notion-breadcrumb-title {
  display: flex;
  align-items: center;
  transition: background-color 20ms ease-in 0s;
  padding: 0.1rem 0.25rem;
  border-radius: 0.25rem;
}
.notion-breadcrumb-title:hover {
    background-color: var(--color-link-hover);
  }
.notion-bulleted-list {
  padding-inline-start: 1.5em;
  list-style-type: disc;
}
/* stylelint-disable selector-class-pattern */
.notion-callout {
  display: flex;
  margin-top: 2px;
  margin-bottom: 4px;
  overflow: hidden;
  padding: 1rem;
  border-radius: 3px;
  box-shadow: none;
  align-items: flex-start;
  background-color: var(--color-bg-callout);
}
.notion-callout .notion-block-list {
    background-color: var(--color-bg-callout);
  }
.notion-callout-icon .notion-icon {
    display: flex;
    align-items: center;
    justify-content: center;
  }
.notion-callout-icon img {
    block-size: auto;
    max-inline-size: 100%;
    aspect-ratio: 1;
    border-radius: 0.25em;
  }
.notion-callout-content {
  display: flex;
  flex-direction: column;
  margin-inline-start: 8px;
  overflow: hidden;
  width: 100%;
}
.notion-child-database {

  transition: background-color 20ms ease-in 0s;
  border-radius: 0.25rem;
}
.notion-child-database .notion-internal-link {
    color: inherit;
    fill: inherit;
  }
.notion-child-database:hover {
    background-color: var(--color-link-hover);
  }
.notion-child-database-title {
  opacity: 0.7;
}
.notion-child-page {

  transition: background-color 20ms ease-in 0s;
  border-radius: 0.25rem;
}
.notion-child-page .notion-internal-link {
    color: inherit;
    fill: inherit;
  }
.notion-child-page:hover {
    background-color: var(--color-link-hover);
  }
.notion-child-page-title {
  opacity: 0.7;
}
/* code block */
.notion-code {
  padding-block-start: 0.5rem;
  background-color: var(--color-code);
}
.notion-code .notion-code-header {
    display: flex;
    padding-inline: 0.75rem;
  }
.notion-code .notion-code-langage {
    color: #999;
    font-size: 0.75rem;
    text-transform: capitalize;
  }
.notion-code .notion-code-body {
    margin-block-start: 0.75rem;
    margin-inline: 1.5rem;
  }
.notion-code .notion-code-caption {
    padding-inline: 0.75rem;
  }
.notion-column-list {
  display: flex;
  -moz-column-gap: 1rem;
       column-gap: 1rem;
}
.notion-column-list > .notion-column {
    flex-grow: 1;
  }
.notion-divider {
  padding: 0;
  margin: 0;
  border: 1px solid var(--color-border);
}
.notion-embed iframe {
    block-size: auto;
    max-inline-size: 100%;
  }
.notion-file {
  display: flex;
  color: inherit;
  fill: inherit;
  border-radius: 0.25rem;
  padding-block: 0.1rem;
  transition: background-color 20ms ease-in 0s;
}
.notion-file:hover {
    background-color: var(--color-link-hover);
  }
.notion-file-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
h1.notion-heading-1,
.notion-heading-1 h1 {
  font-size: 2em;
  margin-block: 0.67em;
  font-weight: bold;
}
h2.notion-heading-2,
.notion-heading-2 h2 {
  font-size: 1.5em;
  margin-block: 0.83em;
  font-weight: bold;
}
h3.notion-heading-3,
.notion-heading-3 h3 {
  font-size: 1.17em;
  margin-block: 1em;
  font-weight: bold;
}
.notion-image img {
  display: block;
  max-inline-size: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  border-radius: 1px;
}
.notion-link-preview a {
    color: inherit;
    text-decoration: none;
  }
.notion-link-preview-container {
  display: flex;
  border: 1px solid var(--color-border);
  border-radius: 3px;
  overflow: hidden;
  transition: background-color 20ms ease-in 0s;
  max-block-size: 10rem;
}
.notion-link-preview-container:hover {
    background-color: var(--color-link-hover);
  }
.notion-link-preview-content {
  flex: 4 1 180px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.notion-link-preview-title {
  margin: 0 0 2px;
  line-height: 1.25rem;
  font-size: 1rem;
}
.notion-link-preview-description {
  font-size: 0.75rem;
  line-height: 1rem;
  opacity: 0.7;
  height: 2rem;
  overflow: hidden;
  margin-block: auto;
}
.notion-link-preview-url {
  display: flex;
  align-items: center;
}
.notion-link-preview-favicon {
  display: inline-flex;
  width: 0.75em;
  height: 0.75em;
  align-items: center;
  justify-content: center;
}
.notion-link-preview-favicon img {
    max-inline-size: 100%;
  }
.notion-link-preview-link-url {
  font-size: 0.75rem;
  margin-inline-start: 0.5rem;
}
.notion-link-preview-cover {
  max-block-size: 100%;
  max-inline-size: 100%;
  flex: 1 1 180px;
}
.notion-link-preview-cover img {
    block-size: 100%;
    inline-size: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }
.notion-link-to-page {

  transition: background-color 20ms ease-in 0s;
  border-radius: 0.25rem;
}
.notion-link-to-page .notion-internal-link {
    color: inherit;
    fill: inherit;
  }
.notion-link-to-page:hover {
    background-color: var(--color-link-hover);
  }
.notion-link-to-page-title {
  opacity: 0.7;
}
.notion-numbered-list {
  padding-inline-start: 1.5em;
  list-style-type: decimal;
}
.notion-numbered-list ol {
    list-style-type: lower-alpha;
  }
.notion-numbered-list ol ol {
      list-style-type: lower-roman;
    }
.notion-numbered-list ol ol ol {
        list-style-type: decimal;
      }
.notion-numbered-list ol ol ol ol {
          list-style-type: lower-alpha;
        }
.notion-numbered-list ol ol ol ol ol {
            list-style-type: lower-roman;
          }
.notion-numbered-list ol ol ol ol ol ol {
              list-style-type: decimal;
            }
.notion-numbered-list ol ol ol ol ol ol ol {
                list-style-type: lower-alpha;
              }
.notion-numbered-list ol ol ol ol ol ol ol ol {
                  list-style-type: lower-roman;
                }
.notion-numbered-list ol ol ol ol ol ol ol ol ol {
                    list-style-type: decimal;
                  }
.notion-paragraph {
  min-block-size: 1.5rem;
}
.notion-paragraph p {
    margin: 0;
  }
.notion-paragraph-children {
  margin-inline-start: 1.5rem;
}
.notion-pdf object {
    max-inline-size: 100%;
  }
.notion-pdf object a {
      color: revert;
    }
.notion-quote {
  margin: 0 1rem 0 0;
  border-inline-start: 3px solid currentcolor;
  padding-inline-start: 0.5rem;
  padding-block: 3px;
}
.notion-to-do-content {
  display: flex;
  padding-block: 3px;
}
.notion-to-do-icon {
  display: inline-flex;
  width: 1.5em;
  height: 1.5em;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.notion-checkbox {
  display: inline-flex;
  align-items: center;
}
.notion-checkbox svg {
    width: 1rem;
    height: 1rem;
    fill: inherit;
  }
.notion-checkbox.checked {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    background: rgb(35 131 226);
  }
.notion-checkbox.checked svg {
      width: 0.75em;
      height: 0.75em;
      fill: #fff;
    }
.notion-to-do-text {
  display: inline-flex;
  align-items: center;
}
.notion-to-do-text.checked {
    opacity: 0.5;
    text-decoration: line-through;
  }
.notion-to-do-children {
  padding-inline-start: 1.5rem;
}
.notion-table-block {
  border-collapse: collapse;
  border-spacing: 0;
}
.notion-table-block th,
  .notion-table-block td > * {
    padding: 0.2rem 0.8rem;
  }
.notion-table-block th {
    margin: 0;
    padding: 0.3rem;
    font-weight: 500;
    text-align: left;
    background-color: var(--color-th-background);
    border: 1px solid var(--color-table-border);
  }
.notion-table-block td {
    margin: 0;
    padding: 0.3rem;
    text-align: left;
    border: 1px solid var(--color-table-border);
  }
/* stylelint-disable selector-class-pattern */
.notion-table-of-contents {
  color: var(--color-table-of-contents);
  fill: var(--color-table-of-contents);
}
.notion-table-of-contents a {
    color: inherit;
    fill: inherit;
    opacity: 0.7;
  }
.notion-table-of-contents > * + * {
  padding-top: 0.2rem;
}
.notion-table-of-contents-item {
  padding-inline-start: 2px;
  transition: background-color 20ms ease-in 0s;
}
.notion-table-of-contents-item:hover {
    background-color: var(--color-link-hover);
  }
.notion-table-of-contents-item > .notion-table-of-contents-item-heading_1 {
    padding-inline-start: calc(1rem * 0);
  }
.notion-table-of-contents-item > .notion-table-of-contents-item-heading_2 {
    padding-inline-start: calc(1rem * 1);
  }
.notion-table-of-contents-item > .notion-table-of-contents-item-heading_3 {
    padding-inline-start: calc(1rem * 2);
  }
.notion-toggle-summary {
  cursor: pointer;
}
.notion-toggle-summary h1,
  .notion-toggle-summary h2,
  .notion-toggle-summary h3 {
    display: inline-block;
    vertical-align: middle;
  }
.notion-toggle-details {
  padding-inline-start: 1.5rem;
}
.notion-video {
  max-inline-size: 560px;
}
.notion-video video {
    block-size: auto;
    max-inline-size: 100%;
  }
.notion-video iframe {
    max-inline-size: 100%;
  }
.notion-database-mention-rich-text,
.notion-page-mention-rich-text {
  color: inherit;
  fill: inherit;
  transition: background-color 20ms ease-in 0s;
  border-radius: 0.25rem;
}
.notion-database-mention-rich-text .notion-icon, .notion-page-mention-rich-text .notion-icon {
    block-size: 1rem;
    inline-size: 1rem;
    margin-inline-end: 0.25rem;
  }
.notion-database-mention-rich-text .notion-page-mention-title, .notion-page-mention-rich-text .notion-page-mention-title {
    opacity: 0.7;
  }
.notion-database-mention-rich-text:hover, .notion-page-mention-rich-text:hover {
    background-color: var(--color-link-hover);
  }
.notion-link-preview-mention-rich-text {
  color: inherit;
  fill: inherit;
  opacity: 0.7;
  transition: background-color 20ms ease-in 0s;
  border-radius: 0.25rem;
}
.notion-link-preview-mention-rich-text:hover {
    background-color: var(--color-link-hover);
  }
.notion-user-mention-rich-text-avatar {
  block-size: 1rem;
  inline-size: 1rem;
  aspect-ratio: 1;
  border-radius: 50%;
  margin-inline-end: 0.2rem;
  vertical-align: text-top;
}
.notion-user-mention-rich-text-avatar img {
    display: initial;
  }
.notion-rich-text-type-text {
  white-space: break-spaces;
}
.notion-inline-code {
  background: var(--color-bg-inline-code);
  color: rgb(235 87 87);
  border-radius: 0.25em;
  padding: 0.2em 0.4em;
  line-height: normal;
  font-size: 85%;
}
.notion-link {
  color: inherit;
  fill: inherit;
  opacity: 0.7;
}
.notion-database {
  display: grid;
  grid-template-columns:
    [full-start] var(--notion-margin) [content-start] 1fr [content-end] var(
      --notion-margin
    )
    [full-end];
  color: var(--color-text-default);
  background-color: var(--color-bg-default);
  line-height: var(--notion-line-height);
  fill: var(--notion-fill);
  overflow-wrap: var(--notion-overflow-wrap);
}
.notion-database-cover {
  grid-column: full;
  block-size: 30vh;
  inline-size: 100%;
  -o-object-position: center 0%;
     object-position: center 0%;
  -o-object-fit: cover;
     object-fit: cover;
}
.notion-database-cover:has(+ .notion-database-icon) {
    margin-block-end: -5rem;
  }
.notion-database-cover ~ * {
    grid-column: content;
  }
.notion-database-icon {
  grid-column: content;
  display: block;
  font-size: 5rem;
}
.notion-database-title {
  grid-column: content;
}
.notion-database-description {
  grid-column: content;
  font-size: 0.875rem;
  padding-block-end: 1.5rem;
}
.notion-database-collection {
  grid-column: content;
  overflow-x: auto;
}
.notion-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  gap: 1rem;
}
.notion-gallery-card {
  grid-template-rows: subgrid;
  grid-row: span 3;
  display: grid;
  grid-template-columns: [full-start] 1rem [content-start] 1fr [content-end] 1rem [full-end];
  row-gap: 0.5rem;
  overflow: hidden;
  padding-bottom: 1rem;
  border-radius: 0.3rem;
  box-shadow:
    rgb(15 15 15 / 10%) 0 0 0 1px,
    rgb(15 15 15 / 10%) 0 2px 4px;
  background: var(--color-bg-gallery-card);
  position: relative;
}
.notion-gallery-card > .notion-internal-link {
    position: absolute;
    inset: 0;
  }
.notion-gallery-card .notion-relation .notion-internal-link {
    z-index: 1;
  }
.notion-gallery-card-cover {
  grid-column: full;
  aspect-ratio: 16/9;
  overflow: hidden;
  min-height: 10rem;
}
.notion-gallery-card-title-icon {
  vertical-align: top;
}
.notion-gallery-card-title {
  grid-column: 2 / span 1;
  display: inline-flex;
  align-items: flex-start;
  font-size: 0.9rem;
  font-weight: 500;
}
.notion-gallery-card-title .notion-icon {
    font-size: 1em;
  }
.notion-gallery-card-properties {
  grid-column: content;
  font-size: 0.8rem;
}
.notion-list {
  display: flex;
  flex-flow: column nowrap;
}
/* list-item */
.notion-list-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  overflow: hidden;
  min-block-size: 2rem;
  background: 20ms ease-in 0s;
}
.notion-list-item:hover {
    background-color: var(--color-link-hover);
  }
.notion-list-item > a {
    display: contents;
  }
.notion-list-item-title {
  display: flex;
  align-items: center;
  flex: 1 1 15em;
  margin-inline-end: auto;
  overflow: hidden;
  font-weight: 500;
  line-height: 1.75;
}
.notion-list-item-title .notion-icon {
    font-size: 1em;
    inline-size: 1.25em;
    block-size: 1.25em;
  }
.notion-list-item-title .notion-icon:has(svg, img) {
      display: block;
    }
.notion-list-item-title-icon {
  margin-inline-end: 0.25em;
}
.notion-list-item-title-text {
  opacity: 0.7;
  text-decoration-line: underline;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.notion-list-item-properties .notion-properties {
    display: flex;
    align-items: center;
  }
.notion-list-item-properties .notion-property {
    padding-inline: 0.5em;
    font-size: 0.75em;
    white-space: nowrap;
  }
.notion-list-item-properties .notion-multi-select {
    flex-wrap: nowrap;
  }
.notion-table {
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 0.875rem;
}
.notion-table tbody {
    vertical-align: top;
  }
.notion-table th {
    margin: 0;
    font-weight: 500;
    text-align: left;
    border: 1px solid var(--color-table-border);
    white-space: nowrap;
  }
.notion-table th:first-child {
      border-left: 0;
    }
.notion-table th:last-child {
      border-right: 0;
    }
.notion-table th div {
      padding: 0.2rem 0.5rem;
      inline-size: 12rem;
      min-inline-size: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      resize: horizontal;
    }
.notion-table th div::-webkit-resizer {
        background: transparent;
      }
.notion-table td {
    margin: 0;
    padding: 0.2rem 0.5rem;
    text-align: left;
    border: 1px solid var(--color-table-border);
    word-break: break-all;
    line-break: anywhere;
    white-space: break-spaces;
  }
.notion-table td:first-child {
      border-left: 0;
    }
.notion-table td:last-child {
      border-right: 0;
    }
.notion-table .notion-icon {
    font-size: 1em;
  }
.notion-page {
  display: grid;
  grid-template-columns:
    [full-start] var(--notion-margin) [content-start] 1fr [content-end] var(
      --notion-margin
    )
    [full-end];
  color: var(--color-text-default);
  background-color: var(--color-bg-default);
  line-height: var(--notion-line-height);
  fill: var(--notion-fill);
  overflow-wrap: var(--notion-overflow-wrap);
}
.notion-page .notion-block-list {
    grid-column: content;
  }
.notion-page-cover {
  grid-column: full;
  block-size: 30vh;
  inline-size: 100%;
  -o-object-position: center 0%;
     object-position: center 0%;
  -o-object-fit: cover;
     object-fit: cover;
}
.notion-page-cover:has(+ .notion-page-icon) {
    margin-block-end: -5rem;
  }
.notion-page-icon {
  grid-column: content;
  display: block;
  font-size: 5rem;
}
.notion-page-title {
  grid-column: content;
}
.notion-page-properties {
  grid-column: content;
}
.notion-page-divider {
  grid-column: content;
  inline-size: 100%;
  border: 1px solid var(--color-border);
  margin-block: 2rem 1rem;
}
.notion-email {
  color: inherit;
  opacity: 0.7;
}
.notion-email a {
    color: inherit;
  }
.notion-property-item.notion-file {
  display: flex;
  gap: 0.5rem 0.25rem;
  flex-wrap: wrap;
  word-break: break-all;
}
.notion-phone-number {
  color: inherit;
  opacity: 0.7;
}
.notion-phone-number a {
    color: inherit;
  }
.notion-property {
  display: flex;
  padding-block: 0.25rem;
}
.notion-property-name {
  flex: 0 0 10em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.notion-property-item {
  flex: 1 1 auto;
}
.notion-pill {
  padding-inline: 0.25rem;
  border-radius: 3px;
  white-space: nowrap;
}
.notion-property-icon {
  width: 16px;
  height: 16px;
  display: inline-block;
  vertical-align: text-top;
  margin-inline-end: 0.25rem;
  fill: var(--color-property-icon);
}
.notion-multi-select {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.notion-relation {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
}
.notion-relation-item {
  display: flex;
  align-items: center;
  padding: 0.1rem 0.25rem;
}
.notion-select {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.notion-status {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.notion-url {
  color: inherit;
  opacity: 0.7;
}
.notion-url a {
    color: inherit;
  }