.md3-integration-banner {
  margin:16px;
  padding:16px;
  min-width:0;
  border-radius:var(--md-sys-shape-corner-medium);
  background:var(--md-sys-color-error-container);
  color:var(--md-sys-color-on-error-container);
  font-size:var(--md-sys-typescale-body-medium-size);
  line-height:var(--md-sys-typescale-body-medium-line-height);
  overflow-wrap:anywhere;
}
.md3-integration-banner[hidden] { display:none; }
.md3-integration-banner p { margin:0 0 8px; }
.md3-integration-link {
  display:inline-flex;
  align-items:center;
  min-height:48px;
  min-width:48px;
  color:inherit;
  border-radius:var(--md-sys-shape-corner-full);
}
.md3-integration-link:focus-visible {
  outline:2px solid var(--md-sys-color-primary);
  outline-offset:4px;
}
.md3-integration-link:hover {
  background:color-mix(in srgb, var(--md-sys-color-on-error-container) calc(var(--md-sys-state-hover-opacity) * 100%), transparent);
}
.md3-integration-link:active {
  background:color-mix(in srgb, var(--md-sys-color-on-error-container) calc(var(--md-sys-state-pressed-opacity) * 100%), transparent);
}
.md3-integration-health {
  min-width:0;
  padding:16px;
  border-radius:var(--md-sys-shape-corner-medium);
  background:var(--md-sys-color-surface-container-low);
  color:var(--md-sys-color-on-surface);
  font-size:var(--md-sys-typescale-body-medium-size);
  line-height:var(--md-sys-typescale-body-medium-line-height);
  overflow-wrap:anywhere;
  scroll-margin-top:80px;
}
.md3-integration-health .md3-button { min-height:48px; min-width:48px; }
.md3-integration-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:12px; margin-top:16px; }
.md3-integration-item { min-width:0; padding:16px; border-radius:var(--md-sys-shape-corner-medium); background:var(--md-sys-color-surface-container); }
.md3-integration-item[data-health="outage"] { background:var(--md-sys-color-error-container); color:var(--md-sys-color-on-error-container); }
.md3-integration-health h2 { font-size:var(--md-sys-typescale-title-large-size); }
.md3-integration-health h3 { font-size:var(--md-sys-typescale-title-medium-size); }
.md3-integration-health h4 { font-size:var(--md-sys-typescale-title-small-size); }
.md3-integration-health ul { padding-inline-start:20px; }
.md3-integration-health li { margin-bottom:8px; }
@media (min-width:600px) {
  .md3-integration-banner { margin:16px 24px; }
  .md3-integration-health { padding:24px; }
}
@media (min-width:840px) {
  .md3-integration-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}