@font-face {
  font-family: "Pixel Mplus";
  src: url("/public/fonts/pixel-mplus-12-regular.ttf") format("truetype");
  font-display: block;
}

:root {
  --zenbu-sys-font-family-ui: "Pixel Mplus";
  --zenbu-sys-font-family-content: "Pixel Mplus";
  --zenbu-sys-font-family-code: "Pixel Mplus";
  --zenbu-sys-type-caption-family: "Pixel Mplus";
  --zenbu-sys-type-label-family: "Pixel Mplus";
  --zenbu-sys-type-body-family: "Pixel Mplus";
  --zenbu-sys-type-body-large-family: "Pixel Mplus";
  --zenbu-sys-type-subtitle-family: "Pixel Mplus";
  --zenbu-sys-type-title-family: "Pixel Mplus";
  --zenbu-sys-type-page-title-family: "Pixel Mplus";
  --zenbu-sys-type-reading-family: "Pixel Mplus";
  --zenbu-sys-type-code-family: "Pixel Mplus";
}

body {
  box-sizing: border-box;
  min-height: 100dvh;
  margin: 0;
  padding: var(--zenbu-sys-padding-xl);
  background: var(--zenbu-sys-color-surface-page);
  color: var(--zenbu-sys-color-text-primary);
  font-family: var(--zenbu-sys-font-family-ui);
}

body * {
  font-family: inherit;
}

zen-icon svg {
  shape-rendering: crispEdges;
  stroke-linecap: square;
  stroke-linejoin: miter;
}

main {
  display: grid;
  gap: var(--zenbu-sys-space-container);
  width: min(100%, 64rem);
  margin-inline: auto;
}

.sandbox-heading {
  display: grid;
  gap: var(--zenbu-sys-space-control);
}

.sandbox-heading h1 {
  color: var(--zenbu-sys-color-action-primary-background);
  text-shadow:
    var(--zenbu-sys-space-icon-label)
    var(--zenbu-sys-space-icon-label)
    0
    var(--zenbu-sys-color-danger-foreground);
}

.sandbox-heading :where(h1, p),
.sandbox-card :where(h2, p),
.sandbox-pane :where(h3, p) {
  margin: 0;
}

.sandbox-heading p,
.sandbox-card > p,
.sandbox-muted {
  color: var(--zenbu-sys-color-text-secondary);
}

.sandbox-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--zenbu-sys-space-group);
}

.sandbox-layers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--zenbu-sys-space-control);
  margin: 0;
}

.sandbox-layers > div {
  display: grid;
  gap: var(--zenbu-sys-space-icon-label);
  padding: var(--zenbu-sys-padding-md);
  border: var(--zenbu-sys-stroke-width) solid
    var(--zenbu-sys-color-border-default);
  border-radius: var(--zenbu-sys-radius-control);
  background: var(--zenbu-sys-color-surface-sunken);
}

.sandbox-layers > div:nth-child(1) dt {
  color: var(--zenbu-sys-color-warning-foreground);
}

.sandbox-layers > div:nth-child(2) dt {
  color: var(--zenbu-sys-color-info-foreground);
}

.sandbox-layers > div:nth-child(3) dt {
  color: var(--zenbu-sys-color-action-primary-background);
}

.sandbox-layers dt {
  color: var(--zenbu-sys-color-text-primary);
  font-weight: var(--zenbu-sys-font-weight-strong);
}

.sandbox-layers dd {
  margin: 0;
  color: var(--zenbu-sys-color-text-secondary);
  font-size: var(--zenbu-sys-font-size-sm);
}

.sandbox-rule {
  padding: var(--zenbu-sys-padding-md);
  border-inline-start: var(--zenbu-sys-stroke-width-emphasis) solid
    var(--zenbu-sys-color-action-primary-border);
  background: var(--zenbu-sys-color-surface-sunken);
  color: var(--zenbu-sys-color-text-secondary);
}

.sandbox-card {
  display: grid;
  align-content: start;
  gap: var(--zenbu-sys-space-group);
  padding: var(--zenbu-sys-padding-xl);
  border: var(--zenbu-sys-stroke-width) solid
    var(--zenbu-sys-color-border-default);
  border-radius: var(--zenbu-sys-radius-container);
  background: var(--zenbu-sys-color-surface-raised);
  box-shadow:
    var(--zenbu-sys-space-control)
    var(--zenbu-sys-space-control)
    0
    var(--zenbu-sys-color-danger-foreground);
}

.sandbox-card > h2 {
  color: var(--zenbu-sys-color-action-primary-background);
}

.sandbox-list {
  display: grid;
  gap: var(--zenbu-sys-space-control);
  margin: 0;
  padding: 0;
  list-style: none;
}

.sandbox-list li {
  padding-bottom: var(--zenbu-sys-padding-sm);
  border-bottom: var(--zenbu-sys-stroke-width) solid
    var(--zenbu-sys-color-border-subtle);
}

.sandbox-audit {
  display: grid;
  gap: var(--zenbu-sys-space-control);
  margin: var(--zenbu-sys-space-group) 0 0;
  padding: 0;
  list-style: none;
}

.sandbox-audit li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--zenbu-sys-space-control);
  padding-block: var(--zenbu-sys-padding-sm);
  border-top: var(--zenbu-sys-stroke-width) solid
    var(--zenbu-sys-color-border-subtle);
  color: var(--zenbu-sys-color-text-secondary);
}

.sandbox-audit strong {
  color: var(--zenbu-sys-color-warning-foreground);
}

.sandbox-pane {
  display: grid;
  align-content: start;
  gap: var(--zenbu-sys-space-control);
}

@media (max-width: 42rem) {
  body {
    padding: var(--zenbu-sys-padding-lg);
  }

  .sandbox-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .sandbox-layers {
    grid-template-columns: minmax(0, 1fr);
  }
}