.bl-page .pf-hero {
  background: radial-gradient(ellipse at 92% 10%, #bd87f63d, transparent 58%), linear-gradient(125deg, #3c2450, #21142e);
}

.bl-page .pf-hero-art {
  background: linear-gradient(140deg, #8c51ba55, #382040);
  border-color: #b288d0;
}

.bl-page .pf-hero h1 {
  max-width: 25ch;
}

.bl-page .pf-workspace {
  margin-top: 24px;
}

.bl-page .bl-summary {
  padding: 22px;
  border: 1px solid #d1bce2;
  border-radius: 14px;
  background: linear-gradient(135deg, #f6edff, #eee2f7);
  margin-bottom: 20px;
}

.bl-page .bl-summary > span {
  color: #74478f;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 1.6px;
}

.bl-page .bl-summary h2 {
  margin: 8px 0 12px;
  color: #3b2351;
}

.bl-page .rw-table-scroll {
  max-width: 100%;
  overflow: auto;
  border: 1px solid #d1bce2;
  border-radius: 10px;
}

.bl-page .rw-table-scroll th,
.bl-page .rw-table-scroll td {
  padding: 12px;
  vertical-align: top;
  overflow-wrap: anywhere;
  min-width: 100px;
  max-width: 360px;
}

.bl-page .pf-scope {
  margin-top: 20px;
}

.bl-page .pf-paper .bl-demo :is(ul, ol, li, p, span, label, legend, th, td, caption, summary, pre):not(.bl-cascade-target) {
  color: #f3ebff;
}

@media (min-width: 1200px) {
  .bl-page .pf-body {
    grid-template-columns: 220px minmax(0, 1fr) 310px;
  }
}

@media (max-width: 650px) {
  .bl-page .bl-summary {
    padding: 16px;
  }
}