:root {
  --ink: #142e42;
  --paper: #f2f0e5;
  --accent: #e25b36;
  --line: rgba(20, 46, 66, 0.2);
  font-family: Arial, Helvetica, sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}
a,
button,
summary {
  -webkit-tap-highlight-color: transparent;
}
button:focus-visible,
a:focus-visible,
summary:focus-visible {
  outline: 3px solid #e5683f;
  outline-offset: 6px;
}
header {
  height: 92px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4.5%;
  position: absolute;
  inset: 0 0 auto;
  z-index: 20;
  gap: 24px;
}
.brand {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -1.2px;
  white-space: nowrap;
}
.brand span {
  font-size: 11px;
  vertical-align: top;
  margin-left: 4px;
}
.eyebrow {
  font:
    11px/1.6 "Courier New",
    monospace;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}
.lab-back {
  margin-left: auto;
  font-size: 12px;
}
.motion-toggle {
  font-size: 11px;
  border: 1px solid currentColor;
  border-radius: 30px;
  padding: 10px 15px;
  background: transparent;
  min-height: 40px;
}
h1,
h2,
p {
  margin: 0;
}
h1,
h2 {
  font-weight: 900;
  letter-spacing: -0.065em;
  line-height: 0.92;
}
h2 {
  font-size: clamp(42px, 5.7vw, 88px);
}
em {
  font-style: normal;
}
.action {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  background: var(--ink);
  color: var(--paper);
  padding: 18px 24px;
  border-radius: 3px;
  border: 0;
  min-height: 54px;
  font-size: 14px;
  font-weight: 600;
}
.action span {
  font-size: 20px;
}
.action:hover {
  background: var(--accent);
  color: #fff;
}
.mountain {
  position: absolute;
  overflow: hidden;
}
.mountain canvas {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.4s;
}
.webgl-ready .fallback {
  opacity: 0;
}
.static-mode .fallback {
  opacity: 1;
}
.static-mode canvas {
  display: none;
}
.phone {
  background: #102432;
  border: 7px solid #102432;
  box-shadow: 0 24px 65px #0a26363b;
  border-radius: 38px;
  overflow: hidden;
  width: 300px;
  aspect-ratio: 496/1078;
  position: relative;
}
.phone img,
.phone video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.proof {
  position: relative;
  min-height: 100svh;
  padding: 95px 8%;
  display: grid;
  grid-template-columns: 1fr 340px 0.42fr;
  gap: 5%;
  align-items: center;
  background: var(--paper);
  color: var(--ink);
}
.proof-copy {
  max-width: 470px;
}
.proof-copy > .eyebrow {
  margin-bottom: 26px;
}
.proof-copy > p:not(.eyebrow) {
  font-size: 17px;
  line-height: 1.65;
  margin: 24px 0;
}
.proof-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font:
    11px "Courier New",
    monospace;
  padding: 0 0 30px;
}
.proof-facts span + span:before {
  content: " / ";
  padding-right: 12px;
  color: var(--accent);
}
.proof-copy .capture-note {
  font-size: 11px !important;
  line-height: 1.6 !important;
  opacity: 0.7;
  max-width: 340px;
}
.film-wrap {
  justify-self: center;
}
.film-caption {
  display: block;
  text-align: center;
  margin-top: 20px;
  font-size: 9px;
}
.app-glimpse {
  margin: 0;
  align-self: end;
  padding-bottom: 50px;
  transform: rotate(6deg);
}
.app-glimpse img {
  width: 100%;
  border: 4px solid var(--ink);
  border-radius: 18px;
  box-shadow: 0 18px 40px #0b293325;
}
.app-glimpse figcaption {
  font:
    10px/1.5 "Courier New",
    monospace;
  margin-top: 14px;
}
details {
  font-size: 12px;
  max-width: 380px;
}
summary {
  cursor: pointer;
  min-height: 32px;
}
details p {
  line-height: 1.6;
  padding-top: 8px;
}
footer {
  display: flex;
  justify-content: space-between;
  padding: 30px 4.5%;
  border-top: 1px solid var(--line);
  font:
    11px/1.5 "Courier New",
    monospace;
  gap: 20px;
}
footer a {
  min-height: 30px;
}
.light {
  background: #172d42;
}
.light header {
  color: #fff5de;
}
.journey {
  height: 180svh;
  position: relative;
}
.stage {
  height: 100svh;
  position: sticky;
  top: 0;
  overflow: hidden;
  background: #163a58;
}
.sky {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    #183449 0%,
    #718c9c 33%,
    #e4c6ab 67%,
    #eee4cf 100%
  );
}
.sun {
  position: absolute;
  width: 17vw;
  height: 17vw;
  border-radius: 50%;
  background: #fff0c2;
  top: 28%;
  left: 57%;
  box-shadow: 0 0 100px 40px #f8dbb743;
  opacity: 0.85;
}
.hero-title {
  position: absolute;
  top: 18%;
  left: 7%;
  z-index: 2;
  color: #fff6e0;
}
.hero-title .eyebrow {
  margin: 0 0 18px 5px;
}
.hero-title h1 {
  font-size: clamp(85px, 12.8vw, 210px);
  letter-spacing: -0.075em;
  line-height: 0.8;
}
.hero-title h1 em {
  margin-left: 10vw;
}
.light .mountain {
  inset: 29% -12% -13%;
  z-index: 3;
}
.hero-bottom {
  position: absolute;
  bottom: 6%;
  left: 6%;
  right: 6%;
  z-index: 6;
  color: white;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 30px;
}
.hero-bottom p {
  font-size: 18px;
  line-height: 1.4;
  max-width: 280px;
  text-shadow: 0 1px 8px #122f42;
}
.hero-bottom .action {
  background: #f5efd9;
  color: var(--ink);
}
.hero-bottom > .eyebrow {
  font-size: 10px;
  text-shadow: 0 1px 8px #122f42;
}
.terrain-caption {
  position: absolute;
  right: 3%;
  top: 49%;
  z-index: 5;
  color: #fff;
  writing-mode: vertical-rl;
  font-size: 9px;
  text-shadow: 0 1px 4px #142e42;
}
.snow {
  position: absolute;
  z-index: 4;
  inset: 30% 0 0;
  pointer-events: none;
  opacity: 0.25;
  background-image:
    radial-gradient(2px 1px at 10% 40%, #fff 50%, transparent),
    radial-gradient(1px 1px at 60% 10%, #fff 50%, transparent),
    radial-gradient(3px 1px at 30% 80%, #fff 50%, transparent);
  background-size: 230px 210px;
  animation: wind 20s linear infinite;
}
.resolve-copy {
  position: absolute;
  left: 9%;
  top: 36%;
  color: #fff2d9;
  z-index: 7;
  opacity: 0;
}
.resolve-copy .eyebrow {
  margin-bottom: 26px;
}
.resolve-copy h2 {
  font-size: 6vw;
}
.resolve-copy em {
  color: #ffbf89;
}
.resolve-phone {
  position: absolute;
  right: 17%;
  top: 19%;
  height: 70%;
  width: auto;
  opacity: 0;
  z-index: 6;
  transform: translateY(50px);
}
.light .proof {
  background: #f0efe7;
}
.observatory {
  background: #e6edf0;
}
.observatory-hero {
  min-height: 100svh;
  position: relative;
  padding: 154px 6% 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}
.observatory-heading {
  position: relative;
  z-index: 4;
  pointer-events: none;
}
.observatory-heading a {
  pointer-events: auto;
}
.observatory-heading .eyebrow {
  margin-bottom: 24px;
}
.observatory-heading h1 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(54px, 6vw, 94px);
  font-weight: 400;
  letter-spacing: -0.07em;
  line-height: 1.02;
}
.lede {
  font-size: 17px;
  line-height: 1.5;
  margin: 24px 0;
}
.specimen {
  position: absolute;
  inset: 15% -7% 8% 29%;
}
.specimen .mountain {
  inset: 0;
}
.specimen .fallback {
  object-fit: contain;
  mix-blend-mode: multiply;
}
.orbit-ring {
  position: absolute;
  border: 1px solid #173c502b;
  border-radius: 50%;
  width: 90%;
  height: 40%;
  left: 5%;
  top: 45%;
  transform: rotate(-17deg);
}
.ring-two {
  width: 70%;
  left: 15%;
  height: 33%;
  top: 48%;
}
.coordinate {
  font:
    10px/1.5 "Courier New",
    monospace;
  position: absolute;
  z-index: 4;
}
.coord-a {
  right: 16%;
  top: 12%;
}
.coord-b {
  left: 15%;
  bottom: 18%;
}
.specimen-label {
  position: absolute;
  right: 17%;
  bottom: 19%;
  font:
    9px "Courier New",
    monospace;
  letter-spacing: 2px;
}
.view-console {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-top: 130px;
}
.view-buttons {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}
.view-buttons button {
  border: 1px solid #18344845;
  background: #eaf0f2cf;
  padding: 14px;
  min-height: 52px;
  font:
    11px "Courier New",
    monospace;
  border-radius: 4px;
}
.view-buttons button span {
  font: 12px Arial;
  margin-left: 10px;
}
.view-buttons button[aria-pressed="true"] {
  background: var(--ink);
  color: #fff;
}
.view-description {
  max-width: 220px;
  font-size: 13px;
  line-height: 1.5;
}
.text-link {
  font-size: 12px;
  padding: 16px 0;
  border-bottom: 1px solid var(--ink);
}
.observatory .proof {
  background: #173546;
  color: #eff1e7;
}
.observatory .proof .action {
  background: #e6bd82;
  color: #122e40;
}
.observatory .proof h2 {
  font-family: Georgia, serif;
  font-weight: 400;
  letter-spacing: -0.06em;
}
.poster {
  background: #f2eedf;
}
.poster-hero {
  height: 105svh;
  min-height: 780px;
  position: relative;
  margin: 0 2%;
  border-left: 1px solid #172f4120;
  border-right: 1px solid #172f4120;
  overflow: hidden;
  padding: 116px 4% 0;
}
.poster-kicker {
  display: flex;
  justify-content: space-between;
  font:
    11px "Courier New",
    monospace;
  letter-spacing: 3px;
  position: relative;
  z-index: 4;
}
.poster-hero h1 {
  font-family: Impact, "Arial Narrow", Arial, sans-serif;
  font-stretch: condensed;
  font-size: clamp(150px, 22vw, 350px);
  font-weight: 900;
  line-height: 0.78;
  letter-spacing: -0.045em;
  position: relative;
  z-index: 1;
  margin-top: 38px;
  transform: scaleX(1.08);
  transform-origin: left;
}
.poster-hero h1 span {
  display: block;
}
.poster-hero h1 span:last-child {
  margin-left: 24%;
}
.poster-disc {
  position: absolute;
  width: 31vw;
  height: 31vw;
  border-radius: 50%;
  background: var(--accent);
  top: 23%;
  right: 8%;
  z-index: 0;
}
.poster .mountain {
  z-index: 2;
  inset: 18% -8% 9% -8%;
  filter: drop-shadow(22px 40px 17px #132a3d38);
}
.poster .mountain .fallback {
  object-fit: contain;
  mix-blend-mode: multiply;
}
.poster-stamp {
  z-index: 3;
  position: absolute;
  left: 5%;
  bottom: 23%;
  font-weight: 900;
  font-size: 21px;
  line-height: 0.9;
  transform: rotate(-10deg);
  border: 2px solid var(--ink);
  border-radius: 50%;
  width: 135px;
  height: 135px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #f2eedf;
}
.poster-stamp span {
  font:
    9px "Courier New",
    monospace;
  margin-top: 8px;
}
.poster-footer {
  position: absolute;
  bottom: 5%;
  left: 4%;
  right: 4%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  z-index: 6;
}
.poster-footer p {
  font-size: 20px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.6px;
}
.lift-button {
  border: 0;
  border-bottom: 1px solid var(--ink);
  background: transparent;
  padding: 15px 2px;
  font-size: 13px;
}
.lift-button span {
  font-size: 22px;
  margin-left: 14px;
}
.poster .proof {
  background: #df5938;
  color: #142e42;
}
.poster .proof h2 {
  font-family: Impact, "Arial Narrow", Arial, sans-serif;
  font-size: 6.5vw;
  line-height: 0.87;
  letter-spacing: -0.025em;
}
.poster .proof-facts span + span:before {
  color: #fff;
}
.comparison {
  padding: 150px 5% 60px;
}
.comparison h1 {
  font-size: clamp(64px, 8vw, 120px);
  margin: 24px 0;
}
.intro {
  font-size: 20px;
  line-height: 1.5;
}
.concept-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 70px;
}
.concept-card {
  border-top: 1px solid var(--ink);
  padding-top: 20px;
}
.concept-card > span {
  font:
    11px "Courier New",
    monospace;
  text-transform: uppercase;
  letter-spacing: 2px;
}
.card-art {
  height: 270px;
  margin: 24px 0;
  position: relative;
  overflow: hidden;
  background: #becdd3;
}
.card-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s;
}
.concept-card:hover img {
  transform: scale(1.06);
}
.concept-card h2 {
  font-size: 26px;
  letter-spacing: -1px;
}
.concept-card p {
  font-size: 14px;
  line-height: 1.6;
  margin-top: 16px;
}
.card-a .card-art {
  background: #eeb783;
}
.card-a img {
  mix-blend-mode: luminosity;
}
.card-b .card-art {
  background: #173546;
}
.card-b img {
  width: 90%;
  height: 80%;
  position: absolute;
  top: 10%;
  left: 5%;
  object-fit: contain;
}
.card-c .card-art {
  background: #e05c39;
}
.card-c b {
  position: absolute;
  font-size: 75px;
  line-height: 0.9;
  z-index: 2;
  letter-spacing: -5px;
  top: 15px;
  left: 15px;
}
.card-c img {
  opacity: 0.65;
}
.lab-note {
  max-width: 690px;
  font:
    12px/1.7 "Courier New",
    monospace;
  margin-top: 50px;
  opacity: 0.7;
}
.paused .snow {
  animation-play-state: paused;
}
@keyframes wind {
  to {
    background-position: 460px 210px;
  }
}
@media (min-width: 1700px) {
  .proof {
    padding-left: 15%;
    padding-right: 15%;
  }
  .phone {
    width: 340px;
  }
}
@media (max-width: 760px) {
  header {
    height: 76px;
    padding: 0 6%;
    gap: 12px;
  }
  .brand {
    font-size: 18px;
  }
  .lab-back {
    font-size: 10px;
  }
  .motion-toggle {
    font-size: 0;
    padding: 10px;
    min-width: 40px;
  }
  .motion-toggle:before {
    content: "Ⅱ";
    font-size: 14px;
  }
  .motion-toggle[aria-pressed="true"]:before {
    content: "▶";
  }
  .index header > .eyebrow {
    display: none;
  }
  .eyebrow {
    font-size: 10px;
    letter-spacing: 1.4px;
  }
  .hero-title {
    top: 20%;
    left: 6%;
  }
  .hero-title .eyebrow {
    font-size: 9px;
    margin-left: 2px;
  }
  .hero-title h1 {
    font-size: 18vw;
    line-height: 0.88;
  }
  .hero-title h1 em {
    margin-left: 2vw;
  }
  .sun {
    width: 35vw;
    height: 35vw;
    left: 56%;
    top: 34%;
  }
  .light .mountain {
    inset: 33% -70% -2%;
  }
  .hero-bottom {
    left: 7%;
    right: 7%;
    bottom: 5%;
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .hero-bottom p {
    font-size: 16px;
    line-height: 1.4;
  }
  .hero-bottom .action {
    width: max-content;
    font-size: 12px;
    min-height: 50px;
    padding: 15px 18px;
  }
  .hero-bottom > .eyebrow {
    display: none;
  }
  .terrain-caption {
    right: 4%;
    top: 47%;
    font-size: 8px;
  }
  .journey {
    height: 170svh;
  }
  .resolve-copy {
    left: 7%;
    top: 16%;
    right: 7%;
    text-align: center;
  }
  .resolve-copy .eyebrow {
    font-size: 9px;
    margin-bottom: 14px;
  }
  .resolve-copy h2 {
    font-size: 11vw;
    line-height: 0.92;
  }
  .resolve-copy h2 br:nth-child(2) {
    display: none;
  }
  .resolve-phone {
    height: 49%;
    top: 43%;
    right: 50%;
    margin-right: -23%;
    width: 46%;
    border-width: 5px;
    border-radius: 25px;
    aspect-ratio: 496/1078;
  }
  .proof {
    padding: 70px 7%;
    grid-template-columns: 1fr;
    gap: 38px;
    min-height: auto;
  }
  .proof-copy {
    max-width: 100%;
  }
  .proof-copy > .eyebrow {
    margin-bottom: 18px;
  }
  .proof h2 {
    font-size: 54px;
  }
  .proof-copy > p:not(.eyebrow) {
    font-size: 16px;
    max-width: 340px;
  }
  .proof-facts {
    font-size: 10px;
    gap: 5px;
  }
  .proof-facts span + span:before {
    padding-right: 5px;
  }
  .phone {
    width: min(74vw, 320px);
    border-radius: 32px;
  }
  .film-wrap {
    justify-self: center;
  }
  .app-glimpse {
    display: none;
  }
  .film-caption {
    font-size: 9px;
  }
  .observatory-hero {
    min-height: 980px;
    height: 115svh;
    padding: 114px 7% 32px;
  }
  .observatory-heading h1 {
    font-size: 49px;
  }
  .observatory-heading .eyebrow {
    margin-bottom: 18px;
  }
  .lede {
    font-size: 15px;
    margin: 18px 0;
  }
  .observatory-heading .action {
    padding: 14px 18px;
    font-size: 12px;
    min-height: 50px;
  }
  .specimen {
    inset: 36% -27% 18% -27%;
  }
  .coord-a {
    top: 8%;
    right: 23%;
    font-size: 8px;
  }
  .coord-b {
    left: 22%;
    bottom: 13%;
    font-size: 8px;
  }
  .specimen-label {
    right: 21%;
    bottom: 13%;
    font-size: 7px;
    letter-spacing: 1px;
  }
  .view-console {
    display: block;
    margin: 0;
  }
  .view-buttons {
    gap: 6px;
  }
  .view-buttons button {
    padding: 12px 10px;
    flex: 1;
    font-size: 10px;
    min-height: 52px;
  }
  .view-buttons button span {
    display: block;
    margin: 7px 0 0;
    font-size: 11px;
  }
  .view-description {
    margin-top: 14px;
    max-width: none;
    font-size: 12px;
  }
  .text-link {
    display: inline-block;
    padding: 12px 0;
    font-size: 11px;
  }
  .poster-hero {
    margin: 0 3%;
    padding: 106px 4% 0;
    min-height: 750px;
    height: 100svh;
  }
  .poster-kicker {
    font-size: 8px;
    letter-spacing: 1px;
  }
  .poster-hero h1 {
    font-size: 29vw;
    line-height: 0.89;
    margin-top: 38px;
    transform: scaleX(1.13);
  }
  .poster-hero h1 span:last-child {
    margin-left: 5%;
  }
  .poster-disc {
    width: 52vw;
    height: 52vw;
    top: 38%;
    right: 6%;
  }
  .poster .mountain {
    inset: 27% -80% 16% -80%;
  }
  .poster-stamp {
    width: 96px;
    height: 96px;
    font-size: 15px;
    left: 5%;
    bottom: 22%;
  }
  .poster-stamp span {
    font-size: 7px;
  }
  .poster-footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    left: 5%;
    right: 5%;
    bottom: 4%;
    gap: 18px;
  }
  .poster-footer p {
    font-size: 17px;
  }
  .poster-footer .action {
    grid-column: 1/-1;
    font-size: 12px;
    min-height: 50px;
  }
  .lift-button {
    font-size: 11px;
  }
  .lift-button span {
    margin-left: 4px;
  }
  .poster .proof h2 {
    font-size: 16vw;
  }
  .comparison {
    padding: 125px 7% 40px;
  }
  .comparison h1 {
    font-size: 58px;
  }
  .intro {
    font-size: 17px;
  }
  .concept-grid {
    grid-template-columns: 1fr;
    margin-top: 50px;
    gap: 45px;
  }
  .card-art {
    height: 270px;
  }
  .concept-card h2 {
    font-size: 28px;
  }
  footer {
    padding: 25px 7%;
    font-size: 9px;
    flex-direction: column;
  }
  .lab-note {
    font-size: 11px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *:before,
  *:after {
    animation: none !important;
    transition: none !important;
  }
  .journey {
    height: 100svh;
  }
  .resolve-copy,
  .resolve-phone {
    display: none;
  }
  .hero-bottom > .eyebrow {
    display: none;
  }
}
/* Keep the specimen contained and the graphic headline legible. */
.observatory .specimen {
  right: -1%;
  left: 31%;
}
.coord-b {
  left: 9%;
  bottom: 13%;
}
.specimen-label {
  right: 9%;
  bottom: 13%;
}
.poster .mountain {
  inset: 24% -8% 4% -8%;
}
.poster-hero h1 span:last-child {
  position: relative;
  z-index: 0;
}
.poster-stamp {
  bottom: 24%;
}
.poster .mountain {
  filter: drop-shadow(18px 30px 12px #132a3d22);
}
.light .mountain {
  transform-origin: 60% 42%;
}
.hero-bottom p {
  background: #18374988;
  padding: 12px 16px;
  border-radius: 2px;
}
.static-mode {
  transform: none !important;
  opacity: 1 !important;
}
.no-webgl .journey {
  height: 100svh;
}
.no-webgl .resolve-copy,
.no-webgl .resolve-phone {
  display: none;
}
.no-webgl .light .mountain {
  inset: 30% 0 0;
}
@media (max-width: 760px) {
  .observatory .specimen {
    inset: 36% -25% 18% -25%;
  }
  .coord-b {
    left: 23%;
    bottom: 10%;
  }
  .specimen-label {
    right: 23%;
    bottom: 10%;
  }
  .poster .mountain {
    inset: 31% -80% 12% -80%;
  }
  .hero-bottom p {
    width: max-content;
  }
  .light .mountain {
    transform-origin: 50% 40%;
  }
}
.light .resolve-phone {
  width: auto;
  aspect-ratio: 496/1078;
}
.fallback {
  transition: none;
}
@media (max-width: 760px) {
  .light .resolve-phone {
    left: 50%;
    right: auto;
    margin: 0;
    width: calc(49svh * 496 / 1078);
    height: 49svh;
    max-width: 60vw;
  }
  .resolve-copy h2 {
    font-size: 10vw;
  }
  .resolve-copy h2 br:nth-child(2) {
    display: initial;
  }
}
.transition-note {
  font:
    10px/1.5 "Courier New",
    monospace;
  margin-top: 22px;
  opacity: 0.7;
}
@media (max-width: 760px) {
  .transition-note {
    font-size: 8px;
    margin-top: 14px;
  }
}
/* The photographic fallback must never hide the opening message. */
.light.no-webgl .hero-title {
  z-index: 5;
  text-shadow: 0 2px 18px #17364d55;
}
.light .fallback {
  mask-image: linear-gradient(transparent, #000 22%);
}