:root {
  font-family: Arial, Helvetica, sans-serif;
  color: #233e33;
  background: #f4f2e9;
  font-synthesis: none;
}

* { box-sizing: border-box; }
body { margin: 0; }
a { color: inherit; }
a:focus-visible { outline: 2px solid #506b47; outline-offset: 7px; }

.home {
  width: min(740px, calc(100% - 40px));
  min-height: 100vh;
  min-height: 100svh;
  margin: auto;
  padding: 72px 0 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

h1 {
  margin: 0 0 56px;
  font-size: 30px;
  line-height: 1.2;
  letter-spacing: -1px;
  font-weight: 500;
}

.apps {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.app {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-decoration: none;
  border-radius: 12px;
}

.app-icon {
  width: 92px;
  height: 92px;
  display: grid;
  place-items: center;
  border-radius: 22px;
  margin-bottom: 17px;
  transition: transform .18s, background-color .18s;
}

.app-icon svg { width: 45px; height: 45px; }
.shortstop { color: #e5efab; background: #193f34; }
.block { color: #856449; background: #e9e1d4; }
.family { color: #62745b; background: #e1e7d9; }
.enamel { color: #9b6038; background: #eee0cf; }
.app-name { font-size: 14px; line-height: 1.5; }
.app-status { margin-top: 5px; color: #6d746a; font-size: 11px; line-height: 1.5; }
a.app:hover .app-icon { transform: translateY(-3px); background: #285344; }
a.app:hover .block { background: #dfd1bd; }
a.app:hover .enamel { background: #e5cdb3; }

.not-found h1 { margin-bottom: 24px; }
.not-found a { font-size: 14px; text-underline-offset: 4px; }

@media (max-width: 600px) {
  .apps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }
}

@media (max-width: 480px) {
  .home { padding-block: 48px 80px; }
  h1 { font-size: 27px; margin-bottom: 44px; }
  .apps { column-gap: 12px; }
  .app-icon { width: 72px; height: 72px; border-radius: 18px; }
  .app-icon svg { width: 36px; height: 36px; }
  .app-name { font-size: 13px; }
  .app-status { font-size: 10px; }
}

@media (max-width: 320px) {
  .apps { column-gap: 6px; }
  .app-icon { width: 62px; height: 62px; }
  .app-name { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .app-icon { transition: none; }
  a.app:hover .app-icon { transform: none; }
}