.home-body {
  background: linear-gradient(180deg, #f3f3f3 0%, var(--ui-color-surface) 38%);
}

.home-shell {
  min-height: 100vh;
}

.home-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.home-page {
  display: grid;
  gap: 20px;
  max-width: 1080px;
  margin: 0 auto;
  padding: 24px 16px 40px;
}

.home-hero h1 {
  margin: 0 0 8px;
  font-size: clamp(1.75rem, 3vw, 2.25rem);
}

.home-lead {
  max-width: 42rem;
  margin: 0;
}

.home-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.home-card .ui-panel__body {
  display: grid;
  gap: 12px;
  height: 100%;
  align-content: start;
  padding-top: var(--ui-space-5);
}

.home-notes .ui-panel__body {
  padding-top: var(--ui-space-5);
}

.home-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 999px;
  background: var(--ui-color-surface-muted);
}

.home-card__icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

.home-card h2 {
  margin: 0;
  font-size: 1.15rem;
}

.home-card p {
  margin: 0;
  flex: 1;
}

.home-code-list {
  margin: 0;
  padding-left: 1.1rem;
  display: grid;
  gap: 6px;
}

.home-footnote {
  margin: 16px 0 0;
  font-size: 0.9rem;
}

@media (max-width: 900px) {
  .home-grid {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 901px) and (max-width: 1100px) {
  .home-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}