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

body {
  margin: 0;
  padding: 0;
  background: var(--color-bg-canvas);
  color: var(--color-text-primary);
  font-family: var(--ui-font-sans);
  -webkit-font-smoothing: antialiased;
}

.showcase-shell,
.showcase-shell button,
.showcase-shell input,
.showcase-shell select,
.showcase-shell textarea {
  font-family: var(--ui-font-sans);
}

.showcase-shell {
  width: 100%;
  display: grid;
  gap: 0.75rem;
}

/* -------------------------------------------------------
   Heading hierarchy
------------------------------------------------------- */
h1.showcase-title {
  margin: 0;
  font-size: var(--text-heading-xl-size);
  line-height: var(--text-heading-xl-line);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.showcase-shell h2 {
  margin: 0;
  color: var(--color-text-primary);
  font-size: var(--text-heading-md-size);
  line-height: var(--text-heading-md-line);
  font-weight: 600;
  letter-spacing: -0.005em;
}

.showcase-shell p,
.showcase-shell li {
  margin: 0;
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-line);
  color: var(--color-text-secondary);
}

/* -------------------------------------------------------
   Language filtering — show only the active matrix
------------------------------------------------------- */
html:not([lang="ar"]) .matrix[lang="ar"] { display: none; }
html[lang="ar"] .matrix:not([lang="ar"]) { display: none; }