/* Generated by src/site/theme.ts from src/styles/ — do not edit. */
@layer typora-base, typora-theme, typora-bridge, app;

@layer typora-base.core {
:root {
    --bg-color:  #ffffff;
    --text-color: #333333;

    --select-text-bg-color:  #B5D6FC;
    --select-text-font-color: auto;

    --monospace: "Lucida Console", Consolas, "Courier", monospace;

    --title-bar-height: 20px;
}

.mac-os-11 {
    --title-bar-height: 28px;
}

html {
    font-size: 14px;
    background-color: #ffffff;
    background-color: var(--bg-color);
    color: #333333;
    color: var(--text-color);
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

body {
    margin: 0;
    padding: 0;
    height: auto;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
    font-size: 1rem;
    line-height: 1.42857143;
    overflow-x: hidden;
    background: inherit;
    tab-size: 4;
    font-display：swap;
}

iframe {
    margin: auto;
}

a.url {
    word-break: break-all;
}

a:active,
a:hover {
    outline: 0;
}

*.in-text-selection,
::selection {
    background: #B5D6FC;
    text-shadow: none;

    background: var(--select-text-bg-color);
    color: var(--select-text-font-color);
}

#write {
    margin: 0 auto 0;
    height: auto;
    width: inherit;
    word-break: normal;
    word-wrap: break-word;
    position: relative;
    white-space: normal;
    overflow-x: visible;
    padding-top: 36px;
    /*contain: layout paint;*/
}

#write.first-line-indent p {
    text-indent: 2em;
}

#write.first-line-indent p *,
#write.first-line-indent li p{
    text-indent: 0;
}

#write.first-line-indent li {
    margin-left: 2em;
}

.for-image #write {
    padding-left: 8px;
    padding-right: 8px;
}

body.typora-export {
    padding-left: 30px;
    padding-right: 30px;
}

.typora-export p, 
.typora-export li, 
.typora-export .footnote-line {
    white-space: pre-wrap;
}

.typora-export .task-list-item input {
    pointer-events: none;
}

@media screen and (max-width: 500px) {
    body.typora-export {
        padding-left: 0;
        padding-right: 0;
    }

    #write {
        padding-left: 20px;
        padding-right: 20px;
    }

    /** remove codemirror line number for small screen */
    .CodeMirror-sizer {
        margin-left: 0 !important;
    }
    .CodeMirror-gutters {
        display: none !important;
    }
}

/*.typora-export #write {
    margin: 0 auto;
}*/

#write li > figure:last-child {
    margin-bottom: 0.5rem;
}

#write ol,
#write ul {
    position: relative;
}

img {
    max-width: 100%;
    vertical-align: middle;
    image-orientation: from-image;
}

/*.html-for-mac .md-svg-img {
    max-width: none;
}*/

input,
button,
select,
textarea {
    font-size: inherit;
    color: inherit;
    font: inherit;
}

input[type="checkbox"],
input[type="radio"] {
    line-height: normal;
    padding: 0;
}

*:before,
*:after,
* {
    box-sizing: border-box;
}

#write p,
#write h1,
#write h2,
#write h3,
#write h4,
#write h5,
#write h6,
#write pre {
    width: inherit;
}

#write p,
#write h1,
#write h2,
#write h3,
#write h4,
#write h5,
#write h6 {
    position: relative;
}

p {
    line-height: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    page-break-after: avoid;
    break-after: avoid-page;
    page-break-inside: avoid;
    orphans: 4;
}

p {
    orphans: 4;
}

h1 {
    font-size: 2rem;
}

h2 {
    font-size: 1.8rem;
}

h3 {
    font-size: 1.6rem;
}

h4 {
    font-size: 1.4rem;
}

h5 {
    font-size: 1.2rem;
}

h6 {
    font-size: 1rem;
}

h1, h2, h3, h4, h5, h6, p, .md-rawblock, .md-math-block {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

/*
	Hack to remove background from Mobile Safari.
	Can't use it globally since it destroys checkboxes in Firefox and Opera
*/

.hidden {
    display: none;
}

.md-blockmeta {
    color: #CCCCCC;
    font-weight: bold;
    font-style: italic;
}

a {
    cursor: pointer;
}

sup.md-footnote {
    padding: 2px;
    padding-left: 4px;
    padding-right: 4px;
    background-color: rgba(238, 238, 238, 0.7);
    color: #555;
    border-radius: 4px;
    cursor: pointer;
}

sup.md-footnote a,
sup.md-footnote a:hover{
    color: inherit;
    text-transform: inherit;
    text-decoration: inherit;
}

#write input[type='checkbox'] {
    cursor: pointer;
    width: inherit;
    height: inherit;
}

figure {
    overflow-x: auto;
    margin: 0;
    max-width: calc(100% + 16px);
    padding: 0;
    margin-left: 0;
    margin-top: 1.2em;
    margin-bottom: 1.2em;
}

figure > table {
    margin: 0;
}

tr {
    page-break-inside: avoid;
    page-break-after: auto;
}

thead {
    display: table-header-group
}

table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    overflow: auto;
    page-break-inside: auto;
    text-align: left;
}

table.md-table td {
    min-width: 32px;
}

.CodeMirror-gutters {
    border-right: 0;
    background-color: inherit;
}

.CodeMirror-linenumber {
    user-select: none;
}

.CodeMirror {
    text-align: left;
}

.CodeMirror-placeholder {
    opacity: 0.3;
}

.CodeMirror pre {
    padding: 0 4px;
}

.CodeMirror-lines {
    padding: 0 0 0 0;
}

div.hr:focus {
    cursor: none;
}

#write pre {
    white-space: pre-wrap;
}

#write.fences-no-line-wrapping pre {
    white-space: pre;
}

#write pre.ty-contain-cm {
    white-space: normal;
}

.CodeMirror-gutters {
    margin-right: 4px;
}

.md-fences {
    font-size: 0.9rem;
    position: relative !important;
    display: block;
    page-break-inside: avoid;
    text-align: left;
    overflow: visible;
    white-space: pre;
    background: inherit;
}

.md-fences-adv-panel {
    width: 100%;
    margin-top: 10px;
    text-align: center;
    padding-top: 0;
    padding-bottom: 8px;
    overflow-x: auto;
}

#write .md-fences.mock-cm {
    white-space: pre-wrap;
}

.md-fences.md-fences-with-lineno {
    padding-left: 0;
}

#write.fences-no-line-wrapping .md-fences.mock-cm {
    white-space: pre;
    overflow-x: auto; 
}

.md-fences.mock-cm.md-fences-with-lineno {
    padding-left: 8px;
}

.CodeMirror-line,
twitterwidget {
    page-break-inside: avoid;
}

.footnotes {
    opacity: 0.8;
    font-size: 0.9rem;
    margin-top: 1em;
    margin-bottom: 1em;
}

.footnotes+.footnotes {
    margin-top: 0;
}

.md-reset {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    vertical-align: top;
    background: transparent;
    text-decoration: none;
    text-shadow: none;
    float: none;
    position: static;
    width: auto;
    height: auto;
    white-space: nowrap;
    cursor: inherit;
    -webkit-tap-highlight-color: transparent;
    line-height: normal;
    font-weight: normal;
    text-align: left;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    direction: ltr;
}

li div {
    padding-top: 0;
}

blockquote {
    margin: 1rem 0;
}

li p,
li .mathjax-block{
    margin: 0.5rem 0;
}

li blockquote {
    margin: 1rem 0;
}

li {
    margin: 0;
    position: relative;
}

blockquote >:last-child {
    margin-bottom: 0;
}

blockquote > *:first-child,
li > *:first-child {
    margin-top: 0;
}

.footnotes-area {
    color: #888;
    margin-top: 0.714rem;
    /*10px*/
    padding-bottom: 0.143rem;
    /*20px*/
    white-space: normal;
}

#write .footnote-line {
    white-space: pre-wrap;
}

@media print {
    /**
     * needed to prevent extra blank page
     */
    html, body {
        border: 1px solid transparent;
        height: 99%;
        page-break-after: avoid;
        page-break-before: avoid;
        font-variant-ligatures: no-common-ligatures;
    }

    #write {
        border-color: transparent !important;
        margin-top: 0;
        padding-top: 0;
    }

    .typora-export * {
        -webkit-print-color-adjust: exact;
    }

    .typora-export #write {
        page-break-after: avoid;
    }

    .typora-export #write:after {
        height: 0;
    }

    .is-mac table {
        page-break-inside: avoid;
    }

    /*
    https://stackoverflow.com/questions/9238868/how-do-i-avoid-a-page-break-immediately-after-a-heading
    h1::after, h2::after, h3::after, h4::after, h5::after, h6::after {
        content: " ";
        display: block;
        height: 100px;
        margin-bottom: -100px;
    }*/

    /*
    remove to fix #2473
    @page {
        margin-top: 20mm;
        margin-bottom: 20mm;
        margin-left: 0mm;
        margin-right: 0mm;
    }
    */

    .typora-export-show-outline .typora-export-sidebar {
        display: none;
    }
}

