:root{color-scheme:dark;font-family:Arial,Helvetica,sans-serif;background:#101710;color:#f4f5e9}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:32px 20px;padding:max(32px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(32px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left))}
main{width:100%;max-width:850px}
h1{text-align:center;font-size:32px;letter-spacing:-1px;margin:0 0 28px}
h1 span{color:#c4f370}
nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:18px;row-gap:24px}
a{display:flex;flex-direction:column;align-items:center;gap:10px;min-width:0;color:#f4f5e9;font-size:14px;font-weight:700;line-height:1.35;text-align:center;text-decoration:none;overflow-wrap:break-word;border-radius:4px}
a img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border:1px solid #405033;border-radius:4px;background:#1b2619}
a span{display:flex;align-items:center;justify-content:center;min-height:28px;padding:0 4px}
a:hover{color:#c4f370}
a:hover img{border-color:#c4f370}
a:focus-visible{outline:3px solid #c4f370;outline-offset:5px}
@media(max-width:760px){nav{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:560px){nav{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:12px;row-gap:20px}h1{font-size:28px;margin-bottom:24px}a{font-size:13px;gap:8px}}
@media(max-width:300px){nav{grid-template-columns:1fr}}