:root { --sg-ink: #132d46; --sg-teal: #087f8c; }
body { font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; line-height: 1.7; }
.navbar { background: #132d46 !important; border-bottom: 3px solid #54d6c1; }
.navbar .nav-link, .navbar .navbar-brand { color: #f5fbff !important; }
.navbar .text-muted { color: #b4c9d9 !important; }
.navbar-toggler { border-color: #718ca2; }
.navbar-toggler-icon { filter: invert(1) grayscale(1) brightness(1.8); }
.navbar .nav-link:hover, .navbar .nav-link:focus { color: #54d6c1 !important; }
h1,h2,h3,h4 { color: var(--sg-ink); letter-spacing: -.025em; font-weight: 650; }
h1 { margin-bottom: 1.4rem; }
h2 { margin-top: 2.4rem; padding-bottom: .4rem; border-bottom: 1px solid #d9e5ec; }
.contents > p { max-width: 78ch; }
.contents img { border-radius: .65rem; max-width: 100%; height: auto; }
.sourceCode { border: 1px solid #d9e5ec; border-radius: .65rem; }
table { border: 1px solid #d9e5ec; border-radius: .65rem; }
thead th { color: var(--sg-ink); background: #edf5f7; }
a { text-underline-offset: .2em; }
details { margin: 1.3rem 0; border-left: 3px solid var(--sg-teal); padding: .8rem 1.1rem; background: #edf5f7; }
summary { cursor: pointer; color: var(--sg-ink); }
footer { border-top: 1px solid #d9e5ec; margin-top: 3rem; }
:focus-visible { outline: 3px solid #087f8c; outline-offset: 3px; }
@media (max-width: 575px) {
  h1 { font-size: 2rem; }
  .contents table { display: block; overflow-x: auto; }
}