body { font-family: Arial, sans-serif; background:#0a0a0a; color:#eee; padding:20px; }
.year-section { margin-bottom:40px; }
.story-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap:20px; }
.story-card { background:#222; border-radius:10px; cursor:pointer; overflow:hidden; transition: transform 0.2s; }
.story-card:hover { transform: scale(1.05); }
.story-card img { width:100%; height:150px; object-fit:cover; }
.card-info { padding:10px; }
.card-info h3 { margin:0; font-size:16px; }
.badge { padding:3px 6px; border-radius:5px; font-size:12px; background:#555; color:#fff; }
.badge.community { background:#0b84ff; }
.badge.official { background:#ff9500; }

/* Modal */
#story-modal { position:fixed; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.9); display:flex; align-items:center; justify-content:center; z-index:9999; }
#story-modal.hidden { display:none; }
#story-content { background:#111; color:#fff; padding:20px; max-width:800px; max-height:90%; overflow:auto; border-radius:10px; position:relative; }
#close-modal { position:absolute; top:10px; right:20px; font-size:28px; cursor:pointer; }
#story-content img { max-width:100%; margin:10px 0; }
pre { white-space: pre-wrap; }