/* Load after navigation.css. Only navigation + top edge of hero. */
.page { position: relative; }
header.vn-header {
 --vn-bg: rgba(8, 15, 16, .48);
 background: var(--vn-bg);
 backdrop-filter: blur(16px);
 -webkit-backdrop-filter: blur(16px);
 border: 1px solid rgba(180, 218, 214, .10);
 border-radius: 16px;
 box-shadow: none;
 margin-top: 20px;
 margin-bottom: 20px;
}
/* Behind the top of the page: main's opaque fill was covering .page::before. */
.page::before { content: none; }
main::before {
 content: "";
 position: absolute;
 z-index: -1;
 left: 0; right: 0;
 top: -140px;
 height: 360px;
 background: radial-gradient(ellipse at 68% 45%, rgba(18, 62, 60, .22), transparent 72%);
 pointer-events: none;
}
/* Fade only the empty top edge: never increase this into the phone. */
.hero .scene-image {
 -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 5%, #000 86%, transparent 100%);
 mask-image: linear-gradient(to bottom, transparent 0%, #000 5%, #000 86%, transparent 100%);
}
@media (max-width: 760px) {
 header.vn-header { margin-top: 12px; margin-bottom: 12px; }
 .hero .scene-image {
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 5%, #000 82%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 5%, #000 82%, transparent);
 }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
 header.vn-header { background: rgba(8, 15, 16, .85); }
}