:root { color-scheme: light dark; font-family: system-ui, sans-serif; line-height: 1.6; }
body { margin: 0; background: light-dark(#fafafa, #15171b); color: light-dark(#202631, #e3e7ed); }
a { color: light-dark(#145ab3, #8cbfff); text-underline-offset: .18em; }
header { display: flex; gap: 2rem; align-items: center; padding: 1rem 2rem; border-bottom: 1px solid #8885; }
header strong { font-size: 1.5rem; } header span { flex: 1; }
.shell { max-width: 90rem; margin: auto; display: grid; grid-template-columns: 17rem minmax(0, 1fr); }
nav { padding: 1.5rem; border-right: 1px solid #8885; } nav a { display: block; padding: .2rem 0; } nav h2 { font-size: 1rem; margin-top: 1.5rem; }
main { padding: 1.5rem 3rem 4rem; max-width: 62rem; } h1, h2, h3 { line-height: 1.3; } h2 { margin-top: 2rem; }
pre { padding: 1rem; overflow: auto; border: 1px solid #8885; border-radius: .4rem; background: light-dark(#f0f2f5, #20242b); }
code { font-size: .9em; } table { border-collapse: collapse; display: block; overflow-x: auto; } th, td { text-align: left; border: 1px solid #8885; padding: .6rem; }
input, button { font: inherit; padding: .3rem; max-width: 100%; box-sizing: border-box; } label { display: block; margin-top: 1.5rem; }
footer { padding: 1rem 2rem; border-top: 1px solid #8885; font-size: .9rem; }
.skip { position: absolute; top: -5rem; padding: 1rem; background: Canvas; } .skip:focus { top: 0; }
@media (max-width: 750px) { .shell { display: block; } nav { border-right: 0; border-bottom: 1px solid #8885; } main { padding: 1rem; } header { padding: 1rem; gap: 1rem; flex-wrap: wrap; } }