/* @import "tailwind-light.user.css"; */

/* FONTS */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: block;
  src: url("fonts/ceylon/Inter-roman.ttf") format("truetype");
  font-named-instance: "Regular";
}

@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 100 900;
  font-display: block;
  src: url("fonts/ceylon/Inter-italic.ttf") format("truetype");
  font-named-instance: "Italic";
}

/* Display Font - IBM Plex Sans */
/* License - SIL Open Font License 1.1 - https://github.com/IBM/plex/blob/master/LICENSE.txt */
@font-face {
  font-family: 'IBMPlexSans';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('fonts/ceylon/display/IBM-Plex-Sans/IBMPlexSans-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'IBMPlexSans';
  font-style: italic;
  font-weight: 400;
  font-display: block;
  src: url('fonts/ceylon/display/IBM-Plex-Sans/IBMPlexSans-Italic.ttf') format('truetype');
}

@font-face {
  font-family: 'IBMPlexSans';
  font-style: normal;
  font-weight: 700;
  font-display: block;
  src: url('fonts/ceylon/display/IBM-Plex-Sans/IBMPlexSans-Bold.ttf') format('truetype');
}

@font-face {
  font-family: 'IBMPlexSans';
  font-style: italic;
  font-weight: 700;
  font-display: block;
  src: url('fonts/ceylon/display/IBM-Plex-Sans/IBMPlexSans-BoldItalic.ttf') format('truetype');
}

@font-face {
  font-family: 'IBMPlexSans';
  font-style: normal;
  font-weight: 100;
  font-display: block;
  src: url('fonts/ceylon/display/IBM-Plex-Sans/IBMPlexSans-Thin.ttf') format('truetype');
}

@font-face {
  font-family: 'IBMPlexSans';
  font-style: italic;
  font-weight: 100;
  font-display: block;
  src: url('fonts/ceylon/display/IBM-Plex-Sans/IBMPlexSans-ThinItalic.ttf') format('truetype');
}

@font-face {
  font-family: 'IBMPlexSans';
  font-style: normal;
  font-weight: 200;
  font-display: block;
  src: url('fonts/ceylon/display/IBM-Plex-Sans/IBMPlexSans-ExtraLight.ttf') format('truetype');
}

@font-face {
  font-family: 'IBMPlexSans';
  font-style: italic;
  font-weight: 200;
  font-display: block;
  src: url('fonts/ceylon/display/IBM-Plex-Sans/IBMPlexSans-ExtraLightItalic.ttf') format('truetype');
}

@font-face {
  font-family: 'IBMPlexSans';
  font-style: normal;
  font-weight: 300;
  font-display: block;
  src: url('fonts/ceylon/display/IBM-Plex-Sans/IBMPlexSans-Light.ttf') format('truetype');
}

@font-face {
  font-family: 'IBMPlexSans';
  font-style: italic;
  font-weight: 300;
  font-display: block;
  src: url('fonts/ceylon/display/IBM-Plex-Sans/IBMPlexSans-LightItalic.ttf') format('truetype');
}

@font-face {
  font-family: 'IBMPlexSans';
  font-style: normal;
  font-weight: 500;
  font-display: block;
  src: url('fonts/ceylon/display/IBM-Plex-Sans/IBMPlexSans-Medium.ttf') format('truetype');
}

@font-face {
  font-family: 'IBMPlexSans';
  font-style: italic;
  font-weight: 500;
  font-display: block;
  src: url('fonts/ceylon/display/IBM-Plex-Sans/IBMPlexSans-MediumItalic.ttf') format('truetype');
}

@font-face {
  font-family: 'IBMPlexSans';
  font-style: normal;
  font-weight: 600;
  font-display: block;
  src: url('fonts/ceylon/display/IBM-Plex-Sans/IBMPlexSans-SemiBold.ttf') format('truetype');
}

@font-face {
  font-family: 'IBMPlexSans';
  font-style: italic;
  font-weight: 600;
  font-display: block;
  src: url('fonts/ceylon/display/IBM-Plex-Sans/IBMPlexSans-SemiBoldItalic.ttf') format('truetype');
}

/* Monospace Font - IBM Plex Mono */
/* License - SIL Open Font License 1.1 - https://github.com/IBM/plex/blob/master/LICENSE.txt */

@font-face {
  font-family: 'IBMPlexMono';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('fonts/ceylon/monospace/IBMPlexMono/IBMPlexMono-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'IBMPlexMono';
  font-style: italic;
  font-weight: 400;
  font-display: block;
  src: url('fonts/ceylon/monospace/IBMPlexMono/IBMPlexMono-Italic.ttf') format('truetype');
}

@font-face {
  font-family: 'IBMPlexMono';
  font-style: normal;
  font-weight: 700;
  font-display: block;
  src: url('fonts/ceylon/monospace/IBMPlexMono/IBMPlexMono-Bold.ttf') format('truetype');
}

@font-face {
  font-family: 'IBMPlexMono';
  font-style: italic;
  font-weight: 700;
  font-display: block;
  src: url('fonts/ceylon/monospace/IBMPlexMono/IBMPlexMono-BoldItalic.ttf') format('truetype');
}

@font-face {
  font-family: 'IBMPlexMono';
  font-style: normal;
  font-weight: 100;
  font-display: block;
  src: url('fonts/ceylon/monospace/IBMPlexMono/IBMPlexMono-Thin.ttf') format('truetype');
}

@font-face {
  font-family: 'IBMPlexMono';
  font-style: italic;
  font-weight: 100;
  font-display: block;
  src: url('fonts/ceylon/monospace/IBMPlexMono/IBMPlexMono-ThinItalic.ttf') format('truetype');
}

@font-face {
  font-family: 'IBMPlexMono';
  font-style: normal;
  font-weight: 200;
  font-display: block;
  src: url('fonts/ceylon/monospace/IBMPlexMono/IBMPlexMono-ExtraLight.ttf') format('truetype');
}

@font-face {
  font-family: 'IBMPlexMono';
  font-style: italic;
  font-weight: 200;
  font-display: block;
  src: url('fonts/ceylon/monospace/IBMPlexMono/IBMPlexMono-ExtraLightItalic.ttf') format('truetype');
}

@font-face {
  font-family: 'IBMPlexMono';
  font-style: normal;
  font-weight: 300;
  font-display: block;
  src: url('fonts/ceylon/monospace/IBMPlexMono/IBMPlexMono-Light.ttf') format('truetype');
}

@font-face {
  font-family: 'IBMPlexMono';
  font-style: italic;
  font-weight: 300;
  font-display: block;
  src: url('fonts/ceylon/monospace/IBMPlexMono/IBMPlexMono-LightItalic.ttf') format('truetype');
}

@font-face {
  font-family: 'IBMPlexMono';
  font-style: normal;
  font-weight: 500;
  font-display: block;
  src: url('fonts/ceylon/monospace/IBMPlexMono/IBMPlexMono-Medium.ttf') format('truetype');
}

@font-face {
  font-family: 'IBMPlexMono';
  font-style: italic;
  font-weight: 500;
  font-display: block;
  src: url('fonts/ceylon/monospace/IBMPlexMono/IBMPlexMono-MediumItalic.ttf') format('truetype');
}

@font-face {
  font-family: 'IBMPlexMono';
  font-style: normal;
  font-weight: 600;
  font-display: block;
  src: url('fonts/ceylon/monospace/IBMPlexMono/IBMPlexMono-SemiBold.ttf') format('truetype');
}

@font-face {
  font-family: 'IBMPlexMono';
  font-style: italic;
  font-weight: 600;
  font-display: block;
  src: url('fonts/ceylon/monospace/IBMPlexMono/IBMPlexMono-SemiBoldItalic.ttf') format('truetype');
}

/* Monospace Font - Fira Code */

@font-face {
  font-family: "FiraCode";
  font-style: normal;
  font-weight: 100 900;
  font-display: block;
  src: url("fonts/ceylon/monospace/FiraCode-vf.ttf") format("truetype");
  font-named-instance: "Regular";
}

/* Monospace Font - Fira Mono */

@font-face {
  font-family: "FiraMono";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("fonts/ceylon/monospace/FiraMono/FiraMono-Regular.ttf") format("truetype");
  font-named-instance: "Regular";
}

@font-face {
  font-family: "FiraMono";
  font-style: bold;
  font-weight: 800;
  font-display: block;
  src: url("fonts/ceylon/monospace/FiraMono/FiraMono-Bold.ttf") format("truetype");
  font-named-instance: "Regular";
}

@font-face {
  font-family: "FiraMono";
  font-style: bold;
  font-weight: 500;
  font-display: block;
  src: url("fonts/ceylon/monospace/FiraMono/fi-Bold.ttf") format("truetype");
  font-named-instance: "Regular";
}


/* VARIABLES */

:root {
  --theme-0: #fff;

  --theme-muted: #F6F7F8;
  --theme-border: #EBEDF0;
  --theme-muted-blue: #d4e7fd;

  --theme-link: #076DDD;
  --theme-font-general: #171E27;

  /* Slate grayscale */
  --theme-50: #f8fafc;
  --theme-100: #f1f5f9;
  --theme-200: #e2e8f0;
  --theme-300: #cbd5e1;
  --theme-400: #94a3b8;
  --theme-500: #64748b;
  --theme-600: #475569;
  --theme-700: #334155;
  --theme-800: #1e293b;
  --theme-900: #0f172a;


  /* Tailwind variables */
  --tw-primary: #62bbf3;

  --tw-prose-body: var(--theme-font-general);
  --tw-prose-headings: var(--theme-900);
  --tw-prose-lead: var(--theme-600);
  --tw-prose-links: var(--theme-link);
  --tw-prose-bold: var(--theme-900);
  --tw-prose-counters: var(--theme-800);
  --tw-prose-bullets: var(--theme-500);
  --tw-prose-hr: var(--theme-200);
  --tw-prose-quotes: var(--theme-900);
  --tw-prose-quote-borders: var(--theme-200);
  --tw-prose-captions: var(--theme-500);
  --tw-prose-code: var(--theme-900);
  --tw-prose-pre-code: var(--theme-100);
  --tw-prose-pre-bg: var(--theme-800);
  --tw-prose-th-borders: var(--theme-300);
  --tw-prose-td-borders: var(--theme-200);
  --tw-prose-bg: var(--theme-0);
  --tw-prose-meta: var(--theme-500);
  --tw-prose-meta-bg: var(--theme-100);

  --tw-prose-invert-body: var(--theme-300);
  --tw-prose-invert-headings: var(--theme-0);
  --tw-prose-invert-lead: var(--theme-400);
  --tw-prose-invert-links: var(--theme-0);
  --tw-prose-invert-bold: var(--theme-0);
  --tw-prose-invert-counters: var(--theme-400);
  --tw-prose-invert-bullets: var(--theme-600);
  --tw-prose-invert-hr: var(--theme-700);
  --tw-prose-invert-quotes: var(--theme-100);
  --tw-prose-invert-quote-borders: var(--theme-700);
  --tw-prose-invert-captions: var(--theme-400);
  --tw-prose-invert-code: var(--theme-0);
  --tw-prose-invert-pre-bg: var(--theme-900);
  --tw-prose-invert-th-borders: var(--theme-600);
  --tw-prose-invert-td-borders: var(--theme-700);
  --tw-prose-invert-bg: var(--theme-800);
  --tw-prose-invert-meta: var(--theme-400);
  --tw-prose-invert-meta-bg: var(--theme-700);

  --tw-highlight-color: #fde047; /* yellow-300 */
  --tw-drop-shadow-md: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07))
    drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));
  --tw-button-hover-bg: var(--theme-100);

  --tw-button-hover-bg-inverted: var(--theme-700);

  /* Typora variables */

  --background: var(--tw-prose-bg);
  --bg-color: var(--tw-prose-bg);
  --text-color: var(--tw-prose-body);
  --primary-color: var(--tw-primary);
  --md-char-color: var(--theme-400);
  --meta-content-color: var(--theme-500);
  --typora-source-body: var(--theme-800);
  --heading-char-color: var(--md-char-color);
  --mermaid-theme: neutral;
  --active-toggle-btn-color: var(--theme-200);

  --md-char-color-inverted: var(--theme-500);
  --meta-content-color-inverted: var(--theme-400);
  --typora-source-body-inverted: var(--theme-300);
  --mermaid-theme-inverted: dark;
  --active-toggle-btn-color-inverted: var(--theme-400);

  /* Sidebar */
  /* --side-bar-bg-color: var(--tw-prose-bg); */
  --side-bar-bg-color: var(--theme-muted);
  --active-file-bg-color: var(--theme-100);
  --active-file-text-color: var(--tw-prose-bold);
  --active-file-border-color: var(--theme-100);
  --panel-border-color: var(--theme-300);
  --blur-text-color: var(--theme-300);
  --window-border: 1px solid var(--theme-border);
  --item-hover-bg-color: var(--theme-100);
  --search-hit-text-bg-color: var(--theme-200);
  --search-hit-text-font-color: inherit;
  --search-select-text-color: var(--select-text-font-color);
  --search-select-bg-color: var(--select-text-bg-color);

  --blur-text-color-inverted: var(--theme-500);
  --panel-border-color-inverted: var(--theme-700);
  --active-file-bg-color-inverted: var(--theme-700);
  --window-border-inverted: 1px solid var(--theme-700);
  --search-hit-text-bg-color-inverted: var(--theme-700);
  --search-hit-text-font-color-inverted: var(--theme-0);
  --search-select-bg-color-inverted: var(--theme-400);
  --rawblock-edit-panel-bd: var(--tw-prose-pre-bg);
  --item-hover-bg-color-inverted: var(--theme-700);

  --monospace: "IBMPlexMono", "FiraCode", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;

  /* Custom */
  --footnote: var(--tw-prose-body);
  /* I'd love to use the --theme grayscale for --footnote-bg, but there's (currently)
  no way to add an alpha-channel to a CSS variable (and we need the transparency
  because otherwise the caret wil not be visible), so I here just used a hardcoded
  copy of --theme-500 */
  --footnote-bg: #94a3b855;
  --button-bg: var(--theme-200);

  --button-bg-inverted: var(--theme-600);

  --md-grid-header: var(--theme-100);
  --md-grid-header-ext: var(--theme-400);
  --md-grid-ext: var(--theme-300);
  --md-grid-header-active: var(--theme-500);
  --md-grid-active: var(--theme-400);
  --md-grid-border-color: var(--theme-500);

  --md-grid-header-inverted: var(--theme-600);
  --md-grid-header-ext-inverted: var(--theme-500);
  --md-grid-ext-inverted: var(--theme-600);
  --md-grid-header-active-inverted: var(--theme-400);
  --md-grid-active-inverted: var(--theme-500);
  --md-grid-border-color-inverted: var(--theme-200);

  --code-blocks-font-size: 0.86em;
  --inline-code-font-size: 0.86em;

  /* --inline-code-font-color: #876CE0; */
  --inline-code-font-color: #076baf; 
  --h1-ind-color: #E4374B;
  --h2-ind-color: #0EB54F;
  --h3-ind-color: #076DDD;
  --h4-ind-color: #876CE0;
  --h5-ind-color: #D2A852;
  --h6-ind-color: #E0E5D5;
}

