:root {
  --a-1: #8b5cf6;
  --a-2: #6366f1;
  --a-3: #3b82f6;
  --a-4: #0ea5e9;
  --a-5: #06b6d4;

  --b-1: #f472b6;
  --b-2: #ec4899;
  --b-3: #db2777;
  --b-4: #be185d;
  --b-5: #9d174d;
}

body {
  margin: 0;
  font-family: sans-serif;
}

.landing {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  gap: 1rem;
}

#sidebar {
  display: none;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  background: #f0f0f0;
  padding: 1rem;
  height: 100vh;
  width: 200px;
}

#sidebar.show {
  display: flex;
}

#sidebar button.active {
  font-weight: bold;
  background: #ccc;
}

.page {
  display: none;
  padding: 2rem;
}

.page.active {
  display: block;
}

.grid {
  display: grid;
  gap: 1rem;
}

.home-grid {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

.works-grid {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.card {
  background: white;
  border: 1px solid #ddd;
  padding: 1rem;
  border-radius: 8px;
  box-shadow: 2px 2px 6px rgba(0,0,0,0.1);
}

.dl-btn {
  margin-top: 0.5rem;
  padding: 0.5rem 1rem;
}

.theme-a-1 { color: #8b5cf6; }
.theme-a-2 { color: #6366f1; }
.theme-a-3 { color: #3b82f6; }
.theme-a-4 { color: #0ea5e9; }
.theme-a-5 { color: #06b6d4; }

.theme-b-1 { color: #f472b6; }
.theme-b-2 { color: #ec4899; }
.theme-b-3 { color: #db2777; }
.theme-b-4 { color: #be185d; }
.theme-b-5 { color: #9d174d; }