:root { color-scheme: dark; }
* { box-sizing: border-box; }
body { margin: 0; background: #0b0e14; color: #d7dce2; font-family: system-ui, sans-serif; line-height: 1.5; }
header, section, footer { max-width: 1080px; margin: 0 auto; padding: 1rem 1.25rem; }
h1 { margin: 0; font-size: 2.4rem; letter-spacing: .18em; color: #ff5f4d; }
.tagline { color: #8b949e; margin-top: .25rem; }
h2 { font-size: 1.1rem; letter-spacing: .1em; text-transform: uppercase; color: #c9d1d9; }
a { color: #58a6ff; }
.charter { background: #141a24; border-left: 3px solid #ff5f4d; border-radius: 4px; }
#balance { color: #ffd166; }
.grid { display: grid; grid-template-columns: repeat(100, 1fr); gap: 2px; background: #10141c; border-radius: 6px; padding: 6px; }
.cell { display: block; aspect-ratio: 1; border-radius: 2px; }
.cell svg { display: block; width: 100%; height: 100%; }
.cell.empty { background: #1a2029; }
.latest { display: flex; flex-wrap: wrap; gap: 1rem; }
.tile-card { width: 150px; }
.tile-card .big svg { display: block; width: 100%; height: auto; border-radius: 6px; }
.tile-card p { font-size: .75rem; color: #8b949e; word-break: break-word; margin: .4rem 0; }
footer { color: #8b949e; text-align: center; padding-bottom: 2rem; font-style: italic; }
@media (max-width: 600px) { .grid { grid-template-columns: repeat(50, 1fr); } }