.ty-file-search-match-text {
  background-color: var(--search-hit-text-bg-color);
}

/* TAILWIND RESET */

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

/* 封装所有样式到 .typora-export-content */
.typora-export-content {
  font-family:  Arial, "PingFang SC", 'Microsoft Yahei', "Helvetica Neue", Helvetica, sans-serif;;
  color: var(--tw-prose-body);
  background: var(--tw-prose-bg);
  /* 重置外部样式影响 */
  all: revert; /* 恢复浏览器默认样式，屏蔽外部 CSS */
}

.typora-export-content #write {
  font-size: 1.12rem;
  line-height: 1.5;
  padding-top: 60px;
  padding-bottom: 60px;
  max-width: 84ch;
  margin: 0 auto;
  color: var(--tw-prose-body);
}

.typora-export-content h1,
.typora-export-content h2,
.typora-export-content h3,
.typora-export-content h4,
.typora-export-content h5,
.typora-export-content h6 {
  color: var(--tw-prose-headings);
  position: relative;
  padding-left: 10px;
  margin-block-start: 0.83em;
  margin-block-end: 0.83em;
}

.typora-export-content h1 {
  font-weight: 800;
  font-size: 2em;
  line-height: 1;
}

.typora-export-content h1::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 100%;
  width: 2px;
  background-color: var(--h1-ind-color);
}

