/* Primitives */

* {
  box-sizing: border-box;
  /* 使得元素的宽度和高度包括内边距和边框，但不包括外边距 */
}

*::selection {
  /* 选中文本的样式 */
  background: rgba(45, 170, 219, 0.3);
  /* 选中文本的背景色 */
}

:root {
  /* 根元素 */
  --color-text-default: rgb(55, 53, 47);
  --color-text-default-light: rgba(55, 53, 47, 0.6);
  --color-text-gray: rgb(155, 154, 151);
  --color-text-brown: rgb(100, 71, 58);
  --color-text-orange: rgb(217, 115, 13);
  --color-text-yellow: rgb(223, 171, 1);
  --color-text-green: rgb(15, 123, 108);
  --color-text-blue: rgb(11, 110, 153);
  --color-text-purple: rgb(105, 64, 165);
  --color-text-pink: rgb(173, 26, 114);
  --color-text-red: rgb(224, 62, 62);
  --color-bg-default: rgb(255, 255, 255);
  --color-bg-gray: rgb(235, 236, 237);
  --color-bg-gray-light: rgba(235, 236, 237, 0.3);
  --color-bg-brown: rgb(233, 229, 227);
  --color-bg-brown-light: rgba(233, 229, 227, 0.3);
  --color-bg-orange: rgb(250, 235, 221);
  --color-bg-orange-light: rgba(250, 235, 221, 0.3);
  --color-bg-yellow: rgb(251, 243, 219);
  --color-bg-yellow-light: rgba(251, 243, 219, 0.3);
  --color-bg-green: rgb(221, 237, 234);
  --color-bg-green-light: rgba(221, 237, 234, 0.3);
  --color-bg-blue: rgb(221, 235, 241);
  --color-bg-blue-light: rgba(221, 235, 241, 0.3);
  --color-bg-purple: rgb(234, 228, 242);
  --color-bg-purple-light: rgba(234, 228, 242, 0.3);
  --color-bg-pink: rgb(244, 223, 235);
  --color-bg-pink-light: rgba(244, 223, 235, 0.3);
  --color-bg-red: rgb(251, 228, 228);
  --color-bg-red-light: rgba(251, 228, 228, 0.3);
  --color-pill-default: rgba(206, 205, 202, 0.5);
  --color-pill-gray: rgba(155, 154, 151, 0.4);
  --color-pill-brown: rgba(140, 46, 0, 0.2);
  --color-pill-orange: rgba(245, 93, 0, 0.2);
  --color-pill-yellow: rgba(233, 168, 0, 0.2);
  --color-pill-green: rgba(0, 135, 107, 0.2);
  --color-pill-blue: rgba(0, 120, 223, 0.2);
  --color-pill-purple: rgba(103, 36, 222, 0.2);
  --color-pill-pink: rgba(221, 0, 129, 0.2);
  --color-pill-red: rgba(255, 0, 26, 0.2);
  --color-ui-hover-bg: rgba(55, 53, 47, 0.08);
  --column-spacing: 46px;
}

body {
  /* body元素 */
  color: var(--color-text-default);
  /* 文本颜色 */
  fill: currentColor;
  /* 填充颜色 */
  font-family: 'Source Sans Pro', -apple-system, 'BlinkMacSystemFont',
    'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'Noto Sans', sans-serif,
    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  margin: 0;
}

code {
  /* code元素 */
  /* Use monospace before Courier so font looks better on Android Chrome. */
  font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
  -webkit-user-select: all;
  user-select: all;
  /* font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace, Courier; */
}


p {
  /* p元素 */
  margin: 0;
}

/* Anchor */

.Anchor {
  /* 锚点 */
  color: inherit;
  /* 颜色 */
  text-decoration: none;
  /* 文本装饰 */
  padding-right: 4px;
  /* 右边距 */
  margin-left: -20px;
  visibility: hidden;
}


.Audio {
  /* 音频 */
  display: block;
  pointer-events: auto;
  width: 75%;
  position: relative;
}

/* Bookmark */

.Bookmark {
  /* 书签 */
  margin: 4px 0;
  border: 1px solid rgba(55, 53, 47, 0.16);
  border-radius: 5px;
  padding: 12px 14px 14px;
  transition: background 120ms ease-in 0s;
}

.Bookmark:hover {
  /* 鼠标悬停效果 */
  background: var(--color-ui-hover-bg);
}