.footnote-line {
    margin-top: 0.714em;
    font-size: 0.7em;
}

a img,
img a {
    cursor: pointer;
}

pre.md-meta-block {
    font-size: 0.8rem;
    min-height: 0.8rem;
    /*40px*/
    white-space: pre-wrap;
    background: #cccccc;
    display: block;
    overflow-x: hidden;
}

p > img:only-child,
p > .md-image:only-child:not(.md-img-error) img {
    display: block;
    margin: auto;
}

#write.first-line-indent p > .md-image:only-child:not(.md-img-error) img {
    left: -2em;
    position: relative;
}

p > .md-image:only-child{
    display: inline-block;
    width: 100%;
}

#write .MathJax_Display {
    margin: 0.8em 0 0 0;
}

.md-math-block {
    width: 100%;
}

.md-math-block:not(:empty):after {
    display: none;
}

.MathJax_ref {
    fill: currentColor;
}

[contenteditable="true"]:active,
[contenteditable="true"]:focus,
[contenteditable="false"]:active,
[contenteditable="false"]:focus {
    outline: none;
    box-shadow: none;
}

.md-task-list-item {
    position: relative;
    list-style-type: none;
}

.task-list-item.md-task-list-item {
    padding-left: 0;
}

.md-task-list-item>input {
    position: absolute;
    top: 0px;
    left: 0px;
    margin-left: -1.2em;
    margin-top: calc(1em - 10px);
    border: none;
}

.math {
    font-size: 1rem;
}

.md-toc {
    min-height: 3.58rem;
    position: relative;
    font-size: 0.9rem;
    border-radius: 10px;
}

.md-toc-content {
    position: relative;
    margin-left: 0px;
}

.md-toc:after,
.md-toc-content:after {
    display: none;
}

.md-toc-item {
    display: block;
    color: #4183c4;
}

.md-toc-item a {
    text-decoration: none;
}

.md-toc-inner:hover {
    text-decoration: underline;
}

.md-toc-inner {
    display: inline-block;
    cursor: pointer;
}

.md-toc-h1 .md-toc-inner {
    margin-left: 0;
    font-weight: bold;
}

.md-toc-h2 .md-toc-inner {
    margin-left: 2em;
}

.md-toc-h3 .md-toc-inner {
    margin-left: 4em;
}

.md-toc-h4 .md-toc-inner {
    margin-left: 6em;
}

.md-toc-h5 .md-toc-inner {
    margin-left: 8em;
}

.md-toc-h6 .md-toc-inner {
    margin-left: 10em;
}

@media screen and (max-width: 48em) {
    .md-toc-h3 .md-toc-inner {
        margin-left: 3.5em;
    }
    .md-toc-h4 .md-toc-inner {
        margin-left: 5em;
    }
    .md-toc-h5 .md-toc-inner {
        margin-left: 6.5em;
    }
    .md-toc-h6 .md-toc-inner {
        margin-left: 8em;
    }
}

a.md-toc-inner {
    font-size: inherit;
    font-style: inherit;
    font-weight: inherit;
    line-height: inherit;
}

.footnote-line a:not(.reversefootnote) {
    color: inherit;
}

.md-attr {
    display: none;
}

.md-fn-count:after {
    content: ".";
}

pre,
code,
tt,
samp {
   font-family: var(--monospace);
}

kbd {
    margin: 0 .1em;
    padding: .1em .6em;
    font-size: .8em;
    color: #242729;
    background: white;
    border: 1px solid #adb3b9;
    border-radius: 3px;
    box-shadow: 0 1px 0 rgba(12,13,14,0.2), 0 0 0 2px #FFF inset;
    white-space: nowrap;
    vertical-align: middle;
}

.md-comment {
    color: #a27f03;
    opacity: 0.6;
    font-family: monospace;
    font-family: var(--monospace);
}

code {
    text-align: left;
    vertical-align: initial;
}

a.md-print-anchor {
    white-space: pre !important;
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    border-bottom: none !important;
    display: inline-block !important;
    position: absolute !important;
    width: 1px !important;
    right: 0 !important;
    outline: none !important;
    background: transparent !important;
    text-decoration: initial !important;
    text-shadow: initial !important;
}

.os-windows.monocolor-emoji .md-emoji {
    font-family: "Segoe UI Symbol", sans-serif;
}

/* for pretty print*/
.md-diagram-panel>svg {
    max-width: 100%;
}

[lang="flow"] svg,
[lang="mermaid"] svg  {
    max-width: 100%;
    height: auto;
}

[lang="mermaid"] .node text {
    font-size: 1rem;
}

table tr th {
    border-bottom: 0;
}

video {
    max-width: 100%;
    display: block;
    margin: 0 auto;
}

iframe {
    max-width: 100%;
    width: 100%;
    border: none;
}

.highlight tr, 
.highlight td {
    border: 0;
}

mark {
    background: #ff0;
    color: #000;
}

.md-html-inline .md-plain,
.md-html-inline strong,
mark strong, 
mark .md-inline-math {
    color: inherit
}

.md-expand mark .md-meta {
    opacity: 0.3 !important;
}

mark .md-meta {
    color: #000;
}

@media print {
    .typora-export h1,
    .typora-export h2,
    .typora-export h3,
    .typora-export h4,
    .typora-export h5,
    .typora-export h6 {
        page-break-inside: avoid;
    }

    /*.typora-export h1::after,
    .typora-export h2::after,
    .typora-export h3::after,
    .typora-export h4::after,
    .typora-export h5::after,
    .typora-export h6::after {
        content: "";
        display: block;
        height: 100px;
        margin-bottom: -100px;
    }*/
}

.md-diagram-panel .messageText {
    stroke: none !important;
}

.md-diagram-panel .start-state {
    fill: var(--node-fill);
}

.md-diagram-panel  .edgeLabel rect {
    opacity: 1 !important;
}

.md-fences.md-fences-math {
    font-size: 1em;
}

.md-fences-advanced:not(.md-focus) {
    padding: 0;
    white-space: nowrap;
    border: 0;
}

.md-fences-advanced:not(.md-focus) {
    background: inherit;
}

.typora-export-show-outline .typora-export-content {
    max-width: 1440px;
    margin: auto;
    display: -webkit-flex;
    display: flex;
    flex-direction: row;
}

.typora-export-sidebar {
    width: 300px;
    font-size: 0.8rem;
    margin-top: 80px;
    margin-right: 18px;
}

.typora-export-show-outline #write {
  --webkit-flex: 2;
  flex: 2;
}

.typora-export-sidebar .outline-content {
    position: fixed;
    top: 0;
    max-height: 100%;
    overflow-y: auto;
    padding-bottom: 30px;
    padding-top: 60px;
    width: 300px;
    overflow-x: hidden;
}

@media screen and (max-width: 1024px) {
    .typora-export-sidebar,
    .typora-export-sidebar .outline-content {
        width: 240px;
    }
}

@media screen and (max-width: 800px) {
    .typora-export-sidebar {
        display: none;
    }
} 

.outline-content li,
.outline-content ul {
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
  list-style: none;
}

.outline-content ul {
  margin-top: 0;
  margin-bottom: 0;
}

.outline-content strong {
  font-weight: normal;
}

.outline-expander {
  width: 1rem;
  height: 1.428571429rem;
  position: relative;
  display: table-cell;
  vertical-align: middle;
  cursor: pointer;
  padding-left: 4px; 
}

.outline-expander:before {
  content: "\f125";
  position: relative;
  font-family: "Ionicons";
  display: inline-block;
  font-size: 8px;
  vertical-align: middle;
}

.outline-item {
  padding-top: 3px;
  padding-bottom: 3px;
  cursor: pointer;
}

.outline-expander:hover:before {
  content: "\f123";
}

.outline-h1>.outline-item {
  padding-left: 0
}

.outline-h2>.outline-item {
  padding-left: 1em;
}

.outline-h3>.outline-item {
  padding-left: 2em;
}

.outline-h4>.outline-item {
  padding-left: 3em;
}

.outline-h5>.outline-item {
  padding-left: 4em;
}

.outline-h6>.outline-item {
  padding-left: 5em;
}

.outline-label {
  cursor: pointer;
  display: table-cell;
  vertical-align: middle;
  text-decoration: none;
  color: inherit;
}

.outline-label:hover {
  text-decoration: underline;
}