.typora-export-content h2 {
  font-weight: 700;
  font-size: 1.7em;
  line-height: 1.1111111;
}

.typora-export-content h2::before {
  background-color: var(--h2-ind-color);
}

.typora-export-content h3 {
  font-weight: 600;
  font-size: 1.5em;
  line-height: 1.3333333;
}

.typora-export-content h3::before {
  background-color: var(--h3-ind-color);
}

.typora-export-content h4 {
  font-weight: 600;
  line-height: 1.6;
}

.typora-export-content h4::before {
  background-color: var(--h4-ind-color);
}

.typora-export-content p {
  margin-top: 1em;
  margin-bottom: 1em;
  font-size: 17px;
  font-weight: 400;
  line-height: 30px;
  color: #080808;
}

.typora-export-content h1::before, h2::before, h3::before, h4::before, h5::before, h6::before 
{
  content: ''; /* Required content property for pseudo-elements */
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 100%;
  width: 2px; /* Width of the bar */
}

.typora-export-content table {
  width: 100%;
  table-layout: auto;
  text-align: left;
  margin-top: 2em;
  margin-bottom: 2em;
  font-size: 0.8em;
  line-height: 1.5;
  border-collapse: collapse;
  border: none;
}

.typora-export-content .table-figure table {
  border: 1px solid #efefef;
}

