.gravity-story {
  position: relative; isolation: isolate; overflow: hidden;
  padding: 100px 6% 110px; background: #071323; color: #f2f5ff;
  text-align: center;
}
.gravity-atmosphere {
  position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(ellipse at 50% 50%, #223963 0%, #0d1d35 40%, #050d19 82%);
}
.gravity-dawn { position: absolute; inset: 0; background: #071323; opacity: 0; }
.gravity-heading { position: relative; }
.gravity-eyebrow { font-size: 12px; font-weight: 400; letter-spacing: .12em; opacity: .6; }
.gravity-heading h2 { font-size: clamp(40px, 5vw, 68px); line-height: 1.2; font-weight: 500; letter-spacing: .02em; margin: 22px 0 18px; }
.gravity-heading p { font-size: 16px; letter-spacing: .12em; opacity: .7; margin: 0; }
.gravity-origin { display: block; width: min(65%, 360px); height: auto; margin: 54px auto 16px; }
.gravity-devices { display: none; }
.gravity-evolution { display: block; width: min(100%, 1080px); height: auto; margin: -16px auto 0; }
.gravity-horizon { opacity: 0; }
.gravity-duality { display: flex; justify-content: space-evenly; gap: 24px; max-width: 1000px; margin: -45px auto 60px; }
.gravity-duality span { color: #a4b9de; font-size: 13px; letter-spacing: .14em; }
.gravity-duality h3 { font-size: clamp(22px, 2.5vw, 34px); font-weight: 400; margin: 14px 0 0; }
.gravity-meaning { max-width: 720px; margin: 0 auto; font-size: 16px; line-height: 1.9; color: #c1cce0; text-wrap: pretty; }
.concept.has-brand-scroll.has-gravity-scroll { height: 800vh; }
.has-gravity-scroll .gravity-story {
  position: absolute; inset: 0; padding: 0; overflow: visible;
  background: transparent; pointer-events: none; visibility: var(--gravity-visible, hidden);
}
.has-gravity-scroll .gravity-atmosphere { left: 50%; right: auto; width: 100vw; transform: translateX(-50%); opacity: var(--gravity-sky, 0); clip-path: var(--space-clip, inset(50%)); }
.has-gravity-scroll .gravity-atmosphere::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 30% 60%, #375a8c55, transparent 48%), radial-gradient(1px 1px at 15% 22%, #c8dcffbb 99%, transparent), radial-gradient(1px 1px at 77% 18%, #c8dcff99 99%, transparent), radial-gradient(1px 1px at 86% 67%, #c8dcff99 99%, transparent), radial-gradient(1px 1px at 21% 84%, #c8dcff88 99%, transparent);
}
.has-gravity-scroll .gravity-dawn { opacity: var(--gravity-dawn, 0); }
.has-gravity-scroll .gravity-heading { position: absolute; inset: 8% 0 auto; opacity: var(--gravity-heading, 0); }
.has-gravity-scroll .gravity-origin { position: absolute; margin: 0; max-width: none; transform-origin: 0 0; }
.has-gravity-scroll .gravity-evolution { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; }
.has-gravity-scroll .gravity-duality {
  position: absolute; inset: 47% 0 auto; width: 100%; max-width: none; margin: 0;
  justify-content: space-between; padding: 0 5%; opacity: var(--gravity-duality, 0);
}
.has-gravity-scroll .gravity-meaning { position: absolute; inset: auto 0 10%; width: 76%; opacity: var(--gravity-duality, 0); }
.gravity-system { position: relative; background: #071323; color: #eff4ff; padding: 48px 0; }
.gravity-system-viewport { width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
.gravity-system-viewport:focus-visible { outline: 1px solid #a7c1ed; outline-offset: -4px; }
.gravity-map { display: block; width: 100%; height: auto; max-width: 1920px; margin: 0 auto; fill: currentColor; font-family: inherit; }
.gravity-system-mobile-hint { display: none; }
.concept.has-brand-scroll.has-gravity-system { height: 1150vh; }
.has-gravity-system .gravity-system { position: absolute; inset: 0; padding: 0; background: transparent; pointer-events: none; visibility: var(--map-visible, hidden); }
.has-gravity-system .gravity-system-viewport { height: 100%; overflow: hidden; }
.has-gravity-system .gravity-map { width: 100%; height: 100%; max-width: none; }
.has-gravity-system .gravity-map-axis { stroke-dasharray: 1; stroke-dashoffset: var(--map-axis, 1); opacity: var(--map-people, 0); }
.has-gravity-system .gravity-map-people { opacity: var(--map-people, 0); }
.has-gravity-system .gravity-map-projection { opacity: var(--map-projection, 0); transform: scaleX(var(--map-projection, 0)); transform-origin: 200px 540px; }
.has-gravity-system .gravity-map-usage { opacity: var(--map-usage, 0); }
.has-gravity-system .gravity-map-emotion { opacity: var(--map-emotion, 0); }
.has-gravity-system .gravity-map-disc { opacity: var(--map-disc, 0); }
.has-gravity-system .gravity-map-scenarios { opacity: var(--map-scenarios, 0); }
.has-gravity-system .gravity-map-foundations { opacity: var(--map-foundations, 0); }
.has-gravity-system .gravity-map-language { opacity: var(--map-language, 0); }
.gravity-system-description { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (max-width: 1000px) {
  .gravity-map { min-width: 1100px; }
  .gravity-system-mobile-hint { display: block; margin: 24px 6% 0; font-size: 13px; color: #b3c8e8; }
  .gravity-system-mobile-hint a { font-size: inherit; text-decoration: underline; }
  .gravity-devices { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 22px; list-style: none; padding: 0; margin: 24px auto; color: #a4b9de; font-size: 13px; max-width: 360px; }
  .gravity-story { padding: 72px 6% 80px; }
}
@media (max-width: 600px) {
  .gravity-origin { margin-top: 40px; }
  .gravity-evolution { margin-top: 16px; }
  .gravity-duality { margin: 12px 0 36px; justify-content: space-between; text-align: left; gap: 16px; }
  .gravity-duality h3 { font-size: 21px; }
  .gravity-meaning { font-size: 15px; text-align: left; }
}