.outline-item:hover {
  background-color: #f5f5f5;
  background-color: var(--item-hover-bg-color);
  border-color: #f5f5f5;
  background-color: var(--item-hover-bg-color);
}

.outline-item:hover {
  margin-left: -28px;
  margin-right: -28px;
  border-left: 28px solid transparent;
  border-right: 28px solid transparent;
}

.outline-item-single .outline-expander:before,
.outline-item-single .outline-expander:hover:before {
  display: none;
}

.outline-item-open>.outline-item>.outline-expander:before {
  content: "\f123";
}

.outline-children {
  display: none;
}

.info-panel-tab-wrapper {
  display: none;
}

.outline-item-open>.outline-children {
  display: block;
}

.typora-export .outline-item {
  padding-top: 1px;
  padding-bottom: 1px;
}

.typora-export .outline-item:hover {
    margin-right: -8px;
    border-right: 8px solid transparent;
}

.typora-export .outline-expander:before {
  /*content: "►";*/
  content: "+";
  font-family: inherit;
  top: -1px;
}

.typora-export .outline-item-open>.outline-item>.outline-expander:before,
.typora-export .outline-expander:hover:before {
  content: "−";
  /*content: "▼";*/
}

.typora-export-collapse-outline .outline-children {
  display: none;
}

.typora-export-collapse-outline .outline-item-open > .outline-children, 
.typora-export-no-collapse-outline .outline-children {
  display: block;
}

.typora-export-no-collapse-outline .outline-expander:before {
  content: "" !important;
}

.typora-export-show-outline .outline-item-active>.outline-item .outline-label {
    font-weight: bold;
}

.md-inline-math-container mjx-container {
    zoom: 0.95;
}
/* BASICS */

.CodeMirror {
    /* Set height, width, borders, and global font properties here */
    height: 300px;
    height: auto;
}
.CodeMirror-scroll {
    /* Set scrolling behaviour here */
    overflow-y: hidden;
    overflow-x: auto;
}
/* PADDING */

.CodeMirror-lines {
    padding: 4px 0;
    /* Vertical padding around content */
}
.CodeMirror pre {
    /* Horizontal padding of content */
}
.CodeMirror-scrollbar-filler,
.CodeMirror-gutter-filler {
    background-color: white;
    /* The little square between H and V scrollbars */
}
/* GUTTER */

.CodeMirror-gutters {
    border-right: 1px solid #ddd;
    background-color: #f7f7f7;
    white-space: nowrap;
}
.CodeMirror-linenumbers {} .CodeMirror-linenumber {
    padding: 0 3px 0 5px;
    text-align: right;
    color: #999;
}
/* CURSOR */

.CodeMirror div.CodeMirror-cursor {
    border-left: 1px solid black;
    z-index: 3;
}
/* Shown when moving in bi-directional text */

.CodeMirror div.CodeMirror-secondarycursor {
    border-left: 1px solid silver;
}
.CodeMirror.cm-keymap-fat-cursor div.CodeMirror-cursor {
    width: auto;
    border: 0;
    background: #7e7;
    z-index: 1;
}
/* Can style cursor different in overwrite (non-insert) mode */

.CodeMirror div.CodeMirror-cursor.CodeMirror-overwrite {} .cm-tab {
    display: inline-block;
}

/** sourcemode highlight **/

.cm-s-typora-default .cm-header,
.cm-s-typora-default .cm-property {
    color: #D94F8A;
}

.cm-s-typora-default pre.cm-header1:not(.cm-atom) *:not(.cm-overlay){
    font-size: 2rem;
    line-height: 2rem;
}

.cm-s-typora-default pre.cm-header2:not(.cm-atom) *:not(.cm-overlay){
    font-size: 1.4rem;
    line-height: 1.4rem;
}

.cm-s-typora-default .cm-atom,
.cm-s-typora-default .cm-number {
    color: #958486;
}

.cm-s-typora-default .cm-table-row, 
.cm-s-typora-default .cm-block-start{
    font-family: monospace;
}

.cm-s-typora-default .cm-comment,
.cm-s-typora-default .cm-code{
    color: #4A5A9F;
    font-family: monospace;
}

.cm-s-typora-default .cm-tag{
    color: #a94442;
}

.cm-s-typora-default .cm-string{
    color: #7e86a9;
}

.cm-s-typora-default .cm-link {
    color: #C47A0F;
    text-decoration: underline;
}

.cm-s-typora-default .cm-variable-2,
.cm-s-typora-default .cm-variable-1 {
    color: inherit;
}

.cm-s-typora-default .cm-overlay {
    font-size: 1rem;
    font-family: monospace;
}

.CodeMirror.cm-s-typora-default div.CodeMirror-cursor{
    border-left: 3px solid #E4629A;
}

.cm-s-typora-default .CodeMirror-activeline-background {
    left: -60px;
    right: -30px;
    background: rgba(204,204,204,0.2);
}

.cm-s-typora-default  .CodeMirror-gutters {
    border-right: none; 
    background-color: inherit;
}

.cm-s-typora-default .cm-trailing-space-new-line:after,
.cm-startspace:after,
.cm-starttab .cm-tab:after {
    content: "•";
    position:absolute;
    left:0;
    opacity: 0;
    font-family: "LetterGothicStd", monospace;
}

.os-windows .cm-startspace:after,
.os-windows .cm-starttab .cm-tab:after {
    left: -0.1em;
}

.cm-starttab .cm-tab:after {
    content: " ";
}

.cm-startspace, .cm-tab, 
.cm-starttab,
.cm-trailing-space-a,
.cm-trailing-space-b,
.cm-trailing-space-new-line  {
    font-family: monospace;
    position:relative;
}

.cm-s-typora-default .cm-trailing-space-new-line:after {
    content: "↓";
    opacity: 0.3;
}

/* DEFAULT THEME */

.cm-s-inner .cm-keyword {
    color: #708;
}
.cm-s-inner .cm-atom,
.cm-s-inner.cm-atom {
    color: #219;
}
.cm-s-inner .cm-number {
    color: #164;
}
.cm-s-inner .cm-def {
    color: #00f;
}
.cm-s-inner .cm-variable {
    color: black;
}
.cm-s-inner .cm-variable-2 {
    color: #05a;
}
.cm-s-inner .cm-variable-3 {
    color: #085;
}
.cm-s-inner .cm-property {
    color: black;
}
.cm-s-inner .cm-operator {
    color: black;
}
.cm-s-inner .cm-comment,
.cm-s-inner.cm-comment {
    color: #a50;
}
.cm-s-inner .cm-string {
    color: #a11;
}
.cm-s-inner .cm-string-2 {
    color: #f50;
}
.cm-s-inner .cm-meta {
    color: #555;
}
.cm-s-inner .cm-qualifier {
    color: #555;
}
.cm-s-inner .cm-builtin {
    color: #30a;
}
.cm-s-inner .cm-bracket {
    color: #997;
}
.cm-s-inner .cm-tag {
    color: #170;
}
.cm-s-inner .cm-attribute {
    color: #00c;
}
.cm-s-inner .cm-header,
.cm-s-inner.cm-header {
    color: blue;
}
.cm-s-inner .cm-quote,
.cm-s-inner.cm-quote  {
    color: #090;
}
.cm-s-inner .cm-hr,
.cm-s-inner.cm-hr {
    color: #999;
}
.cm-s-inner .cm-link,
.cm-s-inner.cm-link {
    color: #00c;
}
.cm-negative {
    color: #d44;
}
.cm-positive {
    color: #292;
}
.cm-header,
.cm-strong {
    font-weight: bold;
}
.cm-del {
    text-decoration: line-through;
}
.cm-em {
    font-style: italic;
}
.cm-link {
    text-decoration: underline;
}
.cm-error {
    color: #f00;
}
.cm-invalidchar {
    color: #f00;
}
div.CodeMirror span.CodeMirror-matchingbracket {
    color: #0f0;
}
div.CodeMirror span.CodeMirror-nonmatchingbracket {
    color: #f22;
}
.cm-s-inner .CodeMirror-activeline-background {
    background: inherit;
}
/* STOP */

/* The rest of this file contains styles related to the mechanics of
   the editor. You probably shouldn't touch them. */

.CodeMirror {
    position: relative;
    overflow: hidden;
    /*background: white;*/
}
.CodeMirror-scroll {
    /* 30px is the magic margin used to hide the element's real scrollbars */
    /* See overflow: hidden in .CodeMirror */
    margin-bottom: -30px;
    margin-right: -30px;
    padding-bottom: 30px;
    padding-right: 30px;
    height: 100%;
    outline: none;
    /* Prevent dragging from highlighting the element */
    position: relative;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}
