.section-note {
  margin: 0 0 10px;
  padding: 7px 8px;
  border: 1px solid #aab7c6;
  background: linear-gradient(#ffffff, #e8f0f9);
}

:root[data-theme="dark"] .section-note {
  background: linear-gradient(#25374b, #1d2c3f);
}

.legacy-note {
  border-left: 4px solid var(--legacy);
}

.dev-note {
  border-left: 4px solid var(--orange);
}

.experimental-note {
  border-left: 4px solid var(--red);
}

.planned-note {
  border-left: 4px solid var(--bluegray);
}

.table-like-list {
  display: grid;
  border: 1px solid var(--line);
  background: var(--paper);
}

.table-like-list div {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  border-bottom: 1px solid #aab7c6;
}

.table-like-list div:last-child {
  border-bottom: 0;
}

.table-like-list dt,
.table-like-list dd {
  margin: 0;
  padding: 6px 7px;
}

.table-like-list dt {
  background: var(--panel-2);
  font-weight: bold;
}

.mini-tabs {
  display: flex;
  gap: 2px;
  margin: 0 0 6px;
}

.mini-tabs span {
  padding: 3px 6px;
  border: 1px solid #8ea1b5;
  border-bottom: 0;
  background: linear-gradient(#fff, #dfe8f4);
  font-size: 11px;
  font-weight: bold;
}

:root[data-theme="dark"] .mini-tabs span {
  background: linear-gradient(#2c3e54, #1d2d40);
}

.code-sample {
  overflow-x: auto;
  margin: 0 0 10px;
  padding: 8px;
  border: 1px solid #7d8b9b;
  color: #173456;
  background: #f7fbff;
  font: 12px/1.45 Consolas, "Courier New", monospace;
}

:root[data-theme="dark"] .code-sample {
  color: #d6e9ff;
  background: #101927;
}

.two-column-list {
  columns: 2;
  column-gap: 26px;
}

.two-column-list li {
  break-inside: avoid;
}

.status-led {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 4px;
  border: 1px solid rgba(0,0,0,.35);
  border-radius: 50%;
  background: #f0bf2e;
  box-shadow: inset 1px 1px 0 rgba(255,255,255,.65);
}

.status-led.green {
  background: #59b65a;
}

.status-led.red {
  background: #d95f48;
}

.status-led.gray {
  background: #9aa6b3;
}

.page-index-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--line);
}

.page-index-list li {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 6px;
  padding: 6px 7px;
  border-bottom: 1px solid rgba(120,140,160,.35);
  background: var(--panel);
}

.page-index-list li:last-child {
  border-bottom: 0;
}

.page-index-list img {
  width: 20px;
  height: 20px;
}