/* body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Noto Sans", "PingFang SC", "Microsoft YaHei", sans-serif;
  line-height: 1.6;
} */

.notion-container {
  max-width: 860px;
  margin: 0 auto;
  padding: 24px;
}

/* a {
  color: #0b5fff;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
} */

/* .content h1, .content h2, .content h3 {
  margin-top: 1.2em;
} */

/* ── Callout ─── */
.callout {
  display: flex;
  padding: 16px;
  border-radius: 4px;
  background: #f7f6f3;
  margin: 8px 0;
}
.callout-icon {
  margin-right: 8px;
  font-size: 1.3em;
  flex-shrink: 0;
}
.callout-content {
  flex: 1;
  min-width: 0;
}

/* ── To-do ─── */
.to-do {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 3px 0;
}
.to-do input[type="checkbox"] {
  margin-top: 4px;
}

/* ── Bookmark ─── */
a.bookmark {
  display: block;
  padding: 12px 14px;
  border: 1px solid #e3e2e0;
  border-radius: 4px;
  color: inherit;
  text-decoration: none;
  margin: 4px 0;
}
a.bookmark:hover {
  background: #f7f6f3;
}

/* ── Video embed ─── */
.video-embed {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  margin: 8px 0;
}
.video-embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* ── Math block ─── */
.math-block {
  text-align: center;
  padding: 16px 0;
  overflow-x: auto;
}

/* ── Inline math ─── */
.math-inline {
  font-family: 'KaTeX_Main', serif;
}

/* ── Code block ─── */
pre {
  background: #f7f6f3;
  padding: 16px;
  border-radius: 4px;
  overflow-x: auto;
  font-size: 0.9em;
}
pre code {
  font-family: 'SFMono-Regular', Menlo, Consolas, monospace;
}

/* ── Table ─── */
table {
  border-collapse: collapse;
  width: 100%;
  margin: 8px 0;
}
th, td {
  border: 1px solid #e3e2e0;
  padding: 6px 10px;
  text-align: left;
}
th {
  background: #f7f6f3;
  font-weight: 600;
}

/* ── Toggle ─── */
details {
  margin: 4px 0;
}
details summary {
  cursor: pointer;
  font-weight: 500;
}
details summary::marker {
  color: #9b9a97;
}

/* ── Blockquote ─── */
blockquote {
  border-left: 3px solid #e3e2e0;
  padding-left: 14px;
  margin: 4px 0;
  color: inherit;
}

/* ── Divider ─── */
hr {
  border: none;
  border-top: 1px solid #e3e2e0;
  margin: 16px 0;
}

/* ── Figure/Image ─── */
figure {
  margin: 8px 0;
  text-align: center;
}
figcaption {
  color: #9b9a97;
  font-size: 0.85em;
  margin-top: 4px;
}
img {
  max-width: 100%;
  height: auto;
}

/* ── Notion colors (foreground) ─── */
.notion-gray { color: #787774; }
.notion-brown { color: #64473A; }
.notion-orange { color: #D9730D; }
.notion-yellow { color: #DFAB01; }
.notion-green { color: #0F7B6C; }
.notion-blue { color: #0B6E99; }
.notion-purple { color: #6940A5; }
.notion-pink { color: #AD1A72; }
.notion-red { color: #E03E3E; }

/* ── Notion colors (background) ─── */
.notion-gray_background { background-color: #F1F1EF; }
.notion-brown_background { background-color: #F4EEEE; }
.notion-orange_background { background-color: #FBECDD; }
.notion-yellow_background { background-color: #FBF3DB; }
.notion-green_background { background-color: #EDF3EC; }
.notion-blue_background { background-color: #E7F3F8; }
.notion-purple_background { background-color: #F6F3F9; }
.notion-pink_background { background-color: #F9F0F5; }
.notion-red_background { background-color: #FDEBEC; }

/* ── Children containers / extra Notion blocks ─── */
.callout-children {
  margin-top: 8px;
}
.to-do-children {
  margin: 4px 0 4px 24px;
}
.notion-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin: 8px 0;
}
.notion-column {
  min-width: 0;
}
.notion-file,
.notion-pdf,
.notion-child-page,
.notion-child-database {
  margin: 6px 0;
}