.CodeMirror-sizer {
    position: relative;
}
/* The fake, visible scrollbars. Used to force redraw during scrolling
   before actuall scrolling happens, thus preventing shaking and
   flickering artifacts. */

.CodeMirror-vscrollbar,
.CodeMirror-hscrollbar,
.CodeMirror-scrollbar-filler,
.CodeMirror-gutter-filler {
    position: absolute;
    z-index: 6;
    display: none;
}
.CodeMirror-vscrollbar {
    right: 0;
    top: 0;
    overflow-x: hidden;
    overflow-y: scroll;
}
.CodeMirror-hscrollbar {
    bottom: 0;
    left: 0;
    overflow-y: hidden;
    overflow-x: scroll;
}
.CodeMirror-scrollbar-filler {
    right: 0;
    bottom: 0;
}
.CodeMirror-gutter-filler {
    left: 0;
    bottom: 0;
}
.CodeMirror-gutters {
    position: absolute;
    left: 0;
    top: 0;
    padding-bottom: 30px;
    z-index: 3;
}
.CodeMirror-gutter {
    white-space: normal;
    height: 100%;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    padding-bottom: 30px;
    margin-bottom: -32px;
    display: inline-block;
    /* Hack to make IE7 behave */
    *zoom: 1;
    *display: inline;
}
.CodeMirror-gutter-elt {
    position: absolute;
    cursor: default;
    z-index: 4;
}
.CodeMirror-lines {
    cursor: text;
}
.CodeMirror pre {
    /* Reset some styles that the rest of the page might have set */
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    border-width: 0;
    background: transparent;
    font-family: inherit;
    font-size: inherit;
    margin: 0;
    white-space: pre;
    word-wrap: normal;
    color: inherit;
    z-index: 2;
    position: relative;
    overflow: visible;
}
.CodeMirror-wrap pre {
    word-wrap: break-word;
    white-space: pre-wrap;
    word-break: normal;
}
.CodeMirror-code pre {
    border-right: 30px solid transparent;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
}
.CodeMirror-wrap .CodeMirror-code pre {
    border-right: none;
    width: auto;
}
.CodeMirror-linebackground {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 0;
}
.CodeMirror-linewidget {
    position: relative;
    z-index: 2;
    overflow: auto;
}
.CodeMirror-widget {} .CodeMirror-wrap .CodeMirror-scroll {
    overflow-x: hidden;
}
.CodeMirror-measure {
    position: absolute;
    width: 100%;
    height: 0;
    overflow: hidden;
    visibility: hidden;
}
.CodeMirror-measure pre {
    position: static;
}
.CodeMirror div.CodeMirror-cursor {
    position: absolute;
    visibility: hidden;
    border-right: none;
    width: 0;
}

.CodeMirror div.CodeMirror-cursor{
    visibility: hidden;
}

.CodeMirror-focused div.CodeMirror-cursor {
    visibility: inherit;
}
.CodeMirror-selected {
    background: #d9d9d9;
}
.CodeMirror-focused .CodeMirror-selected {
    background: #d7d4f0;
}
.cm-searching {
    background: #ffa;
    background: rgba(255, 255, 0, .4);
}
/* IE7 hack to prevent it from returning funny offsetTops on the spans */

.CodeMirror span {
    *vertical-align: text-bottom;
}
@media print {
    /* Hide the cursor when printing */
    .CodeMirror div.CodeMirror-cursor {
        visibility: hidden;
    }
}


}

@layer typora-theme {
/*
 * Su 素 and Qi 漆 — the site's own themes. Shared structure.
 *
 * This file is never selected on its own. su.css and qi.css each import it and then define
 * the palette it reads, so the two themes are the same document in two materials: identical
 * type, rhythm and rules, different ink and ground.
 *
 * 素 is undyed silk — plain, white, nothing added. 漆 is lacquer — a warm black that is
 * almost brown, the ground cinnabar was painted onto. They share one accent because they
 * are the same idea twice.
 *
 * The face is LXGW WenKai (霞鹜文楷), a Kai-style CJK family, served from public/fonts/ as
 * `unicode-range` subsets so a page downloads only the ranges it actually sets. Kai wants
 * more air than a sans: the leading here is generous on purpose, and the type is a step
 * larger than base.css's 14px because Kai reads small.
 *
 * Plain CSS, in no layer of its own: src/site/theme.ts wraps this file in the
 * `typora-theme` layer when it assembles dist/theme.css.
 *
 * Written against doc/dom-contract.md, the same DOM Typora themes are written against.
 * Nothing here reaches for markup only Typora's own app shell emits.
 *
 * ── The palette su.css and qi.css must define ─────────────────────────────────────────
 *   --kiwi-bg           the ground
 *   --kiwi-ink          body text
 *   --kiwi-ink-strong   headings, and anything that should sit above the body
 *   --kiwi-ink-soft     quiet text: quotes, footnotes, secondary rows
 *   --kiwi-ink-faint    barely there: syntax markers, the fence's language field
 *   --kiwi-rule         hairlines
 *   --kiwi-wash         the faintest fill — code, front matter, the table of contents
 *   --kiwi-wash-edge    that fill's own border, one step up from --kiwi-rule
 *   --kiwi-accent       the one hue in the theme
 *   --kiwi-accent-ink   the accent at text contrast, for links and inline code
 *   --kiwi-accent-wash  the accent as a fill, for highlight and quote marks
 *   --kiwi-select       the selection band
 *   --cm-comment … --cm-error   fenced-code tokens; see the block near the end
 */

/*
 * Typora's own variables, which base.css reads directly. Set from ours so a theme change
 * moves the page background and the selection along with everything else.
 */
:root {
  --bg-color: var(--kiwi-bg);
  --text-color: var(--kiwi-ink);
  --select-text-bg-color: var(--kiwi-select);
  --select-text-font-color: var(--kiwi-ink-strong);
  --item-hover-bg-color: var(--kiwi-wash);
  --node-fill: var(--kiwi-wash);

  /*
   * Reveal-on-focus markers, unused here — a viewer emits no syntax markers. The `**` and `[](…)` that appear
   * around whatever the caret is inside. They are punctuation you are meant to look past,
   * so they sit at the bottom of the ink scale.
   */
  --md-char-color: var(--kiwi-ink-faint);
  --meta-content-color: var(--kiwi-ink-soft);

  /*
   * LXGW WenKai ships no monospaced companion here — the Mono cut is another 4.4 MB per
   * weight — so code is set in the platform's mono face with WenKai last in the stack. That
   * final entry only ever catches CJK, which no mono face covers anyway: a Chinese comment
   * then matches the surrounding prose instead of falling back to whatever the system picks.
   */
  --kiwi-body: 'LXGW WenKai', 'LXGW WenKai Screen', 'Kaiti SC', STKaiti, KaiTi, 'BiauKai', Georgia,
    'Times New Roman', serif;
  --monospace: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace,
    'LXGW WenKai';
}

/* ── The page ────────────────────────────────────────────────────────────────────────── */

html {
  font-size: 16px;
  background-color: var(--kiwi-bg);
  color: var(--kiwi-ink);
  font-family: var(--kiwi-body);
}

body {
  font-family: var(--kiwi-body);
  /* Kai is a brush form; its curves want the smoother rasteriser on both platforms. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  background: var(--kiwi-select);
  color: var(--kiwi-ink-strong);
  text-shadow: none;
}

#write {
  padding: 2.5rem 1.25rem 8rem;
  color: var(--kiwi-ink);
  font-family: var(--kiwi-body);
  font-size: 1.0625rem;
  line-height: 1.85;
  /* Han has no spaces to break at, so the browser needs telling that a run of it is
     breakable while a Latin word is not. */
  word-break: normal;
  overflow-wrap: break-word;
}

/* The first block sets the top of the document, which is the padding's job. */
#write > *:first-child {
  margin-top: 0;
}

/* ── Headings ────────────────────────────────────────────────────────────────────────── */

#write h1,
#write h2,
#write h3,
#write h4,
#write h5,
#write h6 {
  margin: 2.4rem 0 1rem;
  color: var(--kiwi-ink-strong);
  font-family: var(--kiwi-body);
  font-weight: 700;
  line-height: 1.45;
}

/*
 * h1's rule opens with a short accent segment, the way a scroll opens with a seal: one
 * hairline painted in two colours, drawn as a background so it costs no pseudo-element and
 * cannot be inherited by anything nested inside the heading.
 */
#write h1 {
  margin-top: 3rem;
  margin-bottom: 1.6rem;
  padding-bottom: 0.6rem;
  font-size: 1.95rem;
  letter-spacing: 0.01em;
  background-image: linear-gradient(to right, var(--kiwi-accent) 0 2.25rem, var(--kiwi-rule) 2.25rem 100%);
  background-size: 100% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
}

