/* ==========================================================
   SHARE MARKET GYAN
   HOW TO READ THE MARKET — PAGE CSS
   ==========================================================
   Important rule:
   No font-size below 14px in this file.
   The site's existing style.css/responsive.css remain the
   source of the standard header/footer appearance.
========================================================== */

.hm-page {
  background: #f7f9fc;
  color: #172033;
}

.hm-page *,
.hm-page *::before,
.hm-page *::after {
  box-sizing: border-box;
}

.hm-page a {
  color: inherit;
}

.hm-breadcrumb {
  min-height: 50px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #64748b;
  font-size: 14px;
}

.hm-breadcrumb a {
  text-decoration: none;
  color: #42658f;
}

.hm-breadcrumb a:hover {
  color: #2563eb;
}

/* HERO */
.hm-hero {
  background: #ffffff;
  border-top: 1px solid #e7edf5;
  border-bottom: 1px solid #e7edf5;
}

.hm-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(460px, 0.95fr);
  gap: 52px;
  align-items: center;
  padding-top: 56px;
  padding-bottom: 56px;
}

.hm-kicker,
.hm-lesson-no {
  display: inline-flex;
  color: #2563eb;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.hm-hero-copy h1 {
  margin: 12px 0 16px;
  color: #071a35;
  font-family: Poppins, Inter, sans-serif;
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1.05;
  letter-spacing: -2px;
}

.hm-hero-copy h1 span {
  color: #2563eb;
}

.hm-hero-copy > p {
  max-width: 720px;
  margin: 0;
  color: #53657b;
  font-size: 18px;
  line-height: 1.75;
}

.hm-hero-points {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 28px;
}

.hm-hero-points div {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  padding: 10px 12px;
  border: 1px solid #e2e9f2;
  border-radius: 10px;
  background: #fbfcfe;
}

.hm-hero-points i {
  color: #2563eb;
  font-size: 16px;
}

.hm-hero-points span {
  color: #354961;
  font-size: 14px;
  font-weight: 700;
}

