.edit-text-icon {
    margin: 0 0.2em;
    padding: 0 0.2em;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    --tw-text-opacity: 1;
    color: rgb(14 165 233 / var(--tw-text-opacity));
}
.edit-text-icon:hover {
    -webkit-backdrop-filter: brightness(0.95);
            backdrop-filter: brightness(0.95);
}

.cn-typography-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    overflow: auto;
    white-space: normal;
}
.cn-typography {
    width: 100%;

    margin-top: 24px;
    padding: 48px;
    border-radius: 2px 2px 0 0;
    font-family: var(--default-font);
    font-weight: 100;
    box-sizing: border-box;
    --tw-text-opacity: 1;
    color: rgb(30 41 59 / var(--tw-text-opacity));
}
/* 默认不显示下划线，保持页面简洁 */
.cn-typography ins,
    .cn-typography a {
        text-decoration: none;
    }
/* 专名号：虽然 u 已经重回 html5 Draft，但在所有浏览器中都是可以使用的，
 * 要做到更好，向后兼容的话，添加 class="typo-u" 来显示专名号
 * 关于 <u> 标签：http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-u-element
 * 被放弃的是 4，之前一直搞错 http://www.w3.org/TR/html401/appendix/changes.html#idx-deprecated
 * 一篇关于 <u> 标签的很好文章：http://html5doctor.com/u-element/
 */
.cn-typography u {
        text-decoration: underline;
        text-underline-offset: 0.2em;
    }
/* 标记，类似于手写的荧光笔的作用 */
.cn-typography mark {
    border-bottom-width: 1px;
    border-style: solid;
    --tw-border-opacity: 1;
    border-color: rgb(202 138 4 / var(--tw-border-opacity));
    --tw-bg-opacity: 1;
    background-color: rgb(254 240 138 / var(--tw-bg-opacity));
        padding: 2px;
        margin: 0 5px;
}
/* 代码片断 */
.cn-typography pre,
    .cn-typography pre tt {
        font-family: Courier, 'Courier New', monospace;
    }
.cn-typography pre {
        overflow: auto;
        padding: 0 1em;
        border-radius: 1em;
    }
/* 保证块/段落之间的空白隔行 */
.cn-typography p,
    .cn-typography pre,
    .cn-typography ul,
    .cn-typography ol,
    .cn-typography dl,
    .cn-typography form,
    .cn-typography hr,
    .cn-typography table,
    .cn-typography blockquote {
        margin-bottom: 1.2em;
    }
.cn-typography blockquote {
        position: relative;
        font-weight: 400;
        padding-left: 1em;
        margin: 1em 3em 1em 2em;
        border-left-width: 4px;
        border-style: solid;
        --tw-border-opacity: 1;
        border-color: rgb(148 163 184 / var(--tw-border-opacity));
        --tw-text-opacity: 1;
        color: rgb(148 163 184 / var(--tw-text-opacity));
    }
.cn-typography :not(pre) code {
        padding: 0.2em 0.4em;
        margin: 0;
        border-radius: 6px;
        --tw-bg-opacity: 1;
        background-color: rgb(241 245 249 / var(--tw-bg-opacity));
    }
/* 标题应该更贴紧内容，并与其他块区分，margin 值要相应做优化 */
.cn-typography h1,
    .cn-typography h2,
    .cn-typography h3,
    .cn-typography h4,
    .cn-typography h5,
    .cn-typography h6 {
        margin-top: 1.2em;
        margin-bottom: 0.6em;
        line-height: 1.35;
        font-weight: 400;
    }
.cn-typography h1 {
        font-size: 2em;
    }
.cn-typography h2 {
        font-size: 1.8em;
    }
.cn-typography h3 {
        font-size: 1.6em;
    }
.cn-typography h4 {
        font-size: 1.4em;
    }
.cn-typography h5,
    .cn-typography h6 {
        font-size: 1.2em;
    }
/* 在文章中，应该还原 ul 和 ol 的样式 */
.cn-typography ul {
        margin-left: 1.3em;
        list-style: disc;
    }
.cn-typography ol {
        list-style: decimal;
        margin-left: 1.9em;
    }
.cn-typography li ul,
    .cn-typography li ol {
        margin-bottom: 0.8em;
        margin-left: 2em;
    }
.cn-typography li ul {
        list-style: circle;
    }
/* 同 ul/ol，在文章中应用 table 基本格式 */
.cn-typography table th,
    .cn-typography table td,
    .cn-typography table caption {
        padding: 0.5em 1em;
        border-width: 1px;
        border-style: solid;
        --tw-border-opacity: 1;
        border-color: rgb(51 65 85 / var(--tw-border-opacity));
        --tw-text-opacity: 1;
        color: rgb(51 65 85 / var(--tw-text-opacity));
    }
.cn-typography table caption {
        border-bottom: none;
    }
/* 去除 webkit 中 input 和 textarea 的默认样式  */
.cn-typography input,
    .cn-typography textarea {
        -webkit-appearance: none;
           -moz-appearance: none;
                appearance: none;
        border-radius: 0;
    }
.cn-typography em,
    .cn-typography legend,
    .cn-typography caption {
        font-weight: inherit;
    }
/* 着重号，只能在少量（少于100个字符）且全是全角字符的情况下使用 */
.cn-typography em {
        position: relative;
        margin: 0 0.2em;
    }
.cn-typography em:after {
        position: absolute;
        top: 0.65em;
        left: 0;
        width: 100%;
        overflow: hidden;
        white-space: nowrap;
        content: '・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・';
    }
/* Responsive images */
.cn-typography img {
        max-width: 100%;
    }
.cn-typography > p {
        text-indent: 2em;
        letter-spacing: 0.1em;
        white-space: pre-wrap;
    }
.cn-typography a {
        margin: 0 0.1em;
        --tw-text-opacity: 1;
        color: rgb(14 165 233 / var(--tw-text-opacity));
    }
.cn-typography a:hover {
    --tw-text-opacity: 1;
    color: rgb(56 189 248 / var(--tw-text-opacity));
}
.cn-typography strong {
        margin: 0 0.2em;
    }