#write h2 {
  margin-top: 2.8rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--kiwi-rule);
  font-size: 1.5rem;
}

#write h3 {
  font-size: 1.27rem;
}

#write h4 {
  font-size: 1.12rem;
}

#write h5 {
  font-size: 1rem;
}

/* The last step down has no size left to give, so it separates itself by colour and
   tracking instead. */
#write h6 {
  color: var(--kiwi-ink-soft);
  font-size: 0.95rem;
  letter-spacing: 0.06em;
}

/* ── Prose ───────────────────────────────────────────────────────────────────────────── */

#write p {
  margin: 1rem 0;
}

#write strong,
#write b {
  color: var(--kiwi-ink-strong);
  font-weight: 700;
}

#write del,
#write s {
  color: var(--kiwi-ink-soft);
  text-decoration-color: var(--kiwi-ink-faint);
}

#write a {
  color: var(--kiwi-accent-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--kiwi-accent-ink) 38%, transparent);
  text-underline-offset: 0.18em;
  transition: text-decoration-color 120ms ease;
}

#write a:hover {
  text-decoration-color: var(--kiwi-accent-ink);
}

/* base.css paints mark pure yellow on black. A wash of the theme's own accent keeps the
   page to one hue and leaves the text its own colour. */
#write mark {
  padding: 0.05em 0.15em;
  border-radius: 2px;
  background: var(--kiwi-accent-wash);
  color: inherit;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

#write mark .md-meta {
  color: var(--kiwi-ink-faint);
}

#write sub,
#write sup {
  font-size: 0.75em;
  line-height: 0;
}

#write kbd {
  padding: 0.15em 0.45em;
  border: 1px solid var(--kiwi-wash-edge);
  border-radius: 4px;
  background: var(--kiwi-wash);
  box-shadow: none;
  color: var(--kiwi-ink);
  font-family: var(--monospace);
  font-size: 0.8em;
  vertical-align: middle;
}

#write abbr[title] {
  text-decoration: underline dotted var(--kiwi-ink-faint);
  text-underline-offset: 0.2em;
  cursor: help;
}

/* ── Lists ───────────────────────────────────────────────────────────────────────────── */

#write ul,
#write ol {
  margin: 1rem 0;
  padding-left: 1.6rem;
}

#write li {
  margin: 0.3rem 0;
}

/* A nested list belongs to the item above it, not to the gap between items. */
#write li > ul,
#write li > ol {
  margin: 0.3rem 0;
}

#write li::marker {
  color: var(--kiwi-ink-faint);
}

/*
 * Task lists. base.css hangs the checkbox in the margin at `margin-left: -1.2em` and takes
 * the bullet away; all that is left is to make the control belong to the theme, and to
 * quiet a line that is already done.
 */
#write .md-task-list-item > input[type='checkbox'] {
  accent-color: var(--kiwi-accent);
  /* Kai's taller line box would otherwise leave the box riding high against its text. */
  margin-top: calc(1em - 8px);
}

#write .task-list-done {
  color: var(--kiwi-ink-soft);
}

/* ── Quotes ──────────────────────────────────────────────────────────────────────────── */

/* The rule is the accent at half strength: --kiwi-accent-wash is mixed to sit *behind*
   text and disappears when asked to be a line on its own. */
#write blockquote {
  margin: 1.4rem 0;
  padding: 0.1rem 0 0.1rem 1.15rem;
  border-left: 2px solid color-mix(in srgb, var(--kiwi-accent) 50%, transparent);
  color: var(--kiwi-ink-soft);
}

#write blockquote blockquote {
  margin: 0.8rem 0;
}

/* ── Rules ───────────────────────────────────────────────────────────────────────────── */

#write hr,
#write .md-hr {
  height: 1px;
  margin: 2.75rem 0;
  border: 0;
  background: var(--kiwi-rule);
}

/* ── Tables ──────────────────────────────────────────────────────────────────────────── */

/*
 * Fine rules form a quiet grid: horizontal lines keep the bookish rhythm, while equally
 * light verticals make columns easy to trace without turning the table into a heavy box.
 * base.css already collapses the borders and gives the enclosing figure its own scroll.
 *
 * The top margin is also where the editor draws its table toolbar on hover, so it is at
 * least as deep as that toolbar is tall. max() rather than an addition, because this margin
 * is already nearly deep enough and room reserved for chrome that is usually absent is paid
 * for on every table in every document. --app-table-tools-space comes from the application;
 * in Typora, where there is no such toolbar, the fallback leaves the margin as it was.
 */
#write table {
  margin: max(1.5rem, var(--app-table-tools-space, 0px)) 0 1.5rem;
  font-size: 0.97em;
}

/* Tighter leading than the prose: a cell is a phrase, and the body's 1.85 leaves rows
   floating apart from the rules that are supposed to be holding them. */
#write table th,
#write table td {
  padding: 0.5em 0.85em;
  border: 0;
  border-right: 1px solid var(--kiwi-rule);
  border-bottom: 1px solid var(--kiwi-rule);
  line-height: 1.6;
  text-align: left;
  vertical-align: top;
}

#write table th {
  border-bottom: 1px solid var(--kiwi-ink-faint);
  color: var(--kiwi-ink-strong);
  font-weight: 700;
}

#write table tbody tr:last-child td {
  border-bottom: 0;
}

/* The outer columns align with the text above and below the table rather than being
   indented by padding nothing sits against. */
#write table th:first-child,
#write table td:first-child {
  padding-left: 0;
}

#write table th:last-child,
#write table td:last-child {
  padding-right: 0;
  border-right: 0;
}

/* ── Figures ─────────────────────────────────────────────────────────────────────────── */

#write img {
  max-width: 100%;
  border-radius: 3px;
}

/* ── Inline code ─────────────────────────────────────────────────────────────────────── */

/*
 * This lands on the <code> inside a fence too, where it would paint a bordered box around
 * every line. src/shell/bridge.css strips it back off from above — that is what the bridge
 * layer exists for, since Typora's fences contain no <code> at all and no theme guards
 * against one.
 */
#write code {
  padding: 0.12em 0.36em;
  border: 1px solid var(--kiwi-wash-edge);
  border-radius: 3px;
  background: var(--kiwi-wash);
  color: var(--kiwi-accent-ink);
  font-family: var(--monospace);
  font-size: 0.855em;
  word-break: break-word;
}

#write a code {
  color: inherit;
}

/* ── Fenced code ─────────────────────────────────────────────────────────────────────── */

#write .md-fences {
  margin: 1.4rem 0;
  padding: 0.9rem 1.1rem 1.1rem;
  border: 1px solid var(--kiwi-wash-edge);
  border-radius: 6px;
  background: var(--kiwi-wash);
  color: var(--kiwi-ink);
  font-family: var(--monospace);
  font-size: 0.855rem;
  line-height: 1.7;
}

/* The language field, placed in the corner by compat.css. It doubles as the label saying
   what the block is, so it stays legible without competing with the code. */
#write .md-fences > .code-tooltip {
  color: var(--kiwi-ink-faint);
}

#write .ty-cm-lang-input {
  color: var(--kiwi-ink-soft);
  font-family: var(--monospace);
  letter-spacing: 0.02em;
}

#write .ty-cm-lang-input:hover,
#write .ty-cm-lang-input:focus {
  border-color: var(--kiwi-wash-edge);
  background: var(--kiwi-bg);
  color: var(--kiwi-ink);
}

/* ── Front matter ────────────────────────────────────────────────────────────────────── */

/* base.css paints this flat #cccccc. It is the document's own metadata, so it reads as a
   label above the title rather than as a block of content. */
#write pre.md-meta-block {
  margin: 0 0 1.8rem;
  padding: 0.8rem 1.1rem;
  border-left: 2px solid var(--kiwi-rule);
  border-radius: 0 4px 4px 0;
  background: var(--kiwi-wash);
  color: var(--kiwi-ink-soft);
  font-family: var(--monospace);
  font-size: 0.8rem;
  line-height: 1.7;
}

/* ── Table of contents ───────────────────────────────────────────────────────────────── */

#write .md-toc {
  margin: 1.8rem 0;
  padding: 1rem 1.25rem;
  border: 1px solid var(--kiwi-wash-edge);
  border-radius: 6px;
  background: var(--kiwi-wash);
  font-size: 0.94rem;
}

#write .md-toc-content {
  margin: 0;
  line-height: 1.9;
}

#write .md-toc-item,
#write .md-toc-inner {
  color: var(--kiwi-ink-soft);
  text-decoration: none;
}

#write .md-toc-inner:hover {
  color: var(--kiwi-accent-ink);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

#write .md-toc-h1 .md-toc-inner {
  color: var(--kiwi-ink-strong);
  font-weight: 700;
}

