:root{--bg:#222;--text:#fff;--h2text:#29f;--link:#eea;--link-hover:#ff3;--muted:#cfcfcf;--header-bg:linear-gradient(to bottom,#444 0%,#333 80%,#3330 100%);--footer-border:#555;--stripe-bg:#555;--button-bg:#444;--button-text:#fff;--button-hover:#555}
body{height:100%;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;padding:60px 10px 30px;line-height:120%;background:var(--bg);color:var(--text)}
header{position:fixed;display:block;width:100%;height:100px;top:0;background:var(--header-bg);z-index:1}
main{max-width:1000px;margin:0 auto;padding-left:10px;padding-right:10px}
@media only screen and (max-width: 900px){main{padding-left:0;padding-right:0}}
#logo{position:fixed;left:50%;margin-left:-200px;top:6px;width:400px;z-index:2}
@media (min-width: 481px) and (max-width: 767px){header,#logo{position:absolute}}
#stripes{position:fixed;left:0;bottom:0;width:80px;background:var(--stripe-bg)}
a{color:var(--link);text-decoration:underline}
a:hover{color:var(--link-hover)}
button{background:var(--button-bg);color:var(--button-text);border:none;padding:6px 12px;cursor:pointer}
button:hover{background:var(--button-hover)}
footer{max-width:1000px;margin:0 auto;padding:10px 10px 10px 32px;display:flex;flex-wrap:wrap;border-top:1px solid var(--footer-border)}
footer>ul{text-align:center;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
footer>ul li{list-style:none}
footer>ul li:after{content:"|";margin-left:8px;color:var(--footer-border)}
footer>ul li:last-child:after{content:""}
footer>ul li a{margin:0 8px}
h1{
margin:0 0 8px 0;
font-size:26px;
letter-spacing: -0.01em;
}
h2{margin:20px 0 8px 0; font-size:22px; color:var(--h2text)}
h3{margin:14px 0 6px 0; font-size:18px; color:var(--muted)}
pre{overflow:auto; padding:12px; margin:10px 0}