/* Neutral colour while a scene is loading or the browser uses its poster. */
.sn-fb img { filter: grayscale(1); }

/* Chinese component notes sit above the fine-grained sensor tags. */
.xlab {
  z-index: 3;
  box-sizing: border-box;
  width: clamp(218px, 17vw, 300px);
  padding: 13px 15px;
  border: 1px solid rgba(242, 242, 242, .28);
  border-radius: 5px;
  background: rgba(9, 10, 11, .94);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .2);
  white-space: normal;
  line-height: 1.45;
}
.xlab em { font-size: 11px; color: #b8b8b8; margin-bottom: 5px; }
.xlab b { color: #f4f4f4; font-size: clamp(15px, 1.1vw, 18px); font-weight: 600; }
.xlab small { display: block !important; max-width: none; font-size: clamp(12px, .85vw, 14px); line-height: 1.65; color: #c4c4c4; margin-top: 5px; }
.xlabels.compact .xlab { width: 214px; padding: 10px 12px; }
.xlabels.compact .xlab b { font-size: 14px; }
.xlabels.compact .xlab small { font-size: 12px; line-height: 1.5; }
.xlabels .xtag { z-index: 1; background: rgba(8, 9, 10, .8); color: #b7b7b7; }
.xlabels line { stroke: rgba(224, 224, 224, .62); }
.xlabels circle { fill: #f0f0f0; }

@media (max-width: 900px) and (prefers-reduced-motion: no-preference) {
  html.mobile-motion:not(.gl-fail) .rv { opacity: 0; transform: translateY(22px); transition: opacity .65s ease, transform .8s ease !important; }
  html.mobile-motion:not(.gl-fail) .rv.in { opacity: 1; transform: none; }
  html.mobile-motion:not(.gl-fail) [data-split] .ln > .lni { transform: translateY(105%); transition: transform .8s ease !important; }
  html.mobile-motion:not(.gl-fail) [data-split].in .ln > .lni,
  html.mobile-motion:not(.gl-fail) .shot.on .ln > .lni { transform: none; }
  html.mobile-motion:not(.gl-fail) .statement .w { color: var(--stone3); }
  html.mobile-motion:not(.gl-fail) .statement .w.lit { color: var(--bone); }
  /* Keep the complete animated story with a shorter touch-scroll distance. */
  html.mobile-motion:not(.gl-fail) .hero { height: 250svh; }
  html.mobile-motion:not(.gl-fail) .hero .hero-stick { position: sticky; top: 0; height: 100svh; min-height: 0; padding: 0; display: block; overflow: hidden; }
  html.mobile-motion:not(.gl-fail) .hero .hero-gl,
  html.mobile-motion:not(.gl-fail) .hero .hero-vig { display: block; position: absolute; inset: 0; }
  html.mobile-motion:not(.gl-fail) .hero .shots { position: absolute; inset: 0; padding: 0; }
  html.mobile-motion:not(.gl-fail) .hero .shot { display: block; position: absolute; top: auto !important; left: var(--pad) !important; right: var(--pad) !important; bottom: clamp(112px, 17svh, 185px) !important; max-width: none; width: auto; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .4s ease, visibility .4s; }
  html.mobile-motion:not(.gl-fail) .hero .shot.on { opacity: 1; visibility: visible; pointer-events: auto; }
  html.mobile-motion:not(.gl-fail) .hero .shot.right { text-align: left; }
  html.mobile-motion:not(.gl-fail) .hero .shot .label { margin-bottom: 14px; }
  html.mobile-motion:not(.gl-fail) .hero .shot .lead { font-size: 14px; line-height: 1.75; margin-top: 16px; max-width: 31em; }
  html.mobile-motion:not(.gl-fail) .hero .shot .ctas { margin-top: 16px; }
  html.mobile-motion:not(.gl-fail) .hero .hero-poster { position: absolute; inset: 0; margin: 0; opacity: 1 !important; }
  html.mobile-motion:not(.gl-fail) .hero.gl-ready .hero-poster { opacity: 0 !important; }
  html.mobile-motion:not(.gl-fail) .hero .hero-poster picture,
  html.mobile-motion:not(.gl-fail) .hero .hero-poster img { width: 100%; height: 100%; object-fit: contain; }
  html.mobile-motion:not(.gl-fail) .hero .hero-rail { display: flex; position: absolute; inset: auto var(--pad) 22px; gap: 14px; font-size: 9px; }
  html.mobile-motion:not(.gl-fail) .hero-skip { position: absolute; left: auto; right: var(--pad); bottom: 56px; margin: 0; font-size: 12px; }

  /* The studio stays fully framed, but its interactive canvas has enough room. */
  #studio.vstudio.interactive-ready .vs-gl { height: clamp(300px, 52svh, 520px); }
  #studio.vstudio .vs-gl canvas { touch-action: pan-y; }

  html.mobile-motion:not(.gl-fail) .sense { height: 250svh; }
  html.mobile-motion:not(.gl-fail) .sense .sn-stick { position: sticky; top: 0; height: 100svh; min-height: 0; display: block; overflow: hidden; }
  html.mobile-motion:not(.gl-fail) .sense .sn-gl,
  html.mobile-motion:not(.gl-fail) .sense .sn-fb { display: block !important; position: absolute; inset: 0; }
  html.mobile-motion:not(.gl-fail) .sense .sn-fb { opacity: 1 !important; }
  html.mobile-motion:not(.gl-fail) .sense.model-ready .sn-fb { opacity: 0 !important; pointer-events: none; }
  html.mobile-motion:not(.gl-fail) .sense .sn-fb picture,
  html.mobile-motion:not(.gl-fail) .sense .sn-fb img { width: 100%; height: 100% !important; object-fit: contain; }
  html.mobile-motion:not(.gl-fail) .sense .sn-ui { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; height: 100%; padding: calc(var(--nav) + 20px) var(--pad) 22px; pointer-events: none; }
  html.mobile-motion:not(.gl-fail) .sense .sn-head { position: relative; inset: auto; padding: 0; max-width: none; }
  html.mobile-motion:not(.gl-fail) .sense .sn-head h2 { font-size: 29px; line-height: 1.23; margin: 15px 0; }
  html.mobile-motion:not(.gl-fail) .sense .sn-head .lead { max-width: 29em; font-size: 13px; line-height: 1.7; text-shadow: 0 1px 8px #000; }
  html.mobile-motion:not(.gl-fail) .sense .sn-steps { position: relative; inset: auto; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: rgba(9, 10, 11, .9); }
  html.mobile-motion:not(.gl-fail) .sense .sn-steps li { padding: 10px 7px 10px 0; min-width: 0; font-size: 10px; }
  html.mobile-motion:not(.gl-fail) .sense .sn-steps li span { font-size: 12px; }
  html.mobile-motion:not(.gl-fail) .sense .sn-steps li em { font-size: 9px; margin-bottom: 5px; }

  html.mobile-motion:not(.gl-fail) .xsec { height: 320svh; }
  html.mobile-motion:not(.gl-fail) .xsec .xstick { position: sticky; top: 0; height: 100svh; min-height: 0; display: block; overflow: hidden; }
  html.mobile-motion:not(.gl-fail) .xsec .xgl,
  html.mobile-motion:not(.gl-fail) .xsec .xfb,
  html.mobile-motion:not(.gl-fail) .xsec .xlabels { display: block !important; position: absolute; inset: 0; }
  html.mobile-motion:not(.gl-fail) .xsec .xfb { opacity: 1 !important; }
  html.mobile-motion:not(.gl-fail) .xsec.model-ready .xfb { opacity: 0 !important; pointer-events: none; }
  html.mobile-motion:not(.gl-fail) .xsec .xfb picture,
  html.mobile-motion:not(.gl-fail) .xsec .xfb img { width: 100%; height: 100% !important; object-fit: contain; }
  html.mobile-motion:not(.gl-fail) .xsec .xui { position: absolute; inset: 0; }
  html.mobile-motion:not(.gl-fail) .xsec .xhead { position: absolute; top: calc(var(--nav) + 20px); left: var(--pad); right: var(--pad); padding: 0; }
  html.mobile-motion:not(.gl-fail) .xsec .xhead h2 { font-size: 29px; line-height: 1.23; }
  html.mobile-motion:not(.gl-fail) .xsec .xhead .lead { font-size: 13px; line-height: 1.7; }
  html.mobile-motion:not(.gl-fail) .xsec .xlab,
  html.mobile-motion:not(.gl-fail) .xsec .xlabels.compact .xlab { width: calc(100% - var(--pad) * 2); max-width: 430px; padding: 12px 15px; }
  html.mobile-motion:not(.gl-fail) .xsec .xlab b { font-size: 16px; }
  html.mobile-motion:not(.gl-fail) .xsec .xlab small { font-size: 13px; line-height: 1.6; }
  html.mobile-motion:not(.gl-fail) .xsec .xtag { display: none; }
  html.mobile-motion:not(.gl-fail) .xsec .xprog { display: flex !important; position: absolute; left: var(--pad); right: var(--pad); bottom: 22px; font-size: 9px; }

  /* Bring the dispatch visualisations back without concealing table content. */
  html.mobile-motion:not(.gl-fail) .mobile-network,
  html.mobile-motion:not(.gl-fail) .mobile-events { display: none; }
  html.mobile-motion:not(.gl-fail) .infer { height: 230svh; }
  html.mobile-motion:not(.gl-fail) .infer-stick { position: sticky; top: 0; height: 100svh; min-height: 0; display: grid; grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; }
  html.mobile-motion:not(.gl-fail) .infer-t { padding: calc(var(--nav) + 20px) var(--pad) 18px; border-bottom: 1px solid var(--hl); }
  html.mobile-motion:not(.gl-fail) .infer-t .d-md { font-size: 29px; }
  html.mobile-motion:not(.gl-fail) .infer-steps { display: none; }
  html.mobile-motion:not(.gl-fail) .infer-c { display: block; min-height: 0; }
  html.mobile-motion:not(.gl-fail) .lanes { height: 62svh; min-height: 360px; padding: 0; }
  html.mobile-motion:not(.gl-fail) .lanes > canvas,
  html.mobile-motion:not(.gl-fail) .city > canvas { display: block; }
  html.mobile-motion:not(.gl-fail) .city { height: 58svh; min-height: 340px; }
}
@media (max-width: 900px) and (max-height: 500px) and (prefers-reduced-motion: no-preference) {
  html.mobile-motion:not(.gl-fail) .hero .shot { bottom: 76px !important; max-width: 62%; }
  html.mobile-motion:not(.gl-fail) .hero .shot .d-xxl { font-size: 34px; }
  html.mobile-motion:not(.gl-fail) .hero .shot .lead { font-size: 12px; line-height: 1.5; margin-top: 8px; }
  html.mobile-motion:not(.gl-fail) .hero .shot .label { margin-bottom: 8px; }
  html.mobile-motion:not(.gl-fail) .sense .sn-head { max-width: 45%; }
  html.mobile-motion:not(.gl-fail) .sense .sn-head h2 { font-size: 23px; }
  html.mobile-motion:not(.gl-fail) .sense .sn-head .lead { display: none; }
  html.mobile-motion:not(.gl-fail) .sense .sn-steps { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  html.mobile-motion:not(.gl-fail) .xsec .xlab,
  html.mobile-motion:not(.gl-fail) .xsec .xlabels.compact .xlab { max-width: 320px; padding: 10px 12px; }
  html.mobile-motion:not(.gl-fail) .xsec .xhead h2 { font-size: 24px; }
}