/* ── Footnotes ───────────────────────────────────────────────────────────────────────── */

/* base.css gives the reference a grey pill. The accent alone is enough to say it is a
   reference, and it leaves the line's rhythm intact. */
#write sup.md-footnote {
  padding: 0 0.15em;
  background: none;
  color: var(--kiwi-accent-ink);
  font-size: 0.72em;
}

#write .footnotes,
#write .md-def-footnote {
  color: var(--kiwi-ink-soft);
  font-size: 0.92rem;
  opacity: 1;
}

/* The number and its text are adjacent inline spans with nothing between them, so the gap
   after the marker has to be drawn rather than typed. */
#write .md-def-name {
  margin-right: 0.4em;
  color: var(--kiwi-accent-ink);
  font-weight: 700;
}

#write .md-def-split {
  color: var(--kiwi-ink-faint);
}

/* ── Maths ───────────────────────────────────────────────────────────────────────────── */

#write .md-math-block {
  margin: 1.6rem 0;
}

#write .md-math-block .katex-display {
  margin: 0;
}

#write .md-rawblock-before,
#write .md-rawblock-after,
#write .md-rawblock-input {
  color: var(--kiwi-ink-soft);
}

/* ── Diagrams ────────────────────────────────────────────────────────────────────────── */

/*
 * A diagram is a figure, not a listing, so its panel takes the page's ground rather than
 * the fence's wash.
 *
 * The `!important`s below are not carelessness. Mermaid emits its palette as a <style>
 * element inside the SVG it draws, and those rules are *unlayered* — which beats every
 * layered rule in the document no matter how specific. Marking ours important is the only
 * thing that outranks them, and it is what any theme restyling diagrams has to do
 * too (this site renders no diagrams, so these rules are inert here
 * precisely so there is little to fight). Without this, Qi renders a light diagram on a
 * dark page.
 */
#write .md-fences.md-diagram {
  padding: 1.2rem;
  border-color: var(--kiwi-rule);
  background: var(--kiwi-bg);
}

#write .md-diagram-panel-preview .node rect,
#write .md-diagram-panel-preview .node circle,
#write .md-diagram-panel-preview .node ellipse,
#write .md-diagram-panel-preview .node polygon,
#write .md-diagram-panel-preview .node path {
  fill: var(--kiwi-wash) !important;
  stroke: var(--kiwi-ink-faint) !important;
}

#write .md-diagram-panel-preview .cluster rect {
  fill: var(--kiwi-bg) !important;
  stroke: var(--kiwi-rule) !important;
}

/* Labels are text in older shapes and HTML inside a <foreignObject> in newer ones, so both
   `fill` and `color` have to be said. */
#write .md-diagram-panel-preview text,
#write .md-diagram-panel-preview .nodeLabel,
#write .md-diagram-panel-preview .edgeLabel,
#write .md-diagram-panel-preview .label {
  fill: var(--kiwi-ink) !important;
  color: var(--kiwi-ink) !important;
  font-family: var(--kiwi-body) !important;
}

#write .md-diagram-panel-preview .edgeLabel rect,
#write .md-diagram-panel-preview .edgeLabel foreignObject div {
  fill: var(--kiwi-bg) !important;
  background: var(--kiwi-bg) !important;
}

#write .md-diagram-panel-preview .edgePath .path,
#write .md-diagram-panel-preview .flowchart-link,
#write .md-diagram-panel-preview line {
  stroke: var(--kiwi-ink-faint) !important;
}

#write .md-diagram-panel-preview .arrowheadPath,
#write .md-diagram-panel-preview marker path {
  fill: var(--kiwi-ink-faint) !important;
  stroke: none !important;
}

#write .md-diagram-panel-preview.md-diagram-error {
  color: var(--kiwi-ink-soft);
}

/* ── Fenced-code tokens ──────────────────────────────────────────────────────────────── */

/*
 * Typora highlights fences with CodeMirror 5, so themes colour code through
 * `.cm-s-inner .cm-*` — see doc/dom-contract.md. src/render/highlight.ts tokenises with
 * Prism and relabels the output with these names, so this is the vocabulary that actually
 * reaches the page.
 *
 * Four hues and no more, because code set inside prose should not be the loudest thing on
 * the page: one for structure, one for text, one for values, and grey for everything that
 * is punctuation or aside. su.css and qi.css give them their values.
 */
#write .cm-s-inner .cm-comment {
  color: var(--cm-comment);
  font-style: italic;
}

#write .cm-s-inner .cm-keyword,
#write .cm-s-inner .cm-tag,
#write .cm-s-inner .cm-builtin,
#write .cm-s-inner .cm-qualifier {
  color: var(--cm-keyword);
}

#write .cm-s-inner .cm-string,
#write .cm-s-inner .cm-string-2,
#write .cm-s-inner .cm-attribute {
  color: var(--cm-string);
}

#write .cm-s-inner .cm-number,
#write .cm-s-inner .cm-atom,
#write .cm-s-inner .cm-link,
#write .cm-s-inner .cm-url {
  color: var(--cm-number);
}

#write .cm-s-inner .cm-def,
#write .cm-s-inner .cm-property,
#write .cm-s-inner .cm-variable-2,
#write .cm-s-inner .cm-variable-3 {
  color: var(--cm-name);
}

#write .cm-s-inner .cm-variable {
  color: var(--kiwi-ink);
}

#write .cm-s-inner .cm-operator,
#write .cm-s-inner .cm-bracket,
#write .cm-s-inner .cm-meta {
  color: var(--cm-punct);
}

#write .cm-s-inner .cm-error,
#write .cm-s-inner .cm-invalidchar {
  color: var(--cm-error);
}

#write .cm-s-inner .cm-header,
#write .cm-s-inner .cm-strong {
  color: var(--kiwi-ink-strong);
  font-weight: 700;
}

#write .cm-s-inner .cm-em {
  font-style: italic;
}

#write .cm-s-inner .cm-hr {
  color: var(--kiwi-ink-faint);
}

/* ── Print ───────────────────────────────────────────────────────────────────────────── */

/*
 * On paper the ground is already white, so the washes become tints nobody asked to spend
 * ink on. The rules do the same work without them.
 */
@media print {
  #write code,
  #write .md-fences,
  #write .md-toc,
  #write pre.md-meta-block {
    background: none;
  }

  #write a {
    text-decoration-color: var(--kiwi-rule);
  }
}

/*
 * 璃 — the glass material shared by the glazed palettes.
 *
 * 璃 is the 璃 of 琉璃, glazed and translucent. These are not a new family: they are Su, Qi
 * and Ye seen through glass. Each palette loads its structural foundation first — kiwi.css
 * for Su and Qi, ye.css for Ye — so the type, rhythm, accent and every selector the DOM
 * contract asks for arrive already set; this file changes only their material.
 *
 * That layering is deliberate. A theme has to answer for the whole of doc/dom-contract.md,
 * and a second copy of those answers is a second place to forget one. Here the only rules
 * are the ones where glass differs from paper.
 *
 * ── What the material is ──────────────────────────────────────────────────────────────
 *
 * Liquid Glass is not a colour, it is a stack, and it needs something behind it or there is
 * nothing to be glass *about*. So:
 *
 *   1. the page gets a soft field of colour, wide and low-contrast — the thing that shows
 *      through, and the reason the sheet's tint shifts as you scroll;
 *   2. #write becomes a frosted sheet floating on it, blurring and saturating what is
 *      behind rather than painting over it;
 *   3. blocks inside — fences, tables, quotes, the contents — are a second layer of glass
 *      on the first, so depth reads as depth and not as a border;
 *   4. every pane carries a specular edge: a bright hairline along the top where light
 *      would catch, a dim rim elsewhere, and a soft shadow underneath to lift it.
 *
 * The docked panels are this same material (src/shell/shell.css), and because the document
 * scrolls *under* it, its blur has the sheet to work with and the two read as one surface.
 *
 * ── Legibility ────────────────────────────────────────────────────────────────────────
 *
 * Translucency is the one thing that can make text unreadable, since the ground moves. Both
 * palettes answer it the same way the material is supposed to: the sheet is opaque enough
 * that ink never sits directly on the backdrop, and the ink is pushed a step further from
 * the ground than in Su and Qi, where the page was a known colour.
 *
 * ── What each glassy palette must define ─────────────────────────────────────────────
 * Everything kiwi.css asks for, plus:
 *   --lg-field        the backdrop: a background shorthand, gradients and all
 *   --lg-pane         the sheet's own fill, translucent
 *   --lg-gloss        the sheet's highlight, strongest at the top edge
 *   --lg-pane-inner   fill for blocks sitting on the sheet — kept very low, see below
 *   --lg-chip         fill for inline code and kbd, which are too small to blur
 *   --lg-sheen        the specular hairline along a top edge
 *   --lg-rim          the hairline everywhere else
 *   --lg-shadow       what lifts a pane off the field
 *   --lg-blur         the backdrop-filter for the sheet
 *   --lg-blur-inner   the backdrop-filter for blocks on it
 *
 * ── Curvature ─────────────────────────────────────────────────────────────────────────
 *
 * The radii are variables rather than literals because how round the glass is turns out to
 * be a property of the theme and not of the material: the same stack that reads as soft
 * and app-like under Su reads as flippant under Ye, whose type is a conference paper. The
 * defaults below are the soft end; a palette that wants the material without the softness
 * retunes them after the import, as glassy-ye.css does.
 */

