:root {
  --bg: #0e101a; --fg: #ffffff; --muted: #bbbbcc; --accent: #ff5f5f; --accent2: 
  #ffb85f;
  --accent3: #5fff8f; --radius: 14px; --shadow: 0 8px 24px rgba(0,0,0,.25);
}
* { box-sizing: border-box; } body { margin:0; padding:0; font-family: 'Segoe UI', 
  system-ui, sans-serif; background: var(--bg); color: var(--fg);
}
a { color: var(--accent2); text-decoration: none; } a:hover { text-decoration: 
underline; } header {
  text-align: center; padding: 60px 20px 30px; background: linear-gradient(135deg, 
  var(--accent), var(--accent2)); color: #fff; box-shadow: var(--shadow);
}
header h1 { font-size: clamp(36px, 6vw, 58px); margin: 0;
}
header p { font-size: 18px; color: rgba(255,255,255,0.9);
}
main { padding: 40px 20px; max-width: 800px; margin: 0 auto;
}
.card { background: #161926; padding: 24px; border-radius: var(--radius); 
  box-shadow: var(--shadow); margin-bottom: 20px;
}
.card h2 { color: var(--accent3); margin-top:0;
}
.footer { padding: 20px; text-align:center; font-size: 14px; color: var(--muted); 
  border-top: 1px solid rgba(255,255,255,0.05); margin-top: 40px;
}
.fun { display: inline-block; background: var(--accent3); color: #000; padding: 
  4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700;
}