:root {
 --bpage-bg: #FFFFFF;
 --bpanel-bg: #FDF4E8;
 --bline: #c3d0e6;
 --btext-main: #112135;
 --btext-muted: #112135;
 --baccent-start: #4b84e6;
 --baccent-end: #2a63d1;
}

body {
 margin: 0;
 font-family: "Space Grotesk", Arial, sans-serif;
 background: var(--bpage-bg);
 color: var(--btext-main);
}

.bpage {
 min-height: 100vh;
 display: flex;
 flex-direction: column;
}

.bheader {
 width: min(1120px, 100% - 32px);
 margin: 0 auto;
 border-bottom: 1px solid var(--bline);
 padding: 4px 0px;
 display: flex;
 justify-content: space-between;
 align-items: center;
}

.bbrand {
 display: grid;
 grid-template-columns: auto 1fr;
 column-gap: 12px;
 align-items: center;text-decoration:none;color:var(--btext-main);
}

.blogo {
 width: 38px;
 height: 38px;
 object-fit: cover;
 display: block;
 grid-row: 1 / span 2;
}

.bbrand h1 {
 margin: 0;
 font-size: 1.25rem;
 font-weight: 700;
 grid-column: 2;
}

.bbrand p {
 margin: 2px 0 0;
 font-size: 0.82rem;
 color: var(--btext-muted);
 grid-column: 2;
}

.bheader-actions {
 display: flex;
 align-items: center;
 gap: 6px;
}

.bheader-icon-button {
 width: 42px;
 height: 42px;
 border: 0;
 border-radius: 0;
 background: transparent;
 padding: 0;
 color: var(--btext-main);
 cursor: pointer;
 display: grid;
 place-items: center;
 text-decoration:none;
}

main {
 width: min(1120px, 100% - 32px);
 margin: 20px auto;
}

.bgrid {
 display: grid;
 gap: 28px;
 grid-template-columns: 1fr;
 max-width: 880px; 
}

.bcard {
 display: flex;
 flex-direction: column;
}

.bcard-body {
 display: flex;
 flex-direction: column;
 flex: 1;
}

.bcard-body p {
 margin: 6px 0 0;
}

.bcard-head {
 display: flex;
 flex-direction: column;
 align-items: flex-start;
 gap: 4px;
}

.bcard-body .bcard-meta {
 margin: 0;
 font-size: 0.7rem;
 letter-spacing: 0.02em;
 color: var(--btext-muted);
 white-space: nowrap;
}

.bcard h2 {
 margin: 0;
 font-size: 1.02rem;
 font-weight: 600;
 color: #0b1c30;
}

.bcard h2 a {
 color: #00419e;
}

.barticle {
 max-width: 900px; 
}

.barticle-header {
 margin-bottom: 28px;
}

.barticle-header .bcard-meta {
 margin: 0 0 10px;
 font-size: 0.75rem;
 letter-spacing: 0.02em;
 color: var(--btext-muted);
}

.barticle h2 { 
 font-weight: 700;
 margin: 0 0 6px;
 color:#555;
 font-size:1.25em;
}
.barticle > p{margin:0;font-size:0.6em;}

.barticle-gallery {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
 gap: 12px;
 margin: 0 0 16px 0;
}
.barticle-gallery figure {
 margin: 0;
}
.barticle-gallery img {
 width: 100%;
 aspect-ratio: 4 / 3;
 object-fit: cover;
 border-radius: 8px;
 display: block;
}
.barticle-gallery figure:only-child img {
 aspect-ratio: auto;
}

.barticle-body {
 font-size: 1rem;
 line-height: 1.75;
}

.spacer {height:8px;font-size:1px;line-height:0.1em;}
.barticle ul {margin-bottom:8px!important;}

.barticle-body h1,
.barticle-body h2,
.barticle-body h3,
.barticle-body h4 {
 font-weight: 700;
 line-height: 1.3;
 margin-top: 1.6em;
 margin-bottom: 0.3em;
}

