:root {
  --theme-color: #2563eb;
  --sidebar-width: 320px;
  --reader-max-width: 880px;
}

body {
  color: #1f2937;
  letter-spacing: 0;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.markdown-section {
  box-sizing: border-box;
  font-size: 17px;
  line-height: 1.78;
  margin: 0 auto;
  max-width: var(--reader-max-width);
  padding: 34px 42px 64px;
  overflow-wrap: anywhere;
}

.markdown-section h1 {
  font-size: 2rem;
  line-height: 1.25;
  margin: 0 0 1.2rem;
}

.markdown-section h2 {
  font-size: 1.45rem;
  line-height: 1.35;
  margin-top: 2.1rem;
}

.markdown-section h3 {
  font-size: 1.16rem;
  line-height: 1.45;
  margin-top: 1.6rem;
}

.markdown-section p,
.markdown-section li {
  line-height: inherit;
}

.markdown-section pre,
.markdown-section code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

.markdown-section pre {
  border-radius: 6px;
  font-size: 0.88rem;
  line-height: 1.55;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.markdown-section table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.markdown-section img {
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  height: auto;
  max-height: 680px;
  max-width: 100%;
  object-fit: contain;
}

.sidebar {
  width: var(--sidebar-width);
}

.sidebar-nav > ul > li > ul {
  display: none;
}

.sidebar-nav > ul > li.is-current-chapter > ul {
  display: block;
}

.content {
  left: var(--sidebar-width);
}

@media (max-width: 768px) {
  body {
    font-size: 16px;
  }

  .app-nav {
    display: none;
  }

  .content {
    left: 0;
    padding-top: 0;
  }

  .markdown-section {
    font-size: 16px;
    line-height: 1.72;
    max-width: none;
    padding: 22px 18px 40px;
  }

  .markdown-section h1 {
    font-size: 1.62rem;
    line-height: 1.28;
    margin-top: 0.25rem;
  }

  .markdown-section h2 {
    font-size: 1.28rem;
    line-height: 1.38;
    margin-top: 1.85rem;
  }

  .markdown-section h3 {
    font-size: 1.08rem;
  }

  .markdown-section pre {
    margin-left: -2px;
    margin-right: -2px;
    padding: 0.9rem;
  }

  .markdown-section blockquote {
    margin-left: 0;
    padding-left: 1rem;
  }

  .sidebar {
    width: min(84vw, var(--sidebar-width));
  }

  .sidebar-toggle {
    background: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    bottom: 16px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.16);
    height: 42px;
    left: 16px;
    padding: 10px;
    position: fixed;
    top: auto;
    width: 42px;
    z-index: 40;
  }
}