.public-document { color: #0f172a; background: #f8fafc; min-height: 100vh; font-family: Inter, sans-serif; line-height: 1.7; }
.public-document header, .public-document main, .public-document footer { max-width: 1120px; margin: auto; padding: 24px; }
.public-document header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid #e2e8f0; }
.public-document .public-brand { display: inline-flex; align-items: center; gap: 12px; color: #0f172a; font-weight: 700; text-decoration: none; }
.public-document .public-brand img { width: 36px; height: 36px; object-fit: contain; }
.public-document nav { display: flex; flex-wrap: wrap; gap: 24px; }
.public-document a { color: #4f46e5; text-underline-offset: 4px; }
.public-document a:focus-visible { outline: 3px solid #6366f1; outline-offset: 4px; }
.public-document h1, .public-document h2 { font-family: 'DM Serif Display', serif; line-height: 1.15; }
.public-document h1 { font-size: 44px; margin: 36px 0 24px; }
.public-document h2 { font-size: 28px; margin-top: 36px; }
.public-document p { max-width: 80ch; overflow-wrap: anywhere; }
.public-document li { margin-bottom: 8px; }
.public-document .public-preview { display: block; width: 100%; max-height: 480px; object-fit: contain; border-radius: 16px; margin: 28px 0; }
.public-document .public-catalog { padding-left: 24px; columns: 2; column-gap: 40px; }
.public-document .public-catalog li { break-inside: avoid; }
.public-document footer { border-top: 1px solid #e2e8f0; }
@media (max-width: 640px) { .public-document h1 { font-size: 36px; } .public-document .public-catalog { columns: 1; } }