.Bookmark>a {
  /* 书签的链接 */
  color: inherit;
  text-decoration: none;
}

.Bookmark__Title {
  /* 书签的标题 */
  margin: 0;
  margin-bottom: 2px;
  font-size: 0.875rem;
  font-weight: normal;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.Bookmark__Desc {
  /* 书签的描述 */
  margin: 0;
  font-size: 0.75rem;
  line-height: 1rem;
  opacity: 0.6;
  height: 2rem;
  overflow: hidden;
}

.Bookmark__Link {
  /* 书签的链接 */
  margin: 0;
  margin-top: 6px;
  font-size: 0.75rem;
  line-height: 1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* BulletedList */

.BulletedListWrapper {
  /* 无序列表 */
  margin: 2px 0;
  padding-left: calc(1.5em + 4px);
  line-height: 1.5;
  list-style-type: disc;
}

.BulletedList {
  /* 无序列表 */
  margin: 2px 0;
  padding-top: 3px;
  padding-bottom: 3px;
}

/* Callout */

.Callout {
  /* Callout */
  display: flex;
  border-radius: 5px;
  padding: 16px 16px 16px 12px;
  margin: 4px 0;
  background: var(--color-bg-gray-light);
}

.Callout__Icon {
  /* Callout的图标 */
  width: 1.5em;
  line-height: 1.5em;
}

.Callout__Content {
  /* Callout的内容 */
  margin-left: 8px;
}

/* Code */

pre.Code {
  /* 代码 */
  border-radius: 5px;
  background-color: rgb(247, 246, 243);
  margin: 10px 0;
  padding: 12px 16px;
  overflow: auto;
}

pre.Code code {
  /* 代码 */
  background-color: rgb(247, 246, 243);
  color: rgb(55, 53, 47);
  /* font-size: 0.9em; */
  font-size: 0.75em;
  line-height: normal;
  padding: 0;
  word-wrap: break-word;
  /* 使得单词能够换行 */
  tab-size: 2;
}

.Code.Code--NoWrap .SemanticString {
  /* 代码--不换行 */
  white-space: pre;
}

/* Collection */

.CollectionInline>h3 {
  /* 内联集合的标题 */
  line-height: 1.75;
  font-size: 1.25rem;
  font-weight: 700;
  margin-top: 0.5rem;
  margin-bottom: 1px;
  padding: 3px 2px;
}

.CollectionInline>h3:hover>.Anchor {
  /* 内联集合的标题 */
  visibility: visible;
}

.Table {
  /* 表格 */
  overflow-x: auto;
}

.Table>table {
  /* 表格 */
  width: 100%;
  font-size: 0.875rem;
  /* No double border */
  border-collapse: collapse;
  /* Force the table respects widths set on <th> */
  table-layout: fixed;
  /* Make space between table and scrollbar */
  margin-bottom: 10px;
}

.Table>table td,
/* 表格的单元格 */
.Table>table th {
  /* For <th> and unknown <td> */
  padding: 0 8px;
  height: 2rem;
  border: 1px solid rgba(55, 53, 47, 0.09);
  overflow: hidden;
  word-break: break-word;
}

.Table>table td:first-child,
/* 表格的单元格 */
.Table>table th:first-child {
  border-left: none;
}

.Table>table td:last-child,
/* 表格的单元格 */
.Table>table th:last-child {
  border-right: none;
}

.Table>table th {
  /* 表格的表头 */
  text-align: left;
  font-weight: normal;
  color: var(--color-text-default-light);
  /* Default width, which may be overridden by inline style attr. */
  width: 200px;
}

.Table__CellTitle>a {
  /* 表格的单元格的标题的链接 */
  color: inherit;
  text-decoration: none;
  border-bottom: 2px solid hsl(45, 8%, 85%);
}

.Table__CellTitle>a:hover {
  /* 表格的单元格的标题的链接的鼠标悬停效果 */
  border-bottom: 2px solid hsl(45, 8%, 55%);
}

.Table__CellText {
  /* 表格的单元格的文本 */
  padding: 6px 8px;
  line-height: 1.5;
}

.Table__CellSelect {
  /* 表格的单元格的选择 */
  /* 3px + 3px (margin of span) = 6px (desired) */
  padding: 3px 8px;
}

.Table__CellCheckbox {
  /* 表格的单元格的复选框 */
  padding: 6px 8px;
}

.Table__CellCheckbox>div {
  /* 表格的单元格的复选框的div */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
}

.Table__CellCheckbox--No svg {
  /* 表格的单元格的复选框--否 */
  width: 100%;
  height: 100%;
  display: block;
  flex-shrink: 0;
  backface-visibility: hidden;
}

.Table__CellCheckbox--Yes svg {
  /* 表格的单元格的复选框--是 */
  width: 12px;
  height: 12px;
  display: block;
  fill: white;
  flex-shrink: 0;
  backface-visibility: hidden;
}

.Gallery {
  /* 图库 */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  grid-auto-rows: 1fr;
  gap: 16px;
  border-top: 1px solid rgba(55, 53, 47, 0.16);
  padding-top: 16px;
  padding-bottom: 4px;
}

.Gallery__Item {
  /* 图库的项目 */
  box-shadow: rgba(15, 15, 15, 0.1) 0px 0px 0px 1px,
    rgba(15, 15, 15, 0.1) 0px 2px 4px;
  border-radius: 5px;
  transition: background-color 120ms ease-in 0s;
  position: relative;
  /* 10:7 */
  /* padding-top: 70%; */
}

.Gallery__Item:hover {
  /* 图库的项目的鼠标悬停效果 */
  background: rgba(55, 53, 47, 0.03);
}

.Gallery__Item>a {
  /* 图库的项目的链接 */
  color: inherit;
  text-decoration: none;
}

/* .Gallery__Item>a>div { 
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
} */

/* This is the key to make the layout robust. */

/* .Gallery__Item>a>div>div {
  grid-item-title has padding-top 8px, padding-bottom 10px, and its line-height.
     Since we can not get line-height with CSS, so just assign a large enough value. 
  height: calc(100% - 18px - 2rem);
} */

.Gallery__Item__Cover {
  /* 图库的项目的封面 */
  box-shadow: rgba(55, 53, 47, 0.09) 0px -1px 0px 0px inset;
  height: 200px;
}

.Gallery__Item__Cover>img {
  /* 图库的项目的封面的图片 */
  width: 100%;
  height: 100%;
  max-height: 200px;
  border-radius: 5px 5px 0 0;
  object-fit: cover;
  object-position: center 50%;
  padding-bottom: 1px;
}

.Gallery__Item__Cover--Contain>img {
  /* 图库的项目的封面--包含的图片 */
  object-fit: contain;
}

.Gallery__Item__Title {
  /* 图库的项目的标题 */
  padding: 8px 10px 6px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.Gallery__Item__Title .SemanticString {
  /* 图库的项目的标题的语义字符串 */
  white-space: nowrap;
}

.Gallery__Item__Property {
  /* 图库的项目的属性 */
  display: flex;
  align-items: center;
  font-size: 0.75rem;
  height: 1.5rem;
  white-space: nowrap;
  overflow: hidden;
  padding: 0px 10px;
}

.Gallery__Item__Property:last-child {
  /* 图库的项目的属性的最后一个子元素 */
  margin-bottom: 10px;
}

.Gallery__Item__PropertyText .SemanticString {
  /* 图库的项目的属性的文本的语义字符串 */
  white-space: nowrap;
}

@supports not (display: grid) {

  /* 不支持网格布局 */
  .Gallery__Item {
    margin-top: 16px;
  }
}

/* ColorfulBlock */

.ColorfulBlock--ColorDefault {
  /* 彩色块--默认颜色 */
  color: var(--color-text-default);
}

.ColorfulBlock--ColorGray {
  /* 彩色块--灰色 */
  color: var(--color-text-gray);
}

.ColorfulBlock--ColorBrown {
  color: var(--color-text-brown);
}

.ColorfulBlock--ColorOrange {
  color: var(--color-text-orange);
}

.ColorfulBlock--ColorYellow {
  color: var(--color-text-yellow);
}

.ColorfulBlock--ColorGreen {
  color: var(--color-text-green);
}

.ColorfulBlock--ColorBlue {
  color: var(--color-text-blue);
}

.ColorfulBlock--ColorPurple {
  color: var(--color-text-purple);
}

.ColorfulBlock--ColorPink {
  color: var(--color-text-pink);
}

.ColorfulBlock--ColorRed {
  color: var(--color-text-red);
}

.ColorfulBlock--BgDefault {
  /* 彩色块--默认背景色 */
  background: var(--color-bg-default);
}

.ColorfulBlock--BgGray {
  /* 彩色块--灰色背景色 */
  background: var(--color-bg-gray);
}

.ColorfulBlock--BgBrown {
  background: var(--color-bg-brown);
}

.ColorfulBlock--BgOrange {
  background: var(--color-bg-orange);
}

.ColorfulBlock--BgYellow {
  background: var(--color-bg-yellow);
}

.ColorfulBlock--BgGreen {
  background: var(--color-bg-green);
}

.ColorfulBlock--BgBlue {
  background: var(--color-bg-blue);
}

.ColorfulBlock--BgPurple {
  background: var(--color-bg-purple);
}

.ColorfulBlock--BgPink {
  background: var(--color-bg-pink);
}

.ColorfulBlock--BgRed {
  background: var(--color-bg-red);
}

/* ColumnList */

.ColumnList {
  /* 列表 */
  display: flex;
  flex-wrap: wrap;
}

.Column {
  /* 列 */
  padding: 12px 0;
  word-break: break-word;
}

.Column:not(:first-child) {
  /* 列 */
  margin-left: var(--column-spacing);
}

@media only screen and (max-width: 680px) {
  .Column {
    width: 100% !important;
    margin-left: 0 !important;
  }
}

/* Divider */

.Divider {
  /* 分割线 */
  width: 100%;
  height: 1px;
  visibility: visible;
  border-bottom: 1px solid rgba(55, 53, 47, 0.16);
}

.Divider2 {
  /* 这里 */
  width: 100%;
  height: calc(1.5rem + 10px);
  color: #1f2225;
  background-image: linear-gradient(to right,
      rgb(31, 34, 37) 25%,
      rgb(255, 255, 255) 0%);
  background-position: left center;
  background-size: 6px 1px;
  background-repeat: repeat-x;
}

/* Embed */

.Embed__Content {
  /* 嵌入的内容 */
  display: flex;
}

.Embed__Caption {
  /* 嵌入的标题 */
  padding: 6px 2px;
  color: var(--color-text-default-light);
  font-size: 0.875em;
}

.Embed__ResponsiveContainer {
  /* 嵌入的响应式容器 */
  position: relative;
  min-height: 100px;
  height: 0;
  margin: 0 auto;
}

.Embed__ResponsiveContainer>iframe {
  /* 嵌入的响应式容器的iframe */
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 1px;
  pointer-events: auto;
  background-color: rgb(247, 246, 245);
}

/* Equation */

.Equation {
  /* 公式 */
  margin: 4px 0;
  padding: 4px 8px;
}

/* File */

.File {
  /* 文件 */
  color: inherit;
  text-decoration: none;
}

.File>div {
  /* 文件的div */
  display: flex;
  padding: 5px 0;
  margin: 2px 0;
  border-radius: 5px;
  transition: background 120ms ease-in 0s;
}

.File>div:hover {
  /* 文件的div的鼠标悬停效果 */
  background: var(--color-ui-hover-bg);
}

.File__Icon {
  /* 文件的图标 */
  margin-left: 2px;
  margin-right: 4px;
  width: 1.5em;
  text-align: center;
}

.File__Title {
  /* 文件的标题 */
  line-height: 1.5;
}

.File__Size {
  /* 文件的大小 */
  margin-left: 6px;
  color: var(--color-text-default-light);
  font-size: 0.75em;
}

/* Heading */

.Heading {
  /* 标题 */
  margin-bottom: 1px;
  padding: 3px 2px;
  scroll-margin-top: 80px;
}

/* Font-related CSS should be applied on ".SemanticString". */
.Heading .SemanticString {
  /* 标题的语义字符串 */
  font-weight: 600;
  letter-spacing: -0.01em;
}

.Heading:hover>.Anchor {
  /* 标题的鼠标悬停效果 */
  visibility: visible;
}

.Heading--1 .SemanticString {
  /* 标题1的语义字符串 */
  font-size: 1.5rem;
  line-height: 1.515;

}

.Heading--2 {
  /* 标题2 */
  margin-top: 1rem;
  scroll-margin-top: 80px;
}

.Heading--2 .SemanticString {
  /* 标题2的语义字符串 */
  font-size: 1.225rem;
  line-height: 1.538;
}

.Heading--3 {
  margin-top: 0.5rem;
  scroll-margin-top: 80px;
}

.Heading--3 .SemanticString {
  font-size: 1.125rem;
  line-height: 1.55;
}

.Heading--4 .SemanticString {
  font-size: 1rem;
  line-height: 1.563;
  scroll-margin-top: 80px;
}

.Heading--5 .SemanticString {
  font-size: 0.8125rem;
  line-height: 1.615;
  color: #888;
  scroll-margin-top: 80px;
}

.Column>.Heading:first-child {
  /* 列的第一个子元素的标题 */
  margin-top: 2px;
}

/* Icon */

.Icon {
  /* 图标 */
  /* For emoji */
  text-align: center;
  /* For image */
  border-radius: 3px;
}

/* Image */

.Image {
  /* 图片 */
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  align-self: center;
}

.Image--FullWidth {
  /* 图片--全宽 */
  width: calc(100vw - 15px);
}

.Image--Normal,
/* 图片--普通 */
.Image--PageWidth {
  max-width: 90%;
}

.Image--Normal {
  /* 图片--普通 */
  text-align: center;
}

.Image--PageWidth {
  /* 图片--页面宽度 */
  width: 100%;
}

.Image>figure {
  /* 图片的figure */
  margin: 0;
}

.Image>figure>figcaption {
  /* 图片的figure的figcaption */
  color: var(--color-text-default-light);
  font-size: 0.875rem;
  text-align: left;
}

.Image--FullWidth>figure img {
  /* 15px is scrollbar */
  width: calc(100vw - 15px);
  object-fit: cover;
}

.Image--FullWidth>figure>figcaption {
  padding: 6px 26px;
}

.Image--Normal>figure img,
.Image--PageWidth>figure img {
  max-width: 100%;
  object-fit: contain;
}

.Image--Normal>figure>figcaption,
.Image--PageWidth>figure>figcaption {
  padding: 6px 2px;
}

/* NumberedList */

.NumberedListWrapper {
  /* 有序列表 */
  margin: 2px 0;
  padding-left: calc(1.5em + 4px);
  line-height: 1.5;
}

.NumberedList {
  /* 有序列表 */
  margin: 2px 0;
  padding-top: 3px;
  padding-bottom: 3px;
}

/* Page */

.PageRoot {
  /* 页面根元素 */
  display: flex;
  flex-direction: column;
}

.PageRoot--FullWidth {
  width: 100%;
}

.Page {
  /* 页面 */
  color: inherit;
  text-decoration: none;
}

.Page>div {
  /* 页面的div */
  display: flex;
  padding: 3px 0;
  margin: 2px 0;
  border-radius: 5px;
  transition: background 120ms ease-in 0s;
}

.Page>div:hover {
  /* 页面的div的鼠标悬停效果 */
  background: var(--color-ui-hover-bg);
}

.Page__Icon {
  /* 页面的图标 */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5em;
  margin-left: 2px;
  margin-right: 4px;
}

.Page__Title .SemanticStringArray {
  border-bottom: 1px solid rgba(55, 53, 47, 0.16);
}

/* PDF */

.PDF__Content {
  /* PDF的内容 */
  text-align: center;
}

.PDF__Content>embed {
  /* PDF的内容的嵌入 */
  max-width: 100%;
}

.PDF__Caption {
  /* PDF的标题 */
  padding: 6px 2px;
  color: var(--color-text-default-light);
  font-size: 0.875em;
}

/* Pill */

.Pill {
  /* 药丸 */
  padding: 0 6px;
  border-radius: 3px;
  white-space: nowrap;
  display: inline-block;
  /* margin of inline-block does not collapse */
  margin: 3px 0;
  margin-right: 6px;
}

.Pill--ColorDefault {
  /* 药丸--默认颜色 */
  background: var(--color-pill-default);
}

.Pill--ColorGray {
  background: var(--color-pill-gray);
}

.Pill--ColorBrown {
  background: var(--color-pill-brown);
}

.Pill--ColorOrange {
  background: var(--color-pill-orange);
}

.Pill--ColorYellow {
  background: var(--color-pill-yellow);
}

.Pill--ColorGreen {
  background: var(--color-pill-green);
}

.Pill--ColorBlue {
  background: var(--color-pill-blue);
}

.Pill--ColorPurple {
  background: var(--color-pill-purple);
}

.Pill--ColorPink {
  background: var(--color-pill-pink);
}

.Pill--ColorRed {
  background: var(--color-pill-red);
}

/* Quote */

.Quote {
  /* 引用 */
  /* background: var(--color-bg-gray-light); */
  border-left: 3px solid currentcolor;
  /* border-radius: 5px; */
  margin: 0.5rem 0;
  padding-left: 14px;
  width: 100%;
}

/* SemanticStringArray */

.SemanticString {
  /* 语义字符串 */
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 12pt;
}

.SemanticString__Fragment--Link,
/* 语义字符串的片段--链接 */
.SemanticString__Fragment--Resource>a {
  /* 语义字符串的片段--资源的链接 */
  color: inherit;
  text-decoration: none;
  border-bottom: 2px solid hsl(45, 8%, 85%);
}

.SemanticString__Fragment--Link:hover,
.SemanticString__Fragment--Resource>a:hover {
  border-bottom: 2px solid hsl(45, 8%, 55%);
}

.SemanticString__Fragment--Code {
  border-radius: 5px;
  background-color: rgba(135, 131, 120, 0.15);
  font-size: 0.9em;
  padding: 0.2em 0.4em;
  word-break: break-word;
}

.SemanticString__Fragment--HighlightedBg,
/* 语义字符串的片段--高亮背景 */
.SemanticString__Fragment--HighlightedColor {
  background-color: inherit;
}

/* Code in highlighted should use the highlight background or color. */

.SemanticString__Fragment--HighlightedBg .SemanticString__Fragment--Code {
  background-color: inherit;
}

.SemanticString__Fragment--HighlightedColor .SemanticString__Fragment--Code {
  color: inherit;
}

.SemanticString__Fragment--ColorDefault {
  color: var(--color-text-default);
}

.SemanticString__Fragment--ColorGray {
  color: var(--color-text-gray);
}

.SemanticString__Fragment--ColorBrown {
  color: var(--color-text-brown);
}

.SemanticString__Fragment--ColorOrange {
  color: var(--color-text-orange);
}

.SemanticString__Fragment--ColorYellow {
  color: var(--color-text-yellow);
}

.SemanticString__Fragment--ColorGreen {
  color: var(--color-text-green);
}

.SemanticString__Fragment--ColorBlue {
  color: var(--color-text-blue);
}

.SemanticString__Fragment--ColorPurple {
  color: var(--color-text-purple);
}

.SemanticString__Fragment--ColorPink {
  color: var(--color-text-pink);
}

.SemanticString__Fragment--ColorRed {
  color: var(--color-text-red);
}

.SemanticString__Fragment--BgDefault {
  background: var(--color-bg-default);
}

.SemanticString__Fragment--BgGray {
  background: var(--color-bg-gray);
}

.SemanticString__Fragment--BgBrown {
  background: var(--color-bg-brown);
}

.SemanticString__Fragment--BgOrange {
  background: var(--color-bg-orange);
}

.SemanticString__Fragment--BgYellow {
  background: var(--color-bg-yellow);
}

.SemanticString__Fragment--BgGreen {
  background: var(--color-bg-green);
}

.SemanticString__Fragment--BgBlue {
  background: var(--color-bg-blue);
}

.SemanticString__Fragment--BgPurple {
  background: var(--color-bg-purple);
}

.SemanticString__Fragment--BgPink {
  background: var(--color-bg-pink);
}

.SemanticString__Fragment--BgRed {
  background: var(--color-bg-red);
}

.SemanticString__Fragment--Commented {
  background: rgba(255, 212, 0, 0.14);
  border-bottom: 2px solid rgb(255, 212, 0);
}

.SemanticString__Fragment--Individual,
.SemanticString__Fragment--Resource,
.SemanticString__Fragment--Date {
  color: var(--color-text-default-light);
}

/* Text */

.Text {
  /* 文本 */
  min-height: calc(1.5rem + 10px);
}

.Text__Content {
  /* 文本的内容 */
  padding: 3px 2px;
  margin: 2px 0;
}

.Text__Children {
  /* 文本的子元素 */
  margin-left: 1.5em;
}

/* ToDo */

.ToDo__Content {
  /* 待办事项的内容 */
  display: flex;
  padding: 3px 0;
  margin: 2px 0;
  line-height: 1.5;
}

.ToDo__Icon {
  /* 待办事项的图标 */
  display: flex;
  align-items: center;
  justify-content: center;
  height: 1.5em;
  width: 1.5em;
  margin-left: 2px;
  margin-right: 4px;
  flex-shrink: 0;

}

.ToDo__Title--done {
  opacity: 0.375;
}

.ToDo__Children {
  /* 待办事项的子元素 */
  margin-left: calc(1.5em + 6px);
}

.IconCheckboxChecked {
  /* 图标复选框--已选中 */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  background: rgb(46, 170, 220);
}

.IconCheckboxChecked>svg {
  /* 图标复选框--已选中 */
  width: 0.75em;
  height: 0.75em;
  fill: white;
}

.IconCheckboxUnchecked {
  /* 图标复选框--未选中 */
  display: flex;
}

.IconCheckboxUnchecked>svg {
  /* 图标复选框--未选中 */
  width: 1em;
  height: 1em;
  fill: inherit;
}

/**
 * Toggle
 * Ref. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details
 */

.Toggle {
  /* 切换 */
  margin: 2px 0;
}

.Toggle__Summary {
  /* 切换的摘要 */
  padding: 3px 0;
  cursor: pointer;
  list-style: none;
  display: flex;
}

.Toggle__Summary::-webkit-details-marker {
  /* 切换的摘要的webkit细节标记 */
  display: none;
}

.Toggle__Summary:focus {
  /* 切换的摘要的焦点 */
  outline: none;
}

.Toggle__Summary::before {
  /* 切换的摘要的before伪元素 */
  /* If we don't specify "content", this element doesn't show. */
  content: '';
  /* Prevent this element shrink when content is long. */
  flex: 0 0 1.25rem;
  border-radius: 0.25rem;
  margin: 0.125rem 0.25rem;
  width: 1.25rem;
  height: 1.25rem;
  background-image: url("data:image/svg+xml,%3Csvg width='100%' height='100%' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.8 9.30718C14.1938 9.53454 14.3907 9.64822 14.4568 9.79663C14.5144 9.92609 14.5144 10.0739 11.4568 10.2034C14.3907 10.3518 14.1938 10.4655 13.8 10.6928L8.7 13.6373C8.3062 13.8647 8.10931 13.9783 7.94774 13.9614C7.80681 13.9466 7.67878 13.8726 7.59549 13.758C7.5 13.6266 7.5 13.3992 7.5 12.9445L7.5 7.05551C7.5 6.6008 7.5 6.37344 7.59549 6.24201C7.67878 6.12736 7.80681 6.05345 7.94774 6.03864C8.10931 6.02166 8.3062 6.13533 8.7 6.36269L13.8 9.30718Z' fill='black'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  transition: background-image 0.1s ease-in-out, transform 0.2s ease-in-out;
}

.Toggle--Empty>.Toggle__Summary::before {
  opacity: 0.5;
}

.Toggle[open]>.Toggle__Summary::before {
  transform: rotate(90deg);
}

.Toggle__Summary:hover::before {
  background-image: url("data:image/svg+xml,%3Csvg width='100%' height='100%' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='20' height='20' rx='5' fill='%2337352F' fill-opacity='0.08'/%3E%3Cpath d='M13.8 9.30718C14.1938 9.53454 14.3907 9.64822 14.4568 9.79663C14.5144 9.92608 14.5144 10.0739 14.4568 10.2034C14.3907 10.3518 14.1938 10.4655 13.8 10.6928L8.7 13.6373C8.3062 13.8647 8.10931 13.9783 7.94774 13.9614C7.80681 13.9466 7.67878 13.8726 7.59549 13.758C7.5 13.6266 7.5 13.3992 7.5 12.9445L7.5 7.05551C7.5 6.6008 7.5 6.37344 7.59549 6.24201C7.67878 6.12736 7.80681 6.05345 7.94774 6.03864C8.10931 6.02166 8.3062 6.13533 8.7 6.36269L13.8 9.30718Z' fill='black'/%3E%3C/svg%3E");
}

.Toggle__Content {
  padding-left: calc(1.5em + 4px);
}

/* Video */

.Video {
  /* 视频 */
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  align-self: center;
}

.Video__Content>video {
  /* 视频的内容的视频 */
  max-width: 100%;
}

.Video__Caption {
  /* 视频的标题 */
  padding: 6px 2px;
  color: var(--color-text-default-light);
  font-size: 0.875em;
}


/* ------------------------------ 新功能*/
/* Notion风格的表格容器 */