.typora-export-content table th,
.typora-export-content table td {
  border: 1px solid #efefef;
  padding: 0.3em;
}

.typora-export-content table th:first-child {
  border-top-left-radius: 0.5em;
}

.typora-export-content table th:last-child {
  border-top-right-radius: 0.5em;
}

.typora-export-content table tr:last-child td:first-child {
  border-bottom-left-radius: 0.5em;
}

.typora-export-content thead {
  background-color: var(--theme-muted-blue);
}

.typora-export-content ul {
  list-style: disc !important;
  list-style-type: disc !important;
  padding-left: 2em;
  margin-top: 1em;
  margin-bottom: 1em;
  color: #334155;
  font-size: 1.2em;
}

.typora-export-content ol {
  list-style: decimal !important;
  list-style-type: decimal !important;
  padding-left: 2em;
  margin-top: 1em;
  margin-bottom: 1em;
  color: #334155;
  font-size: 0.9em;
}

/* 针对 <li> 覆盖 style.css 的 list-style: none */
.typora-export-content ul li,
.typora-export-content ol li {
  list-style: inherit !important; /* 继承父级 ul/ol 的 list-style */
}

.typora-export-content li {
  margin-top: 0;
  margin-bottom: 0;
}

.typora-export-content code {
  color: var(--inline-code-font-color);
  font-size: var(--inline-code-font-size);
  font-family: var(--monospace);
  padding: 0.2rem;
  border-radius: 3px;
  background: #f5f7f9;
}

.typora-export-content strong {
  color: var(--tw-prose-bold);
  font-weight: 600;
}

.typora-export-content hr {
  border-color: var(--tw-prose-hr);
  border-top-width: 1px;
  margin-top: 2.4em;
  margin-bottom: 2.4em;
}

.typora-export-content img {
  transform: scale(0.98); 
  border-radius: 0.5em;
  border: none;
  margin-top: 0.8em;
  margin-bottom: 0.8em;
}

.typora-export-content em {
  font-style: italic;
}
/* 移除全局样式，防止影响外部 */
html, body, h1, h2, h3, h4, h5, h6, p, table, ul, ol, code, hr, img, strong, em {
  /* 注释或移除全局定义 */
}
/* 避免 Tailwind 或其他外部样式干扰 */
.typora-export-content * {
  box-sizing: border-box; /* 确保布局一致 */
  margin: revert; /* 恢复默认边距 */
  padding: revert; /* 恢复默认填充 */
}