CSS examples.

.hero {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

.btn {
  background: #EAB308;
  transition: transform 0.2s ease;
}
.btn:hover { transform: translateY(-2px); }

:root {
  --accent: #10B981;
  --bg: #0a0a0a;
}
h1 { color: var(--accent); }
body { background: var(--bg); }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
.card { animation: fadeUp 0.5s ease-out; }

@media (max-width: 640px) {
  .container { padding: 1rem; }
  .grid { grid-template-columns: 1fr; }
}

.card {
  box-shadow: 0 12px 32px rgba(234, 179, 8, 0.2);
  border-radius: 8px;
}

.hero {
  background: linear-gradient(135deg, #10B981, #EAB308);
}

.navbar { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(10px); }

.panel {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

a:hover { color: #EAB308; }
input:focus { outline: 2px solid #10B981; }
button:active { transform: translateY(1px); }

.badge::before {
  content: '★';
  margin-right: 4px;
  color: gold;
}

.list li:nth-child(odd)  { background: #111; }
.list li:nth-child(even) { background: #1a1a1a; }

.video { aspect-ratio: 16 / 9; width: 100%; background: #000; }

.one-line {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.carousel {
  scroll-snap-type: x mandatory;
  overflow-x: auto;
  display: flex;
}
.slide { scroll-snap-align: center; flex: 0 0 100%; }

*::-webkit-scrollbar { width: 8px; }
*::-webkit-scrollbar-thumb { background: #eab308; border-radius: 4px; }

@media (prefers-color-scheme: dark) {
  body { background: #0a0a0a; color: #f1f5f9; }
}

.icon:hover { transform: rotate(180deg) scale(1.2); transition: 0.3s; }

@container (min-width: 600px) {
  .card { display: grid; grid-template-columns: 1fr 2fr; }
}