:root {
color-scheme: light;
--pd-ink: #14202b;
--pd-muted: #536172;
--pd-border: #d8e1ea;
--pd-paper: #ffffff;
--pd-bg: #f2f6f8;
--pd-deep: #102a43;
--pd-accent: #177e89;
--pd-warm: #c84b31;
}
body {
background:
linear-gradient(180deg, #eaf3f6 0, var(--pd-bg) 280px);
color: var(--pd-ink);
}
.pd-site-header,
.pd-site-footer {
width: min(1120px, calc(100% - 40px));
margin-inline: auto;
}
.pd-site-header {
display: flex;
justify-content: space-between;
gap: 20px;
align-items: center;
margin-bottom: 24px;
padding: 18px 22px;
border: 1px solid rgba(16, 42, 67, 0.12);
border-radius: 8px;
background: rgba(255, 255, 255, 0.88);
box-shadow: 0 16px 40px rgba(16, 42, 67, 0.08);
backdrop-filter: blur(10px);
}
.pd-brand {
display: grid;
gap: 2px;
}
.pd-brand strong {
color: var(--pd-deep);
font-size: 18px;
}
.pd-brand span,
.pd-site-footer {
color: var(--pd-muted);
font-size: 13px;
}
.pd-nav {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.pd-nav a {
border: 1px solid var(--pd-border);
border-radius: 7px;
color: var(--pd-deep);
padding: 7px 10px;
background: var(--pd-paper);
}
.pd-nav a:hover {
border-color: var(--pd-accent);
color: var(--pd-accent);
text-decoration: none;
}
.pd-site-footer {
display: flex;
justify-content: space-between;
gap: 16px;
align-items: center;
margin-top: 22px;
padding: 18px 4px 8px;
border-top: 1px solid rgba(16, 42, 67, 0.12);
}
.pd-record-mark {
color: var(--pd-warm);
font-weight: 700;
}
.pd-doc-view {
padding: 28px 20px 36px;
}
.pd-doc-view article {
box-shadow: 0 20px 60px rgba(16, 42, 67, 0.08);
}
@media (max-width: 720px) {
.pd-site-header,
.pd-site-footer {
width: calc(100% - 24px);
align-items: flex-start;
flex-direction: column;
}
.pd-doc-view {
padding-inline: 12px;
}
}