/* The interim mark stays paired with visible LMM or Local Model Manager text. */
.icon-preview-page { max-width: 960px; margin-inline: auto; padding: 32px; }
.icon-preview-page h1 { margin-block-end: 12px; }
.icon-preview-page h2 { margin-block: 32px 8px; }
.icon-preview-page p { margin-block: 12px; color: var(--color-secondary); }
.brand-mark {
  display: block;
  inline-size: 22px;
  block-size: 22px;
  flex: none;
  object-fit: contain;
}

.brand-mark--large {
  inline-size: 38px;
  block-size: 38px;
}

/* Development fixture for favicon and brand scale checks. */
.icon-preview {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-block: 16px 32px;
}

.icon-preview__sample {
  display: flex;
  min-block-size: 112px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 1px solid #d2d2d7;
  border-radius: 14px;
  color: #1d1d1f;
  background: #f5f5f7;
  font-size: 12px;
}

.icon-preview__sample--dark {
  border-color: #636366;
  color: #f5f7fa;
  background: #181a1e;
}

.icon-preview__mark {
  display: block;
  object-fit: contain;
}

.icon-preview__mark--16 { inline-size: 16px; block-size: 16px; }
.icon-preview__mark--22 { inline-size: 22px; block-size: 22px; }
.icon-preview__mark--32 { inline-size: 32px; block-size: 32px; }
.icon-preview__mark--38 { inline-size: 38px; block-size: 38px; }

@media (max-width: 600px) {
  .icon-preview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}