*, :before, :after {
  box-sizing: border-box;
}

html, body, #demo {
  min-block-size: 100%;
  margin: 0;
  padding: 0;
}

.platform-menu__logo, .platform-menu__start, .platform-menu__center, .platform-menu__end {
  display: contents;
}

.demo-app__inner {
  padding-block-start: calc(var(--prisma--dimension--space) * 0);
  padding-block-end: calc(var(--prisma--dimension--space) * 12);
  padding-inline: var(--prisma--shell--app-outlet--content--inline-gutter);
  flex: 1;
  position: relative;
}

.demo-app__inner:before {
  z-index: 0;
  content: " ";
  inset: calc(var(--prisma--dimension--space) * 5.5)
    calc(var(--prisma--dimension--space) * 6);
  background: repeating-linear-gradient(var(--prisma--color--background--disabled),
    var(--prisma--color--background--disabled)
      calc(var(--prisma--dimension--space) * 5),
    transparent calc(var(--prisma--dimension--space) * 5),
    transparent calc(var(--prisma--dimension--space) * 10));
  pointer-events: none;
  display: none;
  position: absolute;
}

.demo-app__tab-list {
  margin-block-end: calc(var(--prisma--dimension--space) * 6);
}

.demo-grid {
  gap: calc(var(--prisma--dimension--space) * 1);
  margin-block-end: calc(var(--prisma--dimension--space) * 9);
  margin-inline: calc(var(--prisma--dimension--space) * -6);
  border-radius: var(--prisma--border--corner--large);
  grid-template-columns: repeat(6, 1fr);
  display: grid;
  overflow: hidden;
}

.demo-grid__item {
  aspect-ratio: 1;
}

.demo-header {
  justify-content: space-between;
  gap: calc(var(--prisma--dimension--space) * 12);
  align-items: center;
  display: flex;
}

.demo-header .start {
  flex: 1;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.demo-header .middle {
  justify-content: center;
  align-items: center;
  min-inline-size: 0;
  display: flex;
}

.demo-header .middle > * {
  flex: 1;
}

.demo-header .end {
  justify-content: flex-end;
  min-inline-size: max-content;
  display: flex;
}

.system-banner {
  min-block-size: 48px;
  padding: calc(var(--prisma--dimension--space) * 2)
    calc(var(--prisma--dimension--space) * 6);
  justify-content: center;
  align-items: center;
  gap: calc(var(--prisma--dimension--space) * 3);
  text-align: center;
  color: var(--prisma--color--content--neutral);
  background-color: var(--prisma--color--background--accent--noon);
  display: flex;
}