:root {
  --primary: #ffb703;
  --background: #0f172a;
  --text: #f8fafc;
  --accent: #ffb703;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, sans-serif; background: var(--background); color: var(--text); line-height: 1.6; }
.site-header { display: flex; justify-content: space-between; align-items: center; padding: 1rem 2rem; border-bottom: 1px solid rgba(128,128,128,.2); }
.site-header .brand { font-weight: 700; font-size: 1.25rem; color: var(--primary); text-decoration: none; }
.site-header nav a { margin-left: 1rem; color: var(--text); text-decoration: none; }
main { max-width: 960px; margin: 0 auto; padding: 2rem; }
.hero h1 { color: var(--primary); }
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; margin: 1rem 0; }
.card { display: block; padding: 1rem; border: 1px solid rgba(128,128,128,.25); border-radius: 8px; text-decoration: none; color: var(--text); }
.card:hover { border-color: var(--accent); }
article h1 { color: var(--primary); }
.featured-summary { border-collapse: collapse; margin: 1rem 0; }
.featured-summary td { border: 1px solid rgba(128,128,128,.25); padding: .5rem 1rem; }
.site-footer { text-align: center; padding: 2rem; opacity: .7; font-size: .875rem; }

.container {
  background: #0f172a;
  color: #f8fafc;
  border-radius: 16px;
  box-shadow: 0 10px 25px -5px rgba(255, 183, 3, 0.15);
  border: 1px solid rgba(255, 183, 3, 0.2);
}
.button {
  background: linear-gradient(135deg, #ffb703, #fb8500);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(255, 183, 3, 0.3);
  transition: transform 0.2s;
}
.button:hover {
  transform: translateY(-2px);
}