.article-layout {
  display: block;
  max-width: 900px;
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  padding: 0 2rem;
}

.article-header h1 {
  line-height: 1.3;
  margin-top: 0;
}

.site-header + .article-layout {
  margin-top: 3.5rem;
}

.article-meta {
  display: flex;
  gap: 1.5rem;
  color: var(--text-nav);
  font-size: 14px;
  margin-top: 0.5rem;
  margin-bottom: 2rem;
}

/* Source-paper card (research posts): the reviewed paper's title / authors / venue.
   Distinct from the .article-meta byline, which credits Jun He as the reviewer. */
.paper-source {
  border: 1px solid var(--border, #333);
  border-left: 3px solid var(--text-nav, #888);
  border-radius: 6px;
  padding: 0.7rem 0.9rem;
  margin: 0.9rem 0 0.4rem;
  background: rgba(127, 127, 127, 0.06);
}
.paper-source-title {
  font-style: italic;
  line-height: 1.4;
  color: var(--text-copy, #ddd);
}
.paper-source-tag {
  font-style: normal;
  color: var(--text-nav, #9ca3af);
  font-variant-numeric: tabular-nums;
  margin-right: 0.15rem;
}
.paper-source-authors {
  margin-top: 0.3rem;
  color: var(--text-heading, #fff);
  font-size: 0.95rem;
}
.paper-source-venue {
  margin-top: 0.15rem;
  color: var(--text-nav, #888);
  font-size: 13px;
}
[data-theme="light"] .paper-source {
  border-color: #e5e5e5;
  border-left-color: #999;
  background: #fafafa;
}

.article-main {
  min-width: 0;
}

.article-main a {
  color: #3b82f6;
}

.article-main a:hover {
  color: #60a5fa;
}

.article-main h2 {
  font-size: 1.25rem;
  margin-top: 2.5rem;
  margin-bottom: 0.75rem;
}

.article-main h3 {
  font-size: 1.1rem;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

.article-toc {
  position: fixed;
  top: 8rem;
  left: calc(50% + (900px / 2) + 4rem);
  width: 180px;
}

.article-toc h4 {
  color: var(--text-heading);
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.75rem;
}

.article-toc ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.article-toc li {
  padding-left: 0;
  margin-bottom: 0.5rem;
}

.article-toc li::before {
  display: none;
}

.article-toc a {
  color: var(--text-nav);
  text-decoration: none;
  font-size: 13px;
  transition: color 0.15s ease;
}

.article-toc a:hover {
  color: var(--text-nav-hover);
}

.article-tags {
  display: flex;
  gap: 0.5rem;
  margin-top: -1.5rem;
  margin-bottom: 2rem;
}

.tag {
  background-color: #2d2d2d;
  color: var(--text-nav);
  font-size: 12px;
  padding: 0.2rem 0.6rem;
  border-radius: 0.25rem;
}

[data-theme="light"] .tag {
  background-color: #f0f0f0;
}

.callout {
  border-left: 3px solid #3b82f6;
  background-color: #1e293b;
  border-radius: 0.375rem;
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
}

[data-theme="light"] .callout {
  background-color: #eff6ff;
}

.callout-title {
  color: #3b82f6;
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 0.5rem;
}

.callout p {
  margin: 0;
  font-size: 15px;
}

.article-image {
  margin: 1.5rem 0;
}

.article-image img {
  width: 100%;
  height: auto;
  border-radius: 0.375rem;
  transition: filter 0.2s ease;
}

/* Research posts embed white-background PDF crops (tables/figures). In dark mode
   (default) invert them so they sit on the dark page; hue-rotate keeps colored
   chart lines roughly true. Scoped to research so photos (e.g. Bergen) are safe. */
[data-section="research"] .article-image img,
[data-section="note"] .article-image img {
  filter: invert(0.9) hue-rotate(180deg);
}
[data-theme="light"] [data-section="research"] .article-image img,
[data-theme="light"] [data-section="note"] .article-image img {
  filter: none;
}

/* Table crops are small; don't stretch them to full column width. Show them
   compact (~70%) and centered. Scoped to tables via alt text so charts/figures
   and the timeline keep their full size. */
.article-image img[alt^="Table"],
.article-image img[alt^="表"] {
  width: 95%;
  max-width: 95%;
  margin: 0 auto;
  display: block;
}

/* Figure/table caption — the italic line right after an embedded image — centered. */
.article-main .article-image + p {
  text-align: center;
  font-size: 13px;
  color: var(--text-nav);
  margin-top: 0.45rem;
}

/* Q&A answers: a separate, indented paragraph under each bold question.
   (Note callouts render as .callout, not <blockquote>, so they're unaffected.) */
.article-main blockquote {
  margin: 0.35rem 0 1rem 1.7rem;
  padding-left: 0.9rem;
  border-left: 2px solid var(--text-nav);
}
/* Nested list items (research 经济故事 / 可行性) sit deeper AND use a distinct
   dash marker, so they read differently from the disc-bulleted research questions. */
.article-main li > ul {
  list-style: none;
  padding-left: 1.3rem;
  margin-top: 0.35rem;
  margin-bottom: 0.35rem;
}
.article-main li > ul > li {
  position: relative;
  padding-left: 1.1rem;
}
.article-main li > ul > li::before {
  content: "–";
  position: absolute;
  left: 0;
  color: var(--text-nav);
}
.article-main li > ol {
  padding-left: 2rem;
  margin-top: 0.35rem;
  margin-bottom: 0.35rem;
}

/* Literature-timeline figure: full-bleed and CENTERED on the viewport, so it
   renders large and symmetric (both sides). Centering trick works regardless of
   the column width. The right TOC is hidden on research posts (below) so nothing
   overlaps the rightmost ("this paper") node. */
/* max-width sized so the timeline's in-image font (~28px in the 1607px-wide PNG)
   renders at roughly the 17px article body size: 1607 × (17/28) ≈ 960px. */
.article-main figure.timeline-figure {
  width: 100vw;
  max-width: 960px;
  margin-left: 50%;
  transform: translateX(-50%);
  margin-top: 2.5rem;
  margin-bottom: 2.5rem;
}
.article-main figure.timeline-figure img {
  width: 100%;
  height: auto;
}
/* A full-width timeline needs the whole row; drop the fixed TOC on research posts
   so the timeline's right edge (the focal paper) is never hidden behind it. */
[data-section="research"] .article-toc {
  display: none;
}
.article-main figure.timeline-figure figcaption {
  margin-top: 0.5rem;
  text-align: center;
  font-style: italic;
  font-size: 14px;
  color: var(--text-nav);
}

/* ── Bilingual prose toggle (EN / 中文). Headings & formulas stay shared. ── */
/* Default: show Chinese, hide English. Toggling sets data-lang="en" on <html>.
   Use `revert` (not `block`) so inline spans (tags, card labels) stay inline and
   block divs (prose) stay block in both languages. */
.lang.en { display: none; }
[data-lang="en"] .lang.zh { display: none; }
[data-lang="en"] .lang.en { display: revert; }

/* Title with the toggle parked at its right end (with a gap). */
h1.has-lang-toggle {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.lang-toggle {
  background: none;
  border: 1px solid var(--border, #333);
  border-radius: 6px;
  color: var(--text-nav, #888);
  font-size: 12px;
  font-weight: 400;
  padding: 2px 9px;
  cursor: pointer;
  font-family: inherit;
  flex-shrink: 0;
  white-space: nowrap;
  align-self: baseline;
}
.lang-toggle:hover { color: var(--text-copy, #ddd); }

/* ── References: let long citations extend past the right margin (left aligned). ── */
.refs-wide {
  overflow-x: auto;
}
.refs-wide li {
  white-space: nowrap;
}
@media (min-width: 940px) {
  .refs-wide {
    margin-right: calc(2rem - (100vw - 900px) / 2);
  }
}

/* ── Collapsible proof block (hide / unhide) ── */
details.proof {
  margin: 1rem 0 1.5rem;
  border-left: 3px solid #b3392f;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 0 6px 6px 0;
  padding: 0.1rem 1rem;
}
details.proof > summary {
  cursor: pointer;
  font-size: 13px;
  font-style: italic;
  color: var(--text-nav, #999);
  padding: 0.55rem 0;
  list-style: none;
  user-select: none;
}
details.proof > summary::-webkit-details-marker { display: none; }
details.proof > summary::before { content: "▸  "; font-style: normal; }
details.proof[open] > summary::before { content: "▾  "; }
details.proof[open] > summary { color: var(--text-copy, #ccc); }
[data-theme="light"] details.proof { background: #f6f6f6; }

/* ── Disclaimer footer ── */
.post-disclaimer-rule {
  margin-top: 2.5rem;
  border: none;
  border-top: 1px solid var(--border, #2a2a2a);
}
.post-disclaimer {
  font-size: 12px;
  line-height: 1.7;
  color: var(--text-nav, #888);
  margin-top: 1rem;
}

/* ── Annotated model equation: cards in the right margin, arrows to formula parts ── */
.mathanno-block {
  position: relative;
  margin: 2rem 0;
}
.mathanno-eq {
  overflow-x: auto;
}
.mathanno-cards {
  position: absolute;
  top: 0;
  left: calc(100% + 2.5rem);
  width: 240px;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.mathanno-card {
  background: rgba(255, 255, 255, 0.04);
  border-left: 3px solid #b3392f;
  border-radius: 6px;
  padding: 0.45rem 0.6rem;
  font-size: 11.5px;        /* a bit small, as requested */
  line-height: 1.45;
  color: var(--text-copy, #cfcfcf);
}
.mathanno-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  background: #b3392f;
  color: #fff;
  font-size: 10px;
  margin-right: 0.4rem;
  vertical-align: middle;
}
.mathanno-lines {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}
[data-theme="light"] .mathanno-card {
  background: #f3f4f6;
  color: #333;
}
/* Narrow screens: stack the cards below the equation, hide the arrows. */
@media (max-width: 1300px) {
  .mathanno-cards {
    position: static;
    left: auto;
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.8rem;
  }
  .mathanno-card { flex: 1 1 200px; max-width: 280px; }
  .mathanno-lines { display: none; }
}

/* Research crops are dense scans — show them smaller and centered, not full-bleed. */
[data-section="research"] .article-image {
  max-width: 68%;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 700px) {
  [data-section="research"] .article-image {
    max-width: 100%;
  }
}

/* ── Table container ── */
/*
 * Auto-sizing: the table determines its own width from content.
 * - Few columns → table is narrow → min-width:100% stretches it to fill article.
 * - Many columns → table is wide → container grows with it, centers, and scrolls if needed.
 * No hard-coded breakpoints — purely content-driven.
 */
.table-container {
  margin: 2rem 0;
  width: fit-content;
  min-width: 100%;
  max-width: 90vw;
  margin-left: 50%;
  transform: translateX(-50%);
  overflow-x: auto;
}

/* ── DataTables wrapper ── */
.table-container .dataTables_wrapper {
  color: var(--text-copy);
  font-size: 13px;
}

.table-container .dataTables_wrapper .dataTables_length,
.table-container .dataTables_wrapper .dataTables_filter {
  color: var(--text-nav);
  margin-bottom: 0.75rem;
}

.table-container .dataTables_wrapper .dataTables_info,
.table-container .dataTables_wrapper .dataTables_paginate {
  color: var(--text-nav);
  margin-top: 0.75rem;
}

.table-container .dataTables_wrapper .dataTables_filter input,
.table-container .dataTables_wrapper .dataTables_length select {
  background-color: transparent;
  color: var(--text-copy);
  border: 1px solid #aaa;
  border-radius: 3px;
  padding: 5px;
  outline: none;
  margin-left: 0.5rem;
}

.table-container .dataTables_wrapper .dataTables_filter input:focus {
  border-color: #0d6efd;
  outline: none;
}

/* ── Pagination (DataTables default style) ── */
.table-container .dataTables_wrapper .dataTables_paginate .paginate_button {
  color: var(--text-nav) !important;
  border: 1px solid transparent !important;
  border-radius: 2px;
  padding: 0.5em 1em !important;
  margin: 0 2px;
  min-width: 1.5em;
  text-align: center;
  background: transparent !important;
  cursor: pointer;
}

.table-container .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  color: var(--text-heading) !important;
  border-color: #aaa !important;
  background: linear-gradient(to bottom, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 100%) !important;
}

.table-container .dataTables_wrapper .dataTables_paginate .paginate_button.current {
  color: var(--text-heading) !important;
  border: 1px solid rgba(255,255,255,0.3) !important;
  background: rgba(255,255,255,0.05) !important;
}

.table-container .dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
  color: rgba(255,255,255,0.25) !important;
  cursor: default;
}

/* ── Table (DataTables default style) ── */
.table-container table.dataTable {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100% !important;
  table-layout: auto;
}

.table-container table.dataTable thead th,
.table-container table thead th,
.table-container .dataTables_scrollHead table thead th {
  color: var(--text-heading);
  font-weight: bold;
  font-size: 13px;
  padding: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.3);
  background: transparent;
  white-space: nowrap;
  text-align: center !important;
}

table.dataTable thead th,
table.dataTable thead td {
  text-align: center !important;
}

.table-container table.dataTable tbody td,
.table-container table tbody td {
  color: var(--text-copy);
  font-size: 13px;
  padding: 8px 10px;
  border-top: 1px solid rgba(255,255,255,0.15);
  text-align: center !important;
}

.table-container table.dataTable tbody tr:first-child td {
  border-top: none;
}

/* Stripe: subtle odd-row tint via box-shadow (DataTables technique) */
.table-container table.dataTable tbody tr.odd > * {
  box-shadow: inset 0 0 0 9999px rgba(255,255,255,0.023);
}

/* Hover: slightly stronger tint */
.table-container table.dataTable tbody tr:hover > * {
  box-shadow: inset 0 0 0 9999px rgba(255,255,255,0.035) !important;
}

.table-container table.dataTable tbody tr.odd,
.table-container table.dataTable tbody tr.even {
  background-color: transparent;
}

/* ── Light mode ── */
[data-theme="light"] .table-container .dataTables_wrapper .dataTables_filter input,
[data-theme="light"] .table-container .dataTables_wrapper .dataTables_length select {
  color: #171717;
  border-color: #aaa;
}

[data-theme="light"] .table-container .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  border-color: #aaa !important;
  background: linear-gradient(to bottom, rgba(0,0,0,0.02) 0%, rgba(0,0,0,0) 100%) !important;
}

[data-theme="light"] .table-container .dataTables_wrapper .dataTables_paginate .paginate_button.current {
  border: 1px solid rgba(0,0,0,0.3) !important;
  background: rgba(0,0,0,0.05) !important;
}

[data-theme="light"] .table-container .dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
  color: rgba(0,0,0,0.25) !important;
}

[data-theme="light"] .table-container table.dataTable thead th {
  border-bottom-color: rgba(0,0,0,0.3);
}

[data-theme="light"] .table-container table.dataTable tbody td {
  border-top-color: rgba(0,0,0,0.15);
}

[data-theme="light"] .table-container table.dataTable tbody tr.odd > * {
  box-shadow: inset 0 0 0 9999px rgba(0,0,0,0.023);
}

[data-theme="light"] .table-container table.dataTable tbody tr:hover > * {
  box-shadow: inset 0 0 0 9999px rgba(0,0,0,0.035) !important;
}

[data-theme="light"] .table-container table.dataTable tbody tr.odd,
[data-theme="light"] .table-container table.dataTable tbody tr.even {
  background-color: transparent;
}

/* ── Word annotations (Norwegian vocabulary tooltips) ── */

.anno-word {
  color: #a78bfa;
  font-weight: 600;
  cursor: help;
  border-bottom: 1.5px dotted rgba(167, 139, 250, 0.4);
  position: relative;
  transition: color 0.15s ease;
}

.anno-word:hover {
  color: #c4b5fd;
}

.anno-word::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) scale(0.95);
  background: #1e1b2e;
  color: #e2e0ea;
  font-size: 12px;
  font-weight: 400;
  font-style: normal;
  line-height: 1.5;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid rgba(167, 139, 250, 0.2);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  white-space: normal;
  width: max-content;
  max-width: 380px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 100;
}

.anno-word:hover::after {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

/* Arrow */
.anno-word::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #1e1b2e;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
  z-index: 101;
}

.anno-word:hover::before {
  opacity: 1;
}

/* Light mode */
[data-theme="light"] .anno-word {
  color: #7c3aed;
  border-bottom-color: rgba(124, 58, 237, 0.3);
}

[data-theme="light"] .anno-word:hover {
  color: #6d28d9;
}

[data-theme="light"] .anno-word::after {
  background: #faf8ff;
  color: #1e1b2e;
  border-color: rgba(124, 58, 237, 0.15);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .anno-word::before {
  border-top-color: #faf8ff;
}

@media (max-width: 1300px) {
  .article-toc {
    display: none;
  }
}

/* ── Annotate blocks: text + left/right margin cards with connector lines ── */

.annotate-block {
  position: relative;
  margin: 2.5rem 0;
}

.annotate-text {
  max-width: 100%;
}

.annotate-text p {
  line-height: 1.8;
  font-size: 1rem;
}

/* Highlighted word in text */
.anno-hl {
  background: transparent;
  color: inherit;
  border: 1.5px solid var(--hl-color, #7C6AEF);
  border-radius: 3px;
  padding: 1px 3px;
  cursor: default;
}

/* Cards columns — positioned in left and right margins */
.annotate-cards {
  position: absolute;
  top: 0;
  width: 280px;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.annotate-left {
  right: calc(100% + 2.5rem);
}

.annotate-right {
  left: calc(100% + 2.5rem);
}

.anno-card {
  background: var(--card-bg);
  border-radius: 6px;
  padding: 0.6rem 0.8rem;
  font-size: 13px;
  line-height: 1.45;
}

/* Left cards: accent border on right side; right cards: on left side */
.annotate-left .anno-card {
  border-right: 3px solid var(--card-accent);
  border-left: none;
}

.annotate-right .anno-card {
  border-left: 3px solid var(--card-accent);
  border-right: none;
}

.anno-card strong {
  display: block;
  color: var(--card-accent);
  font-size: 15px;
  margin-bottom: 2px;
}

.anno-card-trans {
  display: block;
  color: var(--text-copy, #d0d0d0);
  font-size: 13px;
}

.anno-card-etym {
  display: block;
  color: var(--text-nav, #888);
  font-size: 11.5px;
  font-style: italic;
  margin-top: 2px;
}

/* Hover interaction: highlight paired word/card */
.anno-hl.anno-active {
  background: var(--hl-color, #7C6AEF);
  color: #fff;
  border-color: transparent;
}

.anno-card {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.anno-card.anno-active {
  transform: scale(1.03);
  box-shadow: 0 0 12px rgba(124, 106, 239, 0.35);
  outline: 1.5px solid var(--card-accent);
}

/* SVG connector lines overlay */
.anno-lines {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

/* Light mode */
[data-theme="light"] .anno-card {
  background: var(--card-bg-light);
}

[data-theme="light"] .anno-hl {
  background: transparent;
}

/* On narrow screens, stack cards below text */
@media (max-width: 1300px) {
  .annotate-cards {
    position: static;
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.8rem;
  }
  .annotate-left {
    margin-bottom: 0.8rem;
  }
  .annotate-left .anno-card {
    border-right: none;
    border-left: 3px solid var(--card-accent);
    text-align: left;
  }
  .anno-card {
    flex: 1 1 200px;
    max-width: 280px;
  }
  .anno-lines {
    display: none;
  }
}


/* ── Data section: tidy-finance-style three-column reading layout ───────────
   Left chapter sidebar (fixed, mirrors .article-toc on the right), centered
   content, existing right "On this page" TOC. Scoped to [data-section="data"]
   so Notes/Research/Posts are untouched. */
[data-section="data"] .data-sidebar {
  position: fixed;
  top: 8rem;
  left: calc(50% - (900px / 2) - 4rem - 200px);
  width: 200px;
}
[data-section="data"] .data-sidebar h4 {
  color: var(--text-heading);
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.75rem;
}
[data-section="data"] .data-sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
[data-section="data"] .data-sidebar li {
  padding-left: 0;
  margin-bottom: 0.5rem;
}
[data-section="data"] .data-sidebar li::before {
  display: none;
}
[data-section="data"] .data-sidebar a {
  color: var(--text-nav);
  text-decoration: none;
  font-size: 13px;
  transition: color 0.15s ease;
}
[data-section="data"] .data-sidebar a:hover {
  color: var(--text-nav-hover);
}
[data-section="data"] .data-sidebar li.current a {
  color: var(--text-heading);
  font-weight: 500;
}

/* R / Python toggle button (parked under the title). */
.code-toggle-wrap {
  margin: 0.25rem 0 1rem;
}
.code-toggle {
  background: none;
  border: 1px solid var(--border, #333);
  border-radius: 6px;
  color: var(--text-nav, #888);
  font-size: 12px;
  padding: 2px 9px;
  cursor: pointer;
  font-family: inherit;
}
.code-toggle:hover {
  color: var(--text-copy, #ddd);
}

/* Show R by default; the toggle flips to Python. */
.code-py { display: none; }
[data-codelang="py"] .code-r { display: none; }
[data-codelang="py"] .code-py { display: block; }

/* Prev/next chapter navigation. */
.chapter-nav {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border, #2a2a2a);
  font-size: 14px;
}
.chapter-nav a {
  color: #3b82f6;
  text-decoration: none;
}
.chapter-nav a:hover {
  color: #60a5fa;
}
.chapter-next {
  margin-left: auto;
  text-align: right;
}

/* Collapse the left sidebar on narrow screens (the right TOC already hides
   at 1300px via the existing media query). */
@media (max-width: 1300px) {
  [data-section="data"] .data-sidebar {
    display: none;
  }
}

/* Part labels inside the Data instruction sidebar. */
[data-section="data"] .data-sidebar .data-part {
  color: var(--text-heading);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 1rem 0 0.4rem;
  opacity: 0.7;
}
[data-section="data"] .data-sidebar nav > p.data-part:first-of-type {
  margin-top: 0.5rem;
}