:root {
  color-scheme: dark;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #ededeb;
  background: #111110;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }
body { margin: 0; }
.hidden { display: none !important; }

.screen {
  width: min(100%, calc(var(--content-width) + 48px));
  margin: 0 auto;
  padding: 64px 24px 40px;
}

h1 {
  margin: 0 0 24px;
  font-size: 20px;
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: -.025em;
  text-wrap: balance;
}

.start-content p { margin: 0 0 24px; color: #aaa9a4; }
p { text-wrap: pretty; }
a, button {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--link-underline);
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
a:hover, button:hover:not(:disabled) { text-decoration-color: var(--link-underline); }
a:focus-visible, button:focus-visible {
  outline: 2px solid #ededeb;
  outline-offset: 4px;
}
button {
  min-height: 40px;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  cursor: pointer;
}
button:disabled { color: #666662; cursor: default; text-decoration: none; }

#app { display: flex; flex-direction: column; height: 100dvh; }
#timeline-container {
  flex-shrink: 0;
  max-height: 160px;
  overflow: auto;
  padding: 20px 24px;
  border-bottom: 1px solid #2b2b29;
}
#timeline { display: inline-flex; align-items: flex-start; min-width: min-content; }
.tree-linear { display: flex; align-items: center; }
.tree-fork-group { display: flex; align-items: flex-start; }
.tree-fork-group > .timeline-connector { margin-top: 9px; }
.tree-fork-children { display: flex; flex-direction: column; gap: 4px; position: relative; }
.tree-fork-children::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  bottom: var(--fork-line-bottom, 10px);
  width: 1px;
  background: #444440;
  pointer-events: none;
}
.tree-fork-branch { display: flex; align-items: flex-start; padding-left: 16px; position: relative; }
.tree-fork-branch::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 16px;
  height: 1px;
  background: #444440;
}
.timeline-item { height: 20px; display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.timeline-dot { width: 10px; height: 10px; border-radius: 50%; background: #666662; cursor: pointer; flex-shrink: 0; }
.timeline-dot.active { background: #ededeb; }
.timeline-dot.visited { background: #777773; }
.timeline-label { font-size: 12px; max-width: 120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #aaa9a4; cursor: pointer; }
.timeline-label:hover, .timeline-label.active { color: #ededeb; }
.timeline-connector { width: 24px; height: 1px; background: #444440; flex-shrink: 0; }

#article-container { flex: 1; min-height: 0; overflow: auto; padding: 32px 24px; }
#loading { max-width: var(--content-width); margin: 0 auto; color: #aaa9a4; }
#loading p { margin: 0 0 24px; }
#article-content { max-width: var(--content-width); margin: 0 auto; overflow-wrap: anywhere; }
#article-content h2 { margin: 32px 0 16px; font-size: 18px; font-weight: 500; }
#article-content h3, #article-content h4 { margin: 24px 0 12px; font-size: 16px; font-weight: 500; }
#article-content p { margin: 0 0 20px; }
#article-content ul, #article-content ol { margin: 0 0 20px; padding-left: 24px; }
#article-content li { margin-bottom: 6px; }
#article-content blockquote { margin: 24px 0; padding-left: 16px; border-left: 1px solid #444440; color: #aaa9a4; }
#article-content table {
  display: block;
  width: 100% !important;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  margin: 24px 0;
  font-size: 14px;
}
#article-content table, #article-content th, #article-content td {
  color: #ededeb !important;
  background: #111110 !important;
}
#article-content th, #article-content td { border: 1px solid #333330; padding: 8px; text-align: left; }
#article-content th { font-weight: 500; }
#article-content img { max-width: 100%; height: auto; margin: 12px 0; }
#article-content figure, #article-content .thumb, #article-content .thumbinner { max-width: 100% !important; margin: 24px 0; }
#article-content .thumb { float: none; }
#article-content figcaption, #article-content .thumbcaption { color: #aaa9a4; font-size: 13px; margin-top: 8px; }
#article-content .infobox {
  float: none !important;
  width: 100% !important;
  max-width: 100%;
  margin: 0 0 24px;
  font-size: 14px;
}
#article-content .infobox caption, #article-content .infobox-title { font-size: 16px; font-weight: 500; padding-bottom: 12px; }
#article-content .mw-editsection,
#article-content .reference,
#article-content .noprint,
#article-content .mw-empty-elt,
#article-content .sistersitebox,
#article-content .side-box,
#article-content .navbox,
#article-content .vertical-navbox,
#article-content .metadata,
#article-content .ambox,
#article-content .tmbox,
#article-content .mbox-small,
#article-content .portal,
#article-content #coordinates,
#article-content .geo-nondefault,
#article-content .authority-control { display: none !important; }

#controls {
  display: flex;
  flex-shrink: 0;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 24px;
  padding: 12px 24px;
  border-top: 1px solid #2b2b29;
}
.control-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
@media (max-width: 600px) {
  .screen { padding-top: 40px; }
  #article-container { padding-block: 24px; }
  .timeline-label { max-width: 80px; }
  #controls { gap: 8px 20px; }
}

.article-details {
  max-width: 100%;
  margin: 0 0 24px;
}
.article-details summary {
  min-height: 40px;
  color: #aaa9a4;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--link-underline);
  text-underline-offset: 4px;
}
.article-details summary:hover { color: #ededeb; text-decoration-color: var(--link-underline); }
.article-details summary:focus-visible {
  outline: 2px solid #ededeb;
  outline-offset: 4px;
}
.article-details[open] summary { margin-bottom: 12px; }