:root {
  color-scheme: dark;
  font-family: "Yu Gothic", "Meiryo", system-ui, sans-serif;
  background: #0d211c;
  color: #f6efe0;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    linear-gradient(135deg, rgba(37, 108, 89, 0.22), transparent 38%),
    radial-gradient(circle at 80% 18%, rgba(196, 52, 72, 0.16), transparent 32%),
    #0d211c;
}

.page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 32px 18px;
}

.hero {
  width: min(720px, 100%);
}

.eyebrow {
  margin: 0 0 12px;
  color: #d9b86f;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

h1 {
  margin: 0;
  font-size: clamp(3rem, 12vw, 6rem);
  line-height: 1;
  letter-spacing: 0;
}

.lead {
  margin: 18px 0 34px;
  color: #d9d0bd;
  font-size: 1.08rem;
  line-height: 1.8;
}

.links {
  display: grid;
  gap: 14px;
}

.app-link {
  display: grid;
  gap: 8px;
  padding: 18px 20px;
  border: 1px solid rgba(217, 184, 111, 0.42);
  border-radius: 8px;
  color: inherit;
  text-decoration: none;
  background: rgba(246, 239, 224, 0.08);
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.app-link:hover,
.app-link:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(217, 184, 111, 0.8);
  background: rgba(246, 239, 224, 0.13);
  outline: none;
}

.app-name {
  font-size: 1.35rem;
  font-weight: 800;
}

.app-desc {
  color: #d9d0bd;
  line-height: 1.6;
}