@import "./reset.css";
@import "./tokens.css";
@import "./base.css";
@import "./typography.css";
@import "./layout.css";
@import "./components.css";
@import "./utilities.css";


.welcome-screen {
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: var(--space-24);
}

.welcome-card {
  width: min(100%, 420px);
  text-align: center;
}

.welcome-card .hero-card {
  align-items: center;
}

.welcome-mark {
  display: grid;
  width: 72px;
  height: 72px;
  place-items: center;
  margin: 0 auto;
  border: 1px solid var(--border-glow);
  border-radius: var(--radius-pill);
  background: radial-gradient(circle, rgb(217 164 65 / 0.22), rgb(255 255 255 / 0.06));
  font-size: 2rem;
}

.placeholder-view {
  display: grid;
  gap: var(--space-24);
}

.placeholder-grid {
  display: grid;
  gap: var(--space-16);
  margin-top: var(--space-24);
}

.placeholder-card {
  padding: var(--space-24);
}

.placeholder-card h2 {
  margin-bottom: var(--space-8);
  font-size: var(--color-text-primarylg);
}

.placeholder-card p {
  color: var(--color-text-secondary);
}

@media (min-width: 768px) {
  .placeholder-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}