:root {
  --ink: #171717;
  --paper: #fbfaf7;
  --panel: #ffffff;
  --line: #dedbd3;
  --accent: #16645a;
  --warm: #a83f2a;
  --codebg: #18221d;
  --codeink: #ecf3ea;
  --radius: 8px;
}
.topnav { display: flex; }
.topnav { flex-wrap: wrap; }
.topnav { gap: .5rem 1rem; }
.topnav { align-items: center; }
.topnav { padding: 1rem 2rem; }
.topnav { border-bottom: 1px solid var(--line); }
.topnav { background: rgba(251,250,247,.85); }
.topnav { backdrop-filter: blur(8px); }
.topnav { position: sticky; }
.topnav { top: 0; }
.topnav { z-index: 10; }
.topnav strong { color: var(--warm); }
.topnav strong { font-size: 1.05rem; }
.topnav strong { margin-right: .5rem; }
.topnav a { color: var(--accent); }
.topnav a { text-decoration: none; }
.topnav a:hover { text-decoration: underline; }
code { background: var(--panel); }
code { border: 1px solid var(--line); }
code { padding: .1rem .32rem; }
code { border-radius: 5px; }
code { font-size: .9em; }
h1 code, h2 code, h3 code { font-size: .85em; }
pre { background: var(--codebg); }
pre { color: var(--codeink); }
pre { padding: 1.1rem 1.3rem; }
pre { margin: 1.2rem 0; }
pre { border-radius: var(--radius); }
pre { overflow-x: auto; }
pre { line-height: 1.6; }
pre { font-size: .9rem; }
pre { box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
pre code { background: transparent; }
pre code { border: 0; }
pre code { padding: 0; }
pre code { color: inherit; }
pre code { font-size: 1em; }
table { border-collapse: collapse; }
table { background: var(--panel); }
table { margin: 1rem 0; }
th { text-align: left; }
th { border: 1px solid var(--line); }
th { padding: .5rem .9rem; }
th { background: #f1ede4; }
td { border: 1px solid var(--line); }
td { padding: .5rem .9rem; }
blockquote { margin: 1.2rem 0; }
blockquote { padding: .6rem 1.2rem; }
blockquote { border-left: 3px solid var(--accent); }
blockquote { background: var(--panel); }
blockquote { border-radius: var(--radius); }