@font-face { font-family: Roboto; src: url("roboto-latin-wght.1404ca348bd75ef8.woff2") format("woff2");
  font-weight: 100 900; font-display: swap; }
:root { color-scheme: light dark;
  --primary: #6750a4; --on-primary: #fff; --secondary-container: #e8def8;
  --on-secondary-container: #4a4459; --surface: #fef7ff; --on-surface: #1d1b20;
  --on-surface-variant: #49454f; --surface-container: #f3edf7;
  --surface-container-high: #ece6f0; --outline: #79747e; --outline-variant: #cac4d0; }
@media (prefers-color-scheme: dark) { :root {
  --primary: #d0bcff; --on-primary: #381e72; --secondary-container: #4a4458;
  --on-secondary-container: #e8def8; --surface: #141218; --on-surface: #e6e0e9;
  --on-surface-variant: #cac4d0; --surface-container: #211f26;
  --surface-container-high: #2b2930; --outline: #938f99; --outline-variant: #49454f; } }
* { box-sizing: border-box; }
html { scroll-padding-top: 80px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--surface); color: var(--on-surface);
  font: 400 1rem/1.6 Roboto, system-ui, -apple-system, "Segoe UI", sans-serif; }
a { color: var(--primary); }
.bar { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 4px;
  min-height: 64px; padding: 8px 16px; flex-wrap: wrap; background: var(--surface-container); }
.brand { margin-right: auto; padding: 0 8px; color: var(--on-surface); font-size: 1.375rem;
  line-height: 1.75rem; text-decoration: none; }
.bar nav { display: flex; gap: 4px; flex-wrap: wrap; }
.bar nav a { padding: 8px 12px; border-radius: 20px; color: var(--on-surface-variant);
  font-weight: 500; font-size: .875rem; line-height: 1.5rem; text-decoration: none; }
.bar nav a:hover { background: var(--surface-container-high); }
.layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 32px;
  max-width: 1200px; margin: 0 auto; padding: 24px 16px 64px; }
.side { position: sticky; top: 88px; align-self: start; max-height: calc(100vh - 104px);
  overflow-y: auto; font-size: .875rem; }
.side summary { display: none; }
.side ul { list-style: none; margin: 0; padding: 0; }
.side a { display: block; padding: 8px 16px; border-radius: 28px; font-weight: 500;
  color: var(--on-surface-variant); text-decoration: none; }
.side a:hover { background: var(--surface-container); }
.side a[aria-current] { background: var(--secondary-container); color: var(--on-secondary-container); }
.side .toc { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--outline-variant); }
.side .toc a { padding: 4px 16px; font-weight: 400; }
main { min-width: 0; }
h1 { margin: 0 0 16px; font-size: 2.25rem; line-height: 2.75rem; font-weight: 400; }
h2 { margin: 40px 0 12px; font-size: 1.75rem; line-height: 2.25rem; font-weight: 400; }
h3 { margin: 28px 0 8px; font-size: 1.375rem; line-height: 1.75rem; font-weight: 500; }
h4 { margin: 20px 0 8px; font-size: 1rem; font-weight: 500; }
main p, main li { max-width: 75ch; }
code { padding: .1em .35em; border-radius: 6px; background: var(--surface-container);
  font: .875em/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; overflow-wrap: anywhere; }
pre { padding: 16px; border-radius: 12px; overflow-x: auto; background: var(--surface-container); }
pre code { padding: 0; background: none; overflow-wrap: normal; }
blockquote { margin: 16px 0; padding: 12px 16px; border-radius: 12px;
  background: var(--secondary-container); color: var(--on-secondary-container); }
blockquote p { margin: 0; }
.table { margin: 16px 0; overflow-x: auto; border: 1px solid var(--outline-variant); border-radius: 12px; }
table { width: 100%; border-collapse: collapse; font-size: .875rem; }
th, td { padding: 10px 16px; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--outline-variant); }
tr:last-child td { border-bottom: 0; }
th { font-weight: 500; background: var(--surface-container); }
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0; }
.actions a { padding: 10px 24px; border-radius: 20px; font-weight: 500; font-size: .875rem;
  line-height: 1.25rem; text-decoration: none; }
.actions .filled { background: var(--primary); color: var(--on-primary); }
.actions .tonal { background: var(--secondary-container); color: var(--on-secondary-container); }
.actions .outlined { border: 1px solid var(--outline); color: var(--primary); }
footer { padding: 16px; color: var(--on-surface-variant); font-size: .75rem; text-align: center; }
:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
@media (max-width: 840px) {
  .layout { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .side { position: static; max-height: none; }
  .side summary { display: block; padding: 8px 16px; border-radius: 12px; cursor: pointer;
    background: var(--surface-container); font-weight: 500; }
  h1 { font-size: 1.75rem; line-height: 2.25rem; }
  h2 { font-size: 1.5rem; line-height: 2rem; }
}