:root {
  --lg-radius-sheet: 28px;
  /* fences, the contents, tables */
  --lg-radius-pane: 16px;
  /* the smaller panes: front matter, quotes */
  --lg-radius-inner: 14px;
  /* inline chips: code, kbd, marks */
  --lg-radius-chip: 6px;
}

/* ── The field ───────────────────────────────────────────────────────────────────────── */

/*
 * Painted on html so it reaches the whole canvas, and it does not scroll: <content> is the
 * scroller here, not the viewport, so the field stays put while the sheet travels over it.
 * That relative movement is most of what sells the material.
 */
html {
  background: var(--lg-field);
}

body {
  background: transparent;
}

/* ── The sheet ───────────────────────────────────────────────────────────────────────── */

/*
 * The sheet has no border, and that is the point.
 *
 * A hairline all the way round a pane this size stops reading as an edge and starts reading
 * as a frame — the sheet becomes a card sitting on the field rather than a thickness of
 * glass over it. An earlier version went further and put a masked ring of extra blur just
 * inside the rim, on the theory that a lens bends light most where it curves; because the
 * mask had a hard boundary it came out as a bright mat around the page, which is the least
 * liquid thing a piece of glass can do.
 *
 * So the edge is drawn by the material instead: the fill is lighter than the field, a
 * specular hairline catches the top edge where light would land, and a soft shadow lifts
 * the whole thing. Nothing anywhere has a hard outline, and where the sheet ends is
 * something you read from the change in depth rather than from a line.
 *
 * The gloss is the other half of it — real glass is brighter where it faces the light, not
 * uniformly tinted, so the fill carries a gradient down from the top edge instead of a flat
 * wash. It falls off over a fixed distance rather than a percentage: this element is as tall
 * as the document, and a percentage would stretch the highlight down the whole page.
 */
#write {
  margin-block: 1.25rem 4rem;
  padding: 2.75rem 2.25rem 6rem;
  border: 0;
  border-radius: var(--lg-radius-sheet);
  background:
    linear-gradient(to bottom, var(--lg-gloss), transparent 240px),
    var(--lg-pane);
  backdrop-filter: var(--lg-blur);
  -webkit-backdrop-filter: var(--lg-blur);
  box-shadow:
    inset 0 1px 0 var(--lg-sheen),
    var(--lg-shadow);
}

/* Without backdrop-filter the tint alone is a washed-out film with no material to it, so
   fall back to a pane opaque enough to read on. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #write {
    background: var(--kiwi-bg);
  }
}

/* ── Blocks on the sheet ─────────────────────────────────────────────────────────────── */

/*
 * The second layer of glass.
 *
 * The fill here is deliberately almost nothing. A block sits *on* the sheet, so its own
 * tint composites over one that is already there — 40% white over a 55% white sheet lands
 * near 73%, and at that point the field's colour is gone and the block reads as a solid
 * card someone pasted onto the glass. Whatever fill these panes carry, they carry it twice.
 *
 * So the tint is dropped to a film and the work is given to the other three things a pane
 * has: the rim, the specular hairline, and its own backdrop-filter. That last one is what
 * actually distinguishes a block, and it does it in the right currency — the extra
 * saturation makes the field *more* vivid inside the pane than outside, so a code block
 * reads as thicker glass rather than as opaque material.
 *
 * Legibility is unaffected: body text already sits directly on the sheet, so text in a pane
 * that is nearly clear is on exactly the same ground as the paragraph above it.
 */
#write .md-fences,
#write .md-toc,
#write pre.md-meta-block,
#write table {
  border: 1px solid var(--lg-rim);
  border-radius: var(--lg-radius-pane);
  background: var(--lg-pane-inner);
  backdrop-filter: var(--lg-blur-inner);
  -webkit-backdrop-filter: var(--lg-blur-inner);
  box-shadow: inset 0 1px 0 var(--lg-sheen);
}

#write pre.md-meta-block {
  border-radius: var(--lg-radius-inner);
  padding: 0.9rem 1.15rem;
}

#write .md-fences {
  padding: 1rem 1.2rem 1.2rem;
}

/*
 * Tables become a pane too, which means the collapsed borders base.css sets have to go:
 * a collapsed table paints its cell borders over the pane's rounded corners. Separated
 * borders with no spacing draw the same fine grid and stay inside the radius.
 */
#write table {
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
}

#write table th,
#write table td {
  border-right: 1px solid var(--lg-rim);
  border-bottom: 1px solid var(--lg-rim);
  /* Paper themes may pull the outer columns flush with the text; inside a pane they need
     the inset back, or the first character sits on the rim. */
  padding: 0.6em 1em;
}

#write table th {
  border-bottom: 1px solid var(--kiwi-ink-faint);
  background: var(--lg-pane-inner);
}

#write table th:first-child,
#write table td:first-child {
  padding-left: 1em;
}

#write table th:last-child,
#write table td:last-child {
  padding-right: 1em;
}

/* A quote is the lightest pane of all — barely a fill, and the accent rule doing the work. */
#write blockquote {
  padding: 0.6rem 1.1rem;
  border-left: 3px solid color-mix(in srgb, var(--kiwi-accent) 65%, transparent);
  border-radius: 0 var(--lg-radius-inner) var(--lg-radius-inner) 0;
  background: var(--lg-pane-inner);
  backdrop-filter: var(--lg-blur-inner);
  -webkit-backdrop-filter: var(--lg-blur-inner);
}

/* Inline chips are small enough that a blur would cost more than it shows, so they take a
   fill and the rim and stop there — and that fill has to be stronger than a block's, since
   without a backdrop-filter there is nothing else to say a chip is there. */
#write code,
#write kbd {
  border: 1px solid var(--lg-rim);
  border-radius: var(--lg-radius-chip);
  background: var(--lg-chip);
}

/* A diagram is a figure: it takes the pane, not the fence's own darker fill. */
#write .md-fences.md-diagram {
  border-color: var(--lg-rim);
  background: var(--lg-pane-inner);
}

/* ── Rules and marks ─────────────────────────────────────────────────────────────────── */

/* On glass a flat hairline reads as a scratch. Fading it out at both ends makes it a
   highlight lying on the surface instead. */
#write hr,
#write .md-hr {
  height: 1px;
  background: linear-gradient(to right, transparent, var(--kiwi-rule) 15%, var(--kiwi-rule) 85%, transparent);
}

#write mark {
  border-radius: var(--lg-radius-chip);
}

#write .md-toc {
  padding: 1.1rem 1.35rem;
}

/* ── Selection ───────────────────────────────────────────────────────────────────────── */

/* Translucent, so the band lies over the glass rather than punching a hole in it. */
::selection {
  background: var(--kiwi-select);
  color: var(--kiwi-ink-strong);
}

/* ── Print ───────────────────────────────────────────────────────────────────────────── */

/*
 * None of this survives paper: there is nothing behind a sheet of paper to refract. Flatten
 * every pane back to plain rules, and drop the field so the printer is not asked to lay
 * down a full-page gradient.
 */
@media print {
  html {
    background: #ffffff;
  }

  #write {
    margin-block: 0;
    border-radius: 0;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
  }

  #write .md-fences,
  #write .md-toc,
  #write pre.md-meta-block,
  #write table,
  #write blockquote,
  #write code,
  #write kbd {
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
  }
}


/* ── Palettes ─────────────────────────────────────────────────────────────────────────
 *
 * Su and Qi, scoped so both ship in one file and the toggle is an attribute flip.
 *
 * The bare :root is the no-JavaScript default, and the media query below it is what makes
 * that default follow the reader's system preference when nothing has set [data-theme].
 * The explicit dark rule comes last so it outranks the media query at equal specificity —
 * a reader who has chosen light keeps light on a machine set to dark.
 */