.barticle-body h1 { font-size: 1.5rem; }
.barticle-body h2 { font-size: 1.3rem; }
.barticle-body h3 { font-size: 1.12rem; }
.barticle-body h4 { font-size: 1rem; }

.barticle-body p { margin: 0; }

.barticle-body a {
 color: #00419e;
 text-decoration: underline;
 text-underline-offset: 3px;
}

.barticle-body a:hover {
 color: #2a63d1;
}

.barticle-body ul,
.barticle-body ol {
 margin: 0;
 padding-left: 1.4em;
}

.barticle-body li + li {
 margin-top: 0.35em;
}

.barticle-body code {
 font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
 font-size: 0.88em;
 background: var(--bpanel-bg);
 padding: 0.15em 0.4em;
 border-radius: 4px;
}

.barticle-body pre {
 background: var(--bpanel-bg);
 padding: 14px 18px;
 border-radius: 6px;
 overflow-x: auto;
}

.barticle-body pre code {
 background: transparent;
 padding: 0;
 border-radius: 0;
 font-size: 0.9em;
}

.barticle-body blockquote {
 margin: 0;
 padding: 2px 0 2px 16px;
 border-left: 3px solid var(--baccent-end);
 color: var(--btext-muted);
}

.barticle-body img {
 max-width: 100%;
 height: auto;
 display: block;
}

.barticle-body hr {
 margin: 2em 0;
 border: 0;
 border-top: 1px solid var(--bline);
}

.barticle-body table {
 width: 100%;
 border-collapse: collapse;
 font-size: 0.95em;
}

.barticle-body th,
.barticle-body td {
 border: 1px solid var(--bline);
 padding: 8px 12px;
 text-align: left;
}

.barticle-body th {
 background: var(--bpanel-bg);
 font-weight: 600;
}

.barticle-back {
 display: inline-block;
 margin-top: 36px; 
 color:#00419e;
 font-size: 1rem;  
}
.barticle-back a {color:#00419e;text-decoration:underline}

.barticle-back:hover {
 color: #00419e;
}

.barticle-missing {
 max-width: 760px;
 margin: 40px auto;
 font-size: 1rem;
}

.barticle-missing p {
 margin: 0 0 12px;
}

.barticle-missing a {
 color: #00419e;
}

.bfooter {
 width: min(1120px, 100% - 32px);
 margin: auto auto 0;
 border-top: 1px solid var(--bline);
 padding: 14px 0px;
 margin-top: 8px;
 font-size: 0.8em;
}

.bfooter ul {
 margin: 0;
 padding: 0;
 list-style: none;
 display: flex;
 gap: 18px;
 flex-wrap: wrap;
}

.bfooter a {
 color: var(--btext-muted);
 text-decoration: none;
}

.bfooter a:hover,
.bfooter a:focus-visible {
 text-decoration: underline;
}

html[data-theme="dark"] {
 --bpage-bg: #0f1726;
 --bpanel-bg: #1a2640;
 --bline: #2d3f63;
 --btext-main: #dbe7ff;
 --btext-muted: #9fb4da;
 --baccent-start: #6b9cff;
 --baccent-end: #3f77e5;
}

html[data-theme="dark"] body {
 background: var(--bpage-bg);
 color: var(--btext-main);
}

html[data-theme="dark"] .bheader,
html[data-theme="dark"] .bfooter {
 border-color: var(--bline);
}

html[data-theme="dark"] .bfooter a {
 color: #8db5ff;
}

html[data-theme="dark"] .bcard h2 {
 color: #eaf1ff;
}

html[data-theme="dark"] .bcard p {
 color: var(--btext-muted);
}

html[data-theme="dark"] .barticle h2 {
 color: #eaf1ff;
}

html[data-theme="dark"] .barticle-body a {
 color: #8db5ff;
}

html[data-theme="dark"] .barticle-body a:hover {
 color: #b1cdff;
}

html[data-theme="dark"] .barticle-back {
 border-color: var(--bline);
}

html[data-theme="dark"] .barticle-missing a {
 color: #8db5ff;
}

.excerpt {
 border-left: solid 5px var(--baccent-start);
 padding-left:16px;
 margin-bottom:16px;
}