:root {
  color-scheme: dark;
  font-family: Arial, Helvetica, sans-serif;
  background: #0c0b11;
  color: #f4eee8;
}
* { box-sizing: border-box; }
body { margin: 0; }
.wrap { width: min(100% - 2rem, 1100px); margin-inline: auto; }
header { padding: 2rem 0; background: #19151e; border-bottom: 1px solid #46382e; }
nav { display: flex; flex-wrap: wrap; gap: .75rem 1.4rem; align-items: center; }
nav a { padding-block: .25rem; }
a { color: #ffc48a; text-underline-offset: .2em; }
a:hover { color: #ffe4c7; }
a:focus-visible, summary:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
[aria-current="page"] { color: #fff; font-weight: bold; }
h1 { font-size: clamp(2rem, 6vw, 3.5rem); margin: 1.5rem 0 .35rem; }
header p { margin: 0; color: #ddd0c5; }
main { padding-block: 1.5rem 3rem; }
details { padding: .75rem 1rem; background: #19151e; border: 1px solid #46382e; border-radius: .5rem; }
summary { cursor: pointer; font-weight: bold; }
.toc ul { columns: 2 19rem; padding-left: 1.25rem; }
.toc li { margin-bottom: .5rem; break-inside: avoid; }
article { margin-block: 2rem 3rem; }
article h2 { font-size: clamp(1rem, 3vw, 1.35rem); margin: 0 0 .6rem; }
article h2 span { color: #ffc48a; margin-right: .5em; }
.slide-link { display: block; }
img { display: block; width: 100%; height: auto; border: 1px solid #46382e; border-radius: .4rem; }
article details { margin-top: .6rem; }
article p { line-height: 1.55; }
.jump { position: sticky; bottom: .75rem; display: table; margin-left: auto; padding: .6rem .85rem; border-radius: .5rem; background: #211922; border: 1px solid #725141; }