.site-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 0;
  filter: drop-shadow(0 0 8px rgba(var(--sm-accent-rgb, 84, 103, 158), 0.16));
}

.site-icon > svg,
.site-icon-svg {
  display: block;
  width: 100%;
  height: 100%;
}

.site-icon svg .site-icon-key-white {
  fill: var(--site-icon-key-white, #d4dfff);
}

.site-icon svg .site-icon-key-highlight {
  fill: var(--site-icon-key-highlight, #e1e5f1);
}

.site-icon svg .site-icon-key-black {
  fill: var(--site-icon-key-black, #2a344d);
}

.site-icon svg .site-icon-stroke {
  stroke: var(--site-icon-stroke, rgba(255, 255, 255, 0.35));
}

html.site-page .site-icon,
html.site-page .site-icon--subtle {
  filter: none;
}

.site-icon--subtle {
  opacity: 0.82;
}

.site-icon--spin {
  animation: site-icon-spin 1.4s linear infinite;
}

@keyframes site-icon-spin {
  to {
    transform: rotate(360deg);
  }
}

.brand-mark-icon {
  border-radius: 6px;
}

.editor-chrome .site-icon svg .site-icon-key-white {
  fill: var(--site-icon-key-white, var(--sm-text, #d4dfff));
}

.editor-chrome .site-icon svg .site-icon-key-highlight {
  fill: var(--site-icon-key-highlight, var(--sm-accent-light, #e1e5f1));
}

.editor-chrome .site-icon svg .site-icon-key-black {
  fill: var(--site-icon-key-black, var(--sm-accent-dark, #2a344d));
}

.editor-chrome .site-icon svg .site-icon-stroke {
  stroke: var(--site-icon-stroke, rgba(255, 255, 255, 0.35));
}

.sidenav-brand-icon {
  border-radius: 8px;
}

.site-page-header-icon,
.empty-state-icon {
  border-radius: 10px;
  width: 48px;
  height: 48px;
  opacity: 0.85;
}

.account-shell-icon {
  border-radius: 10px;
}

.site-footer-mark {
  display: inline-flex;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  margin: 2px 0 0;
  border-radius: 10px;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px 12px;
  text-align: center;
}

.empty-state-body {
  color: var(--sm-muted);
}

.account-shell-mark {
  display: flex;
  justify-content: center;
  margin-bottom: 12px;
}

.not-found-shell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: clamp(32px, 8vw, 64px) 16px;
  text-align: center;
}

.not-found-shell h1 {
  margin: 0;
  font-size: clamp(1.5rem, 4vw, 2rem);
}

.search-loading-mark {
  display: flex;
  justify-content: center;
  margin: 16px 0;
}