{{ include 'partials/head' }}

{{~ # ============ 页面头 ============ ~}}
<section style="border-bottom: 1px solid rgba(255,255,255,0.06);">
    <div class="max-w-6xl mx-auto px-4 py-8">
        <h1 class="text-2xl md:text-3xl font-bold" style="color: var(--color-ink);">{{ page.Title }}</h1>
        {{ if page.Summary }}
        <p class="mt-2 text-base" style="color: var(--color-secondary);">{{ page.Summary }}</p>
        {{ end }}
    </div>
</section>

{{~ # ============ 正文区（暗色适配） ============ ~}}
<style>
.page-content { color: var(--color-ink); line-height: 1.8; font-size: 16px; }
.page-content > *:first-child { margin-top: 0; }
.page-content > *:last-child { margin-bottom: 0; }
.page-content h1 { font-size: 1.75rem; font-weight: 700; margin: 2rem 0 1rem; line-height: 1.3; color: var(--color-ink); }
.page-content h2 { font-size: 1.5rem; font-weight: 700; margin: 1.75rem 0 0.875rem; line-height: 1.35; color: var(--color-ink); }
.page-content h3 { font-size: 1.25rem; font-weight: 600; margin: 1.5rem 0 0.75rem; line-height: 1.4; color: var(--color-ink); }
.page-content h4 { font-size: 1.1rem; font-weight: 600; margin: 1.25rem 0 0.5rem; color: var(--color-ink); }
.page-content p { margin: 0.875rem 0; }
.page-content ul, .page-content ol { margin: 0.875rem 0; padding-left: 1.5rem; }
.page-content ul { list-style: disc; }
.page-content ol { list-style: decimal; }
.page-content li { margin: 0.375rem 0; }
.page-content li > ul, .page-content li > ol { margin: 0.375rem 0; }
.page-content a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 2px; }
.page-content a:hover { opacity: 0.8; }
.page-content strong, .page-content b { font-weight: 700; color: var(--color-ink); }
.page-content em, .page-content i { font-style: italic; }
.page-content blockquote { margin: 1.25rem 0; padding: 0.75rem 1rem; border-left: 3px solid var(--color-primary); background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface)); color: var(--color-secondary); border-radius: 0 4px 4px 0; }
.page-content blockquote p { margin: 0.375rem 0; }
.page-content code { background: rgba(255,255,255,0.06); color: var(--color-primary); padding: 0.125rem 0.375rem; border-radius: 4px; font-size: 0.9em; font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.page-content pre { background: #000a1a; color: #e2e8f0; padding: 1rem 1.25rem; border-radius: 8px; overflow-x: auto; margin: 1.25rem 0; font-size: 0.9em; line-height: 1.6; border: 1px solid rgba(255,255,255,0.06); }
.page-content pre code { background: transparent; color: inherit; padding: 0; }
.page-content img { max-width: 100%; height: auto; border-radius: 8px; margin: 1.25rem 0; display: block; }
.page-content hr { border: none; border-top: 1px solid rgba(255,255,255,0.08); margin: 2rem 0; }
.page-content table { border-collapse: collapse; width: 100%; margin: 1.25rem 0; font-size: 0.95em; }
.page-content th, .page-content td { border: 1px solid rgba(255,255,255,0.1); padding: 0.5rem 0.75rem; text-align: left; }
.page-content th { background: rgba(255,255,255,0.04); font-weight: 600; }
.page-content-plain { white-space: pre-wrap; }
.ink-card { background: color-mix(in srgb, var(--color-ink) 4%, var(--color-surface)); border: 1px solid rgba(255,255,255,0.06); border-radius: var(--radius-base); }
</style>

<main class="flex-1 max-w-4xl mx-auto px-4 py-8 w-full">
    <article class="ink-card p-8 md:p-10">
        {{ if page.CoverImageUrl }}
        <div class="mb-8">
            <img src="{{ abs_url page.CoverImageUrl }}" alt="{{ page.Title }}" class="w-full rounded-lg">
        </div>
        {{ end }}

        <div class="page-content">
            {{ page.Content }}
        </div>
    </article>
</main>

{{ include 'partials/footer' }}