@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700;800&display=swap");

:root {
  color-scheme: dark;
  --background: #191818;
  --surface: #212020;
  --line: #393535;
  --text: #f2f2f2;
  --muted: #bfb9b9;
  --red: #b50404;
  --accent: #ff9290;
  font: 400 100%/1.65 "Open Sans", system-ui, sans-serif;
  color: var(--text);
  background: var(--background);
  scroll-padding-top: 24px;
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; }
a { color: inherit; }
button { font: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

.wrap {
  width: min(1100px, calc(100% - 64px));
  margin-inline: auto;
}

.site-header { border-bottom: 1px solid var(--line); }
.site-header .wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  min-height: 76px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: .94rem;
  font-weight: 800;
  line-height: 1.25;
  text-decoration: none;
}
.brand img { width: 42px; height: 42px; border-radius: 9px; }
.home-link, .retry {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  min-height: 42px;
  padding: 8px 15px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--text);
  font-size: .875rem;
  font-weight: 700;
  background: var(--surface);
  text-decoration: none;
}
.home-link:hover { background: #302d2d; }

main { padding-block: clamp(28px, 5vw, 58px) 60px; }
.document-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  color: var(--muted);
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.document-label::before {
  width: 23px;
  height: 3px;
  border-radius: 4px;
  background: var(--red);
  content: "";
}
h1 {
  max-width: 25ch;
  margin: 0 0 24px;
  font-size: clamp(2rem, 4.3vw, 3.375rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.032em;
  overflow-wrap: anywhere;
}

.document-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: 23px;
  margin-bottom: 26px;
  border-bottom: 1px solid var(--line);
}
.document-nav a {
  padding: 8px 13px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--muted);
  font-size: .875rem;
  font-weight: 700;
  text-decoration: none;
}
.document-nav a:hover { color: var(--text); border-color: #777070; }
.document-nav a[aria-current="page"] {
  color: var(--text);
  border-color: var(--red);
  background: var(--red);
}

.document-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 250px;
  align-items: start;
  gap: 24px;
}
.document-layout:has(.contents[hidden]) {
  grid-template-columns: minmax(0, 826px);
}
.document-card, .contents {
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--surface);
}
.document-card {
  min-width: 0;
  padding: clamp(22px, 4vw, 46px);
  overflow-wrap: anywhere;
}
.contents {
  position: sticky;
  top: 24px;
  max-height: calc(100vh - 48px);
  overflow: auto;
  padding: 18px;
  border-radius: 19px;
}
.contents summary {
  font-weight: 800;
  cursor: pointer;
}
.contents ol {
  display: grid;
  gap: 1px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}
.contents a {
  display: block;
  padding: 6px 8px;
  border-radius: 7px;
  color: var(--muted);
  font-size: .85rem;
  line-height: 1.45;
  text-decoration: none;
}
.contents a:hover { background: #302d2d; color: var(--text); }

.prose {
  color: #dfdbdb;
  font-size: 1rem;
  line-height: 1.75;
}
.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }
.prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
  margin: 1.8em 0 .6em;
  color: var(--text);
  font-weight: 800;
  line-height: 1.35;
}
.prose h2 { font-size: clamp(1.25rem, 2.8vw, 1.55rem); }
.prose h3 { font-size: 1.125rem; }
.prose p, .prose ul, .prose ol, .prose blockquote, .prose pre { margin: 0 0 1.05em; }
.prose :is(ul, ol) { padding-inline-start: 1.5em; }
.prose li + li { margin-top: .38em; }
.prose strong { color: var(--text); }
.prose a { color: var(--accent); text-underline-offset: .18em; }
.prose a:hover { color: #ffc0be; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2em 0; }
.prose blockquote {
  padding: .25em 0 .25em 1em;
  border-inline-start: 3px solid var(--red);
}
.prose blockquote > :last-child { margin-bottom: 0; }
.prose pre, .prose table { display: block; max-width: 100%; overflow-x: auto; }
.prose table { border-collapse: collapse; margin-bottom: 1em; }
.prose :is(td, th) { border: 1px solid var(--line); padding: 6px 10px; text-align: start; }

.status { margin: 0; color: var(--muted); }
.retry { margin-top: 14px; border-color: var(--red); background: var(--red); cursor: pointer; }
.retry:hover { background: #960303; }
.site-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 20px;
  padding-block: 22px 32px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: .875rem;
}
.site-footer a { text-underline-offset: .2em; }

@media (max-width: 860px) {
  .document-layout { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .contents { position: static; max-height: none; order: -1; }
}
@media (max-width: 520px) {
  .wrap { width: calc(100% - 32px); }
  .site-header .wrap { min-height: 66px; }
  .brand { font-size: .81rem; gap: 8px; }
  .brand img { width: 34px; height: 34px; }
  .home-link { padding-inline: 10px; font-size: .8rem; }
  .document-card { border-radius: 18px; padding: 20px 17px; }
  .document-nav { margin-bottom: 17px; padding-bottom: 17px; }
  .document-nav a { font-size: .8rem; padding: 8px 10px; }
  main { padding-bottom: 34px; }
}