.sandbox-page {
  min-height: 100dvh;
  background: var(--ds-surface-default);
  color: var(--ds-text-default);
}

.sandbox-shell {
  padding-block: var(--ds-space-8);
  display: grid;
  gap: var(--ds-space-8);
}

.sandbox-section {
  border: var(--ds-border-width-1) solid var(--ds-border-default);
  padding: var(--ds-space-5);
}

.sandbox-kicker {
  font-size: var(--ds-font-size-100);
  font-weight: var(--ds-font-weight-bold);
  letter-spacing: var(--ds-letter-spacing-widest);
  text-transform: uppercase;
  color: var(--ds-text-muted);
}

.sandbox-grid {
  display: grid;
  gap: var(--ds-space-4);
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.sandbox-stack {
  display: grid;
  gap: var(--ds-space-3);
}

.sandbox-card {
  border: var(--ds-border-width-1) solid var(--ds-border-default);
  padding: var(--ds-space-4);
  min-height: 9rem;
}

.sandbox-frame {
  width: 100%;
  border: var(--ds-border-width-1) solid var(--ds-border-default);
  background: var(--ds-surface-default);
  resize: horizontal;
  overflow: auto;
  min-width: 20rem;
  max-width: 100%;
}

.sandbox-frame > .sandbox-frame-inner {
  padding: var(--ds-space-4);
}

.sandbox-meta {
  font-size: var(--ds-font-size-100);
  color: var(--ds-text-muted);
}