:root,
:root[data-theme='light'] {

  color-scheme: light;

  /*
   * The field. Three wide, low-contrast pools on a warm pale ground — no edges anywhere,
   * because anything with an edge would show the blur as a smear rather than as depth.
   *
   * Their centres sit *under* the reading column rather than out in the margins. Pushed to
   * the corners the colour only ever appears beside the sheet, which makes the page look
   * like a white card on a tinted wall; overlapping it is what lets the glass pick the
   * colour up and shift as the document scrolls past.
   */
  --lg-field: radial-gradient(70rem 46rem at 24% 6%, rgba(226, 193, 166, 0.62), transparent 60%),
    radial-gradient(62rem 44rem at 80% 26%, rgba(176, 206, 200, 0.58), transparent 62%),
    radial-gradient(72rem 50rem at 48% 96%, rgba(208, 168, 158, 0.5), transparent 60%) #eae7e1;

  --lg-pane: rgba(255, 255, 255, 0.55);
  --lg-gloss: rgba(255, 255, 255, 0.5);
  /* A film, not a fill: this composites over the sheet's own 55%, so anything substantial
     here lands near-opaque and the field's colour stops reaching the block. */
  --lg-pane-inner: rgba(255, 255, 255, 0.2);
  --lg-chip: rgba(255, 255, 255, 0.42);
  --lg-sheen: rgba(255, 255, 255, 0.85);
  --lg-rim: rgba(64, 52, 40, 0.11);
  --lg-shadow: 0 26px 60px -26px rgba(62, 47, 36, 0.42);
  --lg-blur: saturate(175%) blur(26px);
  /* Saturated harder than the sheet, so the field reads *more* vivid inside a block than
     outside it. That difference is what marks the pane, in place of the fill. */
  --lg-blur-inner: saturate(210%) blur(10px);

  /* The ground kiwi.css falls back to where glass is unavailable, and what base.css reads
     as --bg-color. Close to the field's own ground, so the two never disagree visibly. */
  --kiwi-bg: #f3f1ed;

  /*
   * A step darker than Su's ink at every level. On paper the ground is a known colour; here
   * it moves, so the text has further to be from it.
   */
  --kiwi-ink: #241f19;
  --kiwi-ink-strong: #120f0b;
  --kiwi-ink-soft: #5f574c;
  --kiwi-ink-faint: #948b7e;

  --kiwi-rule: rgba(60, 48, 36, 0.16);
  --kiwi-wash: rgba(255, 255, 255, 0.46);
  --kiwi-wash-edge: rgba(64, 52, 40, 0.11);

  --kiwi-accent: #9c4f43;
  --kiwi-accent-ink: #8a4234;
  --kiwi-accent-wash: rgba(201, 122, 96, 0.28);

  /* Translucent, so the selection lies on the glass instead of cutting through it. */
  --kiwi-select: rgba(201, 140, 110, 0.3);

  /* Su's four hues, each deepened slightly: a token sitting on a translucent pane has less
     contrast to spend than one on solid paper. */
  --cm-comment: #948a7c;
  --cm-keyword: #42557a;
  --cm-string: #52684a;
  --cm-number: #94563b;
  --cm-name: #241f18;
  --cm-punct: #7a7268;
  --cm-error: #a2331f;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {

  /*
   * Says "this page is dark" to the browser itself — the document scrollbar and the empty
   * task-list checkbox are drawn by it, not by us, and an unticked checkbox arrives as a
   * solid white square otherwise. Pinned rather than left to the system, so the page
   * follows the theme and not the desktop.
   */
  color-scheme: dark;

  /* Centred under the reading column, not out in the margins: pushed to the corners the
     glow only ever appears beside the sheet, and the page reads as a dark card on a lit
     wall rather than as glass with something burning behind it. */
  --lg-field: radial-gradient(68rem 46rem at 22% 4%, rgba(168, 98, 56, 0.46), transparent 60%),
    radial-gradient(60rem 44rem at 82% 26%, rgba(44, 92, 106, 0.42), transparent 62%),
    radial-gradient(72rem 50rem at 50% 96%, rgba(92, 62, 92, 0.4), transparent 60%) #0e0b09;

  --lg-pane: rgba(30, 25, 21, 0.55);
  --lg-gloss: rgba(255, 255, 255, 0.06);
  /* Barely a film. On lacquer a pane is marked by being *lifted* — a trace of white and a
     brighter rim — not by being filled in. */
  --lg-pane-inner: rgba(255, 255, 255, 0.045);
  --lg-chip: rgba(255, 255, 255, 0.09);
  --lg-sheen: rgba(255, 255, 255, 0.14);
  --lg-rim: rgba(255, 255, 255, 0.1);
  --lg-shadow: 0 26px 60px -24px rgba(0, 0, 0, 0.72);
  --lg-blur: saturate(165%) blur(28px);
  /* Saturated harder than the sheet, so the glow behind is more present inside a block than
     outside it — the pane is marked by more colour, not by more material. */
  --lg-blur-inner: saturate(200%) blur(10px);

  --kiwi-bg: #16120f;

  --kiwi-ink: #e6e0d4;
  --kiwi-ink-strong: #f7f2e7;
  --kiwi-ink-soft: #a89e8e;
  --kiwi-ink-faint: #7d7466;

  --kiwi-rule: rgba(255, 255, 255, 0.13);
  --kiwi-wash: rgba(255, 255, 255, 0.055);
  --kiwi-wash-edge: rgba(255, 255, 255, 0.1);

  --kiwi-accent: #c96a4f;
  --kiwi-accent-ink: #dd8b68;
  --kiwi-accent-wash: rgba(191, 102, 70, 0.3);

  --kiwi-select: rgba(191, 112, 80, 0.34);

  /* Qi's hues, lifted a little further: a translucent pane is lighter than lacquer was, and
     the tokens have to stay clear of it. */
  --cm-comment: #8b8170;
  --cm-keyword: #9db3d1;
  --cm-string: #a8bf94;
  --cm-number: #dd9673;
  --cm-name: #f0eae0;
  --cm-punct: #9c9384;
  --cm-error: #e87864;
  }
}

:root[data-theme='dark'] {

  /*
   * Says "this page is dark" to the browser itself — the document scrollbar and the empty
   * task-list checkbox are drawn by it, not by us, and an unticked checkbox arrives as a
   * solid white square otherwise. Pinned rather than left to the system, so the page
   * follows the theme and not the desktop.
   */
  color-scheme: dark;

  /* Centred under the reading column, not out in the margins: pushed to the corners the
     glow only ever appears beside the sheet, and the page reads as a dark card on a lit
     wall rather than as glass with something burning behind it. */
  --lg-field: radial-gradient(68rem 46rem at 22% 4%, rgba(168, 98, 56, 0.46), transparent 60%),
    radial-gradient(60rem 44rem at 82% 26%, rgba(44, 92, 106, 0.42), transparent 62%),
    radial-gradient(72rem 50rem at 50% 96%, rgba(92, 62, 92, 0.4), transparent 60%) #0e0b09;

  --lg-pane: rgba(30, 25, 21, 0.55);
  --lg-gloss: rgba(255, 255, 255, 0.06);
  /* Barely a film. On lacquer a pane is marked by being *lifted* — a trace of white and a
     brighter rim — not by being filled in. */
  --lg-pane-inner: rgba(255, 255, 255, 0.045);
  --lg-chip: rgba(255, 255, 255, 0.09);
  --lg-sheen: rgba(255, 255, 255, 0.14);
  --lg-rim: rgba(255, 255, 255, 0.1);
  --lg-shadow: 0 26px 60px -24px rgba(0, 0, 0, 0.72);
  --lg-blur: saturate(165%) blur(28px);
  /* Saturated harder than the sheet, so the glow behind is more present inside a block than
     outside it — the pane is marked by more colour, not by more material. */
  --lg-blur-inner: saturate(200%) blur(10px);

  --kiwi-bg: #16120f;

  --kiwi-ink: #e6e0d4;
  --kiwi-ink-strong: #f7f2e7;
  --kiwi-ink-soft: #a89e8e;
  --kiwi-ink-faint: #7d7466;

  --kiwi-rule: rgba(255, 255, 255, 0.13);
  --kiwi-wash: rgba(255, 255, 255, 0.055);
  --kiwi-wash-edge: rgba(255, 255, 255, 0.1);

  --kiwi-accent: #c96a4f;
  --kiwi-accent-ink: #dd8b68;
  --kiwi-accent-wash: rgba(191, 102, 70, 0.3);

  --kiwi-select: rgba(191, 112, 80, 0.34);

  /* Qi's hues, lifted a little further: a translucent pane is lighter than lacquer was, and
     the tokens have to stay clear of it. */
  --cm-comment: #8b8170;
  --cm-keyword: #9db3d1;
  --cm-string: #a8bf94;
  --cm-number: #dd9673;
  --cm-name: #f0eae0;
  --cm-punct: #9c9384;
  --cm-error: #e87864;
}
}