.view.active {
  animation: roamavia-page-in .36s cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes roamavia-page-in {
  from { opacity: 0; transform: translateY(7px) scale(.995); }
  to { opacity: 1; transform: none; }
}

nav.tabbar button {
  transition: color .38s ease, background .42s cubic-bezier(.22, 1, .36, 1), box-shadow .42s ease, transform .28s ease;
}

nav.tabbar button svg {
  transition: transform .42s cubic-bezier(.22, 1, .36, 1), stroke-width .38s ease;
}

nav.tabbar button:active { transform: scale(.94); }
nav.tabbar button.active svg { transform: translateY(-1px) scale(1.09); }

.whats-new-button { display:flex; align-items:center; justify-content:center; gap:7px; }
.whats-new-card { padding-top:28px; }
.whats-new-mark {
  width:58px;
  height:58px;
  display:grid;
  place-items:center;
  margin-bottom:18px;
  border-radius:20px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--cyan) 28%,var(--card)),color-mix(in srgb,var(--purple) 28%,var(--card)));
  box-shadow:0 12px 30px color-mix(in srgb,var(--purple) 18%,transparent);
  font-size:28px;
}
.whats-new-card>h2 { margin-bottom:6px; }
.whats-new-list { display:grid; gap:10px; margin:22px 0 8px; }
.whats-new-list article {
  display:flex;
  align-items:center;
  gap:13px;
  padding:15px;
  border:1px solid var(--line);
  border-radius:18px;
  background:color-mix(in srgb,var(--card) 82%,var(--field));
}
.whats-new-list article>span {
  width:38px;
  height:38px;
  flex:0 0 38px;
  display:grid;
  place-items:center;
  border-radius:13px;
  background:var(--field);
  font-size:20px;
}
.whats-new-list article>div { display:grid; gap:3px; }
.whats-new-list small { color:var(--muted); line-height:1.35; }

@media (prefers-reduced-motion: reduce) {
  .view.active { animation:none; }
  nav.tabbar button, nav.tabbar button svg { transition-duration:.01ms; }
}