body {
  margin: 0;
  background: var(--sm-canvas);
  color: var(--sm-text);
  font-family: var(--sm-font);
}
.sm-demos {
  display: grid;
  grid-template-columns: var(--sm-size-220) minmax(0, 1fr);
  min-height: calc(100dvh - var(--sm-site-header-height));
}
.sm-demos-sidebar {
  padding: var(--sm-size-20) var(--sm-size-12);
  background: var(--sm-surface);
  border-right: var(--sm-size-1) solid var(--sm-border);
}
.sm-demos-sidebar h2 {
  margin: 0 var(--sm-size-4) var(--sm-size-16);
  font-size: var(--sm-font-ui-20);
}
.sm-demo-list {
  display: grid;
  gap: var(--sm-size-8);
}
.sm-demo-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sm-size-4) var(--sm-size-8);
  padding: var(--sm-size-10);
  border: var(--sm-size-1) solid var(--sm-border);
  border-radius: var(--sm-size-6);
  background: var(--sm-canvas);
  color: var(--sm-text);
  text-decoration: none;
}
.sm-demo-card:hover {
  background: var(--sm-hover);
  border-color: var(--sm-hover-border);
}
.sm-demo-card[aria-current="page"] {
  border-color: var(--sm-selected-border);
  background: var(--sm-selected);
  box-shadow: inset var(--sm-size-2) 0 var(--sm-accent);
}
.sm-demo-card strong {
  align-self: center;
  font-size: var(--sm-font-ui-13);
  line-height: 1.4;
  font-weight: 500;
  color: var(--sm-accent-text);
}
.sm-demo-category {
  align-self: start;
  padding: var(--sm-size-2) var(--sm-size-4);
  border-radius: var(--sm-size-3);
  color: var(--sm-secondary);
  background: var(--sm-inset);
  font: var(--sm-font-code-10) var(--sm-font-code);
}
.sm-demo-description {
  grid-column: 1 / -1;
  color: var(--sm-muted);
  font-size: var(--sm-font-ui-11);
  line-height: 1.5;
}
.sm-demo-card:focus-visible {
  outline: var(--sm-size-2) solid var(--sm-accent);
  outline-offset: var(--sm-size-2);
}
.sm-demos-sidebar p {
  margin: var(--sm-size-16) var(--sm-size-4) 0;
  color: var(--sm-muted);
  font-size: var(--sm-font-ui-12);
  line-height: 1.6;
}
.sm-demos-frame {
  display: block;
  width: 100%;
  height: calc(100dvh - var(--sm-site-header-height));
  min-height: calc(2 * var(--sm-size-300));
  border: 0;
}
@media (max-width: 44em) {
  .sm-demos {
    grid-template-columns: minmax(0, 1fr);
  }
  .sm-demos-sidebar {
    padding: var(--sm-size-12);
    border-right: 0;
    border-bottom: var(--sm-size-1) solid var(--sm-border);
  }
  .sm-demos-sidebar h2 {
    margin-bottom: var(--sm-size-10);
  }
  .sm-demo-list {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--sm-size-180)), 1fr));
  }
  .sm-demos-sidebar > p:not(.sm-demos-error) {
    display: none;
  }
}