/* Highlight panel (sl-new): inner gradient + vignette + subtle 1px blended border + oblique shadow */
.sl-new {
  display: block;
  width: 100%;
  box-sizing: border-box;

  margin: 20px 0;
  padding: 15px;

  /* Soft, blending border (matches rim) */
  border: 1px solid #e1e7ee;
  border-radius: 5px;

  /* Inner gradient (white center → subtle blue-grey edge) */
  background-image: radial-gradient(circle farthest-corner at 50% 50%,
    #ffffff 0%,
    #ffffff 58%,
    #f9fbfe 76%,
    #edf1f5 90%,
    #e5ebf1 97%,
    #e1e7ee 100%
  );
  background-clip: padding-box;

  /* Oblique, layered drop shadow (down-right) */
  box-shadow:
    0.5px 1px 0.8px rgba(0, 0, 0, 0.05),
    2px 4px 3px rgba(0, 0, 0, 0.06),
    5px 10px 12px rgba(0, 0, 0, 0.08),
    10px 20px 24px rgba(0, 0, 0, 0.09);

  /* Type */
  color: #0a0a0a;
  font-size: 1.25em;
  line-height: 1.45;
}

/* Headings: keep sizes, tighten leading */
.sl-new h1,
.sl-new h2,
.sl-new h3,
.sl-new h4,
.sl-new h5,
.sl-new h6 {
  line-height: 1.2;
}

/* Accessible list markers with fallback */
.sl-new ul {
  margin: 0.6em 0;
  padding-left: 1.25em;
  list-style: disc;
}
.sl-new ul li { line-height: 1.5; }

@supports selector(li::marker) {
  .sl-new ul { list-style: initial; }
  .sl-new ul li::marker {
    content: "★  ";
    color: #000;
    font-size: 0.95em;
  }
}

/* Ensure any legacy ::before bullets are off */
.sl-new ul li::before { content: none !important; }

/* Responsive media */
.sl-new img,
.sl-new video,
.sl-new svg,
.sl-new canvas,
.sl-new iframe {
  max-width: 100%;
  height: auto;
}

/* Long URLs can wrap */
.sl-new a { overflow-wrap: anywhere; }

/* Pre/code handling */
.sl-new pre,
.sl-new code {
  white-space: pre-wrap;
  overflow-x: auto;
}

/* Small screens: keep font size; soften padding */
@media (max-width: 420px) {
  .sl-new { padding: 12px; }
}

/* High-contrast/forced colors: avoid invisible border/shadow issues */
@media (forced-colors: active) {
  .sl-new {
    border-color: CanvasText;
    box-shadow: none;
  }
}