* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: #0d0d0d;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  font-family: monospace;
}

.container {
  display: flex;
  gap: 1.5rem;
}

.card {
  width: 120px;
  height: 140px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  cursor: pointer;
  transition: border-color 0.3s, background 0.3s;
}

.card:hover {
  border-color: rgba(255,255,255,0.4);
  background: rgba(255,255,255,0.04);
}

.dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #333;
  transition: background 0.4s, transform 0.4s;
}

.card:hover .dot {
  background: #e8e8e8;
  transform: scale(1.2);
}

p {
  color: rgba(255,255,255,0.3);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  transition: color 0.3s;
}

.card:hover p {
  color: rgba(255,255,255,0.7);
}