/* MARKET CHART */
.hm-hero-chart {
  position: relative;
  overflow: hidden;
  min-height: 390px;
  padding: 20px 20px 15px;
  border: 1px solid #0e4e9c;
  border-radius: 18px;
  background:
    radial-gradient(circle at 85% 15%, rgba(64, 185, 255, 0.22), transparent 32%),
    linear-gradient(145deg, #061b3c 0%, #092e67 58%, #0a4b9c 100%);
  box-shadow: 0 22px 48px rgba(7, 43, 88, 0.22);
}

.hm-chart-head {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
}

.hm-chart-head span,
.hm-chart-head small {
  display: block;
  color: rgba(255, 255, 255, 0.65);
  font-size: 14px;
}

.hm-chart-head strong {
  display: block;
  margin-top: 3px;
  color: #ffffff;
  font-size: 16px;
  letter-spacing: 0.04em;
}

.hm-chart-price {
  text-align: right;
}

.hm-chart-price strong {
  color: #71e0b1;
  font-size: 14px;
}

.hm-chart-body {
  position: relative;
  height: 295px;
  margin-top: 12px;
}

.hm-chart-body svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.hm-y-axis {
  position: absolute;
  left: 0;
  top: 18px;
  bottom: 18px;
  width: 48px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  z-index: 2;
  pointer-events: none;
}

.hm-y-axis span {
  color: rgba(255, 255, 255, 0.5);
  font-size: 14px;
}

.hm-grid-lines line {
  stroke: rgba(255, 255, 255, 0.12);
  stroke-width: 1;
  stroke-dasharray: 5 7;
}

.hm-area {
  fill: url(#hmArea);
}

.hm-candles line {
  stroke: #7edff5;
  stroke-width: 2;
}

.hm-candles rect {
  fill: #36c99a;
  stroke: #a0ffe1;
  stroke-width: 1;
}

.hm-candles g:nth-child(3) rect,
.hm-candles g:nth-child(9) rect {
  fill: #ef7272;
  stroke: #ffb1b1;
}

.hm-trend-line {
  fill: none;
  stroke: #ffffff;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hm-chart-dot {
  fill: #ffffff;
  stroke: #55d5ff;
  stroke-width: 4;
}

.hm-chart-bottom {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 4px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.hm-chart-bottom span {
  color: rgba(255, 255, 255, 0.72);
  font-size: 14px;
  font-weight: 700;
}

/* TOOLS */
.hm-tools {
  background: #ffffff;
  border-bottom: 1px solid #e3eaf3;
}

.hm-tools-inner {
  min-height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.hm-contents-button {
  display: none;
}

.hm-search {
  position: relative;
  width: min(390px, 100%);
  margin-left: auto;
}

.hm-search i {
  position: absolute;
  left: 15px;
  top: 14px;
  color: #708096;
  font-size: 14px;
}

.hm-search input {
  width: 100%;
  height: 44px;
  padding: 0 15px 0 40px;
  border: 1px solid #dce5ef;
  border-radius: 9px;
  outline: none;
  background: #fbfcfe;
  color: #1d2b3f;
  font-size: 14px;
}

.hm-search input:focus {
  border-color: #5b96e8;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* CONTENT LAYOUT */
.hm-layout {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 26px;
  align-items: start;
  padding-top: 28px;
  padding-bottom: 64px;
}

.hm-sidebar {
  position: sticky;
  top: 92px;
}

.hm-sidebar-card {
  overflow: hidden;
  border: 1px solid #e1e8f1;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 8px 26px rgba(20, 42, 70, 0.07);
}

.hm-sidebar-head {
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 15px;
  border-bottom: 1px solid #e5ebf3;
}

.hm-sidebar-head span {
  display: block;
  color: #6c7c91;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.hm-sidebar-head strong {
  display: block;
  color: #12233b;
  font-size: 17px;
}

.hm-sidebar-close {
  display: none;
  border: 0;
  background: transparent;
  color: #263950;
  cursor: pointer;
  font-size: 20px;
}

.hm-toc {
  max-height: calc(100vh - 205px);
  overflow: auto;
  padding: 9px;
}

.hm-toc a {
  display: grid;
  grid-template-columns: 31px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  padding: 8px;
  border-radius: 8px;
  color: #40536a;
  text-decoration: none;
}

.hm-toc a:hover,
.hm-toc a.active {
  background: #2563eb;
  color: #ffffff;
}

.hm-toc b {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: #eff4fa;
  color: #60738b;
  font-size: 14px;
}

.hm-toc a:hover b,
.hm-toc a.active b {
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
}

.hm-toc span {
  font-size: 14px;
  line-height: 1.35;
  font-weight: 650;
}

.hm-side-links {
  padding: 9px;
  border-top: 1px solid #e5ebf3;
}

.hm-side-links a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px;
  border-radius: 8px;
  color: #41556d;
  text-decoration: none;
  font-size: 14px;
  font-weight: 750;
}

.hm-side-links a:hover {
  background: #f3f6fa;
  color: #2563eb;
}

.hm-side-links i {
  width: 18px;
  text-align: center;
  color: #2563eb;
}

/* LESSONS */
.hm-content {
  min-width: 0;
}

.hm-lesson,
.hm-support {
  scroll-margin-top: 105px;
  margin-bottom: 22px;
  padding: 32px;
  border: 1px solid #e1e8f1;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 8px 26px rgba(20, 42, 70, 0.06);
}

.hm-lesson h2,
.hm-support h2 {
  margin: 7px 0 10px;
  color: #071a35;
  font-family: Poppins, Inter, sans-serif;
  font-size: 30px;
  line-height: 1.22;
  letter-spacing: -0.6px;
}

.hm-lesson h3 {
  margin: 26px 0 9px;
  color: #102541;
  font-size: 20px;
}

.hm-lesson p,
.hm-support p {
  margin: 0 0 15px;
  color: #4f6075;
  font-size: 15px;
  line-height: 1.78;
}

.hm-lead {
  color: #53667d !important;
  font-size: 16px !important;
}

.hm-callout,
.hm-takeaway {
  margin: 20px 0;
  padding: 16px 18px;
  border: 1px solid;
  border-radius: 10px;
}

.hm-callout strong,
.hm-takeaway strong {
  display: block;
  margin-bottom: 5px;
  color: #13263f;
  font-size: 15px;
}

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

.hm-blue {
  background: #eff6ff;
  border-color: #bdd7ff;
}

.hm-yellow {
  background: #fff9e9;
  border-color: #f0d47d;
}

.hm-red {
  background: #fff1f1;
  border-color: #efbebe;
}

.hm-purple {
  background: #f6f1ff;
  border-color: #dacbfa;
}

.hm-green {
  background: #effaf3;
  border-color: #bfe6ca;
}

.hm-takeaway {
  background: #f0f6ff;
  border-color: #bed7fb;
}

.hm-metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 20px 0;
}

.hm-metric-grid > div {
  min-height: 116px;
  padding: 15px;
  border: 1px solid #e1e8f1;
  border-radius: 10px;
  background: #fbfcfe;
}

.hm-metric-grid i {
  display: block;
  margin-bottom: 8px;
  color: #2563eb;
  font-size: 17px;
}

.hm-metric-grid strong,
.hm-metric-grid span {
  display: block;
}

.hm-metric-grid strong {
  color: #17304f;
  font-size: 15px;
}

.hm-metric-grid span {
  margin-top: 4px;
  color: #63748a;
  font-size: 14px;
}

.hm-two,
.hm-three {
  display: grid;
  gap: 12px;
  margin: 20px 0;
}

.hm-two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.hm-three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.hm-mini,
.hm-three > div {
  padding: 17px;
  border: 1px solid #e1e8f1;
  border-radius: 10px;
  background: #fbfcfe;
}

.hm-mini strong,
.hm-three b {
  display: block;
  color: #17304f;
  font-size: 15px;
}

.hm-mini p,
.hm-three span {
  margin: 5px 0 0;
  color: #64758a;
  font-size: 14px;
}

.hm-good {
  border-color: #bee5ca;
  background: #f2fbf5;
}

.hm-caution {
  border-color: #f0d27d;
  background: #fffaf0;
}

.hm-table {
  overflow-x: auto;
  margin: 20px 0;
  border: 1px solid #e0e7ef;
  border-radius: 10px;
}

.hm-table > div {
  display: grid;
  grid-template-columns: 1fr 1fr 2fr;
  min-width: 600px;
  border-bottom: 1px solid #e0e7ef;
}

.hm-table > div:last-child {
  border-bottom: 0;
}

.hm-table > div > * {
  padding: 12px 13px;
  border-right: 1px solid #e0e7ef;
  color: #4c6077;
  font-size: 14px;
}

.hm-table > div > *:last-child {
  border-right: 0;
}

.hm-table b {
  color: #152b48;
  background: #f7f9fc;
}

.hm-number-list {
  padding-left: 22px;
  color: #4f6075;
}

.hm-number-list li {
  margin: 9px 0;
  padding-left: 4px;
  font-size: 15px;
}

.hm-icon-list {
  padding-left: 21px;
  color: #4f6075;
}

.hm-icon-list li {
  margin: 10px 0;
  font-size: 15px;
}

.hm-icon-list strong {
  color: #1b3452;
}

.hm-timeline {
  margin: 20px 0;
  border-left: 2px solid #c9ddfb;
}

.hm-timeline > div {
  position: relative;
  padding: 8px 0 16px 24px;
}

.hm-timeline > div::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 14px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #2563eb;
}

.hm-timeline b,
.hm-timeline span {
  display: block;
}

.hm-timeline b {
  color: #142a47;
  font-size: 15px;
}

.hm-timeline span {
  margin-top: 4px;
  color: #5d7087;
  font-size: 14px;
}

.hm-framework {
  display: grid;
  gap: 10px;
  margin: 20px 0;
}

.hm-framework > div {
  display: grid;
  grid-template-columns: 40px 190px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid #e0e7ef;
  border-radius: 9px;
  background: #fbfcfe;
}

.hm-framework b {
  display: grid;
  place-items: center;
  width: 31px;
  height: 31px;
  border-radius: 50%;
  background: #eaf2ff;
  color: #2563eb;
  font-size: 14px;
}

.hm-framework strong {
  color: #193452;
  font-size: 15px;
}

.hm-framework span {
  color: #63758b;
  font-size: 14px;
}

.hm-callout label {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 9px;
  padding: 9px 10px;
  border: 1px solid #dce6f0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.7);
  color: #42576e;
  font-size: 14px;
  cursor: pointer;
}

.hm-callout input,
.hm-daily-checks input {
  margin-top: 4px;
  accent-color: #2563eb;
}

.hm-framework-banner {
  scroll-margin-top: 105px;
  margin: 25px 0;
  padding: 34px;
  border-radius: 15px;
  color: #ffffff;
  text-align: center;
  background: linear-gradient(135deg, #061a3b, #0b438c);
  box-shadow: 0 12px 32px rgba(9, 46, 98, 0.16);
}

.hm-framework-banner .hm-kicker {
  color: #8fc2ff;
}

.hm-framework-banner h2 {
  margin: 8px 0 7px;
  font-family: Poppins, Inter, sans-serif;
  font-size: 28px;
}

.hm-framework-banner p {
  max-width: 720px;
  margin: 0 auto 22px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 15px;
}

.hm-framework-pills {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}

.hm-framework-pills span {
  padding: 12px 8px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.07);
  font-size: 14px;
  font-weight: 750;
}

.hm-support h2 {
  margin-bottom: 18px;
}

.hm-mistakes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.hm-mistakes > div {
  padding: 16px;
  border: 1px solid #e1e8f1;
  border-radius: 10px;
  background: #fbfcfe;
}

.hm-mistakes b {
  display: block;
  color: #82a6d6;
  font-size: 20px;
}

.hm-mistakes strong {
  display: block;
  margin-top: 3px;
  color: #17304f;
  font-size: 15px;
}

.hm-mistakes p {
  margin-top: 5px;
  font-size: 14px;
}

.hm-daily-checks {
  display: grid;
  gap: 9px;
}

.hm-daily-checks label {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 10px 12px;
  border: 1px solid #e0e7ef;
  border-radius: 8px;
  background: #fbfcfe;
  color: #42576e;
  font-size: 15px;
  cursor: pointer;
}

.hm-daily-checks label.done {
  opacity: 0.55;
  text-decoration: line-through;
}

.hm-support details {
  border-top: 1px solid #e0e7ef;
  padding: 16px 0;
}

.hm-support details:last-child {
  border-bottom: 1px solid #e0e7ef;
}

.hm-support summary {
  cursor: pointer;
  color: #162e4d;
  font-size: 15px;
  font-weight: 750;
}

.hm-support details p {
  margin: 9px 0 0;
  font-size: 15px;
}

.hm-quote {
  margin-top: 24px;
  padding: 13px;
  border: 1px solid #c2e7cf;
  border-radius: 10px;
  background: #effaf3;
  color: #2c6848;
  text-align: center;
  font-size: 15px;
  font-weight: 750;
}

.hm-search-empty {
  margin-bottom: 22px;
  padding: 28px;
  border: 1px dashed #b8c8da;
  border-radius: 12px;
  background: #ffffff;
  text-align: center;
}

.hm-search-empty strong,
.hm-search-empty span {
  display: block;
}

.hm-search-empty strong {
  color: #18304f;
  font-size: 16px;
}

.hm-search-empty span {
  margin-top: 4px;
  color: #61738a;
  font-size: 14px;
}

/* RESPONSIVE */
@media (max-width: 1100px) {
  .hm-hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(390px, 0.9fr);
    gap: 32px;
  }

  .hm-layout {
    grid-template-columns: 270px minmax(0, 1fr);
  }

  .hm-metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hm-framework-pills {
    grid-template-columns: repeat(4, 1fr);
  }

  .hm-mistakes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .hm-breadcrumb {
    min-height: 45px;
  }

  .hm-hero-grid {
    grid-template-columns: 1fr;
    padding-top: 38px;
    padding-bottom: 38px;
  }

  .hm-hero-copy h1 {
    font-size: 42px;
  }

  .hm-hero-chart {
    min-height: 350px;
  }

  .hm-tools-inner {
    min-height: 68px;
  }

  .hm-contents-button {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex: 1;
    padding: 0 13px;
    border: 1px solid #dce5ef;
    border-radius: 9px;
    background: #ffffff;
    color: #18304e;
    font-size: 14px;
    font-weight: 750;
    cursor: pointer;
  }

  .hm-search {
    max-width: 300px;
  }

  .hm-layout {
    display: block;
    padding-top: 20px;
  }

  .hm-sidebar {
    position: fixed;
    z-index: 300;
    inset: 0;
    display: none;
    padding: 12px;
    background: rgba(4, 18, 38, 0.52);
  }

  .hm-sidebar.open {
    display: block;
  }

  .hm-sidebar-card {
    width: min(430px, 100%);
    height: calc(100vh - 24px);
    margin-left: auto;
    display: flex;
    flex-direction: column;
  }

  .hm-sidebar-close {
    display: block;
  }

  .hm-toc {
    max-height: none;
    flex: 1;
  }

  .hm-side-links {
    display: none;
  }

  .hm-two {
    grid-template-columns: 1fr;
  }

  .hm-three {
    grid-template-columns: 1fr;
  }

  .hm-mistakes {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .hm-hero-copy h1 {
    font-size: 36px;
    letter-spacing: -1px;
  }

  .hm-hero-copy > p {
    font-size: 15px;
  }

  .hm-hero-points {
    grid-template-columns: 1fr;
  }

  .hm-hero-chart {
    min-height: 300px;
    padding: 15px 12px 12px;
  }

  .hm-chart-body {
    height: 230px;
  }

  .hm-chart-head strong {
    font-size: 14px;
  }

  .hm-chart-bottom span {
    font-size: 14px;
  }

  .hm-tools-inner {
    display: grid;
    grid-template-columns: 1fr;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .hm-search {
    width: 100%;
    max-width: none;
  }

  .hm-lesson,
  .hm-support {
    padding: 22px 18px;
  }

  .hm-lesson h2,
  .hm-support h2 {
    font-size: 24px;
  }

  .hm-lesson h3 {
    font-size: 18px;
  }

  .hm-metric-grid {
    grid-template-columns: 1fr;
  }

  .hm-table {
    margin-right: -3px;
  }

  .hm-framework > div {
    grid-template-columns: 36px 1fr;
  }

  .hm-framework span {
    grid-column: 2;
    margin-top: -6px;
  }

  .hm-framework-pills {
    grid-template-columns: repeat(2, 1fr);
  }

  .hm-framework-banner {
    padding: 25px 16px;
  }
}

/* Protect the page's minimum type scale even when viewed without the
   site's other CSS files. No font-size under 14px is used above. */


/* Lesson anchors are positioned by how-to-read-market.js.
   Keep the target clear of the site's sticky header. */
html:has(.hm-page) {
  scroll-behavior: auto;
}


/* FINAL COMPATIBILITY PATCH
   Works with the universal style.css/responsive.css + app.js.
   Page-specific rules remain isolated.
*/
.hm-lesson[hidden],
.inv-lesson[hidden] {
  display: none !important;
}
/* ==========================================
   FLOATING / STICKY 20-LESSON NAVIGATION
   ========================================== */

@media (min-width: 992px) {

  .hm-layout {
    align-items: flex-start;
  }

  .hm-sidebar {
    position: sticky;
    top: 110px;
    align-self: flex-start;
    height: fit-content;
    max-height: calc(100vh - 130px);
    z-index: 20;
  }

  .hm-sidebar-card {
    max-height: calc(100vh - 130px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }

  .hm-toc {
    max-height: none;
  }
}

@media (min-width: 992px) {
  .hm-toc a.active {
    font-weight: 700;
    transform: translateX(3px);
  }
}

/* ==========================================================
   FINAL FIX — STICKY / SCROLLABLE LESSON TOC
   Desktop/tablet only. Mobile drawer remains unchanged.
========================================================== */
@media (min-width: 821px) {
  .hm-layout {
    align-items: start;
  }

  .hm-sidebar {
    position: sticky;
    top: 96px;
    align-self: start;
    height: fit-content;
    min-height: 0;
    z-index: 20;
  }

  .hm-sidebar-card {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 112px);
    overflow: hidden;
  }

  .hm-toc {
    min-height: 0;
    max-height: calc(100vh - 180px);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
}

@media (max-width: 820px) {
  .hm-sidebar {
    position: fixed;
  }

  .hm-toc {
    max-height: none;
    overflow-y: auto;
  }
}

/* ==========================================================
   FINAL SCROLL SAFETY PATCH
   Lessons must remain in normal document flow. The lesson TOC
   is the only independently scrollable area.
========================================================== */
.hm-page,
.hm-layout,
.hm-content {
  overflow: visible;
}

.hm-content {
  min-height: 0;
}

.hm-lesson {
  position: relative;
  display: block;
  overflow: visible;
}

@media (min-width: 821px) {
  .hm-sidebar {
    overflow: visible;
  }

  .hm-sidebar-card {
    overflow: hidden;
  }

  .hm-toc {
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
  }
}