body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.6; color: #2b2f33; max-width: 800px; margin: 0 auto; padding: 20px; background: #eceef0; }
.container { background: #fff; padding: 40px; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,.08); }
h1 { color: #16181b; border-bottom: 2px solid #c9a45c; padding-bottom: 10px; text-align: center; }
h2 { color: #3a4046; margin-top: 30px; }
a { color: #8a6a2c; }
.update-date, .subtitle { text-align: center; font-size: .9em; color: #6b737a; margin-bottom: 30px; }
.callout { background: #f6f1e6; border-left: 4px solid #c9a45c; padding: 16px 20px; border-radius: 6px; margin: 24px 0; }
ul { padding-left: 20px; } li { margin-bottom: 10px; }
.card-grid { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; margin-top: 30px; }
.card { display: block; background: #f7f8f9; border: 2px solid #dfe2e5; border-radius: 12px; padding: 30px 24px;
  width: 220px; text-decoration: none; color: #16181b; text-align: center; }
.card:hover { border-color: #c9a45c; }
.card-title { font-weight: 700; margin-bottom: 6px; } .card-desc { font-size: .82em; color: #6b737a; }
.footer { margin-top: 50px; text-align: center; font-size: .9em; color: #9aa1a8; }
@media (max-width: 600px) { .container { padding: 20px; } .card { width: 100%; } }