:root {
  --def-bg: #07131d;
  --def-bg-soft: #0b1d2a;
  --def-bg-panel: #102536;
  --def-text: #dbeaf0;
  --def-muted: #91aeb9;
  --def-faint: #5f7c88;
  --def-cyan: #45d9e8;
  --def-cyan-soft: #9deef5;
  --def-gold: #e5c46b;
  --def-red: #ff7d7d;
  --def-border: rgba(116, 216, 230, 0.22);
  --def-shadow: rgba(0, 0, 0, 0.28);
  --font-text-theme: "Yu Gothic UI", "Yu Gothic", "Hiragino Sans", "Noto Sans JP", system-ui, sans-serif;
  --font-interface-theme: "Yu Gothic UI", "Yu Gothic", "Hiragino Sans", "Noto Sans JP", system-ui, sans-serif;
  --font-monospace-theme: "Cascadia Code", "Consolas", "SFMono-Regular", monospace;
}

body,
body.theme-dark,
.theme-dark,
.published-container {
  --background-primary: var(--def-bg);
  --background-secondary: var(--def-bg-soft);
  --background-modifier-border: var(--def-border);
  --text-normal: var(--def-text);
  --text-muted: var(--def-muted);
  --text-faint: var(--def-faint);
  --text-accent: var(--def-cyan);
  --text-accent-hover: var(--def-cyan-soft);
  --interactive-accent: var(--def-cyan);
  --link-color: var(--def-cyan);
  --link-color-hover: var(--def-cyan-soft);
  --h1-color: #f2fdff;
  --h2-color: #d9f9ff;
  --h3-color: var(--def-cyan-soft);
  --code-normal: #dff8fb;
  --code-background: rgba(69, 217, 232, 0.08);
  --blockquote-border-color: var(--def-cyan);
  background: var(--def-bg);
  color: var(--def-text);
}

body.theme-light,
.theme-light {
  --background-primary: #f7fbfd;
  --background-secondary: #eaf5f8;
  --background-modifier-border: rgba(9, 93, 111, 0.18);
  --text-normal: #19313b;
  --text-muted: #4f6a73;
  --text-faint: #718992;
  --text-accent: #007c91;
  --text-accent-hover: #009fba;
  --interactive-accent: #008ea4;
  --link-color: #007c91;
  --link-color-hover: #009fba;
  --h1-color: #082a36;
  --h2-color: #0d4352;
  --h3-color: #0b6476;
  --code-normal: #123641;
  --code-background: rgba(0, 142, 164, 0.08);
  --blockquote-border-color: #008ea4;
  background: var(--background-primary);
  color: var(--text-normal);
}

.published-container,
.workspace,
.workspace-split,
.workspace-leaf,
.workspace-leaf-content,
.markdown-preview-view,
.markdown-source-view,
.view-content {
  background: var(--background-primary);
}

.published-container {
  --page-width: 780px;
  --page-side-padding: 28px;
}

.markdown-preview-view,
.markdown-rendered,
.markdown-source-view.mod-cm6 .cm-scroller {
  font-family: var(--font-text-theme);
  line-height: 1.82;
  letter-spacing: 0;
}

.markdown-preview-view,
.markdown-rendered {
  max-width: 780px;
  margin: 0 auto;
}

.markdown-rendered h1,
.markdown-preview-view h1,
.cm-header-1 {
  font-size: 2.3rem;
  line-height: 1.16;
  margin-top: 1.6rem;
  margin-bottom: 1.4rem;
  font-weight: 720;
}

.markdown-rendered h2,
.markdown-preview-view h2,
.cm-header-2 {
  font-size: 1.42rem;
  line-height: 1.35;
  margin-top: 2.2rem;
  margin-bottom: 0.8rem;
  padding-bottom: 0.28rem;
  border-bottom: 1px solid var(--background-modifier-border);
}

.markdown-rendered h3,
.markdown-preview-view h3,
.cm-header-3 {
  font-size: 1.1rem;
  line-height: 1.45;
  margin-top: 1.8rem;
}

.markdown-rendered p,
.markdown-preview-view p {
  margin: 0.9rem 0;
}

.markdown-rendered a,
.markdown-preview-view a,
.cm-hmd-internal-link,
.cm-link {
  color: var(--link-color);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

.markdown-rendered a:hover,
.markdown-preview-view a:hover {
  color: var(--link-color-hover);
}

.markdown-rendered blockquote,
.markdown-preview-view blockquote {
  margin: 1.4rem 0;
  padding: 0.1rem 0 0.1rem 1rem;
  border-left: 2px solid var(--blockquote-border-color);
  color: var(--text-muted);
}

.markdown-rendered hr,
.markdown-preview-view hr {
  border: 0;
  border-top: 1px solid var(--background-modifier-border);
  margin: 2rem 0;
}

.markdown-rendered code,
.markdown-preview-view code,
.cm-inline-code {
  background: var(--code-background);
  color: var(--code-normal);
  border-radius: 4px;
  padding: 0.08em 0.28em;
  font-family: var(--font-monospace-theme);
  font-size: 0.92em;
}

.markdown-rendered pre,
.markdown-preview-view pre {
  background: var(--background-secondary);
  border: 1px solid var(--background-modifier-border);
  border-radius: 8px;
  box-shadow: 0 16px 36px var(--def-shadow);
}

.markdown-rendered pre code,
.markdown-preview-view pre code {
  background: transparent;
  padding: 0;
}

.math,
.math-block,
.math-inline,
.mjx-container,
.cm-math {
  color: var(--def-cyan-soft);
}

.markdown-rendered mjx-container[jax="CHTML"][display="true"],
.markdown-preview-view mjx-container[jax="CHTML"][display="true"] {
  margin: 1.65rem 0;
  padding: 1rem 0.75rem;
  overflow-x: auto;
  overflow-y: hidden;
  background: rgba(69, 217, 232, 0.055);
  border: 1px solid var(--background-modifier-border);
  border-radius: 8px;
}

.markdown-rendered ul,
.markdown-preview-view ul {
  padding-left: 1.35rem;
}

.markdown-rendered li,
.markdown-preview-view li {
  margin: 0.35rem 0;
}

.site-body-left-column,
.site-body-right-column,
.nav-view-outer,
.outline-view-outer,
.backlinks-view-outer,
.graph-view-outer {
  background: var(--background-secondary);
  border-color: var(--background-modifier-border);
}

.site-body-left-column a,
.site-body-right-column a,
.nav-view a,
.outline-view a {
  color: var(--text-muted);
}

.site-body-left-column a:hover,
.site-body-right-column a:hover,
.nav-view a:hover,
.outline-view a:hover {
  color: var(--link-color-hover);
}

.site-header,
.site-footer {
  background: var(--background-primary);
  border-color: var(--background-modifier-border);
}

.site-header-text,
.site-name,
.site-footer a {
  color: var(--def-cyan-soft);
}

::selection {
  background: rgba(69, 217, 232, 0.28);
  color: #ffffff;
}

@media (max-width: 720px) {
  .published-container {
    --page-side-padding: 18px;
  }

  .markdown-rendered h1,
  .markdown-preview-view h1,
  .cm-header-1 {
    font-size: 1.82rem;
  }

  .markdown-rendered h2,
  .markdown-preview-view h2,
  .cm-header-2 {
    font-size: 1.26rem;
  }
}