* { box-sizing: border-box; }
body {
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  max-width: 720px; margin: 0 auto; padding: 40px 20px;
  color: #2c3e50; line-height: 1.7; background: #fafafa;
}
h1 { border-bottom: 3px solid #3498db; padding-bottom: 12px; }
ul { list-style: none; padding: 0; }
li { padding: 14px 18px; margin: 8px 0; background: #fff;
     border-radius: 6px; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
li:hover { transform: translateX(4px); transition: .2s; }
a { color: #3498db; text-decoration: none; }
a:hover { text-decoration: underline; }
footer { margin-top: 50px; padding-top: 20px; border-top: 1px solid #ddd;
         font-size: 13px; color: #95a5a6; }