:root {
  color-scheme: light;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #283d32;
  background: #f4f1e9;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; display: flex; flex-direction: column; }
a { color: inherit; text-decoration: none; }
main { flex: 1; display: grid; place-items: center; padding: 48px 24px; }
.apps { display: grid; grid-template-columns: repeat(2, minmax(0, 220px)); justify-content: center; gap: 30px; width: 100%; margin: 0; }
.app { display: flex; flex-direction: column; align-items: center; border-radius: 24px; padding: 10px 4px 16px; }
.icon-tile { width: 132px; height: 132px; display: grid; place-items: center; border-radius: 32px; box-shadow: 0 10px 20px #283d3210, inset 0 0 0 1px #ffffff80; transition: transform .18s ease, box-shadow .18s ease; }
.rewards { background: #e8e7db; }
.learning { background: #e0e6ee; }
.app:hover .icon-tile { transform: translateY(-5px) rotate(-2deg); box-shadow: 0 16px 24px #283d321c; }
.app:active .icon-tile { transform: scale(.96); }
a:focus-visible { outline: 3px solid #2f5bd3; outline-offset: 6px; }
.app-name { font-size: 17px; font-weight: 650; letter-spacing: -.4px; margin-top: 21px; }
@media (max-width: 540px) {
  main { padding: 40px 20px; }
  .apps { gap: 12px; }
  .icon-tile { width: 112px; height: 112px; border-radius: 28px; }
  .icon-tile img { width: 88px; height: 88px; }
  .app-name { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .icon-tile { transition: none; }
}