/* PX7 Markdown Cards — three clean card themes. The card renders at real output pixels (e.g. 1080²); the app
   snapshots #card. Content is vertically centered; the body font auto-shrinks to fit (see fitToCard). */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { background: #d9d2c4; }

.card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 6.2%;
  font-family: -apple-system, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  font-size: 30px;
  line-height: 1.42;
  -webkit-font-smoothing: antialiased;
}

#card-body { width: 100%; }
#card-body > *:first-child { margin-top: 0; }
#card-body > *:last-child { margin-bottom: 0; }

#card-body h1 { font-size: 1.9em; line-height: 1.1; font-weight: 700; letter-spacing: -0.02em; margin: 0.2em 0 0.5em; }
#card-body h2 { font-size: 1.45em; line-height: 1.15; font-weight: 600; margin: 0.9em 0 0.4em; }
#card-body h3 { font-size: 1.18em; font-weight: 600; margin: 0.8em 0 0.3em; }
#card-body p, #card-body ul, #card-body ol, #card-body blockquote, #card-body pre, #card-body table { margin: 0.55em 0; }
#card-body ul, #card-body ol { padding-left: 1.3em; }
#card-body li { margin: 0.2em 0; }
#card-body a { text-decoration: none; border-bottom: 2px solid; }
#card-body strong { font-weight: 700; }
#card-body code { font-family: "SF Mono", ui-monospace, Menlo, monospace; font-size: 0.86em; padding: 0.08em 0.3em; border-radius: 6px; }
#card-body pre { padding: 0.9em 1.1em; border-radius: 14px; overflow: hidden; font-size: 0.8em; line-height: 1.4; }
#card-body pre code { padding: 0; background: none; }
#card-body blockquote { border-left: 4px solid; padding-left: 0.9em; font-style: italic; }
#card-body table { border-collapse: collapse; width: 100%; font-size: 0.9em; }
#card-body th, #card-body td { text-align: left; padding: 0.4em 0.7em; border-bottom: 2px solid; }
#card-body img { max-width: 100%; border-radius: 12px; }
#card-body .frontmatter { margin-bottom: 0.6em; }
#card-body .fm-title { font-size: 2em; font-weight: 700; }
#card-body .fm-date { opacity: 0.6; font-size: 0.9em; }

#wordmark {
  position: absolute; right: 6.2%; bottom: 4.6%;
  display: flex; align-items: center; gap: 0.5em;
  font-size: 0.62em; font-weight: 600; letter-spacing: 0.02em; opacity: 0.55;
}
#wordmark .dot { width: 0.7em; height: 0.7em; border-radius: 50%; background: currentColor; }

#page-counter {
  position: absolute; left: 6.2%; bottom: 4.6%;
  display: none;
  font-size: 0.62em; font-weight: 650; letter-spacing: 0.06em; opacity: 0.55;
  font-variant-numeric: tabular-nums;
}

/* ---- themes ---- */
.theme-paper { background: #faf6ee; color: #241f18; }
.theme-paper #card-body a { color: #9c4a26; border-color: rgba(156,74,38,.4); }
.theme-paper #card-body code { background: rgba(156,74,38,.1); color: #7a3a1e; }
.theme-paper #card-body pre { background: #241f18; color: #f0e8d8; }
.theme-paper #card-body blockquote { border-color: #9c4a26; }
.theme-paper #card-body th, .theme-paper #card-body td { border-color: rgba(120,100,75,.25); }
.theme-paper #card-body h1, .theme-paper #card-body h2 { color: #1c1712; }

.theme-ink { background: #1b1712; color: #efe7d8; }
.theme-ink #card-body a { color: #e0a06a; border-color: rgba(224,160,106,.4); }
.theme-ink #card-body code { background: rgba(224,160,106,.14); color: #e6b083; }
.theme-ink #card-body pre { background: #0f0c08; color: #efe7d8; }
.theme-ink #card-body blockquote { border-color: #e0a06a; color: #d8cdb8; }
.theme-ink #card-body th, .theme-ink #card-body td { border-color: rgba(220,200,170,.2); }

.theme-sky { background: #f3f6fb; color: #1a2230; }
.theme-sky #card-body a { color: #2563a8; border-color: rgba(37,99,168,.35); }
.theme-sky #card-body code { background: rgba(37,99,168,.1); color: #1f5088; }
.theme-sky #card-body pre { background: #16233a; color: #eaf1fb; }
.theme-sky #card-body blockquote { border-color: #2563a8; }
.theme-sky #card-body th, .theme-sky #card-body td { border-color: rgba(40,60,90,.2); }
.theme-sky #card-body h1, .theme-sky #card-body h2 { color: #14203a; }
