.hero { text-align: center; padding: var(--sp-12) 0 var(--sp-8); }
.hero h1 { margin-bottom: var(--sp-2); }
.hero p  { color: var(--text-2); }

.search-area { position: relative; margin-bottom: var(--sp-6); }

.selected-display {
  text-align: center;
  padding: var(--sp-4) var(--sp-6);
  background: var(--accent-subtle);
  border: 1px solid var(--accent-muted);
  border-radius: var(--r-lg);
  margin-bottom: var(--sp-8);
  animation: fade-in 0.25s var(--ease-out);
}
.selected-label { font-size: var(--text-sm); color: var(--text-2); margin-right: var(--sp-2); }
.selected-value { font-weight: 500; color: var(--accent); }

.hint-section {
  text-align: center;
  padding: var(--sp-8) 0;
  border-top: 1px solid var(--border-0);
}
.hint-title { font-size: var(--text-sm); color: var(--text-3); margin-bottom: var(--sp-4); }
.hint-grid {
  display: flex; gap: var(--sp-6); justify-content: center; flex-wrap: wrap;
}
.hint-item {
  font-size: var(--text-sm);
  color: var(--text-2);
  display: flex; align-items: center; gap: var(--sp-2);
}
kbd {
  padding: 2px 6px;
  background: var(--bg-2);
  border: 1px solid var(--border-1);
  border-radius: var(--r-sm);
  font-family: var(--mono);
  font-size: var(--text-xs);
  color: var(--text-1);
}